/* Galaxie-Farbwelt und Layout (Frontend-Phase). Dark-first; Light via
   [data-bc-theme="light"]. Bewegung kommt aus dem portierten Kino
   (cinema.css/motion.js) — hier leben Struktur, Typografie, Karten. */

:root {
  --g-himmel: #070b18;
  --g-tiefe: #0d1326;
  --g-karte: #121a30;
  --g-linie: #26304d;
  --g-text: #e8ecf8;
  --g-text-dim: #9aa5c3;
  --g-akzent: #f5c86b;      /* Sternengold */
  --g-nebel: #7f7dfc;       /* Nebula-Violett */
  --g-erfolg: #4cd6a4;
  --g-warnung: #f08a7a;
}
/* Licht-Modus: das All bleibt dunkel (Kosmos-Canvas) — freier Text darueber
   bleibt deshalb IMMER hell; «light» hellt die Flaechen auf (Karten, Nav,
   Felder), wie im Ist-Theme (theme.css behandelt light+spectacle nur ueber
   Glow-Toene). */
:root {
  --g-flaeche-text: var(--g-text);
  --g-flaeche-dim: var(--g-text-dim);
  --g-feld: var(--g-tiefe);

  /* Der Hauch: eine Andeutung von Flaeche unter Karten und Boxen. Er haengt
     bewusst NICHT am Design-Umschalter, sondern ist in beiden Modi dunkel —
     denn die Buehne ist es auch: der Kosmos-Verlauf des `body` steht auf
     --g-tiefe/--g-himmel, und die aendern sich im hellen Design nicht.
     Eine helle Andeutung darauf truege hellen Text auf heller Flaeche. */
  --g-hauch: rgba(18, 26, 48, 0.88);
  --g-hauch-leicht: rgba(18, 26, 48, 0.5);
}
/* ============================================================
   LICHT-MODUS: AUF DER BRUECKE
   ============================================================
   Der dunkle Modus zeigt das All von aussen. Der helle zeigt den Ort,
   von dem aus man es betrachtet: eine Brücke bei Arbeitslicht. Helle
   Paneele, praezise Fugen, Instrumente in Messing — und das All bleibt
   sichtbar, aber dort, wo es hingehoert: hinter dem Sichtfenster.

   Vorher hellte «light» nur die Karten auf, waehrend die Buehne dunkel
   blieb. Das Ergebnis war ein Zwitter: heller Text auf dunklem Grund
   neben dunklem Text auf hellen Flaechen. Weil das Innere eines Schiffs
   beleuchtet ist, darf die Buehne hier hell werden — und damit kippt
   auch --g-text, den 78 Regeln verwenden. */
[data-bc-theme="light"] {
  --g-himmel: #e9edf4;        /* Panelgrund, kuehl statt papieren */
  --g-tiefe: #f4f6fa;         /* aufgehellte Flaeche */
  --g-karte: #ffffff;         /* Instrumententafel */
  --g-linie: #cdd5e3;         /* Paneelfuge */
  --g-text: #131a28;          /* technisches Dunkelblau, nicht Schwarz */
  --g-text-dim: #58637a;
  --g-akzent: #8a6410;        /* Messing. Das helle #f5c86b traegt auf
                                 Weiss nur rund 1,6:1 und waere unlesbar. */
  --g-nebel: #5b58d6;
  --g-erfolg: #1d7a55;
  --g-warnung: #9c3d2c;

  --g-flaeche-text: #131a28;
  --g-flaeche-dim: #58637a;
  --g-feld: #ffffff;

  /* Der Hauch darf hier hell sein: die Buehne ist es auch. */
  --g-hauch: rgba(255, 255, 255, 0.92);
  --g-hauch-leicht: rgba(255, 255, 255, 0.62);

  /* Kanten statt Schatten — im Innenraum stossen Platten aneinander,
     sie schweben nicht. */
  --bruecke-fuge: rgba(19, 26, 40, 0.045);
  --bruecke-scheibe: #0a0f1e;
  /* Eine Feldgrenze ist Bedienelement, keine Dekoration: WCAG 1.4.11
     verlangt 3:1. Die zarte Fugenfarbe traegt nur 1,3:1 und wuerde ein
     Eingabefeld unsichtbar machen. */
  --bruecke-kante: #7d8ba6;
}

/* ============================================================
   TOKEN-BRUECKE: eine Farbwelt statt zweier
   ============================================================
   Auf der Seite treffen zwei Paletten aufeinander. Die Vorlagen der
   Galaxie sprechen --g-*; der aus WordPress uebernommene Inhalt spricht
   die Ist-Namen (--accent-primary, --bg-elevated, --border …), die
   theme.css auf Bordeaux, Rose und Papierbeige setzt. Sichtbar wird das
   als Bruch: /blog/ steht in Sternengold, /basics/ daneben in Rose.

   Statt 140 geerbte Klassen einzeln nachzuziehen, werden die Ist-Namen
   hier EINMAL auf die Galaxie umgelegt. Sie stehen am `body`, nicht an
   `:root`: theme.css definiert sie an `html[data-bc-theme=…]`, und der
   naeher am Inhalt stehende Traeger gewinnt fuer alles darunter — ohne
   `!important` und ohne theme.css anzufassen, die weiterhin das Ist
   spiegelt.

   Mitgenommen sind auch die Schrift-Tokens: der Inhalt fragt sie ab
   (--font-ui, --font-body …), definiert waren sie nirgends. Bisher griff
   still der Fallback «Georgia, serif» — daher die Serifen auf /basics/,
   die auf keiner anderen Seite vorkommen. */
body.galaxie {
  --bg-base: var(--g-himmel);
  --bg-deep: var(--g-himmel);
  --bg-elevated: var(--g-hauch);
  --bg-tint: var(--g-tiefe);

  /* Der uebernommene Inhalt steht auf der Buehne, nicht auf einer hellen
     Insel — die ist weiter unten abgeraeumt. Sein Text bekommt deshalb die
     Farbe fuer FREIEN Text (immer hell), nicht die fuer Flaechen (im
     hellen Design dunkel). Mit --g-flaeche-text stand er dunkel auf
     dunkel und war im hellen Design nicht mehr lesbar. */
  --text-primary: var(--g-text);
  --text-secondary: var(--g-text-dim);
  --text-on-dark: var(--g-text);

  --accent-primary: var(--g-akzent);
  --accent-hover: var(--g-akzent);
  --accent-soft: var(--g-nebel);
  --link: var(--g-nebel);
  --link-hover: var(--g-akzent);
  --gold: var(--g-akzent);

  --border: var(--g-linie);
  --success: var(--g-erfolg);
  --warning: var(--g-warnung);
  --error: var(--g-warnung);

  /* Eine Schriftfamilie fuer die ganze Galaxie — der Inhalt erbt sie
     ueber diese Namen genauso wie die Vorlagen ueber `body`. */
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --page-max-width: 1080px;

  /* --- Kartensprache: eine Taktung fuer alle Kartenfamilien --- */
  --karte-radius: 14px;
  --karte-polster: 20px;
  --karte-dauer: 0.28s;
  --karte-kurve: cubic-bezier(0.2, 0.7, 0.3, 1);
  --karte-hub: -6px;
}

* { box-sizing: border-box; }
body.galaxie {
  margin: 0;
  min-height: 100vh;
  color: var(--g-text);
  background: radial-gradient(ellipse at 20% -10%, var(--g-tiefe), var(--g-himmel) 55%);
  font: 17px/1.8 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--g-nebel); }
a:hover { color: var(--g-akzent); }
h1, h2, h3 { line-height: 1.25; letter-spacing: 0.01em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--g-karte); padding: 8px; }

.missionsleiste {
  /* Projektvorgabe: kein Glassmorphism/Blur — solide Flaeche statt backdrop-filter. */
  position: sticky; top: 0; z-index: 20;
  background: var(--g-himmel);
  border-bottom: 1px solid var(--g-linie);
}
.missionsleiste nav {
  max-width: 1080px; margin: 0 auto; padding: 10px 16px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.missionsleiste a { color: var(--g-flaeche-text); text-decoration: none; }
.missionsleiste a:hover { color: var(--g-akzent); }
.missionsleiste .marke { font-weight: 700; letter-spacing: 0.06em; color: var(--g-akzent); }
.theme-toggle {
  margin-left: auto; background: none; border: 1px solid var(--g-linie);
  color: var(--g-flaeche-text); border-radius: 50%; width: 34px; height: 34px; cursor: pointer;
}
[data-bc-theme="light"] .missionsleiste { background: color-mix(in srgb, #ffffff 88%, transparent); }

.buehne { max-width: 1080px; margin: 0 auto; padding: 32px 16px 80px; }
.bodenstation { border-top: 1px solid var(--g-linie); padding: 24px 16px; text-align: center; color: var(--g-text-dim); }
.bodenstation a { color: var(--g-text-dim); }

/* Startrampe (Hero) — Substrat fuer motion.js/cosmos (.hp-hero) */
.hp-hero {
  text-align: center; padding: 9vh 16px 7vh; position: relative;
  margin-inline: calc(50% - 50vw);
}
.galaxie .hp-hero.bc-space { background: transparent; }
.hp-hero, .hp-hero h1 { color: var(--g-text); }
.hp-hero .claim { color: var(--g-text-dim); font-size: 1.15rem; max-width: 640px; margin: 0 auto; }

/* Karten (Kurse, Beitraege, Module) */
.kartenfeld { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 24px 0; }
/* Karten liegen ohne Fläche und ohne sichtbare Kante auf der Bühne. Der
   Rahmen bleibt als TRANSPARENTE Linie stehen: verschwände er ganz, wüchse
   die Karte beim Zeigen um zwei Pixel und das ganze Raster ruckte.

   Dieselbe Geometrie tragen die aus WordPress uebernommenen Teaser des
   Rankings-Hubs. Sie stehen hier mit `.galaxie` davor, weil ihr
   mitgebrachtes Inline-CSS im Rumpf steht und damit SPAETER faellt als
   diese Datei — bei gleichem Gewicht gewaenne es. */
.karte,
.galaxie .brk-hub-card {
  background: transparent; border: 1px solid transparent; border-radius: var(--karte-radius);
  padding: var(--karte-polster); display: block; text-decoration: none; color: var(--g-text);
  position: relative; isolation: isolate;
  transition: transform var(--karte-dauer) var(--karte-kurve), border-color var(--karte-dauer) ease,
              box-shadow var(--karte-dauer) ease, background-color var(--karte-dauer) ease;
}

/* Der starke Effekt gehört ausschliesslich echten Klickzielen (a.karte).
   Eine Formular- oder Inhaltskarte, die sich beim Darüberfahren hebt und
   leuchtet, verspricht einen Klick, den es nicht gibt — das ist kein
   Belohnungsreiz, sondern eine Falschmeldung.

   Die Aura ist die Kante selbst, unscharf gezogen: eine zweite Linie auf
   gleicher Geometrie, weichgezeichnet und leicht aufgezogen. Sie strahlt
   deshalb vom Rand nach aussen statt aus der Mitte heraus — die Klinge
   leuchtet, nicht das Blatt. */
a.karte::before,
.galaxie .brk-hub-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  border: 1px solid var(--g-akzent);
  filter: blur(7px);
  opacity: 0; transform: scale(0.985);
  transition: opacity var(--karte-dauer) ease, transform var(--karte-dauer) var(--karte-kurve);
}
/* Bewegungspuffer der Trefferfläche. Die Karte hebt sich beim Zeigen um 6px
   — und mit ihr die Klickfläche. Ein Zeiger dicht an der Unterkante läge
   danach daneben: die Karte fiele zurück, höbe sich wieder, flackerte unter
   der Maus. Dieser unsichtbare Streifen hält die Fläche dort, wo der Zeiger
   sie angefasst hat. */
a.karte::after,
.galaxie .brk-hub-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px;
  z-index: -1;
}
/* Beim Zeigen zündet die Kante: scharfe Akzentlinie, darüber der weiche
   Halo nach aussen (kein Schein aus der Mitte). Die Fläche kommt nur als
   Andeutung dazu, damit der Text auf dem Leuchten lesbar bleibt.

   Der Hub-Teaser ist ein <article>, kein Anker — sein Klickziel liegt
   als Verweis darin. Er hoert deshalb auf `:focus-within`: bekommt der
   Verweis den Tastaturfokus, zuendet die Karte um ihn herum. */
a.karte:hover, a.karte:focus-visible,
.galaxie .brk-hub-card:hover, .galaxie .brk-hub-card:focus-within {
  transform: translateY(var(--karte-hub)) scale(1.02);
  border-color: var(--g-akzent);
  background-color: var(--g-hauch);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--g-akzent) 70%, transparent),
    0 0 14px color-mix(in srgb, var(--g-akzent) 45%, transparent),
    0 0 34px color-mix(in srgb, var(--g-akzent) 22%, transparent);
}
/* Die Aura fährt beim Zünden minimal auf — das ist der Moment, der den
   Effekt lebendig macht statt nur hell. */
a.karte:hover::before, a.karte:focus-visible::before,
.galaxie .brk-hub-card:hover::before, .galaxie .brk-hub-card:focus-within::before {
  opacity: 1; transform: scale(1.015);
}
a.karte:hover h2, a.karte:hover h3,
a.karte:focus-visible h2, a.karte:focus-visible h3,
.galaxie .brk-hub-card:hover .brk-hub-card-title,
.galaxie .brk-hub-card:focus-within .brk-hub-card-title { color: var(--g-akzent); }
/* Der Druckpunkt: die Karte federt zurück, damit der Klick sich bestätigt. */
a.karte:active,
.galaxie .brk-hub-card:active { transform: translateY(-2px) scale(1); transition-duration: 0.08s; }
a.karte:focus-visible { outline: 2px solid var(--g-akzent); outline-offset: 3px; }
/* Der Fokusring gehoert um die ganze Karte, nicht um den Verweis darin —
   sonst zeigt die Tastatur auf etwas anderes als die Maus trifft. */
.galaxie .brk-hub-card:focus-within { outline: 2px solid var(--g-akzent); outline-offset: 3px; }
.galaxie .brk-hub-btn:focus-visible { outline: none; }
.karte .kicker, .beirat-archive-kicker { color: var(--g-akzent); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; }
.karte h3 { margin: 6px 0 8px; }
.karte .meta { color: var(--g-text-dim); font-size: 0.9rem; }
.karte h2, .karte h3, .karte legend, .karte label { color: var(--g-text); }

/* Beitragsfläche ohne Hintergrund und Rahmen: der Text steht direkt auf der
   Bühne. Innenpolster und Zeilenbreite bleiben, sonst klebte der Text am
   Viewportrand. Die eigene `color`-Angabe entfällt — `--g-flaeche-text` ist
   auf `--g-text` definiert, also genau die Farbe, die der Body ohnehin
   vererbt. */
article.beitrag {
  max-width: 840px; margin: 0 auto; font-size: 1.125rem;
  padding: clamp(20px, 4vw, 44px);
}
article.beitrag a { color: var(--g-nebel); }
article.beitrag img { max-width: 100%; height: auto; border-radius: 10px; }
article.beitrag pre { overflow-x: auto; background: var(--g-tiefe); padding: 12px; border-radius: 8px; }

/* Flugroute: Fortschritt als Sternenlinie (Quiz-Reise + Kursfortschritt) */
.flugroute { display: flex; gap: 8px; align-items: center; margin: 18px 0; flex-wrap: wrap; }
.flugroute .stern {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--g-linie); box-shadow: 0 0 0 2px transparent;
  transition: background 0.4s, box-shadow 0.4s;
}
.flugroute .stern.besucht { background: var(--g-akzent); box-shadow: 0 0 10px var(--g-akzent); }
.flugroute .stern.aktiv { background: var(--g-nebel); box-shadow: 0 0 12px var(--g-nebel); }
.flugroute .linie { flex: 1 0 12px; height: 2px; background: var(--g-linie); min-width: 12px; }

/* Quiz-Reise: jede Frage eine Station; Uebergang als Mini-Warp */
.quiz-reise fieldset, form fieldset {
  border: 1px solid var(--g-linie); border-radius: 14px; background: var(--g-karte);
  padding: 22px; margin: 0 0 16px; color: var(--g-flaeche-text);
}
.quiz-reise legend { font-weight: 600; padding: 0 8px; }
/* Das Fieldset ist eine der wenigen Flaechen, die im hellen Design wirklich
   hell werden. Was darin steht, braucht deshalb die Flaechenfarben — die
   allgemeine Regel weiter unten setzt Beschriftungen auf die helle
   Buehnenfarbe, und die waere hier weiss auf weiss. */
.quiz-reise fieldset label, form fieldset label,
.quiz-reise fieldset legend, form fieldset legend { color: var(--g-flaeche-dim); }
.quiz-reise fieldset legend, form fieldset legend { color: var(--g-flaeche-text); }
.quiz-reise label {
  display: flex; gap: 12px; align-items: baseline;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
}
.quiz-reise label:hover { background: color-mix(in srgb, var(--g-nebel) 14%, transparent); }
.quiz-reise .station { transition: opacity 0.3s ease, transform 0.3s ease; }
.quiz-reise.reise-aktiv .station[hidden] { display: none; }
.quiz-reise .station.abflug { opacity: 0; transform: translateX(-40px) scale(0.98); }
.quiz-reise .station.anflug { opacity: 0; transform: translateX(40px) scale(0.98); }
.quiz-steuer { display: flex; gap: 12px; justify-content: space-between; margin-top: 8px; }

button, .knopf {
  background: linear-gradient(135deg, var(--g-nebel), color-mix(in srgb, var(--g-nebel) 60%, var(--g-akzent)));
  color: #fff; border: 0; border-radius: 10px; padding: 12px 22px;
  font-size: 1rem; cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .knopf:hover { filter: brightness(1.12); color: #fff; }
button.sekundaer { background: transparent; border: 1px solid var(--g-linie); color: var(--g-text); }

/* Landung: Ergebnis-Momente */
.landung { text-align: center; padding: 5vh 0; }
.landung .gross { font-size: 3rem; }
.landung.erfolg h1 { color: var(--g-erfolg); }
.landung.fehlschlag h1 { color: var(--g-warnung); }

/* Formulare */
form p { margin: 0 0 14px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--g-linie);
  background: var(--g-feld); color: var(--g-flaeche-text); font: inherit;
}
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; flex: 0 0 auto; }
[hidden] { display: none !important; }
label { display: block; margin-bottom: 4px; color: var(--g-text-dim); }
.fehlerliste { color: var(--g-warnung); list-style: none; padding: 0; }

/* Lesefortschritt-Substrat (motion.js ersetzt ihn auf spectacle durch den Kompass) */
.beirat-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--g-akzent); width: 0; z-index: 30; }

@media (prefers-reduced-motion: reduce) {
  .karte, .galaxie .brk-hub-card, .quiz-reise .station, .flugroute .stern { transition: none; }
  /* Wer Bewegung abbestellt hat, bekommt die Belohnung trotzdem — nur ohne
     Verschiebung: Rahmen, Fläche und Leuchten bleiben, der Sprung entfällt. */
  a.karte:hover, a.karte:focus-visible, a.karte:active,
  .galaxie .brk-hub-card:hover, .galaxie .brk-hub-card:focus-within,
  .galaxie .brk-hub-card:active { transform: none; }
  a.karte::before, .galaxie .brk-hub-card::before { transition: none; }
  /* Auch die Aura bleibt ruhig: sie leuchtet, ohne aufzufahren. */
  a.karte:hover::before, a.karte:focus-visible::before,
  .galaxie .brk-hub-card:hover::before,
  .galaxie .brk-hub-card:focus-within::before { transform: none; }
  .galaxie .brk-score-bar { transition: none; }
}

/* Rankings-Tabellen (brk-Snapshot aus dem Ist) im Galaxie-Look */
article.beitrag table { width: 100%; border-collapse: collapse; margin: 18px 0; }
article.beitrag th, article.beitrag td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--g-linie);
}
article.beitrag thead th {
  color: var(--g-akzent); text-transform: uppercase; font-size: 0.8rem;
  letter-spacing: 0.08em;
}
article.beitrag tbody tr:hover { background: color-mix(in srgb, var(--g-nebel) 10%, transparent); }
.brk-table-outer { overflow-x: auto; }
.rankings-stand { color: var(--g-text-dim); font-size: 0.9rem; }

/* Konto-Seiten (allauth im Galaxie-Layout) */
.konto-buehne { display: flex; justify-content: center; padding: 4vh 0; }
.konto-karte { max-width: 460px; width: 100%; }
.konto-karte h1, .konto-karte h2 { color: var(--g-text); margin-top: 6px; }
.konto-karte p, .konto-karte li { color: var(--g-text-dim); }
.konto-karte a { color: var(--g-nebel); }
.konto-karte form { margin-top: 12px; }
.konto-karte button, .konto-karte .knopf { width: 100%; margin-top: 6px; }
.konto-karte .errorlist { color: var(--g-warnung); list-style: none; padding: 0; }
.konto-meldung { color: var(--g-erfolg); }
/* Honeypot-Koeder unsichtbar, aber im DOM (Bots fuellen es, Menschen nie) */
.konto-karte input[name="website"],
.konto-karte label[for="id_website"] { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* Themenleiste (Blog-Kategorien nach Ist-Reihenfolge) */
.themenleiste { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.themenleiste .thema {
  border: 1px solid var(--g-linie); border-radius: 999px; padding: 6px 14px;
  text-decoration: none; color: var(--g-text);
  background: var(--g-hauch-leicht);
}
.themenleiste .thema:hover { border-color: var(--g-akzent); color: var(--g-akzent); }
.themenleiste .anzahl { color: var(--g-text-dim); font-size: 0.85em; }
.beirat-archive-kicker a { color: inherit; text-decoration: none; }
.beirat-archive-kicker a:hover { color: var(--g-akzent); }

/* --- Footer-Spalten (Live-Paritaet, Session 19) --- */
.fuss-spalten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px; max-width: 720px; margin: 0 auto 20px; text-align: left;
}
.fuss-spalten nav { display: flex; flex-direction: column; gap: 6px; }
.fuss-spalten h3 {
  margin: 0 0 4px; font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--g-akzent);
}
.fuss-spalten a { color: var(--g-text-dim); text-decoration: none; }
.fuss-spalten a:hover { color: var(--g-akzent); }
.fuss-briefing { margin: 12px 0; }

/* --- Briefing-Box und Diese-Woche-Karte --- */
.briefing-box {
  margin-top: 40px; padding: 28px 24px; border: 1px solid var(--g-linie);
  border-radius: 14px; background: var(--g-karte); text-align: center;
}
.briefing-box .kicker, .woche-karte .kicker {
  color: var(--g-akzent); font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.12em; margin: 0 0 4px;
}
.briefing-box h2 { margin: 0 0 10px; }
.briefing-box > p { max-width: 560px; margin: 0 auto 14px; color: var(--g-text-dim); }
.briefing-form {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0;
}
.briefing-form input[type="email"] {
  min-width: 240px; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--g-linie); background: var(--g-feld); color: var(--g-flaeche-text);
}
.woche-karte {
  margin-top: 28px; padding: 22px 24px; border: 1px solid var(--g-linie);
  border-left: 4px solid var(--g-akzent); border-radius: 12px; background: var(--g-karte);
}
.woche-karte h2 { margin: 4px 0 8px; }
.woche-karte h2 a { color: var(--g-text); text-decoration: none; }
.woche-karte h2 a:hover { color: var(--g-akzent); }
.woche-karte .weiter { color: var(--g-akzent); text-decoration: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Kontakt-Seite --- */
.kontakt-feld {
  display: grid; grid-template-columns: 3fr 2fr; gap: 32px; margin-top: 24px;
}
@media (max-width: 720px) { .kontakt-feld { grid-template-columns: 1fr; } }
.kontakt-form label { display: block; margin-bottom: 4px; color: var(--g-text-dim); }
.kontakt-form input, .kontakt-form textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--g-linie); background: var(--g-feld); color: var(--g-flaeche-text);
}
.kontakt-form .fehler { color: var(--g-warnung); font-size: 0.9em; }
.kontakt-info {
  padding: 20px; border: 1px solid var(--g-linie); border-radius: 12px;
  background: var(--g-karte); align-self: start;
  /* Ebenfalls eine echte Flaeche: im hellen Design hell, also braucht ihr
     Text die Flaechenfarbe statt der geerbten Buehnenfarbe. */
  color: var(--g-flaeche-text);
}
.kontakt-info h2 { font-size: 1rem; color: var(--g-akzent); margin: 0 0 6px; }
.kontakt-info h2 + p { margin-top: 0; }
.kontakt-info h2:not(:first-child) { margin-top: 18px; }

/* --- Themen-Visual als Kopf-Band (K2.16, Alt-Paritaet Kompass-Duktus 1200x630) --- */
.beirat-post-visual { margin: 0 0 18px; }
.beirat-post-visual-img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--g-linie);
}

/* --- Komponenten Session 22: Nutzenanker, Footer-Mission, Kompakt-CTA --- */
.nutzen-anker {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  list-style: none; padding: 0; margin: 12px 0;
}
.nutzen-anker li {
  border: 1px solid var(--g-linie); border-radius: 999px; padding: 6px 14px;
  color: var(--g-akzent); font-size: 0.9rem;
}
.woche-leitidee { color: var(--g-text-dim); }
.fuss-mission {
  max-width: 640px; margin: 0 auto 18px; color: var(--g-text);
  font-weight: 600;
}
.briefing-kompakt { margin: 18px auto; max-width: 640px; }
.briefing-kompakt .briefing-form { margin: 8px 0 0; }

/* --- Sichtbarer Fokus (Tastaturbedienung, Detailauftrag §12) --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--g-akzent);
  outline-offset: 2px;
}

/* --- Strukturierte Ueber-Seite (§9) --- */
.ueber-teambild img { max-width: 420px; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--g-linie); }
/* Zwei Gruenderprofile: halb/halb ueber die ganze Buehnenbreite, damit der
   Block genauso breit steht wie die «Warum»-Karte darunter. Ohne diese Regel
   erbt das Team das auto-fill-Raster (minmax 280px), das bei 1080px Buehne
   drei Spalten bildet — zwei Karten fuellen davon nur zwei und lassen rechts
   eine Luecke. Ab dem dritten Mitglied greift wieder das flexible Raster. */
.ueber-team { margin-top: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ueber-team:has(> .ueber-mitglied:nth-child(3)) {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
@media (max-width: 720px) { .ueber-team { grid-template-columns: 1fr; } }
.ueber-mitglied h2 { margin: 10px 0 2px; }
.ueber-portrait { border-radius: 50%; }
.ueber-bio p, .ueber-warum p { color: var(--g-text-dim); }
.ueber-warum a { color: var(--g-nebel); }

/* --- Marke mit Logo (Session 24) --- */
.missionsleiste .marke { display: inline-flex; align-items: center; }
.marke-logo { display: block; height: 43.6px; width: 43.6px; }
.marke-logo--hell { display: none; }
[data-bc-theme="light"] .marke-logo--dunkel { display: none; }
[data-bc-theme="light"] .marke-logo--hell { display: block; }
.missionsleiste nav { flex-wrap: wrap; }

/* ============================================================
   RANKINGS — Hub und Ranglisten
   ============================================================
   Diese Seiten kamen ohne Gestaltung aus WordPress herueber: ihr Ist-CSS
   lag in seitengebundenen Inline-Bloecken, die der Import nicht mitnahm.
   Uebrig blieb reich ausgezeichnetes Markup ohne eine einzige Regel —
   sechs Hub-Teaser als lose Textblocks, Ranglisten ohne Rangabzeichen,
   Scores ohne Balken. Hier bekommt beides seine Form, in der Sprache der
   Galaxie und mit denselben Karten wie /blog/.
   ------------------------------------------------------------ */

/* Eine Uebersicht ist keine Lesestrecke. `article.beitrag` haelt den Text
   bei 760px, damit Zeilen nicht ueberlang werden — ein Kartenraster oder
   eine vierspaltige Rangliste erstickt darin. Seiten, die so etwas
   tragen, geben die Lesebreite frei; alle uebrigen behalten sie. */
.galaxie article.beitrag:has(.brk-hub-grid),
.galaxie article.beitrag:has(.brk-rankings-table),
.galaxie article.beitrag:has(.brk-arena-table) { max-width: none; }

/* --- Hub: sechs Wege in die Ranglisten --- */
.galaxie .brk-hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px; margin: 28px 0 36px;
}
/* Die Karte traegt genau einen Ausgang. Der Verweis darin spannt seine
   Trefferflaeche ueber die ganze Karte auf — so ist sie als Ganzes
   anklickbar, ohne dass der Inhalt umgebaut werden muss und ohne einen
   zweiten Anker, der den ersten verschachteln wuerde. */
.galaxie .brk-hub-btn::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
}
.galaxie .brk-hub-card { display: flex; flex-direction: column; gap: 2px; }
.galaxie .brk-hub-card-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; margin: 0 0 12px; color: var(--g-text);
  transition: color var(--karte-dauer) ease;
}
.galaxie .brk-hub-card-title .b-ico { flex: none; color: var(--g-akzent); }
/* Der Spitzenreiter ist die Botschaft der Karte: Kicker, Name, Variante
   und Wert stehen untereinander statt in einer Zeile zu verkleben. */
.galaxie .brk-hub-top1 { display: grid; gap: 2px; margin: 0 0 12px; }
.galaxie .brk-hub-top1-label {
  color: var(--g-akzent); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.12em;
}
.galaxie .brk-hub-top1 strong { font-size: 1.05rem; color: var(--g-text); }
.galaxie .brk-hub-variant { color: var(--g-text-dim); font-size: 0.85rem; }
.galaxie .brk-hub-score {
  margin-top: 6px; font-size: 1.6rem; font-weight: 700; line-height: 1.15;
  color: var(--g-akzent); font-variant-numeric: tabular-nums;
}
.galaxie .brk-hub-score-unit {
  display: block; font-size: 0.78rem; font-weight: 400; letter-spacing: 0.04em;
  color: var(--g-text-dim);
}
.galaxie .brk-hub-desc { color: var(--g-text-dim); margin: 0 0 12px; }
.galaxie .brk-hub-meta { color: var(--g-text-dim); font-size: 0.85rem; margin: 0; }
/* Der Ausgang bleibt sichtbar als Zeile — ein Knopf waere hier falsch:
   anklickbar ist die ganze Karte, nicht nur dieses Rechteck. */
/* `margin-top: auto` schiebt den Ausgang an den Kartenfuss: bei
   unterschiedlich langen Karten stehen die Verweise sonst auf drei
   verschiedenen Hoehen und das Raster franst aus. */
.galaxie .brk-hub-cta {
  margin: 14px 0 0; margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--g-linie);
}
.galaxie .brk-hub-btn {
  color: var(--g-akzent); text-decoration: none; font-weight: 600;
}
.galaxie .brk-hub-card:hover .brk-hub-btn { color: var(--g-akzent); }

/* --- Ranglisten-Seiten --- */
.galaxie .brk-rankings-wrap { margin: 8px 0 28px; }
.galaxie .brk-rankings-header { margin-bottom: 18px; }
/* Achsenwechsel als Chipreihe, im Duktus der Themenleiste des Blogs. */
.galaxie .brk-axis-nav {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 18px; font-size: 0.92rem;
}
.galaxie .brk-axis-nav a[href] {
  border: 1px solid var(--g-linie); border-radius: 999px; padding: 6px 14px;
  text-decoration: none; color: var(--g-text);
  background: var(--g-hauch-leicht);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.galaxie .brk-axis-nav a[href]:hover { border-color: var(--g-akzent); color: var(--g-akzent); }
.galaxie .brk-axis-nav .brk-axis-current {
  border: 1px solid var(--g-akzent); border-radius: 999px; padding: 6px 14px;
  color: var(--g-akzent); font-weight: 600;
}
/* Ein Anker OHNE Ziel ist kein Link, sondern eine Attrappe. Der Import
   hat auf diesen Seiten Ziele verloren (Befund, siehe Bericht); bis der
   Inhalt repariert ist, tritt solch ein Rest hier bewusst als ruhiger
   Text auf und nicht als Klickversprechen. */
.galaxie .brk-axis-nav a:not([href]) { color: var(--g-text-dim); cursor: default; }
.galaxie .brk-axis-nav > span[aria-hidden="true"] { display: none; }

/* Die Lese-Insel aus dem Ist wird abgeraeumt. Im WordPress-Stand lag der
   Inhalt direkt auf der Galaxie und brauchte eine helle Flaeche darunter;
   hier traegt die Buehne den Inhalt bereits, und die Insel zerschnitte
   die Seite in einen Kasten im Kasten. Struktur geben jetzt die Karten. */
   Der Selektor traegt `html body` vor sich, weil die Kino-Regel
   (`html:is([data-motion=…]) :is(.brk-…-wrap, …)`) auf 0-2-1 kommt und
   ein blosses `.galaxie .brk-rankings-wrap` mit 0-2-0 darunter bliebe. */
html body.galaxie .brk-rankings-wrap, html body.galaxie .brk-basics-wrap,
html body.galaxie .brk-guide-wrap, html body.galaxie .brk-ueber-wrap,
html body.galaxie .bak-wrap, html body.galaxie .beirat-faq {
  background-color: transparent;
}
.galaxie .brk-rankings-header .subtitle { color: var(--g-text-dim); margin: 0 0 12px; }
/* Fuenf Angaben, die im Ist ohne Trennung aneinanderliefen («… 9. August
   2026 Quelle: … Index (hoeher = besser) Top 25 …»). Punkte dazwischen
   und Umbruch erlaubt: so bleibt jede Angabe fuer sich lesbar. */
.galaxie .brk-meta-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  color: var(--g-text-dim); font-size: 0.9rem; margin: 0 0 4px;
}
.galaxie .brk-meta-row > span + span::before {
  content: "·"; margin-right: 8px; color: var(--g-linie);
}
.galaxie .brk-meta-row strong { color: var(--g-text); }
.galaxie .brk-rankings-lead { color: var(--g-text-dim); max-width: 70ch; }

/* Die Tabelle traegt vier Spalten und darf auf schmalen Geraeten
   seitlich rollen, statt Zahlen umzubrechen. */
.galaxie .brk-table-outer,
.galaxie .brk-arena-table-outer { overflow-x: auto; }
.galaxie .brk-rankings-table,
.galaxie .brk-arena-table {
  width: 100%; border-collapse: collapse; margin: 8px 0 18px;
  font-variant-numeric: tabular-nums;
}
.galaxie .brk-rankings-table th,
.galaxie .brk-arena-table th {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--g-linie);
  color: var(--g-akzent); text-transform: uppercase; font-size: 0.72rem;
  letter-spacing: 0.1em; font-weight: 700; white-space: nowrap;
}
.galaxie .brk-rankings-table td,
.galaxie .brk-arena-table td {
  padding: 12px; border-bottom: 1px solid color-mix(in srgb, var(--g-linie) 60%, transparent);
  vertical-align: middle;
}
.galaxie .brk-rankings-table tbody tr,
.galaxie .brk-arena-table tbody tr { transition: background-color 0.18s ease; }
.galaxie .brk-rankings-table tbody tr:hover,
.galaxie .brk-arena-table tbody tr:hover {
  background: color-mix(in srgb, var(--g-nebel) 12%, transparent);
}
/* Rangabzeichen: die ersten drei Plaetze bekommen Metall, alle anderen
   eine ruhige Scheibe. Die Zahl bleibt lesbar, das Feld wird zum Zeichen. */
.galaxie .brk-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--g-linie); color: var(--g-text-dim);
  font-size: 0.85rem; font-weight: 700;
}
.galaxie .brk-rank-badge.top1 {
  border-color: var(--g-akzent); color: var(--g-himmel);
  background: var(--g-akzent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--g-akzent) 45%, transparent);
}
.galaxie .brk-rank-badge.top2 {
  border-color: color-mix(in srgb, var(--g-akzent) 55%, var(--g-text));
  color: var(--g-text);
  background: color-mix(in srgb, var(--g-akzent) 18%, transparent);
}
.galaxie .brk-rank-badge.top3 {
  border-color: color-mix(in srgb, var(--g-akzent) 45%, transparent);
  color: var(--g-akzent);
}
.galaxie .brk-row-top1 td { background: color-mix(in srgb, var(--g-akzent) 7%, transparent); }
.galaxie .brk-row-top1 td:first-child { box-shadow: inset 3px 0 0 var(--g-akzent); }
.galaxie .brk-col-rank { width: 1%; white-space: nowrap; }
.galaxie .brk-col-model { color: var(--g-text); font-weight: 600; }
.galaxie .brk-col-prov, .galaxie .brk-col-ctx { color: var(--g-text-dim); }
/* Die Variante ist ein Zusatz zum Modellnamen, keine Fortsetzung davon:
   ohne eigene Zeile las sich «GPT-5.6 Sol» + «xhigh» als «GPT-5.6 Solxhigh». */
.galaxie .brk-model-variant {
  display: block; font-weight: 400; font-size: 0.82rem; color: var(--g-text-dim);
  margin-top: 2px;
}
.galaxie .brk-col-score { width: 26%; min-width: 130px; }
.galaxie .brk-score { display: grid; gap: 5px; }
.galaxie .brk-score-num { font-weight: 700; color: var(--g-text); }
/* Der Balken zeigt den Wert im Verhaeltnis zum Spaltenbesten. Seine Breite
   liefert rankings.js aus den Zahlen, die daneben stehen — ohne das Skript
   bleibt er auf Null und damit unsichtbar. Ein Balken, der ohne Daten
   irgendeine Laenge behauptete, waere schlimmer als keiner. */
.galaxie .brk-score-bar {
  display: block; height: 4px; border-radius: 999px;
  width: calc(var(--anteil, 0) * 1%);
  background: linear-gradient(90deg, var(--g-akzent), var(--g-nebel));
  transition: width 0.6s var(--karte-kurve);
}
.galaxie .brk-na { color: var(--g-text-dim); }
.galaxie .brk-price-main { display: block; color: var(--g-text); }
.galaxie .brk-price-sub { display: block; font-size: 0.8rem; color: var(--g-text-dim); }
.galaxie .brk-indikativ { color: var(--g-text-dim); font-size: 0.8rem; }
.galaxie .brk-table-note,
.galaxie .brk-attribution,
.galaxie .brk-meth-note,
.galaxie .brk-svg-note { color: var(--g-text-dim); font-size: 0.88rem; }
.galaxie .brk-methodik-link, .galaxie .brk-meth-back { display: inline-block; margin: 6px 0; }

/* --- Methodik: Quellen als ruhige Bloecke --- */
.galaxie .brk-source {
  border: 1px solid var(--g-linie); border-left: 3px solid var(--g-akzent);
  border-radius: 12px; padding: 16px 18px; margin: 14px 0;
  background: var(--g-hauch-leicht);
}
.galaxie .brk-source-head { font-weight: 700; color: var(--g-text); margin: 0 0 4px; }
.galaxie .brk-source-axis { color: var(--g-akzent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
.galaxie .brk-source-foot { color: var(--g-text-dim); font-size: 0.88rem; margin: 8px 0 0; }
.galaxie .brk-validated { color: var(--g-erfolg); }

/* ============================================================
   GRUNDLAGEN — Lernkarten, Vergleiche, Wegweiser
   ============================================================
   Anders als die Rankings bringen diese Seiten ihr Ist-CSS mit (ein
   <style>-Block im Rumpf). Farben und Schrift kommen ueber die
   Tokenbruecke oben bereits in der Galaxie an; hier geht es nur noch um
   die Form: Kartengeometrie wie im Blog, Kanten statt Flaechen.
   ------------------------------------------------------------ */
.galaxie .brk-basics-wrap, .galaxie .brk-rankings-wrap,
.galaxie .brk-guide-wrap, .galaxie .brk-ueber-wrap { max-width: none; }
.galaxie .brk-basics-hero { margin-bottom: 32px; }
.galaxie .brk-basics-kicker {
  color: var(--g-akzent); font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.12em;
}
/* Lernkarten sind Lesestoff, kein Teaser: sie behalten eine ruhige Kante
   und bekommen KEINE ganzflaechige Trefferflaeche. Ein aufgespannter Link
   ueber langem Text nimmt dem Leser das Markieren und Kopieren — der
   Preis waere hoeher als der Gewinn. */
.galaxie .brk-level {
  background: transparent; border: 1px solid var(--g-linie);
  border-radius: var(--karte-radius); padding: clamp(18px, 3vw, 28px);
  margin: 0 0 18px;
  transition: border-color var(--karte-dauer) ease, box-shadow var(--karte-dauer) ease;
}
.galaxie .brk-level:hover {
  border-color: color-mix(in srgb, var(--g-akzent) 60%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--g-akzent) 12%, transparent);
}
.galaxie .brk-level-kicker {
  color: var(--g-akzent); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.12em;
}
.galaxie .brk-level-link, .galaxie .brk-spoke-next a, .galaxie .brk-rag-link {
  color: var(--g-akzent); font-weight: 600; text-decoration: none;
}
.galaxie .brk-level-link:hover, .galaxie .brk-spoke-next a:hover { text-decoration: underline; }
/* Vergleichskarten tragen ihre Aussage in der Kopfkante — die bleibt, nur
   in Sternengold statt Bordeaux. Eine Flaeche brauchen sie nicht. */
.galaxie .brk-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.galaxie .brk-compare-card {
  background: transparent; border: 1px solid var(--g-linie);
  border-top: 3px solid var(--g-akzent); border-radius: var(--karte-radius);
}
.galaxie .brk-compare-tag {
  color: var(--g-akzent); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.galaxie .brk-compare-good strong { color: var(--g-akzent); }
.galaxie .brk-basics-graph, .galaxie .brk-figure-html {
  background: transparent; border: 1px solid var(--g-linie); border-radius: var(--karte-radius);
}
.galaxie .brk-basics-cta, .galaxie .brk-hw-teaser {
  background: transparent; border: 1px solid var(--g-linie);
  border-left: 3px solid var(--g-akzent); border-radius: var(--karte-radius);
}
.galaxie .brk-basics-cta-btn { background: var(--g-akzent); color: var(--g-himmel); }
.galaxie .brk-basics-standdatum, .galaxie .brk-basics-graph-cap { color: var(--g-text-dim); }
.galaxie .brk-ctable, .galaxie .brk-guide-table, .galaxie .brk-arena-table { width: 100%; }
.galaxie .brk-ctable th, .galaxie .brk-guide-table th {
  color: var(--g-akzent); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.1em;
}
.galaxie .brk-lesson-merksatz, .galaxie .brk-lesson-irrtum,
.galaxie .brk-vn-body, .galaxie .brk-adv-body, .galaxie .brk-merk-body {
  background: transparent; border-left: 3px solid var(--g-akzent);
  padding-left: 14px;
}
.galaxie .brk-merk-label, .galaxie .brk-ref-h, .galaxie .brk-fig-h, .galaxie .brk-figcap-top {
  color: var(--g-akzent);
}

/* ============================================================
   BEITRAGSBAUSTEINE — Einordnungsboxen, Fragen, Handlungsaufruf
   ============================================================
   Diese drei kommen in den Beitraegen selbst vor (Briefings, Analysen)
   und hatten bisher keine einzige Regel: die Boxen standen als nackter
   Text im Lesefluss, ununterscheidbar von ihrer Umgebung. Sie sind
   Inhaltskarten — sie leuchten nicht und heben sich nicht, denn sie
   fuehren nirgendwohin.
   ------------------------------------------------------------ */
.galaxie .beirat-box {
  border: 1px solid var(--g-linie); border-left: 3px solid var(--g-akzent);
  border-radius: 12px; padding: 18px 20px; margin: 22px 0;
  background: var(--g-hauch-leicht);
}
.galaxie .beirat-box > :first-child, .galaxie .beirat-box p:last-child { margin-bottom: 0; }
.galaxie .beirat-box-label {
  display: block; color: var(--g-akzent); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
  margin: 0 0 6px;
}
/* Jede Sorte bekommt ihre eigene Stimme an der Kante: Fazit und
   Empfehlung tragen, Ausblick und DACH-Bezug ordnen ein, Grenzen warnen. */
.galaxie .beirat-box--empfehlung { border-left-color: var(--g-erfolg); }
.galaxie .beirat-box--empfehlung .beirat-box-label { color: var(--g-erfolg); }
.galaxie .beirat-box--blick, .galaxie .beirat-box--dach { border-left-color: var(--g-nebel); }
.galaxie .beirat-box--blick .beirat-box-label,
.galaxie .beirat-box--dach .beirat-box-label { color: var(--g-nebel); }
.galaxie .beirat-box--grenze { border-left-color: var(--g-warnung); }
.galaxie .beirat-box--grenze .beirat-box-label { color: var(--g-warnung); }

.galaxie .beirat-cta-newsletter {
  border: 1px solid var(--g-linie); border-radius: var(--karte-radius);
  padding: 20px 22px; margin: 28px 0;
  background: var(--g-hauch-leicht);
}
.galaxie .beirat-cta-newsletter a { color: var(--g-akzent); font-weight: 600; }

.galaxie .beirat-faq { margin: 32px 0; }
.galaxie .beirat-faq-kicker {
  color: var(--g-akzent); font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.12em; margin: 0 0 4px;
}
.galaxie .beirat-faq-title { margin: 0 0 16px; }
.galaxie .beirat-faq-list { display: grid; gap: 10px; }
.galaxie .beirat-faq-item {
  border: 1px solid var(--g-linie); border-radius: 12px; padding: 0 18px;
  transition: border-color 0.2s ease;
}
.galaxie .beirat-faq-item[open] { border-color: color-mix(in srgb, var(--g-akzent) 55%, transparent); }
.galaxie .beirat-faq-summary {
  cursor: pointer; padding: 14px 0; list-style: none;
  display: flex; align-items: baseline; gap: 12px;
}
.galaxie .beirat-faq-summary::-webkit-details-marker { display: none; }
/* Eigenes Zeichen statt des Browser-Dreiecks: es dreht sich beim Oeffnen
   und sitzt damit im selben Duktus wie die uebrigen Pfeile der Seite. */
.galaxie .beirat-faq-summary::before {
  content: "›"; color: var(--g-akzent); font-size: 1.3rem; line-height: 1;
  transition: transform 0.2s ease; flex: none;
}
.galaxie .beirat-faq-item[open] .beirat-faq-summary::before { transform: rotate(90deg); }
.galaxie .beirat-faq-q { margin: 0; font-size: 1.02rem; color: var(--g-text); }
.galaxie .beirat-faq-a { margin: 0 0 16px; padding-left: 26px; color: var(--g-text-dim); }

/* ============================================================
   ANGLEICHUNGEN — Wochenkarte, Briefingbox, Kursmodule
   ============================================================
   Diese drei sind ebenfalls Karten, fuehren aber nicht an genau einen
   Ort: die Wochenkarte traegt zwei Verweise, die Briefingbox ein
   Formular, das Kursmodul eine Lektionsliste. Sie bekommen deshalb die
   RUHIGE Haelfte der Kartensprache — Kante und Radius wie im Blog, aber
   ohne Flaeche, ohne Hebung und ohne Leuchten.
   ------------------------------------------------------------ */
.woche-karte, .briefing-box {
  background: transparent;
}
/* ============================================================
   PHASE B PUBLIC EXPERIENCE
   ============================================================
   Eine leichte öffentliche Schicht auf den vorhandenen Galaxie-Tokens.
   Sterne sind statische Gradienten. Keine dauerhafte JS-Schleife:
   Dauerbewegung gibt es nur als angehaltene CSS-Drehung, die mit
   ist-sichtbar anläuft und ausserhalb des Bildes wieder steht.
   Beim allerersten Besuch wartet der Eintritt des Kompasses auf das Ende
   des Vorspanns (Kapitel VORSPANN am Dateiende, Kanon §6a).
   ------------------------------------------------------------ */
.missionsleiste {
  background:
    linear-gradient(180deg, rgba(7, 11, 24, 0.98), rgba(7, 11, 24, 0.94));
  border-bottom-color: color-mix(in srgb, var(--g-akzent) 22%, var(--g-linie));
}
.missionsleiste .missionsnav {
  min-height: 68px;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(14px, 2vw, 26px);
}
.missionsleiste .marke {
  min-height: 44px;
  gap: 10px;
  flex: 0 0 auto;
}
.marke-kompass {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  position: relative;
  transition: transform 360ms var(--karte-kurve);
}
/* Leuchten statt Rand: ein weicher goldener Hof hinter der Kompassrose (Charles, 07.09.). */
.marke-kompass::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  /* Der Hof waechst mit dem Logo, bleibt aber ein Leuchten und wird nie zur Scheibe:
     engerer Verlauf und etwas weniger Deckkraft als bei 48 px (Charles, 08.09.). */
  background: radial-gradient(circle, color-mix(in srgb, var(--g-akzent) 30%, transparent) 0%, transparent 62%);
  opacity: 0.82;
}
.marke-logo {
  position: relative;
  /* Charles, 08.09.: noch 21 Prozent groesser (36 -> 43.6 px); der Hof waechst mit. */
  height: 43.6px;
  width: 43.6px;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--g-akzent) 55%, transparent));
}
.marke:hover .marke-kompass,
.marke:focus-visible .marke-kompass {
  transform: rotate(12deg) scale(1.06);
}
.marke-wort {
  display: grid;
  line-height: 1.05;
  letter-spacing: 0;
}
.marke-wort strong {
  color: var(--g-text);
  font-size: 1.02rem;
  letter-spacing: 0.055em;
}
.marke-wort small {
  color: var(--g-text-dim);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.035em;
  margin-top: 4px;
}
.missionslinks {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 14px);
  margin-left: auto;
}
.missionslinks a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  white-space: nowrap;
  font-size: 0.94rem;
}
.missionsleiste .theme-toggle {
  min-width: 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin-left: 0;
  flex: 0 0 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--g-linie);
}

.public-hero {
  --hero-nebel-x: 0px;
  --hero-nebel-y: 0px;
  --hero-sterne-nah-x: 0px;
  --hero-sterne-nah-y: 0px;
  --hero-sterne-fern-x: 0px;
  --hero-sterne-fern-y: 0px;
  /* Antrieb aus dem Scrolltempo, 0 bis 1. Das Skript schreibt ihn nur
     waehrend des Schubs; hier steht die Ruhe. */
  --kompass-schub: 0;
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: min(620px, 74vh);
  padding: clamp(72px, 10vw, 126px) max(20px, calc((100vw - 1080px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(260px, 0.82fr);
  align-items: center;
  gap: clamp(30px, 7vw, 92px);
  text-align: left;
  /* Kantenlaenge des Kompasses. Der Knopf «Bewegung anhalten» rechnet
     damit seinen Platz an der Ecke des Instruments aus. */
  --kompass-mass: min(40vw, 440px);
}
.public-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 8% 18%, rgba(232, 236, 248, 0.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 18% 68%, rgba(245, 200, 107, 0.88) 0 1.2px, transparent 2px),
    radial-gradient(circle at 34% 30%, rgba(232, 236, 248, 0.72) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 49% 82%, rgba(127, 125, 252, 0.82) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 14%, rgba(232, 236, 248, 0.85) 0 1px, transparent 1.8px),
    radial-gradient(circle at 73% 62%, rgba(245, 200, 107, 0.9) 0 1.2px, transparent 2px),
    radial-gradient(circle at 88% 28%, rgba(232, 236, 248, 0.78) 0 1px, transparent 1.8px),
    radial-gradient(circle at 95% 78%, rgba(127, 125, 252, 0.8) 0 0.9px, transparent 1.7px),
    radial-gradient(ellipse at 74% 42%, rgba(127, 125, 252, 0.18), transparent 42%),
    radial-gradient(ellipse at 18% 54%, rgba(245, 200, 107, 0.08), transparent 34%);
  transform: translate3d(var(--hero-sterne-fern-x), var(--hero-sterne-fern-y), 0);
  will-change: transform;
}
.public-hero::after {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 74% 44%, rgba(100, 111, 215, 0.13), transparent 40%),
    radial-gradient(ellipse at 62% 58%, rgba(245, 200, 107, 0.055), transparent 34%);
  opacity: 0.9;
  transform: translate3d(var(--hero-nebel-x), var(--hero-nebel-y), 0);
  will-change: transform;
  pointer-events: none;
}
.public-hero-sterne-nah {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 58% 22%, rgba(232, 236, 248, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 81% 34%, rgba(245, 200, 107, 0.78) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 68% 76%, rgba(165, 183, 255, 0.68) 0 1px, transparent 2.2px),
    radial-gradient(circle at 92% 64%, rgba(232, 236, 248, 0.7) 0 0.9px, transparent 2px);
  opacity: 0.72;
  transform: translate3d(var(--hero-sterne-nah-x), var(--hero-sterne-nah-y), 0);
  will-change: transform;
  pointer-events: none;
}
/* Hyperraum-Streifen um den Kompass: Strahlen aus seiner Mitte, eine
   silberne und eine goldene Schicht gegeneinander versetzt. Sie leben vom
   Antrieb: --kompass-schub (0 bis 1, das Skript schreibt ihn nur bei einer
   Aenderung ab 0,01) hebt die Deckkraft und zieht die Strahlen nach aussen.
   In Ruhe ist der Wert 0 und die Schicht unsichtbar; einmal beim Aktivieren
   blitzt sie auf (space-impuls). Nur ab 881 px, darunter steht der Kompass
   ueber dem Text, und die Strahlen laegen im Leeren.
   Die Schicht deckt den ganzen Hero; ihr Mittelpunkt ist der des Kompasses,
   gerechnet aus dem Raster des Hero: Rand wie sein Innenabstand, Spalten
   1.18fr und 0.82fr mit der Luecke dazwischen, der Kompass mittig in der
   zweiten (0.795 = 0.59 + 0.41 / 2), senkrecht mittig zwischen den
   Innenabstaenden von .public-hero:has(.ks-horizont). Innen verdeckt ohnehin
   das Instrument: die Strahlen beginnen am Kranz und laufen nach aussen aus,
   so steht keine Kante im Bild. */
.public-hero-sterne-nah::after {
  --strahl-rand: max(20px, (100% - 1080px) / 2);
  --strahl-luecke: clamp(30px, 7vw, 92px);
  --strahl-x: calc(var(--strahl-rand) + var(--strahl-luecke) + (100% - 2 * var(--strahl-rand) - var(--strahl-luecke)) * 0.795);
  --strahl-y: calc(50% + (clamp(40px, 4.4vw, 72px) - clamp(44px, 5vw, 80px)) / 2);
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(from 2deg at var(--strahl-x) var(--strahl-y), transparent 0 7.4deg, rgba(245, 200, 107, 0.34) 7.6deg 8.2deg, transparent 8.4deg 15deg),
    repeating-conic-gradient(from 8deg at var(--strahl-x) var(--strahl-y), transparent 0 17deg, rgba(216, 225, 255, 0.16) 17.4deg 17.8deg, transparent 18.2deg 36deg);
  mask-image: radial-gradient(
    circle at var(--strahl-x) var(--strahl-y),
    transparent 0 calc(var(--kompass-mass) * 0.5),
    black calc(var(--kompass-mass) * 0.62),
    transparent calc(var(--kompass-mass) * 0.9)
  );
  opacity: calc(var(--kompass-schub) * 0.9);
  transform: scale(calc(1 + var(--kompass-schub) * 0.14));
  transform-origin: var(--strahl-x) var(--strahl-y);
  pointer-events: none;
}
@media (min-width: 881px) {
  .public-hero-sterne-nah::after { will-change: opacity, transform; }
}
html[data-motion="spectacle"] .public-hero.kompass-ist-aktiviert .public-hero-sterne-nah::after {
  animation: public-kompass-space-impuls 620ms var(--karte-kurve) 840ms 1;
}
.public-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.public-hero h1 {
  max-width: 660px;
  margin: 10px 0 18px;
  font-size: clamp(2.35rem, 6vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.public-hero .claim {
  margin: 0;
  max-width: 610px;
  font-size: clamp(1.03rem, 1.7vw, 1.22rem);
}
.public-hero-aktionen {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 28px 0 18px;
}
.public-hero-aktionen .knopf {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.knopf.sekundaer {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--g-akzent) 48%, var(--g-linie));
  color: var(--g-text);
}
.public-transparenz {
  max-width: 580px;
  color: var(--g-text-dim);
  font-size: 0.84rem;
}
.public-kompass {
  --kompass-tilt-x: 0deg;
  --kompass-tilt-y: 0deg;
  --kompass-tilt-z: 0deg;
  --kompass-tiefe: 0px;
  --kompass-skalierung: 1;
  --kompass-nadel-winkel: 0deg;
  --kompass-ring-aussen: 0deg;
  --kompass-ring-innen: 0deg;
  --kompass-energie: 0;
  --kompass-licht-x: 0px;
  --kompass-licht-y: 0px;
  position: relative;
  grid-row: 1;
  grid-column: 2;
  width: var(--kompass-mass);
  aspect-ratio: 1;
  justify-self: center;
  color: var(--g-akzent);
  /* Kuerzer als zuvor (860px, dann 640px): je kuerzer die Brennweite,
     desto staerker verjuengen sich die hinteren Ebenen — erst dadurch
     liest sich das Ganze als Koerper und nicht als gestapelte Scheiben. */
  perspective: 560px;
  perspective-origin: 50% 46%;
  /* Der Schlagschatten wandert gegen die Neigung: die Seite, die nach
     hinten kippt, wird beschattet. Das macht die Drehung auch dort
     lesbar, wo die Geometrie allein noch mehrdeutig waere. */
  filter: drop-shadow(
    calc(var(--kompass-licht-x) * -0.9) calc(32px - var(--kompass-licht-y) * 0.7)
    40px rgba(0, 0, 0, 0.34)
  );
  animation: public-kompass-anflug 1100ms var(--karte-kurve) both;
  /* Nur layout, nicht mehr paint: der Kranz sitzt bewusst AUSSERHALB der
     Box (inset -4%) und wuerde von paint-Containment abgeschnitten. Die
     Layout-Isolierung — der teure Teil — bleibt erhalten. */
  contain: layout;
}
.public-kompass::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at calc(45% + var(--kompass-licht-x)) calc(38% + var(--kompass-licht-y)),
      rgba(255, 232, 161, 0.3),
      rgba(245, 200, 107, 0.12) 28%,
      transparent 52%
    ),
    radial-gradient(circle, rgba(5, 9, 22, 0.7), transparent 70%);
  filter: blur(18px);
  opacity: clamp(0.78, calc(0.78 + var(--kompass-energie)), 1);
}
.public-kompass::after {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px solid rgba(255, 220, 137, 0.66);
  border-radius: 50%;
  background: radial-gradient(
    circle at calc(50% + var(--kompass-licht-x)) calc(50% + var(--kompass-licht-y)),
    rgba(255, 235, 176, 0.2),
    transparent 48%
  );
  box-shadow:
    0 0 26px rgba(245, 200, 107, 0.32),
    inset 0 0 22px rgba(245, 200, 107, 0.12);
  /* Grundleuchten: in Ruhe glimmt der Goldrand bei 0.18, statt bis zur
     ersten Zeigerbewegung unsichtbar zu sein. Bewusst eine Konstante hier
     und kein Grundwert im Skript: --kompass-energie bleibt in Ruhe 0. */
  opacity: clamp(0.18, var(--kompass-energie), 0.86);
  transform: translate3d(var(--kompass-licht-x), var(--kompass-licht-y), 0)
             scale(clamp(0.99, calc(0.99 + var(--kompass-energie)), 1.018));
  pointer-events: none;
}
/* ── Schwerelos: Praezession und Schweben ──────────────────────────
   Ein eigener Traeger zwischen .public-kompass und dem Gimbal, weil der
   Gimbal allein dem Skript gehoert: dort schreibt es Neigung und Tiefe,
   und rotate bleibt dort none. Hier taumelt das Instrument langsam um
   eine schraege Achse und driftet mit einer anderen Periode; zusammen
   wiederholt sich die Bahn erst nach Minuten.
   preserve-3d ist Pflicht, damit die Perspektive des Kompasses bis zu
   den fuenf Ebenen durchreicht. Deshalb hier nie filter, opacity,
   overflow, mask oder contain: jedes davon flacht die Tiefe ab. */
.public-kompass-schwebe {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation:
    public-kompass-praezession 13s ease-in-out infinite alternate,
    public-kompass-schweben 17s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.public-kompass.ist-sichtbar .public-kompass-schwebe { animation-play-state: running; }
.public-kompass-gimbal {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* Reihenfolge zaehlt: erst zur Kamera holen, dann kippen, dann rollen.
     So bleibt die Tiefe unabhaengig vom Kippwinkel lesbar. */
  transform:
    translateZ(var(--kompass-tiefe))
    rotateX(var(--kompass-tilt-x))
    rotateY(var(--kompass-tilt-y))
    rotateZ(var(--kompass-tilt-z))
    scale(var(--kompass-skalierung));
  will-change: transform;
}

/* Fuenf gestaffelte Ebenen statt einer flachen Zeichenflaeche.
   Die Gegenskalierung (1 - z / perspective) haelt sie im Neutralzustand
   deckungsgleich — ohne sie waere der Kern sichtbar groesser als die
   Scheibe und das Instrument fiele auseinander. Bei Neigung entsteht
   genau die Parallaxe, an der das Auge Raeumlichkeit abliest. */
.public-kompass-ebene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Auslöser für den Lagesensor. Nur auf Geräten ohne Mauszeiger sichtbar
   und nur, solange die Erlaubnis aussteht — iOS gibt den Sensor erst nach
   einer ausdrücklichen Nutzergeste frei. Bewusst ein echter Button:
   Tastatur, Fokusring und Screenreader kommen so gratis mit. */
.public-kompass-neigung {
  display: block;
  margin: 0.9rem auto 0;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border: 1px solid rgba(245, 200, 107, 0.42);
  border-radius: 999px;
  background: rgba(12, 16, 32, 0.72);
  color: rgba(255, 232, 174, 0.92);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 180ms ease, background 180ms ease;
}
.public-kompass-neigung:hover,
.public-kompass-neigung:focus-visible {
  border-color: rgba(245, 200, 107, 0.78);
  background: rgba(20, 26, 48, 0.86);
}
.public-kompass-neigung:active { transform: scale(0.985); }
/* Knopf «Bewegung anhalten» (WCAG 2.2.2). Das Skript legt ihn an, weil
   sich ohne Skript nichts bewegt. Er teilt sich die Rasterzelle mit dem
   Kompass und sitzt an dessen Ecke unten rechts, ausserhalb des Kranzes;
   hochkant steht er rechts neben dem Instrument. Zwei Balken heissen
   anhalten, das Dreieck weiter; den Zustand traegt aria-pressed, der
   Name bleibt. */
.public-kompass-pause {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  justify-self: center;
  translate: calc(var(--kompass-mass) / 2 - 22px) calc(var(--kompass-mass) / 2 - 22px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(245, 200, 107, 0.42);
  border-radius: 50%;
  background: rgba(12, 16, 32, 0.72);
  color: rgba(255, 232, 174, 0.92);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 180ms ease, background 180ms ease;
}
.public-kompass-pause:hover,
.public-kompass-pause:focus-visible {
  border-color: rgba(245, 200, 107, 0.78);
  background: rgba(20, 26, 48, 0.86);
}
.public-kompass-pause:focus-visible {
  outline: 2px solid var(--g-akzent);
  outline-offset: 3px;
}
.public-kompass-pause[aria-pressed="true"] {
  border-color: rgba(245, 200, 107, 0.9);
  background: rgba(20, 26, 48, 0.92);
}
.public-kompass-pause-zeichen {
  display: block;
  width: 12px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) left / 4px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right / 4px 100% no-repeat;
}
.public-kompass-pause[aria-pressed="true"] .public-kompass-pause-zeichen {
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  translate: 1px 0;
}
/* Angehalten steht alles im Kompass, auch die beiden Pseudo-Elemente,
   die «*» nicht erfasst. Das Skript schlaeft dabei (pauseSetzen). */
.public-kompass.ist-pausiert *,
.public-kompass.ist-pausiert .public-kompass-gimbal::before,
.public-kompass.ist-pausiert .public-kompass-kranz::before {
  animation-play-state: paused !important;
}
/* Kursanzeige: solange der Weg in die Akademie gemeint ist (Zeiger oder
   Fokus auf dem Hauptknopf), steht unter dem Instrument «Kurs: Beirat
   Akademie», und die Nadel peilt den Knopf an. Ohne Gradzahl. Sie teilt
   sich die Rasterzelle mit dem Kompass, ist aber sein Geschwister: in ihm
   erbte sie den Schattenfilter. Nur ab 881 px (darunter fuehrt der Finger,
   und der Kompass steht ueber dem Text). */
.public-kursanzeige {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  justify-self: center;
  z-index: 2;
  translate: 0 calc(var(--kompass-mass) * 0.54 + 44px);
  margin: 0;
  padding: 7px 16px;
  border: 1px solid rgba(245, 200, 107, 0.42);
  border-radius: 999px;
  background: rgba(12, 16, 32, 0.72);
  color: rgba(255, 232, 174, 0.92);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 280ms ease,
    translate 420ms var(--karte-kurve);
}
.public-kursanzeige strong { color: #f5c86b; font-weight: 650; }
/* Unter dem Kranz (er ragt 4 % ueber die Box, also 0.54) mit Luft fuer
   Praezession, Drift und das Naeherkommen des Instruments. */
.public-kompass.ist-peilt-akademie ~ .public-kursanzeige {
  opacity: 1;
  translate: 0 calc(var(--kompass-mass) * 0.54 + 34px);
}
/* Waehrend die Nadel die Akademie anpeilt, tritt die Rose zurueck und die
   Nadel vor. Am Desktop liegt der Knopf fast genau im Westen (rund -95
   Grad): ohne das laege die Nadel im Umriss des W-Arms, als leuchte die
   Rose, und deren goldener N-Arm zeigte weiter nach oben. Die Suedhaelfte
   tritt mit zurueck, so liest sich die Nadel als Pfeil zum Knopf. Nur
   opacity und scale mit Uebergang, der hellere Rand der Nordhaelfte
   wechselt ohne; kein neuer Filter. */
.public-kompass-rose,
.public-kompass-nadel-sued { transition: opacity 280ms ease; }
.public-kompass-nadel { transition: scale 420ms var(--karte-kurve); }
.public-kompass.ist-peilt-akademie .public-kompass-rose { opacity: 0.4; }
.public-kompass.ist-peilt-akademie .public-kompass-nadel-sued { opacity: 0.5; }
.public-kompass.ist-peilt-akademie .public-kompass-nadel { scale: 1.1; }
.public-kompass.ist-peilt-akademie .public-kompass-nadel-nord {
  stroke: rgba(255, 252, 236, 0.98);
  stroke-width: 1.8;
}

/* Tiefer gestaffelt als zuvor (0/9/15/22/28): der Abstand zwischen
   Scheibe und Kern ist jetzt 44px statt 28px, die Parallaxe bei gleicher
   Neigung also gut anderthalbmal so gross. Die Gegenskalierung ist kein
   Geschmackswert, sondern 1 - z / perspective — nur damit liegen die
   Ebenen im Neutralzustand deckungsgleich uebereinander. */
.public-kompass-ebene-scheibe { transform: translateZ(0); }
.public-kompass-ebene-innenring { transform: translateZ(14px) scale(0.975); }
.public-kompass-ebene-aussenring { transform: translateZ(24px) scale(0.9571); }
.public-kompass-ebene-rose { transform: translateZ(34px) scale(0.9393); }
.public-kompass-ebene-kern { transform: translateZ(44px) scale(0.9214); }
/* ── Die Fassung: ein Kranz, in den das Instrument eingelassen ist ──
   Zwei Elemente, weil sie zwei verschiedene Dinge tun. Der Container
   steht still und traegt Fugen, Kantenlicht und den Standschatten — er
   ist der Rahmen. Das Kind traegt das Metall und dreht sich; wuerde der
   Schatten mitdrehen, verriete er sofort, dass da nichts Schweres ist.

   Der Kranz liegt hinter der Scheibe (translateZ negativ). Deshalb waechst
   er bei Annaeherung des Instruments nicht mit, sondern bleibt zurueck —
   genau das trennt einen Rahmen von einem aufgemalten Ring. */
.public-kompass-kranz {
  position: absolute;
  /* Bewusst groesser als die Box: der aeusserste SVG-Kreis endet bei
     94.9%, hier beginnt das Metall. Deshalb steht auf .public-kompass
     contain: layout statt layout paint. */
  inset: -4%;
  border-radius: 50%;
  /* -18px hinter der Scheibe; die Gegenskalierung 1 - (-18)/560 haelt
     ihn trotz Perspektive auf seiner gezeichneten Groesse. */
  transform: translateZ(-18px) scale(1.0321);
  box-shadow:
    inset 0 0 0 1px rgba(255, 233, 178, 0.1),
    0 0 0 1px rgba(6, 10, 22, 0.66),
    0 26px 52px rgba(0, 0, 0, 0.46);
  pointer-events: none;
}
.public-kompass-kranz-metall {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Zwei Schichten: die Teilung (feine Striche alle 5 Grad) macht die
     Drehung ueberhaupt erst ablesbar, der Materialverlauf darunter gibt
     ihr das Gewicht. Vier Licht-Schatten-Paare — poliertes Metall unter
     diffusem Licht zeigt genau das, ein gleichmaessiger Verlauf nicht. */
  background:
    /* Feiner und schwaecher als im ersten Entwurf: die Teilung soll die
       Drehung ablesbar machen, nicht als Zahnkranz auffallen. */
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 240, 200, 0.19) 0deg 0.3deg,
      rgba(0, 0, 0, 0) 0.3deg 6deg
    ),
    /* Die Lichter sind gedaempft, die Schatten geblieben: so behaelt das
       Metall seine Modellierung, ohne die Rose zu ueberstrahlen. */
    conic-gradient(
      from 18deg,
      #543c16 0deg,
      #b8955a 24deg,
      #e0cfa4 42deg,
      #a37f42 62deg,
      #33240d 94deg,
      #8e6c30 130deg,
      #d6c39f 152deg,
      #957237 174deg,
      #2e200d 208deg,
      #a9864c 244deg,
      #e5d3a6 264deg,
      #916f35 286deg,
      #33240d 320deg,
      #88662c 346deg,
      #543c16 360deg
    );
  -webkit-mask-image: radial-gradient(
    closest-side,
    rgba(0, 0, 0, 0) 0 86%,
    rgba(0, 0, 0, 0.55) 89%,
    #000 91.5%,
    #000 98.2%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    closest-side,
    rgba(0, 0, 0, 0) 0 86%,
    rgba(0, 0, 0, 0.55) 89%,
    #000 91.5%,
    #000 98.2%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 0.7;
  /* Ueber rotate statt transform: transform bleibt fuer die Maske und
     kuenftige Ebenenarbeit frei, und die beiden geraten sich nicht in
     die Quere. Angehalten, solange der Kranz nicht im Bild ist — die
     Richtung steuert das Skript ueber playbackRate, nicht ueber einen
     Neustart der Animation. */
  animation: public-kompass-kranzlauf 78s linear infinite;
  animation-play-state: paused;
  will-change: rotate;
}
.public-kompass.ist-sichtbar .public-kompass-kranz-metall {
  animation-play-state: running;
}
/* Das Kantenlicht am Kranz folgt der Neigung: die Seite, die zur
   Lichtquelle kippt, bekommt einen Saum. Ohne das bliebe das Metall
   flach, egal wie stark das Instrument sich dreht. */
.public-kompass-kranz::after {
  content: "";
  position: absolute;
  inset: 1.6%;
  border-radius: 50%;
  background: radial-gradient(
    circle at calc(50% + var(--kompass-licht-x) * 1.4) calc(38% + var(--kompass-licht-y) * 1.4),
    rgba(255, 244, 214, 0.4),
    rgba(255, 224, 156, 0.08) 26%,
    rgba(0, 0, 0, 0) 46%
  );
  -webkit-mask-image: radial-gradient(
    closest-side, rgba(0, 0, 0, 0) 0 88%, #000 90%, #000 99%, rgba(0, 0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    closest-side, rgba(0, 0, 0, 0) 0 88%, #000 90%, #000 99%, rgba(0, 0, 0, 0) 100%
  );
  mix-blend-mode: screen;
  opacity: clamp(0.26, calc(0.26 + var(--kompass-energie) * 0.5), 0.62);
  pointer-events: none;
}
/* Glanzlauf: ein Lichtreflex wandert ueber das Metall und taucht etwa
   alle zehn Sekunden an einer anderen Stelle auf (Drehung 6,5 s, Puls
   10,4 s; das Muster wiederholt sich erst nach 52 s). Bewusst auf dem
   stehenden Container und nicht auf dem Metall: dort liest das Skript
   getAnimations()[0], und das Metall behaelt genau eine Animation.
   z-index 1 legt den Reflex ueber Metall und Kantenlicht. */
.public-kompass-kranz::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 244, 214, 0) 0deg 340deg,
    rgba(255, 244, 214, 0.55) 351deg,
    rgba(255, 244, 214, 0) 360deg
  );
  -webkit-mask-image: radial-gradient(
    closest-side,
    rgba(0, 0, 0, 0) 0 86%,
    rgba(0, 0, 0, 0.55) 89%,
    #000 91.5%,
    #000 98.2%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    closest-side,
    rgba(0, 0, 0, 0) 0 86%,
    rgba(0, 0, 0, 0.55) 89%,
    #000 91.5%,
    #000 98.2%,
    rgba(0, 0, 0, 0) 100%
  );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation:
    public-kompass-glanzlauf 6.5s linear infinite,
    public-kompass-glanzpuls 10.4s ease-in-out infinite;
  animation-play-state: paused;
}
.public-kompass.ist-sichtbar .public-kompass-kranz::before { animation-play-state: running; }

/* Der Glanzpunkt im Kern wandert mit der Neigung — zwei Prozent der
   Kompassbreite genuegen, damit das Auge die Lichtquelle verortet. */
.public-kompass-kernlicht {
  transform: translate(
    calc(var(--kompass-licht-x) * 0.16),
    calc(var(--kompass-licht-y) * 0.16)
  );
  transform-box: fill-box;
  transform-origin: center;
}
.public-kompass-gimbal::after {
  content: "";
  position: absolute;
  inset: 7%;
  z-index: 2;
  border-radius: 50%;
  background: linear-gradient(
    112deg,
    transparent 20%,
    rgba(255, 247, 211, 0.04) 34%,
    rgba(255, 222, 136, 0.34) 46%,
    rgba(245, 200, 107, 0.08) 52%,
    transparent 66%
  );
  mix-blend-mode: screen;
  opacity: min(var(--kompass-energie), 0.62);
  transform: translate3d(var(--kompass-licht-x), var(--kompass-licht-y), 18px) rotate(-8deg);
  pointer-events: none;
}
/* Radar-Abtaster: ein goldener Keil streicht alle acht Sekunden unter
   den Ringen ueber die Scheibe. Die Deckkraft bleibt konstant, es blinkt
   nichts. Die Spitze liegt bei 0.35: mit 0.2 ging der Keil auf der
   dunklen Scheibe unter (Sichtpruefung 23.09.2026). 6 px Tiefe legen ihn
   zwischen Scheibe (0) und Innenring (14); die Gegenskalierung ist wie
   bei den Ebenen 1 - 6/560. */
.public-kompass-gimbal::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(245, 200, 107, 0) 0deg 312deg,
    rgba(245, 200, 107, 0.09) 330deg,
    rgba(255, 226, 150, 0.35) 358deg,
    rgba(245, 200, 107, 0) 360deg
  );
  -webkit-mask-image: radial-gradient(
    closest-side, transparent 0 22%, #000 34%, #000 90%, transparent 100%
  );
  mask-image: radial-gradient(
    closest-side, transparent 0 22%, #000 34%, #000 90%, transparent 100%
  );
  transform: translateZ(6px) scale(0.9893);
  pointer-events: none;
  animation: public-kompass-abtaster 8s linear infinite;
  animation-play-state: paused;
}
.public-kompass.ist-sichtbar .public-kompass-gimbal::before { animation-play-state: running; }
.public-kompass svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.public-kompass-scheibe {
  fill: url(#kompass-scheibe);
  stroke: rgba(245, 200, 107, 0.18);
  stroke-width: 1;
}
.public-kompass-tiefenringe { opacity: 0.82; }
.public-kompass-ring-aussen,
.public-kompass-ring-innen {
  transform-box: view-box;
  transform-origin: center;
  will-change: transform;
}
.public-kompass-ring-aussen {
  transform: rotate(var(--kompass-ring-aussen)) scale(1.012);
}
.public-kompass-ring-innen {
  transform: rotate(var(--kompass-ring-innen)) scale(0.984);
}
.public-kompass-ring-aussen > circle:first-child {
  transform-box: fill-box;
  transform-origin: center;
  stroke-dasharray: 280 96 46 1463;
  stroke-linecap: round;
  opacity: 0.62;
  filter: drop-shadow(0 0 11px rgba(245, 200, 107, 0.34));
}
.public-kompass-ring-innen > circle { transform-box: fill-box; transform-origin: center; }
/* Tickring: 72 Teilstriche, alle 5 Grad. 72 x 22.6893 = 2 pi 260, die
   Teilung schliesst also nahtlos. Erst mit Strichen wird der Gegenlauf
   sichtbar; als glatter Vollkreis drehte er unsichtbar. 2.4 Einheiten
   breit, weil ein Strich bei 440 px Kompassbreite sonst unter einem
   Pixel laege (0.8 px bei 1.2) und beim Drehen flimmerte; auf dem
   Telefon (136 bis 240 px) waere er noch schmaler. */
.public-kompass-ring-innen > circle:nth-child(1) {
  opacity: 0.6;
  stroke-width: 5;
  stroke-dasharray: 2.4 20.2893;
}
/* Suchbogen: kreist im Uhrzeigersinn gegen den Tickring, wie ein
   Suchstrahl. Angehalten, bis der Kompass im Bild ist. */
.public-kompass-ring-innen > circle:nth-child(2) {
  stroke-dasharray: 190 74 34 1109;
  stroke-linecap: round;
  stroke-width: 2.4;
  opacity: 0.58;
  filter: drop-shadow(0 0 7px rgba(245, 200, 107, 0.3));
  animation: public-kompass-suchbogen 30s linear infinite;
  animation-play-state: paused;
}
.public-kompass.ist-sichtbar .public-kompass-ring-innen > circle:nth-child(2) {
  animation-play-state: running;
}
.public-kompass-ring-innen > circle:nth-child(3) { opacity: 0.66; }
.public-kompass-ring-innen > circle:nth-child(4) { opacity: 0.44; }
.public-kompass-skala {
  opacity: 0.78;
  /* Die Fassung dreht sich langsam und dauerhaft — so liest sich der
     Aussenring als beweglicher Kranz statt als Dekor. Bewusst ueber die
     eigenstaendige rotate-Eigenschaft statt ueber transform: dort liegt
     bereits die Aktivierungsanimation, beides zusammen ginge nicht. */
  transform-box: fill-box;
  transform-origin: center;
  animation: public-kompass-fassung 96s linear infinite;
  /* Angehalten, solange der Kompass nicht im Bild ist. Der Bestand
     verbietet Dauerlaeufer aus gutem Grund — nichts soll rechnen, was
     niemand sieht. Die Drehung erfuellt das, statt die Regel zu
     umgehen: das Skript setzt ist-sichtbar ueber denselben
     IntersectionObserver, der auch den Frame steuert. */
  animation-play-state: paused;
}
.public-kompass.ist-sichtbar .public-kompass-skala { animation-play-state: running; }
/* Der Tickring laeuft gegen die Skala: zwei Teilungen gleiten
   aneinander vorbei, das macht aus Kreisen ein Instrument. 48 s statt
   der frueheren 168 s, weil man die Drehung jetzt auch sieht.
   Bewusst der AEUSSERSTE Innenkreis: nth-child(3) und (4) tragen die
   CTA- und Zentrumimpulse und muessen danach animationsfrei
   zurueckfallen koennen. */
.public-kompass-ring-innen > circle:nth-child(1) {
  transform-box: fill-box;
  transform-origin: center;
  animation: public-kompass-fassung-gegen 48s linear infinite;
  animation-play-state: paused;
}
.public-kompass.ist-sichtbar .public-kompass-ring-innen > circle:nth-child(1) {
  animation-play-state: running;
}
.public-kompass-nadel-eintritt {
  transform-box: view-box;
  transform-origin: center;
}
/* Aussenbogen: nach der einmaligen Aktivierung laeuft er gegen den
   Uhrzeigersinn neben der Skala her. Die Leerlaufdrehung steht HINTER der
   Aktivierung in derselben Liste, und die Sichtbarkeit schaltet nur die
   play-state-Liste. So bleibt die Aktivierung auf Index 0, ihr Zustand
   bleibt running, und sie startet nie neu. Ein eigener Kurzschreiber in
   der ist-sichtbar-Regel wuerde sie verschlucken oder neu anstossen. */
.public-kompass.ist-aktiviert .public-kompass-ring-aussen > circle:first-child {
  animation:
    public-kompass-ring-aktivierung 1650ms var(--karte-kurve) both,
    public-kompass-fassung-gegen 44s linear 1650ms infinite;
  animation-play-state: running, paused;
}
.public-kompass.ist-aktiviert.ist-sichtbar .public-kompass-ring-aussen > circle:first-child {
  animation-play-state: running, running;
}
.public-kompass.ist-aktiviert .public-kompass-skala {
  /* Beide Animationen nebeneinander: die Aktivierung laeuft einmal auf
     transform, die Fassung dauerhaft auf rotate. Ohne die zweite Zeile
     wuerde diese spezifischere Regel die Dauerdrehung schlicht
     ueberschreiben. */
  animation:
    public-kompass-skala-aktivierung 1450ms var(--karte-kurve) 100ms both,
    public-kompass-fassung 96s linear infinite;
  animation-play-state: paused, paused;
}
.public-kompass.ist-aktiviert.ist-sichtbar .public-kompass-skala {
  animation-play-state: running, running;
}
/* Die Nadel sucht Kurs: zwei gedaempfte Suchschwuenge je elf Sekunden,
   dazwischen Ruhe. Dieselbe Listenregel wie beim Aussenbogen. Die
   Aktivierung liegt auf transform, die Suche auf rotate; beide drehen um
   dieselbe Mitte und addieren sich zur Nadel des Skripts. */
.public-kompass.ist-aktiviert .public-kompass-nadel-eintritt {
  animation:
    public-kompass-nadel-aktivierung 1520ms var(--karte-kurve) 160ms both,
    public-kompass-nadel-suche 11s ease-in-out 1.9s infinite;
  animation-play-state: running, paused;
}
.public-kompass.ist-aktiviert.ist-sichtbar .public-kompass-nadel-eintritt {
  animation-play-state: running, running;
}
.public-kompass.ist-aktiviert .public-kompass-kern {
  animation: public-kompass-kern-aktivierung 1180ms var(--karte-kurve) 360ms both;
}
.public-kompass.ist-cta-gekoppelt .public-kompass-ring-innen > circle:nth-child(3) {
  animation: public-kompass-cta-impuls 700ms var(--karte-kurve) 1;
}
.public-kompass.ist-cta-gekoppelt .public-kompass-kern {
  filter: url(#kompass-kern-glanz) drop-shadow(0 0 15px rgba(245, 200, 107, 0.66));
}
.public-kompass.ist-zentrum .public-kompass-kern {
  filter: url(#kompass-kern-glanz) drop-shadow(0 0 10px rgba(245, 200, 107, 0.48));
}
.public-kompass.ist-zentrum .public-kompass-ring-innen > circle:nth-child(4) {
  animation: public-kompass-zentrum-impuls 700ms var(--karte-kurve) 1;
}
.public-kompass-hauptmarken {
  stroke-width: 3;
  opacity: 0.88;
  filter: drop-shadow(0 0 5px rgba(245, 200, 107, 0.2));
}
.public-kompass-richtung {
  fill: rgba(232, 236, 248, 0.58);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.12em;
}
.public-kompass-richtung .public-kompass-nord {
  fill: #f5c86b;
  font-size: 23px;
  filter: drop-shadow(0 0 7px rgba(245, 200, 107, 0.48));
}
.public-kompass-rose {
  stroke: rgba(255, 241, 189, 0.48);
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter:
    url(#kompass-tiefe)
    drop-shadow(var(--kompass-licht-x) var(--kompass-licht-y) 7px rgba(245, 200, 107, 0.24));
}
.public-kompass-rose-sekundaer {
  fill: color-mix(in srgb, var(--g-akzent) 52%, #332109);
  opacity: 0.66;
}
.public-kompass-nadel {
  transform-box: view-box;
  transform-origin: center;
  transform: rotate(var(--kompass-nadel-winkel));
  will-change: transform;
  filter:
    drop-shadow(0 8px 9px rgba(0, 0, 0, 0.68))
    drop-shadow(var(--kompass-licht-x) var(--kompass-licht-y) 5px rgba(255, 220, 132, 0.34));
}
.public-kompass-nadel-nord {
  fill: url(#kompass-gold);
  stroke: rgba(255, 249, 220, 0.72);
  stroke-width: 1;
}
.public-kompass-nadel-sued {
  fill: url(#kompass-nachtgold);
  stroke: rgba(181, 122, 37, 0.54);
  stroke-width: 1;
}
.public-kompass-kern > circle:first-child {
  fill: #080d1c;
  stroke: url(#kompass-gold);
  stroke-width: 4;
}
.public-kompass-kernring {
  fill: url(#kompass-kernlicht);
  stroke: rgba(255, 249, 220, 0.7);
  stroke-width: 1.4;
}
.public-kompass-kernlicht { fill: rgba(255, 255, 255, 0.7); }
@keyframes public-kompass-fassung {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes public-kompass-fassung-gegen {
  from { rotate: 0deg; }
  to { rotate: -360deg; }
}
/* Der Kranz laeuft immer vorwaerts; die Richtung macht das Skript ueber
   Animation.playbackRate. Ein Vorzeichenwechsel dort haelt die aktuelle
   Zeit und laeuft von genau dieser Stelle zurueck — ein zweiter Keyframe
   fuer die Gegenrichtung wuerde dagegen springen. */
@keyframes public-kompass-kranzlauf {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes public-kompass-anflug {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes public-kompass-ring-aktivierung {
  0% { opacity: 0; stroke-dasharray: 1 1900; stroke-dashoffset: 520; transform: rotate(-16deg) scale(0.88); }
  58% { opacity: 0.86; }
  100% { opacity: 0.62; stroke-dasharray: 280 96 46 1463; stroke-dashoffset: 0; transform: none; }
}
@keyframes public-kompass-skala-aktivierung {
  0% { opacity: 0; stroke-dashoffset: 180; }
  62% { opacity: 0.98; }
  100% { opacity: 0.78; }
}
@keyframes public-kompass-nadel-aktivierung {
  0% { opacity: 0; transform: rotate(-16deg) scale(0.94); }
  48% { opacity: 1; transform: rotate(7deg) scale(1.015); }
  74% { transform: rotate(-3deg); }
  100% { opacity: 1; transform: rotate(0); }
}
@keyframes public-kompass-kern-aktivierung {
  0% { opacity: 0.32; transform: scale(0.72); }
  48% { opacity: 1; transform: scale(1.18); }
  72% { opacity: 0.82; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes public-kompass-cta-impuls {
  0%, 100% { opacity: 0.66; transform: scale(1); }
  48% { opacity: 1; transform: scale(1.045); }
}
@keyframes public-kompass-zentrum-impuls {
  0%, 100% { opacity: 0.34; }
  48% { opacity: 0.84; }
}
@keyframes public-kompass-space-impuls {
  0%, 100% { opacity: 0; transform: scale(1); }
  44% { opacity: 0.38; transform: scale(1.055); }
}
/* Ruhebewegung (Kompass 2.0, Stufe 1). Alle Schluesselbilder schreiben
   nur rotate, translate oder opacity, nie transform: transform gehoert
   den Aktivierungen, den Ebenen und dem Skript. */
@keyframes public-kompass-suchbogen {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
/* Nadel-Suche bis 8 Grad und Praezession bis 4 Grad: mit 4.5 und 2 Grad
   waren alt und neu im Standbild kaum zu unterscheiden (Gutachten
   23.09.2026). Die Verhaeltnisse der Schwuenge bleiben dieselben. */
@keyframes public-kompass-nadel-suche {
  0%, 30%, 52%, 78%, 100% { rotate: 0deg; }
  9% { rotate: 8deg; }
  17% { rotate: -3.9deg; }
  24% { rotate: 1.8deg; }
  61% { rotate: -6.4deg; }
  69% { rotate: 3.2deg; }
}
@keyframes public-kompass-praezession {
  from { rotate: 0.35 1 0 -4deg; }
  to { rotate: 0.35 1 0 4deg; }
}
@keyframes public-kompass-schweben {
  from { translate: -2px 2px; }
  to { translate: 3px -3px; }
}
@keyframes public-kompass-schweben-klein {
  from { translate: -1.5px 1.5px; }
  to { translate: 2px -2px; }
}
@keyframes public-kompass-abtaster {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes public-kompass-glanzlauf {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes public-kompass-glanzpuls {
  0%, 58%, 100% { opacity: 0; }
  72% { opacity: 0.85; }
  86% { opacity: 0; }
}

/* Motion-Stufe calm: Aktivierungen und die Ruhebewegung aus Stufe 1
   stehen. Die neuen Dauerlaeufer haengen nicht an ist-aktiviert, deshalb
   eigene Selektoren; Pseudo-Elemente duerfen nicht in :is() stehen. */
html[data-motion="calm"] .public-kompass.ist-aktiviert :is(
  .public-kompass-ring-aussen > circle:first-child,
  .public-kompass-skala,
  .public-kompass-nadel-eintritt,
  .public-kompass-kern
),
html[data-motion="calm"] .public-kompass :is(
  .public-kompass-schwebe,
  .public-kompass-ring-innen > circle:nth-child(2)
),
html[data-motion="calm"] .public-kompass-gimbal::before,
html[data-motion="calm"] .public-kompass-kranz::before {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .public-hero::before,
  .public-hero::after,
  .public-hero-sterne-nah,
  .public-hero-sterne-nah::after,
  .public-kompass,
  .public-kompass-gimbal::after,
  .public-kompass * {
    animation: none !important;
    transform: none !important;
  }
  .public-kompass::after { opacity: 0 !important; }
  /* rotate ist seit CSS Transforms 2 eine eigenstaendige Eigenschaft —
     das transform: none oben laesst sie unberuehrt. Der Kranz stuende
     sonst auf dem Winkel, den die Animation zuletzt geschrieben hat. */
  .public-kompass-kranz-metall { rotate: none !important; }
  .public-kompass-kranz::after { opacity: 0.26 !important; }
  .public-kompass-neigung { display: none !important; }
  /* Die Ruhebewegung aus Stufe 1 schreibt rotate und translate, die das
     transform: none oben nicht erfasst. Pseudo-Elemente fallen nicht
     unter «.public-kompass *» und brauchen eine eigene Regel, sonst
     zaehlen sie als laufend, auch unsichtbar. */
  .public-kompass-schwebe,
  .public-kompass-gimbal,
  .public-kompass-nadel-eintritt,
  .public-kompass-ring-aussen > circle,
  .public-kompass-ring-innen > circle,
  .public-kompass-gimbal::before,
  .public-kompass-kranz::before {
    rotate: none !important;
    translate: none !important;
  }
  .public-kompass-gimbal::before,
  .public-kompass-kranz::before {
    animation: none !important;
    opacity: 0 !important;
  }
  .public-kompass-pause { display: none !important; }
  /* Die Kursanzeige erscheint ohne Uebergang, und die Hyperraum-Streifen
     bleiben aus: das Skript schreibt hier keinen Schub. */
  .public-kursanzeige { transition: none !important; }
  .public-hero-sterne-nah::after { opacity: 0 !important; }
  /* Die Rose tritt hier nie zurueck, die Nadel waechst nicht. */
  .public-kompass-rose,
  .public-kompass-nadel,
  .public-kompass-nadel-sued { transition: none !important; }
  .public-kompass-nadel { scale: none !important; }
}

.featured-blog {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 4vw, 42px);
  margin: clamp(48px, 8vw, 88px) 0;
  padding: clamp(26px, 5vw, 54px);
  border: 1px solid color-mix(in srgb, var(--g-akzent) 48%, var(--g-linie));
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(18, 26, 48, 0.86), rgba(7, 11, 24, 0.58));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.26);
}
/* Das Zeichen am Contentblock ist der Falke, nicht mehr der Stern. Die
   Groesse steht weiterhin als font-size da: das SVG ist 1em breit und
   erbt sie, so bleibt eine Schriftgroessenaenderung die einzige Stelle,
   an der die Skalierung geregelt wird. */
.featured-blog-falke {
  color: var(--g-akzent);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  /* text-shadow greift auf einem SVG nicht — drop-shadow folgt der Form. */
  filter: drop-shadow(0 0 18px rgba(245, 200, 107, 0.32));
}
.featured-blog h2 {
  max-width: 800px;
  margin: 5px 0 12px;
  font-size: clamp(1.65rem, 3.4vw, 2.8rem);
  text-wrap: balance;
}
.featured-blog h2 a {
  color: var(--g-text);
  text-decoration: none;
}
.featured-blog h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.featured-blog:has(h2 a:hover),
.featured-blog:has(h2 a:focus-visible) {
  border-color: var(--g-akzent);
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.32), 0 0 28px rgba(245, 200, 107, 0.12);
}
.featured-blog h2 a:focus-visible { outline: none; }
.featured-blog:has(h2 a:focus-visible) { outline: 2px solid var(--g-akzent); outline-offset: 4px; }
.featured-blog .beirat-archive-kicker {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 12px;
  padding: 5px 9px;
  border: 1px solid rgba(245, 200, 107, 0.42);
  border-radius: 999px;
  background: rgba(245, 200, 107, 0.06);
}
.featured-blog-kategorie,
.featured-blog .meta,
.featured-blog-teaser { color: var(--g-text-dim); }
.featured-blog-kategorie { margin: 0; font-size: 0.86rem; }
.featured-blog-teaser { max-width: 720px; margin: 0 0 12px; }
.featured-blog-link { color: var(--g-akzent); font-weight: 650; }

.public-blogauswahl { margin: clamp(48px, 7vw, 76px) 0; }
.public-sektionskopf {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.public-sektionskopf h2 {
  margin: 5px 0 0;
  color: var(--g-text);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
}
.public-archivlink {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--g-akzent);
  text-decoration: none;
  white-space: nowrap;
}
.public-kartenfeld {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.public-blogkarte {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  border-color: color-mix(in srgb, var(--g-linie) 72%, transparent);
  background:
    linear-gradient(150deg, rgba(18, 26, 48, 0.56), rgba(7, 11, 24, 0.16));
}
.public-kartenfalke {
  align-self: end;
  color: var(--g-akzent);
  font-size: 1.45rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(245, 200, 107, 0.26));
}
/* Ein Zeichen, drei Groessen: Breite aus der Schriftgroesse, Hoehe aus
   dem Seitenverhaeltnis der viewBox. Nichts wird gestaucht, nichts
   gerastert — ein SVG skaliert stufenlos. */
.marke-falke {
  display: block;
  width: 1em;
  height: auto;
}
.public-kartenteaser {
  color: var(--g-text-dim);
  margin: 0 0 16px;
}
.public-blogkarte .meta { margin-top: auto; }
.blog-hero {
  max-width: 760px;
  padding: clamp(36px, 7vw, 76px) 0 28px;
}
.blog-hero h1 { margin: 6px 0 12px; }
.blog-hero p:last-child { color: var(--g-text-dim); }

.briefing-box {
  margin-top: clamp(54px, 9vw, 94px);
  padding: clamp(28px, 5vw, 52px);
  border-radius: 20px;
  border-color: color-mix(in srgb, var(--g-nebel) 42%, var(--g-linie));
  background:
    linear-gradient(145deg, rgba(18, 26, 48, 0.82), rgba(13, 19, 38, 0.48));
}
.briefing-box h2 { font-size: clamp(1.55rem, 3vw, 2.45rem); }
.briefing-form input[type="email"] { min-height: 48px; }
.briefing-form .knopf { min-height: 48px; }

.bodenstation {
  padding: clamp(54px, 8vw, 92px) 20px 28px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(7, 11, 24, 0.44), rgba(7, 11, 24, 0.96));
  border-top-color: color-mix(in srgb, var(--g-akzent) 22%, var(--g-linie));
}
.fuss-inhalt { width: min(1080px, 100%); margin: 0 auto; }
.fuss-marke {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--g-linie);
}
.fuss-marke-kompass { display: grid; place-items: center; width: 52px; height: 52px; }
.fuss-marke-logo { width: 44px; height: 44px; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--g-akzent) 50%, transparent)); }
.fuss-marke-logo--hell { display: none; }
html[data-bc-theme="light"] .fuss-marke-logo--dunkel { display: none; }
html[data-bc-theme="light"] .fuss-marke-logo--hell { display: block; }
.fuss-marke strong { color: var(--g-text); font-size: 1.4rem; letter-spacing: 0.06em; }
.fuss-marke .fuss-mission {
  max-width: 690px;
  margin: 8px 0 0;
  color: var(--g-text-dim);
  font-weight: 400;
}
.fuss-spalten {
  max-width: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 5vw, 62px);
  margin-bottom: 34px;
}
.fuss-spalten a {
  min-height: 38px;
  display: flex;
  align-items: center;
}
.briefing-kompakt {
  max-width: none;
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid var(--g-linie);
  border-bottom: 1px solid var(--g-linie);
}
.briefing-kompakt p { margin: 0; }
.fuss-recht { margin: 26px 0 0; font-size: 0.86rem; }

@media (max-width: 880px) {
  .missionsleiste .missionsnav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 4px 12px;
    padding-bottom: 8px;
  }
  .missionslinks {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .missionslinks a { padding-inline: 9px; }
  .theme-toggle { grid-column: 2; grid-row: 1; }
  /* Hochkant gross im Textfluss ueber dem Kicker (Variante M-B, Charles
     22.09.2026). Vorher stand der Kompass als Schatten in der Ecke unter
     dem Text und am Telefon unter dem ersten Bildschirm. Die Rasterzeile
     stellt ihn nur optisch nach vorn: im Dokument, fuer Vorleser und
     Tastatur, kommen Headline und Knoepfe weiter zuerst. */
  .public-hero {
    --kompass-mass: clamp(180px, 30vw, 240px);
    min-height: 610px;
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding-top: 28px;
    padding-bottom: 64px;
  }
  /* Der Kranz ragt 4 % ueber die Box hinaus; so viel Luft bekommt er nach
     unten, damit er dem Kicker auch geneigt nicht auf die Zeile rueckt. */
  .public-kompass {
    grid-row: 1;
    grid-column: 1;
    margin-bottom: calc(var(--kompass-mass) * 0.04);
  }
  .public-hero-copy { grid-row: 2; max-width: 680px; }
  /* Rechts neben dem Instrument, auf Hoehe der Mitte (0.54 ist der
     Kranzradius, der Kranz ragt 4 % ueber die Box). */
  .public-kompass-pause {
    grid-column: 1;
    translate: calc(var(--kompass-mass) * 0.54 + 40px) 0;
  }
  /* Kursanzeige und Hyperraum-Streifen gibt es erst ab 881 px. */
  .public-kursanzeige,
  .public-hero-sterne-nah::after { display: none; }
  .public-kartenfeld { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-spalten a { min-height: 44px; }
}

@media (max-width: 560px) {
  .buehne { padding-inline: 18px; }
  .marke-wort small { display: none; }
  .missionslinks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 4px;
    overflow: visible;
  }
  .missionslinks a {
    justify-content: center;
    min-width: 0;
    padding-inline: 4px;
    font-size: 0.88rem;
  }
  /* Der Kompass rund 190 bis 210 px, und der Hauptknopf bleibt im ersten
     Bildschirm: dafuer ruecken Hero-Kopf, Headline und Knoepfe enger
     zusammen. */
  .public-hero {
    --kompass-mass: clamp(180px, 50vw, 210px);
    min-height: 650px;
    margin-inline: -18px;
    padding: 20px 18px 48px;
  }
  .public-hero h1 {
    margin: 6px 0 12px;
    font-size: clamp(2.35rem, 10.4vw, 2.58rem);
    line-height: 1.08;
  }
  .public-hero-aktionen { display: grid; margin: 20px 0 16px; }
  .public-hero-aktionen .knopf { width: 100%; }
  /* Der Schatten wird weicher gezeichnet (24 statt 40 px), weil der
     Filter bei jeder Bewegung im Inneren neu gerechnet wird. */
  .public-kompass {
    filter: drop-shadow(
      calc(var(--kompass-licht-x) * -0.9) calc(20px - var(--kompass-licht-y) * 0.7)
      24px rgba(0, 0, 0, 0.34)
    );
  }
  /* Die Drift bleibt auf dem Telefon bei ±2 px: der Kranz steht dort
     knapp unter dem Kopf der Seite. Nur der Name wechselt, der Zustand
     bleibt. */
  .public-kompass-schwebe {
    animation-name: public-kompass-praezession, public-kompass-schweben-klein;
  }
  .featured-blog { grid-template-columns: 1fr; padding: 26px 22px; }
  .featured-blog-falke { font-size: 2rem; }
  .public-sektionskopf { align-items: start; flex-direction: column; gap: 8px; }
  .public-kartenfeld { grid-template-columns: 1fr; }
  .public-blogkarte { min-height: 220px; }
  .briefing-box { padding: 28px 20px; }
  .briefing-form { display: grid; }
  .briefing-form input[type="email"], .briefing-form .knopf { width: 100%; min-width: 0; }
  .nutzen-anker { align-items: stretch; flex-direction: column; }
  .fuss-spalten { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
}

/* Schmale Telefone (360 x 780): fuer 180 px Kompass und den Hauptknopf im
   ersten Bildschirm reicht die Hoehe dort nicht. */
@media (max-width: 374px) {
  .public-hero { --kompass-mass: 136px; }
}

/* .academy-start: Rest der alten Einsteiger-Seite, noch von templates/content/phase_c_preview.html
   genutzt. Alle Akademie-Innenseiten stylen sich ueber static/akademie/innen.css. */
.academy-start {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin-top: 24px; padding: 12px 22px;
  border-radius: 999px; background: var(--g-akzent); color: #11172a;
  font-weight: 800; text-decoration: none;
}
.academy-start:hover { color: #11172a; background: color-mix(in srgb, var(--g-akzent) 86%, white); }
.academy-start:focus-visible { outline: 3px solid var(--g-nebel); outline-offset: 4px; }

}

/* Kanonische Content-QA-Tabellen: Seitenbreite bleibt stabil, Tabelle scrollt intern. */
.beirat-table-scroll {
  max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;
  margin: 20px 0; border: 1px solid var(--g-linie); border-radius: var(--karte-radius);
}
.beirat-table-scroll:focus-visible { outline: 3px solid var(--g-nebel); outline-offset: 3px; }
.beirat-table-scroll table { width: 100%; min-width: 620px; border-collapse: collapse; }
.beirat-table-scroll th,
.beirat-table-scroll td { padding: 12px 14px; border-bottom: 1px solid var(--g-linie); text-align: left; vertical-align: top; }
.beirat-table-scroll thead { background: var(--g-hauch); }
.beirat-quellen { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--g-linie); }
.beirat-quellen li + li { margin-top: 8px; }

.phase-c-preview { max-width: 1000px; margin: 0 auto; }
.phase-c-kopf { padding: clamp(34px, 7vw, 76px) 0 34px; }
.phase-c-kopf h1 { max-width: 860px; font-size: clamp(2.2rem, 7vw, 4.8rem); line-height: 1; }
.phase-c-kopf > p { max-width: 760px; color: var(--g-text-dim); }
.phase-c-status { padding: 14px 18px; border-left: 3px solid var(--g-erfolg); background: var(--g-hauch-leicht); }
.phase-c-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 42px; }
.phase-c-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--g-linie); border-radius: 999px; text-decoration: none; }
.phase-c-bereich { padding: 44px 0; border-top: 1px solid var(--g-linie); }
.phase-c-bereich > h2 { margin-top: 5px; font-size: clamp(1.8rem, 5vw, 3rem); }
.phase-c-qa-beispiel { max-width: 780px; margin: 24px 0 34px; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--g-linie); border-radius: var(--karte-radius); background: var(--g-hauch-leicht); }
.phase-c-qa-beispiel .beirat-box--essenz { margin: 20px 0; padding: 18px; border-left: 3px solid var(--g-akzent); background: var(--g-hauch); }
.phase-c-kennzahlen { display: grid; grid-template-columns: 1fr; gap: 10px; }
.phase-c-kennzahlen div { padding: 16px; border: 1px solid var(--g-linie); border-radius: var(--karte-radius); }
.phase-c-kennzahlen dt { color: var(--g-text-dim); }
.phase-c-kennzahlen dd { margin: 3px 0 0; font-size: 1.45rem; font-weight: 800; }
.phase-c-academy { padding-bottom: 64px; }
.phase-c-faktenkarten { display: grid; grid-template-columns: 1fr; gap: 14px; }
.phase-c-faktenkarte { padding: 22px; border: 1px solid var(--g-linie); border-radius: var(--karte-radius); background: var(--g-hauch-leicht); }
.phase-c-faktenkarte h3 { margin: 5px 0 16px; }
.phase-c-faktenkarte dl div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--g-linie); }
.phase-c-faktenkarte dd { margin: 0; font-weight: 700; }
@media (min-width: 700px) {
  .phase-c-kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phase-c-faktenkarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .public-kompass,
  .marke-kompass,
  .featured-blog,
  .public-blogkarte,
  .academy-start {
    animation: none;
    transition: none;
  }
  .public-kompass-gimbal,
  .public-kompass-nadel {
    transform: none !important;
    transition: none !important;
  }
  .marke:hover .marke-kompass,
  .marke:focus-visible .marke-kompass { transform: none; }
}

/* ============================================================
   AUF DER BRUECKE — die helle Buehne
   ============================================================
   galaxie.css laedt als letzte, deshalb genuegt hier gleiche Spezifitaet
   wie in cinema.css; `html[…] body.galaxie` liegt eine Stufe darueber
   und braucht kein !important. */

html[data-bc-theme="light"] body.galaxie {
  background-color: var(--g-himmel);
  /* Paneelfugen: zwei sehr flache Linienraster, die dem Grund Material
     geben, ohne Muster zu werden. Bei 96 px Abstand liest man sie als
     Plattenstoss, nicht als Tapete. */
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent 0 159px,
      var(--bruecke-fuge) 159px 160px
    ),
    radial-gradient(140% 80% at 50% -20%, #ffffff 0%, rgba(255, 255, 255, 0) 62%);
  background-attachment: fixed;
  color: var(--g-text);
}

/* Draussen sieht man nur durchs Fenster: das ganzflaechige Sternencanvas
   hat im Innenraum nichts verloren. */
html[data-bc-theme="light"] .bc-universe,
html[data-bc-theme="light"] .bc-flare,
html[data-bc-theme="light"] .bc-deep-galaxy,
html[data-bc-theme="light"] .public-hero-sterne-nah {
  display: none;
}
/* Die Nebelschicht liegt als ::before ueber der gesamten Seitenhoehe und
   faerbt im Hellen alles rosa-violett. Drinnen gibt es keinen Nebel. */
html[data-bc-theme="light"] body.galaxie::before,
html[data-bc-theme="light"] .public-hero::after,
html[data-bc-theme="light"] .public-hero::before {
  content: none;
}

/* Die Lese-Insel aus cinema.css traegt im Dunkeln eine eigene Flaeche.
   Im Hellen ist die Buehne schon die Flaeche — eine zweite darauf
   erzeugte nur einen Kasten im Kasten. */
html[data-bc-theme="light"] body.galaxie .site-main {
  background-color: transparent;
}

/* ── Das Sichtfenster ─────────────────────────────────────────
   Der Kompass ist das Instrument, durch das man navigiert — und
   dahinter liegt die Scheibe. Statt das All auszuschalten, wird es
   kreisfoermig auf den Kompass begrenzt: die Bewegung bleibt, aber
   sie erscheint dort, wo ein Fenster sitzt. */
html[data-bc-theme="light"] .public-hero.bc-space {
  background-image: none;
  background-color: transparent;
  color: var(--g-text);
}
html[data-bc-theme="light"] .public-hero .bc-stars,
html[data-bc-theme="light"] .public-hero .bc-cosmos-zone {
  --fenster-x: 72%;
  --fenster-y: 46%;
  -webkit-mask-image: radial-gradient(
    circle at var(--fenster-x) var(--fenster-y),
    #000 0 15%, rgba(0, 0, 0, 0.6) 19%, transparent 23%
  );
  mask-image: radial-gradient(
    circle at var(--fenster-x) var(--fenster-y),
    #000 0 15%, rgba(0, 0, 0, 0.6) 19%, transparent 23%
  );
}

/* Die Scheibe selbst: dunkler Grund hinter dem Kompass, ein feiner
   Messingrand als Fassung, ein Lichtreflex oben links wie auf Glas. */
html[data-bc-theme="light"] .public-kompass {
  /* Ohne diese Zeile schneidet `contain: layout paint` das runde Fenster
     zu einem Quadrat — die Fassung liegt bewusst ausserhalb der Box. */
  contain: none;
  overflow: visible;
}
html[data-bc-theme="light"] .public-kompass::before {
  content: "";
  position: absolute;
  inset: -5%;
  z-index: -2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 50% 50%, #101a33 0%, var(--bruecke-scheibe) 68%, #060a15 100%);
  box-shadow:
    0 0 0 1px rgba(138, 100, 16, 0.38),
    0 0 0 6px #ffffff,
    0 0 0 7px var(--g-linie),
    0 14px 34px rgba(19, 26, 40, 0.13);
  filter: none;
  opacity: 1;
}

/* ── Flaechen: Kanten statt Schatten ──────────────────────────
   Im Innenraum stossen Platten aneinander. Ein weicher Schlagschatten
   liesse sie schweben; eine praezise Linie setzt sie ab. */
html[data-bc-theme="light"] :is(.karte, .brk-hub-card, .beirat-card, .public-karte) {
  background: var(--g-karte);
  border: 1px solid var(--g-linie);
  box-shadow: 0 1px 2px rgba(19, 26, 40, 0.04);
}
html[data-bc-theme="light"] :is(.karte, .brk-hub-card, .beirat-card, .public-karte):hover {
  border-color: color-mix(in srgb, var(--g-akzent) 42%, var(--g-linie));
  box-shadow: 0 2px 10px rgba(19, 26, 40, 0.07);
}

/* Die Kopfleiste ist die obere Konsole: opak, mit einer Fuge nach unten. */
html[data-bc-theme="light"] .missionsleiste {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--g-linie);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* Sekundaerknopf und Felder: Konsolenelemente, klar begrenzt. */
html[data-bc-theme="light"] :is(input, textarea, select) {
  background: var(--g-feld);
  border: 1px solid var(--bruecke-kante);
  color: var(--g-text);
}
html[data-bc-theme="light"] ::placeholder { color: #6b768e; }
html[data-bc-theme="light"] :is(input, textarea, select):focus-visible {
  border-color: var(--g-akzent);
  outline: 2px solid color-mix(in srgb, var(--g-akzent) 34%, transparent);
  outline-offset: 1px;
}

/* Trennlinien und Tabellenkoepfe tragen die Fugenfarbe. */
html[data-bc-theme="light"] hr,
html[data-bc-theme="light"] .beirat-table-scroll thead {
  border-color: var(--g-linie);
  background: var(--g-tiefe);
}

/* ============================================================
   AURELIA ACADEMY — die Akademie als Ort auf einer hellen Welt
   ============================================================
   Kanon: .claude/skills/academy-experience/SKILL.md

   GRUNDIDEE: Der Besucher landet mit einem Shuttle auf dem Campus einer
   planetaren Palastakademie und steht danach auf der Plaza — vor ihm die
   drei Lernbereiche als Architektur, nicht als Karten. Die Welt ist EINE
   komponierte SVG-Szene (templates/akademie/_aurelia_szene.svg); Himmel,
   Wolken und Licht des Anflugs sind CSS-Ebenen darueber.

   KAMERA: .aurelia traegt perspective, .aurelia-kamera bewegt sich als
   Ganzes (rotateX/scale/translate). Das ist die Kamerafahrt — keine
   Einzelteile, die herumfliegen. Der Anflug sind Keyframes auf Kamera,
   Schiff, Wolken, Dunst, Landering, Staub und UI, alle mit derselben
   Dauer (7 s) und demselben Versatz (--anflug-versatz). Die Kurzform ist
   ein negativer Versatz: gleiche Choreografie, spaeterer Einstieg.

   ALLE Animationen laufen ueber transform und opacity.
   ============================================================ */

/* Der Campus fuellt die Buehne: kein 1080-px-Kasten, kein dunkler Rahmen. */
.buehne:has(> .aurelia) { max-width: none; padding: 0 0 80px; }

.aurelia {
  --aurelia-tinte: #14203A;
  --aurelia-bronze: #A2662F;
  --aurelia-gold: #D9B36C;
  --aurelia-cream: #FFF8EC;
  --aurelia-himmel: #CFE3F2;
  --anflug-versatz: 0ms;
  --ziel-x: 50%;
  --ziel-y: 45%;
  --tor-farbe: 255, 236, 190;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Hoehe folgt dem Fenster; auf sehr breiten Fenstern (21:9, Ultrawide) waechst sie
     mit der Breite, damit die Zitadelle und die Innovation Hall im Bild bleiben —
     die Szene ist unten verankert (xMidYMax slice) und wuerde sonst oben beschnitten. */
  height: clamp(560px, max(calc(100svh - 62px), 46vw), 1400px);
  background: linear-gradient(180deg, #4A8AC8 0%, #8DBCE5 34%, #CFE3F2 68%, #F6E6C9 100%);
  color: var(--aurelia-tinte);
  perspective: 1400px;
  perspective-origin: 50% 40%;
}

/* ---- 1 · Die Welt ------------------------------------------- */

.aurelia-kamera {
  position: absolute;
  inset: 0;
  transform-origin: 50% 42%;
  will-change: transform;
  transition: transform 640ms cubic-bezier(0.4, 0, 0.2, 1);
}
.aurelia-szene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Nur was sich bewegt, bekommt eine Fill-Box als Bezug — global wuerde das
   die Matrix der Becken-Spiegelung verschieben. */
.aurelia-szene #schiff-lage,
.aurelia-szene #schiff,
.aurelia-szene #bau-einsteiger,
.aurelia-szene #bau-fortgeschritten,
.aurelia-szene #bau-experte,
.aurelia-szene #zirren,
.aurelia-szene #himmelsverkehr,
.aurelia-szene .wellen,
.aurelia-szene .lichtring,
.aurelia-szene .staubkorn,
.aurelia-szene .schub,
.aurelia-szene .krone,
.aurelia-szene .holo,
.aurelia-szene .fontaene,
.aurelia-szene .wesen,
.aurelia-szene .flieger,
.aurelia-szene .tier,
.aurelia-szene .tier-gross,
.aurelia-szene #passagier { transform-box: fill-box; }
.aurelia-szene .holo,
.aurelia-szene .schub,
.aurelia-szene .lichtring { transform-origin: 50% 50%; }
.aurelia-szene .fontaene { transform-origin: 50% 100%; }

/* Ebenen des Anflugs: im Ruhezustand unsichtbar. */
.aurelia-dunst,
.aurelia-wolken,
.aurelia-orbit,
.aurelia-torlicht {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease-out;
}
/* Atmosphaere von oben: kuehler, dunklerer Himmel, der beim Sinken aufreisst. */
.aurelia-orbit { background: linear-gradient(180deg, #1F4C86 0%, #4A8AC8 55%, rgba(74, 138, 200, 0) 100%); }
/* Dunst: heller Saum am Rand — die Luft, durch die wir sinken. */
.aurelia-dunst {
  background: radial-gradient(ellipse at 50% 46%, rgba(226, 237, 246, 0) 32%, rgba(226, 237, 246, 0.72) 62%, rgba(236, 242, 247, 0.98) 82%);
}
/* Wolken: sechs weiche Koerper, vorab-weich per Gradient (kein filter: blur). */
.aurelia-wolken { transform-origin: 50% 58%; }
.wolke {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 46% 38%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.98) 38%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(closest-side at 54% 70%, rgba(196, 214, 232, 0.9) 0%, rgba(196, 214, 232, 0) 100%);
}
.wolke--1 { left: -8%; top: 8%; width: 46%; height: 42%; }
.wolke--2 { left: 30%; top: -6%; width: 52%; height: 46%; }
.wolke--3 { left: 62%; top: 6%; width: 48%; height: 44%; }
.wolke--4 { left: -12%; top: 48%; width: 54%; height: 48%; }
.wolke--5 { left: 26%; top: 42%; width: 58%; height: 52%; }
.wolke--6 { left: 66%; top: 46%; width: 50%; height: 48%; }
/* Torlicht: stroemt beim Eintritt aus dem gewaehlten Tor. */
.aurelia-torlicht {
  background: radial-gradient(circle at var(--ziel-x) var(--ziel-y), rgba(var(--tor-farbe), 1) 0%, rgba(var(--tor-farbe), 0.92) 9%, rgba(var(--tor-farbe), 0) 42%);
}
/* Vor dem ersten Anflug (Inline-Skript): Wolken decken, bis aurelia.js kommt. */
.aurelia.ist-anflug-bereit .aurelia-wolken,
.aurelia.ist-anflug-bereit .aurelia-orbit { opacity: 1; transition: none; }

/* Ruhezustand der Szene: Landering aus, Staub aus, Schub gedimmt, Torlicht warm. */
.aurelia-szene .lichtring,
.aurelia-szene .landeglut,
.aurelia-szene .staubkorn { opacity: 0; }
.aurelia-szene .schub { opacity: 0.35; }
.aurelia-szene .tor-licht { opacity: 0.55; transition: opacity 420ms ease-out; }
.aurelia-szene .fenster { transition: fill 420ms ease-out; }
.aurelia-szene .holo { transition: opacity 420ms ease-out; }
.aurelia-szene #weg-fortgeschritten,
.aurelia-szene #weg-experte { transition: opacity 900ms ease-out; }

/* ---- 2 · Der Kopf -------------------------------------------- */

.aurelia-kopf {
  position: absolute;
  z-index: 3;
  left: clamp(16px, 3vw, 48px);
  top: clamp(14px, 3vh, 36px);
  width: min(58%, 520px);
  text-align: left;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 28px rgba(255, 248, 230, 0.75);
}
.aurelia-kicker {
  margin: 0 0 4px;
  color: var(--aurelia-bronze);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.aurelia-kopf h1 {
  margin: 0;
  max-width: 9ch;
  color: var(--aurelia-tinte);
  max-width: 8ch;
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 0.98;
  text-transform: uppercase;
}
.aurelia-claim {
  margin: 8px 0 0;
  color: rgba(20, 32, 58, 0.8);
  font-size: clamp(0.94rem, 1.6vw, 1.12rem);
  letter-spacing: 0.02em;
}
/* Schnupperlektion (ADR-005, Kanon 8k): ein leiser Link im Kopf, nur anonym und bei
   eingeschaltetem Flag; hochkant unter dem Leitsatz, quer rechts oben (Regel unten). Der Kopf laesst Zeiger zur Szene durch, nur der Link faengt sie. Dichte
   helle Flaeche wie die Wegweiser, damit die Tinte auf jedem Himmel lesbar bleibt; 44 px Ziel. */
.aurelia-schnupper { margin: 12px 0 0; }
.aurelia-schnupper a {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* Hochkant zweizeilig: sonst reicht er bis unter den Wegweiser der Ascension Citadel. */
  max-width: 16rem;
  padding: 6px 16px;
  border: 1px solid rgba(162, 102, 47, 0.28);
  border-radius: 14px;
  background: rgba(255, 250, 241, 0.9);
  box-shadow: 0 10px 30px -14px rgba(20, 32, 58, 0.45);
  color: var(--aurelia-tinte);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-shadow: none;
}
.aurelia-schnupper a:hover { border-color: rgba(217, 179, 108, 0.9); text-decoration: underline; }
.aurelia-schnupper a:focus-visible { outline: 2px solid var(--aurelia-tinte); outline-offset: 3px; }
/* Solange der Kopf unsichtbar ist (Anflug, Eintritt), faengt der Link keinen Klick. */
.aurelia:is(.ist-anflug, .ist-eintritt) .aurelia-schnupper a { pointer-events: none; }
/* Quer (Notebook, Desktop): unter dem Leitsatz sitzt dort der Wegweiser der Innovation Hall. Der
   Link rueckt darum rechts oben in den Himmel, gegenueber dem Titel; der Kopf wird dafuer ein
   zweispaltiges Raster ueber die ganze Breite (er laesst Zeiger weiter durch). Hochkant und auf
   dem Telefon bleibt der Link unter dem Leitsatz. */
@media (min-width: 721px) and (orientation: landscape) {
  .aurelia-kopf:has(.aurelia-schnupper) {
    right: clamp(16px, 3vw, 48px);
    width: auto;
    display: grid;
    grid-template-columns: minmax(0, 520px) 1fr;
    column-gap: 24px;
    align-items: start;
  }
  .aurelia-kopf:has(.aurelia-schnupper) > :not(.aurelia-schnupper) { grid-column: 1; }
  .aurelia-kopf .aurelia-schnupper {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    max-width: min(30vw, 420px);
    margin: 0;
  }
  .aurelia-kopf .aurelia-schnupper a { max-width: none; }
}

/* ---- 3 · Die Wegweiser --------------------------------------- */
/* Drei echte Links. Verankert (JS) schweben sie ueber ihrem Bauwerk mit
   einer feinen Lichtlinie hinunter; ohne Verankerung stehen sie als Reihe
   unter dem Titel. Beides ist dieselbe Navigation. */

.aurelia-orte { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ort {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  will-change: transform;
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ort-linie {
  order: 2;
  width: 1px;
  height: clamp(26px, 5vh, 54px);
  background: linear-gradient(to bottom, rgba(217, 179, 108, 0.9), rgba(217, 179, 108, 0));
}
.ort-schild {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 9px 16px 10px;
  border: 1px solid rgba(162, 102, 47, 0.28);
  border-radius: 14px;
  /* Projektregel: kein Glas-Weichzeichner. Eine dichte helle Flaeche statt Glas. */
  background: rgba(255, 250, 241, 0.9);
  box-shadow: 0 10px 30px -14px rgba(20, 32, 58, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-align: center;
  white-space: nowrap;
  transition: box-shadow 420ms ease-out, border-color 420ms ease-out;
}
.ort-stufe {
  color: var(--aurelia-bronze);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ort-name {
  color: var(--aurelia-tinte);
  font-size: clamp(0.92rem, 1.35vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Details erscheinen bei Annaeherung — Text sitzt ruhig in der Welt. */
.ort-mehr {
  display: grid;
  gap: 1px;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  overflow: hidden;
  transition: opacity 320ms ease-out, transform 320ms ease-out, max-height 320ms ease-out;
}
.ort-untertitel { color: rgba(20, 32, 58, 0.78); font-size: 0.8rem; }
.ort-versprechen { color: var(--aurelia-bronze); font-size: 0.76rem; font-style: italic; }
.ort-stand { color: #6A8F3F; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }

.ort[href]:is(:hover, :focus-visible) { transform: translate(-50%, calc(-100% - 6px)); }
.ort[href]:is(:hover, :focus-visible) .ort-schild {
  border-color: rgba(217, 179, 108, 0.9);
  box-shadow: 0 14px 40px -14px rgba(20, 32, 58, 0.5), 0 0 0 4px rgba(217, 179, 108, 0.18), inset 0 1px 0 #FFFFFF;
}
.ort[href]:is(:hover, :focus-visible) .ort-mehr { max-height: 80px; opacity: 1; transform: translateY(0); }
.ort[href]:focus-visible { outline: none; }
.ort[href]:focus-visible .ort-schild { outline: 2px solid var(--aurelia-tinte); outline-offset: 3px; }

/* Bereich im Bau: sichtbar Teil der Welt, aber kein Ziel. */
.ort--imbau { opacity: 0.7; }
.ort--imbau .ort-schild { border-style: dashed; }
.ort--imbau .ort-mehr { max-height: 40px; opacity: 1; transform: none; }

/* Fortschritt: die Welt merkt sich, wo du warst. */
.ort--erwacht .ort-name::after,
.ort--gemeistert .ort-name::after { content: " ✦"; color: var(--aurelia-gold); }

/* Ohne Verankerung (kein JS): eine Reihe unter dem Titel. */
.aurelia:not(.ist-verankert) .aurelia-orte {
  inset: auto 0 clamp(18px, 6vh, 56px) 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 16px;
}
.aurelia:not(.ist-verankert) .ort { position: static; transform: none; }
.aurelia:not(.ist-verankert) .ort-linie { display: none; }
.aurelia:not(.ist-verankert) .ort[href]:is(:hover, :focus-visible) { transform: translateY(-4px); }

/* ---- 4 · Annaeherung: die Architektur antwortet --------------- */
/* Fenster erwachen, das Tor leuchtet, der Hologrammring wird klar, die
   Kamera neigt sich einen Hauch zum Bauwerk. :focus-visible = :hover. */

.aurelia:has(.ort--einsteiger[href]:is(:hover, :focus-visible)) #bau-einsteiger .fenster,
.aurelia:has(.ort--fortgeschritten[href]:is(:hover, :focus-visible)) #bau-fortgeschritten .fenster,
.aurelia:has(.ort--experte[href]:is(:hover, :focus-visible)) #bau-experte .fenster { fill: #FFE7AE; }
.aurelia:has(.ort--einsteiger[href]:is(:hover, :focus-visible)) #bau-einsteiger .tor-licht,
.aurelia:has(.ort--fortgeschritten[href]:is(:hover, :focus-visible)) #bau-fortgeschritten .tor-licht,
.aurelia:has(.ort--experte[href]:is(:hover, :focus-visible)) #bau-experte .tor-licht { opacity: 1; }
.aurelia:has(.ort--einsteiger[href]:is(:hover, :focus-visible)) #bau-einsteiger .holo,
.aurelia:has(.ort--fortgeschritten[href]:is(:hover, :focus-visible)) #bau-fortgeschritten .holo,
.aurelia:has(.ort--experte[href]:is(:hover, :focus-visible)) #bau-experte .holo { opacity: 1; }
.aurelia.ist-gelandet:has(.ort--einsteiger[href]:is(:hover, :focus-visible)) .aurelia-kamera { transform: translate3d(-0.6%, 0, 0) scale(1.012); }
.aurelia.ist-gelandet:has(.ort--fortgeschritten[href]:is(:hover, :focus-visible)) .aurelia-kamera { transform: translate3d(0.6%, 0, 0) scale(1.012); }
.aurelia.ist-gelandet:has(.ort--experte[href]:is(:hover, :focus-visible)) .aurelia-kamera { transform: translate3d(0, 0.4%, 0) scale(1.016); }

/* Fortschritt in der Welt: Lichtwege erwachen, wenn eine Stufe gemeistert ist. */
.aurelia[data-gemeistert~="einsteiger"] #weg-fortgeschritten { opacity: 0.85; }
.aurelia[data-gemeistert~="fortgeschritten"] #weg-experte { opacity: 0.85; }
.aurelia[data-gemeistert~="einsteiger"] #bau-einsteiger .fenster { fill: #FFE7AE; }
.aurelia[data-gemeistert~="fortgeschritten"] #bau-fortgeschritten .fenster { fill: #FFE7AE; }
.aurelia[data-gemeistert~="experte"] #bau-experte .fenster { fill: #FFE7AE; }

/* ---- 5 · Der Anflug ------------------------------------------ */
/* Dramaturgie (7 s = 100 %):  0–21 % Atmosphaere und Wolken · 21–50 % Reveal
   · 50–79 % Anflug · 79–100 % Landung. Danach: Campus bereit. */

.aurelia.ist-anflug .aurelia-kamera,
.aurelia.ist-anflug #schiff,
.aurelia.ist-anflug .aurelia-wolken,
.aurelia.ist-anflug .aurelia-orbit,
.aurelia.ist-anflug .aurelia-dunst,
.aurelia.ist-anflug .lichtring,
.aurelia.ist-anflug .landeglut,
.aurelia.ist-anflug .staubkorn,
.aurelia.ist-anflug .schub,
.aurelia.ist-anflug .aurelia-kopf,
.aurelia.ist-anflug .aurelia-orte {
  animation-duration: 7000ms;
  animation-delay: var(--anflug-versatz);
  animation-fill-mode: both;
  animation-timing-function: linear;
}
.aurelia.ist-anflug .aurelia-kamera { animation-name: aurelia-kamera; animation-timing-function: cubic-bezier(0.3, 0.55, 0.25, 1); transition: none; }
.aurelia.ist-anflug #schiff { animation-name: aurelia-schiff; animation-timing-function: cubic-bezier(0.35, 0.4, 0.25, 1); transform-origin: 50% 60%; }
.aurelia.ist-anflug .aurelia-wolken { animation-name: aurelia-wolken; }
.aurelia.ist-anflug .aurelia-orbit { animation-name: aurelia-orbit; }
.aurelia.ist-anflug .aurelia-dunst { animation-name: aurelia-dunst; }
.aurelia.ist-anflug .lichtring { animation-name: aurelia-lichtring; transform-origin: 50% 50%; }
.aurelia.ist-anflug .lichtring:nth-of-type(2) { animation-delay: calc(var(--anflug-versatz) + 180ms); }
.aurelia.ist-anflug .lichtring:nth-of-type(3) { animation-delay: calc(var(--anflug-versatz) + 360ms); }
.aurelia.ist-anflug .landeglut { animation-name: aurelia-landeglut; }
.aurelia.ist-anflug .staubkorn { animation-name: aurelia-staub; }
.aurelia.ist-anflug .staubkorn:nth-of-type(even) { animation-name: aurelia-staub-rechts; }
.aurelia.ist-anflug .schub { animation-name: aurelia-schub; transform-origin: 50% 50%; }
.aurelia.ist-anflug .aurelia-kopf { animation-name: aurelia-kopf; }
.aurelia.ist-anflug .aurelia-orte { animation-name: aurelia-orte; }
/* Messung waehrend des Anflugs: aurelia.js setzt diese Klasse fuer einen
   Augenblick, um die Anker im Ruhezustand zu lesen. */
.aurelia.ist-messung .aurelia-kamera,
.aurelia.ist-messung #schiff { animation: none !important; transform: none !important; }

@keyframes aurelia-kamera {
  0%   { transform: translate3d(0, -9%, 0) rotateX(17deg) scale(0.8); }
  22%  { transform: translate3d(0, -8%, 0) rotateX(15deg) scale(0.82); }
  56%  { transform: translate3d(0, -3%, 0) rotateX(6deg) scale(0.91); }
  82%  { transform: translate3d(0, 0.4%, 0) rotateX(1.2deg) scale(1.025); }
  100% { transform: none; }
}
@keyframes aurelia-schiff {
  0%   { opacity: 0; transform: translate(190px, -820px) scale(0.3) rotate(-6deg); }
  10%  { opacity: 1; }
  24%  { transform: translate(170px, -740px) scale(0.36) rotate(-5deg); }
  56%  { transform: translate(70px, -400px) scale(0.68) rotate(-3deg); }
  80%  { transform: translate(0, -78px) scale(1) rotate(0deg); }
  91%  { transform: translate(0, -12px) scale(1); }
  100% { transform: none; }
}
@keyframes aurelia-wolken {
  0%   { opacity: 0.75; transform: scale(0.86) translateY(6%); }
  20%  { opacity: 1; transform: scale(1.12) translateY(2%); }
  34%  { opacity: 1; transform: scale(1.6) translateY(12%); }
  52%  { opacity: 0; transform: scale(2.5) translateY(36%); }
  100% { opacity: 0; transform: scale(2.5) translateY(36%); }
}
@keyframes aurelia-orbit {
  0%   { opacity: 0.7; }
  18%  { opacity: 0.35; }
  36%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes aurelia-dunst {
  0%   { opacity: 0.25; }
  26%  { opacity: 0.7; }
  48%  { opacity: 0.55; }
  80%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes aurelia-lichtring {
  0%, 78% { opacity: 0; transform: scale(0.6); }
  86%  { opacity: 0.95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.14); }
}
@keyframes aurelia-landeglut {
  0%, 76% { opacity: 0; }
  90%  { opacity: 1; }
  100% { opacity: 0.35; }
}
@keyframes aurelia-staub {
  0%, 82% { opacity: 0; transform: translate(0, 0); }
  90%  { opacity: 0.85; transform: translate(-34px, -8px); }
  100% { opacity: 0; transform: translate(-70px, -14px); }
}
@keyframes aurelia-staub-rechts {
  0%, 82% { opacity: 0; transform: translate(0, 0); }
  90%  { opacity: 0.85; transform: translate(34px, -8px); }
  100% { opacity: 0; transform: translate(70px, -14px); }
}
@keyframes aurelia-schub {
  0%, 78% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0.35; transform: scale(1); }
}
@keyframes aurelia-kopf {
  0%, 84% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes aurelia-orte {
  0%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

/* Skip und Replay: leise, in der Ecke. */
.aurelia-skip,
.aurelia-replay {
  position: absolute;
  z-index: 5;
  right: clamp(12px, 2.4vw, 22px);
  padding: 8px 15px;
  border: 1px solid rgba(20, 32, 58, 0.28);
  border-radius: 999px;
  background: rgba(255, 250, 241, 0.86);
  color: var(--aurelia-tinte);
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 220ms ease-out, background-color 220ms ease-out;
}
.aurelia-skip { top: clamp(12px, 2.4vw, 22px); }
.aurelia-replay { bottom: clamp(12px, 2.4vw, 22px); }
.aurelia-skip:is(:hover, :focus-visible),
.aurelia-replay:is(:hover, :focus-visible) { border-color: var(--aurelia-bronze); background: var(--aurelia-cream); }
.aurelia-skip[hidden],
.aurelia-replay[hidden] { display: none; }

/* ---- 6 · Eintritt: aussteigen, zum Tor gehen, hinein ------------ */
/* Charles, 05.09.: Ein Passagier steigt aus dem Shuttle und geht zum
   gewaehlten Gebaeude (1,7 s, skaliert in die Tiefe), dann stroemt Licht
   aus dem Tor und die Kamera faehrt hinein (Ursprung = Wegweiser). Die
   Navigation haengt NIE daran (aurelia.js: 2,3 s, Deckel 3,2 s, zweiter
   Klick springt sofort). Jede Stufe hat ihr Licht. */

.aurelia-szene #passagier {
  opacity: 0;
  transition: transform 1700ms cubic-bezier(0.45, 0.05, 0.35, 1) 120ms, opacity 260ms ease-out;
}
.aurelia.ist-eintritt #passagier {
  opacity: 1;
  transform: translate(var(--pass-dx, 0px), var(--pass-dy, 0px)) scale(var(--pass-mass, 1));
}
.aurelia.ist-eintritt #passagier .gang { animation: aurelia-schritt 0.46s steps(2) infinite; }
.aurelia.ist-eintritt .aurelia-kamera {
  transform-origin: var(--ziel-x) var(--ziel-y);
  transform: scale(1.5);
  transition: transform 1000ms cubic-bezier(0.55, 0, 0.25, 1) 1350ms;
}
.aurelia.ist-eintritt .aurelia-torlicht { opacity: 1; transition: opacity 700ms cubic-bezier(0.5, 0, 0.3, 1) 1550ms; }
.aurelia.ist-eintritt .ort:not(.ist-ziel) { opacity: 0; transition: opacity 300ms ease-out; }
.aurelia.ist-eintritt .ort.ist-ziel { opacity: 0; transform: translate(-50%, calc(-100% - 40px)) scale(1.08); transition: opacity 520ms ease-in 1300ms, transform 800ms cubic-bezier(0.4, 0, 0.2, 1) 1300ms; }
.aurelia.ist-eintritt .aurelia-kopf { opacity: 0; transition: opacity 300ms ease-out; }
.aurelia[data-eintritt="einsteiger"] { --tor-farbe: 255, 240, 214; }
.aurelia[data-eintritt="fortgeschritten"] { --tor-farbe: 214, 244, 250; }
.aurelia[data-eintritt="experte"] { --tor-farbe: 255, 226, 160; }
.aurelia[data-eintritt="experte"].ist-eintritt .aurelia-kamera { transform: scale(1.7); transition-duration: 1100ms; }

/* ---- 7 · Die Welt lebt (Ambient, nur nach der Landung) ------- */
/* Extrem leise: Wolken ziehen, Wasser glitzert, Baumkronen
   wiegen, Hologramme atmen, ferne Schiffe ziehen vorbei. Nie ein GIF.
   Akku-Regel: nichts rechnet, was niemand sieht — die Endlosschleifen
   sind standardmaessig angehalten und laufen nur, solange der Campus im
   Viewport steht (aurelia.js setzt .ist-sichtbar per IntersectionObserver). */

.aurelia.ist-gelandet #zirren { animation: aurelia-zirren 90s linear infinite alternate; }
.aurelia.ist-gelandet #himmelsverkehr { animation: aurelia-verkehr 70s linear infinite alternate; }
.aurelia.ist-gelandet .wellen { animation: aurelia-wellen 6s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .krone { animation: aurelia-laub 5.5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.aurelia.ist-gelandet .holo { animation: aurelia-holo 4.2s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .fontaene { animation: aurelia-fontaene 1.8s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .lampe { animation: aurelia-lampe 3s ease-in-out infinite alternate; }
/* Bewohner gehen Routen von A nach B und zurueck: lange Plazawege (r1),
   Diagonalen (r2), kurze Wege (r3), Treppe (r4), Gartenpfade (r5), Plaudern (r6).
   Takt und Versatz variieren per nth-of-type, damit nichts im Gleichschritt laeuft. */
.aurelia.ist-gelandet .wesen--r1 { animation: aurelia-r1 46s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .wesen--r2 { animation: aurelia-r2 34s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .wesen--r3 { animation: aurelia-r3 18s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .wesen--r4 { animation: aurelia-r4 30s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .wesen--r5 { animation: aurelia-r5 28s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .wesen--r6 { animation: aurelia-r6 6s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .wesen:nth-of-type(2n) { animation-direction: alternate-reverse; }
/* Beine der Bewohner in Hosen schwingen im Gehen: nur transform, Huefte als Drehpunkt. */
.aurelia-szene .bein { transform-box: fill-box; transform-origin: 50% 0%; }
.aurelia.ist-gelandet.ist-sichtbar .bein--l { animation: aurelia-schritt 0.9s ease-in-out infinite alternate; }
.aurelia.ist-gelandet.ist-sichtbar .bein--r { animation: aurelia-schritt 0.9s ease-in-out infinite alternate-reverse; }
@keyframes aurelia-schritt { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.aurelia.ist-gelandet .wesen:nth-of-type(3n) { animation-delay: -9s; }
.aurelia.ist-gelandet .wesen:nth-of-type(3n + 1) { animation-delay: -17s; }
.aurelia.ist-gelandet .wesen:nth-of-type(5n) { animation-delay: -23s; }
/* Sandwanderer ziehen langsam, der Ruessel schwingt. Wedelbaeume wiegen. */
.aurelia.ist-gelandet .tier-gross--1 { animation: aurelia-r1 110s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .tier-gross--2 { animation: aurelia-r5 90s ease-in-out infinite alternate-reverse; }
.aurelia.ist-gelandet .tier-gross--3 { animation: aurelia-r1 130s ease-in-out infinite alternate-reverse; animation-delay: -40s; }
.aurelia.ist-gelandet .ruessel { animation: aurelia-ruessel 4.5s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .wedel { animation: aurelia-wedel 5.2s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .wedel:nth-of-type(2n) { animation-delay: -2.4s; }
/* Schiffe ziehen ueber den Himmel, Segler kreisen in weichen Wellen. */
.aurelia.ist-gelandet .flieger--1 { animation: aurelia-flug-rechts 70s linear infinite; }
.aurelia.ist-gelandet .flieger--2 { animation: aurelia-flug-links 95s linear infinite; animation-delay: -30s; }
.aurelia.ist-gelandet .flieger--3 { animation: aurelia-flug-rechts 55s linear infinite; animation-delay: -20s; }
.aurelia.ist-gelandet .flieger--4 { animation: aurelia-flug-links 80s linear infinite; animation-delay: -50s; }
.aurelia.ist-gelandet .flieger--5 { animation: aurelia-flug-rechts 110s linear infinite; animation-delay: -70s; }
.aurelia.ist-gelandet .flieger--fern { animation: aurelia-flug-links 240s linear infinite; }
.aurelia.ist-gelandet .tier--1 { animation: aurelia-segel 48s ease-in-out infinite alternate; }
.aurelia.ist-gelandet .tier--2 { animation: aurelia-segel 62s ease-in-out infinite alternate-reverse; animation-delay: -20s; }
.aurelia.ist-gelandet .tier--3 { animation: aurelia-segel 40s ease-in-out infinite alternate; animation-delay: -9s; }
.aurelia.ist-gelandet:not(.ist-sichtbar) #zirren,
.aurelia.ist-gelandet:not(.ist-sichtbar) #himmelsverkehr,
.aurelia.ist-gelandet:not(.ist-sichtbar) .wellen,
.aurelia.ist-gelandet:not(.ist-sichtbar) .krone,
.aurelia.ist-gelandet:not(.ist-sichtbar) .holo,
.aurelia.ist-gelandet:not(.ist-sichtbar) .fontaene,
.aurelia.ist-gelandet:not(.ist-sichtbar) .lampe,
.aurelia.ist-gelandet:not(.ist-sichtbar) .wesen,
.aurelia.ist-gelandet:not(.ist-sichtbar) .tier-gross,
.aurelia.ist-gelandet:not(.ist-sichtbar) .ruessel,
.aurelia.ist-gelandet:not(.ist-sichtbar) .wedel,
.aurelia.ist-gelandet:not(.ist-sichtbar) .flieger,
.aurelia.ist-gelandet:not(.ist-sichtbar) .tier { animation-play-state: paused; }

@keyframes aurelia-zirren { from { transform: translateX(-70px); } to { transform: translateX(70px); } }
@keyframes aurelia-verkehr { from { transform: translateX(-140px); } to { transform: translateX(140px); } }
@keyframes aurelia-wellen { from { transform: translateX(-10px); opacity: 0.8; } to { transform: translateX(12px); opacity: 1; } }
@keyframes aurelia-laub { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes aurelia-holo { from { opacity: 0.45; transform: scaleY(0.9); } to { opacity: 0.8; transform: scaleY(1.06); } }
@keyframes aurelia-fontaene { from { opacity: 0.6; transform: scaleY(0.94); } to { opacity: 1; transform: scaleY(1.04); } }
@keyframes aurelia-lampe { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes aurelia-r1 {
  0%   { transform: translate(-170px, 0); }
  50%  { transform: translate(0, 6px); }
  100% { transform: translate(170px, 0); }
}
@keyframes aurelia-r2 { from { transform: translate(-90px, -24px); } to { transform: translate(90px, 24px); } }
@keyframes aurelia-r3 { from { transform: translate(-40px, 0); } to { transform: translate(40px, 0); } }
@keyframes aurelia-r4 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-12px, -28px); }
  100% { transform: translate(8px, -56px); }
}
@keyframes aurelia-r5 { from { transform: translate(-70px, 14px); } to { transform: translate(70px, -14px); } }
@keyframes aurelia-r6 { from { transform: translate(-3px, 0); } to { transform: translate(3px, 0); } }
@keyframes aurelia-ruessel { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes aurelia-wedel { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes aurelia-schritt { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes aurelia-flug-rechts { from { transform: translateX(-900px); } to { transform: translateX(900px); } }
@keyframes aurelia-flug-links { from { transform: translateX(900px); } to { transform: translateX(-900px); } }
@keyframes aurelia-segel {
  0%   { transform: translate(-420px, 0); }
  50%  { transform: translate(0, -22px); }
  100% { transform: translate(420px, 0); }
}
/* Hover unterbricht das Atmen des Hologramms nicht abrupt: Klarheit gewinnt. */
.aurelia:has(.ort[href]:is(:hover, :focus-visible)) .holo { animation-play-state: paused; }

/* ---- 8 · Tablet: Bereiche naeher an die Achse ----------------- */
@media (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  .aurelia-szene #bau-fortgeschritten { transform: translate(120px, -10px) scale(0.92); transform-origin: 50% 100%; }
  .aurelia-szene #bau-einsteiger { transform: translate(-150px, 0) scale(0.95); transform-origin: 50% 100%; }
  .aurelia-szene #anker-experte { transform: translateY(120px); transform-box: fill-box; }
}

/* ---- 9 · Mobil: dieselbe Welt, engere Buehne ------------------ */
/* Die Szene wird beschnitten (xMidYMax slice); die drei Bereiche ruecken
   per Transformation an die Hauptachse, das Shuttle zur Mitte. Weniger
   Ambient, gleiche Art Direction. */
@media (max-width: 720px) {
  .aurelia { height: clamp(520px, calc(100svh - 62px), 900px); perspective: 1000px; }
  .aurelia-szene #bau-fortgeschritten { transform: translate(310px, -20px) scale(0.78); transform-origin: 50% 100%; }
  .aurelia-szene #bau-einsteiger { transform: translate(-320px, -10px) scale(0.84); transform-origin: 50% 100%; }
  .aurelia-szene #anker-experte { transform: translateY(200px); transform-box: fill-box; }
  .aurelia-szene #anker-fortgeschritten { transform: translateY(170px); transform-box: fill-box; }
  .aurelia-szene #anker-einsteiger { transform: translateY(120px); transform-box: fill-box; }
  .aurelia-kopf { width: min(64%, 300px); }
  .aurelia-kopf h1 { font-size: 1.55rem; }
  .aurelia-claim { font-size: 0.82rem; }
  .aurelia-schnupper { margin-top: 10px; }
  .aurelia-schnupper a { padding: 6px 12px; font-size: 0.84rem; }
  .aurelia-szene #schiff-lage { transform: translate(210px, 0) scale(0.78); transform-origin: 50% 100%; }
  .aurelia-szene #strahlen { display: none; }
  .aurelia-kopf h1 { letter-spacing: 0.04em; }
  .ort-schild { padding: 7px 12px 8px; border-radius: 12px; }
  .ort-name { font-size: 0.9rem; }
  .ort-mehr { max-height: 60px; opacity: 1; transform: none; }   /* kein Hover auf Touch */
  .ort-versprechen { display: none; }
  .ort-linie { height: 22px; }
  .aurelia.ist-gelandet .krone,
  .aurelia.ist-gelandet #zirren,
  .aurelia.ist-gelandet .wesen:nth-of-type(2n) { animation: none; }
  .aurelia.ist-gelandet .wesen:nth-of-type(2n) .bein { animation: none; }
  .aurelia.ist-eintritt .aurelia-kamera { transform: scale(1.3); }
}

/* ---- 10 · Reduzierte Bewegung: der Campus steht --------------- */
/* Kein Anflug, keine Kamerafahrt, kein Eintrittsflug, kein Ambient. Der
   Campus wird weich eingeblendet und ist sofort vollstaendig bedienbar. */
@media (prefers-reduced-motion: reduce) {
  .aurelia .aurelia-kamera,
  .aurelia .aurelia-szene * ,
  .aurelia .aurelia-wolken,
  .aurelia .aurelia-orbit,
  .aurelia .aurelia-dunst,
  .aurelia .aurelia-torlicht,
  .aurelia .aurelia-kopf,
  .aurelia .aurelia-orte,
  .aurelia .ort { animation: none !important; transition-duration: 1ms !important; }
  .aurelia.ist-anflug-bereit .aurelia-wolken,
  .aurelia.ist-anflug-bereit .aurelia-orbit { opacity: 0; }
  .aurelia .aurelia-kamera { transform: none !important; }
  .aurelia-szene .lichtring { opacity: 0 !important; }
  .aurelia .ort[href]:is(:hover, :focus-visible) { transform: translate(-50%, -100%); }
  .aurelia .ort-mehr { max-height: 80px; opacity: 1; transform: none; }
  .aurelia-skip,
  .aurelia-replay { display: none !important; }
  .aurelia-kamera { animation: aurelia-reveal 600ms ease-out both; }
}
@keyframes aurelia-reveal { from { opacity: 0; } to { opacity: 1; } }

/* ---- 11 · Helles/dunkles Theme: die Welt hat ihr eigenes Licht - */
html[data-bc-theme="light"] .aurelia { box-shadow: 0 18px 40px -20px rgba(18, 14, 26, 0.2); }

/* ---- 12 · Der Rueckweg: jede Akademie-Seite steht auf dem Campus */
/* Eine Zeile «Aurelia Academy · Bereich» plus ein Leuchtsaum in der
   Lichtfarbe des Bereichs. Das ist die ganze Welt-Zugehoerigkeit der
   Unterseiten — Architektur und Licht, keine zweite Kamerafahrt. */
.aurelia-pfad {
  --stufe-licht: rgba(217, 179, 108, 0.7);
  margin: 0 0 16px;
  color: var(--g-text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.aurelia-pfad[data-stufe="einsteiger"] { --stufe-licht: rgba(255, 240, 214, 0.9); }
.aurelia-pfad[data-stufe="fortgeschritten"] { --stufe-licht: rgba(127, 209, 223, 0.9); }
.aurelia-pfad[data-stufe="experte"] { --stufe-licht: rgba(226, 192, 122, 0.95); }
.aurelia-pfad::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 0 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--stufe-licht), rgba(0, 0, 0, 0));
  box-shadow: 0 0 14px var(--stufe-licht);
}
.aurelia-pfad a { color: var(--aurelia-gold, #D9B36C); text-decoration: none; }
.aurelia-pfad a:is(:hover, :focus-visible) { text-decoration: underline; }
.aurelia-pfad-ort { color: var(--g-text); }
.aurelia-pfad-stufe { color: var(--g-text-dim); letter-spacing: 0.06em; }

/* ============================================================
   HELLER MODUS: Fusszeile und Newsletter-Box (Charles, 06.09.)
   ============================================================
   Die Bodenstation trug im Hellen weiter ihren dunklen Verlauf, der Text
   aber die dunklen Hell-Tokens — grau auf grau. Im Hellen ist der Boden
   eine helle Platte; die Briefing-Box verliert ihren Nachtverlauf. */
html[data-bc-theme="light"] .bodenstation {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), #dfe5ee);
  border-top-color: var(--g-linie);
  color: var(--g-text-dim);
}
html[data-bc-theme="light"] .bodenstation a,
html[data-bc-theme="light"] .fuss-spalten a,
html[data-bc-theme="light"] .fuss-mission,
html[data-bc-theme="light"] .fuss-recht { color: var(--g-text-dim); }
html[data-bc-theme="light"] .fuss-spalten a:hover { color: var(--g-akzent); }
html[data-bc-theme="light"] .fuss-marke strong,
html[data-bc-theme="light"] .briefing-kompakt strong { color: var(--g-text); }
html[data-bc-theme="light"] .fuss-marke-kompass { text-shadow: none; }
html[data-bc-theme="light"] .briefing-box {
  background: #ffffff;
  border-color: var(--g-linie);
  box-shadow: 0 10px 30px rgba(19, 26, 40, 0.08);
}
html[data-bc-theme="light"] .briefing-box h2 { color: var(--g-text); }
html[data-bc-theme="light"] .briefing-form input[type="email"] {
  background: #ffffff;
  color: var(--g-text);
  border-color: var(--bruecke-kante);
}
html[data-bc-theme="light"] .briefing-form .knopf,
html[data-bc-theme="light"] .briefing-form button {
  background: var(--g-text);
  color: #ffffff;
}
html[data-bc-theme="light"] .briefing-box .nutzen-anker li { color: var(--g-text); border-color: var(--g-linie); background: #f4f6fa; }
html[data-bc-theme="light"] .briefing-box .meta, html[data-bc-theme="light"] .briefing-box > p { color: var(--g-text-dim); }

/* ============================================================
   STARTSEITE KURS SETZEN
   ============================================================
   Die Einladung in die Beirat Akademie (anlagen/plan-startseite-2026-09-22.md,
   Zielbild «Kurs setzen»). Oben bleibt das dunkle All mit dem Kompass; darunter
   wird die Nacht zum Morgen, und der helle Campus ist das Ziel. Markup:
   templates/content/home_page.html, Texte und Zahlen: apps/content/startseite.py.

   Regeln fuer alles in diesem Abschnitt (er liegt im Pruefbereich ab «PHASE B»):
   - Bewegung nur ueber transform und opacity, jede Animation laeuft genau
     einmal und nur auf eine Handlung oder beim ersten Hereinscrollen (die
     Reveal-Engine setzt .bc-in, static/cinema/motion.js). Fuellmodus
     «backwards»: der Endzustand ist immer der Grundzustand, danach haelt
     keine Animation mehr einen Wert fest.
   - Keine Endlosschleife, kein Weichzeichner auf Flaechen.
   - Hell und dunkel: der Campus hat sein eigenes Licht und sieht in beiden
     Modi gleich aus; alles auf der Buehne nimmt die --g-Tokens.
   - Reduzierte Bewegung: alles steht, alles ist sofort da.
   ------------------------------------------------------------ */

/* ── Hero: Kicker, Akzentzeile, Hauptknopf, Vertrauenszeile ── */
/* Der Himmel beginnt direkt unter der Kopfzeile. Vorher lag dazwischen der
   obere Innenabstand der Buehne (32 px) als dunkler Balken ohne Sterne.
   :has() trifft nur eine Buehne, die mit dem Hero beginnt, also nur /. */
.buehne:has(> .public-hero:first-child) { padding-top: 0; }
.public-hero .beirat-archive-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 6px 13px;
  border: 1px solid color-mix(in srgb, var(--g-akzent) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--g-akzent) 8%, transparent);
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.public-hero .beirat-archive-kicker::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g-akzent);
  box-shadow: 0 0 10px var(--g-akzent);
}
/* Die zweite Zeile der H1 in Sternengold — die Werte des Kompassgolds. */
.ks-h1-akzent {
  display: block;
  padding-bottom: 0.06em;
  background: linear-gradient(100deg, #fff1bd 0%, #f5c86b 40%, #ad7b2d 78%, #f6d98f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.public-hero .claim { max-width: 600px; }
.public-hero-aktionen .knopf.btn-primary,
.ks-knopf-campus {
  gap: 10px;
  padding-inline: 26px;
  background: linear-gradient(135deg, #fff1bd 0%, #f5c86b 46%, #ad7b2d 130%);
  color: #11172a;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow:
    0 12px 32px -14px rgba(245, 200, 107, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.public-hero-aktionen .knopf.btn-primary:hover,
.public-hero-aktionen .knopf.btn-primary:focus-visible,
.ks-knopf-campus:hover,
.ks-knopf-campus:focus-visible { color: #11172a; }
.public-hero-aktionen .knopf span[aria-hidden="true"],
.ks-knopf-campus span[aria-hidden="true"] {
  display: inline-block;
  transition: transform var(--karte-dauer) var(--karte-kurve);
}
.public-hero-aktionen .knopf:hover span[aria-hidden="true"],
.public-hero-aktionen .knopf:focus-visible span[aria-hidden="true"],
.ks-knopf-campus:hover span[aria-hidden="true"],
.ks-knopf-campus:focus-visible span[aria-hidden="true"] { transform: translateX(4px); }
.ks-vertrauen {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 0.9rem;
}
.ks-vertrauen::before {
  content: "";
  flex: 0 0 24px;
  height: 1px;
  background: var(--g-akzent);
  transform: translateY(-4px);
}
/* Neben den Knoepfen, was die Akademie verspricht: dauerhaft kostenlos (Charles, 22.09.2026:
   «darf gross gesagt werden») und eine Lektion ohne Anmeldung. Ein Abzeichen, kein Knopf. */
.ks-hero-zusage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: -2px 0 20px;
}
.ks-frei {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 16px 6px 6px;
  border: 1px solid color-mix(in srgb, var(--g-akzent) 58%, transparent);
  border-radius: 999px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--g-akzent) 22%, transparent), color-mix(in srgb, var(--g-akzent) 6%, transparent));
  color: var(--g-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
/* Das Siegel: ein goldener Kreis mit Haken, nur Form, kein Zeichen. */
.ks-frei-siegel {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff1bd, #f5c86b 58%, #ad7b2d);
  box-shadow: 0 0 14px rgba(245, 200, 107, 0.55);
}
.ks-frei-siegel::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 7px;
  height: 12px;
  border: solid #11172a;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(40deg);
}
.ks-schnupper-link {
  display: inline-block;
  padding-block: 11px;
  color: var(--g-akzent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.ks-schnupper-link:hover,
.ks-schnupper-link:focus-visible { text-decoration-thickness: 2px; }
/* Die drei Kurse im ersten Bildschirm: jede Stufe mit einem Stern in ihrem Torlicht (warmweiss,
   eisblau, gold wie in #kurse), daneben Name und Dauer. Drei Links, keine Karten. */
.ks-hero-kurse {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(18px, 2.6vw, 34px);
  margin: 0 0 14px;
  padding: 12px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--g-akzent) 24%, transparent);
  list-style: none;
}
.ks-hero-kurse a {
  --ks-tor: 255, 240, 214;
  display: grid;
  grid-template-columns: 12px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  min-height: 44px;
  color: var(--g-text);
  line-height: 1.25;
  text-decoration: none;
}
.ks-hero-kurse a[data-stufe="fortgeschritten"] { --ks-tor: 214, 244, 250; }
.ks-hero-kurse a[data-stufe="experte"] { --ks-tor: 255, 226, 160; }
.ks-hero-kurse a::before {
  content: "";
  grid-row: 1 / span 2;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgb(var(--ks-tor));
  box-shadow: 0 0 12px rgba(var(--ks-tor), 0.85);
}
.ks-hero-kurs-name { font-weight: 650; }
.ks-hero-kurs-zeit { color: var(--g-text-dim); font-size: 0.84rem; }
.ks-hero-kurse a:hover .ks-hero-kurs-name,
.ks-hero-kurse a:focus-visible .ks-hero-kurs-name {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Der Horizont: unten im Hero der Morgen ueber dem Campus. Auf breiten Fenstern liegt er
   rechts unter dem Kompass (links steht der Text), die Maske laesst den Himmel des Bildes nach
   oben ins All und nach links in die Nacht auslaufen; so steht kein Text je auf dem Bild. Der
   Streifen liegt hinter Text und Kompass und faengt keinen Zeiger. */
.public-hero:has(.ks-horizont) {
  --ks-horizont-hoehe: clamp(170px, 17.5vw, 260px);
  padding-top: clamp(40px, 4.4vw, 72px);
  padding-bottom: clamp(44px, 5vw, 80px);
}
.public-hero:has(.ks-horizont) .public-hero-aktionen { margin: 24px 0 16px; }
.ks-horizont {
  --ks-maske-oben: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 26%, #000 60%);
  --ks-maske-seite: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 22%, #000 40%, #000 88%, rgba(0, 0, 0, 0.55) 100%);
  position: absolute;
  left: 48%;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: var(--ks-horizont-hoehe, 220px);
  pointer-events: none;
  -webkit-mask-image: var(--ks-maske-oben), var(--ks-maske-seite);
  -webkit-mask-composite: source-in;
  mask-image: var(--ks-maske-oben), var(--ks-maske-seite);
  mask-composite: intersect;
}
.ks-horizont img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* Das erste Licht: ein warmer Saum ueber den Kuppeln, dort, wo die Nacht aufhoert. */
.ks-horizont::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 50% 42%, rgba(255, 226, 160, 0.28), transparent 72%);
  mix-blend-mode: screen;
}
html.bc-motion .ks-horizont img { animation: ks-horizont-auf 1600ms var(--karte-kurve) 300ms 1 backwards; }

/* ── Gemeinsame Bausteine der Abschnitte ── */
.ks-innen { width: min(1080px, 100%); margin-inline: auto; }
.ks-kopf { max-width: 740px; }
.ks-kopf h2,
.ks-fragen .beirat-faq-title {
  margin: 8px 0 14px;
  color: var(--g-text);
  font-size: clamp(1.95rem, 4.4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.ks-lead {
  max-width: 640px;
  margin: 0;
  color: var(--g-text-dim);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
}
.ks-abschnitt {
  margin: clamp(80px, 11vw, 140px) 0;
  scroll-margin-top: 96px;
}
.ks-teiltitel {
  margin: 0 0 8px;
  color: var(--g-text);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

/* ── «Nacht wird Morgen»: #kurse ──────────────────────────────
   Drei Baender, deren Farben nahtlos ineinander laufen: die Nacht der
   Buehne, der Himmel beim Sinkflug, der Morgen auf dem Campus. Die Werte
   sind die der Welt (academy-experience §5 und .aurelia), keine neuen. */
.ks-kurse {
  --aurelia-tinte: #14203A;
  --aurelia-bronze: #A2662F;
  --aurelia-gold: #D9B36C;
  --aurelia-cream: #FFF8EC;
  --aurelia-himmel: #CFE3F2;
  --ks-orbit: #1F4C86;
  --ks-himmel-tief: #4A8AC8;
  --ks-himmel-mitte: #8DBCE5;
  --ks-horizont: #F6E6C9;
  --ks-stein: #FAF5EA;
  --ks-patina: #4F8F83;
  --ks-glas: #7FB2CC;
  --ks-tinte-leise: rgba(20, 32, 58, 0.74);
  /* Bronze mit einem Viertel Tinte: auf dem Morgenlicht 6,5:1 statt 4,4:1. Als rgb, weil
     Farbmischungen als color(srgb …) ausgegeben werden, und das liest die Kontrastpruefung
     der Abnahme (test_abnahme, heller Modus) nicht. */
  --ks-bronze-text: rgb(122, 82, 50);
  --ks-nachtblau: color-mix(in srgb, var(--ks-orbit) 38%, var(--g-himmel));
  position: relative;
  isolation: isolate;
  margin: 0 calc(50% - 50vw);
  scroll-margin-top: 96px;
}
.ks-kurse > div { padding-inline: max(20px, calc((100vw - 1080px) / 2)); }
.ks-nacht {
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(32px, 5vw, 56px);
  background:
    radial-gradient(circle at 9% 24%, rgba(232, 236, 248, 0.8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 27% 70%, rgba(245, 200, 107, 0.8) 0 1.1px, transparent 2px),
    radial-gradient(circle at 63% 18%, rgba(232, 236, 248, 0.7) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 84% 56%, rgba(165, 183, 255, 0.7) 0 1px, transparent 1.9px),
    radial-gradient(circle at 93% 12%, rgba(232, 236, 248, 0.75) 0 1px, transparent 1.8px),
    linear-gradient(180deg, rgba(7, 11, 24, 0) 0%, var(--ks-nachtblau) 100%);
}
.ks-fakten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr);
  margin-top: clamp(30px, 4vw, 48px);
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid color-mix(in srgb, var(--g-akzent) 26%, transparent);
}
.ks-fakten li {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 16px clamp(12px, 2vw, 22px);
  color: var(--g-text-dim);
  font-size: 0.9rem;
  line-height: 1.4;
}
.ks-fakten li + li { border-left: 1px solid color-mix(in srgb, var(--g-akzent) 18%, transparent); }
.ks-fakten strong {
  color: var(--g-text);
  font-size: clamp(1.7rem, 3.1vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ks-fakten small,
.ks-kurszeile-umfang small {
  margin-right: 4px;
  font-size: 0.48em;
  font-weight: 500;
  letter-spacing: 0;
}
.ks-fakt-frei strong { color: var(--g-akzent); white-space: nowrap; }
.ks-fakt-frei { position: relative; }
.ks-fakt-frei::after {
  content: "";
  position: absolute;
  inset: 8px 0 8px 8px;
  z-index: -1;
  border-radius: 14px;
  background: radial-gradient(120% 120% at 20% 20%, color-mix(in srgb, var(--g-akzent) 16%, transparent), transparent 70%);
}
.ks-himmel {
  padding-top: clamp(8px, 2vw, 20px);
  padding-bottom: clamp(30px, 5vw, 60px);
  background: linear-gradient(180deg,
    var(--ks-nachtblau) 0%,
    var(--ks-orbit) 24%,
    var(--ks-himmel-tief) 52%,
    var(--ks-himmel-mitte) 76%,
    var(--aurelia-himmel) 100%);
}
/* Das Fenster auf den Campus: ein Rahmen aus Licht, ein Glanz, der einmal
   hindurchzieht, und das Bild, das beim ersten Hereinscrollen aufgeht. */
.ks-campus {
  position: relative;
  overflow: hidden;
  margin-block: 0;
  aspect-ratio: 1920 / 1018;
  border-radius: clamp(14px, 2vw, 26px);
  background: var(--ks-himmel-mitte);
  box-shadow:
    0 0 0 1px rgba(255, 236, 190, 0.6),
    0 0 0 7px rgba(255, 248, 236, 0.1),
    0 44px 90px -44px rgba(4, 9, 26, 0.9);
}
.ks-campus img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ks-campus::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 248, 236, 0) 34%, rgba(255, 248, 236, 0.42) 50%, rgba(255, 248, 236, 0) 66%);
  opacity: 0;
  transform: translateX(-110%);
}
html.bc-motion .ks-campus.bc-in img { animation: ks-fenster-auf 1300ms var(--karte-kurve) 1 backwards; }
html.bc-motion .ks-campus.bc-in::after { animation: ks-glanzlauf 1700ms var(--karte-kurve) 450ms 1 backwards; }

.ks-morgen {
  padding-top: clamp(10px, 2vw, 18px);
  padding-bottom: clamp(56px, 8vw, 96px);
  color: var(--aurelia-tinte);
  background: linear-gradient(180deg,
    var(--aurelia-himmel) 0%,
    var(--ks-horizont) 18%,
    var(--aurelia-cream) 44%,
    var(--aurelia-cream) 100%);
  border-radius: 0 0 50% 50% / 0 0 clamp(26px, 4.5vw, 72px) clamp(26px, 4.5vw, 72px);
  box-shadow: 0 34px 70px -46px rgba(0, 0, 0, 0.75);
}
.ks-kurszeilen {
  display: grid;
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.ks-kurszeile {
  --ks-tor: 255, 240, 214;
  --ks-marke: var(--ks-patina);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  padding: clamp(20px, 2.6vw, 30px) clamp(12px, 2vw, 26px);
  transition: transform var(--karte-dauer) var(--karte-kurve);
}
.ks-kurszeile[data-stufe="fortgeschritten"] { --ks-tor: 214, 244, 250; --ks-marke: var(--ks-glas); }
.ks-kurszeile[data-stufe="experte"] { --ks-tor: 255, 226, 160; --ks-marke: var(--aurelia-gold); }
.ks-kurszeile + .ks-kurszeile { border-top: 1px solid rgba(162, 102, 47, 0.22); }
/* Torlicht: beim Zeigen leuchtet die Zeile in der Farbe ihres Bereichs. */
.ks-kurszeile::before {
  content: "";
  position: absolute;
  inset: 5px -4px;
  z-index: -1;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78));
  box-shadow:
    0 0 0 1px rgba(var(--ks-tor), 1),
    0 0 30px rgba(var(--ks-tor), 0.95),
    0 22px 46px -30px rgba(20, 32, 58, 0.55);
  opacity: 0;
  transition: opacity var(--karte-dauer) ease;
}
.ks-kurszeile:hover::before,
.ks-kurszeile:focus-within::before { opacity: 1; }
.ks-kurszeile:hover,
.ks-kurszeile:focus-within { transform: translateX(6px); }
.ks-kurszeile-nummer {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--aurelia-tinte);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, rgba(var(--ks-tor), 1) 72%);
  box-shadow:
    0 0 0 1px rgba(162, 102, 47, 0.38),
    0 0 0 6px color-mix(in srgb, var(--ks-marke) 26%, transparent),
    0 10px 22px -10px rgba(20, 32, 58, 0.5);
}
.ks-kurszeile-stufe {
  margin: 0;
  color: var(--ks-bronze-text);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ks-kurszeile-titel {
  margin: 3px 0 4px;
  font-size: clamp(1.22rem, 2.1vw, 1.6rem);
  line-height: 1.2;
}
.ks-kurszeile-titel a {
  color: var(--aurelia-tinte);
  text-decoration: none;
}
/* Die ganze Zeile ist das Klickziel, der Verweis bleibt der Titel. */
.ks-kurszeile-titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
}
.ks-kurszeile-titel a:focus-visible { outline: none; }
.ks-kurszeile:has(.ks-kurszeile-titel a:focus-visible) {
  outline: 2px solid var(--aurelia-tinte);
  outline-offset: 2px;
  border-radius: 18px;
}
.ks-kurszeile-leitsatz {
  margin: 0;
  color: var(--ks-tinte-leise);
  font-size: 0.97rem;
  line-height: 1.6;
}
.ks-kurszeile-rang { color: var(--ks-bronze-text); }
.ks-kurszeile-umfang {
  display: flex;
  gap: clamp(14px, 2.4vw, 30px);
  margin: 0;
}
.ks-kurszeile-umfang div {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}
.ks-kurszeile-umfang dt {
  color: rgba(20, 32, 58, 0.66);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ks-kurszeile-umfang dd {
  margin: 0;
  color: var(--aurelia-tinte);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.ks-kurszeile-weiter {
  color: var(--ks-bronze-text);
  font-size: 0.92rem;
  font-weight: 650;
  white-space: nowrap;
}
.ks-kurszeile-weiter span {
  display: inline-block;
  transition: transform var(--karte-dauer) var(--karte-kurve);
}
.ks-kurszeile:hover .ks-kurszeile-weiter span,
.ks-kurszeile:focus-within .ks-kurszeile-weiter span { transform: translateX(5px); }
.ks-morgen-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: clamp(18px, 3vw, 30px);
  padding-top: 22px;
  border-top: 1px solid rgba(162, 102, 47, 0.22);
}
.ks-ehrlich {
  display: grid;
  gap: 6px;
  max-width: 640px;
  margin: 0;
  color: var(--ks-tinte-leise);
  font-size: 0.95rem;
}
.ks-ehrlich p { margin: 0; }
/* Auf dem Morgenlicht in Bronze-Tinte, nicht im Sternengold der Buehne. */
.ks-ehrlich .ks-schnupper-link { color: var(--ks-bronze-text); }
.ks-knopf-campus {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

/* ── So lernst du hier: Lernweg ── */
.ks-lernweg {
  --ks-luecke: clamp(12px, 2vw, 26px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ks-luecke);
  margin: clamp(34px, 5vw, 60px) 0 0;
  padding: 0;
  list-style: none;
}
.ks-lernweg-schritt { position: relative; }
/* Die Route: ein Stueck je Etappe, vom eigenen Stern bis zum naechsten. Beim ersten
   Hereinscrollen zeichnet sie sich Stueck fuer Stueck. */
.ks-lernweg-schritt:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 46px;
  right: calc(-1 * var(--ks-luecke));
  height: 2px;
  background: linear-gradient(90deg, var(--g-akzent), color-mix(in srgb, var(--g-akzent) 45%, transparent));
  transform-origin: left center;
  /* Ein Uebergang statt einer Animation: danach haelt nichts mehr einen Wert fest. */
  transition: transform 520ms var(--karte-kurve) calc(var(--ks-i, 0) * 200ms + 420ms);
}
.ks-lernweg-stern {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #11172a;
  font-weight: 700;
  background: radial-gradient(circle at 34% 28%, #fff1bd, #f5c86b 58%, #ad7b2d);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--g-akzent) 15%, transparent),
    0 0 24px color-mix(in srgb, var(--g-akzent) 42%, transparent);
}
.ks-lernweg-schritt:last-child .ks-lernweg-stern {
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--g-akzent) 22%, transparent),
    0 0 0 10px color-mix(in srgb, var(--g-akzent) 8%, transparent),
    0 0 34px color-mix(in srgb, var(--g-akzent) 55%, transparent);
}
.ks-lernweg-schritt h3 {
  margin: 16px 0 4px;
  color: var(--g-text);
  font-size: 1.08rem;
}
.ks-lernweg-schritt p {
  margin: 0;
  color: var(--g-text-dim);
  font-size: 0.93rem;
  line-height: 1.6;
}
html.bc-motion .ks-lernweg[data-bc-reveal]:not(.bc-in) .ks-lernweg-schritt::after { transform: scaleX(0); }
html.bc-motion .ks-lernweg.bc-in .ks-lernweg-stern {
  animation: ks-stern-auf 760ms var(--karte-kurve) calc(var(--ks-i, 0) * 200ms + 220ms) 1 backwards;
}

/* ── Rang-Regler und Muster-Urkunde ── */
.ks-rang {
  display: grid;
  grid-template-columns: minmax(150px, 250px) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 48px);
  align-items: center;
  margin-top: clamp(44px, 6vw, 76px);
  padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 48px);
  border: 1px solid color-mix(in srgb, var(--g-akzent) 30%, var(--g-linie));
  border-radius: 22px;
  background:
    radial-gradient(110% 80% at 18% 100%, color-mix(in srgb, var(--g-akzent) 14%, transparent), transparent 62%),
    linear-gradient(160deg, rgba(18, 26, 48, 0.74), rgba(7, 11, 24, 0.28));
}
.ks-rang-buehne {
  position: relative;
  aspect-ratio: 600 / 780;
}
.ks-rang-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}
.ks-rang-steuer {
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--g-linie);
  border-radius: 16px;
  background: var(--g-hauch-leicht);
}
.ks-rang-buehne::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g-akzent) 46%, transparent), transparent);
}
.ks-rang-buehne::after {
  content: "";
  position: absolute;
  inset: 4% 0 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 190, 0.62), rgba(255, 236, 190, 0) 72%);
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}
.ks-rang-figur {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
.ks-rang.ist-aufstieg .ks-rang-figur { animation: ks-aufstieg 720ms var(--karte-kurve) 1 backwards; }
.ks-rang.ist-aufstieg .ks-rang-buehne::after { animation: ks-aufstieg-licht 980ms var(--karte-kurve) 1 backwards; }
.ks-rang-satz {
  margin: 0 0 16px;
  color: var(--g-text-dim);
  font-size: 0.95rem;
}
.ks-rang-anzeige {
  display: grid;
  gap: 1px;
  margin: 0 0 8px;
}
.ks-rang-nummer {
  color: var(--g-akzent);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ks-rang-name {
  color: var(--g-text);
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  line-height: 1.1;
}
.ks-rang-neu { color: var(--g-text-dim); font-size: 0.93rem; }
.galaxie .ks-rang-regler {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ks-rang-regler::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--g-akzent) calc(var(--ks-rang-anteil, 0) * 100%),
    var(--g-linie) calc(var(--ks-rang-anteil, 0) * 100%));
}
.ks-rang-regler::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--g-akzent) calc(var(--ks-rang-anteil, 0) * 100%),
    var(--g-linie) calc(var(--ks-rang-anteil, 0) * 100%));
}
.ks-rang-regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border: 2px solid #11172a;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff1bd, #f5c86b 58%, #ad7b2d);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-akzent) 26%, transparent), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.ks-rang-regler::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 2px solid #11172a;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff1bd, #f5c86b 58%, #ad7b2d);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-akzent) 26%, transparent), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.galaxie .ks-rang-regler:focus-visible {
  outline: 2px solid var(--g-akzent);
  outline-offset: 4px;
  border-radius: 12px;
}
/* Ohne JavaScript: die Rangliste mit Ausruestung. Mit Regler: eine Skala. */
.ks-rang-liste {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.ks-rang-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 7px 12px;
  border: 1px solid var(--g-linie);
  border-radius: 12px;
  color: var(--g-text);
}
.ks-rang-liste-neu,
.ks-rang-liste-hinweis { color: var(--g-text-dim); font-size: 0.88rem; }
.ks-rang.ist-regler .ks-rang-liste {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding-inline: 11px;
}
.ks-rang.ist-regler .ks-rang-liste li {
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--g-linie);
  cursor: pointer;
  transition: transform var(--karte-dauer) var(--karte-kurve), opacity var(--karte-dauer) ease;
}
.ks-rang.ist-regler .ks-rang-liste li.ist-erreicht { background: color-mix(in srgb, var(--g-akzent) 55%, var(--g-linie)); }
.ks-rang.ist-regler .ks-rang-liste li.ist-aktiv {
  background: var(--g-akzent);
  transform: scale(1.5);
}
.ks-rang.ist-regler .ks-rang-liste li > * {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ks-figuren {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}
.ks-figuren legend {
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  color: var(--g-text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.galaxie .ks-figur-wahl {
  position: relative;
  display: inline-flex;
  margin: 0;
  color: var(--g-text);
}
.galaxie .ks-figur-wahl input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ks-figur-wahl span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 14px;
  border: 1px solid var(--g-linie);
  border-radius: 999px;
  font-size: 0.86rem;
}
.ks-figur-wahl input:checked + span {
  border-color: var(--g-akzent);
  color: var(--g-akzent);
  background: color-mix(in srgb, var(--g-akzent) 10%, transparent);
}
.ks-figur-wahl input:focus-visible + span {
  outline: 2px solid var(--g-akzent);
  outline-offset: 2px;
}

.ks-zeugnis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  margin-top: clamp(24px, 3vw, 36px);
}
.ks-urkunde {
  display: grid;
  align-content: start;
  gap: 14px;
  margin: 0;
}
.ks-urkunde-blatt {
  --aurelia-tinte: #14203A;
  --aurelia-bronze: #A2662F;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 3.4vw, 38px) clamp(18px, 3vw, 32px);
  border: 1px solid rgba(162, 102, 47, 0.5);
  border-radius: 18px;
  color: var(--aurelia-tinte);
  text-align: center;
  background: #FAF5EA;
  box-shadow:
    inset 0 0 0 6px #FAF5EA,
    inset 0 0 0 7px rgba(162, 102, 47, 0.32),
    0 34px 70px -38px rgba(0, 0, 0, 0.75);
  transform: rotate(-1.1deg);
}
.ks-urkunde-grund {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.ks-urkunde-blatt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(250, 245, 234, 0.62), rgba(250, 245, 234, 0.9) 44%, rgba(250, 245, 234, 0.96));
}
/* Der Glanz, der einmal ueber das Blatt zieht. */
.ks-urkunde-blatt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 64%);
  opacity: 0;
  transform: translateX(-120%);
}
html.bc-motion .ks-urkunde.bc-in .ks-urkunde-blatt::after { animation: ks-glanzlauf 1600ms var(--karte-kurve) 600ms 1 backwards; }
.ks-urkunde-siegel {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: var(--aurelia-tinte);
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: radial-gradient(circle at 34% 28%, #fff1bd, #D9B36C 58%, #A2662F);
  box-shadow: 0 0 0 3px #FAF5EA, 0 0 0 4px rgba(162, 102, 47, 0.5), 0 8px 16px -8px rgba(0, 0, 0, 0.45);
}
.ks-urkunde-figur {
  display: block;
  width: 88px;
  height: auto;
  margin: 0 auto 2px;
}
.ks-urkunde-kicker {
  margin: 0;
  color: rgb(122, 82, 50);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ks-urkunde-titel {
  margin: 2px 0 6px;
  color: var(--aurelia-tinte);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ks-urkunde-name { margin: 0 0 4px; color: var(--aurelia-tinte); }
.ks-urkunde-name strong {
  padding: 0 6px;
  border-bottom: 1px dashed rgba(162, 102, 47, 0.7);
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: 1.28rem;
  font-style: italic;
}
.ks-urkunde-satz {
  max-width: 32ch;
  margin: 8px auto 16px;
  color: rgba(20, 32, 58, 0.82);
  font-size: 0.96rem;
  font-style: italic;
}
.ks-urkunde-fakten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  text-align: left;
}
.ks-urkunde-fakten div {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
}
.ks-urkunde-fakten dt {
  color: rgba(20, 32, 58, 0.68);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ks-urkunde-fakten dd {
  margin: 2px 0 0;
  color: var(--aurelia-tinte);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
}
/* Der Aufdruck: unuebersehbar, aber das Blatt bleibt lesbar. */
.ks-urkunde-muster {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  padding: 0 0.3em;
  border: 4px solid rgba(162, 102, 47, 0.26);
  border-radius: 14px;
  color: rgba(162, 102, 47, 0.26);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-18deg);
  pointer-events: none;
}
.ks-urkunde figcaption {
  color: var(--g-text-dim);
  font-size: 0.9rem;
  text-align: center;
}

/* ── Merkkasten: die Abstaende auf einer Zeitachse ── */
.ks-merk {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  align-self: stretch;
  align-content: center;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, #4F8F83 52%, var(--g-linie));
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, #4F8F83 20%, transparent), rgba(79, 143, 131, 0) 72%);
}
.ks-merk-text p,
.ks-merk-fuss { margin: 0; color: var(--g-text-dim); }
.ks-merk-fuss { font-size: 0.92rem; }
.ks-merk-zeitstrahl {
  position: relative;
  height: 84px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ks-merk-zeitstrahl::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 22px;
  right: 22px;
  height: 2px;
  background: linear-gradient(90deg, #4F8F83, color-mix(in srgb, #4F8F83 30%, transparent));
}
.ks-merk-zeitstrahl li {
  position: absolute;
  top: 21px;
  left: calc(22px + (100% - 44px) * var(--ks-pos, 0) / 100);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--g-text);
  font-size: 0.8rem;
  white-space: nowrap;
  transform: translateX(-50%);
}
.ks-merk-punkt {
  width: 18px;
  height: 18px;
  border: 2px solid #4F8F83;
  border-radius: 50%;
  background: color-mix(in srgb, #4F8F83 30%, var(--g-himmel));
  box-shadow: 0 0 14px color-mix(in srgb, #4F8F83 60%, transparent);
}
html.bc-motion .ks-merk.bc-in .ks-merk-punkt {
  animation: ks-stern-auf 640ms var(--karte-kurve) calc(var(--ks-i, 0) * 160ms + 200ms) 1 backwards;
}

/* ── Fragen und wer dahinter steht ── */
.ks-fragen {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
html body.galaxie .ks-fragen .beirat-faq {
  margin: 0;
  padding: 0;
  background: transparent;
}
.ks-fragen .beirat-faq-item { background: color-mix(in srgb, var(--g-karte) 40%, transparent); }
.ks-fragen .beirat-faq-a { line-height: 1.7; }
.ks-gruender {
  position: sticky;
  top: 96px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid color-mix(in srgb, var(--g-akzent) 30%, var(--g-linie));
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(18, 26, 48, 0.74), rgba(7, 11, 24, 0.28));
}
.ks-gruender-namen {
  margin: 6px 0 2px;
  color: var(--g-text);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}
.ks-gruender-ort {
  margin: 0 0 14px;
  color: var(--g-akzent);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.ks-gruender p { color: var(--g-text-dim); }
.ks-gruender p.ks-gruender-ort,
.ks-gruender p.beirat-archive-kicker { color: var(--g-akzent); }
.ks-weiter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--g-akzent);
  font-weight: 600;
  text-decoration: none;
}
.ks-weiter:hover { text-decoration: underline; }

/* ── Dranbleiben ── */
.ks-dran { margin-bottom: clamp(24px, 4vw, 48px); }
.ks-dran .woche-karte { margin-top: clamp(28px, 4vw, 44px); }
.ks-dran .public-blogauswahl { margin: clamp(40px, 6vw, 64px) 0 0; }
.ks-dran .public-sektionskopf { align-items: center; }
.ks-dran .public-archivlink { gap: 6px; }
.ks-dran .public-kartenfeld { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-dran .public-blogkarte { min-height: 220px; }
/* Drei Spalten bis hinunter zu 561 px: lange zusammengesetzte Woerter im Titel
   («Tabellenextraktion») sind breiter als eine Karte und liefen sonst ueber den Rand. */
.ks-dran .public-blogkarte h3 { overflow-wrap: break-word; hyphens: auto; }
.ks-dran .briefing-box .kicker { margin-inline: auto; }
.ks-dran .briefing-form input[type="email"] { flex: 1 1 280px; width: auto; max-width: 420px; }

/* ── Einmalige Bewegungen (nur transform und opacity) ── */
@keyframes ks-fenster-auf {
  from { opacity: 0.4; transform: scale(1.08); }
  to { opacity: 1; transform: none; }
}
@keyframes ks-glanzlauf {
  0% { opacity: 0; transform: translateX(-110%); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translateX(110%); }
}
@keyframes ks-stern-auf {
  0% { opacity: 0.3; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ks-aufstieg {
  0% { opacity: 0.55; transform: translateY(10px) scale(0.96); }
  55% { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes ks-aufstieg-licht {
  0% { opacity: 0; transform: scale(0.7); }
  40% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.2); }
}
@keyframes ks-horizont-auf {
  from { opacity: 0; transform: translateY(18px) scale(1.03); }
  to { opacity: 1; transform: none; }
}

/* ── Heller Modus: die Buehne ist hell, der Campus behaelt sein Licht ── */
/* Der Kicker: Messing auf einem Goldhauch ergab 4,1:1; auf Weiss sind es 5,4:1. */
html[data-bc-theme="light"] .public-hero .beirat-archive-kicker { background: #ffffff; }
/* Die Kursanzeige: dunkle Tinte auf der hellen Karte, der Name in Akzentfarbe (4,5:1). */
html[data-bc-theme="light"] .public-kursanzeige {
  border-color: var(--g-linie);
  background: var(--g-karte);
  color: var(--g-text);
}
html[data-bc-theme="light"] .public-kursanzeige strong { color: var(--g-akzent); }
html[data-bc-theme="light"] .ks-frei {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--g-akzent) 55%, transparent);
  box-shadow: 0 2px 10px rgba(19, 26, 40, 0.06);
}
html[data-bc-theme="light"] .ks-frei-siegel { box-shadow: none; }
html[data-bc-theme="light"] .ks-hero-kurse a::before {
  box-shadow: 0 0 0 3px var(--g-himmel), 0 0 0 4px color-mix(in srgb, var(--g-akzent) 55%, transparent);
}
html[data-bc-theme="light"] .ks-horizont::after { display: none; }
html[data-bc-theme="light"] .ks-h1-akzent {
  background: none;
  color: var(--g-akzent);
  -webkit-text-fill-color: currentColor;
}
html[data-bc-theme="light"] .public-hero-aktionen .knopf.btn-primary {
  background: var(--g-akzent);
  color: #ffffff;
  box-shadow: 0 10px 24px -14px rgba(138, 100, 16, 0.8);
}
html[data-bc-theme="light"] .public-hero-aktionen .knopf.btn-primary:hover,
html[data-bc-theme="light"] .public-hero-aktionen .knopf.btn-primary:focus-visible { color: #ffffff; }
html[data-bc-theme="light"] .ks-nacht {
  background: linear-gradient(180deg, rgba(233, 237, 244, 0) 0%, color-mix(in srgb, var(--aurelia-himmel) 45%, #ffffff) 100%);
}
html[data-bc-theme="light"] .ks-himmel {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--aurelia-himmel) 45%, #ffffff) 0%,
    var(--ks-himmel-mitte) 48%,
    var(--aurelia-himmel) 100%);
}
html[data-bc-theme="light"] .ks-campus { box-shadow: 0 0 0 1px rgba(162, 102, 47, 0.35), 0 34px 70px -40px rgba(19, 26, 40, 0.45); }
html[data-bc-theme="light"] .ks-morgen { box-shadow: 0 30px 60px -46px rgba(19, 26, 40, 0.35); }
html[data-bc-theme="light"] :is(.ks-rang, .ks-gruender) {
  background: #ffffff;
  border-color: var(--g-linie);
  box-shadow: 0 2px 10px rgba(19, 26, 40, 0.06);
}
html[data-bc-theme="light"] .ks-merk {
  background: linear-gradient(135deg, rgba(79, 143, 131, 0.12), rgba(79, 143, 131, 0.02) 72%);
}
html[data-bc-theme="light"] .ks-merk-punkt { background: #ffffff; }
html[data-bc-theme="light"] .ks-fragen .beirat-faq-item { background: #ffffff; }
html[data-bc-theme="light"] .ks-rang-regler::-webkit-slider-thumb { border-color: #ffffff; }

/* ── Tablet und Telefon ── */
/* Der Hero: unten Platz fuer den Horizont. Der Kompass steht hier nicht mehr in der Ecke,
   sondern gross ueber dem Kicker (Variante M-B, Charles 22.09.2026; Regeln in «PHASE B»):
   Innenabstand oben und die Lage des Kompasses kommen von dort. */
@media (max-width: 880px) {
  /* Eine Spalte: der Horizont liegt ueber die ganze Breite unter dem Text. Text nur ueber dem
     obersten Fuenftel, wo die Maske fast alles ausblendet. */
  .public-hero:has(.ks-horizont) {
    --ks-horizont-hoehe: clamp(150px, 24vw, 200px);
    /* Dieselben Werte wie der Hero in «PHASE B» — :has() ist spezifischer und
       wuerde ihn sonst mit dem Desktop-Abstand ueberschreiben. */
    padding-top: 28px;
    padding-bottom: calc(var(--ks-horizont-hoehe) * 0.8);
  }
  .ks-horizont {
    left: 0;
    --ks-maske-seite: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, #000 18%, #000 82%, rgba(0, 0, 0, 0.5) 100%);
  }
}
@media (max-width: 560px) {
  .public-hero:has(.ks-horizont) {
    --ks-horizont-hoehe: 150px;
    padding-top: 20px;
    padding-bottom: calc(var(--ks-horizont-hoehe) * 0.8);
  }
  .public-hero:has(.ks-horizont) .public-hero-aktionen { margin: 22px 0 14px; }
  .ks-hero-zusage { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 12px; }
  /* Drei schmale Spalten: der Stern steht ueber dem Namen, sonst passt «Fortgeschrittene»
     bei 360 px nicht neben die anderen beiden. */
  .ks-hero-kurse {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 0 10px;
  }
  .ks-hero-kurse a { grid-template-columns: auto; grid-template-rows: auto; row-gap: 2px; }
  .ks-hero-kurse a::before { grid-row: auto; margin-bottom: 4px; }
  .ks-hero-kurs-name { font-size: 0.9rem; }
  .ks-hero-kurs-zeit { font-size: 0.8rem; }
}
@media (max-width: 980px) {
  .ks-fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ks-fakten li:nth-child(4) { border-left: 0; }
  .ks-fakten li:nth-child(n + 4) { border-top: 1px solid color-mix(in srgb, var(--g-akzent) 18%, transparent); }
  .ks-fakten .ks-fakt-frei { grid-column: span 2; }
  .ks-kurszeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ks-kurszeile-weiter { display: none; }
  .ks-rang-text { grid-template-columns: 1fr; }
  .ks-zeugnis { grid-template-columns: 1fr; }
  .ks-urkunde { width: min(560px, 100%); margin-inline: auto; }
  .ks-fragen { grid-template-columns: 1fr; }
  .ks-gruender { position: static; }
}
@media (max-width: 880px) {
  .ks-lernweg { --ks-luecke: 18px; grid-template-columns: 1fr; }
  .ks-lernweg-schritt:not(:last-child)::after {
    top: 46px;
    bottom: calc(-1 * var(--ks-luecke));
    left: 22px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--g-akzent), color-mix(in srgb, var(--g-akzent) 45%, transparent));
    transform-origin: center top;
  }
  html.bc-motion .ks-lernweg[data-bc-reveal]:not(.bc-in) .ks-lernweg-schritt::after { transform: scaleY(0); }
  .ks-lernweg-schritt {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 16px;
  }
  .ks-lernweg-stern { grid-row: span 2; }
  .ks-lernweg-schritt h3 { margin: 10px 0 2px; }
}
@media (max-width: 760px) {
  .ks-dran .public-kartenfeld { grid-template-columns: 1fr; }
  .ks-dran .public-blogkarte { min-height: 0; }
}
@media (max-width: 720px) {
  .ks-kurszeile {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 16px;
    row-gap: 12px;
  }
  .ks-kurszeile-nummer { width: 44px; height: 44px; font-size: 0.9rem; }
  .ks-kurszeile-umfang { grid-column: 2; }
  .ks-kurszeile-weiter { display: inline-block; grid-column: 2; }
  .ks-kurszeile:hover,
  .ks-kurszeile:focus-within { transform: none; }
  .ks-rang { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .ks-rang-buehne { width: min(200px, 56%); justify-self: center; }
}
@media (max-width: 560px) {
  /* «Beirat Akademie» steht jetzt vorn in der Navigation. Drei gleich breite Spalten
     wuerden das Label bei 360 px abschneiden; so richtet sich jede Spalte nach ihrem
     laengsten Eintrag (auch «Kommandobruecke» fuer Angemeldete). */
  .missionslinks {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
  }
  .public-hero .beirat-archive-kicker { letter-spacing: 0.06em; font-size: 0.72rem; }
  .ks-kurse { margin-inline: -18px; }
  .ks-kurse > div { padding-inline: 18px; }
  .ks-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-fakten li { padding: 14px 12px; }
  .ks-fakten li:nth-child(n) { border-left: 0; border-top: 0; }
  .ks-fakten li:nth-child(even) { border-left: 1px solid color-mix(in srgb, var(--g-akzent) 18%, transparent); }
  .ks-fakten li:nth-child(n + 3) { border-top: 1px solid color-mix(in srgb, var(--g-akzent) 18%, transparent); }
  .ks-fakten .ks-fakt-frei { grid-column: 1 / -1; border-left: 0; }
  .ks-kurszeile { padding-inline: 4px; }
  .ks-kurszeile-umfang dd { font-size: 1.25rem; }
  .ks-morgen-fuss .ks-knopf-campus { width: 100%; justify-content: center; }
  .ks-urkunde-fakten { grid-template-columns: 1fr; }
  .ks-urkunde-siegel { width: 52px; height: 52px; font-size: 0.42rem; }
  /* Auf dem Telefon stehen die Beschriftungen abwechselnd ueber und unter der Achse. */
  .ks-merk-zeitstrahl { height: 104px; }
  .ks-merk-zeitstrahl::before { top: 51px; }
  .ks-merk-zeitstrahl li { top: 42px; font-size: 0.74rem; }
  .ks-merk-zeitstrahl li:nth-child(even) {
    top: auto;
    bottom: calc(100% - 60px);
    flex-direction: column-reverse;
  }
}

/* ── Reduzierte Bewegung: alles steht, alles ist da ── */
@media (prefers-reduced-motion: reduce) {
  .ks-horizont img,
  .ks-campus img,
  .ks-campus::after,
  .ks-lernweg-schritt::after,
  .ks-lernweg-stern,
  .ks-rang-figur,
  .ks-rang-buehne::after,
  .ks-urkunde-blatt::after,
  .ks-merk-punkt,
  .ks-kurszeile,
  .ks-kurszeile::before,
  .ks-kurszeile-weiter span,
  .ks-rang-liste li,
  .public-hero-aktionen .knopf span[aria-hidden="true"],
  .ks-knopf-campus span[aria-hidden="true"] {
    animation: none !important;
    transition: none !important;
  }
  .ks-kurszeile:hover,
  .ks-kurszeile:focus-within,
  .ks-kurszeile:hover .ks-kurszeile-weiter span,
  .public-hero-aktionen .knopf:hover span[aria-hidden="true"],
  .ks-knopf-campus:hover span[aria-hidden="true"] { transform: none; }
  .ks-urkunde-blatt { transform: none; }
}

/* ── Kompass-Check «Wo stehst du mit KI?» (#kompass-check) ──────
   Drei Abrufkarten auf einer Sternroute: jede erste Antwort laesst ihren
   Stern aufleuchten, eine sichere Antwort zieht einmal einen Goldglanz
   ueber die Karte, falsch und «Weiss ich nicht» bleiben ruhig (kein Rot,
   keine Durchstreichung, keine Funken). Das Ergebnis landet einmal, die
   Hero-Nadel peilt den Kurs an, die Zeile in #kurse traegt «Dein
   Startpunkt». Keine Punktzahl. Bewegung wie oben: einmalig, backwards. */
.ks-check {
  --innen-gold: var(--g-akzent);
  --innen-tinte: var(--g-text);
  --innen-patina: #5fa08c;
  scroll-margin-top: 96px;
  margin-top: clamp(40px, 6vw, 72px);
}
.ks-route {
  display: grid;
  gap: 18px;
  max-width: 820px;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}
.ks-frage,
.ks-ziel {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: clamp(12px, 2.4vw, 24px);
  align-items: start;
}
/* Die Route: ein Stueck von Stern zu Stern. */
.ks-frage::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: -26px;
  left: 14px;
  width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-akzent) 55%, transparent), color-mix(in srgb, var(--g-akzent) 18%, transparent));
}
.ks-route-stern {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  margin-top: 18px;
  border: 2px solid color-mix(in srgb, var(--g-akzent) 60%, transparent);
  border-radius: 50%;
  background: var(--g-himmel);
}
.ks-route-stern::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff1bd, #f5c86b 58%, #ad7b2d);
  box-shadow: 0 0 16px rgba(245, 200, 107, 0.8);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 420ms ease, transform 520ms var(--karte-kurve);
}
.ks-frage.ist-beantwortet .ks-route-stern::after,
.ks-ziel.ist-gesetzt .ks-route-stern::after {
  opacity: 1;
  transform: none;
}
.ks-route-stern--ziel {
  width: 30px;
  height: 30px;
  border-style: dashed;
}
.ks-ziel.ist-gesetzt .ks-route-stern--ziel {
  border-style: solid;
  box-shadow: 0 0 0 6px rgba(var(--ks-tor, 245, 200, 107), 0.22), 0 0 26px rgba(var(--ks-tor, 245, 200, 107), 0.7);
}
.ks-frage-karte,
.ks-ergebnis {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid color-mix(in srgb, var(--g-akzent) 26%, var(--g-linie));
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(18, 26, 48, 0.78), rgba(7, 11, 24, 0.32));
}
.ks-frage-nummer {
  margin: 0 0 8px;
  color: var(--g-akzent);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ks-check .beirat-abrufkarte {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.ks-check .bak-check-frage {
  margin: 0 0 14px;
  color: var(--g-text);
  font-size: clamp(1.06rem, 1.6vw, 1.2rem);
  font-weight: 650;
  line-height: 1.5;
}
.ks-check .bak-check-antworten { display: grid; gap: 8px; }
.galaxie .ks-check .bak-check-antwort {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 16px;
  border: 1px solid var(--g-linie);
  border-radius: 12px;
  background: var(--g-hauch-leicht);
  color: var(--g-text);
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--karte-dauer) ease, transform var(--karte-dauer) var(--karte-kurve);
}
.galaxie .ks-check .bak-check-antwort:not([aria-disabled="true"]):hover,
.galaxie .ks-check .bak-check-antwort:not([aria-disabled="true"]):focus-visible {
  border-color: var(--g-akzent);
  color: var(--g-text);
  filter: none;
  transform: translateX(3px);
}
.galaxie .ks-check .bak-check-antwort.ks-offen {
  border-style: dashed;
  color: var(--g-text-dim);
}
/* Nach der ersten Antwort: aria-disabled statt disabled, damit der Fokus auf der gewaehlten
   Antwort bleibt (startseite.js). Der Fokusring bleibt sichtbar. */
.galaxie .ks-check .bak-check-antwort[aria-disabled="true"] { cursor: default; }
.galaxie .ks-check .bak-check-antwort.ist-richtig {
  border-color: var(--g-akzent);
  background: color-mix(in srgb, var(--g-akzent) 14%, transparent);
  color: var(--g-text);
  font-weight: 650;
  opacity: 1;
}
/* Kein Rot, keine Durchstreichung: daneben ist hier Teil des Lernens. */
.galaxie .ks-check .bak-check-antwort.ist-falsch {
  border-color: var(--g-linie);
  background: transparent;
  color: var(--g-text-dim);
  text-decoration: none;
  opacity: 0.85;
}
.ks-antwort-marke {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  line-height: 1.5;
  vertical-align: 1px;
  white-space: nowrap;
}
.galaxie .ks-check .bak-check-antwort.ist-richtig .ks-antwort-marke {
  border-color: var(--g-akzent);
  background: var(--g-akzent);
  color: #11172a;
}
.ks-check .bak-check-erklaerung {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid #5fa08c;
  border-radius: 0 12px 12px 0;
  background: var(--g-hauch-leicht);
  color: var(--g-text);
  line-height: 1.65;
}
.ks-frage-aufloesung { margin: 14px 0 0; color: var(--g-text-dim); }
.ks-frage-weiter { margin: 6px 0 0; }
/* Einmal Gold ueber die Karte, wenn die erste Antwort sitzt. */
.ks-frage-karte::after,
.ks-ergebnis::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(245, 200, 107, 0) 35%, rgba(245, 200, 107, 0.26) 50%, rgba(245, 200, 107, 0) 65%);
  opacity: 0;
  transform: translateX(-110%);
}
.ks-frage.ist-richtig .ks-frage-karte::after { animation: ks-glanzlauf 640ms ease-out 1 backwards; }
.ks-frage.ist-richtig .ks-frage-karte { border-color: color-mix(in srgb, var(--g-akzent) 55%, var(--g-linie)); }

.ks-ergebnis-wartet { margin: 0 0 10px; color: var(--g-text-dim); }
.ks-ziel[data-kompass-gesetzt="einsteiger"] { --ks-tor: 255, 240, 214; }
.ks-ziel[data-kompass-gesetzt="fortgeschritten"] { --ks-tor: 214, 244, 250; }
.ks-ziel[data-kompass-gesetzt="experte"] { --ks-tor: 255, 226, 160; }
.ks-ziel.ist-gesetzt .ks-ergebnis {
  border-color: color-mix(in srgb, var(--g-akzent) 55%, var(--g-linie));
  box-shadow: 0 0 0 1px rgba(245, 200, 107, 0.2), 0 24px 60px -34px rgba(245, 200, 107, 0.45);
}
.ks-ergebnis-kurs:not([hidden]) { animation: ks-landen 460ms var(--karte-kurve) 1 backwards; }
.ks-ziel.ist-gesetzt .ks-ergebnis::after { animation: ks-glanzlauf 900ms ease-out 200ms 1 backwards; }
.ks-ergebnis-titel {
  margin: 4px 0 8px;
  color: var(--g-text);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}
.ks-ergebnis-satz { margin: 0 0 6px; color: var(--g-text); font-weight: 600; }
.ks-ergebnis-umfang { margin: 0; color: var(--g-text-dim); }
.ks-ergebnis-weg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 24px;
  margin: 16px 0 0;
}
.ks-selbst {
  margin: 14px 0 0;
  color: var(--g-text-dim);
  font-size: 0.95rem;
}
.ks-selbst a { color: var(--g-akzent); }
.ks-gruss {
  margin: 10px 0 0;
  color: var(--g-akzent);
  font-size: 0.92rem;
  font-style: italic;
}
/* Der Begleiter im Check wohnt neben der Karte, nie in ihr (Gutachten 23.09.2026: der
   ausgeblendete Platzhalter liess ein Loch in der Karte). Schmal steht er darunter und nimmt
   nur Platz ein, solange er da ist; breit steht er im Rand rechts neben der Karte und nimmt
   gar keinen. Blase auf Kartenfarbe (begleiter.css ist die Quelle der Figur). */
.ks-lumo-platz { grid-column: 2; }
.ks-lumo-platz:empty { display: none; }
.ks-check .begleiter { margin: 2px 0 0; }
.ks-check .begleiter-blase {
  margin-bottom: 0.6rem;
  background: var(--g-karte);
  color: var(--g-text);
}

@media (min-width: 1100px) {
  .ks-route { max-width: min(820px, calc(100% - 250px)); }
  .ks-lumo-platz {
    position: absolute;
    left: calc(100% + 24px);
    bottom: 10px;
    width: 216px;
  }
  .ks-check .begleiter {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0;
  }
  .ks-check .begleiter-blase { margin: 0; }
}

/* «Dein Startpunkt» in #kurse: die empfohlene Zeile leuchtet in ihrem Torlicht. */
.ks-startpunkt {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--aurelia-tinte);
  color: var(--aurelia-cream);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  vertical-align: 1px;
}
.ks-kurszeile.ist-startpunkt::before { opacity: 1; }
html.bc-motion .ks-kurszeile.ist-startpunkt .ks-startpunkt { animation: ks-stern-auf 620ms var(--karte-kurve) 1 backwards; }

/* Peilung der Hero-Nadel: eine eigene Gruppe zwischen Eintritt und Nadel. Sie dreht per
   CSS-Transition ueber die eigenstaendige rotate-Eigenschaft; public-kompass.js schreibt
   weiter nur die Nadel selbst. Die Zielmarken stehen auf denselben Winkeln
   (KOMPASS_CHECK «peilung») und leuchten im Torlicht, sobald der Kurs gesetzt ist. */
.public-kompass-kurs {
  transform-box: view-box;
  transform-origin: center;
  rotate: var(--kompass-peilung, 0deg);
  transition: rotate 1700ms cubic-bezier(0.3, 1.45, 0.45, 1);
}
.public-kompass-ziel circle { transition: opacity 700ms ease; }
.public-kompass-ziel-marke {
  fill: rgba(7, 11, 24, 0.7);
  stroke: rgba(245, 200, 107, 0.6);
  stroke-width: 2;
}
.public-kompass-ziel-licht {
  fill: rgb(var(--ks-tor, 255, 226, 160));
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(var(--ks-tor, 255, 226, 160), 0.9));
}
.public-kompass-ziel[data-ziel="einsteiger"] { --ks-tor: 255, 240, 214; }
.public-kompass-ziel[data-ziel="fortgeschritten"] { --ks-tor: 214, 244, 250; }
.public-kompass-ziel[data-ziel="experte"] { --ks-tor: 255, 226, 160; }
.public-kompass[data-peilung="einsteiger"] .public-kompass-ziel[data-ziel="einsteiger"] .public-kompass-ziel-licht,
.public-kompass[data-peilung="fortgeschritten"] .public-kompass-ziel[data-ziel="fortgeschritten"] .public-kompass-ziel-licht,
.public-kompass[data-peilung="experte"] .public-kompass-ziel[data-ziel="experte"] .public-kompass-ziel-licht {
  opacity: 1;
  transition-delay: 1100ms;
}

/* Kompass 2.0 (Stufe 1, feat/kompass-ruhe) legt als zweite Animation derselben Liste eine
   Suche (rotate, ±4,5°) auf .public-kompass-nadel-eintritt, den Elternknoten der Kursgruppe.
   Mit gesetztem Kurs haelt sie an, und ihr Winkel faellt auf null: die Nadel steht dann auf der
   Zielmarke und pendelt nicht um sie. Die Aktivierung (Index 0, transform) laeuft weiter; ohne
   die Suche ist der zweite Wert der Liste wirkungslos. */
.public-kompass[data-peilung].ist-aktiviert.ist-sichtbar .public-kompass-nadel-eintritt {
  animation-play-state: running, paused;
}
.public-kompass[data-peilung] .public-kompass-nadel-eintritt { rotate: none !important; }
/* «Die Nadel im Kompass oben …»: nur wo der Kompass oben gross genug zu sehen ist. */
@media (max-width: 880px) {
  .ks-peil-hinweis { display: none; }
}

@keyframes ks-landen {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

html[data-bc-theme="light"] :is(.ks-frage-karte, .ks-ergebnis) {
  background: #ffffff;
  border-color: var(--g-linie);
  box-shadow: 0 2px 10px rgba(19, 26, 40, 0.06);
}
html[data-bc-theme="light"] .ks-route-stern { background: #ffffff; }
html[data-bc-theme="light"] .galaxie .ks-check .bak-check-antwort { background: #f4f6fa; }
html[data-bc-theme="light"] .galaxie .ks-check .bak-check-antwort.ist-richtig .ks-antwort-marke { color: #ffffff; }

@media (max-width: 560px) {
  .ks-frage,
  .ks-ziel { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
  .ks-route-stern { width: 22px; height: 22px; margin-top: 20px; }
  .ks-route-stern::after { inset: 4px; }
  .ks-frage::before { left: 10px; top: 42px; }
  .ks-frage-karte,
  .ks-ergebnis { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-route-stern::after,
  .ks-frage-karte::after,
  .ks-ergebnis::after,
  .ks-ergebnis-kurs,
  .ks-startpunkt,
  .galaxie .ks-check .bak-check-antwort,
  .public-kompass-kurs,
  .public-kompass-ziel circle {
    animation: none !important;
    transition: none !important;
  }
  .galaxie .ks-check .bak-check-antwort:not([aria-disabled="true"]):hover,
  .galaxie .ks-check .bak-check-antwort:not([aria-disabled="true"]):focus-visible { transform: none; }
}

/* ============================================================
   VORSPANN (Startseite, Klassen «lauftext»)
   ============================================================
   Einmal beim allerersten Besuch: eine Markenzeile am Fluchtpunkt, fuenf
   Zeilen in Sternengold, die schraeg in die Tiefe zum Kompass steigen, und
   die Landung im Text der echten H1. Regeln, Zustaende und Grenzen stehen im
   Kanon academy-experience §6a; hier nur, was das Stylesheet dazu tut.
   Markup: templates/includes/vorspann.html, Tor und Steuerung daneben.

   - Ohne html.ist-lauftext (setzt nur das Tor im Kopf) ist die Huelle aus.
     Kein hidden-Attribut: [hidden] traegt oben !important.
   - Farben nur unter html.ist-lauftext: die Huelle steht auch beim
     Wiederkehrer im DOM und soll dort nichts erben oder vererben.
   - Nur transform und opacity, jede Animation laeuft genau einmal; die
     Landung endet bei 5,6 s, der Deckel liegt bei 8 s ab dem Tor.
   - Der Fluchtpunkt ist die Kompassmitte (--flucht-x/-y, von der Steuerung
     gemessen). Eine um den Winkel a gekippte Ebene flieht perspektivisch
     zu einem Punkt, der P * cot(a) ueber dem Augpunkt liegt. Der Augpunkt
     (perspective-origin) sitzt unten auf der Kippachse, dort sind die
     Zeilen unverzerrt; die Steuerung setzt die Brennweite
     --lauftext-tiefe = (Hoehe - Sockel - Fluchtpunkt) / cot(a) und die
     Wegstrecke --lauftext-weg. --lauftext-kot ist cot(a) zum Winkel unten.
   ------------------------------------------------------------ */
.lauftext { display: none; }
html.ist-lauftext .lauftext {
  --lauftext-kot: 2.246; /* cot(24deg) */
  --lauftext-breite: min(92vw, 44rem);
  /* Die Kippachse liegt ueber dem Knopf «Vorspann ueberspringen». */
  --lauftext-sockel: 84px;
  display: block;
}

/* Der Vorhang: dunkles All mit festen Mikrosternen. Er traegt auch dort,
   wo das Universum fehlt (helles Design, bevor die Engine es zeichnet). */
html.ist-lauftext .lauftext-grund {
  position: fixed;
  inset: 0;
  z-index: 120;
  cursor: pointer;
  background:
    radial-gradient(circle at var(--flucht-x, 70%) var(--flucht-y, 40%), rgba(245, 200, 107, 0.14), transparent 30%),
    radial-gradient(circle at 9% 16%, rgba(232, 236, 248, 0.85) 0 1px, transparent 1.8px),
    radial-gradient(circle at 21% 64%, rgba(245, 200, 107, 0.8) 0 1.1px, transparent 2px),
    radial-gradient(circle at 33% 28%, rgba(232, 236, 248, 0.7) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 46% 86%, rgba(165, 183, 255, 0.75) 0 1px, transparent 1.8px),
    radial-gradient(circle at 58% 12%, rgba(232, 236, 248, 0.8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 67% 58%, rgba(245, 200, 107, 0.75) 0 1.1px, transparent 2px),
    radial-gradient(circle at 81% 22%, rgba(232, 236, 248, 0.75) 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 74%, rgba(165, 183, 255, 0.7) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 5% 90%, rgba(232, 236, 248, 0.6) 0 0.8px, transparent 1.6px),
    #070b18;
  transition: opacity 600ms var(--karte-kurve);
}
/* Einzige Ausnahme vom z-index -1 des Universums (cinema.css): solange der
   Vorhang deckt, fliegen die Sterne ueber ihm. Mit dem Beginn der
   Ausblendung liegen sie sofort wieder hinter allem Text. */
html.ist-lauftext:not(.ist-lauftext-ende) .bc-universe { z-index: 121; }

html.ist-lauftext .lauftext-buehne {
  position: fixed;
  inset: 0;
  z-index: 122;
  overflow: clip;
  pointer-events: none;
  perspective: var(--lauftext-tiefe, 220px);
  perspective-origin: var(--flucht-x, 50%) calc(100% - var(--lauftext-sockel));
  transition: opacity 600ms var(--karte-kurve);
}
html.ist-lauftext .lauftext-marke {
  position: absolute;
  left: var(--flucht-x, 50%);
  top: var(--flucht-y, 30%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: #e8ecf8;
  font-size: clamp(0.8rem, 1.25vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(245, 200, 107, 0.45);
  opacity: 0;
}
/* Die Ebene steht unter dem Fluchtpunkt, soweit das Fenster es zulaesst. */
html.ist-lauftext .lauftext-ebene {
  position: absolute;
  left: clamp(4vw, calc(var(--flucht-x, 50%) - var(--lauftext-breite) / 2), calc(100% - var(--lauftext-breite) - 4vw));
  bottom: var(--lauftext-sockel);
  width: var(--lauftext-breite);
  height: 0;
  transform-origin: 50% 100%;
  transform: rotateX(24deg);
  transform-style: preserve-3d;
}
html.ist-lauftext .lauftext-zeile {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  color: #f5c86b;
  font-size: clamp(1.1rem, 2.7vw, 1.9rem);
  font-weight: 560;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0 18px rgba(245, 200, 107, 0.28);
  opacity: 0;
}
html.ist-lauftext .lauftext-zeile strong {
  color: #fff1bd;
  font-weight: 700;
}
html.ist-lauftext .lauftext-landung {
  position: absolute;
  margin: 0;
  padding: 0;
  color: #e8ecf8;
  text-wrap: balance;
  opacity: 0;
}
/* Die Akzentzeile der H1 bleibt Gold, auch im hellen Design: der Vorhang
   ist immer dunkel. */
html.ist-lauftext .lauftext-landung .ks-h1-akzent {
  background: linear-gradient(100deg, #fff1bd 0%, #f5c86b 40%, #ad7b2d 78%, #f6d98f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html.ist-lauftext .lauftext-weiter {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 123;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(245, 200, 107, 0.6);
  border-radius: 999px;
  background: #0d1326;
  color: #f5c86b;
  font-size: 0.92rem;
  transition: opacity 600ms var(--karte-kurve);
}
html.ist-lauftext .lauftext-weiter:hover { color: #fff1bd; }
html.ist-lauftext .lauftext-weiter:focus-visible {
  outline: 2px solid #f5c86b;
  outline-offset: 3px;
}

/* Die Zeitachse. Takt 560 ms; jede Zeile ist rund zwei Sekunden lesbar
   (die Wegstrecke endet bei knapp halber Groesse). Die Botschaft steht
   nacheinander da, nicht auf einmal. Die Markenzeile steht fest am
   Fluchtpunkt und macht dort der Landung Platz. */
html.ist-lauftext-laeuft .lauftext-marke {
  animation: lauftext-marke 4400ms linear 1 both;
}
html.ist-lauftext-laeuft .lauftext-zeile {
  animation: lauftext-zeile 3000ms linear calc(400ms + var(--i) * 560ms) 1 both;
}
html.ist-lauftext-laeuft .lauftext-landung {
  animation: lauftext-landung 1200ms var(--karte-kurve) 4400ms 1 both;
}
@keyframes lauftext-marke {
  0% { opacity: 0; }
  12% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes lauftext-zeile {
  0% { opacity: 0; transform: translate3d(0, 110%, 0); }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, calc(-1 * var(--lauftext-weg, 800px)), 0); }
}
@keyframes lauftext-landung {
  from { opacity: 0; transform: translate3d(var(--lande-dx, 0px), var(--lande-dy, 0px), 0) scale(0.6); }
  to { opacity: 1; transform: none; }
}

/* Das Ende: Vorhang, Buehne und Knopf blenden aus (600 ms nach der Landung,
   200 ms nach dem Ueberspringen), danach entfernt die Steuerung die Klassen. */
html.ist-lauftext-sprung .lauftext-grund,
html.ist-lauftext-sprung .lauftext-buehne,
html.ist-lauftext-sprung .lauftext-weiter { transition-duration: 200ms; }
html.ist-lauftext-ende .lauftext-grund,
html.ist-lauftext-ende .lauftext-buehne,
html.ist-lauftext-ende .lauftext-weiter {
  opacity: 0;
  pointer-events: none;
}

/* Uebergabe an den Kompass: Anflug, Aktivierung, Ruhebewegung und die
   Hyperraum-Streifen stehen auf ihrem ersten Bild, bis der Vorhang faellt,
   und laufen dann mit ihren eigenen Verzoegerungen an. */
html.ist-lauftext:not(.ist-lauftext-ende) .public-kompass,
html.ist-lauftext:not(.ist-lauftext-ende) .public-kompass *,
html.ist-lauftext:not(.ist-lauftext-ende) .public-kompass-gimbal::before,
html.ist-lauftext:not(.ist-lauftext-ende) .public-kompass-kranz::before,
html.ist-lauftext:not(.ist-lauftext-ende) .public-hero-sterne-nah::after {
  animation-play-state: paused !important;
}

@media (max-width: 560px) {
  html.ist-lauftext .lauftext { --lauftext-kot: 3.078; /* cot(18deg) */ }
  html.ist-lauftext .lauftext-ebene { transform: rotateX(18deg); }
  html.ist-lauftext .lauftext-zeile { font-size: clamp(1rem, 5vw, 1.3rem); }
  html.ist-lauftext .lauftext-weiter {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}
/* Doppelter Boden zum Tor: im Druck, mit erzwungenen Farben und ohne
   Bewegung gibt es keinen Vorspann, und das Universum bleibt hinten. */
@media print, (forced-colors: active), (prefers-reduced-motion: reduce) {
  .lauftext { display: none !important; }
  html.ist-lauftext:not(.ist-lauftext-ende) .bc-universe { z-index: -1; }
}