@layer tokens{
/* ═══ esszehNET v2 · tokens.css — gemeinsame Geometrie, Schrift und Bewegung; Farben ausschliesslich in theme-dark.css / theme-light.css ═══
   Keine Regeln, nur Variablen. Screens verwenden ausschliesslich diese Namen. */
:root{
  /* Gemeinsamer App-/Login-Kopf: dieselbe Zeile, auch ohne Profilknopf. */
  --shell-head-row-size:38px;
  --shell-head-height:calc(env(safe-area-inset-top) + var(--sp-2) + var(--shell-head-row-size) + var(--sp-3) + 1px);
  /* Schrift */
  --f: 'Outfit', system-ui, -apple-system, sans-serif;
  /* Schriftskala (verbindlich, gilt fuer ALLE Screens — Stand MEHR/Mitglieder):
     11.25 Mikro-Kapitaelchen · 12.5 Eyebrow/Status/Chip · 13.25 Unterzeile
     14.5 Fliesstext · 15.75 Zeilentitel/Name · 17 Kartentitel klein
     21 Karten-/Sheet-Titel · 24 Screen-Titel · 16 NUR Eingabefelder (iOS-Zoom) */
  --fs-mini: 11.25px; /* Mikro-Kapitaelchen */
  --fs-eb: 12.5px;    /* Eyebrow, Status, Chip */
  --fs-sub: 13.25px;  /* Unterzeile */
  --fs-body: 14.5px;  /* Fliesstext */
  --fs-row: 15.75px;  /* Zeilentitel, Name */
  --fs-val: 17px;     /* Kartentitel klein, Feldwert */
  --fs-lead: 21px;    /* Karten- und Sheet-Titel */
  --fs-title: 24px;   /* Screen-Titel */
  --fs-event-start: 28px; /* Große Startzeit in Terminkarten und Details */
  --fs-hero-day: 32px; /* Kompakte Tageszahl in Als-naechstes-Karten */
  --fs-hero-date: var(--fs-row); /* Wochentag und Monat in Als-naechstes-Karten */
  --fs-timeline-day: 28px; /* Tageszahl neben kleinen Terminkarten */
  --fs-timeline-date: var(--fs-body); /* Wochentag und Monat im selben Datumsblock */
  --fs-zahl: 40px;    /* die EINE grosse Kennzahl eines Screens (Summe, Enddatum, Stundenzahl) */
  --kreis-kopf: 56px;        /* Bildkopf einer Person oben in einer Karte */
  --kreis-liste: 40px;       /* Zeile in einer Liste, Verfasser im Feed */
  --fs-input: 16px;   /* Eingaben: nie kleiner, sonst zoomt iOS */
  --lsp-eb: 1.3px;

  /* Klar: gemeinsame semantische Schrift-/Konturrollen. Abstandsleiter bleibt unveraendert. */
  --klar-fw-title:400;
  --klar-fw-date:300; /* Gemeinsamer Schnitt für alle gestapelten Datumsblöcke. */
  --klar-fw-timeline-date:var(--klar-fw-date); /* Leichter Datumsblock neben kleinen Terminkarten */
  --klar-fw-row:500;
  --klar-fw-label:500;
  --klar-line-width:1px;
  --klar-kickoff-size:86px;
  --klar-match-ring-size:108px;
  --klar-match-crest-size:74px;
  --klar-mini-crest-size:48px;
  --klar-crest-safe-area:.88; /* Gleicher Bildanteil wie die normalisierten lokalen Wappen. */
  --klar-match-photo-height:164px;
  --klar-match-meet-width:96px;
  --motion-kickoff-orbit:7s;
  --motion-kickoff-orbit-inner:6s;
  --klar-hero-date-width:72px;
  --motion-scroll-fade:650ms;
  --motion-scroll-rise:850ms;
  --ease-scroll:cubic-bezier(.2,.75,.2,1);
  --scroll-reveal-distance:32px;
  --motion-emblem:800ms;
  --ease-emblem:cubic-bezier(.22,1,.36,1);

  /* Radien */
  --r-card: 16px;      /* V3B: Standard-Card (34/42 belegt); Dialog hat eigene Rolle */
  --r-dialog: 18px;    /* V3B: modales Fenster (.tp-infokarte) */
  --r-field: 12px;
  --r-chip: 999px;

  /* Raster — EINE Abstandsleiter, Basis 4. Keine Zwischenwerte.
     2 Haarabstand (Titel zu Unterzeile) · 4 Zeichen zu Wort · 8 eng zusammen
     12 Zeile innen · 16 Gruppe · 20 Block und Inhaltskante · 24 vor einer
     Abschnittsueberschrift · 32 grosser Absatz */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;
  --kachel-gap: var(--sp-4); /* 12px: Standardfuge zwischen echten Kacheln wie in Termine */
  --edge: var(--sp-6);   /* Inhaltskante links = rechts */
  --gap: var(--sp-3);
  --row-y: var(--sp-4); /* vertikale Polsterung einer Zeile */
  --row-x: 14px;        /* V3B: horizontales Innenmass der Standard-Zeile/Wahl-/Aufgabenkachel (28 belegte Nutzer) */

  /* Verbindlicher Seiten-/Card-Abschluss. Die Navigationsgeometrie ist kein
     Inhaltsabstand; sichtbare Endluecken kommen ausschliesslich aus diesen Tokens. */
  --nav-overlap: 48px;
  --screen-end-gap: var(--sp-6); /* endliche Seite: 20px oberhalb der Navigation */
  --card-end-gap: var(--sp-2);   /* Card: 4px nach Safe Area, Referenz Profil */

  /* Motion — appweiter Vertrag. Gleiche Rolle = exakt gleiche Dauer und gleiches Easing.
     Die Werte stehen NUR hier; Screens duerfen keine eigenen Millisekunden erfinden. */
  --motion-reduced: 1ms;
  --motion-state: 180ms;       /* Haken, Switch, Farbe, Border */
  --motion-progress: 200ms;    /* Fortschrittsbalken */
  --motion-team-background: 900ms; /* dekorative Team-Fotos: lange Überblendung im Sekundentakt */
  --motion-content: 220ms;     /* kleine Inhalts-/Kopfblenden */
  --motion-cover: 280ms;       /* ruhige Deckflaeche bei Inhaltswechsel */
  --motion-item-out: 220ms;    /* Zeile/Element verschwindet */
  --motion-item-in: 240ms;     /* Zeile/Element erscheint */
  --motion-nav: 240ms;         /* feste Navigation / Tastaturbewegung */
  --motion-expand: 260ms;      /* Auf-/Zuklappen */
  --motion-overlay: 200ms;     /* Dialog-Hintergrund */
  --motion-dialog: 220ms;      /* Dialogkarte */
  --motion-feedback: 350ms;    /* Fehlerfeedback / Shake */
  --motion-auth-step: 450ms;   /* Anmelde-Fortschritt */
  --motion-auth-return: 600ms; /* Abmelden: App weich in den Login ueberblenden */
  --motion-splash-hold: 1200ms; /* Kaltstart: Logo steht ruhig, bevor der Fade beginnt */
  --motion-splash-out: 650ms;  /* Kaltstart: weicher Uebergang in Login/App */
  --motion-dim: 300ms;         /* Verdunkelung beim Oeffnen */
  --motion-sheet: 360ms;       /* Card hinein / zum offenen Zustand zurueck */
  --motion-sheet-out: 700ms;   /* Ausfahrt wie Card-Referenz v2 */
  --motion-spinner: 800ms;     /* endlose Ladeanzeige */
  --motion-page-out: 240ms;
  --motion-page-in: 420ms;
  --motion-page-out-x: 18px;
  --motion-page-in-x: 26px;

  --ease-team-background: ease-in-out; /* ruhiger Fotowechsel */
  --ease-state: ease;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-sheet: cubic-bezier(.22,1,.36,1);
  --ease-sheet-out: cubic-bezier(.4,0,.2,1);
  --ease-content-out: cubic-bezier(.4,0,.67,1);
  --ease-cover: cubic-bezier(.33,0,.2,1);
  --ease-dialog: cubic-bezier(.32,1.15,.5,1);
  --ease-linear: linear;
  --ease-page-out: ease;
  --ease-page-in: cubic-bezier(.19,.92,.22,1);

  /* Ebenen — die EINE z-Skala der App (CSS-02). Innerhalb einer Komponente sind nur lokale
     Werte 0–5 erlaubt (eigener Stacking-Context per isolation:isolate); alles darueber nur ueber
     diese Tokens. Reihenfolge von unten nach oben: */
  --z-kopf: 40;         /* fester Screen-Kopf (.scr-head) */
  --z-ueberlage: 45;    /* auslaufender alter Screen bei Navigation (.sh-ueber) */
  --z-nav: 60;          /* Leiste oben (.scr-leiste) und Navigation unten (.sh-nav) */
  --z-toast: 150;       /* kurze Rueckmeldung */
  --z-sheet: 200;       /* Karten/Sheets von unten (.pf-wrap) */
  --z-dialog: 400;      /* modales Fenster (.tp-info) */
  --z-setup: 880;       /* Trainer-Erstlauf (.ms-host) */
  --z-auth: 900;        /* Anmeldung (.au-wrap); App-Splash darunter: calc(var(--z-auth) - 1) */
  --z-auth-sheet: 950;  /* Sheets ueber Anmeldung/Erstlauf (Datenschutz) */
  --z-geist: 9999;      /* Drag-Geist einer Aufstellung */
  --z-install: 9999;    /* Installations-Gate (eigener Kontext, nie gleichzeitig mit dem Geist) */
  --z-diagnose: 12000;  /* Performance-Diagnose */
  --z-splash: 19000;    /* Kaltstart-Splash */
  --z-fatal: 20000;     /* Server-/Sitzungs-Stopp */
  --z-sperre: 2147483647; /* Portrait-Sperre: ueber allem */

}
}