/* ------------------------------------------------------------
   SEKTION: Hero - Foto-Variante der Kernel-Hero-Komponente
   (assets/style.css Abschnitt 22, `.hero-full`, Muster pages/index.css).
   Bildmotiv: Paar stößt mit Rotwein in dunkler, moderner Küche an,
   Hochformat 1600×2400 (Seitenverhältnis 2:3 ≈0,667) für ≥561px, eigener
   Hochformat-Zuschnitt hero-models-mobil.jpg (900×1350, dasselbe
   Seitenverhältnis ≈0,667) für ≤560px.
   Korrekturrunde fotos-models-profil (07.09.2026) - Kommentar korrigiert:
   die vorherige Fassung behauptete, cover skaliere „auf jeder Breite" über
   die Bildbreite (volle Breite sichtbar, nur Y wirksam). Das gilt
   nachgemessen NUR ab 561px, wo die Hero-Fläche breiter ist als das Bild
   (Flächenverhältnis Breite/Höhe > 0,667) - cover füllt dort die Breite,
   X ist wirkungslos, Y wählt den Ausschnitt. Unterhalb 561px ist die
   Hero-Fläche selbst schmaler als das Bildverhältnis (375×812 ≈0,507,
   320px ≈0,463 < 0,667) - cover füllt dort die HÖHE, Y ist wirkungslos,
   X wählt den Ausschnitt (kippt bei 560px zurück: Fläche dort ≈0,68 >
   0,667, wieder Breite gefüllt). Gemessen: bei 375px liegt der sichtbare
   natürliche x-Bereich bei 108-792 von 900 (76,1% der Breite), bei 320px
   bei 65,5% - beide Werte umschließen die Personen (Gesichter horizontal
   zentriert im Mobil-Zuschnitt), der Desktop-Default 50% X trifft den
   Mobil-Ausschnitt also bereits richtig, ohne eigene Media Query. Werte
   für ≥561px per DOM+Canvas gemessen (H1-Textkante per
   getBoundingClientRect vs. Personen-Kante per Canvas-Warmton-Sampling im
   H1-Höhenband, Methode wie index-Review), siehe Kommentare an den
   einzelnen Regeln. -- */

/* Eyebrow hier hero-lokal aufgehellt: --ivory-62 (Kernel-Wert für volles
   Navy, .on-navy .eyebrow) fällt gegen den hellen Bildhintergrund unter
   4.5:1 (WCAG AA) - identisch zum Befund auf index.html. --ivory besteht
   überall ≥6.3:1. */
#hero .eyebrow { color: var(--ivory); }

/* Bildausschnitt: object-position-Y (46%) wirkt NUR ab 561px (Desktopbild,
   Fläche füllt Breite) - X (50%) ist dort wirkungslos. 46% zeigt oben noch
   die dunkle Wand, darunter die Gesichter vollständig und die Weingläser
   knapp angeschnitten am unteren Rand - Warmton-Kante der Person (Canvas-
   Sampling, Rows unterhalb 45 Luminanz durchgehend Wand/Schatten) liegt
   bei 1440px im gemessenen H1-Höhenband (natürliche Bildzeilen 795-918)
   erst ab ≈47,6% der Flächenbreite (konservative Schwelle 35; ab
   Schwelle 45/55 sogar erst 62-64%). Bis 560px (Mobilbild) skaliert cover
   über die Höhe: Y ist dort wirkungslos, X (50%) wählt den Ausschnitt -
   siehe Kommentar oben, kein eigener Mobil-Block nötig, der Default trifft
   die zentrierten Gesichter bereits. */
#hero .hero-bg img { object-position: 50% 46%; }

/* Scrim: Links-Rechts-Gradient wie index.html - links (Textzone) nahezu
   deckend Navy für sicheren AA-Kontrast, nach rechts abfallend, damit das
   Paar dort klar sichtbar bleibt. Stopps per Canvas-Sampling gegen die
   tatsächlichen Foto-Pixel geprüft (siehe Verifikation). */
#hero .hero-scrim {
  background: linear-gradient(90deg,
    rgba(var(--navy-rgb), .96) 0%,
    rgba(var(--navy-rgb), .86) 30%,
    rgba(var(--navy-rgb), .55) 55%,
    rgba(var(--navy-rgb), .32) 100%);
}

/* H1-Breitenbegrenzung: 46% ist eine großzügige Box-Obergrenze, nicht die
   tatsächlich genutzte Breite - bei 2 Wörtern/Zeile (siehe Schriftgrad-
   Regel unten) bleibt die längste Zeile bei 1440px real bei 463px/32,6%
   Flächenbreite (DOM-Range gemessen), gegen die Person bei ≈47,6%
   (Bild-Kommentar oben) bleibt so durchgehend ≥15 Prozentpunkte/≈213px
   Abstand. */
#hero .hero-h1 { max-width: 46%; }

/* Eigene, kleinere Display-Schriftgröße nur für die jetzt schmalere
   Textzone (>720px) - Muster identisch zu pages/index.css. Ohne diese
   Reduktion reißt „Lerne die Darlinge kennen." bei --fs-h1 (bis 92px) auf
   3 Zeilen mit zwei Einzelwort-Waisen („Darlinge"/„kennen." je allein auf
   ihrer Zeile) - gemessen bei 1440px. */
@media (min-width: 721px) {
  #hero .hero-h1 { font-size: clamp(28px, 3.6vw, 58px); }
}

/* Korrekturrunde fotos-models-profil (SPERR-Befund, 07.09.2026): im Band
   721-1100px ist die Hero-Fläche schmal/hoch, .lead (max-width 520px) und
   die Caption-Zeile laufen bis 73-78% der Hero-Breite - mitten in den
   hellen Teil des Desktop-Verlaufs (Zeile 50-56), wo das weiße Hemd des
   Mannes durchschlägt (Foto-Luminanz bis 167,8). Gemessen (Frisch-Load,
   Canvas-Sampling, Text-Alpha komponiert, schlechteste Zone): 768x1024 →
   p.lead 3,33:1, 820x1180 → 3,04:1, 900x1024 → a „FAQ weiter unten" 2,11:1,
   1024x900 → 3,45:1, 1050x900 → 3,77:1 - durchweg unter AA 4,5:1. Eigene,
   dunklere Kurve nur in diesem Band (721-1100px bleibt unberührt außerhalb,
   ≤720px hat bereits die eigene Kurve unten). Endstopp muss ≥.78 sein - die
   bloße Übernahme der ≤720px-Kurve (Endstopp .68) reicht NICHT (bringt
   900px nur auf 4,44:1). Nachgemessen (Frisch-Load, schlechteste Zone):
   730 → 6,08:1, 768 → 6,08:1, 820 → 6,09:1, 900 → 4,87:1, 1024 → 5,50:1,
   1050 → 5,58:1. */
@media (min-width: 721px) and (max-width: 1100px) {
  #hero .hero-scrim {
    background: linear-gradient(90deg,
      rgba(var(--navy-rgb), .96) 0%,
      rgba(var(--navy-rgb), .92) 45%,
      rgba(var(--navy-rgb), .86) 75%,
      rgba(var(--navy-rgb), .78) 100%);
  }
}

/* Korrekturrunde fotos-models-profil (Restbefund, 07.09.2026): Einzelwort-
   Waisen in der H1 bei 320px (text-wrap:balance bricht „Lerne die
   Darlinge kennen." bei 280px Innenbreite auf drei Zeilen). Analog
   index.css:179-181 (rohes clamp() statt --fs-*-Token, siehe DESIGN.md
   Sammelpunkt „Hero-lokale H1-Schriftgrad-Überschreibungen"). Im Browser
   bei 320px injiziert/nachgemessen: 32px ergibt zwei saubere Zeilen
   „Lerne die" / „Darlinge kennen." - größter Wert, der noch bricht. Ab
   330px liegen ohnehin zwei Zeilen vor (Basis-clamp oben greift erst
   ab 721px). */
@media (max-width: 340px) {
  #hero .hero-h1 { font-size: clamp(32px, 10vw, 34px); }
}

@media (max-width: 720px) {
  /* Mobil (≤560px lädt hero-models-mobil.jpg, 561-720px noch das
     Standardbild) läuft die H1 breiter - der Scrim-Verlauf fällt am
     rechten Rand sonst unter 4.5:1 (identisch zum index-Befund), darum
     eigene, insgesamt dunklere Kurve nur hier. */
  #hero .hero-h1 { max-width: 100%; }
  #hero .hero-scrim {
    background: linear-gradient(90deg,
      rgba(var(--navy-rgb), .96) 0%,
      rgba(var(--navy-rgb), .9) 45%,
      rgba(var(--navy-rgb), .8) 75%,
      rgba(var(--navy-rgb), .68) 100%);
  }
}

/* ============================================================
   Seitenspezifisches CSS - models.html
   Nur Layout-Feinheiten, die dieser Seite vorbehalten sind - keine
   Farben/Radius/Typografie-Rohwerte, alles über :root-Tokens aus
   assets/style.css. Eine Technik hier ist bewusst neu (nicht Teil
   des Basis-Kernels), aber reines CSS ohne eigenes <script>:
   :has()-gestützte Konditional-Felder/-Texte im Buchungsformular
      (Andere Stadt, Wunsch-Darling-Hilfetext, Alternative-Hilfetext,
      Datum-Fehlermeldung) - script.js kennt keinen Hook für „Feld/Text
      X nur zeigen, wenn Feld Y = Wert", darum löst reines CSS das hier
      ohne zusätzliches JS. Das „Andere Stadt"-Feld bleibt deshalb
      bewusst NICHT required (ein natives required an einem per CSS
      versteckten Feld würde die Validierung in script.js blockieren,
      die display:none ignoriert). Die vier ehemals konditionalen
      Kontaktweg-Detailfelder (E-Mail/Telegram/Signal/WhatsApp) sind aus
      demselben Grund zu einem einzigen, immer sichtbaren Pflichtfeld
      zusammengefasst (#buchung-kontaktdetail) statt weiterer :has()-
      Konditionierung - vier gleichzeitig existierende, aber einzeln
      bedingt sichtbare required-Felder ließen sich mit reinem CSS nicht
      widerspruchsfrei validieren (script.js prüft [required] unabhängig
      von Sichtbarkeit).
   ============================================================ */

/* -- Filterleiste: Verfügbarkeits-Gruppe (Gruppenlabel + Schalter + Hilfetext)
   senkrecht gestapelt, Hilfetext bleibt direkt unter dem Schalter statt als
   isolierter Absatz außerhalb der Toolbar-Karte zu stehen. -- */
.filter-availability { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.filter-field-label { font-size: var(--fs-caption); color: var(--navy-ink-2); white-space: nowrap; }

/* -- Korrekturrunde 02.10.2026 (Meeting Leila 01.10., A3-03): die Regel für das
   „Darling suchen“-Unterfeld (#buchung-darling-suche) ist mit dem Feld entfallen. -- */

/* -- Sedcard-Badges (.badge-stack) und Sedcard-CTA (.sedcard-cta) wurden in
   den Kernel (assets/style.css Abschnitt 12) verschoben - waren hier UND in
   model-profil.css wörtlich dupliziert (Prüf-Befund model-profil-5). -- */

/* -- Buchungsformular, Schritt 1: „Andere Stadt" nur zeigen, wenn im
   Stadt-Feld genau diese Option gewählt ist. #buchung-stadt-field liegt
   INNERHALB von .form-row - der ~-Kombinator muss darum am tatsächlichen
   Geschwister-Knoten von [data-stadt-field="andere"] ansetzen, das ist
   .form-row selbst, nicht das verschachtelte Stadt-Feld. -- */
[data-stadt-field] { display: none; }
.form-row:has(#buchung-stadt option[value="andere"]:checked) ~ [data-stadt-field="andere"] { display: flex; }

/* -- Buchungsformular, Schritt 2: Wunsch-Darling-Hilfetext. R2-2-10: hing
   vorher am Merkliste-Zustand statt am tatsächlichen Feldinhalt - bei
   gefüllter Merkliste, aber (noch) nicht übernommenem Wunsch, stand
   "vorausgefüllt" über einem leeren Feld (gemessen: Feldwert leer, Text
   "gefuellt" trotzdem sichtbar). Jetzt direkt an den Feldinhalt gekoppelt:
   placeholder=" " (models.html) macht :placeholder-shown nutzbar, ohne
   einen sichtbaren Platzhaltertext zu zeigen. -- */
[data-wunsch-hilfetext] { display: none; }
.form-field:has(#buchung-wunsch-darling:not(:placeholder-shown)) [data-wunsch-hilfetext="gefuellt"] { display: block; }
.form-field:has(#buchung-wunsch-darling:placeholder-shown) [data-wunsch-hilfetext="leer"] { display: block; }

/* -- Buchungsformular, Schritt 2: Hilfetext zur Alternative-Frage hängt vom
   Schalterzustand ab (Ja/Nein) - reines CSS über :has(), analog zur
   Andere-Stadt-Konditional oben. -- */
[data-alt-hilfetext] { display: none; }
#buchung-alternative-toggle:has(#buchung-alternative:checked) ~ [data-alt-hilfetext="ja"] { display: block; }
#buchung-alternative-toggle:has(#buchung-alternative:not(:checked)) ~ [data-alt-hilfetext="nein"] { display: block; }

/* -- Buchungsformular, Schritt 2: Datum-Fehlermeldung - genau einer der
   beiden Texte aus texte/models.md sichtbar, je nachdem ob das Feld leer
   ist oder ein Datum vor dem Laufzeit-Minimum enthält (:out-of-range
   greift laut Spec nur bei vorhandenem, außerhalb der Range liegendem
   Wert - nie bei leerem Feld, siehe MDN). -- */
#buchung-datum-field .field-error[data-error-typ] { display: none; }
#buchung-datum-field.has-error:has(#buchung-datum:out-of-range) [data-error-typ="vergangenheit"] { display: block; }
#buchung-datum-field.has-error:not(:has(#buchung-datum:out-of-range)) [data-error-typ="leer"] { display: block; }

/* -- Buchungsformular, Schritt 3: E-Mail-Fehlermeldung. R2-2-21: ein Text
   kombinierte bisher "leer" und "ungültig" zugleich. Gleiches Muster wie
   oben beim Datum: .has-error setzt der Kernel bereits generisch
   (script.js Abschnitt 11), hier nur die Textauswahl je nach Feldinhalt
   (:placeholder-shown = leer, sonst Format-Fehler). -- */
[data-kontaktfeld="email"] .field-error[data-error-typ] { display: none; }
[data-kontaktfeld="email"].has-error:has(#buchung-kontakt-email:placeholder-shown) [data-error-typ="leer"] { display: block; }
[data-kontaktfeld="email"].has-error:not(:has(#buchung-kontakt-email:placeholder-shown)) [data-error-typ="format"] { display: block; }

/* Fable-Fixes nach Opus-Review r2 */
/* Bedingte Kontaktdetail-Felder: nur das zum gewählten Kontaktweg passende Feld ist sichtbar */
[data-kontaktfeld] { display: none; }
form:has(input[name="kontaktweg"][value="email"]:checked) [data-kontaktfeld="email"],
form:has(input[name="kontaktweg"][value="telegram"]:checked) [data-kontaktfeld="telegram"],
form:has(input[name="kontaktweg"][value="signal"]:checked) [data-kontaktfeld="signal"],
form:has(input[name="kontaktweg"][value="whatsapp"]:checked) [data-kontaktfeld="whatsapp"] { display: flex; }
/* Fallback ohne :has()-Support: alle vier Felder anzeigen (Pflicht prüft nur sichtbare) */
@supports not (selector(:has(a))) { [data-kontaktfeld] { display: flex; } }
/* Filterleiste: beide Gruppen auf gemeinsamer Mittelachse */
.sedcard-toolbar .filter-group { align-items: center; }
/* Buchungs-Sektionskopf: Platz für den Lead in der rechten Spalte */
#buchung .section-head .head-left { max-width: 620px; }

/* Punkt 7 (29.09.2026): Die frühere Bewerbungs-Karte („Werde Darling“) im
   Sedcard-Raster ist entfernt, samt ihrer Regeln. Das Raster besteht nur noch
   aus Sedcards (4 Spalten bei 1440, 2 / 1 darunter, siehe Kernel).
   Fix-Runde 1 (B7, optional, 29.09.2026): der Kernel setzt das Raster von 981 bis
   1180px dreispaltig, bei acht Karten ergab das 3 + 3 + 2 (letzte Reihe unvollständig).
   Hier vierspaltig (Karten rund 215px bei 1024px), damit die acht Sedcards zwei volle
   Reihen ergeben. In der schmaleren Karte entfällt der mehrzeilige Motivtext des
   Platzhalters (er läuft sonst in das Maß hinein, Regel wie auf der Startseite). */
@media (min-width: 981px) and (max-width: 1180px) {
  #sedcards .sedcard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-sm); }
  #sedcards .sedcard-media .ph::after { display: none; }
}

/* FAQ-Abschluss-Zeile: Korrekturschleife 30.09.2026 (Nachtrag): Kopf und Tabs
   stehen jetzt in einem eigenen Raster `.two-col.faq-grid`, die Abschlusszeile
   liegt darunter außerhalb (Muster karriere.html). Damit endet der mitklebende
   Kopf mit den Antworten und rutscht nicht mehr in die Zeile „Deine Frage war
   nicht dabei?“. Die frühere Regel (grid-column 1 / -1 und herausgerechneter
   row-gap) entfällt, es gilt der Kernel-Abstand von .section-cta. */
/* Fix-Runde 2 (Gate C, C12): FAQ-Kopfspalte wie auf index.html und karriere.html: ab 981 px klebt sie
   beim Lesen der Antworten mit, darunter ist .two-col einspaltig und der Kopf bleibt im Fluss. */
@media (min-width: 981px) {
  #faq .faq-head { position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* Punkt 6 (29.09.2026): der frühere Seiten-Override `#main .card` (Radius 0)
   ist gelöscht. Karten, Sedcards, Filterleiste, Buchungs-Shell, Leer-Zustände
   und Accordions erben jetzt überall den runden Kernel-Standard (22px). */

/* ═══ SEKTION: Mehr als die Begleitung allein (Punkt 9, Sand-Bühne) ═══
   Zweispaltig 5fr / 7fr: links das Bild (3:2, 16px Radius, Clip-Reveal aus
   dem Kernel), rechts Eyebrow, H2, Lead, drei Leistungen mit Icon-Badge und
   genau ein Button. Bühne, Bögen, Einzug und Radius kommen vom Kernel
   (.stage .stage--sand .stage--arcs). Unter 901px gestapelt, Bild oben. */
.begleitung-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap-xl); align-items: center;
}
.begleitung-media {
  margin: 0; aspect-ratio: 3 / 2;
  border-radius: var(--radius-media); overflow: hidden;
  background: var(--surface-card-alt); box-shadow: var(--shadow-pop);
}
.begleitung-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%; }
.begleitung-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-sm); min-width: 0; }
/* ruhigerer Lead wie unter Sektions-H2 (K12), aber freistehend im Bühnentext */
.begleitung-body .lead { font-size: var(--fs-lead-head); max-width: 34em; }
/* Leistungen: Geist als Zeilentext, damit die drei Punkte Gewicht haben */
.begleitung-body .check-list { width: 100%; margin-top: var(--gap-xs); }
.begleitung-body .check-list li { padding-block: 12px; }
.begleitung-body .check-list li:first-child { padding-top: 0; }
.begleitung-body .check-list li:last-child { padding-bottom: 0; }
.begleitung-body .check-list li > span:not(.icon-badge) {
  font-family: var(--font-head); font-size: var(--fs-h3-sm); font-weight: 500;
  line-height: var(--lh-snug); letter-spacing: var(--ls-head); color: var(--navy); hyphens: manual;
}
.begleitung-cta { margin-top: var(--gap-sm); }

/* Zweispaltig (ab 901px): das Bild füllt die Höhe der Textspalte (bündig mit Eyebrow
   oben und Button unten) statt als kleines 3:2-Bild in der Mitte zu schweben.
   Fix-Runde 1 (B11, 29.09.2026): die Regel galt vorher erst ab 1180px, darunter stand
   das Bild bei 981 bis 1179px mit 363 × 242px mittig neben einer 488px hohen
   Textspalte (je rund 120px leer oben und unten). Jetzt ab 901px, also überall dort,
   wo die zwei Spalten nebeneinander stehen (der Bericht nannte 981 bis 1179px, bei
   901 bis 980px stand das Bild genauso mittig und klein). Damit der Ausschnitt
   (Hände mit Zimmerkarte) im schmaleren Hochformat nicht abgeschnitten wird, sitzt
   der Bildfokus weiter links. */
@media (min-width: 901px) {
  .begleitung-media { align-self: stretch; aspect-ratio: auto; min-height: 340px; }
  .begleitung-media img { object-position: 36% 40%; }
}

@media (max-width: 900px) {
  .begleitung-grid { grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); }
}
/* Mobil: der eine nächste Schritt läuft über die volle Breite (Daumenzone) */
@media (max-width: 560px) {
  .begleitung-cta { align-self: stretch; }
}

/* Die Sand-Bühne ist die letzte Fläche vor dem Footer: 10px Abstand (wie
   zwischen zwei Bühnen), damit ihre gerundeten Ecken nicht direkt an die
   Navy-Fläche stoßen. */
#mehr-als-begleitung { margin-bottom: var(--stage-inset); }

/* ============================================================
   Runde 21.10.2026, Paket P7a, Fix 1: Handy, Medium oben, Text darunter (Regel von Nicholas)
   Unter 721 px liegt nirgends Text über Kopf oder Gesicht. Das Medium steht im Fluss über
   .hero-content (volle Breite der Fläche, Seitenverhältnis 4:5, object-fit: cover), ohne Scrim und
   ohne Verlauf. Der Text steht darunter auf Navy. Bildausschnitt: 50% 30% (Paar, Köpfe bei etwa 30 bis 45 % der Bildhöhe, ganz im Bild).
   Das Medium liegt über den Kreisbögen (z-index), die Bögen bleiben nur im Textbereich sichtbar.
   ============================================================ */
@media (max-width: 720px) {
  #hero.hero-full { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: auto; }
  #hero .hero-bg { position: relative; inset: auto; z-index: 3; grid-column: 1; grid-row: 1; display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 5; }
  #hero picture.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  #hero .hero-scrim { display: none; }
  #hero .hero-content { grid-column: 1; grid-row: 2; justify-content: flex-start; gap: clamp(18px, 5vw, 24px); padding-top: clamp(24px, 6vw, 32px); }
}