/* Paket P-C (WordPress-Theme): Kopie des abgenommenen v5-Seiten-CSS, Bildnamen jetzt .webp, Kommentare ohne lange Striche.
   Layout und Regeln unverändert, Ergänzungen stehen am Dateiende unter "Paket P-C". */
/* ============================================================
   Werde-Darling-Seite (Werde Darling): seitenspezifische Ergänzungen zum Kernel
   Korrekturschleife 29.09.2026, Paket P7: Funnel-Neuaufbau W1 bis W11
   (Plan c, Copy texte/runde-2026-09-29/karriere.md). Nur Layout-Feinschliff,
   keine neuen Farbwerte und keine Token-Overrides: alles über die
   Custom Properties aus Kernel-CSS. Kernel-Bausteine (Bühnen,
   Bogenrahmen, Zeitleiste, Häkchenliste, Icon-Badge, Media-Reveal,
   Karten-Hebung) kommen aus dem Kernel, hier stehen nur die Anordnungen.

   Fix-Runde 1 (Gate B, 29.09.2026): W7 „Selbstbestimmung“ ist in W4 aufgegangen
   (Entscheidung 3), W6 wurde Sand-Bühne, W8 schließt mit einem Navy-Feld
   (Foto + Aufwandszeile + CTA) statt mit dem Bildband.

   Flächen-Rhythmus (N = Navy, I = Ivory, S = Sand-Bühne):
   W1 Hero N · W2 I · W3 I · W4 S · W5 I · W6 S · W8 I (mit Navy-Feld) ·
   W9 I · W10 S · W11 N · Footer N. Nie drei gleiche Flächen in Folge.
   ============================================================ */

/* Silbentrennung (B2-10): der Kernel trennt Karten-, Listen- und Zeitleistentext
   automatisch. Das stört in den breiten Spalten (lan-det, Vi-deocall, ent-scheidest)
   und auf dem Handy ebenso (Vi-deocall, Acade-my, Lo-cation), in Links und Buttons ist
   es nie erwünscht. Kein Wort der Seite ist länger als rund 20 Zeichen und passt auch in
   die schmalste Spalte, deshalb hier auf jeder Breite manuell, dazu text-wrap: pretty
   gegen Einzelwort-Waisen. Einzige Ausnahme: die schmalen Zeitleistenüberschriften in W8
   (900 bis 1240 px, siehe unten). */
:is(#wiedererkennen, #leila, #warum, #termin, #erwartungen, #ablauf, #faq, #bewerbung) :is(.card-desc, li, p) { hyphens: manual; text-wrap: pretty; }
main :is(a, .btn, .textlink) { hyphens: manual; }

/* ------------------------------------------------------------
   W1 HERO. Foto hero-karriere-neu.webp (gespiegelt): Frau im schwarzen
   Kleid bei x 66 bis 75 %, Rücken des Gastes links unter dem Scrim.
   Mobil (≤ 720 px) eigener Zuschnitt hero-karriere-neu-mobil.webp. */
#hero .hero-bg img { object-position: 74% 42%; }

/* Scrim (Desktop): links deckend unter Eyebrow/H1/Lead/Chips, zwischen
   35 und 62 % Übergang, ab ca. 66 % nichts mehr über dem Gesicht.
   Kontrast der Texte gegen das echte Foto: siehe Log-P7. */
#hero .hero-scrim {
  background: linear-gradient(90deg,
    rgba(var(--navy-rgb), .96) 0%,
    rgba(var(--navy-rgb), .93) 36%,
    rgba(var(--navy-rgb), .80) 46%,
    rgba(var(--navy-rgb), .46) 56%,
    rgba(var(--navy-rgb), .12) 66%,
    rgba(var(--navy-rgb), 0) 78%);
}

/* Eyebrow hero-lokal aufgehellt: das Kernel-Ivory-62 unterschreitet gegen
   helle Fotoflächen 4,5:1. */
#hero .eyebrow { color: var(--ivory); }

/* Textspalte bleibt in der linken Bildhälfte, die Frau rechts bleibt frei. */
#hero .hero-top .h1 { max-width: 11.2em; }
#hero .hero-foot .lead { max-width: min(520px, 46vw); }

/* Drei Fakten-Chips (je höchstens 4 Wörter, nur Belegtes) */
#hero .hero-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; max-width: 640px; margin: 0; padding: 0; list-style: none; }
#hero .hero-chips .chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px;
  color: var(--ivory); border-color: var(--ivory-35); background: rgba(var(--navy-rgb), .5);
}
#hero .hero-chips .chip svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Primär-Button und Zweitweg als Textlink in einer Reihe */
#hero .hero-actions { gap: 4px 28px; }

/* Hohes Flächen-Regime (Tablet hochkant): der Bildausschnitt verschiebt sich
   nach rechts, damit die Frau im schmalen Ausschnitt bleibt. */
@media (min-width: 721px) and (max-aspect-ratio: 3/2) {
  /* Runde 21.10.2026 (P7a): 80 % auf 70 %. Bei 768 x 1024 lag die H1 nur etwa 17 px neben dem Haar der Frau,
     jetzt etwa 59 px Abstand (Frau rückt um 42 px nach rechts, bleibt ganz im Bild). */
  #hero .hero-bg img { object-position: 70% 40%; }
}

/* Mobil (≤ 720 px): Hochformat-Zuschnitt, Frau in der Mitte zwischen H1 (oben)
   und Lead/Chips/Button (unten). Senkrechter Scrim statt waagerecht: oben und
   unten dunkel für den Text, in der Mitte bleibt das Gesicht frei. */
@media (max-width: 720px) {
  #hero .hero-bg img { object-position: 50% 30%; }
  #hero .hero-scrim {
    background: linear-gradient(180deg,
      rgba(var(--navy-rgb), .92) 0%,
      rgba(var(--navy-rgb), .86) 20%,
      rgba(var(--navy-rgb), .25) 27%,
      rgba(var(--navy-rgb), .08) 34%,
      rgba(var(--navy-rgb), .10) 40%,
      rgba(var(--navy-rgb), .84) 47%,
      rgba(var(--navy-rgb), .93) 56%,
      rgba(var(--navy-rgb), .96) 100%);
  }
  #hero .hero-top .h1, #hero .hero-foot .lead { max-width: none; }
  #hero .hero-chips { gap: 8px; }
  #hero .hero-chips .chip { padding: 7px 12px 7px 9px; gap: 6px; }
}

/* Sehr schmale Handys (≤ 360 px): die H1 bekommt mindestens 30 px (Koordinator, B2-18).
   Die Sektions-H2 stehen dort bei 26 px (Kernel), die H1 lag mit 26 bis 27,6 px gleichauf.
   Die Untergrenze des Kernel-Tokens (31 px) ergäbe dort mehr Zeilen als nötig; 30 px
   liefert bei 340 bis 360 px drei Zeilen, bei 320 px vier (siehe Log). */
@media (max-width: 360px) {
  #hero .h1 { font-size: clamp(30px, 6vw + 8px, 31px); }
}

/* Kurze Querformat-Viewports (Handys quer): kompaktere Innenabstände, die
   Chips rücken enger, damit der Button möglichst über der Falz bleibt. */
@media (min-width: 721px) and (max-height: 480px) {
  #hero .h1 { font-size: clamp(22px, 2.4vw + 4px, 28px); }
  #hero .hero-foot { gap: clamp(8px, 1.4vh, 12px); }
  #hero .hero-foot .lead { font-size: var(--fs-body-sm); }
  #hero .hero-chips .chip { padding-block: 4px; }
}

/* ------------------------------------------------------------
   W2 WIEDERERKENNEN. Zweispaltig: links H2 + ein Satz, rechts vier
   Situationen als Liste mit Navy-Punkt (keine Pluspunkte, deshalb
   .check-list--neutral). Folgt auf W3 (beide Ivory): der Abstand zwischen
   den zwei Sektionen wird halbiert. */
#wiedererkennen { padding-bottom: var(--section-pad-y-sm); }
.recog-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.recog-head .lead, .termin-head .lead, .faq-head .lead, .bewerbung-side .lead { font-size: var(--fs-lead-head); max-width: 480px; }
.recog-list li {
  --cl-pt: 20px; padding-bottom: 20px; padding-left: 38px;
  font-family: var(--font-head); font-weight: 500; font-size: var(--fs-h3-sm);
  line-height: 1.35; letter-spacing: var(--ls-head);
}
.recog-side .textlink { margin-top: 22px; }

/* ------------------------------------------------------------
   W3 WENDEPUNKT LEILA. Porträt im Bogenrahmen (Kernel .arch-frame),
   Text rechts. Ivory auf Ivory, deshalb oben und unten halber Abstand.
   Korrekturschleife 30.09.2026 (Punkt 5): statt des Nahporträts jetzt
   leila-werde-darling.webp (1200×1500) im Bogen `.arch--4x5` wie Academy
   `#zitat`; Rahmen 340 px (Bild 312×390 px), Media-Reveal am inneren
   .arch-photo, damit die Bogenlinie nicht mit abgeschnitten wird. */
#leila { padding-block: var(--section-pad-y-sm); }
.leila-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-xl); align-items: center; }
.leila-portrait { width: 100%; margin-inline: auto; }
.leila-portrait .arch-photo { display: block; width: 100%; height: 100%; }
.leila-text { max-width: 560px; gap: 16px; }
.leila-text > p:not(.eyebrow) { color: var(--navy-70); }
.leila-text .h2 { margin-bottom: 4px; }
.leila-text .textlink { align-self: flex-start; margin-top: 4px; }

/* ------------------------------------------------------------
   W4 STANDARDS (Sand-Bühne). Sechs weiße Karten, oben je ein Navy-Badge
   (die Karten Grenzen und Ausstieg stammen aus der früheren Sektion W7).
   Darunter die Zeile aus Textlink (links) und 4. Primär-CTA (rechts,
   Kernel `.section-cta`), damit mobil nicht mehr als rund drei Bildschirme
   ohne „Jetzt bewerben“ vergehen (B2-11). Die Stage-Abstände sind gegenüber
   dem Kernel-Standard (132 px oben und unten) gekürzt: die Seite soll unter
   10.500 px bleiben. */
#warum, #erwartungen { padding-block: clamp(52px, 6.6vw, 96px); }
.standards-grid .card { gap: 12px; }
.standards-grid .icon-badge { margin-bottom: 10px; }

/* ------------------------------------------------------------
   W5 EIN TERMIN. Text und vertikale Zeitleiste links, Abendmotiv rechts
   (karriere-termin.webp, 4:5, Gesicht im oberen Drittel, klebt beim Scrollen mit).
   Mobil: Kopf, Bild, Schritte untereinander. */
#termin { padding-bottom: var(--section-pad-y-sm); }
.termin-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "head media" "steps media";
  column-gap: var(--gap-xl); row-gap: var(--gap-lg); align-items: start;
}
.termin-head { grid-area: head; }
.termin-steps { grid-area: steps; }
.termin-steps .card-desc { max-width: 54ch; }
.termin-media {
  grid-area: media; position: sticky; top: calc(var(--nav-h) + 24px);
  aspect-ratio: 4 / 5; border-radius: var(--radius-media); overflow: hidden;
}
.termin-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }

/* ------------------------------------------------------------
   W6 GEBEN UND NEHMEN (Sand-Bühne, Fix-Runde 1). Zwei gleich hohe weiße Karten,
   darunter die Anti-ICP-Zeile als ruhige Textzeile mit Navy-Strich, dann die
   große Brücke „Klingt das nach dir?“ (Kernel `.section-cta--lead`, B2-12) mit dem
   Primär-CTA. Die Stage-Abstände stehen bei W4. */
/* Gate C (C2-12): zwei gleich breite Karten. Bei 7 zu 5 wirkte die Seite der Agentur kleiner als
   die Seite der Bewerberin, obwohl die Überschrift „Beide Seiten binden sich“ das Gegenteil sagt. */
.erwartungen-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-lg); align-items: stretch; }
.erwartungen-grid .card { padding: clamp(22px, 3vw, 44px); gap: 22px; }
/* Die rechte Karte trägt drei kurze Punkte gegen vier lange links: ein weiterer Zeilenabstand
   nimmt die leere Fläche unten (bei 1440 px sonst rund 100 px) auf, ohne Text zu ändern.
   Nur in der Zweispaltigkeit (ab 901 px); untereinander stehen die Karten für sich. */
@media (min-width: 901px) {
  .erwartungen-grid .card:nth-child(2) .check-list li { padding-bottom: clamp(14px, 3.3vw, 40px); }
  .erwartungen-grid .card:nth-child(2) .check-list li + li { --cl-pt: clamp(14px, 3.3vw, 40px); }
  .erwartungen-grid .card:nth-child(2) .check-list li:last-child { padding-bottom: 0; }
}
.erwartungen-anti {
  margin-top: var(--gap-lg); max-width: 720px; padding-left: clamp(18px, 2vw, 26px);
  border-left: 2px solid var(--navy);
  font-family: var(--font-head); font-weight: 500; font-size: var(--fs-h3-sm);
  line-height: 1.4; letter-spacing: var(--ls-head); text-wrap: pretty;
}

/* ------------------------------------------------------------
   W8 ABLAUF DER AUFNAHME. Horizontale Zeitleiste mit vier Schritten, darunter
   das Navy-Abschlussfeld (B2-13): links das Shooting-Foto in konzentrischem
   Rahmen (Feldradius 30 px, Innenabstand 14 px, Bildradius 16 px), rechts die
   Aufwandszeile groß in Ivory und der Primär-CTA, dahinter dieselben zwei
   Kreisbögen wie im Hero. Die rechte Seite ist damit eine gestaltete Fläche
   und nicht mehr ein Button in leerem Raum. */
#ablauf { padding-bottom: var(--section-pad-y-sm); }
.ablauf-steps .textlink { align-self: flex-start; }
.ablauf-panel {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: stretch;
  min-height: clamp(300px, 30vw, 440px); margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(10px, 1vw, 14px);
  border-radius: var(--radius-stage); background: var(--surface-navy); color: var(--ivory);
}
.ablauf-panel > * { position: relative; z-index: 1; }
.ablauf-panel::before, .ablauf-panel::after {
  content: ""; position: absolute; z-index: 0; top: 50%; right: 0; aspect-ratio: 1;
  border: 1px solid var(--ivory); border-radius: 50%; opacity: .10;
  pointer-events: none; transform: translate(38%, -50%);
}
.ablauf-panel::before { height: 130%; }
.ablauf-panel::after { height: 178%; opacity: .07; }
.ablauf-figure { position: relative; margin: 0; min-height: 100%; }
.ablauf-media { position: absolute; inset: 0; border-radius: var(--radius-media); overflow: hidden; }
.ablauf-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* Bildunterschrift als Pille über dem Foto (unten links), damit das Feld nicht höher wird. */
.ablauf-panel .ablauf-figure figcaption {
  position: absolute; z-index: 2; left: 14px; bottom: 14px; max-width: calc(100% - 28px); margin: 0; padding: 6px 14px;
  border-radius: var(--radius-full); background: rgba(var(--navy-rgb), .80); color: var(--ivory);
}
.ablauf-panel-body {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: clamp(22px, 2.6vw, 36px); padding: clamp(28px, 4vw, 64px);
}
.ablauf-panel-text {
  max-width: 24em; margin: 0;
  font-family: var(--font-head); font-weight: 500; font-size: var(--fs-lead); line-height: var(--lh-snug);
  letter-spacing: var(--ls-head); color: var(--ivory); text-wrap: balance; hyphens: manual;
}

/* ------------------------------------------------------------
   W9 FAQ. Kopf klebt beim Lesen der sieben Antworten mit. */
.faq-head { position: sticky; top: calc(var(--nav-h) + 24px); }

/* ------------------------------------------------------------
   W10 BEWERBUNG (Sand-Bühne). Links das Angebot mit drei Mini-Schritten,
   Risikoumkehr und Datenschutzsatz (klebt mit), rechts das Formular auf
   weißer Karte (.booking-shell). Nach der Bühne folgt die volle Navy-Fläche
   W11: ein Einzug unten hält die abgerundete Bühne frei stehend. */
#bewerbung { margin-bottom: var(--stage-inset); }
.bewerbung-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.bewerbung-side { position: sticky; top: calc(var(--nav-h) + 24px); }
.bewerbung-steps-title { margin-top: 18px; }
.after-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.after-steps li { position: relative; display: flex; align-items: center; min-height: 36px; padding-left: 50px; font-size: var(--fs-body-sm); line-height: 1.5; }
.after-num {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--navy-25); background: var(--surface-card);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: var(--fs-caption); font-weight: 600; font-variant-numeric: tabular-nums;
}
.risk-note {
  display: flex; align-items: flex-start; gap: 14px; margin-top: 8px;
  padding: 18px 20px; background: var(--surface-card); border: 1px solid var(--line-1); border-radius: var(--radius-card);
}
.risk-note p { font-size: var(--fs-body-sm); font-weight: 500; line-height: 1.5; }
.bewerbung-data { margin-top: 2px; }

/* Foto-Hinweis im Formular: Sand-Bühnen färben .card--alt weiß, innerhalb der
   weißen Formularkarte bleibt der Hinweis deshalb ausdrücklich Sand. */
#bewerbung .booking-shell .card--alt { background: var(--surface-card-alt); border-color: var(--ivory-darker); }

/* Korrekturrunde 02.10.2026 (Meeting Leila 01.10.): Foto-Block mit drei Datei-Feldern.
   Die Entwurfsmarke `.ph-note` („[Anzahl und Aktualität von Leila zu bestätigen]“) und ihre
   Regel entfallen, die Frage ist beantwortet (zwei Pflichtfotos, bis zu sieben Bilder).
   Den Stil der Datei-Felder (`.form-field input[type=file]`, Fehlerzustand, Fokusring,
   Tap-Ziel) liefert der Kernel, hier stehen nur die Abstände im Block: etwas mehr Luft
   zwischen den Feldern als der Kartenstandard (14 px), damit Label, Feld, Hinweis und
   Fehlertext jeweils klar zusammengehören, und der Datenschutz-Satz als ruhige Schlusszeile. */
.foto-block { gap: 20px; }
.foto-block > .card-desc { margin: 0; }
.foto-block .caption { hyphens: manual; text-wrap: pretty; }
.foto-datenschutz { margin: 0; padding-top: 2px; }
/* Schmale Handys: Die Karte steckt in der weißen Formularkarte in der Sand-Bühne und ist bei 390 px nur rund 308 px
   breit. Mit dem Kernel-Polster (25 px) bleibt dem Datei-Feld zu wenig Platz für Button und „Keine ausgewählt“
   (der Text wurde als „Kein…wählt“ gekürzt). Weniger Seitenpolster gibt dem Feld rund 18 px mehr Breite. */
@media (max-width: 560px) {
  .foto-block { padding: 22px 14px; }
}
/* Unter 480 px passt „Datei auswählen“ plus „Keine ausgewählt“ trotzdem nicht nebeneinander (Feldbreite 248 bis
   278 px bei 360 bis 390 px). Kleinerer Hinweistext und etwas engere Pille (nur Schrift-Token und Abstände) lassen
   den Text ungekürzt; die Feldhöhe von 48 px und die Tap-Fläche bleiben. */
@media (max-width: 480px) {
  .foto-block .form-field input[type="file"] { font-size: var(--fs-caption); padding-right: 8px; }
  .foto-block .form-field input[type="file"]::file-selector-button { margin-right: 8px; padding: 0 12px; }
}

/* Kurze Checkbox-Labels (z. B. „wahrheitsgemäß“) dürfen die 44px-Tap-Target-
   Pflicht nicht unterschreiten (BAU-REGELN 5). Reine Mindesthöhe. */
#bewerbung .check-field { min-height: 44px; }

/* Erfolgsmeldung (B2-29): die Formularkarte ist selbst schon die weiße Karte, deshalb
   kein zweiter Rahmen um die Meldung. Darunter der nächste Schritt (Textlink). */
.booking-shell .form-success { border: 0; background: transparent; padding: 0; }
.success-next { margin-top: 10px; }

/* ------------------------------------------------------------
   W11 ZWEITWEG. Navy-Fläche (.bleed), Button und Textlink in einer Reihe. */
.lede-block { max-width: 640px; }
.cta-actions { gap: 4px 28px; }
/* Gate C (C2-14): die Adresszeile klebte am Button, und ihre Trefferfläche überlappte mobil den
   Instagram-Textlink (anderes Ziel). Mindestens 14 px Luft (--gap-sm). */
.cta-address { margin-top: var(--gap-sm); }
/* Dieselben zwei Kreisbögen wie im Hero und auf den Bühnen (Ivory 10 % und 7 %),
   damit die Schlussfläche zur restlichen Seite gehört. */
#cta { isolation: isolate; overflow: clip; }
#cta > .section-inner { position: relative; z-index: 1; }
#cta::before, #cta::after {
  content: ""; position: absolute; top: 50%; right: 0; aspect-ratio: 1;
  border: 1px solid var(--ivory); border-radius: 50%; opacity: .10;
  pointer-events: none; z-index: 0; transform: translate(38%, -50%);
}
#cta::before { height: 130%; }
#cta::after { height: 178%; opacity: .07; }

/* ------------------------------------------------------------
   Responsive */
@media (max-width: 1180px) {
  .termin-grid { column-gap: var(--gap-lg); }
}

/* Vier Spalten zwischen 900 und 1240 px sind rund 200 bis 245 px breit: „Kennenlerngespräch“
   in der vollen H3-Größe bräche mitten im Wort. Kleinere Stufe und Silbentrennung nur hier. */
@media (min-width: 900px) and (max-width: 1240px) {
  .ablauf-steps .timeline-step > .h3 { font-size: var(--fs-h3-sm); hyphens: auto; }
}

@media (max-width: 980px) {
  .recog-grid, .leila-grid, .bewerbung-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-head, .bewerbung-side { position: static; }
  .leila-text { max-width: none; }
  .leila-portrait { max-width: min(100%, 320px); }
}

/* Das Navy-Feld in W8 steht unter 900 px übereinander: Foto oben (3:2), darunter
   Aufwandszeile und Button. Das Foto füllt dann kein Spaltenmaß mehr, sondern hat
   ein eigenes Seitenverhältnis. */
@media (max-width: 900px) {
  .ablauf-panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ablauf-figure { min-height: 0; aspect-ratio: 3 / 2; }
  .ablauf-panel-body { padding: clamp(24px, 5vw, 40px) clamp(16px, 4vw, 32px) clamp(20px, 4vw, 32px); }
}
@media (min-width: 600px) and (max-width: 900px) {
  .ablauf-figure { aspect-ratio: 2 / 1; }
}

/* Mobil: Karte kompakt, Badge links neben dem Titel (kürzere Seite, gleiche Inhalte).
   Die eine Spalte kommt aus dem Kernel (`.grid-3` unter 721 px einspaltig, Kernel-Fix
   29.09.2026); der frühere Behelf `.grid-3.standards-grid { … }` ist entfallen.
   Das Leila-Porträt bleibt mobil bei höchstens 280 px, damit es nicht den ganzen Bildschirm
   füllt (B2-09; seit Punkt 5, 30.09.2026, 1200 px breite Quelle, vorher weiches 400-px-Nahporträt
   mit 240 px). */
@media (max-width: 720px) {
  .leila-portrait { max-width: min(100%, 280px); }
  .leila-grid { row-gap: 28px; }
  .recog-list li { --cl-pt: 16px; padding-bottom: 16px; }
  #wiedererkennen { padding-bottom: 28px; }
  #leila { padding-top: 28px; }

  /* W4 mobil (B2-11): Badge und Titel in einer Zeile, der Text darunter über die volle
     Kartenbreite. Das spart je Karte eine bis zwei Zeilen und rund 250 px Seitenhöhe, damit
     der 4. „Jetzt bewerben“ (Ende W4) früher kommt. */
  .standards-grid { gap: 14px; }
  .standards-grid .card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: center; padding: 20px; }
  .standards-grid .icon-badge { --badge-size: 44px; grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .standards-grid .card > .h3-sm { grid-column: 2; grid-row: 1; }
  .standards-grid .card > .card-desc { grid-column: 1 / -1; grid-row: 2; hyphens: manual; }
  #warum .section-cta { margin-top: 24px; }
}

@media (max-width: 900px) {
  .termin-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "steps"; }
  /* Das Motiv bleibt auch untereinander 4:5: ein 1:1-Ausschnitt schnitte das Weinglas ab und ließe nur Gesicht
     und Ausschnitt der Weste übrig (Gate C, C2-05). */
  .termin-media { position: static; aspect-ratio: 4 / 5; max-width: min(100%, 440px); width: 100%; }
  .erwartungen-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   Paket P-C: Ergänzungen für den Versand
   Format-Hinweis unter den Fotofeldern (wie der Datenschutz-Satz davor) und
   Hinweis zu den sichtbaren Merkmalen direkt unter der Auswahl.
   ------------------------------------------------------------ */
.foto-block .foto-format { margin: 0; }
#bew-merkmale-fieldset > .caption { display: block; margin-top: var(--gap-xs); hyphens: manual; text-wrap: pretty; }

/* ============================================================
   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% 25% (Gesicht der Frau bei etwa 22 bis 35 % 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% 25%; }
  #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); }
}