/* NF Mentoring · pages/ninogpt.css · Build-Output von build.mjs – nicht von Hand ändern. Quellen: src/pages/ninogpt/, 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/ninogpt/01-kopf.css ── */
/* /ninogpt · Kopf · Namensraum .pg-ninogpt-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-ninogpt-01-kopf { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 88px)); overflow: hidden; }
.pg-ninogpt-01-kopf__grid { display: grid; gap: clamp(40px, 6vw, 56px); }
.pg-ninogpt-01-kopf__text { display: grid; justify-items: start; align-content: center; min-width: 0; }
.pg-ninogpt-01-kopf__pill { margin-bottom: 18px; }
.pg-ninogpt-01-kopf__title { max-width: 15em; padding-bottom: 0.06em; overflow-wrap: break-word; }
.pg-ninogpt-01-kopf__nobr { white-space: nowrap; }   /* Bindestrich-Komposita (E-Mails, KfZ-Anfragen) nicht am Bindestrich trennen */
.pg-ninogpt-01-kopf__lead { max-width: 52ch; margin-top: 20px; }
.pg-ninogpt-01-kopf__aktion { display: grid; justify-items: start; gap: 12px; margin-top: 32px; }
.pg-ninogpt-01-kopf__micro { margin: 0; color: var(--text-mute); font-size: var(--fs-small); }

.pg-ninogpt-01-kopf__medien { position: relative; justify-self: center; width: 100%; min-width: 0; margin: 0; }
.pg-ninogpt-01-kopf__medien--hoch { max-width: 300px; }
.pg-ninogpt-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-ninogpt-01-kopf__frame { position: relative; z-index: 1; transition: transform var(--dur-ui) var(--ease-out); }
.pg-ninogpt-01-kopf__bild { display: block; width: 100%; height: auto; }
.pg-ninogpt-01-kopf__bild-link { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-lg); }
@media (hover: hover) and (pointer: fine) {
  .pg-ninogpt-01-kopf__medien:hover .pg-ninogpt-01-kopf__frame { transform: translateY(-3px); }
}
@media (max-width: 400px) {
  .pg-ninogpt-01-kopf__aktion .btn { white-space: normal; text-align: left; }
}
@media (min-width: 1024px) {
  .pg-ninogpt-01-kopf__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 88px); align-items: center; }
  .pg-ninogpt-01-kopf__medien--hoch { max-width: 380px; }
}

/* ── src/pages/ninogpt/02-problem.css ── */
/* /ninogpt · Problem · Namensraum .pg-ninogpt-02-problem (Lauf V6, PG-FREEBIES)
   Weiß, drei nummerierte Kacheln (mobil gestapelt, ab 900 px drei Spalten). Nummer in der Schritt-Farbe (--nr-bg/--nr-text). */
.pg-ninogpt-02-problem__kopf { max-width: 48rem; }
.pg-ninogpt-02-problem__lead { max-width: 56ch; }
.pg-ninogpt-02-problem__lead strong { color: var(--text); font-weight: 800; }
.pg-ninogpt-02-problem .pg-ninogpt-02-problem__liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pg-ninogpt-02-problem__karte {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 32px);
  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);
}
.pg-ninogpt-02-problem__nr {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  border-radius: var(--radius-pill);
  background: var(--nr-bg, var(--nf-wine));
  color: var(--nr-text, var(--nf-cream));
  font-weight: 800;
  font-size: var(--fs-small);
}
.pg-ninogpt-02-problem__titel { margin: 0; color: var(--text); font: 800 var(--fs-h3)/1.3 var(--font-sans); text-wrap: balance; }
.pg-ninogpt-02-problem__text { margin: 0; color: var(--text-soft); line-height: 1.55; text-wrap: pretty; }
.pg-ninogpt-02-problem__text a { color: var(--accent-text); font-weight: 800; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .pg-ninogpt-02-problem .pg-ninogpt-02-problem__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-ninogpt-02-problem [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/ninogpt/03-formular.css ── */
/* /ninogpt · Formular · Namensraum .pg-ninogpt-03-formular (Lauf V6, PG-FREEBIES)
   Weiß (Rev. 6, V9-B1; vorher Hell-Oliv); zentrierter Kopf, darunter das Formular als graue Karte (Doppelrand: außen --frame-bg = Weiß,
   Haarlinie --hairline, weicher Schatten --shadow-card; innen die Karte, die die Rollen der Section erbt). 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-ninogpt-03-formular__kopf { margin-bottom: clamp(28px, 4vw, 44px); }
.pg-ninogpt-03-formular__lead { max-width: 52ch; }
.pg-ninogpt-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-ninogpt-03-formular__karte {
  padding: clamp(20px, 5vw, 40px) clamp(18px, 5vw, 40px);
  border-radius: calc(var(--radius-lg) - var(--frame-pad));
  background: var(--surface-card, var(--nf-white));
  color: var(--text);
  color-scheme: light;   /* html trägt color-scheme dark (base.css); Checkbox und Felder sonst dunkel auf der hellen Karte */
}
.pg-ninogpt-03-formular__form { display: grid; gap: 18px; }
.pg-ninogpt-03-formular__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pg-ninogpt-03-formular__hinweis { margin: 0; color: var(--text-mute); font-size: var(--fs-caption); }
.pg-ninogpt-03-formular__feld { display: grid; gap: 6px; }
.pg-ninogpt-03-formular__label { color: var(--text); font-size: var(--fs-small); font-weight: 800; }
.pg-ninogpt-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(--surface-card));
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  background: color-mix(in srgb, var(--text) 3%, var(--surface-card));
  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-ninogpt-03-formular__input::placeholder { color: var(--text-mute); opacity: 1; }
.pg-ninogpt-03-formular__input:focus-visible { outline: 2px solid var(--focus-ring, var(--nf-wine)); outline-offset: 2px; border-color: var(--text); }
/* V9-B1: Section ist weiß, die Karte grau (Rolle --surface-card); Felder weiß, damit sie sich von der Karte abheben */
.pg-ninogpt-03-formular__input { background: var(--nf-white-pure); }
.pg-ninogpt-03-formular__input[aria-invalid="true"] { border-color: var(--accent-text); }
.pg-ninogpt-03-formular [hidden] { display: none !important; }
.pg-ninogpt-03-formular .lead-form__fehler { margin: 0; color: var(--accent-text); font-size: var(--fs-small); font-weight: 700; line-height: 1.4; }
.pg-ninogpt-03-formular .pg-ninogpt-03-formular__einwilligung + .lead-form__fehler { margin-top: -10px; padding-left: 36px; }
.pg-ninogpt-03-formular__einwilligung { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: start; }
.pg-ninogpt-03-formular__check { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--nf-wine); }
.pg-ninogpt-03-formular__check:focus-visible { outline: 2px solid var(--focus-ring, var(--nf-wine)); outline-offset: 2px; }
.pg-ninogpt-03-formular__check-label { color: var(--text-soft); font-size: var(--fs-small); line-height: 1.5; text-wrap: pretty; cursor: pointer; }   /* V10-D2 (mob-1-10): kein „zu.“ allein (mit ­ im Link, 320 px) */
.pg-ninogpt-03-formular__check-label a { color: var(--text); font-weight: 800; text-decoration-color: var(--accent-text); text-underline-offset: 3px; }
.pg-ninogpt-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-ninogpt-03-formular__status:empty { display: none; }
.pg-ninogpt-03-formular__status:focus { outline: none; }
.pg-ninogpt-03-formular__status.is-fehler { color: var(--accent-text); box-shadow: inset 3px 0 0 var(--accent-text); }
.pg-ninogpt-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-ninogpt-03-formular__form.is-sending .pg-ninogpt-03-formular__senden { opacity: 0.72; cursor: progress; }
.pg-ninogpt-03-formular .pg-ninogpt-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; }
.pg-ninogpt-03-formular__micro { margin: 0; color: var(--text-mute); font-size: var(--fs-caption); text-align: center; }

/* 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-ninogpt-03-formular [data-motion] {
    transform: translate3d(0, var(--reveal-frame-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/ninogpt/04-funktionen.css ── */
/* /ninogpt · Funktionen · Namensraum .pg-ninogpt-04-funktionen (Lauf V6, PG-FREEBIES)
   Weiß. Vier Kacheln (mobil gestapelt, ab 768 px 2 × 2), darunter die zwei Schritte aus base.css (.steps) hinter einer
   Haarlinie und ein Anker-Link zum Formular. */
.pg-ninogpt-04-funktionen { --line: var(--nf-olive); }   /* Verbindungslinie der Schritte oliv statt Wein (Rot-Budget G5, wie /vpmc 06) */
.pg-ninogpt-04-funktionen__kopf { max-width: 48rem; }
.pg-ninogpt-04-funktionen__lead { max-width: 56ch; }
.pg-ninogpt-04-funktionen .pg-ninogpt-04-funktionen__liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pg-ninogpt-04-funktionen__karte {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 8px;
  align-items: start;
  padding: clamp(20px, 2.4vw, 32px);
  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);
}
/* Scheibenmitte = Mitte der ersten Titelzeile (Titel: --fs-h3, Zeilenhöhe 1.3; Scheibe 28 px); ersetzt die -2 px aus .checks__icon */
.pg-ninogpt-04-funktionen__icon { grid-row: 1 / span 2; margin-top: calc(var(--fs-h3) * 0.65 - 14px); }
.pg-ninogpt-04-funktionen__titel { margin: 0; color: var(--text); font: 800 var(--fs-h3)/1.3 var(--font-sans); text-wrap: balance; }
.pg-ninogpt-04-funktionen__text { grid-column: 2; margin: 0; color: var(--text-soft); line-height: 1.55; text-wrap: pretty; }
.pg-ninogpt-04-funktionen__ablauf { display: grid; gap: 12px; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--hairline); }
.pg-ninogpt-04-funktionen__ablauf-titel { margin: 0; }
.pg-ninogpt-04-funktionen__ablauf-text { max-width: 56ch; margin: 0 0 12px; color: var(--text-soft); }
.pg-ninogpt-04-funktionen__steps { max-width: 56rem; }
.pg-ninogpt-04-funktionen__weiter { margin: 12px 0 0; }
.pg-ninogpt-04-funktionen__link { color: var(--text); }
@media (min-width: 768px) {
  .pg-ninogpt-04-funktionen .pg-ninogpt-04-funktionen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
}
@media (min-width: 900px) {
  .pg-ninogpt-04-funktionen__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-ninogpt-04-funktionen [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

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

/* ── src/pages/ninogpt/05-nino.css ── */
/* /ninogpt · Nino · Namensraum .pg-ninogpt-05-nino (Lauf V6, PG-FREEBIES)
   Weiß (Rev. 6, V9-B1; vorher Oliv), Rahmen und Kennzahlen aus den Rollen. Mobil: Porträt (220 px) über dem Text; ab 900 px Porträt links (4), Text mit Kennzahlenleiste (.stats aus
   base.css, 2 × 2 bzw. vier Spalten) rechts (7). */
.pg-ninogpt-05-nino__grid { display: grid; gap: clamp(28px, 4vw, 48px); }
.pg-ninogpt-05-nino__foto { width: 100%; max-width: 220px; margin: 0; }
.pg-ninogpt-05-nino__text { display: grid; justify-items: start; gap: 16px; min-width: 0; }
.pg-ninogpt-05-nino__pill { margin-bottom: 2px; }
.pg-ninogpt-05-nino__title { margin: 0; }
.pg-ninogpt-05-nino__lead { max-width: 58ch; }
.pg-ninogpt-05-nino__absatz { max-width: 60ch; margin: 0; color: var(--text-soft); line-height: 1.6; text-wrap: pretty; }
.pg-ninogpt-05-nino__absatz strong { color: var(--text); font-weight: 800; }
.pg-ninogpt-05-nino__stats { width: 100%; }
.pg-ninogpt-05-nino__mehr { margin: 4px 0 0; }
@media (min-width: 900px) {
  .pg-ninogpt-05-nino__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .pg-ninogpt-05-nino__foto { max-width: 340px; }
}
/* V9-B1 Symmetrie: gestapelt (bis 899 px) steht das Porträt mittig und etwas größer statt links mit leerer Fläche daneben */
@media (max-width: 767px) {
  .pg-ninogpt-05-nino__foto { justify-self: center; max-width: min(74vw, 300px); }   /* V10-D2 (mass-sub1-03): 266 / 289 / 300 px bei 360 / 390 / 430 statt fix 260 */
}
/* V9-FX2 (dp-05): 768–899 Porträt links (240 px, oben bündig) neben dem Text statt mittig darüber; Kennzahlen dort 2 × 2,
   vierspaltig stießen „12.000+“ und „8 Mio.“ in der 427-px-Spalte aneinander */
@media (min-width: 768px) and (max-width: 899px) {
  .pg-ninogpt-05-nino__grid { grid-template-columns: 240px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .pg-ninogpt-05-nino__foto { max-width: none; }
  .pg-ninogpt-05-nino .pg-ninogpt-05-nino__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-ninogpt-05-nino__stats .stat:nth-child(odd) { border-left: 0; }
  .pg-ninogpt-05-nino__stats .stat:nth-child(n+3) { border-top: 1px solid var(--hairline, var(--nf-line)); }
}

/* ── src/pages/ninogpt/06-faq.css ── */
/* /ninogpt · FAQ · Namensraum .pg-ninogpt-06-faq (Lauf V6, PG-FREEBIES)
   Grau. Akkordeon aus base.css (details/summary, ohne JS), ab 1024 px Kopf links (4) und Fragen rechts (8). */
.pg-ninogpt-06-faq__grid { display: grid; gap: 8px; }
.pg-ninogpt-06-faq__kopf { margin-bottom: clamp(20px, 3vw, 32px); }
.pg-ninogpt-06-faq__weiter { margin: 0; }
.pg-ninogpt-06-faq__link { color: var(--text); }
.pg-ninogpt-06-faq__antwort { display: grid; gap: 10px; line-height: 1.6; }
.pg-ninogpt-06-faq__antwort p { margin: 0; }
.pg-ninogpt-06-faq__antwort a { color: var(--accent-text); font-weight: 800; text-underline-offset: 3px; }
.pg-ninogpt-06-faq__antwort strong { color: var(--text); font-weight: 800; }
.pg-ninogpt-06-faq .pg-ninogpt-06-faq__punkte { display: grid; gap: 6px; margin: 0; padding-left: 1.25em; list-style: disc; }
.pg-ninogpt-06-faq__punkte li::marker { color: var(--nf-olive); }
@media (min-width: 1024px) {
  .pg-ninogpt-06-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
  .pg-ninogpt-06-faq__kopf { position: sticky; top: calc(var(--header-h) + 24px); }
}