/* DIE STARTSEITE (2026-10-22): Alice ist noch geschlossen, die Seite zeigt Coming Soon, den geplanten
   Termin (Band oben, Zeitplan) und die Warteliste mit freiwilligem Newsletter. Eine einzige Buehne: die Alice-Kugel (alice-szene.js) steht fest hinter dem Text und
   wechselt mit jedem Kapitel ihr Bild. Aussehen nach design-system/alice-3/CONSOLE-MASTER.md:
   runde Pulte (18px) mit Haarlinie und zwei Zielmarken, Versal-Instrumentenschrift, vollrunde
   Knoepfe, Amber fuer die Hauptaktion. Nur dunkel: die Konsole hat keine helle Fassung. */

:root {
  --grund: #01070B;
  --tief: #01070B;
  --cyan: #27E8E0;
  --eis: #BDFBFF;
  --violett: #A855F7;
  --violett-tief: #8B5CF6;
  --amber: #F3A51B;
  --amber-hell: #FFD78A;
  --gruen: #58D970;
  --rot: #EB3348;
  --luecke: #8FA3BC;
  --text: #C7D8E6;
  --leise: #8FA3BC;
  --haar: rgba(39, 232, 224, .22);
  --saum: rgba(189, 251, 255, .12);
  --pult: rgba(4, 9, 14, .78);
  --anzeige: "Chakra Petch", "Bahnschrift", "DIN Alternate", system-ui, sans-serif;
  --lauf: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --rand: clamp(16px, 4vw, 56px);
  /* Buehne (2026-10-23): breiter als 1920 px und breiter als 1,6-mal die Hoehe stehen Kopf, Text und Kugel
     auf einer mittigen Buehne, sonst klafft auf grossen Schirmen zwischen Text und Kugel ein leeres Feld.
     alice-szene.js rechnet die Lage der Kugel mit derselben Breite. Schmal und bis 1920 px ist aussen 0. */
  --buehne: min(100vw, max(1920px, 160vh));
  --aussen: calc((100vw - var(--buehne)) / 2);
  --seite: calc(var(--aussen) + var(--rand));
  --kopf: 68px;
  --band: 38px;   /* das Coming-Soon-Band ueber dem Kopf */
  --oben: calc(var(--band) + var(--kopf) + env(safe-area-inset-top));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--grund); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 1rem/1.65 var(--lauf);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--eis); text-underline-offset: 3px; text-decoration-color: rgba(189, 251, 255, .35); }
a:hover { text-decoration-color: var(--eis); }
:focus-visible { outline: 2px solid var(--amber-hell); outline-offset: 3px; border-radius: 10px; }
::selection { background: rgba(168, 85, 247, .45); color: #fff; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Buehne -------------------------------------------------------------------------------- */
.buehne {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 70% 40%, rgba(139, 92, 246, .10), transparent 60%),
    radial-gradient(90% 70% at 20% 90%, rgba(39, 232, 224, .06), transparent 60%),
    var(--grund);
}
.buehne::after {   /* Vignette und Abtastzeilen, sehr leise */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55)),
    repeating-linear-gradient(0deg, rgba(189, 251, 255, .018) 0 1px, transparent 1px 3px);
}
#kugel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
/* iPhone: die Adressleiste faehrt beim Scrollen ein und aus. Die Buehne reicht immer bis unten (lvh),
   die Kugel misst die kleine Hoehe (svh) und bleibt dabei stehen, statt bei jedem Wechsel neu zu rechnen. */
@supports (height: 100svh) {
  .buehne { bottom: auto; height: 100lvh; }
  #kugel { bottom: auto; height: 100svh; }
}
#kugel:active { cursor: grabbing; }

/* Ohne WebGL: dieselbe Kugel als ruhiges Bild aus Verlaeufen. */
.ersatz { display: none; position: absolute; width: min(64vh, .52 * var(--buehne)); aspect-ratio: 1; right: calc(var(--aussen) + .08 * var(--buehne)); top: 50%; translate: 0 -50%; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .9) 0 1.2%, rgba(168, 85, 247, .7) 3%, rgba(139, 92, 246, .18) 14%, transparent 26%),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(39, 232, 224, .22) 69%, rgba(39, 232, 224, .5) 70.5%, transparent 71.5%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 9%, rgba(39, 232, 224, .07) 9% 9.4%);
  -webkit-mask: radial-gradient(circle, #000 70%, transparent 71.5%); mask: radial-gradient(circle, #000 70%, transparent 71.5%);
}
html.ohne-webgl .ersatz { display: block; }
html.ohne-webgl #kugel, html.ohne-webgl .kennung .hand { display: none; }
@media (max-width: 759px), (max-aspect-ratio: 9/10) { .ersatz { width: 78vw; right: 11vw; top: 30%; } }

.kennung {
  position: fixed; z-index: 3; right: var(--seite); bottom: 18px; margin: 0; pointer-events: none;
  font: 500 0.625rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--leise); opacity: .8;
  display: flex; gap: 14px;
}
.kennung .hand { color: rgba(189, 251, 255, .6); }
@media (pointer: coarse) { .kennung .hand { display: none; } }
@media (max-width: 759px), (max-aspect-ratio: 9/10) { .kennung { top: calc(var(--oben) + 8px); bottom: auto; right: 16px; } }
.kennung .stroeme { display: inline-flex; align-items: center; gap: 6px; }
.kennung .stroeme i { width: 7px; height: 7px; border-radius: 50%; background: var(--f); box-shadow: 0 0 8px var(--f); }
.kennung .gruen { --f: var(--gruen); } .kennung .rot { --f: var(--rot); margin-left: 8px; }
.kennung span { white-space: nowrap; }
/* Schmal: nur "Illustration", die Farben erklaert das Kapitel Verstehen, Drehen ist dort Wischen. */
@media (max-width: 759px), (max-aspect-ratio: 9/10) { .kennung .stroeme, .kennung .hand { display: none; } }

/* ---- Startblende: kurz, verschwindet auch ohne Skript von selbst --------------------------------- */
.blende {
  position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; gap: 18px; justify-items: center;
  background: var(--grund); pointer-events: none;
  animation: blende-weg .6s ease 1.5s forwards;
}
.blende b { font: 600 0.75rem/1 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: var(--eis); padding-left: .42em; }
.blende i { display: block; width: 180px; height: 1px; background: rgba(39, 232, 224, .18); overflow: hidden; }
.blende i::after { content: ""; display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violett)); transform-origin: left; animation: blende-lauf 1.3s cubic-bezier(.6, 0, .2, 1) forwards; }
.blende.weg { animation: blende-weg .5s ease forwards; }
@keyframes blende-lauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes blende-weg { to { opacity: 0; visibility: hidden; } }

/* ---- Kopf ----------------------------------------------------------------------------------- */
.kopf {
  position: fixed; z-index: 20; inset: calc(var(--band) + env(safe-area-inset-top)) 0 auto 0; height: var(--kopf);
  padding: 0 var(--seite);
  display: flex; align-items: center; gap: 28px;
  background: linear-gradient(180deg, rgba(1, 7, 11, .92), rgba(1, 7, 11, .55) 70%, transparent);
}
.kopf::after { /* Fortschritt durch die Seite */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--violett));
  transform: scaleX(var(--fortschritt, 0)); transform-origin: left; opacity: .7;
}
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--eis); }
/* Das viruscontroll-Abzeichen (wie das App-Symbol), daneben der Name Alice-3 (seit 2026-10-23). */
.marke img { flex: none; width: 44px; height: 44px; }
.fuss .marke img { width: 36px; height: 36px; }
@media (max-width: 759px), (max-aspect-ratio: 9/10) { .kopf .marke img { width: 40px; height: 40px; } }
.marke span { display: grid; line-height: 1; gap: 4px; }
.marke strong { font: 700 1.0625rem/1 var(--anzeige); letter-spacing: .06em; text-transform: uppercase; }
.marke small { font: 500 0.5625rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--leise); }
.wege { display: flex; gap: 26px; margin-left: auto; }
.wege a { font: 500 0.75rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text); text-decoration: none; padding: 8px 0; }
.wege a:hover { color: var(--eis); }
.kopf .knoepfe { display: flex; gap: 10px; }
@media (max-width: 899px) { .wege { display: none; } .kopf .knoepfe { margin-left: auto; } }

/* ---- Knoepfe: vollrund (CONSOLE-MASTER) ----------------------------------------------------- */
.knopf {
  --h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 0.8125rem/1 var(--anzeige); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.knopf svg { width: 16px; height: 16px; flex: none; }
.knopf.haupt {
  color: #1B1103; background: linear-gradient(180deg, var(--amber-hell), var(--amber));
  box-shadow: 0 0 0 1px rgba(255, 215, 138, .4) inset, 0 10px 34px -10px rgba(243, 165, 27, .75);
}
.knopf.haupt:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 215, 138, .6) inset, 0 14px 40px -10px rgba(243, 165, 27, .95); }
.knopf.leise { color: var(--eis); border-color: var(--haar); background: rgba(5, 10, 15, .5); }
.knopf.leise:hover { border-color: rgba(189, 251, 255, .5); background: rgba(39, 232, 224, .08); }
.knopf.klein { --h: 38px; padding: 0 16px; font-size: 0.71875rem; }
.knopf[disabled] { opacity: .6; cursor: progress; transform: none; }
@media (max-width: 520px) { .kopf .knopf.leise { padding: 0 12px; } .kopf .knopf.leise .wort { display: none; } }

/* ---- Pult: rundes Konsolenbauteil mit zwei Zielmarken --------------------------------------- */
.pult {
  --marke: rgba(39, 232, 224, .75);
  position: relative; border: 1px solid var(--haar); border-radius: 18px; background: var(--pult);
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .95), inset 0 1px 0 var(--saum);
}
.pult::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(var(--marke), var(--marke)) left 22px top 0 / 26px 1px no-repeat,
    linear-gradient(var(--marke), var(--marke)) left 0 top 22px / 1px 26px no-repeat,
    linear-gradient(var(--marke), var(--marke)) right 22px bottom 0 / 26px 1px no-repeat,
    linear-gradient(var(--marke), var(--marke)) right 0 bottom 22px / 1px 26px no-repeat;
}

/* ---- Beschriftung --------------------------------------------------------------------------- */
.etikett { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 500 0.6875rem/1.2 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--cyan); }
.etikett::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }
.bald {
  display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 14px 0 12px; border-radius: 999px;
  border: 1px solid rgba(243, 165, 27, .45); background: rgba(243, 165, 27, .08);
  font: 600 0.6875rem/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--amber-hell);
}
.bald::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: atem 2.4s ease-in-out infinite; }
@keyframes atem { 50% { opacity: .35; transform: scale(.8); } }
.verlauf {
  background: linear-gradient(100deg, var(--eis) 0%, var(--cyan) 38%, var(--violett) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Kapitel -------------------------------------------------------------------------------- */
main { position: relative; z-index: 2; pointer-events: none; }
main a, main button, main input, main label, main summary, .text, .pult { pointer-events: auto; }
.kapitel {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  /* Eine Spalte mit fester Breite: sonst zieht die waagrecht scrollende Themenleiste (nowrap) die Spalte auf
     ihre volle Laenge, und das Handy rechnet die ganze Seite 1560 px breit (2026-10-23). */
  grid-template-columns: minmax(0, 1fr);
  padding: calc(var(--oben) + 40px) var(--seite) 80px;
}
.kapitel .text { width: min(540px, 100%); }
.kapitel.links .text { justify-self: start; }
.kapitel.rechts .text { justify-self: end; }
.kapitel h2 {
  margin: 0 0 22px; font: 700 clamp(2.375rem, 5.4vw, 5rem)/.98 var(--anzeige); letter-spacing: -.005em; text-transform: uppercase;
  color: var(--eis); text-wrap: balance;
}
.kapitel p { margin: 0 0 16px; max-width: 60ch; font-size: 1.0625rem; color: var(--text); }
.kapitel .text.pult { padding: clamp(24px, 3vw, 38px); }

/* Held */
.held { align-items: center; }
/* Breit: der Text endet vor der Kugel (Mitte bei 72 % der Buehne, Halbmesser rund 29 % der Hoehe). */
.held .text { width: min(720px, 100%, max(380px, calc(.72 * var(--buehne) - 29vh - var(--rand) - 28px))); container-type: inline-size; }
.held .bald { height: 34px; padding: 0 16px 0 14px; font-size: 0.75rem; }
.held h1 {
  margin: 22px 0 26px; font: 700 clamp(2.5rem, 5.2vw, 5.25rem)/.92 var(--anzeige); letter-spacing: -.01em; text-transform: uppercase; color: var(--eis);
  /* Die laengste Zeile ("Sicher fuehlen.", rund 8,4 em) fuellt die Textspalte, ohne umzubrechen. */
  font-size: clamp(36px, 11.6cqi, 84px);
}
.held h1 .zeile { display: block; overflow: hidden; padding-bottom: .04em; }
.held h1 .zeile > span { display: block; }
.held .lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; max-width: 34em; color: var(--text); margin: 0 0 30px; }
.held .lead b { color: var(--eis); font-weight: 600; }
.reihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.plattformen-kurz { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plattformen-kurz > span:first-child { font: 500 0.65625rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--leise); margin-right: 6px; }
.plattformen-kurz .dazu {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px dashed rgba(189, 251, 255, .28);
  font: 500 0.65625rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--leise);
}
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--haar); background: rgba(5, 10, 15, .55); font: 500 0.6875rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--eis); }
.weiter {
  position: absolute; left: var(--seite); bottom: 28px; display: flex; align-items: center; gap: 14px;
  font: 500 0.625rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--leise); text-decoration: none;
}
.weiter i { position: relative; display: block; width: 1px; height: 46px; background: rgba(189, 251, 255, .18); overflow: hidden; }
.weiter i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--cyan); animation: rinnen 2.2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes rinnen { to { top: 100%; } }

/* Stationen der Reise */
.nummer { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.nummer b { font: 700 0.9375rem/1 var(--mono); color: var(--cyan); letter-spacing: .1em; }
.nummer span { font: 500 0.6875rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--leise); }
.legende { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.legende li { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--haar); background: rgba(1, 7, 11, .6); font: 500 0.6875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.legende li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f); box-shadow: 0 0 10px var(--f); }
.legende .gut { --f: var(--gruen); } .legende .achtung { --f: var(--amber); } .legende .kritisch { --f: var(--rot); }
.legende .offen::before { background: transparent; box-shadow: none; border: 1px dashed var(--luecke); }

/* Leiste der Stationen: links am Rand, nur breit */
.leiste { position: fixed; z-index: 4; left: calc(var(--aussen) + 22px); top: 50%; translate: 0 -50%; margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.leiste.an { opacity: 1; pointer-events: auto; }
.leiste a { text-shadow: 0 0 6px #000, 0 0 12px #000; display: grid; grid-template-columns: 9px auto; align-items: center; gap: 12px; padding: 7px 0; text-decoration: none; font: 500 0.625rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--leise); }
.leiste a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(189, 251, 255, .35); transition: background-color .3s, box-shadow .3s, border-color .3s; }
.leiste a span { opacity: 0; translate: -6px 0; transition: opacity .3s, translate .3s; }
.leiste a.jetzt { color: var(--eis); }
.leiste a.jetzt::before { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
/* Die Namen erst beim Zeigen: stehend lag der Name des Kapitels auf dessen Karte (1920 breit, 2026-10-23). */
.leiste:hover a span, .leiste a:focus-visible span { opacity: 1; translate: 0 0; }
.leiste a.vorbei::before { background: rgba(39, 232, 224, .35); border-color: rgba(39, 232, 224, .5); }
@media (max-width: 1199px) { .leiste { display: none; } }

/* Sensoren (seit 2026-10-23): das iPhone reicht, die Sensoren sind ein Extra. Breit wie die anderen Kapitel:
   Text und die drei Karten links, rechts die Kugel mit dem iPhone und den Sensoren. So verdeckt der Text das
   Bild nicht, und die Meldung findet unter der Kugel Platz (mittig lag sie bei 1366x768 auf dem Text).
   Schmal steht der Text mittig ueber der Kugel, die Karten darunter. */
.sensoren { align-content: center; gap: 22px; }
.sensoren .text, .sensoren .fenster { justify-self: start; width: min(600px, 100%, max(380px, calc(.72 * var(--buehne) - 29vh - var(--rand) - 28px))); }
.sensoren .unter { margin: 0; max-width: 44em; font-size: clamp(16px, 1.3vw, 18px); }
.fenster { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fenster li { padding: 16px 18px; display: grid; grid-template-columns: 92px 1fr; column-gap: 16px; row-gap: 4px; align-items: center; }
/* Die Bilder der Fenster: der Aufbau des Leitstands als Strichzeichnung (Kugel violett, Geraet cyan). */
.fenster .bild { grid-row: span 3; width: 100%; height: auto; max-height: 62px; margin: 0; overflow: visible; }
.bild .rahmen { fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bild .rahmen.duenn { stroke-width: 1; opacity: .5; }
.bild .pult-linie { fill: none; stroke: var(--eis); stroke-width: 1.4; stroke-linecap: round; opacity: .45; }
.bild .kugel { fill: rgba(168, 85, 247, .08); stroke: var(--violett); stroke-width: 1.4; }
.bild .bahn { fill: none; stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }
.bild .kern { fill: var(--violett); filter: drop-shadow(0 0 4px var(--violett)); }
.bild .punkt { fill: var(--eis); opacity: .55; }
.fenster h3 { margin: 0; font: 700 1.1875rem/1.1 var(--anzeige); letter-spacing: .04em; text-transform: uppercase; color: var(--eis); }
.fenster p { margin: 0; font-size: 0.90625rem; line-height: 1.5; color: var(--text); }
.extra {
  justify-self: start; display: inline-flex; align-items: center; height: 26px; margin-top: 2px; padding: 0 12px; border-radius: 999px;
  border: 1px dashed rgba(39, 232, 224, .55); font: 600 0.625rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--cyan);
}

/* Fragen */
.fragen .text { width: min(620px, 100%, max(380px, calc(.76 * var(--buehne) - 31vh - var(--rand) - 28px))); }
.fragen details { border-top: 1px solid var(--haar); }
.fragen details:last-of-type { border-bottom: 1px solid var(--haar); }
.fragen summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 0; font: 600 1.125rem/1.3 var(--anzeige); letter-spacing: .03em; text-transform: uppercase; color: var(--eis);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--cyan), var(--cyan)) center / 14px 1.5px no-repeat, linear-gradient(var(--cyan), var(--cyan)) center / 1.5px 14px no-repeat;
  transition: transform .3s ease;
}
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { margin: -4px 0 20px; font-size: 1rem; }

/* Warteliste: links Coming Soon und das Formular, rechts Alice mit ihrer Kugel (wie in jedem Kapitel) */
.warteliste .text { width: min(600px, 100%, max(380px, calc(.72 * var(--buehne) - 29vh - var(--rand) - 28px))); display: grid; gap: 0; }
.kapitel .riesig {
  margin: 0; font: 700 clamp(3.75rem, 8.6vw, 9.25rem)/.86 var(--anzeige); letter-spacing: -.015em; text-transform: uppercase;
  text-shadow: 0 0 60px rgba(1, 7, 11, .85);
}
.riesig span { display: block; }
.warteliste .unter { margin: 22px 0 22px; font-size: clamp(17px, 1.5vw, 20px); color: var(--text); max-width: 32em; }
.warteliste .hinweis { margin-bottom: 16px; }
.formular { width: 100%; padding: clamp(22px, 3vw, 32px); }
.formular .feld { display: flex; gap: 10px; }
.formular input[type="email"] {
  flex: 1; min-width: 0; height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--haar);
  background: rgba(1, 7, 11, .85); color: var(--eis); font: 500 1rem/1 var(--lauf);
}
.formular input[type="email"]::placeholder { color: rgba(143, 163, 188, .7); }
.formular input[type="email"]:focus-visible { outline: 2px solid var(--amber-hell); outline-offset: 2px; border-color: transparent; }
.formular .knopf { --h: 52px; }
.einwilligung { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; margin-top: 16px; font-size: 0.84375rem; line-height: 1.55; color: var(--text); cursor: pointer; }
.einwilligung input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--amber); }
.formular .klein { margin: 12px 0 0; font-size: 0.78125rem; color: var(--leise); }
.meldung { margin: 14px 0 0; min-height: 1.5em; font-size: 0.875rem; }
.meldung:empty { display: none; }
.meldung.gut { color: var(--gruen); }
.meldung.fehler { color: #FF8A96; }
.formular.fertig .feld, .formular.fertig .einwilligung { display: none; }
.falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.hinweis { margin: 0; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(243, 165, 27, .45); background: rgba(243, 165, 27, .08); color: var(--amber-hell); font-size: 0.90625rem; text-align: left; }
@media (max-width: 520px) { .formular .feld { flex-direction: column; } .formular .knopf { width: 100%; } }

/* Fuss */
.fuss {
  position: relative; z-index: 2; padding: 34px var(--seite) calc(34px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  border-top: 1px solid rgba(39, 232, 224, .12); background: linear-gradient(180deg, rgba(1, 7, 11, .6), rgba(1, 7, 11, .95));
  font-size: 0.8125rem; color: var(--leise);
}
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss a, .fuss .wahl-link { color: var(--text); text-decoration: none; }
.fuss a:hover, .fuss .wahl-link:hover { color: var(--eis); }
.fuss .marke strong { font-size: 0.875rem; }

/* ---- Schmal: Kugel oben, Text unten ---------------------------------------------------------- */
@media (max-width: 759px), (max-aspect-ratio: 9/10) {
  :root { --kopf: 60px; --band: 34px; }
  /* Die Kapitel folgen dicht aufeinander: die naechste Karte steigt herein, waehrend die alte ueber der
     Kugel verblasst (startseite.js, blassen). Seit 2026-10-23 22svh ohne Mindesthoehe statt 42 bis 52svh:
     am iPhone stand unter der Kugel sonst bei jedem Uebergang rund 330 px Scrollweg lang ein leeres Band. */
  .kapitel { align-items: end; min-height: 0; padding-top: 22svh; padding-bottom: 64px; }
  .kapitel.links .text, .kapitel.rechts .text { justify-self: stretch; width: 100%; }
  /* Leichte Diagonale (seit 2026-10-23, "leichte diagonal verschiebung von alice und infobox ... das hintergrund
     feeling aber leichter leserlich"): die Kugel steht oben rechts (alice-szene.js, SCHMAL_X), die Karten
     kleiner links darunter, rechts daneben scheint die Kugel durch. Danach: "die infoboxen noch kleiner und mehr
     seitlich damit mehr platz fuer alice entsteht". Lange Karten (Liste, Formular) etwas breiter. */
  .kapitel { padding-left: 10px; }
  .kapitel.links .text.pult { justify-self: start; width: 78%; }
  .kapitel.werkzeuge .text.pult, .kapitel.tiefe .text.pult, .kapitel.zeitplan .text.pult, .kapitel.fragen .text.pult { width: 88%; }
  .kapitel .text.pult { padding: 16px 14px 16px 16px; }
  .kapitel h2 { font-size: clamp(26px, 7.6vw, 34px); margin-bottom: 14px; }
  .kapitel p { font-size: 0.90625rem; line-height: 1.58; }
  .kapitel.tiefe h2 { font-size: clamp(26px, 7.6vw, 34px); margin-bottom: 14px; }
  .sensoren .unter, .fragen details p { font-size: 0.90625rem; }
  .held { padding-top: 58svh; padding-bottom: 40px; }   /* der Text beginnt unter der Kugel, Alice steht darueber */
  .held h1 { margin: 18px 0 18px; }
  .held .lead { margin-bottom: 24px; }
  .held .reihe .knopf { flex: 1 1 auto; }
  .weiter { display: none; }
  /* Sensoren wie die anderen Kapitel: der Text als Karte links unter der Kugel, die Fenster darunter. */
  .sensoren { align-content: end; gap: 12px; }
  .sensoren .text { justify-self: start; width: 78%; padding: 16px 14px 16px 16px; border: 1px solid var(--haar); border-radius: 18px; background: var(--pult); }
  .sensoren .fenster { width: 88%; justify-self: start; }
  .fenster li { grid-template-columns: 70px 1fr; column-gap: 12px; padding: 14px; }
  .fenster .bild { max-height: 50px; }
  .fenster h3 { font-size: 1.0625rem; }
  .fenster p { font-size: 0.84375rem; }
}

/* ---- Auftritt, nur mit Skript (ohne Skript steht alles sofort da) ------------------------------ */
html.js .zeige { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
html.js .zeige.da { opacity: 1; transform: none; }
/* Verblasst (startseite.js, blassen): ueber der Kugel faengt die Karte keine Finger mehr ab. */
.kapitel.blass .text { pointer-events: none; }
html.js .held h1 .zeile > span { transform: translateY(105%); animation: steigen 1.1s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(1.25s + var(--i, 0) * 120ms); }
@keyframes steigen { to { transform: none; } }

/* ---- Das Band: Coming Soon und der geplante Termin, immer oben ---------------------------------- */
.band {
  position: fixed; z-index: 21; inset: 0 0 auto 0; height: calc(var(--band) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--rand) 0;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: linear-gradient(90deg, rgba(243, 165, 27, .12), rgba(1, 7, 11, .2) 30%, rgba(1, 7, 11, .2) 70%, rgba(168, 85, 247, .14)), rgba(4, 8, 12, .94);
  border-bottom: 1px solid rgba(243, 165, 27, .28);
  font: 500 0.8125rem/1 var(--lauf); color: var(--text); white-space: nowrap;
}
.band-bald { display: inline-flex; align-items: center; gap: 9px; font: 600 0.65625rem/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--amber-hell); }
.band-bald i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: atem 2.4s ease-in-out infinite; }
.band-text b { color: var(--eis); font-weight: 600; }
.band-link {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 13px; border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, .45); background: rgba(168, 85, 247, .12); color: var(--eis); text-decoration: none;
  font: 600 0.65625rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.band-link svg { width: 13px; height: 13px; }
.band-link:hover { background: rgba(168, 85, 247, .22); border-color: rgba(168, 85, 247, .7); }
@media (max-width: 640px) {
  .band { gap: 10px; justify-content: space-between; padding-left: 16px; padding-right: 12px; font-size: 0.75rem; }
  .band .lang { display: none; }
  .band-bald { gap: 0; }
}

/* Held: Coming Soon und der geplante Termin nebeneinander */
.anfang { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.termin { font: 500 0.6875rem/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }

/* ---- Alice meldet: ein Beispiel ihrer Meldung, rund um die Kugel (schmal oben links) ----------------- */
/* Breit groesser und mit Schein in der Farbe der Stufe; beim Erscheinen laeuft ein Ring nach aussen
   (seit 2026-10-23: "das muss auffallen"). */
.melder {
  --f: var(--violett);
  position: fixed; z-index: 1; right: var(--seite); bottom: 64px; width: min(400px, calc(100vw - 32px));
  margin: 0; padding: 14px 18px 16px; border-radius: 18px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--f) 65%, transparent);
  background: rgba(4, 9, 14, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);   /* lehnt an der Kugel: sie scheint durch */
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .95), inset 0 1px 0 var(--saum), 0 0 38px -10px var(--f);
  opacity: 0; translate: 0 10px; transition: opacity .32s ease, translate .32s ease, border-color .3s ease;
}
.melder::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--f); opacity: 0;
}
.melder.an::after { animation: melden 1.4s cubic-bezier(.2, .7, .2, 1) .1s 2; }
@keyframes melden { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.12, 1.35); } }
.melder.gefuehrt { left: 0; top: 0; right: auto; bottom: auto; }
html.ohne-webgl .melder.gefuehrt { left: auto; top: auto; right: var(--seite); bottom: 64px; transform: none !important; }
.melder.an { opacity: 1; translate: 0 0; }
.melder.vorn { z-index: 3; }   /* eigene Meldung (eingetragen): vor der Karte, unter dem Kopf */
.melder[data-stufe="gut"] { --f: var(--gruen); }
.melder[data-stufe="achtung"] { --f: var(--amber); }
.melder[data-stufe="kritisch"] { --f: var(--rot); }
.melder[data-stufe="luecke"] { --f: var(--luecke); }
.melder-kopf { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; font: 500 0.59375rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--leise); }
.melder-kopf i { width: 7px; height: 7px; border-radius: 50%; background: var(--violett); box-shadow: 0 0 10px var(--violett); animation: atem 4.4s ease-in-out infinite; }
.melder-kopf b { color: var(--eis); font-weight: 600; }
.melder-kopf span { margin-left: auto; padding: 4px 8px; border-radius: 999px; border: 1px dashed rgba(143, 163, 188, .55); }
.melder-zeile { margin: 0; display: grid; gap: 7px; }
.stufe {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--f) 55%, transparent); background: color-mix(in srgb, var(--f) 13%, transparent);
  font: 600 0.625rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--f);
}
.stufe::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--f); box-shadow: 0 0 8px var(--f); }
.melder[data-stufe="luecke"] .stufe::before { background: transparent; box-shadow: none; border: 1px dashed var(--luecke); }
.melder-text { position: relative; font: 500 1rem/1.45 var(--lauf); color: var(--eis); }
.melder-text .voll { visibility: hidden; }
.melder-text .getippt { position: absolute; inset: 0; }
/* iPhone (seit 2026-10-23, "die hinweis box kleiner ... und auch immer ersichtlich", danach "die alice
   hinweisboxen 50% kleiner"): halb so viel Flaeche, fest oben links neben der Kugel, ueber den Karten; unterwegs
   bleibt sie stehen (startseite.js). Eine Kopfzeile: Alices Punkt, die Stufe, "Beispiel"; darunter der Satz. */
@media (max-width: 759px), (max-aspect-ratio: 9/10) {
  .melder, .melder.gefuehrt, html.ohne-webgl .melder.gefuehrt {
    z-index: 3; left: 10px; top: calc(var(--oben) + 60px); right: auto; bottom: auto; transform: none !important;
    width: fit-content; min-width: min(176px, 47vw); max-width: calc(100vw - 20px); padding: 6px 8px 7px; border-radius: 12px; background: rgba(4, 9, 14, .9);
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 5px; row-gap: 5px;
  }
  .melder-kopf, .melder-zeile { display: contents; }
  .melder-kopf i { grid-area: 1 / 1; width: 5px; height: 5px; }
  .melder-kopf b { display: none; }
  .melder-kopf span { grid-area: 1 / 3; justify-self: end; margin: 0; padding: 2px 5px; font-size: 0.46875rem; letter-spacing: .16em; }
  .stufe { grid-area: 1 / 2; height: 16px; gap: 4px; padding: 0 6px; font-size: 0.5rem; letter-spacing: .12em; }
  .stufe::before { width: 4px; height: 4px; }
  /* Die Kopfzeile bestimmt die Breite, nicht der Satz: so steht "Beispiel" auch neben "Nicht gemessen" frei. */
  .melder-text { grid-area: 2 / 1 / 3 / 4; contain: inline-size; font-size: 0.65625rem; line-height: 1.35; }
  /* Liegt Text im Feld (startseite.js, melderPlatz): nur die Kopfzeile; am Seitenende auf dem Formular tritt sie
     zurueck. */
  .melder.klein, html.ohne-webgl .melder.klein { min-width: 0; row-gap: 0; }
  .melder.klein .melder-text { display: none; }
  .melder.an.weg { opacity: 0; }
}

/* ---- Zeitplan: eine Schiene, jetzt leuchtet Amber, das Ziel Violett, Geplantes ist gestrichelt ------ */
.plan { list-style: none; margin: 8px 0 18px; padding: 0; }
.plan li { position: relative; padding: 0 0 20px 34px; }
.plan li::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(189, 251, 255, .45); background: var(--grund);
}
.plan li::after { content: ""; position: absolute; left: 8px; top: 19px; bottom: 2px; border-left: 1px dashed rgba(189, 251, 255, .28); }
.plan li:last-child { padding-bottom: 0; }
.plan li:last-child::after { display: none; }
.plan li.jetzt::before { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 14px var(--amber); animation: atem 2.4s ease-in-out infinite; }
.plan li.ziel::before { left: 1px; top: 1px; width: 15px; height: 15px; border-color: var(--violett); background: rgba(168, 85, 247, .25); box-shadow: 0 0 0 4px rgba(168, 85, 247, .14), 0 0 18px rgba(168, 85, 247, .6); }
.plan .wann { display: block; margin-bottom: 6px; font: 500 0.65625rem/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }
.plan .jetzt .wann { color: var(--amber-hell); }
.plan .ziel .wann { color: var(--violett); }
.plan b { display: block; margin-bottom: 4px; font: 700 1.25rem/1.15 var(--anzeige); letter-spacing: .04em; text-transform: uppercase; color: var(--eis); }
.plan p { margin: 0; font-size: 0.9375rem; line-height: 1.55; }
.zeitplan .text > .klein { margin: 0; font-size: 0.8125rem; color: var(--leise); }
.warteliste .unter b { color: var(--eis); font-weight: 600; }
.einwilligung.freiwillig { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(189, 251, 255, .14); }
.einwilligung.freiwillig input { accent-color: var(--violett); }
.einwilligung b { color: var(--eis); font-weight: 600; }

/* ---- Werkzeuge: Zahlen, Suche, Themen und Liste aus dem Katalog der App (werkzeugkasten.js) -------------
   "Im Test" ist eine Eigenschaft, keine Messung: Cyan, nie Gruen (CONSOLE-MASTER). Geplant ist gestrichelt grau. */
.werkzeuge .text { width: min(660px, 100%, max(400px, calc(.72 * var(--buehne) - 29vh - var(--rand) - 28px))); }
.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 20px; }
.zahlen div { display: grid; gap: 6px; padding: 12px 12px 10px; border-radius: 14px; border: 1px solid var(--haar); background: rgba(1, 7, 11, .6); }
.zahlen dt { order: 2; font: 500 0.59375rem/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.zahlen dd { margin: 0; font: 700 1.875rem/1 var(--anzeige); color: var(--eis); font-variant-numeric: tabular-nums; }
.zahlen div:nth-child(2) dd { color: var(--cyan); }
.werkzeug-suche { position: relative; display: flex; align-items: center; margin: 0 0 12px; }
.werkzeug-suche[hidden] { display: none; }
.werkzeug-suche svg { position: absolute; left: 18px; width: 18px; height: 18px; color: var(--leise); pointer-events: none; }
.werkzeug-suche input {
  width: 100%; height: 50px; padding: 0 20px 0 48px; border-radius: 999px; border: 1px solid var(--haar);
  background: rgba(1, 7, 11, .85); color: var(--eis); font: 500 1rem/1 var(--lauf); -webkit-appearance: none; appearance: none;
}
.werkzeug-suche input::placeholder { color: rgba(143, 163, 188, .7); }
.werkzeug-suche input:focus-visible { outline: 2px solid var(--amber-hell); outline-offset: 2px; border-color: transparent; }
.themen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.thema {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--haar);
  background: rgba(1, 7, 11, .6); font: 500 0.65625rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); white-space: nowrap;
}
button.thema { cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
button.thema:hover { border-color: rgba(189, 251, 255, .45); color: var(--eis); }
button.thema[aria-pressed="true"] { border-color: var(--cyan); background: rgba(39, 232, 224, .14); color: var(--eis); }
.thema svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.thema b { font-weight: 600; color: var(--cyan); }
.werkzeuge .stand { margin: 2px 0 10px; font-size: 0.84375rem; color: var(--leise); }
.werkzeuge .stand:empty { display: none; }
.werkzeug-liste { list-style: none; margin: 0 0 14px; padding: 0; }
.werkzeug-liste:empty { display: none; }
.werkzeug { display: grid; grid-template-columns: 34px 1fr; gap: 6px 14px; padding: 12px 0; border-top: 1px solid rgba(39, 232, 224, .12); }
.wz-zeichen {
  grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--haar);
  display: grid; place-items: center; color: var(--cyan); background: rgba(39, 232, 224, .06);
}
.wz-zeichen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wz-text { display: grid; gap: 2px; min-width: 0; }
.wz-text b { font: 600 0.9375rem/1.3 var(--lauf); color: var(--eis); }
.wz-text small { font-size: 0.875rem; line-height: 1.45; color: var(--text); }
.wz-marken { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-marken i {
  padding: 5px 8px; border-radius: 999px; border: 1px solid var(--haar);
  font: 500 0.59375rem/1 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--leise);
}
.wz-marken .wz-stand { color: var(--cyan); border-color: rgba(39, 232, 224, .5); }
.werkzeug.geplant .wz-stand { color: var(--luecke); border-style: dashed; border-color: rgba(143, 163, 188, .55); }
.wz-marken .wz-mit { color: var(--eis); border-color: rgba(189, 251, 255, .3); }
.werkzeug.geplant .wz-text b { color: var(--text); }
.werkzeug.geplant .wz-zeichen { color: var(--luecke); border-style: dashed; background: none; }
.werkzeuge .mehr { margin: 0 0 16px; }
.werkzeuge .mehr[hidden] { display: none; }
.werkzeuge .text > .klein { margin: 0 0 18px; font-size: 0.8125rem; color: var(--leise); }
/* Der leise Hinweis fuer Unternehmen: kein Knopf, nur ein Satz und ein Verweis. */
.anfrage { padding-top: 16px; border-top: 1px dashed rgba(168, 85, 247, .35); }
.anfrage p { margin: 0; font-size: 0.90625rem; color: var(--text); }
.anfrage .anfrage-kopf { margin: 0 0 6px; font: 500 0.65625rem/1.2 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--violett); }
@media (max-width: 759px), (max-aspect-ratio: 9/10) {
  .themen { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 12px; padding: 0 20px 4px; scrollbar-width: none; }
  .themen::-webkit-scrollbar { display: none; }
}
@media (max-width: 520px) {
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .werkzeug { grid-template-columns: 30px 1fr; gap: 6px 12px; }
  .wz-zeichen { width: 30px; height: 30px; }
}

/* ---- Vertiefung (seit 2026-10-23): Alice-Box (dauerhaft analysieren, mehr Kontrolle) und Dein Rechner (Treiber,
   Speicher, was fremd mitlaeuft). Die Zeilen wie die Werkzeugliste, ohne Zeichen, der Stand rechts daneben. -- */
/* Breit stehen die beiden Gruppen nebeneinander und die Schrift ist etwas kleiner, damit das Kapitel auf einen
   Schirm passt (bei 1920x969 war die Karte 947 px hoch). */
.tiefe .text { width: min(880px, 100%, max(400px, calc(.72 * var(--buehne) - 29vh - var(--rand) - 28px))); container-type: inline-size; }
.tiefe h2 { font-size: clamp(34px, 4.2vw, 64px); margin-bottom: 18px; }
.tiefe-gruppen { display: grid; gap: 0 30px; }
@container (min-width: 720px) { .tiefe-gruppen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tiefe h3 { margin: 18px 0 2px; font: 500 0.65625rem/1.2 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); }
.tiefe-liste { list-style: none; margin: 0; padding: 0; }
.tiefe-liste .werkzeug { grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding: 8px 0; }
.tiefe-liste .wz-text small { font-size: 0.84375rem; }
.tiefe .knopf { margin: 20px 0 14px; }
.tiefe .text > .klein { margin: 0; font-size: 0.8125rem; color: var(--leise); }

/* Leicht: langsame Grafik, weniger Glanz */
html.leicht .pult, html.leicht .knopf.haupt { box-shadow: none; }
html.leicht .melder { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(4, 9, 14, .93); }
html.leicht .kapitel .riesig { text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blende { display: none; }
  html.js .zeige, html.js .zeige.da { opacity: 1; transform: none; transition: none; }
  html.js .held h1 .zeile > span { transform: none; animation: none; }
  .bald::before, .weiter i::after, .band-bald i, .melder-kopf i, .plan li.jetzt::before { animation: none; }
  .melder { transition: none; translate: none; }
  .melder.an::after { animation: none; }
  .knopf { transition: none; }
}