/* FREDERIX/MFE 04.10.2026 - Hell/Dunkel fuer 85-it-fehler.de, gleiche Farbwelten wie 42-it-fragen.de (Tageslicht und Nachtblau)
   <html data-design="hell|dunkel"> setzt ein kleines Skript im <head> vor dem ersten Zeichnen (build.py, site_head).
   Ohne JavaScript folgt die Seite per Media-Query dem System. Akzent der 85: Signalorange (Flugschreiber),
   im Hellen abgedunkelt (#B44700, Kontrast 5:1 auf Weiss). Die Regeln unter "Umlenkung" ersetzen fest verdrahtete Farben aus v3.css/lists.css. */

/* ---------- Dunkel: Nachtblau (Standard) ---------- */
:root {
  --night: #07111F; --panel: #0D1A2C; --panel-2: #13233A; --line: #1E3150; --text: #EEF3FA; --muted: #94A6BF;
  --sign: #0170BF; --sign-ink: #FFFFFF; --sign-hover: #0A80D6; --hl: #8CC8FF;
  --acc85: #FF7A1A; --acc85-ink: #111111; --acc85-ink2: #3A2412;
  --top-bg: rgba(7, 17, 31, .9); --util-bg: #040B15; --tools-bg: rgba(7, 17, 31, .94);
  --lead: #C5D3E6; --ghost: #2C4266; --prose: #CFDAE8;
  --mine-bg: #1F1A1A; --fix-ink: #CFF5EC; --fix-bg: rgba(61, 220, 132, .07); --fix-line: rgba(61, 220, 132, .22); --fix-b: #3DDC84;
  --sev-off: #22324B; --sev3-ink: #FF9C9C; --sev2-ink: #FFD08A; --target: rgba(140, 200, 255, .35);
  --tally-bg: #0A1626; --tally-sub: #A9B8CC;
  color-scheme: dark;
}

/* ---------- Hell: Tageslicht ---------- */
:root[data-design="hell"] {
  --night: #F4F6F9; --panel: #FFFFFF; --panel-2: #E9EEF4; --line: #D6DEE8; --text: #0E1726; --muted: #526071;
  --sign: #015FA2; --sign-ink: #FFFFFF; --sign-hover: #0170BF; --hl: #015FA2; --fx-light: #015FA2;
  --acc85: #B44700; --acc85-ink: #FFFFFF; --acc85-ink2: rgba(255, 255, 255, .85);
  --top-bg: rgba(244, 246, 249, .92); --util-bg: #E6EBF2; --tools-bg: rgba(244, 246, 249, .95);
  --lead: #33404F; --ghost: #B9C4D2; --prose: #2B3644;
  --mine-bg: #FFF3EA; --fix-ink: #12352F; --fix-bg: #EEF7F5; --fix-line: #BFE0D8; --fix-b: #0B5F56;
  --sev-off: #D6DEE8; --sev3-ink: #B42318; --sev2-ink: #8A5300; --target: rgba(1, 95, 162, .25);
  --tally-bg: #FFFFFF; --tally-sub: #526071;
  color-scheme: light;
}
:root[data-design="hell"] .brand .logo-dark { display: none; }
:root[data-design="hell"] .brand .logo-light { display: block; }
:root[data-design="hell"] .design-btn .ic-moon { display: block; }
:root[data-design="hell"] .design-btn .ic-sun { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-design]) {
  --night: #F4F6F9; --panel: #FFFFFF; --panel-2: #E9EEF4; --line: #D6DEE8; --text: #0E1726; --muted: #526071;
  --sign: #015FA2; --sign-ink: #FFFFFF; --sign-hover: #0170BF; --hl: #015FA2; --fx-light: #015FA2;
  --acc85: #B44700; --acc85-ink: #FFFFFF; --acc85-ink2: rgba(255, 255, 255, .85);
  --top-bg: rgba(244, 246, 249, .92); --util-bg: #E6EBF2; --tools-bg: rgba(244, 246, 249, .95);
  --lead: #33404F; --ghost: #B9C4D2; --prose: #2B3644;
  --mine-bg: #FFF3EA; --fix-ink: #12352F; --fix-bg: #EEF7F5; --fix-line: #BFE0D8; --fix-b: #0B5F56;
  --sev-off: #D6DEE8; --sev3-ink: #B42318; --sev2-ink: #8A5300; --target: rgba(1, 95, 162, .25);
  --tally-bg: #FFFFFF; --tally-sub: #526071;
    color-scheme: light;
  }
  :root:not([data-design]) .brand .logo-dark { display: none; }
  :root:not([data-design]) .brand .logo-light { display: block; }
  :root:not([data-design]) .design-btn .ic-moon { display: block; }
  :root:not([data-design]) .design-btn .ic-sun { display: none; }
}

/* Logo je nach Grund: weisser Schriftzug auf dunkel, schwarzer auf hell */
.brand .logo-light { display: none; }

/* ---------- Umlenkung der fest verdrahteten Farben (v3.css) ---------- */
.signs .sign:hover, .btn-sign:hover { background: var(--sign-hover); }
.brand .term b, .foot .bye .y, .prose h2 { color: var(--hl); }
.kicker { color: var(--hl); }
.kicker::before { background: var(--hl); }
.foot a:hover, .util a:hover, .share:hover { color: var(--hl); }
:focus-visible { outline-color: var(--hl); }
.top { background: var(--top-bg); }
.util { background: var(--util-bg); }
.tools { background: var(--tools-bg); }
.btn-ghost { border-color: var(--ghost); }
.prose { color: var(--prose); }
.btn-fx { background: var(--sign); color: var(--sign-ink); }
.btn-fx:hover { background: var(--sign-hover); }

/* ---------- Umlenkung lists.css (85 IT-Fehler) ---------- */
.p85 { --acc: var(--acc85); }
.l-lead, .err .prob { color: var(--lead); }
.chip, .mine { border-color: var(--ghost); }
.chip[aria-pressed="true"], .chip.on, .mine[aria-pressed="true"] { color: var(--acc85-ink); }
.chip[aria-pressed="true"] small, .chip.on small { color: var(--acc85-ink2); }
.err.is-mine { background: var(--mine-bg); }
.err:target { box-shadow: 0 0 0 3px var(--target); }
.err .fix { color: var(--fix-ink); background: var(--fix-bg); border-color: var(--fix-line); }
.err .fix b { color: var(--fix-b); }
.sev i { background: var(--sev-off); }
.sev3 .sev span { color: var(--sev3-ink); }
.sev2 .sev span { color: var(--sev2-ink); }
.tally { background: var(--tally-bg); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .35); }
.t-s { color: var(--tally-sub); }

/* ---------- Umschalter Hell/Dunkel ---------- */
.design-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 6px; border: 1.5px solid var(--ghost); background: transparent; color: var(--text); cursor: pointer; }
.design-btn:hover { border-color: var(--acc); }
.design-btn svg { width: 20px; height: 20px; }
.design-btn .ic-moon { display: none; }
@media (max-width: 1240px) { .design-btn { margin-left: auto; } .design-btn + .btn-fx + .menu-btn, .design-btn ~ .menu-btn { margin-left: 0; } }
@media print { .design-btn { display: none !important; } }