/* German4You · Zukunft — Design-Schicht im Stil von modernhosting.ch und absofort.ch
   -----------------------------------------------------------------------------------
   Lädt NACH app.css (includes/layout.php) und überschreibt nur Darstellung:
   Tokens, Komponenten, Kopfzeile mit Sternenhimmel, Seitenköpfe, Rakete,
   Anmelde-Karte, ruhiger Lern- und Prüfungsbereich. app.css bleibt unverändert.
   Der Admin-Bereich lädt diese Datei ebenfalls (Tokens, Karten, Formulare, Knöpfe) und
   darüber zukunft-admin.css mit der ruhigen Variante.

   Aufbau der Farben:
   - Tageslicht (Standard ohne data-theme) und Weltraum ([data-theme="dark"])
     für alle Inhalte. Die Hell/Dunkel-Wahl bleibt wie bisher (Umschalter,
     gespeicherte Wahl, sonst Systemeinstellung).
   - Der «Rahmen» ist in beiden Varianten Weltraum: Kopfzeile, Vertrauensleiste,
     Seitenköpfe (.hero2, .cert-hero), Anmeldung (.zk-auth), dunkle Bänder
     (.cert-promo, .cta-band, .hero-step, .exam-banner) und Fuss. Diese Flächen
     waren schon bisher im hellen Design dunkel; sie setzen die Tokens lokal.

   Grenzen, die hier bewusst eingehalten werden:
   - Lern- und Prüfungsseiten bleiben ruhig: keine Animation hinter Aufgaben
     oder Texten, die Kopfzeile steht dort still (body[data-zk-ruhig]), der
     Timer bleibt beim Scrollen sichtbar (.cert-top klebt unter der Kopfzeile).
   - Bewegung nur mit html.zk-motion (setzt zukunft.js, wenn erlaubt). Ohne
     JavaScript, bei «Bewegung reduzieren» oder nach «Pause» steht alles still.
   - Die Nachweis-Vorschau (.cert-preview) bleibt ein weisses Dokument wie das PDF.
   - Keine externen Quellen. Schriften lokal (SIL OFL, ../fonts/OFL-*.txt).
   Kontraste gemessen (WCAG AA), Werte 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 ============================== */

/* Tageslicht (Standard). Die Namen aus app.css bekommen die neuen Werte, damit
   jede Seite mitzieht; neue Werte heissen --zk-*. Weisse Schrift auf den
   Tageslicht-Flächen: mindestens 4.9:1 (hellste Stelle #1d7a93). */
:root,
:root:not([data-theme="dark"]) .zk-auth-card {
  color-scheme: light;

  --zk-violet: #a492ff;
  --zk-indigo: #6550db;
  --zk-cyan: #69e1f5;
  --zk-mint: #9af5d4;
  --zk-grad-space: linear-gradient(105deg, #a492ff, #69e1f5 65%, #9af5d4);
  --zk-grad-day: linear-gradient(105deg, #5540ad, #0e6a86 58%, #0f766e);
  --zk-grad: var(--zk-grad-day);
  --zk-grad-text: linear-gradient(105deg, #5540ad, #006477 58%, #0f766e);
  --zk-on-grad: #ffffff;
  --zk-hairline: linear-gradient(90deg, transparent, #5540ad 22%, #00758b 55%, #0f766e 78%, transparent);

  --zk-page: #f3f5fb;
  --zk-glass: rgba(255, 255, 255, .8);
  --zk-glass-strong: rgba(255, 255, 255, .95);
  --zk-card-bg: #ffffff;
  --zk-card-solid: #ffffff;
  --zk-card-border: #dbe2ee;
  --zk-card-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 10px 28px rgba(30, 49, 88, .07);
  --zk-card-shadow-hover: 0 0 0 1px rgba(85, 64, 173, .12), 0 18px 40px rgba(30, 49, 88, .12);
  --zk-hover-border: rgba(85, 64, 173, .45);
  --zk-spot: rgba(85, 64, 173, .07);
  --zk-line: rgba(25, 36, 59, .12);
  --zk-line-strong: rgba(25, 36, 59, .22);
  --zk-chip-bg: rgba(255, 255, 255, .78);

  --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: #5540ad;
  --zk-focus-ring: rgba(85, 64, 173, .2);
  --zk-glow: rgba(85, 64, 173, .16);

  --zk-ok-bg: #eafaf2;
  --zk-ok-line: #15803d;
  --zk-ok-ink: #0b6b41;
  --zk-bad-bg: #fff0f3;
  --zk-bad-line: #c8254a;
  --zk-bad-ink: #a3183a;
  --zk-amber-bg: #fff4d6;
  --zk-amber-line: #e0b24a;
  --zk-amber-ink: #7a4f06;

  /* app.css */
  --bg: #f3f5fb;
  --bg-soft: #e9edf7;
  --surface: #ffffff;
  --surface-2: #f4f6fb;
  --ink: #19243b;
  --ink-soft: #4c5c76;
  --line: #dbe2ee;
  --brand: #5540ad;
  --brand-600: #43318f;
  --brand-050: #efecfb;
  --teal: #0e6a86;
  --good: #15803d;
  --bad: #c8254a;
  --grad: var(--zk-grad-day);
  --tint: linear-gradient(135deg, #f3f0fe, #eaf7f8);
  --tint-border: #d9d1f7;
  --card: var(--surface);
  --muted: var(--ink-soft);
  --r: 16px;
  --r-lg: 20px;
  --shadow-sm: 0 4px 14px rgba(30, 49, 88, .06);
  --shadow: 0 10px 30px rgba(30, 49, 88, .1);
  --shadow-lg: 0 18px 44px rgba(30, 49, 88, .14);
  /* Hinweis- und Fehlerflächen wie in app.css – hier nötig, weil die helle
     Anmeldekarte im dunklen Rahmen sonst dessen dunkle Werte erben würde. */
  --warm-bg: #fff8ec;
  --warm-border: #ffe4b0;
  --warm-ink: #8a6412;
  --danger-bg: #fff0f3;
  --danger-ink: #b81b3c;
}

/* Schriften: nur am Root, damit :lang(uk) unten überall greift. */
:root {
  --zk-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --zk-title: 'Rajdhani', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --zk-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --zk-label: var(--zk-mono);
}

/* Weltraum: dunkles Design (Umschalter) und der dunkle Rahmen jeder Seite. */
[data-theme="dark"],
.topnav,
.trustbar,
.hero2,
.cert-hero,
.cert-promo,
.cta-band,
.footer,
.zk-auth,
.hero-step,
.exam-banner {
  color-scheme: dark;

  --zk-grad: var(--zk-grad-space);
  --zk-grad-text: var(--zk-grad-space);
  --zk-on-grad: #04070e;
  --zk-hairline: linear-gradient(90deg, transparent, #a492ff 22%, #69e1f5 55%, #9af5d4 78%, transparent);

  --zk-page: #070a13;
  --zk-glass: rgba(13, 19, 34, .72);
  --zk-glass-strong: rgba(12, 18, 32, .92);
  --zk-card-bg: linear-gradient(180deg, rgba(18, 27, 45, .84), rgba(13, 19, 34, .95));
  --zk-card-solid: #0f1627;
  --zk-card-border: rgba(255, 255, 255, .09);
  --zk-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 40px rgba(0, 0, 0, .25);
  --zk-card-shadow-hover: 0 0 0 1px rgba(164, 146, 255, .14), 0 18px 50px rgba(0, 0, 0, .42), 0 0 44px rgba(105, 225, 245, .08);
  --zk-hover-border: rgba(164, 146, 255, .5);
  --zk-spot: rgba(105, 225, 245, .1);
  --zk-line: rgba(255, 255, 255, .09);
  --zk-line-strong: rgba(255, 255, 255, .18);
  --zk-chip-bg: rgba(13, 19, 34, .62);

  --zk-text: #eef3ff;
  --zk-lead: #c3cde0;
  --zk-muted: #a6b2ca;
  --zk-faint: #8e9bb6;
  --zk-cyan-text: #69e1f5;
  --zk-violet-text: #a492ff;
  --zk-mint-text: #9af5d4;

  --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);
  --zk-glow: rgba(105, 225, 245, .16);

  --zk-ok-bg: rgba(52, 211, 153, .12);
  --zk-ok-line: #34d399;
  --zk-ok-ink: #9af5d4;
  --zk-bad-bg: rgba(255, 107, 133, .12);
  --zk-bad-line: #ff6b85;
  --zk-bad-ink: #ffb3c1;
  --zk-amber-bg: rgba(255, 176, 32, .12);
  --zk-amber-line: rgba(255, 176, 32, .45);
  --zk-amber-ink: #ffce7a;

  /* Canvas (zukunft.js) */
  --zk-c-star: #ffffff;
  --zk-c-a: #69e1f5;
  --zk-c-b: #a492ff;
  --zk-c-line: #69e1f5;
  --zk-c-strength: 1;

  --bg: #070a13;
  --bg-soft: #0a0f1c;
  --surface: #0d1322;
  --surface-2: #121b2d;
  --ink: #eef3ff;
  --ink-soft: #a6b2ca;
  --line: #243149;
  --brand: #69e1f5;
  --brand-600: #8ee8f8;
  --brand-050: rgba(105, 225, 245, .1);
  --teal: #69e1f5;
  --good: #34d399;
  --bad: #ff6b85;
  --grad: var(--zk-grad-space);
  --tint: linear-gradient(135deg, rgba(164, 146, 255, .1), rgba(105, 225, 245, .06));
  --tint-border: rgba(164, 146, 255, .3);
  --warm-bg: #231b0d;
  --warm-border: #4a3c1c;
  --warm-ink: #ffce7a;
  --danger-bg: #2a111a;
  --danger-ink: #ffb3c1;
  --card: var(--surface);
  --muted: var(--ink-soft);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow: 0 12px 34px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
}
/* Rahmenflächen setzen die Schrift neu (sonst erben sie die Tageslicht-Farbe des body). */
.topnav, .trustbar, .hero2, .cert-hero, .cert-promo, .cta-band, .footer, .zk-auth, .hero-step, .exam-banner { color: var(--ink); }
:root:not([data-theme="dark"]) .zk-auth-card { color: var(--ink); }

/* Ukrainisch: Rajdhani, Inter und JetBrains Mono liegen lokal nur mit lateinischen
   Zeichen vor. Kyrillisch deshalb durchgehend in der Systemschrift (wie bisher),
   statt Buchstaben aus zwei Schriften zu mischen. Zahlen und Codes bleiben Mono. */
:root:lang(uk) {
  --zk-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
  --zk-title: var(--zk-font);
  --zk-label: var(--zk-font);
}

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

html { background: var(--bg); scrollbar-color: #b5c2d8 transparent; }
[data-theme="dark"] { scrollbar-color: #2a3654 transparent; }
body {
  font-family: var(--zk-font);
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(101, 80, 219, .07), transparent 62%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
[data-theme="dark"] body {
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(52, 44, 130, .34), transparent 62%),
    radial-gradient(900px 480px at -10% 40%, rgba(71, 206, 235, .05), transparent 60%),
    var(--bg);
}
button, input, select, textarea { font-family: inherit; }
::selection { background: #5540ad; color: #ffffff; }
[data-theme="dark"] ::selection, .topnav ::selection, .hero2 ::selection, .footer ::selection { background: var(--zk-violet); color: #04070e; }

/* Titel in Rajdhani (schmal, technisch), Fliesstext bleibt Inter. Aufgaben,
   Lesetexte und Rechtstexte behalten Inter (Abschnitt 11). */
h1, h2, h3 {
  font-family: var(--zk-title);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h4, h5 { font-family: var(--zk-font); }
p { text-wrap: pretty; }
a { color: var(--brand); }
a:hover { color: var(--brand-600); }
.muted { color: var(--ink-soft); }

/* Sichtbarer Fokus: Ring in Indigo (hell) bzw. Cyan (Weltraum). app.css setzt beim
   Fokus border-radius: 4px – Knöpfe und Karten behalten hier ihre eigene Form. */
:focus-visible { outline: 2px solid var(--zk-focus); outline-offset: 3px; }
.btn:focus-visible, .opt:focus-visible { outline: 2px solid var(--zk-focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--zk-focus-ring); }
.input:focus-visible, .write-area:focus-visible { outline: 2px solid var(--zk-focus); outline-offset: 1px; }
.btn:focus-visible, .conjure-btn:focus-visible, .hint-btn:focus-visible { border-radius: 12px; }
:is(.dt-chip, .lvl-chip, .balance-chip, .theme-toggle, .share-btn, .lang-dd > summary, .lvl-fold > summary, .legal-nav a, .sv-star):focus-visible { border-radius: 999px; }
.opt:focus-visible { border-radius: 14px; }
.input:focus-visible { border-radius: 12px; }
.write-area:focus-visible { border-radius: 14px; }
.nav-toggle:focus-visible { border-radius: 12px; }
:is(.simple-card, .exam-skill, .more-item, .lesson-node, .card, .exam-banner, .order-pkg, a.kpi):focus-visible { border-radius: var(--r-lg); outline-offset: 2px; }
.faq summary:focus-visible, .faq-item summary:focus-visible { border-radius: 8px; outline-offset: 2px; }
.nav-links a:focus-visible, .lang-menu a:focus-visible { border-radius: 10px; outline-offset: 1px; }
.brand:focus-visible { border-radius: 12px; }

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

.btn {
  text-align: center;
  text-wrap: balance;
  border-radius: 12px;
  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);
  color: var(--zk-on-grad);
  border: 1px solid transparent;
}
.btn-primary { box-shadow: 0 10px 28px var(--zk-glow); }
.btn-primary:hover { box-shadow: 0 14px 36px var(--zk-glow), 0 0 30px rgba(113, 82, 218, .22); transform: translateY(-2px); }
.btn-ghost {
  background: var(--zk-chip-bg);
  border: 1px solid var(--zk-line-strong);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--ink); background: var(--brand-050); box-shadow: 0 0 22px var(--zk-glow); }
/* Warm-Knopf (KI-Korrektur, Aufnahme): weisse Schrift auf Orange hatte 2.35:1,
   dunkle Schrift auf demselben Verlauf 6.4–8.1:1. */
.btn-warm, .btn-warm:hover { color: #1a0d05; }
.btn-warm { box-shadow: 0 8px 22px rgba(255, 93, 115, .25); }
.btn-lg { padding: 15px 26px; font-size: 16.5px; }
/* Heller Knopf auf dunklen Bändern (Dashboard, Kompass, Abschluss): jetzt der
   Verlaufsknopf, damit jede Hauptaktion gleich aussieht. */
.cta-white, .cta-white:hover { background: var(--zk-grad); color: var(--zk-on-grad); border: 1px solid transparent; box-shadow: 0 12px 34px var(--zk-glow); }
.btn-linkedin { border-radius: 12px; }

/* ============================== 5. Kopfzeile mit Sternenhimmel ============================== */

.topnav {
  isolation: isolate;
  background: rgba(7, 10, 19, .86);
  -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 */
.topnav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--zk-hairline);
  opacity: .65;
  pointer-events: none;
}
/* Flugfortschritt: die Kante der Kopfzeile füllt sich beim Scrollen (reines CSS,
   nur wo scroll-getriebene Animation unterstützt wird). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .topnav::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      z-index: 1;
      background: var(--zk-grad-space);
      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);
    }
  }
}
@keyframes zk-flight { to { transform: scaleX(1); } }

/* Flugfortschritt bei Pause und auf Lern- und Prüfungsseiten aus (dort bleibt alles ruhig). */
html.zk-pausiert:not(.zk-js) .topnav::before, .zk-motion-paused .topnav::before, body[data-zk-ruhig] .topnav::before { display: none; }

/* 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;
}

.brand { color: var(--ink); }
.brand .logo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 20px rgba(105, 225, 245, .28); }
[data-theme="dark"] .brand .logo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 20px rgba(105, 225, 245, .28); }
.brand-txt { font-family: var(--zk-title); font-size: 21px; font-weight: 700; letter-spacing: -.005em; line-height: 1.05; }
.brand small { display: inline-block; margin-top: 3px; font-family: var(--zk-label); font-size: 9.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--zk-faint); }

.nav-links a { color: var(--zk-muted); font-weight: 600; }
.nav-links a:hover { color: var(--zk-text); background: rgba(255, 255, 255, .06); }
/* Einstufungstest-Knopf in der Kopfzeile: Verlauf mit dunkler Schrift (13:1). */
.topnav .nav-links a.btn-primary,
.topnav .nav-links a.btn-primary:visited,
.topnav .nav-links a.btn-primary:hover {
  background: var(--zk-grad-space);
  color: var(--zk-on-grad);
  -webkit-text-fill-color: var(--zk-on-grad);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(105, 225, 245, .18);
}
.topnav .nav-links a.btn-primary:hover { box-shadow: 0 10px 28px rgba(105, 225, 245, .3), 0 0 26px rgba(113, 82, 218, .25); }
/* Admin-Link: Bernstein-Chip statt heller Fläche mit weisser Schrift. */
.topnav .nav-links a.admin-link,
.topnav .nav-links a.admin-link:hover { background: rgba(255, 176, 32, .1); border: 1px solid rgba(255, 176, 32, .4); color: #ffce7a; border-radius: 10px; }

.balance-chip {
  background: rgba(105, 225, 245, .07);
  border: 1px solid rgba(105, 225, 245, .38);
  color: #8ee8f8;
}
.balance-chip strong { font-family: var(--zk-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.balance-chip:hover { border-color: #69e1f5; box-shadow: 0 0 18px rgba(105, 225, 245, .2); }
.balance-chip .buy-plus { background: var(--zk-grad-space); color: #04070e; }
.balance-chip.low { border-color: rgba(255, 107, 133, .6); background: rgba(255, 107, 133, .1); color: #ffb3c1; }
.balance-chip.low .buy-plus { background: linear-gradient(135deg, #ff8a3d, #ff5d73); color: #1a0d05; }

.theme-toggle,
.nav-toggle {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .04);
  color: var(--zk-muted);
}
.theme-toggle:hover,
.nav-toggle:hover { background: rgba(255, 255, 255, .08); border-color: #69e1f5; color: var(--zk-text); box-shadow: 0 0 16px rgba(105, 225, 245, .18); }
.nav-toggle { color: var(--zk-text); }

/* Sprachwahl: bleibt auffällig (Rand in Markenfarbe, seit 22.09.2026), jetzt Cyan. */
.lang-dd > summary {
  border: 2px solid rgba(105, 225, 245, .75);
  background: rgba(105, 225, 245, .07);
  color: var(--zk-text);
}
.lang-dd > summary:hover { background: rgba(105, 225, 245, .14); box-shadow: 0 0 16px rgba(105, 225, 245, .2); }
.lang-dd .ld-code { font-family: var(--zk-mono); font-weight: 600; letter-spacing: .04em; }
.lang-dd .ld-caret { color: var(--zk-muted); }
/* Menüs in der Kopfzeile deckend: die Kopfzeile hat selbst einen Weichzeichner, darin
   verschachtelt wirkt backdrop-filter nicht – halbtransparent schiene die Seite durch. */
.lang-menu {
  background: linear-gradient(180deg, #111a2b, #0b1120);
  border: 1px solid var(--zk-line-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.lang-menu a { color: var(--zk-text); }
.lang-menu a:hover { background: rgba(255, 255, 255, .06); }
.lang-menu a.on { color: #8ee8f8; background: rgba(105, 225, 245, .1); }
.lang-menu a .ld-check { color: #69e1f5; }

/* Pause-Knopf für alle Animationen (neben dem Hell/Dunkel-Umschalter). Bleibt
   verborgen, bis zukunft.js läuft, und bei «Bewegung reduzieren» ganz. */
[data-zk-motion][hidden] { display: none !important; }
.zk-motion-ico {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 11px;
}
.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;
}
.zk-motion-toggle[aria-pressed="true"] { color: #69e1f5; border-color: #69e1f5; }
/* Zweiter Pause-Knopf im Handy-Menü (sehr schmale Handys: in der Leiste fehlt Platz). */
.zk-motion-menu {
  display: none;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--zk-line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: var(--zk-text);
  font: 600 15px/1.3 var(--zk-font);
  text-align: left;
}
.zk-motion-menu[aria-pressed="true"] { color: #69e1f5; border-color: #69e1f5; }

@media (max-width: 860px) {
  /* Geschlossen: unsichtbar UND nicht fokussierbar (vorher nur transparent, per Tab erreichbar). */
  .nav-links { visibility: hidden; transition: opacity .18s, transform .18s, visibility 0s linear .18s; }
  .topnav.open .nav-links { visibility: visible; transition: opacity .18s, transform .18s, visibility 0s; }
  .nav-links {
    background: linear-gradient(180deg, #111a2b, #0b1120);
    border-color: var(--zk-line-strong);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  }
  .nav-links a:hover { background: rgba(255, 255, 255, .06); }
}
@media (max-width: 420px) {
  .topnav .zk-motion-toggle { display: none; }
  .topnav .zk-motion-menu:not([hidden]) { display: flex; }
  .brand { flex: 0 0 auto; }
}
/* Sehr schmale Handys (320–360 px), angemeldet: Logo, Guthaben, Menü, Sprache und
   Hell/Dunkel passen in eine Zeile (vorher ragte die Leiste 4 px über den Rand und
   drückte das Logo weg). Das Plus-Zeichen und der Pfeil der Sprachwahl entfallen dort. */
@media (max-width: 360px) {
  .topnav .row { gap: 6px; }
  .balance-chip { gap: 4px; padding: 5px 9px 5px 9px; }
  .balance-chip .buy-plus, .lang-dd .ld-caret { display: none; }
  .lang-dd > summary { padding: 6px 10px; gap: 5px; }
  .theme-toggle { width: 34px; height: 34px; }
  .nav-toggle { width: 38px; height: 38px; }
}

/* ============================== 6. Seitenköpfe mit Sternenhimmel ============================== */

/* Startseite, UA-Landing, Partner (.hero2), Zertifizierung (.cert-hero), Anmeldung
   (.zk-auth). zukunft.js legt das Canvas hinein; ohne JavaScript zeigen die
   CSS-Sterne unten den Himmel. */
.hero2,
.cert-hero,
.zk-auth {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #070a13;
  background-image:
    radial-gradient(ellipse 58% 78% at 84% 8%, rgba(52, 44, 130, .55), transparent 62%),
    radial-gradient(ellipse 46% 60% at 4% 100%, rgba(71, 206, 235, .1), transparent 66%);
}
/* Sterne als CSS-Rückfall (ohne JavaScript) und auf den dunklen Bändern ohne Canvas. */
.hero2::before,
.cert-hero::before,
.zk-auth::before,
.cert-promo::before,
.cta-band::before,
.hero-step::before,
.exam-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    radial-gradient(1.3px 1.3px at 23px 41px, rgba(214, 226, 255, .55) 60%, transparent 62%),
    radial-gradient(1px 1px at 131px 97px, rgba(214, 226, 255, .55) 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 77px 173px, rgba(105, 225, 245, .45) 60%, transparent 62%),
    radial-gradient(1px 1px at 190px 22px, rgba(214, 226, 255, .5) 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 59px 121px, rgba(164, 146, 255, .5) 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; }
/* Feine Rasterlinien wie bei modernhosting + leuchtende Kante unten */
.hero2::after,
.cert-hero::after,
.zk-auth::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--zk-hairline) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(7, 10, 19, .55) 3px 4px);
  opacity: .42;
}
/* Lesbarkeit: hinter dem Text wird das Netz weich abgedunkelt, am Rand bleibt es voll. */
.hero2:not(.zk-hero-rakete) > .zk-sky-canvas {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4) 52%, #000 82%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4) 52%, #000 82%);
}
.zk-hero-rakete > .zk-sky-canvas {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .42) 40%, #000 62%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .42) 40%, #000 62%);
}
.cert-hero > .zk-sky-canvas,
.zk-auth > .zk-sky-canvas {
  -webkit-mask-image: radial-gradient(ellipse 42% 60% at 50% 50%, rgba(0, 0, 0, .35), #000 80%);
  mask-image: radial-gradient(ellipse 42% 60% at 50% 50%, rgba(0, 0, 0, .35), #000 80%);
}
@media (max-width: 900px) {
  .hero2 > .zk-sky-canvas {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .45) 55%, #000 82%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .45) 55%, #000 82%);
  }
}

.hero2 .eyebrow,
.cert-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 7px 15px 7px 13px;
  border: 1px solid var(--zk-line-strong);
  border-radius: 999px;
  background: var(--zk-chip-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--zk-cyan-text);
  font: 500 11.5px/1.5 var(--zk-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: normal;
  text-align: left;
}
/* Statt Emoji-Blitz ein leuchtender Statuspunkt in der Farbe des Labels. */
.hero2 .eyebrow::before,
.cert-hero .eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.cert-hero .eyebrow { margin-bottom: 18px; }

/* Titel: Rajdhani, gemischte Schreibweise (Nomen bleiben für Lernende erkennbar),
   Verlauf von Weiss zu Mint – «Deutsch, transformiert». */
.h-title {
  font-family: var(--zk-title);
  font-weight: 700;
  text-transform: none;
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.018em;
  color: #eef3ff;
  background: linear-gradient(100deg, #ffffff 0%, #eef3ff 40%, #c7f3ff 70%, #9af5d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .04em;
}
:root:lang(uk) .h-title { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.08; letter-spacing: -.01em; }
/* Seitenköpfe ohne Bild (UA-Landing, Partner): eine breite Spalte statt einer halben. */
.hero2:not(.zk-hero-rakete) .hero2-grid { grid-template-columns: minmax(0, 1fr); }
.hero2:not(.zk-hero-rakete) .hero2-copy { max-width: 860px; }
.h-sub { color: var(--zk-lead); font-size: 1.12rem; line-height: 1.7; }
.h-sub b, .h-sub strong { color: var(--zk-text); }
.h-sub a { color: var(--zk-cyan-text); text-decoration: underline; text-underline-offset: 3px; }
.hero2 .btn-ghost,
.cert-hero .btn-ghost,
.cta-band .btn-ghost,
.cert-promo .btn-ghost {
  border: 1px solid var(--zk-line-strong);
  background: rgba(105, 225, 245, .045);
  color: var(--zk-text);
}
.hero2 .btn-ghost:hover,
.cert-hero .btn-ghost:hover,
.cta-band .btn-ghost:hover,
.cert-promo .btn-ghost:hover { border-color: #69e1f5; background: rgba(105, 225, 245, .09); color: var(--zk-text); box-shadow: 0 0 26px rgba(105, 225, 245, .16); }
.trust-chips { color: var(--zk-muted); font-weight: 600; font-size: 14px; gap: 10px 18px; }
/* Häkchen der Startseite: Mint-Haken statt Emoji (Text unverändert). */
.zk-checks > span { display: inline-flex; align-items: center; gap: 9px; }
.zk-checks > span::before {
  content: '';
  width: 14px;
  height: 7px;
  flex: 0 0 14px;
  margin-top: -4px;
  border-left: 2px solid #9af5d4;
  border-bottom: 2px solid #9af5d4;
  transform: rotate(-45deg) scale(.85);
  filter: drop-shadow(0 0 5px rgba(154, 245, 212, .55));
}
/* Pflichthinweis «Unverbindliche Einschätzung. Kein offizielles Zertifikat.»:
   bleibt sichtbar und gut lesbar (9.3:1), im Seitenkopf mit kleinem Info-Ring davor. */
.micro-legal { color: var(--zk-muted); font-size: 13px; letter-spacing: .01em; }
.hero2 .micro-legal {
  display: flex;
  align-items: center;
  gap: 9px;
}
.hero2 .micro-legal::before {
  content: '';
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: .8;
}

/* Orbit-Ring als leise Deko (UA-Landing, Partner, Zertifizierung; reines CSS). */
.hero2:not(.zk-hero-rakete) > .wrap::before,
.cert-hero > .wrap::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -230px;
  width: 470px;
  height: 470px;
  border: 1px solid var(--zk-line-strong);
  border-radius: 50%;
  transform: rotate(-28deg) scaleY(.42);
  pointer-events: none;
  opacity: .8;
}
.hero2:not(.zk-hero-rakete) > .wrap::after,
.cert-hero > .wrap::after {
  content: '';
  position: absolute;
  top: 46px;
  right: 110px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #69e1f5;
  box-shadow: 0 0 18px #69e1f5;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .hero2:not(.zk-hero-rakete) > .wrap::before,
  .hero2:not(.zk-hero-rakete) > .wrap::after,
  .cert-hero > .wrap::before,
  .cert-hero > .wrap::after { display: none; }
}
.cert-hero > .wrap { position: relative; }

/* Planetenhorizont: von hier startet die Rakete. */
.zk-planet {
  position: absolute;
  z-index: -1;
  left: 64%;
  top: calc(100% - 70px);
  width: 260vmax;
  height: 260vmax;
  margin-left: -130vmax;
  border-radius: 50%;
  border-top: 1px solid rgba(154, 245, 212, .55);
  background: radial-gradient(circle at 50% 0, rgba(105, 225, 245, .18), rgba(26, 36, 72, .85) 4%, #04070e 12%);
  box-shadow: 0 -6px 36px rgba(105, 225, 245, .16), 0 -36px 140px rgba(164, 146, 255, .2);
  pointer-events: none;
}

/* ============================== 7. Startseite ============================== */

/* Vertrauensleiste unter der Kopfzeile (:root schlägt die Dunkel-Regel aus app.css) */
:root .trustbar {
  background: #05080f;
  border-bottom: 1px solid var(--zk-line);
  color: var(--zk-muted);
  font: 500 11.5px/1.5 var(--zk-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.trustbar .wrap { gap: 10px 16px; padding-top: 10px; padding-bottom: 10px; }
.trustbar .dot { color: #69e1f5; opacity: .8; }
:root:lang(uk) .trustbar { text-transform: none; letter-spacing: .01em; font-size: 13px; }

/* Hero mit Rakete */
.zk-hero-rakete { padding: 22px 0 92px; }
.zk-hero-rakete .hero2-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 40px;
  align-items: center;
  min-height: 560px;
}
.zk-hero-rakete .hero2-copy { position: relative; z-index: 2; }
.zk-hero-rakete .hero2-copy .eyebrow { margin-bottom: 24px; }
.zk-hero-rakete .h-title { margin-bottom: 22px; }
.zk-hero-rakete .h-sub { max-width: 34em; margin-bottom: 30px; }
.zk-hero-rakete .cta-row .btn-lg { padding: 15px 22px; font-size: 16px; }
.zk-hero-rakete .cta-row .btn-primary { box-shadow: 0 12px 38px rgba(105, 225, 245, .22), 0 0 34px rgba(113, 82, 218, .22); }
.zk-hero-rakete .hero2-visual { position: relative; min-width: 0; }

/* Die Konsole (Produkt-Vorschau, Inhalt unverändert) dockt unten an die Szene an. */
.zk-console { position: relative; z-index: 2; margin: -4px 0 0 14px; }
.zk-console .app-preview {
  position: relative;
  isolation: isolate;
  transform: none;
  border: 1px solid rgba(164, 146, 255, .42);
  border-radius: 16px;
  background: rgba(12, 18, 32, .9);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5), 0 0 60px -20px rgba(113, 82, 218, .5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .zk-console .app-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--zk-angle), rgba(255, 255, 255, .08), #a492ff, #69e1f5, rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .08) 65%, #a492ff);
    -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-console .ap-bar { background: rgba(255, 255, 255, .02); border-bottom-color: var(--zk-line); padding: 10px 16px; }
.zk-console .ap-dot { width: 7px; height: 7px; background: #8e9bb6; }
.zk-console .ap-dot:nth-child(2) { background: #a492ff; }
.zk-console .ap-dot:nth-child(3) { background: #69e1f5; }
.zk-console .ap-url { font: 500 11px/1.4 var(--zk-mono); letter-spacing: .08em; color: var(--zk-faint); }
.zk-console .ap-balance { font-family: var(--zk-mono); font-weight: 600; background: rgba(105, 225, 245, .08); border-color: rgba(105, 225, 245, .35); color: #8ee8f8; }
.zk-console .ap-body { padding: 16px 18px 16px; }
.zk-console .ap-focus { margin-bottom: 12px; padding: 5px 12px; background: rgba(164, 146, 255, .12); border: 1px solid rgba(164, 146, 255, .3); color: #c9bfff; }
.zk-console .ap-q { margin-bottom: 12px; color: var(--zk-text); font-weight: 700; font-size: 17.5px; }
.zk-console .ap-gap { color: #69e1f5; border-bottom-color: #69e1f5; }
.zk-console .ap-opts { gap: 8px; }
.zk-console .ap-opt { padding: 8px 12px; font-size: 14.5px; background: rgba(255, 255, 255, .03); border: 1px solid var(--zk-line-strong); color: var(--zk-text); }
.zk-console .ap-opt.correct { border-color: #34d399; background: rgba(52, 211, 153, .12); color: #9af5d4; box-shadow: 0 0 18px rgba(52, 211, 153, .15); }
.zk-console .ap-conjure { margin-top: 12px; padding: 10px; background: var(--zk-grad-space); color: #04070e; border-radius: 12px; box-shadow: 0 10px 30px rgba(105, 225, 245, .2); }
.zk-console .ap-badge {
  z-index: 3;
  border: 1px solid var(--zk-line-strong);
  background: var(--zk-glass-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  font: 600 12px/1.3 var(--zk-mono);
  letter-spacing: .02em;
}
.zk-console .ap-badge.b1 { top: -15px; right: 84px; left: auto; color: #ffb38a; }
.zk-console .ap-badge.b2 { bottom: -15px; right: 22px; color: #c9bfff; }

/* Kennzahlen: Telemetrie-Kacheln, die über die Kante des Hero ragen. */
.hero2 + .statbar {
  position: relative;
  z-index: 3;
  margin-top: -54px;
  gap: 12px;
  padding-top: 0;
  padding-bottom: 12px;
}
.statbar > div {
  position: relative;
  min-width: 0;
  padding: 16px 16px 15px;
  border: 1px solid var(--zk-card-border);
  border-radius: 14px;
  background: var(--zk-glass-strong);
  box-shadow: var(--zk-card-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
  text-align: left;
}
.statbar > div::before {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  top: 0;
  height: 1px;
  background: var(--zk-hairline);
}
.statbar b {
  font-family: var(--zk-title);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--brand);
  background: var(--zk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  overflow-wrap: anywhere;
}
.statbar span { display: block; margin-top: 4px; color: var(--zk-muted); font-size: 13px; line-height: 1.45; }

/* Abschnittsköpfe */
.sec-head { max-width: 700px; margin-bottom: 38px; }
.eyebrow {
  font: 600 12px/1.5 var(--zk-label);
  letter-spacing: .16em;
  color: var(--zk-violet-text);
}
.sec-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.sec-head .eyebrow::before,
.sec-head .eyebrow::after {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
@media (max-width: 560px) { .sec-head .eyebrow::before, .sec-head .eyebrow::after { display: none; } }
.sec-head h1, .sec-head h2 { font-size: clamp(30px, 3.7vw, 44px); letter-spacing: -.015em; line-height: 1.06; }
.sec-sub { color: var(--zk-muted); font-size: 16.5px; line-height: 1.65; }
.band {
  background:
    radial-gradient(ellipse 60% 70% at 88% 0%, rgba(101, 80, 219, .07), transparent 65%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(0, 144, 161, .06), transparent 65%),
    var(--bg-soft);
}
[data-theme="dark"] .band {
  background:
    radial-gradient(ellipse 60% 70% at 88% 0%, rgba(52, 44, 130, .28), transparent 65%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(71, 206, 235, .06), transparent 65%),
    var(--bg-soft);
  border-block: 1px solid var(--zk-line);
}

/* Karten: Glas im Weltraum, klares Weiss bei Tageslicht */
.card, .panel, .step, .why-card, .j-card, .lv-card, .pack, .stat, .kpi, .simple-card,
.exam-skill, .tax-card, .cert-card, .cmp-card, .compass-hero, .coach-wrap, .album-card,
.lesson-node, .faq details, .faq-item, .modal-box, .cz-pricebox > div, .value-list span,
.dt-chip, .lvl-fold summary, .order-pkg, .toast, .share-card, .cz-step {
  border-color: var(--zk-card-border);
}
.card, .panel, .step, .why-card, .j-card, .lv-card, .pack, .stat, .kpi, .simple-card,
.exam-skill, .tax-card, .cert-card, .cmp-card, .compass-hero, .coach-wrap, .album-card,
.lesson-node, .faq details, .faq-item, .modal-box, .cz-pricebox > div {
  background: var(--zk-card-bg);
  box-shadow: var(--zk-card-shadow);
}
/* Spotlight folgt dem Zeiger (zukunft.js setzt --zk-x/--zk-y, nur feiner Zeiger). */
.why-card, .step, .j-card, .simple-card, .exam-skill, .pack { position: relative; isolation: isolate; }
.why-card, .simple-card, .exam-skill { overflow: hidden; }
.why-card::before, .simple-card::before, .exam-skill::before, .step::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--zk-x, 50%) var(--zk-y, 0%), var(--zk-spot), transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}
:is(.why-card, .simple-card, .exam-skill, .step):is(:hover, :focus-visible, :focus-within)::before { opacity: 1; }
:is(.why-card, .simple-card, .exam-skill, .more-item, a.kpi, .lesson-node, .step, .j-card):hover {
  border-color: var(--zk-hover-border);
  box-shadow: var(--zk-card-shadow-hover);
}
.why-card:hover, .simple-card:hover, .exam-skill:hover { transform: translateY(-3px); }

/* So funktioniert's */
.steps { gap: 18px; }
.step { padding: 28px 26px 26px; }
.step-n {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--zk-grad);
  color: var(--zk-on-grad);
  font: 700 17px/1 var(--zk-mono);
  box-shadow: 0 8px 22px var(--zk-glow);
}
.step h3 { font-size: 21px; margin: 0 0 8px; }
.step p { color: var(--zk-muted); }

/* Stärken */
.why { gap: 18px; }
.why-card { padding: 26px 24px 24px; }
.why-card .ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--tint-border);
  font-size: 25px;
  line-height: 1;
}
.why-card h3 { font-size: 20px; margin: 16px 0 8px; }
.why-card p { color: var(--zk-muted); }
.ab-proof { color: var(--zk-violet-text); }

/* Dein Weg: vier Stationen, verbunden durch eine Flugbahn */
.journey { position: relative; gap: 16px; }
.journey::before {
  content: '';
  position: absolute;
  left: 30px;
  right: 30px;
  top: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--brand) 0 6px, transparent 6px 14px);
  opacity: .45;
  pointer-events: none;
}
@media (max-width: 860px) { .journey::before { display: none; } }
.j-card { padding: 26px 20px 20px; }
.j-card h3 { font-size: 19px; }
.j-card p { color: var(--zk-muted); }
.j-step {
  width: 28px;
  height: 28px;
  background: var(--zk-grad);
  color: var(--zk-on-grad);
  font: 700 12.5px/1 var(--zk-mono);
  box-shadow: 0 0 0 4px var(--bg), 0 0 18px var(--zk-glow);
}
.section:not(.band) .j-step { box-shadow: 0 0 0 4px var(--bg), 0 0 18px var(--zk-glow); }

/* Niveaus: sechs Stationen, die Höhe wächst mit der Stufe */
.levelband { gap: 12px; }
.lv-card { position: relative; padding: 20px 10px 22px; overflow: hidden; }
.lv-k {
  font-family: var(--zk-title);
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--brand);
  background: var(--zk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lv-d { color: var(--zk-muted); font-weight: 600; margin-top: 8px; }
.lv-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: calc(var(--zk-lv, 1) * 100% / 6);
  background: var(--zk-grad);
  border-radius: 0 3px 3px 0;
}
.lv-card:nth-child(1) { --zk-lv: 1; }
.lv-card:nth-child(2) { --zk-lv: 2; }
.lv-card:nth-child(3) { --zk-lv: 3; }
.lv-card:nth-child(4) { --zk-lv: 4; }
.lv-card:nth-child(5) { --zk-lv: 5; }
.lv-card:nth-child(6) { --zk-lv: 6; }

/* Zertifizierung auf der Startseite: dunkles Band mit Nebel */
.cert-promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 90% 0%, rgba(52, 44, 130, .6), transparent 62%),
    radial-gradient(ellipse 50% 70% at 0% 100%, rgba(71, 206, 235, .12), transparent 66%),
    #070a13;
  border-block: 1px solid var(--zk-line);
}
.cert-promo .eyebrow { color: #69e1f5; }
.cert-promo h2 { color: var(--zk-text); }
.cert-promo .sec-sub { color: var(--zk-lead); opacity: 1; }
.cz-badges span {
  background: rgba(13, 19, 34, .6);
  border: 1px solid var(--zk-line-strong);
  color: var(--zk-text);
  font-weight: 600;
}
.cert-promo .cz-step {
  background: linear-gradient(180deg, rgba(18, 27, 45, .8), rgba(13, 19, 34, .92));
  border: 1px solid var(--zk-line);
}
.cz-step { padding: 20px 22px; }
.cz-step h3 { font-size: 20px; }
.cz-step .cz-n { background: var(--zk-grad); color: var(--zk-on-grad); font-family: var(--zk-mono); box-shadow: 0 0 18px var(--zk-glow); }
.cert-promo .cz-step p { color: var(--zk-muted); }
.cz-cta {
  background: rgba(13, 19, 34, .7);
  border: 1px solid rgba(164, 146, 255, .4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cz-price b { font-family: var(--zk-title); font-size: 32px; letter-spacing: -.01em; }
.cz-price .muted { color: var(--zk-muted); }
.cert-promo .micro-legal, .cert-promo .center { color: var(--zk-muted); }
.cert-promo a:not(.btn) { color: #69e1f5; }
/* «Kein amtlicher Sprachnachweis»: rechtlich wichtig, bleibt Bernstein. */
.clarity-pill {
  background: var(--zk-amber-bg);
  border: 1px solid var(--zk-amber-line);
  color: var(--zk-amber-ink);
}
.cert-promo .clarity-pill,
.cert-hero .clarity-pill { background: rgba(255, 176, 32, .12); border-color: rgba(255, 176, 32, .5); color: #ffce7a; }

/* Preise */
.pack-grid { gap: 16px; }
.pack { border-width: 1px; padding: 24px 20px 20px; }
.pack .price { font-family: var(--zk-title); font-size: 40px; line-height: 1.05; letter-spacing: -.01em; margin-top: 6px; }
.pack .cr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--brand-050);
  color: var(--brand-600);
  font: 600 13px/1.4 var(--zk-mono);
}
.pack.popular {
  border-color: transparent;
  background:
    linear-gradient(var(--zk-card-solid), var(--zk-card-solid)) padding-box,
    var(--zk-grad) border-box;
  border: 1px solid transparent;
  box-shadow: 0 18px 44px var(--zk-glow);
}
.pack.popular::after,
.pack-badge {
  background: var(--zk-grad);
  color: var(--zk-on-grad);
  font-family: var(--zk-label);
  letter-spacing: .06em;
  box-shadow: 0 8px 20px var(--zk-glow);
}

/* FAQ */
.faq details { border-radius: 14px; }
.faq details[open] { border-color: var(--zk-hover-border); }
.faq summary { font-weight: 700; }
.faq summary::after { color: var(--brand); font-family: var(--zk-mono); }
.faq p { color: var(--zk-muted); }

/* Abschluss-Band mit Planet und kleiner Rakete */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 20px 96px;
  margin-top: 0;
  background:
    radial-gradient(ellipse 55% 90% at 50% 120%, rgba(101, 80, 219, .45), transparent 70%),
    radial-gradient(ellipse 45% 70% at 90% 0%, rgba(71, 206, 235, .1), transparent 66%),
    #070a13;
  border-top: 1px solid var(--zk-line);
}
.cta-band > .wrap { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.015em; }
.cta-band p { color: var(--zk-lead); }
.cta-band .zk-planet { left: 50%; top: calc(100% - 46px); }
.zk-cta-rakete {
  position: absolute;
  z-index: -1;
  right: max(4vw, 24px);
  bottom: 30px;
  width: 64px;
  height: 116px;
  opacity: .9;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(105, 225, 245, .3));
}
@media (max-width: 700px) { .zk-cta-rakete { display: none; } }
.cta-band + .footer, .zk-auth + .footer { margin-top: 0; }

/* ============================== 8. 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: #69e1f5; font-size: 22px; line-height: 1; }
.zk-scene { position: relative; height: 286px; }
.zk-rocket {
  position: absolute;
  top: -46px;
  left: 56%;
  width: 372px;
  height: 366px;
  overflow: visible;
  transform: translateX(-50%);
}
.zk-orbit {
  position: absolute;
  top: -12px;
  left: 56%;
  width: 310px;
  height: 310px;
  transform: translateX(-50%) rotate(-28deg) scaleY(.5);
  pointer-events: none;
}
.zk-orbit-two { top: -40px; width: 366px; height: 366px; 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: #69e1f5;
  box-shadow: 0 0 20px #69e1f5;
}
.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: 40px; right: 0; }
.zk-coord-two { top: 176px; right: 0; }
.zk-readout {
  position: absolute;
  left: 30px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  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: #9af5d4;
  box-shadow: 0 0 14px #9af5d4;
}
/* Höhenskala: die Niveaus A1–C2 als Flughöhe; ein Punkt steigt langsam auf. */
.zk-alt {
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 40px;
  display: flex;
  gap: 10px;
}
.zk-alt-rail {
  position: relative;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(0deg, #a492ff, #69e1f5 60%, #9af5d4);
  opacity: .75;
}
.zk-alt-dot {
  position: absolute;
  left: -4px;
  top: 55%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9af5d4;
  box-shadow: 0 0 16px #9af5d4;
}
.zk-alt ol {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: -7px 0;
  padding: 0;
  list-style: none;
  font: 600 11px/1 var(--zk-mono);
  letter-spacing: .08em;
  color: var(--zk-faint);
}
.zk-alt li { position: relative; padding-left: 6px; }
.zk-alt li::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 5px;
  width: 7px;
  height: 1px;
  background: currentColor;
}
.zk-alt li:first-child { color: #9af5d4; }

/* SVG-Farben (Verläufe per id in includes/zukunft.php) */
.zk-stop-hull-dark { stop-color: #526584; }
.zk-stop-hull-light { stop-color: #eff8ff; }
.zk-stop-hull-mid { stop-color: #b6c8dc; }
.zk-stop-violet { stop-color: #a492ff; }
.zk-stop-indigo { stop-color: #6550db; }
.zk-stop-white { stop-color: #ffffff; }
.zk-stop-cyan { stop-color: #69e1f5; }
.zk-stop-fade { stop-color: #a492ff; stop-opacity: 0; }
.zk-stop-window { stop-color: #102d4d; }
.zk-stop-trail { stop-color: #69e1f5; stop-opacity: .9; }
.zk-stop-trail-end { stop-color: #a492ff; stop-opacity: .12; }
.zk-rocket-seam { fill: none; stroke: #526584; stroke-width: 2; }
.zk-window-frame { fill: #526584; stroke: #eff8ff; stroke-width: 3; }
.zk-window-glint { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; opacity: .65; }
.zk-rocket-center-fin { fill: #6550db; }
.zk-rocket-nozzle { fill: #526584; }
.zk-rocket-mark { fill: none; stroke: #526584; 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: #a492ff; opacity: .09; filter: blur(3px); transform-origin: 300px 520px; }
.zk-particles { fill: #69e1f5; stroke: #69e1f5; opacity: .55; }
.zk-trajectory {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 3 11;
  stroke-linecap: round;
  opacity: .5;
}
.zk-rakete-mini { display: block; overflow: visible; }

@media (max-width: 1100px) {
  .zk-hero-rakete .hero2-grid { gap: 26px; }
  .zk-console { margin-left: 0; }
}
@media (max-width: 900px) {
  .zk-hero-rakete .hero2-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 8px; }
  .zk-hero-rakete .hero2-visual { width: 100%; max-width: 540px; margin: 0 auto; }
  .zk-hero-rakete .zk-planet { left: 50%; }
}
@media (max-width: 560px) {
  .zk-hero-rakete { padding: 20px 0 84px; }
  .zk-hero-rakete .h-title { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .zk-hero-rakete .hero2-copy .eyebrow { margin-bottom: 18px; font-size: 10.5px; letter-spacing: .06em; padding: 6px 12px 6px 11px; }
  .zk-hero-rakete .h-sub { font-size: 1.02rem; margin-bottom: 24px; }
  .zk-flight-label { margin-left: 0; font-size: 10px; letter-spacing: .1em; }
  .zk-scene { height: 250px; }
  .zk-rocket { top: -34px; width: 318px; height: 313px; left: 58%; }
  .zk-orbit { top: -2px; width: 250px; height: 250px; left: 58%; }
  .zk-orbit-two { top: -24px; width: 290px; height: 290px; left: 58%; }
  .zk-coord { font-size: 10px; letter-spacing: .06em; }
  /* Handy: weniger Deko-Ebenen, mehr Ruhe um Titel und Startknopf. */
  .zk-coord-one, .zk-coord-two, .zk-orbit-two, .zk-particles { display: none; }
  .zk-coord-two { top: 150px; right: 0; }
  .zk-alt { bottom: 36px; top: 6px; }
  .zk-alt ol { font-size: 10px; }
  .zk-readout { left: 28px; bottom: 8px; font-size: 10px; }
  .zk-console .ap-body { padding: 14px 14px 14px; }
  .zk-console .ap-q { font-size: 16.5px; }
  .zk-console .ap-badge.b1 { right: 60px; }
}

/* ============================== 9. Anmeldung und Registrierung ============================== */

.zk-auth {
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
  display: flex;
  align-items: center;
  padding: 48px 0 84px;
}
.zk-auth > .wrap { position: relative; z-index: 1; width: 100%; }
.zk-auth .zk-planet { left: 36%; top: calc(100% - 92px); }
.zk-auth .panel.zk-auth-card {
  position: relative;
  isolation: isolate;
  max-width: 480px;
  margin: 0 auto;
  padding: 34px 32px 28px;
  border: 0;
  border-radius: 22px;
  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))) {
  [data-theme="dark"] .zk-auth .panel.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);
  }
}
/* Tageslicht: helle Karte im Weltraum – das Formular bleibt in der gewählten Variante. */
:root:not([data-theme="dark"]) .zk-auth .panel.zk-auth-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(246, 248, 252, .98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 90px -30px rgba(105, 225, 245, .45), 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, .12), #a492ff 8%, #69e1f5 16%, #9af5d4 21%, rgba(255, 255, 255, .12) 34%, rgba(255, 255, 255, .07) 70%, rgba(164, 146, 255, .38) 88%, rgba(255, 255, 255, .12));
  -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-auth-card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 30px;
  right: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(105, 225, 245, .8), 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;
}
.zk-auth-scan {
  position: absolute;
  top: 12px;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #69e1f5, #9af5d4, transparent);
  box-shadow: 0 0 18px #69e1f5;
  opacity: 0;
  pointer-events: none;
}
/* Kleine Rakete oben rechts an der Karte (dekorativ). */
.zk-auth-rakete {
  position: absolute;
  top: -40px;
  right: -12px;
  width: 58px;
  height: 104px;
  pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(105, 225, 245, .3));
}
.zk-auth-card h1 {
  font-size: clamp(2rem, 4.4vw, 2.5rem);
  line-height: 1.05;
  margin: 0 64px 10px 0;
}
.zk-auth-card.center h1 { margin: 0 44px 10px; }
.zk-auth-card .form-row label { color: var(--zk-muted); }
.zk-auth-card .input { min-height: 50px; }
.zk-auth-card .btn-primary { min-height: 52px; margin-top: 4px; }
.zk-auth-card .alert { margin: 14px 0 4px; }
.zk-auth-card .code-input { min-height: 64px; }
@media (max-width: 560px) {
  .zk-auth { padding-top: 34px; align-items: flex-start; }
  .zk-auth .panel.zk-auth-card { padding: 28px 20px 22px; border-radius: 18px; }
  .zk-auth-fx { inset: -8px; }
  .zk-auth-rakete { top: -30px; right: -4px; width: 46px; height: 84px; }
}
@media (max-width: 420px) {
  .zk-auth-fx { display: none; }
}

/* ============================== 10. Karten, Formulare, Hinweise ============================== */

.panel { border-radius: 22px; }
.panel h1 { font-size: 28px; }
.card { border-radius: 18px; }
.form-row label { color: var(--zk-muted); font-weight: 700; }
.input {
  background: var(--zk-field);
  border: 1px solid var(--zk-field-border);
  border-radius: 12px;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input:hover { border-color: var(--zk-field-hover); }
.input:focus { border-color: var(--zk-focus); background: var(--zk-field); box-shadow: 0 0 0 4px var(--zk-focus-ring); }
.input::placeholder { color: var(--zk-faint); opacity: 1; }
select.input { color-scheme: inherit; }
[data-theme="dark"] select.input option { background: #0d1322; color: #eef3ff; }
.input:-webkit-autofill,
.input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 40px #f4f6fb inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
[data-theme="dark"] .input:-webkit-autofill,
[data-theme="dark"] .input:-webkit-autofill:hover { box-shadow: 0 0 0 40px #0b1120 inset; }
.checkbox { color: var(--zk-muted); }
.checkbox input, input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
.checkbox a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

.alert { border-radius: 12px; font-weight: 600; }
.alert-ok { background: var(--zk-ok-bg); border: 1px solid var(--zk-ok-line); color: var(--zk-ok-ink); }
.alert-error { background: var(--zk-bad-bg); border-color: var(--zk-bad-line); color: var(--zk-bad-ink); }
.alert-info { background: var(--brand-050); border-color: var(--tint-border); color: var(--brand-600); }
[data-theme="dark"] .alert-info { color: #8ee8f8; }
.disclaimer { border-radius: 12px; }
/* Dunkelbraun auf dunklem Bernstein war im Weltraum-Design unlesbar. */
[data-theme="dark"] .disclaimer b { color: #ffe2a8; }
.legal-note { color: var(--zk-muted); }

.pbar { height: 10px; background: var(--surface-2); border-color: var(--zk-card-border); }
.pbar > span { background: var(--zk-grad); }
[data-theme="dark"] .pbar > span { box-shadow: 0 0 12px rgba(105, 225, 245, .35); }
.chip-xp {
  font-family: var(--zk-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.streak, .combo { color: #1a0d05; }
.free-badge { background: var(--zk-ok-line); color: #ffffff; border-radius: 999px; }
[data-theme="dark"] .free-badge { background: rgba(52, 211, 153, .16); color: #9af5d4; box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .45); }
/* «KI»-Abzeichen (Inline-Hintergrund in Markenfarbe) im Weltraum: dunkle Schrift auf Cyan. */
[data-theme="dark"] .free-badge[style*="--brand"] { color: #04070e; box-shadow: none; }
.due-badge { color: #1a0d05; }

.stat .big, .cs-bal b, .compass-due .cd-num, .cc-lv {
  font-family: var(--zk-title);
  background: var(--zk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--brand);
  -webkit-text-fill-color: transparent;
}
.stat .lbl { color: var(--zk-muted); overflow-wrap: break-word; hyphens: auto; }
/* Lange Wörter in den Fakten-Kacheln (Über uns) sprengten bei 320 px die Seite. */
@media (max-width: 380px) { .ab-stats .lbl { overflow-wrap: anywhere; } }
.ab-stats .big { font-size: 20px; }

.upsell { border-radius: 18px; }
.value-box { border-radius: 18px; }
.value-list span { background: var(--surface); }
.value-list b { color: var(--brand-600); font-family: var(--zk-mono); }
.modal-overlay { background: rgba(4, 7, 14, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-box { border: 1px solid var(--zk-card-border); background: var(--zk-card-solid); }
.toast { background: var(--zk-card-solid); border-color: var(--zk-card-border); box-shadow: var(--shadow-lg); }
.toast .tt { font-family: var(--zk-font); }
.xp-pop { font-family: var(--zk-mono); color: var(--warn); text-shadow: 0 0 12px rgba(255, 176, 32, .5); }

.adm-table th { font-family: var(--zk-label); color: var(--zk-muted); letter-spacing: .08em; }
.adm-table th, .adm-table td { border-bottom-color: var(--line); }
.adm-table code, .cert-award code { font-family: var(--zk-mono); }

/* ============================== 11. Lern- und Prüfungsbereich (ruhig) ============================== */

/* Aufgaben und Texte stehen auf ruhigen, deckenden Flächen: kein Glas, kein
   Spotlight, keine Animation dahinter. Schrift bleibt Inter, Lesetext grösser. */
.q-card {
  position: relative;
  background: var(--zk-card-solid);
  border: 1px solid var(--zk-card-border);
  border-radius: 20px;
  box-shadow: var(--zk-card-shadow);
}
.q-card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: var(--zk-hairline);
  opacity: .8;
  pointer-events: none;
}
.q-card :is(h1, h2, h3), .player :is(h1, h2, h3), .legal-doc :is(h1, h2, h3) {
  font-family: var(--zk-font);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.q-card h1 { font-size: 26px; }
.q-kicker {
  font: 600 11.5px/1.5 var(--zk-label);
  letter-spacing: .12em;
  color: var(--zk-violet-text);
}
.q-text { font-weight: 700; color: var(--ink); }
.q-text .gap { border-bottom-color: var(--brand); color: var(--brand); }
.opts { gap: 10px; }
.opt {
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  font-weight: 600;
}
[data-theme="dark"] .opt { border-color: #2a3854; }
.opt:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-050); }
.opt.correct { border-color: var(--zk-ok-line); background: var(--zk-ok-bg); color: var(--zk-ok-ink); }
.opt.wrong { border-color: var(--zk-bad-line); background: var(--zk-bad-bg); color: var(--zk-bad-ink); }
.opt.sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--zk-focus-ring); }
.q-lese-text {
  position: relative;
  background: var(--surface-2);
  border-left: 0;
  border-radius: 14px;
  padding: 18px 20px 18px 24px;
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.75;
}
.q-lese-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--zk-grad);
}
.lese-q .lq { font-weight: 700; color: var(--ink); }
.write-area {
  background: var(--zk-field);
  border: 1px solid var(--zk-field-border);
  border-radius: 14px;
  color: var(--ink);
  line-height: 1.7;
}
.write-area:hover { border-color: var(--zk-field-hover); }
.write-area:focus { border-color: var(--zk-focus); background: var(--zk-field); box-shadow: 0 0 0 4px var(--zk-focus-ring); }
.write-meta { font-family: var(--zk-label); font-weight: 600; font-variant-numeric: tabular-nums; }
.checklist li { background: var(--surface-2); color: var(--zk-muted); }
.feedback { border-radius: 14px; }
.feedback.ok { background: var(--zk-ok-bg); border-color: var(--zk-ok-line); }
.feedback.no { background: var(--zk-bad-bg); border-color: var(--zk-bad-line); }
.feedback .sol { color: var(--zk-ok-ink); }
.feedback .exp { color: var(--zk-muted); }
.hintbox { border-radius: 12px; line-height: 1.6; }
.hintbox.coach { background: #f3f0fe; border-color: #d9d1f7; color: #3a2f6b; }
[data-theme="dark"] .hintbox.coach { background: rgba(164, 146, 255, .1); border-color: rgba(164, 146, 255, .35); color: #ddd6ff; }
.hint-btn { border-radius: 12px; border-width: 1px; }
.focus-banner { border: 1px dashed var(--tint-border); background: var(--tint); border-radius: 14px; }
.focus-chip { background: var(--brand-050); color: var(--brand-600); }
[data-theme="dark"] .focus-chip { color: #8ee8f8; }
.q-card.magic { background: var(--zk-card-solid); border-color: var(--tint-border); box-shadow: var(--zk-card-shadow); }
.q-card.magic::before { background: linear-gradient(135deg, rgba(164, 146, 255, .6), rgba(105, 225, 245, .5)); opacity: .6; }
.token, .match-item { border-color: var(--line); }
.token:hover, .match-item.sel { border-color: var(--brand); }
.match-item.matched { border-color: var(--zk-ok-line); background: var(--zk-ok-bg); color: var(--zk-ok-ink); }
.sh-ok { color: var(--zk-ok-ink); }
.sh-miss { color: var(--zk-bad-ink); }
.mastery-row .pbar { height: 8px; }
/* «Neue Übung beschwören»: Verlauf der Marke. Der Glanz läuft auf Lernseiten nur
   beim Anvisieren (ruhig), sonst langsam – und nie bei Pause oder reduzierter Bewegung. */
.conjure-btn {
  background: var(--zk-grad);
  color: var(--zk-on-grad);
  border-radius: 14px;
  box-shadow: 0 10px 28px var(--zk-glow);
}
.conjure-btn::after { animation: none; }
.zk-motion body:not([data-zk-ruhig]) .conjure-btn::after,
.zk-motion .conjure-btn:is(:hover, :focus-visible)::after { animation: shimmer 3.2s infinite; }
.bubble.me { background: var(--zk-grad); color: var(--zk-on-grad); }
.bubble.coach { background: #f3f0fe; color: #33295f; }
[data-theme="dark"] .bubble.coach { background: rgba(164, 146, 255, .12); color: #e0daff; }
.coach-wrap { border-radius: 20px; }
.survey { border-color: var(--zk-card-border); border-radius: 14px; }
.share-card { background: var(--surface-2); border-radius: 16px; }
.share-btn { border-radius: 999px; }
.share-btn.copy { background: var(--surface); border-color: var(--zk-card-border); color: var(--ink); }

/* Timer der Prüfung: Mono-Ziffern springen nicht, und die Modul-Leiste klebt UNTER
   der Kopfzeile (vorher verschwand sie beim Scrollen hinter ihr). */
.cert-top {
  top: 64px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--zk-card-border);
  padding: 10px 2px;
}
.player-top .chip-xp { min-width: 70px; text-align: center; }

/* ============================== 12. Dashboard und App-Seiten ============================== */

.dash-h { font-family: var(--zk-title); font-size: 23px; font-weight: 700; letter-spacing: -.005em; }
/* «Dein nächster Schritt»: dunkle Missionskarte mit ruhigem Sternenfeld (ohne Canvas). */
.hero-step {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(164, 146, 255, .35);
  background:
    radial-gradient(ellipse 70% 120% at 100% 0%, rgba(105, 225, 245, .18), transparent 60%),
    linear-gradient(125deg, #0b1026 0%, #1f1a5c 52%, #2a2178 78%, #1d5f7a 130%);
  box-shadow: 0 20px 60px rgba(9, 12, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hero-step::after {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  top: 0;
  height: 1px;
  background: var(--zk-hairline);
  pointer-events: none;
}
.hs-hello { color: var(--zk-lead); }
.hs-kicker { font: 600 11.5px/1.5 var(--zk-label); letter-spacing: .14em; color: #69e1f5; opacity: 1; }
.hero-step h2 { font-size: 30px; letter-spacing: -.01em; }
.hs-sub { color: var(--zk-lead); opacity: 1; }
.hs-why, .hs-streak { background: rgba(255, 255, 255, .06); border: 1px solid var(--zk-line-strong); color: var(--zk-text); }
.goal-ring { background: conic-gradient(#69e1f5 0, #9af5d4 calc(var(--p, 0) * 1%), rgba(255, 255, 255, .14) 0); box-shadow: 0 0 30px rgba(105, 225, 245, .2); }
.goal-in { background: #0b1026; }
.goal-in b { font-family: var(--zk-title); font-size: 28px; }
.hs-ringlbl { color: var(--zk-lead); opacity: 1; }
.lvl-fold summary { background: var(--zk-card-bg); }
.lvl-fold .lvl-change { color: var(--brand); }
.lvl-chip { border-color: var(--line); background: var(--surface); font-family: var(--zk-mono); }
.lvl-chip:hover { border-color: var(--brand); }
.lvl-chip.on { background: var(--zk-grad); border-color: transparent; color: var(--zk-on-grad); }
.simple-card h4 { font-size: 17px; }
.simple-card p { color: var(--zk-muted); }
.imp-cta { color: var(--brand); }
.dt-chip { background: var(--zk-card-bg); color: var(--ink); }
.dt-chip:hover { border-color: var(--brand); color: var(--brand); }
.dt-chip.on { border-color: var(--brand); color: var(--brand-600); background: var(--brand-050); }
[data-theme="dark"] .dt-chip.on { color: #8ee8f8; }
.dt-chip.dt-more { color: var(--brand); }
.exam-zone .ic, .simple-card .ic, .exam-skill .es-ic { filter: drop-shadow(0 0 12px var(--zk-glow)); }
.more-item .mi-go { color: var(--brand); }
.kpi .k-v { font-family: var(--zk-title); font-size: 26px; }
.kpi .k-l { color: var(--zk-muted); }
.lesson-node .orb { border-color: var(--line); background: var(--surface-2); }
.lesson-node.done .orb { background: var(--zk-grad); color: var(--zk-on-grad); }
.lesson-node.active .orb { border-color: var(--brand); box-shadow: 0 0 0 5px var(--brand-050), 0 0 20px var(--zk-glow); }
.lesson-node .score { color: var(--zk-ok-ink); font-family: var(--zk-mono); }
.album-card .al-a { color: var(--zk-ok-ink); }
.swiss-card { border-left-color: #e5484d; }
.ampel-item { background: var(--surface-2); }
.am-lbl { color: var(--zk-muted); }
.am-val { font-family: var(--zk-mono); }
.exam-skill h3 { font-family: var(--zk-font); font-size: 17px; letter-spacing: 0; }
.exam-skill p { color: var(--zk-muted); }
/* Dunkle Link-Bänder (Simulation, Mix): Nebel und ruhige Sterne. */
.exam-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(164, 146, 255, .35);
  background:
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(105, 225, 245, .16), transparent 60%),
    linear-gradient(125deg, #0b1026, #2a2178 70%, #1d5f7a 130%);
}
.exam-banner:hover { border-color: #69e1f5; box-shadow: 0 16px 44px rgba(9, 12, 30, .35), 0 0 30px rgba(105, 225, 245, .14); }
.exam-banner b { font-family: var(--zk-title); font-size: 21px; }
.exam-banner p { color: var(--zk-lead); opacity: 1; }
.compass-due .cd-num { font-size: 56px; }
.tax-card .tx-bar { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.tax-card .tx-bar span { background: var(--zk-grad); }
.tax-card .tx-due { background: var(--zk-amber-bg); color: var(--zk-amber-ink); }
.tax-card .tx-meta a { color: var(--brand); }
.buy-hero .bh-kicker { font: 600 12px/1.5 var(--zk-label); letter-spacing: .12em; color: var(--zk-violet-text); text-transform: uppercase; }
.buy-hero h1 { font-family: var(--zk-title); }
.cmp-table thead th { font-family: var(--zk-label); letter-spacing: .06em; }
.cmp-power-col { background: linear-gradient(180deg, rgba(164, 146, 255, .08), rgba(105, 225, 245, .06)); }
.ct-yes, .cmp-table .ct-yes { color: var(--zk-ok-ink); }
.ct-no, .cmp-table .ct-no { color: var(--zk-faint); }
.order-pkg { background: var(--zk-card-bg); }
.order-pkg:hover, .order-pkg.popular { border-color: var(--brand); }
.order-pkg .op-price { font-family: var(--zk-title); font-size: 21px; color: var(--brand); }
.legal-nav a { background: var(--zk-card-bg); border-color: var(--zk-card-border); color: var(--zk-muted); }
.legal-nav a.on { background: var(--zk-grad); border-color: transparent; color: var(--zk-on-grad); }
.legal-doc { background: var(--zk-card-solid); border-color: var(--zk-card-border); line-height: 1.75; }
.legal-doc a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.ft-cat h3 { font-size: 21px; }
.ft-list li { color: var(--zk-muted); }
.ft-list b { color: var(--ink); }

/* ============================== 13. Zertifizierung ============================== */

.cert-hero { padding: 64px 0 56px; }
.cert-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 20ch; letter-spacing: -.015em; color: var(--zk-text); }
.cert-hero .cz-actions { justify-content: center; }
.cert-hero .lead { color: var(--zk-lead); opacity: 1; }
.cert-hero .center, .cert-hero p { color: var(--zk-lead); }
.cert-hero a:not(.btn) { color: #69e1f5; }
.cert-grid { gap: 16px; }
.cert-card.passed { border-color: var(--zk-ok-line); }
.cert-card .cc-lv { font-size: 34px; }
.cert-card .cc-badge { background: var(--zk-ok-bg); color: var(--zk-ok-ink); }
.cert-card .cc-retake { background: var(--zk-amber-bg); color: var(--zk-amber-ink); }
.cert-card .cc-price { font-family: var(--zk-title); font-size: 25px; }
.cert-card .cc-mods, .cert-card .cc-total { color: var(--zk-muted); }
/* Inline-Schriftfarben (läuft / Gutschein) waren im Weltraum-Design dunkel auf dunkel. */
[data-theme="dark"] .cc-price[style*="#8a5200"] { color: #ffce7a !important; }
[data-theme="dark"] .cc-price[style*="#127a4a"] { color: #9af5d4 !important; }
.score-grid .sc-bar { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.score-grid .sc-bar span { background: var(--zk-grad); }
.score-grid .sc-lbl { color: var(--zk-muted); }
.cert-award { background: var(--zk-ok-bg); border-color: var(--zk-ok-line); }
.verify-ok { border-color: var(--zk-ok-line); background: var(--zk-card-solid); }
.verify-ok .v-badge { color: var(--zk-ok-ink); }
.verify-bad { border-color: var(--zk-bad-line); color: var(--zk-bad-ink); background: var(--zk-bad-bg); }
.cz-pricebox b { font-family: var(--zk-title); color: var(--brand); }
.cz-p1 { box-shadow: 0 16px 40px var(--zk-glow); }
.faq-item summary::before { color: var(--brand); }
.faq-item p { color: var(--zk-muted); }

/* Nachweis-Vorschau = PDF: bleibt ein weisses Dokument mit dem blauen Band des PDFs,
   in beiden Varianten (wie das Papier, das man herunterlädt). */
.cert-preview {
  --brand: #269cd9;
  --muted: #6e7077;
  border-color: #269cd9;
  background: #ffffff;
  color: #232434;
  box-shadow: 0 16px 40px rgba(30, 49, 88, .14);
}
.cert-preview .cp-name, .cert-preview .cp-level b { font-family: 'Inter', system-ui, sans-serif; }

/* ============================== 14. Footer ============================== */

:root .footer {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 50% 90% at 88% 0%, rgba(52, 44, 130, .26), transparent 70%),
    #05080f;
  color: var(--zk-muted);
  border-top: 0;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--zk-hairline);
  opacity: .6;
}
.footer .legal { color: var(--zk-muted); }
.footer .links a { color: var(--zk-lead); }
.footer .links a:hover { color: #69e1f5; }
.footer a:focus-visible { outline-color: #69e1f5; }

/* ============================== 15. 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-climb { 0% { top: 92%; } 70% { top: 8%; } 100% { top: 8%; } }
@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 22px); }
  35% { opacity: 1; }
  to { opacity: 1; clip-path: inset(-160px -160px -160px -160px round 22px); }
}
@keyframes zk-scan {
  0% { top: 12px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 14px); opacity: 0; }
}

/* 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-console .app-preview::before { animation: zk-orbit-border 10s linear infinite; }
.zk-motion .zk-alt-dot { animation: zk-climb 9s cubic-bezier(.45, 0, .25, 1) infinite; }
/* Startknopf anvisiert: das Triebwerk zündet stärker. */
.zk-motion .zk-hero-rakete:has(.cta-row .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). html.zk-pausiert setzt schon das Theme-Skript
   im Kopf, wenn jemand die Animationen pausiert hat. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.zk-pausiert) .zk-hero-rakete .hero2-copy > * { animation: zk-arrive .8s cubic-bezier(.2, .7, .2, 1) both; }
  html:not(.zk-pausiert) .zk-hero-rakete .hero2-copy > :nth-child(2) { animation-delay: .08s; }
  html:not(.zk-pausiert) .zk-hero-rakete .hero2-copy > :nth-child(3) { animation-delay: .16s; }
  html:not(.zk-pausiert) .zk-hero-rakete .hero2-copy > :nth-child(n+4) { animation-delay: .24s; }
  html:not(.zk-pausiert) .zk-hero-rakete .hero2-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; }
}

/* Bestehende Effekte (Konfetti, Karten-Auftritt, Toasts, Aufnahme-Puls) halten
   «Bewegung reduzieren» und die Pause ebenfalls ein (zk-motion-paused setzt
   zukunft.js vor dem ersten Aufbau durch app.js). Die Aufnahme bleibt als
   ruhiger roter Ring sichtbar. */
.zk-motion-paused #confetti { display: none !important; }
.zk-motion-paused :is(.q-card, .feedback, .hintbox, .bubble, .toast, .combo, .modal-overlay) { animation: none !important; }
.zk-motion-paused :is(.btn.recording, .rec-ctl .recording, .conjure-btn.casting) { animation: none !important; box-shadow: 0 0 0 3px rgba(255, 93, 115, .5); }
.zk-motion-paused .xp-pop { animation: none !important; display: none; }

/* Ausserhalb des Sichtfelds, im Hintergrund-Tab: CSS-Schleifen stehen. */
.zk-offscreen *,
.zk-offscreen *::before,
.zk-offscreen *::after,
.zk-offscreen::before,
.zk-page-hidden .zk-scene *,
.zk-page-hidden .zk-rakete-mini *,
.zk-page-hidden .zk-console .app-preview::before { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Auch die Übergänge aus app.css (Menü, Fortschrittsbalken, Karten) sofort statt animiert. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .zk-scene *, .zk-scene *::before, .zk-scene *::after,
  .zk-console *, .zk-console *::before, .zk-console *::after,
  .zk-auth-card, .zk-auth-scan, .zk-rakete-mini *,
  .zk-hero-rakete .hero2-copy > *, .zk-hero-rakete .hero2-visual, .topnav::before,
  .q-card, .feedback, .hintbox, .bubble, .toast, .combo, .modal-overlay,
  .conjure-btn, .conjure-btn::after, .btn.recording, .rec-ctl .recording, .xp-pop {
    animation: none !important;
    transition: none !important;
  }
  .btn.recording, .rec-ctl .recording { box-shadow: 0 0 0 3px rgba(255, 93, 115, .5); }
  .xp-pop { display: none; }
  #confetti { display: none !important; }
  .btn:hover, .btn:active, .why-card:hover, .simple-card:hover, .exam-skill:hover, .lesson-node:hover,
  .opt:hover:not(:disabled), a.kpi:hover, .dt-chip:hover, .order-pkg:hover, .cta-white:hover { transform: none !important; }
}

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

@media (prefers-reduced-transparency: reduce) {
  .topnav { background: #070a13 !important; }
  .zk-auth .panel.zk-auth-card, .zk-console .app-preview, .statbar > div, .hero2 .eyebrow, .cert-hero .eyebrow,
  .lang-menu, .nav-links, .cz-cta, .zk-console .ap-badge, .cert-top, .modal-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .zk-console .app-preview, .zk-console .ap-badge, .cz-cta { background: #0d1322 !important; }
  .statbar > div { background: var(--surface) !important; }
  [data-theme="dark"] .zk-auth .panel.zk-auth-card { background: #0d1322 !important; }
  :root:not([data-theme="dark"]) .zk-auth .panel.zk-auth-card { background: #ffffff !important; }
  .cert-top { background: var(--bg) !important; }
}

@media (forced-colors: active) {
  .zk-sky-canvas, .zk-scene, .zk-planet, .zk-flight-label, .zk-auth-fx, .zk-auth-rakete, .zk-auth-scan, .zk-cta-rakete,
  .topnav::after, .topnav::before, .zk-auth-card::before, .zk-auth-card::after, .zk-console .app-preview::before,
  .hero2::before, .hero2::after, .cert-hero::before, .cert-hero::after, .zk-auth::before, .zk-auth::after,
  .cert-promo::before, .cta-band::before, .hero-step::before, .exam-banner::before, .q-card::after,
  .statbar > div::before, .hero-step::after { display: none !important; }
  .h-title, .statbar b, .lv-k, .stat .big, .cs-bal b, .compass-due .cd-num, .cc-lv {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .btn, .zk-auth-card, .zk-auth .panel.zk-auth-card, .app-preview, .statbar > div, .q-card, .opt, .card, .panel { border: 1px solid ButtonText; }
  :focus-visible { outline-color: Highlight; }
  .zk-checks > span::before { border-color: CanvasText; filter: none; }
  /* Die drei Striche des Menüknopfs sind Hintergrundflächen und verschwänden sonst. */
  .nav-toggle .nt-bars, .nav-toggle .nt-bars::before, .nav-toggle .nt-bars::after { background: CanvasText; forced-color-adjust: none; }
  .topnav.open .nav-toggle .nt-bars { background: transparent; }
}

/* ============================== 17. Druck ============================== */

/* Browser drucken ohne Hintergründe: dunkle Flächen und das Weltraum-Design würden sonst
   helle Schrift auf weissem Papier ergeben. Im Druck gelten deshalb überall helle Tokens,
   die Deko fällt weg, die Schrift wird dunkel. */
@media print {
  :root, [data-theme="dark"], .topnav, .trustbar, .hero2, .cert-hero, .cert-promo, .cta-band, .footer, .zk-auth, .hero-step, .exam-banner, .zk-auth-card {
    color-scheme: light;
    --bg: #ffffff; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #f4f6fb;
    --ink: #111827; --ink-soft: #374151; --line: #cbd5e1;
    --brand: #43318f; --brand-600: #43318f; --brand-050: #f3f0fe;
    --card: #ffffff; --muted: #374151; --tint: #ffffff; --tint-border: #cbd5e1;
    --warm-bg: #ffffff; --warm-border: #d6b25e; --warm-ink: #6b4c08;
    --danger-bg: #ffffff; --danger-ink: #a3183a;
    --zk-text: #111827; --zk-lead: #1f2937; --zk-muted: #374151; --zk-faint: #4b5563;
    --zk-cyan-text: #006477; --zk-violet-text: #43318f; --zk-mint-text: #176344;
    --zk-card-bg: #ffffff; --zk-card-solid: #ffffff; --zk-card-border: #cbd5e1; --zk-card-shadow: none;
    --zk-glass: #ffffff; --zk-glass-strong: #ffffff; --zk-chip-bg: #ffffff;
    --zk-line: #cbd5e1; --zk-line-strong: #94a3b8;
    --zk-field: #ffffff; --zk-field-border: #6b7280;
    --zk-ok-bg: #ffffff; --zk-ok-ink: #0b6b41; --zk-bad-bg: #ffffff; --zk-bad-ink: #a3183a;
    --zk-amber-bg: #ffffff; --zk-amber-ink: #7a4f06;
  }
  body, [data-theme="dark"] body { background: #ffffff !important; color: #111827; }
  .cert-top { position: static; }
  .topnav, .trustbar, .zk-sky-canvas, .zk-scene, .zk-planet, .zk-flight-label, .zk-motion-toggle, .zk-motion-menu,
  .zk-console, .zk-auth-fx, .zk-auth-rakete, .zk-auth-scan, .zk-cta-rakete, #confetti { display: none !important; }
  .h-title, .statbar b, .lv-k, .stat .big, .cs-bal b, .compass-due .cd-num, .cc-lv { background: none !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; }
  :is(.hero2, .cert-hero, .zk-auth, .footer, .cert-promo, .cta-band, .hero-step, .exam-banner),
  :is(.hero2, .cert-hero, .zk-auth, .footer, .cert-promo, .cta-band, .hero-step, .exam-banner) * {
    background: transparent !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .hero2::before, .hero2::after, .cert-hero::before, .cert-hero::after, .zk-auth::before, .zk-auth::after,
  .cert-promo::before, .cta-band::before, .hero-step::before, .exam-banner::before, .q-card::after { display: none !important; }
  .hero2 + .statbar { margin-top: 0; }
  .btn { border: 1px solid #111827 !important; }
}