/* Stand: final (Hybrid) – 24.10.2026. Designsystem «Kristall», Erweiterung der Startseiten-Tokens.
   Laden NACH landing-v4.css (und produkt.css / docs.css). Kein zweites System.
   Hybrid nach zwei Kritiken (runde1-ab-kritiker1/2): Grund aus A, Marke/Produkt/Navigation aus B, Regeln aus A.
   - Grund bleibt A: --bg #0d0d12, --surface #14141b, --raised #1b1b24, --text, --muted, --dim, --line aus landing-v4.css
     werden hier NICHT überschrieben (hartkodierte Grautöne auf ~40 Seiten, kein globaler Nachtblau-Wechsel).
   - Nachtblau nur als --zl-k-nacht: Hero, Produktbühne, Icon-Kacheln.
   Leitsatz: «dunkles Glas, farbiges Licht». Spektrum nie als Fläche > 1 px, ein Glow je Bildschirmhöhe.
   Kontraste (WCAG 2.2, selbst gemessen) in Klammern: bg #0d0d12 / surface #14141b. */

:root{
  /* =================== 1. Primitive =================== */
  /* Spektrum (Licht, Grafik, Kanten; nie Textfarbe ausser Cyan/Azur), links Z warm, rechts L kühl */
  --zl-k-magenta:#c13cff;
  --zl-k-violett:#8c30fc;
  --zl-k-indigo:#5c1ffc;
  --zl-k-blau:#2f6bff;
  --zl-k-azur:#1e9bff;
  --zl-k-cyan:#56d8fb;

  /* Textsichere Lichtstufen (aus B) */
  --zl-k-magenta-hell:#d48bff; /* 8.25 / 7.80 */
  --zl-k-violett-hell:#a98cff; /* 7.28 / 6.88 */
  --zl-k-indigo-hell:#9fa0ff;  /* 8.26 / 7.81  = Akzent */
  --zl-k-blau-hell:#7fa8ff;    /* 8.26 / 7.81 */
  --zl-k-azur-hell:#5cc0ff;    /* 9.64 / 9.11 */
  --zl-k-cyan-hell:#9cf0ff;    /* 15.06 / 14.25 */

  /* Licht, Rand, Nacht (gemessen am Icon) */
  --zl-k-kantenlicht:#f4ecff;
  --zl-k-glut:#734ffa;         /* Bodenglut / innerer Glow */
  --zl-k-rand:#624fda;         /* einfarbiger Squircle-Rand (3.37 / 3.19, UI >= 3) */
  --zl-k-rand-hell:#c29aea;    /* Lichtfleck oben links */
  --zl-k-rand-mitte:#6924c8;
  --zl-k-rand-blau:#4f34e8;
  --zl-k-rand-kalt:#73a2e3;
  --zl-k-nacht:#020619;        /* Kachelinneres. NUR Hero, Produktbühne, Icon-Kachel */
  --zl-k-tiefe:#0b0930;        /* Kachelinneres oben */
  --zl-k-grund:#03020a;

  /* Geometrie */
  --zl-k-squircle:15%;         /* Icon-Kacheln überall, gemessen 164/1092 px */
  --zl-k-radius-s:8px;         /* Knöpfe, Eingabefelder, kbd */
  --zl-k-radius-m:12px;        /* normale Karten, Doku, Tabellen, Code */
  --zl-k-radius-l:22px;        /* nur Hero- und Produktkarten (aus B) */

  /* =================== 2. Semantisch =================== */
  --zl-k-akzent:var(--zl-k-indigo-hell);         /* Links, aktiv, Fokus */
  --zl-k-akzent-rgb:159,160,255;
  --zl-k-glow-rgb:115,79,250;
  --accent:var(--zl-k-akzent);                   /* bisher #a996e6 */
  --glow:var(--zl-k-glow-rgb);                   /* bisher 143,122,201 */

  --zl-k-spektrum:linear-gradient(90deg,var(--zl-k-magenta) 0%,var(--zl-k-violett) 22%,var(--zl-k-indigo) 42%,var(--zl-k-blau) 64%,var(--zl-k-azur) 82%,var(--zl-k-cyan) 100%);
  --zl-k-spektrum-diag:linear-gradient(135deg,var(--zl-k-magenta),var(--zl-k-violett) 25%,var(--zl-k-indigo) 45%,var(--zl-k-blau) 65%,var(--zl-k-azur) 82%,var(--zl-k-cyan));
  --zl-k-spektrum-text:linear-gradient(90deg,var(--zl-k-magenta-hell),var(--zl-k-violett-hell) 25%,var(--zl-k-indigo-hell) 45%,var(--zl-k-blau-hell) 65%,var(--zl-k-azur-hell) 82%,var(--zl-k-cyan-hell));

  /* Rahmen (aus B): voll höchstens eine Karte je Reihe; ruhig für weitere Marken-/Produktkarten. Nie in Doku. */
  --zl-k-rahmen:linear-gradient(135deg,var(--zl-k-rand-hell) 0%,var(--zl-k-rand-mitte) 30%,var(--zl-k-rand-blau) 70%,var(--zl-k-rand-kalt) 100%);
  --zl-k-rahmen-ruhig:linear-gradient(135deg,rgba(194,154,234,.62) 0%,rgba(105,36,200,.42) 30%,rgba(79,52,232,.42) 70%,rgba(115,162,227,.55) 100%);

  /* Glas (aus B): Nachtblau-Glas für Marken-/Produktkarten. Doku nutzt --surface + --zl-k-glas-rand. */
  --zl-k-glas:linear-gradient(180deg,rgba(17,15,64,.92),rgba(8,9,32,.96));
  --zl-k-glas-rand:rgba(159,160,255,.22);        /* einfarbig: Doku, normale Karten */
  --zl-k-glas-rand-stark:rgba(159,160,255,.45);  /* Hover */
  --zl-k-kante:inset 0 1px 0 rgba(244,236,255,.14),inset 0 0 0 1px rgba(244,236,255,.04);

  /* Licht */
  --zl-k-glow-s:0 0 16px rgba(var(--zl-k-glow-rgb),.25);
  --zl-k-glow-m:0 0 28px rgba(var(--zl-k-glow-rgb),.32),0 0 2px rgba(194,154,234,.6);
  --zl-k-glow-l:0 0 56px rgba(var(--zl-k-glow-rgb),.34),0 0 120px rgba(30,155,255,.12);
  --zl-k-boden:radial-gradient(50% 100% at 50% 0%,rgba(var(--zl-k-glow-rgb),.42),rgba(37,20,213,.12) 55%,transparent 75%);  /* Glut unter Hero-Kachel */
  --zl-k-spiegel:linear-gradient(180deg,rgba(0,0,0,.9),transparent 75%);  /* mask-image der gespiegelten Kachel, einmal je Seite */
  --zl-k-fokus:0 0 0 2px var(--bg,#0d0d12),0 0 0 4px var(--zl-k-akzent);
  --zl-k-trenner:linear-gradient(90deg,transparent,rgba(169,140,255,.35) 30%,rgba(92,192,255,.35) 70%,transparent);

  /* Bewegung */
  --zl-k-dauer:.24s;
  --zl-k-dauer-lang:.6s;
  --zl-k-ease:var(--ease,cubic-bezier(.22,1,.36,1));

  /* =================== 3. Komponenten =================== */
  /* Navigation (aus B) */
  --zl-k-kopf-linie:linear-gradient(90deg,transparent,rgba(193,60,255,.35) 15%,rgba(79,52,232,.35) 50%,rgba(30,155,255,.35) 85%,transparent);
  --zl-k-nav-aktiv:var(--zl-k-spektrum);         /* 2-px-Strich unter aktivem Link */
  --zl-k-nav-aktiv-hoehe:2px;

  /* Primärknopf (aus A): hell, 1-px-Spektrumkante unten. Überall. */
  --zl-k-knopf-bg:#f2f2f0;
  --zl-k-knopf-text:#0d0d12;                     /* 17.29 */
  --zl-k-knopf-radius:var(--zl-k-radius-s);
  --zl-k-knopf-kante:var(--zl-k-spektrum);
  --zl-k-knopf-hover-schatten:0 0 0 1px rgba(244,236,255,.5),var(--zl-k-glow-m);
  --zl-k-knopf-aktiv-schatten:0 0 0 1px rgba(244,236,255,.35),var(--zl-k-glow-s);
  --zl-k-knopf-aus-bg:#2a2a32;
  --zl-k-knopf-aus-text:var(--dim,#8f8f8a);
  /* Prisma-Knopf (aus B): NUR «Pro» auf /pricing. Weiss auf #4a17c9 9.30, auf #1446c0 7.87 */
  --zl-k-prisma-bg:linear-gradient(135deg,#4a17c9 0%,#3a1fb8 45%,#1446c0 100%);
  --zl-k-prisma-text:#ffffff;
  --zl-k-prisma-schatten:inset 0 1px 0 rgba(244,236,255,.38),inset 0 -2px 0 rgba(2,6,25,.45),0 6px 18px rgba(37,20,213,.35);
  /* Sekundärknopf */
  --zl-k-knopf2-bg:transparent;
  --zl-k-knopf2-rand:rgba(242,242,240,.42);      /* 3.78 auf surface, UI >= 3 */
  --zl-k-knopf2-hover-rand:var(--zl-k-glas-rand-stark);

  /* Karten */
  --zl-k-karte-bg:var(--surface,#14141b);        /* normale Karte, Doku */
  --zl-k-karte-rand:var(--zl-k-glas-rand);
  --zl-k-karte-radius:var(--zl-k-radius-m);
  --zl-k-karte-schatten:var(--zl-k-kante),0 20px 50px rgba(0,0,0,.45);
  --zl-k-karte-hover-schatten:var(--zl-k-kante),0 20px 50px rgba(0,0,0,.45),var(--zl-k-glow-s);
  --zl-k-produkt-bg:var(--zl-k-glas);            /* Marke/Produkt: Nachtblau-Glas */
  --zl-k-produkt-rand:var(--zl-k-rahmen-ruhig);
  --zl-k-produkt-rand-voll:var(--zl-k-rahmen);
  --zl-k-produkt-radius:var(--zl-k-radius-l);

  /* Icon-Kachel */
  --zl-k-icon-kachel-bg:radial-gradient(85% 80% at 50% 20%,var(--zl-k-tiefe),var(--zl-k-nacht));
  --zl-k-icon-kachel-rand:var(--zl-k-rahmen);
  --zl-k-icon-kachel-radius:var(--zl-k-squircle);

  /* Bühne (Hero, Produktkopf): Nachtblau als Licht von unten, Grund bleibt --bg */
  --zl-k-buehne-bg:radial-gradient(60% 70% at 50% 35%,rgba(11,9,48,.9),rgba(2,6,25,.6) 55%,transparent 80%);

  /* Links */
  --zl-k-link:var(--zl-k-akzent);
  --zl-k-link-hover:var(--zl-k-cyan-hell);
  --zl-k-link-unterstrich:underline;             /* Fliesstext-Links IMMER unterstrichen: Akzent vs. --muted nur 1.12:1 */
  --zl-k-link-unterstrich-dicke:1px;
  --zl-k-link-unterstrich-abstand:.2em;
  --zl-k-link-unterstrich-farbe:rgba(159,160,255,.55);

  /* Tag */
  --zl-k-tag-bg:rgba(var(--zl-k-akzent-rgb),.10);
  --zl-k-tag-rand:rgba(var(--zl-k-akzent-rgb),.28);
  --zl-k-tag-text:var(--zl-k-violett-hell);

  /* Eingabefeld: Rand >= 3:1 */
  --zl-k-feld-bg:var(--bg,#0d0d12);
  --zl-k-feld-rand:rgba(242,242,240,.42);        /* 3.76 auf bg, 3.78 auf surface */
  --zl-k-feld-rand-hover:rgba(242,242,240,.6);
  --zl-k-feld-rand-fokus:var(--zl-k-akzent);
  --zl-k-feld-radius:var(--zl-k-radius-s);

  /* Tabelle */
  --zl-k-tabelle-kopf-bg:var(--raised,#1b1b24);
  --zl-k-tabelle-kopf-text:var(--muted,#b3b3af); /* 8.12 auf raised */
  --zl-k-tabelle-text:var(--text,#f2f2f0);
  --zl-k-tabelle-linie:var(--line,rgba(242,242,240,.12));
  --zl-k-tabelle-zebra:rgba(242,242,240,.025);
  --zl-k-tabelle-hervor:rgba(var(--zl-k-akzent-rgb),.08);   /* hervorgehobene Spalte (z. B. ZeroLog im Vergleich) */
  --zl-k-tabelle-hervor-kante:var(--zl-k-spektrum);         /* 1 px oben über der hervorgehobenen Spalte */
  --zl-k-tabelle-radius:var(--zl-k-radius-m);

  /* Code */
  --zl-k-code-bg:var(--surface,#14141b);
  --zl-k-code-rand:var(--line,rgba(242,242,240,.12));
  --zl-k-code-text:var(--text,#f2f2f0);
  --zl-k-code-akzent:var(--zl-k-cyan-hell);      /* Prompt, Schlüsselwörter: 14.25 */
  --zl-k-code-inline-bg:rgba(242,242,240,.06);
  --zl-k-code-radius:var(--zl-k-radius-m);

  /* Tastenkappe */
  --zl-k-kbd-bg:var(--raised,#1b1b24);
  --zl-k-kbd-text:var(--text,#f2f2f0);           /* 15.25 */
  --zl-k-kbd-rand:rgba(242,242,240,.22);
  --zl-k-kbd-schatten:inset 0 -1px 0 rgba(242,242,240,.18);
  --zl-k-kbd-radius:5px;

  --zl-k-figur-licht:var(--zl-k-spektrum-diag);
}

/* Typografie, Abstände, Ease: unverändert aus landing-v4.css (Barlow 400–700, Barlow Condensed 500, Geist Mono;
   --pad, --hdr, --ease). Knopfschrift Barlow 560, keine Mono-Grossbuchstaben auf Knöpfen. */

/* =================== Hilfsklassen (präfixiert, opt-in) =================== */
/* Normale Karte / Doku: einfarbiger Rand, keine Facette, kein Verlauf */
.zl-k-karte{background:var(--zl-k-karte-bg);border:1px solid var(--zl-k-karte-rand);border-radius:var(--zl-k-karte-radius);box-shadow:var(--zl-k-karte-schatten)}
/* Marken-/Produktkarte: Nachtblau-Glas mit Verlaufsrand (padding-box/border-box, Füllung muss deckend sein) */
.zl-k-produkt{border:1px solid transparent;border-radius:var(--zl-k-produkt-radius);background:var(--zl-k-produkt-bg) padding-box,var(--zl-k-produkt-rand) border-box;box-shadow:var(--zl-k-karte-schatten);transition:box-shadow var(--zl-k-dauer) var(--zl-k-ease)}
.zl-k-produkt.voll{background:var(--zl-k-produkt-bg) padding-box,var(--zl-k-produkt-rand-voll) border-box}
@media (hover:hover) and (pointer:fine){.zl-k-produkt:is(a,[data-interaktiv]):hover{box-shadow:var(--zl-k-karte-hover-schatten)}}
.zl-k-text-spektrum{background:var(--zl-k-spektrum-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.zl-k-trenner{height:1px;border:0;background:var(--zl-k-trenner)}

.zl-k-knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 23px;border:0;border-radius:var(--zl-k-knopf-radius);background:var(--zl-k-knopf-bg);color:var(--zl-k-knopf-text);font:560 14px/1.3 var(--font);cursor:pointer;transition:box-shadow var(--zl-k-dauer) var(--zl-k-ease),transform var(--zl-k-dauer) var(--zl-k-ease)}
.zl-k-knopf::after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:1px;background:var(--zl-k-knopf-kante);opacity:.9;border-radius:1px}
.zl-k-knopf:hover{box-shadow:var(--zl-k-knopf-hover-schatten)}
.zl-k-knopf:active{box-shadow:var(--zl-k-knopf-aktiv-schatten);transform:translateY(1px)}
.zl-k-knopf:focus-visible,.zl-k-knopf2:focus-visible,.zl-k-prisma:focus-visible{outline:none;box-shadow:var(--zl-k-fokus)}
.zl-k-knopf:disabled{background:var(--zl-k-knopf-aus-bg);color:var(--zl-k-knopf-aus-text);box-shadow:none;cursor:not-allowed}
.zl-k-knopf:disabled::after{display:none}
.zl-k-knopf2{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 23px;border-radius:var(--zl-k-knopf-radius);border:1px solid var(--zl-k-knopf2-rand);background:var(--zl-k-knopf2-bg);color:var(--text);font:560 14px/1.3 var(--font);cursor:pointer;transition:border-color var(--zl-k-dauer)}
.zl-k-knopf2:hover{border-color:var(--zl-k-knopf2-hover-rand)}
/* Nur «Pro» auf /pricing */
.zl-k-prisma{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 23px;border:0;border-radius:var(--zl-k-knopf-radius);background:var(--zl-k-prisma-bg);color:var(--zl-k-prisma-text);box-shadow:var(--zl-k-prisma-schatten);font:560 14px/1.3 var(--font);cursor:pointer}

.zl-k-icon-kachel{display:block;aspect-ratio:1;border:1px solid transparent;border-radius:var(--zl-k-icon-kachel-radius);background:var(--zl-k-icon-kachel-bg) padding-box,var(--zl-k-icon-kachel-rand) border-box;box-shadow:var(--zl-k-glow-s);overflow:hidden}
.zl-k-nav-aktiv{position:relative}
.zl-k-nav-aktiv::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:var(--zl-k-nav-aktiv-hoehe);background:var(--zl-k-nav-aktiv);border-radius:2px}

/* Fliesstext-Links: immer unterstrichen */
.zl-k-prosa a{color:var(--zl-k-link);text-decoration:var(--zl-k-link-unterstrich);text-decoration-thickness:var(--zl-k-link-unterstrich-dicke);text-underline-offset:var(--zl-k-link-unterstrich-abstand);text-decoration-color:var(--zl-k-link-unterstrich-farbe)}
.zl-k-prosa a:hover{color:var(--zl-k-link-hover);text-decoration-color:currentColor}
.zl-k-prosa table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--zl-k-tabelle-linie);border-radius:var(--zl-k-tabelle-radius);overflow:hidden;font-variant-numeric:tabular-nums}
.zl-k-prosa th{background:var(--zl-k-tabelle-kopf-bg);color:var(--zl-k-tabelle-kopf-text);font:500 12px/1.4 var(--mono);letter-spacing:.04em;text-align:left;padding:10px 14px}
.zl-k-prosa td{color:var(--zl-k-tabelle-text);padding:10px 14px;border-top:1px solid var(--zl-k-tabelle-linie)}
.zl-k-prosa tbody tr:nth-child(even) td{background:var(--zl-k-tabelle-zebra)}
.zl-k-prosa pre{background:var(--zl-k-code-bg);border:1px solid var(--zl-k-code-rand);border-radius:var(--zl-k-code-radius);color:var(--zl-k-code-text);padding:14px 16px;overflow-x:auto;font:13px/1.6 var(--mono)}
.zl-k-prosa :not(pre)>code{background:var(--zl-k-code-inline-bg);border-radius:4px;padding:.1em .35em;font:.9em var(--mono)}
.zl-k-prosa kbd,kbd.zl-k-kbd{display:inline-block;min-width:1.6em;padding:.05em .45em;background:var(--zl-k-kbd-bg);color:var(--zl-k-kbd-text);border:1px solid var(--zl-k-kbd-rand);border-radius:var(--zl-k-kbd-radius);box-shadow:var(--zl-k-kbd-schatten);font:.85em/1.5 var(--mono);text-align:center}
.zl-k-feld{min-height:44px;padding:0 14px;background:var(--zl-k-feld-bg);color:var(--text);border:1px solid var(--zl-k-feld-rand);border-radius:var(--zl-k-feld-radius);font:inherit}
.zl-k-feld:hover{border-color:var(--zl-k-feld-rand-hover)}
.zl-k-feld:focus-visible{outline:none;border-color:var(--zl-k-feld-rand-fokus);box-shadow:var(--zl-k-fokus)}

@media (prefers-reduced-motion:reduce){:root{--zl-k-dauer:0s;--zl-k-dauer-lang:0s}}
@media (forced-colors:active){
  .zl-k-produkt,.zl-k-icon-kachel{border-color:CanvasText;background:Canvas}
  .zl-k-text-spektrum{background:none;color:CanvasText}
  .zl-k-knopf::after,.zl-k-nav-aktiv::after{background:CanvasText}
}