/* NF Mentoring · pages/vpmc.css · Build-Output von build.mjs – nicht von Hand ändern. Quellen: src/pages/vpmc/, 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/vpmc/01-kopf.css ── */
/* /vpmc · 01-kopf · Namensraum .pg-vpmc-01-kopf (Slice V5-PV)
   Oliv (Farbwelt Rev. 4, Raster-Klasse bleibt, blendet auf Oliv aus), Pille, H1 mit Akzent „rote Faden“, Leitsatz, Kauf-CTA mit Microcopy, dezenter Funnel-Link, darunter
   Bewertungszeile (vier Porträts überlappend) und „Entwickelt aus der Praxis“ hinter einer Haarlinie. Mobil gestapelt
   (Text · Mockup · Beweis), ab 1024 px Text links (6 Spalten), rechts (6) das Geräte-Mockup frei ohne Rahmen, weil es selbst
   Geräte zeigt (ein heller Oliv-Schimmer darunter setzt es von der Fläche ab), und darunter die Beweiszeilen. Bausteine aus base.css: .pill .h1 .accent .lead .btn
   .link-arrow .rating .frame__caption. */
.pg-vpmc-01-kopf { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 88px)); overflow: hidden; }
.pg-vpmc-01-kopf__grid { display: grid; gap: 44px; }
.pg-vpmc-01-kopf__text { display: grid; justify-items: start; align-content: center; min-width: 0; }
.pg-vpmc-01-kopf__pill { margin-bottom: 18px; }
.pg-vpmc-01-kopf__title { max-width: 13em; padding-bottom: 0.06em; }
.pg-vpmc-01-kopf__lead { max-width: 50ch; margin-top: 22px; }
.pg-vpmc-01-kopf__aktion { display: grid; justify-items: start; gap: 12px; margin-top: 32px; }
.pg-vpmc-01-kopf__micro { margin: 0; }
.pg-vpmc-01-kopf__funnel { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 18px 0 0; color: var(--text-soft); font-size: var(--fs-small); font-weight: 600; }
.pg-vpmc-01-kopf__funnel-link { min-height: 44px; color: var(--text); }

.pg-vpmc-01-kopf__beweis {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 34rem;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.pg-vpmc-01-kopf__bewertung { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pg-vpmc-01-kopf .pg-vpmc-01-kopf__avatare { display: flex; margin: 0; padding: 0 0 0 10px; list-style: none; }
.pg-vpmc-01-kopf__avatare li { width: 40px; height: 40px; margin-left: -10px; overflow: hidden; border: 2px solid var(--bg); border-radius: var(--radius-pill); background: var(--nf-ink-0); }
.pg-vpmc-01-kopf__avatare img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-vpmc-01-kopf__rating { gap: 4px 10px; }
.pg-vpmc-01-kopf__praxis { max-width: 52ch; margin: 0; color: var(--text-soft); font-size: var(--fs-small); line-height: 1.55; text-wrap: pretty; }
.pg-vpmc-01-kopf__praxis strong { color: var(--text); font-weight: 800; }

.pg-vpmc-01-kopf__seite { display: grid; justify-items: start; min-width: 0; }
.pg-vpmc-01-kopf__mockup { position: relative; width: 100%; min-width: 0; margin: 0; }
.pg-vpmc-01-kopf__mockup::before {
  content: "";
  position: absolute;
  inset: 18% 8% -6%;
  z-index: 0;
  border-radius: 50%;
  background: var(--objekt-bg);
  pointer-events: none;
}
.pg-vpmc-01-kopf__bild { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* Rev. 5 (weißer Kopf): der eingebrannte Geräteschatten endet links und unten hart an der Bildkante und zeichnet auf Weiß
   ein graues Rechteck. Die Maske blendet nur diese Ränder aus (Geräte beginnen erst bei 3,8 % links bzw. enden 5 % über unten). */
.pg-vpmc-01-kopf__bild {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3.5%), linear-gradient(to top, transparent, #000 8%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 3.5%), linear-gradient(to top, transparent, #000 8%);
  mask-composite: intersect;
}

@media (max-width: 400px) {
  .pg-vpmc-01-kopf__aktion .btn { white-space: normal; text-align: left; }
}

@media (min-width: 1024px) {
  .pg-vpmc-01-kopf__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    column-gap: clamp(40px, 4.5vw, 80px);
    align-items: center;
  }
  .pg-vpmc-01-kopf__beweis { margin-top: 28px; margin-left: clamp(0px, 3vw, 40px); }
}

/* ── src/pages/vpmc/02-vorteile.css ── */
/* /vpmc · 02-vorteile · Namensraum .pg-vpmc-02-vorteile (Slice V5-PV)
   Weiß (V2-Farbwelt, FE-1b). Drei nummerierte Vorteile ohne Karten: mobil gestapelt mit Haarlinie oben, ab 900 px drei Spalten mit senkrechten
   Haarlinien dazwischen. Haken auf Scheibe über die Haken-Rollen (wie .checks, hier größer; Rev. 5 E3).
   V11-D (Rev. 7): Section ist die Oliv-Bühne der Seite (data-theme olive); alle Farben kommen aus den Rollen. */
.pg-vpmc-02-vorteile__kopf { margin-bottom: clamp(28px, 4vw, 48px); }
.pg-vpmc-02-vorteile .pg-vpmc-02-vorteile__liste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pg-vpmc-02-vorteile__punkt { display: grid; align-content: start; gap: 10px; padding: 22px 0; border-top: 1px solid var(--hairline); }
.pg-vpmc-02-vorteile__nr { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--haken-bg, var(--nr-bg)); color: var(--haken-text, var(--nr-text)); }
.pg-vpmc-02-vorteile__nr svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pg-vpmc-02-vorteile__titel { max-width: 22ch; text-wrap: balance; }
.pg-vpmc-02-vorteile__text { max-width: 44ch; margin: 0; color: var(--text-soft); line-height: 1.6; text-wrap: pretty; }

@media (min-width: 900px) {
  .pg-vpmc-02-vorteile .pg-vpmc-02-vorteile__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
  .pg-vpmc-02-vorteile__punkt { padding: 28px clamp(20px, 2.6vw, 40px) 8px; border-top: 0; }
  .pg-vpmc-02-vorteile__punkt:first-child { padding-left: 0; }
  .pg-vpmc-02-vorteile__punkt + .pg-vpmc-02-vorteile__punkt { border-left: 1px solid var(--hairline); }
  /* V9-FX2 (dp-14): dritter Titel dreizeilig → Text begann 30 px tiefer; Subgrid legt Haken, Titel, Text auf gemeinsame Zeilen */
  .pg-vpmc-02-vorteile .pg-vpmc-02-vorteile__liste { grid-template-rows: auto auto auto; }
  .pg-vpmc-02-vorteile__punkt { grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; }
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-vpmc-02-vorteile [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/vpmc/03-vergleich.css ── */
/* /vpmc · 03-vergleich · Namensraum .pg-vpmc-03-vergleich (Slice V5-PV)
   Grau (V2-Farbwelt, FE-1b; vorher Bordeaux-2). Kopf zentriert, darunter .compare aus base.css (ab 900 px zwei Spalten). Je Spalte Einleitung und fünf Punkte
   mit Symbol: Kreuz grau im Ring (Vorher, nie rot), Haken auf Scheibe über die Rollen --haken-bg/--haken-text mit Rückfall --nr-bg/--nr-text (Nachher, Rev. 5 E3). */
.pg-vpmc-03-vergleich__kopf { margin-bottom: clamp(28px, 4vw, 48px); }
.pg-vpmc-03-vergleich__compare { max-width: 72rem; margin-inline: auto; }
.pg-vpmc-03-vergleich__intro { max-width: 52ch; margin: 0 0 20px; color: var(--text-soft); line-height: 1.6; text-wrap: pretty; }
.pg-vpmc-03-vergleich__col:not(.compare__col--with) .pg-vpmc-03-vergleich__intro { color: var(--text-mute); }
.pg-vpmc-03-vergleich__liste li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 12px; font-weight: 700; line-height: 1.45; }
.pg-vpmc-03-vergleich__col.compare__col--with .pg-vpmc-03-vergleich__liste li { color: var(--text); }
.pg-vpmc-03-vergleich__icon { display: grid; place-items: center; width: 28px; height: 28px; margin-top: -2px; border-radius: var(--radius-pill); background: var(--haken-bg, var(--nr-bg)); }
.pg-vpmc-03-vergleich__icon--ohne { background: transparent; box-shadow: inset 0 0 0 1px var(--nf-grey-500); }
.pg-vpmc-03-vergleich__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--haken-text, var(--nr-text)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pg-vpmc-03-vergleich__icon--ohne svg { stroke: var(--nf-grey-700); }

/* ── src/pages/vpmc/04-highlights.css ── */
/* /vpmc · 04-highlights · Namensraum .pg-vpmc-04-highlights (Slice V5-PV)
   Hell-Oliv (V2-Farbwelt, FE-1b). Weiße Karten mit Doppelrand (Bild sitzt 8 px im Kartenrand, dunkle Bildfläche) wie .card--light und /wissen.
   FE-3 (S1-01): bis 1023 px eine waagerecht wischbare Reihe (scroll-snap, Karten 84 % breit, ab 640 px 46 %, die nächste Karte
   lugt heraus; Muster 1:1 aus /vpmc 07-stimmen `__reihe`, core.js macht mit [data-wisch] die Fokus-Karte). Karte: Bild oben, Text darunter.
   Ab 1024 px Bento aus zwei Spalten: links die erste Karte groß über zwei Reihen (Bild oben), rechts die beiden anderen
   als Zeilen (Bild links 46 %, Text rechts). Bilder ganz sichtbar (Seitenverhältnis 1,84 bzw. 2,04, contain). */
.pg-vpmc-04-highlights__kopf { margin-bottom: clamp(28px, 4vw, 48px); }
.pg-vpmc-04-highlights .pg-vpmc-04-highlights__liste {
  display: grid;
  grid-auto-columns: 84%;
  grid-auto-flow: column;
  gap: 12px;
  margin: 0 calc(var(--gutter, 20px) * -1);
  padding: 0 var(--gutter, 20px) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter, 20px);
  scrollbar-width: none;
  list-style: none;
}
.pg-vpmc-04-highlights__liste::-webkit-scrollbar { display: none; }
.pg-vpmc-04-highlights__liste:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.pg-vpmc-04-highlights__karte {
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 8px;
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.pg-vpmc-04-highlights__media {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1.84;
  border-radius: calc(var(--radius-md) - 8px);
  background: var(--nf-ink-0);
}
.pg-vpmc-04-highlights__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pg-vpmc-04-highlights__body { display: grid; align-content: start; gap: 8px; padding: 20px 12px 12px; }
.pg-vpmc-04-highlights__titel { max-width: 26ch; line-height: 1.25; text-wrap: balance; }
.pg-vpmc-04-highlights__text { max-width: 48ch; margin: 0; color: var(--text-soft); line-height: 1.6; text-wrap: pretty; }

@media (min-width: 640px) {
  .pg-vpmc-04-highlights .pg-vpmc-04-highlights__liste { grid-auto-columns: 46%; }
}
@media (min-width: 1024px) {
  .pg-vpmc-04-highlights .pg-vpmc-04-highlights__liste {
    grid-auto-columns: auto;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 24px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .pg-vpmc-04-highlights__karte { scroll-snap-align: none; }
  .pg-vpmc-04-highlights__karte--gross { grid-row: 1 / span 2; }
  .pg-vpmc-04-highlights__karte--gross .pg-vpmc-04-highlights__body { gap: 12px; padding: 24px 16px 16px; }
  .pg-vpmc-04-highlights__karte:not(.pg-vpmc-04-highlights__karte--gross) {
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    align-content: center;
    align-items: center;
  }
  .pg-vpmc-04-highlights__karte:not(.pg-vpmc-04-highlights__karte--gross) .pg-vpmc-04-highlights__body { padding: 12px 12px 12px 22px; }
  .pg-vpmc-04-highlights__karte:not(.pg-vpmc-04-highlights__karte--gross) .pg-vpmc-04-highlights__titel { font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.25rem); }
  .pg-vpmc-04-highlights__karte:not(.pg-vpmc-04-highlights__karte--gross) .pg-vpmc-04-highlights__text { font-size: var(--fs-body); line-height: 1.5; }
}

/* V9-FX2 (dp-08): bei 1024–1199 brach „TOP-1% Agentur“ als „TOP- / 1% Agentur“ in einer 201-px-Spalte; Akzent bleibt
   zusammen (142 px, passt in jede Spalte), und die Bildspalte der schmalen Karten wird dort etwas schmaler */
.pg-vpmc-04-highlights__karte:not(.pg-vpmc-04-highlights__karte--gross) .pg-vpmc-04-highlights__titel .accent { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .pg-vpmc-04-highlights__karte:not(.pg-vpmc-04-highlights__karte--gross) { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-vpmc-04-highlights [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/vpmc/05-einblick.css ── */
/* /vpmc · 05-einblick · Namensraum .pg-vpmc-05-einblick (Slice V5-PV)
   Oliv (V2-Farbwelt, FE-1b; vorher Bordeaux). Mobil gestapelt (Überschrift · Text · CTA · Video), ab 1024 px Text links (5 Teile) und das Video im Doppelrand
   rechts (7). Das Standbild hat das Seitenverhältnis 1,4165 (Geräte-Mockup) und steht ganz im Gate: --consent-ratio passt
   die Höhe an (base.css erlaubt das je Section); Play-Knopf und Pille bleiben unverändert aus base.css. */
.pg-vpmc-05-einblick__grid { display: grid; gap: 36px; }
.pg-vpmc-05-einblick__text { display: grid; justify-items: start; align-content: center; }
.pg-vpmc-05-einblick__lead { max-width: 40ch; margin-top: 18px; }
.pg-vpmc-05-einblick__aktion { display: grid; justify-items: start; gap: 12px; margin-top: 28px; }
.pg-vpmc-05-einblick__micro { margin: 0; }
.pg-vpmc-05-einblick__film { min-width: 0; margin: 0; }
.pg-vpmc-05-einblick__consent { --consent-ratio: 1.4165; }

@media (min-width: 1024px) {
  .pg-vpmc-05-einblick__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 5.5vw, 96px);
    align-items: center;
  }
  .pg-vpmc-05-einblick__film { width: 100%; max-width: 700px; justify-self: end; }
}

/* ── src/pages/vpmc/06-schritte.css ── */
/* /vpmc · 06-schritte · Namensraum .pg-vpmc-06-schritte (Slice V5-PV)
   Weiß (V2-Farbwelt, FE-1b). Kopf zentriert, darunter .steps aus base.css (mobil senkrecht mit Linie, ab 900 px drei Spalten mit Linie). */
/* Verbindungslinien der Schritte: Oliv kommt jetzt zentral aus tokens.css (--line auf white/grey/olive-light, FE-2) */
.pg-vpmc-06-schritte__kopf { max-width: 52rem; margin-bottom: clamp(32px, 4.5vw, 56px); }
.pg-vpmc-06-schritte__steps { max-width: 72rem; margin-inline: auto; }
.pg-vpmc-06-schritte .steps__text { max-width: 40ch; line-height: 1.6; text-wrap: pretty; }
/* V9-B1: zentrierte Überschrift ausgeglichen umbrechen (bei 320/360 sonst „Der“ und „optimierte“ allein) */
.pg-vpmc-06-schritte__kopf .h2 { text-wrap: balance; }
@media (max-width: 359px) { .pg-vpmc-06-schritte__kopf .h2 { hyphens: auto; } }   /* „verkaufspsychologisch“ ist bei 320 breiter als die Spalte */

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

/* ── src/pages/vpmc/07-stimmen.css ── */
/* /vpmc · 07-stimmen · Namensraum .pg-vpmc-07-stimmen (Slice V5-PV)
   Weiß (Rev. 6, V9-B1; Superplayer/Stimmen immer auf Weiß; vorher Oliv). Oben zwei große Karten (Foto links, Sterne, Zitat in Playfair-Größe ohne Kursivzwang, Name und Gesellschaft),
   ab 1024 px nebeneinander. Darunter vier Stimmen als Reihe: mobil waagerecht wischbar (scroll-snap, Karten 84 % breit),
   ab 1024 px vier Spalten. Glas-Karten aus den Rollen der Fläche (--surface-card, Linie, Schatten), Hinweiszeile direkt darunter. */
.pg-vpmc-07-stimmen__kopf { margin-bottom: clamp(28px, 4vw, 44px); }
.pg-vpmc-07-stimmen__gross { display: grid; gap: 16px; }
.pg-vpmc-07-stimmen__karte {
  margin: 0;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.pg-vpmc-07-stimmen__karte--foto { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 18px; }
.pg-vpmc-07-stimmen__foto { overflow: hidden; aspect-ratio: 1; border: 1px solid var(--hairline); border-radius: var(--radius-sm, 12px); background: var(--nf-ink-0); }
.pg-vpmc-07-stimmen__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pg-vpmc-07-stimmen__inhalt { display: grid; align-content: start; gap: 12px; min-width: 0; }
.pg-vpmc-07-stimmen__figur { display: grid; align-content: start; gap: 12px; height: 100%; margin: 0; }
.pg-vpmc-07-stimmen__zitat { margin: 0; }
.pg-vpmc-07-stimmen__zitat p { margin: 0; color: var(--text); font-size: var(--fs-body); font-weight: 600; line-height: 1.55; text-wrap: pretty; }
.pg-vpmc-07-stimmen__zitat--gross p { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 700; line-height: 1.45; }
.pg-vpmc-07-stimmen__quelle { display: grid; gap: 2px; margin-top: auto; padding-top: 4px; }
.pg-vpmc-07-stimmen__name { color: var(--text); font-weight: 800; }
.pg-vpmc-07-stimmen__firma { color: var(--text-mute); font-size: var(--fs-small); font-style: italic; }

.pg-vpmc-07-stimmen .pg-vpmc-07-stimmen__reihe {
  display: grid;
  grid-auto-columns: 84%;
  grid-auto-flow: column;
  gap: 12px;
  margin: 16px calc(var(--gutter, 20px) * -1) 0;
  padding: 0 var(--gutter, 20px) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter, 20px);
  scrollbar-width: none;
  list-style: none;
}
.pg-vpmc-07-stimmen__reihe::-webkit-scrollbar { display: none; }
.pg-vpmc-07-stimmen__reihe > li { scroll-snap-align: start; }
/* V9-FX2 (dp-21): im Grid mit align-content:start wirkte margin-top:auto der Quelle nicht; als Flex-Spalte stehen Name und
   Gesellschaft aller Karten einer Reihe auf derselben Linie am Kartenboden */
.pg-vpmc-07-stimmen__reihe .pg-vpmc-07-stimmen__figur { display: flex; flex-direction: column; }
.pg-vpmc-07-stimmen__reihe:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.pg-vpmc-07-stimmen__hinweis { margin: 14px 0 0; }
/* V5-FX: mobil stapeln sich die Karten, der Hinweis unter der Reihe läge über eine Bildschirmhöhe unter dem Pierre-Zitat.
   Deshalb bis 639 px derselbe Hinweis zusätzlich unten in der Pierre-Karte, über beide Spalten; ab 640 px ausgeblendet. */
.pg-vpmc-07-stimmen__hinweis-karte { grid-column: 1 / -1; margin: 0; }

@media (min-width: 640px) {
  .pg-vpmc-07-stimmen__hinweis-karte { display: none; }
  .pg-vpmc-07-stimmen__karte--foto { grid-template-columns: 140px minmax(0, 1fr); gap: 22px; }
  .pg-vpmc-07-stimmen .pg-vpmc-07-stimmen__reihe { grid-auto-columns: 46%; }
}
@media (min-width: 1024px) {
  .pg-vpmc-07-stimmen__gross { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .pg-vpmc-07-stimmen__karte--foto { grid-template-columns: 160px minmax(0, 1fr); }
  .pg-vpmc-07-stimmen .pg-vpmc-07-stimmen__reihe {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 24px 0 0;
    padding: 0;
    overflow: visible;
  }
}

/* V9-B1: unter 480 px Foto über dem Zitat statt daneben (bei 320 brach das Zitat sonst fast Wort für Wort um) */
@media (max-width: 479px) {
  .pg-vpmc-07-stimmen__karte--foto { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pg-vpmc-07-stimmen__karte--foto .pg-vpmc-07-stimmen__foto { width: 96px; }
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-vpmc-07-stimmen [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/vpmc/08-inhalte.css ── */
/* /vpmc · 08-inhalte · Namensraum .pg-vpmc-08-inhalte (Slice V5-PV)
   Hell-Oliv (V2-Farbwelt, FE-1b). Links Kopf, drei Eckdaten als Liste mit Haarlinien (Kennzahl fett in Oliv, Satz darunter) und „Ideal geeignet für“
   rechts; rechts das Curriculum als Akkordeon (.accordion aus base.css, zugeklappt, exklusive Gruppe über name) und darunter
   „Ideal geeignet für“ als Chips.
   Mobil gestapelt, ab 1024 px 5 : 7 Spalten, oben bündig. */
.pg-vpmc-08-inhalte__grid { display: grid; gap: 44px; }
.pg-vpmc-08-inhalte__links { display: grid; justify-items: start; align-content: start; min-width: 0; }
.pg-vpmc-08-inhalte__lead { max-width: 44ch; margin-top: 18px; }
.pg-vpmc-08-inhalte__fakten { display: grid; width: 100%; margin: 28px 0 0; }
.pg-vpmc-08-inhalte__fakt { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--hairline); }
.pg-vpmc-08-inhalte__fakt:last-child { border-bottom: 1px solid var(--hairline); }
.pg-vpmc-08-inhalte__fakt dt { color: var(--stat-value); font-size: var(--fs-h3); font-weight: 800; line-height: 1.3; }
.pg-vpmc-08-inhalte__fakt dd { max-width: 50ch; margin: 0; color: var(--text-soft); line-height: 1.55; text-wrap: pretty; }
.pg-vpmc-08-inhalte__fuer { margin-top: 32px; }
.pg-vpmc-08-inhalte__fuer-titel { margin: 0 0 12px; color: var(--text); font-size: var(--fs-body); font-weight: 800; }
.pg-vpmc-08-inhalte .pg-vpmc-08-inhalte__rollen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-vpmc-08-inhalte__rollen li {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--pill-line);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--pill-text);
  font-size: var(--fs-small);
  font-weight: 700;
}
.pg-vpmc-08-inhalte__rechts { min-width: 0; }
.pg-vpmc-08-inhalte__curr-titel { max-width: 30ch; margin: 0 0 18px; line-height: 1.3; text-wrap: balance; }
.pg-vpmc-08-inhalte__modul { display: block; margin-bottom: 2px; color: var(--pill-text); font-size: var(--fs-caption, 0.8125rem); font-weight: 800; letter-spacing: 0.04em; }
.pg-vpmc-08-inhalte__punkte { padding-top: 4px; }
.pg-vpmc-08-inhalte__punkte li { color: var(--text-soft); }
.pg-vpmc-08-inhalte__punkte strong { color: var(--text); font-weight: 800; }

@media (min-width: 1024px) {
  .pg-vpmc-08-inhalte__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 5.5vw, 96px);
    align-items: start;
  }
  .pg-vpmc-08-inhalte__curr-titel { margin-top: 6px; }
}

/* ── src/pages/vpmc/09-faq.css ── */
/* /vpmc · 09-faq · Namensraum .pg-vpmc-09-faq (Slice V5-PV)
   Weiß (Rev. 6, V9-B1; vorher Grau). Akkordeon aus base.css. Rasterflächen: mobil Überschrift · Fragen · Nino,
   ab 1024 px links Überschrift und darunter der Nino-Kurzblock (4 Teile), rechts die Fragen (8), oben bündig.
   Nino-Block als Karte aus der Rolle --surface-card (auf Weiß graue Kachel), Foto 112 × 140 px (4:5, nino-ganz-kopf). */
.pg-vpmc-09-faq__grid { display: grid; grid-template-areas: "kopf" "liste" "nino"; gap: 28px; }
.pg-vpmc-09-faq__kopf { grid-area: kopf; }
.pg-vpmc-09-faq__liste { grid-area: liste; min-width: 0; }
.pg-vpmc-09-faq .accordion__panel p { margin: 0; line-height: 1.6; }
.pg-vpmc-09-faq__punkte li { color: var(--text-soft); }

.pg-vpmc-09-faq__nino {
  grid-area: nino;
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.pg-vpmc-09-faq__nino-kopf { display: flex; align-items: center; gap: 18px; }
.pg-vpmc-09-faq__nino-foto { flex: none; width: 112px; height: 140px; aspect-ratio: 4 / 5; border-radius: 12px; object-fit: cover; object-position: 50% 30%; background: var(--nf-white-pure); }   /* V9-B1: Kopf und Schultern 4:5 (nino-ganz), kein dunkler Grund */
.pg-vpmc-09-faq__nino-label { margin: 0 0 2px; color: var(--pill-text); font-size: var(--fs-small); font-weight: 800; }
.pg-vpmc-09-faq__nino-name { margin: 0; }
.pg-vpmc-09-faq__nino-text { margin: 0; color: var(--text-soft); line-height: 1.6; text-wrap: pretty; }
.pg-vpmc-09-faq__nino-link { min-height: 44px; color: var(--text); }

/* V9-FX2 (dp-09): die Nino-Karte stand links unter der Überschrift und war 270–400 px länger als die Fragenliste rechts
   (Loch rechts unten). Jetzt rechts unter den Fragen, Foto links neben dem Text; die Überschrift klebt links unter dem Header
   (Muster wie /ninogpt und /marketingmastermind). */
@media (min-width: 1024px) {
  .pg-vpmc-09-faq__grid {
    grid-template-areas: "kopf liste" "kopf nino";
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto auto;
    column-gap: clamp(48px, 5.5vw, 96px);
    row-gap: 40px;
    align-items: start;
  }
  .pg-vpmc-09-faq__kopf { position: sticky; top: calc(var(--header-h) + 32px); }
  .pg-vpmc-09-faq__nino { grid-template-columns: 112px minmax(0, 1fr); column-gap: 24px; row-gap: 10px; padding: 24px; }
  .pg-vpmc-09-faq__nino-kopf { display: contents; }
  .pg-vpmc-09-faq__nino-foto { grid-row: 1 / span 4; }
  .pg-vpmc-09-faq__nino-kopf > div,
  .pg-vpmc-09-faq__nino-text,
  .pg-vpmc-09-faq__nino-link { grid-column: 2; }
}

/* ── src/pages/vpmc/10-schluss.css ── */
/* /vpmc · 10-schluss · Namensraum .pg-vpmc-10-schluss (Slice V5-PV)
   Grau (Rev. 6, V9-B1; vorher Oliv), Liste als weiße Karte. Oben der Kauf-Block: mobil gestapelt (Überschrift · Leitsatz · CTA · Punkte), ab 1024 px links
   Überschrift, Leitsatz und CTA (6 Teile), rechts „Sichere dir …“ mit den vier Punkten (6). Darunter hinter einer Haarlinie das CTA-Band (Baustein cta-band),
   hier bewusst leiser: Titel in H3-Größe, weil es der zweite Weg neben dem Kauf ist.
   V11-D (Rev. 7): Schluss-CTA in data-theme red; beide Primärknöpfe invers über --btn1-*, Liste auf --surface-sunken. */
.pg-vpmc-10-schluss__kauf { display: grid; gap: 40px; }
.pg-vpmc-10-schluss__text { display: grid; justify-items: start; align-content: center; min-width: 0; }
.pg-vpmc-10-schluss__lead { max-width: 44ch; margin-top: 18px; }
.pg-vpmc-10-schluss__zwischen { margin: 0 0 14px; color: var(--text); font-weight: 800; }
.pg-vpmc-10-schluss__punkte { max-width: 58ch; }
.pg-vpmc-10-schluss__punkte li { color: var(--text-soft); }
.pg-vpmc-10-schluss__aktion { display: grid; justify-items: start; gap: 12px; margin-top: 32px; }
.pg-vpmc-10-schluss__micro { margin: 0; }
.pg-vpmc-10-schluss__liste { min-width: 0; }

.pg-vpmc-10-schluss__band { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--hairline); }
.pg-vpmc-10-schluss .b-cta-band__titel { font-size: var(--fs-h3); line-height: 1.3; }
.pg-vpmc-10-schluss .b-cta-band { gap: 12px; }

@media (max-width: 400px) {
  .pg-vpmc-10-schluss__aktion .btn { white-space: normal; text-align: left; }
}
/* V9-B1 Symmetrie: mobil Kauf-Knopf volle Breite wie der Funnel-Knopf im Band darunter (cta-band.css bis 599 px) */
@media (max-width: 599px) {
  .pg-vpmc-10-schluss__aktion { justify-items: stretch; width: 100%; }
  .pg-vpmc-10-schluss__aktion .btn { width: 100%; }
}

@media (min-width: 1024px) {
  .pg-vpmc-10-schluss__kauf {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    column-gap: clamp(48px, 5.5vw, 96px);
    align-items: center;
  }
  .pg-vpmc-10-schluss__liste { padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--surface-card-line); border-radius: var(--radius-md); background: var(--surface-sunken); }
}