/* =====================================================================
   Theme "nachtgruen" auf Basis "ki-labor" (Design nachtgruen = ki-labor + nachtgruen),
   Paket S0. Hier stehen nur die Abweichungen: Grün #4d8c63 als Leitfarbe, Dunkelgrün
   #224029, Cyanblau #2ac4ea und #32d6ff als zweite Farbe, Flächen mit einem Hauch
   Dunkelgrün. Die Schrift von KI-Labor bleibt.

   Text auf Grün ist dunkel, Weiß auf #4d8c63 erreicht 4,5:1 nicht. Das Zertifikat
   bleibt ein helles Dokument mit dem dunkleren Grün #3e704f als Textakzent.
   Seit S2 leuchten Türchen, Fortschritt und Rahmen grün (--kl-cyan #7cc596), Cyanblau
   ist die dritte Farbe (--kl-violett #32d6ff).
   Kontraste prüft werkzeuge/kontrast.js.
   ===================================================================== */

[data-theme~="nachtgruen"] {
  --c-bg: #0d1210;
  --c-surface: #141b17;
  --c-surface-2: #1a231e;
  --c-surface-3: #232d27;
  --c-line: #2b362f;
  --c-control: #728a7b;
  --c-text-muted: #adb5b0;
  --c-primary: #4d8c63;
  --c-primary-hover: #67a67d;
  --c-on-primary: #06110a;
  --c-primary-soft: #12291a;
  --c-primary-text: #7cc596;
  --c-focus: #8fdcab;
  --c-mark: #1b3a2a;
  --c-light: #32d6ff;
  --c-light-soft: #0c2a35;
  --c-on-light: #03202a;
  --c-hero-bg: #0f1612;
  --c-hero-bg-2: #1a3324;
  --c-hero-accent: #7cc596;
  --c-hero-on-accent: #06110a;
  --c-hero-line: rgba(124, 197, 150, 0.2);
  --shadow-glow: 0 0 0 1px rgba(124, 197, 150, 0.45), 0 0 26px rgba(77, 140, 99, 0.35);
  --cert-accent: #3e704f;
  --cert-accent-2: #4d8c63;
  --kl-cyan: #7cc596;
  --kl-violett: #32d6ff;
  --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='%237cc596' stroke-opacity='.42' d='M0 36H150l60 60h120M0 48h145l60 60h115M0 60h140l60 60h110M60 320v-60l40-40h100M300 320v-40l30-30h90'/%3E%3Cpath stroke='%2332d6ff' stroke-opacity='.4' d='M480 200H380l-50-50H250M480 212h-105l-50-50H240M480 60h-60l-24 24'/%3E%3Cg fill='%230f1612' stroke='%237cc596' 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='%230f1612' stroke='%2332d6ff' 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~="nachtgruen"] {
    --c-bg: #0d1210;
    --c-surface: #141b17;
    --c-surface-2: #1a231e;
    --c-surface-3: #232d27;
    --c-line: #2b362f;
    --c-control: #728a7b;
    --c-text-muted: #adb5b0;
    --c-primary: #4d8c63;
    --c-primary-hover: #67a67d;
    --c-on-primary: #06110a;
    --c-primary-soft: #12291a;
    --c-primary-text: #7cc596;
    --c-focus: #8fdcab;
    --c-mark: #1b3a2a;
    --c-light: #32d6ff;
    --c-light-soft: #0c2a35;
    --c-on-light: #03202a;
    --c-hero-bg: #0f1612;
    --c-hero-bg-2: #1a3324;
    --c-hero-accent: #7cc596;
    --c-hero-on-accent: #06110a;
    --c-hero-line: rgba(124, 197, 150, 0.2);
    --shadow-glow: 0 0 0 1px rgba(124, 197, 150, 0.45), 0 0 26px rgba(77, 140, 99, 0.35);
    --cert-accent: #3e704f;
    --cert-accent-2: #4d8c63;
    --kl-cyan: #7cc596;
    --kl-violett: #32d6ff;
    --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='%237cc596' stroke-opacity='.42' d='M0 36H150l60 60h120M0 48h145l60 60h115M0 60h140l60 60h110M60 320v-60l40-40h100M300 320v-40l30-30h90'/%3E%3Cpath stroke='%2332d6ff' stroke-opacity='.4' d='M480 200H380l-50-50H250M480 212h-105l-50-50H240M480 60h-60l-24 24'/%3E%3Cg fill='%230f1612' stroke='%237cc596' 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='%230f1612' stroke='%2332d6ff' 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");
  }
}

/* Feste Farben aus ki-labor in den Farben dieses Themes (Paket S2, Befund S0 in docs/umsetzung/BEFUNDE.md).
   Der Block zwischen den Markern entsteht mit node werkzeuge/theme-umfaerben.js und wird nicht von Hand
   geändert. Cyan folgt --kl-cyan, Violett folgt --kl-violett, die hellen Töne entsprechend.
   Das Graublau der übrigen Balken der Umfrage wird zum Graugrün von --c-control (Paket S20I, Befund B4
   der Sichtung S20H, 3,8 zu 1 auf der Spur --c-surface-3).
   Regeln weiter unten gewinnen gegen den Block. */
/* umfaerben: basis ki-labor, theme nachtgruen, 4fd8e5=7cc596 6fe1ec=8fdcab 86e6ee=8fdcab 8ff0f7=8fdcab dff3f5=e0f3e7 0a6b75=3e704f b49dff=32d6ff cfc2ff=a6e9ff efe9ff=e3f8ff e4dcff=cdf2ff 56626f=728a7b */
[data-theme~="nachtgruen"] body { background: radial-gradient(900px 520px at 88% -8%, rgba(124, 197, 150, 0.07), transparent 70%), radial-gradient(760px 520px at -12% 28%, rgba(50, 214, 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~="nachtgruen"] ::selection { background: rgba(124, 197, 150, 0.32); }
[data-theme~="nachtgruen"] .btn-primary { box-shadow: 0 0 0 1px rgba(124, 197, 150, 0.35), 0 8px 20px -10px rgba(124, 197, 150, 0.7); }
[data-theme~="nachtgruen"] .btn-primary:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(143, 220, 171, 0.65), 0 0 22px rgba(124, 197, 150, 0.35); }
[data-theme~="nachtgruen"] .btn-light { box-shadow: 0 0 0 1px rgba(124, 197, 150, 0.4), 0 10px 26px -10px rgba(124, 197, 150, 0.75); }
[data-theme~="nachtgruen"] .field input:focus-visible,
[data-theme~="nachtgruen"] .num-input:focus-visible,
[data-theme~="nachtgruen"] .chat-input:focus-visible { box-shadow: 0 0 0 3px rgba(143, 220, 171, 0.25), 0 0 18px rgba(124, 197, 150, 0.18); }
[data-theme~="nachtgruen"] .topbar::after { background: linear-gradient(90deg, transparent, rgba(124, 197, 150, 0.55) 25%, rgba(50, 214, 255, 0.45) 70%, transparent); }
[data-theme~="nachtgruen"] .brand-mark { filter: drop-shadow(0 0 6px rgba(124, 197, 150, 0.55)); }
[data-theme~="nachtgruen"] .chat-open-btn { border-color: rgba(50, 214, 255, 0.55); background: rgba(50, 214, 255, 0.08); }
[data-theme~="nachtgruen"] .demo-bar { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(124, 197, 150, 0.05) 10px 20px), var(--c-surface-2); }
[data-theme~="nachtgruen"] .login-art { background: radial-gradient(70% 60% at 85% 10%, rgba(124, 197, 150, 0.14), transparent 70%), radial-gradient(60% 60% at 10% 100%, rgba(50, 214, 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); }
[data-theme~="nachtgruen"] .login-lights span { border: 1px solid rgba(143, 220, 171, 0.22); }
[data-theme~="nachtgruen"] .login-lights span.on { box-shadow: 0 0 10px rgba(124, 197, 150, 0.75); }
[data-theme~="nachtgruen"] .login-lights span.on:nth-child(3n) { box-shadow: 0 0 10px rgba(50, 214, 255, 0.75); }
[data-theme~="nachtgruen"] .login-video-bild { border-color: rgba(143, 220, 171, 0.35); }
[data-theme~="nachtgruen"] .login-video-play { box-shadow: 0 0 0 3px rgba(124, 197, 150, 0.25), 0 0 16px rgba(124, 197, 150, 0.6); }
[data-theme~="nachtgruen"] .login-video-player { border: 1px solid rgba(143, 220, 171, 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, 197, 150, 0.35); }
[data-theme~="nachtgruen"] .login-head .brand-mark { filter: drop-shadow(0 0 10px rgba(124, 197, 150, 0.6)); }
[data-theme~="nachtgruen"] .demo-hint { border: 1px dashed rgba(143, 220, 171, 0.55); background: rgba(124, 197, 150, 0.04); }
@media (min-width: 900px) {
  [data-theme~="nachtgruen"] .login-art { background: radial-gradient(70% 50% at 80% 12%, rgba(124, 197, 150, 0.14), transparent 70%), radial-gradient(60% 50% at 10% 95%, rgba(50, 214, 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); }
}
[data-theme~="nachtgruen"] .hero { background: radial-gradient(55% 90% at 100% 0%, rgba(124, 197, 150, 0.13), transparent 70%), radial-gradient(45% 80% at 0% 100%, rgba(50, 214, 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); }
[data-theme~="nachtgruen"] .hero-text > .eyebrow { border: 1px solid rgba(124, 197, 150, 0.35); background: rgba(124, 197, 150, 0.07); }
[data-theme~="nachtgruen"] .hero-teaser-type { color: #a6e9ff; }
[data-theme~="nachtgruen"] .hero .btn-ghost-light { border-color: rgba(143, 220, 171, 0.45); }
[data-theme~="nachtgruen"] .hero .btn-ghost-light:hover { background: rgba(124, 197, 150, 0.1); }
[data-theme~="nachtgruen"] .lights::before { border: 1px dashed rgba(143, 220, 171, 0.28); }
[data-theme~="nachtgruen"] .lights span.on { box-shadow: 0 0 8px rgba(124, 197, 150, 0.85); }
[data-theme~="nachtgruen"] .lights span.today { box-shadow: 0 0 10px rgba(50, 214, 255, 0.9); }
[data-theme~="nachtgruen"] .hero-progress-label strong { text-shadow: 0 0 18px rgba(124, 197, 150, 0.45); }
@media (min-width: 960px) {
  [data-theme~="nachtgruen"] .hero-progress { border-left: 1px dashed rgba(143, 220, 171, 0.2); }
}
[data-theme~="nachtgruen"] .section-title::before { box-shadow: 0 0 10px rgba(124, 197, 150, 0.7); }
[data-theme~="nachtgruen"] .legend-dot.is-today { box-shadow: 0 0 8px rgba(124, 197, 150, 0.9); }
[data-theme~="nachtgruen"] .tile:hover:not(.locked) { border-color: rgba(124, 197, 150, 0.6); box-shadow: 0 0 0 1px rgba(124, 197, 150, 0.2), 0 14px 30px -14px rgba(124, 197, 150, 0.55); }
[data-theme~="nachtgruen"] .tile:hover:not(.locked) .tile-foot::before,
[data-theme~="nachtgruen"] .tile:hover:not(.locked) .tile-foot::after,
[data-theme~="nachtgruen"] .tile.today .tile-foot::before,
[data-theme~="nachtgruen"] .tile.today .tile-foot::after { background: repeating-linear-gradient(180deg, rgba(124, 197, 150, 0.7) 0 3px, transparent 3px 9px); }
[data-theme~="nachtgruen"] .tile.today { background: radial-gradient(110% 80% at 50% 0%, rgba(124, 197, 150, 0.15), transparent 65%), var(--c-surface); box-shadow: 0 0 0 1px rgba(124, 197, 150, 0.35), 0 0 22px rgba(124, 197, 150, 0.2); }
[data-theme~="nachtgruen"] .tile.today::before { box-shadow: 0 0 0 3px rgba(124, 197, 150, 0.3), 0 0 32px rgba(124, 197, 150, 0.5); }
[data-theme~="nachtgruen"] .tile-today-badge { border: 1px solid rgba(124, 197, 150, 0.55); background: rgba(124, 197, 150, 0.12); }
[data-theme~="nachtgruen"] .tile::after { background: linear-gradient(90deg, rgba(124, 197, 150, 0.06), rgba(124, 197, 150, 0.5) 50%, rgba(124, 197, 150, 0.06)); }
[data-theme~="nachtgruen"] .tile.opening:not(.locked) { box-shadow: 0 0 0 1px var(--kl-cyan), 0 14px 34px rgba(124, 197, 150, 0.38); }
[data-theme~="nachtgruen"] .type-chip { border: 1px solid rgba(124, 197, 150, 0.4); }
@media (min-width: 1024px) {
  [data-theme~="nachtgruen"] #day-content > .day-meta::after { background: radial-gradient(circle at 50% calc(100% - 4.5px), transparent 2.5px, rgba(124, 197, 150, 0.7) 3px 4px, transparent 4.5px), linear-gradient(rgba(124, 197, 150, 0.7), rgba(124, 197, 150, 0.15)) center top / 1.5px calc(100% - 9px) no-repeat; }
}
[data-theme~="nachtgruen"] .callout-light { border-color: rgba(50, 214, 255, 0.3); }
[data-theme~="nachtgruen"] .callout-light .icon,
[data-theme~="nachtgruen"] .callout-light .callout-title { color: #a6e9ff; }
[data-theme~="nachtgruen"] .video-frame { 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(124, 197, 150, 0.12), transparent 70%), var(--c-hero-bg); }
[data-theme~="nachtgruen"] .video-play { border-color: rgba(124, 197, 150, 0.6); background: rgba(124, 197, 150, 0.08); box-shadow: 0 0 22px rgba(124, 197, 150, 0.3); }
[data-theme~="nachtgruen"] .steps li:not(:last-child)::after { background: repeating-linear-gradient(180deg, rgba(124, 197, 150, 0.6) 0 4px, transparent 4px 8px); }
[data-theme~="nachtgruen"] .steps li.is-result::before { box-shadow: 0 0 14px rgba(124, 197, 150, 0.55); }
[data-theme~="nachtgruen"] .steps li.is-result .step-text { border: 1px solid rgba(124, 197, 150, 0.3); }
[data-theme~="nachtgruen"] .prompt-text { color: #e0f3e7; }
[data-theme~="nachtgruen"] .prompt-text mark { background: rgba(50, 214, 255, 0.2); color: #e3f8ff; }
[data-theme~="nachtgruen"] .myth-front .myth-tag { color: #a6e9ff; }
[data-theme~="nachtgruen"] .option:hover:not(:disabled) { box-shadow: 0 0 16px -4px rgba(124, 197, 150, 0.45); }
[data-theme~="nachtgruen"] .meter > span { box-shadow: 0 0 10px rgba(124, 197, 150, 0.55); }
[data-theme~="nachtgruen"] .check:hover { border-color: rgba(124, 197, 150, 0.55); }
[data-theme~="nachtgruen"] .check input:checked { box-shadow: 0 0 10px rgba(124, 197, 150, 0.5); }
[data-theme~="nachtgruen"] .check:has(input:checked) { border-color: rgba(124, 197, 150, 0.25); }
[data-theme~="nachtgruen"] .calc-result { border: 1px solid rgba(124, 197, 150, 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(124, 197, 150, 0.12), transparent 70%), rgb(10, 13, 17); box-shadow: inset 0 0 40px rgba(124, 197, 150, 0.06); }
[data-theme~="nachtgruen"] .calc-big { text-shadow: 0 0 20px rgba(124, 197, 150, 0.5); }
[data-theme~="nachtgruen"] .quote::before { box-shadow: 0 0 14px rgba(50, 214, 255, 0.45); }
[data-theme~="nachtgruen"] .poll-bar-fill { background: #728a7b; }
[data-theme~="nachtgruen"] .poll-row.mine .poll-bar-fill { box-shadow: 0 0 12px rgba(124, 197, 150, 0.5); }
[data-theme~="nachtgruen"] .mine-chip { border-color: rgba(50, 214, 255, 0.6); color: #cdf2ff; }
[data-theme~="nachtgruen"] .radio-opt input::before { box-shadow: 0 0 8px rgba(124, 197, 150, 0.8); }
[data-theme~="nachtgruen"] .certificate { 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(124, 197, 150, 0.25); }
[data-theme~="nachtgruen"] .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(62, 112, 79, 0.1) 1px, transparent 1.5px) 0 0 / 14px 14px; }
[data-theme~="nachtgruen"] .chat-head::after { background: linear-gradient(90deg, rgba(50, 214, 255, 0.6), rgba(124, 197, 150, 0.5) 60%, transparent); }
[data-theme~="nachtgruen"] .chat-empty-icon { border: 1px solid rgba(50, 214, 255, 0.45); box-shadow: 0 0 18px rgba(50, 214, 255, 0.25); }
[data-theme~="nachtgruen"] .chat-msg-nutzer .chat-bubble { border: 1px solid rgba(124, 197, 150, 0.3); }
[data-theme~="nachtgruen"] .chat-bubble mark { background: rgba(50, 214, 255, 0.2); color: #e3f8ff; }
[data-theme~="nachtgruen"] .chat-warnung { border-color: rgba(50, 214, 255, 0.6); }
[data-theme~="nachtgruen"] .chat-beispiel-hinweis { border: 1px solid rgba(124, 197, 150, 0.3); }
[data-theme~="nachtgruen"] #toast { border: 1px solid rgba(124, 197, 150, 0.45); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 22px rgba(124, 197, 150, 0.15); }
[data-theme~="nachtgruen"] .content-card:has(.seite-404-link)::after { color: rgba(124, 197, 150, 0.14); }
[data-theme~="nachtgruen"] .ds-text h2::before { box-shadow: 0 0 8px rgba(124, 197, 150, 0.7); }
[data-theme~="nachtgruen"] .ds-hinweis { border: 1px solid rgba(50, 214, 255, 0.35); }
/* umfaerben: ende */

/* Leuchtränder der Knöpfe in der Leitfarbe statt im Cyan von ki-labor */
[data-theme~="nachtgruen"] .btn-primary {
  box-shadow: 0 0 0 1px rgba(77, 140, 99, 0.35), 0 8px 20px -10px rgba(77, 140, 99, 0.7);
}
[data-theme~="nachtgruen"] .btn-primary:hover:not(:disabled) {
  box-shadow: 0 0 0 1px rgba(124, 197, 150, 0.65), 0 0 22px rgba(77, 140, 99, 0.35);
}
[data-theme~="nachtgruen"] .check input:checked { box-shadow: 0 0 10px rgba(77, 140, 99, 0.5); }
[data-theme~="nachtgruen"] ::selection { background: rgba(77, 140, 99, 0.4); color: #fff; }

/* Bausteine im Prompt (Paket S20I, Befund B1 der Sichtung S20H): Farbe 1 nimmt sonst das Grün
   für Erfolg aus ki-labor, dann sind Rolle und Aufgabe beide grün. Das Cyanblau der dritten Farbe trennt sie,
   #32d6ff auf #0c2a35 hat 8,7 zu 1. Nur mit dem Schalter funktionen.interaktiv (public/css/interaktiv.css). */
[data-theme~="nachtgruen"] .ia-farbe-1 .ia-baustein-name { background: var(--c-light-soft); color: var(--c-light); }

/* Zertifikat mit dem ganzen Logo samt Zeile darunter (Paket S17, zertifikatLogo der Marke). Die
   Versalhöhe der Zeile ist 10,7 Prozent der Bildhöhe. Bei 68 px Höhe sind das 7,3 px, kleiner wäre die
   Zeile am Bildschirm nicht 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, statt die Kopfzeile zu stauchen. Kopf und Anmeldung zeigen weiter die Wortmarke. */
[data-theme~="nachtgruen"] { --kunden-logo-cert-h: 68px; }
[data-theme~="nachtgruen"] .kunden-logo-cert { flex-shrink: 0; max-width: 100%; }
[data-theme~="nachtgruen"] .cert-kicker { margin-top: clamp(10px, 2cqw, 18px); }
[data-theme~="nachtgruen"] .cert-frame { height: auto; min-height: 100%; }
@container (max-width: 520px) {
  [data-theme~="nachtgruen"] .cert-top { flex-wrap: wrap; row-gap: 6px; }
}

@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~="nachtgruen"] #app:has(> #view-dashboard:not([hidden])) > .ki-schwebe,
  [data-theme~="nachtgruen"] #app:has(> #view-day:not([hidden])) > .ki-schwebe { display: none; }
  [data-theme~="nachtgruen"].mit-ki-knopf #app:has(> #view-dashboard:not([hidden])),
  [data-theme~="nachtgruen"].mit-ki-knopf #app:has(> #view-day:not([hidden])) { padding-bottom: 0; }
  [data-theme~="nachtgruen"].mit-ki-knopf:has(#view-dashboard:not([hidden])) #toast,
  [data-theme~="nachtgruen"].mit-ki-knopf:has(#view-day:not([hidden])) #toast { bottom: max(20px, env(safe-area-inset-bottom)); }
  [data-theme~="nachtgruen"] .chat-open-icon { border-color: transparent; background: var(--c-primary); color: var(--c-on-primary); }
  [data-theme~="nachtgruen"] .chat-open-icon:hover:not(:disabled) { border-color: transparent; background: var(--c-primary-hover); color: var(--c-on-primary); }
  [data-theme~="nachtgruen"] .chat-open-icon .icon { color: var(--c-on-primary); }
}