/* ════════════════════════════════════════════════════════════════
   fonder Landingpage · Fassung "film" (26.10.2026)
   Der ganze Bildschirm ist ein laufender Film. Tokens wie style-neu.css:
   Blau #1767ff · Ink #040A14 · Inter. Szenen-Regie in film.js:
   .sz.ist-da = sichtbar, .ist-aktiv = laeuft, .cue-1 = zweiter Akt,
   .geht = blendet aus. --ab / --ab2 = Einsatz in Sekunden ab Szenen-
   bzw. Cue-Start. Ohne JS (noscript) stehen die Szenen untereinander.
   ════════════════════════════════════════════════════════════════ */

@property --dreh { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

:root {
  --blue: #1767ff;
  --blue-rgb: 23, 103, 255;
  --blue-strong: #0f4ed8;
  --blue-soft: #5c98ff;
  --blue-hell: #8ab5ff;
  --ink: #040A14;
  --ink-surface: #0c1526;
  --orange: #ff9f43;
  --green: #3ddc84;
  --green-text: #1f9d55;
  --text: rgba(241, 245, 249, 0.94);
  --muted: rgba(174, 190, 214, 0.78);
  --light-bg: #FDFCFC;
  --light-text: #0b1f44;
  --light-muted: #4d5f7c;
  --glas: rgba(12, 21, 38, 0.72);
  --glas-rand: rgba(255, 255, 255, 0.1);
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --font: "Inter", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kopf-h: 68px;
  --fuss-h: 128px;
  --rand: max(16px, 5vw);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { line-height: 1.5; letter-spacing: 0.005em; }
.film-js, .film-js body { height: 100%; overflow: hidden; overscroll-behavior: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, p, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: rgba(var(--blue-rgb), 0.85); color: #fff; }

.grad {
  background: linear-gradient(100deg, var(--blue-soft) 0%, var(--blue) 45%, var(--blue-hell) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradLauf 6s ease-in-out infinite alternate;
}
.grad-gruen { color: var(--green); text-shadow: 0 0 40px rgba(61, 220, 132, 0.45); }
@keyframes gradLauf { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* ── Buehne & Hintergrund ──────────────────────────────────── */
.film { position: relative; }
.film-js .film { position: fixed; inset: 0; height: 100dvh; overflow: hidden; }
.film-grund { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.film-aurora { position: absolute; inset: -12%; }
.film-aurora span {
  position: absolute; border-radius: 50%; opacity: 0;
  transition: opacity 1.6s ease, transform 2.4s var(--ease);
}
/* weiches Licht wie in der ersten Fassung; schwache Geraete (.leicht) ohne Unschaerfe */
.film:not(.leicht) .film-aurora span { filter: blur(60px); }
.au-blau { width: 60vmax; height: 60vmax; left: -14%; top: -20%; background: radial-gradient(circle, rgba(var(--blue-rgb), 0.5), transparent 65%); opacity: 0.7 !important; animation: auA 24s ease-in-out infinite alternate; }
.au-tief { width: 50vmax; height: 50vmax; right: -12%; bottom: -16%; background: radial-gradient(circle, rgba(15, 78, 216, 0.5), transparent 65%); opacity: 0.6 !important; animation: auB 28s ease-in-out infinite alternate; }
.au-orange { width: 46vmax; height: 46vmax; right: -6%; top: -8%; background: radial-gradient(circle, rgba(255, 159, 67, 0.32), transparent 65%); }
.au-gruen { width: 54vmax; height: 54vmax; right: 0; top: 10%; background: radial-gradient(circle, rgba(61, 220, 132, 0.34), transparent 65%); }
.film[data-szene="intro"] .au-orange, .film[data-szene="luecke"] .au-orange, .film[data-szene="aha"]:not(.ist-gruen) .au-orange { opacity: 1; }
.film.ist-gruen .au-gruen, .film[data-szene="avdepot"] .au-gruen { opacity: 1; }
@keyframes auA { to { transform: translate(10vw, 8vh) scale(1.15); } }
@keyframes auB { to { transform: translate(-8vw, -10vh) scale(0.9); } }

.film-partikel { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }
/* Korn steht still: animiert und mit mix-blend-mode kostete es auf grossen
   Bildschirmen die Haelfte der Bildrate (gemessen 1920x1080: 21 -> 45 fps). */
.film-korn {
  position: absolute; inset: 0; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.film-blitz { position: absolute; inset: 0; background: radial-gradient(circle at var(--bx, 60%) var(--by, 50%), rgba(255, 255, 255, 0.9), rgba(61, 220, 132, 0.35) 30%, transparent 70%); opacity: 0; }
.film-blitz.an { animation: blitz 1.1s ease-out; }
@keyframes blitz { 0% { opacity: 0; } 8% { opacity: 0.85; } 100% { opacity: 0; } }

/* ── Kopf ──────────────────────────────────────────────────── */
.film-kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--kopf-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--rand);
}
.film-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }
.film-logo img { width: 32px; height: 32px; border-radius: 9px; }
.film-kopf-rechts { display: flex; align-items: center; gap: 18px; font-size: 0.92rem; }
.film-kopf-link { color: var(--muted); transition: color 0.2s; }
.film-kopf-link:hover { color: #fff; }
.film-knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer; font-weight: 700; color: #fff; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-strong) 100%);
  box-shadow: 0 10px 34px -8px rgba(var(--blue-rgb), 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
  overflow: hidden;
}
.film-knopf:hover { transform: translateY(-1px); box-shadow: 0 16px 44px -8px rgba(var(--blue-rgb), 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.film-knopf::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg); animation: glanz 3.6s var(--ease) infinite;
}
@keyframes glanz { 0%, 55% { left: -80%; } 85%, 100% { left: 130%; } }
.film-knopf-klein { padding: 9px 18px; font-size: 0.88rem; }
.film-knopf-gross { padding: 17px 30px; font-size: 1.05rem; }

/* ── Szenen ────────────────────────────────────────────────── */
.film-szenen { position: relative; z-index: 10; }
.film-js .film-szenen { position: absolute; inset: 0; }
.sz { position: relative; min-height: 100vh; padding: calc(var(--kopf-h) + 2vh) var(--rand) var(--fuss-h); }
.sz-inhalt { position: relative; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 32px); }
.film-js .sz { position: absolute; inset: 0; min-height: 0; padding: 0; display: none; }
.film-js .sz.ist-da { display: block; }
/* Jede Szene passt auf jeden Bildschirm: film.js misst den Inhalt und setzt
   --fit (< 1, wenn er nicht passt). Die Flaeche wird dafuer um 1/fit groesser
   gerechnet und wieder auf die echte Groesse skaliert, wie ein Herauszoomen. */
.film-js .sz-inhalt {
  position: absolute; left: var(--rand); top: calc(var(--kopf-h) + 2vh);
  width: calc((100% - 2 * var(--rand)) / var(--fit, 1));
  height: calc((100% - var(--kopf-h) - 2vh - var(--fuss-h)) / var(--fit, 1));
  transform: scale(var(--fit, 1)); transform-origin: 0 0;
}
.film-js .sz-inhalt.messen { justify-content: flex-start !important; align-content: start !important; }
.film-js .messen, .film-js .messen * { animation: none !important; transition: none !important; }
.film-js .sz.ist-aktiv { animation: szEin 1s var(--ease) both; }
.film-js .sz.geht { animation: szAus 0.7s ease-in both; pointer-events: none; }
@keyframes szEin { from { opacity: 0; scale: 1.06; filter: blur(14px); } to { opacity: 1; scale: 1; filter: blur(0); } }
@keyframes szAus { from { opacity: 1; scale: 1; filter: blur(0); } to { opacity: 0; scale: 0.94; filter: blur(10px); } }

.sz-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: clamp(0.72rem, 1.1vw, 0.86rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue-soft);
}
.sz-eyebrow b { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; background: rgba(var(--blue-rgb), 0.18); border: 1px solid rgba(var(--blue-rgb), 0.45); color: #fff; letter-spacing: 0.04em; }
.sz-titel { font-size: clamp(1.9rem, min(5vw, 8.4vh), 4.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; color: #fff; }
.sz-sub { max-width: 34em; font-size: clamp(0.98rem, min(1.35vw, 2.3vh), 1.22rem); color: var(--muted); }
.sz-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(10px, 2vh, 18px); max-width: 640px; }
.sz-fussnote { font-size: 0.74rem; color: rgba(174, 190, 214, 0.55); max-width: 60em; }

/* Karten: dunkles Glas */
.glas, .af-karte, .ki-zeilen, .rang-karte, .zitat {
  background: var(--glas); border: 1px solid var(--glas-rand); border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Maus-Neigung: film.js setzt --mx/--my (-1..1) auf .film */
.kippen {
  transform: perspective(1400px) rotateY(calc(var(--ky0, 0deg) + var(--mx, 0) * 6deg)) rotateX(calc(var(--kx0, 0deg) - var(--my, 0) * 5deg));
  transition: transform 0.5s var(--ease);
  transform-style: preserve-3d;
}

/* ── Choreografie ──────────────────────────────────────────── */
.film-js .ein, .film-js .ein-zoom, .film-js .ein-flug, .film-js .ein-rechts, .film-js .ein-fall, .film-js .nach-1, .film-js .wort, .film-js .zeichen { opacity: 0; }
.sz.ist-aktiv .ein { animation: einAuf 0.9s var(--ease) var(--ab, 0s) both; }
.sz.ist-aktiv .ein-zoom { animation: einZoom 0.9s var(--ease) var(--ab, 0s) both; }
.sz.ist-aktiv .ein-flug { animation: einFlug 1.1s var(--ease) var(--ab, 0s) both; }
.sz.ist-aktiv .ein-rechts { animation: einRechts 0.8s var(--ease) var(--ab, 0s) both; }
.sz.ist-aktiv .ein-fall { animation: einFall 1s var(--ease) var(--ab, 0s) both; }
.sz.cue-1 .nach-1 { animation: einAuf 0.8s var(--ease) var(--ab2, 0s) both; }
.sz.ist-aktiv .wort { animation: wortSchlag 0.75s var(--ease) calc(0.25s + var(--i) * 0.16s) both; }
.sz.ist-aktiv .zeichen { animation: tippen 0.01s linear calc(var(--ab, 0s) + var(--i) * 0.045s) both; }
@keyframes einAuf { from { opacity: 0; translate: 0 28px; filter: blur(10px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes einZoom { from { opacity: 0; scale: 0.82; filter: blur(8px); } to { opacity: 1; scale: 1; filter: blur(0); } }
@keyframes einFlug { from { opacity: 0; translate: 0 90px; scale: 0.86; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes einRechts { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes einFall { from { opacity: 0; translate: 0 -70px; rotate: -10deg; } to { opacity: 1; translate: 0 0; rotate: -3deg; } }
@keyframes wortSchlag { from { opacity: 0; scale: 1.7; filter: blur(16px); } 60% { opacity: 1; } to { opacity: 1; scale: 1; filter: blur(0); } }
@keyframes tippen { to { opacity: 1; } }
.film.ist-pausiert .sz, .film.ist-pausiert .sz * { animation-play-state: paused !important; }

/* ── 1 · Die Frage ─────────────────────────────────────────── */
.sz-intro > .sz-inhalt { align-items: center; text-align: center; }
.intro-inhalt { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 4vh, 36px); max-width: 1100px; }
.intro-frage { font-size: clamp(2.1rem, min(6.4vw, 10vh), 6rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.04em; color: #fff; }
.intro-frage .zeichen:first-child, .intro-frage .zeichen:last-child { color: var(--blue-soft); }
.intro-wer { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: 1rem; }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), #ff6b6b); color: #fff; font-weight: 800; font-size: 0.85rem; box-shadow: 0 0 0 4px rgba(255, 159, 67, 0.18); }


/* ── 2 · Titel ─────────────────────────────────────────────── */
.sz-titel { text-wrap: balance; }
.sz-start > .sz-inhalt { align-items: center; text-align: center; }
.titel-inhalt { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3.4vh, 30px); max-width: 1200px; margin: 0 auto; }
.film-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px;
  font-size: 0.82rem; font-weight: 600; color: var(--blue-soft);
  border: 1px solid rgba(var(--blue-rgb), 0.35); border-radius: var(--radius-pill); background: rgba(var(--blue-rgb), 0.08);
}
.film-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); animation: puls 2s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.titel-h1 { font-size: clamp(2.6rem, min(8.6vw, 13.5vh), 8.6rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.045em; color: #fff; text-align: center; }
.titel-h1 .zeile { display: block; }
.titel-h1 .wort { display: inline-block; }
.titel-sub { max-width: 40em; font-size: clamp(1rem, min(1.5vw, 2.5vh), 1.3rem); color: var(--muted); text-align: center; }
.titel-sub strong { color: #fff; font-weight: 600; }

/* ── 3 · Die Luecke ────────────────────────────────────────── */
/* Die Kurve zeichnen die Partikel in das Rechteck .luecke-chart (film.js,
   gleiche Prozentwerte: Einkommen 52 % -> 92 % bis Alter 67 = 64 % der
   Breite, danach Rente 38 %). Die Beschriftung liegt hier darueber. */
.luecke-chart { position: relative; flex: 1 1 auto; min-height: 30vh; margin-bottom: 26px; }
.lc-label { position: absolute; font-size: 0.82rem; font-weight: 600; color: var(--blue-hell); white-space: nowrap; }
.lc-netto { left: 2%; top: calc(48% - 42px); }
.lc-rente { left: 66%; top: calc(62% + 10px); color: var(--muted); }
.lc-linie { position: absolute; left: 64%; top: 0; bottom: 0; border-left: 1px dashed rgba(255, 255, 255, 0.35); }
.lc-linie em { position: absolute; top: -4px; left: 8px; font-style: normal; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.lc-badge {
  position: absolute; left: 82%; top: 35%; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 18px;
  border-radius: var(--radius-md); background: rgba(255, 159, 67, 0.14); border: 1px solid rgba(255, 159, 67, 0.55);
  box-shadow: 0 0 60px -10px rgba(255, 159, 67, 0.6); white-space: nowrap;
}
.lc-badge small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.lc-badge b { font-size: clamp(1.3rem, 2.6vw, 2.2rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.lc-badge em { font-style: normal; font-size: 0.55em; color: var(--muted); font-weight: 600; }
.lc-achse { position: absolute; left: 0; right: 0; top: calc(100% + 8px); height: 16px; }
.lc-achse span { position: absolute; left: var(--x); translate: -50% 0; font-size: 0.72rem; color: rgba(174, 190, 214, 0.6); }

/* ── 4 · Vier Wege ─────────────────────────────────────────── */
.anlagen-fenster { position: relative; display: flex; flex-direction: column; gap: clamp(12px, 2.4vh, 22px); padding: clamp(14px, 2.4vw, 26px); border-radius: var(--radius-xl); }
.af-schritte { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.74rem; font-weight: 600; }
.af-schritte span { padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.05); color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.08); }
.af-schritte .fertig { color: var(--green); border-color: rgba(61, 220, 132, 0.3); }
.af-schritte .fertig::before { content: "✓ "; }
.af-schritte .jetzt { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: 0 0 24px rgba(var(--blue-rgb), 0.6); }
.af-karten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.af-karte { display: flex; flex-direction: column; gap: 4px; padding: clamp(12px, 2vh, 20px); }
.af-karte b { font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 800; color: #fff; }
.af-karte small { font-size: 0.78rem; color: var(--muted); }
.af-ico { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 6px; }
.af-blau { background: linear-gradient(135deg, var(--blue-soft), var(--blue)); box-shadow: 0 0 24px rgba(var(--blue-rgb), 0.55); }
.af-tief { background: linear-gradient(135deg, #3b5bdb, #1e2f8a); }
.af-orange { background: linear-gradient(135deg, #ffc078, var(--orange)); box-shadow: 0 0 24px rgba(255, 159, 67, 0.4); }
.af-gruen { background: linear-gradient(135deg, #8ff0b8, var(--green)); box-shadow: 0 0 24px rgba(61, 220, 132, 0.4); }
.af-neu { border-color: rgba(61, 220, 132, 0.45); }
.af-werte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.af-werte > span { display: flex; flex-direction: column; padding: 10px 14px; border-radius: var(--radius-md); background: rgba(var(--blue-rgb), 0.1); border: 1px solid rgba(var(--blue-rgb), 0.3); }
.af-werte small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-soft); }
.af-werte b { font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

/* ── 5 · Aha ───────────────────────────────────────────────── */
.aha-karte {
  position: relative; z-index: 2; width: 100%; max-width: 560px; padding: clamp(16px, 2.6vw, 30px);
  border-radius: var(--radius-xl); background: var(--light-bg); color: var(--light-text);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.4);
  --ky0: -8deg;
}
.aha-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(12px, 2.4vh, 22px); }
.aha-tabs span { padding: 8px 14px; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 700; border: 1px solid rgba(15, 42, 97, 0.14); color: var(--light-muted); transition: all 0.5s var(--ease); }
.aha-tabs .vor, .sz.cue-1 .aha-tabs .nach { background: var(--light-text); color: #fff; border-color: var(--light-text); }
.sz.cue-1 .aha-tabs .vor { background: transparent; color: var(--light-muted); border-color: rgba(15, 42, 97, 0.14); }
.aha-zeile { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; margin-bottom: clamp(10px, 2vh, 18px); }
.aha-zeile .name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: clamp(0.9rem, 1.3vw, 1.1rem); }
.aha-zeile .name i { width: 12px; height: 12px; border-radius: 3px; }
.aha-depot .name i, .aha-depot .spur i { background: var(--orange); }
.aha-police .name i, .aha-police .spur i { background: linear-gradient(90deg, var(--blue-soft), var(--blue)); }
.aha-zeile b { font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.spur { grid-column: 1 / -1; height: 12px; border-radius: 6px; background: rgba(15, 42, 97, 0.07); overflow: hidden; }
.spur i { display: block; height: 100%; border-radius: 6px; width: 0; transition: width 1.4s var(--ease); }
.sz.ist-aktiv .aha-depot .spur i { width: 100%; transition-delay: 1.1s; }
.sz.ist-aktiv .aha-police .spur i { width: 97.6%; transition-delay: 1.1s; }
.sz.cue-1 .aha-depot .spur i { width: 94%; transition-delay: 0.2s; }
.sz.cue-1 .aha-police .spur i { width: 100%; transition-delay: 0.2s; box-shadow: 0 0 20px rgba(var(--blue-rgb), 0.6); }
.aha-schalter {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; padding: 6px 4px;
  background: none; border: 0; cursor: pointer; font-weight: 700; font-size: clamp(0.92rem, 1.3vw, 1.08rem); color: var(--light-text);
}
.aha-schalter .sw { position: relative; width: 58px; height: 32px; border-radius: 16px; background: #c9d3e3; transition: background 0.4s; }
.aha-schalter .sw i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: transform 0.45s var(--ease); }
.sz.cue-1 .aha-schalter .sw { background: var(--blue); }
.sz.cue-1 .aha-schalter .sw i { transform: translateX(26px); }
.sz.ist-aktiv:not(.cue-1) .aha-schalter .sw { animation: schalterRuf 1.4s ease-in-out 2.4s infinite; }
@keyframes schalterRuf { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--blue-rgb), 0.55); } 50% { box-shadow: 0 0 0 12px rgba(var(--blue-rgb), 0); } }
.aha-quelle { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(15, 42, 97, 0.08); font-size: 0.68rem; line-height: 1.4; color: var(--light-muted); }
.aha-tipp { position: absolute; right: clamp(16px, 2.6vw, 30px); top: clamp(16px, 2.6vw, 30px); font-size: 0.78rem; font-weight: 700; color: var(--blue); opacity: 0; }
.aha-tipp::before { content: "← "; }
.sz.ist-aktiv:not(.cue-1) .aha-tipp { animation: einAuf 0.6s var(--ease) 2.4s both; }
.aha-ergebnis { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px; }
/* hochkant: Ergebnis ueber der Karte, damit die Kurven unten frei laufen */
.sz-aha .sz-text { order: 1; }
.sz-aha .aha-ergebnis { order: 2; }
.sz-aha .aha-karte { order: 3; }
.aha-ergebnis b { font-size: clamp(2rem, min(5vw, 8vh), 4.4rem); font-weight: 800; letter-spacing: -0.04em; color: var(--green); text-shadow: 0 0 50px rgba(61, 220, 132, 0.5); font-variant-numeric: tabular-nums; }
.aha-ergebnis > span { color: var(--muted); font-size: 1rem; }
.aha-kurven { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; z-index: 0; }

/* ── 6 · Rechenkern ────────────────────────────────────────── */
.orbit { --gr: min(86vw, 40vh); position: relative; width: var(--gr); height: var(--gr); margin: 0 auto; flex: 0 0 auto; animation: drehen 48s linear infinite; }
.orbit-kern { position: absolute; left: 50%; top: 50%; width: 22%; height: auto; translate: -50% -50%; border-radius: 22%; box-shadow: 0 0 80px rgba(var(--blue-rgb), 0.8); }
.orbit-ring { position: absolute; inset: 0; }
.orbit-ring::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); translate: -50% -50%; border-radius: 50%; border: 1px dashed rgba(var(--blue-rgb), 0.35); }
.orbit-ring.r1 { --r: calc(var(--gr) * 0.27); --tempo: 1; }
.orbit-ring.r2 { --r: calc(var(--gr) * 0.39); --tempo: -0.7; }
.orbit-ring.r3 { --r: calc(var(--gr) * 0.5); --tempo: 0.5; }
.orbit-ring span {
  position: absolute; left: 50%; top: 50%; white-space: nowrap;
  padding: 6px 12px; border-radius: var(--radius-pill); font-size: clamp(0.66rem, 1vw, 0.82rem); font-weight: 600;
  color: #fff; background: rgba(12, 21, 38, 0.86); border: 1px solid rgba(var(--blue-rgb), 0.45); box-shadow: 0 0 22px rgba(var(--blue-rgb), 0.25);
  --a: calc(var(--w) + var(--dreh) * var(--tempo));
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
}
@keyframes drehen { to { --dreh: 360deg; } }
.sz-steuer .orbit-ring span { opacity: 0; }
.sz-steuer.ist-aktiv .orbit-ring span { animation: einZoom 0.7s var(--ease) both; }
.sz-steuer.ist-aktiv .r1 span { animation-delay: 0.7s; }
.sz-steuer.ist-aktiv .r2 span { animation-delay: 1.1s; }
.sz-steuer.ist-aktiv .r3 span { animation-delay: 1.5s; }

/* ── 7 · Tarife ────────────────────────────────────────────── */
.tarife-logos { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--kopf-h) + 1vh) 0 calc(var(--fuss-h) + 1vh); opacity: 0.45; }
.tl-reihe { display: flex; gap: 14px; width: max-content; animation: laufband 60s linear infinite; }
/* Logo-Plakette wie im Logo-Band von style-neu.css (.logo-pill) und in der App */
.logo-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; white-space: nowrap;
  border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.04);
  font-size: 0.9rem; font-weight: 600; color: var(--muted);
}
.logo-pill img, .rang-zeile img { width: 30px; height: 30px; padding: 4px; border-radius: 50%; background: #fff; object-fit: contain; }
.tl-rueck { animation-direction: reverse; animation-duration: 46s; }
@keyframes laufband { to { transform: translateX(-50%); } }
.rang-karte { position: relative; z-index: 2; width: 100%; max-width: 600px; padding: clamp(16px, 2.4vw, 28px); --ky0: -6deg; }
.rang-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-bottom: 14px; font-weight: 700; color: #fff; }
.rang-kopf em { font-style: normal; font-size: 0.74rem; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(var(--blue-rgb), 0.16); color: var(--blue-hell); }
.rang-zeile { display: grid; grid-template-columns: 30px 1fr auto; grid-template-areas: "logo name wert" "spur spur spur"; align-items: center; gap: 6px 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.rang-zeile img { grid-area: logo; }
.rang-zeile .rn { grid-area: name; font-size: 0.9rem; font-weight: 600; }
.rang-zeile b { grid-area: wert; font-size: 1rem; font-variant-numeric: tabular-nums; }
.rang-zeile .rs { grid-area: spur; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.rang-zeile .rs i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--blue-soft), var(--blue)); transition: width 1.4s var(--ease); }
.sz.ist-aktiv .rang-zeile .rs i { width: var(--w); transition-delay: var(--ab); }
.rang-zeile:first-of-type .rs i { background: linear-gradient(90deg, #8ff0b8, var(--green)); }
.rang-eins { font-style: normal; display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--green); color: #04220f; font-size: 0.72rem; font-weight: 800; }
.sz.ist-aktiv .rang-eins { animation: einZoom 0.6s var(--ease) 2.6s both, puls 2s 3.2s infinite; }
.rang-fuss { margin-top: 12px; font-size: 0.86rem; color: var(--muted); }
.rang-fuss b { color: var(--green); }

/* ── 8 · KI ────────────────────────────────────────────────── */
.ki-buehne { position: relative; display: grid; grid-template-columns: 0.8fr 1fr; gap: clamp(12px, 2.4vw, 28px); align-items: center; }
.ki-dokument { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 16px; aspect-ratio: 0.72; border-radius: 10px; background: var(--light-bg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); overflow: hidden; rotate: -3deg; }
.ki-dok-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: clamp(0.6rem, 0.9vw, 0.76rem); font-weight: 700; color: var(--light-text); overflow: hidden; white-space: nowrap; }
.ki-dok-kopf i { flex: 0 0 auto; width: 20px; height: 24px; border-radius: 3px; background: #e5484d; }
.ki-dok-zeile { display: block; height: 7px; width: var(--w); border-radius: 4px; background: #dfe5ee; transition: background 0.4s, box-shadow 0.4s; }
.sz.cue-1 .ki-dok-zeile.hl { background: rgba(var(--blue-rgb), 0.55); box-shadow: 0 0 12px rgba(var(--blue-rgb), 0.6); }
.ki-strahl { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: linear-gradient(180deg, transparent, rgba(var(--blue-rgb), 0.35), transparent); border-bottom: 2px solid var(--blue); opacity: 0; }
.sz.ist-aktiv .ki-strahl { animation: strahl 1.3s ease-in-out 1.3s 3 both; }
@keyframes strahl { 0% { opacity: 1; top: -40px; } 100% { opacity: 1; top: 100%; } }
.ki-zeilen { position: relative; z-index: 2; padding: clamp(14px, 2vw, 22px); display: flex; flex-direction: column; gap: 10px; --ky0: -6deg; }
.ki-kopf { display: flex; align-items: center; gap: 8px; color: #fff; }
.ki-marke { padding: 2px 8px; border-radius: 6px; background: linear-gradient(135deg, #a78bfa, var(--blue)); font-size: 0.72rem; font-weight: 800; }
.ki-status { margin-left: auto; font-style: normal; font-size: 0.78rem; color: var(--blue-hell); animation: blinken 1s steps(2) infinite; }
.sz.cue-1 .ki-status { visibility: hidden; }
@keyframes blinken { 50% { opacity: 0.35; } }
.ki-zeile { display: grid; grid-template-columns: 1fr auto 20px; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); font-size: clamp(0.8rem, 1.1vw, 0.92rem); }
.ki-zeile b { font-size: 1.05rem; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.ki-zeile b small { display: block; font-size: 0.66rem; font-weight: 500; color: var(--muted); }
.ki-zeile i { font-style: normal; color: var(--green); font-weight: 800; }
.ki-fertig { padding: 10px 12px; border-radius: 10px; background: rgba(61, 220, 132, 0.12); border: 1px solid rgba(61, 220, 132, 0.45); color: var(--green); font-weight: 700; font-size: 0.9rem; }

/* ── 9 · PDF ───────────────────────────────────────────────── */
.sz-pdf { --marke: #1767ff; --marke-rgb: 23, 103, 255; }
.sz-pdf[data-farbe="1"] { --marke: #8b5cf6; --marke-rgb: 139, 92, 246; }
.sz-pdf[data-farbe="2"] { --marke: #10b981; --marke-rgb: 16, 185, 129; }
.sz-pdf[data-farbe="3"] { --marke: #f97316; --marke-rgb: 249, 115, 22; }
.sz-pdf .grad { background: linear-gradient(100deg, var(--marke), #fff 160%); -webkit-background-clip: text; background-clip: text; }
.pdf-farben { display: flex; gap: 10px; }
.pdf-farben button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; background: var(--c); cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); transition: transform 0.25s var(--ease), border-color 0.25s; }
.pdf-farben button:hover { transform: scale(1.12); }
.pdf-farben button.an { border-color: #fff; transform: scale(1.12); }
.pdf-seite {
  position: relative; z-index: 2; width: min(100%, 440px); margin: 0 auto; padding: clamp(16px, 2.2vw, 26px);
  display: flex; flex-direction: column; gap: 12px; aspect-ratio: 0.74;
  border-radius: 14px; background: #fff; color: var(--light-text);
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.9), 0 0 90px -20px rgba(var(--marke-rgb), 0.7);
  transition: box-shadow 0.6s;
  --ky0: -16deg; --kx0: 6deg;
}
.ps-kopf { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 3px solid var(--marke); transition: border-color 0.6s; }
.ps-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--marke); transition: background 0.6s; }
.ps-kopf b { display: block; font-size: 0.9rem; }
.ps-kopf small { font-size: 0.74rem; color: var(--light-muted); }
.ps-titel { font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 800; letter-spacing: -0.02em; }
.ps-balken { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 10px; padding: 10px; border-radius: 10px; background: #f3f6fb; min-height: 80px; }
.ps-balken i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: rgba(var(--marke-rgb), 0.35); transition: background 0.6s; }
.ps-balken i.akz { background: var(--marke); }
.sz.ist-aktiv .ps-balken i { animation: balkenWachsen 1s var(--ease) both; }
.sz.ist-aktiv .ps-balken i:nth-child(1) { animation-delay: 1.2s; }
.sz.ist-aktiv .ps-balken i:nth-child(2) { animation-delay: 1.3s; }
.sz.ist-aktiv .ps-balken i:nth-child(3) { animation-delay: 1.4s; }
.sz.ist-aktiv .ps-balken i:nth-child(4) { animation-delay: 1.5s; }
.sz.ist-aktiv .ps-balken i:nth-child(5) { animation-delay: 1.6s; }
@keyframes balkenWachsen { from { scale: 1 0; transform-origin: bottom; } to { scale: 1 1; } }
.ps-balken i { transform-origin: bottom; }
.ps-zeile { display: block; height: 7px; width: var(--w); border-radius: 4px; background: #e4e9f1; }
.ps-fuss { display: flex; align-items: center; justify-content: space-between; }
.ps-knopf { white-space: nowrap; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--marke); color: #fff; font-size: 0.8rem; font-weight: 700; transition: background 0.6s; }
.ps-fuss em { font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--light-muted); }

/* ── 10 · AV-Depot ─────────────────────────────────────────── */
.sz-av > .sz-inhalt { justify-content: flex-end; }
.av-2027 { position: absolute; left: 2%; right: 2%; top: 0; height: 24%; z-index: 0; }
.av-uhr { display: flex; gap: 8px; }
.av-uhr span { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 8px 6px; border-radius: var(--radius-md); background: var(--glas); border: 1px solid rgba(61, 220, 132, 0.3); }
.av-uhr b { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.av-uhr small { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.av-fakten { display: flex; flex-wrap: wrap; gap: 10px; }
.av-fakten > span { display: flex; flex-direction: column; padding: 8px 14px; border-left: 2px solid var(--green); }
.av-fakten b { font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 800; color: #fff; }
.av-fakten small { font-size: 0.74rem; color: var(--muted); }
.sz-av .grad { background: linear-gradient(100deg, #8ff0b8, var(--green) 50%, var(--blue-soft)); -webkit-background-clip: text; background-clip: text; }

/* ── 11 · Stimmen ──────────────────────────────────────────── */
.stimmen-stern { position: absolute; left: 6%; right: 6%; top: 0; height: 13%; z-index: 0; }
.stimmen-zahlen { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 36px); }
.stimmen-zahlen > span { display: flex; flex-direction: column; }
.stimmen-zahlen b { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 800; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stimmen-zahlen small { color: var(--muted); font-size: 0.85rem; }
.stimmen-zitate { position: relative; z-index: 2; display: grid; min-height: 190px; }
.zitat { grid-area: 1 / 1; align-self: center; padding: clamp(18px, 2.6vw, 30px); opacity: 0; }
.zitat blockquote { font-size: clamp(1.1rem, min(2vw, 3.2vh), 1.7rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: #fff; }
.zitat blockquote::before { content: "★★★★★"; display: block; margin-bottom: 10px; font-size: 0.85rem; letter-spacing: 0.2em; color: #fbbf24; }
.zitat figcaption { margin-top: 14px; font-size: 0.86rem; color: var(--muted); }
.zitat figcaption b { display: block; color: #fff; }
.sz.ist-aktiv .zitat { animation: zitatWechsel 2.7s var(--ease) var(--ab) both; }
.sz.ist-aktiv .zitat-bleibt { animation: einAuf 0.9s var(--ease) var(--ab) both; }
@keyframes zitatWechsel { 0% { opacity: 0; translate: 0 24px; filter: blur(8px); } 15%, 82% { opacity: 1; translate: 0 0; filter: blur(0); } 100% { opacity: 0; translate: 0 -24px; filter: blur(8px); } }

/* ── 12 · Dein Termin ──────────────────────────────────────── */
.sz-ende > .sz-inhalt { align-items: center; text-align: center; }
.ende-inhalt { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.4vh, 22px); width: 100%; max-width: 860px; margin: auto; }
.ende-logo { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 0 80px rgba(var(--blue-rgb), 0.85); }
.ende-titel { text-align: center; font-size: clamp(2.2rem, min(6vw, 9vh), 5.4rem); }
.ende-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 760px; }
.film-feld {
  min-width: 0; padding: 16px 20px; border-radius: var(--radius-pill); font: inherit; font-size: 1rem; color: #fff;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.2); outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.film-feld::placeholder { color: rgba(226, 232, 240, 0.55); }
.film-feld:focus { border-color: rgba(var(--blue-rgb), 0.9); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 4px rgba(var(--blue-rgb), 0.25); }
.film-feld:invalid:not(:placeholder-shown) { border-color: rgba(255, 120, 120, 0.7); }
.ende-hinweis { font-size: 0.86rem; color: var(--muted); }
.ende-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; font-size: 0.9rem; color: var(--muted); }
.ende-links a:hover, .ende-nochmal:hover { color: #fff; }
.ende-nochmal { padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); cursor: pointer; color: #fff; font-weight: 600; }
.ende-recht { font-size: 0.74rem; color: rgba(174, 190, 214, 0.5); }
.ende-recht a:hover { color: #fff; }

/* ── Untertitel, Player-Leiste, Tipp ───────────────────────── */
.film-untertitel, .film-leiste, .film-tipp { display: none; }
.film-js .film-untertitel {
  display: block; position: fixed; z-index: 25; left: 50%; bottom: 74px; translate: -50% 0;
  width: max-content; max-width: calc(100% - 32px); padding: 8px 18px; border-radius: 12px; text-align: center;
  font-size: clamp(0.84rem, 1.2vw, 1rem); font-weight: 500; line-height: 1.4; color: #fff;
  background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity 0.4s, translate 0.4s var(--ease);
}
.film-untertitel.wechsel { opacity: 0; translate: -50% 8px; }
.film-untertitel:empty { opacity: 0; }
.film-js .film-leiste {
  display: flex; position: fixed; z-index: 26; left: 0; right: 0; bottom: 0; align-items: center; gap: 12px;
  padding: 10px var(--rand) max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(4, 10, 20, 0.85));
}
.film-pause {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 11px;
  border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06);
  cursor: pointer; font-size: 0.82rem; font-weight: 600; transition: background 0.2s, border-color 0.2s;
}
.film-pause:hover { background: rgba(255, 255, 255, 0.14); }
.film-pause-ico { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 14px; height: 14px; }
.film-pause-ico i { width: 4px; height: 14px; border-radius: 2px; background: #fff; }
.film-pause-text { display: none; }
.film.ist-pausiert .film-pause { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 24px rgba(var(--blue-rgb), 0.6); }
.film.ist-pausiert .film-pause-ico i:first-child { width: 0; height: 0; border-radius: 0; background: none; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.film.ist-pausiert .film-pause-ico i:last-child { display: none; }
.film-tempo { flex: 0 0 auto; min-width: 46px; height: 38px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); cursor: pointer; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.film-tempo:hover { background: rgba(255, 255, 255, 0.14); }
.film-tempo.langsam { border-color: rgba(var(--blue-rgb), 0.8); color: var(--blue-hell); }
/* Angehalten: sichtbar sagen, was los ist und wie es weitergeht */
.film-angehalten { display: none; }
.film-js .film-angehalten {
  display: flex; position: fixed; z-index: 27; left: 50%; top: calc(var(--kopf-h) + 8px); translate: -50% -10px;
  align-items: center; gap: 12px; padding: 9px 18px; border-radius: var(--radius-pill); white-space: nowrap;
  font-size: 0.86rem; color: var(--muted); background: rgba(4, 10, 20, 0.82); border: 1px solid rgba(var(--blue-rgb), 0.5);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.8); opacity: 0; pointer-events: none; transition: opacity 0.25s, translate 0.25s var(--ease);
}
.film-angehalten b { color: #fff; }
.film.ist-pausiert .film-angehalten, .film.ist-gehalten .film-angehalten { opacity: 1; translate: -50% 0; }
.film.ist-gehalten .film-angehalten span { display: none; }
.nur-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .nur-maus { display: none; } .nur-touch { display: inline; } }
.film-kapitel { flex: 1 1 auto; display: flex; gap: 4px; min-width: 0; }
.film-kapitel button {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 0 0; border: 0; background: none; cursor: pointer; text-align: left;
}
.film-kapitel button i { position: relative; display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.film-kapitel button i b { position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: #fff; border-radius: 2px; }
.film-kapitel button.jetzt i b { background: linear-gradient(90deg, var(--blue-soft), #fff); box-shadow: 0 0 10px rgba(var(--blue-rgb), 0.9); }
.film-kapitel button span { display: none; font-size: 0.68rem; font-weight: 600; color: rgba(174, 190, 214, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s; }
.film-kapitel button.jetzt span { color: #fff; }
.film-kapitel button:hover span { color: #fff; }
.film-kapitel button:hover i { background: rgba(255, 255, 255, 0.35); }
.film-weiter { flex: 0 0 auto; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.film-weiter:hover { background: rgba(255, 255, 255, 0.14); }
.film.am-ende .film-weiter, .film.am-ende .film-untertitel { visibility: hidden; }
.film-js .film-tipp {
  display: block; position: fixed; z-index: 24; left: 50%; bottom: 122px; translate: -50% 0; width: max-content; max-width: calc(100% - 32px);
  font-size: 0.78rem; color: var(--muted); text-align: center; opacity: 0; pointer-events: none;
  animation: tipp 6s ease 2s both;
}
@keyframes tipp { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ── Breite Bildschirme (Querformat) ───────────────────────── */
/* Gleiche Bedingung wie in film.js nicht noetig: die Partikel lesen ihre
   Rechtecke aus den Ankern (data-anker), das Layout entscheidet nur hier. */
@media (min-aspect-ratio: 1/1) and (min-width: 760px) {
  :root { --fuss-h: 132px; }
  .film-kapitel button span { display: block; }
  .film-pause-text { display: inline; }
  .film-js .film-untertitel { bottom: 88px; }
  .film-js .film-tipp { bottom: 140px; }
  .sz-zwei > .sz-inhalt {
    display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; column-gap: 5vw;
  }
  .sz-luecke > .sz-inhalt { justify-content: flex-start; }
  .sz-luecke .sz-text { max-width: 760px; }
  .luecke-chart { margin: 2vh 2% 30px; }
  .af-karten { grid-template-columns: repeat(4, 1fr); }
  .af-werte { grid-template-columns: repeat(4, 1fr); }
  .sz-aha > .sz-inhalt { grid-template-rows: auto auto; align-content: center; row-gap: 4vh; }
  .sz-aha .sz-text { grid-column: 1; grid-row: 1; }
  .sz-aha .aha-karte { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .sz-aha .aha-ergebnis { grid-column: 1; grid-row: 2; align-self: start; }
  .aha-kurven { height: 30%; }
  .orbit { --gr: min(42vw, 64vh); }
  .sz-tarife .rang-karte { justify-self: end; }
  /* Blatt ueber die Hoehe bemessen, sonst ist es im Querformat hoeher als der Bildschirm */
  .pdf-seite { width: auto; height: min(64vh, 600px); max-width: 100%; }
  .sz-av .sz-text { grid-column: 1; }
  .av-2027 { left: 52%; right: 0; top: 12%; height: 70%; }
  .stimmen-stern { left: 0; right: 55%; top: auto; bottom: 0; height: 12%; }
  .ende-form { flex-direction: row; }
  .ende-form .film-feld { flex: 1 1 0; }
}

/* Niedrige Fenster: weniger Luft */
@media (max-height: 640px) {
  .sz-sub { display: none; }
  .af-schritte { display: none; }
}

/* Schmal: knapper */
@media (max-width: 759px) {
  :root { --fuss-h: 150px; }
  .film-js .film-untertitel { font-size: 0.8rem; padding: 6px 14px; }
  .film-kopf-link { display: none; }
  .ki-buehne { grid-template-columns: 1fr; gap: 10px; }
  .ki-dokument { aspect-ratio: auto; width: 78%; padding: 10px 12px; gap: 6px; }
  .ki-dok-zeile:nth-child(n+6) { display: none; }
  .pdf-seite { width: min(76%, 320px); aspect-ratio: 0.8; }
  .aha-tipp { display: none; }
  .lc-netto { top: calc(48% - 24px); }
  .lc-badge { left: 80%; padding: 8px 10px; }
  .lc-badge b { font-size: 1.1rem; }
  .lc-badge em { display: block; text-align: center; }
  .af-schritte { display: none; }
  .af-karte { padding: 10px 12px; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  .af-karte small { flex-basis: 100%; }
  .af-ico { width: 22px; height: 22px; border-radius: 7px; margin: 0; }
  .af-werte { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .af-werte > span { padding: 8px; }
  .af-werte small { font-size: 0.58rem; letter-spacing: 0.06em; }
  .af-werte b { font-size: 0.95rem; }
  .orbit { --gr: min(70vw, 36vh); }
  .tarife-logos { justify-content: flex-end; opacity: 0.3; }
  .tl-reihe:first-child { display: none; }
  .orbit-ring span { padding: 4px 8px; font-size: 0.6rem; }
}

/* Niedrige Bildschirme (Handy quer, kleine Laptopfenster): schmaler Rahmen */
@media (max-height: 560px) {
  :root { --kopf-h: 50px; --fuss-h: 86px; }
  .film-logo { font-size: 1.1rem; }
  .film-logo img { width: 26px; height: 26px; }
  .film-knopf-klein { padding: 7px 14px; font-size: 0.8rem; }
  .film-js .film-untertitel { bottom: 48px; padding: 5px 12px; font-size: 0.78rem; }
  .film-js .film-leiste { padding-top: 4px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .film-pause, .film-tempo { height: 32px; }
  .film-pause { padding: 0 9px; }
  .film-pause-text { display: none !important; }
  .film-kapitel button span { display: none !important; }
  .pdf-seite { gap: 6px; padding: 12px; }
  .ps-zeile, .ps-kopf small { display: none; }
  .ps-balken { min-height: 0; padding: 6px; gap: 6px; }
  .ps-fuss em { display: none; }
  .film-js .film-tipp { display: none; }
}

/* Schwaches Geraet (film.js misst die Bildrate): teure Effekte aus */
.film.leicht .film-aurora span, .film.leicht .grad, .film.leicht .film-knopf::after { animation: none !important; }
.film.leicht .film-vignette { display: none; }
.film.leicht-2 .glas, .film.leicht-2 .af-karte, .film.leicht-2 .ki-zeilen, .film.leicht-2 .rang-karte, .film.leicht-2 .zitat,
.film.leicht-2 .film-untertitel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(12, 21, 38, 0.94); }
.film.leicht-2 .sz.ist-aktiv, .film.leicht-2 .sz.geht { filter: none !important; }

/* Weniger Bewegung: alles sofort sichtbar, kein Selbstlauf (film.js) */
@media (prefers-reduced-motion: reduce) {
  .film-js .sz *, .film-js .sz { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .au-blau, .au-tief, .tl-reihe, .orbit { animation: none !important; }
  .sz.ist-aktiv .zitat { animation: none !important; opacity: 0; }
  .sz.ist-aktiv .zitat-bleibt { opacity: 1; }
}