/* KI-Console · Design «Zukunft» – Design-Schicht im Stil von modernhosting.ch
   ------------------------------------------------------------------------
   Lädt NACH style.css (includes/header.php) und nur dort, wo das Design gilt:
   öffentliche Seiten, Anmeldung, Kunden-Console und Adminbereich (dort zusätzlich
   zukunft-admin.css). Nicht geladen für die Einbettungen bei Kunden (badge.php,
   report.php, Widget) – deren Ausgabe bleibt unverändert.

   Regeln, die hier eingehalten werden:
   - Alles steht in @media screen: Der Druck (PDF-Bericht aus der Console) fällt
     auf die bisherigen, geprüften Druckregeln aus style.css zurück.
   - body.zk als Präfix: gleich stark wie die body.alp-/body.console-brand-Regeln
     aus style.css; bei Gleichstand gewinnt diese Datei, weil sie später lädt.
   - Bewegung nur mit html.zk-motion (setzt assets/js/zukunft.js, wenn erlaubt).
     Ohne JavaScript, bei «Bewegung reduzieren» oder nach «Pause» steht alles.
   - Keine externen Quellen. Schriften lokal (SIL OFL, ../fonts/OFL-*.txt).
   - Kontraste nach WCAG AA gemessen; Werte in docs/DESIGN-PRUEFBERICHT.md. */

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

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Rajdhani (Titel) sowie Rubik und Oswald (nur Ukrainisch) – dieselben Dateien wie
   fonts.css. Auf Seiten mit Design «Zukunft» lädt header.php fonts.css nicht: So
   bleibt es bei drei blockierenden Stylesheets (Qualitätshinweis «render_blocking_css»
   im eigenen Scan greift erst ab vier). Rubik und Oswald liegen als variable
   Schriften vor (alle Gewichte in einer Datei). */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rajdhani-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rajdhani-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rajdhani-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rajdhani-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/rubik-400-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: 300 700;
  font-display: swap;
  src: url('../fonts/rubik-400-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: 300 700;
  font-display: swap;
  src: url('../fonts/rubik-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/oswald-500-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: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/oswald-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

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

@media screen {

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

:root {
  color-scheme: dark;

  /* Markenfarben modernhosting */
  --zk-violet: #a492ff;
  --zk-indigo: #6550db;
  --zk-cyan: #69e1f5;
  --zk-mint: #9af5d4;
  --zk-grad: linear-gradient(105deg, #a492ff, #69e1f5 65%, #9af5d4);
  --zk-hairline-grad: linear-gradient(90deg, transparent, #a492ff 22%, #69e1f5 55%, #9af5d4 78%, transparent);
  --zk-ink: #04070e;            /* Schrift auf dem Verlauf: 7.8–15.7:1 */

  /* Flächen */
  --zk-bg: #070a13;
  --zk-bg-deep: #04070e;
  --zk-band: #0a0f1b;
  --zk-surface: #0d1322;
  --zk-surface-2: #121b2d;
  --zk-surface-3: #17223a;
  --zk-card: linear-gradient(180deg, rgba(18, 27, 45, .86), rgba(13, 19, 34, .94));
  --zk-glass: rgba(13, 19, 34, .74);
  --zk-glass-strong: rgba(11, 17, 30, .94);
  --zk-soft: rgba(105, 225, 245, .055);
  --zk-soft-violet: rgba(164, 146, 255, .09);
  --zk-line: rgba(255, 255, 255, .09);
  --zk-line-strong: rgba(255, 255, 255, .18);

  /* Text (auf --zk-surface-2 gemessen) */
  --zk-text: #eef3ff;           /* 15.5:1 */
  --zk-lead: #c3cde0;           /* 10.8:1 */
  --zk-muted: #a6b2ca;          /* 8.1:1 */
  --zk-faint: #8b98b3;          /* 5.9:1 */
  --zk-link: #69e1f5;           /* 11.2:1 */
  --zk-violet-text: #b9adff;    /* 8.6:1 */

  /* Status (Text auf der eigenen Tönung mindestens 6.8:1) */
  --zk-good: #5fe0a0;
  --zk-good-bg: rgba(95, 224, 160, .1);
  --zk-good-line: rgba(95, 224, 160, .34);
  --zk-warn: #f6c35b;
  --zk-warn-bg: rgba(246, 195, 91, .1);
  --zk-warn-line: rgba(246, 195, 91, .34);
  --zk-bad: #ff8a8a;
  --zk-bad-bg: rgba(255, 138, 138, .1);
  --zk-bad-line: rgba(255, 138, 138, .36);
  --zk-info-bg: rgba(105, 225, 245, .08);
  --zk-info-line: rgba(105, 225, 245, .3);

  /* Formulare und Fokus: Feldrand 4.3:1 gegen die Karte (WCAG 1.4.11) */
  --zk-field: #0a0f1c;
  --zk-field-border: #6b7a99;
  --zk-field-hover: #8391ad;
  --zk-focus: #69e1f5;
  --zk-focus-ring: rgba(105, 225, 245, .2);

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

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

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

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

/* Ukrainisch: Inter, Rajdhani und JetBrains Mono liegen lokal ohne kyrillische
   Zeichen. Text deshalb in Rubik, Titel in Oswald (beide mit kyrillischem
   Schnitt in fonts.css), statt Schriften zu mischen. */
html[lang="uk"] {
  --zk-font: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --zk-title: 'Oswald', 'Rubik', system-ui, sans-serif;
  --zk-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* Die Tokens aus style.css und alpasana-design.css bekommen die dunklen Werte,
   damit alle Komponenten mitziehen. */
body.zk {
  --color-bg: #070a13;
  --color-surface: #0d1322;
  --color-ink: #eef3ff;
  --color-muted: #a6b2ca;
  --color-line: rgba(255, 255, 255, .11);
  --color-primary: #69e1f5;
  --color-primary-dark: #b9adff;
  --color-violet: #a492ff;
  --color-teal: #9af5d4;
  --color-green: #5fe0a0;
  --color-green-bg: rgba(95, 224, 160, .1);
  --color-yellow: #f6c35b;
  --color-yellow-bg: rgba(246, 195, 91, .1);
  --color-red: #ff8a8a;
  --color-red-bg: rgba(255, 138, 138, .1);
  --color-text: #eef3ff;
  --color-border: rgba(255, 255, 255, .11);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .32);
  --shadow-md: 0 22px 60px rgba(0, 0, 0, .45);
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, .4);
  --radius: 16px;
  --radius-sm: 10px;

  --alp-blue: #69e1f5;
  --alp-blue-bright: #9af5d4;
  --alp-blue-dark: #b9adff;
  --alp-dark: #04070e;
  --alp-dark-2: #0d1322;
  --alp-heading: #eef3ff;
  --alp-text: #b7c2d8;
  --alp-muted: #a6b2ca;
  --alp-bg: #0d1322;
  --alp-bg-soft: #0a0f1b;
  --alp-border: rgba(255, 255, 255, .11);
  --alp-font-head: var(--zk-title);
  --alp-font-body: var(--zk-font);
  --alp-font-display: var(--zk-title);
  --alp-radius: 10px;
  --alp-radius-lg: 16px;
  --alp-shadow: 0 18px 50px rgba(0, 0, 0, .42);
  --alp-shadow-sm: 0 10px 30px rgba(0, 0, 0, .32);

  background-color: #070a13;
  background-image:
    radial-gradient(ellipse 70% 42rem at 88% -6rem, rgba(52, 44, 130, .34), transparent 70%),
    radial-gradient(ellipse 60% 36rem at -10% 40rem, rgba(71, 206, 235, .05), transparent 70%);
  background-repeat: no-repeat;
  color: var(--alp-text);
  font-family: var(--zk-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

html { background: #070a13; scrollbar-color: #2a3654 #070a13; }
body.zk button,
body.zk input,
body.zk select,
body.zk textarea { font-family: inherit; }
body.zk ::selection { background: var(--zk-violet); color: var(--zk-ink); }

/* Titel in Rajdhani, gemischte Schreibung wie bei modernhosting (vorher Versalien). */
body.zk :is(h1, h2, h3, h4),
body.zk :is(.section-heading h2, .pricing-hero h1, .knowledge-hero h1, .report-header h1, .hero h1, .alp-h1, .alp-h2) {
  font-family: var(--zk-title);
  font-weight: 700;
  color: var(--zk-text);
  text-transform: none;
  letter-spacing: -.012em;
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: break-word;
}
body.zk h3 { line-height: 1.18; }
body.zk h4,
body.zk h5,
body.zk h6 { color: var(--zk-text); }
body.zk p { text-wrap: pretty; }
body.zk strong { color: var(--zk-text); }
html[lang="uk"] body.zk :is(h1, h2, h3, h4) { letter-spacing: .01em; }

body.zk a { color: var(--zk-link); }
body.zk a:hover { color: var(--zk-text); }
body.zk :is(main, .console-main, .alp-footer, .site-footer) p a:not(.button):not(.alp-btn) {
  text-decoration: underline;
  text-decoration-color: rgba(105, 225, 245, .45);
  text-underline-offset: 3px;
}

body.zk .lead,
body.zk .section-heading p,
body.zk .hero .lead { color: var(--zk-lead); }
body.zk .form-hint,
body.zk .dashboard-hint { color: var(--zk-muted); }

/* Eyebrow: Mono-Schrift wie die Telemetrie bei modernhosting. */
body.zk .eyebrow,
body.zk .alp-section-label,
body.zk .alp-hero-label {
  font-family: var(--zk-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zk-cyan);
}
body.zk .alp-hero-label::before { content: none; }

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

/* Sichtbarer Fokus: Cyan-Ring überall. */
body.zk :focus-visible { outline: 2px solid var(--zk-focus); outline-offset: 3px; }
body.zk :is(.button, .alp-btn):focus-visible {
  outline: 2px solid var(--zk-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--zk-focus-ring), 0 0 26px var(--zk-glow-cyan);
}
body.zk summary:focus-visible { outline-offset: 2px; border-radius: 6px; }
body.zk .skip-link { background: var(--zk-grad); color: var(--zk-ink); font-weight: 700; }

body.zk .container.narrow { text-align: center; }
body.zk hr { border-color: var(--zk-line); }
body.zk code,
body.zk kbd,
body.zk samp { font-family: var(--zk-mono); font-size: .9em; }
body.zk :not(pre) > code {
  color: var(--zk-mint);
  background: rgba(154, 245, 212, .07);
  border: 1px solid rgba(154, 245, 212, .16);
  border-radius: 5px;
  padding: .05em .35em;
}

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

body.zk .button,
body.zk .alp-btn {
  border-radius: 9px;
  font-family: var(--zk-font);
  font-weight: 700;
  letter-spacing: .005em;
  text-transform: none;
  transition: transform .25s, box-shadow .25s, background-color .25s, border-color .25s, color .25s;
}
body.zk .alp-btn { padding: 13px 24px; font-size: .95rem; }
body.zk .button-primary,
body.zk a.button-primary,
body.zk button.button-primary,
body.zk .button.button-primary,
body.zk.alp .button.button-primary,
body.zk .alp-btn-primary,
body.zk.alp .alp-btn-primary,
body.zk .logout-form button.alp-btn-primary {
  background: var(--zk-grad);
  color: var(--zk-ink);
  border: 1px solid transparent;
  box-shadow: 0 10px 30px var(--zk-glow-cyan);
}
body.zk :is(.button-primary, .alp-btn-primary):is(:hover, :focus-visible),
body.zk.alp .button.button-primary:is(:hover, :focus-visible),
body.zk.alp .alp-btn-primary:hover {
  background: var(--zk-grad);
  color: var(--zk-ink);
  box-shadow: 0 14px 38px var(--zk-glow-cyan), 0 0 32px var(--zk-glow-violet);
  transform: translateY(-2px);
}
body.zk .button-secondary,
body.zk a.button-secondary,
body.zk .button.button-secondary,
body.zk.alp .button.button-secondary,
body.zk.alp a.button-secondary,
body.zk.alp .button.button-light,
body.zk .alp-btn-outline,
body.zk.alp .alp-btn-outline,
body.zk .button-light,
body.zk .alp-btn-light,
body.zk.alp .alp-btn-light,
body.zk .cta-band .button-secondary,
body.zk .logout-form button.alp-btn {
  background: var(--zk-soft);
  border: 1px solid var(--zk-line-strong);
  color: var(--zk-text);
  box-shadow: none;
}
body.zk :is(.button-secondary, .alp-btn-outline, .button-light, .alp-btn-light):is(:hover, :focus-visible),
body.zk.alp :is(.button.button-secondary, a.button-secondary, .button.button-light):is(:hover, :focus-visible),
body.zk.alp :is(.alp-btn-outline, .alp-btn-light):hover,
body.zk .logout-form button.alp-btn:is(:hover, :focus-visible) {
  background: rgba(105, 225, 245, .1);
  border-color: var(--zk-cyan);
  color: var(--zk-text);
  box-shadow: 0 0 26px var(--zk-glow-cyan);
}
body.zk .button-danger,
body.zk a.button-danger,
body.zk .button.button-danger,
body.zk.alp .button.button-danger,
body.zk.alp a.button-danger {
  background: rgba(255, 138, 138, .12);
  border: 1px solid var(--zk-bad-line);
  color: #ffc2c2;
}
body.zk .button-danger:is(:hover, :focus-visible) { background: rgba(255, 138, 138, .2); color: #ffffff; }
body.zk .button[disabled],
body.zk .button[aria-disabled="true"] { opacity: .55; transform: none; box-shadow: none; cursor: not-allowed; }
body.zk .button-small { min-height: 40px; }
/* Lange Beschriftungen (FR/IT/ES) dürfen umbrechen statt die Seite zu verbreitern. */
@media (max-width: 600px) {
  body.zk .button,
  body.zk .alp-btn { white-space: normal; max-width: 100%; }
}

/* ============================== 5. Kopfzeile öffentlich ============================== */

body.zk .alp-topbar {
  position: relative;
  z-index: 31;
  background: var(--zk-bg-deep);
  border-bottom: 1px solid var(--zk-line);
  color: var(--zk-muted);
  font-family: var(--zk-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  padding: 6px 0;
}
body.zk .alp-topbar a { color: var(--zk-muted); }
body.zk .alp-topbar a:hover { color: var(--zk-text); }
body.zk .alp-topbar .alp-ico { color: var(--zk-cyan); }
body.zk .alp-topbar .ki-topbar-inner { align-items: center; }

/* Kopfzeile: dunkles Glas, dahinter Sterne und Punktenetz (zukunft.js).
   Ohne backdrop-filter und ohne overflow, damit das Handy-Menü (position: fixed)
   am Bildschirm bleibt und nicht an der Kopfzeile hängt. */
body.zk .alp-header {
  position: relative;
  z-index: 30;
  isolation: isolate;
  background: rgba(7, 10, 19, .9);
  border-bottom: 1px solid transparent;
}
body.zk .alp-header::after,
body.zk .site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--zk-hairline-grad);
  opacity: .6;
  pointer-events: none;
}
body.zk .alp-header .alp-container { min-height: 78px; }
/* Offenes Handy-Menü (position: fixed in der Kopfzeile) liegt über der Kontaktleiste,
   deren Sprachmenü sonst über der Kopfzeile aufklappen darf. */
body.zk.alp-menu-open .alp-header { z-index: 60; }

body.zk .alp-logo,
body.zk .alp-logo:hover { color: var(--zk-text); }
body.zk .alp-logo img { filter: drop-shadow(0 0 10px rgba(105, 225, 245, .35)); }
body.zk .ict-logo-text { color: var(--zk-text); }
body.zk .ict-logo-text span {
  color: var(--zk-cyan);
  font-family: var(--zk-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .16em;
  margin-top: 3px;
}

body.zk .alp-nav a {
  position: relative;
  font-family: var(--zk-font);
  font-size: .94rem;
  font-weight: 550;
  color: var(--zk-muted);
  padding: 6px 2px;
}
body.zk .alp-nav a:hover,
body.zk .alp-nav a.active,
body.zk .alp-nav a[aria-current="page"] { color: var(--zk-text); }
body.zk .alp-nav a::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--zk-grad);
  box-shadow: 0 0 10px rgba(105, 225, 245, .45);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s;
}
body.zk .alp-nav a:is(:hover, :focus-visible)::after { transform: scaleX(1); }

body.zk .user-chip {
  background: var(--zk-soft-violet);
  color: var(--zk-violet-text);
  border: 1px solid rgba(164, 146, 255, .28);
}
body.zk .ict-header-actions .alp-btn { padding: 10px 18px; min-height: 42px; }

/* Menüknopf und Handy-Menü */
body.zk .alp-nav-toggle,
body.zk .alp-nav-close {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--zk-line-strong);
  color: var(--zk-text);
}
body.zk .alp-nav-toggle:is(:hover, :focus-visible),
body.zk .alp-nav-close:is(:hover, :focus-visible) {
  background: rgba(105, 225, 245, .1);
  border-color: var(--zk-cyan);
  outline: 2px solid var(--zk-focus);
  outline-offset: 2px;
}
body.zk .alp-nav-backdrop { background: rgba(4, 7, 14, .72); }
/* Volle Navigation schon ab 1181 px (alpasana-design.css klappt bis 1300 px ein). */
@media (min-width: 1181px) and (max-width: 1300px) {
  body.zk .alp-nav { display: flex; gap: 20px; }
  body.zk .alp-nav-toggle,
  body.zk .alp-nav-close,
  body.zk .alp-nav-backdrop { display: none; }
  body.zk .ict-header-right {
    position: static;
    z-index: auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    padding: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  body.zk .ict-header-right .alp-nav { flex-direction: row; gap: 20px; }
  body.zk .ict-header-right .alp-nav a { padding: 6px 2px; border-bottom: 0; font-size: .94rem; }
  body.zk .ict-header-actions { flex-direction: row; align-items: center; }
  body.zk .ict-header-actions .alp-btn,
  body.zk .ict-header-actions form,
  body.zk .ict-header-actions form button { width: auto; }
  body.zk.alp-menu-open { overflow: visible; }
}
@media (max-width: 1180px) {
  body.zk .ict-header-right {
    background: linear-gradient(180deg, rgba(13, 19, 34, .98), rgba(7, 10, 19, .99));
    border-left: 1px solid var(--zk-line-strong);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
  }
  body.zk .ict-header-right .alp-nav a {
    border-bottom-color: var(--zk-line);
    color: var(--zk-text);
    font-family: var(--zk-title);
    font-weight: 600;
  }
  body.zk .ict-header-right .alp-nav a::after { display: none; }
}

/* Ohne JavaScript lässt sich das Handy-Menü nicht öffnen (main.js): dann stehen die
   Links unter dem Logo. zukunft-frueh.js setzt html.zk-js. */
@media (max-width: 1180px) {
  html:not(.zk-js) body.zk :is(.alp-nav-toggle, .alp-nav-close, .alp-nav-backdrop) { display: none; }
  html:not(.zk-js) body.zk .alp-header .alp-container { flex-wrap: wrap; row-gap: 6px; padding-bottom: 14px; }
  html:not(.zk-js) body.zk .ict-header-right {
    position: static;
    z-index: auto;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-left: 0;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  html:not(.zk-js) body.zk .ict-header-right .alp-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px 18px; }
  html:not(.zk-js) body.zk .ict-header-right .alp-nav a { padding: 6px 0; border-bottom: 0; font-size: 1rem; }
  html:not(.zk-js) body.zk .ict-header-actions { flex-direction: row; flex-wrap: wrap; }
  html:not(.zk-js) body.zk .ict-header-actions :is(.alp-btn, form, form button) { width: auto; }
}

/* Sprachmenü (Kopfzeile öffentlich und Console) */
body.zk .language-menu summary,
body.zk.alp .alp-topbar .language-menu summary {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--zk-line-strong);
  color: var(--zk-text);
  font-family: var(--zk-mono);
  font-size: .74rem;
  letter-spacing: .08em;
}
body.zk .language-menu summary:hover { border-color: var(--zk-cyan); box-shadow: 0 0 16px var(--zk-glow-cyan); }
body.zk .language-menu-list,
body.zk.alp .alp-topbar .language-menu-list {
  background: var(--zk-glass-strong);
  border: 1px solid var(--zk-line-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
body.zk .language-menu-list a { color: var(--zk-lead); }
body.zk .language-menu-list a:hover { background: rgba(255, 255, 255, .06); color: var(--zk-text); }
/* Aktive Sprache im Verlauf mit dunkler Schrift (7.8:1 statt 1.4:1 Weiss auf Cyan). */
body.zk .language-menu-list a.is-active,
body.zk .language-link.is-active,
body.zk.alp .alp-topbar .language-link.is-active {
  background: var(--zk-grad);
  color: var(--zk-ink);
}
body.zk .language-menu-list a:focus-visible,
body.zk .language-menu summary:focus-visible { outline: 2px solid var(--zk-focus); outline-offset: 2px; }

/* Pause-Knopf für alle Animationen (in der Kopfzeile jeder Seite). */
body.zk [data-zk-motion][hidden] { display: none !important; }
body.zk .zk-motion-toggle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid var(--zk-line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--zk-muted);
  cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
body.zk .zk-motion-toggle:hover { color: var(--zk-text); border-color: var(--zk-cyan); box-shadow: 0 0 16px var(--zk-glow-cyan); }
body.zk .zk-motion-toggle[aria-pressed="true"] { color: var(--zk-cyan); border-color: var(--zk-cyan); }
body.zk .zk-motion-ico {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 11px;
}
body.zk .zk-motion-ico::before,
body.zk .zk-motion-ico::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 1px;
  background: currentColor;
}
body.zk .zk-motion-ico::before { left: 1px; }
body.zk .zk-motion-ico::after { right: 1px; }
/* Gedrückt = pausiert: Abspiel-Dreieck */
body.zk [aria-pressed="true"] > .zk-motion-ico::after { display: none; }
body.zk [aria-pressed="true"] > .zk-motion-ico::before {
  left: 2px;
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-style: solid;
  border-width: 5.5px 0 5.5px 9px;
  border-color: transparent transparent transparent currentColor;
}
@media (pointer: coarse) {
  body.zk .zk-motion-toggle { width: 40px; height: 40px; min-width: 40px; }
}

/* ============================== 6. Kopfzeile Console ============================== */

body.zk .site-header {
  isolation: isolate;
  background: rgba(7, 10, 19, .86);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
body.zk .brand,
body.zk.console-brand .brand span { color: var(--zk-text); }
body.zk .brand-logo { filter: drop-shadow(0 0 10px rgba(105, 225, 245, .35)); }
body.zk .site-nav,
body.zk.console-brand .site-nav a { color: var(--zk-muted); }
body.zk.console-brand .site-nav a {
  font-family: var(--zk-font);
  font-size: .95rem;
  font-weight: 550;
}
body.zk.console-brand .site-nav a:hover { color: var(--zk-text); }
body.zk .auth-nav { color: var(--zk-muted); }
body.zk .auth-nav a { color: var(--zk-lead); }
body.zk .auth-nav a:hover { color: var(--zk-text); }
body.zk .logout-form button { color: var(--zk-muted); }
body.zk .logout-form button:is(:hover, :focus-visible) { color: var(--zk-text); }
body.zk .nav-shell .button-small { min-height: 40px; }
/* Auf dem Handy bricht die Console-Kopfzeile in mehrere Zeilen um (Bestand);
   klebend würde sie dort einen Viertel des Bildschirms verdecken. */
@media (max-width: 780px) {
  body.zk .site-header { position: relative; }
}

/* ============================== 7. Himmel: Canvas und Weltraum-Köpfe ============================== */

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

/* Weltraum-Kopf: Startseite, Landingpages, Preise, Scan, WordPress, Anmeldung. */
body.zk :is(.hero, .knowledge-hero, .pricing-hero, .report-hero, .wp-public-hero, .auth-section),
body.zk.alp :is(.hero, .knowledge-hero, .pricing-hero, .report-hero) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--zk-sky-base);
  background-image:
    radial-gradient(ellipse 58% 78% at 84% 8%, var(--zk-nebula-a), transparent 62%),
    radial-gradient(ellipse 46% 60% at 4% 100%, var(--zk-nebula-b), transparent 66%);
  color: var(--zk-lead);
}
/* Sterne als CSS-Rückfall ohne JavaScript; das Canvas übernimmt, sobald es läuft. */
body.zk :is(.hero, .knowledge-hero, .pricing-hero, .report-hero, .wp-public-hero, .auth-section)::before,
body.zk.alp .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(1.3px 1.3px at 23px 41px, var(--zk-star-css) 60%, transparent 62%),
    radial-gradient(1px 1px at 131px 97px, var(--zk-star-css) 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 77px 173px, var(--zk-star-css-2) 60%, transparent 62%),
    radial-gradient(1px 1px at 190px 22px, var(--zk-star-css) 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 59px 121px, var(--zk-star-css) 60%, transparent 62%);
  background-size: 211px 197px, 283px 251px, 331px 307px, 241px 263px, 173px 149px;
  opacity: .75;
  transition: opacity .6s;
}
body.zk .zk-sky-live::before,
body.zk.alp .zk-sky-live::before { opacity: 0; }
/* Feine Rasterlinien wie bei modernhosting und leuchtende Kante unten. */
body.zk :is(.hero, .knowledge-hero, .pricing-hero, .report-hero, .wp-public-hero, .auth-section)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--zk-hairline-grad) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 3px, var(--zk-scan) 3px 4px);
  opacity: .42;
}
/* Lesbarkeit: hinter dem Text wird das Netz weich abgedunkelt, an den Rändern
   bleibt es voll sichtbar. */
body.zk :is(.knowledge-hero, .pricing-hero, .wp-public-hero) > .zk-sky-canvas {
  -webkit-mask-image: radial-gradient(ellipse 42% 60% at 50% 48%, rgba(0, 0, 0, .34), #000 84%);
  mask-image: radial-gradient(ellipse 42% 60% at 50% 48%, rgba(0, 0, 0, .34), #000 84%);
}
body.zk .report-hero > .zk-sky-canvas,
body.zk .zk-hero-rakete > .zk-sky-canvas {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4) 40%, #000 64%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4) 40%, #000 64%);
}
body.zk .auth-section > .zk-sky-canvas {
  -webkit-mask-image: radial-gradient(ellipse 36% 60% at 50% 50%, rgba(0, 0, 0, .3), #000 80%);
  mask-image: radial-gradient(ellipse 36% 60% at 50% 50%, rgba(0, 0, 0, .3), #000 80%);
}
@media (max-width: 900px) {
  body.zk :is(.report-hero, .zk-hero-rakete) > .zk-sky-canvas {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .42) 55%, #000 82%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .42) 55%, #000 82%);
  }
}
body.zk :is(.hero, .knowledge-hero, .pricing-hero, .report-hero, .wp-public-hero, .auth-section) > * { position: relative; }
body.zk :is(.hero, .knowledge-hero, .pricing-hero, .report-hero, .wp-public-hero, .auth-section) > .zk-sky-canvas { position: absolute; }

/* Orbit-Ring als leise Deko rechts oben (reines CSS, kein Inhalt). */
body.zk :is(.knowledge-hero, .pricing-hero, .wp-public-hero) > :is(.container, .alp-container)::before {
  content: '';
  position: absolute;
  top: -84px;
  right: -230px;
  width: 470px;
  height: 470px;
  border: 1px solid var(--zk-line-strong);
  border-radius: 50%;
  transform: rotate(-28deg) scaleY(.42);
  pointer-events: none;
  opacity: .8;
}
/* Unsere Rakete auf dem Orbit: «KI-Sichtbarkeit hebt ab» (Bild-Datei, dekorativ). */
body.zk :is(.knowledge-hero, .pricing-hero, .wp-public-hero) > :is(.container, .alp-container)::after {
  content: '';
  position: absolute;
  top: -6px;
  right: 34px;
  width: 50px;
  height: 104px;
  background: url('../img/zk-rakete.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(105, 225, 245, .35));
  pointer-events: none;
}
@media (max-width: 1100px) {
  body.zk :is(.knowledge-hero, .pricing-hero, .wp-public-hero) > :is(.container, .alp-container)::before,
  body.zk :is(.knowledge-hero, .pricing-hero, .wp-public-hero) > :is(.container, .alp-container)::after { display: none; }
}

body.zk :is(.knowledge-hero, .pricing-hero, .report-hero, .wp-public-hero) h1 {
  font-size: clamp(2.3rem, 5.2vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -.02em;
}
body.zk.alp .knowledge-hero { padding-top: 72px; padding-bottom: 76px; }
body.zk .pricing-hero-actions span { color: var(--zk-muted); }

/* WordPress: Symbole und Schrittnummern wie die übrigen Kacheln. */
body.zk.alp.page-wordpress-plugin .wp-public-icon,
body.zk.alp.page-wordpress-plugin .wp-public-step-number {
  background: linear-gradient(135deg, rgba(164, 146, 255, .2), rgba(105, 225, 245, .12));
  border: 1px solid rgba(164, 146, 255, .32);
  color: var(--zk-text);
  font-family: var(--zk-mono);
  box-shadow: 0 0 18px rgba(105, 225, 245, .12);
}
body.zk.alp.page-wordpress-plugin .wp-public-reassurance { background: var(--zk-bg-deep); border-block: 1px solid var(--zk-line); }
body.zk.alp.page-wordpress-plugin .wp-public-reassurance-item { color: var(--zk-text); font-family: var(--zk-title); text-transform: none; }
body.zk.alp.page-wordpress-plugin .wp-public-hint { color: var(--zk-muted); }

/* WordPress: der Kopf mit dem grossen Punktlogo (style.css) wird zum Weltraum-Kopf
   wie die übrigen Landingpages; die Marke bleibt in der Kopfzeile. */
body.zk.alp.page-wordpress-plugin .wp-public-hero {
  background-color: var(--zk-sky-base);
  background-image:
    radial-gradient(ellipse 58% 78% at 84% 8%, var(--zk-nebula-a), transparent 62%),
    radial-gradient(ellipse 46% 60% at 4% 100%, var(--zk-nebula-b), transparent 66%);
}
body.zk.alp.page-wordpress-plugin .wp-public-hero::before { display: block; }
body.zk.alp.page-wordpress-plugin .wp-public-hero h1 { color: var(--zk-text); }
body.zk.alp.page-wordpress-plugin .wp-public-hero p { color: var(--zk-lead); }

/* Verzeichnis: der Kopf liegt in derselben Sektion wie die Einträge (Markup
   bleibt unverändert). Er bekommt ein stilles Sternenfeld als Glas-Tafel,
   ohne Bewegung hinter der Liste. */
body.zk.page-directory .directory-section > .container > .section-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: none;
  margin-bottom: 30px;
  padding: 34px 34px 28px;
  border: 1px solid rgba(164, 146, 255, .3);
  border-radius: 20px;
  background:
    radial-gradient(1.3px 1.3px at 23px 41px, var(--zk-star-css) 60%, transparent 62%) 0 0 / 211px 197px,
    radial-gradient(1px 1px at 131px 97px, var(--zk-star-css) 60%, transparent 62%) 0 0 / 283px 251px,
    radial-gradient(1.6px 1.6px at 77px 173px, var(--zk-star-css-2) 60%, transparent 62%) 0 0 / 331px 307px,
    radial-gradient(ellipse 60% 120% at 92% 0%, rgba(52, 44, 130, .55), transparent 70%),
    radial-gradient(ellipse 50% 90% at 0% 100%, rgba(71, 206, 235, .1), transparent 70%),
    #0a0f1c;
}
body.zk.page-directory .directory-section > .container > .section-heading::after {
  content: '';
  position: absolute;
  top: 22px;
  right: 34px;
  width: 44px;
  height: 90px;
  background: url('../img/zk-rakete.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(105, 225, 245, .35));
  pointer-events: none;
}
body.zk.page-directory .directory-section > .container > .section-heading > * { position: relative; max-width: 760px; }
body.zk.page-directory .directory-section h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
body.zk .directory-chip.is-active { background: var(--zk-grad); border-color: transparent; color: var(--zk-ink); }
body.zk .directory-band h2 { color: var(--zk-cyan); font-family: var(--zk-mono); font-size: .86rem; letter-spacing: .12em; }
@media (max-width: 640px) {
  body.zk.page-directory .directory-section > .container > .section-heading { padding: 26px 20px 22px; }
  body.zk.page-directory .directory-section > .container > .section-heading::after { display: none; }
}

/* WordPress: alp-hero mit Foto-Rahmen wird zum Weltraum-Kopf. */
body.zk .alp-hero { padding: 96px 0 88px; color: var(--zk-lead); }
body.zk .alp-hero::before { background: none; }
body.zk .alp-hero h1 { color: var(--zk-text); text-transform: none; }
body.zk .alp-hero p { opacity: 1; color: var(--zk-lead); }
body.zk .wp-public-version,
body.zk .wp-public-trust { color: var(--zk-muted); }

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

body.zk.alp .hero.section { padding: 34px 0 60px; }
body.zk .zk-hero-rakete .hero-grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 40px;
  min-height: 660px;
}
body.zk .zk-hero-rakete .hero-copy { position: relative; z-index: 2; }
body.zk .zk-hero-rakete .hero-copy > .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 7px 15px 7px 13px;
  border: 1px solid var(--zk-line-strong);
  border-radius: 999px;
  background: rgba(13, 19, 34, .62);
  line-height: 1.5;
}
/* Statt Blitz ein leuchtender Statuspunkt. */
body.zk .zk-hero-rakete .hero-copy > .eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--zk-mint);
  box-shadow: 0 0 12px var(--zk-mint);
}
body.zk .zk-hero-rakete h1,
body.zk.alp .zk-hero-rakete h1 {
  max-width: none;
  margin: 0 0 24px;
  font-size: clamp(2.6rem, 4.9vw, 4.35rem);
  line-height: 1.0;
  letter-spacing: -.026em;
}
body.zk .zk-hero-rakete .lead,
body.zk.alp .hero .lead { max-width: 600px; margin: 0; color: var(--zk-lead); font-size: 1.1rem; line-height: 1.7; }

/* Scan-Formular als Andock-Station */
body.zk .hero-form,
body.zk.alp .hero-form {
  position: relative;
  max-width: 660px;
  margin-top: 34px;
  padding: 20px;
  border: 1px solid rgba(164, 146, 255, .38);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 27, 45, .9), rgba(11, 17, 30, .94));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 60px -26px rgba(113, 82, 218, .55);
}
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  body.zk .hero-form { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
body.zk .hero-form::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 26px;
  right: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(105, 225, 245, .8), transparent);
  pointer-events: none;
}
body.zk .scan-form label {
  color: var(--zk-text);
  font-family: var(--zk-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.zk .scan-form input,
body.zk.alp .scan-form input {
  min-height: 54px;
  border: 1px solid var(--zk-field-border);
  border-radius: 10px;
  background: var(--zk-field);
  color: var(--zk-text);
  font-family: var(--zk-mono);
  font-size: .95rem;
}
body.zk .scan-form input::placeholder { color: var(--zk-faint); opacity: 1; }
body.zk .scan-form input:hover { border-color: var(--zk-field-hover); }
body.zk .scan-form input:focus,
body.zk.alp .scan-form input:focus {
  border-color: var(--zk-focus);
  box-shadow: 0 0 0 4px var(--zk-focus-ring), 0 0 22px var(--zk-glow-cyan);
}
body.zk .scan-form-row .button { min-height: 54px; white-space: nowrap; }
/* Untereinander (bis 820 px) darf das Feld nicht 260 px hoch werden:
   flex-basis gilt in der Spalte für die Höhe (Bestand in style.css). */
@media (max-width: 820px) {
  body.zk .scan-form-row input { flex: 0 0 auto; }
  body.zk .scan-form-row .button { white-space: normal; }
}
body.zk .captcha-svg { border-radius: 8px; background: #ffffff; }

/* Rechte Spalte: Szene mit Rakete, davor die Beispiel-Konsole als Telemetrie-Karte. */
body.zk .zk-hero-rakete .hero-panel {
  position: relative;
  min-width: 0;
  padding-top: 196px;
}
body.zk .zk-scene {
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 400px;
  pointer-events: none;
}
body.zk .zk-flight-label {
  position: absolute;
  top: 0;
  left: 6px;
  right: 6px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 11px/1.4 var(--zk-mono);
  letter-spacing: .15em;
  color: var(--zk-faint);
}
body.zk .zk-flight-label > span:last-child { margin-left: 12px; color: var(--zk-muted); }
body.zk .zk-crosshair { color: var(--zk-cyan); font-size: 22px; line-height: 1; }
body.zk .zk-rocket {
  position: absolute;
  top: -44px;
  right: -18px;
  width: 360px;
  height: 354px;
  overflow: visible;
}
body.zk .zk-orbit {
  position: absolute;
  top: 38px;
  right: -12px;
  width: 330px;
  height: 330px;
  transform: rotate(-28deg) scaleY(.5);
  pointer-events: none;
}
body.zk .zk-orbit-two { top: 6px; right: -42px; width: 400px; height: 400px; opacity: .45; transform: rotate(48deg) scaleY(.6); }
body.zk .zk-orbit-track { position: absolute; inset: 0; border: 1px solid var(--zk-line-strong); border-radius: 50%; }
body.zk .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);
}
body.zk .zk-coord {
  position: absolute;
  font: 500 11px/1.4 var(--zk-mono);
  letter-spacing: .1em;
  color: var(--zk-faint);
  white-space: nowrap;
}
body.zk .zk-coord-one { top: 64px; left: 6px; }
body.zk .zk-coord-two { top: 124px; left: 6px; color: var(--zk-muted); }
body.zk .zk-readout {
  position: absolute;
  left: 6px;
  top: 158px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1.4 var(--zk-mono);
  letter-spacing: .12em;
  color: var(--zk-muted);
}
body.zk .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);
}

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

/* Beispiel-Konsole als Telemetrie-Karte (Inhalt unverändert aus index.php). */
body.zk .mini-console {
  position: relative;
  z-index: 2;
  overflow: visible;
  border: 1px solid rgba(164, 146, 255, .45);
  border-radius: 18px;
  background: var(--zk-glass-strong);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  isolation: isolate;
}
@supports ((-webkit-backdrop-filter: blur(14px)) or (backdrop-filter: blur(14px))) {
  body.zk .mini-console { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgba(11, 17, 30, .86); }
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  body.zk .mini-console::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--zk-angle), var(--zk-line), var(--zk-violet), var(--zk-cyan), var(--zk-line) 45%, var(--zk-line) 65%, var(--zk-violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
}
body.zk .console-topbar {
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--zk-line);
  background: rgba(255, 255, 255, .025);
  border-radius: 18px 18px 0 0;
}
body.zk .console-topbar span { width: 7px; height: 7px; background: var(--zk-faint); }
body.zk .console-topbar span:nth-child(2) { background: var(--zk-violet); }
body.zk .console-topbar span:nth-child(3) { background: var(--zk-cyan); }
body.zk .console-score { padding: 22px 22px 18px; }
body.zk .score-label { color: var(--zk-muted); font-family: var(--zk-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; }
body.zk .console-score strong { color: var(--zk-text); font-family: var(--zk-title); font-size: 1.45rem; line-height: 1.1; }
body.zk .console-score small { color: var(--zk-muted); }
body.zk .console-list { gap: 8px; padding: 0 22px 22px; }
body.zk .console-row { border: 1px solid transparent; font-weight: 600; }
body.zk .console-row.good { background: var(--zk-good-bg); border-color: var(--zk-good-line); color: var(--zk-good); }
body.zk .console-row.warning { background: var(--zk-warn-bg); border-color: var(--zk-warn-line); color: var(--zk-warn); }
body.zk .console-row.danger { background: var(--zk-bad-bg); border-color: var(--zk-bad-line); color: var(--zk-bad); }
body.zk .console-row span { color: var(--zk-ink); }
body.zk .console-row.good span { background: var(--zk-good); }
body.zk .console-row.warning span { background: var(--zk-warn); }
body.zk .console-row.danger span { background: var(--zk-bad); }
body.zk .hero-panel-caption { color: var(--zk-muted); text-align: center; margin-top: 16px; }

/* Score-Ring (Beispiel-Konsole, öffentlicher Scan) */
body.zk .score-ring {
  --ring-color: var(--zk-good);
  background:
    radial-gradient(closest-side, #0b111e 70%, transparent 72%),
    conic-gradient(var(--ring-color) calc(var(--score) * 1%), rgba(255, 255, 255, .1) 0);
  box-shadow: 0 0 34px rgba(95, 224, 160, .16);
}
body.zk .score-ring.score-warning { --ring-color: var(--zk-warn); box-shadow: 0 0 34px rgba(246, 195, 91, .14); }
body.zk .score-ring.score-danger { --ring-color: var(--zk-bad); box-shadow: 0 0 34px rgba(255, 138, 138, .14); }
body.zk .score-ring span { color: var(--zk-text); font-family: var(--zk-title); font-weight: 700; }

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

@media (max-width: 1100px) {
  body.zk .zk-hero-rakete .hero-grid { gap: 26px; }
  body.zk .zk-rocket { width: 320px; height: 315px; }
  body.zk .zk-orbit { width: 290px; height: 290px; }
  body.zk .zk-orbit-two { width: 350px; height: 350px; }
}
@media (max-width: 960px) {
  body.zk .zk-hero-rakete .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  body.zk .zk-hero-rakete .hero-panel { width: 100%; max-width: 560px; margin: 0 auto; padding-top: 176px; }
  body.zk .zk-hero-rakete .zk-planet { left: 50%; }
}
@media (max-width: 560px) {
  body.zk.alp .hero.section { padding: 18px 0 44px; }
  body.zk .zk-hero-rakete h1,
  body.zk.alp .zk-hero-rakete h1 { font-size: clamp(2.2rem, 10.2vw, 2.9rem); max-width: none; }
  body.zk .zk-hero-rakete .hero-copy > .eyebrow { font-size: .64rem; letter-spacing: .1em; padding: 6px 12px 6px 11px; margin-bottom: 18px; }
  body.zk .zk-hero-rakete .lead { font-size: 1.02rem; }
  body.zk .hero-form { padding: 16px; margin-top: 26px; }
  body.zk .zk-hero-rakete .hero-panel { padding-top: 150px; }
  body.zk .zk-scene { height: 300px; }
  body.zk .zk-rocket { top: -34px; right: -34px; width: 250px; height: 246px; }
  body.zk .zk-orbit { top: 26px; right: -26px; width: 220px; height: 220px; }
  body.zk .zk-orbit-two { top: 4px; right: -46px; width: 270px; height: 270px; }
  body.zk .zk-flight-label { font-size: 10px; letter-spacing: .1em; }
  body.zk .zk-coord { font-size: 10px; letter-spacing: .06em; }
  body.zk .zk-coord-one { top: 46px; }
  body.zk .zk-coord-two { display: none; }
  body.zk .zk-readout { top: 84px; font-size: 10px; }
  body.zk .console-score { padding: 18px 16px 14px; gap: 14px; }
  body.zk .console-list { padding: 0 16px 16px; }
}

/* Leiste unter dem Hero */
body.zk .trust-strip,
body.zk.alp .trust-strip {
  border-block: 1px solid var(--zk-line);
  background: var(--zk-bg-deep);
}
body.zk .trust-grid div,
body.zk.alp .trust-grid div { border-color: var(--zk-line); }
body.zk .trust-grid strong,
body.zk.alp .trust-grid strong { color: var(--zk-text); font-family: var(--zk-title); font-size: 1.1rem; letter-spacing: 0; }
body.zk .trust-grid span,
body.zk.alp .trust-grid span { color: var(--zk-muted); }
body.zk .trust-grid strong::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 9px 3px 0;
  border-radius: 50%;
  background: var(--zk-cyan);
  box-shadow: 0 0 10px var(--zk-cyan);
}

/* Klebende Scan-Leiste (erscheint nach dem Hero) */
body.zk .sticky-scan-cta-inner {
  border: 1px solid rgba(164, 146, 255, .4);
  border-radius: 12px;
  background: rgba(11, 17, 30, .94);
  color: var(--zk-text);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 50px -20px rgba(105, 225, 245, .4);
}
@supports ((-webkit-backdrop-filter: blur(14px)) or (backdrop-filter: blur(14px))) {
  body.zk .sticky-scan-cta-inner { background: rgba(11, 17, 30, .84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
body.zk .sticky-scan-cta-dismiss { color: var(--zk-muted); border-color: var(--zk-line-strong); }
body.zk .sticky-scan-cta-dismiss:is(:hover, :focus-visible) { color: var(--zk-text); background: rgba(255, 255, 255, .08); outline-color: var(--zk-focus); }

/* ============================== 9. Abschnitte und Karten ============================== */

body.zk .section-muted,
body.zk.alp .section-muted,
body.zk .alp-section--soft,
body.zk .pricing-section,
body.zk .indexnow-section {
  background: var(--zk-band);
  border-block: 1px solid var(--zk-line);
}
body.zk .alp-section--dark { background: var(--zk-bg-deep); }
body.zk .section-next a,
body.zk .inline-next a {
  color: var(--zk-cyan);
  font-family: var(--zk-mono);
  font-size: .8rem;
  letter-spacing: .06em;
}
body.zk .section-next a:hover { color: var(--zk-text); }

/* Karten: Glas mit feinem Rand; die Flächen sind deckend genug für Lesetext. */
body.zk :is(.step-card, .feature-card, .price-card, .checks-card, .score-card, .empty-state, .form-card, .table-card, .tip-card,
  .legal-card, .directory-card, .console-panel, .website-summary-card, .onboarding-card, .social-proof, .dashboard-stat-tile,
  .setup-progress-panel, .setup-step, .check-category, .benchmark-line-chart, .crawler-table-card, .glossary-term,
  .benchmark-row, .retention-card, .share-row, .chart-card, .state-ai-finding, .family-card,
  .scan-lead-panel, .print-report-action, .open-recommendations-summary, .quality-hints, .mail-brand-preview,
  .suggestion-item, .score-benchmark, .report-visitor-cta, .tracking-choice-card, .locked-card, .stat-card, .alp-card,
  .agent-card, .crawler-answer-card, .crawler-robots-card, .generator-criteria-card, .ki-index-bar-card, .state-ai-embed-card,
  .wp-public-step, .wp-public-benefit, .dashboard-section, .website-detail-card-badge, .website-detail-card-benchmark,
  .website-detail-card-directory, .website-detail-card-share, .website-detail-card-visibility, .feature-teaser-card, .toast),
body.zk.alp :is(.step-card, .feature-card, .price-card, .form-card, .legal-card, .directory-card, .score-card, .checks-card, .locked-card),
body.zk .scan-form.compact {
  background: var(--zk-card);
  border: 1px solid var(--zk-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 40px rgba(0, 0, 0, .22);
  color: var(--zk-lead);
}
body.zk :is(.step-card, .feature-card, .price-card):hover,
body.zk.alp :is(.step-card, .feature-card, .price-card):hover {
  border-color: rgba(164, 146, 255, .5);
  box-shadow: 0 0 0 1px rgba(164, 146, 255, .14), var(--zk-shadow), 0 0 44px rgba(105, 225, 245, .08);
}
body.zk :is(.step-card, .feature-card, .legal-card, .price-card, .form-card, .console-panel, .checks-card, .score-card, .tip-card, .glossary-term, .agent-card) :is(p, li) { color: var(--zk-lead); }

/* Lichtkegel folgt dem Zeiger (zukunft.js setzt --zk-x/--zk-y, nur feiner Zeiger). */
body.zk :is(.step-card, .feature-card, .price-card) { position: relative; isolation: isolate; overflow: hidden; }
body.zk :is(.step-card, .feature-card, .price-card)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--zk-x, 50%) var(--zk-y, 0%), rgba(105, 225, 245, .1), transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}
body.zk :is(.step-card, .feature-card, .price-card):is(:hover, :focus-within)::after { opacity: 1; }

body.zk .step-number,
body.zk .feature-icon,
body.zk.alp .step-number,
body.zk.alp .feature-icon {
  background: linear-gradient(135deg, rgba(164, 146, 255, .2), rgba(105, 225, 245, .12));
  border: 1px solid rgba(164, 146, 255, .32);
  color: var(--zk-text);
  font-family: var(--zk-mono);
  font-weight: 600;
  box-shadow: 0 0 18px rgba(105, 225, 245, .12);
}
body.zk .step-card h3,
body.zk .feature-card h3 { font-size: 1.35rem; }
body.zk .kiwissen-callout {
  background: var(--zk-info-bg);
  border: 1px solid var(--zk-info-line);
  border-left: 3px solid var(--zk-cyan);
  color: var(--zk-text);
}
body.zk .kiwissen-card.is-live {
  border-color: rgba(105, 225, 245, .45);
  box-shadow: 0 0 0 1px rgba(105, 225, 245, .12), 0 14px 40px rgba(0, 0, 0, .22);
}
body.zk .kiwissen-honesty,
body.zk .engine-list { color: var(--zk-muted); }
body.zk .engine-list { font-family: var(--zk-mono); font-size: .85rem; letter-spacing: .03em; }

/* FAQ */
body.zk .faq-list details,
body.zk.alp .faq-list details {
  background: var(--zk-card);
  border: 1px solid var(--zk-line);
  box-shadow: none;
}
body.zk .faq-list details[open] { border-color: rgba(164, 146, 255, .35); }
body.zk .faq-list summary { color: var(--zk-text); font-weight: 650; }
body.zk .faq-list summary::marker { color: var(--zk-cyan); }
body.zk .faq-list p { color: var(--zk-lead); }

/* CTA-Band: Nebel mit Verlaufskante */
body.zk .cta-band,
body.zk.alp .cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(164, 146, 255, .38);
  background:
    radial-gradient(ellipse 60% 120% at 90% 0%, rgba(52, 44, 130, .6), transparent 70%),
    radial-gradient(ellipse 50% 90% at 0% 100%, rgba(71, 206, 235, .12), transparent 70%),
    #0b1120;
  color: var(--zk-lead);
}
body.zk .cta-band::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--zk-hairline-grad);
  opacity: .8;
}
body.zk .cta-band h2 { color: var(--zk-text); }
body.zk .cta-band p,
body.zk .cta-band .eyebrow { color: var(--zk-lead); }
body.zk .cta-band .eyebrow { color: var(--zk-cyan); }
body.zk .cta-band .button-light { background: var(--zk-grad); color: var(--zk-ink); border-color: transparent; }
body.zk .cta-checklist li { color: var(--zk-lead); }

/* Weitere Karten, Hinweise und kleine Flächen. Nur einfache Klassen in der
   :is()-Liste, damit die Liste nicht die Spezifität eines zusammengesetzten
   Selektors erbt und spätere Einzelregeln schlägt. */
body.zk :is(.setup-step-number, .setup-status, .score-placeholder, .directory-chip, .bot-token, .glossary-anchor, .pill,
  .share-button, .chart-empty, .freshness-notice, .freshness-notice-panel, .ai-tip-content, .state-ai-embed-preview-frame,
  .popular-badge, .status-badge-muted, .token-row, .copy-box, .directory-industry, .legal-review-banner, .demo-notice,
  .ki-index-demo-note, .state-ai-preview-note, .generator-criteria-note, .generator-table-note, .plain-help),
body.zk :is(.knowledge-related, .glossary-index, .crawler-siblings, .stats-filter, .machine-links) a,
body.zk .onboarding-list li span,
body.zk .crawler-radar li:nth-child(odd),
body.zk .quality-hints.is-locked {
  background: rgba(255, 255, 255, .045);
  border-color: var(--zk-line-strong);
  color: var(--zk-lead);
}
body.zk :is(.glossary-anchor, .share-button):is(:hover, :focus-visible),
body.zk :is(.knowledge-related, .glossary-index, .crawler-siblings, .stats-filter, .machine-links) a:is(:hover, :focus-visible) {
  background: rgba(105, 225, 245, .1);
  border-color: var(--zk-cyan);
  color: var(--zk-text);
}
body.zk .stats-filter a.is-active,
body.zk .website-switcher a.is-active,
body.zk .stats-filter a[aria-current] {
  background: var(--zk-grad);
  border-color: transparent;
  color: var(--zk-ink);
}
body.zk .popular-badge { background: var(--zk-grad); color: var(--zk-ink); border: 0; font-weight: 700; }
body.zk .knowledge-related span { color: var(--zk-muted); font-family: var(--zk-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
body.zk .ki-index-demo-badge { background: var(--zk-warn-bg); color: var(--zk-warn); border: 1px solid var(--zk-warn-line); }
body.zk .directory-industry { color: var(--zk-good); border-color: var(--zk-good-line); background: var(--zk-good-bg); }
body.zk .glossary-definition,
body.zk .crawler-detail-facts dd,
body.zk .crawler-detail-facts dt { color: var(--zk-lead); }
body.zk .crawler-detail-facts dt { color: var(--zk-muted); }

/* Code und Kopierfelder */
body.zk :is(pre, .code-box, .legal-pre, .tracker-code-box, .state-ai-embed-card textarea) {
  background: #060a14;
  border: 1px solid var(--zk-line-strong);
  color: #d6e2ff;
  font-family: var(--zk-mono);
}
body.zk .copy-box-label { color: var(--zk-muted); font-family: var(--zk-mono); font-size: .74rem; letter-spacing: .1em; }

/* ============================== 10. Preise ============================== */

body.zk .price-card.highlighted,
body.zk.alp .price-card.highlighted {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(20, 29, 50, .98), rgba(13, 19, 34, .98)) padding-box,
    linear-gradient(140deg, var(--zk-violet), var(--zk-cyan) 60%, var(--zk-mint)) border-box;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 0 70px -24px rgba(105, 225, 245, .45);
}
body.zk .price-card h3 { color: var(--zk-text); }
body.zk .price,
body.zk .price strong { color: var(--zk-text); font-family: var(--zk-title); }
body.zk .price small,
body.zk .tier-description,
body.zk .pricing-microcopy,
body.zk.alp .price-card.highlighted .pricing-microcopy { color: var(--zk-muted); }
body.zk .price-card li { color: var(--zk-lead); }
body.zk .price-card li::before { color: var(--zk-mint); background: none; }
body.zk .pricing-explainer {
  background: var(--zk-info-bg);
  border: 1px solid var(--zk-info-line);
  color: var(--zk-lead);
}
body.zk .comparison-scroll { background: var(--zk-surface); border-color: var(--zk-line); }
body.zk .pricing-note h2 { color: var(--zk-text); }

/* ============================== 11. Tabellen ============================== */

body.zk table { color: var(--zk-lead); }
body.zk :is(th, td) { border-color: var(--zk-line); }
body.zk thead th,
body.zk .pricing-comparison-table thead th {
  background: rgba(255, 255, 255, .04);
  color: var(--zk-text);
  font-family: var(--zk-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.zk tbody th { color: var(--zk-text); }
body.zk tbody tr:hover > * { background: rgba(105, 225, 245, .035); }
body.zk .pricing-comparison-table tbody th span { color: var(--zk-muted); }
body.zk .crawler-timeline-grid th:first-child,
body.zk .crawler-timeline-grid td:first-child { background: var(--zk-surface); }
@media (max-width: 720px) {
  body.zk .mobile-stack-table tr { background: var(--zk-surface); border-color: var(--zk-line); }
}

/* ============================== 12. Formulare ============================== */

body.zk .stacked-form label,
body.zk label { color: var(--zk-text); }
body.zk .stacked-form input:not([type="checkbox"]):not([type="radio"]),
body.zk .stacked-form select,
body.zk .stacked-form textarea,
body.zk.alp input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
body.zk.alp select,
body.zk.alp textarea,
body.zk.console-brand input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
body.zk.console-brand select,
body.zk.console-brand textarea {
  background: var(--zk-field);
  border: 1px solid var(--zk-field-border);
  color: var(--zk-text);
}
body.zk :is(input, select, textarea):hover { border-color: var(--zk-field-hover); }
body.zk :is(input, select, textarea):focus,
body.zk.alp :is(input, select, textarea):focus,
body.zk .stacked-form :is(input, select, textarea):focus {
  border-color: var(--zk-focus);
  box-shadow: 0 0 0 4px var(--zk-focus-ring), 0 0 22px var(--zk-glow-cyan);
}
/* Sichtbarer Tastaturfokus auch dort, wo style.css «outline: none» setzt
   (.scan-form input, .stacked-form …); bleibt auch unter forced-colors. */
body.zk :is(input, select, textarea):focus-visible,
body.zk.alp :is(input, select, textarea):focus-visible,
body.zk.console-brand :is(input, select, textarea):focus-visible,
body.zk .stacked-form :is(input, select, textarea):focus-visible,
body.zk .scan-form input:focus-visible {
  outline: 2px solid var(--zk-focus);
  outline-offset: 1px;
}
body.zk :is(input, textarea)::placeholder { color: var(--zk-faint); opacity: 1; }
body.zk select option { background: var(--zk-surface); color: var(--zk-text); }
body.zk input[type="checkbox"],
body.zk input[type="radio"] { accent-color: var(--zk-cyan); }
/* Autofill dunkel halten */
body.zk input:-webkit-autofill,
body.zk input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--zk-text);
  caret-color: var(--zk-text);
  box-shadow: 0 0 0 40px #0b1120 inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
body.zk .checkbox-row,
body.zk .checkbox-row label { color: var(--zk-lead); }
body.zk .character-counter { color: var(--zk-muted); font-family: var(--zk-mono); }
/* Ankreuzfelder in der Console (Kunden und Admin): sichtbarer Rand statt des fast
   unsichtbaren nativen Felds auf dunklem Grund; angekreuzt im Markenverlauf.
   Unter forced-colors bleibt das native Feld. */
body.zk.console-brand input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--zk-field-border);
  border-radius: 6px;
  background: var(--zk-field);
  vertical-align: middle;
}
body.zk.console-brand input[type="checkbox"]:hover { border-color: var(--zk-field-hover); }
body.zk.console-brand input[type="checkbox"]:checked { background: var(--zk-grad); border-color: var(--zk-violet); }
body.zk.console-brand input[type="checkbox"]:checked::after {
  content: '';
  width: 5px;
  height: 10px;
  border: solid var(--zk-ink);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg);
}
@media (forced-colors: active) {
  body.zk.console-brand input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; width: auto; height: auto; }
  body.zk.console-brand input[type="checkbox"]::after,
  body.zk.console-brand input[type="checkbox"]:checked::after { content: none; }
}

/* ============================== 13. Meldungen, Badges, Status ============================== */

body.zk .alert { border: 1px solid var(--zk-line-strong); background: rgba(255, 255, 255, .04); color: var(--zk-text); }
body.zk .alert-error { background: var(--zk-bad-bg); border-color: var(--zk-bad-line); color: #ffd0d0; }
body.zk .alert-success { background: var(--zk-good-bg); border-color: var(--zk-good-line); color: #c9f7de; }
body.zk .alert-info { background: var(--zk-info-bg); border-color: var(--zk-info-line); color: #cdf6fc; }
body.zk .alert-warning { background: var(--zk-warn-bg); border-color: var(--zk-warn-line); color: #fde7b5; }
body.zk .alert a { color: inherit; text-decoration: underline; }
body.zk .toast { color: var(--zk-text); border-color: var(--zk-line-strong); }

/* Support-Simulation (Admin sieht die Console als Kunde): bleibt ein deutliches
   Warnband, jetzt im dunklen Stil statt hellem Rot; Schrift weiss auf Dunkelrot (> 9:1). */
body.zk .impersonation-banner {
  background: linear-gradient(90deg, #6f2a2a, #4a1f3d);
  border-bottom: 1px solid var(--zk-bad-line);
  color: #fff;
  font-family: var(--zk-font);
}
body.zk .impersonation-banner strong {
  color: #ffd0d0;
  font-family: var(--zk-mono);
  font-size: .8rem;
  font-weight: 600;
}
body.zk .impersonation-banner .button {
  background: var(--zk-grad);
  border-color: var(--zk-violet);
  color: var(--zk-ink);
}

/* Prüfzeilen (Scan, Report in der Console): Tönung läuft ins Dunkle statt ins Weisse. */
body.zk .check-row { border-color: var(--zk-line); }
body.zk .status-green { background: linear-gradient(90deg, rgba(95, 224, 160, .1), rgba(13, 19, 34, 0) 42%); }
body.zk .status-yellow { background: linear-gradient(90deg, rgba(246, 195, 91, .1), rgba(13, 19, 34, 0) 42%); }
body.zk .status-red { background: linear-gradient(90deg, rgba(255, 138, 138, .11), rgba(13, 19, 34, 0) 42%); }
body.zk .check-row.status-error,
body.zk .status-error { background: rgba(255, 255, 255, .03); }
body.zk .check-row.status-error .check-status,
body.zk .check-row.status-error .status-badge { background: rgba(255, 255, 255, .1); color: var(--zk-lead); }
body.zk .check-status { color: var(--zk-ink); }
body.zk .check-copy strong,
body.zk .check-copy h3,
body.zk .check-copy h4 { color: var(--zk-text); }
body.zk .check-copy p { color: var(--zk-lead); }
/* Status-Chips: getönte Fläche, farbige Schrift, feiner Rand (statt Weiss auf Grün 1.7:1). */
body.zk .status-badge {
  border: 1px solid var(--zk-line-strong);
  background: rgba(255, 255, 255, .07);
  color: var(--zk-lead);
  font-family: var(--zk-mono);
  font-weight: 600;
  letter-spacing: .02em;
}
body.zk .status-green .status-badge,
body.zk .status-badge.status-ok,
body.zk .status-badge-green { background: var(--zk-good-bg); border-color: var(--zk-good-line); color: var(--zk-good); }
body.zk .status-yellow .status-badge,
body.zk .status-badge.status-warn,
body.zk .status-badge-amber { background: var(--zk-warn-bg); border-color: var(--zk-warn-line); color: var(--zk-warn); }
body.zk .status-red .status-badge,
body.zk .status-badge.status-fail,
body.zk .status-badge-red { background: var(--zk-bad-bg); border-color: var(--zk-bad-line); color: var(--zk-bad); }
body.zk .status-badge-muted { background: rgba(255, 255, 255, .06); color: var(--zk-lead); }
body.zk .technical-details summary,
body.zk .check-category .technical-details summary {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--zk-line);
  border-radius: 8px;
  color: var(--zk-cyan);
}
body.zk .check-category .technical-details summary:hover { border-color: rgba(105, 225, 245, .45); color: var(--zk-text); }
body.zk .technical-details { color: var(--zk-lead); }
body.zk .check-category > summary {
  background: rgba(255, 255, 255, .035);
  color: var(--zk-text);
  border-bottom: 1px solid var(--zk-line);
}
body.zk .locked-detail,
body.zk .locked-card span { color: var(--zk-muted); }

body.zk .score-delta { background: var(--zk-info-bg); color: var(--zk-cyan); }
body.zk .score-delta.is-positive { background: var(--zk-good-bg); color: var(--zk-good); }
body.zk .score-delta.is-negative { background: var(--zk-bad-bg); color: var(--zk-bad); }
body.zk .trend-up { background: var(--zk-good-bg); color: var(--zk-good); }
body.zk .trend-down { background: var(--zk-warn-bg); color: var(--zk-warn); }
body.zk .trend-flat { background: rgba(255, 255, 255, .05); color: var(--zk-lead); }
body.zk .source-badge { background: rgba(105, 225, 245, .1); color: #bff4fc; border: 1px solid rgba(105, 225, 245, .25); }
body.zk .source-badge.source-tracker { background: var(--zk-good-bg); color: #bff5d9; border-color: var(--zk-good-line); }
body.zk .source-badge.source-self { background: var(--zk-soft-violet); color: #dcd5ff; border-color: rgba(164, 146, 255, .32); }

/* Fortschritt im Markenverlauf */
body.zk .progress-bar { background: rgba(255, 255, 255, .08); }
body.zk .progress-bar > span,
body.zk .progress-bar span { background: var(--zk-grad); box-shadow: 0 0 12px rgba(105, 225, 245, .35); }
body.zk .progress-copy,
body.zk .progress-copy strong { color: var(--zk-text); }
body.zk .progress-copy span { color: var(--zk-muted); }

/* Score-Donut (Console, Scan) */
body.zk .score-donut { --score-stroke: var(--zk-bad); }
body.zk .score-donut.score-warning { --score-stroke: var(--zk-warn); }
body.zk .score-donut.score-good { --score-stroke: var(--zk-good); }
body.zk .score-donut-bg { stroke: rgba(255, 255, 255, .1); }
body.zk .score-donut-value { filter: drop-shadow(0 0 6px rgba(95, 224, 160, .35)); }
body.zk .score-donut span { color: var(--zk-text); font-family: var(--zk-title); }

/* ============================== 14. Scan-Ergebnis (öffentlich) ============================== */

body.zk .report-header h1,
body.zk.alp .report-header h1 { color: var(--zk-text); }
body.zk .scan-form.compact { background: var(--zk-glass-strong); border-color: rgba(164, 146, 255, .38); }
body.zk .demo-notice { background: var(--zk-info-bg); border-color: var(--zk-info-line); color: #cdf6fc; }
body.zk .scan-score-sentence { color: var(--zk-text); }
body.zk .next-action { border-left-color: var(--zk-cyan); }
body.zk .next-action span,
body.zk .quality-hints-head span { color: var(--zk-cyan); font-family: var(--zk-mono); letter-spacing: .1em; }
body.zk .next-action p,
body.zk .quality-hints li span,
body.zk .open-recommendations-summary li span,
body.zk .print-report-action p,
body.zk .report-visitor-cta > p,
body.zk .mail-brand-preview p { color: var(--zk-lead); }
body.zk .score-card p,
body.zk .score-meta { color: var(--zk-muted); }

/* ============================== 15. Anmeldung und Registrierung ============================== */

body.zk .auth-section {
  min-height: calc(100vh - 150px);
  min-height: calc(100dvh - 150px);
  display: flex;
  align-items: center;
  padding: 64px 0 88px;
}
body.zk .auth-container { width: min(100% - 32px, 540px); position: relative; }
/* Andock-Rahmen: vier Eckwinkel wie bei einer Zielerfassung. */
body.zk .auth-container::before {
  content: '';
  position: absolute;
  inset: -12px;
  z-index: 0;
  pointer-events: none;
  --zk-corner: rgba(105, 225, 245, .7);
  background:
    linear-gradient(var(--zk-corner), var(--zk-corner)) left top / 20px 1px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) left top / 1px 20px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) right top / 20px 1px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) right top / 1px 20px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) left bottom / 20px 1px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) left bottom / 1px 20px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) right bottom / 20px 1px no-repeat,
    linear-gradient(var(--zk-corner), var(--zk-corner)) right bottom / 1px 20px no-repeat;
  opacity: .8;
}
/* Kleine Rakete oben rechts an der Karte (dekorativ, Bild-Datei). */
body.zk .auth-container::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -14px;
  z-index: 2;
  width: 54px;
  height: 100px;
  background: url('../img/zk-rakete.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(105, 225, 245, .3));
  pointer-events: none;
}
body.zk .auth-section .form-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding: 34px 32px 28px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(18, 27, 45, .94), rgba(10, 15, 27, .96));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5), 0 0 80px -30px rgba(113, 82, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
@supports ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
  body.zk .auth-section .form-card {
    background: linear-gradient(180deg, rgba(18, 27, 45, .84), rgba(10, 15, 27, .9));
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
  }
}
/* Irisierender Rand; der helle Abschnitt folgt dem Zeiger (--zk-edge aus zukunft.js). */
body.zk .auth-section .form-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--zk-edge), rgba(255, 255, 255, .1), var(--zk-violet) 8%, var(--zk-cyan) 16%, var(--zk-mint) 21%, rgba(255, 255, 255, .1) 34%, rgba(255, 255, 255, .06) 70%, rgba(164, 146, 255, .35) 88%, rgba(255, 255, 255, .1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Scanlinie beim Einblenden */
body.zk .auth-section .form-card::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--zk-cyan), var(--zk-mint), transparent);
  box-shadow: 0 0 18px var(--zk-cyan);
  opacity: 0;
  pointer-events: none;
}
body.zk .auth-section .form-card h1 { font-size: clamp(2rem, 4.4vw, 2.6rem); line-height: 1.04; margin-bottom: 12px; }
body.zk .auth-section .form-card > p { color: var(--zk-lead); }
body.zk .auth-section .stacked-form { gap: 10px; }
body.zk .auth-section .stacked-form label {
  margin-top: 6px;
  color: var(--zk-muted);
  font-family: var(--zk-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.zk .auth-section .stacked-form input:not([type="checkbox"]):not([type="radio"]) { min-height: 50px; font-size: 16px; }
body.zk .auth-section .stacked-form .button-primary { min-height: 52px; margin-top: 12px; }
/* SSO-Block (Admins): Glas mit Verlaufsrand wie der SSO-Knopf im Power-Panel-Login.
   Klasse .auth-sso und Markup bleiben unverändert. */
body.zk .auth-sso { border-top: 1px solid var(--zk-line); }
body.zk .auth-sso .button-secondary,
body.zk.alp .auth-sso .button.button-secondary {
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(38, 33, 84, .96), rgba(13, 30, 44, .96)) padding-box,
    linear-gradient(120deg, var(--zk-violet), var(--zk-cyan) 60%, var(--zk-mint)) border-box;
  color: var(--zk-text);
  box-shadow: 0 12px 30px rgba(101, 80, 219, .18);
  white-space: normal;
  min-height: 50px;
}
body.zk .auth-sso .button-secondary:is(:hover, :focus-visible),
body.zk.alp .auth-sso .button.button-secondary:is(:hover, :focus-visible) { color: #ffffff; box-shadow: 0 16px 40px rgba(101, 80, 219, .28), 0 0 28px var(--zk-glow-cyan); }
body.zk .auth-switch { color: var(--zk-muted); }
body.zk .auth-switch a { color: var(--zk-cyan); }
body.zk .auth-switch a:hover { color: var(--zk-text); }
body.zk .selected-plan-note { color: var(--zk-mint); }
@media (max-width: 560px) {
  body.zk .auth-section { padding: 40px 0 64px; align-items: flex-start; }
  body.zk .auth-section .form-card { padding: 26px 20px 22px; border-radius: 18px; }
  body.zk .auth-container::before { inset: -8px; }
  body.zk .auth-container::after { top: -32px; right: -6px; width: 44px; height: 82px; }
}
@media (max-width: 400px) {
  body.zk .auth-container::before { display: none; }
}

/* ============================== 16. Console ============================== */

/* Ruhig: kein bewegter Himmel hinter Lesetext; nur die Kopfzeile zeigt Sterne. */
body.zk.console-brand main,
body.zk .console-layout { color: var(--zk-lead); }
body.zk .console-sidebar { top: 90px; }
body.zk .console-nav,
body.zk .console-menu-toggle {
  background: linear-gradient(180deg, rgba(18, 27, 45, .9), rgba(10, 15, 27, .94));
  border: 1px solid var(--zk-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 40px rgba(0, 0, 0, .25);
  color: var(--zk-text);
}
body.zk .console-nav a,
body.zk.console-brand .console-nav a {
  color: var(--zk-lead);
  font-family: var(--zk-font);
  font-size: .95rem;
  font-weight: 550;
  border-left: 2px solid transparent;
}
body.zk .console-nav a:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .05); color: var(--zk-text); }
body.zk .console-nav a.is-active,
body.zk .console-nav a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(164, 146, 255, .18), rgba(105, 225, 245, .05));
  border-left-color: var(--zk-cyan);
  color: var(--zk-text);
}
body.zk .console-nav .is-disabled { color: var(--zk-faint); }
body.zk .console-nav-group { border-color: var(--zk-line); }
body.zk .console-nav-group-heading {
  color: var(--zk-faint);
  font-family: var(--zk-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
}
body.zk .console-nav-separator { background: var(--zk-line); }
body.zk .console-nav-add { color: var(--zk-cyan); }
/* Kleine Rakete am Fuss der Seitenleiste (dekorativ). */
@media (min-width: 941px) {
  body.zk .console-sidebar::after {
    content: '';
    display: block;
    height: 118px;
    margin-top: 16px;
    border: 1px solid var(--zk-line);
    border-radius: 16px;
    background:
      url('../img/zk-rakete.svg') 50% 46% / 36px 66px no-repeat,
      radial-gradient(ellipse 70% 50% at 50% 100%, rgba(105, 225, 245, .12), transparent 70%),
      radial-gradient(1px 1px at 22px 30px, rgba(214, 226, 255, .7) 60%, transparent 62%),
      radial-gradient(1px 1px at 180px 20px, rgba(214, 226, 255, .6) 60%, transparent 62%),
      radial-gradient(1.4px 1.4px at 150px 80px, rgba(105, 225, 245, .7) 60%, transparent 62%),
      radial-gradient(1px 1px at 46px 92px, rgba(214, 226, 255, .5) 60%, transparent 62%),
      linear-gradient(180deg, rgba(13, 19, 34, .6), rgba(7, 10, 19, .8));
    opacity: .9;
  }
}

body.zk .breadcrumbs { color: var(--zk-muted); }
body.zk .breadcrumbs a { color: var(--zk-cyan); }
body.zk .console-page-title h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
body.zk .console-page-title .lead { color: var(--zk-lead); }

body.zk .console-panel,
body.zk .website-summary-card,
body.zk .dashboard-stat-tile { color: var(--zk-lead); }
body.zk :is(.console-panel, .dashboard-section, .setup-progress-panel, .website-summary-card) :is(h2, h3) { color: var(--zk-text); }
body.zk .dashboard-setup-nudge {
  background: linear-gradient(135deg, rgba(164, 146, 255, .12), rgba(105, 225, 245, .05));
  border: 1px solid rgba(164, 146, 255, .3);
  color: var(--zk-lead);
}
body.zk .dashboard-setup-nudge.is-complete { background: var(--zk-good-bg); border-color: var(--zk-good-line); }
body.zk .dashboard-setup-nudge.is-complete p { color: #c9f7de; }
body.zk .dashboard-setup-nudge a,
body.zk .dashboard-setup-nudge.is-complete a { color: var(--zk-cyan); }
body.zk .dashboard-stat-tile span { color: var(--zk-muted); font-family: var(--zk-mono); font-size: .7rem; letter-spacing: .12em; }
body.zk .dashboard-stat-tile strong {
  color: var(--zk-text);
  font-family: var(--zk-title);
  background: var(--zk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.zk .dashboard-stat-tile small,
body.zk .website-card-meta,
body.zk .dashboard-section-heading p:not(.eyebrow) { color: var(--zk-muted); }
body.zk .dashboard-stat-tile small a { color: var(--zk-cyan); }
body.zk .website-card-meta strong { color: var(--zk-text); }

/* Einrichtung */
/* Handy: Auf dem Handy setzt style.css «grid-template-columns: 1fr» (= minmax(auto, 1fr));
   die Spur wird so breit wie der längste Code (Meta-Tag, DNS-Eintrag) und schiebt die Seite
   auf ~670 px auseinander (Erste Schritte, 375 px). minmax(0, 1fr) lässt die Spur schrumpfen,
   der Code scrollt in seinem Kasten. */
@media (max-width: 820px) {
  body.zk .setup-step,
  body.zk .setup-code-grid { grid-template-columns: minmax(0, 1fr); }
}
body.zk :is(.setup-step-body, .setup-code-grid > div) { min-width: 0; }
body.zk .setup-code-grid .code-box { max-width: 100%; overflow-x: auto; }
body.zk .setup-step-number { color: var(--zk-text); border: 1px solid var(--zk-line-strong); }
body.zk .setup-step.is-done .setup-step-number,
body.zk .setup-step.is-done .setup-status { background: var(--zk-good-bg); color: var(--zk-good); border-color: var(--zk-good-line); }
body.zk .setup-step.is-current { border-color: rgba(105, 225, 245, .45); }
body.zk .setup-step.is-current .setup-status { background: var(--zk-info-bg); color: var(--zk-cyan); }
body.zk .setup-step-head h2 { color: var(--zk-text); }
body.zk .setup-status,
body.zk .setup-time,
body.zk .setup-code-grid label { color: var(--zk-muted); }
body.zk .onboarding-list li { color: var(--zk-muted); }
body.zk .onboarding-list li.is-done,
body.zk .onboarding-list li.is-done span { color: var(--zk-good); }
body.zk .social-proof { color: var(--zk-lead); }
body.zk .tracking-todo,
body.zk .visibility-self-hint,
body.zk .crawler-setup-missing { background: var(--zk-warn-bg); border-color: var(--zk-warn-line); color: #fde7b5; }
body.zk .tracking-todo h2 { color: var(--zk-warn); }
body.zk .indexnow-wordpress-hint,
body.zk .visibility-honesty-box { background: var(--zk-info-bg); border-color: var(--zk-info-line); color: #cdf6fc; }
body.zk .danger-zone { border-color: var(--zk-bad-line); background: var(--zk-bad-bg); }
body.zk .danger-zone :is(h2, h3) { color: #ffd0d0; }

/* Website-Umschalter, Sprungnavigation */
body.zk .website-switcher-label { color: var(--zk-muted); }
body.zk .website-detail-jump-nav { background: var(--zk-card); border-color: var(--zk-line); }
body.zk .website-detail-jump-nav a {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--zk-line-strong);
  color: var(--zk-text);
}
body.zk .website-detail-jump-nav a:is(:hover, :focus-visible) { border-color: var(--zk-cyan); background: rgba(105, 225, 245, .1); }

/* KI-Tipps */
body.zk .ai-tip-content,
body.zk .ai-tip-content p { color: var(--zk-lead); }
body.zk .ai-tip-content :is(h3, h4, h5, strong) { color: var(--zk-text); }
body.zk .ai-tip-content code { background: rgba(154, 245, 212, .08); color: var(--zk-mint); }

/* Diagramme: Achsen und Beschriftungen hell, Balken behalten ihre Farben. */
body.zk .score-line-chart {
  background: linear-gradient(180deg, rgba(18, 27, 45, .9), rgba(13, 19, 34, .9));
  border-color: var(--zk-line);
}
body.zk .chart-axis,
body.zk .kc-chart-svg line { stroke: rgba(255, 255, 255, .22); }
body.zk .chart-label,
body.zk .kc-chart-svg text { fill: var(--zk-lead); }
body.zk .chart-value,
body.zk .chart-total { fill: var(--zk-text); }
body.zk .kc-chart-svg circle[fill="#ffffff"] { fill: var(--zk-surface); }
body.zk .chart-tooltip { background: var(--zk-glass-strong); color: var(--zk-text); border: 1px solid var(--zk-line-strong); }
body.zk .score-line-chart polyline,
body.zk .score-line-chart path { stroke: var(--zk-cyan); }
body.zk .score-line-chart circle { fill: var(--zk-cyan); stroke: var(--zk-surface); }
body.zk .empty-illustration { opacity: .85; filter: saturate(.9); }

/* Crawler-Radar und Zeitleiste */
body.zk .crawler-radar .radar-bot { color: var(--zk-text); }
body.zk .crawler-radar li.is-waiting .radar-bot,
body.zk .crawler-radar .radar-status,
body.zk .crawler-radar .radar-tip,
body.zk .crawler-radar li.crawler-radar-group-title { color: var(--zk-muted); }
body.zk .crawler-radar li.is-seen .radar-status { color: var(--zk-good); }
body.zk .crawler-radar .radar-dot { box-shadow: 0 0 10px currentColor; }

/* Ki-Index und State of AI Visibility */
body.zk .ki-index-as-of,
body.zk .ki-index-legend dt,
body.zk .state-ai-finding h3 { color: var(--zk-muted); }
body.zk .ki-index-card-head strong,
body.zk .ki-index-legend dd,
body.zk .state-ai-finding strong,
body.zk .statistics-summary { color: var(--zk-text); }

/* Verlauf, Benchmark */
body.zk .scan-history-table td,
body.zk .timeline-list li { color: var(--zk-lead); }
body.zk .timeline-list li.is-positive strong { color: var(--zk-good); }
body.zk .benchmark-row { color: var(--zk-lead); }
body.zk .table-link,
body.zk .chart-empty a { color: var(--zk-cyan); }

/* ============================== 17. Fusszeile ============================== */

body.zk .alp-footer,
body.zk.alp .alp-footer,
body.zk .site-footer {
  position: relative;
  isolation: isolate;
  border-top: 0;
  background:
    radial-gradient(ellipse 50% 90% at 88% 0%, rgba(52, 44, 130, .24), transparent 70%),
    linear-gradient(180deg, #070a13, #04070e 40%);
  color: var(--zk-muted);
}
body.zk .alp-footer::before,
body.zk .site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--zk-hairline-grad);
  opacity: .55;
}
body.zk .alp-footer h2,
body.zk .alp-footer-title,
body.zk.alp .alp-footer h2,
body.zk .site-footer h2 {
  color: var(--zk-cyan);
  font-family: var(--zk-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.zk .alp-footer-grid > div:first-child .alp-footer-title {
  color: var(--zk-text);
  font-family: var(--zk-title);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
}
body.zk .alp-footer a,
body.zk .site-footer a { color: var(--zk-muted); }
body.zk .alp-footer a:hover,
body.zk.alp .alp-footer a:hover,
body.zk .site-footer a:hover { color: var(--zk-cyan); }
body.zk .alp-footer p,
body.zk.alp .alp-footer p,
body.zk .site-footer p { color: var(--zk-muted); }
body.zk .footer-brand span,
body.zk .site-footer .brand span { color: var(--zk-text); }
body.zk .alp-footer-bottom,
body.zk.alp .alp-footer-bottom,
body.zk .footer-bottom { border-top-color: var(--zk-line); color: var(--zk-faint); font-family: var(--zk-mono); font-size: .76rem; letter-spacing: .03em; }
body.zk .alp-cookie-note,
body.zk .cookie-note { color: var(--zk-faint); }
body.zk .alp-cookie-note a,
body.zk .cookie-note a { color: var(--zk-lead); }
body.zk .footer-phone a { color: var(--zk-lead); }

/* ============================== 18. Bewegung ============================== */

/* Flugfortschritt: eine feine Linie am oberen Bildschirmrand füllt sich beim Scrollen
   (reines CSS, nur wo scroll-getriebene Animation unterstützt wird). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.zk-pausiert):not(.zk-motion-paused) body.zk::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      height: 2px;
      background: var(--zk-grad);
      box-shadow: 0 0 12px rgba(105, 225, 245, .45);
      transform-origin: left center;
      transform: scaleX(0);
      pointer-events: none;
      animation: zk-flight linear both;
      animation-timeline: scroll(root);
    }
  }
}

/* Dauerbewegung nur mit html.zk-motion (zukunft.js). */
.zk-motion body.zk .zk-rocket-float { animation: zk-hover 6s ease-in-out infinite; }
.zk-motion body.zk :is(.zk-exhaust-halo, .zk-exhaust-core) { animation: zk-flame 1.2s ease-in-out infinite alternate; }
.zk-motion body.zk .zk-particles { animation: zk-twinkle 4s ease-in-out infinite alternate; }
.zk-motion body.zk .zk-orbit-one .zk-orbit-track { animation: zk-spin 28s linear infinite; }
.zk-motion body.zk .zk-trajectory { animation: zk-dash 9s linear infinite; }
.zk-motion body.zk .mini-console::before { animation: zk-orbit-border 10s linear infinite; }
.zk-motion body.zk .auth-container::after { animation: zk-hover 5s ease-in-out infinite; }
.zk-motion body.zk :is(.knowledge-hero, .pricing-hero, .wp-public-hero) > :is(.container, .alp-container)::after { animation: zk-hover 6s ease-in-out infinite; }
/* Scan-Knopf anvisiert: das Triebwerk zündet stärker. */
.zk-motion body.zk .zk-hero-rakete:has(.hero-form .button-primary:is(:hover, :focus-visible)) :is(.zk-exhaust-halo, .zk-exhaust-core) {
  animation: zk-flame-boost .45s ease-in-out infinite alternate;
}
/* Kurzer Auftritt (einmalig beim Laden). html.zk-pausiert setzt zukunft-frueh.js
   schon vor dem ersten Bild, wenn jemand die Animationen pausiert hat. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.zk-pausiert) body.zk .zk-hero-rakete .hero-copy > * { animation: zk-arrive .8s cubic-bezier(.2, .7, .2, 1) both; }
  html:not(.zk-pausiert) body.zk .zk-hero-rakete .hero-copy > :nth-child(2) { animation-delay: .08s; }
  html:not(.zk-pausiert) body.zk .zk-hero-rakete .hero-copy > :nth-child(3) { animation-delay: .16s; }
  html:not(.zk-pausiert) body.zk .zk-hero-rakete .hero-copy > :nth-child(4) { animation-delay: .24s; }
  html:not(.zk-pausiert) body.zk .zk-hero-rakete .hero-panel { animation: zk-arrive 1s cubic-bezier(.2, .7, .2, 1) .12s both; }
  html:not(.zk-pausiert) body.zk .auth-section .form-card { animation: zk-materialize .95s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
  html:not(.zk-pausiert) body.zk .auth-section .form-card::after { animation: zk-scan .95s cubic-bezier(.4, 0, .2, 1) .1s backwards; }
}

/* Pausiert: auch der Füll-Effekt des Score-Donuts (style.css) steht. */
.zk-pausiert body.zk .score-donut-value,
.zk-motion-paused body.zk .score-donut-value { animation: none !important; stroke-dashoffset: var(--score-offset); }

/* Ausserhalb des Sichtfelds, im Hintergrund-Tab oder pausiert: CSS-Schleifen stehen. */
body.zk .zk-offscreen *,
body.zk .zk-offscreen *::before,
body.zk .zk-offscreen *::after,
body.zk .zk-offscreen::before,
.zk-page-hidden body.zk .zk-scene *,
.zk-page-hidden body.zk .mini-console::before,
.zk-page-hidden body.zk .auth-container::after,
.zk-page-hidden body.zk :is(.knowledge-hero, .pricing-hero, .wp-public-hero) > :is(.container, .alp-container)::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.zk .zk-scene *,
  body.zk .zk-scene *::before,
  body.zk .zk-scene *::after,
  body.zk .mini-console::before,
  body.zk .auth-container::after,
  body.zk :is(.knowledge-hero, .pricing-hero, .wp-public-hero) > :is(.container, .alp-container)::after,
  body.zk .auth-section .form-card,
  body.zk .auth-section .form-card::after,
  body.zk .zk-hero-rakete .hero-copy > *,
  body.zk .zk-hero-rakete .hero-panel {
    animation: none !important;
    transition: none !important;
  }
  body.zk :is(.button, .alp-btn, .step-card, .feature-card, .price-card):is(:hover, :focus-visible) { transform: none !important; }
  body.zk :is(.ict-header-right, .alp-nav-backdrop, .sticky-scan-cta, .button, .alp-btn) { transition: none !important; }
  body.zk .score-donut-value { animation: none !important; stroke-dashoffset: var(--score-offset); }
  body.zk .alp-nav a::after { transition: none; }
}

/* ============================== 19. Barrierefreiheit ============================== */

/* Weniger Transparenz: deckende Flächen, kein Weichzeichner. */
@media (prefers-reduced-transparency: reduce) {
  body.zk .site-header,
  body.zk .alp-header { background: #070a13 !important; }
  body.zk :is(.mini-console, .hero-form, .auth-section .form-card, .scan-form.compact, .sticky-scan-cta-inner, .language-menu-list, .ict-header-right) {
    background: #0d1322 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.zk .site-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

@media (forced-colors: active) {
  body.zk .zk-sky-canvas,
  body.zk .zk-scene,
  body.zk .zk-planet,
  body.zk .zk-flight-label,
  body.zk .auth-container::before,
  body.zk .auth-container::after,
  body.zk .auth-section .form-card::before,
  body.zk .auth-section .form-card::after,
  body.zk .mini-console::before,
  body.zk .console-sidebar::after,
  body.zk::before,
  body.zk :is(.alp-header, .site-header, .alp-footer, .site-footer, .cta-band)::before,
  body.zk :is(.alp-header, .site-header)::after,
  body.zk :is(.hero, .knowledge-hero, .pricing-hero, .report-hero, .wp-public-hero, .auth-section)::before,
  body.zk :is(.hero, .knowledge-hero, .pricing-hero, .report-hero, .wp-public-hero, .auth-section)::after,
  body.zk :is(.knowledge-hero, .pricing-hero, .wp-public-hero) > :is(.container, .alp-container)::before,
  body.zk :is(.knowledge-hero, .pricing-hero, .wp-public-hero) > :is(.container, .alp-container)::after { display: none !important; }
  body.zk .gradient-text,
  body.zk .zk-verlauf,
  body.zk .dashboard-stat-tile strong {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  body.zk :is(.button, .alp-btn, .mini-console, .auth-section .form-card) { border: 1px solid ButtonText; }
  body.zk :focus-visible { outline-color: Highlight; }
}

} /* Ende @media screen */

/* ============================== 20. Druck ============================== */

/* Gedruckt wird wie bisher (style.css); nur die neuen Deko-Elemente aus dem
   Markup und das Canvas aus zukunft.js fallen weg. */
@media print {
  .zk-sky-canvas,
  .zk-scene,
  .zk-planet,
  .zk-motion-toggle { display: none !important; }
}

/* ============================== 21. Keyframes ============================== */

@keyframes zk-flight { to { transform: scaleX(1); } }
@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-twinkle { from { opacity: .3; } to { opacity: .75; } }
@keyframes zk-spin { to { transform: rotate(360deg); } }
@keyframes zk-dash { to { stroke-dashoffset: -140; } }
@keyframes zk-orbit-border { to { --zk-angle: 360deg; } }
@keyframes zk-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes zk-materialize {
  from { opacity: 0; clip-path: inset(0 0 100% 0 round 20px); }
  35% { opacity: 1; }
  to { opacity: 1; clip-path: inset(-160px -160px -160px -160px round 20px); }
}
@keyframes zk-scan {
  0% { top: 12px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 14px); opacity: 0; }
}