/* Leben-Pass auf der Marke Dibicon. leben.css und leben.js sind unveränderte Kopien der
   Werkstatt-Fassung vom 18.10.2026 (infrastruktur/design-foundation/leben-pass/).
   Diese Datei lädt nach leben.css. Sie bildet die Tokens auf die DESIGN.md ab und regelt die
   Stellen, an denen die Schicht auf das CSS der Seite trifft. */

/* ---------- Tokens aus der DESIGN.md ---------- */
:root{
  --leben-akzent:var(--blau);          /* Electric Blue #003DD4 */
  --leben-akzent-2:var(--blau-h);
  --leben-grund:var(--grund);
  --leben-grund-2:var(--navy);         /* Grund hinter dem Video, wie vorher */
  --leben-karte-grund:var(--karte-bg);
  --leben-dunkel:var(--navy);          /* Deep Navy #000A3A. Stufe 2 und 3 mischt die Schicht mit dem Akzent */
  --leben-radius:var(--r-karte);       /* 24px */
  --kurve:var(--leben-ease);           /* Regel 1: eine Kurve für die ganze Seite */
}

/* ---------- Lichtfeld: Sektionen mit gleichem Grund teilen sich EIN .leben-block ----------
   Erweiterung für diesen Funnel. Auf jeder einzelnen Sektion schneidet overflow:clip die Flecken
   an jeder Weiß-an-Weiß-Kante ab, das zeichnet Streifen quer über die Seite. Die Gruppe trägt den
   Grund, die Sektionen darin werden durchsichtig, sonst decken sie die Flecken zu. */
.lichtfeld{background:var(--grund)}
.lichtfeld-kopf{background:var(--hero-bg)}
/* Unten folgt der Fuß im selben Navy: der dritte Fleck säße auf der Kante und würde abgeschnitten */
.lichtfeld-dunkel{background:var(--dunkel-bg);--leben-fleck-1:.30;--leben-fleck-2:.16;--leben-fleck-3:0;--leben-versatz:-13s}
.lichtfeld > section{background:transparent}
/* Oberfläche C: Angebots-Kopf Navy, ab dem Fragebogen hell. Der Kopf trägt seinen Grund dort selbst. */
html[data-theme="c"] .lichtfeld > .s-hero{background:var(--hero-bg)}

/* Jeder Block endet an einer Kante zu einem anderen Grund. Der dritte Fleck sitzt bei 88 % und wurde dort
   sichtbar abgeschnitten (design-council 18.10.2026: Danke unter den Zitaten, Quiz unter der Tabelle und
   unter dem Prinzip). Dunkle Blöcke schaltet die Werkstatt schon selbst ab. */
.lichtfeld,.worte,.prinzip{--leben-fleck-3:0}

/* Atmung je Block versetzen, nie über :nth-child */
.prinzip{--leben-fleck-farbe:var(--leben-licht);--leben-fleck-1:.24;--leben-fleck-2:.16;--leben-versatz:-7s}
.lichtfeld:not(.lichtfeld-kopf):not(.lichtfeld-dunkel),.worte{--leben-versatz:-13s}
/* FAQ endet in Navy, sonst steht zwischen hellem Verlaufsende und Fuß eine harte Kante */
.fragen{--leben-versatz:-7s;--leben-dunkel-3:var(--leben-dunkel)}

/* Titel-Linie auf Navy und auf dem Verlauf hell, der Akzent ginge dort unter */
.prinzip .leben-titellinie::after,.lichtfeld-dunkel .leben-titellinie::after{background:var(--leben-licht)}

/* ---------- Fallstudien: Ergebnis in der Pille, Zahl und Pfeil bleiben in einer Reihe ---------- */
.fall-zahl .leben-pille{display:inline-flex;color:var(--leben-auf-akzent);padding:8px 16px}
html[data-theme="b"] .fall-name.leben-verlaufstext{background:none;color:inherit}

/* Antwort-Video offen (danke.js setzt html.reel-offen): alles dahinter ist verdeckt. Der Lichtring malt
   sonst jedes Bild neu, WebKit startete Antwort 5 dann zu spät (Danke-Prüfung 18.10.2026: 286 statt 288) */
html.reel-offen .leben-video,html.reel-offen .leben-block::before{animation-play-state:paused}

/* Zitat-Karten der Danke-Seite behalten ihre 8px */
.w-karte{--leben-radius:var(--r-knopf)}

/* ---------- Knöpfe: Verlauf bleibt beim Zeigen, die Seite färbt sonst flach um ---------- */
.knopf.leben-knopf:hover{background:var(--leben-knopf-flaeche)}

/* ---------- Fortschritt als Verlauf: die Balken der Seite setzen ihre Farbe spezifischer ---------- */
.q-balken i.leben-fortschritt{background:linear-gradient(90deg,color-mix(in srgb,var(--gruen) 45%,var(--weiss)),var(--gruen))}
.d-balken i.leben-fortschritt{background:linear-gradient(90deg,var(--leben-licht),var(--leben-akzent))}

/* ---------- FAQ auf Navy: Zeilen ohne Rundung, Frage beim Zeigen hell (Akzent auf Navy hält nur 2,4:1) ---------- */
.faq .leben-faq{border-radius:0}
@media(hover:hover){.leben-dunkel .leben-faq:hover summary{color:var(--leben-licht)}}