/* ICT-Fachassessment · Zukunft — Design-Schicht für die ganze Hauptdomain
   ------------------------------------------------------------------------
   Lädt NACH den alten Stylesheets (style.lokal.css, alpasana-design.lokal.css, ict.css)
   und den <style>-Blöcken der Seiten (includes/zukunft.php: zk_head()) und überschreibt
   nur die Darstellung: Tokens, Komponenten, Kopf mit Sternenhimmel, Rakete.
   Alles steht unter body.zk - Partnerdomains (Tenants, z. B. SAH) laden diese Datei nie
   und behalten ihr Branding.

   Grenzen, die bewusst eingehalten werden:
   - Nur @media screen: Druck/PDF (Ergebnisse, Berichte) bleibt exakt das bisherige weisse Dokument.
   - Bewegung nur mit html.zk-js (setzt zukunft.js). Ohne Skript, bei «Bewegung reduzieren»
     und nach «Pause» steht alles still; Kundenbereich (body.zk-app) bewegt sich nie.
   - Keine externen Quellen. Schriften lokal (SIL OFL, ../fonts/OFL-*.txt). Poppins und Rubik
     aus dem alten CSS sind hier lokale Aliase auf Rajdhani bzw. Inter.
   - Kontraste nach WCAG AA (Werte am Ende der Tokens). */

/* ============================== 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: 400 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: 400 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;
}
/* Aliase: das alte CSS nennt Poppins (Titel) und Rubik (Text). Beide gibt es hier lokal
   nicht; sie zeigen auf Rajdhani und Inter. Damit stimmt jede alte Regel ohne Umschreiben. */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 100 900; 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: 'Poppins'; font-style: normal; font-weight: 100 900; 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: 'Rubik'; 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: 'Rubik'; 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;
}

@media screen {

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

body.zk {
  color-scheme: dark;

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

  /* Flächen */
  --zk-bg: #070a13;
  --zk-bg-deep: #04070e;
  --zk-surface: #0d1322;
  --zk-surface-2: #121b2d;
  --zk-glass: rgba(13, 19, 34, .72);
  --zk-glass-strong: rgba(12, 18, 32, .92);
  --zk-tint: rgba(105, 225, 245, .05);
  --zk-line: rgba(255, 255, 255, .10);
  --zk-line-strong: rgba(255, 255, 255, .20);
  --zk-line-violet: rgba(164, 146, 255, .30);

  /* Text: auf #0d1322 gemessen - text 16.3:1, lead 11.4:1, muted 8.6:1, faint 5.3:1 */
  --zk-text: #eef3ff;
  --zk-lead: #c3cde0;
  --zk-muted: #a6b2ca;
  --zk-faint: #8492ad;

  /* Formulare und Fokus: Feldrand >= 3:1 gegen die Karte (WCAG 1.4.11) */
  --zk-field: rgba(4, 7, 14, .6);
  --zk-field-border: #6b7a99;
  --zk-field-hover: #8391ad;
  --zk-focus: #69e1f5;

  /* Meldungen */
  --zk-ok: #9af5d4;
  --zk-ok-bg: rgba(154, 245, 212, .10);
  --zk-warn: #ffd58a;
  --zk-warn-bg: rgba(255, 213, 138, .10);
  --zk-err: #ff9d9d;
  --zk-err-bg: rgba(255, 107, 107, .12);

  --zk-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --zk-title: 'Rajdhani', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --zk-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* alp-Tokens (alpasana-design.css) mit den neuen Werten */
  --alp-blue: #69e1f5;
  --alp-blue-bright: #69e1f5;
  --alp-blue-dark: #9af5d4;
  --alp-dark: #04070e;
  --alp-dark-2: #0d1322;
  --alp-heading: #eef3ff;
  --alp-text: #c3cde0;
  --alp-muted: #a6b2ca;
  --alp-bg: #070a13;
  --alp-bg-soft: rgba(105, 225, 245, .05);
  --alp-border: rgba(255, 255, 255, .12);
  --alp-font-head: 'Rajdhani', 'Inter', system-ui, sans-serif;
  --alp-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --alp-radius: 12px;
  --alp-radius-lg: 20px;
  --alp-shadow: 0 18px 50px rgba(0, 0, 0, .42);
  --alp-shadow-sm: 0 8px 26px rgba(0, 0, 0, .32);

  /* style.css-Tokens (Kundenbereich, Formulare) */
  --primary: #69e1f5;
  --primary-dark: #a492ff;
  --primary-light: rgba(105, 225, 245, .12);
  --secondary: #a492ff;
  --accent: #9af5d4;
  --bg: #070a13;
  --text: #eef3ff;
  --text-muted: #a6b2ca;
  --border: rgba(255, 255, 255, .12);
  --shadow-sm: 0 8px 26px rgba(0, 0, 0, .32);
  --shadow: 0 18px 50px rgba(0, 0, 0, .42);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .5);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
}

/* ============================== 3. Basis ============================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #070a13; }
:root:has(body.zk) { color-scheme: dark; }
body.zk {
  position: relative;
  isolation: isolate;
  background: var(--zk-bg);
  color: var(--zk-lead);
  font-family: var(--zk-font);
  line-height: 1.65;
  overflow-x: clip;
}
body.zk ::selection { background: rgba(105, 225, 245, .32); color: #fff; }
body.zk img { max-width: 100%; }

/* Überschriften: Rajdhani, helle Schrift */
body.zk :is(h1, h2, h3, h4) { font-family: var(--zk-title); color: var(--zk-text); letter-spacing: .005em; }

/* Links: Cyan; in Fliesstext unterstrichen (nicht nur an der Farbe erkennbar) */
body.zk a { color: var(--zk-cyan); }
body.zk a:hover { color: var(--zk-mint); opacity: 1; }
body.zk :is(p, li, dd, td, .ict-trust-strip, .ict-story-p) a:not([class]) {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
body.zk :is(p, li, dd, td) a:not([class]):hover { text-decoration-thickness: 2px; }

/* Fokus: gut sichtbarer Cyan-Ring, auch auf Glas und Verlauf */
body.zk :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--zk-focus);
  outline-offset: 3px;
  border-radius: 6px;
}
body.zk :is(input, select, textarea):focus-visible { outline-offset: 1px; }

/* ============================== 4. Sternenhimmel im Kopf ============================== */

.zk-sky {
  position: absolute; top: 0; left: 0; right: 0;
  height: 620px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(101, 80, 219, .36), transparent 62%),
    radial-gradient(800px 520px at 4% 70%, rgba(71, 206, 235, .12), transparent 60%),
    var(--zk-bg);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
}
/* Ohne Skript: ein ruhiger Sternenhimmel aus CSS (Rückfall). */
.zk-sky::before {
  content: ''; position: absolute; inset: 0; opacity: .8;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(214, 226, 255, .8), transparent),
    radial-gradient(1px 1px at 28% 61%, rgba(105, 225, 245, .7), transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1px 1px at 61% 45%, rgba(214, 226, 255, .7), transparent),
    radial-gradient(1.5px 1.5px at 83% 30%, rgba(164, 146, 255, .8), transparent),
    radial-gradient(1px 1px at 92% 72%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 7% 80%, rgba(105, 225, 245, .6), transparent),
    radial-gradient(1px 1px at 70% 8%, rgba(255, 255, 255, .6), transparent);
}
html.zk-js .zk-sky::before { display: none; }   /* das Canvas übernimmt */
.zk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Hinter der Textspalte (links) blasser, damit Titel und Text klar lesbar bleiben. */
@media (min-width: 961px) {
  .zk-sky--kopf .zk-canvas { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.46) 40%, #000 76%); mask-image: linear-gradient(90deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.46) 40%, #000 76%); }
}
@media (max-width: 960px) {
  .zk-sky--kopf .zk-canvas { opacity: .55; }
}
.zk-nebula { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.zk-nebula-a { width: 560px; height: 560px; left: -160px; top: -220px; background: radial-gradient(circle, rgba(101, 80, 219, .55), transparent 68%); }
.zk-nebula-b { width: 520px; height: 520px; right: -160px; top: 30px; background: radial-gradient(circle, rgba(71, 206, 235, .26), transparent 68%); }
/* Ruhige Seiten (Kundenbereich, Formulare): schwächer, es bewegt sich nichts. */
.zk-sky--ruhig { height: 300px; opacity: .85; }

/* Pause-Knopf (nur sichtbar, wenn sich etwas bewegt) */
.zk-motion {
  position: fixed; right: 14px; bottom: 14px; z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px;
  font: inherit; font-size: .82rem; color: var(--zk-text);
  background: rgba(12, 17, 36, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--zk-field-border); border-radius: 999px;
  cursor: pointer;
}
.zk-motion:hover { border-color: var(--zk-cyan); color: var(--zk-cyan); }
.zk-motion[aria-pressed="true"] { border-color: var(--zk-mint); color: var(--zk-mint); }
.zk-motion[hidden] { display: none; }
@media (max-width: 720px) {
  .zk-motion { padding: 0; width: 44px; height: 44px; min-height: 44px; justify-content: center; }
  .zk-motion span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

} /* /@media screen (Teil 1) */

@media screen {

/* ============================== 5. Kopfzeile (alp-Seiten) ============================== */

body.zk .alp-topbar {
  background: rgba(4, 7, 14, .55);
  border-bottom: 1px solid var(--zk-line);
  color: var(--zk-muted);
}
body.zk .alp-topbar a { color: var(--zk-lead); }
body.zk .alp-topbar a:hover { color: var(--zk-cyan); }
body.zk .alp-topbar .alp-ico { color: var(--zk-cyan); }

body.zk .alp-header {
  background: rgba(7, 10, 19, .66);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--zk-line);
  position: sticky; top: 0; z-index: 60;
}
/* feine Verlaufslinie unter der Kopfzeile */
body.zk .alp-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--zk-violet) 22%, var(--zk-cyan) 55%, var(--zk-mint) 78%, transparent);
  opacity: .55;
}
body.zk .alp-header .alp-container { min-height: 76px; }

/* Logo: weisse Kachel, damit das (dunkle) Logo auf dem Himmel lesbar bleibt */
body.zk .alp-logo img { height: 42px; padding: 4px; background: #fff; border-radius: 11px; box-shadow: 0 0 0 1px rgba(105, 225, 245, .35), 0 6px 22px rgba(105, 225, 245, .16); }
body.zk .alp .ict-logo-text, body.zk .ict-logo-text { color: var(--zk-text); font-family: var(--zk-title); }
body.zk .ict-logo-text > span { color: var(--zk-muted); font-family: var(--zk-font); font-weight: 500; letter-spacing: .1em; }

body.zk .alp-nav a { font-family: var(--zk-title); font-weight: 700; color: var(--zk-lead); letter-spacing: .02em; }
body.zk .alp-nav a:hover, body.zk .alp-nav a.active { color: var(--zk-cyan); }

/* Sprachwähler */
body.zk .lang-current {
  background: rgba(255, 255, 255, .05); border: 1px solid var(--zk-field-border); color: var(--zk-text); border-radius: 10px;
  font-family: var(--zk-font);
}
body.zk .lang-current:hover { border-color: var(--zk-cyan); color: var(--zk-cyan); }
body.zk .lang-menu {
  background: var(--zk-glass-strong); border: 1px solid var(--zk-line-strong); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  max-height: min(70vh, 460px); overflow-y: auto;
}
body.zk .lang-menu a { color: var(--zk-lead); border-radius: 8px; }
body.zk .lang-menu a:hover { background: rgba(105, 225, 245, .10); color: var(--zk-cyan); }
body.zk .lang-menu a.lang-active { color: var(--zk-mint); }

body.zk .ict-burger { color: var(--zk-text); border: 1px solid var(--zk-field-border); border-radius: 10px; min-width: 44px; min-height: 44px; }
body.zk .ict-burger:hover { border-color: var(--zk-cyan); color: var(--zk-cyan); }

@media (max-width: 900px) {
  body.zk .ict-header-right {
    background: var(--zk-glass-strong); border-top: 1px solid var(--zk-line);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  body.zk .ict-header-right .alp-nav a { border-bottom: 1px solid var(--zk-line); }
  body.zk .alp-header > .alp-container > .alp-nav a { color: var(--zk-lead); }
}

/* ============================== 6. Buttons ============================== */

body.zk .alp-btn {
  font-family: var(--zk-title); font-weight: 700; letter-spacing: .05em;
  border-radius: 12px; border: 1px solid transparent;
  min-height: 46px;
}
body.zk .alp .alp-btn-primary, body.zk a.alp-btn-primary, body.zk button.alp-btn-primary {
  color: var(--zk-btn-ink); background: var(--zk-grad); border-color: transparent;
  box-shadow: 0 8px 26px rgba(105, 225, 245, .22);
}
body.zk .alp .alp-btn-primary:hover, body.zk a.alp-btn-primary:hover, body.zk button.alp-btn-primary:hover {
  color: var(--zk-btn-ink); background: var(--zk-grad); filter: brightness(1.07);
  box-shadow: 0 12px 34px rgba(105, 225, 245, .34); transform: translateY(-2px);
}
body.zk .alp .alp-btn-outline, body.zk a.alp-btn-outline, body.zk button.alp-btn-outline {
  color: var(--zk-cyan); background: rgba(105, 225, 245, .04); border-color: rgba(105, 225, 245, .55);
}
body.zk .alp .alp-btn-outline:hover, body.zk a.alp-btn-outline:hover, body.zk button.alp-btn-outline:hover {
  color: var(--zk-btn-ink); background: var(--zk-cyan); border-color: var(--zk-cyan);
}
body.zk .alp-hero .alp-btn-outline { color: var(--zk-text); border-color: rgba(238, 243, 255, .5); background: rgba(255, 255, 255, .04); }
body.zk .alp-hero .alp-btn-outline:hover { color: var(--zk-btn-ink); background: var(--zk-text); border-color: var(--zk-text); }
body.zk .alp .alp-btn-light { background: var(--zk-text); color: var(--zk-btn-ink); }
body.zk .alp .alp-btn-light:hover { background: var(--zk-cyan); color: var(--zk-btn-ink); }
body.zk .alp-btn:focus-visible { outline-color: #fff; outline-offset: 4px; border-radius: 12px; }
body.zk .alp-btn[disabled], body.zk .alp-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: grayscale(.4); transform: none; }

/* ============================== 7. Hero ============================== */

body.zk .alp-hero {
  background: transparent; color: var(--zk-lead); overflow: visible;
  padding: 88px 0 72px;
}
body.zk .alp-hero::before { display: none; }
body.zk .alp-hero-label {
  font-family: var(--zk-mono); font-weight: 500; font-size: .8rem; letter-spacing: .16em;
  color: var(--zk-cyan); margin-bottom: 18px;
}
body.zk .alp-hero-label::before { content: '// '; color: var(--zk-violet); }
body.zk .alp-hero h1 {
  color: var(--zk-text); font-size: clamp(2.2rem, 4.6vw, 3.7rem); line-height: 1.05; letter-spacing: .005em;
}
body.zk .alp-hero p { color: var(--zk-lead); opacity: 1; }
.zk-grad {
  background: linear-gradient(105deg, #c3b8ff, var(--zk-cyan) 62%, var(--zk-mint, #9af5d4));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
body.zk .ict-hero-deco, body.zk .ict-hero-net { display: none; }
body.zk .ict-hero-note { color: var(--zk-muted); }
body.zk .ict-hero-stats { margin-top: 44px; gap: 18px 44px; }
body.zk .ict-hero-stat-num {
  font-family: var(--zk-title); font-size: 2.6rem; color: var(--zk-cyan);
  background: var(--zk-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.zk .ict-hero-stat-lbl { color: var(--zk-muted); }
body.zk .ict-hero-banner { border-color: var(--zk-line-strong); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }

/* Zwei Spalten: Text links, Raketen-Szene rechts */
body.zk .zk-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: 48px; align-items: start; }
body.zk .zk-hero-grid > * { grid-column: 1; }
body.zk .zk-hero-grid > .zk-visual { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
body.zk .zk-hero-grid > .ict-hero-stats { grid-column: 1 / -1; }
body.zk .zk-hero-grid > .ict-hero-banner { grid-column: 1 / -1; }
@media (max-width: 960px) {
  body.zk .zk-hero-grid { display: block; }
  body.zk .zk-visual { display: none; }
}

/* Szene (nur gross) - nach dem Power-Panel-Login */
.zk-visual { position: relative; min-width: 0; }
.zk-flight { margin: 0 0 12px; font-family: var(--zk-mono, monospace); font-size: .74rem; letter-spacing: .14em; color: #a6b2ca; text-transform: uppercase; }
.zk-flight span:last-child { float: right; }
.zk-crosshair { color: #69e1f5; }
.zk-scene { position: relative; height: 470px; max-width: 520px; margin: 0 auto; }
.zk-orbit { position: absolute; left: 50%; top: 40px; border-radius: 50%; }
.zk-orbit-one { width: 400px; height: 400px; margin-left: -200px; }
.zk-orbit-two { width: 460px; height: 460px; margin-left: -230px; top: 10px; }
.zk-orbit-track { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(105, 225, 245, .28); }
.zk-orbit-two .zk-orbit-track { border-color: rgba(164, 146, 255, .22); border-style: dashed; }
.zk-orbit-dot { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #69e1f5; box-shadow: 0 0 14px 2px rgba(105, 225, 245, .8); }
.zk-coord { position: absolute; font-family: var(--zk-mono, monospace); font-size: .72rem; letter-spacing: .12em; color: #a6b2ca; white-space: nowrap; }
.zk-coord-one { left: 0; top: 96px; }
.zk-coord-two { right: 0; top: 296px; }
.zk-rocket { position: absolute; left: 50%; top: -10px; width: 470px; height: 462px; margin-left: -235px; overflow: visible; filter: drop-shadow(0 0 30px rgba(105, 225, 245, .22)); }
.zk-readout { position: absolute; left: 0; bottom: 0; margin: 0; font-family: var(--zk-mono, monospace); font-size: .8rem; letter-spacing: .14em; color: #9af5d4; display: inline-flex; align-items: center; gap: 8px; }
.zk-dot { width: 8px; height: 8px; border-radius: 50%; background: #9af5d4; box-shadow: 0 0 10px #9af5d4; }

/* ============================== 8. Sektionen ============================== */

body.zk .alp-section--soft {
  background: linear-gradient(180deg, rgba(101, 80, 219, .07), rgba(105, 225, 245, .03));
  border-block: 1px solid var(--zk-line);
}
body.zk .alp-section--dark {
  background: linear-gradient(180deg, rgba(4, 7, 14, .82), rgba(9, 13, 28, .9));
  color: var(--zk-lead);
  border-block: 1px solid var(--zk-line);
}
body.zk .alp-section--dark h2, body.zk .alp-section--dark h3 { color: var(--zk-text); }
body.zk .alp-section-label {
  font-family: var(--zk-mono); font-weight: 500; font-size: .78rem; letter-spacing: .16em; color: var(--zk-cyan);
}
body.zk .alp-section-label::before { content: '// '; color: var(--zk-violet); }
body.zk .alp-section-title { color: var(--zk-text); letter-spacing: .01em; }
body.zk .ict-lead, body.zk .ict-story-p { color: var(--zk-lead); }
body.zk .alp-section--dark .ict-lead { color: var(--zk-lead) !important; }
body.zk .ict-center[style*="color"] { color: inherit; }

/* Karten: Glas mit feiner Kante */
body.zk .alp-card {
  background: var(--zk-glass); color: var(--zk-lead);
  border: 1px solid var(--zk-line); border-radius: 18px;
  box-shadow: var(--alp-shadow-sm);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.zk .alp-card:hover { border-color: rgba(105, 225, 245, .38); box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(105, 225, 245, .08); transform: translateY(-3px); }
body.zk .alp-card h3 { color: var(--zk-text); }
body.zk .alp-card p { color: var(--zk-lead); }
body.zk .alp-section--dark .alp-card, body.zk .alp-section--dark .alp-card h3, body.zk .alp-section--dark .alp-card p { color: inherit; }
body.zk .alp-section--dark .alp-card h3 { color: var(--zk-text); }
body.zk .alp-section--dark .alp-card p { color: var(--zk-lead); }
body.zk .ict-comp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; font-size: 1.7rem; margin-bottom: 14px;
  border-radius: 14px; background: linear-gradient(135deg, rgba(164, 146, 255, .18), rgba(105, 225, 245, .12));
  border: 1px solid var(--zk-line-violet);
}
body.zk .ict-step-num {
  background: var(--zk-grad); color: var(--zk-btn-ink); font-family: var(--zk-title);
  box-shadow: 0 6px 22px rgba(105, 225, 245, .25);
}

/* Belege / Zahlen */
body.zk .ict-proof-item { background: var(--zk-tint); border: 1px solid var(--zk-line); }
body.zk .alp-section--soft .ict-proof-item { background: var(--zk-glass); }
body.zk .ict-proof-num { color: var(--zk-cyan); }
body.zk .ict-proof-lbl { color: var(--zk-muted); }
body.zk .ict-tl-item { background: var(--zk-glass); border: 1px solid var(--zk-line); border-top: 3px solid var(--zk-violet); }
body.zk .ict-tl-year { color: var(--zk-cyan); }
body.zk .ict-tl-text { color: var(--zk-lead); }
body.zk .ict-refs, body.zk .ict-trust, body.zk .ict-trust-strip, body.zk .ict-ki-note { color: var(--zk-muted); }
body.zk .ict-price-reassure { color: var(--zk-text); }

/* Stufen und Rollen-Chips */
body.zk .ict-stufe-badge { color: var(--zk-btn-ink); }
body.zk .ict-stufe-foundation { background: var(--zk-mint); }
body.zk .ict-stufe-professional { background: var(--zk-cyan); }
body.zk .ict-stufe-expert { background: var(--zk-violet); }
body.zk .ict-stufe-count { color: var(--zk-muted); }
body.zk .ict-stufe-desc { color: var(--zk-lead); }
body.zk .ict-role-chip { background: rgba(255, 255, 255, .05); border: 1px solid var(--zk-line-strong); color: var(--zk-text); }

/* Preise */
body.zk .ict-plan--pro, body.zk .ict-offer-card { border: 1px solid var(--zk-cyan); box-shadow: 0 0 0 1px rgba(105, 225, 245, .25), 0 18px 60px rgba(101, 80, 219, .28); }
body.zk .ict-plan-badge { background: var(--zk-grad); color: var(--zk-btn-ink); }
body.zk .ict-plan-name, body.zk .ict-offer-name, body.zk .ict-plan-price, body.zk .ict-plan-lead { color: var(--zk-text); }
body.zk .ict-plan-price .cur, body.zk .ict-plan-price .per, body.zk .ict-plan-note { color: var(--zk-muted); }
body.zk .ict-plan-list li { border-bottom-color: var(--zk-line); color: var(--zk-lead); }

/* Fussbereich */
body.zk .alp-footer { background: rgba(4, 7, 14, .9); border-top: 1px solid var(--zk-line); color: var(--zk-muted); position: relative; }
body.zk .alp-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; }
body.zk .alp-footer a { color: var(--zk-lead); }
body.zk .alp-footer a:hover { color: var(--zk-cyan); }
body.zk .alp-footer h3, body.zk .alp-footer h4 { color: var(--zk-text); }
body.zk .alp-footer p, body.zk .alp-footer-bottom { color: var(--zk-muted) !important; }
body.zk .alp-footer-bottom { border-top-color: var(--zk-line); }
body.zk .alp-footer-bottom a { color: var(--zk-lead) !important; }

} /* /@media screen (Teil 2) */

@media screen {

/* ============================== 9. Inhaltsseiten (Rollen, Landingpages, Partner) ============================== */

body.zk :is(.rl-crumb, .lp-crumb) { color: var(--zk-muted); }
body.zk :is(.rl-crumb, .lp-crumb) a { color: var(--zk-lead); }
body.zk :is(.rl-fam, .lp-kicker, .tw-article .tw-kicker) { color: var(--zk-cyan); font-family: var(--zk-mono); letter-spacing: .14em; font-weight: 500; }
body.zk :is(.rl-lead, .lp-lead, .ro-lead, .tw-article .tw-lead) { color: var(--zk-lead); }
body.zk :is(.rl-wrap, .lp-wrap, .ro-wrap, .tw-article) h1 {
  background: linear-gradient(105deg, #ffffff, #c3b8ff 55%, var(--zk-cyan));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--zk-text);
}
body.zk :is(.rl-wrap, .lp-wrap, .ro-wrap, .tw-article) h2 { color: var(--zk-text); }
body.zk :is(.rl-wrap, .lp-wrap, .tw-article) :is(p, li) { color: var(--zk-lead); }
body.zk :is(.rl-note, .lp-note, .rl-bar .rl-val, .lp-bar .lp-val, .tw-meta) { color: var(--zk-muted); }
body.zk .tw-article a { color: var(--zk-cyan); }

/* Kurzantwort */
body.zk :is(.rl-answer, .lp-answer) {
  background: linear-gradient(135deg, rgba(101, 80, 219, .16), rgba(105, 225, 245, .07));
  border: 1px solid var(--zk-line-violet); border-left: 4px solid var(--zk-cyan); color: var(--zk-lead);
}
body.zk :is(.rl-answer, .lp-answer) strong { color: var(--zk-text); }

/* Aufruf-Kasten */
body.zk :is(.rl-cta, .lp-cta, .ro-cta, .tw-cta) {
  background: linear-gradient(135deg, rgba(101, 80, 219, .28), rgba(9, 16, 36, .92) 60%);
  border: 1px solid var(--zk-line-violet); color: var(--zk-text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .4);
}
body.zk :is(.rl-cta, .lp-cta, .ro-cta, .tw-cta) p { color: var(--zk-lead); }
body.zk .tw-cta a:not(.alp-btn) { color: var(--zk-cyan); }

/* Balken */
body.zk :is(.rl-bar .rl-track, .lp-bar .lp-track) { background: rgba(255, 255, 255, .10); }
body.zk :is(.rl-bar .rl-fill, .lp-bar .lp-fill) { background: linear-gradient(90deg, var(--zk-violet), var(--zk-cyan)); }
body.zk :is(.rl-bar.rl-critical .rl-fill, .lp-bar.lp-critical .lp-fill) { background: linear-gradient(90deg, var(--zk-cyan), var(--zk-mint)); }
body.zk :is(.rl-bar, .lp-bar) > :first-child { color: var(--zk-lead); }

/* Ja / Nein */
body.zk :is(.rl-yes, .lp-yes) li::before { color: var(--zk-mint); }
body.zk :is(.rl-no, .lp-no) li::before { color: #ff9d9d; }

/* Aufklapper */
body.zk :is(.rl-faq, .lp-faq) details { border-top-color: var(--zk-line); }
body.zk :is(.rl-faq, .lp-faq) summary { color: var(--zk-text); }
body.zk :is(.rl-faq, .lp-faq) p { color: var(--zk-lead); }
body.zk .rl-abgr { border-top-color: var(--zk-line); }
body.zk .rl-abgr strong { color: var(--zk-text); }

/* Verweise (Pillen, Karten, Raster) */
body.zk :is(.rl-related a, .lp-pills a) {
  background: rgba(255, 255, 255, .05); border: 1px solid var(--zk-line-strong); color: var(--zk-text);
}
body.zk :is(.rl-related a, .lp-pills a):hover { border-color: var(--zk-cyan); color: var(--zk-cyan); }
body.zk .lp-card { background: var(--zk-glass); border: 1px solid var(--zk-line); color: var(--zk-lead); }
body.zk .lp-card:hover { border-color: rgba(105, 225, 245, .45); }
body.zk .lp-card strong { color: var(--zk-text); }
body.zk .lp-card span { color: var(--zk-lead); }
body.zk .ro-fam { color: var(--zk-text); }
body.zk .ro-grid a { background: var(--zk-glass); border: 1px solid var(--zk-line); color: var(--zk-text); }
body.zk .ro-grid a:hover { border-color: rgba(105, 225, 245, .5); color: var(--zk-cyan); }
body.zk .ro-grid .ro-soon { background: transparent; border: 1px dashed var(--zk-line-strong); color: var(--zk-muted); }

/* Faktentabelle und Tags */
body.zk .lp-facts th, body.zk .lp-facts td { border-bottom-color: var(--zk-line); }
body.zk .lp-facts th { color: var(--zk-muted); }
body.zk .lp-facts td { color: var(--zk-lead); }
body.zk .lp-tag { background: rgba(164, 146, 255, .16); color: #d3cbff; }
body.zk .lp-tag.lp-tag-gap { background: var(--zk-err-bg); color: var(--zk-err); }
body.zk .lp-tag.lp-tag-ok { background: var(--zk-ok-bg); color: var(--zk-ok); }
body.zk .tw-card { background: var(--zk-glass); border: 1px solid var(--zk-line); }

/* Rechtstexte */
body.zk .legal-page h1 { color: var(--zk-text); }
body.zk .legal-page h2 { color: var(--zk-text); border-top-color: var(--zk-line); }
body.zk .legal-page h3 { color: var(--zk-lead); }
body.zk .legal-page :is(p, li) { color: var(--zk-lead); }
body.zk .legal-page a { color: var(--zk-cyan); text-decoration: underline; text-underline-offset: 3px; }
body.zk .legal-page .info-box { background: var(--zk-glass); border: 1px solid var(--zk-line); }
body.zk .legal-lead { color: var(--zk-muted); border-bottom-color: var(--zk-line); }
body.zk .data-table th { background: rgba(255, 255, 255, .06); color: var(--zk-text); border-color: var(--zk-line-strong); }
body.zk .data-table td { color: var(--zk-lead); border-color: var(--zk-line); }
body.zk .highlight-box { background: linear-gradient(135deg, rgba(101, 80, 219, .16), rgba(154, 245, 212, .07)); border-left-color: var(--zk-cyan); color: var(--zk-lead); }

/* Coaching-Seiten */
body.zk .co-hero { background: transparent; }
body.zk .co-hero h1 { color: var(--zk-text); }
body.zk .co-hero p.lead { opacity: 1; color: var(--zk-lead); }
body.zk .co-trust span { background: rgba(255, 255, 255, .06); border-color: var(--zk-line-strong); color: var(--zk-lead); }
body.zk :is(.co-card, .book-card) { background: var(--zk-glass); border-color: var(--zk-line); color: var(--zk-lead); box-shadow: var(--alp-shadow-sm); }
body.zk .co-card h3 { color: var(--zk-text); }
body.zk :is(.co-card p, .book-desc) { color: var(--zk-lead); }
body.zk .co-pain { background: var(--zk-tint); border-color: var(--zk-line); color: var(--zk-text); }
body.zk .co-pain .q { color: var(--zk-cyan); }
body.zk .book-cover { background: rgba(255, 255, 255, .06); }
body.zk .book-badge { background: rgba(255, 213, 138, .16); color: var(--zk-warn); }
body.zk .book-quote { color: var(--zk-text); }
body.zk .lead-wrap { background: linear-gradient(135deg, rgba(101, 80, 219, .5), rgba(9, 16, 36, .92)); border: 1px solid var(--zk-line-violet); }
body.zk .lead-form { background: var(--zk-glass-strong); border: 1px solid var(--zk-line); }
body.zk .lead-form label { color: var(--zk-lead); }
body.zk .co-other a { background: rgba(255, 255, 255, .05); border-color: var(--zk-line-strong); color: var(--zk-lead); }
body.zk .co-other a:hover { border-color: var(--zk-cyan); color: var(--zk-cyan); }

} /* /@media screen (Teil 3) */

@media screen {

/* ============================== 10. Bausteine aus style.css (Formulare, Kundenbereich, Kasse) ============================== */

/* Kopfzeile (Element <header>, nicht .alp-header) */
body.zk > header, body.zk header:not(.alp-header):not(.zk-header) {
  background: rgba(7, 10, 19, .66);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--zk-line);
  box-shadow: none;
}
body.zk .header-inner { min-height: 68px; }
body.zk .logo img { height: 42px; padding: 4px; background: #fff; border-radius: 11px; box-shadow: 0 0 0 1px rgba(105, 225, 245, .35), 0 6px 22px rgba(105, 225, 245, .16); }
body.zk .logo-text { font-family: var(--zk-title); font-weight: 700; font-size: 1.3rem; color: var(--zk-text); letter-spacing: .01em; }
body.zk .logo-text span { color: var(--zk-muted); font-family: var(--zk-font); font-weight: 500; letter-spacing: .08em; }
body.zk nav a { color: var(--zk-lead); font-weight: 600; }
body.zk nav a:hover, body.zk nav a.active { background: rgba(105, 225, 245, .10); color: var(--zk-cyan); }

/* Buttons */
body.zk .btn { font-family: var(--zk-title); font-weight: 700; letter-spacing: .05em; border-radius: 12px; min-height: 44px; }
body.zk .btn-primary, body.zk .btn-hero, body.zk button.btn-primary {
  background: var(--zk-grad); color: var(--zk-btn-ink); box-shadow: 0 8px 26px rgba(105, 225, 245, .22);
}
body.zk .btn-primary:hover, body.zk .btn-hero:hover { color: var(--zk-btn-ink); filter: brightness(1.07); box-shadow: 0 12px 34px rgba(105, 225, 245, .34); }
body.zk .btn-secondary {
  background: rgba(105, 225, 245, .04); color: var(--zk-cyan); border: 1px solid rgba(105, 225, 245, .55);
}
body.zk .btn-secondary:hover { background: var(--zk-cyan); color: var(--zk-btn-ink); }
body.zk .btn-ghost { color: var(--zk-lead); }
body.zk .btn-ghost:hover { color: var(--zk-text); background: rgba(255, 255, 255, .08); }
body.zk .btn-success { background: linear-gradient(105deg, var(--zk-cyan), var(--zk-mint)); color: var(--zk-btn-ink); box-shadow: 0 8px 26px rgba(154, 245, 212, .22); }
body.zk .btn-danger { background: #ff6b6b; color: #1a0606; }
body.zk .btn-light { background: var(--zk-text); color: var(--zk-btn-ink); }
body.zk .btn:focus-visible { outline-color: #fff; outline-offset: 4px; border-radius: 12px; }
body.zk .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Karten und Flächen */
body.zk .card, body.zk .auth-card, body.zk .feature-card, body.zk .stufe-card, body.zk .plan-card, body.zk .stat-card,
body.zk .user-panel, body.zk .user-card, body.zk .user-sidebar, body.zk .result-card, body.zk .quiz-card {
  background: var(--zk-glass); border: 1px solid var(--zk-line); color: var(--zk-lead);
  box-shadow: var(--shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.zk .card h1, body.zk .card h2, body.zk .card h3, body.zk .auth-card h1 { color: var(--zk-text); }
body.zk .plan-pro { border: 1px solid var(--zk-cyan); box-shadow: 0 0 0 1px rgba(105, 225, 245, .25), 0 18px 60px rgba(101, 80, 219, .28); }
body.zk .plan-badge { background: var(--zk-grad); color: var(--zk-btn-ink); }
body.zk .plan-name, body.zk .plan-cur, body.zk .plan-per, body.zk .plan-note { color: var(--zk-muted); }
body.zk .plan-price, body.zk .plan-list li { color: var(--zk-text); }
body.zk .plan-lead { color: var(--zk-cyan); }

/* Abschnitts-Köpfe */
body.zk .section-tag { background: rgba(105, 225, 245, .10); color: var(--zk-cyan); font-family: var(--zk-mono); letter-spacing: .14em; border: 1px solid var(--zk-line); }
body.zk .section-header h2 { color: var(--zk-text); }
body.zk .section-header p { color: var(--zk-lead); }
body.zk .about-section { background: linear-gradient(135deg, rgba(101, 80, 219, .10), rgba(105, 225, 245, .04)); }
body.zk .final-cta { background: linear-gradient(135deg, rgba(101, 80, 219, .45), rgba(9, 16, 36, .95)); border-block: 1px solid var(--zk-line); }
body.zk .partner-section { background: linear-gradient(135deg, rgba(9, 16, 36, .92), rgba(101, 80, 219, .2)); border-block: 1px solid var(--zk-line); }

/* Formulare */
body.zk .form-label, body.zk .ict-label { color: var(--zk-text); }
body.zk .form-hint { color: var(--zk-muted); }
body.zk :is(.form-control, .ict-input, .alp-input, .alp-textarea, .alp-select, .iv2-input),
body.zk :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=search], input[type=url], select, textarea) {
  background-color: var(--zk-field); color: var(--zk-text);
  border: 1px solid var(--zk-field-border); border-radius: 12px;
  font-family: var(--zk-font);
}
body.zk :is(.form-control, .ict-input, .alp-input, .alp-textarea, .alp-select):hover,
body.zk :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], select, textarea):hover { border-color: var(--zk-field-hover); }
body.zk :is(.form-control, .ict-input, .alp-input, .alp-textarea, .alp-select):focus,
body.zk :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=search], input[type=url], select, textarea):focus {
  outline: none; border-color: var(--zk-cyan); background-color: rgba(105, 225, 245, .07);
  box-shadow: 0 0 0 3px rgba(105, 225, 245, .28);
}
body.zk :is(.form-control, .ict-input, input, textarea)::placeholder { color: #98a3c4; opacity: 1; }
body.zk .form-control.error { border-color: #ff8f8f; }
body.zk select option { background: #0d1322; color: var(--zk-text); }
body.zk :is(input:-webkit-autofill) { -webkit-text-fill-color: var(--zk-text); caret-color: var(--zk-text); box-shadow: 0 0 0 100px #131b3a inset; }
body.zk input[type=checkbox], body.zk input[type=radio] { accent-color: var(--zk-cyan); }

/* Meldungen */
body.zk .alert { border-radius: 12px; }
body.zk .alert-error { background: var(--zk-err-bg); border: 1px solid #ff8f8f; color: #ffc2c2; }
body.zk .alert-success { background: var(--zk-ok-bg); border: 1px solid var(--zk-ok); color: #c9fbe9; }
body.zk .alert-info { background: rgba(105, 225, 245, .08); border: 1px solid rgba(105, 225, 245, .45); color: var(--zk-lead); }
body.zk .alert-amber { background: var(--zk-warn-bg) !important; border: 1px solid rgba(255, 213, 138, .5) !important; color: var(--zk-warn) !important; }
body.zk .alert a { color: inherit; }

/* Anmelde-/Registrier-Seiten */
body.zk .auth-page { background: transparent; }
body.zk .auth-header p, body.zk .auth-footer, body.zk .divider span { color: var(--zk-muted); }
body.zk .auth-header h1 { color: var(--zk-text); }
body.zk .divider::before, body.zk .divider::after { background: var(--zk-line); }
body.zk .consent-box { background: var(--zk-tint); border: 1px solid var(--zk-line); }
body.zk .consent-box label { color: var(--zk-lead); }
body.zk .section-divider { color: var(--zk-muted); }
body.zk[style] { background: var(--zk-bg) !important; }

/* Tabellen */
body.zk th { color: var(--zk-muted); border-bottom-color: var(--zk-line-strong); }
body.zk td { border-bottom-color: var(--zk-line); color: var(--zk-lead); }
body.zk tr:hover td { background: rgba(105, 225, 245, .04); }
body.zk .badge-user { background: rgba(105, 225, 245, .12); color: var(--zk-cyan); }
body.zk .badge-admin { background: rgba(164, 146, 255, .18); color: #d3cbff; }

/* Fusszeile (Element <footer>) */
body.zk footer:not(.alp-footer) {
  background: rgba(4, 7, 14, .9); color: var(--zk-muted); border-top: 1px solid var(--zk-line);
}
body.zk footer:not(.alp-footer) a { color: var(--zk-lead); }
body.zk footer:not(.alp-footer) a:hover { color: var(--zk-cyan); }
body.zk footer .footer-logo { color: var(--zk-text); }
body.zk .text-muted { color: var(--zk-muted); }

/* Sprachumschalter (style.css-Fassung) */
body.zk .lang-current { border-radius: 10px; font-weight: 600; }

/* Kundenbereich (Dashboard) */
body.zk .user-page { background: transparent; }
body.zk .user-shell { position: relative; }
body.zk .user-profile, body.zk .user-nav-sep { border-color: var(--zk-line); background-color: transparent; }
body.zk .user-nav-sep { background: var(--zk-line); }
body.zk .user-avatar { background: linear-gradient(135deg, rgba(164, 146, 255, .25), rgba(105, 225, 245, .18)); border: 1px solid var(--zk-line-violet); color: var(--zk-text); }
body.zk .user-profile-name, body.zk .user-greeting, body.zk .user-card-num, body.zk .user-panel-head h2, body.zk .role-name { color: var(--zk-text); }
body.zk .user-profile-email, body.zk .user-sub, body.zk .user-card-lbl { color: var(--zk-muted); }
body.zk .user-pro-badge { background: var(--zk-ok-bg); color: var(--zk-ok); border: 1px solid rgba(154, 245, 212, .45); }
body.zk .user-nav a { color: var(--zk-lead); }
body.zk .user-nav a:hover { background: rgba(105, 225, 245, .08); color: var(--zk-text); }
body.zk .user-nav a.active { background: rgba(105, 225, 245, .12); color: var(--zk-cyan); border-left-color: var(--zk-cyan); }
body.zk .user-nav a.logout { color: var(--zk-muted); }
body.zk .user-nav a.logout:hover { color: #ffb3b3; background: var(--zk-err-bg); }
body.zk .role-rank { background: rgba(164, 146, 255, .16); color: #d3cbff; }
body.zk .role-bar-wrap { background: rgba(255, 255, 255, .10); }
body.zk .role-bar { background: linear-gradient(90deg, var(--zk-violet), var(--zk-cyan)); }
body.zk .role-pct { color: var(--zk-cyan); }
body.zk .user-pro-cta { background: linear-gradient(135deg, rgba(101, 80, 219, .5), rgba(9, 16, 36, .92)); border: 1px solid var(--zk-line-violet); color: var(--zk-text); }
body.zk .user-pro-cta p { opacity: 1; color: var(--zk-lead); }

/* Fragebogen und Ergebnisse (style.css-Fassung) */
body.zk .quiz-page { background: transparent; }
body.zk .quiz-header { background: rgba(7, 10, 19, .8); border-bottom-color: var(--zk-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.zk .quiz-progress-bar-wrap { background: rgba(255, 255, 255, .10); }
body.zk .quiz-progress-bar { background: var(--zk-grad); }
body.zk .quiz-etappe-chip.active { border-color: var(--zk-cyan); background: rgba(105, 225, 245, .12); color: var(--zk-cyan); }
body.zk .quiz-etappe-chip.done { background: var(--zk-mint); color: var(--zk-btn-ink); }
body.zk .quiz-etappe-chip.todo { background: rgba(255, 255, 255, .08); color: var(--zk-muted); }
body.zk .quiz-q-num { color: var(--zk-muted); }
body.zk .quiz-answer, body.zk .assess-choice { background: rgba(255, 255, 255, .04); border: 1px solid var(--zk-line-strong); color: var(--zk-text); }
body.zk .quiz-answer:hover, body.zk .assess-choice:hover { border-color: var(--zk-cyan); background: rgba(105, 225, 245, .08); }
body.zk .quiz-answer.selected, body.zk .assess-choice.selected { border-color: var(--zk-cyan); background: linear-gradient(135deg, rgba(101, 80, 219, .28), rgba(105, 225, 245, .12)); box-shadow: 0 6px 18px rgba(105, 225, 245, .15); }
body.zk .etappe-intro p, body.zk .result-preview p { color: var(--zk-lead); }
body.zk .preview-rolle, body.zk .result-meta-block { background: var(--zk-tint); border: 1px solid var(--zk-line); }
body.zk .preview-bar-wrap, body.zk .result-score-bar-wrap { background: rgba(255, 255, 255, .10); }
body.zk .preview-bar { background: linear-gradient(90deg, var(--zk-violet), var(--zk-cyan)); }
body.zk .preview-rank, body.zk .result-link { color: var(--zk-cyan); }
body.zk .results-hero { background: transparent; }
body.zk .result-card-rank { background: var(--zk-grad); color: var(--zk-btn-ink); }
body.zk .result-card-score, body.zk .result-card-desc, body.zk .result-meta-block h4 { color: var(--zk-muted); }
body.zk .result-meta-block p { color: var(--zk-lead); }
body.zk .result-example-chip { background: rgba(105, 225, 245, .12); color: var(--zk-cyan); }
body.zk .download-bar { background: linear-gradient(135deg, rgba(154, 245, 212, .18), rgba(9, 16, 36, .92)); border-block: 1px solid rgba(154, 245, 212, .35); color: var(--zk-text); }

/* Admin (style.css-Fassung) */
body.zk .admin-sidebar { background: rgba(4, 7, 14, .95); border-right-color: var(--zk-line); }
body.zk .admin-nav a.active { background: rgba(105, 225, 245, .12); border-left-color: var(--zk-cyan); }
body.zk .admin-topbar { background: rgba(7, 10, 19, .8); border-bottom-color: var(--zk-line); box-shadow: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.zk .admin-page-title { color: var(--zk-text); }
body.zk .stat-card-num { color: var(--zk-text); }
body.zk .stat-card-lbl { color: var(--zk-muted); }

} /* /@media screen (Teil 4) */

@media screen {
/* Balken-Füllungen sind <span>: ohne display:block hätten sie keine Höhe. */
body.zk :is(.rl-fill, .lp-fill) { display: block; }
}
/* ============================== 11. Inline-Farben der bestehenden Seiten auf dunklen Grund ==============================
   Die Seiten tragen viele feste helle Farben in style-Attributen (Tailwind-Grautöne). Nur die Hauptdomain
   lädt diese Datei; Markup und Partner-Domains bleiben unberührt. Erzeugt aus den tatsächlich vorkommenden
   Werten; neue Farben in style-Attributen brauchen hier eine Zeile. */

@media screen {
body.zk :is([style^="color:#718096" i],
  [style*=";color:#718096" i],
  [style^="color:#a0aec0" i],
  [style*=";color:#a0aec0" i],
  [style^="color:#8a929e" i],
  [style*=";color:#8a929e" i],
  [style^="color:#5a6472" i],
  [style*=";color:#5a6472" i],
  [style^="color:#94a3b8" i],
  [style*=";color:#94a3b8" i],
  [style^="color:#9ca3af" i],
  [style*=";color:#9ca3af" i]) { color: var(--zk-muted) !important; }
body.zk :is([style^="color:#4a5568" i],
  [style*=";color:#4a5568" i],
  [style^="color:#3a4658" i],
  [style*=";color:#3a4658" i],
  [style^="color:#2b3a67" i],
  [style*=";color:#2b3a67" i],
  [style^="color:#2c5282" i],
  [style*=";color:#2c5282" i]) { color: var(--zk-lead) !important; }
body.zk :is([style^="color:#2d3748" i],
  [style*=";color:#2d3748" i],
  [style^="color:#1a202c" i],
  [style*=";color:#1a202c" i],
  [style^="color:#232434" i],
  [style*=";color:#232434" i],
  [style^="color:#0b2545" i],
  [style*=";color:#0b2545" i]) { color: var(--zk-text) !important; }
body.zk :is([style^="color:#667eea" i],
  [style*=";color:#667eea" i],
  [style^="color:#5a67d8" i],
  [style*=";color:#5a67d8" i],
  [style^="color:#3b5bdb" i],
  [style*=";color:#3b5bdb" i],
  [style^="color:#269cd9" i],
  [style*=";color:#269cd9" i],
  [style^="color:#0ea5e9" i],
  [style*=";color:#0ea5e9" i],
  [style^="color:#3182ce" i],
  [style*=";color:#3182ce" i],
  [style^="color:#2b6cb0" i],
  [style*=";color:#2b6cb0" i]) { color: var(--zk-cyan) !important; }
body.zk :is([style^="color:#805ad5" i],
  [style*=";color:#805ad5" i],
  [style^="color:#553c9a" i],
  [style*=";color:#553c9a" i]) { color: #d3cbff !important; }
body.zk :is([style^="color:#c53030" i],
  [style*=";color:#c53030" i],
  [style^="color:#c0392b" i],
  [style*=";color:#c0392b" i],
  [style^="color:#e53e3e" i],
  [style*=";color:#e53e3e" i]) { color: #ff9d9d !important; }
body.zk :is([style^="color:#22543d" i],
  [style*=";color:#22543d" i],
  [style^="color:#276749" i],
  [style*=";color:#276749" i],
  [style^="color:#2f855a" i],
  [style*=";color:#2f855a" i],
  [style^="color:#1c7c54" i],
  [style*=";color:#1c7c54" i],
  [style^="color:#48bb78" i],
  [style*=";color:#48bb78" i],
  [style^="color:#38a169" i],
  [style*=";color:#38a169" i]) { color: var(--zk-mint) !important; }
body.zk :is([style^="color:#7b341e" i],
  [style*=";color:#7b341e" i],
  [style^="color:#9c4221" i],
  [style*=";color:#9c4221" i],
  [style^="color:#b45309" i],
  [style*=";color:#b45309" i],
  [style^="color:#d97706" i],
  [style*=";color:#d97706" i],
  [style^="color:#744210" i],
  [style*=";color:#744210" i]) { color: var(--zk-warn) !important; }
body.zk :is([style^="background:#fff" i],
  [style*=";background:#fff" i],
  [style^="background:#ffffff" i],
  [style*=";background:#ffffff" i],
  [style^="background:#f7fafc" i],
  [style*=";background:#f7fafc" i],
  [style^="background:#edf2f7" i],
  [style*=";background:#edf2f7" i],
  [style^="background:#f8f9ff" i],
  [style*=";background:#f8f9ff" i],
  [style^="background:#f4f5f7" i],
  [style*=";background:#f4f5f7" i],
  [style^="background:#f1f4fb" i],
  [style*=";background:#f1f4fb" i],
  [style^="background:#fafbff" i],
  [style*=";background:#fafbff" i],
  [style^="background:#f3f4f8" i],
  [style*=";background:#f3f4f8" i]) { background: rgba(255,255,255,.05) !important; }
body.zk :is([style^="background:#f0fff4" i],
  [style*=";background:#f0fff4" i],
  [style^="background:#c6f6d5" i],
  [style*=";background:#c6f6d5" i]) { background: var(--zk-ok-bg) !important; }
body.zk :is([style^="background:#fff5f5" i],
  [style*=";background:#fff5f5" i],
  [style^="background:#fed7d7" i],
  [style*=";background:#fed7d7" i]) { background: var(--zk-err-bg) !important; }
body.zk :is([style^="background:#fffbeb" i],
  [style*=";background:#fffbeb" i],
  [style^="background:#feebc8" i],
  [style*=";background:#feebc8" i],
  [style^="background:#fffaf0" i],
  [style*=";background:#fffaf0" i]) { background: var(--zk-warn-bg) !important; }
body.zk :is([style^="background:#ebf8ff" i],
  [style*=";background:#ebf8ff" i],
  [style^="background:#ebf4ff" i],
  [style*=";background:#ebf4ff" i],
  [style^="background:#eef3ff" i],
  [style*=";background:#eef3ff" i],
  [style^="background:#f0f7ff" i],
  [style*=";background:#f0f7ff" i],
  [style^="background:#eef0ff" i],
  [style*=";background:#eef0ff" i],
  [style^="background:#e9e4ff" i],
  [style*=";background:#e9e4ff" i],
  [style^="background:#e8eaf6" i],
  [style*=";background:#e8eaf6" i]) { background: rgba(105,225,245,.09) !important; }
body.zk :is([style*="solid #edf2f7" i],
  [style*="border-color:#edf2f7" i],
  [style*="solid #e2e8f0" i],
  [style*="border-color:#e2e8f0" i],
  [style*="solid #f7fafc" i],
  [style*="border-color:#f7fafc" i],
  [style*="solid #e6e8ec" i],
  [style*="border-color:#e6e8ec" i]) { border-color: var(--zk-line) !important; }
body.zk :is([style*="solid #bee3f8" i],
  [style*="border-color:#bee3f8" i],
  [style*="solid #c3dafe" i],
  [style*="border-color:#c3dafe" i],
  [style*="solid #c7d6ff" i],
  [style*="border-color:#c7d6ff" i],
  [style*="solid #90cdf4" i],
  [style*="border-color:#90cdf4" i],
  [style*="solid #c7b8ff" i],
  [style*="border-color:#c7b8ff" i]) { border-color: rgba(105,225,245,.45) !important; }
body.zk :is([style*="solid #9ae6b4" i],
  [style*="border-color:#9ae6b4" i],
  [style*="solid #68d391" i],
  [style*="border-color:#68d391" i]) { border-color: rgba(154,245,212,.45) !important; }
body.zk :is([style*="solid #fbd38d" i],
  [style*="border-color:#fbd38d" i]) { border-color: rgba(255,213,138,.5) !important; }
body.zk :is([style*="solid #feb2b2" i],
  [style*="border-color:#feb2b2" i]) { border-color: rgba(255,143,143,.6) !important; }
}

@media screen {

/* ============================== 12. Assessment und Ergebnisse (ict.css-Bausteine) ============================== */

body.zk [style^="background:var(--alp-soft"], body.zk [style*=";background:var(--alp-soft"] { background: rgba(255, 255, 255, .05) !important; }
body.zk .quiz-progress { background: rgba(7, 10, 19, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.zk .quiz-progress-label { color: var(--zk-muted); font-family: var(--zk-mono); letter-spacing: .1em; }
body.zk .quiz-bar { background: rgba(255, 255, 255, .10); }
body.zk .quiz-bar > span { background: var(--zk-grad); }
body.zk .quiz-etappe-title { color: var(--zk-text); }
body.zk .quiz-q {
  background: var(--zk-glass); border: 1px solid var(--zk-line); box-shadow: var(--alp-shadow-sm);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.zk .quiz-q.unanswered-hint { border-color: #ffd58a; box-shadow: 0 0 0 1px rgba(255, 213, 138, .4); }
body.zk .quiz-q-text { color: var(--zk-text); }
body.zk .quiz-likert .ql { border-color: var(--zk-field-border); color: var(--zk-lead); background: rgba(255, 255, 255, .03); }
body.zk .quiz-likert .ql:hover { border-color: var(--zk-cyan); }
body.zk .quiz-likert .ql .ql-num { color: var(--zk-text); }
body.zk .quiz-likert .ql.sel, body.zk .quiz-opt.sel { background: var(--zk-grad); border-color: transparent; color: var(--zk-btn-ink); }
body.zk .quiz-likert .ql.sel .ql-num { color: var(--zk-btn-ink); }
body.zk .quiz-opt { border-color: var(--zk-field-border); color: var(--zk-lead); background: rgba(255, 255, 255, .03); }
body.zk .quiz-opt:hover:not(.sel) { border-color: var(--zk-cyan); background: rgba(105, 225, 245, .07); }
/* Tastatur: die Auswahlfelder sind unsichtbar (opacity 0) - der Fokus sitzt auf dem Etikett. */
body.zk :is(.ql, .quiz-opt):focus-within { outline: 3px solid var(--zk-focus); outline-offset: 2px; }

body.zk .res-summary { background: linear-gradient(135deg, rgba(101, 80, 219, .3), rgba(9, 16, 36, .92)); border: 1px solid var(--zk-line-violet); color: var(--zk-lead); }
body.zk .res-summary h2 { color: var(--zk-text); }
body.zk .res-role {
  background: var(--zk-glass); border: 1px solid var(--zk-line); box-shadow: var(--alp-shadow-sm);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.zk .res-role.coach { border-left-color: var(--zk-cyan); }
body.zk .res-role-name { color: var(--zk-text); }
body.zk .res-match { color: var(--zk-cyan); }
body.zk .res-band, body.zk .res-sub { color: var(--zk-muted); }
body.zk .res-stufe { background: var(--zk-violet); color: var(--zk-btn-ink); }
body.zk .res-gaplist li { border-bottom-color: var(--zk-line); color: var(--zk-lead); }
body.zk .res-gap-pos { color: var(--zk-mint); }
body.zk .res-gap-neg { color: #ff9d9d; }
body.zk .res-cert { color: var(--zk-lead); }

/* Kopf im Fragebogen/Ergebnis ohne Topbar */
body.zk .ict-trust { color: var(--zk-muted); }

} /* /@media screen (Teil 5) */

@media screen {

/* ============================== 13. Feinschliff Kundenbereich ============================== */

/* weisse Flächen werden dunkles Glas (Karten), Grautöne bleiben schwache Tönung */
body.zk :is([style^="background:#fff;" i], [style^="background:#ffffff;" i], [style*=";background:#fff;" i], [style*=";background:#ffffff;" i],
  [style$="background:#fff" i], [style$="background:#ffffff" i]) { background: var(--zk-glass) !important; }

/* Verlaufsflächen mit weisser Schrift: Marken-Violett statt Blau/Lila-Standard */
body.zk :is([style*="linear-gradient(135deg,#667eea,#764ba2)" i], [style*="linear-gradient(135deg,#5a67d8,#764ba2)" i],
  [style*="linear-gradient(135deg,#0f1729,#1a2942)" i]) {
  background: linear-gradient(135deg, rgba(101, 80, 219, .55), rgba(9, 16, 36, .94)) !important;
  border: 1px solid var(--zk-line-violet); color: var(--zk-text);
}
body.zk :is([style*="linear-gradient(135deg,#269cd9,#5a67d8)" i], [style*="linear-gradient(90deg,#269cd9,#5a67d8)" i]) {
  background: var(--zk-grad) !important; color: var(--zk-btn-ink) !important;
}
body.zk :is([style*="linear-gradient(135deg,#fafbff,#fff)" i], [style*="linear-gradient(135deg,#fbfaff,#fff)" i],
  [style*="linear-gradient(135deg,#f6fbf8,#fff)" i], [style*="linear-gradient(135deg,#f0fff4,#e8eaf6)" i]) {
  background: var(--zk-glass) !important;
}

/* Dashboard */
body.zk .user-nav { align-items: stretch; }
body.zk .path-step { border-top-color: var(--zk-line-strong); color: var(--zk-muted); }
body.zk .path-step.done { border-top-color: var(--zk-mint); color: var(--zk-mint); }
body.zk .path-step.active { border-top-color: var(--zk-cyan); color: var(--zk-cyan); }
body.zk .path-dot { background: rgba(255, 255, 255, .10); color: var(--zk-text); }
body.zk .path-step.done .path-dot { background: rgba(154, 245, 212, .2); color: var(--zk-mint); }
body.zk .path-step.active .path-dot { background: rgba(105, 225, 245, .2); color: var(--zk-cyan); }
body.zk .path-progress { background: rgba(255, 255, 255, .10); }
body.zk .path-progress > span { background: var(--zk-grad); }

/* SVG-Diagramme (Spinnendiagramm, Kompass): Beschriftung auf dunklem Grund lesbar */
body.zk svg text[fill="#4A5568" i], body.zk svg text[fill="#2D3748" i] { fill: var(--zk-lead); }
body.zk svg text[fill="#718096" i], body.zk svg text[fill="#A0AEC0" i] { fill: var(--zk-muted); }
body.zk svg polygon[fill^="rgba(255,255,255"], body.zk svg path[fill^="rgba(255,255,255"], body.zk svg circle[fill="#fff" i] { fill: rgba(255, 255, 255, .03); }
body.zk svg [stroke="#CBD5E0" i], body.zk svg [stroke="#E2E8F0" i] { stroke: rgba(255, 255, 255, .22); }
body.zk svg [stroke="#fff" i] { stroke: #0d1322; }

} /* /@media screen (Teil 7) */

@media screen {

/* ============================== 14. Seiteneigene Bausteine (resultat, assessment_v2, resultat_v2, pro, admin) ============================== */

/* Niveau-Umschalter (Ergebnis, Pro-Ansicht) */
body.zk :is(.ict-niv-btn, .k-niv-btn) { background: rgba(255, 255, 255, .05); border: 1px solid var(--zk-field-border); color: var(--zk-lead); }
body.zk :is(.ict-niv-btn, .k-niv-btn):hover { border-color: var(--zk-cyan); color: var(--zk-cyan); }
body.zk :is(.ict-niv-btn, .k-niv-btn).active { background: var(--zk-cyan); border-color: var(--zk-cyan); color: var(--zk-btn-ink); box-shadow: 0 3px 14px rgba(105, 225, 245, .3); }

/* Karten V2 (Ergebnis, Fragebogen, Berater-Ansicht) */
body.zk :is(.v2-card, .iv2-card, .kv-card, .mini-card) {
  background: var(--zk-glass); border: 1px solid var(--zk-line); color: var(--zk-lead);
  box-shadow: var(--alp-shadow-sm); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.zk .v2-match, body.zk .kv-match { color: var(--zk-cyan); }
body.zk .v2-grid2 .lbl { color: var(--zk-muted); }
body.zk .v2-cert { border-top-color: var(--zk-line); }
body.zk .v2-cert .pv { background: var(--zk-violet); color: var(--zk-btn-ink); }
body.zk .v2-cmp .hd { color: var(--zk-text); }
body.zk .v2-abso { color: var(--zk-cyan); }
body.zk .v2-fold > summary { background: var(--zk-glass); border-color: var(--zk-line); color: var(--zk-text); box-shadow: none; }
body.zk .v2-fold > summary:hover { border-color: var(--zk-cyan); }
body.zk .v2-fold > summary::after { color: var(--zk-muted); }
body.zk .kv-role { border-color: var(--zk-line); }
body.zk .kv-role.target { border-color: var(--zk-cyan); }
body.zk .kv-cert { border-color: var(--zk-line); }
body.zk .kv-btn { background: rgba(255, 255, 255, .05); border-color: var(--zk-field-border); color: var(--zk-lead); }
body.zk .kv-btn:hover { border-color: var(--zk-cyan); color: var(--zk-cyan); }
body.zk .kv-btn-primary { background: var(--zk-grad); border-color: transparent; color: var(--zk-btn-ink); }
body.zk .kv-sec { color: var(--zk-text); }
body.zk label.kvl, body.zk label.fl { color: var(--zk-text); }

/* Fragebogen V2 */
body.zk .v2-honesty, body.zk .iv2-hint { background: rgba(105, 225, 245, .07); border-color: rgba(105, 225, 245, .4); color: var(--zk-lead); }
body.zk .iv2-hint .ico { background: rgba(255, 255, 255, .06); border-color: var(--zk-line-strong); }
body.zk .iv2-hint .htxt strong, body.zk .iv2-title, body.zk .iv2-field > label { color: var(--zk-text); }
body.zk .iv2-hint .htxt p, body.zk .iv2-sub, body.zk .v2-conf, body.zk .v2-mission, body.zk .v2-hint { color: var(--zk-muted); }
body.zk .iv2-hero { background: linear-gradient(115deg, rgba(101, 80, 219, .5), rgba(9, 16, 36, .94) 70%); border: 1px solid var(--zk-line-violet); box-shadow: 0 18px 60px rgba(0, 0, 0, .4); }
body.zk .iv2-hero h1 { color: var(--zk-text); }
body.zk .iv2-alert { background: var(--zk-err-bg); border-color: #ff8f8f; color: #ffc2c2; }
body.zk .iv2-panel { border-color: var(--zk-line); }
body.zk .iv2-panel:hover { border-color: var(--zk-line-strong); box-shadow: none; }
body.zk .iv2-num { background: var(--zk-grad); color: var(--zk-btn-ink); }
body.zk :is(.iv2-opt-tag, .v2-badge) { color: #d3cbff; background: rgba(164, 146, 255, .16); }
body.zk .v2-badge-sjt { color: var(--zk-warn); background: var(--zk-warn-bg); }
body.zk :is(.v2-badge-scenario, .v2-badge-scale) { color: var(--zk-ok); background: var(--zk-ok-bg); }
body.zk :is(.v2-badge-pair, .v2-badge-rank) { color: #d3cbff; background: rgba(164, 146, 255, .16); }
body.zk .v2-q { border-top-color: var(--zk-line); }
body.zk :is(.v2-scn, .v2-q-sjt, .v2-q-scenario) { background: var(--zk-tint); border-color: var(--zk-line); color: var(--zk-lead); }
body.zk .v2-scn { border-left-color: var(--zk-cyan); }
body.zk :is(.v2-opt, .v2-pair-opt, .v2-scale-opt, .v2-rankitem) { background: rgba(255, 255, 255, .03); border-color: var(--zk-field-border); color: var(--zk-lead); }
body.zk :is(.v2-opt:hover, .v2-pair-opt:hover, .v2-scale-opt:hover) { border-color: var(--zk-cyan); background: rgba(105, 225, 245, .07); }
body.zk .v2-pair-opt:has(input:checked), body.zk .v2-scale-opt:has(input:checked) { border-color: var(--zk-cyan); background: rgba(105, 225, 245, .12); box-shadow: 0 0 0 3px rgba(105, 225, 245, .15); }
body.zk .v2-pair-txt, body.zk .v2-rk-txt, body.zk .v2-scale-lbl { color: var(--zk-lead); }
body.zk .v2-scale-dot { border-color: var(--zk-field-border); }
body.zk .v2-scale-opt:has(input:checked) .v2-scale-dot { border-color: var(--zk-cyan); background: var(--zk-cyan); }
body.zk .v2-rk-num { color: var(--zk-cyan); }
body.zk :is(.v2-rk-mv, .v2-rk-ok) { background: rgba(255, 255, 255, .05); border-color: var(--zk-field-border); color: var(--zk-lead); }
body.zk :is(.v2-rk-mv, .v2-rk-ok):hover { border-color: var(--zk-cyan); color: var(--zk-cyan); }
body.zk .v2-rk-ok.ok { border-color: var(--zk-mint); background: var(--zk-ok-bg); color: var(--zk-ok); }
body.zk .v2-progress { background: rgba(7, 10, 19, .85); border-bottom-color: var(--zk-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.zk .v2-bar { background: rgba(255, 255, 255, .10); }
body.zk .v2-bar > span { background: var(--zk-grad); }
body.zk .v2-opt:focus-within, body.zk .v2-pair-opt:focus-within, body.zk .v2-scale-opt:focus-within,
body.zk .v2-rk-mv:focus-visible, body.zk .v2-rk-ok:focus-visible { outline: 3px solid var(--zk-focus); outline-offset: 2px; }
body.zk select.iv2-input { background-color: var(--zk-field); }

/* Spinnendiagramm-Kasten (results.php) */
body.zk .radar-wrap { background: var(--zk-glass); border-color: var(--zk-line); }
body.zk .radar-title { color: var(--zk-muted); }

/* Pro-Bereich (Institutionen, Berater) */
body.zk .pro-shell { position: relative; }
body.zk .pro-side { background: rgba(4, 7, 14, .92); border-right: 1px solid var(--zk-line); }
body.zk .pro-side-brand { border-bottom-color: var(--zk-line); }
body.zk .pro-side-brand img { filter: none; background: #fff; padding: 6px 9px; border-radius: 9px; }
body.zk .pro-side-badge, body.zk .pro-badge { background: var(--zk-violet); color: var(--zk-btn-ink); }
body.zk .pro-nav-sec { color: var(--zk-muted); }
body.zk .pro-nav a { color: var(--zk-lead); }
body.zk .pro-nav a:hover { background: rgba(105, 225, 245, .08); color: var(--zk-text); }
body.zk .pro-nav a.active { background: rgba(105, 225, 245, .14); color: var(--zk-cyan); box-shadow: inset 3px 0 0 var(--zk-cyan); }
body.zk .pro-side-foot { border-top-color: var(--zk-line); }
body.zk .pro-side-foot .em { opacity: 1; color: var(--zk-muted); }
body.zk .pro-logout { background: rgba(255, 255, 255, .08); color: var(--zk-text); }
body.zk .pro-logout:hover { background: rgba(255, 255, 255, .16); }
body.zk .btn-accent { background: var(--zk-grad); color: var(--zk-btn-ink); }
body.zk .count-num { color: var(--zk-cyan); }
body.zk .pro-h1 { color: var(--zk-text); }
body.zk .pro-sub { color: var(--zk-muted); }
body.zk .pill-green { background: var(--zk-ok-bg); color: var(--zk-ok); }
body.zk .pill-red { background: var(--zk-err-bg); color: var(--zk-err); }
body.zk .pill-amber { background: var(--zk-warn-bg); color: var(--zk-warn); }
body.zk .pill-blue { background: rgba(105, 225, 245, .12); color: var(--zk-cyan); }
body.zk .pill-gray { background: rgba(255, 255, 255, .08); color: var(--zk-lead); }
body.zk table td .muted, body.zk .muted { color: var(--zk-muted); }
body.zk .admin-nav a.active { color: var(--zk-cyan); }

} /* /@media screen (Teil 8) */

@media screen {

/* ============================== 15. Pro-Bereich und Admin: seiteneigene Klassen (ruhiger Arbeitston) ============================== */

body.zk svg text[fill="#232434" i] { fill: var(--zk-text); }

/* Pro: Teilnehmende, Codes, Berater */
body.zk :is(.client-card, .code-card, .brow, .inst-card, .inst-stat, .rm-intro, .rm-step) {
  background: var(--zk-glass); border: 1px solid var(--zk-line); color: var(--zk-lead); box-shadow: none;
}
body.zk .code-card:hover { border-color: var(--zk-line-strong); box-shadow: none; }
body.zk .code-card.used { background: rgba(255, 255, 255, .03); }
body.zk .code-card.inuse { background: var(--zk-warn-bg); border-left-color: var(--zk-warn); }
body.zk .role-chip, body.zk .cc-chip { background: rgba(255, 255, 255, .07); color: var(--zk-text); }
body.zk .cc-chip.coach { background: rgba(164, 146, 255, .16); color: #d3cbff; }
body.zk .role-chip .pct { color: var(--zk-cyan); }
body.zk .status-tab { background: rgba(255, 255, 255, .05); border-color: var(--zk-line-strong); color: var(--zk-lead); }
body.zk .status-tab:hover { border-color: var(--zk-cyan); color: var(--zk-cyan); }
body.zk .status-tab.active { background: var(--zk-cyan); border-color: var(--zk-cyan); color: var(--zk-btn-ink); }
body.zk .status-tab .n { background: rgba(255, 255, 255, .10); }
body.zk .status-tab.active .n { background: rgba(4, 7, 14, .18); }
body.zk .cc-code { background: rgba(255, 255, 255, .08); color: var(--zk-text); }
body.zk .cc-field label, body.zk .brow-form .lbl { color: var(--zk-muted); }
body.zk :is(.cc-input, .cc-select, .cert-url, .cert-edit input, .cert-edit select, .cert-edit textarea) {
  background-color: var(--zk-field); border-color: var(--zk-field-border); color: var(--zk-text);
}
body.zk :is(.cc-input, .cc-select):focus { border-color: var(--zk-cyan); box-shadow: 0 0 0 3px rgba(105, 225, 245, .28); }
body.zk .cc-none, body.zk .cc-meta { color: var(--zk-muted); }
body.zk .cc-usebtn { background: rgba(255, 255, 255, .05); border-color: var(--zk-field-border); color: var(--zk-lead); }
body.zk .cc-usebtn:hover, body.zk .cc-usebtn.on { border-color: var(--zk-warn); color: var(--zk-warn); background: var(--zk-warn-bg); }
body.zk .cc-del { color: var(--zk-muted); }
body.zk .cc-del:hover { background: var(--zk-err-bg); color: var(--zk-err); }
body.zk .cc-saved { background: #15803d; }
body.zk .cc-tab { background: rgba(255, 255, 255, .07); color: var(--zk-lead); }
body.zk .cc-tab:hover { background: rgba(255, 255, 255, .12); }
body.zk .cc-tab.active { background: var(--zk-cyan); color: var(--zk-btn-ink); }
body.zk .cc-tab-n { background: rgba(255, 255, 255, .12); color: var(--zk-text); }
body.zk .brow-edit { border-top-color: var(--zk-line); }
body.zk .brow-form, body.zk .inst-kpi, body.zk .inst-settings, body.zk .inst-panel, body.zk .cert-edit, body.zk .rm-clusters div { background: var(--zk-tint); border-color: var(--zk-line); }

/* Admin */
body.zk .admin-content { color: var(--zk-lead); }
body.zk :is(.inst-stat-num, .inst-name, .inst-kpi-num, .rm-intro h3, .rm-role-nm, .rm-step b, .rm-clusters b) { color: var(--zk-text); }
body.zk :is(.inst-stat-lbl, .inst-kpi-lbl, .inst-meta, .rm-role-ref, .rm-legend, .inst-field > label) { color: var(--zk-muted); }
body.zk .rm-intro p, body.zk .rm-step, body.zk .rm-clusters div { color: var(--zk-lead); }
body.zk .inst-code { background: rgba(255, 255, 255, .08); color: var(--zk-text); }
body.zk .cert-table th { color: var(--zk-muted); }
body.zk .cert-table th, body.zk .cert-table td { border-bottom-color: var(--zk-line); }
body.zk .cert-edit label { color: var(--zk-muted); }
body.zk .btn-s { background: rgba(255, 255, 255, .05); border-color: var(--zk-field-border); color: var(--zk-lead); }
body.zk .btn-s.primary { background: var(--zk-cyan); border-color: var(--zk-cyan); color: var(--zk-btn-ink); }
body.zk .btn-s.danger { color: var(--zk-err); border-color: rgba(255, 143, 143, .6); }
body.zk .rm-scroll { border-color: var(--zk-line); }
body.zk table.rm thead th, body.zk table.rm thead th.role { background: #121b2d; color: var(--zk-text); }
body.zk table.rm th.role { background: #0d1322; box-shadow: 1px 0 0 var(--zk-line); }
body.zk table.rm tbody td.val { border-bottom-color: var(--zk-line); }
body.zk .rm-fam td { background: rgba(255, 255, 255, .06); color: var(--zk-text); }
body.zk .rm-legend .bar { border-color: var(--zk-line); background: linear-gradient(90deg, #121b2d, var(--zk-cyan)); }
body.zk details > summary { color: var(--zk-text); }

} /* /@media screen (Teil 9) */

@media screen {
/* Dynamische Kompetenz-/Niveau-Farben (PHP) auf dunklem Grund lesbar: Schrift heller. */
body.zk :is([style^="color:#2563EB" i],
  [style*=";color:#2563EB" i],
  [style^="color:#1E74D4" i],
  [style*=";color:#1E74D4" i],
  [style^="color:#1d4ed8" i],
  [style*=";color:#1d4ed8" i]) { color: #8db4ff !important; }
body.zk svg text[fill="#2563EB" i], body.zk svg text[fill="#1E74D4" i], body.zk svg text[fill="#1d4ed8" i] { fill: #8db4ff; }
body.zk :is([style^="color:#7C5CFC" i],
  [style*=";color:#7C5CFC" i],
  [style^="color:#7C3AED" i],
  [style*=";color:#7C3AED" i],
  [style^="color:#6366F1" i],
  [style*=";color:#6366F1" i],
  [style^="color:#8b5cf6" i],
  [style*=";color:#8b5cf6" i]) { color: #b8a9ff !important; }
body.zk svg text[fill="#7C5CFC" i], body.zk svg text[fill="#7C3AED" i], body.zk svg text[fill="#6366F1" i], body.zk svg text[fill="#8b5cf6" i] { fill: #b8a9ff; }
body.zk :is([style^="color:#22C55E" i],
  [style*=";color:#22C55E" i],
  [style^="color:#16A34A" i],
  [style*=";color:#16A34A" i]) { color: #86efac !important; }
body.zk svg text[fill="#22C55E" i], body.zk svg text[fill="#16A34A" i] { fill: #86efac; }
body.zk svg text[fill="#1A202C" i] { fill: var(--zk-text); }
}

@media screen {

/* ============================== 16. Fehlerseiten (404, 403, 410) ============================== */

body.zk .zk-fehler { min-height: 78vh; display: flex; align-items: center; justify-content: center; padding: 60px 0; text-align: center; }
body.zk .zk-fehler .alp-container { width: 100%; max-width: 560px; padding: 44px 32px 38px; background: var(--zk-glass); border: 1px solid var(--zk-line-violet); border-radius: 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.zk .zk-fehler .alp-container > div:first-child, body.zk .zk-fehler-code {
  font-family: var(--zk-title); font-weight: 700; font-size: clamp(3.4rem, 12vw, 5.2rem); line-height: 1; margin-bottom: 8px;
  background: var(--zk-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important;
}
body.zk .zk-fehler h1 { font-size: 1.6rem; color: var(--zk-text); }
body.zk .zk-fehler p { color: var(--zk-lead) !important; }
body.zk .zk-fehler-aktionen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

} /* /@media screen (Teil 16) */

@media screen {

/* ============================== 17. Bewegung, Anker, Feinheiten ============================== */

body.zk { overflow-wrap: break-word; }
body.zk [id] { scroll-margin-top: 96px; }
body.zk .zk-app [id], body.zk.zk-app [id] { scroll-margin-top: 24px; }

/* Bewegung nur mit Skript (html.zk-js), nur ohne «Bewegung reduzieren», nicht im Standbild
   (zk-still = Pause-Knopf) und pausiert bei verstecktem Tab (zk-hidden). Der Kundenbereich
   (body.zk-app) bewegt sich nie. */
@keyframes zk-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes zk-flame { from { transform: scale(1, .92); opacity: .65; } to { transform: scale(1.06, 1.08); opacity: .95; } }
@keyframes zk-spin { to { transform: rotate(360deg); } }
@keyframes zk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes zk-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  html.zk-js:not(.zk-still) .zk-rocket-float { animation: zk-hover 6s ease-in-out infinite; }
  html.zk-js:not(.zk-still) .zk-exhaust { transform-origin: 300px 350px; animation: zk-flame 1.2s ease-in-out infinite alternate; }
  html.zk-js:not(.zk-still) .zk-orbit-one { animation: zk-spin 34s linear infinite; }
  html.zk-js:not(.zk-still) .zk-orbit-two { animation: zk-spin 58s linear infinite reverse; }
  html.zk-js:not(.zk-still) .zk-dot { animation: zk-pulse 2.4s ease-in-out infinite; }
  html.zk-js:not(.zk-still) body.zk-public .alp-hero .alp-container > * { animation: zk-in .7s cubic-bezier(.2, .7, .2, 1) backwards; }
  html.zk-hidden * { animation-play-state: paused !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.zk *, body.zk *::before, body.zk *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  body.zk .alp-card:hover, body.zk .alp-btn:hover, body.zk .btn:hover { transform: none; }
  html { scroll-behavior: auto !important; }
}
html.zk-still body.zk *, html.zk-still body.zk *::before, html.zk-still body.zk *::after { animation: none !important; }
html.zk-still body.zk .alp-card:hover { transform: none; }

/* Systemfarben (Windows Hochkontrast): Deko weg, klare Kanten */
@media (forced-colors: active) {
  .zk-sky, .zk-visual { display: none; }
  body.zk .alp-btn-primary, body.zk .btn-primary { forced-color-adjust: none; color: ButtonText; background: ButtonFace; border: 2px solid ButtonText; }
  body.zk .zk-grad, body.zk .ict-hero-stat-num, body.zk :is(.rl-wrap, .lp-wrap, .ro-wrap, .tw-article) h1, body.zk .zk-fehler-code {
    -webkit-text-fill-color: currentColor; background: none; color: CanvasText;
  }
}

} /* /@media screen (Teil 17) */

@media print {
  /* Druck bleibt das bisherige weisse Dokument: Himmel, Pause-Knopf und Szene erscheinen nie. */
  .zk-sky, .zk-motion, .zk-visual { display: none !important; }
}

@media screen {

/* ============================== 18. Kontrast-Nachbesserungen (gemessen) ============================== */

body.zk :is([style^="color:#975a16" i], [style*=";color:#975a16" i], [style^="color:#822727" i], [style*=";color:#822727" i]) { color: var(--zk-warn) !important; }
body.zk :is([style^="color:#822727" i], [style*=";color:#822727" i]) { color: var(--zk-err) !important; }
body.zk :is([style^="background:#e2e8f0" i], [style*=";background:#e2e8f0" i], [style^="background:#cbd5e0" i], [style*=";background:#cbd5e0" i]) { background: rgba(255, 255, 255, .10) !important; }
/* Kennzeichen auf Cyan-Fläche: dunkle Schrift (vorher weiss auf hellem Blau) */
body.zk :is([style*="background:var(--alp-blue)"], [style*="background:var(--primary"], [style*="background:var(--pro-accent)"]) { color: var(--zk-btn-ink) !important; }
body.zk .cc-tab.active .cc-tab-n { background: rgba(4, 7, 14, .18); color: var(--zk-btn-ink); }
body.zk .admin-nav-section { opacity: 1; color: var(--zk-muted); }
body.zk footer p[style*="opacity"] { opacity: 1 !important; color: var(--zk-muted); }
body.zk .btn-coaching { color: var(--zk-btn-ink); background: var(--zk-grad); font-family: var(--zk-title); font-weight: 700; border-radius: 12px; }
body.zk .btn-coaching:hover { color: var(--zk-btn-ink); }

} /* /@media screen (Teil 18) */

@media screen {
/* Die Niveau-Pillen setzen ihre Farben per Skript als Inline-Stil (rgb(...) statt Hex). */
body.zk .kv-lv-pill { background: rgba(255, 255, 255, .05) !important; border-color: var(--zk-field-border) !important; color: var(--zk-lead) !important; }
body.zk .kv-lv-pill:is([style*="38, 156, 217"], [style*="#269cd9" i]) { background: var(--zk-cyan) !important; border-color: var(--zk-cyan) !important; color: var(--zk-btn-ink) !important; }
}

@media screen {
/* Sticky-Leisten unter der Kopfzeile statt dahinter */
body.zk .quiz-progress, body.zk .v2-progress { top: var(--zk-head-h, 76px); z-index: 40; }
body.zk .quiz-header { top: var(--zk-head-h, 68px); }
}

@media screen {
/* Tastatur-Fokus in Formularfeldern: die alten Regeln (outline:none) dürfen den Ring nie entfernen. */
body.zk :is(input:not([type=hidden]), select, textarea, button, a, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--zk-focus) !important; outline-offset: 2px;
}
body.zk :is(input:not([type=hidden]), select, textarea):focus-visible { outline-offset: 1px; }
body.zk :is(.alp-btn-primary, .btn-primary, .btn-coaching):focus-visible { outline-color: #fff !important; outline-offset: 4px; }
}

@media screen {
/* Arabisch (RTL): Buchstabenabstand zerstört die Schriftverbindungen; die Steuerzeichen-Texte bleiben ohne Sperrung. */
[dir="rtl"] body.zk :is(.alp-hero-label, .alp-section-label, .rl-fam, .lp-kicker, .tw-kicker, .section-tag, .quiz-progress-label, .res-sub, .zk-flight, .zk-coord, .zk-readout) { letter-spacing: normal; }
[dir="rtl"] body.zk .zk-visual { direction: ltr; }
[dir="rtl"] body.zk .zk-motion { right: auto; left: 14px; }
}

@media screen {
body.zk .kv-btn-primary:hover { background: var(--zk-grad); border-color: transparent; color: var(--zk-btn-ink); filter: brightness(1.07); }
html.zk-offscreen .zk-rocket-float, html.zk-offscreen .zk-exhaust, html.zk-offscreen .zk-orbit-one, html.zk-offscreen .zk-orbit-two, html.zk-offscreen .zk-dot { animation-play-state: paused !important; }
@media (min-width: 961px) {
  [dir="rtl"] .zk-sky--kopf .zk-canvas { -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.46) 40%, #000 76%); mask-image: linear-gradient(270deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.46) 40%, #000 76%); }
}
}