/* ==========================================================================
   tokens.css — GCloudy Design-System
   Ruhig und minimalistisch, App-Dichte (Fließtext 14 px, Controls 36 px, Einträge 32 px, Touch 44 px).
   Farben aus dem GCloudy-Logo abgeleitet und nach WCAG AA geprüft.
   --------------------------------------------------------------------------
   Aufbau
   0. Schrift            – Inter lokal (assets/fonts)
   1. Primitive Tokens   – Rohwerte. Für ein neues Branding werden NUR diese getauscht.
   2. Semantische Tokens – Rollen (Hintergrund, Text, Akzent …), verweisen auf primitive Tokens.
   3. Dark Mode          – ordnet die semantischen Tokens neu zu
                           (prefers-color-scheme + Umschalter über data-theme).
   4. Kontext            – .surface-dark für dunkle Kacheln im hellen Modus.
   5. Abgeleitete Tokens – aus anderen Tokens gemischt, in jedem Farbkontext neu berechnet.
   6. Responsive         – Hero-Größe, Abschnittsabstand.
   7. Touch              – Klickflächen und Felder auf 44 px.
   Einzige Datei mit Hex-Werten. [Annahme] markiert Werte ohne feste Vorgabe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SCHRIFT – Inter lokal (SIL Open Font License), kein Abruf bei Google Fonts (DSGVO)
   -------------------------------------------------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/inter-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/inter-latin-ext-300-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --------------------------------------------------------------------------
   1. PRIMITIVE TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Markenfarben – exakt aus dem Logo, nur für das Logo selbst
     (#1082ce erreicht auf Weiß nur 4.11:1 und fällt als UI-Text durch AA) */
  --color-brand-logo-blue: #1082ce;    /* "G" im Logo */
  --color-brand-logo-sky: #88bfe9;     /* Wolke im Logo */

  /* Interaktions-Blau – Farbton des Logos (H 204°), abgedunkelt für AA */
  --color-primary: #0d6caa;            /* 5.61:1 auf Weiß */
  --color-primary-focus: #0f77bd;      /* Fokusring, Button-Hover – Weiß darauf 4.78:1 */
  --color-primary-on-dark: #88bfe9;    /* Wolkenblau – nur auf dunklen Flächen, 7.58:1 auf Tile 1 */

  /* Statusfarben – nur für Hinweise, Badges und Fehler, nie für Aktionen */
  --color-error: #d70015;              /* [Annahme] 5.38:1 auf Weiß, 4.94:1 auf Parchment */
  --color-error-on-dark: #ff7a72;      /* [Annahme] 4.85:1 im roten Badge auf Karte dunkel, 6.10:1 als Text */
  --color-warning: #9a5a00;            /* [Annahme] 5.47:1 auf Weiß */
  --color-warning-on-dark: #ffb340;    /* [Annahme] 11.77:1 auf Schwarz */
  --color-success: #1f7a3a;            /* [Annahme] 5.38:1 auf Weiß */
  --color-success-on-dark: #34c759;    /* [Annahme] 9.46:1 auf Schwarz */
  --color-backdrop: rgba(0, 0, 0, 0.5);/* Abdunklung hinter Dialogen */

  /* Diagramm-Serien – feste Reihenfolge, nie würfeln. Geprüft mit dem dataviz-Validator auf Weiß bzw. Schwarz
     (Farbsehschwäche ΔE ≥ 8, Normalsicht ≥ 15). Aqua, Gelb und Magenta liegen hell unter 3:1 → immer Legende oder Tabelle. */
  --color-chart-1: #0d6caa;  --color-chart-1-dark: #1082ce;   /* GCloudy-Blau */
  --color-chart-2: #eb6834;  --color-chart-2-dark: #d95926;   /* Orange */
  --color-chart-3: #1baf7a;  --color-chart-3-dark: #199e70;   /* Aqua */
  --color-chart-4: #eda100;  --color-chart-4-dark: #c98500;   /* Gelb */
  --color-chart-5: #e87ba4;  --color-chart-5-dark: #d55181;   /* Magenta */
  --color-chart-6: #008300;  --color-chart-6-dark: #008300;   /* Grün */
  --color-chart-7: #6250d6;  --color-chart-7-dark: #9085e9;   /* Violett */
  --color-chart-8: #e34948;  --color-chart-8-dark: #e66767;   /* Rot */

  /* Neutrale Grautöne – eine Leiter für hell und dunkel */
  --color-canvas: #ffffff;
  --color-neutral-50: #fafafa;         /* Sidebar hell · Text dunkel */
  --color-neutral-100: #f5f5f5;        /* graue Flächen hell (muted): Seite der Anmeldung, Tabellenkopf, Tab-Leiste */
  --color-neutral-150: #f0f0f0;        /* Sidebar-Hover hell, Secondary-Button hell */
  --color-neutral-175: #ebebeb;        /* aktiver Sidebar-Eintrag hell */
  --color-neutral-200: #e5e5e5;        /* Linien hell, Rahmen von Karten und Outline-Buttons */
  --color-neutral-300: #d4d4d4;        /* Feldrahmen hell, Hover auf Linien */
  --color-neutral-400: #a1a1a1;        /* Sekundärtext dunkel 7.6:1 · Disabled-Text und Feldrahmen-Hover hell */
  --color-neutral-500: #737373;        /* Disabled-Text dunkel */
  --color-neutral-550: #6b6b6b;        /* Sekundärtext und Platzhalter hell: 5.33:1 auf Weiß, ≥ 4.5:1 auf grauen Flächen und Tab-Leiste */
  --color-neutral-700: #333333;        /* Utility-Hover dunkel, graue Flächen auf dunkler Kachel */
  --color-neutral-800: #262626;        /* graue Flächen dunkel (muted), aktiver Sidebar-Eintrag */
  --color-neutral-850: #222222;        /* Sidebar-Hover dunkel */
  --color-neutral-900: #171717;        /* Karten, Menüs, Dialoge, Sidebar dunkel */
  --color-neutral-950: #0a0a0a;        /* Text hell · Seite dunkel */
  --color-canvas-80: rgba(255, 255, 255, 0.8);          /* Milchglas-Kopfzeile hell */
  --color-neutral-950-80: rgba(10, 10, 10, 0.8);        /* Milchglas-Kopfzeile dunkel */
  /* Weiß mit Deckkraft – Linien und Flächen auf dunklem Grund */
  --color-white-5: rgba(255, 255, 255, 0.045);          /* Weiß 4,5 %: Felder dunkel, gewählter Tab dunkel */
  --color-white-10: rgba(255, 255, 255, 0.1);           /* Linien dunkel, Fläche von Secondary-Buttons */
  --color-white-15: rgba(255, 255, 255, 0.15);          /* Feldrahmen dunkel, aktiver Tab, Hover auf Secondary */
  --color-white-20: rgba(255, 255, 255, 0.2);           /* Hover auf Linien und Feldern, Schalter aus dunkel */
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;

  /* Logo – Datei assets/gcloudy-logo-brand-512w.png (512 × 309), im HTML als <img class="brand-logo"> */
  --brand-logo-h-nav: 16px;            /* [Annahme] passt in die 44-px-Navigation */
  --brand-logo-h-hero: 48px;           /* [Annahme] */
  --brand-logo-h-auth: 32px;           /* Logo auf der Anmeldekarte, ohne Kachel (Gürkan 07.11.2026: 48 px zu groß) */

  /* Schatten – Stufen xs … lg, hell und dunkel gleich.
     Im Dark Mode tragen Linien und Flächenstufen die Tiefe, die Schatten sind dort kaum zu sehen. */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);                                       /* Buttons, Felder */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);    /* Karten, aktiver Tab */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* Menüs, Dropdown, Popover */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Dialoge, Benachrichtigungen */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;   /* unter Produktbildern */
  --blur-frosted: saturate(180%) blur(20px);              /* [Annahme] Milchglas */

  /* Schrift */
  --font-display: "Inter", -apple-system, system-ui, sans-serif;
  --font-text: "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;  /* [Annahme] Token-Namen in der Doku, Schlüssel und Notfall-Codes */
  --font-features-display: "ss03";
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;           /* Buttons, Labels, Tabs, Tabellenkopf, aktive Einträge */
  --font-weight-semibold: 600;
  --type-display-tracking-adjust: -0.01em;                /* Inter-Anpassung für Lead und Tagline */
  --type-heading-tracking: -0.025em;   /* Hero, Display groß und mittel: eng gesetzt */

  /* Typografie-Skala (Größe · Gewicht · Zeilenhöhe · Laufweite) */
  --type-hero-size: 32px;           --type-hero-weight: 600;           --type-hero-lh: 1.07;
  --type-display-lg-size: 24px;     --type-display-lg-weight: 600;     --type-display-lg-lh: 1.25;
  --type-display-md-size: 20px;     --type-display-md-weight: 600;     --type-display-md-lh: 1.25;
  --type-lead-size: 18px;           --type-lead-weight: 400;           --type-lead-lh: 1.35;           --type-lead-ls: 0px;
  --type-lead-airy-size: 16px;      --type-lead-airy-weight: 400;      --type-lead-airy-lh: 1.5;       --type-lead-airy-ls: 0px;
  --type-tagline-size: 16px;        --type-tagline-weight: 600;        --type-tagline-lh: 1.3;         --type-tagline-ls: 0px;
  --type-body-strong-size: 14px;    --type-body-strong-weight: 600;    --type-body-strong-lh: 1.35;    --type-body-strong-ls: -0.1px;
  --type-body-size: 14px;           --type-body-weight: 400;           --type-body-lh: 1.5;            --type-body-ls: -0.1px;
  --type-label-size: var(--type-body-size); --type-label-weight: var(--font-weight-medium); --type-label-lh: var(--type-body-strong-lh); --type-label-ls: var(--type-body-ls);   /* Feld-Labels */
  --type-caption-size: 12px;        --type-caption-weight: 400;        --type-caption-lh: 1.4;         --type-caption-ls: 0px;
  --type-caption-strong-size: 12px; --type-caption-strong-weight: 600; --type-caption-strong-lh: 1.35; --type-caption-strong-ls: 0px;
  --type-button-utility-size: 12px; --type-button-utility-weight: var(--font-weight-medium); --type-button-utility-lh: 1.29; --type-button-utility-ls: 0px;
  --type-fine-print-size: 11px;     --type-fine-print-weight: 400;     --type-fine-print-lh: 1.4;      --type-fine-print-ls: 0px;

  /* Abstände */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-section: 48px;

  /* Eckenradien */
  --radius-xs: 4px;              /* Checkbox, kleine Flächen */
  --radius-sm: 6px;              /* Chips, Badges, Menüeinträge, Tooltip */
  --radius-md: var(--radius-control); /* gleich wie control (8 px): Icon-Kacheln, Menüs, Dropdown, Popover */
  --radius-control: 8px;         /* Buttons, Felder, Icon-Buttons, Tabs, Sidebar-Einträge */
  --radius-lg: 10px;             /* Listen, Tabelle, Hinweise, Dialoge, Tab-Leiste */
  --app-tile-icon: 64px;         /* App-Kachel der Startseite: Symbolfläche (am Handy 56 px) */
  --app-tile-min: 96px;          /* App-Kachel: kleinste Breite im Raster */
  --radius-card: 14px;           /* Karten, Zeilen-Karten der Einstellungen, Anmeldekarte */
  --radius-pill: 9999px;         /* Spuren & Linien: Fortschritt, Schalter, Schieberegler */
  --radius-full: 9999px;         /* Kreise: Avatar, Radio, Statuspunkt */

  /* Linienstärken */
  --border-width-thin: 1px;      /* Hairline, Rahmen von Feldern und Karten */
  --border-width-medium: 2px;    /* Fokusring, ausgewählter Chip */

  /* Raster & Container */
  --container-text: 980px;
  --container-app: calc(var(--container-text) * 1.2);   /* Inhalt einer App (.app-shell__content), etwas breiter als Text (Gürkan 07.11.2026) */
  --container-narrow: 640px;     /* [Annahme] Einleitungen auf Webseiten, gut lesbare Zeilenlänge */
  --grid-gap: var(--space-lg);
  --page-gutter: var(--space-lg);/* [Annahme] seitlicher Rand, auf allen Breiten 16 px */
  --tile-pad-y: var(--space-section);
  --hero-size-current: var(--type-hero-size);   /* responsiv: 32 → 28 → 24 */
  --hero-lh-current: var(--type-hero-lh);

  /* Komponenten-Maße */
  --touch-min: 36px;
  --input-height: 36px;          /* Buttons und Felder */
  --item-height: 32px;           /* Einträge in Sidebar und Menüs */
  --item-gap: var(--space-xxs);         /* Lücke zwischen Einträgen in Listen (4 px): Sidebar und App-Layout (auch zu den Unterpunkten), Menü, Dropdown, Befehlspalette, Tabs, Umschalter – Hover und Auswahl stoßen nie aneinander */
  --input-pad-y: 7px;            --input-pad-x: 12px;
  --input-font-size: 14px;       /* Touch: 16 px, sonst zoomt iOS beim Antippen ins Feld */
  --stat-min: 140px;             /* [Annahme] Kennzahl-Kachel: zwei passen nebeneinander auf ein Phone */
  --btn-pad-y: 5px;              --btn-pad-x: 16px;
  --btn-utility-pad-y: 4px;      --btn-utility-pad-x: 10px;
  --chip-pad-y: 4px;             --chip-pad-x: 10px;
  --control-size: 16px;          /* [Annahme] Checkbox & Radio; Klickfläche über das Label */
  --switch-width: 32px;          /* [Annahme] */
  --switch-height: 18px;         /* [Annahme] */
  --switch-gap: 2px;             /* [Annahme] Abstand Knopf ↔ Spur */
  --icon-size-sm: 12px;
  --icon-size-md: 16px;
  --icon-size-lg: 24px;          /* Icon in der grauen Scheibe (leerer Zustand, Statusseiten) */
  --icon-size-field: 14px;       /* Icons in Buttons im Feld (Passwort-Auge, Kopieren) */
  --field-btn-inset: 4px;        /* Luft zwischen Button im Feld und Feldrand */
  --icon-stroke: 1.75;           /* Lucide-Icons (lucide.dev, ISC), einheitliche Strichstärke */
  --icon-stroke-bold: 2.5;       /* kleine Icons (12 px): wirken so dunkel wie halbfette Schrift */
  --nav-global-height: 44px;
  --sidebar-width: 240px;        /* [Annahme] */
  /* Abstände der Sidebar: gelten für die Doku (.sidebar) und das App-Muster (.app-shell__sidebar) gleich,
     damit jedes Produkt exakt wie die Doku aussieht (Gürkan, 07.11.2026) */
  --sidebar-pad-block: var(--space-lg);    /* oben und unten */
  --sidebar-pad-inline: var(--space-sm);   /* links und rechts */
  --sidebar-gap: var(--space-xl);          /* zwischen Kopf (Logo), Navigation und Fußzeile */
  --sidebar-width-min: 200px;    /* [Annahme] schmalste Breite beim Ziehen */
  --sidebar-width-max: 360px;    /* [Annahme] breiteste Breite beim Ziehen */
  --offcanvas-width: calc(var(--sidebar-width) + var(--space-xxl));   /* hereinfahrendes Menü (Phone-Sidebar, App-Shell unter 1068 px) */
  --offcanvas-max: 85%;          /* höchstens so viel vom Fenster, daneben bleibt die Seite sichtbar */
  --sidebar-handle: 8px;         /* Griff am Rand der Sidebar (Trefferfläche) */
  --settings-nav-width: 180px;   /* [Annahme] Unternavigation der Einstellungsseite */
  --modal-width: 512px;          /* Dialog, auch schmale Inhalte wie Suche und Anmeldekarte */
  --drawer-width: 420px;         /* [Annahme] Seitenpanel rechts */
  --sheet-max-height: 85vh;      /* [Annahme] Seitenpanel als Bottom Sheet auf dem Phone */
  --popover-width: 280px;        /* [Annahme] */
  --menu-min-width: 200px;       /* [Annahme] */
  --command-width: 560px;        /* [Annahme] Befehlspalette */
  --command-list-height: 320px;  /* [Annahme] Ergebnisliste, danach scrollt sie */
  --command-offset-top: 12vh;    /* [Annahme] Palette sitzt im oberen Drittel */
  --toast-width: 320px;          /* [Annahme] */
  --toast-duration: 5000ms;      /* [Annahme] bis Benachrichtigungen verschwinden */
  --avatar-sm: 24px;             /* [Annahme] */
  --avatar-md: 32px;             /* [Annahme] */
  --avatar-lg: 48px;             /* [Annahme] */
  --avatar-xl: 72px;             /* Übersicht der Einstellungen (Begrüßung) */
  --avatar-2xl: 120px;           /* Profilbild im Fenster „Profilbild“ */
  --app-logo-size: 40px;         /* Logo-Kachel einer Selfhosted-App (.app-logo) */
  --icon-tile-size: 44px;        /* getönte Icon-Kachel (Eintrag, Modul, Feature), bleibt auf Touch gleich */
  --spinner-size: 16px;          /* [Annahme] */
  --progress-height: 6px;        /* [Annahme] */
  --file-progress-height: 4px;   /* Fortschritt einer Datei beim Hochladen */
  --file-thumb-size: 40px;       /* Vorschau bzw. Typ-Kachel einer Datei, Icon der Upload-Fläche */
  --file-tile-min: 120px;        /* Kachel im Upload-Raster (.upload--grid) */
  --file-ring-size: 44px;        /* Fortschritts-Ring auf einer Kachel */
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6.5 9 17.5l-5-5%27/%3E%3C/svg%3E");   /* Haken in Checkbox und bei „Hochgeladen“ (Form wie Lucide „check“), mittig gesetzt */
  --slider-track: 4px;           /* [Annahme] Schieberegler-Spur */
  --tab-indicator: 2px;          /* [Annahme] Unterstrich des aktiven Tabs (.tabs--line) */
  --tab-bar-pad: 3px;            /* Luft rund um die Tabs in der grauen Leiste */
  --table-head-height: 40px;     /* Tabellenkopf */
  --step-size: 24px;             /* [Annahme] Kreis der Schrittfolge */
  --stepper-input-width: 48px;   /* [Annahme] Zahlenfeld zwischen − und + */
  --kbd-size: 20px;              /* [Annahme] Taste in Tastenkürzeln */
  --empty-icon-size: 48px;       /* [Annahme] */
  --choice-card-min: 200px;      /* [Annahme] Auswahl-Karten, Vorteile, Preis-Karten */
  --card-min: 220px;             /* Karten-, Formular-, Modul- und Eintragsraster, Suchfeld */
  --render-size: 80px;           /* Platzhalter Produktbild (.card__render) */
  --chart-height: 240px;         /* [Annahme] Linien- und Balkendiagramm */
  --donut-size: 160px;           /* [Annahme] Ringdiagramm */
  --auth-logo-size: 56px;        /* Logo-Kachel auf der Anmeldekarte */
  --brand-logo-h-tile: 20px;     /* Logo in der Kachel */
  --qr-size: 160px;              /* [Annahme] QR-Code beim Einrichten der Zwei-Faktor-Anmeldung */

  /* Interaktion – Tönungen entstehen per color-mix() aus Text- oder Statusfarbe */
  --enter-scale: 0.95;           /* Dialoge, Befehlspalette: Startgröße beim Erscheinen */
  --subtle-tint: 4%;             /* [Annahme] Listen-Hover (.entry), Tastenfläche, Auswahl-Karte gedrückt */
  --surface-hover-tint: 50%;     /* Hover zur Hälfte grau: klickbare Karte, Tabellenzeile, Upload-Fläche */
  --secondary-tint: 8%;          /* [Annahme] Secondary-Fläche, Hover, Skeleton */
  --secondary-tint-active: 12%;  /* Secondary-Button: gedrückt */
  --hover-tint: 5%;              /* Hover auf Elementen ohne eigene Fläche (Icon-Buttons, Menüeinträge, Seitenzahlen …) */
  --press-tint: 8%;              /* gedrückt auf Elementen ohne eigene Fläche */
  --track-tint: 10%;             /* [Annahme] Spuren (Fortschritt, Schieberegler), Avatar-Fläche */
  --status-border-tint: 35%;     /* [Annahme] Rahmen getönter Flächen (Hinweis, Banner, Gefahrenbereich) */
  --tab-bar-tint: 6%;            /* Leiste von Tabs und Umschalter: leichte Abdunklung des Untergrunds */
  --chip-tint: 6%;               /* Chip-Fläche: leichte Abdunklung des Untergrunds */
  --chip-tint-hover: 10%;        /* Chip bei Hover */
  --chip-tint-active: 14%;       /* Chip gedrückt */
  --chip-border-tint: 45%;       /* Rand eines gewählten Chips */
  --spinner-track-tint: 25%;     /* [Annahme] Ring hinter dem Spinner */
  --overlay-tint: 85%;           /* Knopf auf einer Bildvorschau: Karte leicht durchscheinend */
  --scrim-tint: 55%;             /* Abdeckung über der Bildvorschau beim Hochladen */
  --neutral-text-tint: 75%;      /* Text im neutralen Badge: dunkler als Sekundärtext, ≥ 4,5:1 auf der grauen Fläche */
  --dim-opacity: 0.45;           /* [Annahme] abgeblendet: Skeleton-Puls, nicht gewählte Diagrammteile, Sortier-Icon */
  --chart-area-opacity: 0.1;     /* Fläche unter einer Linie (dataviz-Vorgabe) */
  --scrollbar-size: 12px;        /* [Annahme] Breite inkl. Innenabstand des Griffs */
  --scrollbar-inset: 3px;        /* [Annahme] Luft rund um den Griff */
  --scrollbar-size-thin: 8px;    /* [Annahme] schmaler Griff in Navigationen (Sidebar) */
  --scrollbar-inset-thin: 2px;   /* [Annahme] */
  --scrollbar-tint: 24%;         /* [Annahme] */
  --scrollbar-tint-hover: 40%;   /* [Annahme] */
  --link-underline-offset: 0.18em; /* [Annahme] Abstand der Hover-Unterstreichung */
  --disabled-opacity: 0.5;       /* deaktivierte Buttons und Felder: ganzes Element blasser */
  --focus-ring-width: 3px;       /* Fokusring direkt am Element, ohne Abstand */
  --focus-ring-offset: 0px;
  --ring-tint: 25%;              /* schmaler, heller Saum um Felder beim Tippen */
  --field-ring-width: 2px;       /* Saum um Felder (Fokus, Fehler) – schlichter als der 3-px-Tastaturring */
  --ring-tint-strong: 70%;       /* Tastatur-Fokus (:focus-visible) auf Buttons, Links, Sidebar */
  --ring-error-tint: 15%;        /* Saum um fehlerhafte Felder */
  --split-line-tint: 30%;        /* Trennlinie im Split-Button (aus der Textfarbe des Buttons) */

  /* Bewegung */
  --motion-fast: 120ms;          /* [Annahme] Hover- und Zustandsfarben, Tooltips */
  --motion-duration: 200ms;      /* [Annahme] Aufklappen, Drehen, Dropdown, Dialoge */
  --motion-slow: 320ms;          /* [Annahme] Seitenpanel, hereinfahrende Menüs, Auftritte, Fortschritt */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* [Annahme] schnell los, weich aus */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);        /* [Annahme] Erscheinen */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);         /* [Annahme] Verschwinden */
  --spin-duration: 800ms;        /* [Annahme] eine Umdrehung des Spinners */
  --pulse-duration: 1600ms;      /* [Annahme] Skeleton-Pulsieren */
  --tooltip-delay: 300ms;        /* [Annahme] Tooltip erscheint nicht sofort */
  --copied-duration: 1500ms;     /* so lange zeigt ein Kopieren-Button den Haken */
  --stagger-step: 60ms;          /* [Annahme] Abstand zwischen gestaffelten Auftritten */

  /* Ebenen (z-index) – Dialoge liegen ohnehin in der obersten Ebene des Browsers */
  --z-offcanvas: 5;              /* [Annahme] mobile Sidebar im App-Layout, Abdunklung eine Stufe darunter */
  --z-dropdown: 10;              /* [Annahme] Dropdown, Menü, Popover, Kalender – unter fixierten Leisten */
  --z-sticky: 20;                /* [Annahme] fixierte Sidebar & Kopfzeile */
  --z-tooltip: 30;               /* [Annahme] */
  --z-toast: 50;                 /* [Annahme] */
  --z-skip-link: 100;            /* [Annahme] „Zum Inhalt springen“ liegt über allem */

  /* Breakpoints: Media Queries können keine Variablen lesen. scripts/check.js prüft jede Breite
     in @media (CSS) und matchMedia (JS) gegen diese Liste: max-width = Wert, min-width = Wert + 1. */
  --bp-wide: 1440px;
  --bp-small-desktop: 1068px;
  --bp-tablet: 833px;
  --bp-large-phone: 734px;
  --bp-phone: 640px;
  --bp-small-phone: 419px;
}

/* --------------------------------------------------------------------------
   2. SEMANTISCHE TOKENS – Light (Standard)
   Auch auf [data-theme="light"], damit Vorschauen im Dark Mode hell bleiben.
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Flächen */
  --bg-canvas: var(--color-canvas);
  --bg-parchment: var(--color-neutral-100);
  --bg-tile-dark: var(--color-neutral-900);
  --bg-card: var(--color-neutral-50);   /* Karten, Fenster, Menüs hell leicht grau auf weißer Seite, wie dunkel heller als die Seite (Gürkan, 08.11.2026; vorher Weiß) */
  --bg-field: var(--color-canvas);   /* Felder hell weiß: heben sich von den grauen Karten ab, wie dunkel die aufgehellte Fläche */
  --bg-subnav: var(--color-canvas-80);
  --bg-muted: var(--color-neutral-100);           /* graue Flächen: Tabellenkopf, Tab-Leiste, Umschalter */
  --sidebar-bg: var(--color-neutral-50);
  --sidebar-fg: var(--color-neutral-950);
  --sidebar-label: color-mix(in srgb, var(--color-neutral-950) 70%, transparent);
  --sidebar-border: var(--color-neutral-200);
  --sidebar-item-hover: var(--color-neutral-150);
  --sidebar-item-active: var(--color-neutral-175);

  /* Text */
  --text-primary: var(--color-neutral-950);
  --text-secondary: var(--color-neutral-550);     /* 5.33:1 auf Weiß, ≥ 4.5:1 auf grauen Flächen */
  --text-placeholder: var(--color-neutral-550);

  /* Aktion & Status */
  --accent: var(--color-primary);                 /* Links, interaktiver Text, Auswahl */
  --button-bg: var(--color-primary);
  --button-bg-hover: var(--color-primary-focus);
  --button-bg-active: color-mix(in srgb, var(--color-primary) 92%, var(--color-neutral-950));   /* gedrückt: dunkler, Weiß darauf kontrastreicher */
  --button-fg: var(--color-on-primary);
  --focus-ring: var(--color-primary-focus);
  --danger-bg: var(--color-error);                /* Löschen-Button: Weiß darauf 5.38:1 */
  --danger-bg-hover: color-mix(in srgb, var(--color-error) 92%, var(--color-neutral-950));
  --danger-bg-active: color-mix(in srgb, var(--color-error) 85%, var(--color-neutral-950));
  --danger-fg: var(--color-on-primary);
  --outline-bg: var(--color-neutral-150);         /* Secondary-Button: graue Fläche ohne Rahmen */
  --outline-border: transparent;
  --outline-hover: var(--color-neutral-200);
  --switch-track: var(--color-neutral-200);       /* Schalter aus */
  --switch-thumb: var(--color-canvas);
  --tab-active-bg: var(--color-canvas);           /* gewählter Tab in der grauen Leiste */
  --tab-active-border: transparent;
  --utility-bg: var(--color-neutral-900);
  --utility-bg-hover: var(--color-neutral-800);
  --utility-fg: var(--color-on-dark);
  --tooltip-bg: var(--color-canvas);              /* hell wie Menüs, mit feiner Linie und Schatten; dunkel entsprechend dunkel */
  --tooltip-border: var(--color-neutral-200);
  --tooltip-fg: var(--color-neutral-950);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-error);
  --status-tint: 8%;                              /* [Annahme] Farbanteil getönter Hinweisflächen */
  --text-on-tint: color-mix(in srgb, var(--text-primary) 62%, var(--bg-card));   /* Fließtext auf getönten Flächen (Hinweis): ≥ 4,5:1 auch mit Tönung */

  /* Diagramm-Serien */
  --chart-1: var(--color-chart-1); --chart-2: var(--color-chart-2); --chart-3: var(--color-chart-3); --chart-4: var(--color-chart-4);
  --chart-5: var(--color-chart-5); --chart-6: var(--color-chart-6); --chart-7: var(--color-chart-7); --chart-8: var(--color-chart-8);

  /* Ebenen – hell und dunkel gleich */
  --elevation-control: var(--shadow-xs);   /* Buttons, Felder, Checkbox, Schalter, Schieberegler-Knopf */
  --elevation-card: none;                  /* Karten flach mit feiner Linie: auf grauer Fläche wirkte der Schatten wie eine doppelte Kante (Gürkan, 08.11.2026) */
  --elevation-tab: var(--shadow-sm);       /* gewählter Tab, Umschalter: hebt sich von der grauen Leiste ab */
  --elevation-2: var(--shadow-md);         /* Dropdown, Menü, Popover, Kalender */
  --elevation-3: var(--shadow-lg);         /* Benachrichtigung, mobile Sidebar */
  --elevation-4: var(--shadow-lg);         /* Dialoge, Seitenpanel, Befehlspalette */

  /* Linien */
  --border-hairline: var(--color-neutral-200);
  --border-field: var(--color-neutral-300);       /* nur Felder, Checkbox, Radio – fein (≈ 1,5:1, bewusst unter WCAG 1.4.11, Entscheidung Gürkan) */
  --border-field-hover: var(--color-neutral-400);
  --border-interactive-hover: var(--color-neutral-300); /* Karten- & Chip-Hover */

  /* Deaktiviert & Platzhalter */
  --disabled-bg: var(--color-neutral-100);
  --disabled-text: var(--color-neutral-400);
  --render-fill: var(--color-canvas);             /* Platzhalter für Produktbilder */
  --render-stage: var(--color-neutral-100);
  --shadow-image: var(--shadow-product);
}

/* --------------------------------------------------------------------------
   3. DARK MODE – nur Neuzuordnung vorhandener Tokens
   System-Einstellung: ein vollständiger Block. Umschalter (data-theme="dark") und dunkle Kachel
   (.surface-dark, Abschnitt 4) teilen sich eine gemeinsame Regel, dazu je ein eigener Teil.
   scripts/check.js prüft: Media-Block = gemeinsame Regel + Teil für [data-theme="dark"].
   Flächen in Stufen: Seite #0a0a0a, Karten/Menüs/Sidebar #171717, graue Flächen #262626, Linien Weiß 10 %.
   Gemischte Tokens (Fokusring, Chip, Tab-Leiste …) stehen nur in Abschnitt 5.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-canvas: var(--color-neutral-950);
    --bg-parchment: var(--color-neutral-950);
    --bg-tile-dark: var(--color-neutral-900);
    --bg-card: var(--color-neutral-900);
    --bg-field: var(--color-white-5);
    --bg-subnav: var(--color-neutral-950-80);
    --bg-muted: var(--color-neutral-800);
    --sidebar-bg: var(--color-neutral-900);
    --sidebar-fg: var(--color-neutral-50);
    --sidebar-label: color-mix(in srgb, var(--color-neutral-50) 70%, transparent);
    --sidebar-border: var(--color-white-10);
    --sidebar-item-hover: var(--color-neutral-850);
    --sidebar-item-active: var(--color-neutral-800);
    --text-primary: var(--color-neutral-50);
    --text-secondary: var(--color-neutral-400);
    --text-placeholder: var(--color-neutral-400);
    --accent: var(--color-primary-on-dark);
    --button-bg: var(--color-primary-focus);        /* heller auf dunklen Flächen, Weiß darauf 4.78:1 */
    --button-bg-hover: var(--color-primary);        /* Hover wird dunkler – heller würde der weiße Text unter 4.5:1 fallen */
    --focus-ring: var(--color-primary-on-dark);
    --outline-bg: var(--color-white-10);         /* Secondary dunkel: graue Fläche ohne Rahmen */
    --outline-border: transparent;
    --outline-hover: var(--color-white-15);
    --switch-track: var(--color-white-20);
    --switch-thumb: var(--color-neutral-50);
    --tab-active-bg: var(--color-white-5);
    --tab-active-border: var(--color-white-15);
    --utility-bg: var(--color-neutral-800);
    --utility-bg-hover: var(--color-neutral-700);
    --tooltip-bg: var(--color-neutral-800);
    --tooltip-border: var(--color-white-10);
    --tooltip-fg: var(--color-neutral-50);
    --success: var(--color-success-on-dark);
    --warning: var(--color-warning-on-dark);
    --error: var(--color-error-on-dark);
    --status-tint: 14%;
    --text-on-tint: var(--text-secondary);
    --chart-1: var(--color-chart-1-dark); --chart-2: var(--color-chart-2-dark); --chart-3: var(--color-chart-3-dark); --chart-4: var(--color-chart-4-dark);
    --chart-5: var(--color-chart-5-dark); --chart-6: var(--color-chart-6-dark); --chart-7: var(--color-chart-7-dark); --chart-8: var(--color-chart-8-dark);
    --border-hairline: var(--color-white-10);
    --border-field: var(--color-white-15);        /* feine Linie (Entscheidung Gürkan) */
    --border-field-hover: var(--color-white-20);
    --border-interactive-hover: var(--color-white-20);
    --disabled-bg: var(--color-neutral-800);
    --disabled-text: var(--color-neutral-500);
    --render-fill: var(--color-neutral-800);
    --render-stage: var(--color-neutral-900);
  }
}

/* Gemeinsam: Umschalter und dunkle Kachel */
[data-theme="dark"],
.surface-dark {
  --bg-field: var(--color-white-5);
  --sidebar-fg: var(--color-neutral-50);
  --sidebar-label: color-mix(in srgb, var(--color-neutral-50) 70%, transparent);
  --sidebar-border: var(--color-white-10);
  --sidebar-item-hover: var(--color-neutral-850);
  --sidebar-item-active: var(--color-neutral-800);
  --text-primary: var(--color-neutral-50);
  --text-secondary: var(--color-neutral-400);
  --text-placeholder: var(--color-neutral-400);
  --accent: var(--color-primary-on-dark);
  --button-bg: var(--color-primary-focus);        /* heller auf dunklen Flächen, Weiß darauf 4.78:1 */
  --button-bg-hover: var(--color-primary);        /* Hover wird dunkler – heller würde der weiße Text unter 4.5:1 fallen */
  --focus-ring: var(--color-primary-on-dark);
  --outline-bg: var(--color-white-10);         /* Secondary dunkel: graue Fläche ohne Rahmen */
  --outline-border: transparent;
  --outline-hover: var(--color-white-15);
  --switch-track: var(--color-white-20);
  --switch-thumb: var(--color-neutral-50);
  --tab-active-bg: var(--color-white-5);
  --tab-active-border: var(--color-white-15);
  --tooltip-bg: var(--color-neutral-800);
  --tooltip-border: var(--color-white-10);
  --tooltip-fg: var(--color-neutral-50);
  --success: var(--color-success-on-dark);
  --warning: var(--color-warning-on-dark);
  --error: var(--color-error-on-dark);
  --status-tint: 14%;
  --text-on-tint: var(--text-secondary);
  --chart-1: var(--color-chart-1-dark); --chart-2: var(--color-chart-2-dark); --chart-3: var(--color-chart-3-dark); --chart-4: var(--color-chart-4-dark);
  --chart-5: var(--color-chart-5-dark); --chart-6: var(--color-chart-6-dark); --chart-7: var(--color-chart-7-dark); --chart-8: var(--color-chart-8-dark);
  --border-hairline: var(--color-white-10);
  --border-field: var(--color-white-15);        /* feine Linie (Entscheidung Gürkan) */
  --border-field-hover: var(--color-white-20);
  --border-interactive-hover: var(--color-white-20);
  --disabled-text: var(--color-neutral-500);
  --render-fill: var(--color-neutral-800);
  --render-stage: var(--color-neutral-900);
}

/* Nur Umschalter: Seite und Flächen in den Stufen des Dark Mode */
[data-theme="dark"] {
  --utility-bg: var(--color-neutral-800);
  --utility-bg-hover: var(--color-neutral-700);
  color-scheme: dark;
  --bg-canvas: var(--color-neutral-950);
  --bg-parchment: var(--color-neutral-950);
  --bg-tile-dark: var(--color-neutral-900);
  --bg-card: var(--color-neutral-900);
  --bg-subnav: var(--color-neutral-950-80);
  --bg-muted: var(--color-neutral-800);
  --sidebar-bg: var(--color-neutral-900);
  --disabled-bg: var(--color-neutral-800);
}

/* --------------------------------------------------------------------------
   4. KONTEXT – dunkle Kachel im hellen Modus (<section class="surface-dark">)
   Wie der Dark Mode (gemeinsame Regel oben), alles eine Stufe heller als die Kachel:
   Karten #262626, graue Flächen #333333. Ohne color-scheme, Scrollbars und Felder des Browsers bleiben hell.
   -------------------------------------------------------------------------- */
.surface-dark {
  --bg-card: var(--color-neutral-800);
  --bg-muted: var(--color-neutral-700);
  --sidebar-bg: var(--color-neutral-950);
  --disabled-bg: var(--color-neutral-700);
  --utility-bg: var(--color-neutral-700);       /* hebt sich von der Karte ab */
  --utility-bg-hover: color-mix(in srgb, var(--color-neutral-700) 75%, var(--color-neutral-500));
  background-color: var(--bg-tile-dark);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   5. ABGELEITETE TOKENS – aus anderen Tokens gemischt
   Custom Properties werden dort ausgerechnet, wo sie stehen. Deshalb in jedem Farbkontext neu
   (Seite, Vorschau mit data-theme, dunkle Kachel), sonst erbt z. B. .surface-dark den hellen Wert.
   Nur hier, nicht in den Blöcken oben (scripts/check.js prüft das).
   -------------------------------------------------------------------------- */
:root,
[data-theme],
.surface-dark {
  --tab-bar-bg: color-mix(in srgb, var(--text-primary) var(--tab-bar-tint), transparent);   /* durchscheinend: auf Weiß, Grau und Karten sichtbar */
  --chip-bg: color-mix(in srgb, var(--text-primary) var(--chip-tint), transparent);
  --chip-bg-hover: color-mix(in srgb, var(--text-primary) var(--chip-tint-hover), transparent);
  --chip-bg-active: color-mix(in srgb, var(--text-primary) var(--chip-tint-active), transparent);
  --utility-bg-active: color-mix(in srgb, var(--utility-bg-hover) 50%, var(--utility-bg)); /* gedrückt: zwischen Ruhe und Hover */
  --info: var(--accent);
  /* Fokus: Ring direkt am Element, weich um Felder, kräftiger bei Tastatur-Fokus */
  --ring: color-mix(in srgb, var(--focus-ring) var(--ring-tint), transparent);
  --ring-strong: color-mix(in srgb, var(--focus-ring) var(--ring-tint-strong), transparent);
  --ring-error: color-mix(in srgb, var(--error) var(--ring-error-tint), transparent);
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE – 1440 · 1068 · 833 · 734 · 640 · 419
   -------------------------------------------------------------------------- */
@media (max-width: 1068px) {
  :root {
    --hero-size-current: 28px;                          /* 32 → 28 */
    --hero-lh-current: var(--type-display-lg-lh);
  }
}
@media (max-width: 734px) {
  :root { --tile-pad-y: var(--space-xxl); }             /* Abschnitte 48 → 32 */
}
@media (max-width: 640px) {
  :root { --hero-size-current: var(--type-display-lg-size); }   /* 28 → 24 */
}

/* --------------------------------------------------------------------------
   7. TOUCH – Finger statt Maus: Klickflächen und Felder auf 44 px
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  :root {
    --touch-min: 44px;
    --input-height: 44px;
    --item-height: 44px;
    --input-font-size: 16px;
    --btn-pad-y: 11px;
    --btn-utility-pad-y: 10px;
    --chip-pad-y: 12px;
    --control-size: 20px;
    --switch-width: 40px;
    --switch-height: 24px;
  }
}