/* NF Mentoring · pages/abschlussfragen.css · Build-Output von build.mjs – nicht von Hand ändern. Quellen: src/pages/abschlussfragen/, src/blocks/. */

/* ── src/blocks/cta-band.css ── */
/* Baustein cta-band · Namensraum .b-cta-band (Slice V5-P0). Steht in einer Section mit data-theme (Farben über --text …).
   Rev. 6 (V9-A0): ruhiger, symmetrischer Schlussblock auf white oder grey: zentriert, höchstens 640 px breit, Text 36rem,
   gleiche Abstände (die Section liefert oben/unten --section-y), Knopf einzeilig mit Microcopy darunter, mobil volle Breite.
   Keine eigene Fläche, kein Verlauf, kein Raster: Hintergrund, Schrift (--text/--text-soft/--text-mute ≥ 4,5:1) und der zarte
   Rotschein des Knopfs (--nf-shadow-btn-hell) kommen aus dem Theme der Section.
   V11-C (Farbwelt Rev. 7, bauplan v11 §1/§4): Schluss-CTA auf data-theme="red" (Rot-Verlauf); der Primärknopf liest --btn1-*
   und steht dort invers (weiß mit rotem Text, 6,98:1), Microcopy --text-mute (Weiß 85 %, 5,39:1 am hellsten Stopp #AE1D2B).
   Variante, wenn die Section davor dunkel ist (olive/red, nie zwei dunkle Flächen nacheinander): dieselbe Section mit
   data-theme="olive-light" (Knopf Rot-Verlauf, Microcopy grey-500 4,62:1 am Verlaufsende); der Baustein selbst bleibt
   gleich: die Section in src/pages wählt das Attribut (Regel: Vorgänger-Section olive oder red → olive-light, sonst red). */
.b-cta-band { display: grid; justify-items: center; gap: 16px; width: 100%; max-width: 40rem; margin-inline: auto; text-align: center; }
.b-cta-band__titel { max-width: 100%; }
.b-cta-band__text { max-width: 36rem; }
.b-cta-band__aktion { display: grid; justify-items: center; gap: 12px; margin-top: 12px; }
.b-cta-band__cta { white-space: nowrap; }
.b-cta-band__micro { margin: 0; color: var(--text-mute); }
@media (max-width: 599px) {
  .b-cta-band__aktion { justify-items: stretch; width: 100%; }
  .b-cta-band__cta { width: 100%; }
}
@media (max-width: 400px) { .b-cta-band__cta { white-space: normal; } .b-cta-band__cta, .b-cta-band__micro { text-wrap: balance; } }   /* V9-FX1 (mob-freebies-05): keine Waise „passt“/„unverbindlich“ */

/* ── src/pages/abschlussfragen/01-kopf.css ── */
/* /abschlussfragen · Kopf · Namensraum .pg-abschlussfragen-01-kopf (Lauf V6, PG-FREEBIES)
   Mobil zuerst: Pille, H1, Leitsatz, Anker-Knopf, darunter das Bild (Hochformat schmaler). Ab 1024 px Text links (7) und
   Bild rechts (5). Nur Bausteine aus base.css (.pill .h1 .accent .lead .btn .frame) und Theme-Rollen aus tokens.css. */
.pg-abschlussfragen-01-kopf { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 88px)); overflow: hidden; }
.pg-abschlussfragen-01-kopf__grid { display: grid; gap: clamp(40px, 6vw, 56px); }
.pg-abschlussfragen-01-kopf__text { display: grid; justify-items: start; align-content: center; min-width: 0; }
.pg-abschlussfragen-01-kopf__pill { margin-bottom: 18px; }
.pg-abschlussfragen-01-kopf__title { max-width: 15em; padding-bottom: 0.06em; overflow-wrap: break-word; }
@media (max-width: 479px) {
  .pg-abschlussfragen-01-kopf__title { font-size: 2rem; }   /* V10-D2 (mob-4-02): mobil 32 px = H2 28 px + 4, einheitlich mit /haken und /kfz-hack (vorher 34 px) */
}
.pg-abschlussfragen-01-kopf__nobr { white-space: nowrap; }   /* Bindestrich-Komposita (E-Mails, KfZ-Anfragen) nicht am Bindestrich trennen */
.pg-abschlussfragen-01-kopf__lead { max-width: 52ch; margin-top: 20px; }
.pg-abschlussfragen-01-kopf__aktion { display: grid; justify-items: start; gap: 12px; margin-top: 32px; }
.pg-abschlussfragen-01-kopf__micro { margin: 0; color: var(--text-mute); font-size: var(--fs-small); }

.pg-abschlussfragen-01-kopf__medien { position: relative; justify-self: center; width: 100%; min-width: 0; margin: 0; }
.pg-abschlussfragen-01-kopf__medien--hoch { max-width: 300px; }
.pg-abschlussfragen-01-kopf__medien::before {
  content: "";
  position: absolute;
  inset: 12% 4% -8%;
  z-index: 0;
  border-radius: 50%;
  background: var(--objekt-bg, var(--nf-glow-red));
  pointer-events: none;
}
.pg-abschlussfragen-01-kopf__frame { position: relative; z-index: 1; transition: transform var(--dur-ui) var(--ease-out); }
.pg-abschlussfragen-01-kopf__bild { display: block; width: 100%; height: auto; }
.pg-abschlussfragen-01-kopf__bild-link { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-lg); }
@media (hover: hover) and (pointer: fine) {
  .pg-abschlussfragen-01-kopf__medien:hover .pg-abschlussfragen-01-kopf__frame { transform: translateY(-3px); }
}
@media (max-width: 400px) {
  .pg-abschlussfragen-01-kopf__aktion .btn { white-space: normal; text-align: left; }
}
@media (min-width: 1024px) {
  .pg-abschlussfragen-01-kopf__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 88px); align-items: center; }
  .pg-abschlussfragen-01-kopf__medien--hoch { max-width: 380px; justify-self: end; }   /* V9: rechte Kante wie /haken und /empfehlungsstrategie */
}

/* ── src/pages/abschlussfragen/02-inhalt.css ── */
/* /abschlussfragen · Inhalt · Namensraum .pg-abschlussfragen-02-inhalt (Lauf V6, PG-FREEBIES)
   Grau (V9, Farbwelt Rev. 6; vorher Weiß). Drei Kacheln „Was dich erwartet“ (mobil gestapelt, ab 768 px drei Spalten) aus Theme-Rollen (--surface-card,
   --surface-card-line, --shadow-card), damit die neue Farbwelt ohne Änderung greift. Haken-Symbol aus base.css (.checks__icon). */
.pg-abschlussfragen-02-inhalt__kopf { max-width: 48rem; }
.pg-abschlussfragen-02-inhalt__intro { max-width: 58ch; }
.pg-abschlussfragen-02-inhalt__h3 { margin: 0 0 20px; }
.pg-abschlussfragen-02-inhalt .pg-abschlussfragen-02-inhalt__liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pg-abschlussfragen-02-inhalt__karte {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--surface-card-line, var(--hairline));
  border-radius: var(--radius-md);
  background: var(--surface-card, var(--nf-white));
  box-shadow: var(--shadow-card, none);
  color: var(--text);
  font-weight: 600;
  line-height: 1.5;
}
.pg-abschlussfragen-02-inhalt__karte-text { min-width: 0; text-wrap: pretty; }
.pg-abschlussfragen-02-inhalt__statement { margin: 0; color: var(--text); font: 800 var(--fs-h3)/1.3 var(--font-sans); text-wrap: balance; }
.pg-abschlussfragen-02-inhalt__statement--schluss { margin-top: clamp(32px, 4vw, 48px); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }
.pg-abschlussfragen-02-inhalt__weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: clamp(28px, 3.5vw, 40px); }
.pg-abschlussfragen-02-inhalt__weiter-text { margin: 0; color: var(--text-soft); font-weight: 600; }
.pg-abschlussfragen-02-inhalt__link { color: var(--text); }
@media (max-width: 479px) { .pg-abschlussfragen-02-inhalt__link > span { max-width: 17em; text-wrap: balance; } }   /* V9: mobil zweizeilig ausgewogen, Pfeil direkt am Text statt am Rand */
@media (min-width: 768px) {
  .pg-abschlussfragen-02-inhalt .pg-abschlussfragen-02-inhalt__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
  .pg-abschlussfragen-02-inhalt__karte { grid-template-columns: 1fr; row-gap: 16px; align-content: start; }   /* V9: einzeilige Texte oben bündig wie die zweizeiligen */
}

/* Eintritt (02-inhalt.js): Startzustand nur unter dem Motion-Gate, nur transform und clip-path; dieselben Werte
   stehen als „from“ im fromTo() der JS-Datei. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-abschlussfragen-02-inhalt [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/abschlussfragen/03-formular.css ── */
/* /abschlussfragen · Formular · Namensraum .pg-abschlussfragen-03-formular (Lauf V6, PG-FREEBIES)
   Weiß (V9, Farbwelt Rev. 6; vorher Hell-Oliv); zentrierter Kopf, darunter das Formular im Doppelrand: außen die graue Kachel
   (--frame-bg = grey-50 auf Weiß, Haarlinie --hairline), innen ein weißer Kern (sonst Grau in Grau mit grauen Feldern). Felder mobil zuerst:
   volle Breite, 52 px hoch, 16 px Schrift (kein Zoom auf iOS). Feldrand aus --text-mute (≈ 3,6 : 1 auf Weiß; --hairline
   hätte nur ≈ 1,1 : 1 und fiele unter WCAG 1.4.11), Fokus über --focus-ring. Keine Feldklassen in base.css
   oder src/funnel vorhanden (nur .fn-feld im Funnel-Bündel), deshalb hier im Namensraum. */
.pg-abschlussfragen-03-formular__kopf { margin-bottom: clamp(28px, 4vw, 44px); }
.pg-abschlussfragen-03-formular__lead { max-width: 52ch; margin-inline: auto; text-wrap: balance; }
.pg-abschlussfragen-03-formular__rahmen {
  max-width: 600px;
  margin-inline: auto;
  padding: var(--frame-pad);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--frame-bg);
  box-shadow: var(--shadow-card);
}
.pg-abschlussfragen-03-formular__karte {
  padding: clamp(20px, 5vw, 40px) clamp(18px, 5vw, 40px);
  border-radius: calc(var(--radius-lg) - var(--frame-pad));
  background: var(--nf-white-pure);
  color: var(--text);
  color-scheme: light;   /* html trägt color-scheme dark (base.css); Checkbox und Felder sonst dunkel auf der hellen Karte */
}
.pg-abschlussfragen-03-formular__form { display: grid; gap: 18px; }
.pg-abschlussfragen-03-formular__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pg-abschlussfragen-03-formular__hinweis { margin: 0; color: var(--text-mute); font-size: var(--fs-caption); }
.pg-abschlussfragen-03-formular__feld { display: grid; gap: 6px; }
.pg-abschlussfragen-03-formular__label { color: var(--text); font-size: var(--fs-small); font-weight: 800; }
.pg-abschlussfragen-03-formular__input {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--text-mute);
  border-color: color-mix(in srgb, var(--text-mute) 80%, var(--nf-white-pure));
  border-radius: var(--radius-sm);
  background: var(--nf-white-pure);
  background: color-mix(in srgb, var(--text) 3%, var(--nf-white-pure));
  color: var(--text);
  font: 400 16px/1.3 var(--font-sans);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.pg-abschlussfragen-03-formular__input::placeholder { color: var(--text-mute); opacity: 1; }
.pg-abschlussfragen-03-formular__input:focus-visible { outline: 2px solid var(--focus-ring, var(--nf-wine)); outline-offset: 2px; border-color: var(--text); }
.pg-abschlussfragen-03-formular__input[aria-invalid="true"] { border-color: var(--accent-text); }
.pg-abschlussfragen-03-formular [hidden] { display: none !important; }
.pg-abschlussfragen-03-formular .lead-form__fehler { margin: 0; color: var(--accent-text); font-size: var(--fs-small); font-weight: 700; line-height: 1.4; }
.pg-abschlussfragen-03-formular .pg-abschlussfragen-03-formular__einwilligung + .lead-form__fehler { margin-top: -10px; padding-left: 36px; }
.pg-abschlussfragen-03-formular__einwilligung { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: start; }
.pg-abschlussfragen-03-formular__check { width: 24px; height: 24px; margin: 0; accent-color: var(--nf-wine); }
.pg-abschlussfragen-03-formular__check:focus-visible { outline: 2px solid var(--focus-ring, var(--nf-wine)); outline-offset: 2px; }
.pg-abschlussfragen-03-formular__check-label { color: var(--text-soft); font-size: var(--fs-small); line-height: 1.5; text-wrap: balance; cursor: pointer; }
/* V9-FX3 (mob-freebies-15): bei ≤ 340 px stand „zu.“ allein; mit 13 px passt „Datenschutzbestimmungen zu.“ in eine Zeile (ohne  ,
   das verschlechterte den Ausgleich bei 360–430: „Ich stimme / den …“). */
@media (max-width: 340px) { .pg-abschlussfragen-03-formular__check-label { font-size: var(--fs-caption); } }
.pg-abschlussfragen-03-formular__check-label a { color: var(--text); font-weight: 800; text-decoration-color: var(--accent-text); text-underline-offset: 3px; }
.pg-abschlussfragen-03-formular__status { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text); font-size: var(--fs-small); font-weight: 700; line-height: 1.45; }
.pg-abschlussfragen-03-formular__status:empty { display: none; }
.pg-abschlussfragen-03-formular__status:focus { outline: none; }
.pg-abschlussfragen-03-formular__status.is-fehler { color: var(--accent-text); box-shadow: inset 3px 0 0 var(--accent-text); }
.pg-abschlussfragen-03-formular__status.is-ok { padding: clamp(20px, 4vw, 28px); background: transparent; font: 800 var(--fs-h3)/1.35 var(--font-sans); text-align: center; text-wrap: balance; }
.pg-abschlussfragen-03-formular__form.is-sending .pg-abschlussfragen-03-formular__senden { opacity: 0.72; cursor: progress; }
.pg-abschlussfragen-03-formular .pg-abschlussfragen-03-formular__senden { width: 100%; justify-content: space-between; padding-block: 8px; padding-left: 24px; line-height: 1.25; white-space: normal; text-align: left; text-wrap: balance; }
/* V10-D2 (mass-sub2-02): bis 400 px 15 px, 36-px-Pfeilkreis und 10 px Abstand, damit das Label zweizeilig bleibt (vorher bis 78 px / 3 Zeilen) */
@media (max-width: 400px) {
  .pg-abschlussfragen-03-formular .pg-abschlussfragen-03-formular__senden { gap: 10px; padding-left: 20px; font-size: 15px; }
  .pg-abschlussfragen-03-formular__senden .btn__icon { width: 36px; height: 36px; }
}
.pg-abschlussfragen-03-formular__micro { margin: 0; color: var(--text-mute); font-size: var(--fs-caption); text-align: center; text-wrap: balance; }

/* Eintritt (03-formular.js): nur unter dem Motion-Gate, nur transform und clip-path */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-abschlussfragen-03-formular [data-motion] {
    transform: translate3d(0, var(--reveal-frame-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/abschlussfragen/04-nino.css ── */
/* /abschlussfragen · Nino · Namensraum .pg-abschlussfragen-04-nino (Lauf V6, PG-FREEBIES)
   Mobil: Porträt in Spaltenbreite (max. 420 px, Ausschnitt 4:5, Kopf mit Luft, Hände im Bild; vorher 220 px schmal links mit
   leerer Fläche daneben) über dem Text; ab 900 px Porträt links (4) und Text rechts (7), ganzes Hochformat. Fläche grau.
   Partnerlogos auf weißen Chips (--surface-card) hinter einer Haarlinie: Raster 2 × 2, ab 1140 px vier in einer Reihe (vorher
   hing ein Chip allein in der zweiten Zeile, V9 Symmetrie). Social-Chips mobil einreihig, links und rechts bündig. */
.pg-abschlussfragen-04-nino__grid { display: grid; gap: clamp(28px, 4vw, 48px); }
.pg-abschlussfragen-04-nino__foto { width: 100%; max-width: 420px; margin: 0; }
.pg-abschlussfragen-04-nino__foto .frame__media { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }
.pg-abschlussfragen-04-nino__text { display: grid; justify-items: start; gap: 16px; min-width: 0; }
.pg-abschlussfragen-04-nino__pill { margin-bottom: 2px; }
.pg-abschlussfragen-04-nino__title { margin: 0; }
.pg-abschlussfragen-04-nino__lead { max-width: 56ch; }
.pg-abschlussfragen-04-nino__absatz { max-width: 60ch; margin: 0; color: var(--text-soft); line-height: 1.6; text-wrap: pretty; }
.pg-abschlussfragen-04-nino__absatz strong { color: var(--text); font-weight: 800; }
.pg-abschlussfragen-04-nino__partner { display: grid; gap: 14px; width: 100%; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.pg-abschlussfragen-04-nino__partner-text { max-width: 60ch; margin: 0; color: var(--text-soft); font-size: var(--fs-small); line-height: 1.5; text-wrap: pretty; }
.pg-abschlussfragen-04-nino .pg-abschlussfragen-04-nino__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pg-abschlussfragen-04-nino__logo {
  display: grid;
  place-items: center;
  height: 52px;
  min-width: 0;
  padding: 8px 14px;
  border: 1px solid var(--surface-card-line, var(--hairline));
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}
.pg-abschlussfragen-04-nino__logo img { width: auto; max-width: 100%; height: 32px; object-fit: contain; }
.pg-abschlussfragen-04-nino__logo--vkb img { height: 40px; }
.pg-abschlussfragen-04-nino__mehr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 4px; }
.pg-abschlussfragen-04-nino .pg-abschlussfragen-04-nino__social { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-abschlussfragen-04-nino__social-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: var(--btn2-line-w, 1px) solid var(--btn2-line, var(--hairline));
  border-radius: var(--radius-pill);
  color: var(--btn2-text, var(--text));
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.pg-abschlussfragen-04-nino__social-link:focus-visible { outline: 2px solid var(--focus-ring, var(--nf-wine)); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .pg-abschlussfragen-04-nino__social-link:hover { border-color: var(--btn2-hover-line, var(--text)); background: var(--btn2-hover-bg, transparent); color: var(--btn2-hover-text, var(--text)); }
}
@media (max-width: 479px) {
  .pg-abschlussfragen-04-nino__mehr { width: 100%; }
  .pg-abschlussfragen-04-nino .pg-abschlussfragen-04-nino__social { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; width: 100%; }
  .pg-abschlussfragen-04-nino__social-link { padding: 0 14px; white-space: nowrap; }
}
@media (max-width: 359px) {
  .pg-abschlussfragen-04-nino__social-link { padding: 0 11px; font-size: 0.8125rem; }
}
@media (min-width: 900px) {
  .pg-abschlussfragen-04-nino__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .pg-abschlussfragen-04-nino__foto { max-width: 340px; }
  .pg-abschlussfragen-04-nino__foto .frame__media { aspect-ratio: auto; }
}
@media (min-width: 1140px) {
  .pg-abschlussfragen-04-nino .pg-abschlussfragen-04-nino__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* V11-D Rhythmus Rev. 7: zweite Hell-Oliv-Fläche der Seite, Verlauf gespiegelt (bauplan §4) */
.pg-abschlussfragen-04-nino { --h-winkel: 195deg; }