/* TPP Cockpit: Farben der hellen und dunklen Ansicht.
   Alle Farben des Portals stehen ausschließlich hier. Neue Farben nur als Variable ergänzen, nie fest im Code.
   Die hellen Werte sind ein Vorschlag und werden noch von Ken freigegeben. */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1F13;
  --sidebar: #071710;
  --card: #10281A;
  --inner: #0D2316;
  --chip: #1C3A26;
  --track: #24402C;
  --text: #F1F5EE;
  --text-2: #B4C4B7;
  --muted: #8FA493;
  --accent-fill: #B5FA87;
  --on-accent: #0B1F13;
  --accent-text: #B5FA87;
  --accent-line: #B5FA87;
  --line: rgba(181,250,135,0.22);
  --line-soft: rgba(181,250,135,0.10);
  --line-strong: rgba(181,250,135,0.55);   /* Rahmen von Pillen und Eingabefeldern */
  --warn: #FF9C7A;
  --chart-1: #B5FA87;
  --chart-2: #8FA493;
  --chart-3: #4E6B55;
  --chart-4: #2E5238;
  --closed: #4A9A2A;                       /* erreichte Forecast-Stufen */
  --band: #2D6A4F;                         /* Fortschritt seit Vorwoche */
  --shadow: rgba(0,0,0,0.35);
  --shadow-strong: rgba(0,0,0,0.45);
  --overlay: rgba(0,10,5,0.72);            /* Abdunklung hinter Dialogen */
  --label: #6F8774;                        /* Abschnittsbeschriftungen der Seitenleiste */
  --side-text: #C9D3CB;
  --pop: #0F2519;                          /* Fenster, Suchergebnisse */
  --track-2: #2E5238;
  --inv-bg: #F1F5EE;
  --inv-text: #0B1F13;
  --accent-rgb: 181,250,135;               /* für rgba(var(--accent-rgb), x) */
  --logo-dark: inline-block;
  --logo-light: none;
  /* Designsystem Paket 1 (06.11.2026): Rahmen von Bedienelementen mindestens 3 zu 1, Kante des Lime-Knopfs, Schatten in zwei Stufen */
  --control-line: rgba(181,250,135,0.42);
  --accent-soft-line: rgba(181,250,135,0.30);
  --accent-edge: #B5FA87;
  --shadow-karte: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 28px rgba(0,0,0,0.22);
  --shadow-pop: 0 18px 44px rgba(0,0,0,0.45);
  --shadow-hover: 0 1px 0 rgba(255,255,255,0.04) inset, 0 16px 36px rgba(0,0,0,0.30);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #EDF0E8;
  --sidebar: #E6EAE1;
  --card: #FFFFFF;
  --inner: #F2F5EF;
  --chip: #E4EBE0;
  --track: #D8E0D4;
  --text: #0B1F13;
  --text-2: #33463A;
  --muted: #556859;
  --accent-fill: #B5FA87;
  --on-accent: #0B1F13;
  --accent-text: #276A12;
  --accent-line: #4E9E2A;
  --line: rgba(63,143,34,0.18);
  --line-soft: rgba(11,31,19,0.06);
  --line-strong: #788E7B;
  --warn: #B4400F;
  --chart-1: #2F7A16;
  --chart-2: #7FBF5A;
  --chart-3: #9AAD9E;
  --chart-4: #C9D6CC;
  --closed: #5FA83A;
  --band: #9CCB7E;
  --shadow: rgba(11,31,19,0.10);
  --shadow-strong: rgba(11,31,19,0.16);
  --overlay: rgba(11,31,19,0.35);
  --label: #566859;
  --side-text: #33463A;
  --pop: #FFFFFF;
  --track-2: #B9C7BC;
  --inv-bg: #0B1F13;
  --inv-text: #F5F6F1;
  --accent-rgb: 63,143,34;
  --logo-dark: none;
  --logo-light: inline-block;
  --control-line: #788E7B;
  --accent-soft-line: rgba(63,143,34,0.30);
  --accent-edge: #4E9E2A;
  --shadow-karte: 0 1px 2px rgba(11,31,19,0.05), 0 8px 24px rgba(11,31,19,0.06);
  --shadow-pop: 0 18px 44px rgba(11,31,19,0.16);
  --shadow-hover: 0 2px 4px rgba(11,31,19,0.06), 0 14px 32px rgba(11,31,19,0.10);
}

/* Maße für alle Seiten (Paket 1, 06.11.2026): sieben Schriftgrößen, vier Rundungen, eine Übergangszeit */
:root {
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-28: 28px; --fs-40: 40px;
  --r-feld: 10px; --r-kachel: 16px; --r-karte: 24px; --r-pille: 999px;
  --dauer: 150ms;
}

/* Bisherige Namen der Seiten zeigen auf die neuen Variablen */
:root {
  --g01: var(--bg);
  --white: var(--text);
  --soft: var(--text-2);
  --row: var(--card);
  --row2: var(--inner);
  --head: var(--chip);
  --edge: var(--line);
  --ink: var(--text);
  --paper1: var(--card);
  --paper2: var(--inner);
  --lime: var(--accent-line);
}

/* Logo passend zur Ansicht */
img.logo-dark { display: var(--logo-dark) !important; }
img.logo-light { display: var(--logo-light) !important; }

/* Schalter Hell und Dunkel */
.theme-switch { display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line-strong);
  border-radius:999px; background:var(--inner); font:600 12.5px var(--sans, "Work Sans", sans-serif); }
.theme-switch button { -webkit-appearance:none; appearance:none; border:0; background:transparent; color:var(--text-2);
  font:inherit; padding:6px 12px; border-radius:999px; cursor:pointer; line-height:1.2; }
.theme-switch button[aria-pressed="true"] { background:var(--accent-fill); color:var(--on-accent); }
.theme-switch button:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }