/* Design-System für Peters Board (Day-Check) und das Feedback-Tool (23.10.2026). Regeln:
   design-system.md daneben. Das UPP-Board hat eine eigene, gleich gebaute Datei (A9).
   Eine Quelle, vier Varianten: <html data-produkt="board|tool" data-thema="dunkel|hell">,
   „board" heißt hier Day-Check.
   Seiten benutzen nur die Rollen-Variablen unten, nie Farbwerte. */

/* --- Schrift: Oxygen lokal, kein CDN --- */
@font-face{ font-family:"Oxygen"; font-style:normal; font-weight:300; font-display:swap;
            src:url("fonts/oxygen-300.woff2") format("woff2"); }
@font-face{ font-family:"Oxygen"; font-style:normal; font-weight:400; font-display:swap;
            src:url("fonts/oxygen-400.woff2") format("woff2"); }
@font-face{ font-family:"Oxygen"; font-style:normal; font-weight:700; font-display:swap;
            src:url("fonts/oxygen-700.woff2") format("woff2"); }

/* --- Gemeinsam: Typo, Abstände, Radien (gleich in allen Varianten) --- */
:root{
  --schrift:"Oxygen",system-ui,"Segoe UI",Roboto,sans-serif;
  --schrift-code:ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* Schriftstufen: Text 15 als Grundmaß, darüber drei Titel, darunter drei Kleinstufen */
  --gr-titel-1:32px;   /* Seitentitel */
  --gr-titel-2:24px;   /* Bereich / Karte */
  --gr-titel-3:19px;   /* Untergruppe, Karte in Liste */
  --gr-text:15px;      /* Fließtext, Listenzeilen */
  --gr-klein:13px;     /* Nebeninfo, Formulare, Tabellen */
  --gr-mini:12px;      /* Knöpfe, Chips, Fristen */
  --gr-marke:11px;     /* Großbuchstaben-Marken, Nummern */
  --zeilenhoehe:1.55;

  /* Abstände: 4er-Raster */
  --ab-1:4px; --ab-2:8px; --ab-3:12px; --ab-4:16px; --ab-5:24px; --ab-6:32px; --ab-7:48px;

  --radius-s:6px; --radius-m:8px; --radius-l:14px; --radius-rund:999px;
  --kante:3px;         /* Orientierungskante links an Gruppen und Aufgaben */
  --kante-titel:5px;   /* Kante an Karten- und Bereichstiteln */
  --breite-inhalt:900px;
}

/* --- Board · dunkel (Bestand bis 23.10.2026, Werte unverändert) --- */
:root,
[data-produkt="board"][data-thema="dunkel"]{
  color-scheme:dark;
  --grund:#211b26; --grund-2:#1a151e;
  --flaeche:#322a3a; --flaeche-2:#3a3143; --flaeche-hervor:#453f4c; --flaeche-hervor-2:#3d3746;
  --hauch:rgba(255,255,255,.04); --hauch-2:rgba(255,255,255,.07); --feld:rgba(0,0,0,.22);
  --kopf:rgba(28,22,32,.92); --kopf-text:var(--text-leise);
  --text:#efe9f2; --text-leise:#a99fb3; --text-auf-akzent:#211b26;
  --linie:rgba(255,255,255,.09); --linie-stark:rgba(255,255,255,.18);
  --akzent:#f0bf57; --akzent-text:#f0bf57; --akzent-hover:#f4cd77;
  --akzent-hauch:rgba(240,191,87,.08); --akzent-flaeche:rgba(240,191,87,.14); --akzent-rand:rgba(240,191,87,.22);
  --warn:#e46a5f; --warn-stark:#cf3425; --warn-flaeche:rgba(207,52,37,.12);
  --ok:#8fbf5f; --ok-stark:#466624; --ok-flaeche:rgba(143,191,95,.14);
  --hinweis:#f0b25a; --hinweis-stark:#d97706; --hinweis-flaeche:rgba(217,119,6,.14);
  --privat:#b7a9d0; --privat-flaeche:rgba(183,169,208,.14);
  --prio1:#a889e0; --prio2:#f0bf57; --prio3:#8fbf5f;
  --schatten:0 1px 2px rgba(0,0,0,.25); --schatten-hoch:0 10px 38px rgba(0,0,0,.55);
  --abdunkeln:rgba(0,0,0,.55);
}

/* --- Board · hell: dieselbe Welt bei Tageslicht. Gold bleibt Markierung,
       als Schrift wird es zu Ocker, sonst wäre es auf Weiß nicht lesbar. --- */
[data-produkt="board"][data-thema="hell"]{
  color-scheme:light;
  --grund:#f5f1f7; --grund-2:#ece6f0;
  --flaeche:#ffffff; --flaeche-2:#f3eff6; --flaeche-hervor:#fbf6ea; --flaeche-hervor-2:#f8f0dc;
  --hauch:rgba(74,62,83,.04); --hauch-2:rgba(74,62,83,.07); --feld:#ffffff;
  --kopf:rgba(255,255,255,.92); --kopf-text:var(--text-leise);
  --text:#2a2230; --text-leise:#6a5f73; --text-auf-akzent:#2a2230;
  --linie:rgba(74,62,83,.13); --linie-stark:rgba(74,62,83,.26);
  --akzent:#e9b23f; --akzent-text:#8a5c00; --akzent-hover:#f0bf57;
  --akzent-hauch:rgba(240,191,87,.12); --akzent-flaeche:rgba(240,191,87,.24); --akzent-rand:rgba(200,150,40,.35);
  --warn:#b42a1d; --warn-stark:#cf3425; --warn-flaeche:rgba(207,52,37,.09);
  --ok:#3f6420; --ok-stark:#466624; --ok-flaeche:rgba(70,102,36,.11);
  --hinweis:#9a4a06; --hinweis-stark:#d97706; --hinweis-flaeche:#fdf3e4;
  --privat:#6c5797; --privat-flaeche:rgba(108,87,151,.11);
  --prio1:#8a63d2; --prio2:#e0a52c; --prio3:#5f8f35;
  --schatten:0 1px 3px rgba(42,34,48,.09); --schatten-hoch:0 10px 34px rgba(42,34,48,.20);
  --abdunkeln:rgba(42,34,48,.40);
}

/* --- Tool · hell (Vorgabe): Welt des UPP-Boards (Peter, 23.10.2026) — heller Grund,
       weiße Flächen, Blau als Leitfarbe, Graphit-Kopfleiste. Die Kopfleiste unterscheidet
       es vom hellen UPP-Board, dessen Kopf im Grund liegt. Systemschrift wie das UPP-Board. --- */
[data-produkt="tool"][data-thema="hell"]{
  color-scheme:light;
  --schrift:-apple-system,"Segoe UI",system-ui,sans-serif;
  --grund:#f2f3f5; --grund-2:#f2f3f5;
  --flaeche:#ffffff; --flaeche-2:#eceef1; --flaeche-hervor:#eef3f9; --flaeche-hervor-2:#eef3f9;
  --hauch:rgba(26,29,34,.03); --hauch-2:rgba(26,29,34,.06); --feld:#ffffff;
  --kopf:#1b1f25; --kopf-text:#e8eaee; --kopf-linie:rgba(255,255,255,.24); --kopf-hauch:rgba(255,255,255,.08);
  --kopf-aktiv:#ffffff; --kopf-aktiv-text:#1a1d22;
  --text:#1a1d22; --text-leise:#59616c; --text-auf-akzent:#ffffff;
  --linie:#dde1e6; --linie-stark:#c3c9d0;
  --akzent:#285b8c; --akzent-text:#285b8c; --akzent-hover:#214c76;
  --akzent-hauch:rgba(40,91,140,.05); --akzent-flaeche:#e3edf7; --akzent-rand:#b6cbe1;
  --warn:#b3261e; --warn-stark:#cf3425; --warn-flaeche:#fdf0ee;
  --ok:#2f7a4f; --ok-stark:#2f8a57; --ok-flaeche:#eef7f0;
  --hinweis:#9a4a06; --hinweis-stark:#d97706; --hinweis-flaeche:#fdf3e4;
  --privat:#6c5797; --privat-flaeche:#f1edf7;
  --prio1:#8a63d2; --prio2:#d9a12f; --prio3:#5f8f35;
  --schatten:0 1px 3px rgba(20,22,26,.07); --schatten-hoch:0 8px 24px rgba(20,22,26,.16);
  --abdunkeln:rgba(20,22,26,.45);
}

/* --- Tool · dunkel: durchgehend dunkel, auch die Flächen — anders als das dunkle UPP-Board
       mit seinen hellen Karten. Werte aus dem UPP-Board (Grund, Linie, Blau). --- */
[data-produkt="tool"][data-thema="dunkel"]{
  color-scheme:dark;
  --schrift:-apple-system,"Segoe UI",system-ui,sans-serif;
  --grund:#14161a; --grund-2:#14161a;
  --flaeche:#1b1f25; --flaeche-2:#232830; --flaeche-hervor:#1a2533; --flaeche-hervor-2:#1a2533;
  --hauch:rgba(255,255,255,.03); --hauch-2:rgba(255,255,255,.06); --feld:#14161a;
  --kopf:#0e1013; --kopf-text:#e8eaee; --kopf-linie:rgba(255,255,255,.20); --kopf-hauch:rgba(255,255,255,.07);
  --kopf-aktiv:#e8eaee; --kopf-aktiv-text:#14161a;
  --text:#e8eaee; --text-leise:#9aa2ad; --text-auf-akzent:#10141a;
  --linie:#2e343d; --linie-stark:#3e4651;
  --akzent:#7aa9d6; --akzent-text:#8db8e0; --akzent-hover:#93bbe0;
  --akzent-hauch:rgba(122,169,214,.06); --akzent-flaeche:rgba(122,169,214,.14); --akzent-rand:rgba(122,169,214,.35);
  --warn:#e0857a; --warn-stark:#cf3425; --warn-flaeche:rgba(224,133,122,.12);
  --ok:#7fc29c; --ok-stark:#2f8a57; --ok-flaeche:rgba(127,194,156,.12);
  --hinweis:#f0b25a; --hinweis-stark:#d97706; --hinweis-flaeche:rgba(217,119,6,.14);
  --privat:#b9a3d6; --privat-flaeche:rgba(185,163,214,.12);
  --prio1:#a889e0; --prio2:#f0bf57; --prio3:#8fbf5f;
  --schatten:0 1px 2px rgba(0,0,0,.35); --schatten-hoch:0 8px 24px rgba(0,0,0,.45);
  --abdunkeln:rgba(0,0,0,.65);
}

/* --- Browserflächen gehören mit zum System --- */
::selection{ background:var(--akzent-flaeche); color:var(--text); }
:focus-visible{ outline:2px solid var(--akzent); outline-offset:2px; }
html{ scrollbar-color:var(--linie-stark) transparent; }

/* --- Umschalter Hell/Dunkel (thema.js). Sitzt in der Kopfleiste rechts. --- */
.ds-thema{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:var(--gr-mini);
           line-height:1.2; padding:5px 10px; border-radius:var(--radius-m); cursor:pointer;
           border:1px solid var(--linie-stark); background:transparent; color:inherit; white-space:nowrap; }
.ds-thema:hover{ border-color:var(--akzent); }
.ds-thema svg{ width:14px; height:14px; flex:none; }
.ds-thema__hell, .ds-thema__dunkel{ align-items:center; gap:6px; }
.ds-thema .ds-thema__hell, [data-thema="hell"] .ds-thema .ds-thema__dunkel{ display:inline-flex; }
.ds-thema .ds-thema__dunkel, [data-thema="hell"] .ds-thema .ds-thema__hell{ display:none; }