/* cheekee – Theme-Token und Umschalter (30.10.2026)
   Zwei unabhängige Achsen als Attribute auf <html>:
     data-modus = hell | dunkel   (fehlt → Systemeinstellung prefers-color-scheme)
     data-welt  = m | w | d       (fehlt → Markenfarben Blau + Magenta)
   /assets/theme.js setzt die Attribute vor dem ersten Zeichnen (localStorage, sonst Cookie cheekee_theme);
   die PHP-App rendert sie zusätzlich serverseitig aus demselben Cookie (View::themeAusCookie).
   Rollen: --akzent (Links, aktive Zustände) · --band (Fußleiste, Knöpfe, Linien) · --auf-band (Schrift auf dem Band)
           --form-1..3 (dekorative Formen) · --w1..--w6 (Rohwerte der gewählten Farbwelt)
   Reihenfolge der Blöcke ist Absicht: Grundfarben → dunkel → Farbwelten hell → Farbwelten dunkel. */

:root {
  color-scheme: light;
  --bg: #FFFFFF; --fg: #1d1d1f; --mute: #6b6b70; --card: #F4F6FA; --line: #E3E6EC;
  --schatten: 0 12px 40px rgba(0, 0, 0, .14);
  --blau: #3282F6; --magenta: #EA3FF7; --pink: #EF88BE; --cyan: #73FBFD;
  --akzent: #0023F5; --akzent-hover: #3282F6;
  --band: linear-gradient(90deg, #3282F6 0%, #EA3FF7 100%); --auf-band: #FFFFFF;
  --form-1: #3282F6; --form-2: #EA3FF7; --form-3: #EF88BE;
  --w1: #73FBFD; --w2: #3282F6; --w3: #0023F5; --w4: #EF88BE; --w5: #EA3FF7; --w6: #802287;
}

/* Dunkel: nach System (solange nicht ausdrücklich hell gewählt) … */
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) {
    color-scheme: dark;
    --bg: #000000; --fg: #F2F2F2; --mute: #9a9aa0; --card: #141518; --line: #26282d;
    --schatten: 0 12px 40px rgba(0, 0, 0, .65);
    --akzent: #3282F6; --akzent-hover: #73FBFD;
  }
}
/* … oder ausdrücklich gewählt */
:root[data-modus="dunkel"] {
  color-scheme: dark;
  --bg: #000000; --fg: #F2F2F2; --mute: #9a9aa0; --card: #141518; --line: #26282d;
  --schatten: 0 12px 40px rgba(0, 0, 0, .65);
  --akzent: #3282F6; --akzent-hover: #73FBFD;
}

/* Farbwelten (hell) – Werte aus Bens Spezifikation „Theme-Umschaltung auf der Webseite" */
:root[data-welt="m"] {
  --w1: #73FBFD; --w2: #3282F6; --w3: #0023F5; --w4: #1B4787; --w5: #001387; --w6: #001387;
  --akzent: #0023F5; --akzent-hover: #1B4787;
  --band: linear-gradient(90deg, #3282F6 0%, #0023F5 100%);
  --form-1: #3282F6; --form-2: #0023F5; --form-3: #73FBFD;
}
:root[data-welt="w"] {
  --w1: #EF88BE; --w2: #EE8AF8; --w3: #EA3FF7; --w4: #844D8A; --w5: #802287; --w6: #802287;
  --akzent: #802287; --akzent-hover: #EA3FF7;
  --band: linear-gradient(90deg, #EA3FF7 0%, #802287 100%);
  --form-1: #EA3FF7; --form-2: #802287; --form-3: #EF88BE;
}
/* divers = klassische Sechs-Streifen-Regenbogenflagge (Werte aus Bens angehängter SVG-Flagge) */
:root[data-welt="d"] {
  --w1: #E30613; --w2: #F18815; --w3: #FFED00; --w4: #028137; --w5: #2E57A4; --w6: #6E2381;
  --akzent: #2E57A4; --akzent-hover: #6E2381;
  --band: linear-gradient(90deg, #E30613 0 16.667%, #F18815 0 33.333%, #FFED00 0 50%, #028137 0 66.667%, #2E57A4 0 83.333%, #6E2381 0 100%);
  --form-1: #E30613; --form-2: #2E57A4; --form-3: #FFED00;
}

/* Farbwelten (dunkel): hellere Akzente auf Schwarz */
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"])[data-welt="m"] { --akzent: #3282F6; --akzent-hover: #73FBFD; }
  :root:not([data-modus="hell"])[data-welt="w"] { --akzent: #EE8AF8; --akzent-hover: #EF88BE; }
  :root:not([data-modus="hell"])[data-welt="d"] { --akzent: #F18815; --akzent-hover: #FFED00; }
}
:root[data-modus="dunkel"][data-welt="m"] { --akzent: #3282F6; --akzent-hover: #73FBFD; }
:root[data-modus="dunkel"][data-welt="w"] { --akzent: #EE8AF8; --akzent-hover: #EF88BE; }
:root[data-modus="dunkel"][data-welt="d"] { --akzent: #F18815; --akzent-hover: #FFED00; }

/* ---------- Umschalt-Knopf und Popup (werden von theme.js in .th-wrap eingesetzt) ---------- */
.th-wrap { position: relative; display: inline-block; line-height: 0; }
.th-knopf { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.th-knopf:hover, .th-knopf:focus-visible, .th-knopf[aria-expanded="true"] { border-color: var(--akzent); color: var(--akzent); outline: none; }
.th-knopf svg { width: 20px; height: 20px; }
.th-popup { position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--schatten); padding: 18px 16px 16px; z-index: 50; text-align: left; font-size: 14px; line-height: 1.3; overflow: hidden; }
.th-popup[hidden] { display: none; }
.th-popup::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--band); }
.th-titel { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin: 0 0 8px; font-weight: 600; }
.th-gruppe + .th-gruppe { margin-top: 16px; }
.th-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.th-seg button { font: inherit; font-weight: 600; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px 9px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1; }
.th-seg button svg { width: 26px; height: 26px; }
.th-seg button small { font-size: 12px; color: var(--mute); font-weight: 500; }
.th-seg button:hover, .th-seg button:focus-visible { border-color: var(--akzent-hover); outline: none; }
.th-seg button[aria-pressed="true"] { border-color: var(--akzent); color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.th-seg button[aria-pressed="true"] small { color: var(--akzent); }
.th-auto { margin-top: 8px; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--mute); cursor: pointer; text-decoration: underline; }
.th-auto:hover, .th-auto:focus-visible { color: var(--akzent); outline: none; }
.th-auto[aria-pressed="true"] { color: var(--akzent); text-decoration: none; }
.th-auto[aria-pressed="true"]::before { content: "✓ "; }