/* ═══════════════════════════════════════════════════════════════════════
   CLUBZ & BEATZ — CLUB-PANEL: DESIGN-TOKENS

   🔴 DIES IST DIE EINZIGE DATEI IM PANEL, IN DER FARBWERTE, SCHRIFTNAMEN
      UND ABSTANDS-LITERALE STEHEN DÜRFEN.

   Jede andere Panel-Datei (panel.css, alle Komponenten) referenziert
   ausschließlich `var(--...)`. Geprüft wird das vor jedem "fertig" mit:

     node scripts/check-panel-tokens.js

   🔴 In dieser Datei NIEMALS einen Glob mit doppeltem Stern in einen
   Kommentar schreiben. Die Zeichenfolge Stern-Schrägstrich darin beendet den
   CSS-Kommentar vorzeitig; der Rest wird als CSS geparst, und der Parser
   verwirft die unmittelbar folgende Regel gleich mit. Genau so ist hier am
   05.08. die @font-face-Regel für Hanken Grotesk verschwunden — ohne
   Fehlermeldung, ohne dass im Quelltext etwas fehlte. Sichtbar wurde es erst
   daran, dass der Fließtext im Browser in Serif gerendert wurde.

   Die Werte sind 1:1 aus `basscamp-app/constants/theme.ts` übernommen
   (Palette / LightTheme / DarkTheme / Spacing / Radius / Typography).
   Nicht raten, nicht "ungefähr" — wenn die App ihre Palette ändert, wird
   sie HIER nachgezogen und nirgends sonst.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Schriften ────────────────────────────────────────────────────────────
   Boldonse = Titel (display), Hanken Grotesk = alles andere.

   🔴 Hanken wird EINMAL geladen, nicht viermal: hanken-400/500/600/700.woff2
   in der Landing sind byte-identisch (md5 geprüft 05.08.) — es ist eine
   Variable Font. Vier @font-face-Regeln auf dieselbe Datei kosten drei
   zusätzliche Requests und ~104 KB, ohne dass ein einziges Zeichen anders
   aussieht. `font-weight: 100 900` gibt der Variable Font ihren echten
   Bereich zurück.

   font-display:swap — der Betreiber liest sofort, statt auf die Schrift zu
   warten. Bei einem Dashboard, das ohnehin Daten nachlädt, ist unsichtbarer
   Text die schlechtere Wahl.                                              */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/hanken.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Boldonse';
  src: url('fonts/boldonse.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ── Schrift-Tokens ─────────────────────────────────────────────────── */
  --font-display: 'Boldonse', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Boldonse braucht ≥1.95× Zeilenhöhe, sonst schneidet die Versalien-
     Oberkante ab (derselbe Grund wie `titleFont()` in der App). Im Web ist
     das seltener sichtbar als auf iOS, aber die Metrik der Schrift ist
     dieselbe — also dieselbe Regel. */
  --line-display: 1.95;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 26px;

  /* ── Abstände ───────────────────────────────────────────────────────────
     Basis ist `Spacing` aus theme.ts (4/8/12/16/20/24/32).

     Die drei Zwischenstufen (6/10/14) hat die App nicht, das Panel braucht
     sie aber: eine Dichte, die am Handy stimmt, wirkt auf einem 1080px
     breiten Dashboard luftig-verloren. Sie sind bewusst als eigene Tokens
     benannt statt als Literale verstreut — sonst stehen am Ende doch wieder
     Zahlen in den Komponenten.                                            */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-xs-plus: 6px;
  --space-sm: 8px;
  --space-sm-plus: 10px;
  --space-md: 12px;
  --space-md-plus: 14px;
  --space-lg: 16px;
  --space-lg-plus: 18px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;

  /* ── Radien (Radius aus theme.ts) ───────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* ── Feste Maße ─────────────────────────────────────────────────────── */
  /* 🔴 51px/16px: dieselbe Höhe und Schriftgröße für Eingabe- UND
     Auswahlfelder. Vorher standen 46px gegen 51px nebeneinander — das sieht
     nach Versehen aus. Die 16px verhindern zusätzlich den iOS-Zoom beim
     Antippen eines Feldes. */
  --control-height: 51px;
  --control-font: 16px;
  /* Touch-Mindestmaß (WCAG 2.1 AA / Apple HIG). Jede Schaltfläche, die der
     Betreiber am Handy trifft, muss das erreichen. */
  --tap-min: 44px;
  --page-max: 1080px;
  /* Breite der Seitenleiste (Design-Vorlage 20.08.2026). Als Token, weil drei
     Regeln sie brauchen: die Leiste selbst, die eingerückte Kopfzeile und der
     eingerückte Inhalt. Ein Wert, der an drei Stellen gepflegt werden müsste,
     wandert beim ersten Nachjustieren auseinander. */
  --sidebar-w: 264px;

  /* ── Bewegung ───────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* ── Ebenen ─────────────────────────────────────────────────────────── */
  /* Aufklappende Auswahlfelder liegen ueber dem Formular, aber UNTER der
     Kopfzeile — sonst verdeckt eine offene Liste den Venue-Wechsler. */
  --z-aufklapp: 18;
  --z-sticky: 19;
  --z-topbar: 20;
  --z-overlay: 60;
  --z-toast: 80;
}

/* ═══════════════════════════════════════════════════════════════════════
   FARBEN — Dark ist der Standard.

   Die App ist durchgehend dunkel, das Panel folgt ihr. Light existiert,
   weil Betreiber ihr Dashboard auch mal in einer hellen Büroumgebung
   öffnen — und weil `LightTheme` in der App bereits gepflegt ist, also
   keine erfundene zweite Palette entsteht.

   Umschaltung in drei Stufen, absichtlich in dieser Reihenfolge:
     1. `:root`               → Dark als Vorgabe, ohne jede Bedingung
     2. `prefers-color-scheme` → System-Einstellung des Betreibers
     3. `[data-theme]`        → seine eigene Wahl im Panel, schlägt beides

   🔴 Stufe 3 MUSS in beide Richtungen gewinnen. Ein Betreiber mit hellem
   System, der im Panel bewusst Dark wählt, bekommt sonst beim nächsten
   Laden wieder Hell — und hält die Einstellung für kaputt.
   ═══════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  /* Flächen.
     🔴 ABWEICHUNG VON DER APP-PALETTE, bewusst getroffen (Fabi 18.08.2026:
     "es ist allgemein alles zu dunkel"). Die App nutzt deep #161616 /
     surface1 #1F1F1F — auf einem Telefon, das man in der Hand hält und in dem
     ein Bild oder ein Video den Kontrast trägt, funktioniert das. Ein
     Dashboard besteht dagegen fast nur aus Flächen, die sich voneinander
     abheben müssen: bei 9 Prozentpunkten Helligkeitsunterschied verschwimmen
     Karte und Grund auf einem Monitor zu EINER Fläche.

     Der Grund geht tiefer (#0D0D0F), die Karten kommen HÖHER (#1A1A1D) — der
     Abstand verdoppelt sich, ohne dass es heller wirkt. Ein Hauch Blau in den
     Grautönen, weil neutrales Grau auf Monitoren stumpf wirkt.
     Die Markenfarben bleiben unangetastet. */
  --bg: #0F1113;
  --surface-1: #1A1D1F;
  --surface-2: #232629;
  --surface-3: #2C3033;

  /* Text (DarkTheme: text / muted / muted2) */
  --text: #FFFFFF;
  --text-muted: #B5B0AC;
  --text-subtle: #918D8A;

  /* Akzent (Brand: ember / flame / orangeDark) */
  /* Marken-Orange (ember / flame / orangeDark) — das Panel bleibt bei der
     Markenfarbe, uebernommen wird aus der Design-Vorlage nur die FORM:
     Verlaeufe, Schein und Flaechen (siehe --accent-gradient ff.). */
  --accent: #FF7800;
  --accent-hover: #FF9A2E;
  --accent-dark: #D96400;
  /* Orange als TEXT auf dunklem Grund (~6:1 auf #0F1113). Im hellen Schema
     zwingend dunkler, siehe dort. */
  --accent-text: #FF7800;
  /* Im Dunkelmodus traegt das Orange selbst — kein Ersatz noetig. */
  --accent-stark: var(--accent);
  /* Kontrastfarbe AUF Orange-Flaechen: Schwarz auf #FF7800 ~8:1, Weiss ~2.6:1. */
  --on-accent: #161616;

  /* ── Verlaeufe (Design-Vorlage 20.08.2026) ───────────────────────────────
     🔴 Gehoeren hierher, nicht in panel.css: `check-panel-tokens.js` verbietet
     Farbwerte ausserhalb dieser Datei, und ein Verlauf ist nichts anderes als
     mehrere Farbwerte. So bleibt auch der Rueckbau an EINER Stelle.

     Der Verlauf laeuft von flame (hell) ueber ember nach orangeDark: die
     Vorlage setzt ihre Flaechen ebenso von hell nach dunkel, das gibt dem
     Knopf Tiefe, ohne dass er leuchtet. */
  --accent-gradient: linear-gradient(135deg, #FF9A2E 0%, #FF7800 55%, #D96400 100%);
  /* Werbe-/Verkaufsflaeche: dunkler Grund, aus dem die Marke von unten links
     heraufglimmt — in der Vorlage traegt genau diese Flaeche den Preis. */
  --accent-surface-gradient:
    radial-gradient(120% 90% at 12% 108%, rgba(255, 154, 46, 0.55) 0%, rgba(255, 120, 0, 0.22) 38%, rgba(255, 120, 0, 0) 72%),
    linear-gradient(160deg, #241708 0%, #16110D 62%);
  /* Schein um das aktive Element. Bewusst weich und knapp: ein harter Schein
     wirkt wie ein Fehler, kein Zustand. */
  --accent-glow: 0 0 0 1px rgba(255, 120, 0, 0.35), 0 6px 22px rgba(255, 120, 0, 0.28);
  --pro-spalte: rgba(255, 120, 0, 0.05);
  /* Hintergrund der Marktmessung: naechtliche Clublandschaft Deutschlands.
     Erzeugt am 22.08.2026, 1600 px / 69 KB. */
  --szene-bild: url('/venue-assets/bilder/szene-deutschland.jpg');
  /* Dunkler Schleier darueber — ohne ihn ist weisser Text auf den hellen
     Lichtpunkten unlesbar. */
  --szene-schleier: linear-gradient(105deg, rgba(12, 12, 12, 0.94) 0%,
    rgba(12, 12, 12, 0.82) 38%, rgba(12, 12, 12, 0.55) 100%);
  --lage-glanz:
    radial-gradient(120% 120% at 0% 100%, rgba(255, 154, 46, 0.16) 0%,
      rgba(255, 120, 0, 0.05) 42%, rgba(255, 120, 0, 0) 72%);
  --kurve-schein: drop-shadow(0 2px 10px rgba(255, 120, 0, 0.45));
  --delta-rand: rgba(255, 120, 0, 0.35);
  /* Flaeche unter einer Verlaufskurve (Sparkline). */
  --chart-area-gradient: linear-gradient(180deg, rgba(255, 120, 0, 0.45) 0%, rgba(255, 120, 0, 0.06) 70%, rgba(255, 120, 0, 0) 100%);
  /* Abstufungen fuer mehrteilige Diagramme (Donut, gestapelte Balken).
     Vier Stufen von hell nach dunkel — dieselbe Familie, damit ein Diagramm
     als EIN Ding gelesen wird und nicht als vier Signale. */
  --chart-1: #FFC26B;
  --chart-2: #FF9A2E;
  --chart-3: #FF7800;
  --chart-4: #B85200;

  /* 🔴 Deutlich hellere Kante als zuvor (0.10). Im Dunkelmodus ist ein
     schwarzer Schatten unter einer dunklen Karte unsichtbar — er trennt
     nichts. Was dort trennt, ist eine helle Kante: dieselbe Rolle, die am Tag
     der Schatten spielt. Genau das war der Fehler des Redesigns vom 17.08.,
     das den Rahmen entfernt und durch --shadow-card ersetzt hat. */
  --border: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.26);
  --overlay: rgba(0, 0, 0, 0.7);

  /* Zustände (Brand.red / Brand.green) */
  --danger: #C0392B;
  --danger-soft: rgba(192, 57, 43, 0.16);
  /* 🔴 TEXT-Rot, getrennt von --danger (der Flaechenfarbe). Gemessen am
     01.09.2026: --danger auf --surface-1 ergibt nur 3,12:1 — unter den 4,5:1,
     die WCAG fuer 13px-Text verlangt. Die Minus-Prozente unter den Kennzahlen
     waren dadurch kaum lesbar. #FF5A47 bringt 5,49:1.
     Dieselbe Trennung wie bei --accent-text, und aus demselben Grund. */
  --danger-text: #FF5A47;
  --success: #20342D;
  --success-soft: rgba(32, 52, 45, 0.9);
  --warn-soft: rgba(255, 120, 0, 0.16);

  /* Diagramm-Balken der Statistik. Eigener Token, weil eine Datenreihe
     KEIN Akzent ist: färbt man Balken mit --accent, konkurriert das Diagramm
     optisch mit jedem Button auf der Seite. */
  --chart-bar: rgba(255, 120, 0, 0.55);
  --chart-grid: rgba(255, 255, 255, 0.07);

  /* Unscharf hinterlegte Pro-Vorschau (weiches Gating).

     🔴 Der Schleier ist bewusst NICHT --overlay (rgba(0,0,0,0.7)): der deckt
     ab, und genau das soll hier nicht passieren. Die eigenen Zahlen des Clubs
     müssen als Zahlen erkennbar bleiben — nur eben nicht ablesbar. Deshalb ein
     eigener, deutlich schwächerer Wert in der Flächenfarbe der Karte. */
  --locked-blur: 6px;
  --locked-veil: rgba(31, 31, 31, 0.42);

  /* Ruhezone des QR-Codes.

     🔴 Das ist KEIN Theme-Wert und wird im hellen Modus NICHT umgefärbt: die
     weiße Fläche um einen QR gehört technisch zum Code. Auf cremefarbenem
     Grund sinkt der Kontrast zu den dunklen Modulen so weit, dass ältere
     Kameras bei Kunstlicht aussteigen — und das merkt niemand im Panel,
     sondern der Gast an der Garderobe. */
  --qr-quiet: #FFFFFF;

  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.55);

  /* ── Sprechblase (Tooltip) ────────────────────────────────────────────
     🔴 Die Blase ist bewusst HELLER als ihr Untergrund, nicht dunkler: sie
     liegt über einer dunklen Karte, und eine dunkle Blase auf dunklem Grund
     verschwindet. Im hellen Modus dreht sich das um (dort steht sie dunkel auf
     Creme). Beides ist derselbe Gedanke — die Blase hebt sich vom Blatt ab. */
  --tip-bg: #3A3A3A;
  --tip-text: #FFFFFF;
  --tip-border: rgba(255, 255, 255, 0.14);
  --shadow-tip: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Fläche hinter Reiter- und Karten-Symbolen. Kein Akzent: ein Symbol ist
     Wegweiser, kein Aufruf zum Handeln — färbt man es orange, konkurriert
     jedes Symbol mit dem einen Knopf, auf den es wirklich ankommt. */
  --icon-bg: rgba(255, 255, 255, 0.06);
  --icon-fg: #B5B0AC;

  /* Klebende Kopfzone. `backdrop-filter` braucht eine halbdurchlässige
     Fläche — mit voller Deckkraft ist die Unschärfe unsichtbar. */
  --glass: rgba(22, 22, 22, 0.72);

  /* Sichtbarer Fokusring für Tastaturbedienung (WCAG 2.4.7). Eigener Token,
     weil er in beiden Modi gegen die JEWEILIGE Fläche ankommen muss. */
  --focus-ring: rgba(255, 120, 0, 0.55);

  /* Ladegerüst-Schimmer. */
  --skeleton: rgba(255, 255, 255, 0.07);
  --skeleton-hell: rgba(255, 255, 255, 0.13);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;

    /* LightTheme: deep #EEE1D8 / surface1 #F6EEE7 / surface2 #E2D3C7 / surface3 #D9C9BC */
    --bg: #EEE1D8;
    --surface-1: #F6EEE7;
    --surface-2: #E2D3C7;
    --surface-3: #D9C9BC;

    --text: #030404;
    --text-muted: #6A5F5A;
    --text-subtle: #6F645E;

    --accent: #FF7800;
    --accent-hover: #D96400;
    --accent-dark: #D96400;
    /* 🔴 #FF7800 auf Creme = 2.07:1 und damit unlesbar. `emberOnLight`
       (#B54E00) erreicht ~5:1. Orange als Fläche bleibt erlaubt, Orange als
       TEXT muss hier die dunklere Variante sein. */
    --accent-text: #B54E00;
  /* Traegt auf BEIDEN hellen Flaechen (Creme und surface-2) 4.5:1.
     `--accent-text` reicht nur auf Creme — auf surface-2 sind es 3.55:1. */
  --accent-stark: #964600;
    /* 🔴 DUNKEL, nicht weiss — geaendert am 20.08.2026, nachdem der aktive
       Menuepunkt im hellen Schema eine orange Verlaufsflaeche bekam. Gemessen
       auf dem Verlauf: Weiss liegt auf #FF7800 bei 2.6:1 und auf #FF9A2E noch
       darunter, also unter jeder Lesbarkeitsgrenze; #161616 erreicht ~8:1
       bzw. ~5.5:1 am dunklen Ende. Es gilt dieselbe Regel wie im dunklen
       Schema: auf einer orangen FLAECHE steht dunkler Text. */
    --on-accent: #161616;

    /* Verlaeufe im hellen Schema: dieselbe Rolle, aber gedeckter. Die
       Verkaufsflaeche bleibt dunkel — sie ist in der Vorlage ein Fremdkoerper
       auf hellem Grund und soll das auch sein. */
    --accent-gradient: linear-gradient(135deg, #FF9A2E 0%, #FF7800 55%, #D96400 100%);
    --accent-surface-gradient:
      radial-gradient(120% 90% at 12% 108%, rgba(255, 154, 46, 0.34) 0%, rgba(255, 120, 0, 0.13) 40%, rgba(255, 120, 0, 0) 72%),
      linear-gradient(160deg, #FBEFE3 0%, #F1E1D2 62%);
    --accent-glow: 0 0 0 1px rgba(255, 120, 0, 0.3), 0 6px 18px rgba(255, 120, 0, 0.22);
  --pro-spalte: rgba(255, 120, 0, 0.07);
  --lage-glanz:
    radial-gradient(120% 120% at 0% 100%, rgba(255, 154, 46, 0.20) 0%,
      rgba(255, 120, 0, 0.07) 42%, rgba(255, 120, 0, 0) 72%);
  --kurve-schein: drop-shadow(0 2px 8px rgba(255, 120, 0, 0.30));
  --delta-rand: rgba(255, 120, 0, 0.40);
    --chart-area-gradient: linear-gradient(180deg, rgba(255, 120, 0, 0.35) 0%, rgba(255, 120, 0, 0.05) 70%, rgba(255, 120, 0, 0) 100%);
    --chart-1: #FFB454;
    --chart-2: #FF8C1A;
    --chart-3: #E56A00;
    --chart-4: #B54E00;

    --border: rgba(3, 4, 4, 0.12);
    --border-strong: rgba(3, 4, 4, 0.22);
    --overlay: rgba(0, 0, 0, 0.45);

    --danger: #C0392B;
    --danger-soft: rgba(192, 57, 43, 0.12);
    /* Am Tag reicht --danger selbst: 4,74:1 auf --surface-1. */
    --danger-text: #C0392B;
    --success: #20342D;
    --success-soft: rgba(32, 52, 45, 0.14);
    --warn-soft: rgba(255, 120, 0, 0.14);

    --chart-bar: rgba(181, 78, 0, 0.55);
    --chart-grid: rgba(3, 4, 4, 0.08);

    /* Hell: der Schleier in der Cremefläche, sonst wirkt die gesperrte Karte
       schmutzig grau statt ruhig. */
    --locked-veil: rgba(246, 238, 231, 0.55);

    --shadow-card: 0 4px 14px rgba(3, 4, 4, 0.12);
    --shadow-pop: 0 12px 32px rgba(3, 4, 4, 0.18);

    /* Hell: die Blase kehrt sich um — dunkle Fläche auf Creme. */
    --tip-bg: #2B2422;
    --tip-text: #F6EEE7;
    --tip-border: rgba(3, 4, 4, 0.18);
    --shadow-tip: 0 8px 24px rgba(3, 4, 4, 0.22);

    --icon-bg: rgba(3, 4, 4, 0.06);
    --icon-fg: #6A5F5A;

    --glass: rgba(238, 225, 216, 0.72);

    /* Auf Creme braucht der Ring die dunklere Orangevariante, sonst leuchtet
       er heller als der Untergrund und verschwindet genau dort, wo er zeigen
       soll, worauf der Fokus steht. */
    --focus-ring: rgba(181, 78, 0, 0.55);

    --skeleton: rgba(3, 4, 4, 0.07);
    --skeleton-hell: rgba(3, 4, 4, 0.13);
  }
}

/* Ausdrückliche Wahl des Betreibers — gewinnt gegen die System-Einstellung.
   Die Werte sind bewusst ausgeschrieben statt aus dem Media-Query geerbt:
   ein @media-Block gilt nur unter seiner Bedingung, ein Betreiber mit dunklem
   System bekäme sonst bei [data-theme='light'] gar keine hellen Werte. */
:root[data-theme='light'] {
  color-scheme: light;

  --bg: #EEE1D8;
  --surface-1: #F6EEE7;
  --surface-2: #E2D3C7;
  --surface-3: #D9C9BC;

  --text: #030404;
  --text-muted: #6A5F5A;
  --text-subtle: #6F645E;

  --accent: #FF7800;
  --accent-hover: #D96400;
  --accent-dark: #D96400;
  --accent-text: #B54E00;
  /* Traegt auf BEIDEN hellen Flaechen (Creme und surface-2) 4.5:1.
     `--accent-text` reicht nur auf Creme — auf surface-2 sind es 3.55:1. */
  --accent-stark: #964600;
  /* 🔴 DUNKEL wie im mittleren Block — dieselbe Korrektur vom 20.08.2026.
     Hier stand noch Weiss, und weil DIESER Block bei der ausdruecklichen
     Wahl „Hell" im Panel greift (nicht der prefers-color-scheme-Block),
     blieb der aktive Menuepunkt trotz Korrektur unlesbar: gemessen 2.65:1
     auf dem Verlauf. Wer einen Wert im hellen Schema aendert, muss BEIDE
     hellen Bloecke anfassen. */
  --on-accent: #161616;

  /* Verlaeufe auch hier ausdruecklich, obwohl sie aus :root kaskadieren
     wuerden: stuende hier spaeter ein abweichender Akzent, liefe der Verlauf
     sonst still mit der alten Farbe weiter. */
  --accent-gradient: linear-gradient(135deg, #FF9A2E 0%, #FF7800 55%, #D96400 100%);
  --accent-surface-gradient:
    radial-gradient(120% 90% at 12% 108%, rgba(255, 154, 46, 0.34) 0%, rgba(255, 120, 0, 0.13) 40%, rgba(255, 120, 0, 0) 72%),
    linear-gradient(160deg, #FBEFE3 0%, #F1E1D2 62%);
  --accent-glow: 0 0 0 1px rgba(255, 120, 0, 0.3), 0 6px 18px rgba(255, 120, 0, 0.22);
  --pro-spalte: rgba(255, 120, 0, 0.07);
  --lage-glanz:
    radial-gradient(120% 120% at 0% 100%, rgba(255, 154, 46, 0.20) 0%,
      rgba(255, 120, 0, 0.07) 42%, rgba(255, 120, 0, 0) 72%);
  --kurve-schein: drop-shadow(0 2px 8px rgba(255, 120, 0, 0.30));
  --delta-rand: rgba(255, 120, 0, 0.40);
  --chart-area-gradient: linear-gradient(180deg, rgba(255, 120, 0, 0.35) 0%, rgba(255, 120, 0, 0.05) 70%, rgba(255, 120, 0, 0) 100%);
  --chart-1: #FFB454;
  --chart-2: #FF8C1A;
  --chart-3: #E56A00;
  --chart-4: #B54E00;

  --border: rgba(3, 4, 4, 0.12);
  --border-strong: rgba(3, 4, 4, 0.22);
  --overlay: rgba(0, 0, 0, 0.45);

  --danger: #C0392B;
  --danger-soft: rgba(192, 57, 43, 0.12);
  /* Am Tag reicht --danger selbst: 4,74:1 auf --surface-1. */
  --danger-text: #C0392B;
  --success: #20342D;
  --success-soft: rgba(32, 52, 45, 0.14);
  --warn-soft: rgba(255, 120, 0, 0.14);

  --chart-bar: rgba(181, 78, 0, 0.55);
  --chart-grid: rgba(3, 4, 4, 0.08);

  --locked-veil: rgba(246, 238, 231, 0.55);

  --shadow-card: 0 4px 14px rgba(3, 4, 4, 0.12);
  --shadow-pop: 0 12px 32px rgba(3, 4, 4, 0.18);

  --tip-bg: #2B2422;
  --tip-text: #F6EEE7;
  --tip-border: rgba(3, 4, 4, 0.18);
  --shadow-tip: 0 8px 24px rgba(3, 4, 4, 0.22);

  --icon-bg: rgba(3, 4, 4, 0.06);
  --icon-fg: #6A5F5A;

  --glass: rgba(238, 225, 216, 0.72);
  --focus-ring: rgba(181, 78, 0, 0.55);

  --skeleton: rgba(3, 4, 4, 0.07);
  --skeleton-hell: rgba(3, 4, 4, 0.13);
}

/* 🔴 Bewegungsarme Darstellung respektieren. Das Panel animiert Reiterwechsel,
   Toasts und die Befehlspalette — für jemanden mit vestibulärer Störung ist
   das keine Zierde, sondern ein Problem. `!important`, weil die Regel jede
   spätere Komponentenangabe schlagen muss.
   Nicht auf 0s: eine Dauer von exakt 0 unterdrückt `transitionend`-Ereignisse
   in manchen Browsern, und daran hängt das Aufräumen von Overlays. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}