/* =====================================================================
   Theme "ki-labor": KI-Labor

   Anmutung: technisch, modern, präzise und trotzdem freundlich.
   Fast schwarzer Graphit mit feinem Punktraster, Leuchtakzente in Cyan
   und Violett, Grün für Erfolg. Space Grotesk für Text und Überschriften,
   JetBrains Mono für Nummern, Kennzeichnungen und Prompts.
   Motive: Leiterbahnen, Status-LEDs, Messanzeige.

   Immer dunkel, unabhängig von der Systemeinstellung. Das Zertifikat
   bleibt ein helles Dokument. Beschreibung, Farben und Kontraste:
   docs/designs/ki-labor.md

   Aufbau
   1. Schriften (selbst gehostet, SIL Open Font License)
   2. Tokens (hell und dunkel identisch)
   3. Grundlagen, Typografie, Knöpfe, Formulare
   4. Kopfzeile, Anmeldung, Kalender, Türchen
   5. Tagesinhalte, Quiz
   6. Zertifikat, Chat, Rückmeldungen, Nebenseiten
   7. Bewegung, Druck
   ===================================================================== */

/* ---------- 1. Schriften ---------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/ki-labor/space-grotesk-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/ki-labor/space-grotesk-latin-wght-normal.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: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/ki-labor/space-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/ki-labor/space-grotesk-latin-ext-wght-normal.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/ki-labor/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/ki-labor/jetbrains-mono-latin-wght-normal.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;
}

/* ---------- 2. Tokens ---------- */
[data-theme~="ki-labor"] {
  color-scheme: dark;
  --font-text: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.11em;

  --container: 1200px;
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --c-bg: #0e1013;
  --c-surface: #161a1f;
  --c-surface-2: #1c2127;
  --c-surface-3: #252b33;
  --c-line: #2b313a;
  --c-control: #6b7583;
  --c-text: #ebe8e1;
  --c-text-muted: #adb2b9;
  --c-primary: #4fd8e5;
  --c-primary-hover: #86e6ee;
  --c-on-primary: #041a1d;
  --c-primary-soft: #0f2b30;
  --c-primary-text: #6fe1ec;
  --c-light: #b49dff;
  --c-light-soft: #231d3a;
  --c-on-light: #150f2c;
  --c-success: #5fe0a0;
  --c-success-soft: #10291f;
  --c-danger: #ff8f86;
  --c-danger-soft: #35191a;
  --c-focus: #8ff0f7;
  --c-mark: #30265a;

  --c-hero-bg: #10141a;
  --c-hero-bg-2: #13303a;
  --c-hero-text: #f3f1ec;
  --c-hero-muted: #aeb6c0;
  --c-hero-line: rgba(111, 225, 236, 0.2);
  --c-hero-accent: #4fd8e5;
  --c-hero-on-accent: #041a1d;
  --snow-opacity: 0.55;

  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 0 1px rgba(79, 216, 229, 0.45), 0 0 26px rgba(79, 216, 229, 0.28);

  --cert-paper: #f4f5f2;
  --cert-ink: #12161b;
  --cert-muted: #4d5560;
  --cert-accent: #0a6b75;
  --cert-accent-2: #6746d0;
  --cert-line: #cfd6db;

  /* Eigene Werte dieses Themes */
  --kl-cyan: #4fd8e5;
  --kl-violett: #b49dff;
  --kl-gruen: #5fe0a0;
  --kl-raster: rgba(255, 255, 255, 0.045);
  --kl-pin: #3a424d;
  --kl-kante: #343b45;
  /* Leiterbahnen: zwei Busse, zwei einzelne Bahnen, Lötaugen an den Enden */
  --kl-bahnen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 320' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='%234fd8e5' stroke-opacity='.42' d='M0 36H150l60 60h120M0 48h145l60 60h115M0 60h140l60 60h110M60 320v-60l40-40h100M300 320v-40l30-30h90'/%3E%3Cpath stroke='%23b49dff' stroke-opacity='.4' d='M480 200H380l-50-50H250M480 212h-105l-50-50H240M480 60h-60l-24 24'/%3E%3Cg fill='%2310141a' stroke='%234fd8e5' stroke-opacity='.65'%3E%3Ccircle cx='330' cy='96' r='3.5'/%3E%3Ccircle cx='320' cy='108' r='3.5'/%3E%3Ccircle cx='310' cy='120' r='3.5'/%3E%3Ccircle cx='200' cy='220' r='3.5'/%3E%3Ccircle cx='420' cy='250' r='3.5'/%3E%3C/g%3E%3Cg fill='%2310141a' stroke='%23b49dff' stroke-opacity='.6'%3E%3Ccircle cx='250' cy='150' r='3.5'/%3E%3Ccircle cx='240' cy='162' r='3.5'/%3E%3Ccircle cx='396' cy='84' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
  /* Eckwinkel wie an einem Messgerät */
  --kl-ecken:
    linear-gradient(var(--kl-cyan) 0 0) left top / 14px 2px no-repeat,
    linear-gradient(var(--kl-cyan) 0 0) left top / 2px 14px no-repeat,
    linear-gradient(var(--kl-cyan) 0 0) right top / 14px 2px no-repeat,
    linear-gradient(var(--kl-cyan) 0 0) right top / 2px 14px no-repeat,
    linear-gradient(var(--kl-cyan) 0 0) left bottom / 14px 2px no-repeat,
    linear-gradient(var(--kl-cyan) 0 0) left bottom / 2px 14px no-repeat,
    linear-gradient(var(--kl-cyan) 0 0) right bottom / 14px 2px no-repeat,
    linear-gradient(var(--kl-cyan) 0 0) right bottom / 2px 14px no-repeat;
}

/* Festgelegt auf dunkel: dieselben Werte auch im Dunkel-Block, damit die dunklen Werte des
   Grundstils hier nie greifen, auch nicht in Kombination mit einem weiteren Theme. */
@media (prefers-color-scheme: dark) {
  [data-theme~="ki-labor"] {
    color-scheme: dark;
    --c-bg: #0e1013;
    --c-surface: #161a1f;
    --c-surface-2: #1c2127;
    --c-surface-3: #252b33;
    --c-line: #2b313a;
    --c-control: #6b7583;
    --c-text: #ebe8e1;
    --c-text-muted: #adb2b9;
    --c-primary: #4fd8e5;
    --c-primary-hover: #86e6ee;
    --c-on-primary: #041a1d;
    --c-primary-soft: #0f2b30;
    --c-primary-text: #6fe1ec;
    --c-light: #b49dff;
    --c-light-soft: #231d3a;
    --c-on-light: #150f2c;
    --c-success: #5fe0a0;
    --c-success-soft: #10291f;
    --c-danger: #ff8f86;
    --c-danger-soft: #35191a;
    --c-focus: #8ff0f7;
    --c-mark: #30265a;
    --c-hero-bg: #10141a;
    --c-hero-bg-2: #13303a;
    --c-hero-text: #f3f1ec;
    --c-hero-muted: #aeb6c0;
    --c-hero-line: rgba(111, 225, 236, 0.2);
    --c-hero-accent: #4fd8e5;
    --c-hero-on-accent: #041a1d;
    --snow-opacity: 0.55;
    --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 0 0 1px rgba(79, 216, 229, 0.45), 0 0 26px rgba(79, 216, 229, 0.28);
    --cert-paper: #f4f5f2;
    --cert-ink: #12161b;
    --cert-muted: #4d5560;
    --cert-accent: #0a6b75;
    --cert-accent-2: #6746d0;
    --cert-line: #cfd6db;
  }
}

/* ---------- 3. Grundlagen ---------- */
[data-theme~="ki-labor"] body {
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(79, 216, 229, 0.07), transparent 70%),
    radial-gradient(760px 520px at -12% 28%, rgba(180, 157, 255, 0.05), transparent 70%),
    radial-gradient(circle at 1px 1px, var(--kl-raster) 1px, transparent 1.6px) 0 0 / 24px 24px,
    var(--c-bg);
}
[data-theme~="ki-labor"] ::selection { background: rgba(79, 216, 229, 0.32); color: #fff; }

[data-theme~="ki-labor"] h1,
[data-theme~="ki-labor"] h2,
[data-theme~="ki-labor"] h3,
[data-theme~="ki-labor"] h4 { line-height: 1.15; }

/* Kennzeichnungen: Monospace, Versalien, weit gesperrt */
[data-theme~="ki-labor"] .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

[data-theme~="ki-labor"] .skip-link { border: 1px solid var(--c-primary); }

/* Ladeleiste */
[data-theme~="ki-labor"] #loadbar {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--kl-cyan), var(--kl-violett), transparent) no-repeat;
  background-size: 40% 100%;
}

/* Knöpfe */
[data-theme~="ki-labor"] .btn { font-weight: 600; letter-spacing: 0.01em; }
[data-theme~="ki-labor"] .btn-primary {
  box-shadow: 0 0 0 1px rgba(79, 216, 229, 0.35), 0 8px 20px -10px rgba(79, 216, 229, 0.7);
}
[data-theme~="ki-labor"] .btn-primary:hover:not(:disabled) {
  box-shadow: 0 0 0 1px rgba(134, 230, 238, 0.65), 0 0 22px rgba(79, 216, 229, 0.35);
}
[data-theme~="ki-labor"] .btn-secondary { background: rgba(255, 255, 255, 0.02); }
[data-theme~="ki-labor"] .btn-secondary:hover:not(:disabled) { background: var(--c-primary-soft); border-color: var(--c-primary); }
[data-theme~="ki-labor"] .btn-light {
  box-shadow: 0 0 0 1px rgba(79, 216, 229, 0.4), 0 10px 26px -10px rgba(79, 216, 229, 0.75);
}
[data-theme~="ki-labor"] .btn-light:hover:not(:disabled) { filter: none; background: var(--c-primary-hover); }
[data-theme~="ki-labor"] .icon-btn { background: var(--c-surface); border-color: var(--kl-kante); }
[data-theme~="ki-labor"] .icon-btn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary-text); background: var(--c-primary-soft); }
[data-theme~="ki-labor"] .chat-info-btn { border-color: transparent; background: transparent; }
[data-theme~="ki-labor"] .chat-info-btn:hover:not(:disabled),
[data-theme~="ki-labor"] .chat-info-btn[aria-expanded="true"] { border-color: transparent; background: var(--c-surface-2); color: var(--c-text); }

/* Formulare */
[data-theme~="ki-labor"] .field input,
[data-theme~="ki-labor"] .num-input { background: var(--c-bg); }
[data-theme~="ki-labor"] .field input:focus-visible,
[data-theme~="ki-labor"] .num-input:focus-visible,
[data-theme~="ki-labor"] .chat-input:focus-visible {
  box-shadow: 0 0 0 3px rgba(143, 240, 247, 0.25), 0 0 18px rgba(79, 216, 229, 0.18);
}
[data-theme~="ki-labor"] .num-input { font-family: var(--font-mono); font-weight: 500; }
[data-theme~="ki-labor"] .form-error { border: 1px solid rgba(255, 143, 134, 0.4); }

/* ---------- 4. Kopfzeile ---------- */
[data-theme~="ki-labor"] .topbar { background: rgba(14, 16, 19, 0.9); }
/* feine Leiterbahn unter der Kopfzeile */
[data-theme~="ki-labor"] .topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 216, 229, 0.55) 25%, rgba(180, 157, 255, 0.45) 70%, transparent);
  pointer-events: none;
}
[data-theme~="ki-labor"] .brand-mark { color: var(--kl-cyan); filter: drop-shadow(0 0 6px rgba(79, 216, 229, 0.55)); }
[data-theme~="ki-labor"] .brand-title { font-weight: 600; letter-spacing: -0.01em; }
[data-theme~="ki-labor"] .topbar-title { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: var(--c-text-muted); }
[data-theme~="ki-labor"] .chat-open-btn {
  border-color: rgba(180, 157, 255, 0.55);
  background: rgba(180, 157, 255, 0.08);
}
[data-theme~="ki-labor"] .chat-open-btn .icon,
[data-theme~="ki-labor"] .chat-open-icon .icon { color: var(--kl-violett); }
[data-theme~="ki-labor"] .chat-open-btn:hover:not(:disabled) { border-color: var(--kl-violett); background: var(--c-light-soft); }

/* Vorschau-Leiste (nur mit ?steuerung=1) */
[data-theme~="ki-labor"] .demo-bar {
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(79, 216, 229, 0.05) 10px 20px),
    var(--c-surface-2);
}
[data-theme~="ki-labor"] .demo-day { font-family: var(--font-mono); font-weight: 600; }

/* ---------- Anmeldung ---------- */
[data-theme~="ki-labor"] .login-art {
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(79, 216, 229, 0.14), transparent 70%),
    radial-gradient(60% 60% at 10% 100%, rgba(180, 157, 255, 0.12), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1.6px) 0 0 / 20px 20px,
    var(--c-hero-bg);
  border-bottom: 1px solid var(--c-hero-line);
}
/* Leiterbahnen als Ausschnitt: mobil rechts oben, ab 900 px in zwei Ecken */
[data-theme~="ki-labor"] .login-art::before,
[data-theme~="ki-labor"] .login-art::after {
  content: "";
  position: absolute;
  background: var(--kl-bahnen) no-repeat;
  pointer-events: none;
}
[data-theme~="ki-labor"] .login-art::before {
  top: 0; right: 0; width: 34%; height: 100%;
  background-size: 480px auto;
  background-position: left -250px top -40px;
  opacity: 0.75;
}
[data-theme~="ki-labor"] .login-art::after,
[data-theme~="ki-labor"] .login-shell:not(.mit-video) .login-art::before { display: none; }
[data-theme~="ki-labor"] .login-art-inner { z-index: 1; }
/* 24 Fenster als LED-Matrix */
[data-theme~="ki-labor"] .login-lights span {
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(111, 225, 236, 0.22);
}
[data-theme~="ki-labor"] .login-lights span.on {
  border-color: transparent;
  background: var(--kl-cyan);
  box-shadow: 0 0 10px rgba(79, 216, 229, 0.75);
}
[data-theme~="ki-labor"] .login-lights span.on:nth-child(3n) {
  background: var(--kl-violett);
  box-shadow: 0 0 10px rgba(180, 157, 255, 0.75);
}
[data-theme~="ki-labor"] .login-art-caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--c-hero-muted);
}
[data-theme~="ki-labor"] .login-video-bild { border-color: rgba(111, 225, 236, 0.35); border-radius: var(--r-sm); }
[data-theme~="ki-labor"] .login-video-play { box-shadow: 0 0 0 3px rgba(79, 216, 229, 0.25), 0 0 16px rgba(79, 216, 229, 0.6); }
[data-theme~="ki-labor"] .login-video-auf-text strong { font-weight: 600; }
[data-theme~="ki-labor"] .login-video-dauer,
[data-theme~="ki-labor"] .login-video-hinweis { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; }
[data-theme~="ki-labor"] .login-video-player {
  border: 1px solid rgba(111, 225, 236, 0.3);
  border-radius: var(--r-md);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 24px 60px -20px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(79, 216, 229, 0.35);
}

[data-theme~="ki-labor"] .login-head .brand-mark { filter: drop-shadow(0 0 10px rgba(79, 216, 229, 0.6)); }
[data-theme~="ki-labor"] .login-dates {
  display: flex; align-items: center; gap: 8px;
  color: var(--c-primary-text);
}
[data-theme~="ki-labor"] .login-dates::before,
[data-theme~="ki-labor"] .hero-text > .eyebrow::before {
  content: "";
  flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
[data-theme~="ki-labor"] .login-title { font-weight: 650; letter-spacing: -0.03em; }
[data-theme~="ki-labor"] .login-sub { font-size: var(--fs-md); }
[data-theme~="ki-labor"] .demo-hint {
  border: 1px dashed rgba(111, 225, 236, 0.55);
  border-radius: var(--r-sm);
  background: rgba(79, 216, 229, 0.04);
}
[data-theme~="ki-labor"] .demo-hint strong {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--c-primary-text);
}
[data-theme~="ki-labor"] .login-provider { font-family: var(--font-mono); letter-spacing: 0.02em; }

@media (min-width: 900px) {
  [data-theme~="ki-labor"] .login-art {
    background:
      radial-gradient(70% 50% at 80% 12%, rgba(79, 216, 229, 0.14), transparent 70%),
      radial-gradient(60% 50% at 10% 95%, rgba(180, 157, 255, 0.12), transparent 70%),
      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1.6px) 0 0 / 20px 20px,
      var(--c-hero-bg);
    border-bottom: 0;
    border-right: 1px solid var(--c-hero-line);
  }
  [data-theme~="ki-labor"] .login-art::before,
  [data-theme~="ki-labor"] .login-art::after {
    display: block;
    top: 0; left: 0; right: auto;
    width: 72%; height: 176px;
    background-size: 540px auto;
    background-position: left -24px top -26px;
    opacity: 1;
  }
  /* zweiter Ausschnitt, um 180 Grad gedreht, kommt aus der Ecke rechts unten */
  [data-theme~="ki-labor"] .login-art::after {
    top: auto; left: auto; bottom: 0; right: 0;
    transform: rotate(180deg);
  }
  [data-theme~="ki-labor"] .login-shell:not(.mit-video) .login-art::before { display: block; }
  [data-theme~="ki-labor"] .login-lights { gap: 18px; width: min(70%, 250px); }
  [data-theme~="ki-labor"] .mit-video .login-lights { gap: 10px; width: min(100%, 360px); }
}
/* Niedrige Fenster: Leiterbahnen kleiner, damit sie Video und Bildunterschrift nicht kreuzen */
@media (min-width: 900px) and (max-height: 760px) {
  [data-theme~="ki-labor"] .login-art::before,
  [data-theme~="ki-labor"] .login-art::after { height: 112px; background-size: 420px auto; }
}

/* Kundenlogo: Das Theme ist immer dunkel. Hat das Logo eine Fassung für dunklen Grund (srcDunkel),
   wählen app.js und registrierung.js sie und setzen data-dunkel="true" (Paket S2). Nur ein Logo ohne
   diese Fassung steht im hellen Systemmodus auf einer hellen Platte, sonst stünde ein weißes Logo auf
   Weiß (Befund S7-1). */
@media (prefers-color-scheme: light) {
  [data-theme~="ki-labor"] .kunden-logo-topbar:not([data-dunkel="true"]),
  [data-theme~="ki-labor"] .kunden-logo-login:not([data-dunkel="true"]) {
    padding: 4px 8px;
    border-radius: var(--r-sm);
    background: #f4f5f2;
  }
  [data-theme~="ki-labor"] .kunden-logo-topbar:not([data-dunkel="true"]) { --logo-h: calc(var(--kunden-logo-topbar-h, 28px) + 8px); }
  [data-theme~="ki-labor"] .kunden-logo-login:not([data-dunkel="true"]) { --logo-h: calc(var(--kunden-logo-login-h, 44px) + 8px); }
}

/* ---------- Kalender ---------- */
/* Hinweis zur Demo */
/* Im Grundstil setzt .demo-neustart .btn-link die Höhe auf 32 px und schlägt damit die 44 px für Touch */
@media (pointer: coarse), (max-width: 599px) {
  [data-theme~="ki-labor"] .demo-neustart .btn-link { min-height: 44px; }
}
[data-theme~="ki-labor"] .demo-hinweis strong {
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-light);
}

/* Statusfeld: dunkles Messfeld mit Raster, Leiterbahnen und Eckwinkeln */
[data-theme~="ki-labor"] .hero {
  border: 1px solid var(--c-hero-line);
  background:
    radial-gradient(55% 90% at 100% 0%, rgba(79, 216, 229, 0.13), transparent 70%),
    radial-gradient(45% 80% at 0% 100%, rgba(180, 157, 255, 0.1), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1.6px) 0 0 / 18px 18px,
    var(--c-hero-bg);
  box-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme~="ki-labor"] .hero::after {
  content: "";
  position: absolute; inset: 10px;
  background: var(--kl-ecken);
  opacity: 0.55;
  pointer-events: none;
}
[data-theme~="ki-labor"] .hero-text > .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 9px;
  border: 1px solid rgba(79, 216, 229, 0.35);
  border-radius: var(--r-pill);
  background: rgba(79, 216, 229, 0.07);
  color: var(--c-hero-accent);
}
[data-theme~="ki-labor"] .hero-title { font-weight: 650; letter-spacing: -0.025em; }
[data-theme~="ki-labor"] .hero-teaser {
  border-color: var(--c-hero-line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 3px 0 0 var(--kl-violett);
}
[data-theme~="ki-labor"] .hero-teaser .icon { color: var(--kl-violett); }
[data-theme~="ki-labor"] .hero-teaser-type {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfc2ff;
}
[data-theme~="ki-labor"] .hero-teaser-title { font-weight: 600; }
[data-theme~="ki-labor"] .hero .btn-ghost-light { border-color: rgba(111, 225, 236, 0.45); }
[data-theme~="ki-labor"] .hero .btn-ghost-light:hover { background: rgba(79, 216, 229, 0.1); }

/* Fortschritt als Messanzeige: 24 Segmente auf einem Bogen von 270 Grad.
   Mobil klein links mit Text daneben, ab 768 px groß und mittig. */
[data-theme~="ki-labor"] .hero-progress {
  --kl-mess: 132px;
  --kl-strich: 12px;
  --kl-mx: calc(var(--kl-mess) / 2);
  position: relative;
  display: grid;
  grid-template-columns: var(--kl-mess) minmax(0, 1fr);
  align-items: start;
  column-gap: 18px;
  text-align: left;
}
[data-theme~="ki-labor"] .hero-progress:has(.lights:empty) { display: none; }
[data-theme~="ki-labor"] .lights {
  position: relative;
  display: block;
  width: var(--kl-mess);
  height: var(--kl-mess);
  max-width: none;
  margin: 0;
}
/* innere Skala */
[data-theme~="ki-labor"] .lights::before {
  content: "";
  position: absolute; inset: 20%;
  border-radius: 50%;
  border: 1px dashed rgba(111, 225, 236, 0.28);
  -webkit-mask: conic-gradient(from 225deg, #000 0 270deg, transparent 270deg);
  mask: conic-gradient(from 225deg, #000 0 270deg, transparent 270deg);
}
[data-theme~="ki-labor"] .lights span {
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: var(--kl-strich);
  margin: calc(var(--kl-strich) / -2) 0 0 -2px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 2px;
  background: #2a323c;
  transform: rotate(var(--kl-w, 0deg)) translateY(calc(var(--kl-mess) / -2 + var(--kl-strich) / 2 + 4px));
}
[data-theme~="ki-labor"] .lights span.open { background: #4b5664; }
[data-theme~="ki-labor"] .lights span.on {
  background: var(--kl-cyan);
  box-shadow: 0 0 8px rgba(79, 216, 229, 0.85);
}
[data-theme~="ki-labor"] .lights span.today {
  background: var(--kl-violett);
  box-shadow: 0 0 10px rgba(180, 157, 255, 0.9);
}
[data-theme~="ki-labor"] .lights span:nth-child(1){--kl-w:-135deg}
[data-theme~="ki-labor"] .lights span:nth-child(2){--kl-w:-123.26deg}
[data-theme~="ki-labor"] .lights span:nth-child(3){--kl-w:-111.52deg}
[data-theme~="ki-labor"] .lights span:nth-child(4){--kl-w:-99.78deg}
[data-theme~="ki-labor"] .lights span:nth-child(5){--kl-w:-88.04deg}
[data-theme~="ki-labor"] .lights span:nth-child(6){--kl-w:-76.3deg}
[data-theme~="ki-labor"] .lights span:nth-child(7){--kl-w:-64.57deg}
[data-theme~="ki-labor"] .lights span:nth-child(8){--kl-w:-52.83deg}
[data-theme~="ki-labor"] .lights span:nth-child(9){--kl-w:-41.09deg}
[data-theme~="ki-labor"] .lights span:nth-child(10){--kl-w:-29.35deg}
[data-theme~="ki-labor"] .lights span:nth-child(11){--kl-w:-17.61deg}
[data-theme~="ki-labor"] .lights span:nth-child(12){--kl-w:-5.87deg}
[data-theme~="ki-labor"] .lights span:nth-child(13){--kl-w:5.87deg}
[data-theme~="ki-labor"] .lights span:nth-child(14){--kl-w:17.61deg}
[data-theme~="ki-labor"] .lights span:nth-child(15){--kl-w:29.35deg}
[data-theme~="ki-labor"] .lights span:nth-child(16){--kl-w:41.09deg}
[data-theme~="ki-labor"] .lights span:nth-child(17){--kl-w:52.83deg}
[data-theme~="ki-labor"] .lights span:nth-child(18){--kl-w:64.57deg}
[data-theme~="ki-labor"] .lights span:nth-child(19){--kl-w:76.3deg}
[data-theme~="ki-labor"] .lights span:nth-child(20){--kl-w:88.04deg}
[data-theme~="ki-labor"] .lights span:nth-child(21){--kl-w:99.78deg}
[data-theme~="ki-labor"] .lights span:nth-child(22){--kl-w:111.52deg}
[data-theme~="ki-labor"] .lights span:nth-child(23){--kl-w:123.26deg}
[data-theme~="ki-labor"] .lights span:nth-child(24){--kl-w:135deg}
/* Skalenenden 0 und 24 */
[data-theme~="ki-labor"] .hero-progress::before,
[data-theme~="ki-labor"] .hero-progress::after {
  position: absolute;
  top: calc(var(--kl-mess) * 0.84);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1;
  color: var(--c-hero-muted);
}
[data-theme~="ki-labor"] .hero-progress::before { content: "0"; content: "0" / ""; left: calc(var(--kl-mx) - var(--kl-mess) * 0.37); }
[data-theme~="ki-labor"] .hero-progress::after { content: "24"; content: "24" / ""; left: calc(var(--kl-mx) + var(--kl-mess) * 0.29); }
/* Zahl in der Mitte des Bogens, der Rest des Satzes daneben oder darunter */
[data-theme~="ki-labor"] .hero-progress-label {
  align-self: center;
  max-width: 30ch;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
[data-theme~="ki-labor"] .hero-progress-label strong {
  position: absolute;
  top: calc(var(--kl-mess) / 2);
  left: var(--kl-mx);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--c-hero-text);
  text-shadow: 0 0 18px rgba(79, 216, 229, 0.45);
}
@media (min-width: 600px) {
  [data-theme~="ki-labor"] .hero-progress { --kl-mess: 164px; --kl-strich: 14px; column-gap: 24px; }
  [data-theme~="ki-labor"] .hero-progress-label strong { font-size: 1.2rem; }
}
@media (min-width: 960px) {
  [data-theme~="ki-labor"] .hero-body { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; }
  [data-theme~="ki-labor"] .hero-progress {
    --kl-mess: 204px;
    --kl-strich: 17px;
    --kl-mx: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: 24px;
    border-left: 1px dashed rgba(111, 225, 236, 0.2);
  }
  /* Skalenenden relativ zur Mitte der Anzeige, die durch den Innenabstand nach rechts rückt */
  [data-theme~="ki-labor"] .hero-progress { --kl-mx: calc(50% + 12px); }
  [data-theme~="ki-labor"] .hero-progress-label { margin-top: -2px; }
  [data-theme~="ki-labor"] .hero-progress-label strong { font-size: 1.45rem; }
}

/* Abschnittskopf und Legende */
[data-theme~="ki-labor"] .section-title { display: inline-flex; align-items: center; gap: 10px; }
[data-theme~="ki-labor"] .section-title::before {
  content: "";
  flex: none;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--kl-cyan);
  box-shadow: 0 0 10px rgba(79, 216, 229, 0.7);
}
[data-theme~="ki-labor"] .legend { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
[data-theme~="ki-labor"] .legend-dot { width: 9px; height: 9px; }
[data-theme~="ki-labor"] .legend-dot.is-today { border: 0; background: var(--kl-cyan); box-shadow: 0 0 8px rgba(79, 216, 229, 0.9); }
[data-theme~="ki-labor"] .legend-dot.is-viewed { background: var(--kl-gruen); border-color: var(--kl-gruen); box-shadow: 0 0 8px rgba(95, 224, 160, 0.8); }
[data-theme~="ki-labor"] .legend-dot.is-locked { background: var(--c-surface-3); border: 1px dashed var(--c-control); }

/* ---------- Türchen als Module mit Kennung und Status-LED ---------- */
[data-theme~="ki-labor"] .tiles-grid { counter-reset: kl-tag; gap: 12px; }
@media (min-width: 600px) { [data-theme~="ki-labor"] .tiles-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 768px) { [data-theme~="ki-labor"] .tiles-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { [data-theme~="ki-labor"] .tiles-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px 16px; } }

[data-theme~="ki-labor"] .tile {
  counter-increment: kl-tag;
  /* Mit Seitenverhältnis wäre ein Rasterelement sonst nicht quer gestreckt: Wird die Zeile höher,
     wüchse das Türchen in die Breite und überdeckte den Nachbarn (320 px) */
  justify-self: stretch;
  aspect-ratio: 5 / 6;
  padding: 10px 10px 10px 11px;
  border: 1px solid var(--kl-kante);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%),
    var(--c-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.35);
}
@media (min-width: 600px) { [data-theme~="ki-labor"] .tile { aspect-ratio: 1; padding: 12px; } }
[data-theme~="ki-labor"] .tile:hover:not(.locked) {
  border-color: rgba(79, 216, 229, 0.6);
  box-shadow: 0 0 0 1px rgba(79, 216, 229, 0.2), 0 14px 30px -14px rgba(79, 216, 229, 0.55);
}

/* Kennung: kleines "TAG" über einer zweistelligen Nummer aus einem CSS-Zähler */
[data-theme~="ki-labor"] .tile-num {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-mono);
  font-size: 0;
  letter-spacing: 0;
}
[data-theme~="ki-labor"] .tile-num::before {
  content: "Tag";
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--c-text-muted);
}
/* Kennung in der Sprache der Seite (Befunde S7-3 und S7-11), zh und ja mit dem Wort für Türchen aus
   dem Glossar wie tuerchen.titel */
[data-theme~="ki-labor"] .tile-num:lang(en)::before { content: "Day"; }
[data-theme~="ki-labor"] .tile-num:lang(pt)::before { content: "Dia"; }
[data-theme~="ki-labor"] .tile-num:lang(zh)::before { content: "小门"; }
[data-theme~="ki-labor"] .tile-num:lang(ja)::before { content: "扉"; }
[data-theme~="ki-labor"] .tile-num::after {
  content: counter(kl-tag, decimal-leading-zero);
  font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Beinchen links und rechts: das Türchen als Chip */
[data-theme~="ki-labor"] .tile-foot::before,
[data-theme~="ki-labor"] .tile-foot::after {
  content: "";
  position: absolute;
  top: 32%; bottom: 32%;
  width: 3px;
  background: repeating-linear-gradient(180deg, var(--kl-pin) 0 3px, transparent 3px 9px);
  pointer-events: none;
}
[data-theme~="ki-labor"] .tile-foot::before { left: -4px; }
[data-theme~="ki-labor"] .tile-foot::after { right: -4px; }
@media (min-width: 600px) {
  [data-theme~="ki-labor"] .tile-foot::before,
  [data-theme~="ki-labor"] .tile-foot::after { width: 4px; }
  [data-theme~="ki-labor"] .tile-foot::before { left: -5px; }
  [data-theme~="ki-labor"] .tile-foot::after { right: -5px; }
}
[data-theme~="ki-labor"] .tile:hover:not(.locked) .tile-foot::before,
[data-theme~="ki-labor"] .tile:hover:not(.locked) .tile-foot::after,
[data-theme~="ki-labor"] .tile.today .tile-foot::before,
[data-theme~="ki-labor"] .tile.today .tile-foot::after {
  background: repeating-linear-gradient(180deg, rgba(79, 216, 229, 0.7) 0 3px, transparent 3px 9px);
}

[data-theme~="ki-labor"] .tile-foot { gap: 5px; }
[data-theme~="ki-labor"] .tile-type { color: var(--c-primary-text); }
[data-theme~="ki-labor"] .tile-type .icon { width: 18px; height: 18px; }
[data-theme~="ki-labor"] .tile-type-label { font-size: 0.75rem; font-weight: 500; line-height: 1.25; }

/* Status-LED oben rechts: offen = leerer Ring, angesehen = grün, heute = Etikett mit Cyan */
[data-theme~="ki-labor"] .tile::before {
  content: "";
  position: absolute; top: 11px; right: 11px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--c-control);
  pointer-events: none;
}
[data-theme~="ki-labor"] .tile.viewed:not(.today)::before,
[data-theme~="ki-labor"] .tile.locked::before { display: none; }
[data-theme~="ki-labor"] .tile-status { top: 8px; right: 8px; width: 18px; height: 18px; }
[data-theme~="ki-labor"] .tile-status .icon { width: 12px; height: 12px; stroke-width: 2.6; }
[data-theme~="ki-labor"] .tile.viewed {
  border-color: rgba(95, 224, 160, 0.3);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(95, 224, 160, 0.11), transparent 60%),
    var(--c-surface);
}
[data-theme~="ki-labor"] .tile.viewed .tile-status {
  background: var(--kl-gruen);
  color: #06170f;
  box-shadow: 0 0 0 3px rgba(95, 224, 160, 0.14), 0 0 12px rgba(95, 224, 160, 0.6);
}

[data-theme~="ki-labor"] .tile.locked {
  border: 1px dashed var(--c-line);
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, 0.018) 7px 8px),
    var(--c-surface-2);
  box-shadow: none;
}
[data-theme~="ki-labor"] .tile.locked .tile-num { opacity: 0.7; }
[data-theme~="ki-labor"] .tile.locked .tile-status .icon { width: 14px; height: 14px; stroke-width: 1.9; }

/* Heute: Rahmen in Cyan, ein leises Leuchten (nur Deckkraft, bei reduzierter Bewegung ruhig) */
[data-theme~="ki-labor"] .tile.today {
  border: 1px solid var(--kl-cyan);
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(79, 216, 229, 0.15), transparent 65%),
    var(--c-surface);
  box-shadow: 0 0 0 1px rgba(79, 216, 229, 0.35), 0 0 22px rgba(79, 216, 229, 0.2);
  animation: none;
}
[data-theme~="ki-labor"] .tile.today::before {
  inset: -1px;
  width: auto; height: auto;
  border: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 3px rgba(79, 216, 229, 0.3), 0 0 32px rgba(79, 216, 229, 0.5);
  opacity: 0.2;
  animation: kl-puls 3.2s ease-in-out infinite;
}
@keyframes kl-puls {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.75; }
}
[data-theme~="ki-labor"] .tile-today-badge {
  display: inline-flex; align-items: center; gap: 5px;
  top: 8px; right: 8px;
  padding: 2px 6px 2px 5px;
  border: 1px solid rgba(79, 216, 229, 0.55);
  border-radius: 4px;
  background: rgba(79, 216, 229, 0.12);
  color: var(--c-primary-text);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
[data-theme~="ki-labor"] .tile-today-badge::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--kl-cyan);
  box-shadow: 0 0 6px var(--kl-cyan);
}
@media (max-width: 599px) {
  /* Etikett bleibt oben rechts, "TAG" steht links daneben */
  [data-theme~="ki-labor"] .tile.today { padding-top: 10px; }
  [data-theme~="ki-labor"] .tile-today-badge { top: 7px; left: auto; right: 6px; }
}

/* Sehr schmal (320 px): etwas enger, damit Nummer, Etikett und Beschriftung passen */
@media (max-width: 359px) {
  [data-theme~="ki-labor"] .tiles-grid { gap: 10px; }
  [data-theme~="ki-labor"] .tile { padding: 9px 7px 9px 9px; }
  [data-theme~="ki-labor"] .tile::before { top: 9px; right: 8px; }
  [data-theme~="ki-labor"] .tile-num::after { font-size: 1.4rem; }
  [data-theme~="ki-labor"] .tile-status { top: 6px; right: 5px; }
  [data-theme~="ki-labor"] .tile-today-badge { right: 4px; padding: 2px 4px; gap: 4px; }
  [data-theme~="ki-labor"] .tile.today .tile-num::before { visibility: hidden; }
}

/* Öffnen: Datenstrahl in Cyan statt warmem Lichtspalt (gleiches Timing wie im Grundstil) */
[data-theme~="ki-labor"] .tile::after {
  background: linear-gradient(90deg, rgba(79, 216, 229, 0.06), rgba(79, 216, 229, 0.5) 50%, rgba(79, 216, 229, 0.06));
}
[data-theme~="ki-labor"] .tile.opening:not(.locked) {
  border-color: var(--kl-cyan);
  box-shadow: 0 0 0 1px var(--kl-cyan), 0 14px 34px rgba(79, 216, 229, 0.38);
}

/* ---------- 5. Tagesinhalte ---------- */
[data-theme~="ki-labor"] .content-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 160px),
    var(--c-surface);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
/* Leiterbahn oben an jeder Karte */
[data-theme~="ki-labor"] .content-card::before {
  content: "";
  position: absolute; left: 24px; right: 24px; top: -1px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--kl-cyan), var(--kl-violett) 55%, transparent);
  pointer-events: none;
}

[data-theme~="ki-labor"] .type-chip {
  padding: 4px 9px 4px 7px;
  border: 1px solid rgba(79, 216, 229, 0.4);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme~="ki-labor"] .day-date { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
[data-theme~="ki-labor"] .day-title { font-weight: 650; letter-spacing: -0.025em; }

/* Ab 1024 px: Kopfdaten als Seitenleiste links, Inhalt rechts in der Lesespalte */
@media (min-width: 1024px) {
  [data-theme~="ki-labor"] #view-day .container.narrow { max-width: calc(980px + 2 * var(--gutter)); }
  [data-theme~="ki-labor"] #day-content {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    column-gap: 44px;
    align-items: start;
  }
  [data-theme~="ki-labor"] #day-content > * { grid-column: 2; }
  [data-theme~="ki-labor"] #day-content > .day-meta {
    grid-column: 1;
    grid-row: 1 / span 3;
    position: sticky;
    top: calc(var(--topbar-h) + 28px);
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 0;
    padding-right: 20px;
    border-right: 1px solid var(--c-line);
  }
  /* senkrechte Leiterbahn mit Lötauge */
  [data-theme~="ki-labor"] #day-content > .day-meta::after {
    content: "";
    width: 9px; height: 72px;
    margin-left: 10px;
    background:
      radial-gradient(circle at 50% calc(100% - 4.5px), transparent 2.5px, rgba(79, 216, 229, 0.7) 3px 4px, transparent 4.5px),
      linear-gradient(rgba(79, 216, 229, 0.7), rgba(79, 216, 229, 0.15)) center top / 1.5px calc(100% - 9px) no-repeat;
  }
  [data-theme~="ki-labor"] #day-content > .day-meta .day-date { font-size: 0.8rem; color: var(--c-text); }
  [data-theme~="ki-labor"] #day-content .final-submit-row { margin-left: calc(-1 * (var(--sp-10) + 172px + 44px)); padding-left: calc(var(--sp-10) + 172px + 44px); }
}

[data-theme~="ki-labor"] .callout {
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--kl-cyan);
  background: var(--c-surface-2);
}
[data-theme~="ki-labor"] .callout .icon { color: var(--c-primary-text); }
[data-theme~="ki-labor"] .callout-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary-text);
  margin-bottom: 4px;
}
[data-theme~="ki-labor"] .callout-light { border-left-color: var(--kl-violett); background: var(--c-light-soft); border-color: rgba(180, 157, 255, 0.3); }
[data-theme~="ki-labor"] .callout-light .icon,
[data-theme~="ki-labor"] .callout-light .callout-title { color: #cfc2ff; }

/* Video */
[data-theme~="ki-labor"] .video-player { border: 1px solid var(--c-line); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9); }
[data-theme~="ki-labor"] .video-hinweis,
[data-theme~="ki-labor"] .video-duration { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; }
[data-theme~="ki-labor"] .video-frame {
  border: 1px solid var(--c-hero-line);
  background:
    var(--kl-ecken),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
    radial-gradient(80% 100% at 70% 0%, rgba(79, 216, 229, 0.12), transparent 70%),
    var(--c-hero-bg);
}
[data-theme~="ki-labor"] .video-play { border-color: rgba(79, 216, 229, 0.6); background: rgba(79, 216, 229, 0.08); box-shadow: 0 0 22px rgba(79, 216, 229, 0.3); }

/* Praxisbeispiel als Ablauf mit Knoten */
[data-theme~="ki-labor"] .steps li { padding-left: 52px; }
[data-theme~="ki-labor"] .steps li::before {
  content: counter(step, decimal-leading-zero);
  width: 34px; height: 30px;
  border-radius: 6px;
  border: 1px solid var(--c-control);
  background: var(--c-surface-2);
  color: var(--c-primary-text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}
[data-theme~="ki-labor"] .steps li:not(:last-child)::after {
  left: 16.5px; top: 36px; bottom: 6px; width: 1px;
  background: repeating-linear-gradient(180deg, rgba(79, 216, 229, 0.6) 0 4px, transparent 4px 8px);
}
[data-theme~="ki-labor"] .steps li.is-result::before {
  border-color: var(--kl-cyan);
  background: var(--kl-cyan);
  color: var(--c-on-primary);
  box-shadow: 0 0 14px rgba(79, 216, 229, 0.55);
}
[data-theme~="ki-labor"] .steps li.is-result .step-label { color: var(--c-primary-text); }
[data-theme~="ki-labor"] .steps li.is-result .step-text { border: 1px solid rgba(79, 216, 229, 0.3); }

/* Prompt als Terminalfenster */
[data-theme~="ki-labor"] .prompt {
  border: 1px solid #2f3742;
  border-radius: var(--r-md);
  background: #0a0c0f;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
[data-theme~="ki-labor"] .prompt-head {
  padding: 6px 6px 6px 14px;
  border-bottom-color: #262d36;
  background: linear-gradient(#1b2027, #151a20);
}
/* drei Fensterpunkte */
[data-theme~="ki-labor"] .prompt-head::before {
  content: "";
  flex: none;
  width: 40px; height: 10px;
  background:
    radial-gradient(circle at 5px 5px, #4a5462 4px, transparent 4.5px),
    radial-gradient(circle at 20px 5px, #4a5462 4px, transparent 4.5px),
    radial-gradient(circle at 35px 5px, #4a5462 4px, transparent 4.5px);
}
[data-theme~="ki-labor"] .prompt-head .eyebrow { margin-right: auto; color: var(--c-text-muted); }
[data-theme~="ki-labor"] .prompt-text {
  padding: 18px 18px 20px;
  font-size: 0.875rem;
  line-height: 1.75;
  color: #dff3f5;
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0;
}
[data-theme~="ki-labor"] .prompt-text::before {
  content: "›";
  content: "›" / "";
  margin-right: 0.6em;
  color: var(--kl-cyan);
  font-weight: 700;
}
/* Schreibmarke: blinkt nur ein paar Mal, dann steht sie */
[data-theme~="ki-labor"] .prompt-text::after {
  content: "";
  display: inline-block;
  width: 0.55em; height: 1.15em;
  margin-left: 3px;
  vertical-align: text-bottom;
  background: var(--kl-cyan);
  opacity: 0.8;
  animation: kl-marke 1.1s steps(1) 4;
}
@keyframes kl-marke { 50% { opacity: 0; } }
[data-theme~="ki-labor"] .prompt-text mark {
  background: rgba(180, 157, 255, 0.2);
  color: #efe9ff;
  box-shadow: inset 0 -1px 0 var(--kl-violett);
}
[data-theme~="ki-labor"] .copy-btn { background: transparent; }
[data-theme~="ki-labor"] .copy-btn.is-done { border-color: var(--c-success); color: var(--c-success); }

/* Tool-Steckbrief als Datenblatt */
[data-theme~="ki-labor"] .facts {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  padding: 0 var(--sp-4);
}
[data-theme~="ki-labor"] .facts > div { border-bottom: 1px dashed var(--c-line); }
[data-theme~="ki-labor"] .facts > div:last-child { border-bottom: 0; }
[data-theme~="ki-labor"] .facts dt { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; color: var(--c-primary-text); }
[data-theme~="ki-labor"] .facts .facts-lead:not(.is-lang) dd { font-weight: 600; }

/* Mythos */
[data-theme~="ki-labor"] .myth-front {
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 255, 255, 0.018) 10px 11px),
    var(--c-surface-2);
}
[data-theme~="ki-labor"] .myth-tag { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; }
[data-theme~="ki-labor"] .myth-front .myth-tag { color: #cfc2ff; }
[data-theme~="ki-labor"] .myth-statement { font-weight: 600; letter-spacing: -0.015em; }
[data-theme~="ki-labor"] .myth-verdict {
  border: 1px solid rgba(255, 143, 134, 0.45);
  border-radius: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-theme~="ki-labor"] .myth-back { border-top: 1px solid rgba(95, 224, 160, 0.35); background: linear-gradient(180deg, rgba(95, 224, 160, 0.07), transparent 70%), var(--c-surface); }

/* Auswahl: Tasten mit Buchstaben */
[data-theme~="ki-labor"] .option:hover:not(:disabled) { box-shadow: 0 0 16px -4px rgba(79, 216, 229, 0.45); }
[data-theme~="ki-labor"] .option-key {
  border: 1px solid var(--c-control);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--c-surface-2);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
[data-theme~="ki-labor"] .option.correct { box-shadow: 0 0 18px -6px rgba(95, 224, 160, 0.6); }
[data-theme~="ki-labor"] .option.correct .option-key,
[data-theme~="ki-labor"] .option.incorrect .option-key { border-color: transparent; }
[data-theme~="ki-labor"] .option.is-dim { opacity: 0.62; }

[data-theme~="ki-labor"] .feedback {
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-control);
}
[data-theme~="ki-labor"] .feedback.is-correct { border-color: rgba(95, 224, 160, 0.35); border-left-color: var(--c-success); }
[data-theme~="ki-labor"] .feedback.is-incorrect { border-color: rgba(255, 143, 134, 0.35); border-left-color: var(--c-danger); }
[data-theme~="ki-labor"] .question { font-weight: 600; }

/* Checkliste mit Segmentanzeige */
[data-theme~="ki-labor"] .checklist-progress { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; }
[data-theme~="ki-labor"] .meter { position: relative; height: 8px; border-radius: 2px; background: var(--c-surface-3); max-width: 240px; }
[data-theme~="ki-labor"] .meter > span {
  border-radius: 2px;
  background: linear-gradient(90deg, var(--kl-cyan), var(--kl-gruen));
  box-shadow: 0 0 10px rgba(79, 216, 229, 0.55);
}
[data-theme~="ki-labor"] .meter::after,
[data-theme~="ki-labor"] .poll-bar::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 10px, var(--c-surface) 10px 12px);
  pointer-events: none;
}
[data-theme~="ki-labor"] .check { border-color: var(--c-line); background: var(--c-surface); }
[data-theme~="ki-labor"] .check:hover { border-color: rgba(79, 216, 229, 0.55); }
[data-theme~="ki-labor"] .check input { border-radius: 5px; background: var(--c-bg); }
[data-theme~="ki-labor"] .check input:checked { background-color: var(--c-primary); border-color: var(--c-primary); box-shadow: 0 0 10px rgba(79, 216, 229, 0.5); }
[data-theme~="ki-labor"] .check:has(input:checked) { background: var(--c-surface-2); border-color: rgba(79, 216, 229, 0.25); }

/* Rechner: Ergebnis als Anzeige */
[data-theme~="ki-labor"] .calc-range output { font-family: var(--font-mono); }
[data-theme~="ki-labor"] input[type="range"] { accent-color: var(--kl-cyan); }
[data-theme~="ki-labor"] .calc-result {
  position: relative;
  border: 1px solid rgba(79, 216, 229, 0.3);
  background:
    var(--kl-ecken),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px),
    radial-gradient(70% 100% at 50% 0%, rgba(79, 216, 229, 0.12), transparent 70%),
    #0a0d11;
  box-shadow: inset 0 0 40px rgba(79, 216, 229, 0.06);
}
[data-theme~="ki-labor"] .calc-big {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--kl-cyan);
  text-shadow: 0 0 20px rgba(79, 216, 229, 0.5);
}
[data-theme~="ki-labor"] .calc-big small { font-family: var(--font-text); font-weight: 500; letter-spacing: 0; text-shadow: none; }
[data-theme~="ki-labor"] .calc-big.is-hinweis { font-family: var(--font-text); color: var(--c-hero-text); text-shadow: none; }

/* Impuls */
[data-theme~="ki-labor"] .quote { position: relative; border-left: 0; padding-left: 26px; }
[data-theme~="ki-labor"] .quote::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 2px;
  background: linear-gradient(var(--kl-cyan), var(--kl-violett));
  box-shadow: 0 0 14px rgba(180, 157, 255, 0.45);
}
[data-theme~="ki-labor"] .quote p { font-weight: 500; letter-spacing: -0.02em; }
[data-theme~="ki-labor"] .quote footer { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; }

/* Umfrage */
[data-theme~="ki-labor"] .poll-bar { position: relative; height: 10px; border-radius: 2px; }
[data-theme~="ki-labor"] .poll-bar-fill { background: #56626f; border-radius: 2px; }
[data-theme~="ki-labor"] .poll-row.mine .poll-bar-fill {
  background: linear-gradient(90deg, var(--kl-cyan), var(--kl-violett));
  box-shadow: 0 0 12px rgba(79, 216, 229, 0.5);
}
[data-theme~="ki-labor"] .poll-row-head .pct { font-family: var(--font-mono); font-weight: 600; }
[data-theme~="ki-labor"] .mine-chip {
  border-color: rgba(180, 157, 255, 0.6);
  border-radius: 4px;
  color: #e4dcff;
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Quiz (Türchen 24) ---------- */
[data-theme~="ki-labor"] .final-intro { gap: var(--sp-2); }
[data-theme~="ki-labor"] .final-intro > span {
  padding: 4px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
}
[data-theme~="ki-labor"] .passed-note { border-color: rgba(95, 224, 160, 0.45); }
[data-theme~="ki-labor"] .final-form { counter-reset: kl-frage; }
[data-theme~="ki-labor"] .final-q { counter-increment: kl-frage; }
[data-theme~="ki-labor"] .final-q-num {
  width: 34px; height: 26px; margin-top: 1px;
  border: 1px solid var(--c-control);
  border-radius: 5px;
  background: var(--c-surface-2);
  font-size: 0;
}
[data-theme~="ki-labor"] .final-q-num::before {
  content: counter(kl-frage, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
}
[data-theme~="ki-labor"] .final-q.is-answered .final-q-num { border-color: var(--kl-cyan); background: var(--c-primary-soft); color: var(--c-primary-text); }
[data-theme~="ki-labor"] .final-q.is-missing .final-q-num,
[data-theme~="ki-labor"] .final-q.is-falsch .final-q-num { border-color: var(--c-danger); background: var(--c-danger); color: #2a0d0b; }
[data-theme~="ki-labor"] .final-q.is-richtig .final-q-num { border-color: var(--c-success); background: var(--c-success); color: #06170f; }
[data-theme~="ki-labor"] .radio-opt { background: var(--c-surface); }
[data-theme~="ki-labor"] .radio-opt input { background: var(--c-bg); }
[data-theme~="ki-labor"] .radio-opt input::before { box-shadow: 0 0 8px rgba(79, 216, 229, 0.8); }
[data-theme~="ki-labor"] .radio-marke { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; }
[data-theme~="ki-labor"] .final-q .radio-opt.is-loesung { background: transparent; }
[data-theme~="ki-labor"] .final-q-ergebnis { border-left-width: 3px; }
[data-theme~="ki-labor"] .final-submit-row {
  background: rgba(22, 26, 31, 0.94);
  box-shadow: 0 -14px 28px -18px rgba(0, 0, 0, 0.9);
}
[data-theme~="ki-labor"] .final-count { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; }

[data-theme~="ki-labor"] .result { position: relative; border: 1px solid var(--c-line); }
[data-theme~="ki-labor"] .result-score { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.03em; }
[data-theme~="ki-labor"] .result.is-pass {
  border-color: rgba(95, 224, 160, 0.5);
  background:
    var(--kl-ecken),
    radial-gradient(80% 100% at 50% 0%, rgba(95, 224, 160, 0.16), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 1.6px) 0 0 / 18px 18px,
    var(--c-hero-bg);
  box-shadow: 0 0 0 1px rgba(95, 224, 160, 0.15), 0 24px 60px -24px rgba(95, 224, 160, 0.35);
}
[data-theme~="ki-labor"] .result.is-pass .result-score { color: var(--kl-gruen); text-shadow: 0 0 22px rgba(95, 224, 160, 0.55); }
[data-theme~="ki-labor"] .result-sprung { border-radius: 5px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; }

/* ---------- 6. Zertifikat (hell, technische Akzente) ---------- */
[data-theme~="ki-labor"] .certificate {
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 60px -20px rgba(79, 216, 229, 0.25);
}
[data-theme~="ki-labor"] .cert-frame {
  border: 1px solid var(--cert-line);
  outline: 1px solid var(--cert-line);
  outline-offset: clamp(4px, 1cqw, 8px);
  background:
    linear-gradient(var(--cert-accent) 0 0) left top / 28px 2px no-repeat,
    linear-gradient(var(--cert-accent) 0 0) left top / 2px 28px no-repeat,
    linear-gradient(var(--cert-accent) 0 0) right top / 28px 2px no-repeat,
    linear-gradient(var(--cert-accent) 0 0) right top / 2px 28px no-repeat,
    linear-gradient(var(--cert-accent-2) 0 0) left bottom / 28px 2px no-repeat,
    linear-gradient(var(--cert-accent-2) 0 0) left bottom / 2px 28px no-repeat,
    linear-gradient(var(--cert-accent-2) 0 0) right bottom / 28px 2px no-repeat,
    linear-gradient(var(--cert-accent-2) 0 0) right bottom / 2px 28px no-repeat,
    radial-gradient(circle at 1px 1px, rgba(10, 107, 117, 0.1) 1px, transparent 1.5px) 0 0 / 14px 14px;
}
[data-theme~="ki-labor"] .cert-top .brand-mark { color: var(--cert-accent-2); filter: none; }
[data-theme~="ki-labor"] .cert-edition { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.2em; }
[data-theme~="ki-labor"] .cert-kicker { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.22em; }
[data-theme~="ki-labor"] .cert-rule {
  width: 104px; height: 7px;
  background:
    radial-gradient(circle at 3.5px 50%, var(--cert-accent) 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 3.5px) 50%, var(--cert-accent-2) 2.5px, transparent 3px),
    linear-gradient(90deg, var(--cert-accent), var(--cert-accent-2)) center / calc(100% - 14px) 1.5px no-repeat;
}
[data-theme~="ki-labor"] .cert-name { font-weight: 600; letter-spacing: -0.02em; }
[data-theme~="ki-labor"] .cert-course { font-weight: 600; }
[data-theme~="ki-labor"] .cert-sig { font-weight: 600; }
[data-theme~="ki-labor"] .cert-sig-line {
  height: 1px;
  opacity: 1;
  background: repeating-linear-gradient(90deg, var(--cert-ink) 0 4px, transparent 4px 7px);
}
[data-theme~="ki-labor"] .cert-meta { font-family: var(--font-mono); letter-spacing: 0.02em; }
[data-theme~="ki-labor"] .cert-meta strong { font-weight: 600; }
[data-theme~="ki-labor"] .cert-seal text { font-family: var(--font-mono); font-weight: 600; }

/* ---------- Chat ---------- */
[data-theme~="ki-labor"] .chat-backdrop { background: rgba(3, 5, 8, 0.62); }
[data-theme~="ki-labor"] .chat-panel {
  background:
    radial-gradient(circle at 1px 1px, var(--kl-raster) 1px, transparent 1.6px) 0 0 / 22px 22px,
    var(--c-bg);
}
@media (min-width: 768px) {
  [data-theme~="ki-labor"] .chat-panel { border-left-color: var(--c-hero-line); box-shadow: -30px 0 70px -20px rgba(0, 0, 0, 0.8); }
}
[data-theme~="ki-labor"] .chat-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(180, 157, 255, 0.6), rgba(79, 216, 229, 0.5) 60%, transparent);
  pointer-events: none;
}
[data-theme~="ki-labor"] .chat-title { display: inline-flex; align-items: center; gap: 9px; }
[data-theme~="ki-labor"] .chat-title::before {
  content: "";
  flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kl-gruen);
  box-shadow: 0 0 8px rgba(95, 224, 160, 0.8);
}
[data-theme~="ki-labor"] .chat-info { border-color: var(--c-hero-line); }
[data-theme~="ki-labor"] .chat-empty-icon {
  border: 1px solid rgba(180, 157, 255, 0.45);
  color: var(--kl-violett);
  box-shadow: 0 0 18px rgba(180, 157, 255, 0.25);
}
[data-theme~="ki-labor"] .chat-suggestion,
[data-theme~="ki-labor"] .chat-chip { background: var(--c-surface); }
[data-theme~="ki-labor"] .chat-suggestion:hover:not(:disabled),
[data-theme~="ki-labor"] .chat-chip:hover:not(:disabled) { border-color: var(--kl-cyan); background: var(--c-primary-soft); }
[data-theme~="ki-labor"] .chat-msg-nutzer .chat-bubble { border: 1px solid rgba(79, 216, 229, 0.3); }
[data-theme~="ki-labor"] .chat-msg-assistent .chat-bubble { border-left: 2px solid var(--kl-violett); }
[data-theme~="ki-labor"] .chat-msg.is-error .chat-bubble { border: 1px solid rgba(255, 143, 134, 0.4); }
[data-theme~="ki-labor"] .chat-bubble code,
[data-theme~="ki-labor"] .chat-bubble pre { background: #0a0c0f; font-variant-ligatures: none; font-feature-settings: "calt" 0; }
[data-theme~="ki-labor"] .chat-bubble pre { border: 1px solid var(--c-line); }
[data-theme~="ki-labor"] .chat-bubble mark { background: rgba(180, 157, 255, 0.2); color: #efe9ff; box-shadow: inset 0 -1px 0 var(--kl-violett); }
[data-theme~="ki-labor"] .chat-dots i { background: var(--kl-cyan); }
[data-theme~="ki-labor"] .chat-cursor { background: var(--kl-cyan); }
[data-theme~="ki-labor"] .chat-warnung { border-color: rgba(180, 157, 255, 0.6); }
[data-theme~="ki-labor"] .chat-beispiel-hinweis { border: 1px solid rgba(79, 216, 229, 0.3); }
[data-theme~="ki-labor"] .chat-zaehler,
[data-theme~="ki-labor"] .chat-rest { font-family: var(--font-mono); letter-spacing: 0.02em; }

/* ---------- Rückmeldungen ---------- */
[data-theme~="ki-labor"] #toast {
  border: 1px solid rgba(79, 216, 229, 0.45);
  background: #1b2027;
  color: var(--c-text);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 22px rgba(79, 216, 229, 0.15);
}
[data-theme~="ki-labor"] #toast .icon { color: var(--kl-cyan); }

/* Datenpunkte statt Schnee: kurze Striche, die nach unten laufen */
[data-theme~="ki-labor"] .snow i {
  width: 2px;
  height: calc(var(--s, 3px) * 3);
  border-radius: 1px;
  background: var(--kl-cyan);
  animation-name: kl-daten;
}
[data-theme~="ki-labor"] .snow i:nth-child(3n) { background: var(--kl-violett); }
@keyframes kl-daten {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 105cqh, 0); }
}

/* ---------- Nebenseiten: 404 und Datenschutz ---------- */
[data-theme~="ki-labor"] .content-card:has(.seite-404-link) { overflow: hidden; }
[data-theme~="ki-labor"] .content-card:has(.seite-404-link)::after {
  content: "404";
  content: "404" / "";
  position: absolute; right: 24px; bottom: 18px;
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 2rem + 6vw, 6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(79, 216, 229, 0.14);
  pointer-events: none;
}
[data-theme~="ki-labor"] .ds-text h2 { display: flex; align-items: center; gap: 10px; }
[data-theme~="ki-labor"] .ds-text h2::before {
  content: "";
  flex: none;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--kl-cyan);
  box-shadow: 0 0 8px rgba(79, 216, 229, 0.7);
}
[data-theme~="ki-labor"] .ds-liste { list-style: square; }
[data-theme~="ki-labor"] .ds-liste li::marker { color: var(--kl-cyan); }
[data-theme~="ki-labor"] .ds-hinweis { border: 1px solid rgba(180, 157, 255, 0.35); border-left: 3px solid var(--kl-violett); }
[data-theme~="ki-labor"] .ds-stand { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; }
[data-theme~="ki-labor"] .legal-links { font-family: var(--font-mono); letter-spacing: 0.03em; }

/* ---------- 7. Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-theme~="ki-labor"] .tile.today::before { animation: none; opacity: 0.55; }
  [data-theme~="ki-labor"] .prompt-text::after { animation: none; }
  [data-theme~="ki-labor"] .tile:hover:not(.locked) { transform: none; }
}

/* ---------- Druck: weißes Papier, nur feine Akzente ---------- */
@media print {
  [data-theme~="ki-labor"] {
    --cert-paper: #ffffff;
  }
  [data-theme~="ki-labor"] .certificate { box-shadow: none; border-radius: 0; }
}