/* ============================================================
   Kontakt – Seitenabschluss
   Zwei honey-Trapeze (links Text, rechts leer) + Lightbox.
   Analog Baukaesten: eigene <section> nach dem .raster-crop.
   ============================================================ */

.kontakt {
  background-color: transparent;
  /* negativer margin zieht die Sektion nach oben, damit der Lavender-
     Streifen zwischen Baukaesten und Kontakt schmaler wird */
  margin-top: -5vw;
  padding-bottom: 0;
  overflow: visible;
}

.kontakt-row {
  display: flex;
  /* stretch: das rechte Tile wird auf die Hoehe des linken gezogen
     (Kunde: "rechtes genauso hoch wie linkes"). Das linke definiert die
     Hoehe ueber seine aspect-ratio. Der clip-%-Wert des rechten ist
     entsprechend an diese gestretchte Hoehe angepasst (siehe
     section-kontakt.php, ~12.24%) – NICHT an seine eigene aspect-ratio.
     Hinweis: waechst der Textblock links stark, waechst auch das rechte
     Tile mit; der rechte Winkel driftet dann minimal. Bei dem kurzen,
     fixen Kontakttext praktisch irrelevant. */
  align-items: stretch;
  /* durchgehender Streifen zwischen den Trapezen = Lavender-Body durch
     den Gap. 20/1440 (Kunde). */
  gap: calc(20 / 1440 * 100vw);
}

/* Breitenverhaeltnis links:rechts aus den Figma-Shapes:
   Vector 20 = 1100 breit, Vector 16 = 703 breit -> ~61 : 39 */
.kontakt-tile {
  background-color: var(--indigo);
}

.kontakt-tile--links {
  flex: 0 0 calc(61% - (10 / 1440 * 100vw));
  aspect-ratio: 1100 / 691;
  display: flex;
}

.kontakt-tile--rechts {
  flex: 0 0 calc(39% - (10 / 1440 * 100vw));
  /* KEINE aspect-ratio: Hoehe kommt via stretch vom linken Tile.
     margin-top zieht das rechte Trapez nach oben, bis seine obere
     Schraege mit der linken fluchtet (Streifen oben gleich dick).
     Wert in % (loest gegen die Container-Breite auf) statt vw: der
     noetige Versatz skaliert proportional zur Breite, deshalb sitzt -5.5%
     auf 1400/1600/1800px gleichermassen korrekt – ein fester vw-Wert
     wuerde driften. Auf Mobile ueberschrieben (Trapeze untereinander). */
  margin-top: -5.5%;
}

/* Inhalt linksbuendig mit Padding. Das Padding sitzt am inner-Wrapper
   (nicht am Tile), weil das Tile per clip-path oben beschnitten ist –
   so bleibt der Text sicher innerhalb der sichtbaren Flaeche. */
.kontakt-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* oben mehr Padding: haelt Text unter der oberen clip-Schraege frei.
     links 16% (Kunde). */
  padding: 16% 8% 8% 16%;
  color: var(--honey);
  text-align: left;
}

.kontakt-text h2 {
  margin-bottom: 0.6em;
}

.kontakt-text p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, calc(20 / 1440 * 100vw), 26px);
  line-height: 1.55;
}

.kontakt-text a {
  color: var(--honey);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kontakt-text a:hover,
.kontakt-text a:focus-visible {
  text-decoration: none;
}

/* Impressum | Datenschutz – mit Abstand zum Kontaktblock */
.kontakt-legal {
  margin-top: 2.4em;
  display: flex;
  gap: 1.6em;
}

.kontakt-legal__link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(14px, calc(17 / 1440 * 100vw), 22px);
  color: var(--honey);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kontakt-legal__link:hover,
.kontakt-legal__link:focus-visible {
  text-decoration: none;
}

/* ============================================================
   Lightbox (Impressum / Datenschutz) – honey Panel
   Eigenes Modul, unabhaengig von der Video-Lightbox.
   ============================================================ */

.kontakt-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(45, 32, 74, 0.72);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  z-index: 200;
}

.kontakt-lightbox.is-open {
  display: flex;
}

.kontakt-lightbox__panel {
  background: var(--honey);
  color: var(--indigo);
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 48px;
  position: relative;
  border-radius: 2px;
}

.kontakt-lightbox__panel h2 {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 24px;
  color: var(--indigo);
}

.kontakt-lightbox__panel h3 {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 15px;
  margin: 24px 0 8px;
  color: var(--indigo);
}

.kontakt-lightbox__panel p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px;
  color: #3a2f52;
}

.kontakt-lightbox__panel a {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kontakt-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--indigo);
  font-size: 22px;
  line-height: 1;
}

/* ============================================================
   Mobile: Trapeze untereinander, keine clip-path-Schraege
   (die Schraege ergibt nur im 2-Spalten-Layout Sinn).
   ============================================================ */

@media (max-width: 1024px) {
  .kontakt-row {
    flex-direction: column;
    gap: 0;
  }

  .kontakt {
    /* margin-top 0 (Kundenwunsch Mica 2026-09-04): vorher var(--space-l)
       = 40px zusaetzlich zum ohnehin vorhandenen Abstand. Der sichtbare
       Lavender-Streifen entsteht naemlich schon allein aus dem Schraeg-
       versatz der Oberkante (clip-path an .kontakt-tile--links, ~20px) -
       der margin addierte sich darauf und machte den Abstand hier deutlich
       breiter als den ueber den Baukaesten-Karten.

       Mit 0 sind beide Uebergaenge gleich: oben wie unten besteht der
       Abstand nur noch aus dem jeweiligen clip-path-Versatz (das Row-
       Padding der Baukaesten steht seit 2026-09-04 ebenfalls auf 0).

       Die Winkel fluchten dabei: Kontakt-Oberkante ↘ 20px ueber volle
       Breite = 2.7 deg; Karten-Unterkante ↘ 0.76 x 20px ueber ~328px
       Kartenbreite = ebenfalls 2.7 deg (siehe Winkel-Korrektur in
       baukaesten-new.css).

       Desktop bleibt unberuehrt (dort -5vw, zieht die Sektion hoch).
       ROLLBACK: margin-top: var(--space-l, 40px); */
    margin-top: 0;
    padding-bottom: 0;
  }

  .kontakt-tile--links {
    flex: 1 1 auto;
    aspect-ratio: auto;
    /* Schraege oben: von links nach rechts ABFALLEND (linke ob. Ecke
       oben=0, rechte ob. Ecke tiefer) - bewusst ANDERSHERUM als die
       Baukaesten-Karten. Versatz clamp(20px,2.5vw,40px) = Sektions-
       Standard. !important, weil der Clip inline im Template sitzt. */
    clip-path: polygon(0% 0%, 100% clamp(20px, 2.5vw, 40px), 100% 100%, 0% 100%) !important;
  }

  .kontakt-tile--rechts {
    /* leeres rechtes Trapez mobil komplett entfernen (Kundenwunsch) -
       braucht es im 1-spaltigen Stapel nicht. */
    display: none;
  }

  .kontakt-inner {
    /* padding-top haelt den Text frei von der oberen Schraege. */
    padding: var(--space-l, 40px) var(--space-m, 24px) var(--space-l, 40px);
  }

  .kontakt-lightbox__panel {
    padding: 32px 24px;
  }
}