/* ═══════════════════════════════════════════════════════════════════════
   ÖFFENTLICH · 00 — TOKEN
   Nur Variablen. Keine Regel, die etwas gestaltet.

   Die öffentliche Seite hatte bis hierher **eine** Datei mit 2301 Zeilen und
   rund fünfzehn Variablen. Radien, Abstände und Grautöne standen als Zahlen
   mitten in den Regeln — `padding: 0.85rem`, `border-radius: 12px`,
   `color: #55555c`. Das ist der eigentliche Grund, warum die Seite
   „unaufgeräumt" wirkte: Es war kein Geschmacksproblem, sondern ein fehlendes
   Raster. Ein Wert, der nicht auf einer Skala liegt, ist eine Entscheidung,
   die niemand mehr nachvollziehen kann.

   ── DIE EBENEN ────────────────────────────────────────────────────────
   Dieselbe Idee wie im Hub, nur hell. Die Zeile unten legt fest, wer
   gewinnt — unabhängig davon, wie viele Klassen ein Selektor hat.

   `oe-bestand` ist die alte `style.css`. Sie steht zwischen Grundlage und
   Baukasten: Was noch nicht umgezogen ist, gestaltet sie weiter; alles Neue
   schlägt sie, ohne dass ein Selektor dafür spezifischer werden muss. Wenn
   eine Seite umzieht, fällt ihr Teil dort heraus — bis die Ebene leer ist
   und verschwinden kann.
   ═════════════════════════════════════════════════════════════════════ */

@layer oe-token, oe-basis, oe-bestand, oe-bausteine, oe-geruest, oe-seiten;

@layer oe-token {

:root {
  /* ── Neutrale Töne ──────────────────────────────────────────────────
     Kein reines Grau: In allen steckt ein Hauch Violett — dieselbe Familie
     wie im dunklen Hub. Dadurch wirken die beiden Oberflächen verwandt,
     obwohl die eine hell und die andere dunkel ist. Und ein Grau mit
     Farbstich sieht gewählt aus, ein reines Grau sieht vergessen aus. */
  --n-00: #ffffff;
  --n-05: #f7f6f9;   /* Seitengrund */
  --n-10: #efedf3;
  --n-15: #e6e3ec;
  --n-20: #dcd8e4;
  --n-30: #c2bccd;
  --n-40: #9d96ab;
  --n-50: #7b7489;
  --n-60: #5c5568;
  --n-70: #423c4d;
  --n-80: #2b2734;
  --n-90: #1a1822;
  --n-99: #0d0c11;

  /* ── Marke ──────────────────────────────────────────────────────────
     ⚠ Zwei Rot-Werte, und der Unterschied ist Absicht: `--marke` ist die
       FLÄCHE (Knopf, Chip, Balken) — dort steht weisse Schrift darauf und
       der Kontrast stimmt. `--marke-text` ist dunkler und der einzige Wert,
       der als SCHRIFT auf Weiss stehen darf. Kap. 10.1a③ rechnet das vor:
       Das helle Rot kommt auf Weiss nur auf 4,6:1 — genug für Grosses,
       zu wenig für einen Satz. */
  --marke:        #e0093c;
  --marke-text:   #b6002b;
  --marke-dunkel: #9e0025;
  --marke-hell:   #ff2d5a;
  --marke-weich:  #fdeef2;
  --marke-linie:  rgba(224, 9, 60, .30);

  /* Alte Namen aus style.css — sie stehen an hunderten Stellen. */
  --accent:       var(--marke);
  --accent-hover: var(--marke-dunkel);
  --accent-soft:  var(--marke-weich);
  --brand-500: var(--marke); --brand-600: var(--marke-dunkel); --brand-400: var(--marke-hell);

  /* ── Flächen ────────────────────────────────────────────────────────
     Drei Ebenen, mehr braucht eine helle Seite nicht: der Grund, die
     Karte, und die zurückgenommene Fläche für Abschnitte im Wechsel. */
  --grund:      var(--n-05);
  --flaeche:    var(--n-00);
  --flaeche-2:  var(--n-10);
  --flaeche-3:  var(--n-15);
  /* ⚠ Zwei helle Gründe, nicht einer. „Hell" heisst nicht „alles weiss":
     Ohne einen zweiten, minimal wärmeren Ton fällt jede Abgrenzung auf
     eine Linie zurück, und die Seite wirkt flach. Der Unterschied ist
     absichtlich klein — er soll ordnen, nicht auffallen. */
  --papier:     #f6f5f8;
  --dunkel:     var(--n-99);   /* Abschnitte im Wechsel, Fussleiste */
  --dunkel-2:   var(--n-90);
  --bg: var(--grund); --bg-soft: var(--flaeche-2); --surface: var(--flaeche);
  --surface-2: var(--flaeche-2); --dark: var(--dunkel); --dark-2: var(--dunkel-2);

  /* ── Linien ─────────────────────────────────────────────────────────── */
  --linie:       rgba(26, 24, 34, .10);
  --linie-stark: rgba(26, 24, 34, .18);
  --linie-licht: rgba(255, 255, 255, .12);   /* auf dunklen Abschnitten */
  --line: var(--linie); --line-strong: var(--linie-stark);

  /* ── Text ───────────────────────────────────────────────────────────
     Drei Stufen, nachgerechnet gegen Weiss: 15,8 : 1 · 7,4 : 1 · 4,9 : 1.
     Alles unter --text-still ist Dekoration, kein Text. */
  --text:       var(--n-90);
  --text-leise: var(--n-60);
  --text-still: var(--n-50);
  --text-invers:       var(--n-00);
  --text-invers-leise: rgba(255, 255, 255, .72);
  --text-muted: var(--text-leise); --text-inv: var(--text-invers);
  --text-inv-muted: var(--text-invers-leise);

  /* ── Zustände ──────────────────────────────────────────────────────
     Ausdrücklich nicht die Markenfarbe. Gefahr ist rot wie die Marke — der
     Unterschied läuft über die FORM (Kap. 10.1a②): Hauptaktion gefüllt,
     gefährliche Aktion als Umriss mit Symbol. */
  --ok-500:   #0f7b52;  --ok-bg:   #e8f6ef;
  --warn-500: #9a6100;  --warn-bg: #fdf3e2;
  --err-500:  #c2001f;  --err-bg:  #fdecef;
  --info-500: #1857b8;  --info-bg: #eaf1fd;

  /* Bereichsfarben — dieselben Rollen wie im Hub, für hellen Grund gemischt. */
  --c-match:   #d1002f;
  --c-event:   #6d28d9;
  --c-stream:  #7c2fd1;
  --c-content: #0369a1;
  --c-verein:  #047857;
  --c-frist:   #b45309;

  /* ── Schrift ────────────────────────────────────────────────────────
     Anton trägt Überschriften, Poppins die Fläche, Mono die Zahlen. Mono
     ist neu und hat einen Grund (Kap. 10.1.2): Spielstände, Uhrzeiten und
     Countdowns springen mit proportionaler Schrift bei jeder Änderung. */
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Poppins', 'TwemojiFlags', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace;

  /* ── Grössen (Kap. 10.1.2, öffentliche Spalte) ──────────────────────
     Modulare Skala, Faktor 1,2 — von Hand nachjustiert. Die drei grossen
     Stufen wachsen mit dem Fenster, alles darunter steht fest: Ein
     Fliesstext, der bei jedem Fensterwechsel die Grösse ändert, liest sich
     unruhig. */
  /* Eine Stufe über allem, für Startseite und Zahlenwand. Sie ist die
     einzige Stelle, an der Schrift wie ein Bild wirken darf. */
  --t-riesig:  clamp(3rem, 9vw, 6.5rem);      /* 48 → 104 */
  --t-display: clamp(2.5rem, 6.5vw, 4rem);    /* 40 → 64 */
  --t-h1:      clamp(2rem, 4.2vw, 2.5rem);    /* 32 → 40 */
  --t-h2:      clamp(1.5rem, 2.8vw, 2rem);    /* 24 → 32 */
  --t-h3:      1.5rem;      /* 24 */
  --t-gross:   1.25rem;     /* 20 */
  --t-body:    1.0625rem;   /* 17 */
  --t-klein:   0.875rem;    /* 14 */
  --t-mikro:   0.75rem;     /* 12 */

  /* Zeilenhöhen: Überschriften eng, Fliesstext weit. */
  --zeile-eng:  1.1;
  --zeile-mit:  1.35;
  --zeile-weit: 1.65;
  /* Die wichtigste Zahl für Lesbarkeit — 60 bis 75 Zeichen. */
  --lesebreite: 68ch;
  --seitenbreite: 1200px;
  --seitenbreite-eng: 820px;
  /* Für Bänder, die breiter atmen dürfen als der Lesetext — Bildstrecken,
     Zahlenwände, Kachelraster. */
  --seitenbreite-weit: 1440px;
  /* Die Randspalte der Bänder: dort steht das Etikett, im Hauptfeld der
     Inhalt. Eine feste Breite, damit alle Etiketten auf einer Linie
     stehen — sonst wandert die Kante von Abschnitt zu Abschnitt. */
  --schiene: 10rem;

  /* ── Abstände ───────────────────────────────────────────────────────
     4-px-Basis, feste Stufen. Kein `margin: 13px` mehr. Regel: Der Abstand
     INNERHALB einer Gruppe ist immer kleiner als der ZWISCHEN Gruppen —
     das ist der häufigste Grund, warum Layouts sortiert wirken. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  /* Luft zwischen zwei Abschnitten. Wächst mit dem Fenster, weil ein fester
     Wert auf dem Handy erdrückt und auf dem Schirm verloren wirkt. */
  --abschnitt: clamp(3.5rem, 8vw, 7rem);

  /* ── Radien ─────────────────────────────────────────────────────────── */
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-full: 999px;
  --radius-s: var(--r-s); --radius-m: var(--r-m); --radius-l: var(--r-l);

  /* ── Schatten ───────────────────────────────────────────────────────
     Zweiteilig: eine enge dunkle Kante für die Schärfe, eine weite weiche
     für die Atmosphäre. Ein einzelner weicher Schatten sieht aus wie ein
     Fleck. */
  --heben-1: 0 1px 2px rgba(26, 24, 34, .06), 0 1px 1px rgba(26, 24, 34, .04);
  --heben-2: 0 2px 4px rgba(26, 24, 34, .06), 0 8px 20px rgba(26, 24, 34, .08);
  --heben-3: 0 4px 8px rgba(26, 24, 34, .07), 0 24px 48px rgba(26, 24, 34, .12);
  --shadow-s: var(--heben-1); --shadow-m: var(--heben-2); --shadow-l: var(--heben-3);

  --focus: var(--marke-text);

  /* ── Bewegung ───────────────────────────────────────────────────────
     Alles unter 200 ms. Was länger dauert, fühlt sich nach Warten an. */
  --dauer-schnell: .14s;
  --dauer-normal:  .19s;
  --kurve: cubic-bezier(.22, 1, .36, 1);
  --ease: var(--kurve);

  --nav-h: 72px;
  --container: var(--seitenbreite);
}

}