/* ============================================================
   MindLaunch · Startseite · DARK COSMIC
   Tiefer Weltraum-Grund, Sternenfeld, Glow-Akzente in Korall/Cyan.
   System-Fonts (nichts wird geladen), Raki steht frei.
   ============================================================ */

/* ---------- Fonts ----------
   Reine System-Fonts: auf jedem Rechner vorhanden, nichts wird geladen
   (kein Google, keine mitgelieferten Schriften). SF Pro / Segoe UI / Roboto.
*/

/* ---------- Tokens ---------- */
:root {
  --space-900: #070A16;
  --space-800: #0B0F1F;   /* Basis */
  --space-700: #10152A;   /* Sektion-Surface */
  --space-600: #161B2E;   /* Karte */
  --space-550: #1C2440;   /* angehobene Karte */

  --ink:        #EDF1FB;  /* primärer Text (hell)  ~14:1 */
  --muted:      #C2CAE0;  /* sekundär ~9:1 */
  --faint:      #8E98B6;  /* kleine Labels ~5:1 */

  --hairline:   rgba(159,179,216,.16);
  --hairline-2: rgba(159,179,216,.10);

  --brand:        #FF6F5E;
  --brand-bright: #FF8A78;  /* Korall-Text auf Dunkel ~6.8:1 */
  --brand-deep:   #D8553F;
  --brand-glow:   rgba(255,111,94,.45);

  --cyan:        #5FE0E8;
  --cyan-bright: #8BEEF3;  /* Cyan-Text ~11:1 */
  --violet:      #8A6BFF;

  --trust:       #54E08B;  /* "richtig"/sicher (Quiz, Privacy) */
  --trust-bright:#7CEBA6;

  /* dunkle, glühende Korall-Fläche (Kinder-Tür) */
  --deep-1:     #8F2C1A;
  --deep-2:     #531608;

  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(.86rem, .83rem + .14vw, .94rem);
  --step-0:  clamp(1rem, .95rem + .24vw, 1.12rem);
  --step-1:  clamp(1.18rem, 1.05rem + .5vw, 1.42rem);
  --step-2:  clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.5rem + 2.1vw, 3.1rem);
  --step-4:  clamp(2.7rem, 1.7rem + 4.3vw, 5.2rem);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --radius:    16px;
  --radius-lg: 26px;
  --pill:      999px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.4);
  --shadow-md: 0 18px 50px -22px rgba(0,0,0,.8);
  --shadow-lg: 0 30px 70px -26px rgba(0,0,0,.85);
  --glow-coral: 0 0 56px -10px var(--brand-glow);
  --inset-line: inset 0 1px 0 rgba(255,255,255,.06);

  --shell: 1140px;
  --gap-section: clamp(var(--s7), 4vw + 3rem, 9rem);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Theme: Akzent Blau statt Korall (Kind wählt) */
body[data-theme="blue"] {
  --brand:        #4C8DFF;
  --brand-bright: #7FB0FF;
  --brand-deep:   #2E6FE0;
  --brand-glow:   rgba(76,141,255,.45);
  --deep-1:       #1F4FA8;
  --deep-2:       #122F66;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); background: var(--space-800); color: var(--ink);
  font-size: var(--step-0); line-height: 1.62; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(255,111,94,.32); color: #fff; }
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--cyan-bright); outline-offset: 3px; border-radius: 10px;
  box-shadow: 0 0 0 6px rgba(7,10,22,.9);
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -.022em; font-weight: 700; text-wrap: balance; }
.display { font-size: var(--step-4); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; }
.display em { font-style: italic; font-weight: 700; color: var(--brand-bright); text-shadow: 0 0 38px var(--brand-glow); }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: clamp(var(--s3), 5vw, var(--s5)); }
.section { padding-block: var(--gap-section); position: relative; }

.kicker {
  display: inline-block; font-size: var(--step--1); font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--brand-bright);
}
.lead { font-size: var(--step-1); color: var(--muted); line-height: 1.5; }
.section-head { max-width: 42ch; margin-bottom: var(--s6); }
.section-head .kicker { margin-bottom: var(--s2); }
.section-head h2 { font-size: var(--step-3); margin-bottom: var(--s3); }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--brand); color: #2a0d07; font-weight: 700; padding: 10px 16px; border-radius: 10px; transition: top .2s var(--ease); }
.skip-link:focus { top: 16px; }

/* ---------- Cosmos-Hintergrund ---------- */
.cosmos {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, #182040 0%, var(--space-800) 42%, var(--space-900) 100%);
}
.nebula { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; mix-blend-mode: screen; }
.nebula-coral { width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; top: -16vw; right: -12vw; background: radial-gradient(circle, rgba(255,111,94,.55), rgba(255,111,94,0) 70%); }
.nebula-cyan { width: 55vw; height: 55vw; max-width: 700px; max-height: 700px; bottom: -18vw; left: -14vw; background: radial-gradient(circle, rgba(95,224,232,.34), rgba(138,107,255,.18) 45%, rgba(95,224,232,0) 72%); }
.starfield { position: absolute; inset: -10%; }
.starfield-far {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 62%, rgba(199,219,255,.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 44% 12%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 78%, rgba(199,219,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 32%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 58%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 92% 22%, rgba(199,219,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 36% 92%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 6%, rgba(199,219,255,.6) 50%, transparent 51%);
  background-repeat: repeat; background-size: 100% 100%; opacity: .7; animation: starDrift 140s linear infinite;
}
.starfield-near {
  background-image:
    radial-gradient(1.8px 1.8px at 18% 42%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 52% 28%, rgba(255,230,210,.95) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 78% 70%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 88% 14%, rgba(190,230,255,.95) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 32% 80%, rgba(255,255,255,.85) 50%, transparent 51%);
  background-repeat: repeat; background-size: 70% 70%; opacity: .9; animation: starTwinkle 5.5s ease-in-out infinite, starDrift 90s linear infinite;
}
.vignette { position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(5,7,15,.55) 100%); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  padding: 13px 24px; border-radius: var(--pill);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.btn-sm { padding: 9px 18px; font-size: var(--step--1); }
.btn-lg { padding: 16px 30px; font-size: var(--step-1); }
.btn-primary { background: var(--brand); color: #2a0d07; box-shadow: var(--glow-coral); }
.btn-primary:hover { background: var(--brand-bright); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0) scale(.985); }
.btn-ghost { background: rgba(255,255,255,.04); color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--cyan); }

/* sekundärer CTA auf Glow-Grund: klar lesbarer ink-Text, sichtbare getönte
   Fläche (kein grauer UA-Default), heller Rand; Hover hebt Rand auf Marke. */
.btn-ghost-bright { background: rgba(255,255,255,.06); color: var(--ink); border-color: rgba(159,179,216,.42); box-shadow: var(--inset-line); }
.btn-ghost-bright:hover { border-color: var(--brand-bright); background: rgba(255,255,255,.1); transform: translateY(-2px); box-shadow: var(--inset-line), 0 0 26px -12px var(--brand-glow); }
.btn-ghost-bright:active { transform: translateY(0) scale(.985); }
.btn-text { font: inherit; font-weight: 650; color: var(--cyan-bright); background: none; border: 0; border-bottom: 2px solid transparent; padding: 0; cursor: pointer; transition: border-color .25s var(--ease), color .2s; }
.btn-text:hover { border-bottom-color: var(--cyan); }
.btn-text-light { color: var(--ink); }
.btn-text-light:hover { border-bottom-color: rgba(255,255,255,.6); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--space-800) 70%, transparent);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--hairline); }
.header-inner { display: flex; align-items: center; gap: var(--s4); height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.18rem; letter-spacing: -.02em; color: var(--ink); }
.brand-mark { height: 30px; width: auto; }
.nav { display: flex; gap: var(--s4); margin-left: auto; }
.nav a { color: var(--muted); font-weight: 500; font-size: var(--step--1); transition: color .2s; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: var(--s3); }
.theme-toggle { position: relative; width: 56px; height: 30px; border-radius: var(--pill); border: 1px solid var(--hairline); background: rgba(255,255,255,.05); cursor: pointer; display: inline-flex; align-items: center; padding: 0 5px; justify-content: space-between; }
.theme-dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-coral { background: #FF6F5E; } .dot-blue { background: #4C8DFF; }
.theme-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease-out), background .3s; }
body[data-theme="blue"] .theme-knob { transform: translateX(26px); }
/* ---------- Mobile-Navigation: Burger-Menü (Button wird per main.js injiziert) ---------- */
.nav-toggle { display: none; }
@media (max-width: 820px) {
  .header-inner { justify-content: space-between; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px;
    border: 1px solid var(--hairline); border-radius: 12px;
    background: rgba(255,255,255,.05); cursor: pointer;
  }
  .nav-toggle .bar {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--ink); transition: transform .25s ease, opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; margin-left: 0;
    background: color-mix(in oklab, var(--space-800) 94%, transparent);
    backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--hairline);
    padding: 6px 0 10px;
    box-shadow: 0 18px 40px -24px rgb(0 0 0 / .6);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px clamp(16px, 6vw, 28px); font-size: 1rem; }
  .nav a:hover, .nav a:active { background: rgba(255,255,255,.06); color: var(--ink); }
}
/* Mittlere Breiten: engerer Nav-Abstand, damit die Reihe einzeilig bleibt (kein Wort-Umbruch). */
@media (min-width: 821px) and (max-width: 1200px) { .nav { gap: 18px; } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(var(--s6), 7vw, var(--s8)) clamp(var(--s5), 5vw, var(--s7)); }
.hero-glow { position: absolute; inset: -20% -8% auto auto; width: min(60vw, 640px); aspect-ratio: 1; z-index: -1; background: radial-gradient(circle at 60% 40%, var(--brand-glow), transparent 64%); filter: blur(20px); opacity: .8; }
.hero-stars { display: none; } /* globales Cosmos-Sternenfeld übernimmt */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(var(--s4), 5vw, var(--s7)); align-items: center; }
.hero-copy .kicker { margin-bottom: var(--s3); display: inline-flex; align-items: center; gap: 9px; }
.hero-copy h1 { margin-bottom: var(--s3); max-width: 13ch; }
.hero-copy .lead { max-width: 42ch; }
.hero-cta { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s5); flex-wrap: wrap; }
.hero-promise { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s4); font-size: var(--step--1); font-weight: 600; color: var(--muted); text-decoration: none; padding: 10px 15px; border: 1px solid var(--hairline); border-radius: var(--pill); background: color-mix(in oklab, var(--space-700) 55%, transparent); max-width: 100%; transition: border-color var(--dur, .25s) var(--ease), background var(--dur, .25s) var(--ease), transform var(--dur, .25s) var(--ease); }
.hero-promise svg { color: var(--trust); flex: none; }
.hero-promise b { color: var(--trust-bright); font-weight: 700; }
.hero-promise-text { min-width: 0; }
.hero-promise-arrow { margin-left: auto; padding-left: 4px; color: var(--trust-bright); flex: none; transition: transform var(--dur, .25s) var(--ease); }
a.hero-promise:hover { border-color: color-mix(in oklab, var(--trust) 50%, var(--hairline)); background: color-mix(in oklab, var(--space-700) 82%, transparent); transform: translateY(-2px); }
a.hero-promise:hover .hero-promise-arrow { transform: translateX(4px); }
a.hero-promise:focus-visible { outline: 2px solid var(--trust); outline-offset: 3px; }

.hero-stage { position: relative; display: grid; place-items: center; }
.hero-stage::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; z-index: 0; background: radial-gradient(circle, var(--brand-glow), transparent 68%); filter: blur(26px); animation: breathe 7s ease-in-out infinite; }
/* Raki frei, kein Kasten/Ei */
.hero-card { position: relative; z-index: 1; background: none; border: 0; padding: 0; box-shadow: none; display: grid; place-items: center; }
.hero-raki { position: relative; z-index: 2; width: clamp(220px, 30vw, 360px); height: auto; margin-inline: auto; filter: drop-shadow(0 18px 34px rgba(0,0,0,.55)); animation: bob 4.5s var(--ease) infinite; }
.hero-note { text-align: center; margin-top: var(--s3); color: var(--muted); font-size: var(--step--1); }
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: var(--s5); }
  .hero-copy h1, .hero-copy .lead { margin-inline: auto; }
  .hero-cta, .hero-promise { justify-content: center; }
  .hero-stage { order: -1; }
}

/* ---------- Orbit-Trennung (Hero ↔ Drei Wege) ---------- */
.orbit-divider {
  position: relative; width: 100%; height: 64px; pointer-events: none; overflow: hidden;
  margin-block: clamp(-1rem, -1vw, -1.6rem) clamp(-0.5rem, -1vw, -1.2rem);
}
/* sehr dezenter Glow-Hauch dahinter */
.orbit-divider::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(50%, 520px); height: 60px; border-radius: 50%;
  background: radial-gradient(ellipse, var(--brand-glow), transparent 70%); opacity: .25; filter: blur(14px);
}
.orbit-line { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--brand); opacity: .45; }
.orbit-sat {
  position: absolute; top: 50%; left: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan-bright); box-shadow: 0 0 10px 2px var(--cyan), 0 0 3px 1px #fff;
  animation: satDrift 16s linear infinite;
}
@keyframes satDrift {
  0% { left: -2%; top: 58%; opacity: 0; }
  12% { opacity: 1; }
  50% { top: 38%; }
  88% { opacity: 1; }
  100% { left: 102%; top: 50%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .orbit-sat { animation: none; left: 50%; top: 46%; } }

/* ---------- Orbit-Trennung Variation (Drei Wege ↔ Lernwelt) ----------
   Gleiche Familie (Weltraum, fein, Korall/Cyan), aber anderes Motiv:
   eine winzige Konstellation aus 4 Sternen mit hauchfeinen Linien,
   dazu ein kleiner Komet, der nur selten und ganz sanft durchzieht. */
.orbit-divider-2 {
  position: relative; width: 100%; height: 68px; pointer-events: none; overflow: hidden;
  margin-block: clamp(-0.6rem, -1vw, -1.4rem) clamp(-0.6rem, -1vw, -1.4rem);
}

/* kleiner Komet: feiner Punkt mit kurzem Schweif, zieht nur kurz und selten durch */
.comet {
  position: absolute; top: 30%; left: -6%; width: 3px; height: 3px; border-radius: 50%;
  background: var(--cyan-bright);
  box-shadow: 0 0 6px 1px var(--cyan), 7px 1px 5px -1px var(--cyan-bright), 16px 1px 7px -2px var(--brand-glow);
  opacity: 0;
  animation: cometPass 15s ease-in infinite;
}
@keyframes cometPass {
  0%, 62% { transform: translate(0, 0); opacity: 0; }
  68% { opacity: .95; }
  90% { opacity: .8; }
  100% { transform: translate(72vw, 24px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .comet { animation: none; opacity: 0; }
}

/* ---------- Doors (Boarding-Manifest: ein Andockstrang, drei Luken) ----------
   Editorial/asymmetrisch statt drei gleicher Glaskästen: links die "Mission",
   rechts ein vertikaler Andockstrang (gepunktete Orbitspur) mit drei Luken,
   jede mit eigener Größe und Rhythmus. Kinder führt, Schulen trägt die Fakten. */
.doors { padding-top: clamp(var(--s4), 4vw, var(--s5)); padding-bottom: clamp(var(--s4), 4vw, var(--s5)); }
.journey { padding-top: clamp(var(--s4), 4vw, var(--s5)); }
.doors-layout {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(var(--s4), 4vw, var(--s7));
  align-items: start;
}
.doors-head { position: sticky; top: 96px; max-width: 30ch; }
.doors-head .kicker { margin-bottom: var(--s2); }
.doors-head h2 { font-size: var(--step-3); margin-bottom: var(--s3); }
.doors-head .lead { margin-bottom: var(--s4); }
.doors-foot {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--step--1); font-weight: 650; color: var(--cyan-bright);
  padding-top: var(--s3); border-top: 1px solid var(--hairline);
}
.doors-foot::before {
  content: ""; width: 22px; height: 2px; flex: none; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--cyan-bright) 0 2px, transparent 2px 6px);
}

/* Der Andockstrang */
.manifest {
  list-style: none; position: relative;
  display: flex; flex-direction: column; gap: clamp(var(--s3), 2vw, var(--s4));
  padding-left: clamp(var(--s5), 4vw, 4.5rem);
}
/* gepunktete Orbitspur, die alle Luken verbindet */
.manifest::before {
  content: ""; position: absolute; left: 18px; top: 14px; bottom: 14px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--brand) 0 2px, transparent 2px 12px);
  opacity: .55;
}

.board { position: relative; }
.board-link {
  position: relative; display: grid; color: inherit; isolation: isolate;
  grid-template-columns: 1fr; row-gap: var(--s2);
  padding: clamp(var(--s4), 2.4vw, var(--s5));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.board-link:hover { transform: translateX(4px) translateY(-3px); border-color: color-mix(in oklab, var(--brand) 45%, var(--hairline)); }

/* Andockpunkt: sitzt auf der Spur, links neben jeder Luke */
.board-node {
  position: absolute; top: clamp(var(--s4), 2.4vw, var(--s5));
  left: calc(-1 * clamp(var(--s5), 4vw, 4.5rem) + 18px);
  transform: translateX(-50%);
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 50%; background: var(--space-800);
  border: 1.5px solid color-mix(in oklab, var(--brand) 50%, var(--hairline));
  box-shadow: 0 0 0 6px var(--space-800), 0 0 22px -4px var(--brand-glow);
  transition: transform .4s var(--ease-out), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.board-face { width: 40px; height: 40px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.board-link:hover .board-node {
  transform: translateX(-50%) scale(1.06);
  border-color: var(--brand);
  box-shadow: 0 0 0 6px var(--space-800), 0 0 30px -2px var(--brand-glow);
}

.board-tag { font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-bright); }
.board-title { font-size: var(--step-2); }
.board-text { color: var(--muted); font-size: var(--step-0); max-width: 52ch; }
.board-go { margin-top: var(--s1); font-weight: 700; color: var(--brand-bright); display: inline-flex; align-items: center; gap: 7px; }
.board-arrow { transition: transform .3s var(--ease-out); }
.board-link:hover .board-arrow { transform: translateX(5px); }

/* Luke 01 · Kinder: führt, größer und warm umglüht */
.board-kinder .board-link {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--deep-1) 55%, transparent), transparent 58%),
    linear-gradient(180deg, var(--space-550), var(--space-700));
  border-color: color-mix(in oklab, var(--brand) 30%, var(--hairline));
}
.board-kinder .board-title { font-size: var(--step-3); }
.board-kinder .board-text { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.board-kinder .board-node { width: 66px; height: 66px; border-color: var(--brand); box-shadow: 0 0 0 6px var(--space-800), 0 0 34px -2px var(--brand-glow); }
.board-kinder .board-face { width: 48px; height: 48px; }

/* Luke 02 · Eltern: ruhiger, querformatiger Einstieg */
@media (min-width: 700px) {
  .board-eltern .board-link {
    grid-template-columns: 1fr auto;
    grid-template-areas: "tag tag" "title title" "text text" "go go";
    align-items: center;
  }
  .board-eltern .board-tag { grid-area: tag; }
  .board-eltern .board-title { grid-area: title; }
  .board-eltern .board-text { grid-area: text; }
  .board-eltern .board-go { grid-area: go; }
}

/* Luke 03 · Schulen: Fakten als Missions-Readout */
.board-readout { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--hairline); }
.board-readout div { display: flex; flex-direction: column-reverse; gap: 2px; }
.board-readout dd { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--cyan-bright); }
.board-readout dt { font-size: var(--step--1); color: var(--faint); }

@media (max-width: 880px) {
  .doors-layout { grid-template-columns: 1fr; gap: var(--s5); }
  .doors-head { position: static; max-width: 46ch; }
}
@media (max-width: 560px) {
  .manifest { padding-left: 0; }
  .manifest::before { display: none; }
  .board-node {
    position: static; transform: none; margin-bottom: var(--s2);
    box-shadow: 0 0 22px -4px var(--brand-glow), var(--inset-line);
  }
  .board-link:hover { transform: translateY(-3px); }
  .board-link:hover .board-node { transform: scale(1.04); }
}

/* ---------- Journey / Lernwelt (drei gleich große Säulen-Karten) --------------
   Die Startseite zeigt dieselben Säulen-Karten wie die Lernwelt-Seite: runde
   Mission-Abzeichen, Phase + Klasse, Themen-Chips, Fortschrittsbalken und
   "Zur Säule"-Link. Das Markup nutzt die geteilten, global definierten
   .lw-pillar*-Regeln (siehe Abschnitt "Drei Säulen (gleich große Karten)"
   weiter unten), damit beide Seiten pixelgleich aussehen. Hier bleibt nur die
   Breite des Sektions-Headers, der Reise-Ton der Startseite. */
.journey-head { max-width: 46ch; }

/* ---------- Probe (Echt oder Fake? · Funk-Konsole) ----------
   Linke Spalte: Intro + Raki als Scanner (reaktive Mimik, Fortschritt, Score).
   Rechte Spalte: die "Funk-Konsole", in der eine eingehende Nachricht geprüft
   wird. Gleiche Karten-Familie wie Doors/Lernwelt: Verlaufsflächen, Hairline,
   shadow-md + inset-line, dezente Glow-Akzente. Status: Grün (richtig) /
   Korall (falsch), beide kontraststark auf Dunkel. */
.probe-shell {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(var(--s5), 4vw, var(--s6));
  align-items: center;
}
.probe .kicker { color: var(--cyan-bright); }
.probe-intro { min-width: 0; }
.probe-intro h2 { font-size: var(--step-3); margin: var(--s2) 0 var(--s3); }
.probe-intro p { color: var(--muted); max-width: 40ch; }

/* Raki-Pilot: Scanner-Scheibe + Meta (Name, Score, Fortschritt) */
.probe-pilot {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s4);
  padding: var(--s3);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in oklab, var(--space-600) 80%, transparent), color-mix(in oklab, var(--space-700) 92%, transparent));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm), var(--inset-line);
}
.probe-scanner {
  position: relative; flex: none;
  width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--space-550) 90%, transparent), var(--space-800) 78%);
  border: 1px solid color-mix(in oklab, var(--cyan) 30%, var(--hairline));
  box-shadow: inset 0 0 22px -8px var(--brand-glow), 0 0 0 5px var(--space-800);
}
.probe-face-svg { width: 70px; height: 78px; }
#probeRing { transition: stroke .4s var(--ease); }
#probeBrowL, #probeBrowR, #probeMouth { transition: d .35s var(--ease); }
/* Scan-Linie: rein dekorativ, nur transform/opacity */
.probe-scanline {
  position: absolute; left: 8%; right: 8%; top: 12%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan-bright), transparent);
  opacity: .55; box-shadow: 0 0 8px 1px var(--cyan);
  animation: probeScan 3.6s var(--ease) infinite;
}
.probe-pilot-meta { min-width: 0; }
.probe-pilot-name {
  display: block; font-size: var(--step--1); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-bright);
}
.probe-score { margin-top: 4px; font-weight: 700; font-size: var(--step-1); color: var(--ink); }
.probe-score span { color: var(--brand-bright); }
.probe-track { list-style: none; display: flex; gap: 7px; margin-top: 10px; padding: 0; }
.probe-track li {
  width: 26px; height: 5px; border-radius: var(--pill);
  background: var(--hairline); transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.probe-track li.is-current { background: var(--cyan-bright); box-shadow: 0 0 8px -1px var(--cyan); }
.probe-track li.is-right { background: var(--trust); box-shadow: 0 0 8px -1px var(--trust); }
.probe-track li.is-wrong { background: var(--brand); box-shadow: 0 0 8px -1px var(--brand-glow); }

.probe-privacy {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--s3); font-size: var(--step--1); font-weight: 600;
  color: var(--trust-bright); line-height: 1.4;
}
.probe-privacy svg { color: var(--trust); flex: none; }

/* Die Konsole rechts */
.probe-game {
  min-width: 0; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--cyan) 12%, transparent), transparent 56%),
    linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s4), 3vw, var(--s5));
  box-shadow: var(--shadow-md), var(--inset-line);
}

/* Konsolen-Kopfzeile */
.probe-console {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding-bottom: var(--s3); margin-bottom: var(--s3);
  border-bottom: 1px solid var(--hairline);
}
.probe-console-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.probe-led {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--cyan-bright); box-shadow: 0 0 0 0 var(--cyan);
  animation: probeLed 2.4s ease-out infinite;
}
.probe-console-no { font-size: var(--step--1); font-weight: 700; color: var(--cyan-bright); font-variant-numeric: tabular-nums; }

/* Nachrichtenkarte */
.probe-msg {
  background: rgba(255,255,255,.045); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s3); margin-bottom: var(--s3);
}
.probe-from { display: flex; align-items: center; gap: 11px; margin-bottom: var(--s2); }
.probe-avatar {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; flex: none;
  background: color-mix(in oklab, var(--brand) 26%, var(--space-550));
  border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--hairline));
  color: var(--ink); box-shadow: var(--inset-line);
}
.probe-avatar svg { width: 19px; height: 19px; }
.probe-from-text { display: flex; flex-direction: column; min-width: 0; }
.probe-from-label { font-size: var(--step--1); color: var(--faint); letter-spacing: .04em; }
#probeSender { font-weight: 700; font-size: var(--step-0); color: var(--ink); }
.probe-msg blockquote { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }

/* Rakis Sprechblase / Status */
.probe-bubble {
  position: relative; background: var(--space-550); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 16px 16px 16px 5px;
  padding: 13px 17px 13px 44px; font-weight: 600; line-height: 1.45;
  margin-bottom: var(--s3); transition: border-color .3s var(--ease);
}
/* Punkt-Indikator (Raki funkt), rein CSS, kein externes Bild */
.probe-bubble::before {
  content: ""; position: absolute; left: 15px; top: 15px; width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cyan-bright) 0 60%, transparent 62%);
  box-shadow: 0 0 10px -2px var(--cyan);
}
.probe-bubble.is-right { border-color: color-mix(in oklab, var(--trust) 55%, var(--hairline)); }
.probe-bubble.is-right::before { background: radial-gradient(circle, var(--trust) 0 60%, transparent 62%); box-shadow: 0 0 10px -2px var(--trust); }
.probe-bubble.is-wrong { border-color: color-mix(in oklab, var(--brand) 55%, var(--hairline)); }
.probe-bubble.is-wrong::before { background: radial-gradient(circle, var(--brand-bright) 0 60%, transparent 62%); box-shadow: 0 0 10px -2px var(--brand-glow); }

/* Urteils-Tasten */
.probe-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.btn-choice {
  justify-content: center; gap: 9px;
  background: rgba(255,255,255,.05); color: var(--ink);
  border: 1px solid var(--hairline); font-weight: 700;
  padding: 14px 18px;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.choice-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; }
.choice-icon svg { width: 18px; height: 18px; }
.choice-fake .choice-icon { color: var(--brand-bright); }
.choice-echt .choice-icon { color: var(--trust-bright); }
.btn-choice:hover:not([disabled]) { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.choice-fake:hover:not([disabled]) { border-color: var(--brand); box-shadow: 0 0 22px -10px var(--brand-glow); }
.choice-echt:hover:not([disabled]) { border-color: var(--trust); box-shadow: 0 0 22px -10px var(--trust); }
.btn-choice:active:not([disabled]) { transform: translateY(0) scale(.985); }
.btn-choice.is-right { background: var(--trust); border-color: var(--trust); color: #06210f; box-shadow: 0 0 26px -10px var(--trust); }
.btn-choice.is-right .choice-icon { color: #06210f; }
.btn-choice.is-wrong { background: var(--brand-deep); border-color: var(--brand-deep); color: #2a0d07; }
.btn-choice.is-wrong .choice-icon { color: #2a0d07; }
.btn-choice[disabled]:not(.is-right):not(.is-wrong) { opacity: .5; }
.btn-choice[disabled] { cursor: default; }

.probe-next { color: var(--cyan-bright); margin-top: var(--s3); display: inline-flex; align-items: center; gap: 7px; }
.probe-next span { transition: transform .3s var(--ease-out); }
.probe-next:hover span { transform: translateX(4px); }

.probe-done {
  margin-top: var(--s3); padding: var(--s3);
  border-radius: var(--radius); font-size: var(--step-1); font-weight: 600; line-height: 1.45;
  background: linear-gradient(180deg, color-mix(in oklab, var(--trust) 12%, transparent), transparent);
  border: 1px solid color-mix(in oklab, var(--trust) 30%, var(--hairline));
}
.probe-done b { display: block; margin-bottom: 4px; font-size: var(--step-2); color: var(--trust-bright); }
.probe-restart { margin-top: var(--s2); }

@keyframes probeScan {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .6; }
  50% { transform: translateY(66px); opacity: .6; }
  60% { opacity: 0; }
  100% { transform: translateY(66px); opacity: 0; }
}
@keyframes probeLed {
  0% { box-shadow: 0 0 0 0 var(--cyan); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 820px) {
  .probe-shell { grid-template-columns: 1fr; gap: var(--s5); }
  .probe-intro { text-align: center; }
  .probe-intro p { margin-inline: auto; }
  .probe-pilot { text-align: left; max-width: 26rem; margin-inline: auto; }
  .probe-privacy { justify-content: center; text-align: left; }
}
@media (max-width: 400px) {
  .probe-pilot { flex-direction: column; text-align: center; }
  .probe-pilot-meta { text-align: center; }
  .probe-track { justify-content: center; }
  .probe-choices { grid-template-columns: 1fr; }
}

/* ---------- Lesson (These links, Belegt-durch-Raki rechts) ----------
   Eigenständige Form gegenüber den Nachbarn: kein voller Karten-Rahmen um die
   ganze Sektion, sondern eine starke These links (h2 dominant + Rakis drei
   Fragen als Mehrwert) und das Zitat rechts als ECHTE Karte in derselben
   Surface-/Glow-Sprache wie .probe-game und .trust-inner. Ein lokaler
   Radial-Brand-Glow hinter dem Zitat gibt der Sektion Tiefe. */
.lesson { position: relative; isolation: isolate; overflow: clip; }
.lesson-glow {
  position: absolute; z-index: -1; top: 50%; right: -4%;
  width: min(46vw, 520px); aspect-ratio: 1; transform: translateY(-50%);
  background: radial-gradient(circle at 60% 45%, var(--brand-glow), transparent 66%);
  filter: blur(22px); opacity: .55; pointer-events: none;
}
.lesson-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(var(--s5), 5vw, var(--s7)); align-items: center; }
.lesson-copy .kicker { margin-bottom: var(--s2); }
.lesson-copy h2 { font-size: var(--step-3); margin-bottom: var(--s3); max-width: 15ch; }
.lesson-lead { color: var(--muted); margin-bottom: var(--s4); max-width: 46ch; text-wrap: pretty; }

/* Rakis drei Fragen: nummerierte Reflexionsliste mit Marken-Akzent-Nummern,
   Stil verwandt mit .board-readout / .ascent-no (Marken-Hairline + Nummer). */
.lesson-asks {
  margin-bottom: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--hairline);
}
.lesson-asks-tag {
  display: inline-block; margin-bottom: var(--s3);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-bright);
}
.lesson-ask-list { list-style: none; display: flex; flex-direction: column; gap: var(--s2); counter-reset: ask; }
.lesson-ask-list li { display: flex; align-items: center; gap: var(--s2); }
.ask-no {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: var(--step--1); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--brand-bright);
  background: color-mix(in oklab, var(--brand) 16%, var(--space-700));
  border: 1px solid color-mix(in oklab, var(--brand) 40%, var(--hairline));
  box-shadow: 0 0 16px -6px var(--brand-glow), var(--inset-line);
}
.ask-text { color: var(--ink); font-weight: 600; font-size: var(--step-0); line-height: 1.4; }
.lesson-cta { margin-top: var(--s1); }

/* Das Zitat als echte Funkspruch-Karte: gleiche Surface-/Schatten-/Glow-Sprache
   wie .probe-game und .trust-inner, plus dezenter innerer Glow und Marken-Hairline. */
.lesson-quote {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--s5), 4vw, var(--s6)) clamp(var(--s4), 3.5vw, var(--s5)) clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in oklab, var(--space-600) 96%, transparent), color-mix(in oklab, var(--space-700) 96%, transparent));
  border: 1px solid color-mix(in oklab, var(--brand) 22%, var(--hairline));
  box-shadow: var(--shadow-md), var(--inset-line), 0 0 56px -10px var(--brand-glow);
}
/* dezenter innerer Glow, oben links verankert (rein dekorativ) */
.lesson-quote-glow {
  position: absolute; z-index: -1; top: -22%; left: -12%;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 70%);
  filter: blur(26px); opacity: .5; pointer-events: none;
}
.lesson-quote-tag {
  display: inline-block; margin-bottom: var(--s2);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-bright);
}
.quote-mark {
  position: absolute; right: clamp(14px, 3vw, 28px); top: clamp(2px, 1.5vw, 10px);
  font-size: clamp(5rem, 8vw, 7rem); line-height: 1; font-weight: 700;
  color: var(--brand); opacity: .26; pointer-events: none;
}
.lesson-quote blockquote {
  position: relative; font-size: var(--step-2); line-height: 1.3;
  font-weight: 500; font-style: italic; color: var(--ink); text-wrap: pretty;
  max-width: 24ch;
}
.lesson-quote figcaption {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--hairline);
}
/* RAKI groß auftreten: eigener Glow-Sockel statt 34px-Beiwerk */
.quote-raki-shell {
  flex: none; display: grid; place-items: center;
  width: clamp(56px, 8vw, 68px); height: clamp(56px, 8vw, 68px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--space-550) 92%, transparent), var(--space-800) 80%);
  border: 1px solid color-mix(in oklab, var(--brand) 36%, var(--hairline));
  box-shadow: inset 0 0 20px -8px var(--brand-glow), 0 0 0 5px var(--space-800), 0 0 24px -6px var(--brand-glow);
}
.quote-raki { width: clamp(40px, 6vw, 50px); height: clamp(40px, 6vw, 50px); filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.quote-by { display: flex; flex-direction: column; line-height: 1.2; }
.quote-by-name { font-size: var(--step-1); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.quote-by-role { font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

@media (max-width: 820px) {
  .lesson-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .lesson-glow { right: 50%; transform: translate(50%, -50%); top: 64%; opacity: .4; }
  .lesson-copy h2, .lesson-lead { max-width: none; }
}

/* ---------- Trust (Unser Versprechen) ----------
   Auf Karten-Niveau der Nachbarn .probe-game / .lesson-quote: gleiche
   Surface-/Schatten-/Glow-Sprache, hier semantisch im Vertrauens-Grün
   (--trust). Tiefe entsteht durch shadow-md + inset-line + grünen Glow
   und ein dekoratives Glow-Div hinter der Karte (analog .lesson-quote-glow).

   HIERARCHIE
   - Die drei Datenschutz-Pledges bilden ein gleich hohes Trio (.trust-pledges).
   - "0 € für Familien" ist ein anderer Versprechens-Typ (Preis): breite,
     korall-akzentuierte Zusage darunter (.trust-price), klar abgesetzt.

   ROBUSTE GLEICHE PLEDGE-HÖHE (Kernanforderung)
   - .trust-pledges ist ein Grid mit grid-auto-rows:1fr + align-items:stretch:
     alle Zeilen-Spuren werden gleich hoch (= höchste Karte), jede li wird per
     height:100% auf exakt diese Höhe gezogen. Das gilt sowohl mehrspaltig als
     auch gestapelt, also breitenunabhängig und ohne Text zu kürzen.
     Verifiziert Δ=0.00px bei 1440/1024/768/375. */
.trust-inner {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(var(--s4), 4vw, var(--s6)); align-items: center;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--trust) 12%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in oklab, var(--space-600) 96%, transparent), color-mix(in oklab, var(--space-700) 96%, transparent));
  border: 1px solid color-mix(in oklab, var(--trust) 20%, var(--hairline));
  border-radius: var(--radius-lg);
  padding: clamp(var(--s5), 4vw, var(--s7));
  box-shadow: var(--shadow-md), var(--inset-line), 0 0 56px -12px rgba(84,224,139,.30);
}
/* dezenter grüner Glow hinter der Karte, oben rechts verankert (dekorativ) */
.trust-glow {
  position: absolute; z-index: -1; top: -20%; right: -10%;
  width: 56%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(84,224,139,.38), transparent 70%);
  filter: blur(26px); opacity: .5; pointer-events: none;
}
.kicker-on-dark { color: var(--trust-bright); }
.trust-copy h2 { font-size: var(--step-3); margin: var(--s2) 0 var(--s3); max-width: 16ch; }
.trust-copy p { color: var(--muted); max-width: 46ch; margin-bottom: var(--s4); }

.trust-stack { min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }

/* Das Trio: gleich hohe Surface-Karten, als gestapelte Zeilen-Karten
   (Glyphe links, Text rechts) wie .trust-price -> niedrige, breite Karten
   mit guter Proportion statt schmaler hoher Spalten.
   grid-auto-rows:1fr + align-items:stretch -> alle Karten exakt gleich hoch,
   breitenunabhängig und ohne Text zu kürzen. */
.trust-pledges {
  list-style: none; display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--s2);
  align-items: stretch;
}
.trust-pledge {
  height: 100%;                    /* füllt die vom Grid vorgegebene Höhe */
  display: flex; flex-direction: row; align-items: center; gap: var(--s3);
  padding: var(--s3) clamp(var(--s3), 1.6vw, var(--s4));
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: color-mix(in oklab, var(--space-550) 60%, transparent);
  box-shadow: var(--inset-line);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.trust-pledge:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--trust) 45%, var(--hairline));
  box-shadow: var(--inset-line), 0 0 24px -10px rgba(84,224,139,.55);
}
.trust-glyph {
  display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  color: var(--trust-bright);
  background: color-mix(in oklab, var(--trust) 14%, var(--space-700));
  border: 1px solid color-mix(in oklab, var(--trust) 34%, var(--hairline));
  box-shadow: 0 0 18px -8px rgba(84,224,139,.7), var(--inset-line);
}
.trust-glyph svg { width: 21px; height: 21px; }
.trust-pledge-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trust-pledge b { font-size: var(--step-0); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.trust-pledge-text { color: var(--muted); font-size: var(--step--1); line-height: 1.45; }

/* "0 € für Familien": anderer Versprechens-Typ (Preis), abgesetzt in Korall.
   Volle Breite, eigene Akzent-Surface, eigene Glyphe. */
.trust-price {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) clamp(var(--s3), 1.8vw, var(--s4));
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--hairline));
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 60%),
    color-mix(in oklab, var(--space-550) 60%, transparent);
  box-shadow: var(--inset-line), 0 0 26px -14px var(--brand-glow);
}
.trust-glyph-price {
  width: 44px; height: 44px;
  color: var(--brand-bright);
  background: color-mix(in oklab, var(--brand) 16%, var(--space-700));
  border-color: color-mix(in oklab, var(--brand) 40%, var(--hairline));
  box-shadow: 0 0 20px -8px var(--brand-glow), var(--inset-line);
}
.trust-glyph-price svg { width: 24px; height: 24px; }
.trust-price-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trust-price b { font-size: var(--step-1); font-weight: 700; color: var(--brand-bright); letter-spacing: -.01em; }

/* Ab Tablet einspaltig: die Copy oben, darunter das Trio über die volle Breite
   (drei Karten nebeneinander haben so genug Platz, kein Overflow). */
@media (max-width: 1080px) {
  .trust-inner { grid-template-columns: 1fr; gap: var(--s5); }
  .trust-glow { right: 50%; top: -14%; transform: translateX(50%); opacity: .42; }
}
/* Schmaler/mobil: Glyphe oben ausrichten, falls die Beschreibung umbricht.
   Gleich-Höhe kommt weiter aus grid-auto-rows:1fr. */
@media (max-width: 540px) {
  .trust-pledge { align-items: flex-start; gap: var(--s3); padding: var(--s3); }
}

/* ---------- Liftoff (krönender Abschluss) ----------
   Höhepunkt der Seite: eine ruhig aufsteigende Flugbahn als Motiv, darüber
   eine klare Hierarchie (Kicker, große H2, ehrlicher Satz, zwei lesbare CTAs).
   Glow im Markenton, aber dezenter und gerichteter als zuvor (Halo unter der
   Rakete + Grundschein). Motion nur transform/opacity. */
.liftoff { position: relative; isolation: isolate; overflow: clip; text-align: center; padding-block: clamp(80px, 8vw, 8rem) clamp(var(--s7), 8vw, 10rem); }
/* gerichteter Grundschein, von unten heraufziehend */
.liftoff::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 118%, var(--brand-glow), transparent 56%); opacity: .5; }
/* weicher Halo direkt unter der startenden Rakete (dekorativ) */
.liftoff-aura {
  position: absolute; z-index: -1; left: 50%; top: clamp(8px, 3vw, 34px);
  width: clamp(160px, 26vw, 300px); aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, var(--brand-glow), transparent 66%);
  filter: blur(26px); opacity: .55; pointer-events: none;
}
.liftoff-trail { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: clamp(120px, 16vw, 200px); width: auto; opacity: .9; pointer-events: none; }
.liftoff-track { filter: drop-shadow(0 0 6px var(--brand-glow)); opacity: .6; }
.liftoff-rocket {
  filter: drop-shadow(0 0 10px var(--brand-glow));
  transform-box: fill-box; transform-origin: center;
  animation: lift 5.5s var(--ease) infinite;
}
.liftoff-inner { position: relative; }
.liftoff-kicker { margin-bottom: var(--s3); }
.liftoff h2 { font-size: var(--step-3); margin-bottom: var(--s2); }
.liftoff p { color: var(--muted); font-size: var(--step-1); max-width: 44ch; margin: 0 auto var(--s5); line-height: 1.5; text-wrap: pretty; }
.liftoff-cta { display: flex; gap: var(--s3); justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid color-mix(in oklab, var(--hairline) 200%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); padding-block: clamp(var(--s5), 5vw, var(--s7)) var(--s4); background: var(--space-900); }


/* ---------- Footer-Grid ---------- */
.footer-grid { display: grid; grid-template-columns: 1.4fr 2fr; gap: var(--s5); padding-bottom: var(--s5); }
.footer-brand .brand { font-size: 1.1rem; margin-bottom: var(--s2); }
.footer-brand p { color: var(--muted); font-size: var(--step--1); max-width: 34ch; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.footer-col h3 { font-size: var(--step--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s2); }
.footer-cols a { display: block; color: var(--muted); font-size: var(--step--1); padding: 4px 0; width: fit-content; transition: color .2s, transform .2s var(--ease-out); }
.footer-cols a:hover { color: var(--cyan-bright); transform: translateX(3px); }
.footer-cols a.footer-help { color: var(--trust-bright); font-weight: 650; }
.footer-cols a.footer-help:hover { color: var(--trust); }
.footer-social { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s3); color: var(--muted); font-size: var(--step--1); font-weight: 650; width: fit-content; transition: color .2s; }
.footer-social:hover { color: var(--brand); }
.footer-social svg { flex: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s4); border-top: 1px solid var(--hairline); color: var(--faint); }
.footer-bottom small { font-size: var(--step--1); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--rd, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes starDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-60px,0); } }
@keyframes starTwinkle { 0%,100% { opacity: .9; } 50% { opacity: .45; } }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--trust); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes lift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* Rakete am Orbit-Ende der Flugbahn: sanftes Schweben (transform-only) */
@keyframes ascentHover {
  0%,100% { transform: translate(0, 0) rotate(-1.5deg); }
  50%     { transform: translate(-3px, -5px) rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   LERNWELT (Unterseite) · additive, mit lw- gescopt
   Eigenständige Seite im selben Dark-Cosmic-System. Greift Tokens,
   Buttons, Header/Footer/Cosmos der Startseite 1:1 wieder auf. Alle
   neuen Regeln sind mit .lw- bzw. .lw-page gescopt, damit index.html
   unberührt bleibt.

   GLEICHE KARTENHÖHE (Kernanforderung):
   Die Säulen-Karten und die Einstieg-Karten liegen je in EINEM CSS-Grid
   mit align-items:stretch; die Links/Items werden per height:100% auf die
   vom Grid vorgegebene Zeilenhöhe gezogen. Damit sind die Karten bei JEDER
   Breite pixelgenau gleich hoch, unabhängig von Textlänge oder Umbruch.
   ============================================================ */

/* ---------- Aktiver Nav-Zustand (nur auf der Lernwelt-Seite) ---------- */
.lw-page .nav a.is-active { color: var(--ink); }
.lw-page .nav a.is-active::after {
  content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px;
  background: var(--brand-bright); box-shadow: 0 0 12px -2px var(--brand-glow);
}

/* ---------- Intro / Hero (kompakt) ---------- */
.lw-intro { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(var(--s6), 7vw, var(--s8)) clamp(var(--s5), 5vw, var(--s7)); }
.lw-intro-glow {
  position: absolute; z-index: -1; inset: -18% -6% auto auto;
  width: min(54vw, 560px); aspect-ratio: 1;
  background: radial-gradient(circle at 60% 40%, var(--brand-glow), transparent 64%);
  filter: blur(22px); opacity: .7; pointer-events: none;
}
.lw-intro-inner { max-width: 52ch; }
.lw-intro .kicker { margin-bottom: var(--s3); }
.lw-intro h1 { font-size: var(--step-4); line-height: 1.02; letter-spacing: -.03em; margin-bottom: var(--s3); max-width: 18ch; }
.lw-intro h1 em { font-style: italic; font-weight: 700; color: var(--brand-bright); text-shadow: 0 0 38px var(--brand-glow); }
.lw-intro .lead { max-width: 46ch; margin-bottom: var(--s4); }
.lw-intro-promise {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--step--1); font-weight: 600; color: var(--trust-bright); line-height: 1.4;
}
.lw-intro-promise svg { color: var(--trust); flex: none; }

/* ---------- Drei Säulen (gleich große Karten) ---------- */
.lw-pillars { padding-top: clamp(var(--s5), 5vw, var(--s7)); }
.lw-section-head { max-width: 46ch; margin-bottom: var(--s6); }
.lw-section-head .kicker { margin-bottom: var(--s2); }
.lw-section-head h2 { font-size: var(--step-3); margin-bottom: var(--s3); }
.lw-section-head .lead { max-width: 44ch; }

.lw-pillar-grid {
  list-style: none; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;           /* jede Zeilen-Spur gleich hoch (auch gestapelt) */
  gap: clamp(var(--s3), 2.6vw, var(--s5));
  align-items: stretch;          /* erzwingt gleiche Kartenhöhe */
}
.lw-pillar { position: relative; min-width: 0; }
.lw-pillar-link {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100%;                  /* füllt die vom Grid vorgegebene Zeilenhöhe */
  display: flex; flex-direction: column;
  padding: clamp(var(--s4), 2.4vw, var(--s5));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
  transition: transform .4s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.lw-pillar-link:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--brand) 45%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line);
}
.lw-pillar-top { display: flex; align-items: center; gap: clamp(var(--s2), 1.6vw, var(--s3)); margin-bottom: var(--s3); }

/* Mission-Abzeichen (Patch): runder Patch statt Raki-Kopf.
   An Dark Cosmic angepasst: dunkle, halbtransparente Kreisfläche,
   helle AA-taugliche Ringe/Schrift/Icon je Säulen-Identitätsfarbe.
   Größe per clamp ~84 bis 120px, ersetzt den bisherigen Node. */
.lw-pillar-patch {
  flex: none; display: block;
  width: clamp(84px, 9vw, 120px); aspect-ratio: 1;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
  transition: transform .4s var(--ease-out);
}
.lw-pillar-patch svg { width: 100%; height: 100%; }
.lw-pillar-link:hover .lw-pillar-patch { transform: scale(1.05) rotate(-2deg); }

.lw-pillar-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lw-pillar-phase { font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-bright); }
.lw-pillar-grade { font-size: var(--step--1); color: var(--faint); }
.lw-pillar-name { font-size: var(--step-2); margin-bottom: var(--s2); line-height: 1.1; }
.lw-pillar-text { color: var(--muted); font-size: var(--step-0); }

/* Themen-Chips je Säule: dezente Pillen im Dark-Cosmic-Stil
   (getönte Fläche, Hairline, heller Text). AA auf Dunkel. */
.lw-pillar-chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1);
  margin-top: var(--s3);
}
.lw-chip {
  font-size: var(--step--1); font-weight: 600; line-height: 1.2;
  color: var(--muted);
  padding: 5px 11px; border-radius: var(--pill);
  background: color-mix(in oklab, var(--space-550) 55%, transparent);
  border: 1px solid var(--hairline);
  box-shadow: var(--inset-line);
  transition: border-color .3s var(--ease), color .25s var(--ease);
}
/* je Säule ein zarter Identitäts-Hauch beim Hover der Karte */
.lw-pillar-rk .lw-pillar-link:hover .lw-chip { border-color: color-mix(in oklab, var(--brand) 40%, var(--hairline)); color: var(--ink); }
.lw-pillar-ms .lw-pillar-link:hover .lw-chip { border-color: color-mix(in oklab, var(--trust) 40%, var(--hairline)); color: var(--ink); }
.lw-pillar-ca .lw-pillar-link:hover .lw-chip { border-color: color-mix(in oklab, var(--cyan) 40%, var(--hairline)); color: var(--ink); }

/* Lektions-Stand: Fortschrittsbalken + Zahl, sitzt per margin-top:auto unten,
   ohne die Kartenhöhe zu beeinflussen */
.lw-pillar-stat { margin-top: auto; padding-top: var(--s3); }
.lw-pillar-bar {
  position: relative; height: 6px; border-radius: var(--pill);
  background: color-mix(in oklab, var(--space-550) 70%, transparent);
  border: 1px solid var(--hairline-2); overflow: hidden;
}
.lw-pillar-bar span {
  position: absolute; inset: 0 auto 0 0; width: var(--lw-prog, 20%);
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-bright));
  box-shadow: 0 0 14px -2px var(--brand-glow);
}
.lw-pillar-stat-line {
  display: flex; align-items: baseline; gap: 7px; margin-top: 9px;
  font-size: var(--step--1); color: var(--muted);
}
.lw-pillar-stat-line b { font-size: var(--step-0); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.lw-pillar-go {
  margin-top: var(--s3); font-weight: 700; color: var(--brand-bright);
  display: inline-flex; align-items: center; gap: 7px;
}
.lw-go-arrow { transition: transform .3s var(--ease-out); }
.lw-pillar-link:hover .lw-go-arrow,
.lw-entry-link:hover .lw-go-arrow { transform: translateX(5px); }

/* Säulen-Identitätsfarben für Balken + Go-Link, passend zum Abzeichen.
   MindShield Grün und CyberAcademy Blau/Cyan sind feste Säulenfarben
   (unabhängig vom Korall/Blau-Toggle). RocketKidz bleibt auf --brand. */
.lw-pillar-ms .lw-pillar-bar span {
  background: linear-gradient(90deg, color-mix(in oklab, var(--trust) 70%, #1f6b58), var(--trust-bright));
  box-shadow: 0 0 14px -2px rgba(84,224,139,.55);
}
.lw-pillar-ms .lw-pillar-go { color: var(--trust-bright); }
.lw-pillar-ms .lw-pillar-link:hover {
  border-color: color-mix(in oklab, var(--trust) 45%, var(--hairline));
}
.lw-pillar-ca .lw-pillar-bar span {
  background: linear-gradient(90deg, color-mix(in oklab, var(--cyan) 70%, #2c7fa8), var(--cyan-bright));
  box-shadow: 0 0 14px -2px rgba(95,224,232,.5);
}
.lw-pillar-ca .lw-pillar-go { color: var(--cyan-bright); }
.lw-pillar-ca .lw-pillar-link:hover {
  border-color: color-mix(in oklab, var(--cyan) 45%, var(--hairline));
}

@media (max-width: 980px) and (min-width: 721px) {
  .lw-pillar-grid { gap: clamp(var(--s3), 2vw, var(--s4)); }
}
@media (max-width: 720px) {
  .lw-pillar-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}

/* ---------- Highlight: Passwort-Generator zum Mitmachen ----------
   Kompakte, fokussierte Karte in derselben Surface-/Glow-Sprache wie
   .probe-game und .lesson-quote (Korall-Radial + space-600/700, Marken-
   Hairline, shadow-md + inset-line + dezenter Korall-Glow). Statt eines
   breiten Teasers ein echtes Werkzeug, das beim Laden sofort lebt. */
.lw-highlight { padding-top: clamp(var(--s5), 5vw, var(--s7)); }
.lw-highlight-tag {
  display: inline-block; margin-bottom: var(--s2);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-bright);
}

.lw-pwgen {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 50rem; margin-inline: auto;
  padding: clamp(var(--s4), 3.4vw, var(--s5));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in oklab, var(--space-600) 96%, transparent), color-mix(in oklab, var(--space-700) 96%, transparent));
  border: 1px solid color-mix(in oklab, var(--brand) 22%, var(--hairline));
  box-shadow: var(--shadow-md), var(--inset-line), 0 0 56px -10px var(--brand-glow);
}
.lw-pwgen-glow {
  position: absolute; z-index: -1; top: -24%; left: -10%;
  width: 52%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 70%);
  filter: blur(26px); opacity: .5; pointer-events: none;
}

/* Kopfzeile: Text links, Raki klein rechts (dabei, aber nicht dominant) */
.lw-pwgen-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.lw-pwgen-intro { min-width: 0; }
.lw-highlight h2 { font-size: var(--step-2); margin-bottom: var(--s1); max-width: 18ch; }
.lw-pwgen-sub { color: var(--muted); max-width: 52ch; text-wrap: pretty; font-size: var(--step-0); }
.lw-pwgen-raki {
  flex: none; display: grid; place-items: center;
  width: clamp(58px, 8vw, 76px); height: clamp(58px, 8vw, 76px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--space-550) 92%, transparent), var(--space-800) 80%);
  border: 1px solid color-mix(in oklab, var(--brand) 36%, var(--hairline));
  box-shadow: inset 0 0 20px -8px var(--brand-glow), 0 0 0 5px var(--space-800), 0 0 24px -6px var(--brand-glow);
}
.lw-pwgen-raki svg, .lw-pwgen-raki img.raki-kopf-bild { width: 64%; height: 64%; filter: drop-shadow(0 5px 10px rgba(0,0,0,.5)); animation: bob 4.5s var(--ease) infinite; }

/* Modus-Umschalter (Segment): zwei echte Buttons, aktiver in Marken-Tönung */
.lw-pwgen-modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 6px; margin-bottom: var(--s3);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hairline); border-radius: 14px;
}
.lw-pwgen-mode {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  font: inherit; text-align: left; cursor: pointer;
  padding: 11px 15px; border-radius: 10px;
  background: transparent; color: var(--muted); border: 1px solid transparent;
  font-weight: 700; line-height: 1.2;
  transition: transform .25s var(--ease-out), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.lw-pwgen-mode:hover:not(.is-on) { background: rgba(255,255,255,.06); color: var(--ink); }
.lw-pwgen-mode:active { transform: scale(.99); }
.lw-pwgen-mode.is-on {
  color: var(--ink);
  background: color-mix(in oklab, var(--brand) 16%, var(--space-550));
  border-color: color-mix(in oklab, var(--brand) 42%, var(--hairline));
  box-shadow: 0 0 22px -10px var(--brand-glow), var(--inset-line);
}
.lw-pwgen-mode-hint { font-size: var(--step--1); font-weight: 500; color: var(--faint); letter-spacing: 0; text-transform: none; }
.lw-pwgen-mode.is-on .lw-pwgen-mode-hint { color: var(--muted); }

/* Ergebnis-Zeile: das Passwort groß und monospace, daneben Kopieren */
.lw-pwgen-result { display: flex; align-items: stretch; gap: var(--s2); margin-bottom: var(--s3); }
.lw-pwgen-out {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  padding: 14px 17px; border-radius: var(--radius);
  background: var(--space-900);
  border: 1px solid color-mix(in oklab, var(--cyan) 22%, var(--hairline));
  box-shadow: var(--inset-line), inset 0 0 24px -14px var(--cyan);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: var(--step-1); font-weight: 600; letter-spacing: .02em; color: var(--ink);
  line-height: 1.4; word-break: break-all; overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all;
}
.lw-pwgen-copy {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 0 17px; border-radius: var(--radius);
  background: rgba(255,255,255,.05); color: var(--ink);
  border: 1px solid var(--hairline);
  transition: transform .25s var(--ease-out), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.lw-pwgen-copy:hover { background: rgba(255,255,255,.1); border-color: var(--cyan); transform: translateY(-2px); }
.lw-pwgen-copy:active { transform: translateY(0) scale(.985); }
.lw-pwgen-copy-icon { width: 18px; height: 18px; flex: none; }
.lw-pwgen-copy.is-done {
  background: var(--trust); border-color: var(--trust); color: #06210f;
  box-shadow: 0 0 24px -10px var(--trust);
}

/* Längen-Steuerung (nur Zufalls-Modus) */
.lw-pwgen-length { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; }
.lw-pwgen-length[hidden] { display: none; }
.lw-pwgen-length-label { font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.lw-pwgen-step {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  font: inherit; font-size: var(--step-1); font-weight: 700; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,.05); color: var(--ink); border: 1px solid var(--hairline);
  transition: transform .2s var(--ease-out), background .2s var(--ease), border-color .2s var(--ease);
}
.lw-pwgen-step:hover { background: rgba(255,255,255,.1); border-color: var(--cyan); }
.lw-pwgen-step:active { transform: scale(.94); }
.lw-pwgen-range {
  flex: 1 1 140px; min-width: 120px; height: 30px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.lw-pwgen-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--pill);
  background: linear-gradient(90deg, var(--brand) 0 var(--lw-fill, 40%), var(--hairline) var(--lw-fill, 40%) 100%);
}
.lw-pwgen-range::-moz-range-track { height: 6px; border-radius: var(--pill); background: var(--hairline); }
.lw-pwgen-range::-moz-range-progress { height: 6px; border-radius: var(--pill); background: var(--brand); }
.lw-pwgen-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-bright); border: 2px solid var(--space-900);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand) 50%, transparent), 0 2px 8px rgba(0,0,0,.5);
  cursor: pointer; transition: transform .2s var(--ease-out);
}
.lw-pwgen-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-bright); border: 2px solid var(--space-900);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand) 50%, transparent), 0 2px 8px rgba(0,0,0,.5);
  cursor: pointer;
}
.lw-pwgen-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.lw-pwgen-length-val { font-size: var(--step--1); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-left: auto; }

/* Ehrliche Info-Zeile (Länge + Zeichenarten, kein Fake-Score) */
.lw-pwgen-info { font-size: var(--step--1); color: var(--muted); margin-bottom: var(--s4); line-height: 1.4; text-wrap: pretty; }

.lw-pwgen-actions { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.lw-pwgen-dice { width: 18px; height: 18px; flex: none; }
.lw-pwgen-more { display: inline-flex; align-items: center; gap: 6px; }
.lw-pwgen-more span { transition: transform .3s var(--ease-out); }
.lw-pwgen-more:hover span { transform: translateX(4px); }

.lw-pwgen-privacy {
  display: flex; align-items: center; gap: 9px;
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--hairline);
  font-size: var(--step--1); color: var(--faint); line-height: 1.4;
}
.lw-pwgen-privacy svg { color: var(--trust); flex: none; }

@media (max-width: 560px) {
  .lw-pwgen-head { flex-direction: column-reverse; text-align: center; gap: var(--s2); }
  .lw-highlight h2 { max-width: none; }
  .lw-pwgen-sub { max-width: none; }
  .lw-pwgen-modes { grid-template-columns: 1fr; }
  .lw-pwgen-result { flex-direction: column; }
  .lw-pwgen-copy { justify-content: center; padding: 12px 17px; }
  .lw-pwgen-length-val { margin-left: 0; }
}

/* ---------- Beliebt zum Einstieg (gleich große Karten) ---------- */
.lw-entries { padding-top: clamp(var(--s5), 5vw, var(--s7)); }
.lw-entry-grid {
  list-style: none; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;           /* jede Zeilen-Spur gleich hoch (2-spaltig + gestapelt) */
  gap: clamp(var(--s3), 2vw, var(--s4));
  align-items: stretch;          /* erzwingt gleiche Kartenhöhe */
}
.lw-entry { min-width: 0; }
.lw-entry-link {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100%;                  /* füllt die vom Grid vorgegebene Zeilenhöhe */
  display: flex; flex-direction: column;
  padding: clamp(var(--s3), 2vw, var(--s4));
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in oklab, var(--space-600) 90%, transparent), color-mix(in oklab, var(--space-700) 94%, transparent));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm), var(--inset-line);
  transition: transform .4s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.lw-entry-link:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--brand) 45%, var(--hairline));
  box-shadow: var(--shadow-md), var(--inset-line);
}
.lw-entry-kicker { font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-bright); margin-bottom: var(--s2); }
.lw-entry-title { font-size: var(--step-1); line-height: 1.2; margin-bottom: var(--s3); }
.lw-entry-go { margin-top: auto; font-weight: 700; color: var(--brand-bright); display: inline-flex; align-items: center; gap: 7px; font-size: var(--step--1); }
/* "bald"-Variante: kommende Lektion, nicht klickbar */
.lw-entries-note { margin-top: var(--s4); color: var(--faint); font-size: var(--step--1); }

@media (max-width: 1040px) and (min-width: 721px) {
  .lw-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .lw-entry-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ehrliche Zahlen-Leiste ---------- */
.lw-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lw-figures { padding-top: clamp(var(--s5), 5vw, var(--s7)); }
.lw-figure-row {
  list-style: none; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(var(--s2), 1.6vw, var(--s4));
  padding: clamp(var(--s4), 3vw, var(--s5)) clamp(var(--s3), 2.4vw, var(--s5));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in oklab, var(--space-600) 94%, transparent), color-mix(in oklab, var(--space-700) 96%, transparent));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
}
.lw-figure {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; min-width: 0;
  padding-inline: var(--s2);
}
.lw-figure + .lw-figure { border-left: 1px solid var(--hairline-2); }
.lw-figure-num b {
  font-size: var(--step-3); font-weight: 800; line-height: 1;
  color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.lw-figure-accent b { color: var(--brand-bright); text-shadow: 0 0 26px var(--brand-glow); }
.lw-figure-label { color: var(--muted); font-size: var(--step--1); line-height: 1.35; text-wrap: balance; }
@media (max-width: 560px) {
  .lw-figure-row { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .lw-figure { flex-direction: row; justify-content: center; gap: var(--s2); align-items: baseline; }
  .lw-figure + .lw-figure { border-left: 0; border-top: 1px solid var(--hairline-2); padding-top: var(--s3); }
}

/* ---------- Abschluss-CTA ---------- */
.lw-finish { position: relative; isolation: isolate; overflow: clip; text-align: center; padding-block: clamp(var(--s6), 8vw, 10rem) clamp(var(--s6), 7vw, 9rem); }
.lw-finish::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 118%, var(--brand-glow), transparent 56%); opacity: .5; }
.lw-finish-inner { position: relative; max-width: 46ch; margin-inline: auto; }
.lw-finish .kicker { margin-bottom: var(--s3); }
.lw-finish h2 { font-size: var(--step-3); margin-bottom: var(--s2); }
.lw-finish p { color: var(--muted); font-size: var(--step-1); margin: 0 auto var(--s5); line-height: 1.5; text-wrap: pretty; }
.lw-finish-cta { display: flex; gap: var(--s3); justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---------- Lernwelt: reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .lw-pwgen-raki svg, .lw-pwgen-raki img.raki-kopf-bild { animation: none; }
}

/* ============================================================
   HILFE FINDEN (hilfe.html)
   Additiv, gescopt mit .help-* / .hp-*. Gleiche Token-, Karten-
   und Glow-Sprache wie Startseite/Lernwelt. Leitakzent: Vertrauens-
   Grün (--trust) für die Hilfe-Karten, Akut-Hinweis in Korall/Warnton.
   ============================================================ */

/* ---------- Intro / Hero (kompakt) ---------- */
.help-intro { padding-block: clamp(var(--s6), 6vw, var(--s7)) clamp(var(--s4), 4vw, var(--s6)); }
/* Grüner Hauch statt Korall: Thema Sicherheit/Geborgenheit */
.help-intro-glow {
  inset: -16% auto auto -8%;
  background: radial-gradient(circle at 40% 40%, rgba(84,224,139,.4), transparent 64%);
}
.help-intro-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(var(--s4), 4vw, var(--s6)); align-items: center;
}
.help-intro-copy { max-width: 50ch; min-width: 0; }
.help-intro .kicker { color: var(--trust-bright); margin-bottom: var(--s3); }
.help-intro h1 { font-size: var(--step-4); line-height: 1.02; letter-spacing: -.03em; margin-bottom: var(--s3); max-width: 16ch; }
.help-intro h1 em { font-style: italic; font-weight: 700; color: var(--trust-bright); text-shadow: 0 0 38px rgba(84,224,139,.45); }
.help-intro .lead { max-width: 48ch; }
.help-intro-raki {
  flex: none; justify-self: end;
  width: clamp(88px, 11vw, 140px); aspect-ratio: 1;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.5));
}
.help-intro-raki svg, .help-intro-raki img.raki-kopf-bild { width: 100%; height: 100%; }

/* ---------- Akut-Hinweis (Warnton, Korall abgesetzt) ---------- */
.help-acute-section { padding-block: 0; }
.help-acute {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; gap: clamp(var(--s2), 2vw, var(--s4)); align-items: flex-start;
  padding: clamp(var(--s3), 2.4vw, var(--s4)) clamp(var(--s3), 2.6vw, var(--s5));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--brand) 16%, var(--space-600)), var(--space-700));
  border: 1px solid color-mix(in oklab, var(--brand) 50%, var(--hairline));
  box-shadow: 0 0 60px -22px var(--brand-glow), var(--shadow-md), var(--inset-line);
}
.help-acute::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--brand-bright), var(--brand-deep));
}
.help-acute-icon {
  flex: none; display: grid; place-items: center;
  width: clamp(40px, 5vw, 52px); aspect-ratio: 1; border-radius: 50%;
  color: var(--brand-bright);
  background: color-mix(in oklab, var(--brand) 22%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent);
}
.help-acute-icon svg { width: 56%; height: 56%; }
.help-acute-body { min-width: 0; }
.help-acute-title { font-size: var(--step-1); color: var(--brand-bright); margin-bottom: 4px; letter-spacing: -.01em; }
.help-acute-body p { color: var(--ink); font-size: var(--step-0); line-height: 1.55; text-wrap: pretty; }
.help-acute-tel {
  font-weight: 800; color: var(--brand-bright);
  padding: 0 4px; border-radius: 6px;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--brand) 60%, transparent);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.help-acute-tel:hover { color: #fff; background: color-mix(in oklab, var(--brand) 30%, transparent); }

/* ---------- Karten-Gruppen ---------- */
.help-group { padding-block: clamp(var(--s5), 5vw, var(--s7)); }
.help-group-phone { padding-top: clamp(var(--s5), 5vw, var(--s7)); }
.help-group-head { max-width: 46ch; margin-bottom: var(--s5); }
.help-group-head .kicker { margin-bottom: var(--s2); }
.help-group-head h2 { font-size: var(--step-2); margin-bottom: var(--s2); }
.help-group-head .lead { max-width: 48ch; font-size: var(--step-0); }
.help-kicker-trust { color: var(--trust-bright); }

/* Gleich große Karten je Gruppe: gleiche Zeilenhöhe via Grid + stretch */
.help-cards {
  list-style: none; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;            /* jede Zeilen-Spur gleich hoch */
  gap: clamp(var(--s3), 2.4vw, var(--s4));
  align-items: stretch;          /* erzwingt gleiche Kartenhöhe */
}
.help-card { position: relative; min-width: 0; }
.help-card-link {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100%;                  /* füllt die vom Grid vorgegebene Zeilenhöhe */
  display: flex; flex-direction: column;
  padding: clamp(var(--s3), 2.4vw, var(--s4));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
  transition: transform .4s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* zarter grüner Lauflicht-Strich oben: Vertrauen/Sicherheit als Leitakzent */
.help-card-link::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--trust), transparent);
  opacity: 0; transition: opacity .3s var(--ease);
}
.help-card-link:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--trust) 48%, var(--hairline));
  box-shadow: 0 0 50px -24px rgba(84,224,139,.7), var(--shadow-lg), var(--inset-line);
}
.help-card-link:hover::before,
.help-card-link:focus-visible::before { opacity: 1; }

.hp-tag {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .04em;
  color: var(--trust-bright); margin-bottom: var(--s2);
}
/* Telefonnummern groß und klar */
.hp-num {
  font-family: var(--font-display);
  font-size: var(--step-3); font-weight: 700; line-height: 1.05;
  letter-spacing: -.01em; color: var(--ink);
  font-variant-numeric: tabular-nums; word-break: keep-all;
}
.hp-link {
  font-size: var(--step-1); font-weight: 650; line-height: 1.2;
  color: var(--ink); word-break: break-word; letter-spacing: -.01em;
}
.hp-note {
  color: var(--muted); font-size: var(--step--1); line-height: 1.5;
  margin-top: var(--s2); text-wrap: pretty;
}
/* "Go"-Zeile unten, an den Kartenboden gedrückt -> Karten wirken gleich gefüllt */
.hp-go {
  margin-top: auto; padding-top: var(--s3);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--step--1); font-weight: 700; color: var(--trust-bright);
}
.hp-go svg { width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease-out); }
.help-card-link:hover .hp-go svg { transform: translate(2px, -2px); }
.help-card-link.hp-tel:hover .hp-go svg { transform: scale(1.1); }

/* ---------- Abschluss-Hinweis (eigene Box, ruhig) ---------- */
.help-closing-section { padding-block: clamp(var(--s5), 5vw, var(--s7)); }
.help-closing {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; gap: clamp(var(--s3), 2.6vw, var(--s4)); align-items: center;
  max-width: 64ch; margin-inline: auto;
  padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--trust) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid color-mix(in oklab, var(--trust) 28%, var(--hairline));
  box-shadow: var(--shadow-md), var(--inset-line);
}
.help-closing-raki {
  flex: none; width: clamp(56px, 7vw, 80px); aspect-ratio: 1;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.5));
}
.help-closing-raki svg, .help-closing-raki img.raki-kopf-bild { width: 100%; height: 100%; }
.help-closing-body { min-width: 0; }
.help-closing-title { font-size: var(--step-1); color: var(--trust-bright); margin-bottom: 4px; letter-spacing: -.01em; }
.help-closing-body p { color: var(--muted); font-size: var(--step-0); line-height: 1.55; text-wrap: pretty; }

/* ---------- Hilfe: responsiv ---------- */
@media (max-width: 900px) {
  .help-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .help-intro-inner { grid-template-columns: minmax(0, 1fr); }
  .help-intro-raki { display: none; }
  .help-cards { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: var(--s3); }
  .help-acute { flex-direction: row; }
  .help-closing { flex-direction: column; text-align: center; }
}

/* ---------- Hilfe: reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .help-card-link, .hp-go svg { transition: none; }
  .help-card-link:hover { transform: none; }
}

/* ============================================================
   LEKTION (Lese-Seite) · additive, mit lekt- gescopt
   Eine Lese-Lektion auf dunklem Grund. Lesbarkeit hat hier
   höchste Priorität: begrenzte Textspalte (measure ~65ch),
   großzügige line-height (~1.7), Fließtext im hellen --muted-Ton
   (~9:1 Kontrast, ruhiger als reines Weiß), Überschriften in --ink.
   Alles mit .lekt- bzw. .lekt-page gescopt, damit die übrigen
   Seiten unberührt bleiben. Greift Tokens, Buttons, Header/Footer
   und das Cosmos 1:1 wieder auf.

   GLEICHE KARTENHÖHE (Kernanforderung):
   Die drei Fragen-Karten liegen in EINEM CSS-Grid mit
   align-items:stretch + grid-auto-rows:1fr; jedes <li> wird per
   height:100% auf die Zeilenhöhe gezogen. Damit sind die Karten
   bei jeder Breite pixelgenau gleich hoch.
   ============================================================ */

/* ---------- Lesefortschritt (sehr dezent, transform-only) ---------- */
.lekt-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: var(--hairline-2); pointer-events: none;
}
.lekt-progress-bar {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  box-shadow: 0 0 12px -2px var(--brand-glow);
  will-change: transform;
}

/* ---------- Lese-Maß: die zentrale Textspalte ---------- */
.lekt-measure { max-width: 65ch; }
.lekt-article { padding-bottom: clamp(var(--s5), 5vw, var(--s7)); }

/* ---------- Kopf / Lektions-Head ---------- */
.lekt-head {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(var(--s5), 6vw, var(--s7)) clamp(var(--s4), 3vw, var(--s5));
}
.lekt-head-glow {
  position: absolute; z-index: -1; inset: -22% -8% auto auto;
  width: min(52vw, 540px); aspect-ratio: 1;
  background: radial-gradient(circle at 62% 42%, var(--brand-glow), transparent 64%);
  filter: blur(24px); opacity: .6; pointer-events: none;
}
.lekt-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s4);
  font-size: var(--step--1); font-weight: 650; color: var(--muted);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .25s var(--ease);
}
.lekt-back svg { transition: transform .3s var(--ease-out); }
.lekt-back:hover { color: var(--ink); border-bottom-color: var(--cyan); }
.lekt-back:hover svg { transform: translateX(-3px); }
.lekt-head .kicker { margin-bottom: var(--s2); }
.lekt-title {
  font-size: var(--step-4); line-height: 1.04; letter-spacing: -.03em;
  color: var(--ink); margin-bottom: var(--s4); max-width: 18ch;
}

/* Meta-Zeile: Tag (Säule), Lesedauer, Zielgruppe */
.lekt-meta {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2) clamp(var(--s3), 2.4vw, var(--s4));
  padding-top: var(--s3); border-top: 1px solid var(--hairline);
}
.lekt-meta li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--step--1); font-weight: 600; color: var(--faint); line-height: 1.3;
}
.lekt-meta li svg { color: var(--muted); flex: none; }
.lekt-meta-pillar {
  color: var(--brand-bright) !important; font-weight: 700 !important;
  letter-spacing: .04em; text-transform: uppercase;
}
.lekt-meta-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--brand); box-shadow: 0 0 10px -1px var(--brand-glow);
}

/* ---------- Fließtext-Körper ---------- */
.lekt-body { padding-block: clamp(var(--s3), 2.6vw, var(--s4)); }
.lekt-body-tight { padding-block: clamp(var(--s2), 1.6vw, var(--s3)); }
.lekt-measure > .lekt-p + .lekt-p { margin-top: var(--s3); }

/* Kern der Lesbarkeit: heller, aber nicht reinweißer Ton + viel Zeilenhöhe */
.lekt-p {
  font-size: var(--step-1); line-height: 1.72; color: var(--muted);
  text-wrap: pretty; max-width: 65ch;
}
.lekt-lead {
  font-size: var(--step-2); line-height: 1.5; color: var(--ink);
  font-weight: 500; letter-spacing: -.01em;
}
.lekt-p strong { color: var(--ink); font-weight: 700; }

/* kleiner Raki-Anker am Beginn des Lesetexts (dezent) */
.lekt-raki-tab {
  float: right; width: clamp(54px, 8vw, 72px); height: clamp(54px, 8vw, 72px);
  margin: 4px 0 var(--s2) var(--s3);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
.lekt-raki-tab svg, .lekt-raki-tab img.raki-kopf-bild { width: 100%; height: 100%; }

/* ---------- Pull-Quote (Rakis Gedanke) ---------- */
.lekt-pull {
  position: relative; isolation: isolate; overflow: hidden;
  margin: clamp(var(--s2), 2vw, var(--s3)) 0;
  padding: clamp(var(--s4), 3.4vw, var(--s5)) clamp(var(--s4), 3vw, var(--s5));
  padding-left: clamp(var(--s4), 4vw, calc(var(--s5) + var(--s4)));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in oklab, var(--space-600) 96%, transparent), color-mix(in oklab, var(--space-700) 96%, transparent));
  border: 1px solid color-mix(in oklab, var(--brand) 22%, var(--hairline));
  box-shadow: var(--shadow-md), var(--inset-line), 0 0 56px -14px var(--brand-glow);
}
.lekt-pull::before {
  content: ""; position: absolute; inset: clamp(var(--s3), 3vw, var(--s4)) auto clamp(var(--s3), 3vw, var(--s4)) 0;
  width: 4px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--brand-bright), var(--brand-deep));
}
.lekt-pull-glow {
  position: absolute; z-index: -1; top: -26%; left: -10%;
  width: 56%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 70%);
  filter: blur(28px); opacity: .5; pointer-events: none;
}
.lekt-pull-raki {
  position: absolute; right: clamp(14px, 3vw, 26px); top: clamp(14px, 3vw, 22px);
  width: clamp(40px, 6vw, 54px); height: clamp(40px, 6vw, 54px); opacity: .9;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.5));
}
.lekt-pull-raki svg, .lekt-pull-raki img.raki-kopf-bild { width: 100%; height: 100%; }
.lekt-pull-quote {
  font-size: var(--step-2); line-height: 1.4; font-weight: 500; font-style: italic;
  color: var(--ink); text-wrap: pretty; max-width: 34ch;
}
.lekt-pull-by {
  margin-top: var(--s3); font-size: var(--step--1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand-bright);
}

/* ---------- Rakis drei Fragen ---------- */
.lekt-asks { padding-block: clamp(var(--s5), 5vw, var(--s7)); }
.lekt-asks-head { margin-bottom: clamp(var(--s4), 3vw, var(--s5)); }
.lekt-asks-head .kicker { margin-bottom: var(--s2); }
.lekt-asks-head h2 { font-size: var(--step-3); color: var(--ink); margin-bottom: var(--s3); }

/* gleiche Kartenhöhe: Grid + stretch + auto-rows 1fr, li füllt height:100% */
.lekt-ask-grid {
  list-style: none; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; align-items: stretch;
  gap: clamp(var(--s3), 2.4vw, var(--s4));
  counter-reset: lekt-ask;
}
.lekt-ask {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100%; display: flex; flex-direction: column;
  padding: clamp(var(--s4), 2.8vw, var(--s5)) clamp(var(--s3), 2.4vw, var(--s4)) clamp(var(--s4), 2.6vw, var(--s4));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
  transition: transform .4s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.lekt-ask::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0; transition: opacity .3s var(--ease);
}
.lekt-ask:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--brand) 42%, var(--hairline));
  box-shadow: 0 0 50px -24px var(--brand-glow), var(--shadow-lg), var(--inset-line);
}
.lekt-ask:hover::before { opacity: 1; }
.lekt-ask-no {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: var(--s3);
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--brand-bright);
  background: color-mix(in oklab, var(--brand) 16%, var(--space-700));
  border: 1px solid color-mix(in oklab, var(--brand) 40%, var(--hairline));
  box-shadow: 0 0 18px -6px var(--brand-glow), var(--inset-line);
}
.lekt-ask-q {
  font-size: var(--step-1); line-height: 1.25; color: var(--ink);
  letter-spacing: -.01em; margin-bottom: var(--s2); text-wrap: balance;
}
.lekt-ask-a {
  font-size: var(--step-0); line-height: 1.6; color: var(--muted); text-wrap: pretty;
}

/* ---------- Merksatz (große Raki-Keynote-Karte) ---------- */
.lekt-keynote-section { padding-block: clamp(var(--s4), 4vw, var(--s6)); }
.lekt-keynote {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 56ch; margin-inline: auto; text-align: center;
  padding: clamp(var(--s5), 5vw, var(--s7)) clamp(var(--s4), 4vw, var(--s6));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 110% at 50% 0%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 58%),
    linear-gradient(180deg, var(--space-550), var(--space-700));
  border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 70px -16px var(--brand-glow);
}
.lekt-keynote-glow {
  position: absolute; z-index: -1; inset: -30% 0 auto 0; margin-inline: auto;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 70%);
  filter: blur(30px); opacity: .55; pointer-events: none;
}
.lekt-keynote-orbit {
  position: absolute; z-index: -1; inset: auto 0 8% 0; width: 100%; height: 90px;
  color: var(--brand); opacity: .3; pointer-events: none;
}
.lekt-keynote-rocket {
  position: absolute; right: 12%; bottom: 14%; width: 20px; height: 28px;
  z-index: -1; opacity: .8; transform-origin: 50% 80%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
  animation: ascentHover 6s var(--ease) infinite;
}
.lekt-keynote-rocket svg { width: 100%; height: 100%; }
.lekt-keynote-tag {
  display: inline-block; margin-bottom: var(--s3);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-bright);
}
.lekt-keynote-q {
  font-size: var(--step-3); line-height: 1.12; letter-spacing: -.02em;
  color: var(--ink); font-weight: 700; text-wrap: balance; margin-bottom: var(--s3);
}
.lekt-keynote-sub {
  font-size: var(--step-1); line-height: 1.55; color: var(--muted);
  max-width: 38ch; margin: 0 auto var(--s4); text-wrap: pretty;
}
.lekt-keynote-by {
  display: inline-flex; align-items: center; gap: 10px;
  padding-top: var(--s3); border-top: 1px solid var(--hairline);
  font-size: var(--step--1); font-weight: 600; color: var(--faint);
}
.lekt-keynote-raki {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--space-550) 92%, transparent), var(--space-800) 80%);
  border: 1px solid color-mix(in oklab, var(--brand) 36%, var(--hairline));
  box-shadow: inset 0 0 16px -8px var(--brand-glow);
}
.lekt-keynote-raki svg, .lekt-keynote-raki img.raki-kopf-bild { width: 28px; height: 28px; }

/* ---------- Für Eltern (ruhig, abgesetzt) ---------- */
.lekt-parents-section { padding-block: clamp(var(--s5), 5vw, var(--s7)); }
.lekt-parents {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--s4), 3.4vw, var(--s6)) clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in oklab, var(--cyan) 9%, transparent), transparent 56%),
    linear-gradient(180deg, var(--space-700), var(--space-800));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
}
.lekt-parents-glow {
  position: absolute; z-index: -1; inset: -24% -10% auto auto;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(95,224,232,.28), transparent 70%);
  filter: blur(30px); opacity: .5; pointer-events: none;
}
.lekt-parents-head { margin-bottom: var(--s4); }
.lekt-parents-kicker { color: var(--cyan-bright); margin-bottom: var(--s2); }
.lekt-parents-head h2 { font-size: var(--step-2); color: var(--ink); }
.lekt-parents-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.lekt-parents-item { display: flex; align-items: flex-start; gap: var(--s3); }
.lekt-parents-check {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; margin-top: 2px;
  color: var(--trust-bright);
  background: color-mix(in oklab, var(--trust) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--trust) 40%, var(--hairline));
}
.lekt-parents-check svg { width: 16px; height: 16px; }
.lekt-parents-item p {
  font-size: var(--step-0); line-height: 1.62; color: var(--muted); text-wrap: pretty;
}
.lekt-parents-item p strong { color: var(--ink); font-weight: 700; }

/* ---------- Abschluss-CTA ---------- */
.lekt-finish {
  position: relative; isolation: isolate; overflow: clip; text-align: center;
  padding-block: clamp(var(--s6), 7vw, 9rem) clamp(var(--s5), 6vw, 8rem);
}
.lekt-finish::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 80% at 50% 70%, var(--brand-glow), transparent 60%); opacity: .42;
}
.lekt-finish-inner { position: relative; max-width: 46ch; margin-inline: auto; }
.lekt-finish .kicker { margin-bottom: var(--s3); }
.lekt-finish h2 { font-size: var(--step-3); color: var(--ink); margin-bottom: var(--s2); }
.lekt-finish p {
  color: var(--muted); font-size: var(--step-1); line-height: 1.55;
  margin: 0 auto var(--s5); text-wrap: pretty;
}
.lekt-finish-cta {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
}

/* ---------- Lektion: responsiv ---------- */
@media (max-width: 860px) {
  .lekt-ask-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: var(--s3); }
  .lekt-ask { height: auto; }
}
@media (max-width: 560px) {
  .lekt-raki-tab { width: 52px; height: 52px; margin-left: var(--s2); }
  .lekt-pull-raki { display: none; }
  .lekt-pull { padding-left: clamp(var(--s4), 6vw, var(--s5)); }
  .lekt-keynote-rocket { display: none; }
}

/* ---------- Lektion: reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .lekt-progress { display: none; }
  .lekt-ask, .lekt-back svg { transition: none; }
  .lekt-ask:hover { transform: none; }
}

/* ============================================================
   PASSWORT-LEKTION (lektion-passwoerter.html) · additiv, pwl- gescopt
   Baut auf den Lektions- und Probe-Bausteinen auf. Zwei interaktive
   Werkzeuge: Rakis Passwort-Check (reaktives Gesicht) und der bereits
   bestehende Generator (siehe .lw-pwgen). Stärke-Farben sind hell genug
   für AA-Kontrast auf dem dunklen Grund.
   ============================================================ */

/* Stärke-Töne: rot (schwach) / gelb (ok) / grün = --trust (stark).
   Bewusst hell gewählt, damit Text und Rahmen auf Dunkel >= 4.5:1 treffen. */
:root {
  --pwl-weak:        #FF8C82;   /* korall-rot, Text auf #0B0F1F ~6.5:1 */
  --pwl-weak-glow:   rgba(255,140,130,.4);
  --pwl-ok:          #FFC861;   /* warmes Gelb, Text ~11:1 */
  --pwl-ok-glow:     rgba(255,200,97,.4);
}

/* Vier gleich hohe Bausteine: erbt das Lektions-Karten-Grid, nur 4-spaltig */
.pwl-traits-section { padding-block: clamp(var(--s5), 5vw, var(--s7)); }
.pwl-trait-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) and (min-width: 681px) {
  .pwl-trait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .pwl-trait-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .pwl-trait { height: auto; }
}

/* gemeinsamer Kicker-Ton der Mitmach-Blöcke (wie .probe) */
.pwl-check-kicker { color: var(--cyan-bright); }
.pwl-check-section { padding-top: clamp(var(--s4), 4vw, var(--s6)); }
.pwl-gen-section { padding-top: clamp(var(--s3), 3vw, var(--s5)); }
.pwl-gen-h { font-size: var(--step-2); margin-bottom: var(--s1); max-width: 18ch; }

/* ---------- Werkzeug 1: Rakis Passwort-Check ---------- */
.pwl-check {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 50rem; margin-inline: auto;
  padding: clamp(var(--s4), 3.4vw, var(--s5));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--cyan) 11%, transparent), transparent 56%),
    linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
}
.pwl-check-glow {
  position: absolute; z-index: -1; top: -24%; right: -10%;
  width: 50%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(95,224,232,.26), transparent 70%);
  filter: blur(28px); opacity: .5; pointer-events: none;
}

/* Raki-Pilot: Scanner-Scheibe + Sprechblase (wie .probe-pilot) */
.pwl-check-pilot {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4);
}
.pwl-scanner {
  position: relative; flex: none;
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--space-550) 90%, transparent), var(--space-800) 78%);
  border: 1px solid color-mix(in oklab, var(--cyan) 30%, var(--hairline));
  box-shadow: inset 0 0 22px -8px var(--brand-glow), 0 0 0 5px var(--space-800);
}
.pwl-face-svg { width: 64px; height: 72px; }
#pwlRing { transition: stroke .4s var(--ease); }
#pwlBrowL, #pwlBrowR, #pwlMouth { transition: d .35s var(--ease); }
.pwl-pilot-meta { min-width: 0; }
.pwl-pilot-name {
  display: block; font-size: var(--step--1); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-bright);
  margin-bottom: 7px;
}
/* Sprechblase: gleiche Sprache wie .probe-bubble */
.pwl-bubble {
  position: relative; background: var(--space-550); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 14px 14px 14px 5px;
  padding: 11px 15px 11px 40px; font-weight: 600; line-height: 1.45;
  font-size: var(--step-0);
}
.pwl-bubble::before {
  content: ""; position: absolute; left: 14px; top: 14px; width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cyan-bright) 0 60%, transparent 62%);
  box-shadow: 0 0 10px -2px var(--cyan);
}

/* Eingabefeld + zeigen/verbergen */
.pwl-field { margin-bottom: var(--s3); }
.pwl-field-label {
  display: block; margin-bottom: 8px;
  font-size: var(--step--1); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
}
.pwl-field-row { display: flex; align-items: stretch; gap: var(--s2); }
.pwl-input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: var(--step-1); font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: .02em; color: var(--ink);
  padding: 14px 17px; border-radius: var(--radius);
  background: var(--space-900);
  border: 1px solid color-mix(in oklab, var(--cyan) 22%, var(--hairline));
  box-shadow: var(--inset-line), inset 0 0 24px -14px var(--cyan);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pwl-input::placeholder { color: var(--faint); font-weight: 500; letter-spacing: 0; }
.pwl-input:focus { outline: none; }
.pwl-input:focus-visible {
  border-color: var(--cyan); box-shadow: var(--inset-line), 0 0 0 3px rgba(95,224,232,.3);
}
.pwl-reveal {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 0 16px; border-radius: var(--radius);
  background: rgba(255,255,255,.05); color: var(--ink);
  border: 1px solid var(--hairline);
  transition: transform .25s var(--ease-out), background .2s var(--ease), border-color .2s var(--ease);
}
.pwl-reveal:hover { background: rgba(255,255,255,.1); border-color: var(--cyan); transform: translateY(-2px); }
.pwl-reveal:active { transform: translateY(0) scale(.985); }
.pwl-eye { width: 18px; height: 18px; flex: none; }
.pwl-reveal-label { font-size: var(--step--1); }
/* globales svg{display:block} würde [hidden] sonst überstimmen: hier echt verbergen */
.pwl-eye[hidden], .pwl-mark-todo[hidden], .pwl-mark-done[hidden] { display: none; }

/* Stärke-Anzeige: drei Segmente + ehrliches Wort */
.pwl-strength { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.pwl-strength-bar { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pwl-strength-bar span {
  flex: 1; height: 8px; border-radius: var(--pill);
  background: var(--hairline);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.pwl-strength-bar[data-level="1"] span:nth-child(1) { background: var(--pwl-weak); box-shadow: 0 0 10px -2px var(--pwl-weak-glow); }
.pwl-strength-bar[data-level="2"] span:nth-child(-n+2) { background: var(--pwl-ok); box-shadow: 0 0 10px -2px var(--pwl-ok-glow); }
.pwl-strength-bar[data-level="3"] span { background: var(--trust); box-shadow: 0 0 10px -2px var(--trust); }
.pwl-strength-word {
  flex: none; font-weight: 700; font-size: var(--step-0);
  color: var(--faint); font-variant-numeric: tabular-nums;
  min-width: 5.5em; text-align: right;
}
.pwl-strength-word[data-level="1"] { color: var(--pwl-weak); }
.pwl-strength-word[data-level="2"] { color: var(--pwl-ok); }
.pwl-strength-word[data-level="3"] { color: var(--trust-bright); }

/* Live-Checkliste */
.pwl-checklist {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s2) var(--s3); margin-bottom: var(--s4);
}
.pwl-checkitem {
  display: flex; align-items: center; gap: 11px;
  font-size: var(--step-0); font-weight: 600; color: var(--muted);
  transition: color .25s var(--ease);
}
.pwl-checkmark {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--faint);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hairline);
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.pwl-checkmark svg { width: 15px; height: 15px; }
.pwl-checkitem.is-done { color: var(--ink); }
.pwl-checkitem.is-done .pwl-checkmark {
  color: var(--trust-bright);
  background: color-mix(in oklab, var(--trust) 18%, transparent);
  border-color: color-mix(in oklab, var(--trust) 48%, var(--hairline));
  box-shadow: 0 0 14px -5px var(--trust);
}

.pwl-privacy {
  display: flex; align-items: center; gap: 9px;
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--hairline);
  font-size: var(--step--1); color: var(--trust-bright); font-weight: 600; line-height: 1.4;
}
.pwl-privacy svg { color: var(--trust); flex: none; }

/* ---------- Werkzeug 1: responsiv ---------- */
@media (max-width: 560px) {
  .pwl-check-pilot { flex-direction: column; text-align: center; }
  .pwl-pilot-meta { text-align: left; }
  .pwl-field-row { flex-direction: column; }
  .pwl-reveal { justify-content: center; padding: 12px 16px; }
  .pwl-strength { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .pwl-strength-word { text-align: left; min-width: 0; }
  .pwl-checklist { grid-template-columns: 1fr; }
}

/* ---------- Passwort-Lektion: reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  #pwlRing, #pwlBrowL, #pwlBrowR, #pwlMouth { transition: none; }
  .pwl-checkmark, .pwl-checkitem, .pwl-strength-bar span { transition: none; }
}

/* ============================================================
   SÄULEN-SEITE · RocketKidz (additiv, Prefix pillar- / rk-)
   Dark-Cosmic-Säulenseite: links Titel/Lead/Vorschau, rechts das
   Mission-Abzeichen. Darunter die Lektionsliste als Grid mit
   pixelgenau gleich hohen Karten (grid-auto-rows:1fr + align-items:
   stretch + height:100%). Eine echte, klickbare Lektion (Korall),
   22 gedämpfte, AA-lesbare "Bald"-Karten, dazwischen der
   Startrampe-Trenner.
   ============================================================ */

/* ---------- Kopfbereich der Säule ---------- */
.pillar-head {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(var(--s5), 6vw, var(--s7)) clamp(var(--s4), 3vw, var(--s5));
}
.pillar-head-glow {
  position: absolute; z-index: -1; inset: -24% -10% auto auto;
  width: min(54vw, 560px); aspect-ratio: 1;
  background: radial-gradient(circle at 62% 42%, var(--brand-glow), transparent 64%);
  filter: blur(26px); opacity: .55; pointer-events: none;
}
.pillar-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s4);
  font-size: var(--step--1); font-weight: 650; color: var(--muted);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .25s var(--ease);
}
.pillar-back svg { transition: transform .3s var(--ease-out); }
.pillar-back:hover { color: var(--ink); border-bottom-color: var(--cyan); }
.pillar-back:hover svg { transform: translateX(-3px); }

/* zweispaltig: Copy links, Abzeichen rechts; bricht auf Mobil um */
.pillar-head-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(var(--s4), 4vw, var(--s7));
  align-items: center;
}
.pillar-head-copy { max-width: 56ch; min-width: 0; }
.pillar-head .kicker { margin-bottom: var(--s2); }
.pillar-title {
  font-size: var(--step-4); line-height: 1.02; letter-spacing: -.03em;
  color: var(--ink); margin-bottom: var(--s3);
}
.pillar-lead { font-size: var(--step-1); color: var(--muted); line-height: 1.5; max-width: 48ch; }
.pillar-note {
  display: inline-flex; align-items: flex-start; gap: 10px;
  margin-top: var(--s4); padding: 12px 16px;
  border-radius: var(--radius); max-width: 52ch;
  background: color-mix(in oklab, var(--space-600) 60%, transparent);
  border: 1px solid var(--hairline); box-shadow: var(--inset-line);
  font-size: var(--step--1); color: var(--muted); line-height: 1.5;
}
.pillar-note svg { color: var(--brand-bright); flex: none; margin-top: 2px; }

/* ---------- Mission-Abzeichen (großer Patch, gleiche Sprache wie lernwelt) ---------- */
.pillar-badge {
  flex: none; justify-self: center;
  width: clamp(168px, 22vw, 248px); aspect-ratio: 1;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.55));
  animation: pillarBadgeFloat 7s var(--ease) infinite;
}
.pillar-badge svg { width: 100%; height: 100%; }
@keyframes pillarBadgeFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(1.4deg); }
}

/* ---------- Fortschritts-Streifen "1 von 23 schon da" ---------- */
.pillar-progress {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; margin-top: clamp(var(--s4), 3vw, var(--s5));
  padding-top: var(--s4); border-top: 1px solid var(--hairline);
}
.pillar-progress-bar {
  position: relative; flex: 1 1 220px; min-width: 160px;
  height: 8px; border-radius: var(--pill);
  background: color-mix(in oklab, var(--space-550) 70%, transparent);
  border: 1px solid var(--hairline-2); overflow: hidden;
}
.pillar-progress-bar span {
  position: absolute; inset: 0 auto 0 0; width: var(--pillar-prog, 4%);
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-bright));
  box-shadow: 0 0 14px -2px var(--brand-glow);
}
.pillar-progress-label {
  font-size: var(--step--1); color: var(--muted); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pillar-progress-label b { color: var(--ink); font-weight: 700; }

@media (max-width: 760px) {
  .pillar-head-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .pillar-badge { justify-self: start; order: -1; width: clamp(150px, 40vw, 200px); }
}

/* ---------- Lektions-Liste (gleich hohe Karten) ---------- */
.pillar-lessons-section { padding-top: clamp(var(--s4), 4vw, var(--s6)); }
.pillar-lessons-head { max-width: 46ch; margin-bottom: var(--s5); }
.pillar-lessons-head .kicker { margin-bottom: var(--s2); }
.pillar-lessons-head h2 { font-size: var(--step-3); margin-bottom: var(--s3); }
.pillar-lessons-head .lead { max-width: 44ch; }

.pillar-lessons {
  list-style: none; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;            /* jede Zeilen-Spur gleich hoch */
  gap: clamp(var(--s3), 2.4vw, var(--s4));
  align-items: stretch;           /* erzwingt gleiche Kartenhöhe */
}
.pillar-lesson { position: relative; min-width: 0; display: flex; }

/* gemeinsame Karte: füllt die Zeilenhöhe, Tagline sitzt unten */
.rk-card {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100%; width: 100%;
  display: flex; flex-direction: column;
  padding: clamp(var(--s3), 2.4vw, var(--s4));
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
}
.rk-card-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: var(--s2);
}
.rk-card-no {
  flex: none; display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 9px;
  font-size: var(--step--1); font-weight: 700; font-variant-numeric: tabular-nums;
  background: color-mix(in oklab, var(--space-550) 70%, transparent);
  border: 1px solid var(--hairline); color: var(--faint);
}
.rk-card h3 { font-size: var(--step-1); line-height: 1.2; letter-spacing: -.018em; }
.rk-card p { color: var(--muted); font-size: var(--step-0); line-height: 1.5; margin-top: 4px; }
.rk-card-foot {
  margin-top: auto; padding-top: var(--s3);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--step--1); font-weight: 700;
}

/* ECHTE Lektion: volle Surface, Korall-Akzent, Hover-Lift */
.rk-card.is-live {
  background: linear-gradient(180deg, var(--space-600), var(--space-700));
  box-shadow: var(--shadow-md), var(--inset-line);
  transition: transform .4s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.rk-card.is-live::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(120% 90% at 18% -10%, var(--brand-glow), transparent 52%);
  opacity: .5; pointer-events: none;
}
.rk-card.is-live .rk-card-no {
  background: color-mix(in oklab, var(--brand) 22%, transparent);
  border-color: color-mix(in oklab, var(--brand) 50%, var(--hairline));
  color: var(--brand-bright);
}
.rk-card.is-live .rk-card-foot { color: var(--brand-bright); }
.rk-card.is-live h3 { color: var(--ink); }
.rk-card.is-live .rk-go-arrow { transition: transform .3s var(--ease-out); }
.rk-card.is-live:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--brand) 48%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line);
}
.rk-card.is-live:hover .rk-go-arrow { transform: translateX(5px); }

/* kleines "Verfügbar"-Label oben rechts auf der echten Karte */
.rk-live-flag {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--step--1); font-weight: 700; letter-spacing: .04em;
  color: var(--brand-bright);
}
.rk-live-flag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 0 var(--brand-glow);
  animation: rkLivePulse 2.6s ease-out infinite;
}
@keyframes rkLivePulse {
  0% { box-shadow: 0 0 0 0 var(--brand-glow); }
  70% { box-shadow: 0 0 0 8px rgba(255,111,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,111,94,0); }
}


/* dezenter Identitäts-Hauch beim Hover der echten Karte (Theme-treu) */
body[data-theme="blue"] .rk-card.is-live::before {
  background: radial-gradient(120% 90% at 18% -10%, var(--brand-glow), transparent 52%);
}

/* ---------- Startrampe-Trenner zwischen echter Lektion und Vorschau ---------- */
.pillar-rampe {
  display: flex; align-items: center; gap: var(--s3);
  margin: clamp(var(--s5), 5vw, var(--s6)) 0 clamp(var(--s4), 3vw, var(--s5));
  padding: clamp(var(--s3), 2.4vw, var(--s4)) clamp(var(--s3), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg,
    color-mix(in oklab, var(--space-600) 80%, transparent),
    color-mix(in oklab, var(--space-700) 80%, transparent));
  border: 1px solid var(--hairline);
  box-shadow: var(--inset-line);
}
.pillar-rampe-raki {
  flex: none; width: clamp(44px, 7vw, 56px); height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.pillar-rampe-raki svg, .pillar-rampe-raki img.raki-kopf-bild { width: 100%; height: 100%; }
.pillar-rampe-text { min-width: 0; }
.pillar-rampe-text strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-1); letter-spacing: -.015em; color: var(--ink);
  margin-bottom: 3px;
}
.pillar-rampe-text span { color: var(--muted); font-size: var(--step-0); line-height: 1.5; }

@media (max-width: 980px) and (min-width: 561px) {
  .pillar-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pillar-lessons { grid-template-columns: minmax(0, 1fr); }
  .pillar-rampe { flex-direction: column; text-align: center; }
  .pillar-rampe-text { text-align: center; }
}

/* ---------- Säulen-Seite: reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .pillar-badge { animation: none; }
  .rk-card.is-live, .rk-card.is-live .rk-go-arrow { transition: none; }
  .rk-card.is-live:hover { transform: none; }
  .rk-live-flag::before { animation: none; }
}

/* ====================================================================
   Säulen-Identität: Akzent je Säule (Modifier am <body>)
   Die Farbtokens (--trust, --cyan) liegen im :root und bleiben in beiden
   Themes stabil, damit jede Säule ihre eigene Farbe behält.
   ==================================================================== */

/* Säule 2 MindShield: Grün/Vertrauen */
.pillar-ms {
  --pil: var(--trust);
  --pil-bright: var(--trust-bright);
  --pil-glow: rgba(84,224,139,.42);
}
/* Säule 3 CyberAcademy: Blau/Cyan */
.pillar-ca {
  --pil: var(--cyan);
  --pil-bright: var(--cyan-bright);
  --pil-glow: rgba(95,224,232,.42);
}

/* Kopfbereich: Glow + Hinweis-Icon + Fortschritt in Säulenfarbe */
.pillar-ms .pillar-head-glow,
.pillar-ca .pillar-head-glow {
  background: radial-gradient(circle at 62% 42%, var(--pil-glow), transparent 64%);
}
.pillar-ms .pillar-note svg,
.pillar-ca .pillar-note svg { color: var(--pil-bright); }
.pillar-ms .pillar-back:hover,
.pillar-ca .pillar-back:hover { border-bottom-color: var(--pil); }

.pillar-ms .pillar-progress-bar span,
.pillar-ca .pillar-progress-bar span {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--pil) 62%, #0B0F1F),
    var(--pil-bright));
  box-shadow: 0 0 14px -2px var(--pil-glow);
}

/* Abschluss-CTA: Glühen in Säulenfarbe */
.pillar-ms .lw-finish::before,
.pillar-ca .lw-finish::before {
  background: radial-gradient(120% 90% at 50% 118%, var(--pil-glow), transparent 56%);
}

/* Echte Lektion (nur MindShield hat eine): Akzent grün statt Korall */
.pillar-ms .rk-card.is-live::before {
  background: radial-gradient(120% 90% at 18% -10%, var(--pil-glow), transparent 52%);
}
.pillar-ms .rk-card.is-live .rk-card-no {
  background: color-mix(in oklab, var(--pil) 22%, transparent);
  border-color: color-mix(in oklab, var(--pil) 50%, var(--hairline));
  color: var(--pil-bright);
}
.pillar-ms .rk-card.is-live .rk-card-foot { color: var(--pil-bright); }
.pillar-ms .rk-card.is-live:hover {
  border-color: color-mix(in oklab, var(--pil) 48%, var(--hairline));
}
.pillar-ms .rk-live-flag { color: var(--pil-bright); }
.pillar-ms .rk-live-flag::before {
  background: var(--pil); box-shadow: 0 0 0 0 var(--pil-glow);
  animation: msLivePulse 2.6s ease-out infinite;
}
@keyframes msLivePulse {
  0% { box-shadow: 0 0 0 0 var(--pil-glow); }
  70% { box-shadow: 0 0 0 8px rgba(84,224,139,0); }
  100% { box-shadow: 0 0 0 0 rgba(84,224,139,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-ms .rk-live-flag::before { animation: none; }
}

/* ============================================================
   ADDITIV (v=49): CyberAcademy hat jetzt echte Lektionen.
   Akzent der is-live-Karten in Säulenfarbe Cyan, analog zu
   den bestehenden .pillar-ms-Regeln. Tokens aus dem :root.
   ============================================================ */
.pillar-ca .rk-card.is-live::before {
  background: radial-gradient(120% 90% at 18% -10%, var(--pil-glow), transparent 52%);
}
.pillar-ca .rk-card.is-live .rk-card-no {
  background: color-mix(in oklab, var(--pil) 22%, transparent);
  border-color: color-mix(in oklab, var(--pil) 50%, var(--hairline));
  color: var(--pil-bright);
}
.pillar-ca .rk-card.is-live .rk-card-foot { color: var(--pil-bright); }
.pillar-ca .rk-card.is-live:hover {
  border-color: color-mix(in oklab, var(--pil) 48%, var(--hairline));
}
.pillar-ca .rk-live-flag { color: var(--pil-bright); }
.pillar-ca .rk-live-flag::before {
  background: var(--pil); box-shadow: 0 0 0 0 var(--pil-glow);
  animation: caLivePulse 2.6s ease-out infinite;
}
@keyframes caLivePulse {
  0% { box-shadow: 0 0 0 0 var(--pil-glow); }
  70% { box-shadow: 0 0 0 8px rgba(95,224,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,224,232,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-ca .rk-live-flag::before { animation: none; }
}


/* Schutzzone rechts oben: Titelzeile bricht vor dem Label um, damit
   das "Verfügbar"-Label nie den Titeltext überdeckt. Lange
   Einzelwörter brechen sauber per Silbentrennung statt unters Label
   zu laufen (lang="de" ist gesetzt). */
/* Titel unter dem Status-Fähnchen, volle Breite statt Schmalspalte */
.rk-card-head { margin-top: 14px; }
.rk-card-head h3 { hyphens: manual; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }


/* ============================================================
   FÜR ELTERN (eltern.html) · additiv, el- gescopt
   Dark Cosmic, System-Fonts, vorhandene Tokens. Eltern werden
   durchgehend gesiezt. Karten je Gruppe gleich hoch (Grid stretch).
   FAQ als native <details>/<summary> mit sichtbarem Fokus und
   klarem Auf/Zu-Zustand. Motion nur transform/opacity.
   ============================================================ */

/* ---------- Hero: Copy + Überblick-Karte nebeneinander ---------- */
.el-hero-grid {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(var(--s4), 5vw, var(--s7)); align-items: center;
}
.el-hero-copy h1 {
  font-size: var(--step-4); line-height: 1.04; letter-spacing: -.03em;
  margin-bottom: var(--s3); max-width: 16ch; color: var(--ink);
}
.el-hero-copy .lead { max-width: 44ch; }
.el-cta-row { display: flex; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s5); flex-wrap: wrap; }

/* Überblick-Karte: angehobene Glas-/Tiefen-Fläche, kein generischer Kasten */
.el-overview {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--cyan) 10%, transparent), transparent 56%),
    linear-gradient(180deg, var(--space-550), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg), var(--inset-line);
}
.el-overview-glow {
  position: absolute; z-index: -1; inset: -28% -14% auto auto;
  width: 56%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(95,224,232,.26), transparent 70%);
  filter: blur(30px); opacity: .55; pointer-events: none;
}
.el-overview-kicker { color: var(--cyan-bright); margin-bottom: var(--s2); display: block; }
.el-overview-title { font-size: var(--step-2); color: var(--ink); margin-bottom: var(--s4); }

/* Checkliste (auch für Sicherheit wiederverwendet) */
.el-checklist, .el-safety-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.el-checklist li, .el-safety-list li {
  display: flex; align-items: flex-start; gap: var(--s3);
  font-size: var(--step-0); line-height: 1.55; color: var(--muted); text-wrap: pretty;
}
.el-check {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; margin-top: 1px;
  color: var(--trust-bright);
  background: color-mix(in oklab, var(--trust) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--trust) 40%, var(--hairline));
}
.el-check svg { width: 15px; height: 15px; }

@media (max-width: 880px) {
  .el-hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .el-hero-copy h1 { max-width: none; }
}

/* ---------- Haltung: ruhiges Statement, editoriale Akzent-Linie ---------- */
.el-stance-section { padding-bottom: 0; }
.el-stance { position: relative; max-width: 60ch; padding-left: clamp(var(--s3), 2.4vw, var(--s4)); }
.el-stance-rule {
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-bright), color-mix(in oklab, var(--cyan) 60%, transparent));
  box-shadow: 0 0 14px -2px var(--brand-glow);
}
.el-stance .kicker { display: block; margin-bottom: var(--s2); }
.el-stance h2 { font-size: var(--step-3); color: var(--ink); margin-bottom: var(--s3); }
.el-stance-text { font-size: var(--step-1); line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------- So geht es zu Hause: drei gleich hohe Schrittkarten ---------- */
.el-step-grid {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(var(--s3), 2vw, var(--s4)); align-items: stretch; counter-reset: el-step;
}
.el-step {
  position: relative; height: 100%; display: flex; flex-direction: column;
  padding: clamp(var(--s4), 3vw, var(--s5)) clamp(var(--s4), 2.4vw, var(--s4));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--space-700), var(--space-800));
  border: 1px solid var(--hairline); box-shadow: var(--shadow-md), var(--inset-line);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.el-step:hover {
  transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 34%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 36px -16px var(--brand-glow);
}
.el-step-no {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: var(--s3);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  color: var(--brand-bright); border-radius: 14px;
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 36%, var(--hairline));
  box-shadow: inset 0 0 16px -8px var(--brand-glow);
}
.el-step-title { font-size: var(--step-1); color: var(--ink); margin-bottom: var(--s2); }
.el-step-text { font-size: var(--step-0); line-height: 1.6; color: var(--muted); text-wrap: pretty; }

@media (max-width: 860px) {
  .el-step-grid { grid-template-columns: 1fr; }
}

/* ---------- Bildschirmzeit: Copy + Lektions-Hinweis als dezente Karte ---------- */
.el-screen {
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(var(--s4), 4vw, var(--s6)); align-items: center;
}
.el-screen-copy h2 { font-size: var(--step-3); color: var(--ink); margin: var(--s2) 0 var(--s3); }
.el-screen-text { font-size: var(--step-0); line-height: 1.62; color: var(--muted); margin-bottom: var(--s4); text-wrap: pretty; }
.el-screen-copy .el-cta-row { margin-top: 0; }

/* Lektions-Hinweis: anklickbare Karte, kein echtes UI-Mock, sondern Wegweiser */
.el-screen-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg); color: var(--ink);
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 56%),
    linear-gradient(180deg, var(--space-550), var(--space-700));
  border: 1px solid color-mix(in oklab, var(--brand) 26%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 50px -22px var(--brand-glow);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.el-screen-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--brand) 42%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 60px -18px var(--brand-glow);
}
.el-screen-card-glow {
  position: absolute; z-index: -1; inset: -30% auto auto -20%;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 70%);
  filter: blur(28px); opacity: .5; pointer-events: none;
}
.el-screen-card-tag {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-bright);
}
.el-screen-card-title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; color: var(--ink); line-height: 1.18; }
.el-screen-card-quote { display: flex; align-items: flex-start; gap: 12px; }
.el-screen-card-raki {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--space-550) 92%, transparent), var(--space-800) 80%);
  border: 1px solid color-mix(in oklab, var(--brand) 36%, var(--hairline));
  box-shadow: inset 0 0 16px -8px var(--brand-glow);
}
.el-screen-card-raki svg, .el-screen-card-raki img.raki-kopf-bild { width: 26px; height: 26px; }
.el-screen-card-quote-text { font-size: var(--step-0); line-height: 1.5; color: var(--muted); font-style: italic; }
.el-screen-card-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  font-size: var(--step--1); font-weight: 700; color: var(--brand-bright);
}
.el-screen-card-go svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.el-screen-card:hover .el-screen-card-go svg { transform: translateX(4px); }

@media (max-width: 880px) {
  .el-screen { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (prefers-reduced-motion: reduce) {
  .el-step, .el-screen-card, .el-screen-card-go svg { transition: none; }
  .el-step:hover, .el-screen-card:hover { transform: none; }
  .el-screen-card:hover .el-screen-card-go svg { transform: none; }
}

/* ---------- Gesprächsstarter: FAQ als native <details>/<summary> ---------- */
.el-faq { list-style: none; display: flex; flex-direction: column; gap: var(--s3); max-width: 64ch; }
.el-detail {
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--space-700), var(--space-800));
  border: 1px solid var(--hairline); box-shadow: var(--inset-line);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.el-detail:hover { border-color: color-mix(in oklab, var(--cyan) 30%, var(--hairline)); }
/* offener Zustand klar sichtbar: Korall-Rahmen + sanfter Glow */
.el-detail[open] {
  border-color: color-mix(in oklab, var(--brand) 38%, var(--hairline));
  box-shadow: var(--inset-line), 0 0 40px -20px var(--brand-glow);
  background: linear-gradient(180deg, var(--space-550), var(--space-700));
}
.el-summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: clamp(var(--s3), 2.2vw, var(--s4));
  cursor: pointer; list-style: none; user-select: none;
  font-family: var(--font-display); font-weight: 650; font-size: var(--step-1);
  line-height: 1.3; color: var(--ink); letter-spacing: -.01em; text-wrap: pretty;
}
.el-summary::-webkit-details-marker { display: none; }
.el-summary-text { flex: 1; }
/* Fokus klar am Summary-Element sichtbar (Tastaturbedienung) */
.el-summary:focus-visible {
  outline: 3px solid var(--cyan-bright); outline-offset: -3px; border-radius: var(--radius);
}
.el-summary-icon {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--brand-bright);
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 32%, var(--hairline));
  transition: transform .3s var(--ease-out), background .25s var(--ease);
}
.el-summary-icon svg { width: 18px; height: 18px; }
.el-detail[open] .el-summary-icon { transform: rotate(180deg); background: color-mix(in oklab, var(--brand) 20%, transparent); }
.el-answer { padding: 0 clamp(var(--s3), 2.2vw, var(--s4)) clamp(var(--s3), 2.2vw, var(--s4)); }
.el-answer p {
  font-size: var(--step-0); line-height: 1.62; color: var(--muted); text-wrap: pretty;
  padding-top: var(--s2); border-top: 1px solid var(--hairline);
}
.el-answer a { color: var(--brand-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color var(--dur, .25s) var(--ease); }
.el-answer a::after { content: " ›"; text-decoration: none; }
.el-answer a:hover { color: var(--ink); }
.el-answer a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  .el-detail, .el-summary-icon { transition: none; }
  .el-detail[open] .el-summary-icon { transform: rotate(180deg); }
}

/* ---------- Sicherheit zuerst: ruhige Karte mit Raki-Signet ---------- */
.el-safety-section { padding-top: 0; }
.el-safety {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--s4), 3.4vw, var(--s6)) clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in oklab, var(--trust) 8%, transparent), transparent 56%),
    linear-gradient(180deg, var(--space-700), var(--space-800));
  border: 1px solid var(--hairline); box-shadow: var(--shadow-md), var(--inset-line);
}
.el-safety-glow {
  position: absolute; z-index: -1; inset: -24% -10% auto auto;
  width: 44%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(84,224,139,.22), transparent 70%);
  filter: blur(30px); opacity: .5; pointer-events: none;
}
.el-safety-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.el-safety-raki {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--space-550) 92%, transparent), var(--space-800) 80%);
  border: 1px solid color-mix(in oklab, var(--trust) 34%, var(--hairline));
  box-shadow: inset 0 0 18px -8px rgba(84,224,139,.5);
}
.el-safety-raki svg, .el-safety-raki img.raki-kopf-bild { width: 38px; height: 38px; }
.el-safety-kicker { color: var(--trust-bright); margin-bottom: 6px; display: block; }
.el-safety-head h2 { font-size: var(--step-2); color: var(--ink); }
.el-safety-text { font-size: var(--step-0); line-height: 1.62; color: var(--muted); margin-bottom: var(--s4); max-width: 56ch; text-wrap: pretty; }
.el-safety-list li span:last-child { padding-top: 2px; }

/* ---------- Wenn etwas passiert ist: Hinweis-Box (Trust-Ton) ---------- */
.el-emergency-section { padding-top: 0; }
.el-notice {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: clamp(var(--s3), 2.6vw, var(--s4)) clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg); margin-top: var(--s5);
  background: color-mix(in oklab, var(--trust) 8%, var(--space-700));
  border: 1px solid color-mix(in oklab, var(--trust) 34%, var(--hairline));
  box-shadow: var(--inset-line);
}
.el-notice-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--trust-bright);
  background: color-mix(in oklab, var(--trust) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--trust) 40%, var(--hairline));
}
.el-notice-icon svg { width: 22px; height: 22px; }
.el-notice-text { font-size: var(--step-0); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.el-notice-text strong { color: var(--ink); font-weight: 700; }
.el-notice-link {
  color: var(--trust-bright); font-weight: 650;
  border-bottom: 2px solid transparent; transition: border-color .25s var(--ease);
}
.el-notice-link:hover { border-bottom-color: var(--trust); }

/* ---------- Merksatz + Abschluss: erbt Lektions-Bausteine ---------- */
.el-keynote-section { padding-block: clamp(var(--s4), 4vw, var(--s6)); }

@media (prefers-reduced-motion: reduce) {
  .el-notice-link { transition: none; }
}

/* ============================================================
   FÜR SCHULEN (schulen.html) · additiv, sch- gescopt
   B2B-/Conversion-Seite im selben Dark-Cosmic-System. Greift Tokens,
   Buttons, Header/Footer/Cosmos, Säulen-Patches (lw-pillar) 1:1 wieder
   auf. Schulen/Lehrkräfte werden durchgehend gesiezt, neutral formuliert
   (Lehrkräfte). Karten je Gruppe gleich hoch (Grid stretch). FAQ als
   native <details>/<summary>. Kontakt-Formular ohne Backend: baut beim
   Absenden einen mailto-Link, speichert nichts. Motion nur transform/
   opacity.
   ============================================================ */

/* visuell verborgen, für Screenreader erhalten (Stat-Überschrift) */
.sch-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Header-CTA nur auf Schul-Seite (klein, vor dem Theme-Toggle) */
/* Zwischen 821 und 1200px konkurriert der Header-CTA mit der sichtbaren Nav um Platz.
   Dort hat die Navigation Vorrang; der CTA erscheint erst wieder bei genug Breite
   (>=1201px) oder wenn die Nav ausgeblendet ist (<=820px). Der Hero-CTA bleibt sowieso. */

/* ---------- Hero: Copy + Überblick-Karte nebeneinander ---------- */
.sch-hero-grid {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(var(--s4), 5vw, var(--s7)); align-items: center;
}
.sch-hero-copy h1 {
  font-size: var(--step-4); line-height: 1.04; letter-spacing: -.03em;
  margin-bottom: var(--s3); max-width: 16ch; color: var(--ink);
}
.sch-hero-copy .lead { max-width: 46ch; }
.sch-cta-row { display: flex; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s5); flex-wrap: wrap; }
.sch-cta-tight { margin-top: var(--s4); }

/* Überblick-Karte: angehobene Glas-/Tiefen-Fläche, kein generischer Kasten */
.sch-overview {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--cyan) 10%, transparent), transparent 56%),
    linear-gradient(180deg, var(--space-550), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg), var(--inset-line);
}
.sch-overview-glow {
  position: absolute; z-index: -1; inset: -28% -14% auto auto;
  width: 56%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(95,224,232,.26), transparent 70%);
  filter: blur(30px); opacity: .55; pointer-events: none;
}
.sch-overview-kicker { color: var(--cyan-bright); margin-bottom: var(--s2); display: block; }
.sch-overview-title { font-size: var(--step-2); color: var(--ink); margin-bottom: var(--s4); }

/* Checkliste (auch für Sicherheit wiederverwendet) */
.sch-checklist, .sch-safety-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.sch-checklist li, .sch-safety-list li {
  display: flex; align-items: flex-start; gap: var(--s3);
  font-size: var(--step-0); line-height: 1.55; color: var(--muted); text-wrap: pretty;
}
.sch-check {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; margin-top: 1px;
  color: var(--trust-bright);
  background: color-mix(in oklab, var(--trust) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--trust) 40%, var(--hairline));
}
.sch-check svg { width: 15px; height: 15px; }

@media (max-width: 880px) {
  .sch-hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .sch-hero-copy h1 { max-width: none; }
}

/* ---------- Warum: ruhiges Statement mit editorialer Akzent-Linie ---------- */
.sch-why-section { padding-bottom: 0; }
.sch-why { position: relative; max-width: 62ch; padding-left: clamp(var(--s3), 2.4vw, var(--s4)); }
.sch-why-rule {
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-bright), color-mix(in oklab, var(--cyan) 60%, transparent));
  box-shadow: 0 0 14px -2px var(--brand-glow);
}
.sch-why .kicker { display: block; margin-bottom: var(--s2); }
.sch-why h2 { font-size: var(--step-3); color: var(--ink); margin-bottom: var(--s3); }
.sch-why-text { font-size: var(--step-1); line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------- Was MindLaunch bietet: drei Momente ---------- */
.sch-offer-section .section-head { margin-bottom: var(--s5); }

/* Split-Block: Copy + Visual, abwechselnd. Reihenfolge bleibt im DOM
   sinnvoll (Copy zuerst); beim flip wird das Visual per Grid nach links
   gezogen, nicht im Quelltext getauscht. */
.sch-split {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(var(--s4), 4vw, var(--s6)); align-items: center;
  margin-bottom: clamp(var(--s5), 4vw, var(--s7));
}
.sch-split:last-child { margin-bottom: 0; }
.sch-split-copy .kicker { display: block; margin-bottom: var(--s2); }
.sch-split-copy h3 { font-size: var(--step-2); color: var(--ink); margin-bottom: var(--s3); line-height: 1.12; }
.sch-split-copy p { color: var(--muted); font-size: var(--step-0); line-height: 1.6; text-wrap: pretty; max-width: 46ch; }
.sch-split-flip .sch-split-visual { order: -1; }

/* Echte Beispiel-Lektion als anklickbare Karte (verlinkt lektion-passwoerter.html) */
.sch-lesson-card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  gap: var(--s3); padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline); box-shadow: var(--shadow-lg), var(--inset-line);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sch-lesson-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--trust) 38%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 40px -16px rgba(84,224,139,.4);
}
.sch-lesson-card-glow {
  position: absolute; z-index: -1; inset: auto auto -30% -20%;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(84,224,139,.22), transparent 70%);
  filter: blur(28px); opacity: .6; pointer-events: none;
}
.sch-lesson-bar { display: inline-flex; gap: 6px; }
.sch-lesson-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline); }
.sch-lesson-bar span:first-child { background: color-mix(in oklab, var(--brand) 70%, transparent); }
.sch-lesson-bar span:nth-child(2) { background: color-mix(in oklab, var(--cyan) 60%, transparent); }
.sch-lesson-tag { font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--trust-bright); }
.sch-lesson-title { font-size: var(--step-2); color: var(--ink); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.sch-lesson-quote {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3); border-radius: var(--radius);
  background: color-mix(in oklab, var(--cyan) 7%, var(--space-800));
  border: 1px solid color-mix(in oklab, var(--cyan) 22%, var(--hairline));
}
.sch-lesson-raki { flex: none; width: 38px; height: 38px; }
.sch-lesson-raki svg, .sch-lesson-raki img.raki-kopf-bild { width: 100%; height: 100%; }
.sch-lesson-quote-text { font-size: var(--step-0); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.sch-lesson-opts { display: flex; flex-direction: column; gap: var(--s2); }
.sch-lesson-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 12px; font-size: var(--step--1); color: var(--muted);
  background: rgba(255,255,255,.03); border: 1px solid var(--hairline-2);
}
.sch-lesson-opt svg { width: 16px; height: 16px; flex: none; }
.sch-lesson-opt.is-ok {
  color: var(--trust-bright); font-weight: 600;
  background: color-mix(in oklab, var(--trust) 12%, transparent);
  border-color: color-mix(in oklab, var(--trust) 36%, var(--hairline));
}
.sch-lesson-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--trust-bright);
}
.sch-lesson-go svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.sch-lesson-card:hover .sch-lesson-go svg { transform: translateX(4px); }

@media (max-width: 860px) {
  .sch-split { grid-template-columns: 1fr; gap: var(--s4); }
  .sch-split-flip .sch-split-visual { order: 0; }
}

/* ---------- Sicherheit: ruhiges, getöntes Statement ---------- */
.sch-safety {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--s4), 3.4vw, var(--s6));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in oklab, var(--trust) 9%, transparent), transparent 55%),
    linear-gradient(180deg, var(--space-700), var(--space-800));
  border: 1px solid var(--hairline); box-shadow: var(--shadow-md), var(--inset-line);
}
/* Gleichmaessiger Abstand zwischen den Momenten der Angebots-Sektion */
.sch-offer-section .sch-safety,
.sch-offer-section .sch-split-flip { margin-top: clamp(var(--s5), 5vw, var(--s6)); }
.sch-safety-glow {
  position: absolute; z-index: -1; inset: -26% auto auto -18%;
  width: 50%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(84,224,139,.18), transparent 70%);
  filter: blur(34px); opacity: .55; pointer-events: none;
}
.sch-safety-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.sch-safety-raki {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; padding: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid color-mix(in oklab, var(--trust) 30%, var(--hairline));
  box-shadow: 0 0 22px -8px rgba(84,224,139,.5);
}
.sch-safety-raki svg, .sch-safety-raki img.raki-kopf-bild { width: 100%; height: 100%; }
.sch-safety-kicker { color: var(--trust-bright); display: block; margin-bottom: var(--s1); }
.sch-safety h2 { font-size: var(--step-2); color: var(--ink); line-height: 1.12; }
.sch-safety-text { font-size: var(--step-1); line-height: 1.55; color: var(--muted); margin-bottom: var(--s4); max-width: 60ch; text-wrap: pretty; }
.sch-safety-list { gap: var(--s2); }
.sch-safety-list li { gap: var(--s2); }

/* ---------- Geräte-Visual (Laptop + Tablet, rein dekorativ) ---------- */
.sch-split-visual { min-width: 0; }
.sch-device-stage {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 240px; padding: var(--s4) var(--s3);
}
.sch-device-glow {
  position: absolute; z-index: -1; inset: 6% 8% 6% 8%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--brand-glow), transparent 66%);
  filter: blur(26px); opacity: .35;
}
.sch-dev-laptop { position: relative; width: min(78%, 320px); }
.sch-dev-laptop .sch-screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 12px 12px 4px 4px;
  background: linear-gradient(160deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline); border-bottom: 0; overflow: hidden;
  box-shadow: var(--shadow-md), var(--inset-line);
}
.sch-dev-base {
  height: 12px; border-radius: 0 0 12px 12px; margin: 0 -7%;
  background: linear-gradient(180deg, var(--space-550), var(--space-700));
  border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
}
.sch-dev-base::after {
  content: ""; display: block; width: 22%; height: 4px; margin: 3px auto 0;
  border-radius: 0 0 6px 6px; background: rgba(255,255,255,.08);
}
.sch-dev-tablet {
  position: absolute; right: 2%; bottom: 2%; width: 30%; max-width: 110px;
  aspect-ratio: 3 / 4; padding: 9px; border-radius: 14px;
  background: linear-gradient(165deg, var(--space-550), var(--space-700));
  border: 1px solid color-mix(in oklab, var(--cyan) 26%, var(--hairline));
  box-shadow: var(--shadow-lg);
}
.sch-mini-ui { display: flex; flex-direction: column; gap: 8px; padding: 12px; height: 100%; }
.sch-dev-tablet .sch-mini-ui { padding: 4px; gap: 6px; }
.sch-sk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.sch-sk-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; background: color-mix(in oklab, var(--brand) 60%, transparent); }
.sch-sk-line { height: 7px; border-radius: 4px; background: rgba(159,179,216,.22); }
.sch-sk-line.w40 { width: 40%; }
.sch-sk-line.w60 { width: 60%; }
.sch-sk-line.w75 { width: 75%; }
.sch-sk-line.w90 { width: 90%; }
.sch-sk-pill { margin-top: auto; width: 52%; height: 16px; border-radius: var(--pill); background: color-mix(in oklab, var(--brand) 40%, rgba(255,255,255,.06)); }
.sch-dev-tablet .sch-sk-pill { width: 70%; height: 12px; }

/* ---------- Klassenstufen: erbt lw-pillar (gleiche Patches/Karten) ---------- */
.sch-stages-section { padding-bottom: clamp(var(--s5), 4vw, var(--s6)); }

/* ---------- So starten: drei gleich hohe Schrittkarten ---------- */
.sch-step-grid {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: clamp(var(--s3), 2vw, var(--s4)); align-items: stretch;
}
.sch-step {
  position: relative; height: 100%; display: flex; flex-direction: column;
  padding: clamp(var(--s4), 3vw, var(--s5)) clamp(var(--s4), 2.4vw, var(--s4));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--space-700), var(--space-800));
  border: 1px solid var(--hairline); box-shadow: var(--shadow-md), var(--inset-line);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.sch-step:hover {
  transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 34%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 36px -16px var(--brand-glow);
}
.sch-step-no {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: var(--s3);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  color: var(--brand-bright); border-radius: 14px;
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 36%, var(--hairline));
  box-shadow: inset 0 0 16px -8px var(--brand-glow);
}
.sch-step-title { font-size: var(--step-1); color: var(--ink); margin-bottom: var(--s2); }
.sch-step-text { font-size: var(--step-0); line-height: 1.6; color: var(--muted); text-wrap: pretty; }

@media (max-width: 860px) {
  .sch-step-grid { grid-template-columns: 1fr; }
}

/* ---------- Zahlen-Leiste (ehrliche Stats) ---------- */
.sch-stats-section { padding-block: clamp(var(--s5), 4vw, var(--s6)); }
.sch-stats {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  gap: clamp(var(--s3), 3vw, var(--s5));
  padding: clamp(var(--s4), 3vw, var(--s5)) clamp(var(--s4), 4vw, var(--s6));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in oklab, var(--brand) 8%, transparent), transparent 60%),
    linear-gradient(180deg, var(--space-700), var(--space-800));
  border: 1px solid var(--hairline); box-shadow: var(--shadow-md), var(--inset-line);
}
.sch-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 140px; }
.sch-stat-num {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3);
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.sch-stat-accent { color: var(--brand-bright); text-shadow: 0 0 28px var(--brand-glow); }
.sch-stat-label { font-size: var(--step--1); color: var(--muted); line-height: 1.4; max-width: 18ch; }
.sch-stat-sep { width: 1px; align-self: stretch; background: var(--hairline); }

@media (max-width: 720px) {
  .sch-stats { flex-direction: column; gap: var(--s4); }
  .sch-stat-sep { width: 60%; height: 1px; align-self: center; }
}

/* ---------- FAQ: native details/summary ---------- */
.sch-faq-section { padding-top: 0; }
.sch-faq { list-style: none; display: flex; flex-direction: column; gap: var(--s2); max-width: 60rem; }
.sch-detail {
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, var(--space-700), var(--space-800));
  border: 1px solid var(--hairline); box-shadow: var(--inset-line);
  transition: border-color .25s var(--ease);
}
.sch-detail[open] { border-color: color-mix(in oklab, var(--brand) 32%, var(--hairline)); }
.sch-summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: clamp(var(--s3), 2vw, var(--s4)); cursor: pointer; list-style: none;
  font-size: var(--step-1); font-weight: 650; color: var(--ink); line-height: 1.3;
}
.sch-summary::-webkit-details-marker { display: none; }
.sch-summary:hover { color: var(--brand-bright); }
.sch-summary-text { text-wrap: pretty; }
.sch-summary-icon {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--brand-bright);
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--hairline));
  transition: transform .3s var(--ease-out);
}
.sch-summary-icon svg { width: 18px; height: 18px; }
.sch-detail[open] .sch-summary-icon { transform: rotate(180deg); }
.sch-answer { padding: 0 clamp(var(--s3), 2vw, var(--s4)) clamp(var(--s3), 2vw, var(--s4)); }
.sch-answer p { color: var(--muted); font-size: var(--step-0); line-height: 1.6; max-width: 64ch; text-wrap: pretty; }

/* ---------- Kontakt: Karte mit Formular ---------- */
.sch-contact-section { padding-top: 0; }
.sch-contact {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--s4), 4vw, var(--s7));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in oklab, var(--brand) 9%, transparent), transparent 58%),
    linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline); box-shadow: var(--shadow-lg), var(--inset-line);
}
.sch-contact-glow {
  position: absolute; z-index: -1; inset: -24% -10% auto auto;
  width: 52%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 70%);
  filter: blur(34px); opacity: .4; pointer-events: none;
}
.sch-contact-head { max-width: 52ch; margin-bottom: var(--s5); }
.sch-contact-head .kicker { display: block; margin-bottom: var(--s2); }
.sch-contact-head h2 { font-size: var(--step-3); color: var(--ink); margin-bottom: var(--s3); }
.sch-contact-head .lead { max-width: 48ch; margin-bottom: var(--s3); }
.sch-contact-direct { font-size: var(--step-0); color: var(--muted); }
.sch-contact-mail {
  color: var(--cyan-bright); font-weight: 650;
  border-bottom: 2px solid transparent; transition: border-color .25s var(--ease);
}
.sch-contact-mail:hover { border-bottom-color: var(--cyan); }

/* ---------- Formular ---------- */
.sch-form { display: flex; flex-direction: column; gap: var(--s3); max-width: 44rem; }
.sch-form-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.sch-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sch-field label { font-size: var(--step--1); font-weight: 650; color: var(--ink); letter-spacing: .01em; }
.sch-field input,
.sch-field textarea,
.sch-field select {
  font: inherit; font-size: var(--step-0); color: var(--ink); width: 100%;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(8,11,24,.6);
  border: 1px solid var(--hairline);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.sch-field textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.sch-field input::placeholder,
.sch-field textarea::placeholder { color: var(--faint); }
.sch-field input:hover,
.sch-field textarea:hover,
.sch-field select:hover { border-color: color-mix(in oklab, var(--cyan) 30%, var(--hairline)); }
.sch-field input:focus-visible,
.sch-field textarea:focus-visible,
.sch-field select:focus-visible {
  outline: 3px solid var(--cyan-bright); outline-offset: 2px;
  border-color: var(--cyan); background: rgba(8,11,24,.85);
}
/* Fehlerzustand (per JS gesetzt): roter Rand, deutlich sichtbar */
.sch-field.is-invalid input,
.sch-field.is-invalid select {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 0 22px -10px var(--brand-glow);
}

/* Select: eigener Pfeil, neutraler Hintergrund (kein grauer UA-Default) */
.sch-select-wrap { position: relative; }
.sch-select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.sch-select-wrap option { color: #0B0F1F; background: #EDF1FB; }
.sch-select-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--cyan-bright); display: grid; place-items: center;
}
.sch-select-icon svg { width: 18px; height: 18px; }

/* Einwilligungs-Checkbox: eigene, gut sichtbare Box */
.sch-check-row {
  display: flex; align-items: flex-start; gap: var(--s2); cursor: pointer;
  font-size: var(--step--1); color: var(--muted); line-height: 1.5; margin-top: 4px;
}
.sch-check-row input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.sch-check-box {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 7px; color: transparent;
  background: rgba(8,11,24,.6); border: 1px solid var(--hairline);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.sch-check-box svg { width: 15px; height: 15px; }
.sch-check-row input:checked ~ .sch-check-box {
  color: #2a0d07; background: var(--trust); border-color: var(--trust);
}
.sch-check-row input:focus-visible ~ .sch-check-box {
  outline: 3px solid var(--cyan-bright); outline-offset: 2px;
}
.sch-check-row:hover .sch-check-box { border-color: color-mix(in oklab, var(--cyan) 36%, var(--hairline)); }
.sch-check-row.is-invalid .sch-check-box {
  border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand);
}
.sch-check-text { text-wrap: pretty; }

.sch-form-submit { margin-top: var(--s2); align-self: flex-start; }
.sch-form-error {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--step--1); font-weight: 600; color: var(--brand-bright); line-height: 1.5;
  padding: 11px 14px; border-radius: 12px;
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 36%, var(--hairline));
}
.sch-form-error[hidden] { display: none; }
.sch-form-note { font-size: var(--step--1); color: var(--faint); line-height: 1.5; max-width: 56ch; }

@media (max-width: 620px) {
  .sch-form-two { grid-template-columns: 1fr; }
  .sch-form-submit { align-self: stretch; justify-content: center; }
}

/* ---------- Reduced Motion: alle sch-Transitionen ruhig stellen ---------- */
@media (prefers-reduced-motion: reduce) {
  .sch-lesson-card, .sch-lesson-go svg, .sch-step, .sch-detail,
  .sch-summary-icon, .sch-contact-mail, .sch-field input, .sch-field textarea,
  .sch-field select, .sch-check-box { transition: none; }
}

/* ======================================================================
   RECHTSSEITEN (datenschutz.html, impressum.html)
   Lese-Layout auf Dunkel: ruhige Spalte, klare Hierarchie, AA-Kontrast.
   Nutzt die bestehenden Tokens; Prefix legal-. Additiv, ohne Eingriff.
   ====================================================================== */

/* Kopf: greift das ruhige lw-intro-Muster auf (Glow + kicker + h1) */
.legal-page main { position: relative; isolation: isolate; }

.legal-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(var(--s6), 7vw, var(--s8)) clamp(var(--s4), 4vw, var(--s5));
}
.legal-hero-glow {
  position: absolute; z-index: -1; inset: -22% -8% auto auto;
  width: min(52vw, 520px); aspect-ratio: 1;
  background: radial-gradient(circle at 62% 40%, var(--brand-glow), transparent 66%);
  filter: blur(24px); opacity: .6; pointer-events: none;
}
.legal-hero-inner { max-width: 70ch; }
.legal-hero .kicker { margin-bottom: var(--s3); }
.legal-hero h1 {
  font-size: var(--step-3); line-height: 1.06; letter-spacing: -.025em;
  margin-bottom: var(--s3); max-width: 16ch;
}
.legal-hero-sub { color: var(--muted); font-size: var(--step-1); line-height: 1.55; max-width: 60ch; }

/* Lese-Spalte: angenehme measure, ruhige Zeilenführung.
   font-size hier setzen, damit die ch-Einheit auf der Fließtextgröße fußt
   und die measure real bei ~70ch landet (nicht auf der kleineren Body-Basis). */
.legal-body { padding-bottom: clamp(var(--s7), 6vw, var(--s8)); }
.legal-prose { max-width: 70ch; font-size: var(--step-0); }

/* Fließtext klar lesbar (muted ~9:1 auf Dunkel), entspannte Zeilenhöhe */
.legal-prose p,
.legal-prose li {
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.75;
  text-wrap: pretty;
}
.legal-prose p { margin-top: var(--s3); }
.legal-prose p:first-child { margin-top: 0; }

/* Hervorhebungen im Fließtext: hellerer Ton, mehr Gewicht */
.legal-prose strong { color: var(--ink); font-weight: 650; }

/* Abschnittsüberschriften: ruhige Rhythmus-Trennung, helle Farbe */
.legal-prose h2 {
  color: var(--ink);
  font-size: var(--step-2);
  line-height: 1.18;
  letter-spacing: -.018em;
  margin-top: var(--s6);
  margin-bottom: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
  text-wrap: balance;
}
/* Erste h2 ohne große Vorab-Lücke und ohne Trennlinie */
.legal-lead-section { margin-top: var(--s2); }
.legal-lead-section h2 {
  margin-top: 0; padding-top: 0; border-top: 0;
}

/* Listen: angenehme Einrückung, eigener Marker in Markenfarbe */
.legal-prose ul {
  list-style: none;
  margin-top: var(--s3);
  display: flex; flex-direction: column; gap: var(--s2);
}
.legal-prose ul li {
  position: relative;
  margin-top: 0;
  padding-left: calc(var(--s3) + 4px);
}
.legal-prose ul li::before {
  content: "";
  position: absolute; left: 4px; top: .72em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-bright);
  box-shadow: 0 0 10px -1px var(--brand-glow);
}

/* Hervorgehobener Versprechen-Block (analog Vorlage „parents") */
.legal-promise {
  margin-top: var(--s5);
  padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--trust) 24%, var(--hairline));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--trust) 9%, transparent), transparent 60%),
    linear-gradient(180deg, var(--space-600), var(--space-700));
  box-shadow: var(--inset-line);
}
.legal-promise .kicker { color: var(--trust-bright); margin-bottom: var(--s2); display: inline-block; }
.legal-promise h2 {
  margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: var(--s3);
  font-size: var(--step-1);
}
.legal-promise ul { margin-top: 0; }
.legal-promise ul li::before { background: var(--trust-bright); box-shadow: 0 0 10px -1px var(--trust); }

/* Links im Lesetext: ruhig, aber klar als Link erkennbar */
.legal-prose a {
  color: var(--cyan-bright);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--cyan-bright) 45%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
  word-break: break-word;
}
.legal-prose a:hover {
  color: var(--cyan);
  text-decoration-color: currentColor;
}

/* Stand-Hinweis am Ende */
.legal-stand {
  margin-top: var(--s5);
  color: var(--faint);
  font-size: var(--step--1);
}

/* Querverweis Datenschutz <-> Impressum am Fuß der Lesespalte */
.legal-crosslink {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
}
.legal-crosslink .btn-text { font-size: var(--step-0); }

/* Responsiv: kleine Schirme bekommen etwas mehr Luft in der Hierarchie */
@media (max-width: 560px) {
  .legal-prose h2 { margin-top: var(--s5); }
}

/* ============================================================
   MATERIAL-ÜBERSICHT (materialien.html) · Prefix mat-
   Dark-Cosmic Karten-Grid, gleich hohe Karten, AA-Kontrast
   ============================================================ */
.mat-page main { padding-bottom: var(--gap-section); }

.mat-intro { padding-top: clamp(var(--s6), 5vw + 2rem, var(--s8)); }
.mat-intro-inner { max-width: 56ch; }
.mat-intro .kicker { display: block; margin-bottom: var(--s2); }
.mat-intro h1 { font-size: var(--step-4); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); margin-bottom: var(--s3); text-wrap: balance; }
.mat-intro .lead { max-width: 50ch; }

/* Nicht druckbares Dokument-Detail: heller "Blatt"-Hinweis */
.mat-print-note {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--s4); padding: 10px 16px;
  border-radius: var(--pill);
  background: color-mix(in oklab, var(--cyan) 9%, var(--space-700));
  border: 1px solid color-mix(in oklab, var(--cyan) 24%, var(--hairline));
  color: var(--ink); font-size: var(--step--1); font-weight: 600;
}
.mat-print-note svg { width: 17px; height: 17px; flex: none; color: var(--cyan-bright); }
.mat-print-note span { color: var(--muted); font-weight: 500; }

/* Grid: gleich hohe Karten durch Stretch + Flex-Karte */
.mat-grid {
  margin-top: clamp(var(--s5), 4vw, var(--s6));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s3), 2.4vw, var(--s4));
  align-items: stretch;
}

.mat-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s3);
  height: 100%;
  padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
  color: var(--ink);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.mat-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--brand) 40%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 42px -16px var(--brand-glow);
}
.mat-card:focus-visible {
  outline: none;
  border-color: var(--brand-bright);
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 0 3px color-mix(in oklab, var(--brand) 55%, transparent);
}
.mat-card-glow {
  position: absolute; z-index: -1; inset: -30% -20% auto auto;
  width: 56%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 70%);
  filter: blur(30px); opacity: .5; pointer-events: none;
}

/* Kopf der Karte: kleines Raki-Blatt-Symbol + Säulen-Tag */
.mat-card-top { display: flex; align-items: center; gap: var(--s2); }
.mat-card-sheet {
  flex: none; width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in oklab, var(--brand) 12%, var(--space-800));
  border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--hairline));
}
.mat-card-sheet svg { width: 24px; height: 24px; color: var(--brand-bright); }
.mat-card-tag {
  margin-left: auto;
  font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.mat-card-tag.is-shield { color: var(--trust-bright); }
.mat-card-tag.is-rocket { color: var(--brand); }
.mat-card-tag.is-cyber { color: var(--cyan-bright); }
.mat-card-tag.is-fc { color: #B9A4FF; }

/* Material-Filter: nach Säule, blendet Karten clientseitig ein/aus */
.mat-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.mat-chip {
  font: inherit; font-size: var(--step--1); font-weight: 650; line-height: 1;
  color: var(--muted); background: transparent;
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 10px 18px; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
}
.mat-chip:hover { color: var(--ink); border-color: var(--hairline-2); transform: translateY(-1px); }
.mat-chip:focus-visible { outline: 3px solid var(--cyan-bright); outline-offset: 2px; }
.mat-chip.is-active { color: var(--ink); border-color: currentColor; background: color-mix(in oklab, var(--ink) 12%, transparent); }
.mat-card.is-hidden { display: none; }
.mat-item { display: flex; flex-direction: column; }
.mat-item .mat-card { flex: 1; }
.mat-item.is-hidden { display: none; }
.mat-pdf-link {
  margin-top: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 16px; border-radius: 14px;
  font-size: var(--step--1); font-weight: 700; text-decoration: none;
  color: var(--brand-bright);
  border: 1px solid color-mix(in srgb, var(--brand-bright) 38%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.mat-pdf-link:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); border-color: var(--brand-bright); transform: translateY(-1px); }
.mat-pdf-link svg { width: 16px; height: 16px; flex: none; }

.mat-card-title { font-size: var(--step-2); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.mat-card-text { color: var(--muted); font-size: var(--step-0); line-height: 1.55; text-wrap: pretty; }

/* "Aufgaben"-Mini-Liste gibt jeder Karte Substanz statt leerem Raum */
.mat-card-points { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.mat-card-points li { display: flex; align-items: center; gap: 10px; font-size: var(--step--1); color: var(--faint); }
.mat-card-points svg { width: 15px; height: 15px; flex: none; color: var(--brand-bright); }

.mat-card-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--brand-bright);
}
.mat-card-go svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.mat-card:hover .mat-card-go svg, .mat-card:focus-visible .mat-card-go svg { transform: translateX(4px); }

/* Ruhiger Lehrkräfte-Hinweis unter dem Grid */
.mat-teach {
  position: relative; overflow: hidden;
  margin-top: clamp(var(--s5), 4vw, var(--s6));
  padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in oklab, var(--trust) 9%, transparent), transparent 55%),
    linear-gradient(180deg, var(--space-700), var(--space-800));
  border: 1px solid var(--hairline); box-shadow: var(--shadow-md), var(--inset-line);
  display: flex; gap: var(--s4); align-items: flex-start;
}
.mat-teach-raki { flex: none; width: 52px; height: 52px; }
.mat-teach-raki svg, .mat-teach-raki img.raki-kopf-bild { width: 100%; height: 100%; }
.mat-teach h2 { font-size: var(--step-1); color: var(--ink); margin-bottom: var(--s1); }
.mat-teach p { color: var(--muted); font-size: var(--step-0); line-height: 1.6; text-wrap: pretty; max-width: 60ch; }

@media (max-width: 760px) {
  .mat-grid { grid-template-columns: minmax(0, 1fr); }
  .mat-teach { flex-direction: column; gap: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  .mat-card, .mat-card-go svg { transition: none; }
  .mat-card:hover { transform: none; }
}

/* ============================================================
   ÜBER RAKI (ueber-raki.html) · Prefix ueber-
   Dark-Cosmic. Hero mit freiem Raki, Lese-Spalte, vier gleich
   hohe Überzeugungs-Karten, Abschluss-CTA. Additiv, nur Tokens.
   ============================================================ */
.ueber-page main { position: relative; isolation: isolate; }

/* Hero: Copy links, Raki frei rechts (gleiche Sprache wie Startseite) */
.ueber-hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(var(--s6), 7vw, var(--s8)) clamp(var(--s5), 5vw, var(--s7)); }
.ueber-hero-glow { position: absolute; z-index: -1; inset: -20% -8% auto auto; width: min(56vw, 560px); aspect-ratio: 1; background: radial-gradient(circle at 60% 40%, var(--brand-glow), transparent 64%); filter: blur(22px); opacity: .7; pointer-events: none; }
.ueber-hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(var(--s4), 5vw, var(--s7)); align-items: center; }
.ueber-hero-copy .display { margin-block: var(--s3); }
.ueber-hero-copy .lead { max-width: 46ch; }
.ueber-hero-cta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s4); }

/* Raki frei (kein Kasten), dezentes Badge, ruhiger Halo */
.ueber-stage { position: relative; display: grid; place-items: center; }
.ueber-stage::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; z-index: 0; background: radial-gradient(circle, var(--brand-glow), transparent 68%); filter: blur(26px); opacity: .9; animation: breathe 7s ease-in-out infinite; }
.ueber-card { position: relative; z-index: 1; display: grid; place-items: center; }
.ueber-badge { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 7px; background: rgba(9,12,26,.78); color: var(--ink); border: 1px solid var(--hairline); font-size: var(--step--1); font-weight: 700; padding: 6px 13px; border-radius: var(--pill); backdrop-filter: blur(6px); white-space: nowrap; }
.ueber-badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--trust); box-shadow: 0 0 0 0 var(--trust); animation: pulse 2.4s ease-out infinite; }
.ueber-raki { position: relative; z-index: 2; width: clamp(220px, 30vw, 360px); height: auto; filter: drop-shadow(0 18px 34px rgba(0,0,0,.55)); animation: bob 4.5s var(--ease) infinite; }
.ueber-note { text-align: center; margin-top: var(--s3); color: var(--muted); font-size: var(--step--1); }

/* Lese-Spalte "Wer ist Raki": ruhige measure, klarer Kontrast */
.ueber-prose { max-width: 64ch; }
.ueber-prose p { color: var(--muted); font-size: var(--step-0); line-height: 1.75; text-wrap: pretty; margin-top: var(--s3); }
.ueber-prose p:first-child { margin-top: 0; }

/* Vier Überzeugungs-Karten: gleich hoch via Grid stretch + height:100% */
.ueber-values {
  margin-top: clamp(var(--s5), 4vw, var(--s6));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s3), 2.4vw, var(--s4));
  align-items: stretch;
}
.ueber-value {
  height: 100%;
  display: flex; flex-direction: column; gap: var(--s2);
  padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ueber-value:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--brand) 40%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 42px -16px var(--brand-glow);
}
.ueber-value-icon {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 12px; margin-bottom: var(--s1);
  background: color-mix(in oklab, var(--brand) 12%, var(--space-800));
  border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--hairline));
}
.ueber-value-icon svg { width: 24px; height: 24px; color: var(--brand-bright); }
.ueber-value h3 { font-size: var(--step-1); color: var(--ink); letter-spacing: -.02em; }
.ueber-value p { color: var(--muted); font-size: var(--step-0); line-height: 1.6; text-wrap: pretty; }

/* Abschluss-CTA: zentrierte, ruhige Zusage */
.ueber-finish { padding-block: clamp(var(--s6), 5vw, var(--s7)); text-align: center; }
.ueber-finish-inner { max-width: 46ch; margin-inline: auto; }
.ueber-finish h2 { font-size: var(--step-3); color: var(--ink); margin-bottom: var(--s4); }
.ueber-finish-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s3); }

@media (max-width: 880px) {
  .ueber-hero-grid { grid-template-columns: 1fr; text-align: center; gap: var(--s5); }
  .ueber-hero-copy .display, .ueber-hero-copy .lead { margin-inline: auto; }
  .ueber-hero-cta { justify-content: center; }
  .ueber-stage { order: -1; }
}
@media (max-width: 620px) {
  .ueber-values { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ueber-value { transition: none; }
  .ueber-value:hover { transform: none; }
  .ueber-stage::before, .ueber-raki, .ueber-badge .pulse { animation: none; }
}

/* ============================================================
   ECHTHEITS-CHECK (echtheit.html) · Prefix echt-
   Dark-Cosmic. Drei Bausteine als gleich hohe Karten, Zeichen-
   Buttons, Code-Prüfer, Eltern-Block. AA auf Dunkel, additiv.
   ============================================================ */
.echt-page main { position: relative; isolation: isolate; overflow-x: clip; }

/* overflow:clip kappt den Glow rechts, damit er die Seitenbreite nie aufbläht
   (gleiche Absicherung wie .legal-hero / .ueber-hero). */
.echt-intro { position: relative; isolation: isolate; overflow: clip; padding-top: clamp(var(--s6), 5vw + 2rem, var(--s8)); }
.echt-intro-glow { position: absolute; z-index: -1; inset: -22% -8% auto auto; width: min(52vw, 520px); aspect-ratio: 1; background: radial-gradient(circle at 62% 40%, var(--brand-glow), transparent 66%); filter: blur(24px); opacity: .6; pointer-events: none; }
.echt-intro-inner { max-width: 60ch; }
.echt-intro .kicker { display: block; margin-bottom: var(--s2); }
.echt-intro h1 { font-size: var(--step-4); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); margin-bottom: var(--s3); text-wrap: balance; }
.echt-intro .lead { max-width: 52ch; }

/* Rakis Merksatz: gleiche Sprache wie .lekt-keynote (große Raki-Karte) */
.echt-keynote-section { padding-top: clamp(var(--s5), 4vw, var(--s6)); }
.echt-keynote {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 760px; margin-inline: auto; text-align: center;
  padding: clamp(var(--s5), 5vw, var(--s7)) clamp(var(--s4), 4vw, var(--s6));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in oklab, var(--brand) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid color-mix(in oklab, var(--brand) 24%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line);
}
.echt-keynote-glow { position: absolute; z-index: -1; inset: -40% -20% auto; height: 80%; background: radial-gradient(circle at 50% 0%, var(--brand-glow), transparent 62%); filter: blur(30px); opacity: .55; pointer-events: none; }
.echt-keynote-raki { display: block; width: 64px; height: 64px; margin: 0 auto var(--s3); }
.echt-keynote-raki svg, .echt-keynote-raki img.raki-kopf-bild { width: 100%; height: 100%; }
.echt-keynote-tag { display: inline-block; font-size: var(--step--1); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--brand-bright); margin-bottom: var(--s2); }
.echt-keynote-q { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.12; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.echt-keynote-sub { color: var(--muted); font-size: var(--step-1); line-height: 1.5; margin-top: var(--s3); max-width: 52ch; margin-inline: auto; }
.echt-keynote-by { display: block; margin-top: var(--s3); color: var(--faint); font-size: var(--step--1); font-weight: 600; }

/* Drei Bausteine: gleich hohe Karten via Grid stretch + height:100% */
.echt-list {
  display: grid; gap: clamp(var(--s3), 2.4vw, var(--s4));
  max-width: 820px; margin-inline: auto;
  margin-top: clamp(var(--s5), 4vw, var(--s6));
  align-items: stretch;
}
.echt-card {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100%;
  display: flex; flex-direction: column; gap: var(--s2);
  padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.echt-card:hover { border-color: color-mix(in oklab, var(--brand) 34%, var(--hairline)); box-shadow: var(--shadow-lg), var(--inset-line), 0 0 38px -18px var(--brand-glow); }
.echt-card-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1); }
.echt-num {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; font-weight: 800; font-size: var(--step-0); color: var(--brand-bright);
  background: color-mix(in oklab, var(--brand) 14%, var(--space-800));
  border: 1px solid color-mix(in oklab, var(--brand) 32%, var(--hairline));
}
.echt-card h2 { font-size: var(--step-1); color: var(--ink); letter-spacing: -.02em; }
.echt-card p { color: var(--muted); font-size: var(--step-0); line-height: 1.65; text-wrap: pretty; max-width: 62ch; }
.echt-card b { color: var(--ink); font-weight: 650; }

/* Baustein 1: echte Adresse als Monospace-Pille */
.echt-adresse {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.05rem; font-weight: 600; color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--trust) 34%, var(--hairline));
  background: color-mix(in oklab, var(--trust) 9%, var(--space-800));
  border-radius: var(--pill); padding: 11px 22px; margin: var(--s3) 0 var(--s2);
  align-self: flex-start;
}
.echt-adresse svg { flex: none; color: var(--trust-bright); }

/* Baustein 2: Zeichen-Buttons + Status-Zeile */
.echt-zeichen-grid { display: flex; gap: 12px; flex-wrap: wrap; margin: var(--s3) 0 var(--s2); }
.echt-zeichen-btn {
  font: inherit; font-size: 1.7rem; line-height: 1; width: 60px; height: 60px;
  border-radius: 16px; cursor: pointer; display: grid; place-items: center;
  color: var(--ink);
  border: 1.5px solid var(--hairline);
  background: color-mix(in oklab, var(--space-550) 60%, transparent);
  transition: transform .2s var(--ease-out), border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.echt-zeichen-btn:hover { transform: translateY(-2px); border-color: var(--brand-bright); box-shadow: var(--shadow-sm); }
.echt-zeichen-btn.is-active {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 18%, var(--space-700));
  box-shadow: 0 0 22px -6px var(--brand-glow), var(--inset-line);
}
.echt-zeichen-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: var(--step-0); min-height: 44px; }
.echt-zeichen-chip {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.3rem; line-height: 1;
  background: color-mix(in oklab, var(--brand) 16%, var(--space-700));
  border: 1.5px solid var(--brand);
  box-shadow: 0 0 18px -6px var(--brand-glow);
}
.echt-zeichen-forget {
  font: inherit; font-size: var(--step--1); font-weight: 650;
  color: var(--cyan-bright); background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 0; cursor: pointer; transition: border-color .2s var(--ease);
}
.echt-zeichen-forget:hover { border-bottom-color: var(--cyan); }

/* Baustein 3: Code-Prüfer */
.echt-code-row { display: flex; gap: 10px; margin: var(--s3) 0 var(--s2); flex-wrap: wrap; }
.echt-code-input {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1rem;
  padding: 12px 18px; border-radius: var(--pill);
  border: 1px solid var(--hairline); color: var(--ink);
  background: color-mix(in oklab, var(--space-550) 50%, transparent);
  text-transform: uppercase; flex: 1; min-width: 200px;
}
.echt-code-input::placeholder { color: var(--faint); text-transform: none; }
.echt-code-result {
  display: none; border-radius: 14px; padding: 12px 18px;
  font-weight: 650; font-size: var(--step-0); margin-top: var(--s1);
  border: 1px solid transparent;
}
.echt-code-result.is-ok {
  display: block; color: var(--trust-bright);
  background: color-mix(in oklab, var(--trust) 14%, var(--space-700));
  border-color: color-mix(in oklab, var(--trust) 40%, var(--hairline));
}
.echt-code-result.is-bad {
  display: block; color: var(--brand-bright);
  background: color-mix(in oklab, var(--brand) 14%, var(--space-700));
  border-color: color-mix(in oklab, var(--brand) 40%, var(--hairline));
}

/* Eltern-Block "Warum das funktioniert": grün getönt wie legal-promise */
.echt-parents-section { padding-top: clamp(var(--s5), 4vw, var(--s6)); padding-bottom: clamp(var(--s6), 6vw, var(--s7)); }
.echt-parents {
  max-width: 820px; margin-inline: auto;
  padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--trust) 24%, var(--hairline));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--trust) 9%, transparent), transparent 60%),
    linear-gradient(180deg, var(--space-600), var(--space-700));
  box-shadow: var(--inset-line);
}
.echt-parents .kicker { color: var(--trust-bright); display: inline-block; margin-bottom: var(--s2); }
.echt-parents h2 { font-size: var(--step-2); color: var(--ink); margin-bottom: var(--s3); }
.echt-parents ul { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.echt-parents li { position: relative; padding-left: calc(var(--s3) + 4px); color: var(--muted); font-size: var(--step-0); line-height: 1.65; text-wrap: pretty; }
.echt-parents li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--trust-bright); box-shadow: 0 0 10px -1px var(--trust); }

@media (max-width: 540px) {
  .echt-zeichen-btn { width: 54px; height: 54px; font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .echt-card, .echt-zeichen-btn { transition: none; }
  .echt-zeichen-btn:hover { transform: none; }
}

/* ============================================================
   GEHEIMZEICHEN auf der Startseite (index.html) · bei Rakis Karte
   Erscheint nur, wenn ein Zeichen gewählt wurde (sonst hidden).
   Dezente Zeile unter der hero-note. Additiv, nur Tokens.
   ============================================================ */
.hero-zeichen {
  margin-top: var(--s2);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--pill);
  font-size: var(--step--1); color: var(--muted);
  background: color-mix(in oklab, var(--brand) 10%, var(--space-700));
  border: 1px solid color-mix(in oklab, var(--brand) 26%, var(--hairline));
  box-shadow: var(--inset-line);
}
.hero-zeichen[hidden] { display: none; }
.hero-zeichen-label { font-weight: 600; }
.hero-zeichen-mark { font-size: 1.15rem; line-height: 1; }
/* zentriert in der Hero-Stage (hero-note ist bereits zentriert) */
.hero-stage .hero-zeichen { margin-inline: auto; }
/* Einladender Hinweis, wenn noch kein Geheimzeichen gewählt ist */
.hero-zeichen-cta { text-decoration: none; cursor: pointer; color: var(--ink); transition: border-color var(--dur, .25s) var(--ease), background var(--dur, .25s) var(--ease), transform var(--dur, .25s) var(--ease); }
.hero-zeichen-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--trust-bright); box-shadow: 0 0 0 0 var(--trust); animation: pulse 2.4s ease-out infinite; flex: none; filter: drop-shadow(0 0 5px var(--trust)); }
.hero-zeichen-arrow { color: var(--brand-bright); font-weight: 700; transition: transform var(--dur, .25s) var(--ease); flex: none; }
a.hero-zeichen-cta:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--trust) 48%, var(--hairline)); background: color-mix(in oklab, var(--brand) 14%, var(--space-700)); }
a.hero-zeichen-cta:hover .hero-zeichen-arrow { transform: translateX(3px); }
a.hero-zeichen-cta:focus-visible { outline: 2px solid var(--trust); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero-zeichen-dot { animation: none; } }

/* ============================================================
   UNTERSTÜTZEN (unterstuetzen.html) · "Treibstoff für Raki"
   Eigenständiges Layout: ausgewogenes 2x2-Raster der Wofür-Punkte
   und eine designte Spenden-Karte, in der der PayPal-Button das
   selbstverständliche Zentrum ist. Nur Tokens, gescopt mit su-.
   ============================================================ */

/* ---------- Wofür: ausgewogenes 2x2-Raster ---------- */
.su-use-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(var(--s3), 1.6vw, var(--s4));
  align-items: stretch;
}
.su-use-card {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100%; display: flex; flex-direction: column;
  padding: clamp(var(--s4), 2.6vw, var(--s5));
  padding-top: clamp(var(--s5), 3.4vw, calc(var(--s5) + var(--s2)));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--brand) 9%, transparent), transparent 58%),
    linear-gradient(180deg, var(--space-600), var(--space-800));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* getönte Kantenlinie oben links als ruhiger Akzent */
.su-use-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--brand), transparent 62%);
  opacity: .55; transition: opacity .3s var(--ease);
}
.su-use-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--brand) 34%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 40px -16px var(--brand-glow);
}
.su-use-card:hover::before { opacity: 1; }
/* große, dezent gesetzte Ziffer als editorialer Anker */
.su-use-no {
  position: absolute; top: clamp(var(--s2), 1.6vw, var(--s3));
  right: clamp(var(--s3), 2vw, var(--s4));
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 1.4rem + 3vw, 3.6rem);
  line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--brand-bright) 42%, transparent);
  opacity: .55; z-index: -1; pointer-events: none;
  transition: opacity .3s var(--ease), -webkit-text-stroke-color .3s var(--ease);
}
.su-use-card:hover .su-use-no {
  opacity: .9; -webkit-text-stroke-color: color-mix(in oklab, var(--brand-bright) 70%, transparent);
}
.su-use-title {
  font-size: var(--step-1); color: var(--ink); letter-spacing: -.01em;
  margin-bottom: var(--s2); max-width: 22ch;
}
.su-use-text {
  font-size: var(--step-0); line-height: 1.6; color: var(--muted);
  text-wrap: pretty; max-width: 46ch;
}

/* ---------- Spenden-Karte: Raki + PayPal-Button als Zentrum ---------- */
.su-fuel {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(var(--s6), 6vw, var(--s8));
}
.su-fuel-glow {
  position: absolute; inset: auto 0 -28% 0; height: 70%; z-index: -1;
  background: radial-gradient(60% 70% at 50% 100%, var(--brand-glow), transparent 64%);
  opacity: .45; pointer-events: none;
}
.su-fuel-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center; gap: clamp(var(--s4), 4vw, var(--s7));
  max-width: 980px; margin-inline: auto;
  padding: clamp(var(--s5), 4.5vw, var(--s7));
  border-radius: clamp(var(--radius-lg), 3vw, 38px);
  background:
    radial-gradient(110% 130% at 8% 0%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 56%),
    linear-gradient(160deg, var(--space-550), var(--space-700) 60%, var(--space-800));
  border: 1px solid color-mix(in oklab, var(--brand) 26%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 90px -40px var(--brand-glow);
}
/* feiner umlaufender Lichtsaum oben */
.su-fuel-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 24%);
  mix-blend-mode: screen;
}

/* Raki-Seite mit Halo + Funken */
.su-fuel-raki {
  position: relative; display: grid; place-items: center;
  margin: 0; aspect-ratio: 1; width: 100%; max-width: 280px; justify-self: center;
}
.su-fuel-raki img {
  position: relative; z-index: 1; width: 86%; height: auto;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.55));
  animation: su-float 7s var(--ease) infinite;
}
.su-fuel-raki-halo {
  position: absolute; inset: 4%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 50% 42%, color-mix(in oklab, var(--brand) 36%, transparent), transparent 66%);
  filter: blur(14px); opacity: .9;
  animation: su-pulse-halo 6s var(--ease) infinite;
}
.su-fuel-spark {
  position: absolute; width: 7px; height: 7px; border-radius: 50%; z-index: 2;
  background: var(--brand-bright);
  box-shadow: 0 0 10px 1px var(--brand-glow);
  animation: su-spark 5s var(--ease) infinite;
}
.su-fuel-spark-a { top: 14%; right: 16%; animation-delay: 0s; }
.su-fuel-spark-b { top: 30%; left: 10%; width: 5px; height: 5px; animation-delay: 1.4s; background: var(--cyan-bright); box-shadow: 0 0 10px 1px color-mix(in oklab, var(--cyan) 60%, transparent); }
.su-fuel-spark-c { bottom: 18%; right: 22%; width: 5px; height: 5px; animation-delay: 2.6s; }

/* Textseite */
.su-fuel-body { min-width: 0; }
.su-fuel-body .kicker { margin-bottom: var(--s2); }
.su-fuel-body h2 {
  font-size: var(--step-3); letter-spacing: -.02em; line-height: 1.05;
  margin-bottom: var(--s2); color: var(--ink);
}
.su-fuel-lead {
  font-size: var(--step-1); color: var(--muted); line-height: 1.5;
  text-wrap: pretty; margin-bottom: var(--s3); max-width: 44ch;
}
.su-fuel-meta {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--s1) var(--s3); margin-bottom: var(--s4);
}
.su-fuel-meta li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--step--1); font-weight: 600; color: var(--muted);
}
.su-fuel-meta svg { color: var(--trust); flex: none; }

/* ---------- PayPal-Button: das Zentrum, MindLaunch-Stil ---------- */
.su-paypal-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 15px clamp(var(--s3), 2vw, 26px); padding-right: clamp(var(--s4), 2.4vw, 30px);
  border-radius: var(--pill); text-decoration: none;
  color: #2a0d07; font-weight: 700;
  background: linear-gradient(180deg, var(--brand-bright), var(--brand) 70%, var(--brand-deep));
  border: 1px solid color-mix(in oklab, var(--brand-bright) 70%, #fff 0%);
  box-shadow:
    0 14px 34px -12px var(--brand-glow),
    0 2px 0 0 color-mix(in oklab, var(--brand-deep) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .25s var(--ease-out), box-shadow .3s var(--ease), filter .25s var(--ease);
}
/* Geparkter Zustand: neutral, nicht klickbar, bis der echte PayPal-Link da ist */
.su-paypal-btn-parked {
  cursor: default; color: var(--muted);
  background: color-mix(in oklab, var(--space-600) 80%, transparent);
  border-color: var(--hairline);
  box-shadow: var(--inset-line);
}
.su-paypal-btn-parked:hover { transform: none; box-shadow: var(--inset-line); filter: none; }
/* wandernder Glanz beim Hover (auf Pseudo, nicht Layout) */
.su-paypal-btn-glow {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.55) 38%, transparent 58%);
  transform: translateX(-130%); opacity: 0;
  transition: transform .8s var(--ease), opacity .3s var(--ease);
}
.su-paypal-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 22px 48px -14px var(--brand-glow),
    0 2px 0 0 color-mix(in oklab, var(--brand-deep) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.su-paypal-btn:hover .su-paypal-btn-glow { transform: translateX(130%); opacity: 1; }
.su-paypal-btn:active { transform: translateY(-1px) scale(.99); }
.su-paypal-btn:focus-visible {
  outline: 3px solid var(--cyan-bright); outline-offset: 4px;
}
.su-paypal-btn > * { position: relative; z-index: 1; }
.su-paypal-btn-icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  color: #2a0d07;
}
.su-paypal-btn-label { display: inline-flex; flex-direction: column; line-height: 1.12; text-align: left; }
.su-paypal-btn-action { font-size: var(--step-1); letter-spacing: -.01em; }
.su-paypal-btn-sub {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .01em;
  color: color-mix(in oklab, #2a0d07 78%, transparent);
}
.su-paypal-btn-sub b { font-weight: 800; }
.su-paypal-btn-arrow {
  font-size: 1.2rem; font-weight: 700; margin-left: 2px;
  transition: transform .25s var(--ease-out);
}
.su-paypal-btn:hover .su-paypal-btn-arrow { transform: translateX(4px); }

.su-fuel-note {
  margin-top: var(--s3); color: var(--faint);
  font-size: var(--step--1); line-height: 1.5; max-width: 46ch;
}

/* ---------- Unterstützen: responsiv ---------- */
@media (max-width: 880px) {
  .su-use-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .su-fuel-card {
    grid-template-columns: 1fr; text-align: center;
    gap: var(--s4); padding: clamp(var(--s5), 8vw, var(--s6));
  }
  .su-fuel-raki { order: -1; max-width: 200px; }
  .su-fuel-lead, .su-fuel-note, .su-use-text, .su-use-title { max-width: none; }
  .su-fuel-meta { justify-content: center; }
  .su-paypal-btn { width: 100%; max-width: 360px; justify-content: center; }
}
@media (max-width: 420px) {
  .su-paypal-btn {
    width: 100%; gap: var(--s2);
    padding-left: var(--s3); padding-right: var(--s3);
    justify-content: center;
  }
  .su-paypal-btn-icon { width: 34px; height: 34px; }
  .su-paypal-btn-icon svg { width: 19px; height: 19px; }
  .su-paypal-btn-label { text-align: center; }
  .su-paypal-btn-action { font-size: var(--step-0); }
  .su-paypal-btn-arrow { display: none; }
}

/* ---------- Unterstützen: reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .su-use-card, .su-paypal-btn, .su-paypal-btn-arrow { transition: none; }
  .su-use-card:hover, .su-paypal-btn:hover { transform: none; }
  .su-fuel-raki img, .su-fuel-raki-halo, .su-fuel-spark { animation: none; }
  .su-paypal-btn-glow { display: none; }
}

/* ---------- Unterstützen: Keyframes ---------- */
@keyframes su-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes su-pulse-halo {
  0%, 100% { opacity: .72; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes su-spark {
  0%, 100% { opacity: 0; transform: translateY(2px) scale(.6); }
  30% { opacity: 1; transform: translateY(-4px) scale(1); }
  60% { opacity: .4; transform: translateY(-8px) scale(.8); }
}

/* ============================================================
   FAMILIEN-CREW (familien-crew.html, lektion-fc-*) · additiv, fc- gescopt
   Vierte Säule, für Seniorinnen, Senioren und die ganze Familie.
   Eigener, würdevoller Akzent in Violett (klar abgegrenzt von Korall,
   Grün und Cyan der anderen Säulen). Altersgerecht: etwas größere,
   ruhige Schrift im Inhalt, hohe Kontraste, große Klickziele, ruhige
   Flächen. Tokens aus dem :root, Motion nur transform/opacity.
   Senioren werden gesiezt, der Enkel-Block ist klar in Du-Form
   abgesetzt. Kein generischer "bald"-Pill, sondern dezentes "In Arbeit".
   ============================================================ */

/* Säulen-Identität: Violett. --fc-accent-bright trifft auf allen
   Karten- und Sektionsgründen mindestens AA (rund 8:1 auf #0B0F1F). */
.pillar-fc {
  --fc-accent:        #8A6BFF;   /* Flächen, Glühen, Akzentlinien */
  --fc-accent-bright: #B9A4FF;   /* Text auf Dunkel ~8:1, AAA */
  --fc-accent-soft:   #C7B6FF;   /* sehr heller Akzent, große Headlines */
  --fc-accent-glow:   rgba(138,107,255,.42);

  /* In das bestehende Säulensystem einklinken, damit pillar-* Regeln greifen */
  --pil:        var(--fc-accent);
  --pil-bright: var(--fc-accent-bright);
  --pil-glow:   var(--fc-accent-glow);
}

/* Kopf der Säule: Glühen, Hinweis-Icon, Zurück-Link in Säulenfarbe */
.pillar-fc .pillar-head-glow {
  background: radial-gradient(circle at 62% 42%, var(--fc-accent-glow), transparent 64%);
}
.pillar-fc .pillar-note svg { color: var(--fc-accent-bright); }
.pillar-fc .pillar-back:hover { border-bottom-color: var(--fc-accent); }
.pillar-fc .kicker { color: var(--fc-accent-bright); }

/* Lead etwas größer und ruhiger als auf den Kinder-Säulen (Lesbarkeit) */
.pillar-fc .fc-lead {
  font-size: var(--step-2); line-height: 1.5; color: var(--ink);
  max-width: 46ch; font-weight: 450; letter-spacing: -.005em;
}

/* Abzeichen-Schweben sanfter (würdevoll, nicht verspielt) */
.fc-badge { animation-duration: 9s; }

/* ---------- Generationen-Brücke: zwei Perspektiven ---------- */
.fc-bridge-section { padding-block: clamp(var(--s5), 5vw, var(--s7)); }
.fc-bridge-head { max-width: 52ch; margin-bottom: clamp(var(--s4), 4vw, var(--s5)); }
.fc-bridge-head .kicker { margin-bottom: var(--s2); }
.fc-bridge-head h2 { font-size: var(--step-3); color: var(--ink); margin-bottom: var(--s3); }
.fc-bridge-lead { max-width: 48ch; }

.fc-bridge-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(var(--s3), 3vw, var(--s5));
}
.fc-bridge-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(var(--s4), 3.2vw, var(--s5));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
}
.fc-bridge-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--fc-accent), transparent);
  opacity: .7;
}
.fc-bridge-senior::before {
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.fc-bridge-grand::before {
  background: linear-gradient(90deg, transparent, var(--fc-accent), transparent);
}
.fc-bridge-icon {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: var(--s3);
  color: var(--fc-accent-bright);
  background: color-mix(in oklab, var(--fc-accent) 16%, var(--space-700));
  border: 1px solid color-mix(in oklab, var(--fc-accent) 40%, var(--hairline));
  box-shadow: inset 0 0 18px -8px var(--fc-accent-glow);
}
.fc-bridge-senior .fc-bridge-icon {
  color: var(--cyan-bright);
  background: color-mix(in oklab, var(--cyan) 14%, var(--space-700));
  border-color: color-mix(in oklab, var(--cyan) 38%, var(--hairline));
  box-shadow: inset 0 0 18px -8px rgba(95,224,232,.4);
}
.fc-bridge-icon svg { width: 26px; height: 26px; }
.fc-bridge-card-title {
  font-size: var(--step-2); line-height: 1.2; color: var(--ink);
  letter-spacing: -.015em; margin-bottom: var(--s2);
}
.fc-bridge-card-text {
  font-size: var(--step-0); line-height: 1.65; color: var(--muted); text-wrap: pretty;
}

/* Verbindungsglied in der Mitte: dezenter Doppelpfeil */
.fc-bridge-link {
  align-self: center; display: grid; place-items: center;
  width: clamp(48px, 5vw, 64px); color: var(--fc-accent-bright);
  opacity: .85;
}
.fc-bridge-link svg { width: 100%; height: auto; }

.fc-bridge-foot {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: clamp(var(--s4), 3vw, var(--s5));
  padding: clamp(var(--s3), 2.4vw, var(--s4)) clamp(var(--s3), 3vw, var(--s4));
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg,
    color-mix(in oklab, var(--fc-accent) 10%, var(--space-700)),
    color-mix(in oklab, var(--space-700) 92%, transparent));
  border: 1px solid color-mix(in oklab, var(--fc-accent) 22%, var(--hairline));
  box-shadow: var(--inset-line);
}
.fc-bridge-foot-mark {
  flex: none; width: clamp(46px, 6vw, 56px); height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.fc-bridge-foot-mark svg { width: 100%; height: 100%; }
.fc-bridge-foot span:last-child {
  font-size: var(--step-0); line-height: 1.6; color: var(--muted); text-wrap: pretty;
}
.fc-bridge-foot strong { color: var(--ink); }

@media (max-width: 820px) {
  .fc-bridge-grid { grid-template-columns: minmax(0, 1fr); }
  .fc-bridge-link { transform: rotate(90deg); margin-block: calc(var(--s2) * -1); }
  .fc-bridge-foot { flex-direction: column; text-align: center; }
}

/* ---------- Themen-Raster: Akzent der echten Karte in Säulenfarbe ---------- */
.pillar-fc .rk-card.is-live::before {
  background: radial-gradient(120% 90% at 18% -10%, var(--fc-accent-glow), transparent 52%);
}
.pillar-fc .rk-card.is-live .rk-card-no {
  background: color-mix(in oklab, var(--fc-accent) 22%, transparent);
  border-color: color-mix(in oklab, var(--fc-accent) 50%, var(--hairline));
  color: var(--fc-accent-bright);
}
.pillar-fc .rk-card.is-live .rk-card-foot { color: var(--fc-accent-bright); }
.pillar-fc .rk-card.is-live:hover {
  border-color: color-mix(in oklab, var(--fc-accent) 48%, var(--hairline));
}
.pillar-fc .rk-live-flag { color: var(--fc-accent-bright); }
.pillar-fc .rk-live-flag::before {
  background: var(--fc-accent); box-shadow: 0 0 0 0 var(--fc-accent-glow);
  animation: fcLivePulse 2.6s ease-out infinite;
}
@keyframes fcLivePulse {
  0% { box-shadow: 0 0 0 0 var(--fc-accent-glow); }
  70% { box-shadow: 0 0 0 8px rgba(138,107,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(138,107,255,0); }
}

/* etwas größere Beschreibungstexte in den Themen-Karten (Lesbarkeit) */
.fc-topics .rk-card p { font-size: var(--step-0); line-height: 1.5; }

/* Lange Titel der Familien-Crew (z. B. "Schockanruf", "Codewort")
   brechen wie bei den Säulen sauber per automatischer Silbentrennung
   (lang="de"). overflow-wrap: break-word verhindert nur das Überlaufen
   übermäßig langer Wörter, bricht aber nicht mitten im Wort ("Schockanru-f").
   Identisch zu .rk-card-head h3 (Säulen), damit die Vorschau wie eine
   echte Schwester wirkt. */
.fc-topics .rk-card-head h3 { hyphens: manual; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }

/* Würdevoller Vorschau-Zustand "In Arbeit": ruhig, gedämpft, nicht
   kindlich. Klar als noch nicht verfügbar erkennbar, ohne Hover-Lift. */
.rk-card.fc-soon {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--space-600) 70%, transparent),
    color-mix(in oklab, var(--space-700) 70%, transparent));
  border-color: var(--hairline-2);
  cursor: default;
}
.rk-card.fc-soon h3 { color: var(--ink); }
.rk-card.fc-soon p { color: var(--muted); }
.rk-card.fc-soon .rk-card-no {
  background: color-mix(in oklab, var(--space-550) 60%, transparent);
  border-color: var(--hairline-2); color: var(--muted);
}
.fc-soon-flag {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--step--1); font-weight: 650; letter-spacing: .03em;
  color: var(--faint);
}
.fc-soon-flag::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: color-mix(in oklab, var(--fc-accent) 55%, var(--faint));
  opacity: .8;
}
.fc-soon-foot {
  margin-top: auto; padding-top: var(--s3);
  font-size: var(--step--1); font-weight: 650; letter-spacing: .02em;
  color: var(--faint);
  display: inline-flex; align-items: center; gap: 7px;
}
.fc-soon-foot::before {
  content: ""; width: 14px; height: 1px;
  background: color-mix(in oklab, var(--fc-accent) 60%, var(--faint));
}

/* Hinweis: wachsende Säule (dezent, würdevoll) */
.fc-growing {
  display: flex; align-items: center; gap: var(--s3);
  max-width: 62ch; margin-top: clamp(var(--s5), 4vw, var(--s6));
  padding-top: var(--s4); border-top: 1px solid var(--hairline);
  font-size: var(--step-0); line-height: 1.6; color: var(--muted); text-wrap: pretty;
}
.fc-growing-mark {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--fc-accent-bright);
  background: color-mix(in oklab, var(--fc-accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--fc-accent) 34%, var(--hairline));
}
.fc-growing-mark svg { width: 19px; height: 19px; }

/* ============================================================
   WACHSTUMS-HINWEIS · markenweit, dezent + warm
   Ehrlicher "junges Projekt, im Aufbau"-Hinweis. Bewusst KEIN
   hartes "Beta"-Label, das würde bei einem Vertrauens- und
   Kinderschutzthema eher abschrecken. Stil-Wurzel: .fc-growing,
   aber in Markenfarbe, folgt damit dem gewählten Theme.
   ============================================================ */
.growing-note {
  display: flex; align-items: center; gap: var(--s3);
  max-width: 64ch; margin-top: clamp(var(--s5), 4vw, var(--s6));
  padding-top: var(--s4); border-top: 1px solid var(--hairline);
  font-size: var(--step-0); line-height: 1.6; color: var(--muted); text-wrap: pretty;
}
.growing-note-mark {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--brand-bright);
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 34%, var(--hairline));
}
.growing-note-mark svg { width: 19px; height: 19px; }
.growing-note b { color: var(--ink); font-weight: 600; }
/* zentriert (z.B. unter dem Abschluss-CTA der Startseite) */
.growing-note.is-center {
  margin-inline: auto; justify-content: center;
  margin-top: clamp(var(--s6), 5vw, var(--s7));
}

/* Abschluss-CTA-Glühen in Säulenfarbe */
.pillar-fc .lw-finish::before {
  background: radial-gradient(120% 90% at 50% 118%, var(--fc-accent-glow), transparent 56%);
}

@media (prefers-reduced-motion: reduce) {
  .pillar-fc .rk-live-flag::before { animation: none; }
  .fc-badge { animation: none; }
}

/* ============================================================
   FAMILIEN-CREW · LEKTION (lektion-fc-enkeltrick.html)
   Baut auf den lekt-* Bausteinen auf, mit fc- Ergänzungen für
   größere, ruhigere Schrift und den Säulen-Akzent Violett.
   ============================================================ */

/* Lektion erbt den Säulen-Akzent für Kopf, Pull-Quote, Keynote */
.lekt-fc .lekt-head-glow {
  background: radial-gradient(circle at 62% 42%, var(--fc-accent-glow), transparent 64%);
}
.lekt-fc .lekt-back:hover { border-bottom-color: var(--fc-accent); }
.lekt-fc .kicker { color: var(--fc-accent-bright); }
.lekt-fc .lekt-meta-pillar { color: var(--fc-accent-bright) !important; }
.lekt-fc .lekt-meta-dot {
  background: var(--fc-accent); box-shadow: 0 0 10px -1px var(--fc-accent-glow);
}

/* Altersgerecht: Fließtext eine Spur größer und mit mehr Luft */
.lekt-fc .lekt-p { font-size: var(--step-1); line-height: 1.78; }
.lekt-fc .lekt-lead { font-size: var(--step-2); line-height: 1.55; }

/* Pull-Quote in Säulenfarbe */
.lekt-fc .lekt-pull {
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--fc-accent) 16%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in oklab, var(--space-600) 96%, transparent), color-mix(in oklab, var(--space-700) 96%, transparent));
  border-color: color-mix(in oklab, var(--fc-accent) 24%, var(--hairline));
  box-shadow: var(--shadow-md), var(--inset-line), 0 0 56px -14px var(--fc-accent-glow);
}
.lekt-fc .lekt-pull::before {
  background: linear-gradient(180deg, var(--fc-accent-bright), var(--fc-accent));
}
.lekt-fc .lekt-pull-glow { background: radial-gradient(circle, var(--fc-accent-glow), transparent 70%); }
.lekt-fc .lekt-pull-quote { font-size: var(--step-2); line-height: 1.45; max-width: 36ch; }
.lekt-fc .lekt-pull-by { color: var(--fc-accent-bright); }

/* ---------- Nachgestellter Anruf (Dialog/Chat-Faden) ---------- */
.fc-call-section { padding-block: clamp(var(--s4), 4vw, var(--s5)); }
.fc-call {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(var(--s4), 3vw, var(--s5));
  padding: clamp(var(--s4), 3.2vw, var(--s5));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--space-550), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), var(--inset-line);
}
.fc-call-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--hairline);
}
.fc-call-icon {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--brand-bright);
  background: color-mix(in oklab, var(--brand) 16%, var(--space-700));
  border: 1px solid color-mix(in oklab, var(--brand) 40%, var(--hairline));
}
.fc-call-icon svg { width: 20px; height: 20px; }
.fc-call-label {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.fc-call-thread { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.fc-call-line { display: flex; flex-direction: column; gap: 6px; max-width: 82%; }
.fc-call-who {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .02em; color: var(--faint);
  padding-inline: 4px;
}
.fc-call-text {
  font-size: var(--step-1); line-height: 1.6; color: var(--ink); text-wrap: pretty;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.4vw, 22px);
  border-radius: 20px;
}

/* fremde Stimme: links, korall-warnend; Sie: rechts, ruhig/neutral */
.fc-call-them { align-self: flex-start; align-items: flex-start; }
.fc-call-them .fc-call-text {
  border-bottom-left-radius: 6px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--brand) 18%, var(--space-600)),
    color-mix(in oklab, var(--brand) 10%, var(--space-700)));
  border: 1px solid color-mix(in oklab, var(--brand) 34%, var(--hairline));
}
.fc-call-you { align-self: flex-end; align-items: flex-end; }
.fc-call-you .fc-call-who { text-align: right; }
.fc-call-you .fc-call-text {
  border-bottom-right-radius: 6px;
  background: linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  color: var(--muted);
}
.fc-call-note {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
  font-size: var(--step-0); line-height: 1.65; color: var(--muted); text-wrap: pretty;
}
.fc-call-note strong { color: var(--brand-bright); }

@media (max-width: 560px) {
  .fc-call-line { max-width: 100%; }
}

/* ---------- Warnsignale (erbt lekt-ask-grid, mit Icon und 3 Spalten) ---------- */
.fc-signals-section .lekt-ask:hover {
  border-color: color-mix(in oklab, var(--brand) 42%, var(--hairline));
}
.fc-signal { padding-top: clamp(var(--s4), 2.6vw, var(--s4)); }
.fc-signal-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: var(--s3);
  color: var(--brand-bright);
  background: color-mix(in oklab, var(--brand) 16%, var(--space-700));
  border: 1px solid color-mix(in oklab, var(--brand) 40%, var(--hairline));
  box-shadow: inset 0 0 18px -8px var(--brand-glow);
}
.fc-signal-icon svg { width: 23px; height: 23px; }
/* Warnsignale eine Spur größer als die Standard-lekt-ask-Texte */
.fc-signal .lekt-ask-q { font-size: var(--step-1); }
.fc-signal .lekt-ask-a { font-size: var(--step-0); line-height: 1.62; }

/* ---------- Was zu tun ist: nummerierte, ruhige Schrittliste ---------- */
.fc-steps-section { padding-block: clamp(var(--s5), 5vw, var(--s7)); }
.fc-steps {
  list-style: none; display: flex; flex-direction: column;
  gap: clamp(var(--s3), 2vw, var(--s4));
  margin-top: clamp(var(--s4), 3vw, var(--s5)); counter-reset: fc-step;
}
.fc-step {
  display: flex; align-items: flex-start; gap: clamp(var(--s3), 2.4vw, var(--s4));
  padding: clamp(var(--s3), 2.6vw, var(--s4)) clamp(var(--s3), 3vw, var(--s4));
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  box-shadow: var(--inset-line);
  transition: border-color .25s var(--ease), transform .25s var(--ease-out);
}
.fc-step:hover {
  border-color: color-mix(in oklab, var(--fc-accent) 36%, var(--hairline));
  transform: translateX(3px);
}
.fc-step-no {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--fc-accent-bright);
  background: color-mix(in oklab, var(--fc-accent) 16%, var(--space-700));
  border: 1px solid color-mix(in oklab, var(--fc-accent) 42%, var(--hairline));
  box-shadow: 0 0 18px -6px var(--fc-accent-glow), var(--inset-line);
}
.fc-step-body { min-width: 0; padding-top: 3px; }
.fc-step-title {
  font-size: var(--step-1); line-height: 1.25; color: var(--ink);
  letter-spacing: -.01em; margin-bottom: 6px; text-wrap: balance;
}
.fc-step-body p {
  font-size: var(--step-0); line-height: 1.65; color: var(--muted); text-wrap: pretty;
  max-width: 60ch;
}

@media (max-width: 560px) {
  .fc-step { gap: var(--s3); padding: var(--s3); }
  .fc-step-no { width: 44px; height: 44px; font-size: var(--step-1); }
}

/* ---------- Familien-Codewort: Keynote-Karte in Säulenfarbe ---------- */
.lekt-fc .fc-keynote {
  background:
    radial-gradient(130% 110% at 50% 0%, color-mix(in oklab, var(--fc-accent) 20%, transparent), transparent 58%),
    linear-gradient(180deg, var(--space-550), var(--space-700));
  border-color: color-mix(in oklab, var(--fc-accent) 32%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 70px -16px var(--fc-accent-glow);
}
.lekt-fc .fc-keynote .lekt-keynote-glow { background: radial-gradient(circle, var(--fc-accent-glow), transparent 70%); }
.lekt-fc .fc-keynote .lekt-keynote-orbit { color: var(--fc-accent); }
.lekt-fc .fc-keynote .lekt-keynote-tag { color: var(--fc-accent-bright); }
.lekt-fc .fc-keynote .lekt-keynote-sub { font-size: var(--step-1); max-width: 44ch; }
.lekt-fc .fc-keynote .lekt-keynote-raki {
  border-color: color-mix(in oklab, var(--fc-accent) 36%, var(--hairline));
  box-shadow: inset 0 0 16px -8px var(--fc-accent-glow);
}

/* ---------- Für die Enkel (Du-Form, klar abgesetzt, eigener Akzent) ---------- */
.fc-young-section { padding-block: clamp(var(--s5), 5vw, var(--s7)); }
.fc-young {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--s4), 3.4vw, var(--s6)) clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in oklab, var(--fc-accent) 14%, transparent), transparent 56%),
    linear-gradient(180deg, var(--space-700), var(--space-800));
  border: 1px solid color-mix(in oklab, var(--fc-accent) 24%, var(--hairline));
  box-shadow: var(--shadow-md), var(--inset-line);
}
/* dezente linke Akzent-Kante: signalisiert den Wechsel der Ansprache (Du) */
.fc-young::before {
  content: ""; position: absolute; inset: clamp(var(--s4), 3vw, var(--s5)) auto clamp(var(--s4), 3vw, var(--s5)) 0;
  width: 4px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--fc-accent-soft), var(--fc-accent));
}
.fc-young-glow {
  position: absolute; z-index: -1; inset: -24% -10% auto auto;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--fc-accent-glow), transparent 70%);
  filter: blur(30px); opacity: .55; pointer-events: none;
}
.fc-young-head { margin-bottom: var(--s4); padding-left: clamp(var(--s2), 2vw, var(--s3)); }
.fc-young-kicker { color: var(--fc-accent-bright); margin-bottom: var(--s2); }
.fc-young-head h2 { font-size: var(--step-2); color: var(--ink); margin-bottom: var(--s3); }
.fc-young-intro {
  font-size: var(--step-1); line-height: 1.6; color: var(--muted);
  max-width: 56ch; text-wrap: pretty;
}
.fc-young-list {
  list-style: none; display: flex; flex-direction: column; gap: var(--s3);
  padding-left: clamp(var(--s2), 2vw, var(--s3));
}
.fc-young-item { display: flex; align-items: flex-start; gap: var(--s3); }
.fc-young-check {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; margin-top: 2px;
  color: var(--fc-accent-bright);
  background: color-mix(in oklab, var(--fc-accent) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--fc-accent) 42%, var(--hairline));
}
.fc-young-check svg { width: 16px; height: 16px; }
.fc-young-item p {
  font-size: var(--step-0); line-height: 1.65; color: var(--muted); text-wrap: pretty;
}
.fc-young-item p strong { color: var(--ink); font-weight: 700; }

/* Abschluss-CTA der Lektion: Glühen in Säulenfarbe */
.lekt-fc .lekt-finish::before {
  background: radial-gradient(120% 80% at 50% 70%, var(--fc-accent-glow), transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
  .fc-step { transition: none; }
  .fc-step:hover { transform: none; }
}

/* ============================================================
   FAMILIEN-CREW TEASER auf der Startseite (.fc-home)
   Eigenständiger, abgesetzter Block unter den drei Kinder-Säulen.
   Bewusst KEINE vierte gleichwertige Kachel: eigene Fläche, eigene
   violette Identität (--fc-accent über .pillar-fc), eigene Hierarchie.
   Alles unter dem Präfix fc-home- gescopt.
   ============================================================ */
.fc-home { padding-block: clamp(var(--s5), 5vw, var(--s7)); }

/* Das ganze Angebot ist eine große, klickbare Fläche. Editoriale
   Zwei-Spalten-Komposition: Inhalt links, Raki-Figur rechts. */
.fc-home-panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center; gap: clamp(var(--s4), 4vw, var(--s6));
  padding: clamp(var(--s4), 4vw, var(--s6));
  border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  background:
    radial-gradient(135% 120% at 88% -10%, color-mix(in oklab, var(--fc-accent) 22%, transparent), transparent 56%),
    linear-gradient(150deg, var(--space-550) 0%, var(--space-700) 58%, var(--space-800) 100%);
  border: 1px solid color-mix(in oklab, var(--fc-accent) 26%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line);
  transition:
    transform .5s var(--ease-out),
    border-color .35s var(--ease),
    box-shadow .5s var(--ease-out);
}

/* Violette Akzentkante oben: signalisiert eigene Identität */
.fc-home-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg,
    transparent, var(--fc-accent) 22%, var(--fc-accent-soft) 50%, var(--fc-accent) 78%, transparent);
  opacity: .85; z-index: 3;
}

.fc-home-panel:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--fc-accent) 50%, var(--hairline));
  box-shadow: var(--shadow-lg), var(--inset-line), 0 0 70px -18px var(--fc-accent-glow);
}
.fc-home-panel:active { transform: translateY(-1px) scale(.995); }

.fc-home-panel:focus-visible {
  outline: 3px solid var(--fc-accent-bright);
  outline-offset: 4px;
}

/* Tiefe: weicher violetter Glow hinter der Figur */
.fc-home-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 60%; aspect-ratio: 1; right: -8%; top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, var(--fc-accent-glow), transparent 66%);
  filter: blur(6px); opacity: .8;
}

/* Atmosphäre: dezentes Punktraster, nur als Textur */
.fc-home-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in oklab, var(--fc-accent) 38%, transparent) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 100% at 82% 0%, #000 0%, transparent 60%);
          mask-image: radial-gradient(120% 100% at 82% 0%, #000 0%, transparent 60%);
  opacity: .35;
}

/* ---------- Textspalte ---------- */
.fc-home-body { position: relative; z-index: 2; }

.fc-home-flags {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: var(--s3);
}
.fc-home-new {
  display: inline-flex; align-items: center;
  padding: 5px 13px; border-radius: var(--pill);
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase;
  color: #1A1233;
  background: linear-gradient(180deg, var(--fc-accent-soft), var(--fc-accent));
  box-shadow: 0 0 26px -8px var(--fc-accent-glow);
}
.fc-home-kicker {
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fc-accent-bright);
}

.fc-home-title {
  font-size: var(--step-3); line-height: 1.04;
  color: var(--ink); margin-bottom: var(--s3);
  max-width: 18ch;
}

.fc-home-lead {
  font-size: var(--step-1); line-height: 1.55; color: var(--muted);
  max-width: 50ch; margin-bottom: var(--s4); text-wrap: pretty;
}

/* Themen-Stichworte */
.fc-home-topics {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: var(--s4);
}
.fc-home-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: var(--pill);
  font-size: var(--step--1); font-weight: 600; color: var(--fc-accent-bright);
  background: color-mix(in oklab, var(--fc-accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--fc-accent) 34%, var(--hairline));
}
.fc-home-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fc-accent);
  box-shadow: 0 0 8px -1px var(--fc-accent-glow);
}

/* CTA wirkt wie ein Button, ist aber Teil der klickbaren Fläche */
.fc-home-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--pill);
  font-family: var(--font-display);
  font-size: var(--step-0); font-weight: 700; letter-spacing: -.005em;
  color: #1A1233;
  background: linear-gradient(180deg, var(--fc-accent-soft), var(--fc-accent));
  box-shadow: 0 0 40px -12px var(--fc-accent-glow);
  transition: box-shadow .4s var(--ease-out);
}
.fc-home-arrow { width: 20px; height: 20px; transition: transform .4s var(--ease-out); }
.fc-home-panel:hover .fc-home-cta {
  box-shadow: 0 0 56px -10px var(--fc-accent-glow);
}
.fc-home-panel:hover .fc-home-arrow { transform: translateX(5px); }

/* ---------- Figur-Spalte: Raki im Orbit-Medaillon ---------- */
.fc-home-figure {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
}
.fc-home-figure-label {
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 650; letter-spacing: .02em;
  color: var(--faint); text-align: center; max-width: 22ch;
}

/* ---------- Mobil: einspaltig, Figur unter den Text ---------- */
@media (max-width: 860px) {
  .fc-home-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--s4), 6vw, var(--s5));
    text-align: left;
  }
  .fc-home-figure { order: -1; align-items: flex-start; }
  .fc-home-glow { right: -20%; top: 18%; width: 80%; }
  .fc-home-title { max-width: none; }
}

@media (max-width: 520px) {
  .fc-home-cta { width: 100%; justify-content: center; }
}

/* ---------- Bewegung respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .fc-home-panel,
  .fc-home-cta,
  .fc-home-arrow { transition: none; }
  .fc-home-panel:hover { transform: none; }
  .fc-home-panel:hover .fc-home-arrow { transform: none; }
}

/* ---------- Viertes Missions-Abzeichen (Familien-Crew) ----------
   Ersetzt das Raki-Orbit-Medaillon in der Figur-Spalte. Gleicher
   Patch-Stil wie die drei Kinder-Säulen (.lw-pillar-patch), nur in
   der violetten --fc-accent-Identität und größer skaliert. Ein
   weicher violetter Halo dahinter lässt es im Panel schweben. */
.fc-home-patch {
  position: relative;
  display: grid; place-items: center;
  width: clamp(168px, 17vw, 238px); aspect-ratio: 1;
  filter: drop-shadow(0 14px 32px rgba(0,0,0,.55));
  transition: transform .4s var(--ease-out);
}
/* Träger-Scheibe: gibt dem Patch einen klaren Körper auf dem dunkel-
   violetten Panel, analog zum früheren Orbit-Medaillon. Sanfter Glow
   außen, feiner violetter Rand, Inset-Schimmer innen. */
.fc-home-patch::before {
  content: ""; position: absolute; inset: -9%;
  border-radius: 50%; z-index: 0;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in oklab, var(--space-550) 92%, transparent), var(--space-900) 80%);
  border: 1px solid color-mix(in oklab, var(--fc-accent) 32%, var(--hairline));
  box-shadow:
    inset 0 0 44px -12px var(--fc-accent-glow),
    0 0 60px -16px var(--fc-accent-glow);
}
.fc-home-patch svg {
  position: relative; z-index: 1;
  width: 100%; height: 100%; overflow: visible;
}
.fc-home-panel:hover .fc-home-patch {
  transform: scale(1.04) rotate(-2deg);
}

@media (max-width: 860px) {
  .fc-home-patch { width: clamp(140px, 40vw, 188px); }
}

@media (prefers-reduced-motion: reduce) {
  .fc-home-patch { transition: none; }
  .fc-home-panel:hover .fc-home-patch { transform: none; }
}

/* fc-steps greift auf --fc-accent zu; auf der Aktuelles-Seite
   binden wir das an den Marken-Akzent (wechselt mit dem Theme). */


/* ---------- Lesefortschritt (ml-gelesen, rein lokal) ---------- */
/* Abschluss-Karte: belohnendes Erledigt-Element (ersetzt grauen Ghost-Knopf) */
/* --- Belohnungskarte zum Abhaken (gruen), mit gezeichnetem Haken --- */
.lekt-done-wrap { display: flex; justify-content: center; margin-bottom: var(--s4); }
.lekt-done-btn {
  position: relative; display: inline-flex; align-items: center; gap: 13px;
  width: 100%; max-width: 30ch; justify-content: center;
  font: inherit; font-size: 1.12rem; font-weight: 700; cursor: pointer;
  padding: 16px 22px 16px 18px; border-radius: 20px; color: var(--ink);
  background: color-mix(in oklab, var(--trust) 9%, transparent);
  border: 1.5px solid color-mix(in oklab, var(--trust-bright) 40%, var(--hairline));
  box-shadow: var(--inset-line);
  transition: transform .22s var(--ease-out), border-color .2s var(--ease),
              background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.lekt-done-btn:hover {
  transform: translateY(-2px); border-color: var(--trust);
  box-shadow: var(--inset-line), 0 0 30px -12px var(--trust);
}
.lekt-done-check {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in oklab, var(--trust) 14%, transparent);
  border: 2px solid color-mix(in oklab, var(--trust-bright) 55%, var(--hairline));
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .3s var(--ease);
}
.lekt-done-check svg {
  width: 19px; height: 19px; fill: none; stroke: var(--trust-bright);
  stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset .35s var(--ease-out), stroke .2s var(--ease);
}
.lekt-done-btn.is-done {
  color: var(--trust-bright);
  background: color-mix(in oklab, var(--trust) 20%, var(--space-600));
  border-color: color-mix(in oklab, var(--trust-bright) 62%, transparent);
  box-shadow: 0 0 34px -14px var(--trust);
}
.lekt-done-btn.is-done .lekt-done-check {
  background: var(--trust-bright); border-color: var(--trust-bright);
  box-shadow: 0 0 20px -4px var(--trust);
  animation: mlCheckPop .34s var(--ease-out);
}
.lekt-done-btn.is-done .lekt-done-check svg { stroke: var(--space-900); stroke-dashoffset: 0; }
@keyframes mlCheckPop {
  0% { transform: scale(.6); } 60% { transform: scale(1.16); } 100% { transform: scale(1); }
}

/* --- "Und weiter geht's": Zwischenzeile ueber der Weiterlesen-Reihe --- */
.lekt-finish-lead {
  display: block; margin-bottom: var(--s3);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .13em;
  font-weight: 700; color: var(--muted);
}

/* --- Primaer "Weiter": Korall-Glas-Kapsel mit gluehender Duesen-Scheibe --- */
.lekt-finish .btn-primary.btn-lg {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 16px;
  padding: 12px 14px 12px 26px;
  font-size: var(--step-0); font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  background:
    radial-gradient(120% 180% at 100% 120%, color-mix(in oklab, var(--brand) 24%, transparent), transparent 55%),
    color-mix(in oklab, var(--space-600) 82%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 45%, var(--hairline));
  box-shadow: var(--inset-line), 0 18px 44px -26px rgba(0,0,0,.9);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease),
              box-shadow .3s var(--ease), background .3s var(--ease);
}
.lekt-finish .btn-primary.btn-lg span[aria-hidden] {
  flex: none; display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: #2a0d07; font-size: 1.1em; line-height: 1;
  background: radial-gradient(circle at 50% 38%, var(--brand-bright), var(--brand-deep));
  box-shadow: 0 0 22px -6px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
.lekt-finish .btn-primary.btn-lg:hover {
  transform: translateY(-3px); border-color: var(--brand-bright);
  background:
    radial-gradient(120% 180% at 100% 120%, color-mix(in oklab, var(--brand) 34%, transparent), transparent 58%),
    color-mix(in oklab, var(--space-550) 88%, transparent);
  box-shadow: var(--inset-line), 0 22px 50px -24px rgba(0,0,0,.9), 0 0 50px -18px var(--brand-glow);
}
.lekt-finish .btn-primary.btn-lg:hover span[aria-hidden] {
  transform: translateX(3px);
  box-shadow: 0 0 30px -4px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.5);
}
.lekt-finish .btn-primary.btn-lg:active { transform: translateY(-1px) scale(.99); }

/* --- Sekundaer "Auch lesen" / "Zurueck zur Lernwelt": Umriss-Kapsel --- */
.lekt-finish-back, .lekt-finish-next {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 22px; border-radius: var(--pill); border-bottom: 0;
  font: inherit; font-weight: 650; font-size: var(--step-0);
  color: var(--ink); text-decoration: none;
  background: color-mix(in oklab, var(--space-600) 40%, transparent);
  border: 1.5px solid color-mix(in oklab, var(--cyan-bright) 32%, var(--hairline));
  transition: transform .22s var(--ease-out), border-color .2s var(--ease),
              background .2s var(--ease), box-shadow .2s var(--ease);
}
.lekt-finish-back:hover, .lekt-finish-next:hover {
  transform: translateY(-2px); color: var(--ink);
  border-color: var(--cyan-bright);
  background: color-mix(in oklab, var(--space-600) 70%, transparent);
  box-shadow: 0 0 26px -14px rgba(139,238,243,.28);
}
.lekt-finish-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--cyan-bright); }
.lekt-finish-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lekt-finish-back span[aria-hidden], .lekt-finish-next span[aria-hidden] {
  color: var(--cyan-bright); transition: transform .22s var(--ease-out);
}
.lekt-finish-back:hover span[aria-hidden], .lekt-finish-next:hover span[aria-hidden] { transform: translateX(3px); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .lekt-done-btn, .lekt-finish .btn-primary.btn-lg,
  .lekt-finish-back, .lekt-finish-next { transition: none; }
  .lekt-done-btn:hover, .lekt-finish .btn-primary.btn-lg:hover,
  .lekt-finish-back:hover, .lekt-finish-next:hover { transform: none; }
  .lekt-done-btn.is-done .lekt-done-check { animation: none; }
  .lekt-done-btn.is-done .lekt-done-check svg { transition: none; stroke-dashoffset: 0; }
}
.rk-card.is-done .rk-live-flag { color: var(--trust-bright); }
.rk-card.is-done .rk-live-flag::before {
  content: "✓"; width: auto; height: auto;
  animation: none; box-shadow: none;
  font-size: 11px; line-height: 1; font-weight: 800;
  color: var(--space-800); background: var(--trust-bright);
  padding: 2px 3px; border-radius: 50%;
}
.lw-entry-link.is-done .lw-entry-title::after {
  content: " ✓"; color: var(--trust-bright);
}


/* ---------- Säulen-Quiz (quiz.html) ---------- */
.quiz {
  min-width: 0; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--quiz-accent, var(--brand)) 10%, transparent), transparent 56%),
    linear-gradient(180deg, var(--space-600), var(--space-700));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s4), 3vw, var(--s5));
  box-shadow: var(--shadow-md), var(--inset-line);
}
.quiz-rk { --quiz-accent: var(--brand); }
.quiz-ms { --quiz-accent: var(--trust-bright); }
.quiz-ca { --quiz-accent: var(--cyan); }
.quiz-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s2); margin-bottom: var(--s3);
  font-size: var(--step--1); color: var(--faint); font-weight: 650;
}
.quiz-head b { color: var(--ink); font-variant-numeric: tabular-nums; }
.quiz-frage { font-size: var(--step-1); font-weight: 700; color: var(--ink); line-height: 1.35; min-height: 2.7em; text-wrap: pretty; }
.quiz-optionen { display: grid; gap: var(--s2); margin-top: var(--s3); }
.quiz-opt {
  text-align: left; font: inherit; font-size: var(--step-0); font-weight: 600;
  color: var(--ink); cursor: pointer;
  padding: 12px 16px; border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--space-550) 80%, transparent);
  border: 1px solid var(--hairline);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.quiz-opt:hover:not(:disabled) { border-color: color-mix(in oklab, var(--quiz-accent, var(--brand)) 55%, var(--hairline)); transform: translateY(-1px); }
.quiz-opt:disabled { cursor: default; opacity: .75; }
.quiz-opt.is-right { border-color: var(--trust-bright); background: color-mix(in oklab, var(--trust-bright) 14%, transparent); opacity: 1; }
.quiz-opt.is-wrong { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 12%, transparent); opacity: 1; }
.quiz-feedback { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s3); min-height: 64px; }
.quiz-face { flex: none; width: 56px; height: 62px; }
.quiz-bubble {
  flex: 1; font-size: var(--step-0); color: var(--muted); line-height: 1.45;
  border-left: 2px solid var(--hairline); padding-left: var(--s2);
}
.quiz-bubble.is-right { color: var(--ink); border-color: var(--trust-bright); }
.quiz-bubble.is-wrong { color: var(--ink); border-color: var(--brand); }
.quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); }
.quiz-track { display: flex; gap: 6px; }
.quiz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline); transition: background .15s ease, transform .15s ease; }
.quiz-dot.is-current { background: var(--quiz-accent, var(--brand)); transform: scale(1.25); }
.quiz-dot.is-right { background: var(--trust-bright); }
.quiz-dot.is-wrong { background: var(--brand); }
.quiz-done { margin-top: var(--s3); font-size: var(--step-0); color: var(--muted); line-height: 1.5; }
.quiz-done b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .quiz-opt, .quiz-dot { transition: none; }
  .quiz-opt:hover:not(:disabled) { transform: none; }
}
.quiz-jump { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* Quiz-Abzeichen: grau bis verdient */
.quiz { position: relative; }
.quiz-patch {
  position: absolute; top: clamp(14px, 2vw, 22px); right: clamp(14px, 2vw, 22px);
  width: clamp(64px, 8vw, 88px); height: auto;
  filter: grayscale(1); opacity: .3;
  transition: filter .4s ease, opacity .4s ease, transform .4s ease;
}
.quiz.has-badge .quiz-patch { filter: none; opacity: 1; transform: rotate(-6deg); }
@media (max-width: 640px) { .quiz-patch { display: none; } }
.quiz-badge-btn { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .quiz-patch { transition: none; } }

.quiz-next[hidden] { display: none; }
.quiz[data-quiz] .quiz-head { padding-right: clamp(70px, 9vw, 100px); }
@media (max-width: 640px) { .quiz[data-quiz] .quiz-head { padding-right: 0; } }
.quiz-fc { --quiz-accent: #B9A4FF; }
.lekt-miniquiz .quiz { margin-top: var(--s3); }

/* Bleistift-Raki-Köpfe (Testlauf statt Vektor-Köpfe) */
img.raki-kopf-bild { object-fit: contain; display: block; }


/* ============================================================
   SPUR B: Fortschritt (Flugbahn-Hub, Lernpfad-Kopf, Urkunde)
   Akzent je Saeule ueber --acc. Alles rein lokal.
   ============================================================ */
.ml-rk{--acc:var(--brand);} .ml-ms{--acc:var(--trust-bright);} .ml-ca{--acc:var(--cyan);} .ml-fc{--acc:#B9A4FF;}

.ml-hub{position:relative;overflow:hidden;border:1px solid var(--hairline);border-radius:24px;padding:26px clamp(18px,3vw,32px) 30px;background:radial-gradient(120% 120% at 15% -10%, color-mix(in oklab,var(--brand) 12%,transparent), transparent 55%), color-mix(in oklab,var(--space-700) 60%,transparent);}
.ml-hub-top{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;justify-content:space-between;margin-bottom:20px;}
.ml-rank{display:flex;align-items:center;gap:14px;}
.ml-rank-badge{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%, color-mix(in oklab,#FFD27A 72%,#fff), #FFD27A 60%, #C9962E);box-shadow:0 0 26px -6px rgba(255,210,122,.5), inset 0 1px 0 rgba(255,255,255,.6);color:#3a2600;}
.ml-rank-badge svg{width:28px;height:28px;}
.ml-rank-txt small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:var(--muted);font-weight:700;}
.ml-rank-txt b{font-size:1.3rem;letter-spacing:-.01em;}
.ml-rank-count{text-align:right;}
.ml-rank-count b{font-size:1.35rem;font-variant-numeric:tabular-nums;}
.ml-rank-count small{display:block;color:var(--muted);font-size:.78rem;}
.ml-track{position:relative;height:42px;margin:2px 0 24px;}
.ml-track-line{position:absolute;left:6px;right:6px;top:50%;height:3px;transform:translateY(-50%);border-radius:3px;background:repeating-linear-gradient(90deg,color-mix(in oklab,var(--muted) 45%,transparent) 0 3px,transparent 3px 11px);}
.ml-track-fill{position:absolute;left:6px;top:50%;height:3px;transform:translateY(-50%);border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--brand-bright));box-shadow:0 0 14px -2px var(--brand-glow);}
.ml-track-rocket{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:24px;filter:drop-shadow(0 0 10px var(--brand-glow));}
.ml-track-goal{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:19px;opacity:.8;}
.ml-patches{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:640px){.ml-patches{grid-template-columns:repeat(2,1fr);}}
.ml-patch{position:relative;text-align:center;padding:16px 8px 13px;border-radius:18px;border:1px solid var(--hairline);background:color-mix(in oklab,var(--space-600) 50%,transparent);transition:transform .25s var(--ease-out),border-color .2s var(--ease),box-shadow .3s var(--ease);}
.ml-patch.earned{border-color:color-mix(in oklab,var(--acc) 55%,transparent);box-shadow:0 0 30px -14px var(--acc);}
.ml-patch:hover{transform:translateY(-3px);}
.ml-patch-emblem{position:relative;width:86px;height:86px;margin:0 auto 9px;}
.ml-patch-emblem>svg{position:absolute;inset:0;width:100%;height:100%;}
.ml-patch.locked .ml-patch-art{opacity:.34;filter:grayscale(.7);}
.ml-patch-ring{transform:rotate(-90deg);}
.ml-patch-name{font-size:.85rem;font-weight:700;}
.ml-patch-prog{font-size:.73rem;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px;}
.ml-patch.earned .ml-patch-prog{color:var(--acc);font-weight:700;}
.ml-patch-check{position:absolute;top:9px;right:9px;z-index:2;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--space-900);font-size:12px;font-weight:900;box-shadow:0 0 14px -3px var(--acc);}
.ml-hub-urkunde{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:12px 22px;border-radius:var(--pill);font-weight:700;text-decoration:none;color:#3a2600;background:radial-gradient(circle at 50% 30%,#FFD27A,#E0A93E);box-shadow:0 0 26px -8px rgba(255,210,122,.6),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .22s var(--ease-out);}
.ml-hub-urkunde:hover{transform:translateY(-2px);}
.ml-hub-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:20px;}
.ml-hub-actions .ml-hub-urkunde{margin-top:0;}
.ml-hub-mission{display:inline-flex;align-items:center;gap:10px;padding:12px 14px 12px 22px;border-radius:var(--pill);font-weight:700;text-decoration:none;color:#2a0d07;background:radial-gradient(circle at 50% 30%,#FF9E8F,#E86A54);box-shadow:0 0 26px -10px rgba(255,111,94,.6),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .22s var(--ease-out);max-width:100%;overflow-wrap:anywhere;}
.ml-hub-mission:hover{transform:translateY(-2px);}
.ml-hub-mission svg{flex:none;}
.ml-hub-tool{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:var(--pill);font-weight:700;text-decoration:none;color:var(--ink);background:color-mix(in oklab,var(--space-600) 78%,transparent);border:1px solid color-mix(in oklab,#8E76F0 45%,var(--hairline));box-shadow:var(--inset);transition:transform .22s var(--ease-out),border-color .2s var(--ease);max-width:100%;overflow-wrap:anywhere;}
.ml-hub-tool:hover{transform:translateY(-2px);border-color:#8E76F0;}
.ml-hub-tool svg{flex:none;color:#AE9BFA;}
.ml-cta-arr{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.28);flex:none;}
.ml-pathhead-mission{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:15px;border-top:1px solid var(--hairline);text-decoration:none;color:var(--ink);font-weight:700;font-size:.98rem;transition:color .2s var(--ease);}
.ml-pathhead-mission svg{flex:none;color:var(--acc);}
.ml-pathhead-mission .ml-cta-arr{margin-left:auto;width:32px;height:32px;color:var(--space-900);background:radial-gradient(circle at 50% 38%,color-mix(in oklab,var(--acc) 60%,#fff),var(--acc));}
.ml-pathhead-mission:hover{color:var(--acc);}
/* Mitmach-Karten: die Haupt-Einladung der Seite, bewusst prominent.
   Missionen = spielen (Korall), Gedankenkarte = selber bauen (Violett). */
.mitmach-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:var(--s4);}
@media (max-width:640px){.mitmach-grid{grid-template-columns:1fr;gap:14px;}}
.mitmach-card{position:relative;display:flex;align-items:center;gap:18px;padding:clamp(20px,2.6vw,28px);border-radius:22px;text-decoration:none;color:var(--ink);background:color-mix(in oklab,var(--space-700) 60%,transparent);border:1.5px solid var(--hairline);box-shadow:var(--inset-line);transition:transform .22s var(--ease-out),border-color .2s var(--ease),background .2s,box-shadow .2s;}
.mitmach-card:hover{transform:translateY(-4px);background:color-mix(in oklab,var(--space-700) 78%,transparent);}
.mitmach-card:active{transform:translateY(-1px);}
.mitmach-card:focus-visible{outline-offset:4px;}
.mitmach-card .mc-ico{flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;box-shadow:var(--inset-line);color:#fff;}
.mitmach-card .mc-ico svg{width:30px;height:30px;}
.mitmach-card .mc-tx{flex:1;min-width:0;}
.mitmach-card .mc-tag{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;}
.mitmach-card .mc-tx b{display:block;font-size:clamp(1.2rem,1.06rem+.5vw,1.4rem);letter-spacing:-.015em;line-height:1.15;margin-bottom:5px;}
.mitmach-card .mc-desc{display:block;font-size:.94rem;color:var(--muted);line-height:1.45;}
.mitmach-card .mc-arr{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in oklab,var(--space-550) 70%,transparent);border:1px solid var(--hairline);color:var(--muted);font-size:1.15rem;font-weight:700;line-height:1;transition:transform .22s var(--ease-out),color .2s,background .2s,border-color .2s;}
.mitmach-card:hover .mc-arr{transform:translateX(3px);}
.mc-missionen .mc-ico{background:radial-gradient(circle at 50% 30%,#FF8A78,#D8553F);}
.mc-missionen .mc-tag{color:#FF9385;}
.mc-missionen:hover{border-color:#FF6F5E;box-shadow:var(--inset-line),0 0 46px -14px rgba(255,111,94,.5);}
.mc-missionen:hover .mc-arr{background:#FF6F5E;border-color:#FF6F5E;color:#2a0d07;}
.mc-gedanken .mc-ico{background:radial-gradient(circle at 50% 30%,#AE9BFA,#4A33A8);}
.mc-gedanken .mc-tag{color:#B9A4FF;}
.mc-gedanken:hover{border-color:#8E76F0;box-shadow:var(--inset-line),0 0 46px -14px rgba(142,118,240,.5);}
.mc-gedanken:hover .mc-arr{background:#8E76F0;border-color:#8E76F0;color:#140a2e;}
@media (prefers-reduced-motion:reduce){
  .mitmach-card,.mitmach-card .mc-arr{transition:border-color .2s var(--ease),background .2s,box-shadow .2s,color .2s;}
  .mitmach-card:hover,.mitmach-card:active{transform:none;}
  .mitmach-card:hover .mc-arr{transform:none;}
}

/* Ruhiger Übergang von den Karten zum Wissens-Check */
.mc-divider{display:block;width:60px;height:2px;margin-bottom:var(--s3);border-radius:2px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--cyan) 60%,transparent),transparent);}
.quiz-page .mc-check{padding-bottom:var(--s4);}
.quiz-page .mc-check + .section{padding-top:var(--s5);}

.ml-pathhead{border:1px solid var(--hairline);border-radius:20px;padding:18px 22px;background:color-mix(in oklab,var(--space-700) 55%,transparent);}
.ml-pathhead-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;justify-content:space-between;}
.ml-pathhead-txt small{text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:var(--muted);font-weight:700;}
.ml-pathhead-txt b{display:block;font-size:1.05rem;margin-bottom:9px;}
.ml-bar{position:relative;height:10px;max-width:300px;border-radius:6px;background:color-mix(in oklab,var(--muted) 22%,transparent);overflow:hidden;}
.ml-bar>span{position:absolute;inset:0 auto 0 0;border-radius:6px;background:linear-gradient(90deg,var(--acc),color-mix(in oklab,var(--acc) 55%,#fff));box-shadow:0 0 12px -2px var(--acc);}
.ml-start{display:inline-flex;align-items:center;gap:12px;padding:12px 15px 12px 22px;border-radius:var(--pill);font-weight:700;text-decoration:none;color:var(--ink);background:color-mix(in oklab,var(--space-600) 82%,transparent);border:1px solid color-mix(in oklab,var(--acc) 45%,var(--hairline));box-shadow:var(--inset-line);transition:transform .22s var(--ease-out),border-color .2s var(--ease);}
.ml-start:hover{transform:translateY(-2px);border-color:var(--acc);}
.ml-start .arr{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--space-900);background:radial-gradient(circle at 50% 38%,color-mix(in oklab,var(--acc) 60%,#fff),var(--acc));}
.ml-pathhead.done{--acc:#FFD27A;}

.ml-cert-page{max-width:660px;margin:0 auto;}
.ml-cert{position:relative;overflow:hidden;border-radius:16px;padding:40px 34px 30px;text-align:center;margin-bottom:22px;background:radial-gradient(130% 90% at 50% -10%, #182247, var(--space-900) 60%);border:1.5px solid color-mix(in oklab,#FFD27A 40%,var(--hairline));}
.ml-cert::before{content:"";position:absolute;inset:12px;border:1px solid color-mix(in oklab,#FFD27A 30%,transparent);border-radius:10px;pointer-events:none;}
.ml-cert-seal{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,color-mix(in oklab,#FFD27A 75%,#fff),#FFD27A,#C9962E);color:#3a2600;box-shadow:0 0 30px -8px rgba(255,210,122,.6);}
.ml-cert-seal svg{width:32px;height:32px;}
.ml-cert-kicker{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:#FFD27A;font-weight:700;}
.ml-cert h2{font-size:1.5rem;margin:8px 0 4px;letter-spacing:-.01em;}
.ml-cert-name{font-size:1.9rem;font-weight:800;margin:14px 0 6px;background:linear-gradient(90deg,#FFD27A,#FFE9BE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ml-cert-for{color:var(--muted);max-width:42ch;margin:0 auto 16px;}
.ml-cert-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:20px;font-size:.78rem;color:var(--muted);gap:16px;}
.ml-cert-foot .sig{border-top:1px solid var(--hairline);padding-top:6px;min-width:120px;text-align:left;}
.ml-cert-mark{font-weight:700;color:var(--ink);}
.ml-name-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 26px;}
.ml-name-form input{padding:11px 16px;border-radius:12px;border:1px solid var(--hairline);background:color-mix(in oklab,var(--space-600) 60%,transparent);color:var(--ink);font:inherit;min-width:200px;}
.ml-name-form button,.ml-print-btn{padding:11px 22px;border-radius:var(--pill);border:1px solid var(--hairline);background:color-mix(in oklab,var(--space-600) 60%,transparent);color:var(--ink);font:inherit;font-weight:650;cursor:pointer;}
.ml-print-btn{display:block;margin:6px auto 0;}
.ml-cert-empty{text-align:center;color:var(--muted);padding:var(--s5);border:1px dashed var(--hairline);border-radius:16px;}
@media print{
  body{background:#fff !important;}
  .site-header,.site-footer,.ml-name-form,.ml-print-btn,.skip-link,.lw-intro>.shell>header{display:none !important;}
  .ml-cert{border-color:#C9962E;background:#fff;color:#1a1a1a;box-shadow:none;page-break-inside:avoid;}
  .ml-cert::before{border-color:#C9962E;}
  .ml-cert h2,.ml-cert-for,.ml-cert-foot,.ml-cert-foot .sig,.ml-cert-mark{color:#333 !important;}
  .ml-cert-name{-webkit-text-fill-color:#B8860B;color:#B8860B;}
}

/* SPUR B: Handy-Härte, langer Lernpfad-Button darf nicht die Seite sprengen */
.ml-start { max-width: 100%; overflow-wrap: anywhere; }
.ml-hub-urkunde { max-width: 100%; overflow-wrap: anywhere; }
.ml-patch-name, .ml-patch-prog { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .ml-pathhead-row { flex-direction: column; align-items: stretch; }
  .ml-start { width: 100%; justify-content: space-between; }
  .ml-rank-count { text-align: left; }
}

/* Abschluss-CTA: lange Titel muessen auf Handys umbrechen, nicht ueberlaufen.
   .btn setzt white-space:nowrap, das hier fuer die Abschluss-Buttons aufheben. */
.lekt-finish .btn-primary.btn-lg { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.lekt-finish-back, .lekt-finish-next { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }