/* optik-onyx.css — die zweite Darstellungsoptik „Onyx“ (Nr. 982, Betreiber 2026-10-13: „Schaut gut aus … als zweite Darstellungsoptik mit dazu nehmen“).
   Gilt NUR bei <html data-optik="onyx"> (css/… liest das Attribut, js/mf-optik.js setzt es, views/app.php schreibt es aus users.optik). In „Pergament“ tut diese Datei nichts.
   Aufbau: (1) EIN Token-Satz auf den Bedien-Flächen — er ordnet die Onyx-Werte aus tokens.css den Bedeutungs-Tokens --mat-* zu, die jedes Bauteil schon liest;
   (2) die wenigen Stellen, an denen ein Pergament-BILD (Fransenrand, Streifen, Kartenblatt) durch eine Onyx-Fläche ersetzt werden muss; (3) das Aussehen der Knöpfe (Eisen / Altgold / Glutkante).
   Keine Farbe steht hier — alles kommt aus var(--onyx-*) (tokens.css, Stil-Lint 0). Risse + Magma: onyx-riss.css, js/mf-onyx.js.
   Entscheidung F2 (Betreiber): Bedien-Flächen (Knöpfe, Leisten, Fenster, Menüs) = dunkle Onyx-Tafel; Lese-Flächen (Buch-Papier, Charakterbogen, Notiz) bleiben Pergament.
   LESE-FLÄCHEN: die EINE Liste steht in LESE unten (in jedem Selektor als :not(...) wiederholt, weil CSS keine Selektor-Variablen kennt); js/mf-onyx.js liest stattdessen --onyx-flaeche. */

/* ============ 1. TOKEN-SATZ: alle Bedien-Flächen (Pergament-Material ohne Lese-Fläche, Eckknöpfe samt Zettel, Plaketten) ============ */
html[data-optik="onyx"] [data-material="pergament"]:not(:is(.hlb-seite, .hlb-buch, .hlb-chronik, .mfb, .mfb-fenster, [data-buch-fenster], .kamp-pergament, .wr-dialog-tinte, .mfk, .mfk-gitter, .csa4-seite, .cs-bogen, [id="mfe-blatt"], [data-lese])),
html[data-optik="onyx"] :is(.hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf, .mfm-knopf, .el-schild),
html[data-optik="onyx"] :has(> :is(.hlu-zurueck, .wr-zurueck, .hl-schild))::before {
    --onyx-flaeche: 1;                                         /* Marke für js/mf-onyx.js: hier gilt Onyx */
    color-scheme: dark;
    --mat-flaeche: var(--onyx-grund); --mat-kachel: var(--onyx-grund);
    --mat-schicht: var(--onyx-politur);
    --mat-text: var(--onyx-text); --mat-leise: var(--onyx-leise); --mat-akzent: var(--onyx-akzent); --mat-rand: var(--onyx-rand); --mat-feld: var(--onyx-feld); --mat-hover: var(--onyx-hover);
    --mat-haupt: var(--onyx-haupt); --mat-haupt-text: var(--onyx-haupt-text); --mat-haupt-h: var(--onyx-haupt-h); --mat-fokus: var(--onyx-fokus);
    --mat-radius: 3px; --mat-radius-klein: 4px; --mat-neigung: 0deg; --mat-gitter: var(--onyx-rand-weich); --mat-marke: var(--onyx-marke); --mat-vorschau: var(--onyx-vorschau);
    --mat-schatten: var(--onyx-sh-tafel); --mat-schatten-klein: var(--onyx-sh-tafel-klein);
    --mat-kante-innen: var(--onyx-rand-verlauf, none);        /* Randzone im Ton des Deckels (js/mf-onyx.js setzt den Verlauf): eine Fläche, eine Kante (Nr. 1199) */
    --mat-rand-radius: var(--mat-radius); --mat-rand-schatten: var(--onyx-sh-tafel-aussen);       /* Fransen-Regel (material.css) liest Radius und Schatten aus diesen Tokens */
    --img-fransen-breit: none; --img-fransen-schmal: none; --perg-fransen: transparent; --mat-schicht-clip: border-box;   /* kein Papier-Fransenrand. Randbreite (--fransen-*-n, material.css) bleibt wie im Pergament: Maße und Positionen aller Leisten, Fenster und Knöpfe sind in beiden Optiken gleich (Betreiber 23.10., Nr. 1172); die Onyx-Fläche füllt die Randzone mit (clip border-box) */
    --perg-akzent-ring: var(--onyx-rand-weich);
    --tex-glas-knopf: none; --tex-glas-knopf-a: none; --tex-etikett: none; --tex-chip: none; --tex-plakette: none; --tex-kachel: none; --tex-kachel-g: none; --tex-streifen: none;   /* gemalte Pergament-Bilder entfallen */
    /* Rückwärtstokens der Altbausteine (wie im Pergament, aber mit Onyx-Werten) */
    --text: var(--mat-text); --muted: var(--mat-leise); --gold: var(--mat-akzent); --gold-h: var(--onyx-akzent-h); --gold-dim: var(--onyx-marke);
    --bg: var(--onyx-grund); --bg2: var(--mat-flaeche); --card: var(--onyx-licht); --card-alt: var(--onyx-hover); --border: var(--onyx-rand-weich); --bm: var(--onyx-rand); --red: var(--onyx-rot);
    --sel-common: var(--onyx-sel-common); --sel-uncommon: var(--onyx-sel-uncommon); --sel-rare: var(--onyx-sel-rare); --sel-very_rare: var(--onyx-sel-very_rare); --sel-legendary: var(--onyx-sel-legendary);
    --sch-Abj: var(--onyx-sch-Abj); --sch-Bsw: var(--onyx-sch-Bsw); --sch-Wei: var(--onyx-sch-Wei); --sch-Vrz: var(--onyx-sch-Vrz); --sch-Hrv: var(--onyx-sch-Hrv); --sch-Ill: var(--onyx-sch-Ill); --sch-Nek: var(--onyx-sch-Nek); --sch-Vrw: var(--onyx-sch-Vrw);
    --green: var(--onyx-gruen); --yellow: var(--onyx-gelb); --blue: var(--onyx-blau);
    scrollbar-color: var(--onyx-rand) transparent;
}

/* ============ 2. FLÄCHEN: Pergament-Bilder durch Onyx ersetzen ============ */
/* Seitenmenü: statt gemaltem Pergamentstreifen eine Onyx-Tafel; die Ränder des Streifens (78/50 px für die eingerollten Enden) entfallen */
html[data-optik="onyx"] .el-streifen::before { border: 1px solid var(--onyx-grund-tief); border-image: none; border-radius: var(--mat-radius); background: var(--mat-schicht), var(--mat-flaeche); box-shadow: var(--mat-schatten); filter: none; }
html[data-optik="onyx"] .el-streifen-inhalt { margin: var(--sp-3) 0; padding-inline: var(--sp-3); }
/* Kartenblatt-Kachel (gemaltes Pergament) -> Onyx-Kachel mit Stein-Rand */
html[data-optik="onyx"] .el-kachel--blatt::before { border: 1px solid var(--onyx-rand); border-image: none; border-radius: var(--mat-radius-klein); background: var(--mat-schicht), var(--mat-kachel); box-shadow: var(--mat-schatten-klein); filter: none; }
html[data-optik="onyx"] .el-kachel--blatt[aria-pressed="true"]::before { border: 1px solid var(--onyx-glut); border-image: none; box-shadow: var(--onyx-sh-eisen-an); }
/* Raum-Fläche (dunkles Holz mit Goldkante) und alte Dialoge ohne Material: in Onyx ebenfalls Stein. Die Flächen setzen ihre Tokens in tokens.css (Gruppe Bedien-/Lese-Flächen) mit ID-Spezifität; hier eine Klasse mehr. */
html[data-optik="onyx"]:root body.halle-rahmen[data-flaeche="holz"] #app-content.wr-flaeche,
html[data-optik="onyx"]:root body.halle-welt :is(.hlu-tafel:not([data-material]), .wr-dialog) {
    color-scheme: dark;
    --bg: var(--onyx-grund); --bg2: var(--onyx-grund-hell); --card: var(--onyx-karte); --card-alt: var(--onyx-karte-alt); --border: var(--onyx-rand-weich); --bm: var(--onyx-rand); --muted: var(--onyx-leise);
    --holz-1: var(--onyx-grund); --holz-2: var(--onyx-grund-hell); --holz-4: var(--onyx-karte); --holz-maserung: transparent;
}
html[data-optik="onyx"]:root body.halle-rahmen[data-flaeche="holz"] #app-content.wr-flaeche { border-color: var(--onyx-rand); box-shadow: var(--onyx-sh-tafel); }
/* Zeilen und Menüeinträge sind keine Platten: flach, Linie darunter */
html[data-optik="onyx"] :is(.el-zeile, .sv-msheet-btn):hover { background: var(--mat-hover); }

/* ============ 3. KNÖPFE: Eisen · Altgold · Glutkante (Onyx 6, R5b) ============
   Selektor-Aufbau: alle Knopf-Klassen der Bedienflächen, NICHT innerhalb einer Lese-Fläche. Texturen sind vorgerechnet (img/ui/onyx-knopf-*.jpg), Licht/Politur liegen als Verlauf darüber. */
html[data-optik="onyx"] :is(.el-neben, .el-rund, .el-blatt-zu:not(.mf-blatt-zurueck), .hlm-x, .wr-schliessen, .svb-zu, .el-reiter, .el-etikett, .sv-bbtn, .sv-nebelbtn, .sv-brbtn, .sv-kbtn, .svb-knopf, .sv-komp-knopf, .mfl-kachel, button.fransen, .el-schild:not(section),
        .hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf, .mfm-knopf, .btn, .btn-ghost, .btn-secondary):not(:is(.hlb-seite, .hlb-buch, .hlb-chronik, .mfb, .mfb-fenster, [data-buch-fenster], .kamp-pergament, .wr-dialog-tinte, .mfk, .mfk-gitter, .csa4-seite, .cs-bogen, [id="mfe-blatt"], [data-lese]) *) {
    color: var(--onyx-eisen-text); border: 1px solid var(--onyx-eisen-rand); text-shadow: var(--onyx-sh-schrift);
    background: var(--onyx-knopf-licht), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); background-clip: border-box;
    box-shadow: var(--onyx-sh-eisen); transition: box-shadow .25s, background-color .12s, color .12s;
}
/* Melden (Nr. 1172; !important, weil ein später geladenes Melden-Blatt die 1-px-Eisenkante setzt): gleiche Randbreite wie im Pergament (--fransen-schmal-n), damit Breite und Lage der Kopfleiste in beiden Optiken gleich sind; die Eisenfläche füllt den Rand mit (clip border-box) */
html[data-optik="onyx"] body button.mfm-knopf.mfm-knopf { border-width: calc(var(--fransen-schmal-n) * 1px) !important; border-color: transparent !important; }
/* Hover (nur mit Maus), Druck */
@media (hover: hover) {
    html[data-optik="onyx"] :is(.el-neben, .el-rund, .el-blatt-zu:not(.mf-blatt-zurueck), .hlm-x, .wr-schliessen, .svb-zu, .el-reiter, .el-etikett, .sv-bbtn, .sv-nebelbtn, .sv-brbtn, .sv-kbtn, .svb-knopf, .sv-komp-knopf, .mfl-kachel, button.fransen, .el-schild:not(section),
            .hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf, .mfm-knopf, .btn, .btn-ghost, .btn-secondary):not(:is(.hlb-seite, .hlb-buch, .hlb-chronik, .mfb, .mfb-fenster, [data-buch-fenster], .kamp-pergament, .wr-dialog-tinte, .mfk, .mfk-gitter, .csa4-seite, .cs-bogen, [id="mfe-blatt"], [data-lese]) *):not(:disabled):hover {
        color: var(--onyx-eisen-text-h); border-color: var(--onyx-eisen-rand); background: var(--onyx-knopf-licht-h), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); box-shadow: var(--onyx-sh-eisen-h);
    }
}
html[data-optik="onyx"] :is(.el-neben, .el-rund, .el-blatt-zu:not(.mf-blatt-zurueck), .hlm-x, .wr-schliessen, .svb-zu, .el-reiter, .el-etikett, .sv-bbtn, .sv-nebelbtn, .sv-brbtn, .sv-kbtn, .svb-knopf, .sv-komp-knopf, .mfl-kachel, button.fransen, .el-schild:not(section),
        .hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf, .mfm-knopf, .btn, .btn-ghost, .btn-secondary):not(:is(.hlb-seite, .hlb-buch, .hlb-chronik, .mfb, .mfb-fenster, [data-buch-fenster], .kamp-pergament, .wr-dialog-tinte, .mfk, .mfk-gitter, .csa4-seite, .cs-bogen, [id="mfe-blatt"], [data-lese]) *):not(:disabled):active {
    background: var(--onyx-knopf-licht-g), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); transform: translateY(1px);
}
/* Gewählt / eingeschaltet: Glutkante, atmet langsam (nur die wenigen gewählten Knöpfe) */
html[data-optik="onyx"] :is(.el-rund, .el-blatt-zu:not(.mf-blatt-zurueck), .hlm-x, .wr-schliessen, .svb-zu, .el-reiter, .el-etikett, .el-neben, .sv-bbtn, .sv-nebelbtn, .sv-brbtn, .sv-kbtn, .svb-knopf, .sv-komp-knopf, .mfl-kachel, button.fransen, .el-schild:not(section), .mfh-knopf, .mfm-knopf):is([aria-pressed="true"], [aria-selected="true"], .on, .sv-bbtn-on, .sv-brbtn-on, .svb-knopf-an, .mfm-aktiv, .mfh-aktiv):not(.el-haupt):not(:is(.hlb-seite, .hlb-buch, .hlb-chronik, .mfb, .mfb-fenster, [data-buch-fenster], .kamp-pergament, .wr-dialog-tinte, .mfk, .mfk-gitter, .csa4-seite, .cs-bogen, [id="mfe-blatt"], [data-lese]) *) {
    color: var(--onyx-glut-text); border-color: var(--onyx-glut); background: var(--onyx-knopf-licht-g), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); box-shadow: var(--onyx-sh-eisen-an); animation: var(--onyx-atmen);
}
@keyframes onyx-kante-atmen { 0%, 100% { box-shadow: var(--onyx-sh-eisen-an-a); } 50% { box-shadow: var(--onyx-sh-eisen-an-b); } }
/* Hauptknopf: mattes Altgold mit schwarzer Schrift */
html[data-optik="onyx"] :is(.el-haupt:not(.btn-danger), .sv-kbtn.sv-kbtn--haupt, .btn-primary, .sv-ende-start):not(:is(.hlb-seite, .hlb-buch, .hlb-chronik, .mfb, .mfb-fenster, [data-buch-fenster], .kamp-pergament, .wr-dialog-tinte, .mfk, .mfk-gitter, .csa4-seite, .cs-bogen, [id="mfe-blatt"], [data-lese]) *) {
    color: var(--onyx-haupt-text); font-weight: 800; border: 1px solid var(--onyx-eisen-rand); text-shadow: var(--onyx-sh-schrift-haupt);
    background: var(--onyx-haupt-licht), var(--onyx-bild-gold) center / 260px, var(--onyx-haupt); box-shadow: var(--onyx-sh-haupt);
}
@media (hover: hover) {
    html[data-optik="onyx"] :is(.el-haupt:not(.btn-danger), .sv-kbtn.sv-kbtn--haupt, .btn-primary, .sv-ende-start):not(:is(.hlb-seite, .hlb-buch, .hlb-chronik, .mfb, .mfb-fenster, [data-buch-fenster], .kamp-pergament, .wr-dialog-tinte, .mfk, .mfk-gitter, .csa4-seite, .cs-bogen, [id="mfe-blatt"], [data-lese]) *):not(:disabled):hover {
        color: var(--onyx-haupt-text); border-color: var(--onyx-eisen-rand); background: var(--onyx-haupt-licht-h), var(--onyx-bild-gold) center / 260px, var(--onyx-haupt-h); box-shadow: var(--onyx-sh-haupt-h);
    }
}
/* Gefahr: Eisen mit heller roter Schrift (nie gold) */
html[data-optik="onyx"] :is(.btn-danger.btn-danger, .sv-gefahr.sv-gefahr):not(:is(.hlb-seite, .hlb-buch, .hlb-chronik, .mfb, .mfb-fenster, [data-buch-fenster], .kamp-pergament, .wr-dialog-tinte, .mfk, .mfk-gitter, .csa4-seite, .cs-bogen, [id="mfe-blatt"], [data-lese]) *) {
    color: var(--onyx-rot); border: 1px solid var(--onyx-eisen-rand); background: var(--onyx-knopf-licht), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); box-shadow: var(--onyx-sh-eisen);
}
/* Icons in Knöpfen: Strichstärke und Kante wie im Entwurf */
html[data-optik="onyx"] :is(.mfl-kachel, .sv-bbtn, .sv-kbtn, .el-rund, .el-blatt-zu:not(.mf-blatt-zurueck), .hlm-x, .wr-schliessen, .svb-zu) svg { filter: drop-shadow(0 -1px 0 var(--onyx-eisen-rand)); }
/* Eingabefelder: dunkle Mulde */
html[data-optik="onyx"] .el-feld, html[data-optik="onyx"] :is(.el-blatt, .sv-fenster, .el-fenster) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
    box-shadow: var(--onyx-sh-feld); background: var(--onyx-feld);
}
html[data-optik="onyx"] :is(input[type="range"], input[type="checkbox"], input[type="radio"]) { accent-color: var(--onyx-akzent); }      /* ein Akzent wie im Pergament (Gold), nicht Glut-Orange (Nr. 982) */


/* ============ 4. NACHZUG (Nr. 982, Betreiber 2026-10-13, Rueckmeldung zum Buch am Handy) ============ */
/* Hauptknopf gesperrt: klar etwas anderes als aktiv (aktiv = Altgold mit Glanz, gesperrt = dunkle Mulde, gestrichelte Kante, leise Schrift) */
html[data-optik="onyx"] :is(.el-haupt, .sv-kbtn.sv-kbtn--haupt, .btn-primary, .sv-ende-start):is(:disabled, [aria-disabled="true"]):not(:is(.hlb-seite, .hlb-buch, .hlb-chronik, .mfb, .mfb-fenster, [data-buch-fenster], .kamp-pergament, .wr-dialog-tinte, .mfk, .mfk-gitter, .csa4-seite, .cs-bogen, [id="mfe-blatt"], [data-lese]) *) {
    opacity: 1; filter: none; color: var(--onyx-leise); font-weight: 700; text-shadow: none; cursor: not-allowed;
    background: var(--onyx-feld); border: 1px dashed var(--onyx-rand); box-shadow: none;
}
/* Buch-Pfeile (vorige/naechste Seite, auch die Eck-Pfeile im Verzeichnis .hlb-ecke): runde Eisen-Platte auch auf dem Papier, wie die uebrigen Rundknoepfe */
html[data-optik="onyx"] :is(.mfb-bl, .hlb-ecke) {
    color: var(--onyx-eisen-text); border: 1px solid var(--onyx-eisen-rand); text-shadow: var(--onyx-sh-schrift);
    background: var(--onyx-knopf-licht), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); box-shadow: var(--onyx-sh-eisen);
}
@media (hover: hover) { html[data-optik="onyx"] :is(.mfb-bl, .hlb-ecke):hover:not(:disabled) { color: var(--onyx-eisen-text-h); background: var(--onyx-knopf-licht-h), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); box-shadow: var(--onyx-sh-eisen-h); transform: none; } }
html[data-optik="onyx"] :is(.mfb-bl, .hlb-ecke):disabled { opacity: .45; box-shadow: none; }
/* Zoom-Kasten im Buch („− 100 % +“, Einpassen) und die Gruppen „Größe“/„Seite“ im Buch-Fenster am Spieltisch: Eisen-Platte statt flachem schwarzem Kasten */
html[data-optik="onyx"] :is(.hlb-zoom.el-tafel.sv-leiste[data-material="pergament"], span.fransen.mfb-schild) {      /* Spezifität über der Fransen-Regel (material.css) */
    color: var(--onyx-eisen-text); border: 1px solid var(--onyx-eisen-rand); text-shadow: var(--onyx-sh-schrift);
    background: var(--onyx-knopf-licht), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); box-shadow: var(--onyx-sh-eisen);
}
html[data-optik="onyx"] :is(.hlb-zoom, span.fransen.mfb-schild) :is(.hlb-zoom-p, .svbf-prozent, .svbf-zb, .sv-kbtn) { color: var(--onyx-eisen-text); }
html[data-optik="onyx"] .hlb-zoom .sv-kbtn { background: none; border-color: transparent; box-shadow: none; }
/* Hinweisbaender, „Wischen fuer mehr“, Stationsschilder, „Neue Version“: Onyx-Tafel bzw. Eisen statt Rauchglas/Braun */
html[data-optik="onyx"] :is(.hlc-wisch) { background: var(--onyx-grund) var(--onyx-politur); border: 1px solid var(--onyx-rand); color: var(--onyx-text); box-shadow: var(--onyx-sh-tafel-klein); }
html[data-optik="onyx"] .hl-tip { background: var(--onyx-knopf-licht), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); border: 1px solid var(--onyx-eisen-rand); color: var(--onyx-eisen-text); text-shadow: var(--onyx-sh-schrift); box-shadow: var(--onyx-sh-eisen); }
html[data-optik="onyx"] .hl-punkt:is(.an, :hover, :focus-visible, .tip-an) .hl-tip { color: var(--onyx-eisen-text-h); box-shadow: var(--onyx-sh-eisen-tip); }   /* Nr. 1018: kein orangener Rand, kein Glut-Schein; nur tieferer schwarzer Schatten */
html[data-optik="onyx"] :is(.el-glas, .wisch-pfeil, .hlc-neu-fest, .hlc-schild) {
    color: var(--onyx-eisen-text); border: 1px solid var(--onyx-eisen-rand); border-image: none; border-radius: var(--mat-radius-klein, 4px); text-shadow: var(--onyx-sh-schrift); opacity: 1; filter: none;
    background: var(--onyx-knopf-licht), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); box-shadow: var(--onyx-sh-eisen);
}
@media (hover: hover) { html[data-optik="onyx"] :is(.el-glas, .wisch-pfeil, .hlc-neu-fest, .hlc-schild):hover { color: var(--onyx-eisen-text-h); filter: none; background: var(--onyx-knopf-licht-h), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); box-shadow: var(--onyx-sh-eisen-h); } }
html[data-optik="onyx"] :is(.el-glas, .wisch-pfeil, .hlc-neu-fest, .hlc-schild):active { border-image: none; filter: none; background: var(--onyx-knopf-licht-g), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); }
/* Hinweise ueber der Eckenzeile: „Wischen fuer mehr“ (Halle) und „Neu: Tippe auf das ?“ (Hilfe-Tipp) = Eisen-Platte wie die Knoepfe, kein flacher schwarzer Kasten (Nr. 1020).
   Spezifitaet ueber der Fransen-Regel (material.css), darum Tag + Klassen + Attribute. */
html[data-optik="onyx"] :is(p.hl-wisch.fransen[data-material="pergament"][data-fransen], div.mfh-tipp.el-fenster[data-material="pergament"][data-fransen]) {
    color: var(--onyx-eisen-text); border: 1px solid var(--onyx-eisen-rand); border-image: none; border-radius: var(--mat-radius-klein, 4px); text-shadow: var(--onyx-sh-schrift);
    background: var(--onyx-knopf-licht), var(--onyx-bild-eisen) center / 300px, var(--onyx-eisen); box-shadow: var(--onyx-sh-eisen);
}
html[data-optik="onyx"] .mfh-tipp { --mfh-spitze-farbe: var(--onyx-eisen-rand); }
/* Hinweis-Tokens fuer Baender (session-view.js liest sie mit Rueckfall auf das Pergament-Aussehen) */
html[data-optik="onyx"] { --hinweis-flaeche: var(--onyx-hinweis-flaeche); --hinweis-text: var(--onyx-rot); --hinweis-rand: var(--onyx-hinweis-rand); }
/* Eckzeile (Zurück · ? · Menü): in Onyx KEIN Träger-Zettel dahinter (kein schwarzer Spalt, kein Rahmen) – die Knöpfe sind selbst Eisen-Platten */
html[data-optik="onyx"] :has(> :is(.hlu-zurueck, .wr-zurueck, .hl-schild))::before { display: none; }