/* material.css — EINE Quelle fuer Bedienelemente (Ticket #871, Konzept docs/konzept/bedienelemente.md). Material setzt NUR Tokens ([data-material]); die Elemente (.el-*) lesen NUR Tokens. Kein Materialname in einer Element-Regel. Zwei Materialien, eine warme gedaempfte Fassung (Betreiber 2026-10-10, kein Hell/Dunkel): EIN Pergament (gleicher Ton, gleiche Textur ueberall, keine Papiersorten) und Rauchglas. Gemalte Texturen: /public/img/ui/*.webp per border-image (9-Slice); ohne Bild bleibt der CSS-Rueckfall (Rand/Farbe aus den Tokens). Katalog: docs/bedienkatalog.md, Abschnitt "Bedienelemente". */ :root { --tx-faser: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='.9' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .17 0 0 0 0 .06 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); --tx-fleck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='.012' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .22 0 0 0 0 .07 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); --tx-masse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='.09' numOctaves='3' seed='21'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .18 0 0 0 0 .06 0 0 0 .42 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); /* Gemalte Texturen (9-Slice): fill / / 0 stretch */ --img-glas-n: url(/public/img/ui/glas-normal.webp?v=1); --img-glas-g: url(/public/img/ui/glas-gedrueckt.webp?v=1); --img-glas-rund: url(/public/img/ui/glas-rund.webp?v=1); --img-etikett: url(/public/img/ui/perg-etikett.webp?v=1); --img-plakette: url(/public/img/ui/perg-plakette.webp?v=1); --img-kachel: url(/public/img/ui/perg-kachel.webp?v=1); --img-kachel-g: url(/public/img/ui/perg-kachel-gewaehlt.webp?v=1); --img-streifen: url(/public/img/ui/perg-streifen.webp?v=1); --img-streifen-kurz: url(/public/img/ui/perg-streifen-kurz.webp?v=1); --img-kreis: url(/public/img/ui/perg-kreis.webp?v=1); --img-linie: url(/public/img/ui/perg-linie.webp?v=1); --tex-glas-knopf: var(--img-glas-n) 96 fill / 14px / 0 stretch; /* feinerer Rahmen (#907) */ --tex-glas-knopf-a: var(--img-glas-g) 96 fill / 14px / 0 stretch; --tex-etikett: var(--img-etikett) 90 fill / 18px / 0 stretch; --tex-chip: var(--img-etikett) 90 fill / 11px / 0 stretch; --tex-plakette: var(--img-plakette) 150 fill / 40px / 0 stretch; --tex-kachel: var(--img-kachel) 90 fill / 24px / 0 stretch; --tex-kachel-g: var(--img-kachel-g) 90 fill / 24px / 0 stretch; /* Fransenkante (Nr. 931, Betreiber: der Rand des Menues fuer alle Flaechen): KEINE Maske (Nr. 931 v1 mit mask-border machte im Chrome 154 die ganze Flaeche unsichtbar), sondern ein gemalter Rand per border-image. Die Randzone liegt im BORDER: Inhalt und Innenabstand der Module bleiben unberuehrt. Das Bild traegt Papierfarbe + dunklen Innenrand schon in sich (PNG 80x80 breit/Slice 16, 64x64 schmal/Slice 8, Periode 48 px); die Flaeche selbst (background, clip padding-box) liegt immer sichtbar da. Faellt das Bild aus, bleibt ein glatter Papierrand (border-color). */ --fransen-breit-n: 16; --fransen-schmal-n: 8; /* Randzone in px (Zahl), gleich der Slice-Breite des Bildes */ --img-fransen-breit: url(/public/img/ui/fransen-papier-breit.png?v=4); --img-fransen-schmal: url(/public/img/ui/fransen-papier-schmal.png?v=4); --img-buch-rahmen: url(/public/img/schmiede/buch-hoch/buch-hoch-rahmen.webp?v=1); /* Buchrahmen Handy (Nr. 949), 9-Slice */ --img-buch-papier: url(/public/img/schmiede/buch-hoch/buch-hoch-papier.webp?v=1); /* dasselbe Papier fuer das Umblaettern */ --tex-streifen: var(--img-streifen) 90 40 60 40 fill / 90px 40px 60px 40px / 0 stretch; } /* ============ MATERIALIEN: setzen NUR Tokens ============ */ /* Radius auch ausserhalb eines Materials (Eckzeile, freie Zettel-Knoepfe): sonst ist var(--mat-radius-klein) dort ungueltig und die Knoepfe sind eckig, waehrend die im Blatt rund sind (Nr. 982) */ :root { --mat-radius-klein: 4px; } [data-material] { --mat-radius: 6px; --mat-radius-klein: 4px; --mat-neigung: 0deg; --mat-naht: none; --mat-blur: none; --mat-vorschau: var(--abdunkeln-schwach); --mat-gitter: var(--glas-hover); --mat-marke: var(--aufhellen-schwach); --mat-hover: var(--glas-kachel); --mat-schatten-klein: 3px 5px 8px var(--abdunkeln-mittel); } [data-material="pergament"], :is(.hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf, .mfm-knopf, .el-schild), :has(> :is(.hlu-zurueck, .wr-zurueck, .hl-schild))::before { /* + Eckknöpfe und Raum-Plakette: Pergament mit Papierrand (#935, Betreiber 2026-10-10) */ --mat-flaeche: var(--perg-papier); --mat-kachel: var(--perg-papier); --mat-schicht: radial-gradient(ellipse at 18% 12%, var(--perg-licht), transparent 62%), var(--tx-fleck), var(--tx-masse), var(--tx-faser); --mat-text: var(--perg-tinte); --mat-leise: var(--perg-tinte-leise); --mat-akzent: var(--perg-akzent); --mat-rand: var(--perg-rand); --mat-feld: var(--perg-licht); --mat-hover: var(--perg-licht-stark); --mat-haupt: var(--perg-haupt); --mat-haupt-text: var(--gold-hell); --mat-haupt-h: var(--perg-haupt-h); --mat-fokus: var(--perg-fokus); --mat-radius: 3px; --mat-neigung: 1.1deg; --mat-gitter: var(--perg-gitter); --mat-marke: var(--perg-marke); --mat-vorschau: var(--perg-vorschau); --mat-schatten: inset 0 0 34px var(--perg-schatten-innen), inset 0 0 2px var(--perg-rand-stark), 10px 14px 26px var(--abdunkeln-mittel), 2px 3px 4px var(--abdunkeln-mittel); --mat-schatten-klein: inset 0 0 14px var(--perg-schatten-innen-leicht), 4px 6px 10px var(--abdunkeln-mittel), 1px 1px 2px var(--abdunkeln-mittel); color: var(--mat-text); /* Rueckwaertstokens: aeltere Bausteine (.sb-item, .btn, Karten ...) lesen --text/--gold/...; im Pergament bekommen sie dieselbe Tinte, Text > 12:1 */ --text: var(--mat-text); --muted: var(--mat-leise); --gold: var(--mat-akzent); --gold-h: var(--perg-akzent-h); --gold-dim: var(--perg-marke); --bg: var(--perg-papier); --bg2: var(--mat-flaeche); --card: var(--perg-licht-stark); --card-alt: var(--perg-licht); --border: var(--perg-rand-weich); --bm: var(--perg-rand-stark); --red: var(--perg-rot); --sel-common: var(--perg-grau); --sel-uncommon: var(--perg-gruen); --sel-rare: var(--perg-blau); --sel-very_rare: var(--perg-violett); --sel-legendary: var(--perg-orange); /* Seltenheit als Tinte (Nr. 948) */ --sch-Abj: var(--perg-blau); --sch-Bsw: var(--perg-gruen); --sch-Wei: var(--perg-violett); --sch-Vrz: var(--perg-rosa); --sch-Hrv: var(--perg-orange); --sch-Ill: var(--perg-petrol); --sch-Nek: var(--perg-rot); --sch-Vrw: var(--perg-bernstein); --green: var(--perg-gruen); --yellow: var(--perg-gelb); --blue: var(--perg-blau); /* Statusfarben auf Papier (Tinte), fuer alle Bausteine im Pergament: TP-Ring, Temp-TP, Heilung (#932) */ } [data-material="glas"] { --mat-flaeche: var(--glas-flaeche); --mat-kachel: var(--glas-kachel); --mat-schicht: linear-gradient(135deg, var(--aufhellen-stark), var(--aufhellen-fein) 38%, transparent 60%, var(--aufhellen-fein)); --mat-text: var(--glas-text); --mat-leise: var(--glas-leise); --mat-akzent: var(--glas-akzent); --mat-rand: var(--glas-rand); --mat-feld: var(--glas-feld); --mat-hover: var(--glas-hover); --mat-haupt: var(--glas-haupt); --mat-haupt-text: var(--glas-haupt-text); --mat-haupt-h: var(--glas-haupt-h); --mat-fokus: var(--glas-akzent); --mat-radius: 14px; --mat-blur: blur(5px) saturate(1.2); --mat-schatten: inset 0 0 0 1px var(--glas-innenrand), 10px 14px 26px var(--abdunkeln-mittel); color: var(--mat-text); } /* ============ FRANSENKANTE (#931): EIN Baustein, AUTOMATISCH an jeder Pergament-FLAECHE ============ Wer eine Flaeche ist (.el-blatt, .el-fenster, .el-tafel) und data-material="pergament" traegt, bekommt den Rand ohne weiteres Zutun; ebenso .fransen (z. B. Menue-Blatt .hlm-panel). Neue Flaeche = eine dieser Klassen, nichts anderes. NICHT an inneren Kaesten: liegt die Flaeche selbst in einer Pergament-Flaeche (z. B. .sns-Kasten in der Spielen-Tafel), bleibt sie glatt (keine Fransen in Fransen). Kacheln/Knoepfe/Zeilen (.el-kachel, .el-haupt ...) sind keine Flaechen. Aussen Wellen-/Fransenrand (PNG mit Papierfarbe als border-image 9-Slice, 80x80 breit/Slice 16, 64x64 schmal/Slice 8, Periode 48 px), nach innen weicher Papierrand (--mat-kante-innen). Schmal = data-fransen="schmal" (Kartenbauer: km-*, map-builder, ek-*, map-studio). Die Randzone liegt im BORDER: Inhalt und Innenabstand bleiben unberuehrt, nichts rutscht in die Fransen. Keine Maske, keine Live-Filter -> nie unsichtbar, kein Ruckeln am Handy. Kein aeusserer Schatten; Tiefe kommt vom dunklen Innenrand (im Bild). */ :is(.el-blatt, .el-fenster, .el-tafel)[data-material="pergament"]:not(:is(.el-blatt, .el-fenster, .el-tafel, .fransen)[data-material="pergament"] *), .fransen[data-material="pergament"], :is(.mfm-knopf, .el-schild), #sv-topbar .svt-tischwahl[data-form="menue"] #sv-tafelleiste, :has(> :is(.hlu-zurueck, .wr-zurueck, .hl-schild))::before { --fransen-n: var(--fransen-breit-n); --fransen-bild: var(--img-fransen-breit); --fransen: calc(var(--fransen-n) * 1px); box-sizing: border-box; border: var(--fransen) solid var(--perg-fransen); border-radius: var(--mat-rand-radius, 0); box-shadow: var(--mat-rand-schatten, none); -webkit-backdrop-filter: none; backdrop-filter: none; outline: 0; background: var(--mat-kante-innen), var(--mat-schicht), var(--mat-kachel); background-origin: border-box; background-clip: var(--mat-schicht-clip, padding-box); border-image: var(--fransen-bild) var(--fransen-n) / var(--fransen) / 0 round; } :is(.el-blatt, .el-fenster, .el-tafel)[data-material="pergament"][data-fransen="schmal"]:not(:is(.el-blatt, .el-fenster, .el-tafel, .fransen)[data-material="pergament"] *), .fransen[data-material="pergament"][data-fransen="schmal"], :is(.mfm-knopf), #sv-topbar .svt-tischwahl[data-form="menue"] #sv-tafelleiste, :has(> :is(.hlu-zurueck, .wr-zurueck, .hl-schild))::before { --fransen-n: var(--fransen-schmal-n); --fransen-bild: var(--img-fransen-schmal); } [data-material="pergament"], :is(.hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf, .mfm-knopf, .el-schild), :has(> :is(.hlu-zurueck, .wr-zurueck, .hl-schild))::before { /* Eine Flaeche, eine Kante (Nr. 982/1199/1197): die Randzone des Fransenrands ist flach (--perg-kante), die Textur der Innenflaeche gemasert. Der Verlauf legt den Randton bis zum Innenrand der Randzone deckend ueber die Textur und blendet ihn dahinter auf --sp-3 aus: keine Stufe, keine Linie. */ --mat-kante-innen: linear-gradient(90deg, var(--perg-kante) calc(var(--fransen-n, 16) * 1px), transparent calc(var(--fransen-n, 16) * 1px + var(--sp-3))), linear-gradient(270deg, var(--perg-kante) calc(var(--fransen-n, 16) * 1px), transparent calc(var(--fransen-n, 16) * 1px + var(--sp-3))), linear-gradient(180deg, var(--perg-kante) calc(var(--fransen-n, 16) * 1px), transparent calc(var(--fransen-n, 16) * 1px + var(--sp-3))), linear-gradient(0deg, var(--perg-kante) calc(var(--fransen-n, 16) * 1px), transparent calc(var(--fransen-n, 16) * 1px + var(--sp-3))); } /* El-tafel: die Papierflaeche liegt jetzt am Element selbst (Rand + Maske), die alte ::before-Schicht entfaellt dort. */ .el-tafel[data-material="pergament"]:not(:is(.el-blatt, .el-fenster, .el-tafel, .fransen)[data-material="pergament"] *)::before { display: none; } /* ============ EINBAND (Nr. 949): gemaltes Buchblatt als dehnbarer Rahmen, data-material="leder" + class el-einband ============ Betreiber 2026-10-10 (Buch am Handy): Rand wie beim doppelseitigen Buch (Leder, Messingecken, Seitenstapel am Aussenrand, Falz links). Gemalt mit Gemini nach kampagnen-2752.webp (tools/bilder/prompts/buch-hoch-949.txt), als 9-Slice (Slice 123 px = 3 x --buch-rand, die vier Messingecken liegen ganz in den Ecken, Kanten und Papier dehnen). Das Element selbst bleibt leer; ::before zeichnet Rahmen + Papier (Kinder liegen darueber, ihre Lage im Papier steht in halle-buch.css ueber --buch-p-*). Masse nur ueber Tokens (tokens.css). */ [data-material="leder"] { --leder-gold: var(--gold-hell); --leder-korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.7'/%3E%3C/svg%3E"); } /* Lasche (Register) aus demselben dunklen Leder wie der Rahmen, liegt im Einband; Hoehe/Breite/Lage setzt das Modul */ .el-einband .el-lasche { border: 1px solid var(--leder-kante); color: var(--leder-gold); text-shadow: var(--sh-schrift-dunkel); background: linear-gradient(90deg, var(--leder-glanz), transparent 40%, var(--abdunkeln-leicht)), var(--leder-korn), var(--leder-farbe); box-shadow: var(--sh-lasche); } .el-einband .el-lasche:hover, .el-einband .el-lasche:focus-visible { filter: brightness(1.15); } .el-einband[data-material="leder"] { box-sizing: border-box; } /* das Element muss positioniert sein (::before liegt absolut darin) */ .el-einband[data-material="leder"]::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; box-sizing: border-box; border: var(--buch-rand) solid var(--leder-farbe); border-image: var(--img-buch-rahmen) 123 fill / var(--buch-rand) / 0 stretch; /* faellt das Bild aus, bleibt ein Lederrand */ filter: drop-shadow(5px 9px 14px var(--abdunkeln-stark)); } /* ============ GLOBALE KNOEPFE ============ a) ECKZEILE (Nr. 982 W2, Betreiber 2026-10-12: "Allein stehende Buttons haengen in der Luft"): Zurueck, "?" und Menue sind ruhige Nebenknoepfe wie "Fertig" im Pergament-Blatt (.el-neben: Tintenrand 1 px, kleiner Radius, durchsichtig, hover heller) und liegen GEMEINSAM auf EINEM Pergament-Zettel mit schmalem Papierrand (Traeger = ::before des Eck-Stapels, unten). Eine Stelle fuer Halle, Raeume, Buch, Spieltisch, Kartenmacher; Lage/Breiten: halle-welt.css + mf-hilfe.css. Melden (.mfm-knopf) und Plaketten (.el-schild) behalten ihren eigenen Papierrand. b) Rauchglas bleibt nur fuer Knoepfe ueber Bildern (.el-glas, .wisch-pfeil, .hlc-neu-fest, .hlc-schild; Spielmodus-Leisten sv-material.css). */ body :is(.hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf, .mfm-knopf) { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-width: var(--tap); min-height: var(--tap); padding: 0 var(--sp-2); color: var(--mat-text); font: 700 var(--fs-md) 'Cinzel', serif; letter-spacing: .02em; text-shadow: none; opacity: 1; cursor: pointer; filter: none; -webkit-tap-highlight-color: transparent; transition: filter .15s; } body :is(.hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf) { box-sizing: border-box; border: 1px solid var(--mat-rand); border-radius: var(--mat-radius-klein); background: transparent; box-shadow: none; transition: background .15s; } /* Nr. 956: Zurück · ? · Menü gleich hoch (--tap) und mit festen Breiten (Tokens in halle-welt.css), damit der Abstand überall --sp-2 ist; die Breite steht hier, weil min-width oben sonst je nach Ladereihenfolge gewinnt */ body :is(.hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf) { height: var(--tap); } body :is(.hlu-zurueck, .wr-zurueck) { width: var(--ecke-zurueck-b); padding-inline: 0; } body :is(.hlu-menue, .hl-schild, .wr-menue) { width: var(--ecke-menue-b); } body .mfh-knopf { width: var(--ecke-hilfe-b); min-width: var(--ecke-hilfe-b); padding: 0; } @media (hover: hover) { body :is(.hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf):hover { background: var(--mat-hover); } } /* nur mit Maus: am Handy blieb der Hover nach dem Antippen haengen und liess Zurueck "gewaehlt" aussehen (Nr. 1197, Runde 3) */ body :is(.hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf):active { background: var(--mat-hover); transform: translateY(1px); } body .mfm-knopf:hover { filter: brightness(1.1); } body .mfm-knopf:active { filter: brightness(.94); transform: translateY(1px); } body :is(.mfm-knopf):is(.mfm-aktiv) { --mat-kachel: var(--mat-haupt); --mat-schicht: none; --mat-kante-innen: none; color: var(--mat-haupt-text); filter: none; border-image: none; border-color: var(--mat-haupt); background-clip: border-box; } /* aktiv: dunkle Flaeche, glatter Rand (das Fransenbild ist Papierfarbe) */ /* Hilfe an (Nr. 1131, Betreiber: „in Pergament sieht man nicht, dass der Button ausgewählt ist“): der ✕-Knopf ist die Haupt-Fläche des Materials (wie .mfm-aktiv: dunkle Tinte / Onyx-Gold) mit Akzentring, damit er sich vom ruhigen „?“ klar abhebt und als „hier wieder ausschalten“ erkennbar ist; kein blasses Eindrücken mehr */ body .mfh-knopf.mfh-aktiv { background: var(--mat-haupt); color: var(--mat-haupt-text); border-color: var(--mat-haupt); box-shadow: var(--sh-eingedrueckt); outline: 3px solid var(--mat-akzent); outline-offset: 1px; } body .mfh-knopf.mfh-aktiv:hover { background: var(--mat-haupt-h); } body :is(.hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf):focus-visible { outline: 3px solid var(--mat-fokus); outline-offset: 2px; } body .mfm-knopf:focus-visible { outline: 2px solid var(--mat-fokus); outline-offset: calc(-1px * var(--fransen-schmal-n) - 2px); } /* innen im Papier, nicht auf dem Fransenrand */ @media (prefers-reduced-motion: reduce) { :is(.el-glas, .wisch-pfeil, .hlc-neu-fest, .hlc-schild, .hlu-zurueck, .wr-zurueck, .hlu-menue, .hl-schild, .wr-menue, .mfh-knopf, .mfm-knopf) { transition: none; } } /* Traeger der Eckzeile (W2): EIN Pergament-Zettel hinter den vorhandenen Eckknoepfen. Er ist das ::before des ELTERN-Elements der Knoepfe (jedes Element, das Zurueck bzw. in der Halle das Menue direkt enthaelt): so liegt er im SELBEN Stapel wie die Knoepfe (Raeume/Buch/Pult, Welt-Rahmen, Halle haben verschiedene Stapel) und eine Ebene UNTER ihnen (--z-ecke-zettel < --z-ecke). „?“ steht am body ueber allem. Breite je nach sichtbaren Knoepfen (Tokens --ecke-* aus halle-welt.css): nur Menue + „?“ (Halle) · Zurueck + „?“ + Menue (alle anderen). Die Halle zeichnet ihn nicht, solange ein Raum offen ist. Die Fransenzone (8 px) waechst nach aussen; untere/rechte Lage bleibt dadurch >= 4 px im Bild, die Zeile bleibt unter --menue-platz. Fenster/Schleier enden ueber der Zeile. */ :has(> :is(.hlu-zurueck, .wr-zurueck, .hl-schild):not([hidden])):not(:has(> .hlu-host:not([hidden])))::before { content: ''; position: fixed; z-index: var(--z-ecke-zettel); pointer-events: none; right: calc(var(--ecke-rand) - var(--fransen-schmal-n) * 1px); bottom: calc(var(--ecke-rand) + env(safe-area-inset-bottom, 0px) - var(--fransen-schmal-n) * 1px); height: calc(var(--tap) + var(--fransen-schmal-n) * 2px); width: calc(var(--ecke-menue-b) + var(--sp-2) + var(--ecke-hilfe-b) + var(--fransen-schmal-n) * 2px); } :has(> :is(.hlu-zurueck, .wr-zurueck):not([hidden])):not(:has(> .hlu-host:not([hidden])))::before { width: calc(var(--ecke-zurueck-b) + var(--sp-2) + var(--ecke-menue-b) + var(--sp-2) + var(--ecke-hilfe-b) + var(--fransen-schmal-n) * 2px); } /* ============ STREIFEN: Seitenmenue als langer Pergamentstreifen (Konzept Abschnitt 3) ============ Gemalte Textur perg-streifen.webp (oben eingerolltes Ende, unten gerissene Kante); Inhalt scrollt, Rueckfall: Pergamentfarbe mit Rand. */ .el-streifen { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 0; color: var(--mat-text); } .el-streifen::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--mat-rand); border-image: var(--tex-streifen); filter: drop-shadow(10px 14px 12px var(--abdunkeln-mittel)); } .el-streifen-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 78px 0 50px; padding: 6px 40px 10px; scrollbar-width: thin; scrollbar-color: var(--mat-rand) transparent; } @keyframes el-streifen-herauf { from { opacity: 0; transform: translateY(34%); clip-path: inset(100% -40px 0 -40px); } to { opacity: 1; transform: none; clip-path: inset(-40px -40px 0 -40px); } } .el-streifen--herauf { animation: el-streifen-herauf .85s cubic-bezier(.2, .7, .2, 1) backwards; } @media (prefers-reduced-motion: reduce) { .el-streifen--herauf { animation: none; } }