/* =====================================================================
   Theme "nachtblau" auf Basis "ki-labor" (Design nachtblau = ki-labor + nachtblau):
   dunkel, Raster, Leuchten. Paket S0, Farben und Schrift seit S15 und S16 nach der
   Vorgabe der Marke. Hier stehen nur die Abweichungen, und zwar nur Farben der Palette
   und daraus abgeleitete Stufen:
     Rose-Peach #f9b8b1, Pink #f84791, Turquoise #57dbd8, Dark Blue #25388e,
     Blue #136bc0, Cloud #fffcf4.
   Flächen sind dunklere Stufen von Dark Blue (Anteil 20 bis 54 Prozent, Rest Schwarz),
   Dark Blue selbst trägt Linien, Markierung und das Ende des Verlaufs im Kopfbild.
   Text in Cloud, Nebentext Cloud mit 30 Prozent Dark Blue. Pink ist die Leitfarbe
   (Knöpfe, Verweise, Symbole, heute), Turquoise die zweite Farbe (Fokus, Leuchten,
   angesehen, Erfolg), Rose-Peach ersetzt das Violett von ki-labor und steht für Fehler,
   Blue für Feldränder. Hellere Töne sind Mischungen mit Cloud.

   Text auf Pink, Turquoise und Rose-Peach ist dunkel (#070b1c, Dark Blue mit 20 Prozent),
   Cloud auf Pink erreicht nur 3,25:1. Das Zertifikat ist Papier in Cloud mit Dark Blue
   als Akzent. Formen nur leicht abgerundet: Karten, Knöpfe, Felder und Kacheln 8 px.
   Schrift seit S16 Montserrat für alle Texte, auch für Nummern und Kennzeichnungen, die
   ki-labor in Monospace setzt. Nur Prompts und Code bleiben in JetBrains Mono von ki-labor,
   die Vorgabe kennt keine Monospace-Schrift. Gewichte nur Regular und Bold (Abschnitt
   Schrift unten).
   Kontraste prüft werkzeuge/kontrast.js.
   ===================================================================== */

/* ---------- Schrift Montserrat (Paket S16) ----------
   Montserrat aus dem Repository von Google Fonts (Fassung v31), SIL Open Font License 1.1,
   Lizenz im Paket unter assets/fonts/OFL-montserrat.txt. Die App liefert die Dateien unter
   /mandant/assets/fonts/ aus (server/branding.js, font/woff2), die CSP erlaubt font-src 'self'.
   Je Schnitt zwei Teile wie bei Google Fonts: latin und latin-ext, eine Seite lädt nur die Teile,
   deren Zeichen sie enthält (unicode-range). Kursiv lädt erst, wenn kursiver Text da ist.
   Die Dateien sind variabel (Achse wght 100 bis 900). Jede Datei steht zweimal hier, einmal als
   Regular (400) und einmal als Bold (700). So wählt der Browser für jede Gewichtsangabe der
   Plattform einen der beiden Schnitte: bis 500 Regular, ab 550 Bold. Die Vorgabe verlangt
   Fett und Kursiv einheitlich, die Zwischenwerte von ki-labor (500, 600, 650) fallen so weg,
   ohne dass hier jede Regel einzeln überschrieben wird. Beide Angaben einer Datei teilen sich
   einen Abruf. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/mandant/assets/fonts/montserrat-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: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/mandant/assets/fonts/montserrat-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/mandant/assets/fonts/montserrat-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: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/mandant/assets/fonts/montserrat-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/mandant/assets/fonts/montserrat-latin-wght-italic.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: "Montserrat";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/mandant/assets/fonts/montserrat-latin-ext-wght-italic.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/mandant/assets/fonts/montserrat-latin-wght-italic.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: "Montserrat";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/mandant/assets/fonts/montserrat-latin-ext-wght-italic.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

[data-theme~="nachtblau"] {
  --font-text: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --display-weight: 700;
  --eyebrow-tracking: 0.05em;

  --kunden-logo-topbar-h: 32px;
  --kunden-logo-login-h: 40px;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 8px;
  --r-lg: 8px;
  --r-pill: 8px;

  --c-bg: #090d22;
  --c-surface: #0d1330;
  --c-surface-2: #10183c;
  --c-surface-3: #141e4d;
  --c-line: #25388e;
  --c-control: #136bc0;
  --c-text: #fffcf4;
  --c-text-muted: #bec1d5;
  --c-primary: #f84791;
  --c-primary-hover: #f880a1;
  --c-on-primary: #070b1c;
  --c-primary-soft: #2e1a3e;
  --c-primary-text: #f84791;
  --c-light: #57dbd8;
  --c-light-soft: #172f48;
  --c-on-light: #070b1c;
  --c-success: #57dbd8;
  --c-success-soft: #172f48;
  --c-danger: #f9b8b1;
  --c-danger-soft: #2e2a42;
  --c-focus: #57dbd8;
  --c-mark: #25388e;

  --c-hero-bg: #0b112b;
  --c-hero-bg-2: #25388e;
  --c-hero-text: #fffcf4;
  --c-hero-muted: #bec1d5;
  --c-hero-line: rgba(87, 219, 216, 0.2);
  --c-hero-accent: #57dbd8;
  --c-hero-on-accent: #070b1c;

  --shadow-glow: 0 0 0 1px rgba(87, 219, 216, 0.45), 0 0 26px rgba(87, 219, 216, 0.28);

  --cert-paper: #fffcf4;
  --cert-ink: #070b1c;
  --cert-muted: #515fa2;
  --cert-accent: #25388e;
  --cert-accent-2: #f84791;
  --cert-line: #dedfe5;

  --kl-cyan: #57dbd8;
  --kl-violett: #f9b8b1;
  --kl-gruen: #57dbd8;
  --kl-raster: rgba(255, 252, 244, 0.045);
  --kl-pin: #1e2d72;
  --kl-kante: #25388e;
  --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='%2357dbd8' stroke-opacity='.42' d='M0 36H150l60 60h120M0 48h145l60 60h115M0 60h140l60 60h110M60 320v-60l40-40h100M300 320v-40l30-30h90'/%3E%3Cpath stroke='%23f9b8b1' stroke-opacity='.4' d='M480 200H380l-50-50H250M480 212h-105l-50-50H240M480 60h-60l-24 24'/%3E%3Cg fill='%230b112b' stroke='%2357dbd8' 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='%230b112b' stroke='%23f9b8b1' 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");
}

/* Schrift vor der Anmeldung (Paket S22): Mit neutraler Anmeldung (funktionen.anmeldungNeutral) gibt es die
   Dateien unter /mandant/assets/ nur mit Sitzung. Fragte die Anmeldung Montserrat an, bekäme sie die Seite 404,
   und der Browser bliebe für diese Seite bei der Rückfallschrift, auch nach einer Anmeldung ohne neues Laden.
   Solange die Anmeldung zu sehen ist, steht deshalb die Systemschrift da. Danach lädt Montserrat mit Sitzung.
   Andere Seiten ohne Sitzung (Registrierung, Datenschutz, 404) zeigen die Rückfallschrift aus dem Stapel. */
[data-theme~="nachtblau"]:has(#view-login:not([hidden])) {
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Im Dunkelmodus dieselben Werte, damit der Dunkelblock von ki-labor und des Grundstils nie durchschlägt. */
@media (prefers-color-scheme: dark) {
  [data-theme~="nachtblau"] {
    --c-bg: #090d22;
    --c-surface: #0d1330;
    --c-surface-2: #10183c;
    --c-surface-3: #141e4d;
    --c-line: #25388e;
    --c-control: #136bc0;
    --c-text: #fffcf4;
    --c-text-muted: #bec1d5;
    --c-primary: #f84791;
    --c-primary-hover: #f880a1;
    --c-on-primary: #070b1c;
    --c-primary-soft: #2e1a3e;
    --c-primary-text: #f84791;
    --c-light: #57dbd8;
    --c-light-soft: #172f48;
    --c-on-light: #070b1c;
    --c-success: #57dbd8;
    --c-success-soft: #172f48;
    --c-danger: #f9b8b1;
    --c-danger-soft: #2e2a42;
    --c-focus: #57dbd8;
    --c-mark: #25388e;
    --c-hero-bg: #0b112b;
    --c-hero-bg-2: #25388e;
    --c-hero-text: #fffcf4;
    --c-hero-muted: #bec1d5;
    --c-hero-line: rgba(87, 219, 216, 0.2);
    --c-hero-accent: #57dbd8;
    --c-hero-on-accent: #070b1c;
    --shadow-glow: 0 0 0 1px rgba(87, 219, 216, 0.45), 0 0 26px rgba(87, 219, 216, 0.28);
    --cert-paper: #fffcf4;
    --cert-ink: #070b1c;
    --cert-muted: #515fa2;
    --cert-accent: #25388e;
    --cert-accent-2: #f84791;
    --cert-line: #dedfe5;
    --kl-cyan: #57dbd8;
    --kl-violett: #f9b8b1;
    --kl-gruen: #57dbd8;
    --kl-raster: rgba(255, 252, 244, 0.045);
    --kl-pin: #1e2d72;
    --kl-kante: #25388e;
  }
}

/* Feste Farben aus ki-labor in den Farben der Palette (Paket S2, seit S15).
   Der Block zwischen den Markern entsteht mit node werkzeuge/theme-umfaerben.js und wird nicht von Hand
   geändert. Cyan und Grün werden Turquoise, Violett und Rot werden Rose-Peach, Petrol im Zertifikat wird
   Dark Blue, die hellen Töne Mischungen mit Cloud, Graphit wird die passende Stufe von Dark Blue, Weiß
   wird Cloud. Schwarz in Schatten bleibt. Regeln weiter unten gewinnen gegen den Block. */
/* umfaerben: basis ki-labor, theme nachtblau, 4fd8e5=57dbd8 6fe1ec=79e2de 86e6ee=89e5e0 8ff0f7=9ae8e3 dff3f5=ddf5ee 5fe0a0=57dbd8 b49dff=f9b8b1 cfc2ff=fbd3cc e4dcff=fde1d9 efe9ff=feeee7 ff8f86=f9b8b1 0a6b75=25388e 0e1013=090d22 0a0c0f=070b1c 0a0d11=070b1c 030508=03040b 151a20=0d1330 161a1f=0d1330 1b2027=10183c 262d36=162255 2a323c=162255 2f3742=25388e 4a5462=46559d 4b5664=46559d 56626f=5c69a8 f4f5f2=fffcf4 ffffff=fffcf4 */
[data-theme~="nachtblau"] body { background: radial-gradient(900px 520px at 88% -8%, rgba(87, 219, 216, 0.07), transparent 70%), radial-gradient(760px 520px at -12% 28%, rgba(249, 184, 177, 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~="nachtblau"] ::selection { background: rgba(87, 219, 216, 0.32); color: #fffcf4; }
[data-theme~="nachtblau"] .btn-primary { box-shadow: 0 0 0 1px rgba(87, 219, 216, 0.35), 0 8px 20px -10px rgba(87, 219, 216, 0.7); }
[data-theme~="nachtblau"] .btn-primary:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(137, 229, 224, 0.65), 0 0 22px rgba(87, 219, 216, 0.35); }
[data-theme~="nachtblau"] .btn-secondary { background: rgba(255, 252, 244, 0.02); }
[data-theme~="nachtblau"] .btn-light { box-shadow: 0 0 0 1px rgba(87, 219, 216, 0.4), 0 10px 26px -10px rgba(87, 219, 216, 0.75); }
[data-theme~="nachtblau"] .field input:focus-visible,
[data-theme~="nachtblau"] .num-input:focus-visible,
[data-theme~="nachtblau"] .chat-input:focus-visible { box-shadow: 0 0 0 3px rgba(154, 232, 227, 0.25), 0 0 18px rgba(87, 219, 216, 0.18); }
[data-theme~="nachtblau"] .form-error { border: 1px solid rgba(249, 184, 177, 0.4); }
[data-theme~="nachtblau"] .topbar { background: rgba(9, 13, 34, 0.9); }
[data-theme~="nachtblau"] .topbar::after { background: linear-gradient(90deg, transparent, rgba(87, 219, 216, 0.55) 25%, rgba(249, 184, 177, 0.45) 70%, transparent); }
[data-theme~="nachtblau"] .brand-mark { filter: drop-shadow(0 0 6px rgba(87, 219, 216, 0.55)); }
[data-theme~="nachtblau"] .chat-open-btn { border-color: rgba(249, 184, 177, 0.55); background: rgba(249, 184, 177, 0.08); }
[data-theme~="nachtblau"] .demo-bar { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(87, 219, 216, 0.05) 10px 20px), var(--c-surface-2); }
[data-theme~="nachtblau"] .login-art { background: radial-gradient(70% 60% at 85% 10%, rgba(87, 219, 216, 0.14), transparent 70%), radial-gradient(60% 60% at 10% 100%, rgba(249, 184, 177, 0.12), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255, 252, 244, 0.07) 1px, transparent 1.6px) 0 0 / 20px 20px, var(--c-hero-bg); }
[data-theme~="nachtblau"] .login-lights span { background: rgba(255, 252, 244, 0.05); border: 1px solid rgba(121, 226, 222, 0.22); }
[data-theme~="nachtblau"] .login-lights span.on { box-shadow: 0 0 10px rgba(87, 219, 216, 0.75); }
[data-theme~="nachtblau"] .login-lights span.on:nth-child(3n) { box-shadow: 0 0 10px rgba(249, 184, 177, 0.75); }
[data-theme~="nachtblau"] .login-video-bild { border-color: rgba(121, 226, 222, 0.35); }
[data-theme~="nachtblau"] .login-video-play { box-shadow: 0 0 0 3px rgba(87, 219, 216, 0.25), 0 0 16px rgba(87, 219, 216, 0.6); }
[data-theme~="nachtblau"] .login-video-player { border: 1px solid rgba(121, 226, 222, 0.3); 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(87, 219, 216, 0.35); }
[data-theme~="nachtblau"] .login-head .brand-mark { filter: drop-shadow(0 0 10px rgba(87, 219, 216, 0.6)); }
[data-theme~="nachtblau"] .demo-hint { border: 1px dashed rgba(121, 226, 222, 0.55); background: rgba(87, 219, 216, 0.04); }
@media (min-width: 900px) {
  [data-theme~="nachtblau"] .login-art { background: radial-gradient(70% 50% at 80% 12%, rgba(87, 219, 216, 0.14), transparent 70%), radial-gradient(60% 50% at 10% 95%, rgba(249, 184, 177, 0.12), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255, 252, 244, 0.07) 1px, transparent 1.6px) 0 0 / 20px 20px, var(--c-hero-bg); }
}
@media (prefers-color-scheme: light) {
  [data-theme~="nachtblau"] .kunden-logo-topbar:not([data-dunkel="true"]),
  [data-theme~="nachtblau"] .kunden-logo-login:not([data-dunkel="true"]) { background: #fffcf4; }
}
[data-theme~="nachtblau"] .hero { background: radial-gradient(55% 90% at 100% 0%, rgba(87, 219, 216, 0.13), transparent 70%), radial-gradient(45% 80% at 0% 100%, rgba(249, 184, 177, 0.1), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255, 252, 244, 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, 252, 244, 0.05); }
[data-theme~="nachtblau"] .hero-text > .eyebrow { border: 1px solid rgba(87, 219, 216, 0.35); background: rgba(87, 219, 216, 0.07); }
[data-theme~="nachtblau"] .hero-teaser { background: rgba(255, 252, 244, 0.03); }
[data-theme~="nachtblau"] .hero-teaser-type { color: #fbd3cc; }
[data-theme~="nachtblau"] .hero .btn-ghost-light { border-color: rgba(121, 226, 222, 0.45); }
[data-theme~="nachtblau"] .hero .btn-ghost-light:hover { background: rgba(87, 219, 216, 0.1); }
[data-theme~="nachtblau"] .lights::before { border: 1px dashed rgba(121, 226, 222, 0.28); }
[data-theme~="nachtblau"] .lights span { background: #162255; }
[data-theme~="nachtblau"] .lights span.open { background: #46559d; }
[data-theme~="nachtblau"] .lights span.on { box-shadow: 0 0 8px rgba(87, 219, 216, 0.85); }
[data-theme~="nachtblau"] .lights span.today { box-shadow: 0 0 10px rgba(249, 184, 177, 0.9); }
[data-theme~="nachtblau"] .hero-progress-label strong { text-shadow: 0 0 18px rgba(87, 219, 216, 0.45); }
@media (min-width: 960px) {
  [data-theme~="nachtblau"] .hero-progress { border-left: 1px dashed rgba(121, 226, 222, 0.2); }
}
[data-theme~="nachtblau"] .section-title::before { box-shadow: 0 0 10px rgba(87, 219, 216, 0.7); }
[data-theme~="nachtblau"] .legend-dot.is-today { box-shadow: 0 0 8px rgba(87, 219, 216, 0.9); }
[data-theme~="nachtblau"] .legend-dot.is-viewed { box-shadow: 0 0 8px rgba(87, 219, 216, 0.8); }
[data-theme~="nachtblau"] .tile { background: linear-gradient(180deg, rgba(255, 252, 244, 0.03), transparent 45%), var(--c-surface); box-shadow: inset 0 1px 0 rgba(255, 252, 244, 0.04), 0 2px 4px rgba(0, 0, 0, 0.35); }
[data-theme~="nachtblau"] .tile:hover:not(.locked) { border-color: rgba(87, 219, 216, 0.6); box-shadow: 0 0 0 1px rgba(87, 219, 216, 0.2), 0 14px 30px -14px rgba(87, 219, 216, 0.55); }
[data-theme~="nachtblau"] .tile:hover:not(.locked) .tile-foot::before,
[data-theme~="nachtblau"] .tile:hover:not(.locked) .tile-foot::after,
[data-theme~="nachtblau"] .tile.today .tile-foot::before,
[data-theme~="nachtblau"] .tile.today .tile-foot::after { background: repeating-linear-gradient(180deg, rgba(87, 219, 216, 0.7) 0 3px, transparent 3px 9px); }
[data-theme~="nachtblau"] .tile.viewed { border-color: rgba(87, 219, 216, 0.3); background: radial-gradient(90% 70% at 100% 0%, rgba(87, 219, 216, 0.11), transparent 60%), var(--c-surface); }
[data-theme~="nachtblau"] .tile.viewed .tile-status { box-shadow: 0 0 0 3px rgba(87, 219, 216, 0.14), 0 0 12px rgba(87, 219, 216, 0.6); }
[data-theme~="nachtblau"] .tile.locked { background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 252, 244, 0.018) 7px 8px), var(--c-surface-2); }
[data-theme~="nachtblau"] .tile.today { background: radial-gradient(110% 80% at 50% 0%, rgba(87, 219, 216, 0.15), transparent 65%), var(--c-surface); box-shadow: 0 0 0 1px rgba(87, 219, 216, 0.35), 0 0 22px rgba(87, 219, 216, 0.2); }
[data-theme~="nachtblau"] .tile.today::before { box-shadow: 0 0 0 3px rgba(87, 219, 216, 0.3), 0 0 32px rgba(87, 219, 216, 0.5); }
[data-theme~="nachtblau"] .tile-today-badge { border: 1px solid rgba(87, 219, 216, 0.55); background: rgba(87, 219, 216, 0.12); }
[data-theme~="nachtblau"] .tile::after { background: linear-gradient(90deg, rgba(87, 219, 216, 0.06), rgba(87, 219, 216, 0.5) 50%, rgba(87, 219, 216, 0.06)); }
[data-theme~="nachtblau"] .tile.opening:not(.locked) { box-shadow: 0 0 0 1px var(--kl-cyan), 0 14px 34px rgba(87, 219, 216, 0.38); }
[data-theme~="nachtblau"] .content-card { background: linear-gradient(180deg, rgba(255, 252, 244, 0.025), transparent 160px), var(--c-surface); }
[data-theme~="nachtblau"] .type-chip { border: 1px solid rgba(87, 219, 216, 0.4); }
@media (min-width: 1024px) {
  [data-theme~="nachtblau"] #day-content > .day-meta::after { background: radial-gradient(circle at 50% calc(100% - 4.5px), transparent 2.5px, rgba(87, 219, 216, 0.7) 3px 4px, transparent 4.5px), linear-gradient(rgba(87, 219, 216, 0.7), rgba(87, 219, 216, 0.15)) center top / 1.5px calc(100% - 9px) no-repeat; }
}
[data-theme~="nachtblau"] .callout-light { border-color: rgba(249, 184, 177, 0.3); }
[data-theme~="nachtblau"] .callout-light .icon,
[data-theme~="nachtblau"] .callout-light .callout-title { color: #fbd3cc; }
[data-theme~="nachtblau"] .video-frame { background: var(--kl-ecken), repeating-linear-gradient(0deg, rgba(255, 252, 244, 0.025) 0 1px, transparent 1px 4px), radial-gradient(80% 100% at 70% 0%, rgba(87, 219, 216, 0.12), transparent 70%), var(--c-hero-bg); }
[data-theme~="nachtblau"] .video-play { border-color: rgba(87, 219, 216, 0.6); background: rgba(87, 219, 216, 0.08); box-shadow: 0 0 22px rgba(87, 219, 216, 0.3); }
[data-theme~="nachtblau"] .steps li:not(:last-child)::after { background: repeating-linear-gradient(180deg, rgba(87, 219, 216, 0.6) 0 4px, transparent 4px 8px); }
[data-theme~="nachtblau"] .steps li.is-result::before { box-shadow: 0 0 14px rgba(87, 219, 216, 0.55); }
[data-theme~="nachtblau"] .steps li.is-result .step-text { border: 1px solid rgba(87, 219, 216, 0.3); }
[data-theme~="nachtblau"] .prompt { border: 1px solid #25388e; background: #070b1c; }
[data-theme~="nachtblau"] .prompt-head { border-bottom-color: #162255; background: linear-gradient(#10183c, #0d1330); }
[data-theme~="nachtblau"] .prompt-head::before { background: radial-gradient(circle at 5px 5px, #46559d 4px, transparent 4.5px), radial-gradient(circle at 20px 5px, #46559d 4px, transparent 4.5px), radial-gradient(circle at 35px 5px, #46559d 4px, transparent 4.5px); }
[data-theme~="nachtblau"] .prompt-text { color: #ddf5ee; }
[data-theme~="nachtblau"] .prompt-text mark { background: rgba(249, 184, 177, 0.2); color: #feeee7; }
[data-theme~="nachtblau"] .myth-front { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 252, 244, 0.018) 10px 11px), var(--c-surface-2); }
[data-theme~="nachtblau"] .myth-front .myth-tag { color: #fbd3cc; }
[data-theme~="nachtblau"] .myth-verdict { border: 1px solid rgba(249, 184, 177, 0.45); }
[data-theme~="nachtblau"] .myth-back { border-top: 1px solid rgba(87, 219, 216, 0.35); background: linear-gradient(180deg, rgba(87, 219, 216, 0.07), transparent 70%), var(--c-surface); }
[data-theme~="nachtblau"] .option:hover:not(:disabled) { box-shadow: 0 0 16px -4px rgba(87, 219, 216, 0.45); }
[data-theme~="nachtblau"] .option.correct { box-shadow: 0 0 18px -6px rgba(87, 219, 216, 0.6); }
[data-theme~="nachtblau"] .feedback.is-correct { border-color: rgba(87, 219, 216, 0.35); }
[data-theme~="nachtblau"] .feedback.is-incorrect { border-color: rgba(249, 184, 177, 0.35); }
[data-theme~="nachtblau"] .meter > span { box-shadow: 0 0 10px rgba(87, 219, 216, 0.55); }
[data-theme~="nachtblau"] .check:hover { border-color: rgba(87, 219, 216, 0.55); }
[data-theme~="nachtblau"] .check input:checked { box-shadow: 0 0 10px rgba(87, 219, 216, 0.5); }
[data-theme~="nachtblau"] .check:has(input:checked) { border-color: rgba(87, 219, 216, 0.25); }
[data-theme~="nachtblau"] .calc-result { border: 1px solid rgba(87, 219, 216, 0.3); background: var(--kl-ecken), repeating-linear-gradient(0deg, rgba(255, 252, 244, 0.02) 0 1px, transparent 1px 4px), radial-gradient(70% 100% at 50% 0%, rgba(87, 219, 216, 0.12), transparent 70%), #070b1c; box-shadow: inset 0 0 40px rgba(87, 219, 216, 0.06); }
[data-theme~="nachtblau"] .calc-big { text-shadow: 0 0 20px rgba(87, 219, 216, 0.5); }
[data-theme~="nachtblau"] .quote::before { box-shadow: 0 0 14px rgba(249, 184, 177, 0.45); }
[data-theme~="nachtblau"] .poll-bar-fill { background: #5c69a8; }
[data-theme~="nachtblau"] .poll-row.mine .poll-bar-fill { box-shadow: 0 0 12px rgba(87, 219, 216, 0.5); }
[data-theme~="nachtblau"] .mine-chip { border-color: rgba(249, 184, 177, 0.6); color: #fde1d9; }
[data-theme~="nachtblau"] .passed-note { border-color: rgba(87, 219, 216, 0.45); }
[data-theme~="nachtblau"] .radio-opt input::before { box-shadow: 0 0 8px rgba(87, 219, 216, 0.8); }
[data-theme~="nachtblau"] .final-submit-row { background: rgba(13, 19, 48, 0.94); }
[data-theme~="nachtblau"] .result.is-pass { border-color: rgba(87, 219, 216, 0.5); background: var(--kl-ecken), radial-gradient(80% 100% at 50% 0%, rgba(87, 219, 216, 0.16), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255, 252, 244, 0.06) 1px, transparent 1.6px) 0 0 / 18px 18px, var(--c-hero-bg); box-shadow: 0 0 0 1px rgba(87, 219, 216, 0.15), 0 24px 60px -24px rgba(87, 219, 216, 0.35); }
[data-theme~="nachtblau"] .result.is-pass .result-score { text-shadow: 0 0 22px rgba(87, 219, 216, 0.55); }
[data-theme~="nachtblau"] .certificate { box-shadow: 0 0 0 1px rgba(255, 252, 244, 0.06), 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 60px -20px rgba(87, 219, 216, 0.25); }
[data-theme~="nachtblau"] .cert-frame { 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(37, 56, 142, 0.1) 1px, transparent 1.5px) 0 0 / 14px 14px; }
[data-theme~="nachtblau"] .chat-backdrop { background: rgba(3, 4, 11, 0.62); }
[data-theme~="nachtblau"] .chat-head::after { background: linear-gradient(90deg, rgba(249, 184, 177, 0.6), rgba(87, 219, 216, 0.5) 60%, transparent); }
[data-theme~="nachtblau"] .chat-title::before { box-shadow: 0 0 8px rgba(87, 219, 216, 0.8); }
[data-theme~="nachtblau"] .chat-empty-icon { border: 1px solid rgba(249, 184, 177, 0.45); box-shadow: 0 0 18px rgba(249, 184, 177, 0.25); }
[data-theme~="nachtblau"] .chat-msg-nutzer .chat-bubble { border: 1px solid rgba(87, 219, 216, 0.3); }
[data-theme~="nachtblau"] .chat-msg.is-error .chat-bubble { border: 1px solid rgba(249, 184, 177, 0.4); }
[data-theme~="nachtblau"] .chat-bubble code,
[data-theme~="nachtblau"] .chat-bubble pre { background: #070b1c; }
[data-theme~="nachtblau"] .chat-bubble mark { background: rgba(249, 184, 177, 0.2); color: #feeee7; }
[data-theme~="nachtblau"] .chat-warnung { border-color: rgba(249, 184, 177, 0.6); }
[data-theme~="nachtblau"] .chat-beispiel-hinweis { border: 1px solid rgba(87, 219, 216, 0.3); }
[data-theme~="nachtblau"] #toast { border: 1px solid rgba(87, 219, 216, 0.45); background: #10183c; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 22px rgba(87, 219, 216, 0.15); }
[data-theme~="nachtblau"] .content-card:has(.seite-404-link)::after { color: rgba(87, 219, 216, 0.14); }
[data-theme~="nachtblau"] .ds-text h2::before { box-shadow: 0 0 8px rgba(87, 219, 216, 0.7); }
[data-theme~="nachtblau"] .ds-hinweis { border: 1px solid rgba(249, 184, 177, 0.35); }
/* umfaerben: ende */

/* Leitfarbe Pink statt Turquoise, wo ki-labor seine Leitfarbe leuchten lässt: Knöpfe, Auswahl,
   gesetzte Haken, das Türchen von heute und seine Lampe im Fortschritt */
[data-theme~="nachtblau"] .btn-primary {
  box-shadow: 0 0 0 1px rgba(248, 71, 145, 0.35), 0 8px 20px -10px rgba(248, 71, 145, 0.7);
}
[data-theme~="nachtblau"] .btn-primary:hover:not(:disabled) {
  box-shadow: 0 0 0 1px rgba(248, 128, 161, 0.65), 0 0 22px rgba(248, 71, 145, 0.35);
}
[data-theme~="nachtblau"] .check input:checked { box-shadow: 0 0 10px rgba(248, 71, 145, 0.5); }
[data-theme~="nachtblau"] ::selection { background: rgba(248, 71, 145, 0.4); color: #fffcf4; }
[data-theme~="nachtblau"] .tile.today {
  border-color: var(--c-primary);
  background: radial-gradient(110% 80% at 50% 0%, rgba(248, 71, 145, 0.15), transparent 65%), var(--c-surface);
  box-shadow: 0 0 0 1px rgba(248, 71, 145, 0.35), 0 0 22px rgba(248, 71, 145, 0.2);
}
[data-theme~="nachtblau"] .tile.today::before { box-shadow: 0 0 0 3px rgba(248, 71, 145, 0.3), 0 0 32px rgba(248, 71, 145, 0.5); }
[data-theme~="nachtblau"] .tile.today .tile-foot::before,
[data-theme~="nachtblau"] .tile.today .tile-foot::after { background: repeating-linear-gradient(180deg, rgba(248, 71, 145, 0.7) 0 3px, transparent 3px 9px); }
[data-theme~="nachtblau"] .tile-today-badge { border-color: rgba(248, 71, 145, 0.55); background: rgba(248, 71, 145, 0.12); }
[data-theme~="nachtblau"] .tile-today-badge::before { background: var(--c-primary); box-shadow: 0 0 6px var(--c-primary); }
[data-theme~="nachtblau"] .legend-dot.is-today { background: var(--c-primary); box-shadow: 0 0 8px rgba(248, 71, 145, 0.9); }
[data-theme~="nachtblau"] .lights span.today { background: var(--c-primary); box-shadow: 0 0 10px rgba(248, 71, 145, 0.9); }

/* Dunkle Schrift auf Turquoise und Rose-Peach aus der Palette statt der festen Töne von ki-labor */
[data-theme~="nachtblau"] .tile.viewed .tile-status,
[data-theme~="nachtblau"] .final-q.is-missing .final-q-num,
[data-theme~="nachtblau"] .final-q.is-falsch .final-q-num,
[data-theme~="nachtblau"] .final-q.is-richtig .final-q-num { color: var(--c-on-light); }

/* Schrift (Paket S16): --font-mono trägt hier Montserrat, denn ki-labor setzt damit vor allem Nummern,
   Datumsangaben und Kennzeichnungen. Prompts, Code im Chat und Zugangsdaten in der Auswahl bleiben in
   Monospace, dafür steht --font-code. */
[data-theme~="nachtblau"] .prompt-text,
[data-theme~="nachtblau"] .chat-bubble code,
[data-theme~="nachtblau"] .chat-bubble pre,
[data-theme~="nachtblau"] .auswahl-gast-daten,
[data-theme~="nachtblau"] .auswahl-link { font-family: var(--font-code); }

/* Versalien (Paket S16): ki-labor sperrt Kennzeichnungen in Monospace weit (0,08 bis 0,14 em). Montserrat
   läuft in Versalien schon breit, mit dieser Sperrung brach „Team-Umfrage“ in der Seitenleiste des
   Türchens bei 1280 px in zwei Zeilen und „Prompt zum Kopieren“ bei 375 px in drei. */
[data-theme~="nachtblau"] .type-chip,
[data-theme~="nachtblau"] .legend,
[data-theme~="nachtblau"] .hero-teaser-type,
[data-theme~="nachtblau"] .callout-title,
[data-theme~="nachtblau"] .myth-tag,
[data-theme~="nachtblau"] .demo-hinweis strong,
[data-theme~="nachtblau"] .tile-num::before { letter-spacing: 0.05em; }
/* Die Art des Türchens steht ab 1024 px in der Seitenleiste mit 151 px Platz. „Team-Umfrage“ brauchte
   in Montserrat 152 px, mit 11,2 px statt 12 px Schrift sind es 145 px. Längere Arten wie „Prompt des
   Tages“ brechen dort wie vorher in zwei Zeilen. */
[data-theme~="nachtblau"] .type-chip { font-size: 0.7rem; }

/* Cockpit (Paket S16): Der Wert einer Kachel darf nicht breiter werden als die Kachel. „verborgen“ brach
   in Montserrat bei 1280 px mitten im Wort, bei 768 und 1024 px schon vorher mit Space Grotesk. Die
   Schrift richtet sich deshalb auch nach der Breite der Kachel (18 Prozent, höchstens wie bisher). */
[data-theme~="nachtblau"] .cockpit-kachel { container-type: inline-size; }
[data-theme~="nachtblau"] .cockpit-kachel-wert { font-size: min(var(--fs-2xl), 18cqi); }

/* Logo (Paket S16, Entscheidung vom 19.10.2026): im Kopf 32 px hoch statt 28 px (175 mal 32 px).
   Auf Anmeldung und Registrierung 40 px hoch und 219 px breit. Die Plattform begrenzt Logos auf
   180 px Breite, das Logo stand dort deshalb nur 33 px hoch, kaum höher als jetzt im Kopf. */
[data-theme~="nachtblau"] .kunden-logo-login { max-width: 100%; }
/* Am Handy steht das Logo über dem Titel (Befund S7-2). Mit 32 px brauchten beide 53 der 56 px der
   Kopfzeile, die Kopfzeile des Kalenders bekommt deshalb 64 px. */
@media (max-width: 599px) {
  [data-theme~="nachtblau"].has-kunden-logo #view-dashboard .topbar-inner { min-height: 64px; }
}

/* Zertifikat auf dem Bildschirm mit den Ecken der übrigen Karten, im Druck ohne Rundung wie ki-labor */
@media screen {
  [data-theme~="nachtblau"] .certificate { border-radius: var(--r-md); }
}

@media (max-width: 599px) {
  /* C5-15 (Paket S14): Am Handy lag der schwebende Knopf „KI“ je nach Scrollstand über Kacheln und
     den Knöpfen am Ende eines Türchens (Sichtprüfung S7). In Kalender und Türchen
     trägt die klebende Kopfzeile schon den Eintrag zum Übungschat, der Knopf entfällt dort samt Tipp
     und Platz am Seitenende. Der Eintrag im Türchen bekommt dafür die Farbe des Knopfs. Im Zertifikat
     bleibt der Knopf, dort hat die Kopfzeile keinen Eintrag. Die Plattform bleibt wie 2.2. */
  [data-theme~="nachtblau"] #app:has(> #view-dashboard:not([hidden])) > .ki-schwebe,
  [data-theme~="nachtblau"] #app:has(> #view-day:not([hidden])) > .ki-schwebe { display: none; }
  [data-theme~="nachtblau"].mit-ki-knopf #app:has(> #view-dashboard:not([hidden])),
  [data-theme~="nachtblau"].mit-ki-knopf #app:has(> #view-day:not([hidden])) { padding-bottom: 0; }
  [data-theme~="nachtblau"].mit-ki-knopf:has(#view-dashboard:not([hidden])) #toast,
  [data-theme~="nachtblau"].mit-ki-knopf:has(#view-day:not([hidden])) #toast { bottom: max(20px, env(safe-area-inset-bottom)); }
  [data-theme~="nachtblau"] .chat-open-icon { border-color: transparent; background: var(--c-primary); color: var(--c-on-primary); }
  [data-theme~="nachtblau"] .chat-open-icon:hover:not(:disabled) { border-color: transparent; background: var(--c-primary-hover); color: var(--c-on-primary); }
  [data-theme~="nachtblau"] .chat-open-icon .icon { color: var(--c-on-primary); }
}