/* =====================================================================
   Theme "labor-gruen" auf Basis "ki-labor" (Design labor-gruen = ki-labor +
   labor-gruen): dunkel, Raster, Leuchten. Hier stehen nur die Abweichungen.
     Grün #004f25 trägt Markierung, Kanten, das Ende des Verlaufs im Kopfbild
     und den Akzent im Zertifikat. Warmgrau #87867a rahmt die Eingabefelder.
   Flächen sind dunkle Stufen von Grün mit etwas Warmgrau (Grün 24 bis 52 Prozent,
   Warmgrau 6 bis 12 Prozent, Rest Schwarz). Text in Hell #f8f8f6, Nebentext
   #cbcac1. Lichtgrün #7ca48e (Grün und Hell je zur Hälfte) ist die Leitfarbe und
   leuchtet statt des Cyans von ki-labor: Knöpfe, Verweise, heute, angesehen,
   Erfolg. Silber #c0bfb8 (Warmgrau und Hell je zur Hälfte) ersetzt das Violett als
   dritte Farbe. Fehler bleiben im Rot von ki-labor, damit sie als Fehler erkennbar
   bleiben.

   Text auf Lichtgrün und Silber ist dunkel (#001007, Grün 20 Prozent). Das
   Zertifikat ist Papier in Hell mit Grün als Akzent. Schrift und Ecken bleiben wie
   in ki-labor. Kontraste prüft werkzeuge/kontrast.js.
   Die Datei geht vor der Anmeldung an jeden Browser. Kommentare nennen deshalb
   keinen Kunden und keine Marke (Schalter anmeldungNeutral).
   ===================================================================== */

[data-theme~="labor-gruen"] {
  --c-bg: #081b10;
  --c-surface: #0b2416;
  --c-surface-2: #0e2d1b;
  --c-surface-3: #103922;
  --c-line: #1b4a2f;
  --c-control: #87867a;
  --c-text: #f8f8f6;
  --c-text-muted: #cbcac1;
  --c-primary: #7ca48e;
  --c-primary-hover: #aec5b7;
  --c-on-primary: #001007;
  --c-primary-soft: #1b3627;
  --c-primary-text: #95b4a2;
  --c-light: #c0bfb8;
  --c-light-soft: #243a2d;
  --c-on-light: #001007;
  --c-success: #7ca48e;
  --c-success-soft: #1b3627;
  --c-focus: #bacec2;
  --c-mark: #004f25;

  --c-hero-bg: #092013;
  --c-hero-bg-2: #004f25;
  --c-hero-text: #f8f8f6;
  --c-hero-muted: #cbcac1;
  --c-hero-line: rgba(124, 164, 142, 0.2);
  --c-hero-accent: #7ca48e;
  --c-hero-on-accent: #001007;

  --shadow-glow: 0 0 0 1px rgba(124, 164, 142, 0.45), 0 0 26px rgba(124, 164, 142, 0.28);

  --cert-paper: #f8f8f6;
  --cert-ink: #001007;
  --cert-muted: #5f5e55;
  --cert-accent: #004f25;
  --cert-accent-2: #87867a;
  --cert-line: #cbcac1;

  --kl-cyan: #7ca48e;
  --kl-violett: #c0bfb8;
  --kl-gruen: #7ca48e;
  --kl-raster: rgba(248, 248, 246, 0.045);
  --kl-pin: #295037;
  --kl-kante: #004f25;
  --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='%237ca48e' stroke-opacity='.42' d='M0 36H150l60 60h120M0 48h145l60 60h115M0 60h140l60 60h110M60 320v-60l40-40h100M300 320v-40l30-30h90'/%3E%3Cpath stroke='%23c0bfb8' stroke-opacity='.4' d='M480 200H380l-50-50H250M480 212h-105l-50-50H240M480 60h-60l-24 24'/%3E%3Cg fill='%23092013' stroke='%237ca48e' 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='%23092013' stroke='%23c0bfb8' 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");
}

/* Im Dunkelmodus dieselben Werte, damit der Dunkelblock von ki-labor und des Grundstils nie durchschlägt. */
@media (prefers-color-scheme: dark) {
  [data-theme~="labor-gruen"] {
    --c-bg: #081b10;
    --c-surface: #0b2416;
    --c-surface-2: #0e2d1b;
    --c-surface-3: #103922;
    --c-line: #1b4a2f;
    --c-control: #87867a;
    --c-text: #f8f8f6;
    --c-text-muted: #cbcac1;
    --c-primary: #7ca48e;
    --c-primary-hover: #aec5b7;
    --c-on-primary: #001007;
    --c-primary-soft: #1b3627;
    --c-primary-text: #95b4a2;
    --c-light: #c0bfb8;
    --c-light-soft: #243a2d;
    --c-on-light: #001007;
    --c-success: #7ca48e;
    --c-success-soft: #1b3627;
    --c-focus: #bacec2;
    --c-mark: #004f25;
    --c-hero-bg: #092013;
    --c-hero-bg-2: #004f25;
    --c-hero-text: #f8f8f6;
    --c-hero-muted: #cbcac1;
    --c-hero-line: rgba(124, 164, 142, 0.2);
    --c-hero-accent: #7ca48e;
    --c-hero-on-accent: #001007;
    --shadow-glow: 0 0 0 1px rgba(124, 164, 142, 0.45), 0 0 26px rgba(124, 164, 142, 0.28);
    --cert-paper: #f8f8f6;
    --cert-ink: #001007;
    --cert-muted: #5f5e55;
    --cert-accent: #004f25;
    --cert-accent-2: #87867a;
    --cert-line: #cbcac1;
    --kl-cyan: #7ca48e;
    --kl-violett: #c0bfb8;
    --kl-gruen: #7ca48e;
    --kl-raster: rgba(248, 248, 246, 0.045);
    --kl-pin: #295037;
    --kl-kante: #004f25;
  }
}

/* Feste Farben aus ki-labor in den Farben dieses Themes (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 Lichtgrün, die hellen Cyantöne Grün mit 40, 30, 25 und 8 Prozent in Hell. Violett wird Silber,
   die hellen Violetttöne Warmgrau mit 35, 20 und 10 Prozent in Hell. Petrol im Zertifikat wird Grün.
   Graphit wird die passende dunkle Stufe von Grün, die Grautöne werden Grün und Warmgrau, Weiß wird
   Hell. Rot und Schwarz in Schatten bleiben. Regeln weiter unten gewinnen gegen den Block. */
/* umfaerben: basis ki-labor, theme labor-gruen, 4fd8e5=7ca48e 6fe1ec=95b4a2 86e6ee=aec5b7 8ff0f7=bacec2 dff3f5=e4eae5 5fe0a0=7ca48e b49dff=c0bfb8 cfc2ff=d0d0cb e4dcff=e1e1dd efe9ff=ededea 0a6b75=004f25 0e1013=081b10 0a0c0f=001007 0a0d11=001007 030508=000603 151a20=0b2416 161a1f=0b2416 1b2027=0e2d1b 262d36=134227 2a323c=134227 2f3742=1b4a2f 4a5462=5f5e55 4b5664=5f5e55 56626f=87867a f4f5f2=f8f8f6 ffffff=f8f8f6 */
[data-theme~="labor-gruen"] body { background: radial-gradient(900px 520px at 88% -8%, rgba(124, 164, 142, 0.07), transparent 70%), radial-gradient(760px 520px at -12% 28%, rgba(192, 191, 184, 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~="labor-gruen"] ::selection { background: rgba(124, 164, 142, 0.32); color: #f8f8f6; }
[data-theme~="labor-gruen"] .btn-primary { box-shadow: 0 0 0 1px rgba(124, 164, 142, 0.35), 0 8px 20px -10px rgba(124, 164, 142, 0.7); }
[data-theme~="labor-gruen"] .btn-primary:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(174, 197, 183, 0.65), 0 0 22px rgba(124, 164, 142, 0.35); }
[data-theme~="labor-gruen"] .btn-secondary { background: rgba(248, 248, 246, 0.02); }
[data-theme~="labor-gruen"] .btn-light { box-shadow: 0 0 0 1px rgba(124, 164, 142, 0.4), 0 10px 26px -10px rgba(124, 164, 142, 0.75); }
[data-theme~="labor-gruen"] .field input:focus-visible,
[data-theme~="labor-gruen"] .num-input:focus-visible,
[data-theme~="labor-gruen"] .chat-input:focus-visible { box-shadow: 0 0 0 3px rgba(186, 206, 194, 0.25), 0 0 18px rgba(124, 164, 142, 0.18); }
[data-theme~="labor-gruen"] .topbar { background: rgba(8, 27, 16, 0.9); }
[data-theme~="labor-gruen"] .topbar::after { background: linear-gradient(90deg, transparent, rgba(124, 164, 142, 0.55) 25%, rgba(192, 191, 184, 0.45) 70%, transparent); }
[data-theme~="labor-gruen"] .brand-mark { filter: drop-shadow(0 0 6px rgba(124, 164, 142, 0.55)); }
[data-theme~="labor-gruen"] .chat-open-btn { border-color: rgba(192, 191, 184, 0.55); background: rgba(192, 191, 184, 0.08); }
[data-theme~="labor-gruen"] .demo-bar { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(124, 164, 142, 0.05) 10px 20px), var(--c-surface-2); }
[data-theme~="labor-gruen"] .login-art { background: radial-gradient(70% 60% at 85% 10%, rgba(124, 164, 142, 0.14), transparent 70%), radial-gradient(60% 60% at 10% 100%, rgba(192, 191, 184, 0.12), transparent 70%), radial-gradient(circle at 1px 1px, rgba(248, 248, 246, 0.07) 1px, transparent 1.6px) 0 0 / 20px 20px, var(--c-hero-bg); }
[data-theme~="labor-gruen"] .login-lights span { background: rgba(248, 248, 246, 0.05); border: 1px solid rgba(149, 180, 162, 0.22); }
[data-theme~="labor-gruen"] .login-lights span.on { box-shadow: 0 0 10px rgba(124, 164, 142, 0.75); }
[data-theme~="labor-gruen"] .login-lights span.on:nth-child(3n) { box-shadow: 0 0 10px rgba(192, 191, 184, 0.75); }
[data-theme~="labor-gruen"] .login-video-bild { border-color: rgba(149, 180, 162, 0.35); }
[data-theme~="labor-gruen"] .login-video-play { box-shadow: 0 0 0 3px rgba(124, 164, 142, 0.25), 0 0 16px rgba(124, 164, 142, 0.6); }
[data-theme~="labor-gruen"] .login-video-player { border: 1px solid rgba(149, 180, 162, 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(124, 164, 142, 0.35); }
[data-theme~="labor-gruen"] .login-head .brand-mark { filter: drop-shadow(0 0 10px rgba(124, 164, 142, 0.6)); }
[data-theme~="labor-gruen"] .demo-hint { border: 1px dashed rgba(149, 180, 162, 0.55); background: rgba(124, 164, 142, 0.04); }
@media (min-width: 900px) {
  [data-theme~="labor-gruen"] .login-art { background: radial-gradient(70% 50% at 80% 12%, rgba(124, 164, 142, 0.14), transparent 70%), radial-gradient(60% 50% at 10% 95%, rgba(192, 191, 184, 0.12), transparent 70%), radial-gradient(circle at 1px 1px, rgba(248, 248, 246, 0.07) 1px, transparent 1.6px) 0 0 / 20px 20px, var(--c-hero-bg); }
}
@media (prefers-color-scheme: light) {
  [data-theme~="labor-gruen"] .kunden-logo-topbar:not([data-dunkel="true"]),
  [data-theme~="labor-gruen"] .kunden-logo-login:not([data-dunkel="true"]) { background: #f8f8f6; }
}
[data-theme~="labor-gruen"] .hero { background: radial-gradient(55% 90% at 100% 0%, rgba(124, 164, 142, 0.13), transparent 70%), radial-gradient(45% 80% at 0% 100%, rgba(192, 191, 184, 0.1), transparent 70%), radial-gradient(circle at 1px 1px, rgba(248, 248, 246, 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(248, 248, 246, 0.05); }
[data-theme~="labor-gruen"] .hero-text > .eyebrow { border: 1px solid rgba(124, 164, 142, 0.35); background: rgba(124, 164, 142, 0.07); }
[data-theme~="labor-gruen"] .hero-teaser { background: rgba(248, 248, 246, 0.03); }
[data-theme~="labor-gruen"] .hero-teaser-type { color: #d0d0cb; }
[data-theme~="labor-gruen"] .hero .btn-ghost-light { border-color: rgba(149, 180, 162, 0.45); }
[data-theme~="labor-gruen"] .hero .btn-ghost-light:hover { background: rgba(124, 164, 142, 0.1); }
[data-theme~="labor-gruen"] .lights::before { border: 1px dashed rgba(149, 180, 162, 0.28); }
[data-theme~="labor-gruen"] .lights span { background: #134227; }
[data-theme~="labor-gruen"] .lights span.open { background: #5f5e55; }
[data-theme~="labor-gruen"] .lights span.on { box-shadow: 0 0 8px rgba(124, 164, 142, 0.85); }
[data-theme~="labor-gruen"] .lights span.today { box-shadow: 0 0 10px rgba(192, 191, 184, 0.9); }
[data-theme~="labor-gruen"] .hero-progress-label strong { text-shadow: 0 0 18px rgba(124, 164, 142, 0.45); }
@media (min-width: 960px) {
  [data-theme~="labor-gruen"] .hero-progress { border-left: 1px dashed rgba(149, 180, 162, 0.2); }
}
[data-theme~="labor-gruen"] .section-title::before { box-shadow: 0 0 10px rgba(124, 164, 142, 0.7); }
[data-theme~="labor-gruen"] .legend-dot.is-today { box-shadow: 0 0 8px rgba(124, 164, 142, 0.9); }
[data-theme~="labor-gruen"] .legend-dot.is-viewed { box-shadow: 0 0 8px rgba(124, 164, 142, 0.8); }
[data-theme~="labor-gruen"] .tile { background: linear-gradient(180deg, rgba(248, 248, 246, 0.03), transparent 45%), var(--c-surface); box-shadow: inset 0 1px 0 rgba(248, 248, 246, 0.04), 0 2px 4px rgba(0, 0, 0, 0.35); }
[data-theme~="labor-gruen"] .tile:hover:not(.locked) { border-color: rgba(124, 164, 142, 0.6); box-shadow: 0 0 0 1px rgba(124, 164, 142, 0.2), 0 14px 30px -14px rgba(124, 164, 142, 0.55); }
[data-theme~="labor-gruen"] .tile:hover:not(.locked) .tile-foot::before,
[data-theme~="labor-gruen"] .tile:hover:not(.locked) .tile-foot::after,
[data-theme~="labor-gruen"] .tile.today .tile-foot::before,
[data-theme~="labor-gruen"] .tile.today .tile-foot::after { background: repeating-linear-gradient(180deg, rgba(124, 164, 142, 0.7) 0 3px, transparent 3px 9px); }
[data-theme~="labor-gruen"] .tile.viewed { border-color: rgba(124, 164, 142, 0.3); background: radial-gradient(90% 70% at 100% 0%, rgba(124, 164, 142, 0.11), transparent 60%), var(--c-surface); }
[data-theme~="labor-gruen"] .tile.viewed .tile-status { box-shadow: 0 0 0 3px rgba(124, 164, 142, 0.14), 0 0 12px rgba(124, 164, 142, 0.6); }
[data-theme~="labor-gruen"] .tile.locked { background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(248, 248, 246, 0.018) 7px 8px), var(--c-surface-2); }
[data-theme~="labor-gruen"] .tile.today { background: radial-gradient(110% 80% at 50% 0%, rgba(124, 164, 142, 0.15), transparent 65%), var(--c-surface); box-shadow: 0 0 0 1px rgba(124, 164, 142, 0.35), 0 0 22px rgba(124, 164, 142, 0.2); }
[data-theme~="labor-gruen"] .tile.today::before { box-shadow: 0 0 0 3px rgba(124, 164, 142, 0.3), 0 0 32px rgba(124, 164, 142, 0.5); }
[data-theme~="labor-gruen"] .tile-today-badge { border: 1px solid rgba(124, 164, 142, 0.55); background: rgba(124, 164, 142, 0.12); }
[data-theme~="labor-gruen"] .tile::after { background: linear-gradient(90deg, rgba(124, 164, 142, 0.06), rgba(124, 164, 142, 0.5) 50%, rgba(124, 164, 142, 0.06)); }
[data-theme~="labor-gruen"] .tile.opening:not(.locked) { box-shadow: 0 0 0 1px var(--kl-cyan), 0 14px 34px rgba(124, 164, 142, 0.38); }
[data-theme~="labor-gruen"] .content-card { background: linear-gradient(180deg, rgba(248, 248, 246, 0.025), transparent 160px), var(--c-surface); }
[data-theme~="labor-gruen"] .type-chip { border: 1px solid rgba(124, 164, 142, 0.4); }
@media (min-width: 1024px) {
  [data-theme~="labor-gruen"] #day-content > .day-meta::after { background: radial-gradient(circle at 50% calc(100% - 4.5px), transparent 2.5px, rgba(124, 164, 142, 0.7) 3px 4px, transparent 4.5px), linear-gradient(rgba(124, 164, 142, 0.7), rgba(124, 164, 142, 0.15)) center top / 1.5px calc(100% - 9px) no-repeat; }
}
[data-theme~="labor-gruen"] .callout-light { border-color: rgba(192, 191, 184, 0.3); }
[data-theme~="labor-gruen"] .callout-light .icon,
[data-theme~="labor-gruen"] .callout-light .callout-title { color: #d0d0cb; }
[data-theme~="labor-gruen"] .video-frame { background: var(--kl-ecken), repeating-linear-gradient(0deg, rgba(248, 248, 246, 0.025) 0 1px, transparent 1px 4px), radial-gradient(80% 100% at 70% 0%, rgba(124, 164, 142, 0.12), transparent 70%), var(--c-hero-bg); }
[data-theme~="labor-gruen"] .video-play { border-color: rgba(124, 164, 142, 0.6); background: rgba(124, 164, 142, 0.08); box-shadow: 0 0 22px rgba(124, 164, 142, 0.3); }
[data-theme~="labor-gruen"] .steps li:not(:last-child)::after { background: repeating-linear-gradient(180deg, rgba(124, 164, 142, 0.6) 0 4px, transparent 4px 8px); }
[data-theme~="labor-gruen"] .steps li.is-result::before { box-shadow: 0 0 14px rgba(124, 164, 142, 0.55); }
[data-theme~="labor-gruen"] .steps li.is-result .step-text { border: 1px solid rgba(124, 164, 142, 0.3); }
[data-theme~="labor-gruen"] .prompt { border: 1px solid #1b4a2f; background: #001007; }
[data-theme~="labor-gruen"] .prompt-head { border-bottom-color: #134227; background: linear-gradient(#0e2d1b, #0b2416); }
[data-theme~="labor-gruen"] .prompt-head::before { background: radial-gradient(circle at 5px 5px, #5f5e55 4px, transparent 4.5px), radial-gradient(circle at 20px 5px, #5f5e55 4px, transparent 4.5px), radial-gradient(circle at 35px 5px, #5f5e55 4px, transparent 4.5px); }
[data-theme~="labor-gruen"] .prompt-text { color: #e4eae5; }
[data-theme~="labor-gruen"] .prompt-text mark { background: rgba(192, 191, 184, 0.2); color: #ededea; }
[data-theme~="labor-gruen"] .myth-front { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(248, 248, 246, 0.018) 10px 11px), var(--c-surface-2); }
[data-theme~="labor-gruen"] .myth-front .myth-tag { color: #d0d0cb; }
[data-theme~="labor-gruen"] .myth-back { border-top: 1px solid rgba(124, 164, 142, 0.35); background: linear-gradient(180deg, rgba(124, 164, 142, 0.07), transparent 70%), var(--c-surface); }
[data-theme~="labor-gruen"] .option:hover:not(:disabled) { box-shadow: 0 0 16px -4px rgba(124, 164, 142, 0.45); }
[data-theme~="labor-gruen"] .option.correct { box-shadow: 0 0 18px -6px rgba(124, 164, 142, 0.6); }
[data-theme~="labor-gruen"] .feedback.is-correct { border-color: rgba(124, 164, 142, 0.35); }
[data-theme~="labor-gruen"] .meter > span { box-shadow: 0 0 10px rgba(124, 164, 142, 0.55); }
[data-theme~="labor-gruen"] .check:hover { border-color: rgba(124, 164, 142, 0.55); }
[data-theme~="labor-gruen"] .check input:checked { box-shadow: 0 0 10px rgba(124, 164, 142, 0.5); }
[data-theme~="labor-gruen"] .check:has(input:checked) { border-color: rgba(124, 164, 142, 0.25); }
[data-theme~="labor-gruen"] .calc-result { border: 1px solid rgba(124, 164, 142, 0.3); background: var(--kl-ecken), repeating-linear-gradient(0deg, rgba(248, 248, 246, 0.02) 0 1px, transparent 1px 4px), radial-gradient(70% 100% at 50% 0%, rgba(124, 164, 142, 0.12), transparent 70%), #001007; box-shadow: inset 0 0 40px rgba(124, 164, 142, 0.06); }
[data-theme~="labor-gruen"] .calc-big { text-shadow: 0 0 20px rgba(124, 164, 142, 0.5); }
[data-theme~="labor-gruen"] .quote::before { box-shadow: 0 0 14px rgba(192, 191, 184, 0.45); }
[data-theme~="labor-gruen"] .poll-bar-fill { background: #87867a; }
[data-theme~="labor-gruen"] .poll-row.mine .poll-bar-fill { box-shadow: 0 0 12px rgba(124, 164, 142, 0.5); }
[data-theme~="labor-gruen"] .mine-chip { border-color: rgba(192, 191, 184, 0.6); color: #e1e1dd; }
[data-theme~="labor-gruen"] .passed-note { border-color: rgba(124, 164, 142, 0.45); }
[data-theme~="labor-gruen"] .radio-opt input::before { box-shadow: 0 0 8px rgba(124, 164, 142, 0.8); }
[data-theme~="labor-gruen"] .final-submit-row { background: rgba(11, 36, 22, 0.94); }
[data-theme~="labor-gruen"] .result.is-pass { border-color: rgba(124, 164, 142, 0.5); background: var(--kl-ecken), radial-gradient(80% 100% at 50% 0%, rgba(124, 164, 142, 0.16), transparent 70%), radial-gradient(circle at 1px 1px, rgba(248, 248, 246, 0.06) 1px, transparent 1.6px) 0 0 / 18px 18px, var(--c-hero-bg); box-shadow: 0 0 0 1px rgba(124, 164, 142, 0.15), 0 24px 60px -24px rgba(124, 164, 142, 0.35); }
[data-theme~="labor-gruen"] .result.is-pass .result-score { text-shadow: 0 0 22px rgba(124, 164, 142, 0.55); }
[data-theme~="labor-gruen"] .certificate { box-shadow: 0 0 0 1px rgba(248, 248, 246, 0.06), 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 60px -20px rgba(124, 164, 142, 0.25); }
[data-theme~="labor-gruen"] .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(0, 79, 37, 0.1) 1px, transparent 1.5px) 0 0 / 14px 14px; }
[data-theme~="labor-gruen"] .chat-backdrop { background: rgba(0, 6, 3, 0.62); }
[data-theme~="labor-gruen"] .chat-head::after { background: linear-gradient(90deg, rgba(192, 191, 184, 0.6), rgba(124, 164, 142, 0.5) 60%, transparent); }
[data-theme~="labor-gruen"] .chat-title::before { box-shadow: 0 0 8px rgba(124, 164, 142, 0.8); }
[data-theme~="labor-gruen"] .chat-empty-icon { border: 1px solid rgba(192, 191, 184, 0.45); box-shadow: 0 0 18px rgba(192, 191, 184, 0.25); }
[data-theme~="labor-gruen"] .chat-msg-nutzer .chat-bubble { border: 1px solid rgba(124, 164, 142, 0.3); }
[data-theme~="labor-gruen"] .chat-bubble code,
[data-theme~="labor-gruen"] .chat-bubble pre { background: #001007; }
[data-theme~="labor-gruen"] .chat-bubble mark { background: rgba(192, 191, 184, 0.2); color: #ededea; }
[data-theme~="labor-gruen"] .chat-warnung { border-color: rgba(192, 191, 184, 0.6); }
[data-theme~="labor-gruen"] .chat-beispiel-hinweis { border: 1px solid rgba(124, 164, 142, 0.3); }
[data-theme~="labor-gruen"] #toast { border: 1px solid rgba(124, 164, 142, 0.45); background: #0e2d1b; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 22px rgba(124, 164, 142, 0.15); }
[data-theme~="labor-gruen"] .content-card:has(.seite-404-link)::after { color: rgba(124, 164, 142, 0.14); }
[data-theme~="labor-gruen"] .ds-text h2::before { box-shadow: 0 0 8px rgba(124, 164, 142, 0.7); }
[data-theme~="labor-gruen"] .ds-hinweis { border: 1px solid rgba(192, 191, 184, 0.35); }
/* umfaerben: ende */

/* Bausteine im Prompt (S20I): Farbe 1 nimmt sonst Erfolg und ist damit so lichtgrün wie
   Farbe 0. Silbern ausgefüllt mit dunkler Schrift trennt sie deutlich (Schrift ΔE 40 und mehr zu Farbe 0,
   server/s20i.test.js, 10,6 zu 1). Silbrige Schrift auf dunkler Fläche läge nur ΔE 15 von Lichtgrün weg.
   Nur mit dem Schalter funktionen.interaktiv (public/css/interaktiv.css). */
[data-theme~="labor-gruen"] .ia-farbe-1 .ia-baustein-name { background: var(--c-light); color: var(--c-on-light); }

/* Logo im Kopf und auf der Anmeldung in der hellen Fassung (Seitenverhältnis 4,6). Im Kopf 32 px hoch
   statt 28 px, damit die Schrift im Logo lesbar bleibt. Auf der Anmeldung ohne die Breitengrenze von
   180 px, die die Plattform sonst setzt. */
[data-theme~="labor-gruen"] { --kunden-logo-topbar-h: 32px; }
[data-theme~="labor-gruen"] .kunden-logo-login { max-width: 100%; }
/* Am Handy steht das Logo über dem Titel. Mit 32 px brauchen beide mehr als die 56 px der Kopfzeile,
   die Kopfzeile des Kalenders bekommt deshalb 64 px. */
@media (max-width: 599px) {
  [data-theme~="labor-gruen"].has-kunden-logo #view-dashboard .topbar-inner { min-height: 64px; }
}

/* Zertifikat mit dem ganzen Logo samt Zeile darunter (Seitenverhältnis 3,8). Bei 68 px Höhe hat die
   Zeile 10 und 8 px hohe Buchstaben, kleiner wäre sie am Bildschirm kaum lesbar. Das Logo schrumpft
   deshalb nicht.
   Daneben brechen Name und Kalender um, im schmalen Zertifikat (Handy) steht das Logo allein in der
   ersten Zeile. Für das höhere Logo steht der Titel näher am Kopf, und der Rahmen wächst mit dem
   Inhalt (S17). */
[data-theme~="labor-gruen"] { --kunden-logo-cert-h: 68px; }
[data-theme~="labor-gruen"] .kunden-logo-cert { flex-shrink: 0; max-width: 100%; }
[data-theme~="labor-gruen"] .cert-kicker { margin-top: clamp(10px, 2cqw, 18px); }
[data-theme~="labor-gruen"] .cert-frame { height: auto; min-height: 100%; }
@container (max-width: 520px) {
  [data-theme~="labor-gruen"] .cert-top { flex-wrap: wrap; row-gap: 6px; }
}

/* Schwebender Knopf „KI“ bei jeder Breite aus (Paket CH8, Befunde P1 und E4 der Sichtprüfung CH7).
   Andere Designs nehmen ihn seit S14 (C5-15) am Handy aus Kalender und Türchen. In diesem
   Design lag er auch am Desktop beim Scrollen in 14 von 24 Türchen über „Nächstes Türchen“,
   im Kalender über Kachel 8 und am Handy über dem Zertifikat. In Kalender und Türchen trägt die klebende
   Kopfzeile den Eintrag zum KI-Assistenten, im Kalender dazu die Karte. Der Knopf entfällt deshalb in jeder
   Ansicht samt Tipp und Platz am Seitenende, auch im Zertifikat. Von dort führt „Kalender“ zum Eintrag.
   Der Eintrag im Türchen bekommt dafür die Farbe des Knopfs. */
[data-theme~="labor-gruen"] .ki-schwebe { display: none; }
[data-theme~="labor-gruen"].mit-ki-knopf #app { padding-bottom: 0; }
[data-theme~="labor-gruen"].mit-ki-knopf:has(#ki-schwebe) body #toast { bottom: max(20px, env(safe-area-inset-bottom)); }
[data-theme~="labor-gruen"] .chat-open-icon { border-color: transparent; background: var(--c-primary); color: var(--c-on-primary); }
[data-theme~="labor-gruen"] .chat-open-icon:hover:not(:disabled) { border-color: transparent; background: var(--c-primary-hover); color: var(--c-on-primary); }
[data-theme~="labor-gruen"] .chat-open-icon .icon { color: var(--c-on-primary); }

/* Kontraste aus CH7 (Befunde E3 und P4). „von 12 richtig“ im Ergebnis von Türchen 24 nimmt die Plattform mit
   Deckkraft 0,8 aus Lichtgrün, auf dem Schein des Ergebniskastens waren das im Bild 3,6 zu 1. Mit
   --c-primary-text (Grün 40, Hell 60) und voller Deckkraft mindestens 5,1 zu 1, auch an der hellsten Stelle
   des Scheins. Der Platzhalter im Eingabefeld des Chats hatte die Grundfarbe des Browsers (3,9 zu 1), jetzt
   Nebentext zu 70 Prozent auf dem Grund der Seite, etwa 6 zu 1, und damit noch klar leiser als die Eingabe. */
[data-theme~="labor-gruen"] .result.is-pass .result-score small { color: var(--c-primary-text); opacity: 1; }
[data-theme~="labor-gruen"] #chat-input::placeholder { color: color-mix(in srgb, var(--c-text-muted) 70%, var(--c-bg)); opacity: 1; }