/* HyperClip Video Blueprint — /video-blueprint/
   ============================================================================
   Gilt hier wie ueberall auf der Seite: KEIN Hex-Wert und KEIN rgba()-Literal
   in einer Seitenregel. Jede Farbe kommt aus theme.css, eigene Deckkraft ueber
   rgba(var(--…-rgb),a). Sonst hat die helle Fassung eine zweite Wahrheit.

   Die EINE Ausnahme steht im Markup, nicht hier: die Farbfelder der Style
   Tokens und die Flaeche im Creative-Direction-Frame tragen echte Hex-Werte
   als `style="…"`. Das sind INHALTE — die Farbwelt des empfohlenen Looks —
   und keine Seitenfarben. Ein Token-Feld, das sich mit dem Theme dreht, waere
   schlicht falsch.

   KEINE TRANSITION AUF width, height, padding ODER margin. Was waechst,
   waechst ueber `transform: scaleX()`, die Rundung sitzt am Behaelter (siehe
   `.vb-fortschritt`, wo genau dieser Fehler schon einmal drinstand). Diese
   Regel steht hier oben, weil der Design-Detektor sie fuer diese Datei NICHT
   mehr pruefen kann: seine einzige Treffer-Zeile ist `stroke-width` an einer
   SVG-Diagrammlinie — eine Mal-, keine Layout-Eigenschaft —, und die Regel
   laesst sich nur fuer die ganze Datei abschalten. Die Begruendung mit allen
   Einzelheiten steht in .impeccable/config.json. Der Waechter ist damit
   dieser Absatz und nicht mehr das Werkzeug.

   Der Akzent der Seite ist `--pa` (HyperClip = Violett, gesetzt ueber
   data-product im Markup), der Handlungsakzent bleibt Cyan. Zwei Akzente sind
   das Maximum; ein dritter macht aus Hierarchie Dekoration.
   ========================================================================= */

.vb [hidden], .vb .hidden { display: none !important; }

/* ---------------------------------------------------------------- Rahmen */
.vb-shell { max-width: 780px; margin: 0 auto; }
.vb-wide { max-width: 1060px; margin: 0 auto; }
/* Der Bericht ist ein Dashboard, keine Werbeseite — er bekommt eine eigene,
   breitere Buehne statt der lese-optimierten `.vb-wide`. 1400px, nicht mehr:
   auf 1920px-Monitoren bleibt noch Luft, aber die Karten muessen nicht auf
   eine 60-Zeichen-Spalte schrumpfen. */
.vb-dash { max-width: 1480px; margin: 0 auto; }
/* Zwoelf Spalten fuer alles, was mehr Kontrolle braucht als `auto-fill`
   erlaubt — vor allem der Ueberblick, wo Karten bewusst unterschiedlich
   breit sein sollen (§8 des Auftrags: „nicht alles identisch"). */
.vb-g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.vb-g12 > * { min-width: 0; }
.vb-c-2 { grid-column: span 2; }
.vb-c-3 { grid-column: span 3; }
.vb-c-4 { grid-column: span 4; }
.vb-c-5 { grid-column: span 5; }
.vb-c-6 { grid-column: span 6; }
.vb-c-7 { grid-column: span 7; }
.vb-c-8 { grid-column: span 8; }
.vb-c-9 { grid-column: span 9; }
.vb-c-12 { grid-column: span 12; }
@media (max-width: 980px) {
  .vb-g12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vb-g12 .vb-c-2,.vb-g12 .vb-c-3 { grid-column: span 3; }
  .vb-g12 .vb-c-4,.vb-g12 .vb-c-5,.vb-g12 .vb-c-6,.vb-g12 .vb-c-7,.vb-g12 .vb-c-8,.vb-g12 .vb-c-9 { grid-column: span 6; }
}
@media (max-width: 620px) {
  .vb-g12 { grid-template-columns: 1fr; }
  .vb-g12 > * { grid-column: 1 / -1; }
  /* Eine Spalte ist erst dann eine Spalte, wenn auch die Kinder ihre
     Spannweite verlieren. `.vb-g12 .vb-c-2` aus dem 980er-Block hat zwei
     Klassen und schlaegt `.vb-g12 > *` mit einer — das Kind behaelt dann
     `span 3`, das Raster legt fuer die ueberzaehligen Spuren IMPLIZITE
     Spalten an, und die Kacheln stehen wieder nebeneinander. Gemessen bei
     377 px: eine explizite Spur (260 px) plus fuenf implizite. Deshalb hier
     dieselbe Klassenzahl wie oben — nicht `!important`. */
  .vb-g12 .vb-c-2,.vb-g12 .vb-c-3,.vb-g12 .vb-c-4,.vb-g12 .vb-c-5,.vb-g12 .vb-c-6,
  .vb-g12 .vb-c-7,.vb-g12 .vb-c-8,.vb-g12 .vb-c-9,.vb-g12 .vb-c-12 { grid-column: 1 / -1; }
}

/* ======================================================================
   1 — LANDINGPAGE

   Die Seite ist ein Beratungsprodukt, also führt sie: Nutzen, Beleg,
   Bausteine, Ablauf, Prüfbarkeit, Fragen, Einladung. Jeder Abschnitt
   beantwortet eine andere Frage; wiederholt sich einer, gehört er weg.

   Auf dieser Seite ist die grosse Navigation ausgeblendet — Logo und
   Theme-Schalter bleiben, alles andere wäre eine zweite Handlung neben der
   einen, um die es hier geht. Die Regel greift nur über `body.vb`, andere
   Seiten sind unberührt.
   ====================================================================== */
.vb #hdr .nav-links,
.vb #hdr [data-atlas],
.vb #hdr .burger { display: none !important; }
.vb #hdr .nav { justify-content: space-between; }

/* `pages.css` setzt `body { overflow-x: hidden }`. Das macht aus dem Rumpf
   einen eigenen Scroll-Behälter — und damit hört JEDES `position: sticky`
   darin auf zu kleben: die Sprungleiste blieb an ihrem Platz stehen, statt
   oben zu haften. Gemessen am 17.09.2026.
   `clip` schneidet genauso ab, erzeugt aber keinen Scroll-Behälter. Kennt ein
   Browser `clip` nicht, greift die Zeile darüber weiter — dann klebt nichts,
   aber es läuft auch nichts über. Beides ist harmlos. */
.vb { overflow-x: hidden; overflow-x: clip; }

/* --------------------------------------------------------------- Einstieg */
.vb-hero { padding: 132px 0 84px; position: relative; overflow: hidden; }
.vb-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 78%;
  background:
    radial-gradient(60% 60% at 26% 0%, rgba(var(--pa-rgb), .13), transparent 70%),
    radial-gradient(50% 50% at 78% 14%, rgba(var(--accent-rgb), .09), transparent 70%);
  pointer-events: none;
}
.vb-hero .wrap { position: relative; }
/* §46: die Ueberschrift bekommt mehr Breite als die Vorschau. Bei 50/50
   brach sie auf fuenf Zeilen um — gemessen, nicht geschaetzt. */
.vb-hero-grid { display: grid; grid-template-columns: 52fr 48fr; gap: 52px; align-items: center; }
/* §45: groesser, aber kompakter. Zwei bis drei Zeilen auf dem Schreibtisch. */
.vb-hero h1 {
  font-size: clamp(31px, 3.5vw, 46px); line-height: 1.07; letter-spacing: -.03em; margin: 0 0 20px;
  /* Ohne Ausgleich bricht die Zeile nach „passen“ und lässt ein einzelnes
     „zu“ stehen. `balance` ist hier kein Feinschliff, sondern der Unterschied
     zwischen zwei und vier Zeilen. */
  text-wrap: balance;
}
.vb-hero .lead { margin: 0 0 30px; max-width: 520px; }

/* Der zweite Weg ist bewusst ein Link und kein Knopf: er soll erreichbar
   sein, aber nicht mit dem Start konkurrieren. */

/* §9: eine Zeile, drei Haken. Auf dem Telefon darf sie umbrechen — aber als
   Ganzes, nicht mitten in einem Punkt. */
/* Mittig unter der Schaltflaeche, oben im Hero wie unten am Seitenende.
   Die untere Zeile trug dafuer bisher `is-mitte` — dazu gab es aber nie
   eine Regel (nur `.vb-ov.is-mitte` fuer die Frame-Ueberschriften), sie
   stand also genauso links wie die obere. `text-align` am Elternteil half
   nicht: das hier ist ein Flex-Container, der braucht `justify-content`. */
.vb-facts {
  margin: 18px 0 0; font-size: 13.5px; color: var(--text-dim);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  /* Dieselbe Breite wie `.vb-qform` darueber: sonst zentriert die Zeile sich
     in der ganzen Spalte (568 px) und steht 24 px neben der Mitte der
     Schaltflaeche (520 px). Gemessen im Hero bei 1440 px. */
  max-width: 520px;
}
/* Am Seitenende steht das Formular selbst mittig (`margin-inline: auto`) —
   die Zeile darunter muss es ihm gleichtun, sonst rutscht sie nach links. */
.vb-qform.is-schluss + .vb-facts { margin-inline: auto; }
.vb-facts span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.vb-facts i { font-style: normal; color: var(--cyan); }

/* ------------------------------------------------- Ergebnisvorschau (Hero) */
.vb-bsp-badge {
  display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--pa); background: rgba(var(--pa-rgb), .12);
  border: 1px solid rgba(var(--pa-rgb), .3); border-radius: 20px; padding: 4px 11px; margin-bottom: 11px;
}
.vb-schau-mehr {
  display: block; padding: 13px 22px; border-top: 1px solid var(--border-soft);
  font-size: 13.5px; color: var(--cyan); text-decoration: none; background: var(--inset);
}
.vb-schau-mehr:hover { background: var(--inset-hover); }

/* Entwurf fortsetzen / vorhandenen Bericht öffnen */
.vb-resume {
  margin: 26px 0 0; max-width: 560px; text-align: left;
  background: var(--inset); border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 16px;
  padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.vb-resume p { margin: 0; flex: 1 1 240px; font-size: 14.5px; color: var(--text-dim); }
.vb-resume p b { color: var(--text); }
.vb-resume button { font-size: 14px; padding: 10px 18px; }

/* ------------------------------------------------------- Abschnitts-Köpfe */
.vb-abs-kopf { max-width: 680px; margin: 0 0 34px; }
.vb-abs-kopf h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.028em; line-height: 1.12;
  font-size: clamp(25px, 3.4vw, 36px); margin: 10px 0 12px;
}
.vb-abs-kopf .lead { font-size: 16.5px; margin: 0; }

/* ------------------------------------------------------- Beispiel-Blueprint */
.vb-demo { padding: 76px 0; scroll-margin-top: 110px; }
.vb-tablist {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: 22px;
  background: var(--inset); border: 1px solid var(--border-soft); border-radius: 14px;
}
.vb-tablist button {
  flex: 1 1 auto; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--text-dim); font-family: var(--font-body); font-size: 14px;
  font-weight: 500; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast);
}
.vb-tablist button:hover { color: var(--text); }
.vb-tablist button[aria-selected="true"] {
  background: var(--panel-raised); border-color: var(--panel-border); color: var(--text);
}
.vb-tablist button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Ohne JavaScript stehen alle Tafeln untereinander — lesbar bleibt es immer. */
.vb-tabpanel[hidden] { display: none; }
.vb-tabpanel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; border-radius: 12px; }
.vb-tabpanel > .vb-card + .vb-card { margin-top: 18px; }
.vb-tabpanel h4 {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -.015em;
  margin: 20px 0 8px;
}
.vb-tabpanel h5 { margin-top: 14px; }
.vb-mitte { text-align: center; margin-top: 22px; }
.vb-stilframe.is-gross { flex: none; width: 140px; height: 76px; }
.vb-stil-schau .vb-card-lead { margin: 0; }

/* ---------------------------------------------- Ergebnis in drei Schritten
   §11 des Redesign-Auftrags: drei nummerierte Karten statt einer
   Funktionsliste. Die dritte ist optisch hervorgehoben — sie ist das
   eigentliche Produkt, die ersten beiden sind der Weg dahin. */
.vb-ergebnis { padding: 76px 0; }
.vb-erg-g {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.vb-erg-k {
  padding: 26px 24px; border: 1px solid var(--border-soft); border-radius: 18px;
  background: var(--panel); display: grid; gap: 10px; align-content: start;
}
.vb-erg-k.is-kern { border-color: rgba(var(--accent-rgb), .34); background: rgba(var(--accent-rgb), .05); }
.vb-erg-n {
  font-family: var(--font-display); font-size: 13px; letter-spacing: .04em;
  color: var(--cyan); font-variant-numeric: tabular-nums;
}
.vb-erg-k > b { font-family: var(--font-display); font-size: 19px; letter-spacing: -.02em; line-height: 1.22; }
.vb-erg-k p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
.vb-erg-out {
  margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
  padding-top: 10px; border-top: 1px solid var(--border-soft);
}
@media (max-width: 860px) { .vb-erg-g { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- Sozialer Beleg (leer)
   §6 bis §9: solange es keine verifizierte Bewertung gibt, ist die Ehrlichkeit
   über diesen Stand selbst der Vertrauensbeweis — links eine grosse Karte mit
   der Erklärung, rechts drei kleine, nachprüfbare Punkte. Kein generisches
   3×2-Raster aus leeren Kacheln. */
.vb-proof-leer { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: stretch; }
.vb-proof-leer-k {
  padding: 30px 28px; border: 1px solid var(--border-soft); border-radius: 20px;
  background: var(--panel); display: grid; gap: 12px; align-content: center;
}
.vb-proof-leer-m {
  display: inline-block; width: fit-content; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600; color: var(--pa);
  background: rgba(var(--pa-rgb), .12); border-radius: 20px; padding: 4px 11px;
}
.vb-proof-leer-k b {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.022em; line-height: 1.2;
  font-size: clamp(19px, 2.6vw, 24px);
}
.vb-proof-leer-k p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--text-dim); }
.vb-proof-leer-l {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-auto-rows: 1fr;
}
.vb-proof-leer-l li {
  padding: 16px 18px; border: 1px solid var(--border-soft); border-radius: 15px;
  background: var(--panel); display: grid; gap: 4px; align-content: center;
}
.vb-proof-leer-l b { font-size: 14px; }
.vb-proof-leer-l span { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.vb-proof-leer-l a {
  margin-top: 4px; font-size: 12.5px; color: var(--cyan); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px; min-height: 22px;
}
.vb-proof-leer-l a:hover { text-decoration: underline; }
@media (max-width: 720px) { .vb-proof-leer { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Bausteine */
.vb-bausteine { padding: 76px 0; background: var(--bg-2); scroll-margin-top: 120px; }

/* ---------------------------------------------------------- Drei Schritte */
.vb-schritte { padding: 76px 0; }
.vb-drei { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vb-drei li {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start;
  padding: 20px 22px; background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 16px; box-shadow: var(--shadow-card);
}
.vb-drei-n {
  grid-row: span 2; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 16px;
  color: var(--cyan); background: var(--cyan-soft); border: 1px solid rgba(var(--accent-rgb), .3);
}
.vb-drei b { font-family: var(--font-display); font-size: 16.5px; letter-spacing: -.02em; }
.vb-drei p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }

/* -------------------------------------------------------- Qualitätsbeleg */
.vb-beleg { padding: 76px 0; background: var(--bg-2); }

/* -------------------------------------------------------------------- FAQ */
.vb-faq { padding: 76px 0; }
.vb-faq-i { border-bottom: 1px solid var(--border-soft); padding: 4px 0; }
.vb-faq-i summary {
  list-style: none; cursor: pointer; padding: 17px 34px 17px 0; position: relative;
  font-family: var(--font-display); font-size: 16.5px; letter-spacing: -.015em;
}
.vb-faq-i summary::-webkit-details-marker { display: none; }
.vb-faq-i summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border: solid var(--text-dim); border-width: 0 1.6px 1.6px 0;
  transform: translateY(-70%) rotate(45deg); transition: transform var(--dur-base);
}
.vb-faq-i[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.vb-faq-i summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.vb-faq-i p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.66; color: var(--text-dim); max-width: 660px; }

/* --------------------------------------------------------------- Abschluss */
.vb-schluss { padding: 84px 0 96px; text-align: center; }
.vb-schluss h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
  font-size: clamp(27px, 3.8vw, 40px); margin: 0 0 14px;
}
.vb-schluss .lead { margin: 0 auto 28px; }
.btn.vb-gross { font-size: 17px; padding: 17px 34px; }

/* ======================================================================
   1b — LANDINGPAGE 3.0 (19.09.2026)

   Die Landingpage verkauft seit heute das ERGEBNIS und nicht mehr die
   Technik. Vier Bausteine sind neu, und jeder hat einen Grund:

   DAS PRODUKT-MOCKUP zeigt vier Stationen des echten Berichts statt eines
   Standbildes. Ein Standbild beweist nur, dass es eine Oberflaeche gibt;
   vier Stationen zeigen den GEDANKENGANG — Zahlen, Schieflage, Antwort,
   Umsetzung.

   DIE VERTRAUENSLEISTE traegt keine Sterne und keine Kundenlogos. Es gibt zu
   diesem Werkzeug keine verifizierte Bewertung, und eine erfundene waere
   genau der Fehler, den §58 ausschliesst. Der Platz dafuer ist vorbereitet
   (`.vb-reviews`), er bleibt leer, bis es etwas zu zeigen gibt.

   DIE PRODUKTDEMO ist bedienbar. Wer vier Reiter durchgeklickt hat, hat das
   Werkzeug benutzt, bevor er seine Adresse eingibt — das ueberzeugt anders
   als jede Aufzaehlung.

   DIE WANDLUNG (Heute → Erkannt → Empfehlung) zeigt in drei Stufen, was
   sonst behauptet werden muesste.
   ====================================================================== */

/* ------------------------------------------------------- Produkt-Mockup */
.vb-mockup-k { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vb-mockup-k b { margin: 0; flex: 1 1 auto; min-width: 0; }
.vb-mockup-k .vb-rlogo { flex: none; width: 30px; height: 30px; }
.vb-mockup-ic { display: flex; gap: 7px; }
.vb-mockup-ic .vb-pic { width: 19px; height: 19px; }

.vb-mstep {
  display: grid; gap: 12px; align-content: start;
  opacity: 0; visibility: hidden; height: 0; overflow: hidden;
  transition: opacity var(--dur-base);
}
.vb-mstep.is-an { opacity: 1; visibility: visible; height: auto; }
.vb-mstep-t {
  margin: 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
}
.vb-kpis.is-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vb-kpis.is-mini .vb-kpi { padding: 11px 12px; }
.vb-kpis.is-mini .vb-kpi-v { font-size: clamp(19px, 2.6vw, 24px); }
.vb-kpis.is-mini .vb-kpi-l { font-size: 11px; }

.vb-mmix { display: flex; align-items: center; gap: 16px; }
.vb-mmix svg { width: 92px; height: 92px; flex: none; }
.vb-mmix-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.vb-mmix-l li { display: flex; align-items: center; gap: 8px; }
.vb-mmix-l b { margin-left: auto; font-variant-numeric: tabular-nums; }

.vb-meyebrow {
  margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan);
}
.vb-mtitel { font-family: var(--font-display); font-size: 17px; letter-spacing: -.02em; }
.vb-mhook { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.vb-mframes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vb-mframe {
  position: relative; aspect-ratio: 9 / 16; border-radius: 9px; display: block;
  border: 1px solid var(--border-soft);
}
.vb-mframe i {
  position: absolute; left: 6px; bottom: 6px; font-style: normal;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-media);
}
.vb-msb { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; }
.vb-msb li { display: grid; grid-template-columns: 54px 1fr; gap: 10px; color: var(--text-dim); }
.vb-msb span { color: var(--cyan); font-variant-numeric: tabular-nums; }

.vb-mdots { display: flex; gap: 7px; justify-content: center; padding-top: 2px; }
.vb-mdots button {
  width: 44px; height: 44px; padding: 0; background: none; border: none; cursor: pointer;
  display: grid; place-items: center;
}
.vb-mdots button::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(var(--line-rgb), .3); transition: background var(--dur-fast);
}
.vb-mdots button[aria-selected="true"]::before { background: var(--cyan); width: 20px; border-radius: 4px; }
.vb-mdots button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -8px; border-radius: 12px; }

/* ---------------------------------------------------- Vertrauensleiste */
.vb-trustbar { padding: 0 0 12px; }
.vb-tb {
  list-style: none; margin: 0; padding: 18px 0; display: flex; flex-wrap: wrap;
  gap: 12px 30px; justify-content: center;
  border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
}
.vb-tb li { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-dim); }
.vb-tb-i { display: grid; place-items: center; width: 18px; height: 18px; color: var(--cyan); flex: none; }
.vb-tb-i svg { width: 18px; height: 18px; }

/* --------------------------------------------------------- Sechs Karten */
.vb-stack.is-sechs { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 13px; }
.vb-stack.is-sechs .vb-stack-k { padding: 20px; }
.vb-stack-i { display: grid; place-items: center; width: 26px; height: 26px; color: var(--cyan); margin-bottom: 12px; }
.vb-stack-i svg { width: 24px; height: 24px; }
.vb-stack-k.is-kern { border-color: rgba(var(--accent-rgb), .34); background: rgba(var(--accent-rgb), .05); }

/* ------------------------------------------------------- Die Produktdemo */
.vb-dtabs {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 5px;
  background: var(--inset); border: 1px solid var(--border-soft); border-radius: 13px;
}
.vb-dtabs button {
  flex: 1 1 auto; min-height: 44px; padding: 10px 16px; border-radius: 9px;
  border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--text-dim); font: inherit; font-size: 14px;
}
.vb-dtabs button:hover { color: var(--text); }
.vb-dtabs button.is-aktiv {
  background: var(--panel-raised); border-color: var(--panel-border); color: var(--text);
}
.vb-dtabs button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.vb-dpanel { display: grid; gap: 18px; }

.vb-dmix { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.vb-dmix-s { display: grid; gap: 9px; align-content: start; }
.vb-dmix-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; }
.vb-dmix-l li { display: flex; align-items: center; gap: 9px; }
.vb-dmix-l b { margin-left: auto; font-variant-numeric: tabular-nums; }
.vb-dmix-d { display: flex; flex-wrap: wrap; gap: 8px; }

.vb-dnbv {
  padding: 20px; border: 1px solid rgba(var(--accent-rgb), .3);
  background: rgba(var(--accent-rgb), .05); border-radius: 16px; display: grid; gap: 11px;
}
.vb-dnbv h4 {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(19px, 2.6vw, 25px); letter-spacing: -.024em; line-height: 1.16;
}
.vb-dhook {
  margin: 0; padding: 12px 16px; border-left: 2px solid var(--cyan);
  font-family: var(--font-display); font-size: 16px; line-height: 1.4;
}
.vb-dwarum { margin: 0; font-size: 13.5px; color: var(--text-dim); }

.vb-dplats { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.vb-dplats li {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 5px 11px; align-items: center;
  padding: 13px 15px; border: 1px solid var(--border-soft); border-radius: 13px;
}
.vb-dplats .vb-pic { width: 20px; height: 20px; }
.vb-dplats b { font-size: 14.5px; }
.vb-dplat-r { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--cyan); }
.vb-dplats li > span:not(.vb-pic):not(.vb-dplat-r) {
  grid-column: 2 / -1; font-size: 12.5px; color: var(--text-dim);
}

.vb-dframes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
.vb-dframe {
  position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: 13px; overflow: hidden;
  border: 1px solid var(--border-soft); display: flex; align-items: flex-end;
}
.vb-dframe figcaption {
  position: relative; z-index: 1; padding: 11px 12px; font-size: 12px; color: var(--on-media);
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
  width: 100%;
}
.vb-dframe figcaption b {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 3px;
}
.vb-dov {
  position: absolute; top: 14px; left: 12px; right: 12px; z-index: 1; text-align: center;
  font-family: var(--font-display); font-size: 14px; line-height: 1.25; color: var(--on-media);
}
.vb-dov.is-dunkel { color: var(--on-accent); }

.vb-dsb { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: dsb; }
.vb-dsb li {
  display: grid; grid-template-columns: 60px 86px 1fr; gap: 6px 12px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--border-soft);
}
.vb-dsb span { font-size: 12.5px; color: var(--cyan); font-variant-numeric: tabular-nums; }
.vb-dsb b { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
.vb-dsb q { font-size: 14px; line-height: 1.5; }

.vb-dgate {
  text-align: center; padding: 26px 20px 8px; display: grid; gap: 18px; justify-items: center;
  border-top: 1px solid var(--border-soft);
}
.vb-dgate p { margin: 0; max-width: 520px; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }

/* ------------------------------------------------- Eingabe am Seitenende */
.vb-qform.is-schluss { margin: 26px auto 0; text-align: left; }

/* ------------------------------------------------ Info-Symbol (§18, §29)
   Ein Knopf, ein Klick, ein Kasten — auf jedem Geraet gleich. `title` allein
   zeigt auf einem Telefon nichts und ist fuer die Tastatur unerreichbar. */
.vb-itip-w { position: relative; display: inline-block; vertical-align: baseline; }
.vb-itip {
  width: 44px; height: 44px; margin: -12px 0 -12px 2px; padding: 0;
  background: none; border: 0; cursor: pointer; display: inline-grid; place-items: center;
  vertical-align: middle;
}
.vb-itip i {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--border-strong); color: var(--text-dim);
  font-style: normal; font-size: 11px; font-weight: 600; line-height: 1;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.vb-itip:hover i, .vb-itip[aria-expanded="true"] i { color: var(--cyan); border-color: var(--cyan); }
.vb-itip:focus-visible { outline: 2px solid var(--cyan); outline-offset: -10px; border-radius: 12px; }
.vb-itip-p {
  position: absolute; left: 0; top: calc(100% - 8px); z-index: 30;
  width: max-content; max-width: min(300px, 78vw);
  background: var(--panel-raised); border: 1px solid var(--panel-border);
  border-radius: 11px; padding: 11px 13px; box-shadow: var(--shadow-md);
  font-size: 12.5px; line-height: 1.5; color: var(--text); text-transform: none;
  letter-spacing: normal; font-weight: 400; white-space: normal;
}
/* Wohin der Kasten ausweichen muss, haengt nicht von der Bildschirmbreite ab,
   sondern davon, wo das Zeichen steht. Eine feste Regel „unter 560 px nach
   rechts kippen" schob ihn auf dem Telefon 32 px ueber den LINKEN Rand, weil
   das Zeichen dort am linken Kartenrand sass. Das Ausrichten macht jetzt
   `halteImBild()` in blueprint.js nach dem Oeffnen, gemessen statt geraten. */

/* ======================================================================
   DIE BEWERTUNG (§34 bis §40)

   Sie steht am Ende des Berichts und VOR dem Angebot. Ruhig gehalten: ein
   Kasten, fuenf Sterne, sonst nichts, bis jemand geklickt hat.
   ====================================================================== */
.vb-fb {
  margin-top: 30px; padding: 34px 28px; border-radius: 20px;
  border: 1px solid var(--border-soft); background: var(--panel); text-align: center;
}
.vb-fb h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.025em;
  font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 18px;
}
.vb-stars { display: flex; justify-content: center; gap: 4px; }
.vb-star {
  width: 52px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--text-dim);
  transition: transform var(--dur-fast), color var(--dur-fast);
}
.vb-star.is-an { color: var(--amber); }
.vb-star:hover { transform: scale(1.12); }
.vb-star:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 10px; }

.vb-fb-mehr { display: grid; gap: 14px; max-width: 540px; margin: 22px auto 0; text-align: left; }
.vb-fb-mehr textarea {
  width: 100%; min-height: 96px; resize: vertical; padding: 13px 15px;
  background: var(--inset); border: 1px solid var(--border-strong); border-radius: 12px;
  color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.55;
}
.vb-fb-mehr textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.vb-fb-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); cursor: pointer; }
.vb-fb-consent input { flex: none; width: 19px; height: 19px; margin-top: 1px; accent-color: var(--cyan); }
.vb-fb-msg { margin: 0; font-size: 13px; min-height: 1px; }
.vb-fb-msg.is-fehler { color: var(--danger); }
.vb-fb-mehr .btn { justify-self: start; }

.vb-fb-danke { display: grid; gap: 8px; justify-items: center; padding: 8px 0; }
.vb-fb-haken {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(var(--accent-rgb), .14); color: var(--cyan); font-size: 22px;
}
.vb-fb-danke h2 { margin: 0; }
.vb-fb-danke p { margin: 0; font-size: 14.5px; color: var(--text-dim); }

@media (max-width: 560px) {
  .vb-fb { padding: 26px 18px; }
  .vb-star { width: 48px; height: 48px; font-size: 26px; }
}

/* ======================================================================
   DIE LADEANSICHT (5.2 §9 bis §15)

   ZWEI SPALTEN, WEIL DIE WARTEZEIT ECHT IST.
   Die Analyse braucht ein bis drei Minuten. Links laeuft sie sichtbar, rechts
   steht etwas, das die Zeit fuellt, ohne sie zu kaschieren. Auf dem Telefon
   stapeln beide — die Analyse zuerst, denn sie ist der Grund, warum jemand
   hier ist. Das Video darunter, nicht davor.
   ====================================================================== */
.vb-warte-grid {
  display: grid; grid-template-columns: 54fr 46fr; gap: 46px; align-items: start;
  text-align: left; padding: 24px 0 10px;
}
.vb-warte-links { min-width: 0; }
.vb-warte-links h1 { margin: 10px 0 10px; }
.vb-warte-links .lead { margin: 0 0 26px; max-width: 460px; }
.vb-warte-links .vb-wschritte { margin-left: 0; margin-right: 0; }
.vb-warte-links .vb-datenschutz { margin-top: 22px; text-align: left; }

/* ------------------------------------------------------------ Videokarte */
.vb-warte-video { margin: 0; min-width: 0; position: relative; }
/* §11: ein sehr feiner Schein hinter der Karte. Er soll erst auffallen,
   wenn er fehlt. */
.vb-warte-video::before {
  content: ""; position: absolute; inset: -10% -6% -14% -6%; z-index: 0;
  background: radial-gradient(58% 48% at 55% 40%, rgba(var(--accent-rgb), .15), transparent 70%);
  pointer-events: none;
}
.vb-wv-rahmen {
  position: relative; z-index: 1; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--panel-border);
  background: var(--panel-raised); box-shadow: var(--shadow-lg);
}
.vb-wv-player { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg); }

.vb-wv-play {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 68px;
  border-radius: 50%; border: 1px solid rgba(var(--tint-rgb), .28);
  background: rgba(var(--bg-rgb), .55); backdrop-filter: blur(10px);
  display: grid; place-items: center; cursor: pointer;
  transition: transform var(--dur-fast), background var(--dur-fast);
}
.vb-wv-play:hover { transform: scale(1.06); background: rgba(var(--bg-rgb), .72); }
.vb-wv-play:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.vb-wv-play-i {
  width: 0; height: 0; margin-left: 5px;
  border-left: 19px solid var(--text-bright);
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.is-laeuft .vb-wv-play { opacity: 0; pointer-events: none; }

/* Die Kennzeichnung verschwindet, sobald der echte Film da ist —
   `platzhalter: false` in blueprint.js entfernt sie. */
.vb-wv-marke {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--warn); background: rgba(var(--warn-rgb), .14);
  border: 1px solid rgba(var(--warn-rgb), .34); border-radius: 8px; padding: 4px 9px;
}

.vb-wv-leiste {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  background: rgba(var(--bg-rgb), .72); backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--tint-rgb), .14); border-radius: 12px; padding: 6px 10px;
}
.vb-wv-btn {
  flex: none; width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--text-bright); padding: 0;
}
.vb-wv-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 8px; }
.vb-wv-pause { width: 11px; height: 13px; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.vb-wv-btn.is-pause .vb-wv-pause {
  width: 0; height: 0; border: 0; margin-left: 3px;
  border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.vb-wv-ton {
  width: 15px; height: 12px; background: currentColor; position: relative;
  clip-path: polygon(0 32%, 32% 32%, 62% 0, 62% 100%, 32% 68%, 0 68%);
}
.vb-wv-btn.is-stumm .vb-wv-ton { opacity: .45; }
.vb-wv-voll {
  width: 14px; height: 12px; border: 2px solid currentColor; border-radius: 2px;
  clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 100% 0, 100% 38%, 62% 38%, 62% 62%, 100% 62%, 100% 100%, 62% 100%);
}
.vb-wv-bar { flex: 1 1 auto; height: 4px; background: rgba(var(--tint-rgb), .22); border-radius: 2px; cursor: pointer; min-width: 0; }
.vb-wv-bar i {
  display: block; height: 100%; background: var(--cyan); border-radius: 2px;
  transform-origin: left center; transform: scaleX(0);
  transition: transform .18s linear;
}
.vb-wv-zeit { font-size: 12px; color: var(--text-bright); font-variant-numeric: tabular-nums; flex: none; }

.vb-wv-text { margin: 16px 0 0; display: grid; gap: 4px; }
.vb-wv-text b { font-family: var(--font-display); font-size: 17px; letter-spacing: -.02em; }
.vb-wv-text span { font-size: 14px; line-height: 1.55; color: var(--text-dim); }

@media (max-width: 900px) {
  /* §9: gestapelt, Analyse zuerst. */
  .vb-warte-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ======================================================================
   1c — HERO 4.0 (20.09.2026)

   DIE FESTE BUEHNE ist der Kern dieser Fassung (§14).
   Vorher schaltete jede Station ihre Hoehe von 0 auf auto. Der Kasten sprang
   bei jedem Wechsel, und weil er im Hero steht, sprang der halbe Einstieg
   mit. Jetzt liegen alle fuenf Stationen uebereinander in einem Behaelter
   mit FESTER Hoehe; beim Wechsel bewegt sich nur Deckkraft und ein Versatz
   von wenigen Pixeln.

   Die Hoehe ist gesetzt und nicht gerechnet: `auto` an einem Behaelter mit
   absolut positionierten Kindern ist null. Sie ist so gewaehlt, dass die
   inhaltsreichste Station (Content DNA, vier Zeilen) hineinpasst — gemessen,
   nicht geraten.
   ====================================================================== */

/* -------------------------------------------------- Eingabe mit Erkennung */
.vb-qfeld { position: relative; }
.vb-qok {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--cyan); pointer-events: none;
  opacity: 0; transition: opacity var(--dur-fast);
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vb-qok.is-an { opacity: 1; }

/* ------------------------------------------------------- Sozialer Beleg */
.vb-proof-micro {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
  margin-top: 16px; font-size: 13.5px; color: var(--text-dim); text-align: center;
  /* Dieselbe Breite wie Formular und Vertrauenszeile darueber (520 px),
     sonst zentriert sich die Zeile in der ganzen Hero-Spalte (568 px) und
     steht neben der Mitte der Schaltflaeche. */
  max-width: 520px;
}
/* Am Seitenende steht das Formular mittig — die Zeile muss mitziehen. */
.vb-qform.is-schluss ~ .vb-proof-micro { margin-inline: auto; }
.vb-sterne { color: var(--amber); letter-spacing: .06em; font-size: 14px; }
.vb-proof-micro b { color: var(--text); font-size: 14.5px; }

/* --------------------------------------------------- Browser-Rahmen (§47) */
.vb-browser { display: flex; align-items: center; gap: 12px; }
.vb-browser-u { flex: 1 1 auto; text-align: center; }
.vb-browser-a { display: flex; gap: 10px; color: var(--text-dim); flex: none; }
.vb-browser-a svg { width: 15px; height: 15px; display: block; }

/* ------------------------------------------------------- Die feste Buehne */
.vb-mbuehne { position: relative; height: 268px; }
.vb-mstep {
  position: absolute; inset: 0;
  display: grid; gap: 11px; align-content: start;
  opacity: 0; visibility: hidden; transform: translateX(10px);
  transition: opacity var(--dur-base), transform var(--dur-base);
}
.vb-mstep.is-an { opacity: 1; visibility: visible; transform: none; }
.vb-mlabel {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan);
}

/* Station 1 — Kennzahlen und Verlauf */
.vb-mkpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.vb-mkpis > div {
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 11px 12px; min-width: 0;
}
.vb-mkpis b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 21px; letter-spacing: -.02em; line-height: 1.1;
}
.vb-mkpis span { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.vb-mchart { color: var(--cyan); }
.vb-mchart svg { width: 100%; height: 56px; display: block; }
.vb-mchart-l { display: flex; justify-content: space-between; margin-top: 4px; }
.vb-mchart-l i { font-style: normal; font-size: 11px; color: var(--text-dim); }

/* Station 2 — Balken je Plattform */
.vb-mbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vb-mbars li { display: grid; grid-template-columns: 20px 1fr auto; gap: 11px; align-items: center; }
.vb-mbars .vb-pic { width: 18px; height: 18px; }
.vb-mbars i { display: block; height: 8px; border-radius: 4px; background: var(--cyan); }
.vb-mbars i.is-instagram { background: linear-gradient(90deg, #F50000, #B900B4); }
.vb-mbars i.is-youtube { background: #FF0000; }
.vb-mbars i.is-linkedin { background: #0A66C2; }
.vb-mbars b { font-size: 13px; font-variant-numeric: tabular-nums; }
.vb-minsight {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
  display: flex; gap: 9px; align-items: baseline;
}
.vb-minsight span {
  flex: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan);
}

/* Station 3 — Inhalts-Verschiebung */
.vb-mdna { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vb-mdna li { display: grid; grid-template-columns: 62px 1fr 62px; gap: 10px; align-items: center; font-size: 12px; }
.vb-mdna-b { display: block; height: 7px; border-radius: 4px; background: var(--inset); overflow: hidden; }
.vb-mdna-b b { display: block; height: 100%; background: var(--text-dim); border-radius: 4px; }
.vb-mdna .is-plus .vb-mdna-b b { background: var(--cyan); }
.vb-mdna em { font-style: normal; color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; }
.vb-mdna s { text-decoration: none; color: var(--text); }
.vb-mdna .is-plus s { color: var(--cyan); }

/* Station 4 und 5 — Titel, Chips, Frames, Stimme */
.vb-mtitel { font-family: var(--font-display); font-size: 17px; letter-spacing: -.02em; line-height: 1.25; }
.vb-mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.vb-mchips span {
  font-size: 11px; color: var(--text-dim); background: var(--inset);
  border-radius: 999px; padding: 4px 10px;
}
.vb-mhook { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.vb-mframes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vb-mframe {
  position: relative; aspect-ratio: 9 / 16; border-radius: 9px; display: block;
  border: 1px solid var(--border-soft); max-height: 104px;
}
.vb-mframes.is-gross .vb-mframe { max-height: 150px; }
.vb-mframe i {
  position: absolute; left: 6px; bottom: 6px; font-style: normal;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-media);
}
.vb-mvoice {
  display: flex; align-items: center; gap: 11px;
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 10px 12px;
}
.vb-mvoice-p {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(var(--accent-rgb), .16); position: relative;
}
.vb-mvoice-p::after {
  content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  border-left: 7px solid var(--cyan);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.vb-mvoice b { display: block; font-size: 13px; }
.vb-mvoice > div > span { font-size: 11px; color: var(--text-dim); }
.vb-mwave { display: flex; align-items: center; gap: 2px; margin-left: auto; height: 20px; }
.vb-mwave i {
  display: block; width: 2px; border-radius: 1px; background: rgba(var(--accent-rgb), .55);
}
.vb-mwave i:nth-child(odd) { height: 60%; }
.vb-mwave i:nth-child(even) { height: 100%; }
.vb-mwave i:nth-child(3n) { height: 40%; }

/* Punkte zur Steuerung */
.vb-mdots { display: flex; gap: 6px; justify-content: center; }
.vb-mdots button {
  width: 44px; height: 44px; padding: 0; background: none; border: none; cursor: pointer;
  display: grid; place-items: center;
}
.vb-mdots button::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(var(--line-rgb), .3); transition: all var(--dur-fast);
}
.vb-mdots button[aria-selected="true"]::before { background: var(--cyan); width: 18px; border-radius: 3px; }
.vb-mdots button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -8px; border-radius: 12px; }

/* §19: ein sehr feiner Schein hinter der Vorschau. Keine Farbwolke — man soll
   ihn erst bemerken, wenn er fehlt. */
.vb-mockup { position: relative; }
.vb-mockup::before {
  content: ""; position: absolute; inset: -12% -8% -18% -8%; z-index: -1;
  background: radial-gradient(60% 50% at 60% 35%, rgba(var(--accent-rgb), .13), transparent 70%);
  pointer-events: none;
}

/* ------------------------------------------- Hinweis „eine Quelle genuegt" */
.vb-qhinweis { margin: 2px 0 0; font-size: 12.5px; color: var(--text-dim); }

/* ------------------------------------------------ Kundenstimmen (§32, §33)
   Ein-Folie-Karussell statt Raster: genau eine Stimme sichtbar, automatischer
   Wechsel alle drei Sekunden, Pfeile und Punkte für die Handbedienung.
   Dieselbe Pause-bei-Blick-Logik wie das Produkt-Mockup im Hero
   (`verdrahteMockup()`/`verdrahteStimmenCarousel()` in blueprint.js) — ein
   Karussell, das unter dem Mauszeiger weiterspringt, nimmt dem Leser genau
   das weg, wofür er stehengeblieben ist. Farben ausschließlich aus den
   bestehenden Tokens: Amber für die Sterne (wie überall sonst auf der
   Seite), Cyan rationiert auf Pfeil-Hover und den aktiven Punkt — kein Lila,
   kein Glow. */
.vb-stimmen { padding: 76px 0; background: var(--bg-2); }
.vb-stimmen-slider { display: flex; align-items: center; gap: 10px; max-width: 720px; margin: 0 auto; }
.vb-stimmen-vp { flex: 1 1 auto; min-width: 0; overflow: hidden; border-radius: 20px; }
.vb-stimmen-track {
  display: flex; transition: transform var(--dur-slow, .5s) var(--ease-expo, ease);
  touch-action: pan-y;
}
.vb-stimmen-track .vb-stimme {
  flex: 0 0 100%; min-width: 0; margin: 0; padding: 30px 32px;
  border-radius: 20px; border: 1px solid var(--border-soft); background: var(--panel);
  box-shadow: var(--shadow-card);
  display: grid; gap: 14px; justify-items: center; align-content: start; text-align: center;
}
.vb-stimmen-track .vb-stimme blockquote { margin: 0; font-size: 18px; line-height: 1.6; max-width: 56ch; }
.vb-stimmen-track .vb-stimme figcaption { display: grid; gap: 2px; }
.vb-stimmen-track .vb-stimme figcaption b { font-size: 14.5px; }
.vb-stimmen-track .vb-stimme figcaption span { font-size: 12.5px; color: var(--text-dim); }
.vb-stimmen-nav {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--panel); border: 1px solid var(--panel-border); color: var(--text-dim);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.vb-stimmen-nav svg { width: 18px; height: 18px; }
.vb-stimmen-nav:hover { color: var(--cyan); border-color: rgba(var(--accent-rgb), .4); }
.vb-stimmen-nav:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.vb-stimmen-dots { margin-top: 18px; }
@media (max-width: 720px) {
  .vb-stimmen-slider { gap: 2px; }
  .vb-stimmen-track .vb-stimme { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .vb-stimmen-track { transition: none; }
}

/* ======================================================================
   2 — FRAGEBOGEN
   ====================================================================== */
.vb-quiz { padding: 130px 0 90px; }
/* Der Balken wächst über `transform`, nicht über `width`: eine Breiten-
   Animation zwingt den Browser bei jedem Einzelbild zu einem neuen Layout,
   `scaleX` läuft auf dem Compositor. Die Rundung sitzt am Behälter
   (`overflow:hidden`), deshalb verzerrt das Skalieren hier nichts — mit
   eigenem `border-radius` am Balken wäre die Rundung mitgestaucht worden. */
@keyframes vb-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes vb-in-back { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.vb-kapitel {
  display: inline-block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--pa); margin-bottom: 12px;
}
.vb-q {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.025em; line-height: 1.16;
  font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 10px; outline: none;
}
.vb-q:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; border-radius: 6px; }
.vb-qhint { color: var(--text-dim); font-size: 14.5px; margin: 0 0 26px; }
.vb-qhead + .vb-opts { margin-top: 26px; }

/* --- Antwortkarten --- */
.vb-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px; }
.vb-opts.is-ikonen { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.vb-opts.is-stile { grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); }

.vb-opt {
  position: relative; display: flex; align-items: center; gap: 13px; text-align: left;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 15px;
  padding: 15px 44px 15px 17px; cursor: pointer; color: var(--text);
  font-family: var(--font-body); font-size: 15.5px; font-weight: 500;
  box-shadow: var(--shadow-card); min-height: 58px;
  transition: border-color var(--dur-base), background var(--dur-base),
              transform var(--dur-base), box-shadow var(--dur-base);
}
.vb-opt:hover { border-color: rgba(var(--accent-rgb), .42); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.vb-opt:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.vb-opt.is-sel { border-color: var(--cyan); background: rgba(var(--accent-rgb), .10); }
.vb-opt-tx { display: block; }
.vb-opt-tx b { font-weight: 500; }
.vb-opt-tx small { display: block; color: var(--text-dim); font-weight: 400; font-size: 12.5px; margin-top: 3px; }

.vb-opt-tick {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid rgba(var(--line-rgb), .28);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.vb-opt[role="radio"] .vb-opt-tick { border-radius: 50%; }
.vb-opt.is-sel .vb-opt-tick { border-color: var(--cyan); background: var(--cyan); }
.vb-opt.is-sel .vb-opt-tick::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px;
  border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.vb-opt.vb-bestaetigt { border-color: var(--cyan); background: rgba(var(--accent-rgb), .16); transform: translateY(-2px) scale(1.012); }
.vb-opt.vb-shake { animation: vb-shake .4s; }
@keyframes vb-shake { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.vb-opt.is-sel .vb-opt-ic { color: var(--cyan); }

/* Stil-Vorschau: vier Farbfelder plus ein Schriftmuster. Das ist die
   kleinste ehrliche Vorschau eines Looks — ein Stockbild waere hier die
   Behauptung, so saehe das Ergebnis aus. */
.vb-opt-stil .vb-opt-tick { top: 18px; transform: none; }
.vb-stilframe {
  position: relative; display: flex; height: 62px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border-soft);
}
.vb-stilframe i { flex: 1; display: block; }
.vb-stilframe-typo {
  position: absolute; left: 10px; bottom: 6px; font-family: var(--font-display);
  font-weight: 600; font-size: 21px; letter-spacing: -.03em; mix-blend-mode: difference; color: var(--text-bright);
}

/* --- Freitext zu "Etwas anderes" --- */

.vb-frei input, .vb-xfield input, .vb-xfield textarea, .vb-gate input[type="text"], .vb-gate input[type="email"] {
  width: 100%; background: var(--inset); border: 1px solid var(--panel-border); border-radius: 13px;
  padding: 13px 15px; color: var(--text); font-size: 15.5px; font-family: var(--font-body);
  outline: none; transition: border-color var(--dur-base), background var(--dur-base); resize: vertical;
}
.vb-frei input:focus, .vb-xfield input:focus, .vb-xfield textarea:focus,
.vb-gate input:focus { border-color: var(--cyan); background: var(--inset-hover); }
.vb-gate input.is-error { border-color: var(--danger); }

/* --- Optional ergänzen --- */
.vb-xfield label { display: block; font-size: 13.5px; color: var(--text-dim); margin-bottom: 7px; }

/* --- Navigation --- */
.vb-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 30px; }
.vb-nav .btn[disabled] { opacity: .4; pointer-events: none; }
/* §17/§18: Zurück zwischen den zwei optionalen Anschlussfragen — Textknopf,
   damit er nicht mit dem einen Primär-CTA der Seite konkurriert. */
.vb-zurueck {
  background: none; border: none; padding: 10px 10px; cursor: pointer;
  color: var(--text-dim); font: inherit; font-size: 14px;
  display: inline-flex; align-items: center; min-height: 44px;
}
.vb-zurueck:hover { color: var(--text); }
.vb-zurueck:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }

/* ======================================================================
   3 — VORSCHAU
   ====================================================================== */
.vb-preview { padding: 140px 0 90px; text-align: center; }
.vb-preview h1 { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 16px; }
.vb-pmods {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 11px;
  text-align: left; margin-bottom: 38px;
}

/* ======================================================================
   4 — LEAD GATE
   ====================================================================== */
.vb-gate { padding: 140px 0 100px; }
.vb-gate .vb-shell { max-width: 560px; text-align: center; }
.vb-gate h1 { font-size: clamp(25px, 3.8vw, 36px); line-height: 1.14; letter-spacing: -.025em; margin-bottom: 14px; }
.vb-gate-form { display: grid; gap: 13px; margin-top: 30px; text-align: left; }
.vb-gate-form label.vb-lbl { font-size: 13px; color: var(--text-dim); margin-bottom: -6px; }
.vb-consent {
  display: flex; gap: 11px; align-items: flex-start; text-align: left;
  font-size: 13px; color: var(--text-dim); line-height: 1.55; margin-top: 4px;
}
.vb-consent input { margin-top: 3px; accent-color: var(--cyan); width: 17px; height: 17px; flex: none; }
.vb-gate-msg { margin: 4px 0 0; font-size: 13.5px; min-height: 1px; }
.vb-gate-msg.is-error { color: var(--danger); }
.vb-gate .btn.is-busy { opacity: .7; pointer-events: none; }
.vb-datenschutz { margin-top: 18px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }

/* ======================================================================
   5 — DAS ERGEBNIS
   ====================================================================== */
.vb-result { padding: 130px 0 40px; }
.vb-result-mount { display: grid; gap: 22px; }

.vb-rhero { text-align: center; padding: 0 0 12px; }
.vb-rhero .eyebrow { justify-content: center; }
.vb-rhero h1 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 16px; }
.vb-rhero .lead { max-width: 640px; margin: 0 auto 24px; }

.vb-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vb-card .vb-chips { justify-content: flex-start; }
.vb-chip {
  font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 30px;
  background: var(--inset); border: 1px solid var(--panel-border); color: var(--text);
}
.vb-chip.is-sm { font-size: 12px; padding: 5px 11px; color: var(--text-dim); }

/* --- Karte --- */
.vb-card {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 22px;
  padding: 32px 30px; box-shadow: var(--shadow-card);
}
.vb-card-h {
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 20px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(20px, 2.5vw, 26px); line-height: 1.2;
}
.vb-card-n {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--pa);
  border: 1px solid rgba(var(--pa-rgb), .34); border-radius: 8px; padding: 3px 8px; flex: none;
}
.vb-card h3 {
  font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  margin: 26px 0 12px;
}
.vb-card-lead { color: var(--text-dim); font-size: 15px; line-height: 1.62; margin: 0 0 20px; }
.vb-note {
  margin: 16px 0 0; font-size: 13px; color: var(--text-dim); line-height: 1.6;
  border-left: 2px solid rgba(var(--line-rgb), .2); padding-left: 13px;
}
.vb-note b { color: var(--text); }
.vb-leer { color: var(--text-dim); font-style: italic; opacity: .75; }
.vb-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.vb-liste li {
  position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: var(--text-dim);
}
.vb-liste li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--cyan); }

.vb-kv { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 7px 16px; margin: 0; font-size: 13.5px; }
.vb-kv dt { color: var(--text-dim); }
.vb-kv dd { margin: 0; color: var(--text); }

/* --- 01 Snapshot --- */
.vb-snap { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.vb-snap-i {
  background: var(--inset); border: 1px solid var(--border-soft); border-radius: 15px; padding: 17px 18px;
}
.vb-snap-i > span {
  display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 9px;
}
.vb-snap-i b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.vb-snap-i em { display: block; font-style: normal; color: var(--text-dim); font-size: 13px; line-height: 1.55; margin-top: 7px; }

/* --- 02 Plattformen --- */
.vb-plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 12px; }
.vb-plat {
  background: var(--inset); border: 1px solid var(--border-soft); border-radius: 17px; padding: 19px 19px 17px;
  display: flex; flex-direction: column; gap: 13px;
}
.vb-plat.is-p { border-color: rgba(var(--accent-rgb), .36); background: rgba(var(--accent-rgb), .055); }
.vb-plat.is-o { opacity: .78; }
.vb-plat-top { display: flex; align-items: center; gap: 13px; }
.vb-plat.is-p .vb-plat-ic { color: var(--cyan); }
.vb-plat-top b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; }
/* 11 px ist die Untergrenze, unter der Text auf einem Telefon nicht mehr
   zuverlässig gelesen wird — auch ein Etikett aus drei Wörtern nicht. */
.vb-tier {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--text-dim); margin-top: 3px;
}
.vb-plat.is-p .vb-tier { color: var(--cyan); }
.vb-plat-why { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.vb-plat .vb-kv { padding-top: 12px; border-top: 1px solid var(--border-soft); }

/* --- 03 Formate --- */
.vb-format { background: var(--inset); border: 1px solid var(--border-soft); border-radius: 17px; padding: 20px; }
.vb-format .vb-plat-why { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border-soft); }

/* --- 04 Creative Concepts --- */
.vb-frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; align-items: start; }
.vb-frame { margin: 0; }
.vb-frame.is-9x16 .vb-frame-bg { aspect-ratio: 9 / 16; }
.vb-frame.is-16x9 .vb-frame-bg { aspect-ratio: 16 / 9; }
/* Kopfzeile des Rahmens: Formatname links, Marke rechts. Beide standen anfangs
   unten — dort lagen sie ueber dem CTA-Knopf, sobald der Rahmen schmal wurde.
   Oben haben sie eine eigene Zeile und koennen sich nicht mehr treffen. */
/* Untertitelzeile. Sitzt tiefer, wenn kein CTA darunter steht — sonst klebte
   sie in zwei von drei Rahmen ohne Grund über leerem Raum. */
.vb-frame.is-16x9 .vb-frame-cta { right: auto; max-width: 46%; }
.vb-frame figcaption { display: block; margin-top: 11px; font-size: 12.5px; line-height: 1.5; }
.vb-frame figcaption b { display: block; color: var(--text); font-weight: 600; }
.vb-frame figcaption span { color: var(--text-dim); }
.vb-ai-skel {
  margin-top: 11px; aspect-ratio: 16 / 10; border-radius: 12px;
  background: linear-gradient(100deg, rgba(var(--tint-rgb), .04) 30%, rgba(var(--tint-rgb), .09) 50%, rgba(var(--tint-rgb), .04) 70%);
  background-size: 300% 100%; animation: vb-skel 1.4s linear infinite;
}
@keyframes vb-skel { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* --- 05 Creative Direction --- */
.vb-tokens { background: var(--inset); border: 1px solid var(--border-soft); border-radius: 15px; padding: 17px; display: grid; gap: 9px; }
.vb-token { display: flex; align-items: center; gap: 11px; font-size: 13px; }
.vb-token i { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border-soft); flex: none; }
.vb-token code { font-family: var(--font-body); letter-spacing: .04em; color: var(--text-dim); }

/* --- 06 Stimmen (§8, §22, §33) ---
   DREI FEHLER BEIM UMBAU GEFUNDEN UND HIER BEHOBEN (siehe blueprint.js,
   `stimmenBlock()`): `.vb-voice-msg` fehlte im Markup, `.vb-play-i` hatte
   keine Regel, und die einzige `.vb-voice{}`-Grundregel stand in einem
   laengst ersetzten Block ohne jede Verbindung zum aktuellen Markup — die
   Karte hatte weder Flaeche noch Rand noch Abstand. Diese Fassung ersetzt
   den alten Block vollstaendig statt ihn zu ergaenzen. */
/* §6 der Polishrunde: alle Stimmen in EINER Reihe statt als Kartenraster, das
   bei 5 Karten sofort umbricht. `nowrap` + nicht schrumpfende Mindestbreite:
   passen alle fuenf nebeneinander, verteilt Flexbox den Rest gleichmaessig;
   passen sie nicht, scrollt die Reihe horizontal statt umzubrechen — auf
   jeder Breite dasselbe Verhalten, nicht zwei verschiedene Layouts. */
.vb-voices {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px;
  scroll-snap-type: x proximity; padding-bottom: 2px;
}
.vb-voice {
  position: relative; min-width: 218px; flex: 1 1 218px; scroll-snap-align: start;
  background: var(--panel); border-radius: 18px;
  padding: 44px 18px 18px; display: flex; flex-direction: column; gap: 13px;
  transition: background var(--dur-base);
}
.vb-voice.is-empf { background: var(--panel-2); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3) inset; }
.vb-voice.is-fav { box-shadow: 0 0 0 1px var(--cyan) inset; }

.vb-voice-b {
  position: absolute; top: 16px; left: 18px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cyan); padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), .40);
}
.vb-fav {
  position: absolute; top: 4px; right: 4px;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--text-dim);
  font-size: 19px; line-height: 1; border-radius: 10px;
}
.vb-fav:hover { color: var(--cyan); }
.vb-voice.is-fav .vb-fav { color: var(--cyan); }

.vb-voice-k { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 12px; }
.vb-voice-k > b { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
/* §36: ein Avatar statt nur Name+Text — kein erfundenes Foto (es gibt keine
   Gesichter zu diesen Stimmen), ein Monogramm reicht als Wiedererkennung
   in der Kartenreihe. Dieselbe Fuenf-Farben-Palette wie die Punkte
   anderswo im Bericht (`--viz-1`..`--viz-5`), damit keine zweite
   Farbsprache entsteht. */
.vb-voice-av {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--on-accent, #fff);
}

.vb-wave { display: flex; align-items: center; gap: 2px; height: 30px; flex: 1 1 60px; min-width: 40px; }
.vb-wave i {
  flex: 1; display: block; min-width: 2px; border-radius: 2px;
  background: rgba(var(--line-rgb), .26); transform-origin: center;
}
.vb-voice.is-playing .vb-wave i { background: var(--cyan); animation: vb-wave .9s ease-in-out infinite alternate; }
@keyframes vb-wave { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

.vb-voice-f { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.vb-play {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; flex: none;
  background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: 30px;
  padding: 9px 16px 9px 13px; color: var(--text); font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.vb-play:hover { border-color: rgba(var(--accent-rgb), .42); background: var(--panel-hover); }
.vb-play:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.vb-play[disabled] { opacity: .55; cursor: progress; }
.vb-play-i {
  width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--cyan); margin-left: 2px;
}
.vb-voice.is-playing .vb-play-i {
  width: 10px; height: 11px; border: none; background: var(--cyan); margin-left: 0;
  clip-path: polygon(0 0, 3.5px 0, 3.5px 100%, 0 100%, 0 0, 6.5px 0, 10px 0, 10px 100%, 6.5px 100%, 6.5px 0);
}
.vb-voice-zeit { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-voice-msg { margin: 0; font-size: 12.5px; line-height: 1.55; min-height: 1px; }
.vb-voice-msg.is-info { color: var(--text-dim); }
.vb-voice-w { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }

/* --- 07 Hook --- */
.vb-hook {
  position: relative; background: rgba(var(--accent-rgb), .07);
  border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 18px; padding: 30px 30px 24px;
}
.vb-hook-q {
  position: absolute; left: 20px; top: 2px; font-family: var(--font-display);
  font-size: 58px; line-height: 1; color: rgba(var(--accent-rgb), .3);
}

/* --- 08 Kernbotschaft --- */
.vb-card.is-kern { background: var(--panel-2); border-color: rgba(var(--pa-rgb), .26); }
.vb-kern {
  margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(17px, 2.3vw, 23px); line-height: 1.45;
}

/* --- 09 Storyboard --- */
.vb-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; counter-reset: vbs; }
.vb-scene {
  background: var(--inset); border: 1px solid var(--border-soft); border-radius: 15px; padding: 17px 19px;
  position: relative;
}
.vb-scene::before {
  content: ""; position: absolute; left: 0; top: 17px; bottom: 17px; width: 2px;
  background: var(--grad); border-radius: 2px;
}
.vb-scene-t { display: flex; align-items: center; gap: 13px; margin-bottom: 11px; flex-wrap: wrap; }
.vb-scene-n { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--pa); }
.vb-scene-z { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.vb-scene-l {
  font-size: 11px; font-weight: 700; letter-spacing: .13em; color: var(--cyan);
  background: rgba(var(--accent-rgb), .12); border-radius: 6px; padding: 3px 9px;
}

/* --- 10 Skript --- */
.vb-skript-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 4px;
  font-size: 13px; color: var(--text-dim);
}
.vb-skript-meta b { color: var(--text); font-family: var(--font-display); font-weight: 600; }
.vb-skript-meta.is-warn b { color: var(--warn); }
.vb-vo { color: var(--text); }

/* --- 11 CTA --- */
.vb-cta-box {
  background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 16px; padding: 20px 24px; margin-bottom: 18px;
}
.vb-cta-box span { display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.vb-cta-box b { font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 25px); font-weight: 600; letter-spacing: -.02em; }

/* --- 12 Ideen --- */
.vb-ideen { display: grid; gap: 11px; }
.vb-idee { background: var(--inset); border: 1px solid var(--border-soft); border-radius: 15px; padding: 18px 20px; position: relative; }
.vb-idee-n { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--pa); letter-spacing: .08em; }
.vb-idee h3 { margin: 6px 0 9px; font-size: 17px; }
.vb-idee-hook { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--text); }

/* --- 13 Rhythmus --- */
.vb-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vb-slot { background: var(--inset); border: 1px solid var(--border-soft); border-radius: 13px; padding: 15px 16px; }
.vb-slot b { display: block; font-family: var(--font-display); font-size: 15px; margin-bottom: 5px; }
.vb-slot span { font-size: 13px; color: var(--text-dim); }

/* --- 14 Readiness --- */
.vb-ready { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.vb-ready h3 { margin-top: 0; }
.vb-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vb-check li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.vb-check li > span { flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; }
.vb-check li.is-ja > span { background: rgba(var(--live-rgb), .15); color: var(--live); }
.vb-check li.is-offen > span { background: rgba(var(--line-rgb), .11); color: var(--text-dim); }
.vb-check b { display: block; font-weight: 500; }
.vb-check em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); margin-top: 3px; }
.vb-check code {
  display: inline-block; margin-top: 6px; font-family: var(--font-body); font-size: 11.5px;
  letter-spacing: .02em; background: rgba(var(--line-rgb), .1); border-radius: 6px; padding: 3px 8px; color: var(--text-dim);
}

/* --- 15 Brief --- */
.vb-card.is-brief { background: var(--panel-raised); border-color: rgba(var(--line-rgb), .18); }

/* --- Export & Upsell --- */
.vb-export, .vb-upsell { text-align: center; border-radius: 22px; padding: 34px 30px; }
.vb-export { background: var(--inset); border: 1px solid var(--border-soft); }
.vb-export h2 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 0 0 8px; }
.vb-export p { color: var(--text-dim); font-size: 14.5px; margin: 0 0 22px; }
.vb-export-btns, .vb-upsell-btns { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }

.vb-upsell {
  background: var(--bg-2); border: 1px solid rgba(var(--pa-rgb), .3); position: relative; overflow: hidden;
}
.vb-upsell::before {
  content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%;
  background: radial-gradient(50% 50% at 50% 100%, rgba(var(--pa-rgb), .16), transparent 70%);
  pointer-events: none;
}
.vb-upsell > * { position: relative; }
.vb-upsell .eyebrow { justify-content: center; }
.vb-upsell h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -.025em; margin: 0 0 12px; }
.vb-upsell p { color: var(--text-dim); font-size: 15px; line-height: 1.65; max-width: 560px; margin: 0 auto 24px; }
/* Der hervorgehobene Satzteil ist das Angebot selbst. Ohne diese Regel erbt
   `<strong>` die gedaempfte Farbe des Absatzes und die Hervorhebung bliebe
   allein am Fettgrad haengen — sichtbar, aber schwach. Helligkeit statt
   Farbe: ein zweiter Farbton im Fliesstext waere im Look A ein Fremdkoerper. */
.vb-upsell p strong { color: var(--text); font-weight: 600; }

/* ======================================================================
   6 — SCHMALE ANSICHT
   Ein Grossteil der Aufrufe kommt aus einem Social-Profil, also vom Telefon.
   Die Reihenfolge hier ist deshalb nicht "Rest anpassen", sondern: Karten
   gross genug zum Treffen, Fortschritt immer sichtbar, kein Querlauf.
   ====================================================================== */
@media (max-width: 900px) {
  .vb-dir, .vb-ready { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 720px) {
  .vb-intro { padding: 120px 0 70px; }
  .vb-quiz, .vb-gate, .vb-preview { padding-top: 104px; }
  .vb-result { padding-top: 104px; }
  .vb-opts, .vb-opts.is-ikonen, .vb-opts.is-stile { grid-template-columns: 1fr; }
  .vb-opts.is-stile { grid-template-columns: 1fr 1fr; }
  .vb-opt { min-height: 56px; font-size: 15px; }
  .vb-card { padding: 24px 19px; border-radius: 18px; }
  .vb-card-h { gap: 11px; }
  .vb-kv, .vb-kv-lg { grid-template-columns: 1fr; gap: 3px 0; }
  .vb-kv dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 9px; }
  .vb-kv dt:first-child { margin-top: 0; }
  .vb-hook { padding: 26px 20px 20px; }
  .vb-hook-q { left: 12px; }
  .vb-frames { grid-template-columns: 1fr 1fr; }
  .vb-frame.is-16x9 { grid-column: 1 / -1; }
  .vb-resume { flex-direction: column; align-items: stretch; }
  .vb-resume button { width: 100%; justify-content: center; }

  /* Die Fortschrittszeile bleibt am oberen Rand stehen: auf einem langen
     Bildschirm scrollt sie sonst mit der Frage weg, und dann weiss niemand
     mehr, wie weit er ist. */

  /* Weiter-Knopf in Daumenreichweite und ueber die volle Breite. */
  .vb-nav { position: sticky; bottom: 0; padding: 14px 0 max(14px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--bg) 38%); }
  .vb-nav .btn { flex: 1; justify-content: center; }
  .vb-export-btns .btn, .vb-upsell-btns .btn, .vb-upsell-btns a { width: 100%; justify-content: center; }
}

/* ======================================================================
   7 — WENIGER BEWEGUNG
   Nicht "Animationen aus", sondern: nichts bewegt sich, alles bleibt lesbar.
   Der Wellenbalken der Stimmkarte behaelt seine Hoehen — er ist eine
   Signatur, keine Animation.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vb-voice.is-playing .vb-wave i { animation: none; }
  .vb-ai-skel { animation: none; }
  .vb-opt:hover { transform: none; }
}

/* ======================================================================
   9 — ERSTELLUNG UND BERICHT (Fassung mit serverseitiger Analyse)
   ====================================================================== */
.vb-warten { padding: 140px 0 100px; text-align: center; }
.vb-warten h1 { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 16px; }

/* Fortschritt. Jeder Punkt spiegelt einen echten Serverzustand — es gibt
   keinen Schritt, der nur der Optik wegen mitläuft. */
.vb-wschritte { list-style: none; margin: 0 auto; padding: 0; max-width: 460px; text-align: left; display: grid; gap: 14px; }
.vb-wschritt { display: flex; align-items: center; gap: 14px; font-size: 15.5px; color: var(--text-dim); }
.vb-wmark {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(var(--line-rgb), .25); position: relative;
}
.vb-wschritt.is-laeuft { color: var(--text); }
.vb-wschritt.is-laeuft .vb-wmark { border-color: var(--cyan); border-right-color: transparent; animation: vb-spin .9s linear infinite; }
.vb-wschritt.is-fertig { color: var(--text); }
.vb-wschritt.is-fertig .vb-wmark { border-color: var(--live); background: var(--live); }
.vb-wschritt.is-fertig .vb-wmark::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
@keyframes vb-spin { to { transform: rotate(360deg); } }

/* Sprungmarken: acht Abschnitte sind zu viele zum Scrollen. */
.vb-toc { position: sticky; top: 72px; z-index: 4; margin: 0 0 4px; }
.vb-toc ul {
  list-style: none; margin: 0; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--header-bg); backdrop-filter: blur(14px);
  border: 1px solid var(--panel-border); border-radius: 14px;
}
.vb-toc a {
  display: block; padding: 7px 13px; border-radius: 20px; font-size: 13px;
  color: var(--text-dim); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast);
}
.vb-toc a:hover { background: var(--inset-hover); color: var(--text); }
.vb-toc a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.vb-card { scroll-margin-top: 140px; }

/* Abweichung vom Nutzerwunsch — sichtbar, aber nicht als Tadel. */

.vb-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 8px; }
.vb-ablauf { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.vb-ablauf li::marker { color: var(--cyan); }
.vb-idee-cta { margin: 10px 0 12px; font-size: 14px; }

/* Konzeptbilder: die Fläche bleibt stehen, egal ob Bild, Fehler oder Hinweis —
   sonst springt das Raster bei jedem Nachladen. */
.vb-bild-flaeche {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border-soft);
  background: var(--inset); display: grid; place-items: center;
}
.vb-frame.is-9x16 .vb-bild-flaeche { aspect-ratio: 9 / 16; }
.vb-frame.is-16x9 .vb-bild-flaeche { aspect-ratio: 16 / 9; }
.vb-bild-flaeche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-bild-leer {
  padding: 22px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--text-dim);
  display: grid; gap: 14px; justify-items: center;
}
.vb-bild-leer .btn { font-size: 13px; padding: 9px 16px; }
.vb-bild-flaeche .vb-ai-skel { width: 100%; height: 100%; margin: 0; border-radius: 0; aspect-ratio: auto; }

@media (max-width: 900px) { .vb-zwei { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 720px) {
  .vb-warten { padding-top: 104px; }
  .vb-toc { top: 64px; }
  .vb-toc ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vb-toc ul::-webkit-scrollbar { display: none; }
  .vb-toc a { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .vb-wschritt.is-laeuft .vb-wmark { animation: none; border-right-color: var(--cyan); }
}

/* ======================================================================
   10 — LANDINGPAGE AUF SCHMALEN GERÄTEN UND DAS MARKENPROFIL
   ====================================================================== */
@media (max-width: 980px) {
  .vb-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .vb-hero .lead { max-width: none; }
}
@media (max-width: 720px) {
  .vb-hero { padding: 104px 0 56px; }
  /* Auf dem Telefon wird getippt, nicht gezielt: 44 px ist die Untergrenze,
     unter der ein Ziel regelmaessig verfehlt wird. */
  /* Ueber die volle Breite saehe die Unterkante wie ein Trenner aus und nicht
     wie ein Link — deshalb hier unterstrichener Text statt Rahmen. */
  .vb-tablist button { min-height: 44px; }
  .vb-faq-i summary { padding-top: 19px; padding-bottom: 19px; }
  .vb-schau-kopf, .vb-schau-body, .vb-schau-mehr { padding-left: 17px; padding-right: 17px; }
  .vb-demo, .vb-bausteine, .vb-schritte, .vb-beleg, .vb-faq { padding: 54px 0; }
  .vb-schluss { padding: 60px 0 72px; }

  /* Die Reiter laufen seitlich statt umzubrechen: vier gestapelte Zeilen
     wären eine Liste, keine Reiter. */
  .vb-tablist { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vb-tablist::-webkit-scrollbar { display: none; }
  .vb-tablist button { flex: 0 0 auto; white-space: nowrap; }

  /* Die Sprungleiste wird zum Startknopf. Die beiden Sprunglinks fallen weg —
     auf einem Telefon ist Scrollen schneller als eine zweite Navigation. */
  .vb-drei li { padding: 18px; gap: 6px 14px; }
}

/* ------------------------------------------------- Markenprofil (Website)
   Der Kasten steht in der Vorschau und zeigt, was von der angegebenen
   Website gelesen wurde. Beobachtetes und Abgeleitetes stehen getrennt,
   und alles ist änderbar — eine Website kann veraltet sein. */
@keyframes vb-puls { 50% { opacity: .3; } }

/* Im Bericht: dieselben Angaben, aber nicht mehr änderbar. */

/* ======================================================================
   11 — STRATEGY GENERATOR: EINGABE, KENNZAHLEN, DIAGRAMME

   Der Bericht soll in Sekunden lesbar sein, nicht in Minuten. Deshalb liegt
   das Gewicht hier auf Flächen, Zahlen und Zeichen — Fliesstext trägt nur,
   was sich nicht zeigen lässt.

   Wie überall auf dieser Seite: kein Hex-Wert und kein rgba()-Literal in
   einer Seitenregel. Die EINE Ausnahme sind Inhalte — erkannte Markenfarben
   und die Plattformzeichen. Ein YouTube-Rot, das sich mit dem Theme dreht,
   wäre kein YouTube-Rot mehr.
   ====================================================================== */

/* Nur für Bildschirmleser. Die Herkunft einer Zahl gehört vorgelesen, auch
   wenn sie am Bildschirm ein kleines Zeichen ist. */
.vb-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- Quelleneingabe */
.vb-qform { margin: 28px 0 0; display: grid; gap: 12px; max-width: 520px; }
.vb-qfeld {
  display: flex; align-items: center; gap: 12px;
  background: var(--inset); border: 1px solid var(--panel-border); border-radius: 14px;
  padding: 0 16px; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.vb-qfeld:focus-within { border-color: var(--cyan); background: var(--inset-hover); }
.vb-qfeld.is-klein { border-radius: 12px; padding: 0 13px; }
.vb-qic { flex: none; width: 22px; height: 22px; color: var(--text-dim); }
.vb-qfeld:focus-within .vb-qic { color: var(--cyan); }
.vb-qic svg { width: 100%; height: 100%; display: block; }
.vb-qfeld input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--text); font-family: var(--font-body); font-size: 16px;
  padding: 17px 0;
}
.vb-qfeld.is-klein input { font-size: 15px; padding: 13px 0; }
.vb-qfeld input::placeholder { color: var(--text-dim); }
.vb-qfeld input.is-error, .vb-qfeld:has(input.is-error) { border-color: var(--danger); }

.vb-qmehr {
  display: flex; align-items: center; gap: 9px; justify-self: start;
  background: none; border: 0; padding: 12px 2px; min-height: 44px; cursor: pointer;
  color: var(--text-dim); font-family: var(--font-body); font-size: 14px;
}
.vb-qmehr:hover { color: var(--text); }
.vb-qmehr:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.vb-qmehr em { font-style: normal; font-size: 12px; opacity: .7; }
.vb-qmehr-p { position: relative; width: 15px; height: 15px; flex: none; }
.vb-qmehr-p::before, .vb-qmehr-p::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base);
}
.vb-qmehr-p::before { left: 0; top: 7px; width: 15px; height: 1.5px; }
.vb-qmehr-p::after { left: 7px; top: 0; width: 1.5px; height: 15px; }
.vb-qmehr[aria-expanded="true"] .vb-qmehr-p::after { transform: scaleY(0); }

.vb-qsocial { display: grid; gap: 9px; }
.vb-qmsg { margin: 0; font-size: 13.5px; min-height: 1px; }
.vb-qmsg.is-error { color: var(--danger); }

/* Der Stand der Quellenanalyse, während die Zielfrage beantwortet wird. */
.vb-qstand {
  display: flex; align-items: center; gap: 10px; margin-top: 26px;
  font-size: 13.5px; color: var(--text-dim);
}
.vb-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); flex: none; }
.vb-punkt.is-laeuft { background: var(--cyan); animation: vb-puls 1.1s ease-in-out infinite; }
.vb-punkt.is-fertig { background: var(--live); }
.vb-punkt.is-fehler { background: var(--warn); }

/* ----------------------------------------------------- Dashboard-Mockup */
.vb-mockup {
  margin: 0; background: var(--panel-raised); border: 1px solid var(--panel-border);
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md);
}
.vb-browser {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft); background: var(--inset);
}
.vb-browser-p { display: flex; gap: 6px; }
.vb-browser-p i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--line-rgb), .24); display: block; }
.vb-browser-u {
  flex: 1; font-size: 11.5px; color: var(--text-dim); text-align: center;
  background: var(--panel); border-radius: 7px; padding: 4px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vb-mockup-b { padding: 18px 20px 20px; display: grid; gap: 14px; }
.vb-mockup-k b { display: block; font-family: var(--font-display); font-size: 18px; letter-spacing: -.02em; margin-top: 9px; }
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
.vb-mockup-tl { display: flex; gap: 3px; }
.vb-mockup-tl .vb-tl { padding: 8px 6px; }
.vb-mockup-tl .vb-tl b { font-size: 11px; }

/* ------------------------------------------------------ Plattformzeichen */
.vb-pic { display: block; width: 22px; height: 22px; flex: none; color: var(--text); }
.vb-pic.is-gross { width: 30px; height: 30px; }
.vb-pic svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------ Kennzahlen
   §8: Icon, Label, große Zahl — dieselbe Kartensprache wie die Simulator-
   KPIs (`.vb-sim-kpi`), damit „konsistentes KPI-Card-System" auch optisch
   stimmt und nicht nur im Namen. */
.vb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
/* DER STREIFEN BRICHT NACH SEINER EIGENEN BREITE UM, NICHT NACH DER DES
   FENSTERS. Das ist der Unterschied, an dem die erste Fassung scheiterte:
   Der Streifen steht im Bericht in der rechten Spalte von `.vb-rhero` und ist
   dort 753 px breit, waehrend das Fenster 1440 px misst. Jede `@media`-Regel
   sah also „grosser Bildschirm" und liess zwoelf Spalten stehen — 115 px je
   Kachel. Gemessen am 20.09.2026: „85/100" brauchte 93 px, verfuegbar waren
   79 px, die Zahl brach mitten entzwei zu „85/10" und „0". Eine Kennzahl, die
   in der Mitte umbricht, ist keine Kennzahl mehr.
   Deshalb `@container`: die Kacheln fragen ihr eigenes Raster nach dessen
   Breite. Die Spannen werden dabei VERDOPPELT statt auf einen festen Wert
   gesetzt — dadurch bleibt die Summe 12 pro Zeile aus `KPI_SPUR` erhalten,
   nur eben auf zwei Zeilen verteilt. Ein fester Wert (etwa „alle span 4")
   liesse bei fuenf Kacheln ein Loch in der zweiten Zeile.
   Die alten Fenster-Haltepunkte stehen hier bewusst NICHT mehr: sie setzten
   das Raster auf eine Spalte, waehrend die Kinder ihre Spannweite behielten,
   und ein Kind mit `span 4` in einem einspaltigen Raster erzeugt drei
   IMPLIZITE Spalten. Das Raster bleibt jetzt immer zwoelfspaltig. */
.vb-kpis.vb-g12 {
  grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px;
  container-type: inline-size; container-name: vbkpi;
}
/* `:where()` um die Spaltenklassen ist wieder Pflicht, und zwar aus genau dem
   Grund, der weiter oben schon einmal stand. Ohne es wiegt dieser Block
   (0,3,0), die beiden engeren darunter nur (0,2,0) — der breiteste haette
   damit auf JEDER Breite gewonnen. Gemessen bei 334 px Containerbreite: drei
   Kacheln zu 103 px nebeneinander statt zwei zu 161 px. Mit `:where()` wiegen
   alle drei gleich, und die Reihenfolge entscheidet wie beabsichtigt. */
@container vbkpi (max-width: 1019px) {
  .vb-kpis.vb-g12 > :where(.vb-c-2) { grid-column: span 4; }
  .vb-kpis.vb-g12 > :where(.vb-c-3) { grid-column: span 6; }
  .vb-kpis.vb-g12 > :where(.vb-c-4) { grid-column: span 8; }
  .vb-kpis.vb-g12 > :where(.vb-c-6, .vb-c-8, .vb-c-12) { grid-column: span 12; }
}
@container vbkpi (max-width: 639px) {
  .vb-kpis.vb-g12 > * { grid-column: span 6; }
}
/* Unter 320 px reicht die halbe Breite nicht mehr fuer eine Zahl mit
   Einheit — dann steht jede Kachel allein. */
@container vbkpi (max-width: 319px) {
  .vb-kpis.vb-g12 > * { grid-column: span 12; }
}
.vb-kpi {
  position: relative; min-width: 0; background: var(--panel); border-radius: 16px;
  padding: 16px 18px; display: grid; gap: 4px; align-content: start;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.vb-kpi:hover { background: var(--panel-2); transform: translateY(-1px); }
.vb-kpi > .vb-sim-ic { width: 17px; height: 17px; color: var(--text-dim); margin-bottom: 2px; }
.vb-kpi-v {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.03em; line-height: 1.05;
}
.vb-kpi-l { display: block; margin-top: 1px; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
.vb-kpi.is-gross { background: var(--panel-2); }
.vb-kpi.is-gross .vb-kpi-v { font-size: clamp(28px, 3.6vw, 38px); }
.vb-kpi.is-gross > .vb-sim-ic { width: 20px; height: 20px; }
.vb-kpis.is-hero { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); align-content: start; }

/* Das Zeichen für „abgeleitet, nicht gemessen" — dieselbe Komponente wie das
   Info-Symbol oben (§44: EINE Info-Komponente), nur mit kleinerem Ring: die
   Herkunft einer Zahl ist eine Fußnote am Wert, keine eigene Überschrift.
   Kleiner wird NUR der Ring. Die Trefferfläche bleibt die 44 px der
   Grundregel — ein erster Versuch mit 30 px stand kurz hier und fiel im
   Ablauftest auf: 23 Tippflächen unter dem Mindestmaß, nur weil das Zeichen
   klein aussieht. Die Sorge dahinter (eine 44-px-Fläche ragt über die
   Nachbarzeile und verschluckt deren Link) wurde nachgemessen statt
   geschätzt — in den Kanalzeilen und Kennzahl-Beschriftungen liegt kein
   zweites Bedienelement in Reichweite.
   Die Schriftgröße im Ring bleibt bei den 11 px der Grundregel; 10 px waren
   unter der Lesbarkeitsgrenze dieses Projekts. */
.vb-itip.is-klein i {
  width: 14px; height: 14px; border-color: rgba(var(--line-rgb), .4);
  font-weight: 700;
}

/* ------------------------------------------------------------- Farbfelder */
.vb-swatches { display: flex; gap: 7px; margin: 18px 0 0; justify-content: center; }
.vb-swatches i { width: 30px; height: 30px; border-radius: 8px; display: block; border: 1px solid var(--border-soft); }
.vb-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.vb-swatch { margin: 0; text-align: center; }
.vb-swatch i { display: block; width: 58px; height: 46px; border-radius: 10px; border: 1px solid var(--border-soft); }
.vb-swatch figcaption { margin-top: 5px; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Vorschau */
.vb-teaser {
  margin: 24px auto 30px; max-width: 560px; text-align: left;
  background: var(--inset); border: 1px solid var(--border-soft); border-radius: 16px; padding: 18px 20px;
}
.vb-teaser-l {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 11px;
}
.vb-teaser ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vb-teaser li { display: flex; gap: 10px; font-size: 14px; color: var(--text-dim); }
.vb-teaser li::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-top: 3px; border-radius: 50%;
  border: 1.5px dashed rgba(var(--line-rgb), .35);
}

/* -------------------------------------------------------------- Kanäle
   §14 Social Intelligence als Analytics-Modul: Reiter statt gleichzeitig
   nebeneinanderstehender Karten — eine Plattform aktiv, eine grosse
   Kennzahlen-Reihe statt kleiner 84px-Kacheln. */
.vb-kanaele { display: block; }
.vb-kanal-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: var(--sp-5, 24px);
  background: var(--inset); border-radius: var(--r-sm, 12px);
}
.vb-kanal-tab {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 16px;
  border-radius: 9px; border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--text-dim); font: inherit; font-size: 14.5px; font-weight: 500;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.vb-kanal-tab .vb-pic { width: 19px; height: 19px; }
.vb-kanal-tab:hover { color: var(--text); }
.vb-kanal-tab.is-aktiv { background: var(--panel-2); color: var(--text); box-shadow: 0 1px 0 var(--panel-border) inset; }
.vb-kanal-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.vb-kanal-panel { display: grid; gap: var(--sp-5, 24px); }
.vb-kanal-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vb-kanal-kopf a { font-size: 14px; color: var(--text-dim); text-decoration: none; }
.vb-kanal-kopf a:hover { color: var(--cyan); }
.vb-kanal-stat {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-5, 24px);
  padding: var(--sp-5, 24px) 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
}
.vb-kanal-stat b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 3vw, 34px); letter-spacing: -.025em; line-height: 1;
}
.vb-kanal-stat span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-dim); }
/* §5: zweite, kompaktere Reihe fuer Following/Beitragszahl/Durchschnittswerte
   — dieselbe Kachelstruktur, deutlich kleinere Zahl, kein doppelter oberer
   Rahmen (die Reihe sitzt direkt unter der primaeren). */
.vb-kanal-stat.is-sek {
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: var(--sp-4, 16px);
  padding-top: 0; border-top: none;
}
.vb-kanal-stat.is-sek b { font-size: 17px; letter-spacing: -.01em; }
.vb-kanal-stat.is-sek span { margin-top: 3px; font-size: 11.5px; }
.vb-kanal-leer {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-dim);
  background: var(--panel); border-radius: 11px; padding: 12px 14px;
}
.vb-kanal-ei {
  display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px;
  color: var(--cyan); padding-top: 4px;
}
.vb-kanal-ei .vb-sim-ic { color: var(--cyan); }

/* --------------------------------------------------------------- Werte */
.vb-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 12px; }
.vb-score {
  background: var(--inset); border: 1px solid var(--border-soft); border-radius: 17px; padding: 19px 20px;
}
.vb-score-k { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vb-score-k b { font-family: var(--font-display); font-size: 16px; }
.vb-score-z { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.vb-score-z b { font-family: var(--font-display); font-size: 21px; color: var(--text); }
.vb-score-b {
  height: 6px; border-radius: 6px; background: rgba(var(--line-rgb), .13);
  overflow: hidden; margin: 11px 0 12px;
}
.vb-score-b i { display: block; height: 100%; background: var(--grad); }
.vb-score-e { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.vb-score-d { margin-top: 12px; }
.vb-score-d summary {
  cursor: pointer; font-size: 12.5px; color: var(--cyan); list-style: none;
  padding: 4px 0;
}
.vb-score-d summary::-webkit-details-marker { display: none; }
.vb-score-d summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.vb-score-f { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.vb-score-f li { display: flex; gap: 11px; font-size: 12.5px; line-height: 1.5; }
.vb-score-f b { display: block; color: var(--text); font-weight: 600; }
/* Ohne eigene Groesse schrumpft <small> auf den Browservorgabewert — hier
   waren das 10,4 px. Das ist genau die Begruendung, mit der ein Punktwert
   nachrechenbar wird; sie muss lesbar sein. */
.vb-score-f small { display: block; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.vb-score-p {
  flex: none; width: 34px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--text-dim);
}
.vb-score-f li.is-ja .vb-score-p { color: var(--live); }

.vb-chance {
  margin-top: 14px; padding: 16px 18px; border-radius: 14px;
  background: rgba(var(--accent-rgb), .07); border: 1px solid rgba(var(--accent-rgb), .24);
}
.vb-chance > span {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
}
.vb-chance > b {
  display: block; font-family: var(--font-display); font-size: 21px; text-transform: capitalize;
  margin: 4px 0 7px; color: var(--cyan);
}
.vb-chance p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

/* ------------------------------------------------------------- Chancen */
.vb-chancen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.vb-chancek {
  position: relative; background: var(--inset); border: 1px solid var(--border-soft);
  border-radius: 17px; padding: 20px;
}
.vb-chancek-n {
  display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; color: var(--pa); margin-bottom: 8px;
}
.vb-chancek h3 { font-family: var(--font-display); font-size: 17px; margin: 0 0 8px; letter-spacing: -.02em; }
.vb-chancek p { margin: 0 0 11px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.vb-chancek-z { font-size: 13px; }

/* ------------------------------------------------------------- Formate */
.vb-formate { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.vb-formate .vb-format { display: grid; gap: 9px; align-content: start; }
.vb-formate .vb-format > b { font-family: var(--font-display); font-size: 16.5px; }
.vb-format-m { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-dim); }
.vb-formate .vb-format p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

/* -------------------------------------------------- Creative-Direction */
.vb-tokens { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; margin-bottom: 22px; }
.vb-token { background: var(--inset); border: 1px solid var(--border-soft); border-radius: 13px; padding: 14px 16px; }
.vb-token span {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 5px;
}
.vb-token b { display: block; font-family: var(--font-display); font-size: 15px; line-height: 1.35; }

/* -------------------------------------------------------------- Donut
   §4 der Polishrunde: groesser, und jedes Segment hoert auf Hover/Fokus der
   eigenen Legendenzeile — dafuer sorgt verdrahteDonuts() in blueprint.js
   (is-fokus/is-dim je .vb-ring). Die Deutung (`warum`/`beleg`) steht in der
   Legende als <small>, aber nur eingeblendet solange die Zeile Hover/Fokus
   traegt — sonst waere die Legende dauerhaft so lang wie vorher. */
.vb-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }
.vb-donut svg { width: 200px; height: 200px; flex: none; overflow: visible; }
.vb-ring {
  fill: none; stroke-width: 20;
  transition: stroke-width var(--dur-fast, .18s) var(--ease-out, ease), opacity var(--dur-fast, .18s) var(--ease-out, ease);
}
.vb-ring.is-fokus { stroke-width: 25; }
.vb-ring.is-dim { opacity: .28; }
.vb-ring-0 { stroke: var(--cyan); }
.vb-ring-1 { stroke: var(--indigo); }
.vb-ring-2 { stroke: var(--violet); }
.vb-ring-3 { stroke: var(--emerald); }
.vb-ring-4 { stroke: var(--amber); }
.vb-donut-l { list-style: none; margin: 0; padding: 0; flex: 1 1 240px; display: grid; gap: 2px; }
.vb-donut-l li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 11px; align-items: baseline; font-size: 14px;
  cursor: default; padding: 7px 8px; margin: 0 -8px; border-radius: 10px;
  transition: background var(--dur-fast, .18s) var(--ease-out, ease);
}
.vb-donut-l li:hover, .vb-donut-l li:focus, .vb-donut-l li:focus-visible {
  background: var(--inset); outline: none;
}
.vb-donut-l b { font-variant-numeric: tabular-nums; }
.vb-donut-l small {
  grid-column: 2; display: block; font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--dur-base, .28s) var(--ease-out, ease), opacity var(--dur-fast, .18s) var(--ease-out, ease);
}
.vb-donut-l li:hover small, .vb-donut-l li:focus small, .vb-donut-l li:focus-visible small {
  max-height: 60px; opacity: 1; margin-top: 2px;
}
.vb-dot { width: 11px; height: 11px; border-radius: 50%; display: block; grid-row: 1; }
.vb-dot-0 { background: var(--cyan); }
.vb-dot-1 { background: var(--indigo); }
.vb-dot-2 { background: var(--violet); }
.vb-dot-3 { background: var(--emerald); }
.vb-dot-4 { background: var(--amber); }

/* ------------------------------------------------------------ Zeitachse */
.vb-timeline { display: flex; gap: 3px; margin: 0 0 22px; }
.vb-tl {
  display: block; min-width: 0; padding: 11px 9px; border-radius: 9px; overflow: hidden;
  background: rgba(var(--line-rgb), .09); border-top: 2px solid currentColor;
}
.vb-tl-0 { color: var(--cyan); }
.vb-tl-1 { color: var(--indigo); }
.vb-tl-2 { color: var(--violet); }
.vb-tl-3 { color: var(--emerald); }
.vb-tl-4 { color: var(--amber); }
.vb-tl b {
  display: block; font-family: var(--font-display); font-size: 11.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vb-tl small { display: block; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- Sprechertext */
.vb-vo {
  margin: 0 0 18px; padding: 18px 20px; border-radius: 14px;
  background: var(--inset); border: 1px solid var(--border-soft);
  font-family: var(--font-display); font-size: 16px; line-height: 1.6;
}
.vb-hook-alt { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; line-height: 1.5; }
.vb-hook-alt li::marker { color: var(--cyan); }

/* ----------------------------------------------------------- Rhythmus */
.vb-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.vb-slot { background: var(--inset); border: 1px solid var(--border-soft); border-radius: 13px; padding: 14px 16px; }
.vb-slot b { display: block; font-family: var(--font-display); font-size: 15px; margin-bottom: 4px; }
.vb-slot span { font-size: 13px; color: var(--text-dim); }

/* ------------------------------------------------------------- Lücken */
/* Premium-Polish §5/§7: zwei Spalten statt Kartenturm — bei zwei bis fuenf
   Luecken (der ueblichen Zahl) spart das eine ganze Bildschirmlaenge, ohne
   dass eine Karte enger wirkt als vorher (jede behaelt ihre volle Breite
   auf dem Telefon, siehe Breakpoint). */
.vb-luecken { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; align-items: start; }
.vb-luecke { background: var(--inset); border: 1px solid var(--border-soft); border-radius: 15px; padding: 17px 19px; }
.vb-luecke > b { display: block; font-family: var(--font-display); font-size: 15.5px; margin-bottom: 7px; }
.vb-luecke-b { margin: 0 0 9px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.vb-luecke-e { margin: 0; font-size: 13.5px; line-height: 1.6; }
.vb-luecke-e span {
  display: inline-block; margin-right: 8px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cyan);
}

/* --------------------------------------------------------- Checklisten */
.vb-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.vb-check li { display: flex; gap: 11px; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.vb-check li::before { flex: none; width: 17px; height: 17px; margin-top: 2px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; }
.vb-check.is-ja li::before { content: "\2713"; background: rgba(var(--live-rgb), .16); color: var(--live); }
.vb-check.is-offen li::before { content: ""; border: 1.5px solid rgba(var(--line-rgb), .3); }

/* ------------------------------------------------------------- Teilen */
.vb-share { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 16px; }
.vb-share input {
  flex: 1 1 260px; min-width: 0; background: var(--inset); border: 1px solid var(--panel-border);
  border-radius: 11px; padding: 12px 14px; color: var(--text-dim);
  font-family: var(--font-body); font-size: 13px;
}
.vb-share input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.vb-share .btn { font-size: 14px; padding: 12px 20px; }

/* --------------------------------------------------------- Value Stack */
.vb-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px; }
.vb-stack-k {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 15px;
  padding: 17px 19px; box-shadow: var(--shadow-card);
}
.vb-stack-k b { display: block; font-family: var(--font-display); font-size: 15.5px; margin-bottom: 6px; letter-spacing: -.015em; }
.vb-stack-k span { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }

/* ------------------------------------------------------- Berichtskopf */
.vb-rhero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: start; margin-bottom: 26px; }
.vb-rhero h1 { font-size: clamp(27px, 3.6vw, 40px); line-height: 1.08; letter-spacing: -.03em; margin: 12px 0 12px; }
.vb-rhero .lead { font-size: 16.5px; margin: 0 0 16px; }
.vb-rhero-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; }
.vb-rhero-q a { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); text-decoration: none; }
.vb-rhero-q a:hover { color: var(--text); }
.vb-rhero-q .vb-pic { width: 17px; height: 17px; }
.vb-rhero-d { color: var(--text-dim); }

/* Rollen der Plattformkarten — jetzt vier statt drei. */
.vb-plat.is-primaer { border-color: rgba(var(--accent-rgb), .36); background: rgba(var(--accent-rgb), .055); }
.vb-plat.is-primaer .vb-tier { color: var(--cyan); }
.vb-plat.is-gelegenheit { border-style: dashed; }
.vb-plat.is-gelegenheit .vb-tier { color: var(--amber); }
.vb-plat.is-zweitverwertung { opacity: .82; }

.vb-frame-r {
  display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pa); margin-bottom: 3px;
}
.vb-lbl-opt { font-weight: 400; color: var(--text-dim); font-size: 12.5px; }
.vb-drei.is-drei { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

@keyframes vb-puls { 50% { opacity: .3; } }

/* --------------------------------------------------- Schmale Geräte */
@media (max-width: 980px) {
  .vb-rhero { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 720px) {
  .vb-qform { max-width: none; }
  .vb-qform .btn { width: 100%; justify-content: center; }
  .vb-kanal-stat { grid-template-columns: 1fr 1fr; }
  .vb-donut { gap: 18px; justify-content: center; }
  .vb-donut svg { width: 160px; height: 160px; }
  /* Die Zeitachse bleibt waagerecht, aber die Beschriftung wandert nach
     unten — fünf Spalten auf 375 px wären fünf Buchstaben je Spalte. */
  .vb-timeline { flex-wrap: wrap; }
  .vb-tl { flex: 1 1 88px; }
  .vb-share .btn { width: 100%; justify-content: center; }
  .vb-scores, .vb-kanaele, .vb-chancen, .vb-formate { grid-template-columns: 1fr; }
}

/* ======================================================================
   12 — DRUCKBOGEN

   „Als PDF exportieren" ist der Druckdialog des Browsers — aber das, was er
   ausgibt, ist kein Bildschirmabzug, sondern ein eigenes Dokument: Deckblatt,
   gesetzte Umbrüche, helle Flächen, keine Bedienelemente. Eine zweite
   Renderkette auf dem Server für dasselbe Dokument wäre Aufwand ohne Gewinn.
   ====================================================================== */

/* Nachtrag: Tippflächen. 44 px ist die Untergrenze, unter der ein Ziel auf
   einem Telefon regelmässig verfehlt wird — das gilt auch für einen
   Aufklapper und für den Profillink in einer Kanalkarte. */
@media (max-width: 720px) {
  .vb-qmehr { padding: 14px 2px; }
  .vb-kanal-kopf a { padding: 11px 0; margin: -11px 0; }
}

/* Rasterkinder dürfen schrumpfen.
   Ein Kind in einem Raster hat von Haus aus `min-width: auto` — es wird also
   nie schmaler als sein Inhalt und sprengt die Spur, statt umzubrechen. Im
   Bericht ist das aufgefallen, als eine echte Analyse fünf Kennzahlen und
   lange Beschriftungen lieferte: der Kopf wurde 1263 px breit in einer 1004 px
   breiten Spalte, und die Seite bekam 92 px waagerechten Überlauf. Mit den
   gestellten Testdaten war das nie sichtbar, weil die Texte kürzer waren. */
.vb-result-mount > *,
.vb-rhero > *,
.vb-zwei > *,
.vb-ready > *,
.vb-donut > * { min-width: 0; }
/* 112 px waren zu schmal: „Beitraege/Woche" und „Produktionsreife" brachen
   mitten im Wort um, weil `overflow-wrap: anywhere` genau das tut. Die
   Beschriftung darf brechen, aber nur zwischen Woertern — deshalb `break-word`
   fuer die Etiketten und `anywhere` nur noch fuer Adressen, bei denen es
   keine Wortgrenze gibt. */
.vb-kpis { grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); }
.vb-kpi-l { overflow-wrap: break-word; hyphens: auto; }
.vb-kpi-v, .vb-kanal-kopf a, .vb-rhero-q a { overflow-wrap: anywhere; }

/* ======================================================================
   13 — DASHBOARD, SPERRE, TELEFONFELD, LADEANSICHT

   Das Ziel dieser Regeln ist ein Bericht, der nach Analysewerkzeug aussieht
   und nicht nach Formular mit Ergebnis. Drei Dinge tragen das:
   Informationsdichte statt leerer Karten, eine feste Farbreihe fuer Daten
   (`--viz-1` bis `--viz-5` aus theme.css, geprueft in beiden Themes), und
   Flaechen, die nur dort Rahmen bekommen, wo sie etwas trennen.
   ====================================================================== */

/* --------------------------------------------------------- Berichtskopf */
.vb-rkopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 26px; padding: 0 0 20px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
}
.vb-rkopf-marke { display: flex; align-items: center; gap: 15px; min-width: 0; }
.vb-rlogo {
  flex: none; width: 46px; height: 46px; border-radius: 11px; overflow: hidden;
  background: var(--panel-raised); border: 1px solid var(--border-soft);
  display: grid; place-items: center;
}
.vb-rlogo img { max-width: 80%; max-height: 80%; object-fit: contain; display: block; }
.vb-rkopf-tx { min-width: 0; }
.vb-rkopf-tx h2 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 2.4vw, 25px);
  letter-spacing: -.025em; margin: 0; line-height: 1.15;
}
/* Kein `text-transform: uppercase` hier: die Branche kommt aus der Analyse
   und kann ein ganzer Halbsatz sein. Grossbuchstaben nehmen Woertern ihre
   Ober- und Unterlaengen und damit die Form, an der man sie erkennt — bei
   einem festen Etikett verschmerzbar, bei Text unbekannter Laenge nicht. */
.vb-rbranche {
  margin: 4px 0 0; font-size: 13.5px; letter-spacing: .01em;
  color: var(--text-dim);
}
.vb-rquellen { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 15px; font-size: 13px; }
.vb-rquellen a { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); text-decoration: none; }
.vb-rquellen a:hover { color: var(--text); }
.vb-rquellen .vb-pic { width: 17px; height: 17px; }
.vb-rdatum { color: var(--text-dim); font-size: 12.5px; }

/* Die Vorschau traegt denselben Bericht wie die Ergebnisansicht. */
.vb-rbericht { display: grid; gap: 18px; text-align: left; margin-top: 30px; }
.vb-rbericht .vb-card { scroll-margin-top: 0; }

.vb-kpi { position: relative; }
.vb-kpi-ic { position: absolute; top: 13px; right: 13px; width: 17px; height: 17px; opacity: .85; }

.vb-mini-l {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 8px;
}
.vb-marken-zeile {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px 26px;
  margin-top: 18px;
}
.vb-marken-ton { grid-column: 1 / -1; }
.vb-marken-ton p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); }

/* ------------------------------------------------------- Balkendiagramm
   Die Balken tragen die Markenfarbe ihrer Plattform. Zeichen, Name und Zahl
   stehen daneben — Farbe ist hier Verstaerkung, nie der einzige Traeger. */
.vb-balken { display: grid; gap: 9px; margin-bottom: 22px; }
.vb-balken-z { display: grid; grid-template-columns: minmax(96px, auto) 1fr auto; gap: 13px; align-items: center; }
.vb-balken-n { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.vb-balken-n .vb-pic { width: 17px; height: 17px; }
.vb-balken-s { height: 12px; border-radius: 6px; background: rgba(var(--line-rgb), .1); overflow: hidden; }
/* 4 px gerundetes Datenende, am Nullpunkt verankert. */
.vb-balken-s i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--viz-1); }
.vb-balken-s i.is-instagram { background: linear-gradient(90deg, #F50000, #B900B4); }
.vb-balken-s i.is-youtube { background: #FF0000; }
.vb-balken-s i.is-tiktok { background: #25F4EE; }
.vb-balken-s i.is-linkedin { background: #0A66C2; }
.vb-balken-w { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: 15px; }

/* Datenfarben aus theme.css. Reihenfolge fest, nie im Kreis.

   ZWEI AUSNAHMEN VON DER FARBREGEL DIESER DATEI, beide bewusst:
   1. Die Balkenfuellungen oben tragen echte Hex-Werte — das sind die
      Markenfarben der Plattformen und damit INHALT. Ein YouTube-Rot, das
      sich mit dem Theme dreht, waere kein YouTube-Rot mehr.
   2. Die Masken der Sperrflaeche benutzen rgba(0,0,0,x). In einer Maske ist
      das keine Farbe, sondern ein Alphawert: Schwarz heisst „sichtbar".
      Ein Theme-Token dort waere schlicht falsch. */
.vb-ring-0, .vb-dot-0, .vb-tl-0 { }
.vb-ring-0 { stroke: var(--viz-1); } .vb-dot-0 { background: var(--viz-1); } .vb-tl-0 { color: var(--viz-1); }
.vb-ring-1 { stroke: var(--viz-2); } .vb-dot-1 { background: var(--viz-2); } .vb-tl-1 { color: var(--viz-2); }
.vb-ring-2 { stroke: var(--viz-3); } .vb-dot-2 { background: var(--viz-3); } .vb-tl-2 { color: var(--viz-3); }
.vb-ring-3 { stroke: var(--viz-4); } .vb-dot-3 { background: var(--viz-4); } .vb-tl-3 { color: var(--viz-4); }
.vb-ring-4 { stroke: var(--viz-5); } .vb-dot-4 { background: var(--viz-5); } .vb-tl-4 { color: var(--viz-5); }

/* ----------------------------------------------------------- Kanalkarten
   §14: `.vb-kanal-st` war absolut zur alten `.vb-kanal-k` positioniert —
   die gibt es nicht mehr (Reiter statt Karten), das Etikett ist jetzt ein
   normales Flex-Kind in `.vb-kanal-kopf`. */
.vb-kanal-st {
  font-size: 11px; letter-spacing: .06em; flex: none;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  background: rgba(var(--line-rgb), .12); color: var(--text-dim);
}
.vb-kanal-st.is-gelesen { background: rgba(var(--live-rgb), .14); color: var(--live); }
.vb-kanal-st.is-gesperrt { background: rgba(var(--warn-rgb), .14); color: var(--warn); }
.vb-kanal-fehlt {
  margin: 0; padding-top: 12px; border-top: 1px solid var(--border-soft);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px;
}
.vb-kanal-fehlt > span {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
  width: 100%;
}
/* Nicht verfuegbare Kennzahlen stehen als durchgestrichene Marken da — die
   Luecke ist benannt, nicht verschwiegen, und sieht trotzdem nach Absicht aus. */
.vb-kanal-fehlt i {
  font-style: normal; font-size: 12px; color: var(--text-dim);
  background: var(--panel); border: 1px dashed rgba(var(--line-rgb), .22);
  border-radius: 7px; padding: 3px 8px;
}

.vb-insight {
  margin: 18px 0 0; padding: 15px 17px; border-radius: 13px; font-size: 14px; line-height: 1.6;
  background: rgba(var(--accent-rgb), .06); border: 1px solid rgba(var(--accent-rgb), .2);
}
.vb-insight > span {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 5px;
}

/* ------------------------------------------------------------ Die Sperre
   Kein harter Blur und kein Scroll-Gefaengnis: der Bereich blendet ueber eine
   Maske aus, ist per `inert` aus Fokus und Vorlesereihenfolge genommen und
   traegt ohnehin keinen echten Inhalt — der existiert zu diesem Zeitpunkt
   noch gar nicht. */
.vb-gated {
  position: relative; display: grid; gap: 18px; margin-top: 18px;
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.8) 34%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.14) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.8) 34%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.14) 82%, transparent 100%);
  max-height: 560px; overflow: hidden;
}
.vb-card.is-gated { opacity: .92; }
.vb-skelett { display: grid; gap: 11px; margin-top: 6px; }
.vb-skelett span {
  display: block; height: 11px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(var(--line-rgb), .16), rgba(var(--line-rgb), .07));
}

.vb-unlock {
  margin-top: -110px; position: relative; z-index: 2; text-align: center;
  background: var(--panel-raised); border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 22px; padding: 30px 28px 32px; box-shadow: var(--shadow-md);
}
.vb-unlock-ic {
  display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 16px;
  border-radius: 50%; color: var(--cyan);
  background: var(--cyan-soft); border: 1px solid rgba(var(--accent-rgb), .3);
}
.vb-unlock-ic svg { width: 23px; height: 23px; }
.vb-unlock h3 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.025em;
  font-size: clamp(20px, 2.6vw, 27px); margin: 0 0 10px;
}
.vb-unlock p { margin: 0 auto 22px; max-width: 460px; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }

/* --------------------------------------------------------- Telefonfeld
   Ein Rahmen, zwei Bedienteile. Hoehe, Rundung, Rahmenfarbe und Fokus sind
   dieselben wie bei Name und E-Mail — sonst faellt genau dieses Feld auf. */
.vb-tel {
  position: relative; display: flex; align-items: stretch;
  background: var(--inset); border: 1px solid var(--panel-border); border-radius: 13px;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.vb-tel:focus-within { border-color: var(--cyan); background: var(--inset-hover); }
.vb-tel.is-offen { border-color: var(--cyan); }
.vb-tel-land {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 13px 12px 13px 15px; background: none; border: 0; cursor: pointer;
  color: var(--text); font-family: var(--font-body); font-size: 15.5px;
  border-right: 1px solid var(--panel-border); border-radius: 13px 0 0 13px;
}
.vb-tel-land:hover { background: var(--inset-hover); }
.vb-tel-land:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.vb-tel-vw { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-tel-pfeil {
  width: 8px; height: 8px; border: solid var(--text-dim); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-fast);
}
.vb-tel.is-offen .vb-tel-pfeil { transform: rotate(-135deg) translate(-3px, -3px); }
.vb-tel input[type="tel"] {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--text); font-family: var(--font-body); font-size: 15.5px; padding: 13px 15px;
}
.vb-tel input[type="tel"]::placeholder { color: var(--text-dim); }
.vb-tel input.is-error { border: 0; }
.vb-tel:has(input.is-error) { border-color: var(--danger); }

.vb-flagge {
  flex: none; width: 21px; height: 15px; border-radius: 3px; overflow: hidden;
  display: block; box-shadow: 0 0 0 1px rgba(var(--line-rgb), .2);
}
.vb-flagge svg { width: 100%; height: 100%; display: block; }
.vb-flagge.is-text {
  display: grid; place-items: center; font-size: 9px; font-weight: 700;
  letter-spacing: .02em; background: var(--panel-raised); color: var(--text-dim);
}

.vb-tel-pop {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 30; width: min(340px, 100%);
  background: var(--overlay); border: 1px solid var(--panel-border); border-radius: 15px;
  box-shadow: var(--shadow-md); padding: 10px; display: none;
}
.vb-tel.is-offen .vb-tel-pop { display: block; }
.vb-tel-pop input {
  width: 100%; background: var(--inset); border: 1px solid var(--panel-border);
  border-radius: 10px; padding: 10px 13px; color: var(--text);
  font-family: var(--font-body); font-size: 14.5px; outline: none;
}
.vb-tel-pop input:focus { border-color: var(--cyan); }
.vb-tel-pop ul {
  list-style: none; margin: 9px 0 0; padding: 0; max-height: 264px; overflow-y: auto;
}
.vb-tel-pop li {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px;
  cursor: pointer; font-size: 14.5px;
}
.vb-tel-pop li.is-markiert, .vb-tel-pop li:hover { background: var(--inset-hover); }
.vb-tel-pop li[aria-selected="true"] { color: var(--cyan); }
.vb-tel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-tel-pop .vb-tel-vw { color: var(--text-dim); font-size: 13.5px; }
.vb-tel-leer { color: var(--text-dim); font-size: 14px; padding: 12px; cursor: default; }
.vb-tel-msg { margin: 7px 0 0; font-size: 13px; color: var(--danger); min-height: 1px; }

/* -------------------------------------------------------- Ladeansicht */
.vb-fortschritt {
  --p: 0%;
  height: 10px; border-radius: 10px; background: rgba(var(--line-rgb), .12);
  overflow: hidden; margin: 0 auto; max-width: 520px;
}
/* Der Balken waechst ueber `transform`, nicht ueber `width`: eine
   Breitenanimation zwingt den Browser bei jedem Einzelbild zu einem neuen
   Layout, `scaleX` laeuft auf dem Compositor. Die Rundung sitzt am Behaelter
   (`overflow: hidden`), deshalb verzerrt das Skalieren hier nichts — mit
   eigenem `border-radius` am Balken waere die Rundung mitgestaucht worden.
   Dieselbe Loesung wie beim frueheren Fortschritt des Fragebogens. */
.vb-fortschritt i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--grad); transition: transform .6s var(--ease-soft);
}
.vb-fortschritt-z {
  margin: 11px 0 30px; font-size: 13.5px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.vb-wschritt span:not(.vb-wmark) { min-width: 0; }
.vb-warte-status {
  margin: 28px auto 0; max-width: 520px; text-align: left;
  background: var(--inset); border: 1px solid var(--border-soft); border-radius: 15px; padding: 16px 18px;
}
.vb-warte-status p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.vb-warte-bild { margin-top: 7px !important; color: var(--cyan) !important; font-size: 13px !important; }

/* Echte Funde aus der Quellenauswertung. Sie liegen ohnehin vor — sie zu
   zeigen macht den Fortschritt fuehlbar, ohne ihn zu behaupten. */
/* §14 — DER UEBERLAUF, UND WARUM ER PASSIERT IST
   „KI-Systeme und Prozessautomatisierung" lief aus der Karte. Zwei Ursachen,
   beide klassisch:

   1. Ein Rasterkind hat `min-width: auto`. Die Spur ist `minmax(150px, 1fr)`,
      aber das Kind weigert sich, unter seine Inhaltsbreite zu schrumpfen —
      also waechst es aus der Spur heraus. `min-width: 0` hebt das auf. Das
      steht seit Monaten in der Uebergabe und ist hier trotzdem vergessen
      worden.
   2. Ein langes Wort ohne Trennmoeglichkeit bricht nicht von selbst.
      `overflow-wrap: anywhere` erlaubt den Bruch, `hyphens: auto` macht ihn
      lesbar.

   KEINE FESTE HOEHE. Die Werte kommen aus einer fremden Website; wie lang sie
   sind, weiss niemand vorher. Die Karte darf wachsen. */
/* `minmax(0, 1fr)` in einem `auto-fit` ist sinnlos: ohne Mindestbreite passen
   beliebig viele Spuren hinein. Am 20.09.2026 waren es 46 Spalten zu je 73 px
   und die Karten 310 px hoch. Die Mindestbreite gehoert an die SPUR, das
   `min-width: 0` an das KIND — das Kind war die Ursache des Ueberlaufs, nicht
   die Spur. `min(100%, …)` haelt die Spur auf sehr schmalen Flaechen im Rahmen.
   `auto-fill` statt `auto-fit`, damit wenige Karten ihr Mass behalten. */
.vb-funde {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 178px), 1fr));
  gap: 10px; margin: 16px 0 0; text-align: left;
}
.vb-fund {
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 12px 14px; min-width: 0; height: auto; min-height: 66px;
  animation: vb-fund-ein .4s var(--ease-soft) both;
}
.vb-fund span {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); overflow-wrap: break-word;
}
.vb-fund b {
  display: block; margin-top: 3px; line-height: 1.35;
  font-size: clamp(13px, 1.1vw, 15px); font-weight: 500;
  overflow-wrap: anywhere; hyphens: auto; word-break: normal;
}
@keyframes vb-fund-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .vb-rkopf { gap: 14px; }
  .vb-balken-z { grid-template-columns: 1fr auto; row-gap: 5px; }
  .vb-balken-s { grid-column: 1 / -1; }
  .vb-gated { max-height: 400px; }
  .vb-unlock { margin-top: -80px; padding: 24px 20px 26px; }
  .vb-tel-pop { width: 100%; }
  .vb-tel-pop ul { max-height: 46vh; }
}

@media (prefers-reduced-motion: reduce) {
  .vb-fortschritt i { transition: none; }
  .vb-fund { animation: none; }
}

@media print {
  .vb-gated, .vb-unlock, .vb-tel-pop { display: none !important; }
}

/* --------------------------------------- Beispielbericht auf der Landing
   Derselbe Aufbau wie der echte Bericht. Die Marke oben sagt in einem Satz,
   was Sache ist — ein Beispielwert, den jemand fuer eine Messung haelt, ist
   schlimmer als gar kein Beispiel. */
/* Die Marke am Beispielbericht. Sie heisst seit dem 19.09.2026 `.vb-demo-m`,
   weil `.vb-demo` jetzt der ganze Demo-Abschnitt ist — zwei Bedeutungen unter
   einem Namen waeren die naechste Verwechslung. */
.vb-demo-m {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 13px; line-height: 1.5; color: var(--warn);
  background: rgba(var(--warn-rgb), .08); border: 1px solid rgba(var(--warn-rgb), .26);
  border-radius: 12px; padding: 11px 15px;
}
.vb-demo-m span { font-size: 11px; flex: none; }
.vb-rq { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); }
.vb-rq .vb-pic { width: 17px; height: 17px; }
.vb-kanal-h { display: block; font-size: 12.5px; color: var(--text-dim); }
.vb-bsp .vb-rkopf-tx h3 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 2.4vw, 25px);
  letter-spacing: -.025em; margin: 0; line-height: 1.15;
}
.vb-bsp .vb-rlogo svg { width: 24px; height: 24px; }
/* Die Sperrflaeche im Beispiel ist nur eine Vorfuehrung — sie darf niemanden
   in eine Sackgasse fuehren, deshalb steht die Einladung direkt darunter. */
.vb-bsp .vb-gated { max-height: 330px; }

/* ======================================================================
   PREMIUM CREATIVE INTELLIGENCE DASHBOARD — 20.09.2026, Fassung 7.0

   Umbau von "eine sehr lange Webseite mit Karten" zu einem Produkt-Dashboard:
   ein Kapitel, eine Frage, eine dominante Visualisierung — nicht drei
   gleichgewichtige weisse Kacheln pro Abschnitt. Die Rechenlogik (simRechnen,
   pruefeFachlich, donut, kpiWerte, …) ist unveraendert; nur wie ihr Ergebnis
   auf der Flaeche steht, ist neu.

   FUENF REGELN, DIE HIER NICHT VERHANDELBAR SIND
   1. KEINE FARBE ALS HEX. Alles kommt aus theme.css. Die eine Ausnahme sind
      gemessene Markenfarben des Nutzers — die sind Inhalt und stehen als
      style-Attribut am Element, nicht hier.
   2. ANIMIERTE BREITE IST LAYOUT-ARBEIT. Was waechst, waechst ueber
      `transform: scaleX()`; die Rundung sitzt am Behaelter.
   3. RASTERKINDER BRAUCHEN `min-width: 0`. Ohne das sprengen lange echte
      Texte ihre Spur — im Bericht schon einmal mit 92 px Ueberlauf passiert,
      den gestellte Testdaten nie zeigten.
   4. `text-transform: uppercase` NUR auf feste Etiketten, nie auf Text aus
      der Analyse — der kann ein ganzer Halbsatz sein.
   5. KEIN GLOW, KEIN NEON-RAND (Projekt-CLAUDE.md). Tiefe kommt aus
      Flaechenkontrast (--bg/--bg-2/--panel/--panel-2) und echten Schatten
      mit Versatz, nicht aus farbigem Leuchten.
   ====================================================================== */

/* -------------------------------------------------------- Tonleiter (§47)
   Ad-hoc-Werte waren bisher die Regel (6 bis 999px an Radien allein). Diese
   Tonleiter gilt ab hier fuer alles NEU gebaute im Bericht; bereits
   bestehende, funktionierende Regeln werden nicht blind migriert. */
.vb-dash {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px;
}

/* --------------------------------------------------- Das globale Kartensystem
   `.vb-card` (Zeile ~1031) gehoert der Vorschau vor dem Gate. Der Bericht
   selbst hatte gar keine gemeinsame Basis — jede Komponente erfand Flaeche,
   Rand und Radius neu. `.vb-dcard` ist ab jetzt diese eine Basis: gedaempfte
   Flaeche (kein zweites Weiss auf Weiss), ein Rand nur, wo Whitespace und
   Flaechenkontrast allein die Grenze nicht tragen. */
.vb-dcard {
  background: var(--panel-2); border-radius: var(--r-md, 18px); padding: var(--sp-5, 24px);
  box-shadow: var(--shadow-card);
}
.vb-dcard.is-inset { background: var(--inset); box-shadow: none; border: 1px solid var(--border-soft); }
.vb-dcard.is-hero { border-radius: var(--r-lg, 24px); padding: var(--sp-6, 32px); }

/* ======================================================================
   DER ANWENDUNGSRAHMEN (21.09.2026)

   Der Bericht war eine Dokumentspalte: Kopf, waagerechte Reiter, dann
   Abschnitt unter Abschnitt ueber 12.900 px. Er nutzte die Breite nicht und
   las sich deshalb als langer Bericht statt als Werkzeug.

   Jetzt traegt er links eine schmale, mitlaufende Kapitelschiene und rechts
   einen echten Inhaltsbereich. Unter 1100 px faellt die Schiene weg und die
   Navigation ist wieder die waagerechte Leiste von vorher — auf einem
   Telefon kostet eine Seitenschiene nur Platz.
   ====================================================================== */
.vb-app {
  display: grid; grid-template-columns: 208px minmax(0, 1fr);
  gap: var(--sp-6, 32px); align-items: start;
}
.vb-app-main { min-width: 0; }

.vb-rail {
  position: sticky; top: 101px; display: grid; gap: var(--sp-4, 16px);
  align-content: start; padding-top: var(--sp-2, 8px);
}
.vb-rail .vb-rnav {
  position: static; margin: 0; background: none; border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.vb-rail .vb-rnav ul { flex-direction: column; gap: 1px; overflow: visible; }
.vb-rail .vb-rnav a {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; border: 0; width: 100%;
  font-size: 14px; color: var(--text-dim); text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.vb-rail .vb-rnav a:hover { background: var(--inset); color: var(--text); }
/* Der aktive Punkt traegt Flaeche, nicht nur Farbe — eine 1-px-Linie unter
   einem Wort ist in einer senkrechten Liste kaum zu finden. */
.vb-rail .vb-rnav a.is-hier {
  background: rgba(var(--accent-rgb), .10); color: var(--text); font-weight: 500;
}
.vb-rnav-n {
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-dim); opacity: .7;
}
.vb-rail .vb-rnav a.is-hier .vb-rnav-n { color: var(--cyan); opacity: 1; }
.vb-rail-fuss { padding: var(--sp-4, 16px) 12px 0; border-top: 1px solid var(--border-soft); }
.vb-rail-fuss a { font-size: 13px; color: var(--text-dim); text-decoration: none; }
.vb-rail-fuss a:hover { color: var(--cyan); }

@media (max-width: 1100px) {
  .vb-app { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vb-rail {
    position: sticky; top: 77px; z-index: 12; gap: 0; padding-top: 0;
    margin: 0 0 var(--sp-2, 8px);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-soft);
  }
  /* Ohne `min-width: 0` misst sich die Schiene am breitesten Kind: die
     Reiterliste wurde 515 px breit und schob die Seite 153 px ueber den
     Rand, statt selbst zu scrollen. Gemessen bei 390 px. */
  .vb-rail, .vb-rail .vb-rnav { min-width: 0; }
  .vb-rail .vb-rnav ul { flex-direction: row; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .vb-rail .vb-rnav ul::-webkit-scrollbar { display: none; }
  .vb-rail .vb-rnav a { grid-template-columns: auto; padding: 14px 12px; border-radius: 0; }
  .vb-rail .vb-rnav a.is-hier { background: none; box-shadow: inset 0 -2px 0 var(--cyan); }
  .vb-rnav-n { display: none; }
  .vb-rail-fuss { display: none; }
}

/* ------------------------------------------------------- Bento-Raster (§7)
   Ein echtes 12-Spalten-Raster statt ueberall derselben Dreierreihe. Die
   Spannweite steht am Kind (`.c4`, `.c8`, …); unter 900 px faellt alles auf
   volle Breite, weil eine Drittelspalte auf dem Telefon keine ist. */
.vb-bento {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-5, 24px); align-items: start;
}
.vb-bento > * { min-width: 0; }
/* Im Bento traegt der Rasterabstand die Trennung — der Blockabstand von
   unten wuerde ihn verdoppeln. */
.vb-bento .vb-block { margin-bottom: 0; }
.vb-bento .vb-block + .vb-block { margin-top: var(--sp-5, 24px); }
.vb-bento > .c3 { grid-column: span 3; }
.vb-bento > .c4 { grid-column: span 4; }
.vb-bento > .c5 { grid-column: span 5; }
.vb-bento > .c6 { grid-column: span 6; }
.vb-bento > .c7 { grid-column: span 7; }
.vb-bento > .c8 { grid-column: span 8; }
.vb-bento > .c9 { grid-column: span 9; }
.vb-bento > .c12 { grid-column: span 12; }
@media (max-width: 900px) {
  .vb-bento > .c3, .vb-bento > .c4, .vb-bento > .c5, .vb-bento > .c6,
  .vb-bento > .c7, .vb-bento > .c8, .vb-bento > .c9 { grid-column: span 12; }
}

/* ------------------------------------------------------- Flaechen (§43)
   Nicht jede Information ist eine Karte. Drei Stufen, bewusst
   unterscheidbar: `is-still` traegt gar keine Flaeche (Fliesstext, Listen),
   `.vb-panel` die normale, `is-hero` die betonte. */
.vb-panel {
  background: var(--panel-2); border-radius: var(--r-lg, 24px); padding: var(--sp-5, 24px);
  box-shadow: var(--shadow-card);
}
.vb-panel.is-still { background: none; box-shadow: none; padding: 0; }
.vb-panel.is-inset { background: var(--inset); box-shadow: none; }
.vb-panel.is-hero {
  border-radius: 26px; padding: var(--sp-6, 32px);
  background: rgba(var(--accent-rgb), .09); box-shadow: none;
}
.vb-panel.is-hero .vb-exec-hebel h3 { color: var(--cyan); }
/* Kartenkopf wie in echter Analytics-Software: Titel links, Steuerung
   rechts auf derselben Grundlinie. */
.vb-panel-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4, 16px); flex-wrap: wrap; margin: 0 0 var(--sp-4, 16px);
}
.vb-panel-h > h3, .vb-panel-h > h4 {
  margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.01em;
}
.vb-panel-h-r { display: flex; align-items: center; gap: var(--sp-2, 8px); flex-wrap: wrap; }

/* -------------------------------------------------- Bereiche und Bloecke */
/* Die Kopfzeile der Seite ist `position: fixed` und 77 px hoch. Ein Sprungziel
   muss deshalb 77 px plus die Hoehe der Berichtsnavigation freihalten, sonst
   landet die Ueberschrift unter beiden. */
/* §Section Separation, jetzt mit Flaechenrhythmus statt nur Rand: jeder
   zweite Bereich traegt einen leicht getoenten Hintergrund
   (`--bg-2`, dieselbe Flaeche wie anderswo auf der Seite) statt eines
   durchgehenden Einheitsgrau — sechs Kapitel auf einer Flaeche lesen sich
   sonst als eine einzige lange Seite, egal wie gross die Ueberschrift ist. */
/* 21.09.2026: 96 px oben plus getoente Flaeche je zweitem Kapitel waren im
   Anwendungsrahmen doppelt gemoppelt — die Flaechen der Panels tragen die
   Gruppierung jetzt selbst, die Kapitelnummer den Rhythmus. 96 -> 56 px
   spart ueber sechs Kapitel rund 240 px, ohne dass etwas enger wirkt. */
.vb-sect { padding: 56px 0 0; scroll-margin-top: 120px; }
.vb-sect:first-child { padding-top: 0; }
/* Die getoente Flaeche je zweitem Kapitel ist entfallen: im Anwendungsrahmen
   stehen die Kapitel ohnehin auf einer eigenen Inhaltsflaeche, und zwei
   ineinandergeschachtelte Flaechenrhythmen (Kapitelband + Panel) nehmen
   sich gegenseitig die Wirkung. Die Trennung traegt jetzt die grosse
   nummerierte Ueberschrift plus der Abstand darueber. */
/* §41 Section Headers, ohne Kicker/Eyebrow ueber der Ueberschrift (Craft-Floor-
   Verbot): die Kapitelnummer steht STATT eines separaten Labels INNERHALB
   der Ueberschriftzeile, kleiner gesetzt — eine Ziffer, kein zweites Element. */
.vb-sect-h {
  font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.08; margin: 0 0 var(--sp-2, 8px);
  max-width: 22ch;
}
.vb-sect-n {
  font-size: .42em; color: var(--cyan); font-variant-numeric: tabular-nums;
  vertical-align: .62em; margin-right: 14px; letter-spacing: 0;
}
.vb-sect-sub {
  margin: 0 0 var(--sp-5, 24px); font-size: 15.5px; line-height: 1.5; color: var(--text-dim);
  max-width: 62ch;
}
.vb-block { margin: 0 0 var(--sp-5, 24px); min-width: 0; }
.vb-block-h {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--text-dim);
  margin: 0 0 12px;
}
.vb-block-lead { margin: -4px 0 14px; font-size: 14px; color: var(--text-dim); }
.vb-mini-h {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 9px;
}
.vb-hinweis { font-size: 13px; color: var(--text-dim); margin: 12px 0 0; }
.vb-leer-tx { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); margin: 0; }

/* ------------------------------------------------- Mitlaufende Navigation
   Sie klebt oben. `position: sticky` funktioniert auf dieser Seite nur, weil
   `.vb { overflow-x: clip }` das `overflow-x: hidden` aus pages.css ersetzt —
   ein Vorfahr mit `hidden` schaltet jedes sticky darin ab. */
.vb-rnav {
  /* NICHT `top: 0`. Die Kopfzeile der Seite ist fixed, 77 px hoch und liegt
     mit z-index 100 darueber — bei `top: 0` schiebt sich die Navigation
     darunter und wird oben abgeschnitten. Aufgefallen an den Umlautpunkten
     von „Überblick", die schlicht fehlten. */
  position: sticky; top: 77px; z-index: 12; margin: 0 0 4px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.vb-rnav ul {
  display: flex; gap: 2px; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.vb-rnav ul::-webkit-scrollbar { display: none; }
.vb-rnav a {
  display: block; padding: 15px 14px; font-size: 13.5px; font-weight: 500;
  color: var(--text-dim); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .18s, border-color .18s;
  min-height: 44px;
}
.vb-rnav a:hover { color: var(--text); }
.vb-rnav a.is-hier { color: var(--text); border-bottom-color: var(--cyan); }

/* ------------------------------------------------------ Punktwerte als Ring */
.vb-srings { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.vb-sring {
  display: flex; gap: 14px; align-items: flex-start; min-width: 0;
  padding: 16px; border: 1px solid var(--border-soft); border-radius: 14px;
  background: var(--panel);
}
.vb-sring-g { position: relative; flex: 0 0 64px; width: 64px; height: 64px; }
.vb-sring-g svg { width: 64px; height: 64px; display: block; }
.vb-sring-bg { fill: none; stroke: var(--border-soft); stroke-width: 6; }
.vb-sring-v { fill: none; stroke: var(--cyan); stroke-width: 6; stroke-linecap: round; }
.vb-sring-g > b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
}
.vb-sring-tx { min-width: 0; flex: 1; }
.vb-sring-tx > b { display: block; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; }
.vb-sring-e { margin: 8px 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }
.vb-sring-d summary {
  cursor: pointer; font-size: 12.5px; color: var(--text-dim); margin-top: 6px;
  padding: 4px 0; list-style: none;
}
.vb-sring-d summary::-webkit-details-marker { display: none; }
.vb-sring-d summary::before { content: "▸ "; }
.vb-sring-d[open] summary::before { content: "▾ "; }
.vb-sring-d summary:hover { color: var(--text); }

/* ================================================ EXECUTIVE OVERVIEW (§10)
   Bento statt Card-Wall: links der groesste Hebel (naechstes Video kompakt +
   Markenprofil), rechts vier Kennzahlen plus Produktionsreife. Kein Element
   traegt eine eigene Kartenflaeche — die Spalten selbst tragen die Trennung. */
/* Die alte zweispaltige Textwand (`.vb-exec`) ist dem Bento gewichen. Hebel
   und Kennzahlen stehen als zwei unterschiedlich schwere Flaechen
   nebeneinander, das Markenprofil als flacher Streifen darunter. */
.vb-exec-bento > .c7 { align-self: start; }
.vb-exec-hebel h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: -.01em; margin: 0 0 10px; color: var(--text-dim);
}
.vb-exec-hebel-titel {
  font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 34px); font-weight: 600;
  letter-spacing: -.025em; line-height: 1.14; margin: 0 0 10px; max-width: 22ch;
}
.vb-exec-hebel-warum { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--text-dim); max-width: 56ch; }
.vb-exec-hebel .vb-chips { margin: 0 0 16px; }
.vb-exec-jump {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500;
  color: var(--cyan); text-decoration: none; min-height: 32px;
}
.vb-exec-jump:hover { text-decoration: underline; }
/* §11: Markenprofil als EINE waagerechte Zeile statt einer Formularliste —
   Positionierung links, Etiketten und Farben rechts daneben. */
.vb-marke-streifen { padding: var(--sp-4, 16px) var(--sp-5, 24px); }
.vb-exec-marke {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-4, 16px) var(--sp-6, 32px);
  align-items: center;
}
.vb-exec-marke > .vb-chips, .vb-exec-marke > .vb-swatch-row { justify-self: start; }
@media (max-width: 900px) { .vb-exec-marke { grid-template-columns: minmax(0, 1fr); } }
.vb-exec-pos { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); max-width: 60ch; }
.vb-bprofil { display: flex; flex-wrap: wrap; gap: 4px var(--sp-6, 32px); margin: 0; }
.vb-bprofil > div { min-width: 0; }
.vb-bprofil dt {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
}
.vb-bprofil dd { margin: 0; font-size: 14px; line-height: 1.5; }
.vb-swatch-row.is-klein { gap: 6px; margin-top: 8px; }
.vb-swatch-row.is-klein .vb-swatch i { width: 20px; height: 20px; }

.vb-exec-rechts { min-width: 0; display: grid; gap: 0; align-content: start; }
/* Premium-Polish §15/§23: vier gleich grosse Kacheln mit eigener Flaeche
   waren vier gleich wichtige Zahlen — genau das Gegenteil von Hierarchie.
   Jetzt eine Liste ohne Kartenflaeche (Typografie traegt die Struktur, nicht
   der Rahmen), Follower gesamt als Kopfzahl klar groesser, der Rest ruhiger
   darunter. Trennlinien statt Kartenkanten. */
.vb-exec-kpis { list-style: none; margin: 0; padding: 0; }
.vb-exec-kpis li {
  display: flex; align-items: center; gap: 14px; padding: var(--sp-4, 16px) 2px;
  border-bottom: 1px solid var(--border-soft);
}
.vb-exec-kpis li:last-child { border-bottom: 0; }
.vb-exec-kpis .vb-sim-ic { flex: none; width: 18px; height: 18px; color: var(--text-dim); }
.vb-exec-kpis li:first-child { padding-top: 2px; }
.vb-exec-kpis li:first-child .vb-sim-ic {
  width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 50%;
  background: rgba(var(--accent-rgb), .12); color: var(--cyan);
}
.vb-exec-kpis b {
  display: block; font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.vb-exec-kpis li:first-child b { font-size: clamp(28px, 3.4vw, 36px); letter-spacing: -.03em; }
.vb-exec-kpis span { font-size: 12.5px; color: var(--text-dim); }
.vb-exec-reife { padding: var(--sp-4, 16px) 2px 0; border-top: 1px solid var(--border-soft); margin-top: var(--sp-2, 8px); }
.vb-exec-reife-r .vb-sring { background: none; border: 0; padding: 0; }
@media (max-width: 980px) {
  .vb-exec { grid-template-columns: 1fr; gap: var(--sp-6, 32px); }
}

/* ------------------------------------------------------------- Aufklappbares
   Alles, was frueher ein Absatz war. Zugeklappt eine Frage, aufgeklappt die
   Antwort — da, aber nicht im Weg. */
.vb-mehr { margin: 10px 0 0; }
.vb-mehr > summary {
  cursor: pointer; font-size: 13px; color: var(--text-dim); list-style: none;
  padding: 7px 0; min-height: 34px; display: flex; align-items: center; gap: 6px;
}
.vb-mehr > summary::-webkit-details-marker { display: none; }
.vb-mehr > summary::before { content: "＋"; font-size: 13px; line-height: 1; }
.vb-mehr[open] > summary::before { content: "－"; }
.vb-mehr > summary:hover { color: var(--text); }
.vb-mehr-i { padding: 2px 0 6px; font-size: 13.5px; line-height: 1.65; color: var(--text-dim); }
.vb-mehr-i p { margin: 0 0 8px; }
.vb-mehr-i p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Stufen */
.vb-stufe {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  color: var(--text-dim); padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border-soft); white-space: nowrap;
}
.vb-stufe b { font-weight: 600; color: var(--text); }
.vb-stufe.is-hoch b { color: var(--cyan); }
.vb-stufe.is-gering { opacity: .8; }

/* ------------------------------------------------------------- Chancenmatrix
   Wirkung gegen Aufwand. Die Zone oben links ist die Antwort; die Punkte
   tragen ihre Nummer, die Liste darunter den Namen. Farbe traegt hier nichts
   allein. */
.vb-matrix { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.vb-matrix-f {
  position: relative; aspect-ratio: 1; border-radius: 14px;
  border: 1px solid var(--border-soft); background: var(--panel);
  margin: 0 0 0 26px;
}
/* Die Hilfslinien: zwei Prozentlinien, keine Bilder. */
.vb-matrix-f::before, .vb-matrix-f::after {
  content: ""; position: absolute; background: var(--border-soft);
}
.vb-matrix-f::before { left: 0; right: 0; top: 50%; height: 1px; }
.vb-matrix-f::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.vb-matrix-zone {
  position: absolute; left: 0; top: 0; width: 50%; height: 50%;
  background: rgba(var(--accent-rgb), .10); border-radius: 13px 0 0 0;
}
.vb-matrix-zt {
  position: absolute; left: 10px; top: 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cyan);
}
.vb-matrix-p {
  position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--cyan); color: var(--on-accent);
  font-size: 12px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.vb-matrix-p i { font-style: normal; }
.vb-matrix-y, .vb-matrix-x {
  position: absolute; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
}
.vb-matrix-y { left: -26px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
.vb-matrix-x { bottom: -20px; left: 50%; transform: translateX(-50%); }
.vb-matrix-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vb-matrix-l li { display: grid; grid-template-columns: 28px 1fr; gap: 11px; min-width: 0; }
.vb-matrix-l i {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--cyan); color: var(--on-accent); font-style: normal;
  font-size: 12px; font-weight: 600;
}
.vb-matrix-l b { display: block; font-size: 14.5px; font-weight: 600; }
.vb-matrix-l small { display: block; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); margin: 3px 0 6px; }
.vb-matrix-pl { display: inline-block; font-size: 11.5px; color: var(--text-dim); margin-left: 6px; }
.vb-matrix-st { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------- Ist gegen Soll */
.vb-mix { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; }
.vb-mix-pfeil {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--inset); border: 1px solid var(--panel-border); color: var(--cyan);
}
.vb-mix-pfeil svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .vb-mix { grid-template-columns: 1fr; justify-items: center; }
  .vb-mix-pfeil { transform: rotate(90deg); }
}
/* §Inhaltsmischung Cards: vorher hatte nur der Leer-Zustand eine Kartenoptik
   (gestrichelter Rahmen) — der Normalfall mit Ringdiagramm stand ohne
   Flaeche, Rand oder Radius flach im Raster. Beide Zustaende jetzt als
   gleich schwere Innenkarte, verschachtelt in die aeussere `.vb-card`
   (deshalb `--inset`, nicht `--panel`: eine zweite `--panel`-Flaeche in der
   ersten waere kaum unterscheidbar). */
.vb-mix-s {
  min-width: 0; padding: 20px 22px; border-radius: 16px;
  background: var(--inset); border: 1px solid var(--panel-border);
}
.vb-mix-s > .vb-mini-h { font-size: 12.5px; letter-spacing: .08em; color: var(--text); }
.vb-mix-s.is-leer {
  display: grid; align-content: start; gap: 8px;
  border-style: dashed;
}
.vb-mix-d { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.vb-delta {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px;
  border-radius: 999px; font-size: 13px; border: 1px solid var(--border-soft);
}
.vb-delta b { font-family: var(--font-display); font-weight: 600; }
.vb-delta.is-plus { border-color: rgba(var(--accent-rgb), .42); }
.vb-delta.is-plus b { color: var(--cyan); }
.vb-delta.is-minus { opacity: .82; }

/* ============================================================ NEXT BEST VIDEO
   Der wichtigste Bereich des Berichts. Er darf gross sein. */
.vb-nbv-h {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; margin-bottom: 14px; color: var(--cyan);
}
.vb-nbv-h .vb-sim-ic { color: var(--cyan); width: 17px; height: 17px; }
/* §30/§31: einer der groessten visuellen Bereiche des ganzen Berichts —
   breitere linke Spalte fuer Titel/Hook, deutlich groessere Frames rechts
   statt kleiner Thumbnail-Karten. */
/* Premium-Polish §17: die Frames sind das Ergebnis, das Kopfspalte nur der
   Rahmen dazu — vorher 440px:1fr, jetzt deutlich zugunsten der Frames
   verschoben, damit sie tatsächlich der groesste Bereich im ganzen Bericht
   sind, nicht nur behauptet. */
/* Das Briefing ist jetzt eine waagerechte Kopfzeile ueber der Bildfolge:
   Titel und Etiketten links, Hook und Begruendung rechts. Gestapelt war es
   eine schmale Textspalte neben einer Daumennagelleiste. */
.vb-nbv {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-5, 24px) var(--sp-7, 48px);
  align-items: center; padding: var(--sp-6, 32px); border-radius: 26px;
  background: rgba(var(--accent-rgb), .06); margin-bottom: 0;
}
.vb-nbv-kopf { min-width: 0; display: contents; }
.vb-nbv-kopf > h4 { grid-column: 1; margin: 0 0 12px; }
.vb-nbv-meta { grid-column: 1; }
.vb-nbv-hook { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.vb-nbv-warum { grid-column: 2; }
.vb-nbv-btns { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .vb-nbv { grid-template-columns: minmax(0, 1fr); }
  .vb-nbv-kopf > h4, .vb-nbv-meta, .vb-nbv-hook, .vb-nbv-warum, .vb-nbv-btns {
    grid-column: 1; grid-row: auto;
  }
}
.vb-nbv-kopf h4 {
  font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 36px); font-weight: 600;
  letter-spacing: -.025em; margin: 0 0 16px; line-height: 1.12;
}
.vb-nbv-meta { margin-bottom: 18px; }
.vb-nbv-hook {
  margin: 0 0 16px; padding: 18px 20px; border-radius: var(--r-sm, 12px);
  background: var(--panel-2); font-family: var(--font-display); font-size: 19px; line-height: 1.42;
}
.vb-nbv-hook span {
  display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px;
}
.vb-nbv-warum { margin: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--text-dim); }
.vb-nbv-btns { display: flex; flex-wrap: wrap; gap: 10px; }
/* §35: die Bildfolge ist eine eigene Reihe ueber die volle Inhaltsbreite,
   nicht mehr eine Scrollleiste in der rechten Spalte des Briefings. Vier
   Frames nebeneinander, jeder rund 280 px breit und damit im 9:16-Format
   rund 500 px hoch — das Creative traegt den Abschnitt, nicht der Text. */
.vb-nbv-reihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4, 16px); margin-top: var(--sp-4, 16px);
}
.vb-nbv-key { min-width: 0; }
.vb-nbv-key .vb-frame { margin: 0; }

/* Animatic: der laufende Frame tritt hervor. Kein gerendertes Video — nur die
   Reihenfolge und ihr Timing. */
.vb-nbv-reihe.is-spielt .vb-frame { opacity: .32; transition: opacity .3s, transform .3s; }
.vb-nbv-reihe.is-spielt .vb-frame.is-an { opacity: 1; transform: scale(1.03); }
.vb-frame.is-an .vb-bild-flaeche { box-shadow: 0 0 0 2px var(--cyan); }

/* ------------------------------------------------ Frames in echten Formaten */
.vb-frame.is-4x5 .vb-bild-flaeche { aspect-ratio: 4 / 5; }
.vb-frame.is-1x1 .vb-bild-flaeche { aspect-ratio: 1; }
.vb-frame .vb-bild-flaeche { position: relative; overflow: hidden; border-radius: 12px; }

/* Das Overlay traegt den ECHTEN Text in der Hausschrift. Ins Bildmodell geht
   nie Schrift — es erfindet sonst Buchstaben. Begruendung steht in
   netlify/functions/lib/blueprint-schema.mjs. */
.vb-ov {
  position: absolute; left: 10px; right: 10px; z-index: 2;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  line-height: 1.25; letter-spacing: -.01em; text-align: center;
  color: var(--on-media); text-wrap: balance;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .9);
}
.vb-ov.is-oben { top: 12px; }
.vb-ov.is-mitte { top: 50%; transform: translateY(-50%); }
.vb-ov.is-unten { bottom: 12px; }

/* ----------------------------------------------------------- Kreativrouten */
.vb-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3, 12px); margin-bottom: var(--sp-5, 24px); }
/* §34: kein Bild im Tab (Bilder werden erst nach der Auswahl erzeugt und
   koennten hier veralten) — die Richtung bekommt stattdessen eine feste
   Akzentfarbe aus der Diagrammpalette als Stimmungsflaeche, wie ein
   Moodboard-Swatch. Reihenfolge folgt der Route in `e.creativeRoutes`. */
.vb-route {
  display: grid; gap: 6px; justify-items: start; text-align: left; min-width: 0;
  padding: 17px 17px 15px; border-radius: var(--r-md, 18px); border: 1px solid var(--border-soft);
  border-top: 3px solid var(--route-akzent, var(--border-soft));
  background: var(--panel); cursor: pointer; color: inherit;
  transition: border-color .18s, background .18s, transform .18s;
}
.vb-route:nth-of-type(1) { --route-akzent: var(--viz-1); }
.vb-route:nth-of-type(2) { --route-akzent: var(--viz-2); }
.vb-route:nth-of-type(3) { --route-akzent: var(--viz-3); }
.vb-route:nth-of-type(4) { --route-akzent: var(--viz-4); }
.vb-route:hover { border-color: rgba(var(--accent-rgb), .40); transform: translateY(-1px); }
.vb-route.is-aktiv { border-color: var(--cyan); border-top-color: var(--cyan); background: rgba(var(--accent-rgb), .07); }
.vb-route b { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; }
.vb-route small { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); margin-bottom: 2px; }
.vb-route .vb-chips { margin-top: 2px; }
/* Die zwei Frames einer Route standen unter dem Text und liessen zwei
   Drittel der Breite leer. Jetzt: Begruendung und Auswahl links, die beiden
   Frames rechts daneben — dieselbe Information, rund 200 px weniger hoch. */
.vb-route-p {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 14px var(--sp-6, 32px); align-items: start;
}
.vb-route-p > .vb-route-f { grid-column: 2; grid-row: 1 / span 2; }
.vb-route-p > .vb-route-e { grid-column: 1; }
.vb-route-p > .vb-route-w { grid-column: 1; align-self: start; }
@media (max-width: 760px) {
  .vb-route-p { grid-template-columns: minmax(0, 1fr); }
  .vb-route-p > .vb-route-f, .vb-route-p > .vb-route-e, .vb-route-p > .vb-route-w {
    grid-column: 1; grid-row: auto;
  }
}
/* Die zwei Routen-Frames sind Vorschauen, nicht das Hauptbild — gedeckelt,
   damit neben ihnen keine 200 px leere Spalte entstehen. */
.vb-route-p .vb-route-f .vb-bild-flaeche { max-height: 220px; }
.vb-sb-fuss {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4, 16px) var(--sp-6, 32px); align-items: start; margin-top: var(--sp-4, 16px);
}
.vb-route-e { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
/* Auch hier `auto-fill`: bei `auto-fit` dehnen sich die zwei Frames einer
   Route auf je 600 px, und ein 9:16-Frame wird damit ueber 1000 px hoch. Die
   Route allein waere dann laenger als der halbe Bericht. */
.vb-route-f { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.vb-route-w { justify-self: start; }
.vb-route-w.is-gewaehlt { border-color: var(--cyan); color: var(--cyan); }

/* --------------------------------------------------------- Beste Beitraege */
/* `auto-fill`, nicht `auto-fit`. Bei `auto-fit` fallen leere Spuren weg und
   die drei Karten dehnen sich auf je 400 px — das Vorschaubild wurde dadurch
   500 px hoch und der Abschnitt doppelt so lang wie noetig. `auto-fill` laesst
   die leeren Spuren stehen und die Karten behalten ihr Mass. */
.vb-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4, 16px); }
.vb-topi {
  display: grid; gap: 0; min-width: 0; border-radius: 14px; overflow: hidden;
  background: var(--panel); transition: transform var(--dur-fast), background var(--dur-fast);
}
.vb-topi:hover { transform: translateY(-2px); background: var(--panel-2); }
.vb-topi:hover .vb-topi-b img { transform: scale(1.035); }
.vb-topi-b img { transition: transform var(--dur-base); }
/* Quadratisch statt 4:5. Ein Analysewerkzeug zeigt Vorschauen zum Erkennen,
   nicht zum Ansehen — und 4:5 machte die Karte ein Drittel hoeher. */
/* Quadratisch bleibt richtig (Instagram-Raster), aber gedeckelt: bei drei
   Karten auf voller Breite wurde das Vorschaubild 380 px hoch und die Reihe
   allein 570 px — fuer drei Beitraege, die man wiedererkennen, nicht
   ansehen soll. */
.vb-topi-b { position: relative; aspect-ratio: 1; max-height: 260px; background: var(--panel); }
.vb-topi-b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-topi-leer { width: 100%; height: 100%; background: var(--border-soft); }
.vb-topi-p {
  position: absolute; left: 10px; top: 10px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 7px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vb-topi-tx { padding: 13px; min-width: 0; display: grid; gap: 9px; justify-items: start; }
.vb-topi-z { display: flex; flex-wrap: wrap; gap: 14px; }
.vb-topi-z b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.vb-topi-z span { display: block; font-size: 11px; color: var(--text-dim); }
.vb-topi-t { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }
.vb-topi-tx a { font-size: 12.5px; }

/* ------------------------------------------------------- Kanaele und Rollen */
.vb-plat.is-primaer { border-color: rgba(var(--accent-rgb), .36); background: rgba(var(--accent-rgb), .055); }
.vb-plat.is-gelegenheit, .vb-plat.is-zweitverwertung { opacity: .86; }
.vb-plat > div { min-width: 0; }
.vb-plat-r {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-dim); margin: 3px 0;
}
.vb-plat.is-primaer .vb-plat-r { color: var(--cyan); }
.vb-plat-m { display: block; font-size: 12px; color: var(--text-dim); }
.vb-plat small { display: block; font-size: 13px; line-height: 1.55; color: var(--text-dim); margin-top: 7px; }
.vb-kanal-fund {
  margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: var(--cyan);
}

/* ---------------------------------------------------- LinkedIn-Verbindung */
a.vb-kanal-li {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 9px 14px; min-height: 36px; border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), .34); background: rgba(var(--accent-rgb), .07);
  color: var(--cyan); font-size: 13px; font-weight: 500; text-decoration: none;
}
a.vb-kanal-li:hover { background: rgba(var(--accent-rgb), .13); }
p.vb-kanal-li.is-an {
  margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
}
p.vb-kanal-li.is-an .vb-punkt { flex: none; }
.vb-kanal-li-trennen {
  background: none; border: none; padding: 4px 2px; cursor: pointer;
  color: var(--text-dim); text-decoration: underline; font: inherit; font-size: 12px;
  min-height: 32px;
}
.vb-kanal-li-trennen:hover { color: var(--text); }
.vb-kanal-li-trennen:disabled { opacity: .5; pointer-events: none; }

/* ------------------------------------------------------------ Wochenplan */
.vb-woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.vb-tag {
  min-width: 0; padding: 11px 8px; border-radius: 11px; text-align: center;
  border: 1px solid var(--border-soft); background: var(--panel);
}
.vb-tag.is-belegt { border-color: rgba(var(--accent-rgb), .40); background: rgba(var(--accent-rgb), .07); }
.vb-tag-n {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim);
}
.vb-tag b { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.35; }
.vb-rhythmus-e { margin: 14px 0 0; font-size: 14px; }
.vb-rhythmus-e span { color: var(--text-dim); }

/* ------------------------------------------------------------- Storyboard */
.vb-sb-meta { margin-bottom: 14px; }
.vb-zeit { display: flex; gap: 2px; margin: 0 0 18px; }
.vb-zeit-s {
  min-width: 0; height: 30px; border-radius: 6px; display: grid; align-items: center;
  padding: 0 7px; overflow: hidden;
}
.vb-zeit-s i {
  font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: var(--on-accent);
}
/* §35: Desktop nebeneinander statt endlos untereinander — dieselbe
   Wisch-Leiste wie die Next-Best-Video-Frames, jede Szene eine feste
   Kartenbreite. Auf dem Telefon (Breakpoint unten) wieder eine Spalte,
   damit nichts seitlich abgeschnitten wird, wo Platz sowieso fehlt. */
.vb-board {
  list-style: none; margin: 0; padding: 0 0 8px; display: flex; gap: var(--sp-4, 16px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
}
.vb-szene {
  flex: 0 0 280px; scroll-snap-align: start; min-width: 0; padding: var(--sp-4, 16px) var(--sp-5, 24px);
  border-radius: var(--r-md, 18px); border: 1px solid var(--border-soft); background: var(--panel);
}
.vb-szene-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 9px; }
.vb-szene-n {
  width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center;
  border-radius: 7px; background: var(--border-soft); font-size: 12px; font-weight: 600;
}
.vb-szene-t { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.vb-szene-z {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cyan);
}
.vb-szene-b { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.vb-szene-v, .vb-szene-o { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; }
.vb-szene-v span, .vb-szene-o span {
  display: inline-block; min-width: 68px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
}
.vb-szene-o { color: var(--text-dim); }
.vb-skript { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--panel); font-size: 14px; line-height: 1.7; }
.vb-sb-cta { margin: 14px 0 0; font-size: 14px; }
.vb-sb-cta span {
  display: inline-block; min-width: 68px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
}
/* Ohne Cyan-Balken an der linken Kante — dieselbe Entscheidung wie bei
   `.vb-cmx-k`: der Look A verbietet Neon-Raender auf Inhalt, und die Karte
   traegt ihr Gewicht ohnehin ueber Flaeche und Displayschrift. */
.vb-hook-p {
  margin: 0; padding: 18px 20px; border-radius: 14px;
  background: var(--panel-2); font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 21px); font-weight: 600; line-height: 1.35; letter-spacing: -.01em;
}


/* -------------------------------------------------- Produktionsreife, Lücken */
.vb-reife { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.vb-reife-s { min-width: 0; padding: 16px; border-radius: 14px; border: 1px solid var(--border-soft); background: var(--panel); }
.vb-reife-s ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vb-reife-s li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; }
.vb-reife-s li::before { position: absolute; left: 0; top: 0; font-size: 13px; }
.vb-reife-s.is-ja li::before { content: "✓"; color: var(--cyan); }
.vb-reife-s.is-offen li::before { content: "○"; color: var(--text-dim); }
.vb-luecke { min-width: 0; padding: 15px 16px; border-radius: 13px; border: 1px solid var(--border-soft); background: var(--panel); }
.vb-luecke-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.vb-luecke-k > b { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.vb-luecke-st { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.vb-luecke p { margin: 0; font-size: 13.5px; line-height: 1.6; }

/* §37: "Diese Woche" als Zeitleiste statt Aufzaehlung — nummerierte Schritte
   nebeneinander mit Verbindungslinie, auf dem Handy untereinander. Eigener
   Klassenname `vb-plan-schritte` (nicht `vb-schritte`), weil Letzteres schon
   den Sektionsabstand auf der Startseite bestimmt und eine Kollision die
   dortige Sektion verschoben haette. */
.vb-plan-schritte {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 0;
  counter-reset: vbplan;
}
.vb-plan-schritte li {
  counter-increment: vbplan; position: relative; flex: 1 1 0; min-width: 0;
  padding: 0 var(--sp-4, 16px) 0 0; font-size: 13.5px; line-height: 1.55;
}
.vb-plan-schritte li::before {
  content: counter(vbplan, decimal-leading-zero);
  display: block; margin-bottom: 10px; font-family: var(--font-display);
  font-size: 13px; font-weight: 600; color: var(--cyan); letter-spacing: .02em;
}
.vb-plan-schritte li:not(:last-child)::after {
  content: ""; position: absolute; top: 6px; left: calc(100% - var(--sp-4, 16px) + 6px);
  width: calc(var(--sp-4, 16px) - 12px); height: 1px; background: var(--border-strong);
}
@media (max-width: 640px) {
  .vb-plan-schritte { flex-direction: column; gap: var(--sp-4, 16px); }
  .vb-plan-schritte li { padding-right: 0; }
  .vb-plan-schritte li:not(:last-child)::after { display: none; }
}

/* ------------------------------------------------------------ Teilen-Block */
.vb-teilen { margin: 40px 0 0; padding: 26px; border-radius: 18px; border: 1px solid var(--border-soft); background: var(--panel); }
.vb-teilen h2 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 0 0 7px; }
.vb-teilen p { margin: 0 0 16px; font-size: 14px; color: var(--text-dim); }
.vb-teilen-l { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.vb-teilen-l input {
  flex: 1 1 260px; min-width: 0; min-height: 44px; padding: 0 14px;
  border-radius: 11px; border: 1px solid var(--border-soft);
  background: var(--bg); color: var(--text); font-size: 13.5px;
}
.vb-teilen-b { display: flex; flex-wrap: wrap; gap: 9px; }
.vb-quellen { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.vb-quellen li { font-size: 13px; line-height: 1.5; color: var(--text-dim); }

/* ------------------------------------------------------------- Kleinigkeiten */
.vb-kpi-v.is-wort { font-size: clamp(16px, 2.2vw, 20px); }
.vb-chip.is-klein { font-size: 11.5px; padding: 3px 9px; }
.vb-idee-m { display: block; margin-top: 6px; font-size: 12px; color: var(--text-dim); }

/* ======================================================================
   SCHMALE BILDSCHIRME
   Gepruefte Breite ist 390 × 844. Keine Tippflaeche unter 44 px, kein Text
   unter 11 px, kein waagerechter Ueberlauf.
   ====================================================================== */
@media (max-width: 860px) {
  .vb-nbv { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .vb-matrix { grid-template-columns: 1fr; gap: 34px; }
  .vb-matrix-f { max-width: 320px; margin-left: 26px; }
}
@media (max-width: 560px) {
  .vb-sect { padding: 30px 0 6px; }
  .vb-msnap > div { grid-template-columns: 1fr; gap: 5px; }
  .vb-srings { grid-template-columns: 1fr; }
  .vb-woche { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Storyboard, Routen und Top-Beitraege wandern ins Wischen — gestapelt
     waeren es auf dem Telefon zwei Bildschirmlaengen, bevor der naechste
     Abschnitt beginnt. §56: horizontales Wischen statt Turm aus Karten. */
  .vb-route-f { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-top {
    display: flex; grid-template-columns: none; overflow-x: auto; gap: var(--sp-3, 12px);
    scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--seite-rand, 20px));
    padding: 0 var(--seite-rand, 20px);
  }
  .vb-topi { flex: 0 0 240px; scroll-snap-align: start; }
  .vb-nbv-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-rnav a { padding: 14px 12px; font-size: 13px; }
}

/* ======================================================================
   BEWEGUNG ABGESTELLT
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vb-nbv-reihe.is-spielt .vb-frame,
  .vb-nbv-reihe.is-spielt .vb-frame.is-an { opacity: 1; transform: none; transition: none; }
  .vb-rnav a { transition: none; }
}

/* ======================================================================
   CONTENT GROWTH SIMULATOR

   DREI SZENARIEN, DREI FARBEN (§1, §9) — Abkehr vom Ein-Band-Layout vom
   20.09.2026 vormittags. Der Auftrag verlangt drei UNTERSCHEIDBARE,
   benannte Plaene, keine Quantile einer einzelnen Messung. `--viz-2`
   Konservativ, `--viz-1` Basis, `--viz-3` Optimistisch — als Dreiersatz
   gegen beide Themes durch den dataviz-Validator gelaufen, alle sechs
   Pruefungen bestanden; das naechstliegende Paar liegt bei ΔE 8–9 und
   verlangt Zweitkennzeichnung — Legende und Tooltip nennen jede Linie
   beim Namen, Farbe traegt es nie allein. „Heute" ist kein viertes
   Szenario, sondern ein Vergleichswert: neutral gestrichelt.

   WENIGER RAHMEN, MEHR DICHTE (§9): Karten heben sich über Flaeche und
   Abstand voneinander ab, nicht über harte Kanten — Rahmen bleibt haar-
   fein und nur dort, wo eine Karte sich sonst nicht vom Grund loest.
   ====================================================================== */
.vb-sim { display: grid; gap: 26px; }

.vb-sim-kopf { display: flex; align-items: baseline; gap: 8px; }
.vb-sim-titel {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(19px, 2.6vw, 23px); letter-spacing: -.01em;
}

/* ------------------------------------------------------------ Steuerleiste */
.vb-sim-steuer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 28px; align-items: start;
  padding: 20px 22px; border-radius: 18px; background: var(--panel);
}
/* `grid-template-columns: minmax(0, 1fr)` statt gar keiner Angabe: eine
   implizite Spalte ohne eigene Groessenfunktion sizt sich auf den breitesten
   Inhalt (hier `.vb-sim-presets`) und nicht auf den verfuegbaren Platz —
   `min-width: 0` am Rasterkind selbst (`.vb-sim-gruppe`) wirkt nur gegen
   DESSEN eigenen Elternrahmen, nicht gegen die eigene, implizite Spalte
   darin. Gemessen: 68 px Ueberlauf auf dem Telefon, obwohl jedes einzelne
   Kind schon `min-width: 0` trug. */
.vb-sim-gruppe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; min-width: 0; }
.vb-sim-gruppe.is-weit { grid-column: span 2; }
.vb-sim-l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.vb-sim-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--inset); border-radius: 12px; }
/* `flex: 1 1 0` statt `1 1 auto` plus `min-width: 0`: die vier Zeitraeume
   passen damit in EINE Zeile, statt „12 Monate" in eine zweite zu schieben
   und die Leiste unruhig zu machen. */
.vb-sim-tabs button {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid transparent; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--text-dim); font: inherit; font-size: 13.5px; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.vb-sim-tabs button:hover { color: var(--text); }
.vb-sim-tabs button[aria-selected="true"] {
  background: var(--panel-raised); color: var(--text); box-shadow: 0 1px 0 var(--panel-border) inset;
}
.vb-sim-tabs button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.vb-sim-tabs.is-metrik { background: none; padding: 0; gap: 6px; }
.vb-sim-tabs.is-metrik button { flex: 0 0 auto; background: var(--inset); min-height: 44px; padding: 7px 14px; }
.vb-sim-tabs button .vb-pic { width: 16px; height: 16px; }

.vb-sim-freq { display: flex; align-items: center; gap: 10px; }
.vb-sim-step {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--border-strong); background: var(--inset);
  color: var(--text); font-size: 19px; line-height: 1; cursor: pointer;
  transition: border-color var(--dur-fast);
}
.vb-sim-step:hover { border-color: var(--cyan); }
.vb-sim-step:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* §17: eigener Track und Daumen statt der nackten `accent-color` — größer,
   praeziser, sichtbar Teil der Marke statt Browser-Standard. */
.vb-sim-freq input[type="range"] {
  flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: none;
}
/* §18: Die Strecke links vom Daumen ist der eingestellte Wert und wird
   deshalb in der Akzentfarbe gezeigt, rechts davon bleibt sie neutral.
   `--fuell` kommt aus `setzen()` in blueprint.js als Zahl zwischen 0 und 1;
   ohne sie fällt der Balken auf 0 zurück und ist durchgehend grau — das war
   der gemeldete Fehler. Zwei Regeln, weil Chrome und Firefox verschiedene
   Pseudoelemente für denselben Track haben und eine gemeinsame Liste beide
   ungültig machen würde. */
.vb-sim-freq input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--cyan) 0 calc(var(--fuell, 0) * 100%),
    var(--inset) calc(var(--fuell, 0) * 100%) 100%);
}
.vb-sim-freq input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--cyan) 0 calc(var(--fuell, 0) * 100%),
    var(--inset) calc(var(--fuell, 0) * 100%) 100%);
}
.vb-sim-freq input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; margin-top: -9px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cyan); border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5);
  transition: transform var(--dur-fast);
}
.vb-sim-freq input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--bg);
  background: var(--cyan); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5);
  transition: transform var(--dur-fast);
}
.vb-sim-freq input[type="range"]:hover::-webkit-slider-thumb,
.vb-sim-freq input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.vb-sim-freq input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--cyan); outline-offset: 3px;
}
/* Die Tagesangabe steht neben der Wochenzahl, nicht an ihrer Stelle: der
   Schieber rechnet in Wochen, gedacht wird ab einem Beitrag am Tag in Tagen. */
.vb-sim-tag {
  flex: none; font-size: 12px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 62px;
}
.vb-sim-out {
  flex: none; min-width: 34px; text-align: right;
  font-family: var(--font-display); font-size: 21px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* `min-width: 0` ist hier keine Kosmetik: `.vb-sim-presets` ist selbst ein
   Rasterkind (implizites Ein-Spalten-Raster von `.vb-sim-gruppe`) und erbt
   ohne das die automatische Mindestbreite seines Inhalts — auf dem Telefon
   sprengte das die Spur um 68 px, obwohl `flex-wrap: wrap` gesetzt war: das
   Umbrechen half nichts, weil der Behaelter selbst sich nie unter seinen
   Inhalt verschmaelern durfte. Derselbe Fehler wie bei den Rasterkindern im
   Bericht (siehe HANDOVER.md), hier auf eine weitere Ebene angewandt. */
.vb-sim-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; min-width: 0; }
.vb-sim-preset {
  min-height: 44px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border-soft); background: var(--inset);
  color: var(--text-dim); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.vb-sim-preset:hover { color: var(--text); border-color: rgba(var(--accent-rgb), .4); }
.vb-sim-preset[aria-pressed="true"] {
  color: var(--bg); background: var(--cyan); border-color: var(--cyan); font-weight: 600;
}
.vb-sim-preset:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.vb-sim-heute-t { margin: 3px 0 0; font-size: 12.5px; color: var(--text-dim); }
.vb-sim-heute-t b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Kennzahlen
   Groessere Zahl, Icon, Delta gegen heute und eine winzige Verlaufslinie —
   die Karte soll auf einen Blick sagen "mehr/weniger als heute", nicht nur
   "so viel am Ende" (§2). */
/* `auto-fit`, nicht `auto-fill`: bei drei Karten auf 1180 px liess `auto-fill`
   sechs Spuren stehen und die Karten klebten schmal am linken Rand, die halbe
   Reihe blieb leer. Jetzt fuellen sie die Breite wie eine KPI-Zeile in echter
   Dashboard-Software. */
.vb-sim-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4, 16px); }
.vb-sim-kpi {
  position: relative; overflow: hidden; min-width: 0;
  padding: 22px 22px 22px; border-radius: 18px; background: var(--panel);
  display: grid; gap: 7px; align-content: start;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.vb-sim-kpi:hover { background: var(--panel-2); transform: translateY(-1px); }
/* Die Karte zur gewaehlten Kennzahl traegt die Akzentflaeche — sie gehoert
   zum Verlauf, der darunter gezeichnet wird. */
.vb-sim-kpi.is-aktiv {
  background: rgba(var(--accent-rgb), .09);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .22);
}
.vb-sim-kpi.is-aktiv .vb-sim-kpi-kopf .vb-sim-ic { color: var(--cyan); }
.vb-sim-kpi-kopf { display: flex; align-items: center; gap: 8px; color: var(--text-dim); }
.vb-sim-kpi-kopf .vb-sim-ic { color: var(--text-dim); }
.vb-sim-kpi-l { font-size: 12px; letter-spacing: .03em; }
.vb-sim-kpi-n {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.6vw, 38px);
  letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere;
}
.vb-sim-delta {
  justify-self: start; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 2px 9px; border-radius: 999px;
}
.vb-sim-delta small { font-size: 11px; font-weight: 500; color: var(--text-dim); margin-left: 2px; }
.vb-sim-delta.is-plus { color: var(--live); background: rgba(var(--live-rgb), .14); }
.vb-sim-delta.is-minus { color: var(--text-dim); background: var(--inset); }
.vb-sim-spark { position: absolute; right: 14px; bottom: 14px; width: 72px; height: 26px; opacity: .8; }
.vb-sim-spark path { fill: none; stroke: var(--viz-1); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* -------------------------------------------------------------- Symbole */
.vb-sim-ic { display: grid; place-items: center; width: 17px; height: 17px; flex: none; }
.vb-sim-ic svg { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------- Diagramm
   §1, §9: deutlich groesser, weicher Wechsel bei jeder Aenderung. */
.vb-sim-chart { position: relative; margin-top: 4px; }
.vb-sim-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.vb-sim-chart svg:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 8px; }
.vb-sim-gitter { stroke: var(--border-soft); stroke-width: 1; }
.vb-sim-achse { fill: var(--text-dim); font-size: 11px; font-family: var(--font-body); }
.vb-sim-band { fill: var(--viz-1); opacity: .09; }
.vb-sim-l { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--dur-fast), stroke-width var(--dur-fast); }
.vb-sim-l.is-k { stroke: var(--viz-2); }
.vb-sim-l.is-b { stroke: var(--viz-1); stroke-width: 2.75; }
.vb-sim-l.is-o { stroke: var(--viz-3); }
.vb-sim-heute {
  fill: none; stroke: var(--text-dim); stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round;
  transition: opacity var(--dur-fast);
}
.vb-sim-kreuz { stroke: var(--border-strong); stroke-width: 1; }
.vb-sim-punkt { stroke: var(--bg); stroke-width: 2; }
.vb-sim-punkt.is-k { fill: var(--viz-2); }
.vb-sim-punkt.is-b { fill: var(--viz-1); }
.vb-sim-punkt.is-o { fill: var(--viz-3); }
.vb-sim-feld { fill: transparent; cursor: crosshair; }
/* Hervorheben/Dimmen ueber Legende, Szenario-Karten UND Linien hinweg
   (§1, §5, §14) — ein gemeinsamer Zustand auf `[data-sim-line]` und
   `[data-sim-lg]`, dasselbe Muster wie bei der Matrix weiter unten. */
[data-sim-line].is-fokus { stroke-width: 3.5; }
[data-sim-line].is-gedimmt { opacity: .22; }

.vb-sim-tip {
  position: absolute; top: 6px; transform: translateX(-50%);
  background: var(--panel-raised); border: 1px solid var(--panel-border);
  border-radius: 13px; padding: 12px 15px; pointer-events: none;
  display: grid; gap: 3px; min-width: 156px; box-shadow: var(--shadow-md);
}
.vb-sim-tip b { font-size: 13px; }
.vb-sim-tip span { font-size: 11.5px; color: var(--text-dim); margin-bottom: 2px; }
.vb-sim-tip i { font-style: normal; font-size: 12.5px; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.vb-sim-tip i::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vb-sim-tip i.is-k::before { background: var(--viz-2); }
.vb-sim-tip i.is-b::before { background: var(--viz-1); }
.vb-sim-tip i.is-o::before { background: var(--viz-3); }
.vb-sim-tip i.is-b { color: var(--text); font-weight: 600; }
.vb-sim-tip i.is-h { color: var(--text-dim); }
.vb-sim-tip i.is-h::before { background: none; border-top: 2px dashed var(--text-dim); border-radius: 0; width: 8px; height: 0; }

.vb-sim-legende {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: 12.5px;
}
.vb-sim-legende li {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 5px 11px 5px 9px; border-radius: 999px; color: var(--text-dim);
  transition: background var(--dur-fast), opacity var(--dur-fast), color var(--dur-fast);
}
.vb-sim-legende li:hover, .vb-sim-legende li.is-fokus { background: var(--inset); color: var(--text); }
.vb-sim-legende li.is-gedimmt { opacity: .4; }
.vb-sim-legende li:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.vb-sim-legende i { display: block; width: 12px; height: 3px; border-radius: 2px; flex: none; }
.vb-sim-legende li.is-lk i { background: var(--viz-2); }
.vb-sim-legende li.is-lb i { background: var(--viz-1); height: 4px; }
.vb-sim-legende li.is-lo i { background: var(--viz-3); }
.vb-sim-legende li.is-lh i { background: none; height: 0; border-top: 2px dashed var(--text-dim); }

/* ----------------------------------------------------- Hinweise, Szenarien */
.vb-sim-hint { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.vb-sim-hint li {
  font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
  padding-left: 20px; position: relative;
}
.vb-sim-hint li::before { content: "!"; position: absolute; left: 6px; color: var(--warn); }

.vb-sim-sz { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
/* In der schmalen Auswertungsspalte neben dem Chart stehen die drei
   Szenarien untereinander — nebeneinander waeren sie dort 70 px breit. */
.vb-sim-seite { display: grid; gap: var(--sp-4, 16px); align-content: start; }
.vb-sim-seite .vb-sim-sz { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2, 8px); }
.vb-sim-seite .vb-sim-dr { margin: 0; }
.vb-sim-seite .vb-sim-ai { margin: 0; }
/* Chart und Auswertung enden auf derselben Linie: der Chart waechst mit,
   statt unter sich eine leere halbe Panelhoehe stehen zu lassen. Das SVG
   traegt ohnehin `preserveAspectRatio: none` — es skaliert in der Hoehe,
   ohne dass eine Linie falsch wird. */
.vb-sim-haupt { align-items: stretch; }
.vb-sim-haupt > .c8, .vb-sim-haupt > .c4 { display: flex; flex-direction: column; }
.vb-sim-haupt .vb-sim-chart { flex: 1; display: flex; flex-direction: column; min-height: 380px; }
.vb-sim-haupt .vb-sim-chart svg { flex: 1; height: auto; min-height: 340px; }
.vb-sim-trichter-p { margin-top: var(--sp-5, 24px); }
.vb-sim-szk {
  padding: 16px 18px; border-radius: 16px; min-width: 0; text-align: left; cursor: pointer;
  background: var(--panel); border: 0; font: inherit; color: var(--text);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px;
  transition: background var(--dur-fast), opacity var(--dur-fast);
}
.vb-sim-szk i { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; align-self: start; margin-top: 3px; }
.vb-sim-szk.is-k i { background: var(--viz-2); }
.vb-sim-szk.is-b i { background: var(--viz-1); }
.vb-sim-szk.is-o i { background: var(--viz-3); }
.vb-sim-szk span { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.vb-sim-szk b { grid-column: 2; font-family: var(--font-display); font-size: 23px; letter-spacing: -.02em; }
.vb-sim-szk em { grid-column: 2 / -1; font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--text-dim); }
.vb-sim-szk.is-basis { background: var(--panel-2); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3) inset; }
.vb-sim-szk:hover, .vb-sim-szk.is-fokus { background: var(--panel-2); }
.vb-sim-szk.is-gedimmt { opacity: .55; }
.vb-sim-szk:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* §27, §28: Diminishing-Returns-Paar und Atlas Insight nebeneinander statt
   als langer Absatz — zwei Zahlen und ein kurzer Satz, nicht mehr. */
.vb-sim-atlas { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.vb-sim-dr {
  flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: 18px;
  padding: 16px 34px 16px 20px; border-radius: 16px; background: var(--panel);
}
.vb-sim-dr > div { display: grid; gap: 1px; }
.vb-sim-dr b { font-family: var(--font-display); font-size: 21px; letter-spacing: -.02em; }
.vb-sim-dr span { font-size: 11px; color: var(--text-dim); }
.vb-sim-dr .vb-itip-w { position: absolute; top: 10px; right: 10px; }
.vb-sim-ai {
  flex: 1 1 240px; min-width: 0; padding: 16px 20px; border-radius: 16px;
  background: rgba(var(--accent-rgb), .06);
}
.vb-sim-ai span {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 7px;
}
.vb-sim-ai .vb-sim-ic { color: var(--cyan); }
.vb-sim-ai p { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* ---------------------------------------------------------------- Trichter
   §4: Symbol, Karte, Pfeil-Verbinder — die editierbaren Raten bleiben
   genauso erreichbar wie zuvor, nur nicht mehr als nackte Eingabefelder
   zwischen den Karten. */
/* §26 Business Impact Flow: groesser und ruhiger als vorher — die Kette
   Content → Aufrufe → Besuche → Anfragen → Auftraege soll wie ein
   Ergebnis lesbar sein, nicht wie fuenf kleine Formularfelder in einer
   Reihe. Stufenkarten und Verbinder abwechselnd, jede Karte gleich hoch,
   damit die Verbinder auf halber Hoehe sauber andocken. */
.vb-sim-tr { display: flex; align-items: stretch; gap: 0; }
.vb-sim-st {
  flex: 1 1 130px; min-width: 0; padding: var(--sp-5, 24px) var(--sp-3, 12px); border-radius: var(--r-md, 18px);
  background: var(--panel); text-align: center;
  display: grid; gap: 6px; align-content: center; justify-items: center;
}
.vb-sim-st .vb-sim-ic { width: 24px; height: 24px; color: var(--text-dim); margin-bottom: 4px; }
.vb-sim-st b {
  font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600;
  letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums;
}
.vb-sim-st span { font-size: 12.5px; font-weight: 500; }
.vb-sim-st em { font-style: normal; font-size: 11px; letter-spacing: .02em; color: var(--text-dim); }
.vb-sim-st.is-fehlt, .vb-sim-st.is-offen { background: none; border: 1px dashed var(--border-strong); }
.vb-sim-st.is-fehlt b, .vb-sim-st.is-offen b { color: var(--text-dim); }
.vb-sim-st.is-annahme { box-shadow: 0 0 0 1px rgba(var(--indigo-rgb), .32) inset; }

/* Verbinder: Linie – Pfeil-oder-Pille – Linie, damit die Pille sichtbar AM
   Pfad haengt und nicht frei zwischen den Karten schwebt (§30). */
.vb-sim-verbinder { flex: 0 0 auto; display: flex; align-items: center; gap: 0; padding: 0 2px; min-width: 34px; }
.vb-sim-verbinder .vb-sim-lin { flex: 1 1 10px; height: 2px; min-width: 6px; background: var(--border-strong); }
.vb-sim-verbinder > svg { flex: none; width: 14px; height: 14px; color: var(--text-dim); }

/* Die Conversion-Pille (§27–29): EINE Komponente, nie umbrechend. Zahl und
   „%" bilden eine visuelle Einheit (tabular-nums, feste Mindestbreite,
   Prozentzeichen bricht nie um); der Standardannahme-Hinweis steht hinter
   dem Info-Symbol statt als Dauertext daneben — dadurch bleibt die Pille
   auch bei „Deine Annahme" (laenger als „Standardannahme") gleich breit. */
.vb-pille {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.vb-pille-l {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  min-width: 84px; min-height: 40px; padding: 0 12px; flex-shrink: 0;
  background: var(--inset); border: 1px solid var(--border-soft); border-radius: 999px;
  cursor: text; transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.vb-pille-l:hover, .vb-pille-l:focus-within { border-color: rgba(var(--accent-rgb), .45); background: var(--panel-2); }
.vb-pille-l:focus-within { box-shadow: 0 0 0 2px var(--cyan); }
.vb-pille-in {
  width: 34px; min-height: 38px; background: none; border: 0; color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; text-align: right; padding: 0;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.vb-pille-in:focus-visible { outline: none; }
.vb-pille-in::-webkit-outer-spin-button, .vb-pille-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vb-pille-in { -moz-appearance: textfield; }
.vb-pille-pc { flex: none; font-style: normal; font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.vb-pille .vb-itip { width: 32px; height: 32px; margin: 0; }
.vb-pille .vb-itip-p { left: auto; right: 0; }

.vb-sim-disc { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.vb-sim-ann { margin: 0; display: grid; gap: 1px; }
.vb-sim-ann > div {
  display: grid; grid-template-columns: 168px 1fr; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border-soft);
}
.vb-sim-ann dt { font-size: 12px; color: var(--text-dim); }
.vb-sim-ann dd { margin: 0; font-size: 13px; line-height: 1.5; min-width: 0; }

@media (max-width: 720px) {
  .vb-sim-steuer { padding: 17px; }
  .vb-sim-gruppe.is-weit { grid-column: auto; }
  .vb-sim-ann > div { grid-template-columns: 1fr; gap: 2px; }
  /* Der Trichter wird auf dem Telefon zur Liste — nebeneinander waeren die
     Stufen 60 px breit und die Zahlen unlesbar. Die Verbinder drehen sich
     auf die Hochkant-Achse (§29: bleibt ein echter Funnel, kein Zickzack). */
  .vb-sim-tr { display: flex; flex-direction: column; align-items: stretch; }
  .vb-sim-verbinder { flex-direction: column; align-self: center; min-height: 34px; padding: 2px 0; }
  .vb-sim-verbinder .vb-sim-lin { width: 2px; height: auto; min-width: 0; min-height: 6px; }
  .vb-sim-verbinder > svg { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vb-sim-kpi { transition: none; }
  .vb-sim-kpi:hover { transform: none; }
  .vb-sim-l, .vb-sim-heute, [data-sim-line] { transition: none; }
}

/* ======================================================================
   DIE INHALTS-MATRIX (§21, §7)

   Die zweite Matrix des Berichts. Sie sieht der Chancenmatrix aehnlich und
   meint etwas anderes — deshalb eigene Klassen und nicht dieselben mit
   Zusatz: wer `.vb-matrix` anfasst, soll nicht versehentlich diese hier
   mitverbiegen. Die Hover/Klick-Logik selbst steht in `blueprint.js` und
   bleibt unveraendert — hier nur die Flaeche, der Kontrast und der Abstand.

   VIER BESCHRIFTETE ENDEN statt zweier Pfeile. „Educational → Promotional"
   zwingt jeden Leser zu raten, welches Ende welches ist.

   GEFUELLT GEGEN OFFEN ist der eigentliche Unterschied: gefuellt heisst
   belegt, offen heisst empfohlen. Das traegt nicht die Farbe allein — die
   Legende schreibt es aus, und jeder Punkt hat seinen Namen fuer Screenreader.
   ====================================================================== */
/* §18: 400px fest liess die Matrix wie ein Beiwerk neben dem Detailpanel
   wirken. Jetzt ~62/38 — das Analyse-Werkzeug ist die groessere Flaeche,
   mit einer Obergrenze, damit sie auf sehr breiten Bildschirmen nicht
   unfoermig hoch wird (sie ist quadratisch, aspect-ratio:1). */
/* §17: die Matrix ist eine echte Analysefunktion und bekommt den Platz
   dafuer — 65/35 statt einer gedeckelten 640-px-Kachel, Mindesthoehe 460 px
   auf dem Desktop. Vorher war sie ein kleines Quadrat mit viel Luft. */
.vb-cmx { display: grid; grid-template-columns: minmax(0, 65%) minmax(0, 1fr); gap: 26px 32px; align-items: start; }
@media (min-width: 861px) { .vb-cmx-f { min-height: 460px; } }
.vb-cmx-f {
  position: relative; aspect-ratio: 1; border-radius: 22px;
  background: var(--panel);
  background-image:
    linear-gradient(to right, rgba(var(--line-rgb), .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--line-rgb), .07) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
}
/* §34: die vier Ecken subtil benannt, ohne die Punkte zu überdecken — kleine
   Beschriftung tief im Eck, deutlich leiser als jede Datenaussage. */
.vb-cmx-q {
  position: absolute; font-size: 11px; letter-spacing: .03em; color: var(--text-dim);
  opacity: .55; pointer-events: none; max-width: 42%; line-height: 1.3;
}
.vb-cmx-q.is-ol { top: 10px; left: 10px; }
.vb-cmx-q.is-or { top: 10px; right: 10px; text-align: right; }
.vb-cmx-q.is-ul { bottom: 10px; left: 10px; }
.vb-cmx-q.is-ur { bottom: 10px; right: 10px; text-align: right; }
/* Ein Feld, in dem heute nichts liegt und etwas hingehoert. */
.vb-cmx-l {
  position: absolute; width: 32%; height: 32%; border-radius: 10px;
  background: rgba(var(--accent-rgb), .09);
  border: 1px dashed rgba(var(--accent-rgb), .4);
}
/* Die Tippflaeche ist 44 px, der sichtbare Kreis 30. Groessere Kreise wuerden
   im Feld uebereinanderliegen und die Aussage der Matrix verfaelschen — die
   Flaeche darf wachsen, das Zeichen nicht. */
.vb-cmx-p {
  position: absolute; transform: translate(-50%, -50%);
  width: 44px; height: 44px; padding: 0; border: none; background: none;
  display: grid; place-items: center; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--cyan);
}
.vb-cmx-p i {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-style: normal; background: var(--bg); border: 2px solid var(--cyan);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.vb-cmx-p.is-vorhanden i { background: var(--cyan); color: var(--bg); }
.vb-cmx-p:hover i { outline: 2px solid var(--text); outline-offset: 2px; }
.vb-cmx-p:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; border-radius: 50%; }
/* §7: der fokussierte Punkt (Hover ODER Auswahl) hervorgehoben, alle anderen
   gedimmt — Farbe traegt das nicht allein, die Groesse tut es mit. */
.vb-cmx-p.is-fokus i { box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .24); transform: scale(1.16); }
.vb-cmx-p.is-gedimmt { opacity: .3; }
.vb-cmx-p { transition: opacity var(--dur-fast); }
.vb-cmx-a {
  position: absolute; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); white-space: nowrap;
}
.vb-cmx-a.is-o { top: -19px; left: 50%; transform: translateX(-50%); }
.vb-cmx-a.is-u { bottom: -19px; left: 50%; transform: translateX(-50%); }
.vb-cmx-a.is-l { left: 0; bottom: -19px; }
.vb-cmx-a.is-r { right: 0; bottom: -19px; }

/* Redundanz-Fix: Titel und Status standen vorher zweimal da — einmal in
   einer separaten Detailkarte ueber der Liste, noch einmal in der Zeile
   selbst, die per Hervorhebung ohnehin schon zeigte, welcher Punkt gemeint
   war. Jetzt traegt JEDE Zeile ihre Deutung direkt bei sich, zugeklappt bis
   sie per Hover/Fokus/Klick aktiv wird — dieselbe Auf/Zu-Mechanik wie bei
   den Donut-Legenden weiter oben im Bericht, damit sich der Bericht an
   einer Stelle gelernt ueberall gleich verhaelt. Keine zweite Flaeche, keine
   zweite Ueberschrift. */
.vb-cmx-hint { margin: 0 0 8px; font-size: 12.5px; color: var(--text-dim); }
.vb-cmx-lg { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.vb-cmx-lg li {
  padding: 8px 10px; cursor: pointer; border-radius: 10px;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.vb-cmx-lg li:hover, .vb-cmx-lg li.is-fokus { background: var(--panel); }
.vb-cmx-lg li.is-gedimmt { opacity: .45; }
.vb-cmx-lz { display: grid; grid-template-columns: 24px 1fr auto; gap: 9px; align-items: center; min-height: 28px; }
.vb-cmx-lg i {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 11px; font-weight: 600; font-style: normal;
  border: 2px solid var(--cyan); color: var(--cyan);
}
.vb-cmx-lg li.is-vorhanden i { background: var(--cyan); color: var(--bg); }
.vb-cmx-lg b { font-size: 13px; font-weight: 500; min-width: 0; }
.vb-cmx-lz > span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.vb-cmx-k {
  max-height: 0; overflow: hidden; opacity: 0; margin-left: 33px;
  transition: max-height var(--dur-base, .28s) var(--ease-out, ease), opacity var(--dur-fast, .18s) var(--ease-out, ease);
}
.vb-cmx-lg li.is-fokus .vb-cmx-k { max-height: 160px; opacity: 1; margin-top: 6px; }
.vb-cmx-k p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; }
.vb-cmx-k p:last-child { margin-bottom: 0; }
.vb-cmx-beleg { color: var(--text-dim); }
.vb-cmx-beleg span {
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.vb-cmx-note { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); }
.vb-cmx-note span { color: var(--cyan); margin-right: 6px; }

/* Auf schmalen Geraeten stapelt die Matrix. Diese Regeln stehen HIER und nicht
   oben im Abschnitt „Schmale Bildschirme": der steht in der Datei VOR den
   Grundregeln dieser Matrix, und bei gleicher Spezifitaet gewinnt die spaetere
   Regel. Genau das ist am 19.09.2026 passiert — das Matrixfeld war auf dem
   Telefon 1,3 x 1,3 px gross, gemessen, nicht vermutet.
   Das Feld bleibt quadratisch: ein gestauchtes Quadrat verschiebt jeden Punkt
   und macht die Aussage des Bildes falsch. */
@media (max-width: 860px) {
  .vb-cmx { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .vb-cmx-f { grid-row: auto; width: 100%; max-width: 320px; margin: 0 auto 8px; }
}

/* ======================================================================
   NEU ERZEUGEN (§34)

   Vier flache Knoepfe unter dem Teil, den sie betreffen — keine Werkzeugleiste
   am Seitenrand. Der Nutzer soll sehen, WAS sich aendert, bevor er drueckt.
   Waehrend ein Lauf laeuft, ist die ganze Leiste gesperrt: zwei Auftraege fuer
   denselben Teil kosten zweimal und ueberschreiben einander.
   ====================================================================== */
.vb-regen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.vb-regen-b {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 14px;
  background: none; border: 1px solid var(--border-strong); border-radius: 999px;
  color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer;
}
.vb-regen-b:hover:not(:disabled) { color: var(--text); border-color: var(--cyan); }
.vb-regen-b:disabled { opacity: .45; cursor: default; }
.vb-regen-i { font-size: 15px; line-height: 1; }
.vb-regen-m { font-size: 12px; color: var(--text-dim); }
.vb-hook-z { margin: 6px 0 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.vb-hook-alt li.is-aktiv { color: var(--text); }
.vb-hook-alt li.is-aktiv::marker { color: var(--cyan); }

/* ======================================================================
   DER DRUCKBOGEN — ein zweites Dokument, nicht dieselbe Seite in Grau

   §2 und §44 des Auftrags: „NICHT laenger versuchen, den Webreport 1:1 in PDF
   zu drucken." Bis zum 19.09.2026 stand hier genau das — eine lange
   Stilvorlage, die den Bildschirmbericht fuer Papier zurechtbog. Sie ist weg.

   WAS JETZT GEDRUCKT WIRD
   `pdfBauen()` in blueprint.js erzeugt aus denselben Daten ein eigenes
   Dokument: feste Seiten (`.vb-pp`), eigene Kopf- und Fusszeile, keine
   Aufklapper, keine Knoepfe, keine Abspielflaechen. Beim Drucken wird der
   Bildschirmbericht ausgeblendet und dieses Dokument sichtbar. Damit
   erledigen sich die drei Fehler, die mit keiner Regel zu beheben waren:
   zugeklappte `<details>` drucken nicht, leere Audioflaechen hinterlassen
   weisse Kaesten, und der Umbruch faellt mitten in eine Karte.

   DIE SEITENFOLGE steht in `pdfSeiten()`, nicht hier. Eine Seite, deren
   Inhalt fehlt, entsteht gar nicht erst — deshalb sind es acht bis zehn
   Seiten und nicht immer zehn.

   DIE MASSE
   A4 bei 96 dpi sind 794 x 1123 px. Abzueglich der Raender aus `@page`
   bleiben rund 688 x 1002 px Satzspiegel. `.vb-pp` traegt dieses Mass auch
   am Bildschirm, damit `tools/test-flow-browser.js` nachmessen kann, ob eine
   Seite ueberlaeuft — eine uebergelaufene Seite macht jede Seitenzahl
   dahinter falsch.

   FARBEN MUESSEN BLEIBEN
   `print-color-adjust: exact` steht auf den Flaechen, die Bedeutung tragen,
   und NICHT auf dem Wurzelelement — global gesetzt druckt der schwarze
   Seitengrund mit. Die Papierwerte der Token stehen in theme.css unter
   „PAPIER".
   ====================================================================== */

/* Am Bildschirm liegt der Bogen da, wird aber nicht gezeigt. `hidden` statt
   `display:none` waere zu wenig: der Ablauftest misst die Hoehen, und ein
   Element ohne Layout hat keine. Deshalb ausserhalb des Sichtfelds statt weg. */
.vb-pdf {
  position: absolute; left: -10000px; top: 0;
  width: 688px; pointer-events: none;
}

/* ---------------------------------------------------- § 55: Drucktypografie
   Der Bogen hatte zwanzig verschiedene Schriftgrößen — 9,5 / 10 / 10,5 / 11 /
   11,5 / 12 / 12,5 / 13 / 14 / 16 / 21 / 22 / 30 px. Jede Komponente hatte
   sich ihre eigene ausgesucht, meist als verkleinerte Bildschirmgröße. Genau
   das verbietet § 55: Papier ist ein eigenes Medium und braucht eine eigene,
   benannte Skala.

   Acht Stufen in zwei Familien. Der Text trägt die Hierarchie, Zahlen stehen
   daneben in eigener Größe, weil eine Kennzahl kein Satz ist:

     Text   titel  30   Deckblatt
            h      22   Seitenüberschrift
            lead   16   Leitsatz, Hook
            satz   14   Einleitungssatz auf dem Deckblatt
            body   12   Fließtext, Kartentitel
            klein  11   Listen, Meta, Tabellen
            cap  10,5   Bildunterschrift, Etikett, Achse
     Zahl   zahl   21   große Kennzahl, Score
            zahl-s 14   Kennzahl in Karte und Trichter

   Die Werte sind aus dem Bestand gewählt, nicht neu erfunden: die häufigste
   Größe jeder Gruppe gewinnt. Dadurch verschieben sich nur die Ausreißer
   (13 und 12,5 auf 12; 11,5 auf 11; 10 und 9,5 auf 10,5).

   Nach JEDER Änderung hier `pdfSeitenZuHoch` im Ablauftest prüfen: eine
   übergelaufene Seite macht jede Seitenzahl dahinter falsch. */
.vb-pdf {
  --pp-titel: 30px; --pp-h: 22px; --pp-lead: 16px; --pp-satz: 14px;
  --pp-body: 12px; --pp-klein: 11px; --pp-cap: 10.5px;
  --pp-zahl: 21px; --pp-zahl-s: 14px;
}

.vb-pp {
  width: 688px; min-height: 1002px;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: var(--pp-body); line-height: 1.45;
}
.vb-pp + .vb-pp { margin-top: 24px; }
.vb-pp-i { flex: 1 1 auto; padding: 18px 0 14px; }

.vb-pp-k {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 7px; border-bottom: 1px solid var(--border-strong);
  font-size: var(--pp-klein); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
}
.vb-pp-k b { color: var(--text); letter-spacing: normal; text-transform: none; font-size: var(--pp-body); }

.vb-pp-f {
  display: flex; justify-content: space-between; gap: 12px;
  padding-top: 7px; border-top: 1px solid var(--border-strong);
  font-size: var(--pp-klein); color: var(--text-dim);
}

/* --- Deckblattteil der ersten Seite ------------------------------------- */
.vb-pp-titel { padding: 26px 0 18px; border-bottom: 1px solid var(--border-strong); }
.vb-pp-titel h1 {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--pp-titel); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 10px;
}
.vb-pp-quellen { margin: 0 0 4px; font-size: var(--pp-body); color: var(--text); }
.vb-pp-datum { margin: 0; font-size: var(--pp-klein); color: var(--text-dim); }
.vb-pp-satz { margin: 14px 0 0; font-size: var(--pp-satz); line-height: 1.5; }

/* Ohne Cyan-Balken links: der Kasten ist durch seinen umlaufenden Rand schon
   abgegrenzt, der Balken war reine Zutat. */
.vb-pp-antwort {
  margin: 16px 0; padding: 12px 14px;
  border: 1px solid var(--border-strong);
}
.vb-pp-antwort span {
  display: block; font-size: var(--pp-cap); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 4px;
}
.vb-pp-antwort b { display: block; font-size: var(--pp-lead); line-height: 1.25; }
.vb-pp-antwort p { margin: 5px 0 0; font-size: var(--pp-body); color: var(--text-dim); }

/* --- Kennzahlen --------------------------------------------------------- */
.vb-pp-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: 16px 0; background: var(--border-strong);
  border: 1px solid var(--border-strong);
}
.vb-pp-kpis > div { background: var(--bg); padding: 10px 12px; min-width: 0; }
.vb-pp-kpis b {
  display: block; font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--pp-zahl); line-height: 1.1; letter-spacing: -.02em;
}
.vb-pp-kpis span { display: block; font-size: var(--pp-klein); color: var(--text-dim); margin-top: 2px; overflow-wrap: break-word; }

/* --- Punktwerte: Balken statt Ring, zwei Treiber (§35) ------------------ */
.vb-pp-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.vb-pp-score { border: 1px solid var(--border-strong); padding: 10px 12px; break-inside: avoid; }
.vb-pp-score-k { display: flex; align-items: baseline; gap: 7px; }
.vb-pp-score-k b { font-family: var(--font-display, "Space Grotesk", sans-serif); font-size: var(--pp-zahl); }
.vb-pp-score-k span { font-size: var(--pp-klein); color: var(--text-dim); }
.vb-pp-bar { height: 4px; background: var(--border-strong); margin: 7px 0 8px; }
.vb-pp-bar i { display: block; height: 100%; background: var(--cyan); }
.vb-pp-score ul { margin: 0; padding: 0; list-style: none; }
.vb-pp-score li { font-size: var(--pp-klein); padding-left: 13px; position: relative; color: var(--text-dim); }
.vb-pp-score li::before { position: absolute; left: 0; }
.vb-pp-score li.is-ja::before { content: "\2713"; color: var(--cyan); }
.vb-pp-score li.is-nein::before { content: "\25CB"; }

/* --- Beschriftete Paare ------------------------------------------------- */
.vb-pp-dl { margin: 0; }
/* 6 px statt 8: die zusammengelegte Seite „Produktion und Datengrundlage"
   lief am 20.09.2026 mit 1027 px ueber das A4-Mass von 1002. Gekuerzt wurde
   am Zeilenabstand, nicht am Inhalt — zwoelf Paarzeilen zu je 4 px sparen
   genau die fehlenden Pixel. */
.vb-pp-paar {
  display: grid; grid-template-columns: 132px 1fr; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--border-strong); break-inside: avoid;
}
.vb-pp-paar dt { font-size: var(--pp-klein); letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.vb-pp-paar dd { margin: 0; min-width: 0; }
.vb-pp-sw { display: flex; flex-wrap: wrap; gap: 10px; }
.vb-pp-sw i { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; border: 1px solid var(--border-strong); }
.vb-pp-sw small { font-size: var(--pp-cap); color: var(--text-dim); margin-left: 4px; }

.vb-pp-h2 {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--pp-h); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 6px;
}
.vb-pp-h3 {
  font-size: var(--pp-klein); letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim);
  margin: 15px 0 7px; break-after: avoid; page-break-after: avoid;
}
.vb-pp-i > .vb-pp-h3:first-child { margin-top: 0; }
.vb-pp-meta { margin: 0 0 10px; font-size: var(--pp-klein); color: var(--text-dim); }
.vb-pp-leer { font-size: var(--pp-klein); color: var(--text-dim); margin: 8px 0 0; }

/* Hier ging der Cyan-Balken nicht ersatzlos: er war die EINZIGE Abgrenzung
   des Hooks. Auf dem Bildschirm haette eine Flaeche gereicht, auf Papier
   nicht — `--panel` ist im Druck reinweiss (siehe „PAPIER" in theme.css), ein
   Flaechenton waere also unsichtbar, und Hintergruende werfen Browser beim
   Drucken ohnehin gern weg. Ein umlaufender Rand druckt zuverlaessig und
   spricht dieselbe Sprache wie `.vb-pp-antwort` daneben. */
.vb-pp-hook {
  margin: 10px 0; padding: 10px 14px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--pp-lead); line-height: 1.3;
}
.vb-pp-ort, .vb-pp-cta { margin: 8px 0 0; font-size: var(--pp-body); }
.vb-pp-ort span, .vb-pp-cta span {
  display: inline-block; min-width: 76px; font-size: var(--pp-cap); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-dim);
}
.vb-pp-eignung { font-size: var(--pp-body); color: var(--text-dim); margin: 4px 0 10px; }

/* --- Kanäle ------------------------------------------------------------- */
.vb-pp-kanaele { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.vb-pp-kanaele article { border: 1px solid var(--border-strong); padding: 9px 11px; break-inside: avoid; min-width: 0; }
.vb-pp-kanal-k { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.vb-pp-kanal-k .vb-pic { width: 17px; height: 17px; flex: none; }
.vb-pp-kanal-k b { font-size: var(--pp-body); }
.vb-pp-kanal-k span { font-size: var(--pp-klein); color: var(--text-dim); min-width: 0; overflow-wrap: anywhere; }
.vb-pp-kanal-z { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 9px; }
.vb-pp-kanal-z b { display: block; font-size: var(--pp-zahl-s); }
.vb-pp-kanal-z span { display: block; font-size: var(--pp-cap); color: var(--text-dim); overflow-wrap: break-word; }

/* --- Beste Beiträge, mit gestalteter Ersatzkarte (§47) ------------------ */
.vb-pp-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.vb-pp-topi { border: 1px solid var(--border-strong); break-inside: avoid; min-width: 0; }
.vb-pp-topb {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--panel); display: flex; align-items: center; justify-content: center;
}
.vb-pp-topb img { width: 100%; height: 100%; object-fit: cover; }
.vb-pp-topb.is-ohne { flex-direction: column; gap: 8px; border-bottom: 1px solid var(--border-strong); }
.vb-pp-topb.is-ohne .vb-pic { width: 30px; height: 30px; }
.vb-pp-topf { font-size: var(--pp-cap); letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
.vb-pp-topz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 7px 8px 0; }
.vb-pp-topz b { display: block; font-size: var(--pp-body); }
.vb-pp-topz span { display: block; font-size: var(--pp-cap); color: var(--text-dim); }
.vb-pp-topi p { margin: 5px 8px 8px; font-size: var(--pp-cap); color: var(--text-dim); }

/* --- Frames ------------------------------------------------------------- */
.vb-pp-frames { display: grid; gap: 9px; margin-top: 12px; }
.vb-pp-frames.is-hoch { grid-template-columns: repeat(5, 1fr); }
.vb-pp-frames.is-quer { grid-template-columns: repeat(3, 1fr); }
.vb-pp-frames figure { margin: 0; break-inside: avoid; min-width: 0; }
.vb-pp-fb {
  position: relative; overflow: hidden; background: var(--panel);
  display: flex; align-items: center; justify-content: center;
}
.vb-pp-frames.is-hoch .vb-pp-fb { aspect-ratio: 9 / 16; }
.vb-pp-frames.is-quer .vb-pp-fb { aspect-ratio: 16 / 9; }
.vb-pp-fb img { width: 100%; height: 100%; object-fit: cover; }
.vb-pp-fb-ohne { font-size: var(--pp-cap); color: var(--text-dim); }
/* §43: ein eigenes Band UNTER dem Bild, nicht darauf. Lag der Text auf der
   Szene und hatte das Bildmodell entgegen der Anweisung doch Buchstaben
   hineingebacken, las man im PDF zwei Texte uebereinander. Auf dem Bildschirm
   faellt das kaum auf, gedruckt ist es unlesbar. */
.vb-pp-ov {
  margin: 5px 0 0; padding: 5px 7px; border-radius: 6px;
  background: var(--inset); font-size: var(--pp-klein); line-height: 1.3;
  display: grid; gap: 1px;
}
.vb-pp-ov span {
  font-size: var(--pp-cap); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}
.vb-pp-frames figcaption { padding-top: 5px; }
.vb-pp-frames figcaption b {
  display: block; font-size: var(--pp-cap); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan);
}
.vb-pp-frames figcaption span { display: block; font-size: var(--pp-cap); color: var(--text-dim); }

.vb-pp-frames-tx { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.vb-pp-frames-tx li {
  display: grid; grid-template-columns: 78px 1fr; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border-strong); break-inside: avoid;
}
.vb-pp-frames-tx b { font-size: var(--pp-cap); letter-spacing: .07em; text-transform: uppercase; color: var(--cyan); }
.vb-pp-frames-tx q { display: block; font-size: var(--pp-klein); color: var(--text-dim); }

/* --- Storyboard als Tabelle -------------------------------------------- */
.vb-pp-sb { width: 100%; border-collapse: collapse; font-size: var(--pp-klein); }
.vb-pp-sb th {
  text-align: left; font-size: var(--pp-cap); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 500; padding: 0 8px 6px 0;
  border-bottom: 1px solid var(--border-strong);
}
.vb-pp-sb td { vertical-align: top; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--border-strong); }
.vb-pp-sb tr { break-inside: avoid; page-break-inside: avoid; }
.vb-pp-sb-t { white-space: nowrap; }
.vb-pp-sb-t span { font-size: var(--pp-cap); letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.vb-pp-sb small { color: var(--text-dim); }
.vb-pp-sb-o { color: var(--text-dim); }

/* --- Listen ------------------------------------------------------------- */
.vb-pp-cmx, .vb-pp-rest, .vb-pp-plats, .vb-pp-ideen, .vb-pp-luecken,
.vb-pp-schritte, .vb-pp-ann { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.vb-pp-cmx li, .vb-pp-rest li, .vb-pp-luecken li, .vb-pp-ideen li, .vb-pp-plats li {
  padding: 7px 0; border-bottom: 1px solid var(--border-strong); break-inside: avoid;
}
.vb-pp-cmx li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.vb-pp-cmx li > span {
  font-size: var(--pp-cap); letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim);
}
.vb-pp-cmx li.is-chance > span { color: var(--cyan); }
.vb-pp-cmx small, .vb-pp-rest span, .vb-pp-luecken small {
  grid-column: 1 / -1; font-size: var(--pp-klein); color: var(--text-dim); display: block;
}

/* --- §53: der statische Chart ------------------------------------------- */
.vb-pp-chart { margin: 14px 0; break-inside: avoid; }
.vb-pp-chart svg { width: 100%; height: 200px; display: block; }
.vb-pp-chart .is-band { fill: var(--viz-1); opacity: .1; }
.vb-pp-chart .is-heute { fill: none; stroke: var(--text-dim); stroke-width: 2; stroke-dasharray: 5 4; }
.vb-pp-chart .is-k { fill: none; stroke: var(--viz-2); stroke-width: 2.25; }
.vb-pp-chart .is-o { fill: none; stroke: var(--viz-3); stroke-width: 2.25; }
.vb-pp-chart .is-b { fill: none; stroke: var(--viz-1); stroke-width: 2.75; }
.vb-pp-clg { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--pp-cap); }
.vb-pp-clg li { position: relative; padding-left: 15px; color: var(--text-dim); }
.vb-pp-clg li::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 3px; border-radius: 2px; }
.vb-pp-clg li.is-k::before { background: var(--viz-2); }
.vb-pp-clg li.is-b::before { background: var(--viz-1); }
.vb-pp-clg li.is-o::before { background: var(--viz-3); }
.vb-pp-clg li.is-h::before { background: none; border-top: 2px dashed var(--text-dim); height: 0; top: 5px; }

/* --- §54: der statische Trichter ----------------------------------------- */
.vb-pp-tr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vb-pp-tr-s {
  flex: 1 1 90px; min-width: 0; text-align: center; padding: 10px 6px;
  background: var(--panel-2); border-radius: 8px;
}
.vb-pp-tr-s b { display: block; font-family: var(--font-display); font-size: var(--pp-zahl-s); }
.vb-pp-tr-s span { display: block; font-size: var(--pp-cap); color: var(--text-dim); margin-top: 1px; }
.vb-pp-tr-v { flex: 0 0 auto; display: grid; justify-items: center; gap: 1px; }
.vb-pp-tr-v i { display: block; width: 14px; height: 1px; background: var(--border-strong); }
.vb-pp-tr-v b { font-size: var(--pp-cap); font-weight: 600; color: var(--text-dim); white-space: nowrap; }
/* §44: Name, Rolle, Mass und Inhalt untereinander. Nebeneinander waren sie
   am Bildschirm 9 px auseinander, beim Herauskopieren aus dem PDF aber
   verschmolzen — die Trennung war nur Layout und kein Zeichen. */
.vb-pp-plats li { display: grid; gap: 2px; }
.vb-pp-plat-k { display: flex; align-items: center; gap: 8px; }
.vb-pp-plats .vb-pic { width: 17px; height: 17px; flex: none; }
.vb-pp-rolle { font-size: var(--pp-cap); letter-spacing: .07em; text-transform: uppercase; color: var(--cyan); }
.vb-pp-plat-m, .vb-pp-plats small { font-size: var(--pp-klein); color: var(--text-dim); }
.vb-pp-ideen { counter-reset: ppi; }
.vb-pp-ideen li { counter-increment: ppi; padding-left: 22px; position: relative; }
.vb-pp-ideen li::before {
  content: counter(ppi); position: absolute; left: 0; top: 7px;
  font-size: var(--pp-klein); color: var(--cyan);
}
.vb-pp-ideen q { display: block; font-size: var(--pp-klein); color: var(--text-dim); }
.vb-pp-ideen li > span { display: block; font-size: var(--pp-cap); color: var(--text-dim); }
.vb-pp-luecken li > span { font-size: var(--pp-cap); letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); display: block; }
.vb-pp-schritte { counter-reset: pps; }
.vb-pp-schritte li {
  counter-increment: pps; padding: 6px 0 6px 24px; position: relative;
  border-bottom: 1px solid var(--border-strong); break-inside: avoid;
}
.vb-pp-schritte li::before { content: counter(pps) "."; position: absolute; left: 0; color: var(--cyan); }
.vb-pp-ann li { padding: 5px 0 5px 14px; position: relative; font-size: var(--pp-klein); color: var(--text-dim); }
.vb-pp-ann li::before { content: "\2022"; position: absolute; left: 0; }
.vb-pp-reife { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.vb-pp-reife ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.vb-pp-reife li { font-size: var(--pp-klein); padding-left: 15px; position: relative; }
.vb-pp-reife li::before { content: "\2713"; position: absolute; left: 0; color: var(--cyan); }
.vb-pp-reife .is-offen li::before { content: "\25CB"; color: var(--text-dim); }
.vb-pp-rhy, .vb-pp-mess { margin: 0; font-size: var(--pp-body); }
.vb-pp-mess { color: var(--text-dim); }

/* Die wiederverwendeten Diagramme im Bogen. Diese Masse stehen NICHT unter
   `@media print`: sonst waere der Bogen am Bildschirm anders gross als auf
   Papier, und die Hoehenmessung in `tools/test-flow-browser.js` — die
   nachweist, dass keine Seite auf ein zweites Blatt laeuft — waere wertlos.
   Sichtbar ist der Bogen am Bildschirm ohnehin nicht. */
.vb-pdf .vb-donut { gap: 12px; }
.vb-pdf .vb-donut svg { width: 96px; height: 96px; }
.vb-pdf .vb-donut-l { font-size: var(--pp-klein); gap: 3px; }
.vb-pdf .vb-donut-l small { display: none; }
.vb-pdf .vb-mix { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vb-pdf .vb-mix-s { gap: 6px; }
.vb-pdf .vb-mix-pfeil { display: none; }
.vb-pdf .vb-matrix { grid-template-columns: 210px 1fr; gap: 16px; }
.vb-pdf .vb-matrix-f { max-width: 210px; }
.vb-pdf .vb-matrix-l { font-size: var(--pp-klein); gap: 2px; }
.vb-pdf .vb-matrix-l li { padding: 5px 0; }
.vb-pdf .vb-matrix-l small { display: none; }
.vb-pdf .vb-balken { gap: 7px; }
.vb-pdf .vb-balken-z { font-size: var(--pp-klein); }
.vb-pdf .vb-mini-h { margin: 12px 0 6px; }
.vb-pdf .vb-delta { font-size: var(--pp-klein); padding: 4px 9px; }

/* Am 19.09.2026 gemessen: Seite 3 lief mit 1148 px und Seite 8 mit 1080 px
   ueber das A4-Mass von 1002 px — beide waeren auf ein zweites Blatt gerutscht
   und haetten jede Seitenzahl dahinter falsch gemacht. Gekuerzt wurde an der
   Darstellung, nicht am Inhalt: quadratische Vorschaubilder statt 4:5,
   flachere Balken, dichtere Listen. */
.vb-pdf .vb-balken-z { gap: 4px 10px; }
.vb-pdf .vb-balken-s { height: 8px; }
/* Gemessen am 21.09.2026: Seite 3 des Druckbogens lief mit 1090 px ueber
   das A4-Mass von 1002 px und haette jede Seitenzahl dahinter falsch
   gemacht. Das quadratische Vorschaubild ist dort der groesste Posten —
   4:3 statt 1:1 nimmt rund 90 px aus der Seite, ohne dass ein Beitrag
   schlechter wiederzuerkennen waere. */
.vb-pdf .vb-pp-topb { aspect-ratio: 3 / 2; }
.vb-pdf .vb-donut svg { width: 84px; height: 84px; }
.vb-pdf .vb-pp-plats li { padding: 5px 0; gap: 2px 9px; }
.vb-pdf .vb-pp-plats small { line-height: 1.35; }
.vb-pdf .vb-pp-ideen li { padding: 4px 0 4px 22px; line-height: 1.32; }
.vb-pdf .vb-pp-ideen q { margin-top: 1px; }

/* ---------------------------------------------------------------- DRUCK */
@media print {
  @page { size: A4; margin: 16mm 14mm; }

  /* Die Papierwerte der Token stehen in theme.css unter „PAPIER". Hier wird
     nur die Flaeche freigeraeumt. */
  :root, .vb, body, .vb-result, .vb-pp { background: none !important; }

  /* Alles, was zum Bildschirm gehoert, verschwindet. Der Bogen ist ein
     eigenes Dokument und braucht davon nichts. */
  #hdr, footer, elevenlabs-convai, .vb-land, .vb-quiz, .vb-preview, .vb-gate,
  .vb-warten, .vb-rhero, .vb-rnav, .vb-sect, .vb-teilen, .vb-upsell {
    display: none !important;
  }

  .vb-result { padding: 0; }
  .vb-result-mount, .wrap, .vb-wide { max-width: none; padding: 0; margin: 0; }

  .vb-pdf { position: static; left: auto; width: auto; pointer-events: auto; }
  .vb-pp {
    width: auto; min-height: 0; margin: 0;
    page-break-after: always; break-after: page;
  }
  .vb-pp:last-child { page-break-after: auto; break-after: auto; }
  .vb-pp + .vb-pp { margin-top: 0; }

  /* Ohne das wirft der Browser Flaechenfarben weg und die Diagramme werden zu
     grauen Ringen ohne Unterscheidung. Steht NUR dort, wo Flaeche Bedeutung
     traegt — nicht auf dem Wurzelelement. */
  .vb-pp-bar i, .vb-pp-fb img, .vb-pp-topb img, .vb-pp-sw i,
  .vb-donut svg, .vb-ring, .vb-dot, .vb-balken-s i,
  .vb-matrix-p, .vb-matrix-l i, .vb-matrix-zone {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* §49: eine Ueberschrift steht nie allein am Seitenende, eine Karte bricht
     nie um. */
  .vb-pp-score, .vb-pp-kanaele article, .vb-pp-topi, .vb-pp-frames figure,
  .vb-pp-paar, .vb-pp-sb tr, .vb-pp-cmx li, .vb-pp-luecken li, .vb-pp-ideen li,
  .vb-pp-plats li, .vb-pp-antwort, .vb-pp-hook, .vb-donut, .vb-matrix-l li,
  .vb-pp-tr-s, .vb-pp-chart {
    break-inside: avoid; page-break-inside: avoid;
  }
  .vb-pp-h2, .vb-pp-h3 { break-after: avoid; page-break-after: avoid; }

  /* §50: keine Browser-Zutaten. Die Kopf- und Fusszeile des Browsers selbst
     (Adresse, Datum) schaltet der Nutzer im Druckdialog ab — darauf hat eine
     Seite keinen Zugriff. Unsere eigene Fusszeile steht auf jeder Seite. */
  a[href]::after { content: ""; }
}

/* ======================================================================
   TIPPFLAECHEN IM BERICHT

   44 px ist die Untergrenze, unter der ein Ziel auf einem Telefon regelmaessig
   verfehlt wird. Beim Umbau auf das Dashboard sind drei Sorten Ziele
   darunter gerutscht, alle im Browser gemessen, nicht geschaetzt:

     .vb-mehr > summary    35 px   (16 Stueck - der haeufigste Klick im Bericht)
     .vb-sring-d summary   29 px
     .vb-play              36 px
     Verweise in Listen    16-21 px

   Die Aufklapper und der Abspielknopf werden ueberall groesser: sie sind
   Bedienelemente, keine Schrift. Die Verweise in Fliesstext und Listen
   bekommen ihre Flaeche ueber Innenabstand MIT negativem Aussenabstand -
   sonst verschiebt sich das Schriftbild, und aus einer Liste wird eine Leiter.
   ====================================================================== */
.vb-mehr > summary { min-height: 44px; }
.vb-sring-d summary { min-height: 44px; display: flex; align-items: center; }
.vb-play { min-height: 44px; }
.vb-fav { min-width: 44px; min-height: 44px; }

/* ======================================================================
   STICKY-CTA AUF DEM TELEFON (§27)

   Derselbe Kniff wie `.lp-sticky` in lp.css/lp.js: erscheint erst, wenn der
   Hero-CTA aus dem Bild ist, und verschwindet wieder, sobald der
   Abschluss-CTA sichtbar wird ODER der Einstieg verlassen ist (die Funnel-
   Schritte danach haben ihre eigene, einzige Handlung — ein zweiter Balken
   daneben wäre eine zweite Aufforderung). Eigener Klassenname, damit sich
   der Zustand nicht mit `.lp-has-sticky` auf anderen Seiten vermischt.

   NUR AUF DEM TELEFON. Auf dem Schreibtisch ist der Haupt-CTA immer im
   ersten Bildschirm oder einen Klick entfernt — ein fester Balken hätte dort
   nichts zu tun ausser Fläche zu kosten.
   ====================================================================== */
.vb-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: var(--overlay); border-top: 1px solid var(--border-strong);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: none; align-items: center; gap: 14px; justify-content: space-between;
  transform: translateY(102%); visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-expo), visibility var(--dur-slow);
}
.vb-sticky-txt { min-width: 0; }
.vb-sticky-txt b {
  display: block; font-family: var(--font-display); font-size: 14.5px; color: var(--text);
  font-weight: 600; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vb-sticky-txt span { font-size: 12px; color: var(--text-dim); }
.vb-sticky .btn { flex: none; padding: 12px 20px; font-size: 14.5px; min-height: 44px; }
@media (max-width: 720px) {
  .vb-sticky { display: flex; }
  .vb-sticky.show { transform: none; visibility: visible; }
  html.vb-has-sticky .vb-schluss { padding-bottom: calc(96px + 64px); }
}

@media (max-width: 720px) {
  /* 13 px statt 12: mit 12 landet die Flaeche je nach Zeilenhoehe bei 43,98 px
     und damit knapp unter der Grenze. Ein Grenzwert, der von einer
     Nachkommastelle abhaengt, ist keiner. */
  .vb-quellen li a,
  .vb-topi-tx a,
  .vb-matrix-l a { display: inline-block; padding: 13px 0; margin: -13px 0; }
  .vb-kanal-kopf a { padding: 13px 0; margin: -13px 0; }
  /* Die Quellenverweise im Berichtskopf. Sie standen schon vorher da und
     waren schon vorher 21 px hoch - aufgefallen ist es erst, als der Bericht
     systematisch durchgemessen wurde. */
  .vb-rquellen a { padding: 12px 0; margin: -12px 0; }
  /* Der Verweis darf seine Zeile nicht sprengen, wenn er lang ist. */
  .vb-quellen li a, .vb-topi-tx a { overflow-wrap: anywhere; }
}