/* ============================================================
   Kopfbereich /kontakt/ - am Original nachgemessen
   ============================================================
   (/opt/tooling/kontakt1.mjs, /opt/tooling/kontakt2.mjs, 1440x900)

     Sektion       0..747 im Dokument (Kopfzeile 74px liegt darueber)
     Textspalte    810px breit, zentriert (315..1125)
     h2 "Kontakt"  y=197, 29/700/34.8
     Absatz        y=253, 810px breit -> genau 3 Zeilen
     Knopfreihe    74px Abstand, space-evenly, Knoepfe 69px hoch,
                   Innenabstand 23px, Radius 18px, Abstand Symbol/Text 15px
     Wasserfoto    0,174 1440x747, object-fit cover, unten von der
                   Sektion beschnitten

   Vorher: Absatz nur 558px breit (5 statt 3 Zeilen), Knoepfe 57px hoch mit
   24px Abstand statt space-evenly, Foto nur 320px hoch und erst bei y=470 -
   dadurch lag alles darunter um ueber 100px versetzt. */
.section--kontakt-intro {
  position: relative; overflow: hidden;
  height: 673px;                 /* 747 im Dokument minus 74px Kopfzeile */
  padding: 0;
}
.section--kontakt-intro > .container {
  position: relative; z-index: 2;
  max-width: 810px; padding: 123px 0 0;
}
.section--kontakt-intro .page-title--text { margin: 0 0 21px; }
/* Original-Eigenheit: der Kontakt-Titel ist auf dem Desktop 29px (Sektions-
   preset), unter 1200px aber 32px - Framer schaltet dort auf den Innenseiten-
   Titel-Preset (j9os70) um (getComputedStyle: @1440 29/34.8, @1199 & @390
   32/38.4). Unser .page-title--text faellt via Token auf 23px ab; hier explizit
   auf den gemessenen Wert zurueckgesetzt. Impressum/Datenschutz behalten 23px
   (dort misst das Original ebenfalls 23) - der Sonderfall gilt nur fuer Kontakt. */
@media (max-width: 1199px) {
  .section--kontakt-intro .page-title--text { font-size: 32px; line-height: 38.4px; }
}
.section--kontakt-intro .section-intro {
  margin: 0; max-width: none;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.contact-cards {
  display: flex; justify-content: space-evenly; align-items: center;
  gap: 0; margin: 0; padding-top: 74px; flex-wrap: wrap;
}
.contact-card {
  display: inline-flex; align-items: center; gap: 15px;
  background: #fff;
  border: 1px solid var(--color-border); border-radius: 18px;
  /* Lauf 7b: vertikal 22px - Original-Knoepfe sind an ALLEN Breiten 69px
     hoch (Icon 23 + 2x22 + 2x1 Rahmen); unsere 23er ergaben 71. */
  padding: 22px 23px; font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  transition: color var(--duration-hover) var(--ease-smooth),
              box-shadow var(--duration-hover) var(--ease-smooth);
}
.contact-card__label { font-size: var(--fs-body); line-height: var(--lh-body); }
.contact-card svg { flex: 0 0 auto; transition: color var(--duration-hover) var(--ease-smooth); }
/* Hover-Sweep 2026-07 (am Original gemessen + Screenshot-Beleg): die
   Kontaktkarten bekommen beim Hover den Schatten-Glow 0 0 47px rgba(0,0,0,.23),
   Text UND Icon dunkeln von Grau auf #333. Kein Fond-/Rahmenwechsel, keine
   Anhebung, kein Farbakzent - das war erfunden. */
.contact-card:hover {
  color: var(--color-text);
  box-shadow: 0 0 47px rgba(0,0,0,.23);
}
.contact-card:hover svg { color: var(--color-text); }

/* Das Foto liegt hinter dem Text und beginnt 100px unterhalb des
   Sektionsanfangs (= y=174 im Dokument). Die Sektion schneidet es unten ab. */
.wave-banner {
  position: absolute; left: 0; right: 0; top: 100px; z-index: 1;
  height: 747px; line-height: 0;
}
.wave-banner img { width: 100%; height: 100%; object-fit: cover; }

/* Weisser Fond: deckt mobil den unteren (weissen) Teil des Wellenfotos ab,
   das im Original hinter diese Sektion laeuft. */
.section--formular { background: var(--color-bg); }
.section--standort { background: var(--color-bg); }
.form-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-8); align-items: start; }
/* Desktop-Geometrie am Original (@1440): Textspalte 258px bei x189,
   Formularspalte 550px bei x701 (Luecke 254), Inhaltsbreite 1062. */
@media (min-width: 1200px) {
  .section--formular > .container,
  .section--standort > .container { max-width: 1110px; }
  .form-grid { grid-template-columns: 258px 550px; column-gap: 254px; }
}
.form-grid__text p { color: var(--color-text-muted); }

/* Feldmasse am Original (beide Breiten identisch, Vergleichslauf
   2026-07-24): Felder 52 hoch, Nachricht 155, Senden 52, 15er-Raster. */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.form-row .form-field { margin-bottom: 0; }
.form-field { margin-bottom: 15px; }
.form-field textarea { height: 155px; display: block; }
.form-field input, .form-field textarea {
  width: 100%; padding: 13.5px 16px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface);
  font: inherit; color: var(--color-text); resize: vertical;
  transition: border-color var(--duration-fast) var(--ease);
}
/* Hover-Sweep 2026-07: das Original gibt den Eingabefeldern KEINE
   Hover-Rueckmeldung (nur Fokus) - der in Lauf 4 ergaenzte Rahmen-Hover ist
   wieder entfernt, focus-visible bleibt. */
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-text-muted); }
.form-field input:focus-visible, .form-field textarea:focus-visible {
  outline: 2px solid var(--color-brand-blue-text); outline-offset: 1px;
}
.btn--submit {
  width: 100%; background: var(--color-text); color: #fff; border: none;
  padding: 14.5px 16px; font-weight: var(--fw-bold); border-radius: var(--radius-sm); cursor: pointer;
}
/* Original (gemessen): "Senden" reagiert beim Hover NUR mit opacity 1->0.8
   (Fond bleibt, kein Schatten, keine Anhebung). */
.btn--submit { transition: opacity var(--duration-hover) var(--ease-smooth); }
.btn--submit:hover {
  opacity: .8;
  /* Basisregeln (.btn:hover in base.css) neutralisieren: */
  background: var(--color-text); border-color: transparent;
  transform: none; box-shadow: none;
}
.btn--submit:active { background: #333; }
.btn--submit:disabled { background: var(--color-text-muted); cursor: not-allowed; }

.standort-row {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); font-weight: var(--fw-bold);
  /* Original: Adresse 47px UNTER der Karte (Karte endet 1815, Adresse 1862
     @1440; Vergleichslauf 2026-07-24). */
  margin-top: 47px;
}

/* ============================================================
   Google-Maps klick-laedt (KLICK-PRINZIP)
   ============================================================
   Am Original nachgemessen (spekter-extract-embeds.mjs @1440): das echte
   Maps-<iframe> ist 1062x470 (Seitenverhaeltnis ~2.26:1) und fuellt die
   Inhaltsspalte unter "So finden Sie uns". Der Platzhalter uebernimmt exakt
   diese Groesse/Proportion, damit beim Ersetzen durch das iframe nichts
   springt. Beim Laden 0 externe Requests - nur dieser lokale Platzhalter. */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 1062 / 470;
  /* Ueberschrift endet 1318, Karte beginnt 1345 (@1440). */
  margin-top: 27px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
/* Dezenter "Karten"-Hintergrund: feines Raster + weicher Farbverlauf, damit
   der Platzhalter als Kartenflaeche lesbar ist, ohne etwas Externes zu laden. */
.map-embed__cta {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2);
  width: 100%; height: 100%;
  margin: 0; padding: var(--space-5);
  border: 0; cursor: pointer; text-align: center;
  color: var(--color-text);
  background-color: #eef1f4;
  background-image:
    linear-gradient(rgba(0, 155, 217, 0.06), rgba(0, 155, 217, 0.06)),
    linear-gradient(0deg, rgba(51, 51, 51, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 51, 51, 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
  transition: background-color var(--duration-hover) var(--ease-smooth);
}
.map-embed__cta:hover { background-color: #e6eaef; }
.map-embed__cta:focus-visible {
  outline: 2px solid var(--color-brand-blue-text); outline-offset: -3px;
}
.map-embed__pin { color: var(--color-brand-blue-text); line-height: 0; }
.map-embed__title { font-weight: var(--fw-bold); font-size: 18px; line-height: 1.2; }
.map-embed__hint {
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--color-text-muted); max-width: 44ch;
}
.map-embed__frame { display: block; width: 100%; height: 100%; border: 0; }
.map-embed.is-loaded { background: #fff; }

@media (max-width: 809px) {
  /* Auf schmalen Viewports die feste Proportion aufgeben: das Original
     zeigt die Karte mobil HOCHKANT, 312x420 @390 (Vergleichslauf 2026-07-24). */
  .map-embed { aspect-ratio: auto; height: 420px; margin-top: 26px; }
  .map-embed__hint { display: none; }
  /* Adresse mobil: 39px unter der Karte, Text bricht wie im Original in
     3 Zeilen (Blockbreite 199px), Pin links daneben. */
  .standort-row { margin-top: 39px; }
  .standort-row span { max-width: 199px; }

}

/* Die feste Sektionshoehe und die 810px-Spalte gelten nur, solange sie
   hineinpassen - darunter waechst die Sektion wieder mit ihrem Inhalt, sonst
   wuerde der Text unter dem Foto abgeschnitten. */
@media (max-width: 1000px) {
  /* Am Original nachgemessen (@390, Vergleichslauf 2026-07-24): H1 y150
     (Polster 76), Intro-Ende 389 -> Telefonknopf 440 (51), Knopfabstand 39.
     Das Wellenfoto ist mobil ein 390x814-cover-Ausschnitt des Gesamtmotivs,
     der bei y=247 BEGINNT (also hinter dem weissen oberen Bildteil unter dem
     Text liegt) und bis y=1061 HINTER die Formular-Sektion laeuft; sichtbar
     ist die Wasserflaeche ~642..828. Die Sektion selbst endet mit den
     Knoepfen (617) + 197px Luft -> Formular beginnt wie im Original bei 814. */
  .section--kontakt-intro { height: auto; padding-bottom: 0; overflow: visible; margin-bottom: 197px; }
  .section--kontakt-intro > .container {
    max-width: var(--container-max); padding: 76px var(--container-pad) 0;
  }
  .contact-cards { gap: 39px; justify-content: center; padding-top: 51px; }
  .wave-banner {
    position: absolute; top: 173px; bottom: auto; left: 0;
    width: 100%; height: 814px; z-index: -1;
  }
  .wave-banner img { object-position: 50% 50%; }
}

@media (max-width: 809px) {
  /* Textspalte ueber dem Formular gestapelt, ABER Name/Email bleiben wie im
     Original zweispaltig (je ~170px, 18px Seitenrand). Masse am Original
     (@390): Felder 52 hoch, Nachricht 155, Senden 52, Zwischenraeume 15;
     Kopf und Einleitung zentriert (Vergleichslauf 2026-07-24). */
  .form-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Lauf 7b: Feldhoehen am Original 52,4 / 155,2 (bei 320 UND 768
     nachgemessen; die alte 52er-Messung war gerundet). */
  .form-grid input, .form-grid select { height: 52.4px; }
  .form-grid textarea { height: 155.2px; }
  .form-grid button[type="submit"], .form-grid .btn { height: 52.4px; }
  /* Lauf 7b: Formular-/Standort-H2 tragen mobil 21px Textabstand
     (Original @390: 938 -> 959; @320 identisch), nicht 16. */
  .section--formular h2, .section--standort h2 { margin-bottom: 21px; }
  .section--formular > .container { padding-left: 18px; padding-right: 18px; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .form-grid__text { text-align: center; }
  /* Formular-Ende (Senden+96) stoesst im Original direkt an die
     Standort-Sektion (1463 -> 1464): kein zusaetzliches Kopfpolster. */
  .section--standort { padding-top: 0; }
}

/* ---- Lauf 7 (2026-07-30): Tablet-Band, am Original @768 nachgemessen.
   Die Kontakt-Chips stehen dort GESTAPELT (Telefon ueber Mail, mittig,
   39px Abstand - wie @390 durch Umbruch), nicht nebeneinander (-106px
   docH). Formular-/Standort-H2 tragen 21px Abstand zum Folgetext
   (848 -> 869), nicht die 16px aus --space-4. */
@media (min-width: 640px) and (max-width: 809px) {
  .contact-cards { flex-direction: column; align-items: center; }
  /* Text -> Formular-Naht 51px wie im Original (914 -> 965): Grid-Gap 35
     statt der 32 aus dem 809er-Block. */
  .form-grid { gap: 35px; }
  /* Wellenfoto-Box im Original @768: 768x724,4 ab y=247 (cover) -
     unsere 814 verschob den Wellenkamm ~60px nach unten (Band 3). */
  .wave-banner { height: 724.4px; }
  /* Adresse steht im Original @768 EINZEILIG (577px breit, 1864,6 -
     h23); die 199px-Deckelung der 390er-Messung brach sie 3-zeilig um
     (+45px docH). Kartenbox 420px Inhalt (Original 1405,6..1825,6);
     unsere 420 inkl. 2x1px Rahmen ergaben 418. */
  .standort-row span { max-width: none; }
  .map-embed { height: 422px; }
  /* Formular bleibt im Original @768 in HANDY-Breite: Spalte 354px
     mittig (x=207..561), Felder 52,4 / Nachricht 155,2 hoch. */
  .form-grid__form { max-width: 354px; width: 100%; margin: 0 auto; }
}

/* Lauf 7b (2026-07-30): @320 fuehrt das Original die Formular-TEXTspalte
   mit 39px Seitenrand (p x=39, Breite 242 -> 4 Zeilen), waehrend die
   FELDER bei 18px bleiben; unsere 18px machten den Text 284 breit
   (3 Zeilen, -22,5px docH). */
@media (max-width: 359px) {
  .form-grid__text { padding-left: 21px; padding-right: 21px; }
  /* Adresse @320 im Original: Textblock 129px breit (x=113) und FUENF
     Zeilen (112,5) - "Straße 9," und "91074" stehen getrennt; 110px
     erzwingt dasselbe Umbruchbild. */
  .standort-row span { max-width: 110px; }
  /* Formularfelder behalten @320 ihre 354px-Spalte und haengen beidseitig
     17px ueber (Original: textarea x=-17, w=354). */
  .form-grid__form { width: 354px; max-width: none; margin: 0 calc((100% - 354px) / 2); }
}