/* absofort · Zukunft — Design-Schicht im Stil von modernhosting.ch
   ------------------------------------------------------------------
   Lädt NACH style.css (includes/header.php) und überschreibt nur Darstellung:
   Tokens, Komponenten, Kopfzeile mit Sternenhimmel, Seitenköpfe, Rakete,
   Anmelde-Karte. Alle Seiten erben das automatisch; Seiten selbst tragen nur
   wenige Klassen-Haken (zk-*).

   Grenzen, die hier bewusst eingehalten werden:
   - Weisse Dokumente bleiben weiss und in Inter: .assessment-doc (Druck!),
     .apv-doc, .cert-wrapper, .kidscert-preview. Allgemeine Regeln, die dort
     hineinwirken könnten (Titel, Radius), werden für sie ausdrücklich auf die
     alten Werte aus style.css zurückgesetzt (Abschnitt 3).
   - ICT-Kompass-Farben stecken im SVG und werden nicht angefasst.
   - Lernbereich (lernen/quiz/pruefung) bleibt ruhig: keine Animation hinter
     Lesetext; die Kopfzeile steht dort still (body[data-zk-ruhig]).
   - Bewegung nur mit html.zk-motion (setzt zukunft.js, wenn erlaubt). Ohne
     JavaScript, bei «Bewegung reduzieren» oder nach «Pause» steht alles still.
   - Keine externen Quellen. Schriften lokal (SIL OFL, ../fonts/OFL-*.txt).
   Kontraste gemessen (WCAG AA), Werte stehen in docs/DESIGN-PRUEFBERICHT.md. */

/* ============================== 1. Schriften ============================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rajdhani-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rajdhani-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rajdhani-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rajdhani-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@property --zk-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
/* inherits: true, damit ::before den Wert erbt, den zukunft.js an der Karte setzt. */
@property --zk-edge { syntax: '<angle>'; initial-value: 220deg; inherits: true; }

/* ============================== 2. Tokens ============================== */

/* Dunkel (Standard). Die alten Namen aus style.css bekommen die neuen Werte,
   damit jede Seite mitzieht; neue Werte heissen --zk-*. */
:root {
  color-scheme: dark;

  /* Markenfarben modernhosting */
  --zk-violet: #a492ff;
  --zk-indigo: #6550db;
  --zk-cyan: #69e1f5;
  --zk-mint: #9af5d4;
  --zk-grad: linear-gradient(105deg, var(--zk-violet), var(--zk-cyan) 65%, var(--zk-mint));
  --zk-grad-text: var(--zk-grad);
  --zk-grad-btn: var(--zk-grad);
  --zk-btn-ink: #04070e;
  --zk-hairline-grad: linear-gradient(90deg, transparent, var(--zk-violet) 22%, var(--zk-cyan) 55%, var(--zk-mint) 78%, transparent);

  /* Flächen */
  --zk-bg-deep: #04070e;
  --zk-surface: #0d1322;
  --zk-surface-2: #121b2d;
  --zk-glass: rgba(13, 19, 34, .72);
  --zk-glass-strong: rgba(12, 18, 32, .9);
  --zk-glass-soft: rgba(105, 225, 245, .045);
  --zk-line: rgba(255, 255, 255, .09);
  --zk-line-strong: rgba(255, 255, 255, .18);
  --zk-chip-bg: rgba(13, 19, 34, .62);

  /* Text */
  --zk-text: #eef3ff;
  --zk-lead: #c3cde0;
  --zk-muted: #a6b2ca;
  --zk-faint: #7d8ba7;
  --zk-cyan-text: #69e1f5;
  --zk-violet-text: #a492ff;
  --zk-mint-text: #9af5d4;

  /* Formulare und Fokus: Feldrand 3.99:1 gegen die Karte (WCAG 1.4.11) */
  --zk-field: rgba(4, 7, 14, .55);
  --zk-field-border: #6b7a99;
  --zk-field-hover: #8391ad;
  --zk-focus: #69e1f5;
  --zk-focus-ring: rgba(105, 225, 245, .18);

  /* Glanz und Schatten */
  --zk-glow-cyan: rgba(105, 225, 245, .16);
  --zk-glow-violet: rgba(113, 82, 218, .30);
  --zk-card-shadow: 0 18px 50px rgba(0, 0, 0, .42);

  /* Himmel (CSS-Rückfall ohne JavaScript + Farben fürs Canvas) */
  --zk-sky-base: #070a13;
  --zk-nebula-a: rgba(52, 44, 130, .55);
  --zk-nebula-b: rgba(71, 206, 235, .10);
  --zk-star-css: rgba(214, 226, 255, .55);
  --zk-star-css-2: rgba(105, 225, 245, .45);
  --zk-scan: rgba(7, 10, 19, .55);
  --zk-c-star: #ffffff;
  --zk-c-a: #69e1f5;
  --zk-c-b: #a492ff;
  --zk-c-line: #69e1f5;
  --zk-c-strength: 1;

  /* Rakete */
  --zk-hull-dark: #526584;
  --zk-hull-mid: #b6c8dc;
  --zk-hull-light: #eff8ff;
  --zk-window: #102d4d;
  --zk-planet-rim: rgba(154, 245, 212, .55);
  --zk-planet-core: #04070e;

  /* Schriften */
  --zk-font: 'Inter', system-ui, -apple-system, sans-serif;   /* wie style.css */
  --zk-title: 'Rajdhani', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --zk-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* alte Tokens aus style.css */
  --bg-dark: #080c14;
  --bg-card: #0d1322;
  --bg-card2: #121b2d;
  --border: #1f2b42;
  --blue: #6550db;          /* Flächen mit weisser Schrift: 5.64:1 */
  --blue-bright: #69e1f5;   /* Links und aktive Zustände: 12.8:1 */
  --blue-dark: #5540ad;
  --cyan: #69e1f5;
  --purple: #a492ff;
  --violet: #a492ff;
  --text-white: #eef3ff;
  --text-muted: #a6b2ca;    /* 9.2:1 */
  --text-faint: #7d8ba7;    /* war #445577 = 2.6:1, jetzt 5.7:1 */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --glow-blue: 0 0 40px rgba(105, 225, 245, .12);
}

/* Tageslicht: eigene helle Variante, keine blosse Umkehrung. Werte nach dem
   hellen Theme des Power Panels (dort geprüft), Text mindestens 4.8:1. */
:root[data-theme="light"] {
  color-scheme: light;

  --zk-grad-text: linear-gradient(105deg, #5540ad, #006477 62%, #176344);
  --zk-grad-btn: linear-gradient(105deg, #5540ad, #0e6a86 62%, #176344);
  --zk-btn-ink: #ffffff;
  --zk-hairline-grad: linear-gradient(90deg, transparent, #5540ad 22%, #00758b 55%, #176344 78%, transparent);

  --zk-bg-deep: #e3e9f5;
  --zk-surface: #ffffff;
  --zk-surface-2: #f3f6fb;
  --zk-glass: rgba(255, 255, 255, .78);
  --zk-glass-strong: rgba(255, 255, 255, .94);
  --zk-glass-soft: rgba(85, 64, 173, .045);
  --zk-line: rgba(25, 36, 59, .12);
  --zk-line-strong: rgba(25, 36, 59, .22);
  --zk-chip-bg: rgba(255, 255, 255, .72);

  --zk-text: #19243b;
  --zk-lead: #33415c;
  --zk-muted: #4c5c76;
  --zk-faint: #5d6b84;
  --zk-cyan-text: #006477;
  --zk-violet-text: #5540ad;
  --zk-mint-text: #176344;

  --zk-field: #ffffff;
  --zk-field-border: #7a8ba5;
  --zk-field-hover: #5d6b84;
  --zk-focus: #00758b;
  --zk-focus-ring: rgba(0, 117, 139, .18);

  --zk-glow-cyan: rgba(0, 117, 139, .14);
  --zk-glow-violet: rgba(85, 64, 173, .16);
  --zk-card-shadow: 0 16px 40px rgba(30, 49, 88, .10);

  --zk-sky-base: #e7edf9;
  --zk-nebula-a: rgba(101, 80, 219, .16);
  --zk-nebula-b: rgba(0, 144, 161, .10);
  --zk-star-css: rgba(61, 79, 122, .32);
  --zk-star-css-2: rgba(0, 100, 119, .28);
  --zk-scan: rgba(231, 237, 249, .5);
  --zk-c-star: #3d4f7a;
  --zk-c-a: #006477;
  --zk-c-b: #5540ad;
  --zk-c-line: #1f5f8b;
  --zk-c-strength: .75;

  --zk-planet-rim: rgba(0, 117, 139, .45);
  --zk-planet-core: #dfe6f4;

  --bg-dark: #eef2f9;
  --bg-card: #ffffff;
  --bg-card2: #f3f6fb;
  --border: #d5deec;
  --blue: #5540ad;          /* weisse Schrift darauf: 7.7:1 */
  --blue-bright: #006477;   /* Links: 6.8:1 auf Weiss */
  --blue-dark: #43318f;
  --cyan: #00758b;
  --purple: #5540ad;
  --violet: #5540ad;
  --green: #15803d;         /* war #22c55e = 2.3:1 als Schrift auf Weiss */
  --red: #b91c1c;           /* war #ef4444 = 3.8:1 */
  --text-white: #19243b;
  --text-muted: #4c5c76;
  --text-faint: #5d6b84;
  --shadow: 0 16px 40px rgba(30, 49, 88, .12);
  --glow-blue: 0 0 40px rgba(0, 117, 139, .08);
}

/* Ukrainisch: Rajdhani hat keine kyrillischen Zeichen. Titel dort in Inter bzw.
   der Systemschrift, statt lateinische und kyrillische Buchstaben zu mischen. */
:root:lang(uk) {
  --zk-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
  --zk-title: var(--zk-font);
}

/* ============================== 3. Grundlagen ============================== */

html { background: var(--bg-dark); scrollbar-color: #2a3654 transparent; }
:root[data-theme="light"] { scrollbar-color: #b5c2d8 transparent; }
body {
  font-family: var(--zk-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--zk-violet); color: #04070e; }
:root[data-theme="light"] ::selection { background: #5540ad; color: #ffffff; }

/* Titel in Rajdhani, Fliesstext bleibt Inter. Rajdhani läuft schmaler, daher
   etwas grössere Werte als vorher. */
h1, h2, h3 {
  font-family: var(--zk-title);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.5rem; line-height: 1.18; }
h4, h5 { font-family: var(--zk-font); }
p { text-wrap: pretty; }

/* Dokumente und Lesetext bleiben wie bisher gesetzt: Titel-Regeln aus style.css
   (Inter, 700, Zeilenhöhe 1.2, -.02em, alte Grössen) und alte Radien. Die Grössen
   stehen in :where(), damit die eigenen Klassen der Dokumente weiter gewinnen. */
/* Weisse Dokumente: die alten Werte aus style.css lokal festhalten (dunkel und hell),
   damit weder geerbte Farbe noch Radius noch Schrift-Fallback sich ändern. */
:is(.assessment-doc, .apv-doc, .cert-wrapper, .kidscert-preview) {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --bg-card: #0f1623;
  --bg-card2: #161e2e;
  --border: #1e2d45;
  --blue: #3b82f6;
  --blue-bright: #60a5fa;
  --blue-dark: #1d4ed8;
  --cyan: #06b6d4;
  --green: #22c55e;
  --purple: #a855f7;
  --red: #ef4444;
  --text-white: #f0f4ff;
  --text-muted: #8899bb;
  --text-faint: #445577;
  --radius: 12px;
  --radius-sm: 8px;
}
:root[data-theme="light"] :is(.assessment-doc, .apv-doc, .cert-wrapper, .kidscert-preview) {
  --bg-card: #ffffff;
  --bg-card2: #eef2f8;
  --border: #e2e8f0;
  --blue-bright: #2563eb;
  --text-white: #0f172a;
  --text-muted: #475569;
  --text-faint: #64748b;
}
/* .apv-doc hatte keine eigene Schriftfarbe und erbte sie vom body. */
.apv-doc { color: var(--text-white); }
:is(.assessment-doc, .apv-doc, .cert-wrapper, .kidscert-preview, .lb-geschenk) :is(h1, h2, h3),
.lektion-body :is(h2, h3) {
  font-family: var(--zk-font);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: wrap;
  overflow-wrap: normal;
}
:where(.assessment-doc, .apv-doc, .cert-wrapper, .kidscert-preview, .lb-geschenk) h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
:where(.assessment-doc, .apv-doc, .cert-wrapper, .kidscert-preview, .lb-geschenk) h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
:where(.assessment-doc, .apv-doc, .cert-wrapper, .kidscert-preview, .lb-geschenk) h3 { font-size: 1.375rem; }
.lektion-body h2 { font-size: 1.6rem; }
.lektion-body h3 { font-size: 1.15rem; }

a { color: var(--blue-bright); }
a:hover { color: var(--zk-text); }

.gradient-text {
  color: var(--zk-cyan);
  background: var(--zk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .04em;
}

/* Sichtbarer Fokus: Cyan-Ring überall (hell: Petrol). */
:focus-visible { outline: 2px solid var(--zk-focus); outline-offset: 3px; }
.btn:focus-visible { outline: 2px solid var(--zk-focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--zk-focus-ring), 0 0 26px var(--zk-glow-cyan); }
:is(.card, .kurs-card, .ziel-card, .oeko-card, .modul-item, .lektion-nav-item, .dash-nav-item):focus-visible { outline-offset: 2px; }
summary:focus-visible { outline-offset: 2px; border-radius: 6px; }

.zk-mono { font-family: var(--zk-mono); }

/* ============================== 4. Knöpfe ============================== */

.btn {
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: .005em;
  transition: transform .25s, box-shadow .25s, background-color .25s, border-color .25s, color .25s;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--zk-grad-btn);
  color: var(--zk-btn-ink);
  border: 1px solid transparent;
}
.btn-primary { box-shadow: 0 10px 30px var(--zk-glow-cyan); }
.btn-primary:hover {
  box-shadow: 0 14px 38px var(--zk-glow-cyan), 0 0 32px var(--zk-glow-violet);
  transform: translateY(-2px);
}
.btn-outline {
  background: var(--zk-glass-soft);
  border: 1px solid var(--zk-line-strong);
  color: var(--zk-text);
}
.btn-outline:hover {
  background: rgba(105, 225, 245, .08);
  border-color: var(--zk-cyan);
  color: var(--zk-text);
  box-shadow: 0 0 26px var(--zk-glow-cyan);
}
:root[data-theme="light"] .btn-outline:hover { background: rgba(0, 117, 139, .06); border-color: #00758b; }
.btn-ghost { color: var(--zk-muted); }
.btn-ghost:hover { color: var(--zk-cyan-text); }
/* SSO-Knopf (login.php) hatte bisher gar keinen Stil. Glas mit Verlaufsrand
   wie der SSO-Knopf im Power-Panel-Login. */
.btn-secondary {
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(38, 33, 84, .96), rgba(13, 30, 44, .96)) padding-box,
    linear-gradient(120deg, var(--zk-violet), var(--zk-cyan) 60%, var(--zk-mint)) border-box;
  color: var(--zk-text);
  box-shadow: 0 12px 30px rgba(101, 80, 219, .18);
  white-space: normal;
  text-align: center;
  line-height: 1.35;
  min-height: 50px;
}
.btn-secondary:hover { color: #ffffff; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(101, 80, 219, .28), 0 0 28px var(--zk-glow-cyan); }
:root[data-theme="light"] .btn-secondary {
  background:
    linear-gradient(135deg, #ffffff, #f3f6fb) padding-box,
    linear-gradient(120deg, #5540ad, #00758b 60%, #176344) border-box;
  color: #19243b;
  box-shadow: 0 10px 26px rgba(85, 64, 173, .12);
}
:root[data-theme="light"] .btn-secondary:hover { color: #19243b; }
/* Bernstein-Knopf (Inline-Hintergrund, z. B. kurse.php Eltern-CTA): dunkle Schrift
   in beiden Varianten, 8.9:1 statt 2.2:1 mit weisser Schrift. */
.btn[style*="background:var(--amber)"],
.btn[style*="background:var(--amber)"]:hover { color: #1a1205 !important; }
/* Grün mit weisser Schrift hatte 2.3:1 – jetzt 5.0:1. */
.btn-green { background: #15803d; color: #ffffff; }
.btn-green:hover { background: #166534; color: #ffffff; }
.lernbox-copy { border-radius: 8px; }
/* Lange Beschriftungen (FR/IT/UA) dürfen umbrechen statt abgeschnitten zu werden:
   volle Breite, Seitenkopf und Anmeldekarte immer, auf dem Handy alle Knöpfe. */
.btn-full, .hero-actions .btn, .zk-auth-card .btn { white-space: normal; text-align: center; min-width: 0; max-width: 100%; }
@media (max-width: 600px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* ============================== 5. Karten und Flächen ============================== */

.card,
.kurs-card,
.feature-card,
.quiz-frage,
.result-box,
.lektion-content,
.lektion-sidebar,
.dash-sidebar,
.lb {
  background: linear-gradient(180deg, rgba(18, 27, 45, .78), rgba(13, 19, 34, .9));
  border-color: var(--zk-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
:root[data-theme="light"] :is(.card, .kurs-card, .feature-card, .quiz-frage, .result-box, .lektion-content, .lektion-sidebar, .dash-sidebar, .lb) {
  background: #ffffff;
  border-color: #d5deec;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 24px rgba(30, 49, 88, .06);
}
.card:hover,
.kurs-card:hover {
  border-color: rgba(164, 146, 255, .5);
  box-shadow: 0 0 0 1px rgba(164, 146, 255, .14), var(--zk-card-shadow), 0 0 44px rgba(105, 225, 245, .08);
}
.feature-card:hover { border-color: rgba(105, 225, 245, .45); }
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .kurs-card:hover {
  border-color: rgba(85, 64, 173, .45);
  box-shadow: 0 0 0 1px rgba(85, 64, 173, .12), 0 18px 40px rgba(30, 49, 88, .12);
}
.card-header { border-bottom-color: var(--zk-line); }
.kurs-card-bottom { border-top-color: var(--zk-line); }
.kurs-titel { letter-spacing: -.01em; }
.kurs-preis { font-family: var(--zk-title); font-size: 1.6rem; letter-spacing: -.01em; white-space: nowrap; }
.kurs-icon { background: linear-gradient(135deg, rgba(164, 146, 255, .18), rgba(105, 225, 245, .12)); box-shadow: inset 0 0 0 1px var(--zk-line); }
.feature-icon { filter: drop-shadow(0 0 14px rgba(105, 225, 245, .25)); }
.feature-title { font-size: 16.5px; }

/* Lichtkegel folgt dem Zeiger (zukunft.js setzt --zk-x/--zk-y, nur feiner Zeiger). */
.kurs-card, .feature-card, .ziel-card { position: relative; isolation: isolate; }
.feature-card, a.ziel-card { overflow: hidden; }
.kurs-card::before,
.feature-card::before,
a.ziel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--zk-x, 50%) var(--zk-y, 0%), rgba(105, 225, 245, .10), transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}
:root[data-theme="light"] :is(.kurs-card, .feature-card, a.ziel-card)::before {
  background: radial-gradient(360px circle at var(--zk-x, 50%) var(--zk-y, 0%), rgba(85, 64, 173, .07), transparent 70%);
}
:is(.kurs-card, .feature-card, a.ziel-card):is(:hover, :focus-visible, :focus-within)::before { opacity: 1; }

/* Ziel-Karten der Startseite (Stil steht dort inline im <style>; hier stärker). */
.section a.ziel-card {
  background: linear-gradient(180deg, rgba(18, 27, 45, .78), rgba(13, 19, 34, .92));
  border-color: var(--zk-line);
  border-radius: var(--radius);
}
.section a.ziel-card:hover { box-shadow: var(--zk-card-shadow), 0 0 40px rgba(105, 225, 245, .08); }
:root[data-theme="light"] .section a.ziel-card { background: #ffffff; border-color: #d5deec; }

.origin-band { background: linear-gradient(180deg, rgba(13, 19, 34, .9), rgba(9, 13, 24, .95)); border-color: var(--zk-line); }
.beweis-zahl span { font-family: var(--zk-title); font-weight: 700; letter-spacing: -.01em; }
:root[data-theme="light"] .origin-band { background: #f6f8fc; border-color: #d5deec; }
.pillar, .oeko-card { border-color: var(--zk-line); }

/* Fortschritt im Markenverlauf */
.progress { background: rgba(255, 255, 255, .06); }
:root[data-theme="light"] .progress { background: #e3e9f5; }
.progress-bar { background: var(--zk-grad); box-shadow: 0 0 12px rgba(105, 225, 245, .35); }
:root[data-theme="light"] .progress-bar { background: var(--zk-grad-btn); box-shadow: none; }

/* ============================== 6. Badges, Chips, Hinweise ============================== */

.hero-badge {
  font-family: var(--zk-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--zk-cyan-text);
  background: var(--zk-chip-bg);
  border: 1px solid var(--zk-line-strong);
  border-radius: 999px;
  padding: 7px 15px 7px 13px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  max-width: 100%;
  white-space: normal;
  text-align: left;
}
/* Statt Blitz ein leuchtender Statuspunkt in der Farbe des Badges. */
.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.niveau-badge { letter-spacing: .08em; }
.trust-line, .origin-chip {
  background: var(--zk-chip-bg);
  border-color: var(--zk-line-strong);
}
.trust-line::before, .origin-chip .dot { box-shadow: 0 0 10px currentColor; }
.trust-line::before { background: var(--zk-mint); color: var(--zk-mint); }
:root[data-theme="light"] .trust-line::before { background: #176344; color: #176344; }
.origin-chip .dot { color: var(--zk-cyan); }

.alert { border-radius: 12px; }

/* Inline-Schriftfarben einzelner Seiten, die im Tageslicht zu hell wären
   (Bernstein 2.1:1, Cyan 2.4:1, Lila 2.3:1 auf Weiss). Nur die Schriftfarbe,
   nicht border-color/background: dafür das Präfix «;» bzw. Anfang des Attributs. */
/* Weisse Dokumente bleiben ausgenommen (dort ist nichts anzufassen). */
:root[data-theme="light"] :is([style^="color:var(--amber)"], [style*=";color:var(--amber)"], [style^="color:#f59e0b"], [style*=";color:#f59e0b"]):not(:is(.assessment-doc, .apv-doc, .cert-wrapper, .kidscert-preview) *) { color: var(--amber-text) !important; }
:root[data-theme="light"] :is([style^="color:#06b6d4"], [style*=";color:#06b6d4"]):not(:is(.assessment-doc, .apv-doc, .cert-wrapper, .kidscert-preview) *) { color: #00758b !important; }
:root[data-theme="light"] :is([style^="color:#c084fc"], [style*=";color:#c084fc"]):not(:is(.assessment-doc, .apv-doc, .cert-wrapper, .kidscert-preview) *) { color: var(--purple-text) !important; }
.alert-info { background: rgba(105, 225, 245, .08); border-color: rgba(105, 225, 245, .3); color: var(--zk-cyan-text); }
:root[data-theme="light"] .alert-info { background: rgba(0, 117, 139, .06); border-color: rgba(0, 117, 139, .28); }

/* ============================== 7. Formulare ============================== */

.form-label { color: var(--zk-muted); }
.form-control {
  background: var(--zk-field);
  border: 1px solid var(--zk-field-border);
  border-radius: var(--radius-sm);
  color: var(--zk-text);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.form-control:hover { border-color: var(--zk-field-hover); }
.form-control:focus {
  border-color: var(--zk-focus);
  box-shadow: 0 0 0 4px var(--zk-focus-ring), 0 0 22px var(--zk-glow-cyan);
}
.form-control:focus-visible { outline: 2px solid var(--zk-focus); outline-offset: 1px; }
.form-control::placeholder { color: var(--zk-faint); opacity: 1; }
/* Autofill dunkel halten */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--zk-text);
  caret-color: var(--zk-text);
  box-shadow: 0 0 0 40px #0b1120 inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
:root[data-theme="light"] .form-control:-webkit-autofill,
:root[data-theme="light"] .form-control:-webkit-autofill:hover { box-shadow: 0 0 0 40px #f3f6fb inset; }
.kurs-suche {
  background: var(--zk-glass);
  border-color: var(--zk-field-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.kurs-suche:focus-within { border-color: var(--zk-focus); box-shadow: 0 0 0 4px var(--zk-focus-ring), 0 0 26px var(--zk-glow-cyan); }
.kurs-suche-input::placeholder { color: var(--zk-faint); }
.pw-toggle:focus-visible { outline-color: var(--zk-focus); }

/* ============================== 8. Kopfzeile mit Sternenhimmel ============================== */

.navbar {
  isolation: isolate;
  background: rgba(7, 10, 19, .8);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border-bottom: 1px solid transparent;
}
/* Leuchtende Haarlinie Violett – Cyan – Mint statt grauer Kante */
.navbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--zk-hairline-grad);
  opacity: .6;
  pointer-events: none;
}
:root[data-theme="light"] .navbar { background: rgba(255, 255, 255, .84); }
:root[data-theme="light"] .navbar::after { opacity: .45; }
/* Flugfortschritt: die Kante der Kopfzeile füllt sich beim Scrollen (reines CSS,
   nur wo scroll-getriebene Animation unterstützt wird; sonst bleibt die Haarlinie). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .navbar::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      z-index: 1;
      background: var(--zk-grad);
      box-shadow: 0 0 12px rgba(105, 225, 245, .45);
      transform-origin: left center;
      transform: scaleX(0);
      pointer-events: none;
      animation: zk-flight linear both;
      animation-timeline: scroll(root);
    }
    :root[data-theme="light"] .navbar::before { background: var(--zk-grad-btn); box-shadow: none; }
  }
}
@keyframes zk-flight { to { transform: scaleX(1); } }

/* Canvas (zukunft.js) liegt hinter dem Inhalt der Kopfzeile bzw. des Seitenkopfs. */
.zk-sky-canvas {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.nav-logo-mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 18px rgba(105, 225, 245, .22); border-radius: 9px; }
:root[data-theme="light"] .nav-logo-mark { box-shadow: 0 0 0 1px rgba(25, 36, 59, .12), 0 4px 12px rgba(30, 49, 88, .12); }
.nav-logo-name { font-family: var(--zk-title); font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.nav-logo-sub { font-family: var(--zk-mono); font-size: 9px; letter-spacing: .14em; color: var(--zk-faint); }

.nav-links a { color: var(--zk-muted); position: relative; }
.nav-links a:hover { color: var(--zk-text); background: rgba(255, 255, 255, .05); }
:root[data-theme="light"] .nav-links a:hover { background: rgba(25, 36, 59, .05); }
.nav-links a.active { color: var(--zk-text); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--zk-grad);
  box-shadow: 0 0 10px rgba(105, 225, 245, .45);
}
:root[data-theme="light"] .nav-links a.active::after { background: var(--zk-grad-btn); box-shadow: none; }
/* Kids-Link und Admin-Link: Bernstein als Schrift (style.css: --amber-text). */
.nav-links a.nav-kids,
.nav-links a.nav-admin { color: var(--amber-text); }
.nav-links a.nav-kids:hover,
.nav-links a.nav-admin:hover { color: var(--amber-text); }

.theme-toggle,
.lang-dd > summary {
  border-color: var(--zk-line-strong);
  background: rgba(255, 255, 255, .03);
  color: var(--zk-muted);
}
.theme-toggle:hover,
.lang-dd > summary:hover { color: var(--zk-text); border-color: var(--zk-cyan); box-shadow: 0 0 16px var(--zk-glow-cyan); }
:root[data-theme="light"] :is(.theme-toggle, .lang-dd > summary) { background: #ffffff; }
.lang-dd-menu { background: var(--zk-glass-strong); border-color: var(--zk-line-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
/* Weiss auf Cyan wäre 1.4:1 – aktive Sprache jetzt im Verlauf mit dunkler Schrift. */
.lang-dd-menu a.is-active { background: var(--zk-grad-btn); color: var(--zk-btn-ink); }
.lang-fixed { border-color: var(--zk-line-strong); color: var(--zk-faint); }

/* Pause-Knopf für alle Animationen (neben dem Hell/Dunkel-Umschalter). */
[data-zk-motion][hidden] { display: none !important; }
.zk-motion-ico {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 11px;
}
/* Pause-Zeichen: zwei Balken */
.zk-motion-ico::before,
.zk-motion-ico::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 1px;
  background: currentColor;
}
.zk-motion-ico::before { left: 1px; }
.zk-motion-ico::after { right: 1px; }
/* Gedrückt = pausiert: Abspiel-Dreieck */
[aria-pressed="true"] > .zk-motion-ico::after { display: none; }
[aria-pressed="true"] > .zk-motion-ico::before {
  left: 2px;
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-style: solid;
  border-width: 5.5px 0 5.5px 9px;
  border-color: transparent transparent transparent currentColor;
}
.theme-toggle.zk-motion-toggle[aria-pressed="true"] { color: var(--zk-cyan-text); border-color: var(--zk-cyan); }

@media (max-width: 1280px) {
  .nav-menu { background: var(--zk-glass-strong); border-bottom-color: var(--zk-line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .nav-menu .nav-links a.active::after { left: 14px; right: auto; width: 28px; bottom: 6px; }
  .nav-menu .nav-actions { border-top-color: var(--zk-line); }
  .nav-menu .nav-actions .zk-motion-toggle { align-self: center; }
  .nav-toggle { background: rgba(255, 255, 255, .04); border-color: var(--zk-line-strong); }
  :root[data-theme="light"] .nav-toggle { background: #ffffff; }
}

/* ============================== 9. Seitenkopf mit Sternenhimmel ============================== */

/* Alle .hero-Sektionen (kurse, rollen, kids, it-allgemein, microsoft, assessment …)
   und die expliziten Köpfe .zk-kopf-himmel (lehrgang, ueber-uns) und .zk-auth. */
.hero,
.zk-kopf-himmel,
.zk-auth {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--zk-sky-base);
  background-image:
    radial-gradient(ellipse 58% 78% at 84% 8%, var(--zk-nebula-a), transparent 62%),
    radial-gradient(ellipse 46% 60% at 4% 100%, var(--zk-nebula-b), transparent 66%);
}
/* Sterne als CSS-Rückfall (ohne JavaScript); das Canvas übernimmt, sobald es läuft. */
.hero::before,
.zk-kopf-himmel::before,
.zk-auth::before {
  content: '';
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  transform: none;
  z-index: -3;
  pointer-events: none;
  background-image:
    radial-gradient(1.3px 1.3px at 23px 41px, var(--zk-star-css) 60%, transparent 62%),
    radial-gradient(1px 1px at 131px 97px, var(--zk-star-css) 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 77px 173px, var(--zk-star-css-2) 60%, transparent 62%),
    radial-gradient(1px 1px at 190px 22px, var(--zk-star-css) 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 59px 121px, var(--zk-star-css) 60%, transparent 62%);
  background-size: 211px 197px, 283px 251px, 331px 307px, 241px 263px, 173px 149px;
  opacity: .75;
  transition: opacity .6s;
}
.zk-sky-live::before { opacity: 0; }
/* Lesbarkeit: Hinter dem Text des Seitenkopfs wird das Netz weich abgedunkelt,
   an den Rändern bleibt es voll sichtbar. */
.hero:not(.zk-hero-rakete) > .zk-sky-canvas {
  -webkit-mask-image: radial-gradient(ellipse 40% 58% at 50% 48%, rgba(0, 0, 0, .38), #000 82%);
  mask-image: radial-gradient(ellipse 40% 58% at 50% 48%, rgba(0, 0, 0, .38), #000 82%);
}
.zk-hero-rakete > .zk-sky-canvas {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .42) 38%, #000 62%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .42) 38%, #000 62%);
}
.zk-kopf-himmel > .zk-sky-canvas {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .45) 45%, #000 75%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .45) 45%, #000 75%);
}
@media (max-width: 900px) {
  .zk-hero-rakete > .zk-sky-canvas,
  .zk-kopf-himmel > .zk-sky-canvas {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .45) 55%, #000 80%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .45) 55%, #000 80%);
  }
}
/* Feine Rasterlinien wie bei modernhosting + leuchtende Kante unten */
.hero::after,
.zk-kopf-himmel::after,
.zk-auth::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--zk-hairline-grad) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 3px, var(--zk-scan) 3px 4px);
  opacity: .42;
}
:root[data-theme="light"] :is(.hero, .zk-kopf-himmel, .zk-auth)::after { opacity: .35; }

.hero > .container,
.hero > .container-sm { position: relative; }
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  color: var(--zk-text);
}
.hero-lead { color: var(--zk-lead); font-size: 1.15rem; line-height: 1.7; }
.hero-lead strong { color: var(--zk-text); }

/* Orbit-Ring als leise Deko rechts oben (reines CSS, kein Inhalt). */
.hero:not(.zk-hero-rakete) > :is(.container, .container-sm)::before {
  content: '';
  position: absolute;
  top: -70px;
  right: -210px;
  width: 460px;
  height: 460px;
  border: 1px solid var(--zk-line-strong);
  border-radius: 50%;
  transform: rotate(-28deg) scaleY(.42);
  pointer-events: none;
  opacity: .8;
}
.hero:not(.zk-hero-rakete) > :is(.container, .container-sm)::after {
  content: '';
  position: absolute;
  top: 52px;
  right: 118px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zk-cyan);
  box-shadow: 0 0 18px var(--zk-cyan);
  pointer-events: none;
}
:root[data-theme="light"] .hero:not(.zk-hero-rakete) > :is(.container, .container-sm)::after { background: #00758b; box-shadow: 0 0 12px rgba(0, 117, 139, .5); }
@media (max-width: 1100px) {
  .hero:not(.zk-hero-rakete) > :is(.container, .container-sm)::before,
  .hero:not(.zk-hero-rakete) > :is(.container, .container-sm)::after { display: none; }
}

/* Kennzahlen als Glas-Kacheln (Telemetrie) */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  border-top: 0;
}
.hero-stats > div {
  position: relative;
  min-width: 0;
  padding: 16px 14px 15px;
  border: 1px solid var(--zk-line);
  border-radius: 14px;
  background: var(--zk-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.hero-stats > div::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 0;
  height: 1px;
  background: var(--zk-hairline-grad);
  opacity: .9;
}
.hero-stat-value {
  font-family: var(--zk-title);
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.hero-stat-label { font-size: 12.5px; line-height: 1.4; color: var(--zk-muted); margin-top: 6px; }
@media (max-width: 560px) {
  .hero-badge { font-size: 10.5px; letter-spacing: .06em; padding: 6px 12px 6px 11px; }
}
@media (max-width: 760px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero-stats > div { padding: 14px 10px 13px; }
}

/* Expliziter Seitenkopf in einer Sektion mit weiterem Inhalt (lehrgang, ueber-uns):
   Himmel nur hinter dem oberen Teil, weich ausgeblendet. Die Sektion selbst bleibt
   ohne overflow, damit die klebende Preiskarte (position: sticky) weiter klebt. */
.zk-kopf { position: relative; isolation: isolate; }
.zk-kopf-himmel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(100%, 560px);
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(#000 62%, transparent);
}
.zk-kopf-himmel::after { background: repeating-linear-gradient(0deg, transparent 0 3px, var(--zk-scan) 3px 4px); }

/* ============================== 10. Startseite: Hero mit Rakete ============================== */

.zk-hero-rakete { padding: 18px 0 30px; text-align: left; }
.zk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 36px;
  align-items: center;
  min-height: 640px;
  padding-top: 26px;
  padding-bottom: 26px;
}
.zk-hero-copy { position: relative; z-index: 2; min-width: 0; }
.zk-hero-copy .hero-badge { margin-bottom: 24px; }
.zk-hero-copy h1 {
  max-width: none;
  margin: 0 0 24px;
  font-size: clamp(2.6rem, 5.5vw, 4.7rem);
}
.zk-h1-sub {
  display: block;
  margin-top: .35em;
  font-size: .5em;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--zk-lead);
}
.zk-hero-copy .hero-lead { margin: 0 0 32px; max-width: 610px; font-size: 1.08rem; }
.zk-hero-copy .hero-actions { justify-content: flex-start; }
.zk-hero-visual { position: relative; min-width: 0; }

/* Telemetrie-Karte mit den vier Kennzahlen (Inhalt unverändert aus index.php). */
.zk-telemetry {
  position: relative;
  z-index: 2;
  margin: -6px 0 0;
  border-radius: 16px;
  background: var(--zk-glass-strong);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  isolation: isolate;
  border: 1px solid rgba(164, 146, 255, .45);
}
:root[data-theme="light"] .zk-telemetry { box-shadow: 0 20px 50px rgba(30, 49, 88, .14); border-color: rgba(85, 64, 173, .3); }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .zk-telemetry::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--zk-angle), var(--zk-line), var(--zk-violet), var(--zk-cyan), var(--zk-line) 45%, var(--zk-line) 65%, var(--zk-violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
}
.zk-telemetry-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 6px 14px 6px 16px;
  border-bottom: 1px solid var(--zk-line);
  font: 500 11px/1.4 var(--zk-mono);
  letter-spacing: .12em;
  color: var(--zk-faint);
}
.zk-dots { display: inline-flex; gap: 5px; }
.zk-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--zk-faint); }
.zk-dots i:nth-child(2) { background: var(--zk-violet); }
.zk-dots i:nth-child(3) { background: var(--zk-cyan); }
.zk-motion-text {
  margin-left: auto;
  min-height: 32px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--zk-muted);
  font: 500 11px/1.4 var(--zk-mono);
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.zk-motion-text:hover,
.zk-motion-text[aria-pressed="true"] { color: var(--zk-cyan-text); }
.zk-motion-text::before {
  content: '';
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.zk-motion-text[aria-pressed="true"]::before { background: currentColor; box-shadow: 0 0 10px currentColor; }
.zk-telemetry .hero-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  max-width: none;
}
.zk-telemetry .hero-stats > div {
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 16px 18px 15px;
  text-align: left;
}
.zk-telemetry .hero-stats > div::before { display: none; }
.zk-telemetry .hero-stats > div:nth-child(odd) { border-right: 1px solid var(--zk-line); }
.zk-telemetry .hero-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--zk-line); }
.zk-telemetry .hero-stat-value {
  background: var(--zk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--zk-cyan);
}

/* Planetenhorizont: von hier startet die Rakete. */
.zk-planet {
  position: absolute;
  z-index: -1;
  left: 64%;
  top: calc(100% - 64px);
  width: 260vmax;
  height: 260vmax;
  margin-left: -130vmax;
  border-radius: 50%;
  border-top: 1px solid var(--zk-planet-rim);
  background: radial-gradient(circle at 50% 0, rgba(105, 225, 245, .18), rgba(26, 36, 72, .85) 4%, var(--zk-planet-core) 12%);
  box-shadow: 0 -6px 36px rgba(105, 225, 245, .16), 0 -36px 140px rgba(164, 146, 255, .20);
  pointer-events: none;
}
:root[data-theme="light"] .zk-planet {
  background: radial-gradient(circle at 50% 0, rgba(0, 117, 139, .12), rgba(214, 223, 241, .95) 4%, var(--zk-planet-core) 12%);
  box-shadow: 0 -6px 30px rgba(0, 117, 139, .12), 0 -30px 110px rgba(85, 64, 173, .12);
}

/* ============================== 11. Rakete ============================== */

.zk-flight-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px 16px;
  font: 500 11px/1.4 var(--zk-mono);
  letter-spacing: .15em;
  color: var(--zk-faint);
}
.zk-flight-label > span:last-child { margin-left: auto; }
.zk-crosshair { color: var(--zk-cyan-text); font-size: 22px; line-height: 1; }
.zk-scene { position: relative; height: 410px; }
.zk-rocket {
  position: absolute;
  top: -40px;
  left: 50%;
  width: 470px;
  height: 462px;
  overflow: visible;
  transform: translateX(-50%);
}
:root[data-theme="light"] .zk-rocket { filter: drop-shadow(0 14px 22px rgba(30, 49, 88, .22)); }
.zk-orbit {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 380px;
  height: 380px;
  transform: translateX(-50%) rotate(-28deg) scaleY(.5);
  pointer-events: none;
}
.zk-orbit-two { top: -24px; width: 440px; height: 440px; opacity: .45; transform: translateX(-50%) rotate(48deg) scaleY(.6); }
.zk-orbit-track { position: absolute; inset: 0; border: 1px solid var(--zk-line-strong); border-radius: 50%; }
.zk-orbit-dot {
  position: absolute;
  top: -4px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zk-cyan);
  box-shadow: 0 0 20px var(--zk-cyan);
}
:root[data-theme="light"] .zk-orbit-dot { background: #00758b; box-shadow: 0 0 12px rgba(0, 117, 139, .6); }
.zk-coord {
  position: absolute;
  font: 500 11px/1.4 var(--zk-mono);
  letter-spacing: .1em;
  color: var(--zk-faint);
  white-space: nowrap;
}
.zk-coord-one { top: 92px; left: 0; }
.zk-coord-two { top: 262px; right: 0; }
.zk-readout {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1.4 var(--zk-mono);
  letter-spacing: .12em;
  color: var(--zk-muted);
}
.zk-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--zk-mint);
  box-shadow: 0 0 14px var(--zk-mint);
}
:root[data-theme="light"] .zk-status-dot { background: #176344; box-shadow: 0 0 8px rgba(23, 99, 68, .6); }

/* SVG-Farben (Verläufe per id in includes/zukunft.php) */
.zk-stop-hull-dark { stop-color: var(--zk-hull-dark); }
.zk-stop-hull-light { stop-color: var(--zk-hull-light); }
.zk-stop-hull-mid { stop-color: var(--zk-hull-mid); }
.zk-stop-violet { stop-color: var(--zk-violet); }
.zk-stop-indigo { stop-color: var(--zk-indigo); }
.zk-stop-white { stop-color: #ffffff; }
.zk-stop-cyan { stop-color: var(--zk-cyan); }
.zk-stop-fade { stop-color: var(--zk-violet); stop-opacity: 0; }
.zk-stop-window { stop-color: var(--zk-window); }
.zk-stop-trail { stop-color: var(--zk-cyan); stop-opacity: .9; }
.zk-stop-trail-end { stop-color: var(--zk-violet); stop-opacity: .12; }
.zk-rocket-seam { fill: none; stroke: var(--zk-hull-dark); stroke-width: 2; }
.zk-window-frame { fill: var(--zk-hull-dark); stroke: var(--zk-hull-light); stroke-width: 3; }
.zk-window-glint { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; opacity: .65; }
.zk-rocket-center-fin { fill: var(--zk-indigo); }
.zk-rocket-nozzle { fill: var(--zk-hull-dark); }
.zk-rocket-mark { fill: none; stroke: var(--zk-hull-dark); stroke-width: 2; }
.zk-exhaust-halo, .zk-exhaust-core { transform-origin: 300px 350px; }
.zk-exhaust-halo { opacity: .35; filter: blur(3px); }
.zk-exhaust-core { opacity: .8; }
.zk-rocket-clouds { fill: var(--zk-violet); opacity: .09; filter: blur(3px); transform-origin: 300px 520px; }
.zk-particles { fill: var(--zk-cyan); stroke: var(--zk-cyan); opacity: .55; }
.zk-trajectory {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 3 11;
  stroke-linecap: round;
  opacity: .5;
}
:root[data-theme="light"] .zk-particles { fill: #00758b; stroke: #00758b; }

/* Kleine Rakete (Anmeldekarte, Lade-Overlay) */
.zk-rakete-mini { display: block; overflow: visible; }

/* Rakete und Hero an kleinere Breiten anpassen (kein Querscrollen: .hero clippt). */
@media (max-width: 1100px) {
  .zk-hero-grid { gap: 20px; }
  .zk-scene { height: 370px; }
  .zk-rocket { top: -26px; width: 420px; height: 413px; }
  .zk-orbit { top: 20px; width: 330px; height: 330px; }
  .zk-orbit-two { top: 0; width: 380px; height: 380px; }
  .zk-coord-one { top: 86px; }
  .zk-coord-two { top: 236px; }
}
@media (max-width: 900px) {
  .zk-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 6px; padding-top: 16px; padding-bottom: 10px; }
  .zk-hero-visual { width: 100%; max-width: 520px; margin: 0 auto; }
  .zk-hero-rakete .zk-planet { left: 50%; }
}
@media (max-width: 560px) {
  .zk-hero-rakete { padding-top: 4px; }
  .zk-hero-copy h1 { font-size: clamp(2.3rem, 10.6vw, 3rem); }
  .zk-hero-copy .hero-badge { margin-bottom: 18px; }
  .zk-hero-copy .hero-lead { font-size: 1.02rem; margin-bottom: 26px; }
  .zk-flight-label { margin-left: 0; font-size: 10px; letter-spacing: .1em; }
  .zk-scene { height: 300px; }
  .zk-rocket { top: -24px; width: 340px; height: 334px; }
  .zk-orbit { top: 26px; width: 250px; height: 250px; }
  .zk-orbit-two { top: 6px; width: 290px; height: 290px; }
  .zk-coord { font-size: 10px; letter-spacing: .06em; }
  .zk-coord-one { top: 60px; }
  .zk-coord-two { top: 212px; }
  .zk-readout { left: 2px; bottom: 6px; font-size: 10px; }
  .zk-telemetry .hero-stats > div { padding: 13px 12px 12px; }
  .zk-telemetry-bar { flex-wrap: wrap; row-gap: 0; }
}

/* ============================== 12. Kids: dieselbe Rakete, Bernstein-Akzent ============================== */

.zk-hero-kids .zk-orbit-dot { background: var(--amber); box-shadow: 0 0 20px var(--amber); }
.zk-hero-kids .zk-crosshair { color: var(--amber-text); }
.zk-hero-kids .zk-particles { fill: #f5c451; stroke: #f5c451; }
:root[data-theme="light"] .zk-hero-kids .zk-particles { fill: #b45309; stroke: #b45309; }
@media (min-width: 901px) { .zk-hero-kids .zk-hero-grid { min-height: 560px; } }
.zk-hero-kids .hero-stats { margin-top: 8px; margin-bottom: 26px; }

/* ============================== 13. Anmeldung und Registrierung ============================== */

.zk-auth {
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
  display: flex;
  align-items: center;
  padding-top: 44px;
  padding-bottom: 72px;
}
.zk-auth > .login-wrap,
.zk-auth > .zk-auth-narrow { width: 100%; }
.zk-auth .zk-planet { left: 36%; top: calc(100% - 90px); }
.zk-auth-narrow { max-width: 520px; margin: 0 auto; padding: 0 20px; }

.zk-auth-card {
  position: relative;
  isolation: isolate;
  z-index: 1;
  padding: 30px 30px 26px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(18, 27, 45, .94), rgba(10, 15, 27, .96));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5), 0 0 80px -30px rgba(113, 82, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
@supports ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
  .zk-auth-card {
    background: linear-gradient(180deg, rgba(18, 27, 45, .86), rgba(10, 15, 27, .9));
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
  }
}
:root[data-theme="light"] .zk-auth-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(246, 248, 252, .96));
  box-shadow: 0 24px 60px rgba(30, 49, 88, .14), 0 0 70px -30px rgba(85, 64, 173, .3), inset 0 1px 0 #ffffff;
}
/* Irisierender Rand; der helle Abschnitt folgt dem Zeiger (--zk-edge aus zukunft.js). */
.zk-auth-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--zk-edge), rgba(255, 255, 255, .1), var(--zk-violet) 8%, var(--zk-cyan) 16%, var(--zk-mint) 21%, rgba(255, 255, 255, .1) 34%, rgba(255, 255, 255, .06) 70%, rgba(164, 146, 255, .35) 88%, rgba(255, 255, 255, .1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
:root[data-theme="light"] .zk-auth-card::before {
  background: conic-gradient(from var(--zk-edge), rgba(25, 36, 59, .14), #5540ad 8%, #00758b 16%, #176344 21%, rgba(25, 36, 59, .14) 34%, rgba(25, 36, 59, .1) 70%, rgba(85, 64, 173, .35) 88%, rgba(25, 36, 59, .14));
}
.zk-auth-card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(105, 225, 245, .75), transparent);
  pointer-events: none;
}
/* Andock-Rahmen: vier Eckwinkel wie bei einer Zielerfassung. */
.zk-auth-fx {
  position: absolute;
  inset: -12px;
  z-index: -2;
  pointer-events: none;
  --zk-corner: rgba(105, 225, 245, .7);
  background:
    linear-gradient(var(--zk-corner), var(--zk-corner)) left top / 20px 1px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) left top / 1px 20px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) right top / 20px 1px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) right top / 1px 20px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) left bottom / 20px 1px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) left bottom / 1px 20px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) right bottom / 20px 1px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) right bottom / 1px 20px no-repeat;
  opacity: .8;
}
:root[data-theme="light"] .zk-auth-fx { --zk-corner: rgba(0, 117, 139, .6); }
.zk-auth-scan {
  position: absolute;
  top: 12px;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--zk-cyan), var(--zk-mint), transparent);
  box-shadow: 0 0 18px var(--zk-cyan);
  opacity: 0;
  pointer-events: none;
}
/* Kleine Rakete oben rechts an der Karte (dekorativ). */
.zk-auth-rakete {
  position: absolute;
  top: -34px;
  right: -8px;
  width: 58px;
  height: 104px;
  pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(105, 225, 245, .28));
}
.zk-auth-card .card,
.zk-auth-card .card:hover,
:root[data-theme] .zk-auth-card .card,
:root[data-theme] .zk-auth-card .card:hover {
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.zk-auth-card .card-body { padding: 0; }
.zk-auth-card h1 {
  font-size: clamp(2rem, 4.2vw, 2.5rem) !important;
  line-height: 1.05;
}
.zk-auth-card .nav-logo { display: inline-flex; }
.zk-auth-card .form-control { min-height: 48px; font-size: 16px; }
.zk-auth-card .btn-primary { min-height: 50px; }
.zk-auth-card .alert { margin-bottom: 18px; }
/* Hinweis «Assessment gratis»: dunkle Grünschrift war im Dunkelmodus 2:1. */
.zk-free-note { font-size: 13.5px; line-height: 1.55; color: var(--zk-mint-text); }
.zk-free-note strong { color: var(--zk-text); }
.zk-auth-card .alert.zk-free {
  background: rgba(154, 245, 212, .07);
  border: 1px solid rgba(154, 245, 212, .3);
  text-align: left;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
:root[data-theme="light"] .zk-auth-card .alert.zk-free { background: rgba(23, 99, 68, .06); border-color: rgba(23, 99, 68, .3); }
.zk-auth .login-wrap { position: relative; z-index: 1; align-items: center; }
.zk-auth .login-preview-col { top: 96px; }
.zk-auth .apv { padding: 18px; border-radius: 18px; background: var(--zk-glass); border: 1px solid var(--zk-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.zk-auth .apv-eyebrow { font-family: var(--zk-title); font-size: 1.5rem; letter-spacing: -.01em; }
.zk-auth-foot { margin-top: 22px; text-align: center; font-size: 14px; color: var(--zk-muted); }

@media (max-width: 920px) {
  .zk-auth { align-items: flex-start; padding-top: 34px; }
  .zk-auth .login-wrap { align-items: stretch; }
}
@media (max-width: 560px) {
  .zk-auth-card { padding: 24px 20px 22px; border-radius: 18px; }
  .zk-auth-fx { inset: -8px; }
  .zk-auth-rakete { top: -28px; right: -4px; width: 46px; height: 84px; }
}
@media (max-width: 420px) {
  .zk-auth-fx { display: none; }
  .zk-auth-narrow { padding: 0 16px; }
}

/* ============================== 13b. Kasse: Zahlung, Ziel und Kaufkarte ============================== */

/* Zahlweg «Kauf = Start»: zahlung.php (Rakete auf der Rampe, T−1), zahlung-success.php
   (sie hebt ab, T−0 // GO – oder der Countdown wird gehalten, T−0 // HOLD) und die
   Kaufkarte auf kurs.php und lehrgang.php. Himmel aus .zk-auth (zukunft.js), Szene
   und Symbole aus includes/zukunft.php, alle Deko aria-hidden und ohne Wörter. */

.zk-kasse { padding-top: 40px; padding-bottom: 64px; }
.zk-kasse-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
.zk-kasse-visual { position: relative; min-width: 0; }
.zk-kasse-spalte { min-width: 0; }
.zk-kasse-card { padding: 26px 28px; }
.zk-kasse-card h1 { margin: 0 0 18px; }
.zk-kasse-card > .alert { text-align: left; }
.zk-kasse-mini { display: none; }
.zk-kasse-visual .zk-scene { height: 430px; }
.zk-kasse-visual .zk-coord-two { right: 12px; }

/* Rampe und Halt: die Rakete steht senkrecht auf der Startrampe, der geplante
   Kurs ist nur angedeutet. (CSS-transform ersetzt das SVG-Attribut rotate(24 …).)
   Auf der Rampe schwebt sie nicht; es flackert nur das Triebwerk. */
.zk-scene--kasse .zk-rocket-lage,
.zk-scene--warten .zk-rocket-lage { transform: none; }
.zk-motion :is(.zk-scene--kasse, .zk-scene--warten) .zk-rocket-float { animation: none; }
/* Startrampe (nur im Zahlweg, zk_rakete_svg(…, true)) */
.zk-rampe { fill: none; stroke: var(--zk-line-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zk-rampe-turm { stroke-width: 1.6; }
.zk-rampe-deck { stroke: var(--zk-cyan); stroke-width: 3; stroke-opacity: .6; }
.zk-rampe-licht { fill: var(--zk-mint); stroke: none; }
.zk-scene--warten .zk-rampe-licht { fill: var(--amber); }
:root[data-theme="light"] .zk-rampe-deck { stroke: #00758b; }
:root[data-theme="light"] .zk-rampe-licht { fill: #176344; }
:root[data-theme="light"] .zk-scene--warten .zk-rampe-licht { fill: #b45309; }
.zk-scene--kasse .zk-trajectory,
.zk-scene--warten .zk-trajectory { opacity: .22; }
.zk-scene--kasse .zk-rocket,
.zk-scene--warten .zk-rocket { top: -18px; }
/* Halt: Bernstein statt Mint, der Punkt blinkt langsam (nur mit Bewegung). */
.zk-scene--warten .zk-readout .zk-status-dot,
.zk-scene--warten .zk-orbit-dot { background: var(--amber); box-shadow: 0 0 16px var(--amber); }
:root[data-theme="light"] .zk-scene--warten .zk-readout .zk-status-dot,
:root[data-theme="light"] .zk-scene--warten .zk-orbit-dot { background: #b45309; box-shadow: 0 0 10px rgba(180, 83, 9, .5); }
/* Ziel: die Rakete ist gestartet (Endlage wie im Seitenkopf), Wolken verzogen,
   Flugbahn und Orbit leuchten. */
/* Endlage nach dem Start: oberhalb der Rampe in Fluglage (ohne Bewegung sofort so). */
.zk-scene--ziel .zk-rocket-lage { transform-origin: 300px 270px; transform: translate(30px, -34px) rotate(24deg); }
.zk-scene--ziel .zk-rocket-clouds { opacity: 0; }
.zk-scene--ziel .zk-trajectory { opacity: .85; }
.zk-scene--ziel .zk-orbit-one .zk-orbit-track { border-color: rgba(154, 245, 212, .42); box-shadow: 0 0 22px rgba(154, 245, 212, .10); }
:root[data-theme="light"] .zk-scene--ziel .zk-orbit-one .zk-orbit-track { border-color: rgba(23, 99, 68, .38); box-shadow: none; }

/* ---- Countdown T−3 … T−0 (zk_startsequenz) ---- */
.zk-sequenz {
  display: flex;
  align-items: flex-start;
  margin: 0 0 20px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--zk-line);
}
.zk-seq {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font: 500 10.5px/1.2 var(--zk-mono);
  letter-spacing: .06em;
  color: var(--zk-faint);
}
/* Verbindung zum vorherigen Schritt, von Rand zu Rand der Punkte. */
.zk-seq + .zk-seq::before {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(-50% + 21px);
  right: calc(50% + 21px);
  height: 1px;
  background: var(--zk-line-strong);
}
.zk-seq--fertig + .zk-seq::before { background: linear-gradient(90deg, var(--zk-mint), var(--zk-cyan)); opacity: .75; }
/* Ziel: ein einmaliger Lichtimpuls läuft die Linie entlang (Animation in Abschnitt 17). */
.zk-sequenz--ziel .zk-seq + .zk-seq::after {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(-50% + 21px);
  right: calc(50% + 21px);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent) -100% 0 / 45% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
}
:root[data-theme="light"] .zk-sequenz--ziel .zk-seq + .zk-seq::after { background-image: linear-gradient(90deg, transparent, #00758b, transparent); }
:root[data-theme="light"] .zk-seq--fertig + .zk-seq::before { background: linear-gradient(90deg, #176344, #00758b); }
.zk-seq-punkt {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--zk-line-strong);
  border-radius: 50%;
  background: var(--zk-surface);
  color: var(--zk-faint);
}
.zk-seq-punkt .zk-ico { width: 16px; height: 16px; }
.zk-seq--fertig { color: var(--zk-mint-text); }
.zk-seq--fertig .zk-seq-punkt {
  border-color: rgba(154, 245, 212, .6);
  color: var(--zk-mint-text);
  box-shadow: 0 0 14px rgba(154, 245, 212, .16);
}
/* Haken-Plakette am fertigen Schritt: Kreis (::after) mit gezeichnetem Haken (::before). */
.zk-seq--fertig .zk-seq-punkt::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--zk-mint);
  box-shadow: 0 0 0 2px var(--zk-surface);
}
.zk-seq--fertig .zk-seq-punkt::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -1.5px;
  right: 0.5px;
  width: 3px;
  height: 6px;
  border: solid #04070e;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
:root[data-theme="light"] .zk-seq--fertig .zk-seq-punkt { border-color: rgba(23, 99, 68, .5); box-shadow: none; }
:root[data-theme="light"] .zk-seq--fertig .zk-seq-punkt::after { background: #176344; }
:root[data-theme="light"] .zk-seq--fertig .zk-seq-punkt::before { border-color: #ffffff; }
.zk-seq--aktiv { color: var(--zk-cyan-text); }
.zk-seq--aktiv .zk-seq-punkt {
  border-color: var(--zk-cyan);
  color: var(--zk-cyan-text);
  box-shadow: 0 0 0 4px rgba(105, 225, 245, .10), 0 0 20px rgba(105, 225, 245, .30);
}
:root[data-theme="light"] .zk-seq--aktiv .zk-seq-punkt { border-color: #00758b; box-shadow: 0 0 0 4px rgba(0, 117, 139, .10); }
/* Puls-Ring um den aktiven Schritt (nur mit html.zk-motion). */
.zk-seq--aktiv .zk-seq-punkt::before,
.zk-seq--halt .zk-seq-punkt::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.zk-seq--optional .zk-seq-punkt { border-style: dashed; }
.zk-seq--halt { color: var(--amber-text); }
.zk-seq--halt .zk-seq-punkt { border-color: rgba(245, 196, 81, .75); color: var(--amber-text); box-shadow: 0 0 18px rgba(245, 158, 11, .20); }
:root[data-theme="light"] .zk-seq--halt .zk-seq-punkt { border-color: rgba(146, 64, 14, .55); box-shadow: none; }

/* ---- Ticket: Bestellübersicht mit Perforation ---- */
.zk-ticket { margin: 0 0 20px; text-align: left; }
.zk-ticket-oben,
.zk-ticket-unten {
  position: relative;
  border: 1px solid var(--zk-line-strong);
  background: linear-gradient(180deg, rgba(105, 225, 245, .05), rgba(164, 146, 255, .045));
}
.zk-ticket-oben { padding: 18px 20px; border-bottom: 0; border-radius: 16px 16px 0 0; }
.zk-ticket-unten { padding: 16px 20px; border-top: 0; border-radius: 0 0 16px 16px; }
:root[data-theme="light"] :is(.zk-ticket-oben, .zk-ticket-unten) { background: linear-gradient(180deg, rgba(85, 64, 173, .035), rgba(0, 117, 139, .03)); }
/* Trennlinie mit zwei Ausstanzungen: die Masken schneiden echte Halbkreise aus, die
   Halbringe am Riss zeichnen deren Kante. Ohne Masken bleibt es eine gestrichelte Linie. */
.zk-ticket-riss { position: relative; height: 0; }
.zk-ticket-riss::after {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  border-top: 1px dashed var(--zk-line-strong);
}
@supports ((mask-image: radial-gradient(#000, #000)) or (-webkit-mask-image: radial-gradient(#000, #000))) {
  .zk-ticket-oben {
    -webkit-mask: radial-gradient(circle at 0 100%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 100%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 100%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat,
          radial-gradient(circle at 100% 100%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
  }
  .zk-ticket-unten {
    -webkit-mask: radial-gradient(circle at 0 0, transparent 9px, #000 9.5px) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 0, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 0, transparent 9px, #000 9.5px) left / 51% 100% no-repeat,
          radial-gradient(circle at 100% 0, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
  }
  .zk-ticket-riss::before {
    content: '';
    position: absolute;
    top: -9.5px;
    left: -9.5px;
    right: -9.5px;
    height: 19px;
    background:
      radial-gradient(circle at 9.5px 50%, transparent 8.6px, var(--zk-line-strong) 9.1px, var(--zk-line-strong) 9.6px, transparent 10.1px) left / 19px 19px no-repeat,
      radial-gradient(circle at 9.5px 50%, transparent 8.6px, var(--zk-line-strong) 9.1px, var(--zk-line-strong) 9.6px, transparent 10.1px) right / 19px 19px no-repeat;
    -webkit-mask: linear-gradient(90deg, transparent 9.5px, #000 9.5px, #000 calc(100% - 9.5px), transparent calc(100% - 9.5px));
    mask: linear-gradient(90deg, transparent 9.5px, #000 9.5px, #000 calc(100% - 9.5px), transparent calc(100% - 9.5px));
    pointer-events: none;
  }
}
.zk-ticket .niveau-badge { margin-bottom: 10px; }
.zk-ticket-titel {
  font-family: var(--zk-title);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--zk-text);
  overflow-wrap: break-word;
}
.zk-ticket-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; }
.zk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 11px 4px 8px;
  border: 1px solid var(--zk-line);
  border-radius: 999px;
  background: var(--zk-chip-bg);
  color: var(--zk-lead);
  font-size: 12.5px;
  line-height: 1.35;
}
.zk-chip .zk-ico { width: 15px; height: 15px; flex: none; color: var(--zk-cyan-text); }
.zk-ticket-preis {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 16px;
}
.zk-preis-block { min-width: 0; }
/* Preis im Markenverlauf (Rajdhani); alter Preis durchgestrichen, Rabattpreis in Mint. */
.zk-preis {
  font-family: var(--zk-title);
  font-size: clamp(2.1rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--zk-cyan);
  background: var(--zk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.zk-preis.zk-preis-alt,
.zk-preis .zk-preis-alt {
  font-size: 1.05rem;
  color: var(--zk-faint);
  -webkit-text-fill-color: var(--zk-faint);
  text-decoration: line-through;
}
.zk-preis.zk-preis-alt { background: none; }
.zk-preis.zk-preis-neu,
.zk-preis .zk-preis-neu {
  color: var(--zk-mint-text);
  -webkit-text-fill-color: var(--zk-mint-text);
}
.zk-preis.zk-preis-neu { background: none; }
.zk-preis-art { font-size: 12.5px; color: var(--zk-muted); }

/* Rechnung als Telemetrie: Bezeichnung, Punktlinie, Betrag in Mono. */
.zk-rechnung { display: grid; gap: 7px; margin: 0; font-size: 14px; }
.zk-rechnung-zeile { display: flex; align-items: baseline; gap: 8px; color: var(--zk-muted); }
.zk-rechnung-zeile dt { display: flex; align-items: baseline; flex: 1 1 auto; gap: 8px; min-width: 0; }
.zk-rechnung-zeile dt::after {
  content: '';
  flex: 1 1 12px;
  min-width: 12px;
  border-bottom: 1px dotted var(--zk-line-strong);
  transform: translateY(-4px);
}
.zk-rechnung-zeile dd {
  margin: 0;
  font-family: var(--zk-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--zk-text);
  white-space: nowrap;
}
.zk-rechnung-rabatt,
.zk-rechnung-rabatt dd { color: var(--zk-mint-text); }
.zk-rechnung-total {
  margin-top: 5px;
  padding-top: 11px;
  border-top: 1px solid var(--zk-line);
  color: var(--zk-text);
  font-size: 15.5px;
  font-weight: 700;
}
.zk-rechnung-total dt::after { display: none; }
.zk-rechnung-total dd { font-size: 15px; font-weight: 700; }

/* ---- Rabattcode ---- */
.zk-code { margin: 0 0 16px; text-align: left; }
.zk-code-label { display: inline-flex; align-items: center; gap: 8px; }
.zk-code-label .zk-ico { width: 17px; height: 17px; flex: none; color: var(--zk-violet-text); }
.zk-code-reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.zk-code-reihe .form-control.zk-code-feld {
  flex: 1 1 160px;
  width: auto;
  min-width: 0;
  min-height: 48px;
  font-family: var(--zk-mono);
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Platzhalter kleiner und ohne Sperrung, damit «Code eingeben» auch in FR/IT ganz steht. */
.zk-code-reihe .form-control.zk-code-feld::placeholder { font-size: 14px; letter-spacing: .02em; }
.zk-code-reihe .btn { flex: 0 0 auto; min-height: 48px; padding-left: 18px; padding-right: 18px; }
.zk-code-ok { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--zk-mint-text); }
.zk-code-ok .zk-ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.zk-code-fehler { margin-top: 10px; font-size: 14px; line-height: 1.45; color: #ffb2c0; }
:root[data-theme="light"] .zk-code-fehler { color: #b91c1c; }
.zk-code-hinweis { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--zk-muted); }

/* ---- Startknopf und sichere Verbindung ---- */
.zk-kasse-form .zk-kasse-kaufen,
.zk-kauf-knopf { min-height: 56px; }
.zk-sicher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--zk-muted);
  text-align: center;
}
.zk-sicher .zk-ico { width: 15px; height: 15px; flex: none; color: var(--zk-mint-text); }
.zk-kasse-info { margin: 14px 0 0; font-size: 13px; }
/* Visiert man den Startknopf an, zündet das Triebwerk auf der Rampe stärker. */
.zk-motion .zk-kasse:has(.zk-kasse-kaufen:is(:hover, :focus-visible)) :is(.zk-exhaust-halo, .zk-exhaust-core) {
  animation: zk-flame-boost .45s ease-in-out infinite alternate;
}

/* ---- Ziel (zahlung-success.php) ---- */
.zk-ziel-text { margin: 0 0 24px; font-size: 1.05rem; line-height: 1.7; color: var(--zk-lead); }

/* ---- Kaufkarte (kurs.php, lehrgang.php) ---- */
.card.zk-kaufkarte {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-color: transparent;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 27, 45, .92), rgba(10, 15, 27, .95));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42), 0 0 70px -30px rgba(113, 82, 218, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.card.zk-kaufkarte:hover {
  transform: none;
  border-color: transparent;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .46), 0 0 80px -26px rgba(113, 82, 218, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
}
:root[data-theme="light"] .card.zk-kaufkarte,
:root[data-theme="light"] .card.zk-kaufkarte:hover {
  border-color: transparent;
  background: linear-gradient(180deg, #ffffff, #f6f8fc);
  box-shadow: 0 18px 44px rgba(30, 49, 88, .12), 0 0 60px -30px rgba(85, 64, 173, .3), inset 0 1px 0 #ffffff;
}
/* Irisierender Rand wie an der Anmeldekarte; das Licht folgt dem Zeiger (--zk-edge). */
.card.zk-kaufkarte::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--zk-edge), rgba(255, 255, 255, .1), var(--zk-violet) 8%, var(--zk-cyan) 16%, var(--zk-mint) 21%, rgba(255, 255, 255, .1) 34%, rgba(255, 255, 255, .06) 70%, rgba(164, 146, 255, .35) 88%, rgba(255, 255, 255, .1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
:root[data-theme="light"] .card.zk-kaufkarte::before {
  background: conic-gradient(from var(--zk-edge), rgba(25, 36, 59, .14), #5540ad 8%, #00758b 16%, #176344 21%, rgba(25, 36, 59, .14) 34%, rgba(25, 36, 59, .1) 70%, rgba(85, 64, 173, .35) 88%, rgba(25, 36, 59, .14));
}
.zk-kaufkarte-fx {
  position: absolute;
  inset: -10px;
  z-index: -2;
  pointer-events: none;
  --zk-corner: rgba(105, 225, 245, .6);
  background:
    linear-gradient(var(--zk-corner), var(--zk-corner)) left top / 18px 1px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) left top / 1px 18px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) right top / 18px 1px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) right top / 1px 18px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) left bottom / 18px 1px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) left bottom / 1px 18px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) right bottom / 1px 18px no-repeat;
}
:root[data-theme="light"] .zk-kaufkarte-fx { --zk-corner: rgba(0, 117, 139, .55); }
.zk-kaufkarte-body { padding: 26px 26px 24px; text-align: center; }
.zk-kaufkarte .zk-preis { margin-bottom: 6px; }
.zk-kaufkarte .zk-preis-art { margin-bottom: 12px; font-size: 13px; }
/* Missions-Abzeichen: unsere Rakete im Orbit (statt 🧠 bzw. 🎓). */
.zk-patch {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(105, 225, 245, .18), rgba(101, 80, 219, .1) 45%, transparent 70%);
}
.zk-patch::before {
  content: '';
  position: absolute;
  inset: 18px -8px;
  border: 1px solid var(--zk-line-strong);
  border-radius: 50%;
  transform: rotate(-24deg);
}
.zk-patch::after {
  content: '';
  position: absolute;
  top: 17px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zk-cyan);
  box-shadow: 0 0 14px var(--zk-cyan);
}
.zk-patch--diplom::after { background: var(--amber); box-shadow: 0 0 14px var(--amber); }
:root[data-theme="light"] .zk-patch { background: radial-gradient(circle at 50% 45%, rgba(0, 117, 139, .12), rgba(85, 64, 173, .07) 45%, transparent 70%); }
:root[data-theme="light"] .zk-patch::after { background: #00758b; box-shadow: 0 0 10px rgba(0, 117, 139, .5); }
:root[data-theme="light"] .zk-patch--diplom::after { background: #b45309; box-shadow: 0 0 10px rgba(180, 83, 9, .45); }
.zk-patch .zk-rakete-mini { position: relative; width: 36px; height: 70px; filter: drop-shadow(0 0 14px rgba(105, 225, 245, .35)); }
:root[data-theme="light"] .zk-patch .zk-rakete-mini { filter: drop-shadow(0 8px 12px rgba(30, 49, 88, .22)); }
.zk-kauf-nutzen { margin-bottom: 10px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--zk-mint-text); }
.zk-kauf-recht { margin-bottom: 20px; font-size: 11.5px; line-height: 1.5; color: var(--zk-faint); }
.zk-kauf-knopf { margin-bottom: 12px; }
.zk-kauf-hinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 12.5px;
  color: var(--zk-muted);
}
.zk-kauf-hinweis::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--zk-mint);
  box-shadow: 0 0 10px var(--zk-mint);
}
:root[data-theme="light"] .zk-kauf-hinweis::before { background: #176344; box-shadow: none; }
.zk-kauf-sparen { margin-bottom: 18px; font-size: 12.5px; color: var(--zk-mint-text); }
.zk-kauf-liste { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--zk-line); text-align: left; }
.zk-kauf-label {
  margin-bottom: 10px;
  font: 500 11px/1.5 var(--zk-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zk-cyan-text);
}
.zk-kauf-punkte { display: flex; flex-direction: column; gap: 9px; font-size: 13px; line-height: 1.55; color: var(--zk-muted); }
.zk-kauf-hervor { color: var(--zk-text); }
.zk-kauf-telefon { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--zk-muted); }
.zk-kauf-telefon a { font-weight: 600; white-space: nowrap; }
.zk-kauf-note { margin-bottom: 14px; font-size: 13.5px; color: var(--zk-muted); }
.zk-kauf-note strong { color: var(--zk-text); }
.zk-kauf-sterne { color: #f5c451; letter-spacing: 1px; }
:root[data-theme="light"] .zk-kauf-sterne { color: #b45309; }
.zk-kauf-emoji { margin-bottom: 12px; font-size: 44px; line-height: 1; }
.zk-kauf-status { margin-bottom: 8px; color: var(--green); }
.zk-kauf-text { margin-bottom: 20px; font-size: 14px; }
.zk-kauf-fortschritt { margin-bottom: 20px; }
.zk-kauf-fortschritt .zk-kauf-label { margin-bottom: 8px; }
.zk-kauf-balken { height: 8px; }
.zk-kaufkarte--diplom .zk-kauf-balken { margin: 12px 0; }
.zk-kauf-zahl { margin-top: 6px; font-size: 13px; color: var(--zk-muted); }
.zk-kauf-stand { font-family: var(--zk-title); font-size: 2.2rem; font-weight: 700; line-height: 1.1; color: var(--zk-text); }
.zk-kauf-gesperrt { opacity: .5; cursor: not-allowed; }

/* ---- schmal ---- */
@media (max-width: 960px) {
  .zk-kasse { align-items: flex-start; padding-top: 28px; }
  .zk-kasse-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 560px; }
  /* Kasse: Karte zuerst, statt der grossen Rakete die kleine an der Karte. */
  .zk-kasse:not(.zk-kasse--ziel):not(.zk-kasse--warten) .zk-kasse-visual { display: none; }
  .zk-kasse-mini { display: block; top: -22px; right: -2px; }
  .zk-kasse-mini ~ .zk-sequenz { padding-right: 34px; }
  /* Ziel: die Szene bleibt, kompakt über der Karte. */
  .zk-kasse--ziel .zk-kasse-visual,
  .zk-kasse--warten .zk-kasse-visual { width: 100%; max-width: 420px; margin: 0 auto 6px; }
  .zk-kasse--ziel .zk-scene,
  .zk-kasse--warten .zk-scene { height: 260px; }
  .zk-kasse--ziel .zk-rocket,
  .zk-kasse--warten .zk-rocket { top: -24px; width: 300px; height: 295px; }
  .zk-kasse--ziel .zk-orbit,
  .zk-kasse--warten .zk-orbit { top: 22px; width: 230px; height: 230px; }
  .zk-kasse--ziel .zk-orbit-two,
  .zk-kasse--warten .zk-orbit-two { top: 4px; width: 270px; height: 270px; }
  .zk-kasse--ziel .zk-coord,
  .zk-kasse--warten .zk-coord { display: none; }
}
@media (max-width: 560px) {
  .zk-kasse { padding-top: 20px; padding-bottom: 44px; }
  .zk-kasse-wrap { padding: 0 16px; }
  .zk-kasse-card { padding: 22px 18px 20px; }
  .zk-ticket-oben { padding: 16px 16px; }
  .zk-ticket-unten { padding: 14px 16px; }
  .zk-seq { font-size: 10px; letter-spacing: .08em; }
  .zk-kaufkarte-body { padding: 22px 18px 20px; }
}
@media (max-width: 420px) {
  .zk-kaufkarte-fx { display: none; }
  .zk-code-reihe .btn { flex: 1 1 auto; }
  .zk-rechnung { font-size: 13.5px; }
  .zk-kasse-form .zk-kasse-kaufen,
  .zk-kauf-knopf { padding-left: 16px; padding-right: 16px; font-size: 16px; }
}
@media (max-width: 359px) {
  .zk-kasse-mini { display: none; }
  .zk-kasse-mini ~ .zk-sequenz { padding-right: 0; }
  .zk-seq-punkt { width: 28px; height: 28px; }
  .zk-seq + .zk-seq::before { top: 14px; left: calc(-50% + 19px); right: calc(50% + 19px); }
}

/* ============================== 14. App- und Lernbereich (ruhig) ============================== */

.dash-nav-item, .lektion-nav-item { border-bottom-color: var(--zk-line); }
.dash-nav-item.active,
.lektion-nav-item.active {
  color: var(--zk-text);
  background: linear-gradient(90deg, rgba(164, 146, 255, .14), rgba(105, 225, 245, .04));
  border-left: 2px solid var(--zk-cyan);
}
:root[data-theme="light"] :is(.dash-nav-item, .lektion-nav-item).active { background: linear-gradient(90deg, rgba(85, 64, 173, .08), rgba(0, 117, 139, .03)); border-left-color: #00758b; }
.lektion-nav-item.active .lektion-check { border-color: var(--zk-cyan); }
.lektion-sidebar-header, .lektion-content-header, .lektion-footer { border-color: var(--zk-line); }
.lektion-sidebar-title { font-family: var(--zk-mono); font-size: 11px; letter-spacing: .12em; }
.modul-item { background: linear-gradient(180deg, rgba(18, 27, 45, .7), rgba(13, 19, 34, .88)); border-color: var(--zk-line); }
:root[data-theme="light"] .modul-item { background: #ffffff; border-color: #d5deec; }
.modul-item:hover { border-color: rgba(105, 225, 245, .45); }
.modul-num { font-family: var(--zk-mono); }
.quiz-letter { font-family: var(--zk-mono); }
.quiz-antwort.selected { border-color: var(--zk-violet); background: rgba(164, 146, 255, .09); }
:root[data-theme="light"] .quiz-antwort.selected { border-color: #5540ad; background: rgba(85, 64, 173, .06); }
.quiz-antwort:hover { border-color: var(--zk-cyan); }
.quiz-erklaerung { color: var(--zk-cyan-text); background: rgba(105, 225, 245, .06); border-color: rgba(105, 225, 245, .22); }
.lektion-body code { color: var(--zk-cyan-text); font-family: var(--zk-mono); }
.lernbox-prompt, .lb-code { font-family: var(--zk-mono); }
.lb-kicker { font-family: var(--zk-mono); letter-spacing: .12em; }
.score-ring .fg { stroke: var(--zk-cyan); }
.lernbanner { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
/* Kurs-/Modulbanner in den Markenfarben (vorher Blau). Weisse Schrift bleibt
   überall mindestens 5.3:1 (hellste Stelle #1d7a93). */
.lernbanner.cat-aibs,
.lernbanner.cat-ki {
  background:
    radial-gradient(ellipse 60% 90% at 92% 0%, rgba(105, 225, 245, .24), transparent 62%),
    linear-gradient(125deg, #0b1026 0%, #2a2178 48%, #5540ad 78%, #1d7a93 120%);
}
.lernbanner-chip .ck { color: #5540ad; }
.lernbanner.cat-kids .lernbanner-chip .ck { color: #d97706; }
/* Lernseite (Stil steht dort inline im <style>; hier mit «body» etwas stärker). */
body .modul-progress-bar { background: var(--zk-grad); }
:root[data-theme="light"] body .modul-progress-bar { background: var(--zk-grad-btn); }
body .coach-in button { background: var(--zk-grad-btn); color: var(--zk-btn-ink); }
body .coach-msg.user { background: #5540ad; }
body #coachBtn:hover { border-color: var(--zk-cyan); }
.lernbanner-title { font-family: var(--zk-title); font-size: 1.7rem; letter-spacing: -.01em; }
:root[data-theme="light"] .lernbanner-title { color: #ffffff; }

/* Sehr schmale Handys (320 px): Grid-Spalten dürfen schrumpfen, Modulzeilen brechen
   um (Preis unter den Titel), statt die Seite seitlich zu verbreitern. */
@media (max-width: 420px) {
  .split-2col > * { min-width: 0; }
  .modul-item { flex-wrap: wrap; }
  .modul-item .modul-info { flex-basis: calc(100% - 60px); }
}

/* ============================== 15. Footer ============================== */

.footer {
  position: relative;
  isolation: isolate;
  border-top: 0;
  background:
    radial-gradient(ellipse 50% 90% at 88% 0%, rgba(52, 44, 130, .22), transparent 70%),
    linear-gradient(180deg, rgba(4, 7, 14, 0), rgba(4, 7, 14, .75) 40%);
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--zk-hairline-grad);
  opacity: .55;
}
:root[data-theme="light"] .footer {
  background:
    radial-gradient(ellipse 50% 90% at 88% 0%, rgba(101, 80, 219, .08), transparent 70%),
    linear-gradient(180deg, rgba(227, 233, 245, 0), #e3e9f5 40%);
}
.footer-col-title { font-family: var(--zk-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--zk-cyan-text); }
.footer-links a { color: var(--zk-muted); }
.footer-links a:hover { color: var(--zk-cyan-text); }
.footer-bottom, .footer-origin { border-top-color: var(--zk-line); }
.footer-copy { color: var(--zk-faint); }
.footer-alpasana a { color: var(--zk-cyan-text); }
.footer-trademarks { color: var(--zk-faint) !important; opacity: 1 !important; }

/* ============================== 16. Lade-Overlay mit unserer Rakete ============================== */

.rocket-loader { background: radial-gradient(ellipse at center, rgba(13, 19, 34, .95), rgba(4, 7, 14, .98)); }
:root[data-theme="light"] .rocket-loader { background: radial-gradient(ellipse at center, rgba(255, 255, 255, .95), rgba(231, 237, 249, .98)); }
.rocket-loader .rocket {
  bottom: 18px;
  width: 78px;
  height: 142px;
  font-size: 0;
  filter: drop-shadow(0 0 22px rgba(105, 225, 245, .35));
}
.rocket-loader .rocket svg { width: 100%; height: 100%; }
.rocket-loader .rocket-flame { display: none; }
.rocket-loader .rocket-stars,
.rocket-loader .rocket-stars::before,
.rocket-loader .rocket-stars::after { background: linear-gradient(transparent, rgba(105, 225, 245, .75), transparent); }
.rocket-text { font-family: var(--zk-title); font-size: 24px; letter-spacing: -.01em; }

/* ============================== 17. Bewegung ============================== */

@keyframes zk-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes zk-flame { from { transform: scaleY(.9); opacity: .6; } to { transform: scaleY(1.07); opacity: .85; } }
@keyframes zk-flame-boost { from { transform: scaleY(1.05); opacity: .8; } to { transform: scaleY(1.32); opacity: 1; } }
@keyframes zk-clouds { from { transform: translateY(0) scale(1); opacity: .07; } to { transform: translateY(-6px) scale(1.02); opacity: .13; } }
@keyframes zk-twinkle { from { opacity: .3; } to { opacity: .75; } }
@keyframes zk-spin { to { transform: rotate(360deg); } }
@keyframes zk-dash { to { stroke-dashoffset: -140; } }
@keyframes zk-orbit-border { to { --zk-angle: 360deg; } }
@keyframes zk-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes zk-materialize {
  from { opacity: 0; clip-path: inset(0 0 100% 0 round 20px); }
  35% { opacity: 1; }
  to { opacity: 1; clip-path: inset(-160px -160px -160px -160px round 20px); }
}
@keyframes zk-scan {
  0% { top: 12px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 14px); opacity: 0; }
}

/* Kasse (13b): Puls des aktiven Schritts, Halt-Blinken, Start der Rakete auf dem Ziel. */
@keyframes zk-seq-puls { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes zk-halt { 50% { opacity: .25; } }
/* Start von der Rampe (Lage wie auf der Kasse) in die Endlage aus 13b. */
@keyframes zk-abheben {
  0% { transform: translate(0, 0) rotate(0deg); }
  35% { transform: translate(2px, -22px) rotate(4deg); }
  100% { transform: translate(30px, -34px) rotate(24deg); }
}
@keyframes zk-seq-impuls {
  0% { background-position: -100% 0; opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { background-position: 200% 0; opacity: 0; }
}
@keyframes zk-wolken-weg {
  0% { opacity: .1; transform: scale(1); }
  35% { opacity: .32; transform: translateY(-4px) scale(1.25); }
  100% { opacity: 0; transform: translateY(-10px) scale(1.6); }
}

/* Dauerbewegung nur mit html.zk-motion (zukunft.js). */
.zk-motion .zk-rocket-float { animation: zk-hover 6s ease-in-out infinite; }
.zk-motion :is(.zk-exhaust-halo, .zk-exhaust-core) { animation: zk-flame 1.2s ease-in-out infinite alternate; }
.zk-motion .zk-rocket-clouds { animation: zk-clouds 7s ease-in-out infinite alternate; }
.zk-motion .zk-particles { animation: zk-twinkle 4s ease-in-out infinite alternate; }
.zk-motion .zk-orbit-one .zk-orbit-track { animation: zk-spin 28s linear infinite; }
.zk-motion .zk-trajectory { animation: zk-dash 9s linear infinite; }
.zk-motion .zk-telemetry::before { animation: zk-orbit-border 10s linear infinite; }
.zk-motion :is(.zk-seq--aktiv, .zk-seq--halt) .zk-seq-punkt::before { animation: zk-seq-puls 2.4s ease-out infinite; }
.zk-motion .zk-scene--warten .zk-readout .zk-status-dot { animation: zk-halt 1.4s ease-in-out infinite; }
.zk-motion .zk-patch::after { animation: zk-twinkle 2.6s ease-in-out infinite alternate; }
.zk-motion .zk-rampe-licht { animation: zk-twinkle 2.2s ease-in-out infinite alternate; }
/* Startknopf anvisiert: das Triebwerk zündet stärker. */
.zk-motion .zk-hero-rakete:has(.hero-actions .btn-primary:is(:hover, :focus-visible)) :is(.zk-exhaust-halo, .zk-exhaust-core) {
  animation: zk-flame-boost .45s ease-in-out infinite alternate;
}
/* Kurzer Auftritt (einmalig beim Laden, keine Dauerbewegung). html.zk-pausiert setzt
   schon das No-FOUC-Skript im Kopf, wenn jemand die Animationen pausiert hat. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.zk-pausiert) .zk-hero-rakete .zk-hero-copy > * { animation: zk-arrive .8s cubic-bezier(.2, .7, .2, 1) both; }
  html:not(.zk-pausiert) .zk-hero-rakete .zk-hero-copy > :nth-child(2) { animation-delay: .08s; }
  html:not(.zk-pausiert) .zk-hero-rakete .zk-hero-copy > :nth-child(3) { animation-delay: .16s; }
  html:not(.zk-pausiert) .zk-hero-rakete .zk-hero-copy > :nth-child(4) { animation-delay: .24s; }
  html:not(.zk-pausiert) .zk-hero-rakete .zk-hero-visual { animation: zk-arrive 1s cubic-bezier(.2, .7, .2, 1) .12s both; }
  html:not(.zk-pausiert) .zk-auth-card { animation: zk-materialize .95s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
  html:not(.zk-pausiert) .zk-auth-scan { animation: zk-scan .95s cubic-bezier(.4, 0, .2, 1) .1s backwards; }
  /* Ziel der Kasse: die Rakete hebt von der Rampe ab und geht in die Fluglage. */
  html:not(.zk-pausiert) .zk-scene--ziel .zk-rocket-lage { animation: zk-abheben 1.7s cubic-bezier(.45, 0, .2, 1) .25s both; }
  html:not(.zk-pausiert) .zk-scene--ziel .zk-rocket-clouds { animation: zk-wolken-weg 1.5s ease-out .2s both; }
  /* GO: der Impuls läuft Schritt für Schritt bis T−0. */
  html:not(.zk-pausiert) .zk-sequenz--ziel .zk-seq + .zk-seq::after { animation: zk-seq-impuls .7s ease-in-out 1.1s both; }
  html:not(.zk-pausiert) .zk-sequenz--ziel .zk-seq + .zk-seq + .zk-seq::after { animation-delay: 1.45s; }
  html:not(.zk-pausiert) .zk-sequenz--ziel .zk-seq + .zk-seq + .zk-seq + .zk-seq::after { animation-delay: 1.8s; }
}
/* Pause-Knopf während des Auftritts: auch die einmaligen Bewegungen der Kasse halten an. */
/* (::after darf nicht in :is() stehen, deshalb eine eigene Zeile.) */
.zk-motion-paused :is(.zk-scene--ziel .zk-rocket-lage, .zk-scene--ziel .zk-rocket-clouds),
.zk-motion-paused .zk-sequenz--ziel .zk-seq::after { animation-play-state: paused !important; }

/* Bestehende Effekte im Lernbereich (pulsierender Coach-Knopf, Konfetti) halten
   «Bewegung reduzieren» und die Pause ebenfalls ein. */
.zk-pausiert #coachBtn,
.zk-motion-paused #coachBtn { animation: none !important; }
.zk-pausiert .confetti-pc,
.zk-motion-paused .confetti-pc { display: none !important; }

/* Lade-Overlay (Animationen aus style.css): bei Pause still wie alles andere. */
.zk-pausiert .rocket-loader *,
.zk-pausiert .rocket-loader *::before,
.zk-pausiert .rocket-loader *::after,
.zk-motion-paused .rocket-loader *,
.zk-motion-paused .rocket-loader *::before,
.zk-motion-paused .rocket-loader *::after { animation: none !important; }

/* Ausserhalb des Sichtfelds, im Hintergrund-Tab oder pausiert: CSS-Schleifen stehen. */
.zk-offscreen *,
.zk-offscreen *::before,
.zk-offscreen *::after,
.zk-offscreen::before,
.zk-offscreen::after,
.zk-page-hidden .zk-scene *,
.zk-page-hidden .zk-auth-rakete *,
.zk-page-hidden .zk-telemetry::before,
.zk-page-hidden .zk-patch *,
.zk-page-hidden .zk-patch::after,
.zk-page-hidden .zk-sequenz *::before,
.zk-page-hidden .zk-sequenz *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zk-scene *, .zk-scene *::before, .zk-scene *::after,
  .zk-telemetry::before, .zk-auth-card, .zk-auth-scan,
  .zk-hero-rakete .zk-hero-copy > *, .zk-hero-rakete .zk-hero-visual,
  .zk-auth-rakete *, .navbar::before,
  .zk-patch *, .zk-patch::after, .zk-sequenz *, .zk-sequenz *::before, .zk-sequenz *::after,
  .rocket-loader *, .rocket-loader *::before, .rocket-loader *::after {
    animation: none !important;
    transition: none !important;
  }
  .btn:hover, .card:hover, .kurs-card:hover, a.ziel-card:hover, a.oeko-card:hover { transform: none !important; }
  #coachBtn { animation: none !important; }
  .confetti-pc { display: none !important; }
}

/* ============================== 18. Barrierefreiheit: Systemfarben, Transparenz ============================== */

/* Weniger Transparenz: deckende Flächen, kein Weichzeichner. !important, weil die
   Glasflächen je nach Variante unterschiedlich spezifische Regeln haben. */
@media (prefers-reduced-transparency: reduce) {
  .navbar { background: #080c14 !important; }
  :root[data-theme="light"] .navbar { background: #ffffff !important; }
  .zk-auth-card, .zk-telemetry, .hero-stats > div, .hero-badge, .kurs-suche, .nav-menu,
  .lang-dd-menu, .zk-auth .apv, .rocket-loader, .card.zk-kaufkarte {
    background: var(--zk-surface) !important;
  }
  .navbar, .zk-auth-card, .zk-telemetry, .hero-stats > div, .hero-badge, .kurs-suche, .nav-menu,
  .lang-dd-menu, .zk-auth .apv, .rocket-loader {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (forced-colors: active) {
  .zk-sky-canvas, .zk-scene, .zk-planet, .zk-flight-label, .zk-auth-fx, .zk-auth-rakete, .zk-auth-scan,
  .navbar::after, .navbar::before, .zk-auth-card::before, .zk-auth-card::after, .zk-telemetry::before,
  .hero::before, .hero::after, .zk-kopf-himmel, .zk-auth::before, .zk-auth::after,
  .zk-sequenz, .zk-patch, .zk-kaufkarte-fx, .card.zk-kaufkarte::before, .zk-ticket-riss::before { display: none !important; }
  .zk-ticket-oben, .zk-ticket-unten { -webkit-mask: none; mask: none; border-color: CanvasText; }
  .zk-preis .zk-preis-alt, .zk-preis .zk-preis-neu,
  .zk-preis.zk-preis-alt, .zk-preis.zk-preis-neu { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .gradient-text, .zk-telemetry .hero-stat-value, .zk-preis {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .btn, .zk-auth-card, .zk-telemetry, .hero-stats > div, .card.zk-kaufkarte { border: 1px solid ButtonText; }
  :focus-visible { outline-color: Highlight; }
  /* Die drei Striche des Menüknopfs sind Hintergrundflächen und verschwänden sonst. */
  .nav-toggle span { background: CanvasText; forced-color-adjust: none; }
}

/* ============================== 19. Druck ============================== */

@media print {
  .navbar::before, .zk-sky-canvas, .zk-scene, .zk-planet, .zk-flight-label, .zk-motion-toggle,
  .zk-kopf-himmel, .zk-auth-fx, .zk-auth-rakete, .zk-auth-scan, .zk-telemetry-bar,
  .zk-sequenz, .zk-patch, .zk-kasse-visual, .zk-kaufkarte-fx { display: none !important; }
  .gradient-text, .zk-telemetry .hero-stat-value, .zk-preis { background: none !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; }
  .hero, .zk-auth, .footer { background: none !important; }
  .hero::before, .hero::after, .zk-auth::before, .zk-auth::after { display: none !important; }
}