/* FREDERIX/MFE 04.10.2026 - Hell/Dunkel fuer 42-it-fragen.de (Wunsch Auftraggeber: nur Tageslicht und Nachtblau)
   <html data-design="hell|dunkel"> setzt ein kleines Skript im <head> vor dem ersten Zeichnen:
   eigene Wahl (localStorage design42) > ?design=hell|dunkel > Systemeinstellung. Ohne JavaScript folgt die Seite per Media-Query dem System.
   Umschalter: Knopf im Kopf (design.js). Die Regeln unter "Umlenkung" ersetzen die fest verdrahteten 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; --acc42: #7CF7E4;
  --core1: #D6ECFF; --core2: #4DA3EE; --core3: #0B4F8C; --core-ink: #04111F; --glow: rgba(77, 163, 238, .45);
  --ring1: rgba(124, 247, 228, .3); --ring2: rgba(140, 200, 255, .35); --ring3: rgba(1, 112, 191, .55);
  --moon1: #7CF7E4; --moon2: #8CC8FF; --moon3: #FFFFFF;
  --top-bg: rgba(7, 17, 31, .9); --util-bg: #040B15; --tools-bg: rgba(7, 17, 31, .94);
  --space-bg: #050C18; --space-a: rgba(77, 163, 238, .16); --space-b: rgba(124, 247, 228, .10); --quote-glow: rgba(77, 163, 238, .10);
  --lead: #C5D3E6; --good: #A9D6F5; --ghost: #2C4266; --prose: #CFDAE8;
  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; --acc42: #0B7A6E; --fx-light: #015FA2;
  --core1: #D3E8FB; --core2: #2F80CB; --core3: #014A80; --core-ink: #FFFFFF; --glow: rgba(1, 95, 162, .28);
  --ring1: rgba(11, 122, 110, .4); --ring2: rgba(1, 95, 162, .32); --ring3: rgba(1, 95, 162, .5);
  --moon1: #0B7A6E; --moon2: #015FA2; --moon3: #8AA0B8;
  --top-bg: rgba(244, 246, 249, .92); --util-bg: #E6EBF2; --tools-bg: rgba(244, 246, 249, .95);
  --space-bg: #EDF2F8; --space-a: rgba(1, 95, 162, .10); --space-b: rgba(11, 122, 110, .08); --quote-glow: rgba(1, 95, 162, .06);
  --lead: #33404F; --good: #0B5F56; --ghost: #B9C4D2; --prose: #2B3644;
  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"] .stars { filter: invert(1); opacity: .28; }
:root[data-design="hell"] .core42 svg { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); }
:root[data-design="hell"] .fp-meta input[type="date"] { color-scheme: light; }
: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; --acc42: #0B7A6E; --fx-light: #015FA2;
  --core1: #D3E8FB; --core2: #2F80CB; --core3: #014A80; --core-ink: #FFFFFF; --glow: rgba(1, 95, 162, .28);
  --ring1: rgba(11, 122, 110, .4); --ring2: rgba(1, 95, 162, .32); --ring3: rgba(1, 95, 162, .5);
  --moon1: #0B7A6E; --moon2: #015FA2; --moon3: #8AA0B8;
  --top-bg: rgba(244, 246, 249, .92); --util-bg: #E6EBF2; --tools-bg: rgba(244, 246, 249, .95);
  --space-bg: #EDF2F8; --space-a: rgba(1, 95, 162, .10); --space-b: rgba(11, 122, 110, .08); --quote-glow: rgba(1, 95, 162, .06);
  --lead: #33404F; --good: #0B5F56; --ghost: #B9C4D2; --prose: #2B3644;
    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]) .stars { filter: invert(1); opacity: .28; }
  :root:not([data-design]) .core42 svg { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); }
  :root:not([data-design]) .fp-meta input[type="date"] { color-scheme: light; }
  :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 ---------- */
.p42 { --acc: var(--acc42); }
.signs .sign:hover, .btn-sign:hover { background: var(--sign-hover); }
.brand .term b, .l-hero h1 .t, .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); }
.space { background: radial-gradient(70% 70% at 80% 30%, var(--space-a), transparent 60%), radial-gradient(60% 60% at 0% 100%, var(--space-b), transparent 60%), var(--space-bg); }
.quote { background: radial-gradient(60% 80% at 15% 50%, var(--quote-glow), transparent 70%); }
.core42 { color: var(--core-ink); background: radial-gradient(circle at 35% 30%, var(--core1), var(--core2) 45%, var(--core3)); box-shadow: 0 0 60px var(--glow); }
.orbit .ring { border-color: var(--ring1); }
.orbit .r2 { border-color: var(--ring2); }
.orbit .r3 { border-color: var(--ring3); }
.m1 { background: var(--moon1); box-shadow: 0 0 12px var(--moon1); }
.m2 { background: var(--moon2); box-shadow: 0 0 12px var(--moon2); }
.m3 { background: var(--moon3); }
.l-lead { color: var(--lead); }
.qa .good { color: var(--good); }
.btn-ghost, .qa-act button { border-color: var(--ghost); }
.meter { background: var(--panel-2); }
.prose { color: var(--prose); }
.prose h3, .prose h4 { color: var(--text); }
.btn-fx { background: var(--sign); color: var(--sign-ink); }
.btn-fx:hover { background: var(--sign-hover); }

/* ---------- 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; } }