/* bauteile/leistenbaukasten.css — EIN Baukasten für Bedienleisten und ihre Knöpfe (Nr. 982 Teil B; zuvor mf-leiste.css + Knopf-Zustände in sv-material.css).
   Spieltisch UND Kartenmacher (und Buch) bauen aus diesen Klassen, es gibt keine zweite Fassung. Galerie: /admin/bauteile.
   Leiste (Rauchglas, Nr. 966 / #1000, Spieltisch Handy hoch; Karteneditor übernimmt 1:1) – Bausteine, Material kommt von .sv-leiste.el-tafel[data-material="glas"]:
   - .mfl          Leiste, die wischt statt zu brechen; JS setzt data-mehr="links|rechts|beide" (Verlauf am Rand) → MFLeiste.wischbar(el)
   - .mfl-reihe    Leiste in genau EINER Reihe (Nr. 965, Buch-Leisten): nie umbrechen, mind. 44 px, wischt mit Papier-Pfeil am Rand → MFLeiste.wischbar(el, { reihe: true })
   - .mfl-kachel   Knopf = Symbol (.i oder .mf-ico) über einem kleinen Wort (.l oder .mfl-wort); mind. 44 px hoch, Wort wird nie abgeschnitten
   - .mfl-streifen Optionen-Streifen: schmale Zeile ÜBER der Leiste (Optionen des gewählten Werkzeugs), ebenfalls wischbar
   - .mfl-klapp    Zweitleiste: senkrecht rechts, im Hochformat zu; .mfl-griff klappt sie auf (MFLeiste.klapp)
   - .sv-bbtn/.sv-nebelbtn/.sv-brbtn/.sv-kbtn/.svb-knopf/.sv-komp-knopf   Leistenknöpfe: EIN Zustandssatz (normal, hover weißlich, gedrückt, gewählt, Fokus, gesperrt)
   JS: public/js/mf-leiste.js (window.MFLeiste). Doku: .claude/ARCHITECTURE.md, Skill mythforge-bauen.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* ── Leistenfläche (Rauchglas) und Leistenknöpfe ─────────────────────────────── */
.sv-leiste.el-tafel { pointer-events: auto; padding: var(--sp-1) var(--sp-2); --mat-hover: var(--aufhellen-leicht); }   /* Hover heller und weißlich, nicht orange */
/* Alle Leistenknöpfe: ein Zustandssatz (normal / hover / gedrückt / gewählt / Fokus / gesperrt) */
:is(.sv-bbtn, .sv-nebelbtn, .sv-brbtn, .sv-kbtn, .sv-topbar .svb-knopf, .sv-topbar .sv-komp-knopf) {
    color: var(--mat-text); background: transparent; border: 1px solid transparent; font-family: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background-color .12s, border-color .12s, color .12s; }
:is(.sv-nebelbtn, .sv-brbtn) { border-color: var(--mat-rand); background: var(--mat-feld); }
.sv-kbtn, .sv-topbar :is(.svb-knopf, .sv-komp-knopf) { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); flex-shrink: 0; min-width: var(--tap); min-height: var(--tap);
    padding: 0 var(--sp-2); border-radius: var(--mat-radius-klein); font: 600 var(--fs-sm) 'Cinzel', serif; white-space: nowrap; }
.sv-kbtn--icon, .sv-topbar :is(.svb-knopf, .sv-komp-knopf) { padding: 0; }
.sv-kbtn[style*="display:none"] { display: none; }
@media (hover: hover) {
    :is(.sv-bbtn, .sv-nebelbtn, .sv-brbtn, .sv-kbtn, .sv-topbar .svb-knopf, .sv-topbar .sv-komp-knopf):not(:disabled):hover { background: var(--mat-hover); border-color: var(--mat-text); color: var(--mat-text); }
    .sv-kbtn.sv-kbtn--haupt:not(:disabled):hover { background: var(--mat-haupt-h); border-color: transparent; color: var(--mat-haupt-text); }
    .sv-msheet-btn:hover { background: var(--mat-hover); }
    .svf-zeile:hover, .svf-spieler--klick:hover { background: var(--mat-hover); }
}
:is(.sv-bbtn, .sv-nebelbtn, .sv-brbtn, .sv-kbtn, .sv-topbar .svb-knopf, .sv-topbar .sv-komp-knopf):not(:disabled):active { background: var(--mat-feld); transform: translateY(1px); }
:is(.sv-bbtn, .sv-nebelbtn, .sv-brbtn, .sv-kbtn, .sv-msheet-btn, .sv-topbar .svb-knopf, .sv-topbar .sv-komp-knopf):focus-visible { outline: 3px solid var(--mat-fokus); outline-offset: 2px; }
:is(.sv-nebelbtn, .sv-brbtn, .sv-kbtn):disabled { opacity: .4; cursor: default; }
/* gewählt / aktiv */
:is(.sv-bbtn-on, .sv-brbtn-on, .sv-kbtn.on, .svb-knopf-an) { color: var(--mat-akzent); background: var(--mat-feld); border-color: var(--mat-akzent); }
.sv-bbtn-on { box-shadow: var(--mat-sh-kante-oben); }
.sv-nebelbtn-gold { color: var(--mat-akzent); border-color: var(--mat-akzent); }
.sv-kbtn.sv-kbtn--haupt { background: var(--mat-haupt); color: var(--mat-haupt-text); border-color: transparent; }
.sv-bbtn { border-radius: var(--mat-radius-klein); }
@media (prefers-reduced-motion: reduce) { :is(.sv-bbtn, .sv-nebelbtn, .sv-brbtn, .sv-kbtn) { transition: none; } }

/* ── Baukasten: Leiste, Kachel, Streifen, Zweitleiste (nach den Leistenknöpfen: .mfl-kachel gewinnt bei Maßen, wie zuvor mf-leiste.css nach sv-material.css) ── */
:root { --mfl-wort: .72rem; --mfl-kachel-b: 4.2rem; }

.mfl { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.mfl::-webkit-scrollbar { display: none; }
.mfl[data-mehr="rechts"] { -webkit-mask-image: linear-gradient(to right, var(--schwarz) calc(100% - 28px), transparent); mask-image: linear-gradient(to right, var(--schwarz) calc(100% - 28px), transparent); }
.mfl[data-mehr="links"] { -webkit-mask-image: linear-gradient(to left, var(--schwarz) calc(100% - 28px), transparent); mask-image: linear-gradient(to left, var(--schwarz) calc(100% - 28px), transparent); }
.mfl[data-mehr="beide"] { -webkit-mask-image: linear-gradient(to right, transparent, var(--schwarz) 28px, var(--schwarz) calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, var(--schwarz) 28px, var(--schwarz) calc(100% - 28px), transparent); }

.mfl-kachel { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 0 0 auto; box-sizing: border-box;
    width: max-content; min-width: var(--mfl-kachel-b); min-height: 52px; padding: var(--sp-1) var(--sp-2); text-align: center; }      /* Nr. 982: Breite folgt dem Wort (nie über den Rand), Innenabstand seitlich --sp-2 */
.mfl-kachel .i, .mfl-kachel .mfl-ico { display: flex; line-height: 1; }
.mfl-kachel .mf-ico { width: 24px; height: 24px; vertical-align: 0; margin: 0; }
.mfl-kachel .l, .mfl-kachel .mfl-wort { font: 700 var(--mfl-wort)/1.1 'Cinzel', serif;      /* Cinzel wie alle übrigen Knöpfe (Nr. 982) */ white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; letter-spacing: 0; }

/* ── Flex-Band (Nr. 1172, Muster aus Nr. 1171): Kacheln in höchstens zwei Reihen, Symbol + Wort darunter, jede Kachel mindestens so breit wie ihr Wort, den Rest verteilt die Reihe.
   Kein Wischen, kein Pfeil. Wortgröße schrumpft mit der Breite des Leistenkastens (cqi; der Kasten setzt container-type: inline-size selbst, wo er eine feste Breite hat).
   Genutzt von der Würfelleiste (.svw-reihe) und der Werkzeugleiste des Spieltischs am Handy hoch (#sv-bottombar, sv-tisch.css). */
.mfl-band .mfl-kachel { flex: 1 1 0; width: auto; min-width: min-content; padding: var(--sp-2) var(--sp-1); --mfl-wort: clamp(.5rem, 2.9cqi, .72rem); }
@container (min-width: 26rem) { .mfl-band .mfl-kachel { padding-inline: var(--sp-2); } }

.mfl-streifen { display: flex; align-items: center; gap: var(--sp-1); box-sizing: border-box; padding: var(--sp-1); margin: var(--sp-1) 0 0; min-height: var(--tap); }
.mfl-streifen[hidden] { display: none; }

/* Zweitleiste ausklappbar (Handy hoch): standardmäßig zu, Griff „Tafeln“ o. ä. klappt sie senkrecht rechts auf */
.mfl-griff.el-tafel { display: none; }
@media (orientation: portrait) and (max-width: 520px) {
    .mfl-griff.el-tafel { display: inline-flex; position: fixed; top: auto; left: auto; width: var(--mfl-kachel-b); height: 56px; min-height: 0; padding: var(--sp-1) 2px; margin: 0; pointer-events: auto; right: var(--rand-aussen); bottom: calc(var(--mfl-unten, var(--menue-platz)) + var(--sp-2)); z-index: 47; }
    .mfl-klapp { position: fixed !important; right: var(--rand-aussen); left: auto !important; width: auto !important; max-width: none !important; margin: 0 !important; z-index: 47;
        bottom: calc(var(--mfl-unten, var(--menue-platz)) + var(--sp-2) + 56px + var(--sp-1)); max-height: calc(100dvh - var(--sv-band-oben, 64px) - var(--mfl-unten, var(--menue-platz)) - 56px - 4 * var(--sp-2));
        display: flex !important; flex-direction: column; align-items: stretch; overflow-x: hidden; overflow-y: auto; -webkit-mask-image: none !important; mask-image: none !important; }
    .mfl-klapp.mfl-zu { display: none !important; }
    .mfl-klapp .mfl-kachel { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: var(--sp-2); min-width: 7.5rem; padding-inline: var(--sp-2); }
}

/* Pfeile am Rand für Maus/Rechner (Nr. 966, 2026-10-11): nur sichtbar, wenn es in diese Richtung mehr gibt; Touch wischt. */
.mfl-pfeil { display: none; position: sticky; z-index: 2; flex: 0 0 auto; align-self: stretch; min-width: 32px; padding: 0 var(--sp-1, 4px);
  border: 0; border-radius: var(--r-md, 8px); background: var(--card-alt); color: var(--mat-akzent, var(--gold)); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.mfl-pfeil-links { left: 0; } .mfl-pfeil-rechts { right: 0; }
@media (hover: hover) and (pointer: fine) {
  .mfl[data-mehr="links"] .mfl-pfeil-links, .mfl[data-mehr="beide"] .mfl-pfeil-links,
  .mfl[data-mehr="rechts"] .mfl-pfeil-rechts, .mfl[data-mehr="beide"] .mfl-pfeil-rechts { display: block; }
  .mfl { cursor: grab; } .mfl:active { cursor: grabbing; }
}

/* Randverlauf + Pfeil an den Leisten über dem Brett (Nr. 982, Betreiber: „in der Leiste laufen rechts die Sachen raus“): wo es in eine Richtung mehr gibt, steht dort ein Verlauf in Leistenfarbe mit Pfeil –
   Touch UND Maus. Der Pfeil ist null Pixel breit (nimmt der Leiste keinen Platz), sein Verlauf liegt als ::before über dem Rand; Antippen blättert um 70 % (mf-leiste.js).
   Auf Pergament keine Maske: sie würde den Papierrand mit ausblenden. Buch-Bedienleisten haben ihre eigene Regel (buch-a4.css). */
.sv-leiste.mfl[data-material="pergament"] { -webkit-mask-image: none !important; mask-image: none !important; }
.mfl-reihe { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-1); box-sizing: border-box; min-height: var(--tap); }      /* Nr. 965: EINE Reihe */
.mfl-reihe { --mfl-pfeil-b: 28px; }      /* schmaler Chip: bei 85 px Leistenbreite (320 px Handy) bleibt die Mitte des Knopfes frei */
.mfl-reihe > :not(.mfl-pfeil) { flex: none; }
/* Seiten statt Anschneiden (Nr. 1023, Betreiber: Knöpfe „mitten im Wort“ abgeschnitten, Pfeil über dem Text): mf-leiste.js teilt die Reihe in Seiten aus GANZEN Knöpfen (.mfl-stopp = erster Knopf einer Seite),
   neben jedem sichtbaren Pfeil bleibt Platz (scroll-padding = Pfeilbreite + Lücke), die Reihe rastet nur auf diese Knöpfe ein, die Pfeile springen von Seite zu Seite. Der leere Abstandhalter am Ende
   (--mfl-ende) lässt auch die letzte Seite einrasten. Mausrad/Ziehen schalten das Einrasten kurz ab (.mfl-zieht). */
.mfl-reihe.mfl { scroll-snap-type: x mandatory; scroll-padding-inline: var(--mfl-sp, calc(var(--mfl-pfeil-b) + var(--sp-1))); }
.mfl-reihe.mfl:is(.mfl-zieht, .mfl-frei) { scroll-snap-type: none; }
.mfl-reihe.mfl .mfl-stopp { scroll-snap-align: start; }
.mfl-reihe.mfl .mfl-teil { visibility: hidden; }      /* in Ruhe nur ganze Knöpfe: ein am Rand angeschnittener bleibt unsichtbar, bis man weiterblättert */
.mfl-reihe.mfl::after { content: ''; flex: 0 0 var(--mfl-ende, 0px); width: var(--mfl-ende, 0px); margin-left: calc(-1 * var(--sp-1)); }
.mfl-reihe.mfl { -webkit-mask-image: none !important; mask-image: none !important; }      /* statt Maske der Pfeil-Chip (die Maske würde den Papierrand der Schilder ausblenden) */
.sv-leiste.mfl > .mfl-pfeil { position: sticky; z-index: 2; flex: 0 0 0; align-self: stretch; box-sizing: border-box; width: 0; min-width: 0; padding: 0; margin: 0; border: 0; background: none; overflow: visible; color: var(--mat-text); font-size: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sv-leiste.mfl > .mfl-pfeil::before { position: absolute; top: 0; bottom: 0; width: var(--mfl-pfeil-b, var(--tap)); display: grid; place-items: center; font: 700 var(--fs-xl)/1 'Cinzel', serif; }
.sv-leiste.mfl > .mfl-pfeil-links::before { content: '\2039'; left: 0; background: linear-gradient(90deg, var(--mat-kachel) 45%, transparent); }
.sv-leiste.mfl > .mfl-pfeil-rechts::before { content: '\203A'; right: 0; background: linear-gradient(270deg, var(--mat-kachel) 45%, transparent); }
/* Pfeil der Reihe: ein echter Knopf (Pergament-Zettel .mfb-schild, in Onyx Eisen-Platte wie alle Knöpfe), 28 x 44 px, am Rand über einem Randverlauf; Hülle ist null Pixel breit und nimmt der Reihe keinen Platz */
.mfl-reihe.mfl > .mfl-pfeil { position: sticky; z-index: 5; flex: 0 0 0; align-self: stretch; box-sizing: border-box; width: 0; min-width: 0; padding: 0; margin: 0; overflow: visible; pointer-events: none; }
.mfl-reihe.mfl > .mfl-pfeil::before { content: ''; position: absolute; top: 0; bottom: 0; width: calc(var(--mfl-pfeil-b) + var(--sp-4)); }
.mfl-reihe.mfl > .mfl-pfeil-links::before { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--mat-kachel) 96%, transparent) 62%, transparent); }
.mfl-reihe.mfl > .mfl-pfeil-rechts::before { right: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--mat-kachel) 96%, transparent) 62%, transparent); }
.mfl-reihe.mfl > .mfl-pfeil > button { position: absolute; top: 0; bottom: 0; width: var(--mfl-pfeil-b); min-width: 0; min-height: 0; padding: 0; pointer-events: auto; font: 700 var(--fs-lg)/1 'Cinzel', serif; }
.mfl-reihe.mfl > .mfl-pfeil-links > button { left: 0; } .mfl-reihe.mfl > .mfl-pfeil-rechts > button { right: 0; }
/* Nr. 1026: Papier-Pfeil (Pergament-Zettel) – der 8-px-Fransenrand fraß von 28 px Breite 16 px, der Pfeil wurde ein schmaler Strich. Rand hier auf 4 px (dasselbe Bild, kleiner gezeichnet): innen bleiben 20 px wie bei der Eisen-Platte in Onyx.
   Der Randverlauf darunter blendet auch oben/unten weich aus (Maske), kein harter Kasten auf dem Hintergrund. */
.mfl-reihe.mfl > .mfl-pfeil > button.fransen[data-material="pergament"] { --fransen: 4px; }
.mfl-reihe.mfl > .mfl-pfeil::before { -webkit-mask-image: linear-gradient(180deg, transparent, currentColor 22%, currentColor 78%, transparent); mask-image: linear-gradient(180deg, transparent, currentColor 22%, currentColor 78%, transparent); }
:is(.sv-leiste, .mfl-reihe).mfl[data-mehr="links"] > .mfl-pfeil-links, :is(.sv-leiste, .mfl-reihe).mfl[data-mehr="beide"] > .mfl-pfeil-links,
:is(.sv-leiste, .mfl-reihe).mfl[data-mehr="rechts"] > .mfl-pfeil-rechts, :is(.sv-leiste, .mfl-reihe).mfl[data-mehr="beide"] > .mfl-pfeil-rechts { display: block; visibility: visible; }
/* Pfeile der Reihe liegen immer im Fluss (Breite 0, nur ihre Lücke), sie werden nur unsichtbar: sonst verschöbe das Einblenden des linken Pfeils alle Knöpfe um eine Lücke und die Seiten (mf-leiste.js seiten()) stimmten nicht mehr */
.mfl-reihe.mfl > .mfl-pfeil { display: block; visibility: hidden; }

/* Leisten auf Pergament (Nr. 982, V1d Variante A): Knöpfe sind derselbe Knopf wie im Blatt – Tintenrand, kleiner Radius, durchsichtig; hover heller; gewählt dunkel (wie .el-haupt / gewählter Reiter). Kein Rauchglas mehr. */
.sv-leiste[data-material="pergament"] :is(.sv-bbtn, .sv-nebelbtn, .sv-brbtn, .sv-kbtn, .svb-knopf, .sv-komp-knopf) { border-color: var(--mat-rand); }
.sv-leiste[data-material="pergament"] :is(.sv-bbtn-on, .sv-brbtn-on, .sv-kbtn.on, .svb-knopf-an, .sv-kbtn.sv-kbtn--haupt) { background: var(--mat-haupt); color: var(--mat-haupt-text); border-color: transparent; box-shadow: var(--sh-kante-unten); }
@media (hover: hover) { .sv-leiste[data-material="pergament"] :is(.sv-bbtn-on, .sv-brbtn-on, .sv-kbtn.on, .svb-knopf-an, .sv-kbtn.sv-kbtn--haupt):not(:disabled):hover { background: var(--mat-haupt-h); border-color: transparent; color: var(--mat-haupt-text); } }