/* swiss-jobrollen-check.ch · Design «Zukunft» - Design-Schicht ueber style.css
   ------------------------------------------------------------------
   Laedt NACH style.css und den Inline-<style> der Seiten (includes/zukunft.php,
   zk_kopf(), media="screen") und ueberschreibt nur die Darstellung: Tokens,
   Komponenten, Kopf mit Sternenhimmel und Punktenetz, Rakete, Glas-Karten,
   Verlaufs-Knoepfe, Cyan-Fokusring.

   Grenzen, die bewusst eingehalten werden:
   - Nur Bildschirm (media="screen"): Ausdruck und PDF der Auswertung bleiben
     unveraendert (weisses Dokument, alte Stile).
   - Kundenbereiche (Kundenuebersicht, Auswertung, Kasse, Fragebogen): ruhig,
     das Netz reicht nur hinter den Seitenkopf und steht dort still
     (data-zk-ruhig), nie hinter Lese- oder Formularflaechen.
   - Bewegung nur mit html.zk-motion (setzt zukunft.js, wenn erlaubt). Ohne
     JavaScript, bei «Bewegung reduzieren» oder nach «Animation pausieren»
     steht alles still.
   - White-Label-Seiten (Partner-Branding) laden diese Datei nicht.
   - Keine externen Quellen. Schriften lokal (SIL OFL), siehe zukunft-fonts.css.
   Kontraste (WCAG AA, gegen die Karte #0d1322 bzw. den Grund #070a13):
   Text #e9edf9 ~15:1, Lead #c7cfe6 ~11:1, gedaempft #aab4cf ~8.6:1,
   blass #8b97b8 ~5.6:1, Links Cyan #69e1f5 ~12:1, Mint #9af5d4 ~14:1,
   Knopftext #04070e auf Verlauf >= 8:1, Feldrand #636cab ~3.6:1 (>= 3:1). */

@property --zk-edge { syntax: '<angle>'; initial-value: 220deg; inherits: true; }

/* ============================== 1. Tokens ============================== */
/* Die alten Namen aus style.css bekommen die neuen Werte, damit jede Seite
   mitzieht; neue Werte heissen --zk-*.
   Dunkel ist die Grundeinstellung (auch ohne JavaScript). Hell steht in zukunft-hell.css und gilt, wenn
   zukunft-theme.js data-theme="light" setzt. Die Flaechen unten (.sec-dark, Inline-Panels mit #0F1729 ...) bleiben in beiden Modi
   bewusst dunkel («dunkle Inseln» mit hellem Text); sie tragen deshalb die dunklen Werte selbst. */
:root, .sec-dark, .coaching-section, .partner-section, .ar-cta, .rg-cta, .lead-wrap, .teaser-cta, .user-pro-cta, [style*="#0F1729" i],
[style*="linear-gradient(135deg,#1C7CB0,#1C7CB0)" i], [style*="linear-gradient(135deg,#269CD9,#1C7CB0)" i], [style*="linear-gradient(135deg, #269CD9, #1C7CB0)" i] {
  color-scheme: dark;

  --zk-violet: #a492ff;
  --zk-indigo: #6550db;
  --zk-cyan: #69e1f5;
  --zk-mint: #9af5d4;
  --zk-amber: #f5c451;
  --zk-rot: #ff9b9b;
  --zk-grad: linear-gradient(105deg, var(--zk-violet), var(--zk-cyan) 65%, var(--zk-mint));
  --zk-ink: #04070e;
  /* Raketenfarben bleiben in beiden Modi leuchtend */
  --zk-rk-violet: #a492ff;
  --zk-rk-indigo: #6550db;
  --zk-rk-cyan: #69e1f5;
  --zk-grad-text: var(--zk-grad);

  /* Farbkanaele fuer Flaechen mit Deckkraft (Hell ueberschreibt sie, siehe zukunft-hell.css) */
  --zk-cyan-rgb: 105, 225, 245;
  --zk-mint-rgb: 154, 245, 212;
  --zk-indigo-rgb: 101, 80, 219;
  --zk-violet-rgb: 164, 146, 255;
  --zk-amber-rgb: 245, 196, 81;
  --zk-rot-rgb: 255, 155, 155;
  --zk-wash-rgb: 255, 255, 255;
  --zk-shadow-rgb: 0, 0, 0;
  --zk-bg-rgb: 7, 10, 19;
  --zk-deep-rgb: 4, 7, 14;
  --zk-surface-rgb: 13, 19, 34;
  --zk-surface-strong-rgb: 12, 18, 32;

  --zk-bg: #070a13;
  --zk-surface: #0d1322;
  --zk-surface-2: #121b2d;
  --zk-glass: rgba(var(--zk-surface-rgb), .74);
  --zk-glass-strong: rgba(var(--zk-surface-strong-rgb), .92);
  --zk-tint: rgba(var(--zk-cyan-rgb), .07);
  --zk-line: rgba(var(--zk-wash-rgb), .10);
  --zk-line-strong: rgba(var(--zk-violet-rgb), .34);
  --zk-field: #0a1024;
  --zk-field-rand: #636cab;

  --zk-text: #e9edf9;
  --zk-lead: #c7cfe6;
  --zk-muted: #aab4cf;
  --zk-faint: #8b97b8;

  --zk-radius: 14px;
  --zk-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --zk-titel: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --zk-schrift: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* alte Tokens aus style.css */
  --primary: #69e1f5;
  --primary-dark: #9af5d4;
  --primary-light: rgba(var(--zk-cyan-rgb), .10);
  --secondary: #69e1f5;
  --accent: #9af5d4;
  --pink: #69e1f5;
  --teal: #69e1f5;
  --dark: #04070e;
  --dark-2: #0d1322;
  --bg: #070a13;
  --bg-soft: #0a0f1e;
  --white: #0d1322;
  --text: #e9edf9;
  --text-muted: #aab4cf;
  --border: rgba(var(--zk-wash-rgb), .12);
  --shadow-sm: 0 4px 14px rgba(var(--zk-shadow-rgb), .28);
  --shadow: 0 12px 34px rgba(var(--zk-shadow-rgb), .38);
  --shadow-lg: 0 20px 54px rgba(var(--zk-shadow-rgb), .5);
  --font-head: var(--zk-titel);
  --font-body: var(--zk-schrift);

  /* Rakete */
  --zk-hull-dark: #1b2540;
  --zk-hull-light: #eef2ff;
  --zk-hull-mid: #b9c3e6;
  --zk-window: #10204a;
}

html { background: var(--zk-bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  position: relative;
  font-family: var(--zk-schrift);
  background: transparent;
  color: var(--zk-lead);
  overflow-x: hidden;
}
:lang(ru) body, :lang(uk) body, :lang(sr) body { font-family: 'Rubik', 'Segoe UI', system-ui, sans-serif; }
/* Hintergrund: leiser Nebel (fest, kein Bewegen) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 12% 0%, rgba(var(--zk-indigo-rgb), .20), transparent 70%),
    radial-gradient(ellipse 55% 45% at 92% 60%, rgba(var(--zk-cyan-rgb), .08), transparent 70%),
    var(--zk-bg);
}
/* Sternenhimmel: nur hinter dem Kopf der Seite (Hoehe setzt zukunft.js) */
.zk-netz {
  /* das hidden-Attribut aus zk_himmel() ist nur fuer Druck/Lesegeraete ohne diese Datei; hier wird der Himmel sichtbar */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 480px;
  z-index: -1;
  display: block;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 90px), transparent);
}

h1, h2, h3, h4, h5 { font-family: var(--zk-titel); color: var(--zk-text); letter-spacing: .005em; }
[class*="hero"] h1, [class*="hero"] h2, [class*="hero"] h3, .sec-dark h1, .sec-dark h2, .sec-dark h3, .final-cta h1, .final-cta h2,
footer h1, footer h2, footer h3, footer h4 { color: var(--zk-text); }
a { color: var(--zk-cyan); }
a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
strong { color: var(--zk-text); }
::selection { background: rgba(var(--zk-violet-rgb), .45); color: #fff; }

/* Sichtbarer Fokus fuer alles Bedienbare */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--zk-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}
.form-control:focus-visible { outline-offset: 1px; }

/* ============================== 2. Kopf ============================== */
.topbar {
  background: transparent;
  color: var(--zk-muted);
  border-bottom: 1px solid var(--zk-line);
  font-family: var(--zk-mono);
  font-size: .76rem;
  letter-spacing: .04em;
}
.topbar a { color: var(--zk-muted); }
.topbar a:hover { color: var(--zk-cyan); }
.topbar .ico { color: var(--zk-cyan); }

body > header, .header-shell {
  background: rgba(var(--zk-bg-rgb), .66);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--zk-line);
  box-shadow: none;
}
body > header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--zk-violet) 22%, var(--zk-cyan) 55%, var(--zk-mint) 78%, transparent);
  opacity: .55;
  pointer-events: none;
}
.logo img { height: 36px; }
/* Das Logo ist dunkel-auf-hell gedacht: auf dunklem Kopf die weisse Marke (gleiches Bild, gleicher alt-Text) */
:root:not([data-theme="light"]) .logo img[src$="alpasana_logo.png"] { content: url("../img/alpasana_logo_weiss.png"); }
.logo-text {
  font-family: var(--zk-titel);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: .02em;
  color: var(--zk-text);
  text-transform: uppercase;
}
.logo-text span { font-family: var(--zk-mono); font-weight: 500; font-size: .62rem; letter-spacing: .1em; color: var(--zk-faint); text-transform: none; }
nav a:not(.btn) { color: var(--zk-lead); font-family: var(--zk-titel); font-weight: 600; letter-spacing: .02em; }
nav a:not(.btn):hover, nav a:not(.btn).active { background: rgba(var(--zk-cyan-rgb), .10); color: var(--zk-cyan); text-decoration: none; }
nav a.btn:hover { text-decoration: none; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: var(--zk-text); }
.nav-toggle:focus-visible { outline-offset: 1px; }

.lang-current {
  background: rgba(var(--zk-cyan-rgb), .10);
  color: var(--zk-cyan);
  border: 1px solid rgba(var(--zk-cyan-rgb), .28);
  font-family: var(--zk-mono);
  letter-spacing: .04em;
}
.lang-current:hover { background: rgba(var(--zk-cyan-rgb), .2); color: var(--zk-text); }
.lang-menu { background: var(--zk-surface-2); border: 1px solid var(--zk-line-strong); box-shadow: var(--shadow-lg); }
.lang-menu a { color: var(--zk-lead); }
.lang-menu a:hover, .lang-menu a.lang-active { background: rgba(var(--zk-cyan-rgb), .12); color: var(--zk-cyan); text-decoration: none; }

/* Mobile Menue */
@media (max-width: 640px) {
  .nav-links { background: var(--zk-surface-2); border: 1px solid var(--zk-line-strong); box-shadow: var(--shadow-lg); }
}

/* ============================== 3. Knoepfe ============================== */
.btn {
  border-radius: 10px;
  border-width: 1px;
  font-family: var(--zk-titel);
  font-weight: 700;
  letter-spacing: .05em;
}
.btn-primary, .btn-hero, .btn-coaching, .btn-success, .teaser-cta-btn, .aktion-btn {
  background: var(--zk-grad);
  color: var(--zk-ink);
  border-color: transparent;
  box-shadow: 0 8px 26px rgba(var(--zk-indigo-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-primary:hover, .btn-hero:hover, .btn-coaching:hover, .btn-success:hover, .teaser-cta-btn:hover, .aktion-btn:hover {
  background: var(--zk-grad);
  color: var(--zk-ink);
  filter: brightness(1.08) saturate(1.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(var(--zk-cyan-rgb), .32), inset 0 1px 0 rgba(255, 255, 255, .4);
  text-decoration: none;
}
.btn-coaching { border-radius: 10px; font-family: var(--zk-titel); text-transform: uppercase; letter-spacing: .05em; }
.aktion-btn { background: linear-gradient(105deg, #f5c451, #ffe08a); }
.aktion-btn:hover { background: linear-gradient(105deg, #f5c451, #ffe08a); }
.btn-secondary {
  background: rgba(var(--zk-cyan-rgb), .06);
  color: var(--zk-cyan);
  border: 1px solid rgba(var(--zk-cyan-rgb), .5);
}
.btn-secondary:hover { background: rgba(var(--zk-cyan-rgb), .16); color: var(--zk-text); border-color: var(--zk-cyan); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--zk-muted); }
.btn-ghost:hover { color: var(--zk-text); background: rgba(var(--zk-wash-rgb), .07); text-decoration: none; }
.btn-light { background: rgba(var(--zk-wash-rgb), .08); color: var(--zk-text); border: 1px solid var(--zk-line-strong); }
.btn-light:hover { background: rgba(var(--zk-wash-rgb), .14); text-decoration: none; }
.btn-danger { background: var(--zk-rot); color: var(--zk-ink); }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }

/* ============================== 4. Karten ============================== */
.card, .feature-card, .plan-card, .quiz-card, .result-card, .path-result, .path-card,
.upgrade-card, .upgrade-proof, .upgrade-next, .user-sidebar, .user-card, .user-panel, .stat-card, .auth-card {
  background: var(--zk-glass);
  border: 1px solid var(--zk-line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.feature-card:hover, .who-card:hover, .result-card:hover { border-color: rgba(var(--zk-cyan-rgb), .4); box-shadow: 0 16px 44px rgba(var(--zk-shadow-rgb), .45), 0 0 0 1px rgba(var(--zk-cyan-rgb), .12); }
.feature-card h3, .plan-card h3 { color: var(--zk-text); }
.feature-card p, .step p, .section-header p { color: var(--zk-muted); }
.feature-icon { filter: saturate(1.1); }

.section-tag {
  background: rgba(var(--zk-cyan-rgb), .08);
  color: var(--zk-cyan);
  border: 1px solid rgba(var(--zk-cyan-rgb), .28);
  font-family: var(--zk-mono);
  font-weight: 500;
  letter-spacing: .12em;
  border-radius: 6px;
  padding: 5px 12px;
}
.section-header h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  background: linear-gradient(105deg, var(--zk-text) 30%, var(--zk-cyan) 80%, var(--zk-mint));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--zk-text);
}
.sec-soft { background: rgba(var(--zk-surface-rgb), .5); border-block: 1px solid var(--zk-line); }
.sec-dark, .coaching-section, .partner-section { background: linear-gradient(135deg, rgba(var(--zk-deep-rgb), .9), rgba(16, 22, 48, .85)); color: var(--zk-lead); border-block: 1px solid var(--zk-line); }
.sec-dark::before, .coaching-section::before, .partner-section::before { background: radial-gradient(circle, rgba(var(--zk-violet-rgb), .18), transparent 70%); }
.sec-dark .section-tag, .partner-section .section-tag { background: rgba(var(--zk-cyan-rgb), .08); color: var(--zk-cyan); }
.how-it-works { background: transparent; }
.final-cta { background: linear-gradient(180deg, transparent, rgba(var(--zk-indigo-rgb), .16)) !important; border-top: 1px solid var(--zk-line); }
.coaching-card { background: var(--zk-glass); border: 1px solid var(--zk-line); border-radius: var(--zk-radius); }
.coaching-card:hover { background: rgba(var(--zk-cyan-rgb), .07); border-color: rgba(var(--zk-cyan-rgb), .35); }
.coaching-card h3 { color: var(--zk-cyan); }
.coaching-card p { color: var(--zk-lead); }
.step-num, .result-card-rank, .beruf-rank {
  background: var(--zk-grad);
  color: var(--zk-ink);
  box-shadow: 0 0 22px rgba(var(--zk-cyan-rgb), .28);
}
.result-card-rank.gold { background: linear-gradient(135deg, #ffe08a, #f5a25a); }
.result-card-rank.silver { background: linear-gradient(135deg, #e6ebf7, #aeb8d4); }
.result-card-rank.bronze { background: linear-gradient(135deg, #e8a86c, #b4713a); }
.step:not(:last-child)::after { color: var(--zk-cyan); opacity: .5; }

.trust-note { background: rgba(var(--zk-mint-rgb), .08); border: 1px solid rgba(var(--zk-mint-rgb), .3); color: var(--zk-mint); }

.plan-pro { border: 1px solid transparent; background:
  linear-gradient(var(--zk-glass-strong), var(--zk-glass-strong)) padding-box,
  var(--zk-grad) border-box; box-shadow: 0 18px 60px rgba(var(--zk-indigo-rgb), .3); }
.plan-badge { background: var(--zk-grad); color: var(--zk-ink); font-family: var(--zk-mono); letter-spacing: .08em; }
.plan-name { color: var(--zk-muted); font-family: var(--zk-mono); font-weight: 500; font-size: .9rem; letter-spacing: .12em; }
.plan-price { color: var(--zk-text); }
.plan-cur, .plan-per, .plan-note { color: var(--zk-muted); }
.plan-lead { color: var(--zk-cyan); }
.plan-list li { color: var(--zk-lead); }
.plan-action-hint, .upgrade-action-box { background: rgba(var(--zk-amber-rgb), .10); border-color: rgba(var(--zk-amber-rgb), .4); color: var(--zk-amber); }
.upgrade-action-box strong, .plan-action-hint { color: var(--zk-amber); }
.upgrade-action-box span { color: var(--zk-lead); }

.faq-item { background: var(--zk-glass); border: 1px solid var(--zk-line); box-shadow: none; }
.faq-item[open] { border-color: rgba(var(--zk-cyan-rgb), .4); }
.faq-item .faq-q { color: var(--zk-text); }
.faq-item p { color: var(--zk-muted); }
summary { cursor: pointer; }
summary::marker { color: var(--zk-cyan); }

/* ============================== 5. Formulare ============================== */
.form-label { color: var(--zk-text); }
.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea {
  background: var(--zk-field);
  color: var(--zk-text);
  border: 1px solid var(--zk-field-rand);
  border-radius: 10px;
}
.form-control { border-width: 1px; }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--zk-faint); opacity: 1; }
.form-control:focus { border-color: var(--zk-cyan); box-shadow: 0 0 0 3px rgba(var(--zk-cyan-rgb), .22); }
.form-control.error { border-color: var(--zk-rot); }
.form-hint { color: var(--zk-faint); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--zk-cyan); }
.captcha-box { background: var(--zk-tint); border: 1px solid var(--zk-line-strong); }
.captcha-box label { color: var(--zk-lead); }

.alert { border-radius: 10px; }
.alert-error { background: rgba(var(--zk-rot-rgb), .10); border: 1px solid rgba(var(--zk-rot-rgb), .5); color: #ffc2c2; }
.alert-success { background: rgba(var(--zk-mint-rgb), .09); border: 1px solid rgba(var(--zk-mint-rgb), .45); color: var(--zk-mint); }
.alert-info { background: rgba(var(--zk-cyan-rgb), .08); border: 1px solid rgba(var(--zk-cyan-rgb), .4); color: var(--zk-cyan); }
.alert a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.divider span { color: var(--zk-faint); }

/* ============================== 6. Tabellen, Badges ============================== */
th { color: var(--zk-muted); border-bottom-color: var(--zk-line-strong); }
td { border-bottom-color: var(--zk-line); }
tr:hover td { background: rgba(var(--zk-wash-rgb), .03); }
.badge-admin { background: rgba(var(--zk-rot-rgb), .14); color: #ffc2c2; }
.badge-user { background: rgba(var(--zk-cyan-rgb), .12); color: var(--zk-cyan); }

/* ============================== 7. Fuss ============================== */
footer {
  position: relative;
  background: linear-gradient(180deg, rgba(var(--zk-deep-rgb), .55), rgba(var(--zk-deep-rgb), .92));
  border-top: 1px solid var(--zk-line);
  color: var(--zk-muted);
}
footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--zk-violet) 22%, var(--zk-cyan) 55%, var(--zk-mint) 78%, transparent);
  opacity: .5;
}
footer a, .footer-col a, .footer-bottom a { color: var(--zk-muted); }
footer a:hover, .footer-col a:hover { color: var(--zk-cyan); text-decoration: none; }
footer .footer-logo, .footer-col h4, .footer-col .footer-h { color: var(--zk-text); font-family: var(--zk-titel); }
.footer-col .footer-h { font-family: var(--zk-mono); font-weight: 500; font-size: .78rem; letter-spacing: .14em; color: var(--zk-cyan); }
.footer-col p { color: var(--zk-muted); }
.footer-col .ico { color: var(--zk-cyan); }
.footer-bottom { border-top-color: var(--zk-line); color: var(--zk-faint); }
/* Sprachlinks unter den Anmeldeformularen: Bestand blendet inaktive per opacity aus (unter AA) */
.auth-sprachen a[style*="opacity" i] { opacity: 1 !important; text-decoration: underline; text-underline-offset: 3px; }
/* Kleingedrucktes im Fuss: Bestand blendet es per opacity aus, das drueckt den Kontrast unter AA */
footer p[style*="opacity" i], footer div[style*="opacity" i] { opacity: 1 !important; color: var(--zk-faint); }

/* ============================== 8. Pause-Knopf ============================== */
.zk-pause {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--zk-line-strong);
  border-radius: 999px;
  background: rgba(var(--zk-bg-rgb), .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--zk-muted);
  font: 500 11px/1.3 var(--zk-mono);
  letter-spacing: .04em;
  cursor: pointer;
}
.zk-pause[hidden] { display: none; }
.zk-pause:hover, .zk-pause[data-paused] { color: var(--zk-cyan); border-color: var(--zk-cyan); }
.zk-pause-icon { width: 9px; height: 9px; flex: 0 0 9px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.zk-pause[data-paused] .zk-pause-icon { border: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; width: 0; height: 0; flex-basis: 8px; }
@media (max-width: 640px) {
  .zk-pause { padding: 6px 10px; }
  .zk-pause-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .zk-pause { width: 40px; height: 40px; justify-content: center; padding: 0; }
}

/* ============================== 8b. Umschalter Hell / Dunkel / Automatisch ============================== */
.zk-theme { position: relative; display: inline-flex; flex: 0 0 auto; margin-inline-start: 8px; }
.zk-theme[hidden], .zk-theme-menu[hidden] { display: none; }
.zk-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(var(--zk-cyan-rgb), .28); border-radius: 50%;
  background: rgba(var(--zk-cyan-rgb), .10); color: var(--zk-cyan);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.zk-theme-btn:hover { background: rgba(var(--zk-cyan-rgb), .2); border-color: var(--zk-cyan); }
.zk-theme-ico { display: inline-flex; }
.zk-theme-ico svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zk-theme-fill { fill: currentColor; stroke: none; }
/* Der Knopf zeigt das Symbol der gewaehlten Einstellung */
.zk-theme-btn .zk-theme-ico { display: none; }
.zk-theme-btn .zk-theme-ico--auto { display: inline-flex; }
:root[data-theme-pref="light"] .zk-theme-btn .zk-theme-ico--auto, :root[data-theme-pref="dark"] .zk-theme-btn .zk-theme-ico--auto { display: none; }
:root[data-theme-pref="light"] .zk-theme-btn .zk-theme-ico--light, :root[data-theme-pref="dark"] .zk-theme-btn .zk-theme-ico--dark { display: inline-flex; }
.zk-theme-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 400;
  display: flex; flex-direction: column; gap: 2px; min-width: 188px; padding: 6px;
  border: 1px solid var(--zk-line-strong); border-radius: 14px;
  background: var(--zk-surface-2); box-shadow: var(--shadow-lg);
}
.zk-theme-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 9px; background: transparent; color: var(--zk-lead);
  font: 600 .9rem/1.2 var(--zk-schrift); text-align: start; cursor: pointer;
}
.zk-theme-menu button:hover { background: rgba(var(--zk-cyan-rgb), .12); color: var(--zk-cyan); }
.zk-theme-menu button[aria-pressed="true"] { background: rgba(var(--zk-cyan-rgb), .14); color: var(--zk-cyan); }
.zk-theme-menu button[aria-pressed="true"]::after { content: '\2713'; margin-inline-start: auto; font-weight: 700; }
.zk-theme-menu button:focus-visible { outline-offset: -2px; }
.zk-theme--ecke { position: absolute; top: 12px; inset-inline-end: 16px; z-index: 60; margin: 0; }
.zk-theme--seitenleiste { display: flex; margin: 0 0 12px; justify-content: flex-end; }
.zk-theme--seitenleiste .zk-theme-menu { inset-inline-end: auto; inset-inline-start: 0; }
@media (max-width: 640px) { .zk-theme { margin-inline-start: 2px; } .zk-theme-btn { width: 40px; height: 40px; } }
.zk-theme-menu { max-width: calc(100vw - 24px); }
@media print { .zk-theme { display: none !important; } }

/* ============================== 9. Seitenkoepfe (Himmel dahinter) ============================== */
.hero, .co-hero, .results-hero, .upgrade-hero, .rg-head, .zk-kopf {
  position: relative;
  background: transparent;
  color: var(--zk-lead);
  overflow: hidden;
}
.hero::before, .hero::after { display: none; }
.hero-net, .hero-rings, .hero-rings-2, .hero-wave { display: none; }
.hero .hero-badge, .co-hero .hero-badge {
  color: var(--zk-cyan);
  font-family: var(--zk-mono);
  font-weight: 500;
  letter-spacing: .14em;
  font-size: .78rem;
}
.hero h1, .co-hero h1, .results-hero h1, .upgrade-hero h1, .rg-head h1 {
  font-family: var(--zk-titel);
  color: var(--zk-text);
  letter-spacing: .005em;
}
.hero h1 .highlight {
  background: var(--zk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--zk-cyan);
}
.hero p, .co-hero p, .results-hero p, .upgrade-hero p, .rg-head p { color: var(--zk-lead); opacity: 1; }
.hero-stats { gap: 0; }
.hero-stat-num {
  font-family: var(--zk-titel);
  background: var(--zk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--zk-cyan);
}
.hero-stat-lbl { color: var(--zk-muted); opacity: 1; }
.ix1, .ix4, .ix5 { color: var(--zk-muted); }
.ix4 { color: var(--zk-lead); }
.ix4:hover { color: var(--zk-cyan); }
.hero a[style*="color:inherit"] { color: var(--zk-muted) !important; }
.co-trust span { background: var(--zk-glass); border: 1px solid var(--zk-line-strong); color: var(--zk-lead); }
.rg-krumen { color: var(--zk-muted); opacity: 1; font-family: var(--zk-mono); font-size: .78rem; letter-spacing: .04em; }
.rg-krumen a { color: var(--zk-cyan); }
.rg-head { padding: 44px 0 40px; }
.rg-head .rg-wrap::before {
  content: '+ SJC // RG';
  display: block;
  margin-bottom: 8px;
  font: 500 11px/1.4 var(--zk-mono);
  letter-spacing: .15em;
  color: var(--zk-faint);
}
.results-hero, .upgrade-hero { padding: 48px 0 44px; }
.upgrade-hero-kicker { border-color: rgba(var(--zk-cyan-rgb), .45); color: var(--zk-cyan); font-family: var(--zk-mono); font-weight: 500; letter-spacing: .12em; }

/* Startseite: zweispaltig mit Rakete */
.zk-hero-rakete { padding: 34px 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: 600px;
}
.zk-hero-copy { position: relative; z-index: 2; min-width: 0; }
.zk-hero-copy .hero-badge { margin-bottom: 22px; }
.zk-hero-copy h1 { font-size: clamp(2.3rem, 4.3vw, 3.7rem); line-height: 1.08; margin-bottom: 22px; }
.zk-hero-copy p { margin-left: 0; margin-right: 0; max-width: 600px; }
.zk-hero-copy .ix1 { margin: 0 0 22px; justify-content: flex-start; max-width: none; display: flex; }
.zk-hero-copy .hero-cta { justify-content: flex-start; }
.zk-hero-copy .ix3, .zk-hero-copy .ix5 { margin-left: 0; margin-right: 0; }
.zk-hero-visual { position: relative; min-width: 0; }

.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(var(--zk-shadow-rgb), .45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--zk-violet-rgb), .45);
}
.zk-telemetry-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  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-telemetry .hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  max-width: none;
}
.zk-telemetry .hero-stat { padding: 16px 18px 15px; text-align: left; }
.zk-telemetry .hero-stat:nth-child(odd) { border-right: 1px solid var(--zk-line); }
.zk-telemetry .hero-stat:nth-child(-n+2) { border-bottom: 1px solid var(--zk-line); }
.zk-telemetry .hero-stat-num { font-size: 2.1rem; line-height: 1.1; }

/* Rakete und Szene */
.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); font-size: 22px; line-height: 1; }
.zk-scene { position: relative; height: 400px; }
.zk-rocket {
  position: absolute;
  top: -40px;
  left: 50%;
  width: 470px;
  height: 462px;
  overflow: visible;
  transform: translateX(-50%);
}
.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);
}
.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;
  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: var(--zk-mint); box-shadow: 0 0 14px var(--zk-mint); }
.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-rk-violet); }
.zk-stop-indigo { stop-color: var(--zk-rk-indigo); }
.zk-stop-white { stop-color: #ffffff; }
.zk-stop-cyan { stop-color: var(--zk-rk-cyan); }
.zk-stop-fade { stop-color: var(--zk-rk-violet); stop-opacity: 0; }
.zk-stop-window { stop-color: var(--zk-window); }
.zk-stop-trail { stop-color: var(--zk-rk-cyan); stop-opacity: .9; }
.zk-stop-trail-end { stop-color: var(--zk-rk-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-rk-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-rk-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; }
.zk-rakete-mini { display: block; overflow: visible; }

@media (max-width: 1100px) {
  .zk-hero-grid { gap: 20px; }
  .zk-scene { height: 360px; }
  .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; }
}
@media (max-width: 900px) {
  .zk-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 6px; padding-top: 10px; }
  .zk-hero-visual { width: 100%; max-width: 520px; margin: 0 auto; }
  .zk-hero-rakete { padding-top: 4px; }
  .zk-hero-copy h1 { font-size: clamp(2.3rem, 10.6vw, 3rem); }
  .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-one { top: 60px; }
  .zk-coord-two { top: 200px; }
}
@media (max-width: 480px) {
  .zk-telemetry .hero-stat { padding: 13px 12px 12px; }
  .zk-hero-copy .hero-cta { align-items: stretch; }
  .zk-hero-copy .hero-cta .btn { max-width: none; }
  .zk-coord { display: none; }
}

/* ============================== 10. Ausbildungspfad, Fragebogen ============================== */
.quiz-page { background: transparent; }
.quiz-header, .assess-progress-wrap {
  background: rgba(var(--zk-bg-rgb), .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--zk-line);
}
.assess-etappe-label { color: var(--zk-cyan); font-family: var(--zk-mono); font-weight: 500; letter-spacing: .08em; }
.assess-counter { color: var(--zk-faint); font-family: var(--zk-mono); }
.assess-bar, .quiz-progress-bar-wrap { background: rgba(var(--zk-wash-rgb), .10); }
.assess-bar-fill, .quiz-progress-bar { background: var(--zk-grad); }
.quiz-card { box-shadow: var(--shadow-lg); border-radius: 18px; }
.quiz-q-num { color: var(--zk-faint); font-family: var(--zk-mono); }
.quiz-q-text, .assess-q-text { color: var(--zk-text); font-family: var(--zk-titel); }
.assess-dot {
  background: var(--zk-field);
  border: 2px solid var(--zk-field-rand);
  color: var(--zk-muted);
}
.assess-dot:hover { border-color: var(--zk-cyan); box-shadow: 0 0 20px rgba(var(--zk-cyan-rgb), .25); }
.assess-dot.selected { background: var(--zk-grad); border-color: transparent; color: var(--zk-ink); box-shadow: 0 8px 26px rgba(var(--zk-cyan-rgb), .35); }
.assess-likert-labels { color: var(--zk-faint); }
.assess-likert-current { color: var(--zk-cyan); }
.assess-choice, .quiz-answer, .ctx-opt {
  background: var(--zk-field);
  border: 1px solid var(--zk-field-rand);
  color: var(--zk-text);
  border-radius: 12px;
}
.assess-choice:hover, .quiz-answer:hover, .ctx-opt:hover {
  border-color: var(--zk-cyan);
  background: rgba(var(--zk-cyan-rgb), .08);
  box-shadow: 0 0 0 1px rgba(var(--zk-cyan-rgb), .2);
}
.assess-choice.selected, .quiz-answer.selected, .ctx-opt-sel {
  border-color: var(--zk-cyan);
  background: linear-gradient(135deg, rgba(var(--zk-violet-rgb), .22), rgba(var(--zk-cyan-rgb), .16));
  color: var(--zk-text);
  box-shadow: 0 0 0 1px rgba(var(--zk-cyan-rgb), .45), 0 8px 24px rgba(var(--zk-shadow-rgb), .3);
}
.ctx-opt-sel { color: var(--zk-text); }
.quiz-etappe-chip.active { border-color: var(--zk-cyan); background: rgba(var(--zk-cyan-rgb), .12); color: var(--zk-cyan); }
.quiz-etappe-chip.done { background: var(--zk-mint); color: var(--zk-ink); }
.quiz-etappe-chip.todo { background: rgba(var(--zk-wash-rgb), .08); color: var(--zk-muted); }
.ctx-pill span { background: var(--zk-field); border: 1px solid var(--zk-field-rand); color: var(--zk-text); }
.ctx-pill:hover span { border-color: var(--zk-cyan); }
.ctx-pill input:checked + span { background: var(--zk-grad); border-color: transparent; color: var(--zk-ink); }
.ctx-pill input:focus-visible + span { outline: 2px solid var(--zk-cyan); outline-offset: 3px; }
.etappe-intro p, .result-preview p { color: var(--zk-muted); }
.preview-rolle { background: var(--zk-field); border-color: var(--zk-line); }
.preview-rank, .role-pct, .beruf-score-num { color: var(--zk-cyan); }
.preview-bar-wrap, .role-bar-wrap, .result-score-bar-wrap { background: rgba(var(--zk-wash-rgb), .10); }
.preview-bar, .role-bar { background: var(--zk-grad); }
.path-choice-card:hover { border-color: var(--zk-cyan) !important; box-shadow: 0 16px 44px rgba(var(--zk-cyan-rgb), .18) !important; }
.path-card:hover { border-color: var(--zk-cyan); box-shadow: 0 16px 44px rgba(var(--zk-cyan-rgb), .18); }
.path-name { color: var(--zk-text); }
.path-desc { color: var(--zk-muted); }
.path-target { color: var(--zk-cyan); }

/* ============================== 11. Auswertung ============================== */
.results-body { padding-top: 32px; }
.result-card-name { color: var(--zk-text); }
.result-card-score, .result-card-desc { color: var(--zk-muted); }
.result-meta-block { background: var(--zk-field); border: 1px solid var(--zk-line); }
.result-meta-block h4 { color: var(--zk-faint); font-family: var(--zk-mono); font-weight: 500; letter-spacing: .1em; }
.result-meta-block p { color: var(--zk-lead); }
.result-example-chip { background: rgba(var(--zk-cyan-rgb), .10); color: var(--zk-cyan); border: 1px solid rgba(var(--zk-cyan-rgb), .25); }
.result-link { color: var(--zk-cyan); }
.download-bar { background: linear-gradient(135deg, rgba(var(--zk-mint-rgb), .16), rgba(var(--zk-cyan-rgb), .10)); border-block: 1px solid rgba(var(--zk-mint-rgb), .3); color: var(--zk-text); }
.download-bar p { opacity: 1; color: var(--zk-lead); }
.path-result { border-radius: 20px; }
.path-result-badge { background: rgba(var(--zk-cyan-rgb), .10); color: var(--zk-cyan); border: 1px solid rgba(var(--zk-cyan-rgb), .3); font-family: var(--zk-mono); font-weight: 500; letter-spacing: .06em; }
.path-result-head p { color: var(--zk-muted); }
.beruf-card { background: var(--zk-field); border: 1px solid var(--zk-line); }
.beruf-card:hover { border-color: rgba(var(--zk-cyan-rgb), .45); box-shadow: 0 0 0 1px rgba(var(--zk-cyan-rgb), .15), var(--shadow-sm); }
.beruf-name { color: var(--zk-text); }
.beruf-tag { background: rgba(var(--zk-wash-rgb), .08); color: var(--zk-lead); }
.beruf-tag-stufe { background: rgba(var(--zk-violet-rgb), .16); color: #c9bfff; }
.beruf-tag-abschluss { background: rgba(var(--zk-cyan-rgb), .14); color: var(--zk-cyan); }
.beruf-tag-feld { background: rgba(var(--zk-mint-rgb), .12); color: var(--zk-mint); }
.beruf-access { color: var(--zk-mint); }
.beruf-why { color: var(--zk-muted); }
.beruf-why strong { color: var(--zk-cyan); }
.beruf-score-lbl { color: var(--zk-faint); }
.beruf-link { background: rgba(var(--zk-cyan-rgb), .06); color: var(--zk-cyan); border-color: rgba(var(--zk-cyan-rgb), .5); }
.beruf-link:hover { background: rgba(var(--zk-cyan-rgb), .16); color: var(--zk-text); text-decoration: none; }
.beruf-locked { background: rgba(var(--zk-violet-rgb), .09); border-color: rgba(var(--zk-violet-rgb), .5); color: var(--zk-lead); }
.result-more-jobs > .mj-toggle { background: rgba(var(--zk-cyan-rgb), .07); border: 1px solid rgba(var(--zk-cyan-rgb), .3); color: var(--zk-text); }
.result-more-jobs > .mj-toggle:hover { background: rgba(var(--zk-cyan-rgb), .13); border-color: var(--zk-cyan); }
.result-more-jobs > .mj-toggle:focus-visible { outline: 2px solid var(--zk-cyan); outline-offset: 3px; }
.result-more-jobs[open] > .mj-toggle { background: rgba(var(--zk-cyan-rgb), .10); border-color: var(--zk-cyan); }
.mj-anzahl { background: var(--zk-grad); color: var(--zk-ink); }
.mj-title { color: var(--zk-text); }
.mj-sub { color: var(--zk-muted); }
.mj-aktion { color: var(--zk-cyan); }
.mj-panel { background: var(--zk-field); border-color: var(--zk-cyan); }
.mj-job { background: rgba(var(--zk-wash-rgb), .04); border-color: var(--zk-line); }
.mj-job-name { color: var(--zk-text); }
.mj-job-chip { background: rgba(var(--zk-cyan-rgb), .10); color: var(--zk-cyan); }
.mj-job-link { background: transparent; color: var(--zk-cyan); border-color: rgba(var(--zk-cyan-rgb), .5); }
.mj-job-link:hover, .mj-job-link:focus-visible { background: rgba(var(--zk-cyan-rgb), .16); color: var(--zk-text); outline-color: var(--zk-cyan); }
.bystufe { border-top-color: var(--zk-line); }
.bystufe-label { color: var(--zk-cyan); font-family: var(--zk-mono); font-weight: 500; letter-spacing: .08em; }
.bystufe-row { border-bottom-color: var(--zk-line); }
.bystufe-name { color: var(--zk-lead); }
.bystufe-score { color: var(--zk-cyan); }
.result-card-teaser, .beruf-card-teaser { background: rgba(var(--zk-wash-rgb), .03); border-color: var(--zk-line); box-shadow: none; }
.result-card-teaser .result-card-rank, .beruf-card-teaser .beruf-rank { background: rgba(var(--zk-wash-rgb), .10); color: var(--zk-faint); box-shadow: none; }
.result-card-teaser .result-score-bar { background: rgba(var(--zk-wash-rgb), .22); }
.beruf-card-teaser .beruf-score-num { color: var(--zk-faint); }
.teaser-bar { background: linear-gradient(90deg, rgba(var(--zk-wash-rgb), .10), rgba(var(--zk-wash-rgb), .05)); }
.teaser-hinweis { color: var(--zk-faint); }
.teaser-cta {
  color: var(--zk-text);
  background:
    linear-gradient(135deg, rgba(var(--zk-indigo-rgb), .55), rgba(16, 32, 74, .85) 60%, rgba(var(--zk-cyan-rgb), .28)),
    var(--zk-surface);
  border: 1px solid var(--zk-line-strong);
  box-shadow: 0 16px 50px rgba(var(--zk-indigo-rgb), .3);
}
.teaser-cta-txt span, .teaser-cta-fuss, .teaser-cta-rest, .teaser-price-label, .teaser-price-save { color: var(--zk-lead); }
.teaser-cta-txt strong { color: var(--zk-text); }
.teaser-price-box { background: rgba(var(--zk-deep-rgb), .55); border: 1px solid var(--zk-line-strong); }
.teaser-price-old { color: var(--zk-faint); }
.teaser-price-new { color: var(--zk-text); }
.aktion-karte { background: rgba(var(--zk-amber-rgb), .08); border: 1px solid rgba(var(--zk-amber-rgb), .4); }
.aktion-txt strong { color: var(--zk-amber); }
.aktion-txt span { color: var(--zk-lead); }
.aktion-fuss { color: var(--zk-muted) !important; }
.code-einloesen label, .code-hinweis { color: var(--zk-muted); }

/* Radar-Diagramm (SVG aus radar.js): Farben der Praesentationsattribute ersetzen */
.radar-wrap { background: var(--zk-field) !important; border: 1px solid var(--zk-line) !important; }
.radar-title { color: var(--zk-faint) !important; font-family: var(--zk-mono); letter-spacing: .12em !important; }
.radar-container [stroke="#CBD5E0"] { stroke: rgba(var(--zk-violet-rgb), .30); }
.radar-container [fill="rgba(255,255,255,0.7)"] { fill: rgba(var(--zk-wash-rgb), .03); }
.radar-container [fill="#4A5568"] { fill: var(--zk-lead); }
.radar-container [fill="#A0AEC0"] { fill: var(--zk-faint); }
.radar-container [fill="#718096"] { fill: var(--zk-muted); }
.radar-container [stroke="#fff"] { stroke: var(--zk-field); }

/* ============================== 12. Kundenbereich ============================== */
.user-page { background: transparent; }
.user-sidebar { border-radius: 18px; }
.user-profile { border-bottom-color: var(--zk-line); }
.user-avatar { background: var(--zk-grad); border: 0; color: var(--zk-ink); box-shadow: 0 0 24px rgba(var(--zk-cyan-rgb), .3); }
.user-profile-name, .user-greeting, .user-card-num, .user-panel-head h2, .role-name { color: var(--zk-text); }
.user-profile-email, .user-sub, .user-card-lbl { color: var(--zk-muted); }
.user-pro-badge { background: rgba(var(--zk-mint-rgb), .10); color: var(--zk-mint); border-color: rgba(var(--zk-mint-rgb), .4); }
.user-nav a { color: var(--zk-lead); }
.user-nav a:hover { background: rgba(var(--zk-cyan-rgb), .08); text-decoration: none; }
.user-nav a.active { background: rgba(var(--zk-cyan-rgb), .12); color: var(--zk-cyan); border-left-color: var(--zk-cyan); }
.user-nav a.logout { color: var(--zk-muted); }
.user-nav a.logout:hover { color: var(--zk-rot); background: rgba(var(--zk-rot-rgb), .08); }
.user-nav-sep { background: var(--zk-line); }
.role-rank { background: rgba(var(--zk-cyan-rgb), .12); color: var(--zk-cyan); }
.user-pro-cta { background: linear-gradient(135deg, rgba(var(--zk-indigo-rgb), .6), rgba(16, 32, 74, .9)); border: 1px solid var(--zk-line-strong); }
.user-shell { padding-top: 28px; }
.zk-app-kopf { position: relative; }

/* ============================== 13. Kasse (upgrade.php) ============================== */
.upgrade-body { padding-top: 32px; }
.upgrade-card { border-radius: 18px; }
.upgrade-kicker { color: var(--zk-faint); font-family: var(--zk-mono); font-weight: 500; letter-spacing: .12em; }
.upgrade-price-old { color: var(--zk-faint); }
.upgrade-price-now { color: var(--zk-text); }
.upgrade-price-save { color: var(--zk-mint); }
.upgrade-voucher-pill { background: rgba(var(--zk-mint-rgb), .10); color: var(--zk-mint); border-color: rgba(var(--zk-mint-rgb), .4); }
.upgrade-voucher-pill a { color: var(--zk-amber); }
.upgrade-price-note, .upgrade-payment-note, .upgrade-voucher p, .upgrade-voucher-applied, .upgrade-contact { color: var(--zk-muted); }
.upgrade-instant-strip { background: rgba(var(--zk-cyan-rgb), .08); color: var(--zk-cyan); border-color: rgba(var(--zk-cyan-rgb), .3); }
.upgrade-benefits-title { color: var(--zk-lead); }
.upgrade-benefit-list li { color: var(--zk-lead); }
.upgrade-benefit-list li::before { color: var(--zk-mint); }
.upgrade-benefit-list span { color: var(--zk-muted); }
.upgrade-info-box { background: rgba(var(--zk-cyan-rgb), .08); border-color: rgba(var(--zk-cyan-rgb), .35); color: var(--zk-lead); }
.upgrade-info-warn { background: rgba(var(--zk-amber-rgb), .09); border-color: rgba(var(--zk-amber-rgb), .4); color: var(--zk-amber); }
.upgrade-voucher { border-top-color: var(--zk-line); }
.upgrade-voucher summary { color: var(--zk-lead); }
.upgrade-proof strong, .upgrade-next strong { color: var(--zk-text); }
.upgrade-proof p, .upgrade-next p { color: var(--zk-muted); }
.upgrade-next { background: linear-gradient(180deg, rgba(var(--zk-cyan-rgb), .07), var(--zk-glass)); border-color: rgba(var(--zk-cyan-rgb), .3); }
.upgrade-contact a { color: var(--zk-cyan); }

/* ============================== 14. Coaching ============================== */
.co-section { background: transparent; }
.co-card, .book-card { background: var(--zk-glass); border: 1px solid var(--zk-line); box-shadow: var(--shadow-sm); }
.co-card:hover, .book-card:hover { border-color: rgba(var(--zk-cyan-rgb), .4); }
.co-card h3 { color: var(--zk-text); }
.co-card p, .book-desc { color: var(--zk-muted); }
.co-pain { background: var(--zk-glass); border-color: var(--zk-line); color: var(--zk-lead); }
.co-pain .q { color: var(--zk-cyan); }
.book-badge { background: rgba(var(--zk-amber-rgb), .14); color: var(--zk-amber); border: 1px solid rgba(var(--zk-amber-rgb), .35); }
.book-quote { color: var(--zk-text); }
.book-cover { background: rgba(var(--zk-wash-rgb), .06); }
.lead-wrap { background: linear-gradient(135deg, rgba(var(--zk-indigo-rgb), .55), rgba(16, 32, 74, .9) 65%); border: 1px solid var(--zk-line-strong); color: var(--zk-text); box-shadow: 0 20px 60px rgba(var(--zk-indigo-rgb), .28); }
.lead-wrap h2, .lead-wrap p { color: var(--zk-text); }
.lead-form { background: var(--zk-glass-strong); border: 1px solid var(--zk-line); }
.lead-form label { color: var(--zk-lead); }
.co-other a { background: var(--zk-glass); border-color: var(--zk-line-strong); color: var(--zk-lead); }
.co-other a:hover { border-color: var(--zk-cyan); color: var(--zk-cyan); text-decoration: none; }

/* ============================== 15. Ratgeber ============================== */
.rg-sec { border-bottom-color: var(--zk-line); }
.rg-sec h2 { color: var(--zk-text); }
.rg-beruf { background: var(--zk-glass); border: 1px solid var(--zk-line); color: var(--zk-lead); }
.rg-beruf .st { background: rgba(var(--zk-cyan-rgb), .14); color: var(--zk-cyan); }
.rg-faq details { background: var(--zk-glass); border: 1px solid var(--zk-line); }
.rg-faq details[open] { border-color: rgba(var(--zk-cyan-rgb), .4); }
.rg-faq summary { color: var(--zk-text); }
.rg-faq p { color: var(--zk-muted); }
.rg-links a { background: var(--zk-glass); border: 1px solid var(--zk-line-strong); color: var(--zk-lead); }
.rg-links a:hover { background: rgba(var(--zk-cyan-rgb), .12); border-color: var(--zk-cyan); color: var(--zk-cyan); text-decoration: none; }
.rg-cta { background: linear-gradient(135deg, rgba(var(--zk-indigo-rgb), .55), rgba(16, 32, 74, .9) 65%); border: 1px solid var(--zk-line-strong); color: var(--zk-text); box-shadow: 0 20px 60px rgba(var(--zk-indigo-rgb), .28); }
.rg-cta h2, .rg-cta p { color: var(--zk-text); opacity: 1; }
.rg-stand { color: var(--zk-faint); }
.rg-teil span { background: rgba(var(--zk-mint-rgb), .09); border: 1px solid rgba(var(--zk-mint-rgb), .3); color: var(--zk-mint); }
.rg-weg { background: rgba(var(--zk-amber-rgb), .08); border: 1px solid rgba(var(--zk-amber-rgb), .3); color: var(--zk-lead); }
.rg-weg div[style] { color: var(--zk-amber) !important; }
.rg-sprachen { color: var(--zk-muted); }
.rg-sprachen a { color: var(--zk-cyan); }
.rg-wrap { position: relative; z-index: 1; }

/* ============================== 16. Fehlerseiten ============================== */
.zk-fehler { min-height: 100vh; }
.zk-fehler-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; }
.zk-fehler-main .zk-flight-label { margin: 0 0 8px; width: min(100%, 460px); }
.zk-fehler-karte {
  position: relative;
  width: min(100%, 460px);
  padding: 34px 28px 30px;
  text-align: center;
  border-radius: 18px;
  background: var(--zk-glass-strong);
  border: 1px solid rgba(var(--zk-violet-rgb), .45);
  box-shadow: 0 24px 70px rgba(var(--zk-shadow-rgb), .5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.zk-fehler-rakete { display: block; width: 46px; height: 88px; margin: -70px auto 6px; }
.zk-fehler-code { font: 700 4.4rem/1 var(--zk-titel); background: var(--zk-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--zk-cyan); margin: 4px 0 6px; }
.zk-fehler-karte h1 { font-size: 1.6rem; margin: 0 0 8px; }
.zk-fehler-karte p { color: var(--zk-muted); }
.zk-fehler-weg { margin-top: 22px; }

/* Ratgeber: Gruppe, die Berufe-Zeilen etc. lesbar */
.rg-wrap main, main.rg-wrap { position: relative; }

/* ============================== 17. Rechtliches, Text ============================== */
.legal, .prose { color: var(--zk-lead); }
main :where(h2, h3) { color: var(--zk-text); }
main p, main li { color: inherit; }

/* Kein Farbwechsel fuer Hinweisbalken des Rollen-Testmodus (Admin): bleibt wie im Bestand */

/* ============================== 17b. Klassen der Startseite (ix*, Bestand) ============================== */
.ix7, .ix10, .ix17, .ix20, .ix34, .ix35, .ix38, .ix44 { color: var(--zk-muted); }
.ix19 { color: var(--zk-faint); }
.ix21 { color: var(--zk-cyan); }
.ix14 { color: rgba(var(--zk-violet-rgb), .38); font-family: var(--zk-mono); }
.ix9, .ix41, .ix40, .lw-pill {
  background: var(--zk-glass);
  border: 1px solid var(--zk-line-strong);
  color: var(--zk-lead);
  box-shadow: none;
}
.ix40 { color: var(--zk-cyan); }
.ix37 { background: rgba(var(--zk-mint-rgb), .08); border: 1px solid rgba(var(--zk-mint-rgb), .3); color: var(--zk-mint); }
.lw-pill-first { border-color: var(--zk-cyan); color: var(--zk-cyan); }
.ix43 { filter: none; }
:root:not([data-theme="light"]) .ix43[src$="alpasana_logo.png"] { content: url("../img/alpasana_logo_weiss.png"); }
.ix16 { color: var(--zk-text); }
.ix33 { color: var(--zk-text); }
.zk-hero-copy p.ix1 { font-size: .98rem; }
.zk-hero-copy p.ix3 { font-size: 1rem; }
.zk-hero-copy p.ix5 { font-size: .86rem; color: var(--zk-muted); max-width: 560px; }
.zk-hero-copy > p:not([class]) , .zk-hero-copy > p:nth-of-type(1) { font-size: 1.14rem; }

/* Inline-<style> im <body> (Kontextfragen) laedt nach dieser Datei: deshalb mit Vorrang */
body .ctx-opt { background: var(--zk-field); border: 1px solid var(--zk-field-rand); color: var(--zk-text); border-radius: 12px; }
body .ctx-opt:hover { border-color: var(--zk-cyan); background: rgba(var(--zk-cyan-rgb), .08); transform: translateY(-1px); }
body .ctx-opt.ctx-opt-sel { border-color: var(--zk-cyan); background: linear-gradient(135deg, rgba(var(--zk-violet-rgb), .22), rgba(var(--zk-cyan-rgb), .16)); color: var(--zk-text); }
body .ctx-opt:focus-visible { outline: 2px solid var(--zk-cyan); outline-offset: 3px; }

body.zk-seite-pad { min-height: 100vh; padding: 40px 0; }

/* ============================== 17c. Rechtliches, Fachartikel, Registrierung (Inline-<style> der Seiten) ============================== */
.legal-page h1, .ar-body h2, .ar-hero h1 { color: var(--zk-text); }
.legal-page h2, .ar-body h3 { color: var(--zk-text); border-top-color: var(--zk-line); }
.legal-page h3 { color: var(--zk-lead); }
.legal-page p, .legal-page li, .ar-body p, .ar-body li { color: var(--zk-lead); }
.legal-page a, .ar-body a { color: var(--zk-cyan); text-decoration: underline; text-underline-offset: 3px; }
.legal-lead { color: var(--zk-muted); border-bottom-color: var(--zk-line-strong); }
.legal-page .info-box, .ar-box { background: var(--zk-glass); border: 1px solid var(--zk-line); }
.highlight-box { background: linear-gradient(135deg, rgba(var(--zk-violet-rgb), .14), rgba(var(--zk-mint-rgb), .08)); border-left-color: var(--zk-cyan); }
.legal-page .highlight-box, .highlight-box p, .highlight-box strong { color: var(--zk-lead); }
.data-table th { background: rgba(var(--zk-wash-rgb), .06); color: var(--zk-text); border-color: var(--zk-line-strong); }
.data-table td { color: var(--zk-lead); border-color: var(--zk-line); }
.data-table tr:hover td { background: rgba(var(--zk-wash-rgb), .04); }
.ar-hero { background: transparent; color: var(--zk-lead); position: relative; overflow: hidden; }
.ar-hero .lead, .ar-meta { color: var(--zk-lead); opacity: 1; }
.ar-meta { color: var(--zk-muted); }
.ar-schritte li::before { background: var(--zk-grad); color: var(--zk-ink); }
.ar-tabelle th { background: rgba(var(--zk-wash-rgb), .06); color: var(--zk-muted); border-bottom-color: var(--zk-line-strong); }
.ar-tabelle td { color: var(--zk-lead); border-bottom-color: var(--zk-line); }
.ar-tabelle td:first-child { color: var(--zk-text); }
.ar-partner { background: var(--zk-glass); border: 1px solid rgba(var(--zk-cyan-rgb), .35); }
.ar-cta { background: linear-gradient(135deg, rgba(var(--zk-indigo-rgb), .55), rgba(16, 32, 74, .9) 65%); border: 1px solid var(--zk-line-strong); color: var(--zk-text); box-shadow: 0 20px 60px rgba(var(--zk-indigo-rgb), .28); }
.ar-cta h2, .ar-cta p { color: var(--zk-text); }
.consent-box, .optional-box { background: var(--zk-glass); border: 1px solid var(--zk-line-strong); }
.consent-box label, .optional-box summary { color: var(--zk-lead); }
.consent-box a { color: var(--zk-cyan); }
.section-divider { color: var(--zk-faint); font-family: var(--zk-mono); font-weight: 500; }

/* Buttons mit weissem Inline-Hintergrund (Bestand) sind Hauptknoepfe */
.btn[style*="background:#fff;" i], .btn[style*="background: #fff;" i] { background: var(--zk-grad) !important; color: var(--zk-ink) !important; border-color: transparent !important; }
.download-bar[style] { background: linear-gradient(135deg, rgba(var(--zk-indigo-rgb), .35), rgba(var(--zk-cyan-rgb), .12)) !important; border-block: 1px solid var(--zk-line-strong); }
.download-bar label { color: var(--zk-lead) !important; opacity: 1 !important; }
.user-nav { align-items: stretch; }
.hero-content, .results-hero .container, .upgrade-hero .container, .co-hero .container, .rg-head .rg-wrap, .ar-hero .container {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 22px rgba(var(--zk-bg-rgb), .95), 0 0 6px rgba(var(--zk-bg-rgb), .8);
}
/* Verlaufstext und Knoepfe brauchen keinen Schatten (er schimmerte durch die transparente Fuellung) */
.hero-content .btn, .hero-content .highlight, .hero-content .hero-stat-num, .rg-head .btn, .co-hero .btn, .upgrade-hero .btn { text-shadow: none; }
.zk-hero-copy .ix1 { flex-wrap: nowrap; align-items: flex-start; }
@media (max-width: 640px) {
  .logo img { height: 28px; }
  .logo-text { font-size: .86rem; letter-spacing: 0; line-height: 1.12; }
  .logo-text span { font-size: .56rem; letter-spacing: .04em; }
  .header-inner { gap: 6px; }
}
@media (max-width: 480px) {
  .logo-text span { display: none; }
  .logo-text { max-width: 9.5em; }
}

/* ============================== 18. Inline-Styles des Bestands ============================== */
/* Viele Seiten tragen helle Farben direkt im style-Attribut (Bestand). Statt jede
   Stelle einzeln umzubauen, werden sie hier auf die dunklen Werte gelenkt.
   Jede Regel benennt den alten Wert; der neue steht als Token. */

[style*="color:#718096" i], [style*="color: #718096" i] { color: var(--zk-muted) !important; }
[style*="color:#A0AEC0" i], [style*="color: #A0AEC0" i] { color: var(--zk-faint) !important; }
[style*="color:#4A5568" i], [style*="color: #4A5568" i] { color: var(--zk-lead) !important; }
[style*="color:#2D3748" i], [style*="color: #2D3748" i] { color: var(--zk-text) !important; }
[style*="color:#1A202C" i], [style*="color: #1A202C" i] { color: var(--zk-text) !important; }
[style*="color:#2C5282" i], [style*="color: #2C5282" i] { color: var(--zk-lead) !important; }
[style*="color:#CBD5E0" i], [style*="color: #CBD5E0" i] { color: var(--zk-faint) !important; }
[style*="color:#A3BFFA" i], [style*="color: #A3BFFA" i] { color: var(--zk-cyan) !important; }
[style*="color:#276749" i], [style*="color: #276749" i] { color: var(--zk-mint) !important; }
[style*="color:#22543D" i], [style*="color: #22543D" i] { color: var(--zk-mint) !important; }
[style*="color:#2F855A" i], [style*="color: #2F855A" i] { color: var(--zk-mint) !important; }
[style*="color:#38A169" i], [style*="color: #38A169" i] { color: var(--zk-mint) !important; }
[style*="color:#9AE6B4" i], [style*="color: #9AE6B4" i] { color: var(--zk-mint) !important; }
[style*="color:#822727" i], [style*="color: #822727" i] { color: var(--zk-rot) !important; }
[style*="color:#C53030" i], [style*="color: #C53030" i] { color: var(--zk-rot) !important; }
[style*="color:#7B341E" i], [style*="color: #7B341E" i] { color: var(--zk-amber) !important; }
[style*="color:#744210" i], [style*="color: #744210" i] { color: var(--zk-amber) !important; }
[style*="color:#B7791F" i], [style*="color: #B7791F" i] { color: var(--zk-amber) !important; }
[style*="color:#D69E2E" i], [style*="color: #D69E2E" i] { color: var(--zk-amber) !important; }
[style*="color:#FEEBC8" i], [style*="color: #FEEBC8" i] { color: var(--zk-amber) !important; }
[style*="color:#269CD9" i], [style*="color: #269CD9" i] { color: var(--zk-cyan) !important; }
[style*="color:#1C7CB0" i], [style*="color: #1C7CB0" i] { color: var(--zk-cyan) !important; }
[style*="color:#2EA3F2" i], [style*="color: #2EA3F2" i] { color: var(--zk-cyan) !important; }
[style*="background:#E8F4FB" i], [style*="background: #E8F4FB" i],
[style*="background:#E9D8FD" i], [style*="background: #E9D8FD" i],
[style*="background:#EBF4FF" i], [style*="background: #EBF4FF" i],
[style*="background:#EBF8FF" i], [style*="background: #EBF8FF" i],
[style*="background:#EDF2F7" i], [style*="background: #EDF2F7" i],
[style*="background:#F1F4FB" i], [style*="background: #F1F4FB" i],
[style*="background:#F4F8FC" i], [style*="background: #F4F8FC" i],
[style*="background:#F7F9FF" i], [style*="background: #F7F9FF" i],
[style*="background:#F7FAFC" i], [style*="background: #F7FAFC" i],
[style*="background:#F8F9FF" i], [style*="background: #F8F9FF" i],
[style*="background:#FAFAFF" i], [style*="background: #FAFAFF" i],
[style*="background:#FAFBFE" i], [style*="background: #FAFBFE" i] { background: rgba(var(--zk-cyan-rgb), .07) !important; }
[style*="background:#C6F6D5" i], [style*="background: #C6F6D5" i],
[style*="background:#F0FFF4" i], [style*="background: #F0FFF4" i],
[style*="background:#F6FFF9" i], [style*="background: #F6FFF9" i] { background: rgba(var(--zk-mint-rgb), .09) !important; }
[style*="background:#F6AD55" i], [style*="background: #F6AD55" i],
[style*="background:#FEEBC8" i], [style*="background: #FEEBC8" i],
[style*="background:#FFFAF0" i], [style*="background: #FFFAF0" i],
[style*="background:#FFFBEB" i], [style*="background: #FFFBEB" i] { background: rgba(var(--zk-amber-rgb), .09) !important; }
[style*="background:#FED7D7" i], [style*="background: #FED7D7" i],
[style*="background:#FFF5F5" i], [style*="background: #FFF5F5" i] { background: rgba(var(--zk-rot-rgb), .10) !important; }
[style*="background:#fff;" i], [style*="background: #fff;" i], [style$="background:#fff" i], [style*="background:#FFFFFF;" i], [style*="background: #FFFFFF;" i] { background: var(--zk-glass-strong) !important; }
[style*="background:#269CD9" i], [style*="background: #269CD9" i] { background: var(--zk-grad) !important; color: var(--zk-ink) !important; }
/* Schmale Rahmenfarben (Bestand) */
[style*="#E2E8F0" i], [style*="#EDF2F7" i], [style*="#DCE6F0" i], [style*="#BEE3F8" i], [style*="#C3DAFE" i], [style*="#CFE4F4" i], [style*="#E6ECFF" i] { border-color: var(--zk-line-strong) !important; }
/* Verlaufs-Hintergruende aus dem Bestand (Dashboard-Karte «naechster Schritt», Stepper) */
[style*="linear-gradient(135deg,#F7FBFF" i], [style*="linear-gradient(135deg, #F7FBFF" i] { background: linear-gradient(135deg, rgba(var(--zk-violet-rgb), .14), rgba(var(--zk-cyan-rgb), .08)) !important; }
[style*="border:2px solid #BEE3F8" i] { border: 1px solid var(--zk-line-strong) !important; }
/* Helle bzw. blaue Verlaufsflaechen (Bestand, results.php u. a.) */
[style*="linear-gradient(135deg,#F0FFF4" i], [style*="linear-gradient(135deg, #F0FFF4" i] { background: var(--zk-glass) !important; border-color: var(--zk-line-strong) !important; }
[style*="linear-gradient(135deg,#1C7CB0,#1C7CB0)" i], [style*="linear-gradient(135deg,#269CD9,#1C7CB0)" i], [style*="linear-gradient(135deg, #269CD9, #1C7CB0)" i] {
  background: linear-gradient(135deg, rgba(var(--zk-indigo-rgb), .5), rgba(16, 32, 74, .92) 65%) !important;
  border: 1px solid var(--zk-line-strong) !important;
  color: var(--zk-text) !important;
}
[style*="linear-gradient(135deg,#1C7CB0,#1C7CB0)" i] h2, [style*="linear-gradient(135deg,#1C7CB0,#1C7CB0)" i] h3,
[style*="linear-gradient(135deg,#269CD9,#1C7CB0)" i] h2, [style*="linear-gradient(135deg,#269CD9,#1C7CB0)" i] h3 { color: var(--zk-text) !important; }
/* Elemente mit weissem Text auf altem Blau-Hintergrund im Inline-Style (Stepper-Kreise etc.) */
[style*="background:#269CD9;color:#fff" i], [style*="background: #269CD9; color: #fff" i] { color: var(--zk-ink) !important; }

/* ============================== 19. 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-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* 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; }
/* Startknopf anvisiert: das Triebwerk zuendet staerker. */
.zk-motion .zk-hero-rakete:has(.hero-cta .btn: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). */
@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-fehler-karte { animation: zk-arrive .7s cubic-bezier(.2, .7, .2, 1) both; }
}

/* Bestehende Bewegungen der Seite respektieren Pause und «Bewegung reduzieren» */
html.zk-pausiert *, html.zk-pausiert *::before, html.zk-pausiert *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .feature-card:hover, .btn:hover, .result-card:hover, .partner-card:hover, .coaching-card:hover, .path-card:hover { transform: none !important; }
}

/* ============================== 20. Kontrast, Windows-Hochkontrast, Ansicht ============================== */
@media (prefers-reduced-transparency: reduce) {
  .card, .feature-card, .plan-card, .quiz-card, .result-card, .path-result, .path-card, .upgrade-card, .upgrade-proof,
  .upgrade-next, .user-sidebar, .user-card, .user-panel, .stat-card, .auth-card, .faq-item, .zk-telemetry, .zk-fehler-karte,
  body > header, .zk-pause, .lang-menu {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--zk-surface);
  }
}
@media (forced-colors: active) {
  .zk-netz, .zk-rocket, .zk-orbit, body::before { display: none; }
  .btn-primary, .btn-hero, .btn-secondary { border: 2px solid ButtonText; forced-color-adjust: auto; }
  .zk-theme-btn, .zk-theme-menu, .zk-theme-menu button { border: 1px solid ButtonText; forced-color-adjust: auto; }
  .section-header h2, .hero h1 .highlight, .hero-stat-num, .zk-fehler-code { -webkit-text-fill-color: currentColor; background: none; color: CanvasText; }
}

/* ============================== 21. Schmale Ansichten ============================== */
@media (max-width: 640px) {
  body > header .container { padding-left: 14px; padding-right: 14px; }
  /* Kopfzeilen ohne Hamburger-Menue (Fachartikel, Rechtliches, Kasse ...): Links und Knoepfe duerfen umbrechen */
  body > header .header-inner:not(:has(.nav-toggle)) { height: auto; min-height: 60px; flex-wrap: wrap; row-gap: 2px; padding-block: 6px; }
  body > header .header-inner:not(:has(.nav-toggle)) > nav { flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; min-width: 0; row-gap: 2px; }
  body > header .header-inner:not(:has(.nav-toggle)) > nav > a:not(.btn) { padding: 8px 8px; }
  /* breite Tabellen scrollen in sich, nie die ganze Seite */
  .ar-tabelle, .data-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
img, svg, video, canvas { max-width: 100%; }
table { max-width: 100%; }
@media (max-width: 480px) {
  .btn-block, .btn-lg, .hero-cta .btn { white-space: normal; max-width: 100%; }
}