/* ═══════════════════════════════════════════════════
   tokens.css — Design Tokens (EINZIGE Quelle für alle CSS-Werte)
   Änderung hier wirkt ÜBERALL automatisch.
   ═══════════════════════════════════════════════════ */

:root {
    /* ── Backgrounds ── */
    --bg:         #0b0908;
    --bg2:        #100d0b;
    --card:       #161210;
    --card-alt:   #1c1714;

    /* ── Brand / Gold ── */
    --gold:       #c9a040;
    --gold-h:     #e8b84b;
    --gold-hover: #e8b84b;          /* alias für layout.php-Kontext */
    --gold-dim:   rgba(201,160,64,0.12);

    /* ── Text ── */
    --text:       #f0e6d0;
    --muted:      #9a8868;

    /* ── Borders ── */
    --border:     #2c2620;
    --bm:         #3d3428;
    --border-mid: #3a3a3a;          /* alias für layout.php-Kontext */

    /* ── Status ── */
    --green:      #5cc88a;
    --yellow:     #dda040;
    --red:        #e07070;
    --blue:       #7ab0ff;

    /* ── Zauberschulen (Gradanzeige im Charakterbogen) und Muenzen (Geld), #932 ── */
    --schule-abj: #4a90d9; --schule-bsw: #4a9d5e; --schule-wei: #9b59b6; --schule-vrz: #d63384;
    --schule-hrv: #e67e22; --schule-ill: #1abc9c; --schule-nek: #c0392b; --schule-vrw: #c9a040; --schule-sonst: #888;
    --muenze-pm: #cfd3d8; --muenze-gm: #c9a040; --muenze-sm: #b8bcc2; --muenze-km: #b87333;

    /* ── Glut (Schmiede-Amboss, #787): leuchtender Punkt, nur der aktive ── */
    --glut:       #ffb35c;
    --glut-aus:   rgba(255,179,92,0.35);
    --glut-rand:  rgba(255,179,92,0.7);
    --glut-glow:  rgba(255,140,40,0.6);
    --glut-glow-weich: rgba(255,120,30,0.22);

    /* ── Radius ── */
    --r:          10px;
    --rs:         6px;
    --radius:     6px;              /* alias für layout.php-Kontext */

    /* ── Gemaltes Buchpapier (Nr. 944): mittlerer Ton der leeren Papierfläche im Raumbild (gemessen 2026-10-11, Mittel 190/165/130), Grund des Scroll-Hinweises auf Buchseiten ── */
    --buch-papier-ton: rgb(196, 170, 132);

    /* ── Tippfläche (#802): kleinste Kantenlänge jedes Knopfs/Icons auf Touch (dialoge-handy.md Punkt 2) ── */
    --tap:        44px;

    /* ── Layout ── */
    --hdr:        52px;
    --nav-h:      60px;
    --bar:        0px;

    /* ── Fließende Basisschrift (brand-design.md „Fließende Schriftgrößen"), #920: richtet sich nach der KLEINEREN Bildschirmkante (vmin), nicht nach der Breite —
       Handy quer (915×412) bekommt so dieselbe Schrift wie hochkant (~14,5 px), Desktop 1280×800 ~16,8 px, Maximum 18 px.
       html{font-size} setzt sie — alle rem-Angaben skalieren mit. ── */
    --fs-root:    clamp(14px, 12px + 0.6vmin, 18px);

    /* ── Typo-Skala (verbindlich, siehe docs/DESIGN-SYSTEM.md) ──
       Genau 5 Text-Größen. Neue Zwischenwerte (.74rem, .82rem …) sind verboten —
       immer auf die nächstliegende Stufe runden. */
    --fs-xs:      .78rem;   /* Labels, Badges, Meta-Zeilen */
    --fs-sm:      .8rem;    /* Buttons, Sekundärtext */
    --fs-md:      .88rem;   /* Fließtext, Inputs */
    --fs-lg:      1rem;     /* Sektions-Titel (Cinzel) */
    --fs-xl:      1.3rem;   /* Seiten-Titel (Cinzel) */

    /* ── Abstands-Skala (verbindlich), #920: vmin statt vw (kleinere Bildschirmkante) ── */
    /* sp-1..3 fließen mit der Breite (brand-design.md „Abstände"), sp-4/5 bleiben fest. */
    --sp-1:       clamp(4px, 0.25rem + 0.4vmin, 8px);    /* eng: Chips, Icon-Abstände */
    --sp-2:       clamp(8px, 0.5rem + 0.7vmin, 16px);    /* normal: Karten-Innenabstand, Gaps */
    --sp-3:       clamp(16px, 1rem + 1.4vmin, 32px);       /* weit: Abschnitte */
    --sp-4:       16px;
    --sp-5:       24px;
    --page-gutter: clamp(16px, 2vmin, 32px);              /* Seitenrand links/rechts; Minimum 16 (nicht 12), weil JS-Inline-Leisten margin:-16px nutzen */
    --content-max: 72rem;                               /* Lesebreite Desktop (nicht Karten-Canvas/Spielmodus) */

    /* ── z-index-Skala (verbindlich — keine freien Werte mehr) ── */
    --z-nav:      100;   /* Header, Bottom-Bar, FABs */
    --z-sheet:    500;   /* Bottom-Sheets, Panels */
    --z-popup:    900;   /* Kontext-Popups (Punkt, Token, Ort) */
    --z-overlay:  950;   /* Vollflächige Modals/Confirm */
    --z-toast:    990;   /* Toasts — immer zuoberst */
}

/* ═══ Bedien- und Lese-Flaechen der Welt (#855, #861) — Standard ist die dunkle Holz-Fassung; das alte Hell/Dunkel samt mf-modus.js entfaellt (Nr. 982: zwei Optiken statt Hell/Dunkel, css/optik-onyx.css).
   `html:root` statt der frueheren Klasse html.mf-dunkel (gleiche Spezifitaet). Gruppe 1 = BEDIENFLAECHEN, Gruppe 2 = LESE-SEITEN.
   Dunkel = Holz mit Gold. Wirkt nur in der Welt (body.halle-welt); Spielmodus-Karte und Halle-Bild bleiben. */
/* Aussenrand links/rechts fuer alles, was von unten hochkommt oder gross aufgeht (Tafeln, Bottom-Sheets, Fenster, Menue; #854/#861): EINE Stelle, die Elemente lesen --rand-aussen */
:root { --rand-aussen: 8px; }
/* Buch am Handy (Nr. 949, Betreiber: Abstand Bildschirmrand -> Buch und Buchrand -> Papier je mindestens 5 px): --buch-rand = Breite des gemalten Rahmens (9-Slice, material.css .el-einband, Slice 123 px = 3 x --buch-rand);
   --buch-p-o/-r/-u/-l = Abstand Buchrand -> gemaltes Papier je Seite, am Bild buch-hoch-rahmen.webp gemessen (Papier beginnt bei 80/144/196/70 von 1536 x 2752 Bildpunkten). */
:root { --buch-rand: 41px; --buch-p-o: 11px; --buch-p-r: 20px; --buch-p-u: 27px; --buch-p-l: 10px; }

/* Gruppe 1: Bedienflaechen — Menue, Tafeln, Leisten, Chips, Dialoge */
html:root {
    --blatt-papierrand: 8px; --ui-chip-bg: rgba(28, 20, 13, .92); --ui-chip-text: #f2d27a; --ui-chip-rand: rgba(201, 160, 64, .7); --ui-chip-bg-h: rgba(52, 38, 22, .96);
    --ui-tafel-bg: linear-gradient(180deg, rgba(48, 34, 21, .97), rgba(30, 21, 13, .97)); --ui-tafel-rand: #8a6a2c; --ui-tafel-schein: rgba(232, 184, 75, .22);
    --ui-scrim: rgba(5, 4, 3, .6); --ui-prim-bg: #c9a040; --ui-prim-text: #1a1006; --ui-prim-bg-h: #e8b84b;
    --ui-leiste-bg: rgba(10, 8, 6, .95); --ui-leiste-ring: rgba(201, 160, 64, .5); --ui-leiste-text: #d9b860; --ui-leiste-an-bg: rgba(201, 160, 64, .22); --ui-sheet-bg: #161210;
}
/* Standard-Tokens innerhalb der Bedienflaechen (damit jedes Kind automatisch mitzieht) */
html:root body.halle-welt :is(.hlu-tafel:not([data-material]), .wr-dialog) {
    --bg: #1d140d; --bg2: #271b11; --card: #2f2115; --card-alt: #38281a; --border: #5a4326; --bm: #7a5c30; --muted: #bfae8a; }
/* Gruppe 2: Lese-Seiten — der Inhalt (#app-content) und Buch/Kompendium/Bogen darin */
html:root body.halle-rahmen[data-flaeche="holz"] #app-content.wr-flaeche {
    --bg: #1d140d; --bg2: #271b11; --card: #2f2115; --card-alt: #38281a; --border: #5a4326; --bm: #7a5c30; --muted: #bfae8a; }

/* Seltenheit und Zauberschule (Kompendium, Nr. 948): Textfarben fuer DUNKLEN Grund (Seite /kompendium, Rauchglas); auf Pergament ueberschreibt material.css sie mit Tinten-Varianten >= 4,5:1 */
:root {
    --sel-common: #b8b0a0; --sel-uncommon: #6fd38a; --sel-rare: #7ab4ff; --sel-very_rare: #c88cf0; --sel-legendary: #ffb04a;
    --sch-Abj: #7ab4ff; --sch-Bsw: #6fd38a; --sch-Wei: #c88cf0; --sch-Vrz: #ff8cc0; --sch-Hrv: #ffa860; --sch-Ill: #5fe0cc; --sch-Nek: #ff8a80; --sch-Vrw: #e6c36a;
}

/* ═══ Altklassen-Töne (Nr. 982 Stufe 2a): components.css (.btn*, .badge*, .card, .toast, .fab, Navigation) liest NUR diese Werte ═══
   Vorher Rohwerte in components.css. Die Statusfarben der Badges/Pills/Alerts kommen aus --green/--yellow/--red/--blue/--gold (color-mix mit transparent). */
:root {
    --grau:             #888;
    --gold-knopf:       linear-gradient(180deg, #e8b84b 0%, #c9a040 55%, #a07830 100%);
    --gold-knopf-h:     linear-gradient(180deg, #f0c458 0%, #d4aa48 55%, #b08838 100%);
    --gold-knopf-rand:  #b08830;
    --gold-rund:        linear-gradient(180deg, #e8b84b 0%, #c9a040 100%);
    --karte-verlauf:    linear-gradient(180deg, #1e1a15 0%, #121009 100%);
    --karte-kante:      #302820;
    --nav-grund:        #0f0f0f;
    --schatten-karte:   0 2px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(201,160,64,.05);
    --schatten-gold:    0 3px 12px rgba(201,160,64,.25), inset 0 1px 0 rgba(255,240,180,.15);
    --schatten-pop:     0 4px 20px rgba(0,0,0,.5);
    --schatten-rund:    0 4px 20px rgba(201,160,64,.4);
    --schein-titel:     0 2px 10px rgba(201,160,64,.3);
    --ring-gold:        0 0 0 2px color-mix(in srgb, var(--gold) 15%, transparent);   /* Fokus-Ring der Eingabefelder */
    --schatten-gewaehlt: inset 0 -3px 0 color-mix(in srgb, var(--text) 25%, transparent);   /* gewaehlter Reiter/Filter: Unterkante */
    --fs-eingabe:       16px;     /* Eingabefelder: unter 16 px zoomt iOS beim Antippen ins Feld */
}

/* Kampagnen-Pult (Nr. 984, kampagnen-pult.css): Holz des Pults, Einbandfarben der geschlossenen Bücher, Goldprägung. Eine Quelle für die Farben des Pults. */
:root {
    --pult-holz-1: #5a3b22; --pult-holz-2: #3b2414; --pult-holz-3: #2a190c; --pult-holz-rand: #20130a; --pult-holz-licht: rgba(255,220,160,.18);
    --buch-f1: #6b1f1f; --buch-f1d: #340c0c; --buch-f2: #1f4a6b; --buch-f2d: #0c2234; --buch-f3: #2a5a30; --buch-f3d: #0f2a14;
    --buch-f4: #5a3a78; --buch-f4d: #25143a; --buch-f5: #7a5a1c; --buch-f5d: #3a2a08; --buch-f6: #3a3a42; --buch-f6d: #14141a;
    --buch-leer: #b99a64; --buch-leer-d: #8d7040; --buch-tinte: #3b2410;
    --buch-gold: #d4a84b; --buch-gold-h: #f0d48a; --buch-gold-d: #8a6a22; --buch-schnitt: #e9dcb8; --buch-schnitt-d: #b9a36e;
    --buch-lauf: #3fa24a;
}

/* Kampagnen-Pult: Rohwerte (Nr. 984), vom Lint aus kampagnen-pult.css hierher gezogen */
:root {
    --pk-c1: rgba(0,0,0,.10);
    --pk-c2: rgba(255,255,255,.03);
    --pk-c3: rgba(0,0,0,.45);
    --pk-c4: rgba(0,0,0,.8);
    --pk-c5: rgba(0,0,0,.9);
    --pk-c6: rgba(255,255,255,.14);
    --pk-c7: rgba(0,0,0,.55);
    --pk-c8: rgba(0,0,0,.6);
    --pk-c9: rgba(0,0,0,.05);
    --pk-c10: rgba(255,255,255,.08);
    --pk-c11: rgba(212,168,75,.12);
    --pk-c12: rgba(255,255,255,.4);
    --pk-c13: rgba(240,200,110,.75);
    --pk-c14: rgba(0,0,0,.5);
    --pk-c15: rgba(0,0,0,.35);
    --pk-c16: rgba(240,200,110,.8);
    --pk-c17: rgba(8,5,3,0);
    --pk-c18: rgba(8,5,3,.82);
    --pk-c19: rgba(0,0,0,.5);
    --pk-c20: rgba(0,0,0,.28);
    --pk-sh1: inset 0 3px 0 var(--pult-holz-licht), inset 0 -18px 40px var(--pk-c3), 0 16px 40px var(--pk-c4);
    --pk-sh2: 0 2px 8px var(--pk-c5);
    --pk-sh3: 0 10px 14px var(--pk-c7), 4px 0 0 var(--buch-schnitt), 5px 0 0 var(--buch-schnitt-d), 0 0 0 1px var(--pk-c8);
    --pk-sh4: inset 0 0 0 4px var(--pk-c11);
    --pk-sh5: 0 -1px 0 var(--pk-c4);
    --pk-sh6: 0 2px 4px var(--pk-c8);
    --pk-sh7: 0 0 0 2px var(--pk-c12);
    --pk-sh8: 0 6px 10px var(--pk-c14), 4px 0 0 var(--buch-schnitt), 0 0 0 1px var(--pk-c14);
    --pk-sh9: none;
    --pk-buch-f: drop-shadow(9px 14px 8px var(--pk-c4)) drop-shadow(0 0 3px var(--pk-c4));      /* Kampagnen-Pult: Buch auf dem Holz (Nr. 984) */
    --pk-buch-f-hover: drop-shadow(10px 18px 9px var(--pk-c4)) brightness(1.12);
    --pk-buch-f-dunkel: drop-shadow(9px 14px 8px var(--pk-c4)) brightness(.6);
    --pk-buch-f-wahl: drop-shadow(10px 20px 10px var(--pk-c4)) drop-shadow(0 0 10px var(--pk-c13)) brightness(1.1);
    --pk-praegung: 0 1px 0 var(--pk-c19);      /* Goldprägung: EIN harter Schatten, kein heller Doppelrand und keine Unschärfe (Nr. 1019: wirkte als wäre der Titel unscharf) */
    --pk-tsh: 0 1px 2px var(--pk-c19);
    --pk-seiten-sh: 0 20px 50px var(--pk-c4);
    --pk-schnitt-r: inset 2px 0 3px var(--pk-c19);      /* Seitenschnitt rechts / oben */
    --pk-schnitt-o: inset 0 -2px 3px var(--pk-c19);
    --pk-sh10: none;
    --pk-sh11: 0 6px 8px -4px var(--pk-c8);
    --pk-sh12: 0 -2px 0 var(--buch-gold-d) inset, 0 3px 0 var(--buch-gold-d) inset, 2px 0 4px var(--pk-c14);
    --pk-sh13: 0 1px 2px var(--pk-c8), inset 0 -1px 0 var(--buch-gold-d);
    --pk-sh14: 0 20px 50px var(--pk-c5);
}

/* Teil A: Buch, Halle, Welt-Rahmen (Nr. 982 S1) – Bedeutungs-Tokens statt Farbwert-Namen.
   Vorher 197 hohle Tokens mit dem Farbwert im Namen. Jetzt: vorhandene Teil-B-Tokens (perg-, glas-, abdunkeln-, aufhellen-, sh-) wiederverwendet,
   fast gleiche Werte zusammengelegt, nur echt Neues angelegt – nach Aufgabe benannt. Die Zuordnung steht in docs/konzept/designsystem/plan.md (S1).
   Regel: Tokens, die eine Ansicht lokal ueberschreibt (--text, --gold, --bg, --card, --bm, --gold-dim), nie hier referenzieren; Schatten mit solchen Farben
   werden am Element als --sh-lokal gesetzt (var() loest sonst an :root auf, nicht am Element). */

/* Holz (Welt-Rahmen, dunkle Lese-Seite, Dialog) */
:root {
    --holz-1:             #1d140d;   /* Grund */
    --holz-2:             #271b11;
    --holz-3:             #2f2115;   /* Karte */
    --holz-4:             #38281a;   /* Karte alt */
    --holz-rand:          #5a4326;
    --holz-rand-hell:     #7a5c30;
    --holz-leise:         #bfae8a;   /* gedaempfte Schrift auf Holz */
    --holz-text:          #f0e6d0;   /* Schrift auf Holz (gleicher Ton wie --text, hier fest, weil --text in Holz-Bereichen neu gesetzt wird) */
    --holz-gold-flaeche:  rgba(201,160,64,.12);
    --holz-maserung:      rgba(255,214,150,.02);
    --welt-grund:         #050403;   /* Grund hinter Halle, Welt-Rahmen und Buch-Holz */
    --messing-hell:       #e3c06a;   /* Messing-Plakette (Bilderwand) */
    --messing:            #b08a3a;
    --messing-dunkel:     #8a6a2c;
    --messing-kante:      #5a4214;
    --gold-blass:         #d8c08a;
    --gold-glanz:         #fff0c4;
    --gold-mittel:        rgba(201,160,64,.45);
    --gold-voll:          rgba(201,160,64,.75);
    --gold-schein:        rgba(232,184,75,.16);
    --text-schein:        rgba(240,230,208,.85);
    --live-gruen:         #4caf50;   /* "Sitzung laeuft, beitreten" */
    --live-gruen-flaeche: rgba(76,175,80,.12);
}
/* Buch (Papier, Blatt, Pergament-Seite, Lese-Tinte) */
:root {
    --buch-dunkel:        #171310;   /* dunkles Blatt links */
    --buch-holz:          #3a2410;   /* Buchecke, Pfeile */
    --buch-blatt:         #e1d0a6;   /* helles Blatt */
    --buch-seite-hell:    #dccaa0;   /* A4-Seite links, Kampagnenseite */
    --papier-mitte:       #e6d6ae;
    --papier-rand:        #cdb98f;
    --perg-braun:         #5a3604;   /* Link, Rand, Akzent auf Papier */
    --perg-gruen-tief:    #1a5a31;
    --perg-weiss:         #fff6de;
    --perg-gelb-flaeche:  rgba(122,77,12,.12);
    --perg-licht-dicht:   rgba(255,246,222,.6);
    --perg-licht-hover:   rgba(255,246,222,.68);
    --perg-licht-voll:    rgba(255,246,222,.8);
    --perg-glanz:         rgba(255,250,232,.55);
    --perg-rand-fein:     rgba(60,38,10,.35);
    --perg-rand-mittel:   rgba(65,42,12,.55);
    --perg-falz:          rgba(90,58,20,.25);   /* Schatten am Falz / Innenschatten */
}
/* Halle (Glut, Hotspots, Bildrahmen, Menue) */
:root {
    --glas-fest:          rgba(14,11,9,.8);
    --glas-braun-hover:   rgba(60,46,24,.96);
    --glas-tip:           rgba(16,13,11,.9);   /* Hotspot-Beschriftung ueber dem Raumbild */
    --glut-schein:        rgba(255,179,92,.55);
    --glut-glow-halb:     rgba(255,145,45,.5);
    --glut-harz:          rgba(255,150,50,.09);
    --glut-punkt:         rgba(255,196,120,.75);
    --glut-tief:          rgba(255,90,20,.16);
    --glanz-warm:         rgba(255,238,185,.45);
    --abdunkeln-hauch:    rgba(0,0,0,.05);
    --abdunkeln-fein:     rgba(0,0,0,.12);
    --abdunkeln-maessig:  rgba(0,0,0,.45);
    --abdunkeln-sanft:    rgba(0,0,0,.2);
    --abdunkeln-kraeftig: rgba(0,0,0,.55);
    --abdunkeln-dicht:    rgba(0,0,0,.6);   /* auch Schleier hinter Fenstern */
    --aufhellen-hauch:    rgba(255,255,255,.02);
    --abdunkeln-tief:     rgba(0,0,0,.9);
}
/* Wuerfel-Optiken der Halle (Harz, Bernstein, Weltall) */
:root {
    --harz-licht:         rgba(255,196,110,.2);
    --harz-mitte:         rgba(120,70,20,.12);
    --harz-tief:          rgba(30,16,6,.34);
    --bernstein-hell:     #f2b24c;
    --bernstein:          #d98a2a;
    --bernstein-tief:     #b5651a;
    --wuerfel-weltall:    #070b2e;
    --wuerfel-weltall-kern:  rgba(2,4,18,.9);
    --wuerfel-weltall-rand:  rgba(7,11,46,.4);
    --wuerfel-weltall-glanz: rgba(200,214,255,.3);
    --wuerfel-weltall-ring:  rgba(236,243,255,.3);
}
/* Feste Schriftgroessen (px bewusst: A4-Blatt, Bilderwand und Wuerfelzahl haben ein festes Raster und wachsen nicht mit der Seitenschrift) */
:root {
    --fs-fest-text:       16px;
    --fs-a4-klein:        13.5px;
    --fs-a4-name:         20px;
    --fs-a4-titel:        34px;
    --fs-wand-etikett:    11px;
    --fs-wand-name:       14px;
    --fs-wand-titel:      18px;
    --fs-wuerfel-zahl:    13px;
}
/* Schatten (Farben nur aus Tokens; Schatten mit Umfeld-Farben --gold/--bm/--mat-* stehen am Element als --sh-lokal) */
:root {
    --sh-live-punkt:      0 0 8px var(--live-gruen);
    --sh-blatt-einzel:    inset 0 0 36px -26px var(--abdunkeln-tief);
    --sh-blatt-links:     inset -28px 0 32px -30px var(--abdunkeln-tief);
    --sh-blatt-rechts:    inset 28px 0 32px -30px var(--abdunkeln-tief);
    --sh-pergament-blatt: 0 6px 24px var(--abdunkeln-mittel), inset 0 0 40px var(--perg-falz);
    --sh-puls-aus:        0 0 0 0 rgba(201,160,64,0);
    --sh-puls-an:         0 0 0 4px var(--gold-voll);
    --sh-knauf:           0 1px 3px var(--abdunkeln-maessig);
    --sh-warte-blatt:     0 6px 10px var(--abdunkeln-kraeftig);   /* Warteplatz (Nr. 1015): Tafeln heben sich von der Kulisse ab, als drop-shadow */
    --sh-geist:           0 12px 28px var(--abdunkeln-mittel);
    --sh-buch-rund:       0 0 40px var(--abdunkeln-kraeftig);
    --sh-a4:              0 8px 20px var(--abdunkeln-maessig);
    --sh-klein-dunkel:    0 2px 8px var(--abdunkeln-dicht);
    --sh-tip-aktiv:       0 4px 10px var(--abdunkeln-dicht), 0 1px 2px var(--abdunkeln-dicht);   /* aktives Stations-Schild: nur dunkler Schatten, kein farbiger Rahmen/Schein (Betreiber 2026-10-13, Nr. 1018) */
    --sh-tafel-gross:     0 14px 40px var(--abdunkeln-dicht);
    --sh-vorschau-innen:  inset 0 0 12px var(--perg-falz);
    --sh-schrift-schwarz: 0 1px 6px var(--schwarz);
    --sh-hotspot:         0 0 12px 3px var(--glut-glow-halb);
    --sh-hotspot-an:      0 0 0 2px var(--text-schein), 0 0 26px 9px var(--glut-glow);
    --sh-bild-mulde:      inset 0 3px 8px var(--abdunkeln-stark), inset 0 0 14px var(--abdunkeln-maessig);
    --sh-messing:         0 2px 4px var(--abdunkeln-dicht), inset 0 1px 0 var(--glanz-warm);
    --sh-messing-schrift: 0 1px 0 var(--glanz-warm);
    --sh-harz-innen:      inset 0 0 14px var(--glut-glow-weich);
    --sh-harz-glas:       inset 0 0 0 1px var(--glas-hover), inset 0 0 18px var(--abdunkeln-kraeftig);
    --sh-weltall-innen:   inset 0 0 0 1px var(--wuerfel-weltall-ring), inset 0 0 18px var(--wuerfel-weltall-glanz);
    --sh-bernstein-innen: inset 0 0 14px var(--glanz-warm);
    --sh-holz-tafel:      0 10px 40px var(--abdunkeln-stark), inset 0 0 0 1px var(--gold-schein), inset 0 0 60px var(--abdunkeln-maessig);
}

/* Bauteile (Nr. 982 S2): Farben und Schatten, die vorher als Rohwerte in css/bauteile/ standen (Knopf, Feld, Fenster, Kachel, Leiste, Marke, Buchruecken, Messingschild) */
:root {
    --weiss:              #fff;
    --papier-hell:        #f6ebce;   /* Eingabefeld auf dem Messingschild */
    --regal-dunkel:       #170d07;   /* Holzgrund des Kompendium-Regals */
    --regal-mitte:        #26160c;
    --buch-holz-h:        #55341a;   /* Knopf auf Messing, Hover */
    --buch-suche:         #a8925a;   /* Leinen des Such-Buchs ohne Textur */
    --ruecken-schrift:    #ecd08a;   /* Schrift auf dem Buchruecken */
    --ruecken-titel:      #ebcb74;   /* gepraegter Titel auf der gemalten Flaeche */
    --ruecken-titel-grund: rgba(12,7,3,.36);
    --messing-licht:      #d9b45a;
    --messing-tief:       #9a742a;
    --messing-rand:       rgba(214,178,92,.35);
    --messing-schatten:   rgba(60,40,0,.4);
    --glanz-messing:      rgba(255,245,200,.7);
    --leder-schein:       rgba(222,178,120,.22);   /* abgeriebene Ecken am Buchruecken */
    --leder-schein-stark: rgba(222,178,120,.38);
    /* Knoepfe, Felder */
    --sh-knopf-haupt:     inset 0 1px 0 var(--aufhellen-stark), inset 0 -2px 0 var(--abdunkeln-schwach), 0 2px 4px var(--abdunkeln-maessig);
    --sh-knopf-rund:      inset 0 1px 0 var(--aufhellen-leicht), 0 2px 3px var(--abdunkeln-leicht);
    --sh-knopf-gedrueckt: inset 0 2px 5px var(--abdunkeln-mittel);
    --sh-schrift-leiste:  0 1px 2px var(--abdunkeln-stark);
    --sh-feld-innen:      inset 0 2px 5px var(--abdunkeln-schwach);
    --sh-glut-punkt:      0 0 6px 1px var(--glut-glow-weich);   /* Schmiede: leuchtender Punkt */
    /* Buchruecken im Regal */
    --sh-ruecken:         inset 2px 0 2px var(--leder-glanz), inset -4px 0 6px var(--abdunkeln-mittel), inset 0 7px 8px var(--abdunkeln-leicht), inset 0 -5px 7px var(--abdunkeln-maessig), 4px 2px 7px var(--abdunkeln-dicht), 0 3px 4px var(--abdunkeln-kraeftig);
    --sh-ruecken-hover:   inset 2px 0 2px var(--leder-glanz-stark), inset -4px 0 6px var(--abdunkeln-maessig), 0 0 18px var(--glut-schein), 4px 0 10px var(--abdunkeln-dicht);
    --sh-ruecken-gezogen: 0 0 22px var(--glut-rand), 7px 4px 16px var(--abdunkeln-stark);
    --sh-ruecken-gewaehlt: 7px 6px 16px var(--abdunkeln-voll), 0 0 14px var(--glut-schein);
    --sh-ruecken-titel:   inset 0 0 0 1px var(--messing-rand), inset 0 2px 5px var(--abdunkeln-mittel), inset 0 -1px 2px var(--leder-glanz);
    --sh-ruecken-suche:   inset 0 2px 4px var(--perg-rand-fein), inset 0 0 0 1px var(--perg-rand-fein);
    --sh-ruecken-textur:  3px 1px 5px var(--abdunkeln-dicht), 0 3px 3px -1px var(--abdunkeln-tief);
    --sh-ruecken-textur-hover: 0 0 18px var(--glut-schein), 4px 0 10px var(--abdunkeln-dicht);
    --sh-schrift-ruecken: 0 1px 1px var(--abdunkeln-tief), 0 0 5px var(--abdunkeln-mittel);
    --sh-schrift-praegung: 0 1px 0 var(--abdunkeln-tief), 0 -1px 0 var(--leder-glanz-stark), 0 0 4px var(--abdunkeln-dicht);
    /* Messingschild */
    --sh-messingschild:   0 8px 24px var(--abdunkeln-stark), inset 0 1px 0 var(--glanz-messing), inset 0 -2px 4px var(--messing-schatten);
    --sh-messing-feld:    inset 0 2px 4px var(--messing-schatten);
}

/* Teil B: Material/App/Spieltisch (Nr. 982) */
/* Bedeutungs-Tokens statt Rohwerte. Pergament = perg-*, Rauchglas = glas-*, Leder = leder-*; Schleier/Glanz/Schatten teilen EINE Skala
   (abdunkeln-* / aufhellen-*). Die Materialien in material.css setzen daraus ihre --mat-*-Tokens; Bereichs-CSS liest nur --mat-* und diese Skalen.
   Vorher lagen ~140 verschiedene Rohwerte in material.css, app.css, sv-*.css, mf-melden.css u. a.; nahe Verwandte sind bewusst zusammengelegt. */
:root {
    /* Pergament (Papier + Tinte) */
    --perg-papier:        #ead5ae;
    --perg-tinte:         #1f1307;   /* Text auf Papier, > 12:1 */
    --perg-tinte-leise:   #2e1d07;
    --perg-akzent:        #4e2a03;
    --perg-akzent-h:      #3f2602;
    --perg-rand:          #7a5a2c;
    --perg-haupt:         #2e1c0f;   /* dunkle Flaeche (Hauptknopf, gewaehlt) */
    --perg-haupt-h:       #46291a;
    --perg-fokus:         #14336b;
    --perg-fransen:       #d9bf8e;   /* Papierrand */
    --perg-vorschau:      #f1e2c0;
    --perg-grau:          #4a3a22;
    --perg-licht:         rgba(255,246,220,.3);
    --perg-licht-stark:   rgba(255,246,220,.5);
    --perg-gitter:        rgba(70,48,15,.3);
    --perg-marke:         rgba(70,48,15,.16);
    --perg-rand-weich:    rgba(60,38,10,.45);
    --perg-rand-stark:    rgba(60,38,10,.65);
    --perg-schatten-innen:        rgba(90,55,15,.5);
    --perg-schatten-innen-leicht: rgba(90,55,15,.35);
    --perg-akzent-ring:   rgba(78,42,3,.25);
    /* Statusfarben als Tinte auf Papier */
    --perg-gruen:         #1f6b3a;
    --perg-blau:          #1f4f9a;
    --perg-rot:           #9a1f1f;
    --perg-gelb:          #7a4d0c;
    --perg-violett:       #6a2480;
    --perg-orange:        #8a4200;
    --perg-rosa:          #9a1f5a;
    --perg-petrol:        #0f6258;
    --perg-bernstein:     #6b4a00;
    /* Rauchglas */
    --glas-flaeche:       rgba(14,11,9,.72);
    --glas-text:          #f4ead2;
    --glas-leise:         #d6c8a8;
    --glas-akzent:        #f2d27a;   /* auch Fokus-Ring */
    --glas-akzent-flaeche: rgba(242,210,122,.16);
    --glas-rand:          rgba(240,220,170,.5);
    --glas-innenrand:     rgba(240,220,170,.2);
    --glas-feld:          rgba(255,240,200,.08);
    --glas-kachel:        rgba(255,240,200,.1);
    --glas-hover:         rgba(255,240,200,.14);
    --glas-haupt:         #c9a040;
    --glas-haupt-h:       #e8b84b;
    --glas-haupt-text:    #1a1006;
    /* Leder (Einband, Lasche) und Goldschrift darauf */
    --leder-farbe:        #3f261d;
    --leder-kante:        #1d100a;
    --leder-glanz:        rgba(255,226,170,.12);
    --leder-glanz-stark:  rgba(255,226,170,.25);
    --gold-hell:          #f0d890;   /* Goldschrift auf dunklem Grund (Hauptknopf Pergament, Lasche) */
    /* Eine Skala fuer Schleier, Schatten und Glanz */
    --abdunkeln-schwach:  rgba(0,0,0,.28);
    --abdunkeln-leicht:   rgba(0,0,0,.4);
    --abdunkeln-mittel:   rgba(0,0,0,.5);
    --abdunkeln-stark:    rgba(0,0,0,.65);
    --abdunkeln-voll:     rgba(0,0,0,.8);
    --aufhellen-fein:     rgba(255,255,255,.05);
    --aufhellen-schwach:  rgba(255,255,255,.12);
    --aufhellen-leicht:   rgba(255,255,255,.16);
    --aufhellen-stark:    rgba(255,255,255,.2);
    /* Dunkle App-Flaechen und Akzente mit Deckkraft (Dashboard, Melde-Werkzeug, Wizard, Lichtbox) */
    --bg-glas:            rgba(11,9,8,.85);
    --bg-glas-dicht:      rgba(11,9,8,.95);
    --dunkel-grund:       #1b1510;   /* Grund hinter Bildern/Panels */
    --dunkel-licht:       #4a3220;
    --bild-grund:         #2a2622;
    --schwarz:            #000;
    --auf-gold:           #0a0a0a;   /* Schrift auf Gold-Flaeche */
    --gold-rand:          rgba(201,160,64,.25);
    --gold-kraeftig:      rgba(201,160,64,.65);
    --rot-flaeche:        rgba(220,90,90,.08);
    --rot-rand:           rgba(220,90,90,.3);
    --rot-kraeftig:       rgba(224,112,112,.85);
    --rot-grund:          #2a1410;
    --rot-rahmen:         #c0392b;
    --gruen-rand:         rgba(92,200,138,.4);
    --gruen-grund:        #1f2412;
    --glut-flaeche:       rgba(255,179,92,.12);
    --glut-deckend:       rgba(255,179,92,.94);
    /* Druck (Charakterbogen auf weissem Papier, eigenes Fenster) */
    --druck-tinte:        #1a1a1a;
    --druck-grau-dunkel:  #555;
    --druck-grau:         #777;
    --druck-linie:        #ddd;
    /* Schatten (Box/Text); Farben darin aus den Skalen oben */
    --sh-schrift-dunkel:  0 1px 1px var(--abdunkeln-stark);
    --sh-lasche:          -3px 4px 6px var(--abdunkeln-mittel), inset 0 1px 0 var(--leder-glanz-stark);
    --sh-eingedrueckt:    inset 0 2px 6px var(--perg-schatten-innen);
    --sh-kopf:            0 1px 0 var(--gold-dim), 0 4px 16px var(--abdunkeln-mittel);
    --sh-glimm-klein:     0 0 14px var(--gold-rand);
    --sh-glimm:           0 0 20px var(--gold-rand);
    --sh-karte-klein:     0 3px 10px var(--abdunkeln-leicht);
    --sh-ring-gold:       0 0 0 3px var(--gold-rand);
    --sh-kante-unten:     inset 0 -3px 0 var(--abdunkeln-schwach);
    --sh-mulde:           inset 2px 3px 8px var(--abdunkeln-mittel);
    --sh-innenring:       inset 0 0 0 1px var(--aufhellen-leicht);
    --sh-panel-links:     -8px 0 32px var(--abdunkeln-stark);
    --sh-panel-rechts:    8px 0 32px var(--abdunkeln-stark);
    --sh-leiste-oben:     0 -6px 12px var(--abdunkeln-leicht);
    --sh-lichtbox:        8px 14px 18px var(--abdunkeln-stark);
    /* Feste Schriftgroessen fuer Marken, Anzeigen und das Melde-Werkzeug (px bewusst: Kreismarken/Werkzeug-Overlay wachsen nicht mit der Seiten-Schrift) */
    --fs-marke:           12px;   /* Nummernmarken (Hilfe, Melden), Monospace im Melde-Werkzeug */
    --fs-marke-klein:     10px;
    --lh-marke:           16px;
    --lh-marke-gross:     20px;
    --lh-marke-klein:     14px;
    --fs-summe:           32px;   /* Wuerfel-Summe (Wuerfler) */
    --fs-wahl-name:       28px;   /* Name in der Wuerfel-Optik-Wahl */
}
/* Material-Schatten: lesen --mat-akzent / --mat-schatten-klein, deshalb am Material (wie die uebrigen --mat-*), nicht an :root */
[data-material] {
    --mat-sh-aktiv-ring:   0 0 0 2px var(--mat-akzent), 0 0 10px var(--mat-akzent);
    --mat-sh-kante-oben:   inset 0 3px 0 var(--mat-akzent);
    --mat-sh-kante-links:  inset 4px 0 0 var(--mat-akzent);
    --mat-sh-haupt-ring:   inset 0 1px 0 var(--aufhellen-stark), inset 0 -2px 0 var(--abdunkeln-schwach), 0 0 0 2px var(--mat-akzent);
    --mat-sh-kachel-an:    var(--mat-schatten-klein), 0 0 0 3px var(--perg-akzent-ring);
    --mat-sh-rahmen-1:     inset 0 0 0 1px var(--mat-akzent);
    --mat-sh-rahmen-2:     inset 0 0 0 2px var(--mat-akzent);
    --mat-sh-kante-links-schmal: inset 3px 0 0 var(--mat-akzent);
    --mat-sh-ring-haupt:   0 0 0 1px var(--mat-haupt);
}

/* ═══ Optik Onyx (Nr. 982, Betreiber 2026-10-13: „Schaut gut aus“) — Rohwerte NUR hier ═══
   Entwurf: docs/konzept/designsystem/knopf-onyx-6.html. Diese Tokens sind inaktiv, solange <html data-optik> nicht "onyx" ist; css/optik-onyx.css ordnet sie den
   Bedeutungs-Tokens (--mat-*) zu. Onyx = Bedien-Flächen (Knöpfe, Leisten, Fenster, Menüs); Lese-Flächen (Buch, Bogen, Notiz) bleiben Pergament.
   Kontrast gemessen: Elfenbein auf Onyx > 15:1, Eisen-Knopf-Schrift > 7:1, Altgold-Hauptknopf mit schwarzer Schrift 5,2:1. */
:root {
    /* Stein */
    --onyx-grund:         #050506;
    --onyx-grund-tief:    #020203;
    --onyx-flaeche-feld:  #0d0b0a;
    --onyx-grund-hell:    #0a0b0e;   /* Raum-Fläche: Grund und Karten leicht abgesetzt */
    --onyx-karte:         #101218;
    --onyx-karte-alt:     #151820;
    --onyx-politur:       linear-gradient(180deg, rgba(175,195,225,.06), transparent 22%), linear-gradient(112deg, transparent 0 36%, rgba(175,195,225,.035) 44%, transparent 54%);
    /* Schrift */
    --onyx-text:          #f6ebd2;
    --onyx-leise:         #d6c8a8;
    --onyx-akzent:        #f2d27a;
    --onyx-akzent-h:      #ffe7a6;
    --onyx-fokus:         #f2d27a;
    /* Linien und Hover */
    --onyx-rand:          rgba(190,208,232,.34);
    --onyx-rand-weich:    rgba(190,208,232,.2);
    --onyx-rand-stark:    rgba(190,208,232,.55);
    --onyx-feld:          rgba(8,6,5,.84);
    --onyx-hover:         rgba(255,240,200,.1);
    --onyx-licht:         rgba(255,240,200,.07);
    --onyx-marke:         rgba(255,255,255,.08);
    --onyx-vorschau:      rgba(0,0,0,.55);
    /* Hauptknopf: mattes Altgold mit schwarzer Schrift */
    --onyx-haupt:         #c29a4a;   /* Altgold, klar: Schrift #040201 = 7,9:1 (Nr. 982, Betreiber 2026-10-13: Goldknoepfe wirkten matt/inaktiv) */
    --onyx-haupt-h:        #d6b062;
    --onyx-haupt-text:    #040201;
    /* Eisen-Knöpfe (R5b) und Glutkante */
    --onyx-eisen:         #2a3038;
    --onyx-eisen-text:    #f1ece0;
    --onyx-eisen-text-h:  #fff8ea;
    --onyx-eisen-rand:    #06080b;
    --onyx-glut:          #ff7a2a;
    --onyx-glut-text:     #ffe6c0;
    --onyx-bild-eisen:    url(/public/img/ui/onyx-knopf-eisen.jpg?v=1);
    --onyx-bild-gold:     url(/public/img/ui/onyx-knopf-gold.jpg?v=1);
    --onyx-bild-eisen-hauch: url(/public/img/ui/onyx-eisen.jpg?v=1);
    --onyx-bild-magma:    url(/public/img/ui/onyx-magma.jpg?v=1);
    --onyx-knopf-licht:   linear-gradient(180deg, rgba(205,220,245,.2), rgba(205,220,245,.03) 20%, rgba(0,0,0,.3)), radial-gradient(ellipse 70% 90% at 50% 50%, rgba(8,10,14,.6) 0 55%, rgba(8,10,14,0) 100%);
    --onyx-knopf-licht-h: linear-gradient(180deg, rgba(235,244,255,.2), rgba(205,220,245,.05) 22%, rgba(0,0,0,.22)), radial-gradient(ellipse 70% 90% at 50% 50%, rgba(8,10,14,.5) 0 55%, rgba(8,10,14,0) 100%);
    --onyx-knopf-licht-g: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18)), radial-gradient(ellipse 70% 90% at 50% 50%, rgba(8,10,14,.6) 0 55%, rgba(8,10,14,0) 100%);
    --onyx-haupt-licht:   linear-gradient(180deg, rgba(204,164,82,.97), rgba(186,146,68,.97));
    --onyx-haupt-licht-h: linear-gradient(180deg, rgba(222,184,100,.97), rgba(204,166,86,.97));
    /* Schatten */
    --onyx-sh-tafel:      inset 0 1px 0 rgba(190,208,232,.22), inset 0 -1px 0 rgba(0,0,0,.8), 0 0 0 1px rgba(150,170,200,.06), 0 7px 15px rgba(0,0,0,.75);
    --onyx-sh-tafel-klein: inset 0 1px 0 rgba(190,208,232,.18), inset 0 -1px 0 rgba(0,0,0,.8), 0 3px 8px rgba(0,0,0,.7);
    --onyx-sh-eisen:      inset 0 1px 0 rgba(222,234,252,.46), inset 0 0 0 1px rgba(160,180,210,.1), inset 0 -2px 0 rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.8);
    --onyx-sh-eisen-h:    inset 0 1px 0 rgba(235,244,255,.5), inset 0 -2px 0 rgba(0,0,0,.45), 0 0 11px 1px rgba(255,150,70,.42), 0 2px 4px rgba(0,0,0,.8);
    --onyx-sh-eisen-tip:  inset 0 1px 0 rgba(222,234,252,.46), inset 0 0 0 1px rgba(160,180,210,.1), inset 0 -2px 0 rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.9);   /* aktives Stations-Schild in Onyx: Eisen wie in Ruhe, nur tieferer schwarzer Schatten (Nr. 1018) */
    --onyx-sh-eisen-an:   inset 0 0 0 1px rgba(255,122,42,.85), inset 0 0 3px rgba(255,90,20,.45), 0 0 12px 1px rgba(255,100,25,.55), 0 2px 4px rgba(0,0,0,.8);
    --onyx-sh-eisen-an-a: inset 0 0 0 1px rgba(255,122,42,.8), inset 0 0 2px rgba(255,90,20,.35), 0 0 9px 1px rgba(255,100,25,.4), 0 2px 4px rgba(0,0,0,.8);
    --onyx-sh-eisen-an-b: inset 0 0 0 1px rgba(255,140,60,.95), inset 0 0 4px rgba(255,90,20,.5), 0 0 15px 2px rgba(255,100,25,.65), 0 2px 4px rgba(0,0,0,.8);
    --onyx-sh-haupt:      inset 0 1px 0 rgba(235,200,130,.22), inset 0 -2px 0 rgba(60,40,8,.55), 0 0 8px 1px rgba(194,154,74,.28), 0 2px 4px rgba(0,0,0,.8);
    --onyx-sh-haupt-h:    inset 0 1px 0 rgba(235,200,130,.3), inset 0 -2px 0 rgba(60,40,8,.55), 0 0 12px 2px rgba(214,176,98,.45), 0 2px 4px rgba(0,0,0,.8);
    --onyx-hinweis-flaeche: #1a0d0b;  --onyx-hinweis-rand: #ff8f85;   /* Hinweisband (Sitzung noch nicht gestartet): dunkle Flaeche, rote Kante und Schrift, keine Rot-Flaeche */
    --onyx-sh-feld:       inset 0 2px 5px rgba(0,0,0,.7);
    --onyx-sh-schrift:    0 -1px 0 rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.14);
    --onyx-sh-schrift-haupt: 0 1px 0 rgba(235,200,120,.28);
    /* Statusfarben und Seltenheit auf dunklem Grund (gleiche Werte wie die dunkle Standard-Fassung oben) */
    --onyx-gruen: #5cc88a;  --onyx-gelb: #dda040;  --onyx-rot: #ff8f85;  --onyx-blau: #7ab0ff;
    --onyx-sel-common: #b8b0a0; --onyx-sel-uncommon: #6fd38a; --onyx-sel-rare: #7ab4ff; --onyx-sel-very_rare: #c88cf0; --onyx-sel-legendary: #ffb04a;
    --onyx-sch-Abj: #7ab4ff; --onyx-sch-Bsw: #6fd38a; --onyx-sch-Wei: #c88cf0; --onyx-sch-Vrz: #ff8cc0; --onyx-sch-Hrv: #ffa860; --onyx-sch-Ill: #5fe0cc; --onyx-sch-Nek: #ff8a80; --onyx-sch-Vrw: #e6c36a;
    /* Risse und Magma (Modul css/onyx-riss.css, js/mf-onyx.js) */
    --onyx-magma-grund:   #2a0803;
    --onyx-puls:          9s;
}
:root { --onyx-atmen: onyx-kante-atmen 5.5s ease-in-out infinite; }   /* Glutkante gewählter Knöpfe (Keyframes: optik-onyx.css) */
@media (prefers-reduced-motion: reduce) { :root { --onyx-atmen: none; } }