/* =====================================================================
   TKS Web · Design Tokens  v1.0  (Quelle: App Redesign B · tks_tokens.dart)
   Ebene 1  Primitive  --tks-*   → nie direkt in Komponenten verwenden
   Ebene 2  Semantik   --bg, --fg, --red …  → Komponenten nutzen NUR diese
   Ebene 3  Komponenten-Tokens (--btn-*, --field-*) in site.css

   EINHEITEN: keine px-Werte im CSS. Umrechnung 1px = 0.0625rem (Basis 16).
   HINWEIS: px kommt hier nur noch in KOMMENTAREN vor – als Referenzangabe
   zur Erklärung [REF-PX], niemals als tatsächlicher CSS-Wert.

   Breakpoints (mobile first, nur min-width), Media Queries in em:
   sm    37.5em    [REF-PX 600]
   quick 48em      [REF-PX 768]
   md    48.75em   [REF-PX 780]
   lg    61.25em   [REF-PX 980]
   xl    68.75em   [REF-PX 1100]
   2xl   75em      [REF-PX 1200]
   ===================================================================== */
:root{
/* ---------- 1 · Primitive: Farbe ---------- */
--tks-red-500:#C8102E;--tks-red-600:#9C0C24;--tks-red-300:#E8555A;--tks-red-200:#F07A7E;
--tks-white:#FFFFFF;--tks-n-25:#FAFAFA;--tks-n-50:#F1F1F3;--tks-n-100:#ECECEE;--tks-n-200:#D1D1D6;--tks-n-400:#8A8A92;--tks-n-500:#6B6B73;--tks-n-600:#56565C;--tks-n-900:#22222A;
--tks-basalt-1000:#050505;--tks-basalt-950:#0A0A0A;--tks-basalt-900:#0F0F0F;--tks-basalt-850:#131313;--tks-basalt-800:#1C1C1C;--tks-basalt-750:#262626;--tks-ink:#0A0A0B;
--tks-cream:#F5F1E6;
--tks-green-l:#2E7D32;--tks-green-d:#3F9E44;--tks-amber-l:#F59E0B;--tks-amber-d:#F0A92A;--tks-amber-t:#96600A;--tks-bronze:#9A6A3F;
--tks-device:#1A1A1C;   /* Geraeterahmen (Handy-Mockup), in beiden Modi gleich */
/* Gürtel (App) */
--belt-weiss:#F5F1E6;--belt-gelb:#E8B33C;--belt-orange:#E8722A;--belt-gruen:#2E7D46;--belt-blau:#3A6FB0;--belt-dunkelblau:#1F4A6B;--belt-dunkelgruen:#1F6B3F;--belt-braun:#6B3F1A;--belt-schwarz:#0A0A0B;

/* ---------- 1 · Primitive: Schrift ---------- */
--font-sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
--fw-regular:400;--fw-medium:500;--fw-semi:600;--fw-bold:700;--fw-black:800;

/* ---------- 2 · Semantik: Farbe (hell) ---------- */
--bg:var(--tks-n-25);          /* Seitenhintergrund */
--card:var(--tks-white);       /* Karten, Formulare, Pillen */
--sunk:var(--tks-n-50);        /* abgesenkte Bänder, Felder, Chips */
--rule:var(--tks-n-100);       /* Haarlinie */
--rule-s:var(--tks-n-200);     /* kräftige Linie */
--fg:var(--tks-n-900);         /* Text primär */
--mute:var(--tks-n-600);       /* Text sekundär  (≥ 4.5:1) */
--faint:var(--tks-n-500);      /* Meta, Labels   (jetzt ≥ 4.5:1 auf bg/card/sunk) */
--ghost:var(--tks-n-200);      /* Rahmen Ghost-Button */
--red:var(--tks-red-500);      /* Aktion: Fläche, Marker */
--red-d:var(--tks-red-600);    /* Aktion gedrückt/hover */
--red-t:var(--tks-red-500);    /* roter TEXT (hell = Rot, dunkel = Rot-300) */
--red-on-inv:var(--tks-red-200);   /* roter Text AUF --inv: Rot-300 erreicht dort nur 4.2-4.4:1 */
--red-on-media:var(--tks-red-300); /* roter Text auf abgedunkeltem Bild/Video */
--on-red:var(--tks-white);
--inv:var(--tks-n-900);--invfg:var(--tks-cream);   /* invertierte Fläche (CTA-Band, Badges) */
--nav:rgba(250,250,250,.82);   /* Milchglas Kopfzeile */
--green:var(--tks-green-l);--warn:var(--tks-amber-l);--bronze:var(--tks-bronze);
--warn-t:var(--tks-amber-t);   /* Warnung als TEXT/Rahmen (hell: dunkleres Amber, sonst < 4.5:1) */
--field-line:var(--tks-n-400); /* Feldrahmen, ≥ 3:1 gegen card/sunk (WCAG 1.4.11) */
--overlay:var(--tks-ink);      /* Video-/Bild-Abdunklung */
/* ---------- 2 · Semantik: Deckschichten (aus site.css hierher geholt) ----------
   Alle Werte 1:1 uebernommen, nur benannt. rgb(245,241,230) = --tks-cream,
   rgb(10,10,11) = --tks-ink. Literal notiert, damit die Darstellung exakt
   gleich bleibt (color-mix/relative Farben koennten runden). */
--on-inv-kick:rgba(245,241,230,.7);    /* Kicker auf invertierter Flaeche */
--on-inv-mute:rgba(245,241,230,.78);   /* Fliesstext auf invertierter Flaeche */
--on-inv-text:rgba(245,241,230,.82);   /* Hinweistext auf invertierter Flaeche */
--on-inv-line:rgba(245,241,230,.3);    /* Ghost-Rahmen im CTA-Band */
--on-media-text:rgba(245,241,230,.86); /* Fliesstext auf Bild/Video */
--on-media-line:rgba(245,241,230,.25); /* Haarlinie auf Bild/Video */
--on-media-ghost:rgba(245,241,230,.35);/* Ghost-Rahmen auf Bild/Video */
--scrim-0:rgba(10,10,11,0);            /* Verlaufs-Nullpunkt (Hero) */
--scrim-30:rgba(10,10,11,.3);
--scrim-35:rgba(10,10,11,.35);
--scrim-45:rgba(10,10,11,.45);         /* weicher Textschatten auf Medien */
--scrim-55:rgba(10,10,11,.55);         /* harter Textschatten auf Medien */
--scrim-62:rgba(10,10,11,.62);
--scrim-90:rgba(10,10,11,.9);
--shadow-media:rgba(0,0,0,.4);         /* Schatten grosser Ziffern auf Bild */
--phone-frame:var(--tks-device);       /* Rahmen des Handy-Mockups */
--on-media:var(--tks-cream);   /* Text auf Bild/Video (immer hell) */
/* Gruppenfarben (Stundenplan-Streifen) */
--g-kinder:#C8A032;--g-jugend:#1A4D8F;--g-erw:#1F6B3F;--g-ober:#6B3F1A;--g-szen:#7A7A82;--g-alle:var(--tks-red-500);

/* ---------- 2 · Semantik: Typo-Skala (fluid 22.5rem → 90rem Viewport) ----------
   [REF-PX] Bezugsbereich 360 → 1440. clamp() rechnet ausschließlich in rem + vw;
   die Vorfaktoren sind die alten px-Vorfaktoren / 16, die vw-Anteile bleiben
   unverändert → identische Ergebnisse bei jeder Viewport-Breite. */
--fs-micro:.65625rem;                                            /* Pill, Meta-Versalien */
--fs-kicker:.75rem;                                              /* Sektions-Kicker, Nav */
--fs-btn:.71875rem;                                              /* Button-Label */
--fs-small:clamp(.8125rem,.775rem + .15vw,.875rem);              /* Zusatz, Captions */
--fs-body:1rem;            /* Fließtext */
--fs-lede:clamp(1.0625rem,.99375rem + .35vw,1.25rem);            /* Einleitung */
--fs-row:clamp(1.0625rem,1.01875rem + .2vw,1.1875rem);           /* Zeilen-Titel, FAQ */
--fs-h3:clamp(1.25rem,1.16875rem + .4vw,1.5rem);
--fs-h2:clamp(1.75rem,1.41875rem + 1.5vw,3rem);
--fs-h1:clamp(2.75rem,1.95625rem + 3.5vw,6.5rem);
--fs-display:clamp(3.25rem,1.94375rem + 5.8vw,9.25rem);          /* nur Video-Hero */
--fs-stat:clamp(2.25rem,1.91875rem + 1.5vw,3.5rem);
--fs-quote:clamp(1.75rem,1.33125rem + 1.9vw,3.5rem);
--lh-tight:.92;--lh-head:1.05;--lh-snug:1.25;--lh-body:1.6;
--ls-display:0;--ls-h1:0;--ls-h2:0;--ls-h3:0;--ls-caps:.14em;--ls-kicker:.18em;--ls-nav:.09375rem;
--measure-hero:12ch;--measure-h1:14ch;--measure-h2:18ch;--measure-quote:22ch;--measure-lede:52ch;--measure-body:64ch;

/* ---------- 2 · Semantik: Abstand ---------- */
--s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.25rem;--s-6:1.5rem;--s-8:2rem;--s-10:2.5rem;--s-12:3rem;--s-16:4rem;--s-20:5rem;
--gutter:clamp(1.25rem,5vw,4rem);                    /* Seitenrand (App: 1.25rem) */
--section:clamp(3.5rem,2.75rem + 3.4vw,6rem);       /* Sektionsabstand (Redesign: enger, Rhythmus statt Einheits-Weißraum) */
--gap:clamp(1rem,.75rem + 1.1vw,2rem);               /* Raster-Abstand */
--pad-card:clamp(1.25rem,1rem + 1.1vw,2rem);         /* Karten-Innenabstand */
--max:90rem;--max-prose:47.5rem;
--top-h:4rem;--quick-h:4.5rem;--hit:3rem;

/* ---------- 2 · Semantik: Form ---------- */
--r-pill:.25rem;--r-chip:.3125rem;--r-field:.375rem;--r-card:.4375rem;--r-dialog:.5rem;--r-sheet:.875rem;
/* Markenzeichen: nur oben rechts + unten links rund */
--shape-pill:0 var(--r-pill) 0 var(--r-pill);
--shape-chip:0 var(--r-chip) 0 var(--r-chip);
--shape-field:0 var(--r-field) 0 var(--r-field);
--shape-card:0 var(--r-card) 0 var(--r-card);
--shape-dialog:0 var(--r-dialog) 0 var(--r-dialog);
--shape-sheet:0 var(--r-sheet) 0 var(--r-sheet);

/* ---------- 2 · Semantik: Tiefe & Bewegung ---------- */
--sh:0 .0625rem .125rem rgba(10,10,11,.045),0 .5rem 1.125rem -.625rem rgba(10,10,11,.1);
--shHi:0 .125rem .25rem rgba(10,10,11,.05),0 1.5rem 3.5rem -2rem rgba(10,10,11,.3);
--ease:cubic-bezier(.2,.7,.2,1);--dur-fast:160ms;--dur:240ms;
--lift:-.25rem;--nudge:.25rem;--row-shift:.5rem;
--z-quick:48;--z-menu:49;--z-top:50;--z-skip:99;
color-scheme:light}

/* ---------- Dunkel „Basalt" (Voreinstellung) ---------- */
:root[data-theme="dark"]{
--bg:var(--tks-basalt-1000);--card:var(--tks-basalt-850);--sunk:var(--tks-basalt-950);
--rule:var(--tks-basalt-800);--rule-s:var(--tks-basalt-750);
--fg:var(--tks-cream);--mute:rgba(245,241,230,.66);--faint:rgba(245,241,230,.54);--ghost:rgba(245,241,230,.22);
--red-t:var(--tks-red-300);
/* invertierte Flaeche muss sich im Dunkelmodus von --card (#131313) abheben,
   sonst verschwinden .notice.inv/.path.inv/.mega-pt optisch in der Karte. */
--inv:var(--tks-basalt-750);--invfg:var(--tks-cream);
--nav:rgba(5,5,5,.78);
--green:var(--tks-green-d);--warn:var(--tks-amber-d);--warn-t:var(--tks-amber-d);
--field-line:rgba(245,241,230,.36);
--g-jugend:#3A6FB0;--g-erw:#2E7D46;--g-ober:#8A5A30;
--sh:0 0 0 .0625rem rgba(255,255,255,.05),0 .5rem 1.125rem -.75rem #000;
--shHi:0 0 0 .0625rem rgba(255,255,255,.08),0 1.5rem 3.5rem -2rem #000;
color-scheme:dark}

/* =====================================================================
   Breakpoints · @custom-media-Ersatz (reine Dokumentation)
   Media Queries können KEINE CSS-Variablen auswerten – die --bp-* unten
   sind daher nur Nachschlagewerte; in @media den em-Wert literal tippen.
   Immer em (nicht rem, nicht px): em in Media Queries folgt der
   Browser-Grundschrift → zoom- und nutzereinstellungsfest.

   Wunschsyntax (postcss-custom-media, hier bewusst NICHT aktiv):
     @custom-media --sm    (min-width: 37.5em);
     @custom-media --quick (min-width: 48em);
     @custom-media --md    (min-width: 48.75em);
     @custom-media --lg    (min-width: 61.25em);
     @custom-media --xl    (min-width: 68.75em);
     @custom-media --2xl   (min-width: 75em);

   Schreibweise im CSS:  @media (min-width:48.75em){ … }
   ===================================================================== */
:root{
--bp-sm:37.5em;     /* [REF-PX 600]  kleine Tablets / große Handys quer */
--bp-quick:48em;    /* [REF-PX 768]  Quick-Leiste */
--bp-md:48.75em;    /* [REF-PX 780]  Haupt-Umbruch Navigation */
--bp-lg:61.25em;    /* [REF-PX 980]  Desktop-Raster */
--bp-xl:68.75em;    /* [REF-PX 1100] weites Desktop */
--bp-2xl:75em;      /* [REF-PX 1200] maximale Spaltigkeit */
}