/* MX-Archive - alle Bereiche auf einer voll schwarzen Oberflaeche.
Design-System (15.09.2026, Raster verbindlich seit S5b 25.09.2026):
Schrift IBM Plex Sans (Text), Sans Condensed (Ueberschriften, Zahlen), Mono (Werte, Kennungen)
Skala --t-xs 11 (Kennungen, Mono) · --t-s 12.5 (Nebentext) · --t-m 14 (Grund) · --t-l 16 (Modulkopf, Lesetext)
· --t-xl 20 (Abschnitt, Dialog) · --t-2xl 26 (Detail, Seitenkopf am Handy) · --t-3xl 36 (Seitenkopf)
· --t-4xl 54 (Startseite und Obergrenze fliessender Anzeigeschrift)
Radien --r-xs 4 (Plakette, Status, Kaestchen) · --r-s 6 (Feld, Knopf, kleines Bild) · --r-m 10 (Karte, Menue, Bahn)
· --r-l 14 (Modul, Dialog, Schublade, Tabellenbox) · --r-p Pille
Abstaende --s1 4 · --s2 8 · --s3 12 · --s4 16 · --s5 24 · --s6 32 · --s7 48 (Grundmass 4)
Zustaende ok / warn / krit / neu je mit Text, Flaeche, Rand. Gruen heisst "in Ordnung", nie "eingeschaltet".
Auswahl gewaehlt = heller Chip (Filter, Segment), Reiter = Unterstrich, ein/aus = Kippschalter (an in der Akzentfarbe),
aktiv (laufender Zustand eines Knopfs) = blaue Flaeche (--neu-tief)
Grautoene sind auf Lesbarkeit geprueft: --text3 erreicht auf Schwarz rund 5:1.
Raster (S5b, eine Regel je Ebene; tests/js/raster-skala.test.mjs zaehlt jede feste Pixelangabe neben den Skalen):
Seite oben --seite-oben (24, Handy 16), seitlich --seite-x (Seitenrand, Inhalt hoechstens --inhalt-max 1720 breit und
mittig); Kopf -> Reiter 16, unter den Reitern 24 bis zum Inhalt.
Abschnitt 32 zwischen Abschnitten (Handy 24); Abschnittskopf 20 Condensed, 12 bis zum Inhalt.
Modul Modul, Dialog, Schublade, Tabellenbox Radius 14; innen 16 (Handy 12); Luecke im Modulraster 16.
Zeile --zeile 40 (Text 14) oder --zeile-k 32 (kompakt, Text 12,5); Chips 28 als Pille; Status 22 mit Radius 4.
Feld Beschriftung 12,5 mit 4 zum Feld; Feld und Knopf --feld 36 (klein --feld-k 28), Radius 6, innen 8/12;
Felder untereinander 12.
Umbruch drei Breiten: 820 (Handy), 1250 (schmaler PC: Seitenspalten klappen), 2200 (breit). In @media sind keine
Variablen moeglich - die Zahlen stehen deshalb ausgeschrieben. Ausgenommen sind nur die Lagen des Players
(orientation: Hochformat bis 640, Querformat bis 520 Hoehe).
Ausnahmen Haarlinien und Fugen (1-2 px zwischen Bildern und Zeilen), die Wortmarke, drei Anzeigeschriften als Grafik
(Jahr, grosses Und), kleine Formzeichen (Radius 2 bei Marken unter 12 px), Symbolgeometrie (Sterne) und Werte,
die ein Test festhaelt. Jede steht mit Grund an ihrer Stelle. */
:root{
color-scheme:dark;
--grund:#000; --flaeche:#0a0a0b; --flaeche2:#111113; --flaeche3:#19191c; --flaeche4:#222226;
--linie:#1d1d21; --linie2:#2c2c32; --linie3:#3a3a41;
--text:#f2f1ee; --text2:#b0afb5; --text3:#7f7e85; --text-lesen:#dcdbd7;
--akzent:#9ccaff; --akzent2:#6fb1f5; --akzent-tief:#0f1f2e; --akzent-rand:#244a6e;
--ok:#63d297; --ok-tief:#0c1c13; --ok-rand:#1f5c38;
--warn:#e8b84a; --warn-tief:#1f190b; --warn-rand:#6b5320; --warn-text:#f3d58f;
--krit:#f0685e; --krit-tief:#231010; --krit-rand:#5a2420; --krit-text:#ffb4ac;
--neu:#9ccaff; --neu-tief:#0f1f2e; --neu-rand:#244a6e;
--n-usenet:#d8a74f; --n-warp:#d890b2; --n-sftp:#78b6ee; --n-tailnet:#a293ff; --n-lan:#cdc3b1; --n-desktop:#7fd6c8; --n-lokal:#b8d86b;
--b-filme:#ecebe7; --b-serien:#b3b1ac; --b-television:#9e9c97; --b-dokufilme:#8a8883; --b-dokuserien:#65645f; --b-musik:#4a4944;
/* Kennfarben der Planungslisten (Auftrag 73, Vorschlag 16): eine eigene, gedaempfte Reihe, die keiner Statusfarbe gleicht. Bis dahin trug
Hinzufuegen das Gruen von "in Ordnung", Nicht verfuegbar das Rot von "kritisch", Spaeter entscheiden das Gelb der Warnung und
Veroeffentlichung ausstehend das Blau von "neu". Die Farbfamilie je Liste bleibt (Salbei, Orchidee, Meerglas, Stahlblau, Rosenholz,
Heide, Sand), Helligkeit und Buntheit sind fast gleich (OKLCH L 0,70 bis 0,76, C 0,06 bis 0,085, die Statusfarben haben C 0,09 bis
0,17); jede steht auf Schwarz mit mindestens 7,5 zu 1. */
--l-hinzufuegen:#94b383; --l-bearbeitung:#d192af; --l-upgraden:#7bb4b0; --l-kommt:#90a5cb; --l-nichtda:#cb8c7f; --l-laeuft:#b398c8; --l-spaeter:#c6ae82; --l-erledigt:#7f7e85;
/* Termine der Planung (PL-01, S5b P4): Kino, Digital, Disc, neue Folge, fehlende Folge; eigene Stufen statt der Farben des Netzbilds */
--termin-kino:#ee8aa8; --termin-digital:var(--akzent); --termin-disc:#d9d4c7; --termin-folge:var(--l-laeuft); --termin-fehlt:var(--warn);
--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--kond:"IBM Plex Sans Condensed","IBM Plex Sans","Arial Narrow",system-ui,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono","SF Mono",Menlo,monospace;
--t-xs:11px; --t-s:12.5px; --t-m:14px; --t-l:16px; --t-xl:20px; --t-2xl:26px; --t-3xl:36px; --t-4xl:54px;
--r-xs:4px; --r-s:6px; --r-m:10px; --r-l:14px; --r-p:999px;
/* Abstandsskala (16.09.2026): s2 Karten im Raster, s3 Kopf->Inhalt, s4 Modulinnen, s5 Regal->Regal, s6 Abschnitt->Abschnitt */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
--leiste:78px; --band:44px; --radius:var(--r-l);
--seitenrand:clamp(20px,2.2vw,44px);
/* Raster (S5b): Zeilen- und Feldhoehen, Kopf der Seite, Hoechstbreite des Inhalts, Hoehe der Navigation am Handy */
--zeile:40px; --zeile-k:32px; --feld:36px; --feld-k:28px;
--seite-oben:var(--s5); --inhalt-max:100000px; --mobilkopf:44px; --mobilnav:64px;
/* Oberkante fuer klebende Koepfe: unter dem Datenstrom-Band (nur Betrieb), am Handy zusaetzlich unter dem Mobilkopf */
--klebe-oben:var(--band);
/* Player (P-04): ein heller Raum auf Schwarz - eigene Stufen statt der Grautoene der Seite, damit die Bedienung auf jedem Bild traegt */
--pl-text:#fff; --pl-text2:rgba(255,255,255,.87); --pl-text3:rgba(255,255,255,.6); --pl-text4:rgba(255,255,255,.4);
--pl-flaeche:rgba(16,16,18,.96); --pl-linie:rgba(255,255,255,.13); --pl-linie2:rgba(255,255,255,.2); --pl-leer:rgba(255,255,255,.27);
--pl-puffer:rgba(255,255,255,.33); --pl-hover:rgba(255,255,255,.07); --pl-an:rgba(255,255,255,.15); --pl-an2:rgba(255,255,255,.22);
--pl-schleier:rgba(0,0,0,.6); --pl-verlauf:rgba(0,0,0,.85);
}
body.ohne-band{--klebe-oben:0px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--grund);scrollbar-color:var(--linie3) var(--grund)}
*{scrollbar-width:thin;scrollbar-color:var(--linie2) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--linie2);border-radius:var(--r-p);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--linie3);background-clip:padding-box}
body{background:var(--grund);color:var(--text);font-family:var(--sans);font-size:var(--t-m);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:1.5px solid var(--akzent);outline-offset:2px;border-radius:var(--r-xs)}
.sprung{position:absolute;left:-999px;top:8px;background:var(--text);color:#000;padding:8px 12px;border-radius:var(--r-s);z-index:200}
.sprung:focus{left:8px}
.zahl{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.klein{font-size:var(--t-s);color:var(--text2)}
.leise{color:var(--text3)}
.etikett{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.trenn{color:var(--linie3);margin:0 8px}
.ok-text{color:var(--ok)}.warn-text{color:var(--warn)}.krit-text{color:var(--krit)}.akzent-text{color:var(--akzent)}
.eine-zeile{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.zwei-zeilen{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ---------------------------------------------------------------- Rahmen: Leiste, Kopfband, Seite */
.rahmen{display:grid;grid-template-columns:var(--leiste) minmax(0,1fr);min-height:100vh}
/* R-01 (S5b): Kacheln 52 px, Knoepfe im Fuss 36 px - die Leiste passt in 800 px Fensterhoehe. Ist das Fenster niedriger, rollt die
Mitte (Navigation), der Fuss mit Suche, Glocke und Konto bleibt stehen; erst unter rund 400 px rollt die ganze Leiste. */
/* Auftrag 34: als App vom Home-Bildschirm (black-translucent) liegt die Seite unter der Statusleiste - am iPad beginnt die Leiste darunter */
.leiste{position:sticky;top:0;height:100vh;height:100dvh;border-right:1px solid var(--linie);display:flex;flex-direction:column;align-items:center;padding:max(var(--s4),env(safe-area-inset-top)) 0 var(--s4);gap:var(--s2);background:var(--grund);z-index:30;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.leiste::-webkit-scrollbar{display:none}
.marke{font-family:var(--kond);font-weight:600;font-size:var(--t-l);letter-spacing:.02em;margin-bottom:16px;text-decoration:none;line-height:1}
.marke span{color:var(--text3)}
/* MX-Archive: in der schmalen Leiste steht die Wortmarke zweizeilig (MX ueber ARCHIVE), im Mobilkopf einzeilig */
.leiste .marke{display:grid;justify-items:center;gap:4px;font-size:17px}
.leiste .marke span{font-size:9px;font-weight:500;letter-spacing:.2em;margin-right:-.2em}
.nav{display:flex;flex-direction:column;align-items:center;gap:var(--s1);width:100%;flex:0 1 auto;min-height:calc(3 * 52px + 2 * var(--s1));padding-block:var(--s1);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{position:relative;flex:none;width:62px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);padding:var(--s1) 0;border-radius:var(--r-m);text-decoration:none;color:var(--text3);font-size:var(--t-xs);line-height:1.4;transition:color .15s,background .15s}
.nav a svg,.mobilnav svg,.rund svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nav a:hover{color:var(--text2)}
.nav a.an{color:var(--text);background:var(--flaeche2)}
.nav a.an svg{stroke:var(--akzent)}
.nav .zaehler{position:absolute;top:4px;right:8px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-p);background:var(--flaeche4);color:var(--text);font-family:var(--mono);font-size:var(--t-xs);line-height:18px;text-align:center}
.leiste-unten{margin-top:auto;flex:none;display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.rund{width:var(--feld);height:var(--feld);border-radius:var(--r-m);border:1px solid var(--linie2);background:none;display:grid;place-items:center;cursor:pointer;color:var(--text2);flex:none}
.rund svg{width:18px;height:18px}
.rund:hover{color:var(--text);border-color:var(--linie3)}
.live{width:12px;height:12px;display:grid;place-items:center}
.live i{width:8px;height:8px;border-radius:50%;background:var(--text3)}
.live.an i{background:var(--ok);box-shadow:0 0 0 4px rgba(99,210,151,.14)}
.live.aus i{background:var(--krit);box-shadow:0 0 0 4px rgba(240,104,94,.16)}
/* S5b P2: gelb, wenn der Server da ist, die Zahlen aber nicht frisch (er bremst, oder der letzte Abruf ist alt) - Punkt im Kontomenue und Ring */
.live.warn i{background:var(--warn)}
/* R-05 (Vorbereitung fuer P2): der Verbindungspunkt als Ring um die Lupe - app/kern.js setzt .live-an / .live-aus am Suchknopf
(wie heute am Punkt); der Text dazu steht im title und im Kontomenue. */
.rund.live-an{border-color:var(--ok-rand);box-shadow:0 0 0 3px rgba(99,210,151,.14)}
.rund.live-aus{border-color:var(--krit-rand);box-shadow:0 0 0 3px rgba(240,104,94,.16)}
.rund.live-warn{border-color:var(--warn-rand);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 16%,transparent)}
/* B-18 (S5b): Hoechstbreite - seit dem 25.09.2026 (Wunsch des Eigentuemers nach dem Ausrollen von P1: 'alles nur noch in der Mitte'
sieht falsch aus) praktisch aus (--inhalt-max 100000px): der Inhalt fuellt die ganze Breite, die Raster skalieren mit; die Rechnung
bleibt, damit ein Wert wie 1720px jederzeit wieder greift. .haupt misst seine Breite (Container), --seite-x ist der seitliche Rand der Seite: mindestens der
Seitenrand, auf breiten Schirmen so viel, dass der Inhalt hoechstens --inhalt-max breit ist und mittig steht. Was randlos laeuft
(Buehne, Kinobuehne der Titelseite, haftende Leiste), rechnet mit demselben Wert zurueck bis an den Rand. Ein Container ohne
Layout-Eingrenzung: position:fixed darin bleibt am Fenster (nachgemessen in Chrome 153). */
.haupt{min-width:0}
/* Nur die Hauptflaeche des Rahmens - .haupt heisst auch der Hauptknopf (.knopf.haupt), der darf kein Container werden. */
/* Fernseher mit Chromium vor 105 (Samsung Tizen 7: Chromium 94) kennen keine Container-Einheiten. Dort waere --seite-x ungueltig und
jede Seite ohne seitlichen Rand, die Startseite zudem 42 px breiter als der Schirm (Auftrag 39b, im TV-Emulator gemessen). Darum erst
der Rueckfall, die genaue Fassung nur dort, wo der Browser cqw kennt. */
.rahmen>.haupt{--seite-x:var(--seitenrand)}
@supports (width:1cqw){.rahmen>.haupt{container-type:inline-size;--seite-x:max(var(--seitenrand),(100cqw - var(--inhalt-max)) / 2)}}
/* Das Datenstrom-Band gehoert zum Betrieb; auf den anderen Seiten bleibt die Flaeche ruhig */
.band{position:sticky;top:0;z-index:20;height:var(--band);display:flex;align-items:center;gap:16px;padding-inline:var(--seite-x);background:rgba(0,0,0,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
body.ohne-band .band{display:none}
.band canvas{flex:1;height:22px;min-width:60px;cursor:pointer}
.band-werte{display:flex;gap:16px;font-family:var(--mono);font-size:var(--t-s);color:var(--text2);white-space:nowrap}
.band-werte b{font-weight:500;color:var(--text)}
.hinweisband{padding:8px var(--seite-x);background:var(--krit-tief);border-bottom:1px solid #4a1d1a;color:var(--krit-text);font-size:var(--t-m)}
/* R-07 (S5b P2): der Server bremst nur (429) - gelb wie der Ring an der Lupe */
.hinweisband.warn{background:var(--warn-tief);border-bottom-color:var(--warn-rand);color:var(--warn-text)}
.seite{padding:var(--seite-oben) var(--seite-x) var(--s7);outline:none}
/* Die Startseite (app/start.css) ist die Ausnahme vom Raster der Seite: sie laeuft randlos ueber die ganze Breite (ohne Hoechstbreite)
und rechnet mit dem frueheren Kopfabstand der Seite (.st-hero margin-top -22 px, am Handy -14 px). Fuer sie bleibt der alte Abstand
stehen, damit dort nichts verrutscht - rechnet start.css mit --seite-oben, entfallen diese Zeilen (auch die am Handy weiter unten). */
.seite:has(>.st){padding-top:22px;padding-inline:var(--seitenrand)}
.mobilkopf{display:none}
/* ---------------------------------------------------------------- Seitenkopf: ein Muster fuer alle Bereiche */
.kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:var(--s4)}
.kopf h1{font-family:var(--kond);font-weight:500;font-size:var(--t-3xl);line-height:1.05;letter-spacing:-.01em;text-wrap:balance;margin-top:0}
.kopf h1 em{font-style:normal;color:var(--text3)}
.kopf .unterzeile,.statuszeile{color:var(--text2);margin-top:8px;max-width:72ch;font-size:var(--t-s)}
.statuszeile{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.statuszeile b{font-weight:500;color:var(--text)}
.kopf-rechts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.abschnitt{margin-top:var(--s6);scroll-margin-top:calc(var(--klebe-oben) + var(--s7))}
.abschnitt>header{display:flex;align-items:baseline;gap:8px 12px;margin-bottom:var(--s3);flex-wrap:wrap}
.abschnitt>header h2{font-family:var(--kond);font-weight:500;font-size:var(--t-xl);letter-spacing:-.005em}
.abschnitt>header .rechts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tafel{border:1px solid var(--linie);border-radius:var(--r-l);background:var(--grund)}
.tafel-kopf{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--linie);flex-wrap:wrap}
.tafel-kopf h3{font-size:var(--t-m);font-weight:600}
.tafel-kopf .rechts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tafel-inhalt{padding:16px}
.raster2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);align-items:start}
.raster3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);align-items:start}
/* Leerzustaende: ein Satz, was fehlt, und wenn moeglich die naechste Handlung */
.leer{color:var(--text3);font-size:var(--t-m);padding:8px 0}
.leer-klein{color:var(--text3);font-size:var(--t-s);padding:8px 0}
.leerzustand{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 0;color:var(--text2);font-size:var(--t-m);max-width:60ch}
.leerzustand b{font-weight:500;color:var(--text)}
.leerzustand .chips{margin-top:4px}
/* ---------------------------------------------------------------- Chips, Status, Knoepfe */
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linie2);border-radius:var(--r-p);padding:4px 12px;font-size:var(--t-s);color:var(--text2);background:none;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1.35;min-height:var(--feld-k)}
.chip:hover{color:var(--text);border-color:var(--linie3)}
.chip.an{color:#000;background:var(--text);border-color:var(--text)}
.chip.an small{color:#3a3a3a;opacity:1}
.chip i{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.chip small{font-family:var(--mono);font-size:var(--t-xs);color:inherit;opacity:.7}
.chip .x{font-size:var(--t-l);line-height:1;margin-left:-4px;opacity:.7}
.chip.weg{border-style:dashed}
.status{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.03em;padding:0 8px;min-height:22px;border-radius:var(--r-xs);background:var(--flaeche3);color:var(--text2);white-space:nowrap}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.status.ohne::before{display:none}
.status.ok{color:var(--ok);background:var(--ok-tief)}.status.warn{color:var(--warn);background:var(--warn-tief)}
.status.krit{color:var(--krit);background:var(--krit-tief)}.status.neu{color:var(--akzent);background:var(--akzent-tief)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-s);padding:4px 12px;border:1px solid var(--linie2);background:var(--flaeche2);font-size:var(--t-m);cursor:pointer;text-decoration:none;white-space:nowrap;color:var(--text);line-height:1.35;min-height:var(--feld)}
.knopf:hover{border-color:var(--linie3);background:var(--flaeche3)}
.knopf:disabled{opacity:.4;cursor:default}
.knopf.haupt{background:var(--text);color:#000;border-color:var(--text);font-weight:500}
.knopf.haupt:hover{background:#fff}
.knopf.gefahr:hover{border-color:var(--krit-rand);color:var(--krit);background:var(--krit-tief)}
.knopf.scharf{border-color:var(--krit);color:var(--krit);background:var(--krit-tief)}
.knopf.leise{background:none}
.knopf.klein{padding:0 8px;font-size:var(--t-s);min-height:var(--feld-k)}
.knopf.an{border-color:var(--neu-rand);color:var(--akzent);background:var(--neu-tief)}
.knopf svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.knopf.mit-bild{padding-left:8px}
.ik{width:var(--feld);height:var(--feld);border-radius:var(--r-s);border:1px solid var(--linie2);background:var(--flaeche2);display:inline-grid;place-items:center;cursor:pointer;color:var(--text2);flex:none;padding:0}
.ik svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ik:hover{color:var(--text);border-color:var(--linie3);background:var(--flaeche3)}
.ik.an{color:var(--akzent);border-color:var(--neu-rand);background:var(--neu-tief)}
.ik.gefahr:hover{color:var(--krit);border-color:var(--krit-rand)}
.ik.scharf{color:#000;background:var(--krit);border-color:var(--krit)}
.ik:disabled{opacity:.35;cursor:default}
.ik.klein{width:var(--feld-k);height:var(--feld-k)}
.ik.klein svg{width:14px;height:14px}
.balken{height:6px;border-radius:var(--r-xs);background:var(--flaeche3);overflow:hidden;display:flex;gap:1px}
.balken>span{height:100%;background:var(--text2);transition:width .5s}
.balken.duenn{height:3px}
.balken>span.ok{background:var(--ok)}.balken>span.warn{background:var(--warn)}.balken>span.krit{background:var(--krit)}.balken>span.akzent{background:var(--akzent)}
.zeilen{display:flex;flex-direction:column}
.zeile{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:var(--t-s)}
.zeile>span:first-child{color:var(--text2)}
.zeile>span:last-child{font-family:var(--mono);font-size:var(--t-s);text-align:right}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--r-l);overflow:hidden}
.kacheln>div{background:var(--grund);padding:12px 16px;min-width:0}
.kacheln b{display:block;font-family:var(--kond);font-weight:500;font-size:var(--t-2xl);letter-spacing:-.01em;line-height:1.15}
.kacheln b small{font-family:var(--sans);font-size:var(--t-s);font-weight:400;color:var(--text3);margin-left:4px}
.kacheln span{font-size:var(--t-s);color:var(--text2)}
.eintrag{padding:8px 0;border-top:1px solid var(--linie)}
.eintrag:first-child{border-top:0}
.eintrag .name{font-size:var(--t-m)}
.eintrag .meta{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);margin-top:4px;flex-wrap:wrap}
.eintrag .balken{margin-top:8px}
.eintrag .knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.gruppe,.unterteil,.teil{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.gruppe{margin:12px 0 4px}
.unterteil{margin:16px 0 4px;display:flex;gap:8px;align-items:center}
.unterteil::after{content:"";flex:1;height:1px;background:var(--linie)}
input.feld,select.feld,textarea.feld{background:var(--grund);border:1px solid var(--linie2);border-radius:var(--r-s);padding:8px 12px;font-size:var(--t-m);color:var(--text);width:100%;min-height:var(--feld)}
/* Fokus im Feld (S5b): Rand und ein zweiter Ring in derselben Farbe - vorher nur der Rand, 1 px blau neben 1 px grau war leicht zu uebersehen.
:focus-within fuer das Datumsfeld: steht der Fokus auf dessen Kalenderknopf (Schatten-DOM), gilt :focus am Feld nicht. */
input.feld:focus,input.feld:focus-within,select.feld:focus,textarea.feld:focus{border-color:var(--akzent2);outline:none;box-shadow:0 0 0 1px var(--akzent2)}
select.feld{padding-right:24px}
textarea.feld{resize:vertical;line-height:1.5}
.suchfeld{display:flex;align-items:center;gap:8px;border:1px solid var(--linie2);border-radius:var(--r-m);padding:0 12px;background:var(--flaeche);min-height:var(--zeile)}
.suchfeld:focus-within{border-color:var(--akzent2);box-shadow:0 0 0 1px var(--akzent2)}
.suchfeld svg{width:16px;height:16px;stroke:var(--text3);fill:none;stroke-width:1.7;flex:none}
.suchfeld input{flex:1;min-width:0;background:none;border:0;outline:none;padding:8px 0;font-size:var(--t-m)}
.suchfeld input::placeholder{color:var(--text3)}
kbd{font-family:var(--mono);font-size:var(--t-xs);color:var(--text2);border:1px solid var(--linie2);border-bottom-width:2px;border-radius:var(--r-xs);padding:0 4px;background:var(--flaeche)}
/* R-12 (S5b): Tastenhinweise nur, wo es Tasten gibt - auf Touch-Geraeten fallen sie in Knoepfen, Suchfeldern und Treffern weg. Der
Dialog "Tastenkuerzel" zeigt sie weiter: dort sind sie der Inhalt, nicht ein Hinweis. */
@media (hover:none){:is(button,a,.knopf,.suchfeld) kbd{display:none}}
/* Segment: eine Auswahl aus wenigen Werten (Ansicht, Box). ".umschalter" bleibt als Zweitname. */
.segment,.umschalter{display:inline-flex;border:1px solid var(--linie2);border-radius:var(--r-s);overflow:hidden;flex:none}
.segment button,.umschalter button{background:none;border:0;padding:4px 12px;font-size:var(--t-s);color:var(--text2);cursor:pointer;text-align:left;line-height:1.25;min-height:calc(var(--feld-k) - 2px)}
.segment button+button,.umschalter button+button{border-left:1px solid var(--linie2)}
.segment button.an,.umschalter button.an{background:var(--text);color:#000;cursor:default}
.segment button:not(.an):hover,.umschalter button:not(.an):hover{background:var(--flaeche2);color:var(--text)}
.segment button.scharf{background:var(--warn-tief);color:var(--warn)}
.segment button small{display:block;font-size:var(--t-xs);color:var(--text3)}
.segment button.an small{color:#444}
.kipp{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:var(--r-p);background:var(--flaeche3);border:1px solid var(--linie2);position:relative;cursor:pointer;flex:none;transition:background .15s}
.kipp::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text3);transition:left .15s,background .15s}
/* Eingeschaltet ist die Akzentfarbe, wie "gewaehlt" bei Ankreuzfeldern und Reitern: Gruen heisst "in Ordnung", nie "eingeschaltet"
(Auftrag 73, Vorschlag 16; bis dahin war der Schalter an gruen) */
.kipp:checked{background:var(--akzent-tief);border-color:var(--akzent-rand)}.kipp:checked::after{left:18px;background:var(--akzent)}
.kipp:disabled{opacity:.5;cursor:default}
/* ---------------------------------------------------------------- Kurator-Regler (24.09.2026): Konto > Vorschlaege, Verwaltung > Kurator, "Warum?"
Praefix .kreg- (app/bibliothek.js MX.kuratorRegler, warumHtml). Sparten-Farben nur hier: Film blau, Serie gruen, Doku gelb, Television violett, Musik rosa. */
.kreg{display:flex;flex-direction:column;gap:var(--s4)}
/* V-17/K-04 (S5b): die Tafel ist rund 5.000 px lang - der Kopf mit Speichern und Verwerfen klebt oben, damit der Weg zurueck nach
dem letzten Regler kurz bleibt. Innenabstand und Gegenrand heben sich auf: ungeklebt steht alles wie vorher. */
.kreg-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;position:sticky;top:var(--klebe-oben);z-index:6;
padding-block:var(--s2);margin-block:calc(-1 * var(--s2));background:var(--grund);border-bottom:1px solid var(--linie)}
.kreg-kopf h2{margin:0 0 4px;font-size:var(--t-xl);font-weight:500}
.kreg-kopf p{margin:0;max-width:640px}
.kreg-knoepfe{display:flex;gap:var(--s2);flex-wrap:wrap}
.kreg-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.kreg-tafel,.kreg-seite{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.kreg-gruppe h3,.kreg-vorschau h3,.kreg-lage h3{margin:0 0 var(--s2);font-size:var(--t-l);font-weight:500}
.kreg-lage h4{margin:var(--s4) 0 var(--s2);font-size:var(--t-m);font-weight:500}
.kreg-regler{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-top:1px solid var(--linie)}
.kreg-gruppe h3+.kreg-regler{border-top:0;padding-top:4px}
.kreg-name{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;min-height:28px}
.kreg-name b{font-weight:500}
.kreg-wert{color:var(--akzent);font-size:var(--t-m)}
.kreg-regler.eigen .kreg-wert::after{content:" · eigener Wert";color:var(--text3);font-family:var(--sans);font-size:var(--t-xs)}
.kreg-zusatz{font-size:var(--t-s)}
.kreg-zurueck{margin-left:auto}
.kreg-schieber{width:100%;margin:8px 0;appearance:none;-webkit-appearance:none;height:4px;border-radius:var(--r-p);background:var(--flaeche4);cursor:pointer}
.kreg-schieber::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--akzent);border:2px solid var(--grund)}
.kreg-schieber::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--akzent);border:2px solid var(--grund)}
/* K-04 (S5b): am Finger ein Griff von 20 px und eine dickere Spur. Getrennte Regeln - -webkit- und -moz- in einer Regel verwirft jeder Browser. */
@media (pointer:coarse){.kreg-schieber{height:6px;margin:var(--s3) 0}}
@media (pointer:coarse){.kreg-schieber::-webkit-slider-thumb{width:20px;height:20px}}
@media (pointer:coarse){.kreg-schieber::-moz-range-thumb{width:18px;height:18px}}
.kreg-regler p{margin:0}
.kreg-mehr>summary{cursor:pointer;color:var(--text2);padding:8px 0;list-style:none}
.kreg-mehr>summary::-webkit-details-marker{display:none}
.kreg-mehr>summary::before{content:"▸ ";color:var(--text3)}
.kreg-mehr[open]>summary::before{content:"▾ "}
.kreg-mehr .kreg-gruppe{margin-top:var(--s3)}
/* Summenregel im Kopf einer Gruppe ("Zuletzt veröffentlicht" zusammen höchstens zwölf) und die Gruppe, zu der "Warum?" springt */
.kreg-summe{font-size:var(--t-s);font-weight:400;margin-left:8px}
.kreg-summe.warn{color:var(--warn-text)}
.kreg-gruppe.kreg-ziel{border-color:var(--akzent);scroll-margin-top:calc(var(--klebe-oben) + var(--s7) + var(--s6))}
.einstellung-saetze p+p{margin-top:8px}
[data-kreg-vorschau]{transition:opacity .2s}
[data-kreg-vorschau].laedt{opacity:.55}
.kreg-legende{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:var(--t-s);color:var(--text2);margin-bottom:var(--s2)}
.kreg-anteile{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:var(--s2);margin:4px 0}
.kreg-balken{display:flex;height:12px;border-radius:var(--r-p);overflow:hidden;background:var(--flaeche3)}
.kreg-balken i{display:block;height:100%}
.kreg-punkt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:0;background:var(--text3);flex:none}
.kreg-sp-film{background:var(--akzent)}.kreg-sp-serie{background:var(--ok)}.kreg-sp-doku{background:var(--warn)}.kreg-sp-tv{background:var(--n-tailnet)}.kreg-sp-musik{background:var(--n-warp)}
.kreg-buehne{display:flex;gap:8px;margin:var(--s3) 0 var(--s2)}
.kreg-plakat{position:relative;display:block;width:52px;aspect-ratio:2/3;border-radius:var(--r-s);overflow:hidden;background:var(--flaeche3)}
.kreg-plakat img{display:block;width:100%;height:100%;object-fit:cover}
.kreg-plakat i{position:absolute;left:4px;bottom:4px;width:10px;height:10px;border-radius:50%;border:1px solid var(--grund)}
.kreg-seite1{margin:var(--s2) 0;padding-left:24px;display:flex;flex-direction:column;gap:8px;font-size:var(--t-s)}
.kreg-seite1 li b{font-weight:500;margin-right:8px}
.kreg-seite1 li>span{color:var(--text2)}
.kreg-karte{display:inline-flex;align-items:center;margin-right:12px}
.kreg-titel{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.kreg-liste{margin:0;padding-left:16px;font-size:var(--t-s);color:var(--text2)}
.kreg-tabelle .r{text-align:right}
.kreg-warum{padding:12px 0;border-top:1px solid var(--linie)}
.kreg-warum:first-child{border-top:0;padding-top:0}
.kreg-warum-kopf{display:flex;gap:var(--s2);align-items:baseline;margin-bottom:8px}
.kreg-warum-kopf .mono{margin-left:auto;color:var(--akzent);font-size:var(--t-s)}
.kreg-warum ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.kreg-warum li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 52px;align-items:center;gap:var(--s2);font-size:var(--t-s);color:var(--text2)}
.kreg-warum li i{display:block;height:8px;width:var(--w);border-radius:var(--r-p);background:var(--akzent)}
.kreg-warum li.ab i{background:var(--krit)}
.kreg-warum li .mono{text-align:right}
@media (max-width:1250px){.kreg-raster{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.kreg-anteile{grid-template-columns:minmax(0,1fr)}.kreg-warum li{grid-template-columns:minmax(0,1fr) 52px}.kreg-warum li i{grid-column:1/-1;grid-row:2}}
/* Ankreuzfeld und Auswahlpunkt. Gewaehlt ist die helle Flaeche - dieselbe Sprache wie ".chip.an" und ".segment
button.an". Der Haken bzw. der Punkt ist eine Form und kein blosser Farbwechsel: ohne ihn waere "angekreuzt" fuer
Farbenblinde nur ein anderer Blauton. Es bleibt ein echtes , die Tastatur und der Fokusring des Hauses
(:focus-visible weiter oben) bleiben also unberuehrt.
":where(:not(.kipp))" haelt die Regel bei (0,1,1): der Kippschalter behaelt seine eigene Gestalt, und ".up-box
input" weiter unten darf die Radios der Boxenwahl weiterhin ganz verstecken. */
input[type=checkbox]:where(:not(.kipp)),input[type=radio]:where(:not(.kipp)){appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;position:relative;vertical-align:middle;border:1px solid var(--linie3);border-radius:var(--r-xs);background:var(--flaeche3);cursor:pointer;transition:background .12s,border-color .12s}
input[type=radio]:where(:not(.kipp)){border-radius:50%}
input[type=checkbox]:where(:not(.kipp)):hover,input[type=radio]:where(:not(.kipp)):hover{border-color:var(--akzent-rand);background:var(--flaeche4)}
input[type=checkbox]:where(:not(.kipp)):checked,input[type=radio]:where(:not(.kipp)):checked{background:var(--akzent);border-color:var(--akzent)}
/* Der Haken: zwei Kanten eines Kastens, um 45 Grad gedreht - schwarz auf heller Flaeche wie beim gewaehlten Chip. */
input[type=checkbox]:where(:not(.kipp))::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.5);opacity:0;transition:opacity .12s,transform .12s}
input[type=checkbox]:where(:not(.kipp)):checked::after{opacity:1;transform:rotate(45deg) scale(1)}
/* Der Punkt: 4px Abstand ergibt einen 6px-Kern. Bei 3px sah der Punkt aus wie ein Loch (Ring statt gefuellt). */
input[type=radio]:where(:not(.kipp))::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#000;transform:scale(.4);opacity:0;transition:opacity .12s,transform .12s}
input[type=radio]:where(:not(.kipp)):checked::after{opacity:1;transform:none}
input[type=checkbox]:where(:not(.kipp)):disabled,input[type=radio]:where(:not(.kipp)):disabled{opacity:.55;cursor:default}
.tabelle-box{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--r-l)}
/* I-07/V-01 (S5b): Der Rollkasten (overflow-x) ist zugleich der Klebekontext seiner Kopfzeile - sticky wirkt darin nur senkrecht im
Kasten, und der rollt nie senkrecht: die Kopfzeile klebte nie. Rollkasten und Seitenrollen lassen sich in CSS nicht trennen, deshalb
folgt die Kopfzeile dem Rollen der Seite ueber eine Zeitachse: sobald die Oberkante des Kastens unter dem Band (--klebe-oben)
verschwindet, verschiebt sich die Kopfzeile genau um den gerollten Weg (10.000 px Weg = 10.000 px Versatz) und bleibt oben stehen;
am Ende des Kastens wird sie abgeschnitten (overflow-y:hidden - kein zweiter Rollbalken). Seitlich rollt sie mit der Tabelle. Kaesten,
die selbst senkrecht rollen (Vorschau der Sperrregel), behalten das gewoehnliche sticky. */
.tabelle-box{overflow-y:hidden;view-timeline:--tabkopf block;view-timeline-inset:var(--klebe-oben) 0px}
.tabelle-box>.tabelle>thead th{animation:tabkopf linear both;animation-timeline:--tabkopf;animation-range:exit-crossing 0% exit-crossing 10000px}
@keyframes tabkopf{from{translate:0 0}to{translate:0 10000px}}
.dlg-inhalt .tabelle-box,.rollt .tabelle-box,.begrenzt .tabelle-box{view-timeline-inset:0px 0px}
.vw-sperrregel-vorschau .tabelle-box>.tabelle>thead th,.schublade .tabelle-box>.tabelle>thead th{animation:none!important}
/* Die Zeitachse folgt nur dem eigenen Rollen - keine Bewegung von selbst; sie bleibt deshalb auch bei reduzierter Bewegung. */
@media (prefers-reduced-motion:reduce){.tabelle-box>.tabelle>thead th{animation:tabkopf linear both!important;animation-timeline:--tabkopf!important;animation-range:exit-crossing 0% exit-crossing 10000px!important}}
table.tabelle{width:100%;border-collapse:collapse;font-size:var(--t-m)}
.tabelle th{font-family:var(--mono);font-size:var(--t-xs);font-weight:400;color:var(--text3);letter-spacing:.05em;text-align:left;padding:8px 12px;height:var(--zeile-k);border-bottom:1px solid var(--linie);white-space:nowrap;background:var(--grund);position:sticky;top:0;z-index:1}
.tabelle th button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;letter-spacing:inherit;display:inline-flex;gap:4px;align-items:center}
.tabelle th button.an{color:var(--text)}
.tabelle th button svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2}
.tabelle td{padding:8px 12px;height:var(--zeile);border-bottom:1px solid var(--linie);white-space:nowrap;vertical-align:middle}
.tabelle tr:last-child td{border-bottom:0}
.tabelle td.r,.tabelle th.r{text-align:right}
.tabelle td.m{font-family:var(--mono);font-size:var(--t-s);color:var(--text2)}
.tabelle tbody tr.klickbar{cursor:pointer}
.tabelle tbody tr.klickbar:hover td,.tabelle tbody tr.klickbar:focus-visible td{background:var(--flaeche)}
/* Reiter: Unterstrich, mit Pfeiltasten bedienbar */
.reiter{display:flex;gap:24px;border-bottom:1px solid var(--linie);margin-bottom:24px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.reiter button,.reiter a{background:none;border:0;padding:4px 0 12px;font-size:var(--t-m);color:var(--text3);cursor:pointer;white-space:nowrap;border-bottom:1.5px solid transparent;margin-bottom:-1px;text-decoration:none;min-height:36px}
.reiter button span,.reiter a span{font-family:var(--mono);font-size:var(--t-xs);margin-left:8px}
.reiter button.an,.reiter a.an{color:var(--text);border-bottom-color:var(--text)}
.reiter button:hover,.reiter a:hover{color:var(--text2)}
/* Skelette: Platzhalter in Form der Inhalte, ruhig pulsierend */
.skelett{background:var(--flaeche2);border-radius:var(--r-s);animation:puls 1.6s ease-in-out infinite}
.skelett.poster{aspect-ratio:2/3;border-radius:var(--r-m)}
.skelett.zeile{height:12px;margin-top:8px;width:80%}
.skelett.zeile.kurz{width:50%}
.skelett.block{height:120px;border-radius:var(--r-l)}
@keyframes puls{50%{opacity:.55}}
.rollend{display:grid;grid-auto-flow:column;grid-auto-columns:var(--kw,160px);gap:12px}
/* ---------------------------------------------------------------- Schwebendes: Toasts, Dialoge, Schublade, Palette */
.toasts{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;max-width:min(440px,calc(100vw - 32px))}
.toast{pointer-events:auto;display:flex;gap:12px;align-items:center;background:var(--flaeche2);border:1px solid var(--linie2);border-left:3px solid var(--ok);border-radius:var(--r-m);padding:12px 12px 12px 16px;font-size:var(--t-m);box-shadow:0 12px 34px rgba(0,0,0,.7);animation:rein .18s ease-out}
.toast.fehler{border-left-color:var(--krit)}
.toast.info{border-left-color:var(--akzent)}
.toast button{background:none;border:1px solid var(--linie3);border-radius:var(--r-s);padding:4px 8px;font-size:var(--t-s);cursor:pointer;color:var(--text)}
@keyframes rein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
dialog.dlg{background:var(--flaeche);color:var(--text);border:1px solid var(--linie2);border-radius:var(--r-l);padding:0;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);margin:auto;box-shadow:0 40px 120px rgba(0,0,0,.9)}
dialog.dlg.breit{width:min(920px,calc(100vw - 32px))}
dialog.dlg::backdrop{background:rgba(0,0,0,.78)}
.dlg-kopf{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--linie)}
.dlg-kopf h3{font-family:var(--kond);font-weight:500;font-size:var(--t-xl)}
.dlg-kopf .rechts{margin-left:auto}
.dlg-inhalt{padding:16px;overflow-y:auto;max-height:calc(100vh - 190px)}
.dlg-fuss{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--linie)}
.dlg-fuss .rechts{margin-left:auto;display:flex;gap:8px}
.formular{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.formular label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-s);color:var(--text2);grid-column:span 3;min-width:0}
.formular label.b2{grid-column:span 2}.formular label.b6{grid-column:span 6}.formular label.b4{grid-column:span 4}.formular label.b1{grid-column:span 1}
.formular small{color:var(--text3);font-size:var(--t-s)}
.schleier{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:60;animation:blende .15s}
@keyframes blende{from{opacity:0}}
.schublade{position:fixed;top:0;right:0;bottom:0;width:min(600px,100vw);background:var(--flaeche);border-left:1px solid var(--linie2);z-index:61;overflow-y:auto;animation:schieben .2s ease-out}
.schublade.breit{width:min(760px,100vw)}
@keyframes schieben{from{transform:translateX(28px);opacity:.3}to{transform:none;opacity:1}}
/* Auftrag 34: die Schublade reicht als App bis unter die Statusleiste - ihr Kopf beginnt darunter */
.schublade-kopf{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:max(8px,env(safe-area-inset-top)) 16px 8px;background:rgba(10,10,11,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.schublade section{padding:16px;border-bottom:1px solid var(--linie)}
.schublade section>h4{margin-bottom:12px}
.palette{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.78);display:flex;justify-content:center;padding:9vh 16px 16px}
.palette-fenster{width:min(680px,100%);background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r-l);overflow:hidden;align-self:flex-start;box-shadow:0 40px 120px rgba(0,0,0,.9)}
.palette .suchfeld{border:0;border-bottom:1px solid var(--linie);border-radius:0;background:none}
.palette .suchfeld:focus-within{box-shadow:none}
.palette .suchfeld input{font-size:var(--t-l);padding:16px 0}
.palette-treffer{max-height:62vh;overflow-y:auto;padding:8px}
.palette-treffer h5{padding:12px 12px 4px}
.palette-treffer button{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:8px 12px;border-radius:var(--r-m);background:none;border:0;text-align:left;cursor:pointer;min-height:44px}
.palette-treffer button.an,.palette-treffer button:hover{background:var(--flaeche3)}
.palette-treffer img,.palette-treffer .platz{width:32px;height:48px;border-radius:var(--r-xs);object-fit:cover;background:var(--flaeche3);display:grid;place-items:center;color:var(--text3)}
.palette-treffer img.rund{height:32px;border-radius:50%}
.palette-treffer .platz svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.palette-treffer small{color:var(--text3);font-size:var(--t-s)}
.hilfe-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
.hilfe-raster div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--linie);font-size:var(--t-s)}
/* R-08 (S5b P2): die Taste bleibt eine Zeile und steht mittig neben ihrem Satz, statt mit einer zweizeiligen Nachbarzelle mitzuwachsen */
.hilfe-raster kbd{flex:none;align-self:center;white-space:nowrap}
/* ---------------------------------------------------------------- Titelkarten: eine Familie in drei Groessen */
/* tk = Titelkarte (Poster), tk-kachel (Querformat), tk-zeile (Liste). Gleicher Aufbau: Bild, Titel, eine Metazeile, hoechstens zwei Plaketten. */
.tk{position:relative;display:block;min-width:0;text-decoration:none;color:inherit;border-radius:var(--r-m);outline-offset:3px}
.tk .bild{display:block;position:relative;aspect-ratio:2/3;border-radius:var(--r-m);overflow:hidden;background:var(--flaeche2)}
.tk .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s,transform .35s ease}
.tk .bild img.da{opacity:1}
.tk:hover .bild img,.tk:focus-visible .bild img{transform:scale(1.03)}
.tk .platzhalter{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;font-family:var(--kond);font-size:var(--t-l);line-height:1.15;color:rgba(255,255,255,.85)}
.tk .plaketten{position:absolute;left:6px;top:6px;right:6px;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-start}
.tk .plaketten span{font-family:var(--mono);font-size:var(--t-xs);background:rgba(0,0,0,.78);color:var(--text);padding:0 4px;border-radius:var(--r-xs)}
.tk .plaketten span.warn{color:var(--warn)}.tk .plaketten span.krit{color:var(--krit)}.tk .plaketten span.ok{color:var(--ok)}.tk .plaketten span.neu{color:var(--akzent)}
.tk .sicht{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.6)}
.tk .sicht i{display:block;height:100%;background:var(--akzent)}
.tk .sicht.voll i{background:var(--ok)}
.tk .haken{position:absolute;right:6px;bottom:6px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.75);display:grid;place-items:center}
.tk .haken svg{width:11px;height:11px;stroke:var(--ok);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tk b{display:block;font-weight:500;font-size:var(--t-m);margin-top:8px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk small{font-size:var(--t-s);color:var(--text3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk .grund{color:var(--text2)}
.tk.kompakt b{font-size:var(--t-s)}
/* Weiterschauen-Karte: Querformat mit Hintergrund und Fortschritt */
/* Aushang: ein Satz fuer alle, ganz oben. Er schiebt die Seite nach unten statt ueber ihr zu schweben - was wichtig genug ist,
um alle zu erreichen, soll nicht ausgerechnet das verdecken, was man gerade tut. */
/* Sperrband auf der Titelseite: sagt, warum das Abspielen gerade nicht geht - vor dem Knopf, nicht erst danach. */
.d-sperrband:not(:empty){display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;padding:12px 16px;border:1px solid var(--warn);border-radius:var(--r-m);background:color-mix(in srgb, var(--warn) 10%, var(--flaeche2));font-size:var(--t-m);line-height:1.45}
.d-sperrband svg{flex:none;width:18px;height:1lh;stroke:var(--warn);fill:none;stroke-width:1.7;stroke-linecap:round}
.d-sperrband small{display:block;margin-top:4px;color:var(--text3)}
/* Ausfall: kein Beschluss, sondern ein Zustand - deshalb neutral (kein Warnton wie beim Sperrband darueber) */
.d-ausfallband:not(:empty){display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;padding:12px 16px;border:1px dashed var(--linie);border-radius:var(--r-m);background:var(--flaeche2);font-size:var(--t-m);line-height:1.45}
.d-ausfallband svg{flex:none;width:18px;height:1lh;stroke:var(--text3);fill:none;stroke-width:1.7;stroke-linecap:round}
.d-ausfallband small{display:block;margin-top:4px;color:var(--text3)}
/* Umzug in eine andere Bibliothek (verschieben.py): laeuft = blau wie ein laufender Vorgang, haengt = Warnton, zu Ende = ok */
.d-umzugband{display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;padding:12px 16px;border:1px solid var(--neu-rand);border-radius:var(--r-m);background:var(--neu-tief);font-size:var(--t-m);line-height:1.45}
.d-umzugband.haengt{border-color:var(--warn);background:color-mix(in srgb, var(--warn) 10%, var(--flaeche2))}
.d-umzugband.ende{border-color:var(--ok-rand);background:var(--ok-tief)}
.d-umzugband svg{flex:none;width:18px;height:1lh;stroke:var(--neu);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.d-umzugband.haengt svg{stroke:var(--warn)}
.d-umzugband.ende svg{stroke:var(--ok)}
.d-umzugband small{display:block;margin-top:4px;color:var(--text3)}
.d-umzugband small a{color:var(--akzent)}
.d-umzug-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sa-baender .d-umzugband{margin-bottom:0;margin-top:8px}
.vs-schritte{margin:8px 0 12px 24px;display:grid;gap:4px;color:var(--text-lesen)}
.vs-gruende{margin:12px 0;padding:12px 16px;border:1px solid var(--krit-rand);border-radius:var(--r-m);background:var(--krit-tief);color:var(--krit-text)}
.vs-gruende ul,.vs-hinweise{margin:4px 0 0 16px}
#vs-plan p{margin:8px 0}
/* Von Box zu Box (Auftrag 32): zwei Wahlgruppen nebeneinander (auf dem Handy untereinander), die Pruefliste der Vorpruefung und der
Balken der Kopie im Band. Nur Werte der Skala und Tokens (tests/js/raster-skala.test.mjs). */
.vs-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;margin:0 0 12px}
.vs-wahl fieldset{margin:0;padding:0;border:0;min-width:0}
.vs-wahl legend{margin:0 0 8px;padding:0;font-size:var(--t-s);color:var(--text3)}
.vs-wahl .wahl-zeile input:disabled + span{opacity:.6}
.vs-pruefung{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:4px}
.vs-pruefung li{display:flex;gap:8px;align-items:baseline}
.vs-pruefung .vs-marke{flex:none;font-weight:600;color:var(--ok)}
.vs-pruefung li.nein{color:var(--krit-text)}
.vs-pruefung li.nein .vs-marke{color:var(--krit)}
.d-umzug-kopie{display:block;margin-top:8px}
.d-umzug-kopie .balken{max-width:420px}
/* Der ffmpeg-Fehlertext in der Wiedergabeliste: schmal gesetzt, umbrechend - er ist bis zu 200 Zeichen lang und
soll in der Zelle stehen, nicht die Tabelle auseinanderziehen. */
.wg-fehler{margin-top:4px;max-width:320px;white-space:normal;font-size:var(--t-s);color:var(--krit)}
.wg-fehler code{display:block;margin-top:4px;font-family:var(--mono);font-size:var(--t-xs);line-height:1.35;color:var(--text3);word-break:break-word}
/* Ausfall auf einer Karte: gedaempft, nicht weg. Die Karte bleibt lesbar und anklickbar - die Plakette sagt den Rest. */
.tk.nicht-da .bild img,.tk-breit.nicht-da .bild img{filter:grayscale(.75);opacity:.62}
.tk.nicht-da b,.tk-breit.nicht-da b{color:var(--text2)}
/* Die Baender der Schnellansicht sitzen im Rand der Schublade, nicht am Rand des Bildschirms. */
.sa-baender{padding:16px 16px 0}
.sa-baender .d-sperrband,.sa-baender .d-ausfallband{margin-bottom:0}
.sa-baender .d-sperrband + .d-ausfallband{margin-top:8px}
.inv-ausfall{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 var(--s3);padding:12px 16px;border:1px dashed var(--linie);border-radius:var(--r-m);background:var(--flaeche2);font-size:var(--t-m)}
.inv-ausfall b{font-weight:500}
.inv-ausfall small{display:block;color:var(--text3)}
.inv-ausfall span{flex:1;min-width:min(260px,100%)}
/* Inventar: Export neben der Zaehlung (24.09.2026). Auf dem Handy klappt das Menue unter dem Knopf auf - absolut daneben ragte es bei
412 px ueber den rechten Rand, sobald Zaehlung und Knopf in einer Zeile stehen. */
.inv-titelzeile{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.inv-export>summary{margin-top:0}
.inv-export .d-mehr-liste{min-width:290px}
.inv-export .d-mehr-liste small{color:var(--text3);margin-left:8px}
.inv-export-was{padding:4px 12px 8px;color:var(--text2)}
@media (max-width:820px){.inv-export .d-mehr-liste{position:static;margin-top:8px;min-width:0;box-shadow:none}}
/* Uploads warten, weil gerade ein Titel von den lokalen Platten laeuft - dieselbe Leitung nach draussen, die Wiedergabe hat Vorfahrt */
.up-sperre{display:flex;align-items:center;gap:12px;margin-bottom:var(--s3);padding:12px 16px;border:1px solid var(--akzent-rand);border-radius:var(--r-m);background:var(--akzent-tief)}
.up-sperre svg{width:18px;height:18px;flex:none;fill:var(--akzent);stroke:none}
.up-sperre b{display:block;font-weight:500;font-size:var(--t-m)}
.up-sperre small{display:block;color:var(--text3);font-size:var(--t-s)}
/* „Nicht dabei?" - das Anfrage-Angebot neben den Treffern: gleiche Abmessungen wie eine Titelkarte, aber deutlich als Angebot erkennbar */
.tk.wunsch{container-type:inline-size}
.tk.wunsch .bild{border:1px dashed var(--linie3);background:var(--flaeche);display:grid;place-items:center}
.tk.wunsch:hover .bild,.tk.wunsch:focus-visible .bild{border-color:var(--akzent-rand);background:var(--akzent-tief)}
.tk.wunsch .wunsch-innen{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;text-align:center;max-height:100%;overflow:hidden}
.tk.wunsch .wunsch-innen svg{width:26px;height:26px;stroke:var(--akzent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tk.wunsch .wunsch-innen b{font-size:var(--t-s);font-weight:500;line-height:1.3;white-space:normal;color:var(--text)}
.tk.wunsch .wunsch-innen span{font-size:var(--t-xs);line-height:1.35;color:var(--text3)}
.tk.wunsch.kompakt .wunsch-innen{padding:8px;gap:4px}
.tk.wunsch.kompakt .wunsch-innen b{font-size:var(--t-xs)}
.tk.wunsch.kompakt .wunsch-innen span{display:none}
/* Schmale Kachel (Handy, kompakte Wand): der Zusatz weicht, die Frage bleibt - sonst liefe der Text unten aus dem Bild */
@container (max-width:136px){
.tk.wunsch .wunsch-innen{padding:8px;gap:4px}
.tk.wunsch .wunsch-innen svg{width:20px;height:20px}
.tk.wunsch .wunsch-innen b{font-size:var(--t-xs)}
.tk.wunsch .wunsch-innen span{display:none}
}
.wunsch-band{display:flex;align-items:center;gap:12px;margin-top:var(--s4);padding:12px 16px;border:1px dashed var(--linie3);border-radius:var(--r-m);text-decoration:none;color:inherit}
.wunsch-band:hover,.wunsch-band:focus-visible{border-color:var(--akzent-rand);background:var(--akzent-tief)}
.wunsch-band svg{width:22px;height:22px;flex:none;stroke:var(--akzent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wunsch-band b{display:block;font-weight:500;font-size:var(--t-m)}
.wunsch-band small{display:block;color:var(--text3);font-size:var(--t-s)}
.tk-weiter{display:block;min-width:0;text-decoration:none;color:inherit;border-radius:var(--r-m);outline-offset:3px}
.tk-weiter .bild{display:block;position:relative;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;background:var(--flaeche2)}
.tk-weiter .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.tk-weiter .bild img.da{opacity:1}
.tk-weiter .bild::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.05) 55%)}
.tk-weiter .drin{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:flex;flex-direction:column;gap:4px}
.tk-weiter .drin b{font-weight:500;font-size:var(--t-m);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-weiter .drin small{font-size:var(--t-s);color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-weiter .balken{height:4px;background:rgba(255,255,255,.18);margin-top:4px}
.tk-weiter .spielen{position:absolute;right:12px;top:12px;z-index:1;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center}
.tk-weiter .spielen svg{width:14px;height:14px;fill:var(--text);stroke:none;translate:2px 0}
/* Querformat-Karte (16.09.2026): das Hintergrundbild traegt Logo oder Titel, darunter eine Datenzeile und der Grund */
.tk-breit{position:relative;display:block;min-width:0;text-decoration:none;color:inherit;border-radius:var(--r-m);outline-offset:3px}
.tk-breit .bild{display:block;position:relative;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;background:var(--flaeche2)}
.tk-breit .bild img.hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:0;transition:opacity .3s,transform .35s ease}
.tk-breit .bild img.hg.da{opacity:1}
.tk-breit:hover .bild img.hg,.tk-breit:focus-visible .bild img.hg{transform:scale(1.03)}
.tk-breit .bild::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.08) 55%)}
.tk-breit .logo{position:absolute;left:10px;bottom:9px;z-index:1;max-width:58%;max-height:36px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}
.tk-breit .imbild{position:absolute;left:11px;right:11px;bottom:8px;z-index:1;font-family:var(--kond);font-weight:600;font-size:var(--t-l);line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-breit .plaketten{position:absolute;left:8px;top:8px;right:8px;z-index:1;display:flex;gap:4px}
.tk-breit .plaketten span{font-family:var(--mono);font-size:var(--t-xs);background:rgba(0,0,0,.78);color:var(--text);padding:0 4px;border-radius:var(--r-xs)}
.tk-breit .sicht{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.6);z-index:1}
.tk-breit .sicht i{display:block;height:100%;background:var(--akzent)}
.tk-breit .sicht.voll i{background:var(--ok)}
.tk-breit b{display:block;font-weight:500;font-size:var(--t-m);margin-top:8px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-breit small{display:block;font-size:var(--t-s);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-breit small.grund{color:var(--text2)}
/* Spotlight: drei grosse Flaechen mit Text - die Tagesvorschlaege */
.spots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.spot{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:var(--flaeche2);text-decoration:none;color:inherit;min-width:0;outline-offset:3px}
.spot img.hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;opacity:0;transition:opacity .4s,transform .5s ease}
.spot img.hg.da{opacity:1}
.spot:hover img.hg,.spot:focus-visible img.hg{transform:scale(1.03)}
.spot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,0) 72%)}
.spot .drin{position:absolute;left:16px;right:16px;bottom:13px;z-index:1;display:flex;flex-direction:column;gap:4px}
.spot .logo{max-width:56%;max-height:50px;align-self:flex-start;margin-bottom:4px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.7))}
.spot h3{font-family:var(--kond);font-weight:600;font-size:var(--t-2xl);line-height:1.05;text-shadow:0 2px 12px rgba(0,0,0,.8);text-wrap:balance}
.spot .meta{font-size:var(--t-s);color:var(--text2)}
.spot p{font-size:var(--t-s);line-height:1.45;color:var(--text-lesen);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spot .grund{font-size:var(--t-s);color:var(--text3)}
/* Schaufenster: breites Banner fuer Werkschau, Land und Themenwelt - fuehrt auf die Regalseite */
.schau{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;min-height:200px;border-radius:var(--r-l);overflow:hidden;background:var(--flaeche);text-decoration:none;color:inherit;isolation:isolate;margin-bottom:12px;outline-offset:3px}
.schau .mosaik{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.schau .mosaik img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s}
.schau .mosaik img.da{opacity:.5}
.schau:hover .mosaik img.da{opacity:.68}
.schau::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.62) 40%,rgba(0,0,0,.28) 100%),linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 55%)}
.schau .text{position:relative;z-index:1;padding:24px;display:flex;gap:16px;align-items:flex-end;min-width:0}
.schau .person{width:80px;height:80px;border-radius:50%;object-fit:cover;background:var(--flaeche3);border:2px solid rgba(255,255,255,.22);flex:none}
.schau .art{font-size:var(--t-s);color:var(--text2)}
.schau h2{font-family:var(--kond);font-weight:500;font-size:var(--t-3xl);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.schau .grund{font-size:var(--t-s);color:var(--text2);margin-top:4px}
.schau .cta{position:relative;z-index:1;padding:0 24px 24px}
.schau .cta .knopf{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.22)}
/* Sammlungskarte: Collage aus bis zu drei Hintergruenden, breit wie ein Banner */
.samm-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.samm-raster.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.samm{position:relative;display:block;aspect-ratio:21/9;border-radius:var(--r-m);overflow:hidden;background:var(--flaeche2);text-decoration:none;color:inherit;min-width:0;outline-offset:3px}
.samm .collage{position:absolute;inset:0;display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:2px}
.samm .collage img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s}
.samm .collage img:first-child{grid-row:span 2}
.samm .collage.eins{grid-template-columns:1fr;grid-template-rows:1fr}
.samm .collage.zwei{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.samm .collage.zwei img:first-child{grid-row:auto}
.samm .collage img.da{opacity:.82}
.samm:hover .collage img.da{opacity:1}
.samm::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,0) 100%)}
.samm .drin{position:absolute;left:14px;right:14px;bottom:11px;z-index:1}
.samm .drin b{display:block;font-family:var(--kond);font-weight:600;font-size:var(--t-xl);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.samm .drin small{display:block;font-size:var(--t-s);color:var(--text2);margin-top:4px}
.samm.gross .drin b{font-size:var(--t-2xl)}
/* Personenkachel */
.tk-person{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:inherit;min-width:0;text-align:center;padding:8px 4px;border-radius:var(--r-m);outline-offset:2px}
.tk-person .rund{width:72px;height:72px;border-radius:50%;background:var(--flaeche3);border:1px solid var(--linie2);overflow:hidden;display:grid;place-items:center;font-family:var(--kond);font-size:var(--t-xl);color:var(--text3);cursor:pointer}
.tk-person .rund img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}
.tk-person .rund img.da{opacity:1}
.tk-person b{font-weight:500;font-size:var(--t-s);line-height:1.25;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-person small{font-size:var(--t-xs);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tk-person:hover .rund{border-color:var(--linie3)}
/* Listenzeile */
.tk-zeile{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border-radius:var(--r-m);text-decoration:none;color:inherit;min-width:0}
.tk-zeile:hover{background:var(--flaeche2)}
.tk-zeile img,.tk-zeile .platz{width:36px;height:54px;border-radius:var(--r-xs);object-fit:cover;background:var(--flaeche3);display:block}
.tk-zeile b{display:block;font-weight:500;font-size:var(--t-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-zeile small{display:block;font-size:var(--t-s);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---------------------------------------------------------------- Regal: Kopf mit Grund, Reihe mit Pfeilen und Randverlauf */
.regal{margin-top:var(--s5)}
.regal-kopf{display:flex;align-items:baseline;gap:8px 12px;margin-bottom:12px;flex-wrap:wrap}
.regal-kopf h2{font-family:var(--kond);font-weight:500;font-size:var(--t-xl);letter-spacing:-.005em}
.regal-kopf h2 a{text-decoration:none}
.regal-kopf h2 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--linie3)}
.regal-kopf .grund{font-size:var(--t-s);color:var(--text3)}
.regal-kopf .rechts{margin-left:auto;display:flex;gap:8px;align-items:center}
.regal-kopf .rechts a.mehr{font-size:var(--t-s);color:var(--text2);text-decoration:none;padding:4px 8px;border-radius:var(--r-s)}
.regal-kopf .rechts a.mehr:hover{color:var(--text);background:var(--flaeche3)}
.regal-kopf .person{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--flaeche3);align-self:center}
/* ".reihe" ist AUSSCHLIESSLICH das Karussell (Regal, Planer-Bahnen). Die Karte einer Sammlung heisst .reihen-karte -
bis zum 21.09.2026 hiessen beide ".reihe", und weil die Karte spaeter steht, gewann ihr display:block: das Karussell
stapelte senkrecht und liess sich nicht einmal seitlich schieben. */
.reihe-huelle{position:relative}
.reihe{display:grid;grid-auto-flow:column;grid-auto-columns:var(--kw,158px);gap:var(--s2);overflow-x:auto;scroll-snap-type:x proximity;padding:4px 4px 8px;margin:-4px -4px 0;scrollbar-width:none;scroll-behavior:smooth}
.reihe::-webkit-scrollbar{display:none}
.reihe>*{scroll-snap-align:start}
.reihe.weiter{--kw:324px;gap:12px}
.reihe.breit{--kw:296px;gap:12px}
.reihe.quer{--kw:280px}
.reihe.personen{--kw:112px}
.reihe.kompakt{--kw:124px}
.reihe-huelle.links::before,.reihe-huelle.rechts::after{content:"";position:absolute;top:0;bottom:8px;width:56px;pointer-events:none;z-index:1}
.reihe-huelle.links::before{left:-4px;background:linear-gradient(90deg,var(--grund),transparent)}
.reihe-huelle.rechts::after{right:-4px;background:linear-gradient(270deg,var(--grund),transparent)}
.reihe-pfeil{position:absolute;top:calc(50% - 26px);transform:translateY(-50%);z-index:2;width:36px;height:56px;border-radius:var(--r-m);border:1px solid var(--linie2);background:rgba(10,10,11,.92);color:var(--text);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s}
.reihe-pfeil svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reihe-pfeil.l{left:-8px}.reihe-pfeil.r{right:-8px}
.reihe-huelle:hover .reihe-pfeil,.reihe-pfeil:focus-visible{opacity:1}
.reihe-huelle:not(.links) .reihe-pfeil.l,.reihe-huelle:not(.rechts) .reihe-pfeil.r{display:none}
.pillen{display:flex;gap:8px;flex-wrap:wrap}
.pillen a{border:1px solid var(--linie2);border-radius:var(--r-p);padding:8px 16px;font-size:var(--t-s);color:var(--text2);text-decoration:none;display:inline-flex;gap:8px;align-items:baseline;min-height:var(--feld)}
.pillen a small{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.pillen a:hover{color:var(--text);border-color:var(--linie3);background:var(--flaeche2)}
/* ---------------------------------------------------------------- Buehne (Bibliothek) und Kinobuehne (Titelseite) */
/* Buehne (16.09.2026): randlos ueber die Seitenbreite, als Ganzes klickbar, Pfeile beim Zeigen, Vorschaubilder der Tipps rechts unten */
.buehne{position:relative;margin-inline:calc(-1 * var(--seite-x));min-height:min(68vh,640px);background:var(--flaeche);display:flex;align-items:flex-end;isolation:isolate;cursor:pointer;outline:none}
.buehne:focus-visible{box-shadow:inset 0 0 0 2px var(--akzent)}
.buehne .hintergrund{position:absolute;inset:0;overflow:hidden}
.buehne .hintergrund img{width:100%;height:100%;object-fit:cover;object-position:center 22%;opacity:0;transition:opacity .6s,transform 5s ease-out}
.buehne .hintergrund img.da{opacity:.9}
.buehne:hover .hintergrund img.da{transform:scale(1.02)}
.buehne .hintergrund::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,.12) 62%,rgba(0,0,0,.3) 100%),linear-gradient(0deg,#000 0%,rgba(0,0,0,.55) 22%,rgba(0,0,0,0) 55%)}
/* Der Text steht buendig mit dem Inhalt (links --seite-x); --text-breite ist die Breite des Textes selbst, wie bis S5b (680 abzueglich
der Raender) - auf breiten Schirmen kommt nur der Rand dazu, der Text wird nicht schmaler. */
.buehne .text{--text-breite:680px;position:relative;z-index:1;padding:48px var(--seitenrand) 32px var(--seite-x);max-width:calc(var(--text-breite) + var(--seite-x) - var(--seitenrand));display:flex;flex-direction:column;gap:12px}
.buehne .vorschau{position:absolute;right:var(--seite-x);bottom:32px;z-index:2;display:flex;gap:8px;align-items:center}
.buehne .vorschau .zaehler{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);margin-right:8px}
.buehne .vorschau button{width:76px;height:44px;border-radius:var(--r-s);border:1px solid rgba(255,255,255,.14);padding:0;overflow:hidden;background:var(--flaeche3);cursor:pointer;opacity:.6;transition:opacity .15s,transform .15s}
.buehne .vorschau button img{width:100%;height:100%;object-fit:cover;display:block}
.buehne .vorschau button:hover{opacity:.9}
.buehne .vorschau button.an{opacity:1;border-color:var(--text);transform:scale(1.06)}
.buehne .pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:64px;border:0;border-radius:var(--r-m);background:rgba(0,0,0,.45);color:var(--text);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s}
.buehne .pfeil svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.buehne .pfeil.l{left:10px}.buehne .pfeil.r{right:10px}
.buehne:hover .pfeil,.buehne .pfeil:focus-visible{opacity:1}
.buehne .anlass{font-size:var(--t-s);color:var(--text2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.buehne .anlass b{font-weight:500;color:var(--text)}
.buehne .logo{max-width:min(460px,80%);max-height:140px;filter:drop-shadow(0 4px 22px rgba(0,0,0,.7))}
.buehne h2{font-family:var(--kond);font-weight:500;font-size:clamp(36px,4.4vw,54px);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.buehne .meta{color:var(--text2);font-size:var(--t-m);display:flex;gap:4px 16px;flex-wrap:wrap}
.buehne .meta b{color:var(--text);font-weight:500}
.buehne .slogan{font-family:var(--kond);font-size:var(--t-l);color:var(--text2)}
.buehne .beschreibung{color:var(--text-lesen);font-size:var(--t-m);line-height:1.55;max-width:60ch}
.buehne .zwei-zeilen{-webkit-line-clamp:3}
.buehne .knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.buehne .punkte{position:absolute;right:var(--seitenrand);bottom:18px;z-index:1;display:none;gap:8px}
.buehne .punkte button{width:22px;height:22px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer}
.buehne .punkte button i{display:block;width:18px;height:3px;border-radius:var(--r-xs);background:rgba(255,255,255,.28)}
.buehne .punkte button.an i{background:var(--text)}
.buehne .grund-zeile{color:var(--text2);font-size:var(--t-s)}
.laeuft-band{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px 16px;border:1px solid var(--ok-rand);background:var(--ok-tief);border-radius:var(--r-m);font-size:var(--t-m)}
.laeuft-band .puls{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(99,210,151,.14);flex:none}
.laeuft-band b{font-weight:500}
.laeuft-band .balken{width:120px;height:4px;margin-left:auto;flex:none}
/* Bereichsspezifische Buehne mit Mosaik (Regalseite) */
.mosaik-buehne{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:220px;display:flex;align-items:flex-end;background:var(--flaeche);margin-bottom:24px;isolation:isolate}
.mosaik-buehne .mosaik{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.mosaik-buehne .mosaik img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s}
.mosaik-buehne .mosaik img.da{opacity:.6}
.mosaik-buehne::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.25) 100%)}
.mosaik-buehne .text{position:relative;z-index:1;padding:24px 32px;display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.mosaik-buehne .text h1{font-family:var(--kond);font-weight:500;font-size:var(--t-3xl);line-height:1.05;letter-spacing:-.01em}
.mosaik-buehne .person{width:84px;height:84px;border-radius:50%;object-fit:cover;background:var(--flaeche3);border:2px solid rgba(255,255,255,.15)}
/* ---------------------------------------------------------------- Titelseite 2.0 */
.detail{position:relative;margin:calc(-1 * var(--seite-oben) - var(--s1)) calc(-1 * var(--seite-x)) 0}
.kinobuehne{position:absolute;inset:0 0 auto 0;height:min(78vh,760px);overflow:hidden}
.kinobuehne img{width:100%;height:100%;object-fit:cover;object-position:center 22%;opacity:0;transition:opacity .6s}
.kinobuehne img.da{opacity:.62}
.kinobuehne.weich img.da{filter:blur(40px) saturate(1.2);transform:scale(1.25);opacity:.42}
.kinobuehne::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.86) 33%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.45) 100%),linear-gradient(0deg,#000 2%,rgba(0,0,0,0) 55%)}
.detailinhalt{position:relative;padding:16px var(--seite-x) var(--s7)}
.detail-leiste{display:flex;gap:8px;align-items:center;margin-bottom:24px;flex-wrap:wrap}
.detail-leiste .rechts{margin-left:auto;display:flex;gap:8px;align-items:center}
.dkopf{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:var(--s6);align-items:end;min-height:min(48vh,480px)}
.gcover{width:100%;aspect-ratio:2/3;border-radius:var(--r-m);object-fit:cover;background:var(--flaeche2);box-shadow:0 30px 80px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.dlogo{max-width:min(470px,90%);max-height:150px;display:block;margin-bottom:16px;filter:drop-shadow(0 4px 22px rgba(0,0,0,.6))}
.dkopf h1{font-family:var(--kond);font-weight:500;font-size:var(--t-4xl);line-height:1;letter-spacing:-.015em;margin-bottom:12px;text-wrap:balance}
.dmeta{display:flex;gap:8px 16px;flex-wrap:wrap;color:var(--text2);font-size:var(--t-m);align-items:center}
.dmeta b{font-weight:500;color:var(--text)}
.slogan{font-family:var(--kond);font-size:var(--t-l);color:var(--text2);margin-top:16px}
.dtext{max-width:68ch;font-size:var(--t-l);line-height:1.65;color:var(--text-lesen);margin-top:12px}
.daktion{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
/* T-02 (S5b Phase 3): die Chips stehen in Gruppen mit einem Etikett davor (Genre, Regie, Reihe, Land, Studio, Jahrzehnt) */
.d-chips{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px}
.d-chip-gruppe{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.d-chip-gruppe>i{font-style:normal;color:var(--text3);font-size:var(--t-xs)}
.d-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.45);border-radius:var(--r-p);padding:4px 12px;font-size:var(--t-s);color:var(--text);text-decoration:none;min-height:28px}
.d-chip:hover{border-color:rgba(255,255,255,.4);background:rgba(0,0,0,.65)}
.d-reiter{margin-top:32px}
#d-uebersicht>.d-abschnitt:first-child{margin-top:0}
.d-abschnitt{margin-top:32px}
.d-abschnitt>header{display:flex;align-items:baseline;gap:8px 12px;margin-bottom:12px;flex-wrap:wrap}
.d-abschnitt>header h2{font-family:var(--kond);font-weight:500;font-size:var(--t-xl)}
.d-abschnitt>header .klein{color:var(--text3)}
.besetzung{display:grid;grid-auto-flow:column;grid-auto-columns:104px;gap:8px;overflow-x:auto;padding:4px 4px 8px;margin:-4px -4px 0;scrollbar-width:none}
.besetzung::-webkit-scrollbar{display:none}
/* "Andere Werke" unter jedem Namen der Besetzung und hinter dem Studio (app/werke.js, 24.09.2026) */
.tk-person-huelle{display:flex;flex-direction:column;align-items:center;min-width:0}
.tk-person-huelle .tk-person{width:100%}
.tk-werke{font-size:var(--t-xs);line-height:1.3;color:var(--text3);text-decoration:none;padding:4px 8px;border-radius:var(--r-s);white-space:nowrap;margin-top:-4px}
.tk-werke:hover,.tk-werke:focus-visible{color:var(--text);background:var(--flaeche3)}
.d-chip.d-werke{border-style:dashed}
.d-chip.d-werke svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
/* Andere Werke: die Seite. Karten sind die Titelkarten (.tk im .regal-raster) - nur mit Knopf darunter und ohne eigenen Link, wenn
der Titel nicht im Archiv liegt. */
.aw-mosaik{grid-template-columns:repeat(6,1fr)}
.aw-buehne .aw-name{min-width:0;flex:1 1 220px}
.aw-buehne .aw-name h1{overflow-wrap:anywhere}
.aw-buehne .aw-logo{width:auto;max-width:180px;height:72px;object-fit:contain;background:rgba(255,255,255,.92);border-radius:var(--r-m);padding:8px}
.aw-hinweis{margin:-8px 0 16px;padding:12px 16px;border:1px solid var(--warn-rand);background:var(--warn-tief);color:var(--warn-text);border-radius:var(--r-m);font-size:var(--t-s);line-height:1.45;max-width:90ch}
.aw-werkzeuge{margin-bottom:var(--s4)}
/* Wertungen an der Karte (werke.js wertungHtml): TMDB mit der Zahl der Stimmen fuer jedes Werk, IMDb und Rotten Tomatoes nur fuer Titel im
Archiv. Sie brechen um, statt ueberzulaufen - die Karte ist am Handy kaum 120 px breit. Unter der Schwelle des Servers gedaempft. */
.aw-wertungen{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:5px;min-width:0}
.aw-tmdb{display:inline-flex;align-items:center;gap:4px;min-width:0}
.aw-karte .aw-tmdb small{flex:none;overflow:visible;font-size:var(--t-xs);color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap}
.aw-tmdb.aw-wenig .wertung{opacity:.55}
.aw-karte .aw-tmdb.aw-wenig small{color:var(--warn-text)}
.aw-sortnotiz{margin:calc(-1 * var(--s2)) 0 var(--s4);color:var(--text3);max-width:90ch;line-height:1.45}
.aw-karte b a{color:inherit;text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis}
.aw-karte .bild{text-decoration:none;color:inherit}
.aw-karte .aw-tun{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.aw-karte .aw-tun:empty{display:none}
.aw-fuss{display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap;margin-top:var(--s5)}
.aw-fuss:empty{display:none}
.aw-quelle{margin-top:var(--s4);color:var(--text3)}
@media (max-width:820px){.aw-mosaik{grid-template-columns:repeat(3,1fr)}.aw-mosaik img:nth-child(n+4){display:none}.aw-buehne .aw-logo{height:56px;max-width:140px}}
.fassung{border:1px solid var(--linie);border-radius:var(--r-l);padding:16px;margin-bottom:12px;background:rgba(0,0,0,.6)}
.fassung dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px 16px}
.fassung dt{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);letter-spacing:.05em;text-transform:uppercase}
.fassung dd{font-size:var(--t-m);font-variant-numeric:tabular-nums}
/* Ton und Untertitel: Beschriftung schmal, Werte breit - ".fassung dl" darf das Raster hier nicht ueberschreiben */
.fassung dl.spuren{margin-top:16px;padding-top:12px;border-top:1px solid var(--linie);grid-template-columns:auto minmax(0,1fr);gap:8px 16px;font-size:var(--t-m);align-items:baseline}
.fassung dl.spuren dd{line-height:1.5}
@media (min-width:1251px){.fassung dl.spuren{grid-template-columns:auto minmax(0,1.4fr) auto minmax(0,1fr)}}
/* Dateipfad in voller Breite (".pfad" gehoert dem Pfad-Slot der Bibliothek) */
.fassung-datei{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);overflow-wrap:anywhere;margin-top:12px;padding-top:12px;border-top:1px solid var(--linie)}
.fassung-datei b{color:var(--text2);font-weight:500}
.herkunft{position:relative;padding-left:24px}
.herkunft::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--linie2)}
.herkunft>div{position:relative;padding:0 0 16px;font-size:var(--t-m)}
.herkunft>div::before{content:"";position:absolute;left:-23px;top:5px;width:9px;height:9px;border-radius:50%;background:#000;border:1.5px solid var(--text3)}
.herkunft>div.ok::before{border-color:var(--ok)}.herkunft>div.warn::before{border-color:var(--warn)}.herkunft>div.planung::before{border-color:var(--akzent)}.herkunft>div.gesehen::before{border-color:var(--l-laeuft)}
.herkunft time{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);display:block}
.staffelblock{border-top:1px solid var(--linie);padding:12px 0}
/* T-09 (S5b Phase 3): der Staffelkopf ist ein Raster - Name, Folgen und Technik in der ersten Zeile, der Ton immer als zweite, der Knopf
rechts aussen ueber beide Zeilen. Vorher eine umbrechende Flex-Zeile, in der der Ton mal in der ersten, mal in der zweiten Zeile stand
und der Knopf zwischen Folgenzahl und Technik. */
.staffelblock>summary{display:grid;grid-template-columns:84px max-content minmax(0,1fr) max-content;grid-template-areas:"name folgen technik knopf" "name ton ton knopf";gap:4px 16px;align-items:baseline;cursor:pointer;list-style:none}
.staffelblock>summary::-webkit-details-marker{display:none}
.staffelblock summary .sb-name{grid-area:name;font-weight:500}
.staffelblock summary .sb-folgen,.staffelblock summary .fort{grid-area:folgen;font-family:var(--mono);font-size:var(--t-xs);color:var(--text2)}
.staffelblock summary .sb-technik{grid-area:technik;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staffelblock summary .sb-ton{grid-area:ton}
.staffelblock summary .sb-ton:not(.warn-text){color:var(--text3)}
.staffelblock summary .sb-knopf{grid-area:knopf;align-self:start}
.staffelblock .folgenliste{margin-top:8px}
.folgen-liste{display:flex;flex-direction:column}
.folge-zeile{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-top:1px solid var(--linie);font-size:var(--t-m)}
.folge-zeile:first-child{border-top:0}
.folge-zeile .nr{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.folge-zeile b{font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folge-zeile small{display:block;font-size:var(--t-s);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folge-zeile .rechts{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.folge-zeile .sichtpunkt{width:8px;height:8px;border-radius:50%;background:var(--linie3)}
/* Der Punkt einer Folge ist ein Knopf (gesehen / ungesehen): grosse Trefferflaeche, kleiner Punkt */
.sichtknopf{display:inline-grid;place-items:center;width:28px;height:28px;margin:-8px -8px -8px 4px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;vertical-align:middle}
.sichtknopf:hover{background:var(--flaeche3)}
.sichtknopf:hover .sichtpunkt{outline:2px solid var(--linie3);outline-offset:2px}
.sichtknopf:disabled{opacity:.5;cursor:default}
.staffelblock summary .staffel-gesehen[aria-pressed="true"]{color:var(--ok-text,var(--ok))}
.knopf.d-gesehen.an{border-color:var(--ok);color:var(--text)}
.knopf.d-gesehen.an svg{stroke:var(--ok)}
.folge-zeile .sichtpunkt.voll{background:var(--ok)}.folge-zeile .sichtpunkt.teil{background:var(--akzent)}
.kennwerte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;font-size:var(--t-s)}
.kennwerte dt{color:var(--text3)}
.kennwerte dd{overflow-wrap:anywhere}
.technik-kurz{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--linie);border-radius:var(--r-m);font-size:var(--t-s);color:var(--text2);margin-top:var(--s4)}
.technik-kurz b{color:var(--text);font-weight:500}
.technik-kurz .rechts{margin-left:auto}
.dgitter{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s6)}
/* Schnellansicht in der Schublade */
.sa-kopf{position:relative;min-height:200px;overflow:hidden;background:var(--flaeche2)}
.sa-kopf img.hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;opacity:0;transition:opacity .5s}
.sa-kopf img.hg.da{opacity:.55}
.sa-kopf::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--flaeche) 0%,rgba(10,10,11,.4) 60%,rgba(10,10,11,.1) 100%)}
.sa-kopf .drin{position:relative;z-index:1;padding:48px 16px 16px;display:flex;gap:16px;align-items:flex-end}
.sa-kopf .poster{width:96px;aspect-ratio:2/3;border-radius:var(--r-m);object-fit:cover;background:var(--flaeche3);box-shadow:0 14px 40px rgba(0,0,0,.7);flex:none}
.sa-kopf h2{font-family:var(--kond);font-weight:500;font-size:var(--t-2xl);line-height:1.05;letter-spacing:-.01em}
.sa-kopf .logo{max-width:220px;max-height:64px;margin-bottom:8px;display:block}
.sa-kopf .meta{color:var(--text2);font-size:var(--t-s);margin-top:4px;display:flex;gap:4px 12px;flex-wrap:wrap}
.sa-text{padding:16px;font-size:var(--t-m);line-height:1.55;color:var(--text-lesen)}
.sa-aktionen{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 16px}
.sa-block{padding:16px;border-top:1px solid var(--linie)}
.sa-block h4{font-family:var(--kond);font-weight:500;font-size:var(--t-l);margin-bottom:8px}
.sa-block .reihe{--kw:104px}
.sa-nav{display:flex;gap:8px;align-items:center;margin-left:auto}
/* ---------------------------------------------------------------- Betrieb */
.unternav{position:sticky;top:var(--klebe-oben);z-index:15;display:flex;gap:4px;padding:8px 0;margin:-8px 0 8px;background:rgba(0,0,0,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow-x:auto;border-bottom:1px solid var(--linie)}
.unternav a{padding:4px 12px;border-radius:var(--r-s);font-size:var(--t-s);color:var(--text3);text-decoration:none;white-space:nowrap}
.unternav a:hover{color:var(--text)}
.unternav a.an{color:var(--text);background:var(--flaeche3)}
.lage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start}
.lage .satz{font-family:var(--kond);font-size:var(--t-3xl);line-height:1.06;letter-spacing:-.01em;font-weight:500;text-wrap:balance;margin-top:8px}
.lage .satz span{color:var(--text3)}
.aufmerksam{display:flex;flex-direction:column;gap:8px}
.hinweis{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 16px;border-radius:var(--r-m);background:var(--flaeche);border:1px solid var(--linie);font-size:var(--t-m);text-decoration:none}
a.hinweis:hover{border-color:var(--linie3)}
.hinweis>i{width:8px;height:8px;border-radius:50%;margin-top:calc((1lh - 8px) / 2)}
.hinweis b{font-weight:500}
.hinweis .klein{margin-top:4px}
.legende{display:flex;gap:8px 16px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--linie);font-size:var(--t-s);color:var(--text2)}
.legende span{display:inline-flex;gap:8px;align-items:center}
.legende i{width:18px;height:2px;border-radius:var(--r-xs);display:inline-block}
.netzliste{display:none}
.verlauf{position:relative}
.verlauf svg{display:block;width:100%;height:140px}
.verlauf .lesung{position:absolute;top:6px;left:12px;font-family:var(--mono);font-size:var(--t-xs);color:var(--text2);display:flex;gap:12px;flex-wrap:wrap;pointer-events:none}
.strecke{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--linie);border-radius:var(--r-l);overflow:hidden}
.stufe{position:relative;padding:16px;border-right:1px solid var(--linie);min-width:0}
.stufe:last-child{border-right:0}
.stufe::after{content:"";position:absolute;top:24px;right:-5px;width:9px;height:9px;border-top:1px solid var(--linie2);border-right:1px solid var(--linie2);transform:rotate(45deg);background:var(--grund);z-index:1}
.stufe:last-child::after{display:none}
.stufe .nr{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.stufe h3{font-size:var(--t-m);font-weight:600;margin:4px 0 8px}
.stufe p{font-size:var(--t-s);color:var(--text2);line-height:1.45;margin-top:8px}
.stufe .last{font-family:var(--kond);font-size:var(--t-2xl);margin-top:8px;line-height:1}
.stufe .last small{font-family:var(--sans);font-size:var(--t-s);color:var(--text3);margin-left:4px}
.zeitplaene td .titel{font-weight:500}
.zeitplaene td .beschreibung{font-size:var(--t-s);color:var(--text3);white-space:normal;max-width:46ch}
.schalterliste>div{display:flex;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--linie)}
.schalterliste>div:first-child{border-top:0}
.schalterliste>div>span{flex:1;min-width:0}
.schalterliste small{display:block;color:var(--text3);font-size:var(--t-s)}
.platten{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:var(--r-l);overflow:hidden}
.platte{display:grid;grid-template-columns:minmax(170px,240px) minmax(0,1fr) 170px;gap:16px;align-items:center;padding:12px 16px;border-top:1px solid var(--linie)}
.platte:first-child{border-top:0}
.platte .name b{display:block;font-weight:500}
.platte .name small{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.platte .balken{height:14px}
.platte .fuell{text-align:right;font-family:var(--mono);font-size:var(--t-s);display:flex;justify-content:flex-end;gap:8px;align-items:center}
.bereichslegende{display:flex;gap:8px 16px;flex-wrap:wrap;font-size:var(--t-s);color:var(--text2);margin-top:12px}
.bereichslegende i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:8px;vertical-align:-1px}
.matrix td.leer{color:#34343a}
.matrix td.viel{color:var(--text)}
.protokoll-werkzeug{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.protokoll-werkzeug .suchfeld{min-width:220px;flex:1 1 240px;max-width:360px}
.protokoll-werkzeug select.feld{width:auto}
.protokoll{border:1px solid var(--linie);border-radius:var(--r-l);overflow:hidden}
.protokoll .tag{padding:8px 16px;background:var(--flaeche);border-top:1px solid var(--linie);font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);letter-spacing:.06em;text-transform:uppercase}
.protokoll .tag:first-child{border-top:0}
.ereignis{display:grid;grid-template-columns:52px 150px minmax(0,1fr) auto;gap:16px;padding:12px 16px;border-top:1px solid var(--linie);align-items:baseline}
.ereignis time{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.akteur{font-family:var(--mono);font-size:var(--t-xs);color:var(--text2);display:flex;gap:8px;align-items:center;min-width:0}
.akteur i{width:7px;height:7px;border-radius:2px;flex:none}
.ereignis .was{min-width:0;font-size:var(--t-m);overflow-wrap:anywhere}
.ereignis .was a{color:var(--text);text-decoration-color:var(--linie3);text-underline-offset:3px}
.ereignis .details{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);margin-top:4px;overflow-wrap:anywhere}
.ereignis.warn .was{color:var(--warn-text)}.ereignis.fehler .was{color:var(--krit-text)}
.ereignis .stufe-punkt{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:1px}
.ablage{border:1.5px dashed var(--linie3);border-radius:var(--r-m);padding:24px 16px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.ablage:hover,.ablage.drueber{border-color:var(--akzent2);background:var(--akzent-tief)}
.ablage b{display:block;font-weight:500;margin-top:4px}
.ablage-ueberall{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.82);display:grid;place-items:center;border:3px dashed var(--akzent2);font-family:var(--kond);font-size:var(--t-3xl);pointer-events:none}
/* Der Baustein "Links" (eine Liste von Verweisen mit Farbpunkt) - NICHT die Rolle einer Reihe: MX.reihenBeleben (kern.js) haengt einer
.reihe-huelle die Zustandsklassen "links" und "rechts" an, sobald sie gerollt ist. Ohne die Ausnahme griffen diese Regeln nach dem
Blaettern in jede gerollte Reihe: jedes darin wurde ein Kasten in Flaechenfarbe (die Tuer der Momente-Kachel lag als schwarze
Flaeche ueber Standbild und Video), jedes ein Punkt von 8 px (der Titel unter der Kachel). Eigentuemer 25.09.2026, Auftrag 19. */
.links:not(.reihe-huelle){display:flex;flex-wrap:wrap;gap:8px}
.links:not(.reihe-huelle) a{display:inline-flex;align-items:center;gap:8px;background:var(--flaeche2);border:1px solid var(--linie2);border-radius:var(--r-m);padding:8px 8px 8px 12px;text-decoration:none;font-size:var(--t-m)}
.links:not(.reihe-huelle) a:hover{border-color:var(--linie3)}
.links:not(.reihe-huelle) a b{width:8px;height:8px;border-radius:50%;flex:none}
.links:not(.reihe-huelle) a button{background:none;border:0;color:var(--text3);cursor:pointer;font-size:var(--t-l);line-height:1;padding:0 4px}
.links:not(.reihe-huelle) a button:hover{color:var(--krit)}
.b-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;margin-bottom:var(--s4)}
.b-kopf>div{min-width:0}
.b-kopf h1{font-family:var(--kond);font-weight:500;font-size:var(--t-3xl);line-height:1.05;letter-spacing:-.01em;margin-top:0}
.b-kopf h1 span{color:var(--text3)}
.hinweise{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;justify-content:flex-end;align-items:center;max-width:60%}
.pille{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linie2);background:var(--flaeche);border-radius:var(--r-p);padding:0 4px 0 12px;font-size:var(--t-s);max-width:560px;min-width:0;min-height:var(--feld-k)}
.pille>i{width:8px;height:8px;border-radius:50%;flex:none}
.pille a{text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pille a:hover{color:#fff}
.pille a small{color:var(--text3);font-size:var(--t-s)}
.pille button{width:24px;height:24px;border-radius:50%;border:0;background:none;color:var(--text3);cursor:pointer;flex:none;display:grid;place-items:center}
.pille button:hover{background:var(--flaeche3);color:var(--text)}
.pille button svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.pille.aus{opacity:.55;border-style:dashed}
/* BT-01 (S5b): mehr als drei Hinweise zeigt der Betrieb als kompakte Liste - eine Zeile je Hinweis, volle Breite (Klasse .liste an
.hinweise setzt app/betrieb.js, P5; ohne sie bleibt es bei den Pillen). */
.hinweise.liste{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;max-width:none;width:100%;margin-left:0;border:1px solid var(--linie);border-radius:var(--r-m);background:var(--flaeche);overflow:hidden}
.hinweise.liste .pille{max-width:none;border:0;border-top:1px solid var(--linie);border-radius:0;background:none;padding:var(--s1) var(--s1) var(--s1) var(--s3)}
.hinweise.liste .pille:first-child{border-top:0}
.hinweise.liste .pille a{flex:1}
.hinweise.liste>.knopf{align-self:flex-start;margin:var(--s1) var(--s2)}
/* BT-06 (S5b): am Handy bricht die Pille um - der Satz steht unter dem Titel, statt abgeschnitten ueber den Rand zu laufen */
@media (max-width:820px){
.pille{flex:1 1 100%;border-radius:var(--r-m);align-items:flex-start;padding:var(--s1) var(--s1) var(--s1) var(--s3)}
.pille>i{margin-top:calc((1lh - 8px) / 2)}
.pille a{white-space:normal;overflow-wrap:anywhere}
.pille a small{display:block}
}
.b-reiter{margin-bottom:24px}
/* Cockpit: Module in Paaren aehnlicher Hoehe; lange Inhalte bekommen eine Hoechsthoehe mit Scrollen */
.cockpit{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;gap:16px;align-items:start}
.modul{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l);padding:16px;min-width:0;display:flex;flex-direction:column}
.modul-kopf{display:flex;align-items:center;gap:8px;min-height:var(--feld);margin-bottom:8px;flex-wrap:wrap}
.modul-kopf h2{font-family:var(--kond);font-size:var(--t-l);font-weight:500;color:var(--text);white-space:nowrap;letter-spacing:-.005em}
.modul-kopf .rechts{margin-left:auto;display:flex;gap:8px;align-items:center}
.modul-kopf a.mehr{font-size:var(--t-s);color:var(--text2);text-decoration:none;white-space:nowrap;padding:4px 8px;border-radius:var(--r-s)}
.modul-kopf a.mehr:hover{color:var(--text);background:var(--flaeche3)}
a.mehr svg,.regal-kopf a.mehr svg{width:12px;height:12px;vertical-align:-1px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.knopf.klein svg{width:12px;height:12px}
.bahnen-huelle .reihe-pfeil{top:50%}
.bahnen.reihe{padding:0 0 8px;margin:0}
.modul .begrenzt{max-height:330px;overflow-y:auto;padding-right:4px}
.m-halb{grid-column:span 6}.m-voll{grid-column:span 12}.m-drittel{grid-column:span 4}.m-zweidrittel{grid-column:span 8}
.zahlzeile{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin-bottom:8px}
.gross-zahl{font-family:var(--kond);font-size:var(--t-3xl);font-weight:500;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.gross-zahl small{font-family:var(--sans);font-size:var(--t-s);color:var(--text3);margin-left:4px;font-weight:400}
.posten-liste{display:flex;flex-direction:column}
.posten{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:8px 0;border-top:1px solid var(--linie);align-items:center}
.posten:first-child{border-top:0}
.posten .n{font-size:var(--t-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.posten .m{grid-column:1;font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.posten .a{grid-row:1 / span 2;grid-column:2;display:flex;gap:4px;align-items:center}
.posten .balken{grid-column:1 / -1;height:3px}
.posten.fehler .n{color:var(--krit-text)}
.teilung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;flex:1}
.teilung>div{min-width:0}
.teilung>div+div{border-left:1px solid var(--linie);padding-left:24px}
.teil-kopf{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.teil-kopf b{font-weight:600;font-size:var(--t-m)}
.teil-kopf .rechts{margin-left:auto;display:flex;gap:4px}
.ablagefeld{flex:1;min-height:150px;border:1.5px dashed var(--linie3);border-radius:var(--r-m);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;cursor:pointer;transition:border-color .15s,background .15s}
.ablagefeld:hover,.ablagefeld:focus-visible{border-color:var(--akzent2);background:var(--akzent-tief)}
.ablagefeld svg{width:30px;height:30px;stroke:var(--akzent);fill:none;stroke-width:1.5}
.ablagefeld b{font-weight:500;font-size:var(--t-m)}
.netzkarte{flex:1;display:flex;align-items:center;min-height:0}
.netzkarte svg{display:block;width:100%;height:auto;max-height:520px}
.netzkarte .knoten rect{fill:#0d0d10;stroke:var(--linie2)}
.netzkarte .knoten.gemessen rect{stroke:var(--linie3)}
.netzkarte .knoten.aus rect{stroke:#6b2a24;stroke-dasharray:4 4}
.netzkarte .knoten.nichtgemessen rect{stroke-dasharray:3 4}
.netzkarte .kname{font-family:var(--sans);font-size:var(--t-m);font-weight:600;fill:var(--text)}
.netzkarte .krolle{font-family:var(--mono);font-size:var(--t-xs);fill:var(--text3)}
.netzkarte .kwert{font-family:var(--mono);font-size:var(--t-xs);fill:var(--text2)}
.netzkarte .kante{fill:none;opacity:.35;stroke-linecap:round}
.netzkarte .kante.ungemessen{stroke-dasharray:2 6}
.netzkarte .kante.aktiv{opacity:1;stroke-dasharray:7 8;animation:fluss linear infinite}
@keyframes fluss{to{stroke-dashoffset:-26}}
.stroeme .strom{display:grid;grid-template-columns:3px minmax(0,1fr) auto;gap:12px;align-items:center;padding:4px 0;border-top:1px solid var(--linie);font-size:var(--t-s)}
.stroeme .strom:first-child{border-top:0}
.stroeme .strom i{align-self:stretch;border-radius:var(--r-xs)}
.stroeme .strom span:last-child{font-family:var(--mono);font-size:var(--t-s);color:var(--text2);text-align:right}
.stroeme .strom.aktiv span:last-child{color:var(--text)}
.stroeme details summary{cursor:pointer;color:var(--text3);font-size:var(--t-s);padding:8px 0;list-style:none}
.stroeme details summary::-webkit-details-marker{display:none}
.summen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--linie);border-radius:var(--r-m);overflow:hidden;margin-bottom:12px}
.summen div{background:var(--flaeche);padding:8px 12px}
.summen b{display:block;font-family:var(--kond);font-size:var(--t-xl);font-weight:500;line-height:1.1}
.summen span{font-size:var(--t-s);color:var(--text3)}
.mini-verlauf svg{display:block;width:100%;height:54px}
.plattenzeile{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;font-size:var(--t-s)}
.plattenzeile .balken{height:9px}
.plattenzeile .wert{font-family:var(--mono);font-size:var(--t-s);text-align:right;white-space:nowrap}
.plattenzeile .wert.krit{color:var(--krit)}.plattenzeile .wert.warn{color:var(--warn)}
.rechnerzeile{display:grid;grid-template-columns:minmax(0,1fr) 64px 78px;gap:4px 12px;align-items:center;padding:8px 0;border-top:1px solid var(--linie);font-size:var(--t-s)}
.rechnerzeile:first-of-type{border-top:0}
.rechnerzeile .balken{height:4px}
.rechnerzeile small{display:block;font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.neu-poster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.neu-poster .tk b{font-size:var(--t-s);margin-top:4px}
.stufen-mini{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:12px}
.stufen-mini>div{background:var(--grund);border:1px solid var(--linie);border-radius:var(--r-m);padding:8px 12px;min-width:0}
.stufen-mini b{display:block;font-size:var(--t-s);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stufen-mini .w{font-family:var(--kond);font-size:var(--t-xl);margin-top:4px;line-height:1}
.stufen-mini .w small{font-family:var(--sans);font-size:var(--t-xs);color:var(--text3);margin-left:4px}
.stufen-mini .status{margin-top:4px}
.schalterreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.schalterreihe>div{display:flex;align-items:center;gap:12px;background:var(--grund);border:1px solid var(--linie);border-radius:var(--r-m);padding:8px 12px;min-width:0;min-height:44px}
.schalterreihe>div>span{flex:1;min-width:0;font-size:var(--t-s)}
.schalterreihe small{display:block;color:var(--text3);font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schalterreihe.einspaltig{grid-template-columns:minmax(0,1fr)}
.k-liste{display:flex;flex-direction:column;gap:8px}
.k-auftrag{border:1px solid var(--linie);border-radius:var(--r-m);background:var(--grund);padding:12px;min-width:0}
.k-auftrag.zurueckgehalten{border-color:var(--warn-rand)}
.k-auftrag.fehler{border-color:var(--krit-rand)}
.k-kopf{display:flex;gap:8px 12px;align-items:flex-start;flex-wrap:wrap}
.k-auf{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:4px;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
.k-auf:focus-visible{outline:2px solid var(--akzent);outline-offset:4px;border-radius:var(--r-s)}
.k-titel{display:flex;align-items:center;gap:8px;min-width:0}
.k-titel b{font-weight:600;font-size:var(--t-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.k-pfeil{width:14px;height:14px;flex:none;fill:none;stroke:var(--text3);stroke-width:2;transition:transform .15s}
.k-auf[aria-expanded="true"] .k-pfeil{transform:rotate(180deg)}
.k-meta{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-grund{font-size:var(--t-s);color:var(--text2);overflow-wrap:anywhere}
.k-aktionen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.k-schritte{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:12px 0 0;padding:0}
.k-schritte li{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);padding-top:4px;border-top:3px solid var(--linie2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-schritte li.ok{border-color:var(--ok);color:var(--text2)}
.k-schritte li.laeuft{border-color:var(--akzent);color:var(--text)}
.k-schritte li.warn{border-color:var(--warn);color:var(--warn)}
.k-schritte li.krit{border-color:var(--krit);color:var(--krit)}
/* Betrieb > Pipeline (app/betrieb.js, Block "pipeline"): Karte je Paket mit sechs Stationen. Eigener Vorsatz p- - nicht pl-, das
gehoert dem Player. Die mobile Regel steht hier direkt dabei: eine spaetere Desktop-Regel fuer dieselben Klassen gibt es nicht. */
.p-paket{border:1px solid var(--linie);border-radius:var(--r-m);background:var(--grund);padding:12px;min-width:0}
.p-paket.z-entscheidung,.p-paket.zulange{border-color:var(--warn-rand)}
.p-paket.z-haengt,.p-paket.z-fehler{border-color:var(--krit-rand)}
.p-paket.quittiert,.p-paket.z-verworfen,.p-paket.z-ersetzt{opacity:.72}
.p-stufen{grid-template-columns:repeat(6,minmax(0,1fr))}
.p-stufen li.wartet{border-color:var(--text3);color:var(--text)}
.p-stufen li.aus{border-top-style:dashed;color:var(--text3)}
.p-zeile{font-size:var(--t-xs);color:var(--text3);overflow-wrap:anywhere}
.p-weiter{font-size:var(--t-xs);color:var(--text2)}
.p-balken{margin-top:8px}
.p-filter{margin:8px 0 4px}
.p-hinweis{margin:8px 0 0;font-size:var(--t-s)}
.p-suche{width:230px;min-height:var(--feld-k);padding:4px 8px}
.p-detail{margin-top:12px;padding-top:8px;border-top:1px solid var(--linie)}
.p-verlauf{list-style:none;margin:8px 0 12px;padding:0;display:flex;flex-direction:column;gap:0}
.p-verlauf li{display:grid;grid-template-columns:118px 74px minmax(0,1fr) 150px;gap:8px;font-size:var(--t-s);padding:4px 0;border-bottom:1px solid var(--linie);min-width:0}
.p-verlauf .z,.p-verlauf .d{font-family:var(--mono);color:var(--text3);white-space:nowrap}
.p-verlauf .t{overflow-wrap:anywhere}
.p-verlauf .q{color:var(--text3);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:820px){
.p-suche{width:100%}
.p-stufen li{font-size:var(--t-xs)}
.p-verlauf li{grid-template-columns:96px minmax(0,1fr)}
.p-verlauf .d,.p-verlauf .q{display:none}
}
.k-details{margin-top:12px;padding-top:8px;border-top:1px solid var(--linie)}
.k-zeilen .zeile>span:first-child{color:var(--text3);flex:0 0 130px}
.k-zeilen .zeile>span:last-child{text-align:right;min-width:0;overflow-wrap:anywhere}
.k-dateien{table-layout:fixed;width:100%}
.k-dateien th:first-child{width:42%}
.k-dateien td{font-size:var(--t-s);overflow:hidden;text-overflow:ellipsis;padding:8px 12px}
.k-dateien .r{text-align:right;width:92px}
.k-pre{font-family:var(--mono);font-size:var(--t-xs);background:var(--flaeche2);border-radius:var(--r-s);padding:8px 12px;white-space:pre-wrap;margin:0}
.k-zeiten{margin-top:12px}
.k-schema{margin-top:16px}
.k-schema summary{cursor:pointer;color:var(--text3);font-size:var(--t-s)}
.k-schema[open] summary{margin-bottom:8px}
.k-form{display:grid;grid-template-columns:150px minmax(0,1fr) 90px;gap:12px;margin:12px 0}
.k-form label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-s);color:var(--text3)}
.k-treffer{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto}
.k-treffer .vorschlag.an{background:var(--akzent-tief);outline:1px solid var(--akzent2)}
.k-wahl{margin-top:12px}
/* >>> w8-zuordnen
W8 (29.10.2026), Dialog "Zuordnen ..." (app/betrieb.js zuordnenDialog), in beiden Stilen. B3b, Befund des Eigentuemers am Handy (12:28): in der
Liste mit fester Hoehe (.k-treffer, Spalte mit max-height) schrumpften die Treffer auf ihre min-height von 44 px, Plakat und zweite Zeile
ragten 18 px heraus in den naechsten Treffer, und der Rahmen des markierten lag nur um die Titelzeile; am PC ebenso. Die Treffer behalten ihre
Hoehe, die Liste rollt. B3: bei Serien das Feld Staffel als vierte Spalte (am Handy neben dem Jahr). Neue Regeln, keine von heute geaendert. */
.k-treffer .vorschlag{flex-shrink:0}
.k-form.mit-staffel{grid-template-columns:150px minmax(0,1fr) 90px 90px}
@media (max-width:820px){.k-form.mit-staffel{grid-template-columns:1fr 90px 90px}}
/* <<< w8-zuordnen */
/* >>> gs-server
Runde GS (29.10.2026), Betrieb > Game Server (app/betrieb.js Block spiele), in beiden Stilen: je Spielserver eine Kachel, die Spieler als
Kennzahl ueber den Zeilen, jeder Wert mit seinen Knoepfen (Kopieren, Anzeigen, Verbergen) rechts auf einer Linie, die Knoepfe der Kachel
darunter. Im Stil Kinosaal setzt app/kinosaal.css (Abschnitt Betrieb) Schrift und Groesse dazu. Neue Regeln, keine von heute geaendert. */
.gs-server .gs-spieler{display:flex;align-items:baseline;gap:8px;margin:4px 0 12px}
.gs-server .gs-spieler b{font-size:var(--t-2xl);line-height:1.1;font-variant-numeric:tabular-nums}
.gs-server .gs-spieler small{color:var(--text2);font-size:var(--t-m)}
.gs-server .gs-zeilen .zeile{align-items:center;min-height:34px}
.gs-server .gs-wert{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 8px;min-width:0;text-align:right}
.gs-server .gs-wert .mono{overflow-wrap:anywhere}
.gs-server .gs-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* <<< gs-server */
.reiter-anpassen{margin-left:auto;align-self:center;flex:none}
.zielbox-zeile{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;background:var(--grund);border:1px solid var(--linie);border-radius:var(--r-m);padding:8px 12px;margin-bottom:8px}
.zielbox-zeile>span:first-child{font-size:var(--t-s);min-width:0}
.zielbox-zeile small{display:block;color:var(--text3);font-size:var(--t-xs)}
.anpassen-start{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.anpassen-start select.feld{width:auto}
.anpassen-zeile{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--linie)}
.anpassen-zeile:first-child{border-top:0}
.anpassen-zeile label{flex:1;font-size:var(--t-m);cursor:pointer}
.melde-ruhe{display:flex;align-items:center;gap:8px;flex:none}
.melde-ruhe select.feld{width:auto;padding:4px 24px 4px 8px;font-size:var(--t-s)}
.melde-schritte{margin:8px 0;padding-left:24px;font-size:var(--t-s);display:grid;gap:4px}
.melde-schritte code{word-break:break-all}
/* Umbauplan S7 (25.09.2026), Betrieb › Systeme: die Regler der Worker als Tabelle Regler × Worker (am Handy gestapelt, Klasse stapel) und die
drei Regler des Plex-Agenten als Karten, die sich selbst auf die Breite verteilen - nur Werte der Skala */
.wr-tabelle td{white-space:normal;vertical-align:top}
.wr-tabelle td.wr-regler{width:32%;min-width:200px}
.wr-tabelle td.wr-regler b,.wr-tabelle td.wr-regler .mono{display:block;overflow-wrap:anywhere}
.wr-tabelle td.wr-regler b{font-weight:500}
.wr-tabelle tr.abweichend td.wr-regler{box-shadow:inset 2px 0 0 var(--akzent)}
.wr-zelle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3)}
.wr-wert{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.wr-wert b{font-weight:500}
.wr-wert .klein,.ag-werte dt{color:var(--text3)}
.wr-knoepfe,.ag-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2)}
.wr-fuss{margin-top:var(--s2)}
.ag-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--s3);margin-bottom:var(--s3)}
.ag-regler{display:flex;flex-direction:column;gap:var(--s2);min-width:0;padding:var(--s3) var(--s4);border:1px solid var(--linie);border-radius:var(--r-m);background:var(--grund)}
.ag-regler.abweichend{box-shadow:inset 2px 0 0 var(--akzent)}
.ag-kopf b{display:block;font-weight:500}
.ag-kopf .mono{overflow-wrap:anywhere}
.ag-werte{display:grid;gap:var(--s1);margin:auto 0 0}
.ag-werte>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s1) var(--s3);font-size:var(--t-s)}
.ag-werte dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s2)}
@media (max-width:820px){
.tabelle.stapel.wr-tabelle td.wr-regler{width:auto}
.tabelle.stapel.wr-tabelle tr.abweichend td.wr-regler{box-shadow:none}
.tabelle.stapel.wr-tabelle tr.abweichend{box-shadow:inset 2px 0 0 var(--akzent)}
.ag-regler{padding:var(--s3)}
}
/* ---------------------------------------------------------------- Planung */
.plan-eingabe{position:relative;display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:1 1 560px;max-width:780px}
.plan-eingabe .suchfeld{flex:1 1 280px}
.plan-eingabe select.feld{width:auto}
.vorschlaege{position:absolute;top:calc(100% + var(--s2));left:0;right:0;z-index:40;background:var(--flaeche2);border:1px solid var(--linie2);border-radius:var(--r-m);box-shadow:0 26px 70px rgba(0,0,0,.85);padding:4px;max-height:440px;overflow-y:auto}
.vorschlag{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:8px;border-radius:var(--r-s);background:none;border:0;text-align:left;cursor:pointer;min-height:44px}
.vorschlag.an,.vorschlag:hover{background:var(--flaeche4)}
.vorschlag img,.vorschlag .platz{width:36px;height:54px;border-radius:var(--r-xs);object-fit:cover;background:var(--flaeche3)}
.vorschlag small{display:block;color:var(--text3);font-size:var(--t-s)}
.vorschlag .marken{display:flex;gap:4px}
.zeitleiste{border:1px solid var(--linie);border-radius:var(--r-l);padding:16px 16px 12px;overflow-x:auto}
.zeitleiste .spur{position:relative;min-width:900px}
.zeitleiste .achse{position:absolute;left:0;right:0;bottom:22px;height:1px;background:var(--linie2)}
.zeitleiste .monat{position:absolute;bottom:0;font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);transform:translateX(-50%);white-space:nowrap}
.zeitleiste .monatlinie{position:absolute;top:0;bottom:22px;width:1px;background:var(--linie)}
.zeitleiste .heute{position:absolute;top:0;bottom:22px;width:1px;background:var(--akzent)}
.zeitleiste .heute span{position:absolute;top:-2px;left:6px;font-family:var(--mono);font-size:var(--t-xs);color:var(--akzent);white-space:nowrap}
.termin{position:absolute;display:flex;align-items:center;gap:8px;transform:translateX(-8px);white-space:nowrap;cursor:pointer;background:none;border:0;text-align:left;padding:0 4px;border-radius:var(--r-xs)}
.termin i{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;background:#000;flex:none}
.termin.fehlt i{background:currentColor}
.termin span{font-size:var(--t-s);color:var(--text)}
.termin small{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.termin:hover{background:var(--flaeche3)}
.termin:hover span{color:var(--akzent)}
.plan-werkzeug{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.plan-werkzeug .rechts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.plan-werkzeug .suchfeld{min-width:200px;flex:0 1 280px}
/* Board: leere Bahnen werden schmal. Passen die Bahnen am PC nicht nebeneinander, brechen sie in ein Raster um (Auftrag 37, unten);
Randverlauf und Pfeile der Huelle zeigen sich nur noch als Rueckfall in einem Browser ohne Behaelterabfragen. */
.bahnen-huelle{position:relative}
/* PL-10 (S5b Phase 3): die Bahnwahl gibt es nur am Handy (planung.js bahnWahlBeleben) */
.bahn-wahl{display:none}
/* PL-10 (S5b): die Bahnen teilen sich die Breite (je mindestens 200 px, leere 150 px) statt fest 250 px. Nebeneinander brauchen sieben
Bahnen so 1.472 px (sieben mal 200 und sechs Fugen zu 12), acht mit "Erledigt" 1.684 px; ist das Board schmaler, gilt seit Auftrag 37
das Raster unten, statt dass es seitlich rollt. --spalten (planung.js) wird nicht mehr gebraucht. */
.bahnen{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;scroll-behavior:smooth}
.bahn{flex:1 0 200px;min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;border-radius:var(--r-m)}
.bahn.leer-bahn{flex:0 0 150px}
.bahn.leer-bahn>header p{display:none}
.bahn>header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:0 4px 8px;border-bottom:2px solid var(--linie);margin-bottom:8px}
.bahn>header b{font-weight:600;font-size:var(--t-m)}
.bahn>header small{font-family:var(--mono);color:var(--text3);font-size:var(--t-xs)}
.bahn>header p{flex-basis:100%;font-size:var(--t-xs);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bahn .karten{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 290px);min-height:80px;overflow-y:auto;padding:4px}
.bahn .karten.drueber{background:var(--flaeche);outline:1px dashed var(--linie3);border-radius:var(--r-m)}
.bahn .karten .leer{padding:16px 8px;border:1px dashed var(--linie2);border-radius:var(--r-m);text-align:center}
/* Auftrag 37 (26.09.2026): passen die Bahnen nicht mehr nebeneinander, bricht das Board in ein fliessendes Raster um, statt seitlich zu
rollen. Es misst dafuer seine eigene Breite (Behaelter "bahnen", nur am PC; am Handy bleibt die Bahnwahl, eine Bahn zur Zeit, PL-10).
Unter 1.472 px (sieben Bahnen) bzw. 1.684 px (acht, mit "Erledigt"), am Fenster rund 1.630 bzw. 1.850 px, stehen die Bahnen in so
vielen Spalten zu mindestens 300 px, wie die Breite traegt, jede gleich breit und zeilenweise in der Reihenfolge der Listen; zwischen
den Reihen 24 px (--s5, wie Regal zu Regal), damit die Unterkante einer rollenden Bahn nicht am Kopf der naechsten klebt. Eine feste
Fensterbreite waere ein vierter Umbruchpunkt der Seite; bei 1.600 px rollte das Board bis hierher noch 30 px weit.
Die 300 px kommen von der Minikarte: ihre Textspalte hat dann 218 px (300 minus 2 x 4 Rand der Bahn, 2 x 1 Rahmen, 2 x 8 Innenabstand,
44 Plakat, 12 Luecke), mit dem Rollbalken einer langen Bahn 208. Darin stehen die Titel in hoechstens zwei Zeilen und die Metazeile
(Bereich, Jahr, Regie oder Sender) bei 152 von 155 Karten der Datenkopie ungekuerzt (95 von 100 brauchen hoechstens 193 px). Schmaler
kippt es schnell: bei 280 px sind 13 Metazeilen gekuerzt, bei 260 px 35, bei 240 px brechen die ersten Titel in drei Zeilen, bei den
bisherigen 200 px fast alles. Breiter gewinnt die Karte kaum noch (320 px: eine Zeile gekuerzt), kostet aber eine Spalte: 1.440 px
haetten drei Reihen statt zwei. Jede Bahn behaelt ihren eigenen Rollbereich (in der Datenkopie 95 Eintraege unter "Spaeter
entscheiden"). */
@media (min-width:821px){.bahnen-huelle{container:bahnen / inline-size}}
@container bahnen (width < 1472px){
.bahnen{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));row-gap:var(--s5)}
.bahn.leer-bahn>header p{display:block}
}
@container bahnen (width < 1684px){
.bahnen:has(>.bahn:nth-child(8)){display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));row-gap:var(--s5)}
.bahnen:has(>.bahn:nth-child(8))>.bahn.leer-bahn>header p{display:block}
}
.pk{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:8px;border-radius:var(--r-m);background:var(--flaeche);border:1px solid transparent;cursor:pointer;text-align:left;width:100%;position:relative}
.pk:hover{border-color:var(--linie2);background:var(--flaeche2)}
.pk.zieht{opacity:.35}
.pk.davor{box-shadow:0 -2px 0 var(--akzent)}
.pk img,.pk .platz{display:block;width:44px;height:66px;border-radius:var(--r-s);object-fit:cover;background:var(--flaeche3)}
.pk b{display:block;font-weight:500;font-size:var(--t-m);line-height:1.3}
.pk .meta{font-size:var(--t-s);color:var(--text3);margin-top:4px}
.pk .marken{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap;align-items:center}
/* Auftrag 37: eine Marke, die breiter ist als die Textspalte, bricht in sich um, statt aus der Karte zu ragen. "aus Veroeffentlichung
ausstehend" braucht 231 px, eine laufende Arbeit mit ihren hoechstens 34 Zeichen (arbeitMarke) 262 px; die Spalte hat ab 208 px. */
.pk .status{white-space:normal}
.pk .fortschritt{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--t-xs);color:var(--text2)}
.pk .fortschritt .balken{width:44px;height:4px}
.grosskarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:var(--s3);align-items:start}
.status.arbeit{color:var(--l-bearbeitung);background:color-mix(in srgb,var(--l-bearbeitung) 14%,transparent)}
.staffel-befunde{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));gap:12px}
.staffel-befund{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px;border-radius:var(--r-m);background:var(--flaeche);border:1px solid var(--linie)}
.staffel-befund img,.staffel-befund .platz{display:block;width:44px;height:66px;border-radius:var(--r-s);object-fit:cover;background:var(--flaeche3)}
.staffel-befund .sb-text{min-width:0;display:flex;flex-direction:column;gap:4px}
.staffel-befund .sb-text b{font-weight:500;font-size:var(--t-m);line-height:1.3}
.staffel-befund .sb-text b a{color:inherit;text-decoration:none}
.staffel-befund .sb-text b a:hover{text-decoration:underline;text-underline-offset:3px}
.staffel-befund .sb-text small{color:var(--text3);font-size:var(--t-s)}
.staffel-befund .sb-knoepfe{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.staffel-befund .sb-knoepfe .ik{align-self:flex-end}
/* Auftrag 97: unvollstaendige Staffeln unter den neuen (app/planung.js unvollstaendigBlock); dieselben Karten, ein Satz darueber */
.sb-unvollstaendig{margin-top:var(--s4)}
.sb-unvollstaendig>p{margin:0 0 var(--s2)}
.sb-unvollstaendig>.chips{margin-top:var(--s3)}
.sb-unvollstaendig .status{white-space:normal}
/* Planungskarte (16.09.2026): feste Zonenfolge Kopf (Poster, Titelblock, Aktionen) - Daten - Plex - Beschreibung - Staffeln - Notizen - Fuss.
Die Listenfarbe steht als Innenkante links. In der Seitenleiste gelten dieselben Bausteine ohne eigenen Seitenrand (--gk-x: 0). */
.gk{--gk-x:16px;--gk-farbe:var(--linie3);display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:var(--r-l);background:var(--flaeche);min-width:0;overflow:hidden;box-shadow:inset 3px 0 0 var(--gk-farbe)}
.gk-kopf{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;padding:16px var(--gk-x) 12px calc(var(--gk-x) + 4px);align-items:start}
.gk-kopf img,.gk-kopf .platz{display:block;width:72px;height:108px;border-radius:var(--r-s);object-fit:cover;background:var(--flaeche3)}
.gk-titel{min-width:0}
.gk-titel h3{font-family:var(--kond);font-weight:500;font-size:var(--t-xl);line-height:1.2;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.gk-titel h3 button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;min-width:0}
.gk-titel h3 button:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--linie3)}
.gk-titel h3 small{font-family:var(--sans);font-size:var(--t-s);color:var(--text3);font-weight:400}
.gk-titel .unter{font-size:var(--t-s);color:var(--text3);margin-top:0}
.gk-titel .info{font-size:var(--t-s);color:var(--text2);margin-top:4px;line-height:1.45}
.gk-titel .chips{margin-top:8px;gap:4px}
.gk-aktionen{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.gk-aktionen select.feld{width:auto;min-height:30px;padding:4px 24px 4px 8px;font-size:var(--t-s)}
.gk-daten{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px 16px;margin:0;padding:12px var(--gk-x) 12px calc(var(--gk-x) + 4px);border-top:1px solid var(--linie)}
.gk-daten>div{min-width:0}
.gk-daten dt{font-size:var(--t-xs);color:var(--text3)}
.gk-daten dd{font-size:var(--t-s);margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gk-daten dd.voll{white-space:normal}
.gk-daten dd a{color:var(--akzent);text-decoration:none}
.gk-daten dd a:hover{text-decoration:underline}
.gk-teil{display:flex;align-items:baseline;gap:8px;font-size:var(--t-s);color:var(--text3);padding:12px var(--gk-x) 0 calc(var(--gk-x) + 4px)}
.gk-teil b{font-weight:500;color:var(--text2)}
.gk-teil .rechts{margin-left:auto}
.gk-block{padding:4px var(--gk-x) 12px calc(var(--gk-x) + 4px)}
.gk-text{font-size:var(--t-m);line-height:1.55;color:var(--text-lesen)}
.gk-text.zu{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gk-mehr{background:none;border:0;color:var(--text3);font-size:var(--t-s);padding:4px 0 0;cursor:pointer}
.gk-mehr:hover{color:var(--text)}
.gk-plex{border:1px solid var(--linie);border-radius:var(--r-m);background:var(--grund);padding:8px 12px}
.gk-plex .plexkopf{display:flex;gap:8px;align-items:baseline;font-size:var(--t-s);color:var(--text3);padding:4px 0;flex-wrap:wrap}
.gk-plex .plexkopf b{color:var(--ok);font-weight:500}
.plexzeile{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:4px 12px;font-size:var(--t-s);padding:4px 0;border-top:1px solid var(--linie);align-items:baseline}
.plexzeile b{font-weight:500;font-family:var(--mono);font-size:var(--t-xs)}
.plexzeile .ton{grid-column:2 / -1;color:var(--text3);white-space:normal;font-size:var(--t-s)}
.plexzeile .mono{color:var(--text2);font-size:var(--t-xs);white-space:nowrap}
.gk-staffel{display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px 12px;padding:8px 0;border-top:1px solid var(--linie);align-items:center}
.gk-staffel:first-child{border-top:0}
.gk-staffel .nr{font-family:var(--kond);font-size:var(--t-l);font-weight:500;line-height:1}
.gk-staffel .nr small{display:block;font-family:var(--sans);font-size:var(--t-xs);color:var(--text3);font-weight:400;margin-top:4px}
.gk-staffel .stand{display:flex;gap:4px 12px;align-items:center;font-size:var(--t-s);color:var(--text2);flex-wrap:wrap;min-width:0}
.gk-staffel .stand .balken{width:84px;height:4px;flex:none}
.gk-staffel .stand .mono{font-size:var(--t-xs)}
.gk-staffel .folgenraster{grid-column:2}
.folgenraster{display:flex;flex-wrap:wrap;gap:4px}
.folge{min-width:30px;height:30px;padding:0 4px;border-radius:var(--r-s);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--t-xs);border:1px solid var(--linie2);color:var(--text3);background:none;cursor:pointer;line-height:1.05}
.folge small{font-size:var(--t-xs);color:var(--text3)}
.folge.plex{background:var(--ok-tief);border-color:var(--ok-rand);color:var(--ok);cursor:default}
.folge.habe{background:var(--akzent-tief);border-color:var(--akzent-rand);color:var(--akzent)}
.folge.kommt{border-style:dashed}
.folge.faellig{border-color:var(--warn-rand);color:var(--warn)}
.gk-notizen .notiz{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:8px;padding:4px 0;border-top:1px solid var(--linie);font-size:var(--t-s);align-items:baseline}
.gk-notizen .notiz:first-child{border-top:0}
.gk-notizen:not(.alle) .notiz:nth-last-child(n+3){display:none}
.gk-notizen time{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.gk-notizen .notiz button{background:none;border:0;color:var(--text3);cursor:pointer;font-size:var(--t-l);line-height:1;padding:0 4px}
.gk-notizen .notiz button:hover,.gk-notizen .notiz button.scharf{color:var(--krit);font-size:var(--t-s)}
.gk-notiz-feld{margin-top:8px;min-height:32px;padding:8px 12px;font-size:var(--t-s)}
.gk-fuss{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px var(--gk-x) 12px calc(var(--gk-x) + 4px);border-top:1px solid var(--linie);margin-top:auto}
.gk-fuss .rechts{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.gk-fuss .knopf.klein{min-height:26px}
.schublade .gk-kopf,.schublade .gk-daten,.schublade .gk-teil,.schublade .gk-block,.schublade .gk-fuss{padding-inline:0}
.schublade .gk-daten{border-top:0;padding-top:0}
.schublade .gk-teil{padding-top:0}
.schublade .gk-fuss{border-top:0;padding-top:0}
.treffer-tmdb{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:12px;padding:12px 0;border-top:1px solid var(--linie);align-items:start}
.treffer-tmdb img,.treffer-tmdb .platz{width:62px;height:93px;border-radius:var(--r-s);object-fit:cover;background:var(--flaeche3)}
.treffer-tmdb p{font-size:var(--t-s);color:var(--text2);margin-top:4px}
.treffer-tmdb.aktuell{background:var(--akzent-tief);border-radius:var(--r-s);padding:12px}
/* ---------------------------------------------------------------- Inventar: Facetten, Wand, Liste */
.werkzeuge{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:var(--s3)}
.werkzeuge .rechts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.werkzeuge select.feld{width:auto}
.aktivfilter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:30px}
.aktivfilter .treffer{font-size:var(--t-s);color:var(--text3);margin-left:4px}
.inv-aufbau{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.inv-aufbau.mit-facetten{grid-template-columns:240px minmax(0,1fr)}
.facetten{position:sticky;top:calc(var(--klebe-oben) + var(--s4));align-self:start;border:1px solid var(--linie);border-radius:var(--r-l);background:var(--flaeche);padding:8px 0;max-height:calc(100vh - var(--band) - 40px);overflow-y:auto}
body.ohne-band .facetten{top:14px;max-height:calc(100vh - 40px)}
.facetten details{border-top:1px solid var(--linie)}
.facetten details:first-child{border-top:0}
.facetten summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:var(--t-m);font-weight:500}
.facetten summary::-webkit-details-marker{display:none}
.facetten summary small{margin-left:auto;font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);font-weight:400}
.facetten summary svg{width:12px;height:12px;stroke:var(--text3);fill:none;stroke-width:2;transition:transform .15s}
.facetten details[open] summary svg{transform:rotate(180deg)}
.facetten .werte{padding:0 8px 8px}
.facette{display:flex;align-items:center;gap:8px;width:100%;padding:4px 8px;border-radius:var(--r-s);background:none;border:0;text-align:left;font-size:var(--t-s);color:var(--text2);cursor:pointer;min-height:30px}
.facette:hover{background:var(--flaeche3);color:var(--text)}
.facette.an{color:var(--text)}
.facette.an .kaestchen{background:var(--text);border-color:var(--text)}
.facette.an .kaestchen svg{opacity:1}
.facette .kaestchen{width:15px;height:15px;border:1px solid var(--linie3);border-radius:var(--r-xs);display:grid;place-items:center;flex:none}
.facette .kaestchen svg{width:10px;height:10px;stroke:#000;fill:none;stroke-width:2.6;opacity:0}
.facette .name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.facette small{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.facetten .mehr{display:block;width:100%;background:none;border:0;color:var(--text3);font-size:var(--t-xs);padding:4px 8px;text-align:left;cursor:pointer}
.facetten .mehr:hover{color:var(--text)}
.facetten .suche{margin:0 8px 8px}
.facetten .suche input{width:100%;background:var(--grund);border:1px solid var(--linie2);border-radius:var(--r-s);padding:4px 8px;font-size:var(--t-s);color:var(--text)}
.facetten .suche input:focus{border-color:var(--akzent2);outline:none;box-shadow:0 0 0 1px var(--akzent2)}
.wand{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:var(--s4) 12px}
.wand.kompakt{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s3) var(--s2)}
/* I-09 (S5b): am Handy traf "Kompakt" dieselben drei Spalten wie "Poster" - jetzt vier Karten je Zeile (rund 88 px) */
@media (max-width:820px){.wand.kompakt{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3) var(--s2)}}
.wand .tk{content-visibility:auto;contain-intrinsic-size:auto 280px}
.nachladen{display:flex;justify-content:center;padding:32px 0;color:var(--text3);font-size:var(--t-s)}
.miniposter{width:28px;height:42px;border-radius:var(--r-xs);object-fit:cover;vertical-align:middle;margin-right:12px;background:var(--flaeche3)}
.fussnote{margin-top:24px;font-size:var(--t-s);color:var(--text3);max-width:90ch}
.technik-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.technik-karte{display:flex;flex-direction:column;gap:4px;padding:12px 16px;border:1px solid var(--linie);border-radius:var(--r-m);background:var(--flaeche);text-decoration:none;color:inherit;min-height:88px}
.technik-karte:hover{border-color:var(--linie3)}
.technik-karte b{font-family:var(--kond);font-size:var(--t-2xl);font-weight:500;line-height:1}
.technik-karte b small{font-family:var(--sans);font-size:var(--t-s);color:var(--text3);font-weight:400;margin-left:4px}
.technik-karte span{font-size:var(--t-m)}
.technik-karte small.was{font-size:var(--t-s);color:var(--text3)}
.technik-karte.krit b{color:var(--krit)}.technik-karte.warn b{color:var(--warn)}.technik-karte.ok b{color:var(--ok)}
/* ---------------------------------------------------------------- Bibliothek */
.bib-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:var(--s4)}
.bib-kopf h1{font-family:var(--kond);font-weight:500;font-size:var(--t-3xl);line-height:1.05;letter-spacing:-.01em}
.bib-kopf h1 em{font-style:normal;color:var(--text3)}
.bib-kopf .stand{font-size:var(--t-s);color:var(--text2);margin-top:8px}
.bib-reiter{margin-bottom:24px}
.sammlungen-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.personen-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.regal-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:var(--s4) 12px}
.regalseite-kopf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.verlauf-tabelle td:first-child{width:36px}
/* ---------------------------------------------------------------- Docs */
.docs{display:grid;grid-template-columns:230px minmax(0,1fr) 200px;gap:32px;align-items:start}
.docs-nav{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;padding-right:8px}
.docs-nav .gruppe{margin:16px 0 4px}
.docs-nav .gruppe:first-child{margin-top:0}
.docs-nav a{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:8px 12px;border-radius:var(--r-s);font-size:var(--t-s);color:var(--text2);text-decoration:none}
.docs-nav a:hover{background:var(--flaeche2);color:var(--text)}
.docs-nav a.an{background:var(--flaeche3);color:var(--text)}
.docs-nav a.fehlt{color:var(--text3)}
.docs-nav a small{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.docs-nav .suchfeld{margin-bottom:12px;min-height:36px}
.docs-nav .suchfeld input{padding:8px 0;font-size:var(--t-m)}
.docs-text{max-width:76ch;font-size:var(--t-l);line-height:1.65;color:var(--text-lesen)}
.docs-text>*+*{margin-top:16px}
.docs-text h1{font-family:var(--kond);font-weight:500;font-size:var(--t-3xl);line-height:1.08;letter-spacing:-.01em;color:var(--text);margin-bottom:8px}
.docs-text h2{font-family:var(--kond);font-weight:500;font-size:var(--t-2xl);line-height:1.15;color:var(--text);margin-top:32px;scroll-margin-top:24px}
.docs-text h3{font-size:var(--t-l);font-weight:600;color:var(--text);margin-top:24px;scroll-margin-top:24px}
.docs-text h4{font-size:var(--t-m);font-weight:600;color:var(--text);margin-top:16px}
.docs-text p{margin-top:12px}
.docs-text ul,.docs-text ol{padding-left:24px;margin-top:8px;display:grid;gap:4px}
.docs-text li>ul{margin-top:4px}
.docs-text code{font-family:var(--mono);font-size:.88em;background:var(--flaeche2);border:1px solid var(--linie);border-radius:var(--r-xs);padding:0 4px;color:var(--text)}
.docs-text pre{font-family:var(--mono);font-size:var(--t-s);line-height:1.5;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-m);padding:12px 16px;overflow-x:auto;color:var(--text)}
.docs-text pre code{background:none;border:0;padding:0}
.docs-text table{border-collapse:collapse;width:100%;font-size:var(--t-m);margin-top:12px}
.docs-text th{text-align:left;font-weight:500;font-size:var(--t-s);color:var(--text3);padding:8px 12px;border-bottom:1px solid var(--linie2)}
.docs-text td{padding:8px 12px;border-bottom:1px solid var(--linie);vertical-align:top}
.docs-text td:first-child{color:var(--text);font-weight:500}
.docs-text blockquote{border-left:3px solid var(--linie3);padding-left:16px;color:var(--text2)}
.docs-text a{color:var(--akzent)}
.docs-text hr{border:0;border-top:1px solid var(--linie2);margin-top:24px}
.docs-text strong{color:var(--text);font-weight:600}
.docs-text mark{background:var(--warn-tief);color:var(--warn-text);border-radius:var(--r-xs);padding:0 4px}
.docs-meta{display:flex;gap:8px 16px;flex-wrap:wrap;font-size:var(--t-s);color:var(--text3);margin-bottom:16px}
.docs-toc{position:sticky;top:20px;font-size:var(--t-s)}
.docs-toc b{display:block;font-weight:500;color:var(--text3);margin-bottom:8px;font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono)}
.docs-toc a{display:block;padding:4px 0 4px 12px;border-left:1px solid var(--linie2);color:var(--text2);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docs-toc a.h3{padding-left:24px;color:var(--text3)}
.docs-toc a:hover,.docs-toc a.an{color:var(--text);border-left-color:var(--text)}
.docs-blaettern{display:flex;justify-content:space-between;gap:12px;margin-top:48px;padding-top:16px;border-top:1px solid var(--linie2)}
.docs-blaettern a{text-decoration:none;color:var(--text2);font-size:var(--t-s);max-width:48%}
.docs-blaettern a:hover{color:var(--text)}
.docs-blaettern small{display:block;color:var(--text3);font-size:var(--t-xs)}
.docs-treffer{display:grid;gap:8px}
.docs-treffer a{display:block;padding:8px 12px;border-radius:var(--r-s);text-decoration:none;background:var(--flaeche2)}
.docs-treffer a b{font-weight:500;display:block}
.docs-treffer a small{color:var(--text3);font-size:var(--t-s)}
.docs-uebersicht{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.docs-uebersicht a{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--linie);border-radius:var(--r-m);background:var(--flaeche);text-decoration:none;color:inherit;min-height:96px}
.docs-uebersicht a:hover{border-color:var(--linie3)}
.docs-uebersicht a b{font-weight:500}
.docs-uebersicht a small{color:var(--text3);font-size:var(--t-s);line-height:1.45}
.docs-uebersicht a .gruppe{margin:0 0 4px}
/* DOC-03 (S5b P2): wo die Spalte rechts fehlt (bis 1250 px), steht das Inhaltsverzeichnis zugeklappt ueber dem Text */
.docs-toc-klapp{display:none;border:1px solid var(--linie);border-radius:var(--r-m);background:var(--flaeche);padding:var(--s2) var(--s3);font-size:var(--t-s)}
.docs-toc-klapp summary{cursor:pointer;color:var(--text2)}
.docs-toc-klapp nav{display:flex;flex-direction:column;margin-top:var(--s2)}
.docs-toc-klapp a{padding:var(--s1) 0 var(--s1) var(--s3);border-left:1px solid var(--linie2);color:var(--text2);text-decoration:none}
.docs-toc-klapp a.h3{padding-left:var(--s5);color:var(--text3)}
.docs-toc-klapp a:hover,.docs-toc-klapp a.an{color:var(--text);border-left-color:var(--text)}
@media (max-width:1250px){.docs-toc-klapp{display:block}}
/* ---------------------------------------------------------------- Sammlungen (16.09.2026): Reihen mit Teilen, Werkschauen, Jahrzehnte als Saeulen, Genres mit Anteil */
.segment.modus button,.segment.gesehen button{padding:4px 12px;white-space:nowrap}
.reihe-buehne{position:relative;display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.4fr);gap:24px;align-items:center;min-height:270px;border-radius:var(--r-l);overflow:hidden;background:var(--flaeche);isolation:isolate;padding:32px;margin-bottom:var(--s6)}
.reihe-buehne .collage{position:absolute;inset:0;z-index:-1;display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:2px}
.reihe-buehne .collage img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s}
.reihe-buehne .collage img:first-child{grid-row:span 2}
.reihe-buehne .collage img.da{opacity:.62}
.reihe-buehne::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.4) 45%,rgba(0,0,0,.5)),linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.05) 70%)}
.reihe-buehne .text{min-width:0}
.reihe-buehne .art{font-size:var(--t-s);color:var(--text2)}
.reihe-buehne h2{font-family:var(--kond);font-weight:500;font-size:clamp(26px,3.2vw,36px);line-height:1.02;letter-spacing:-.012em;margin-top:4px;text-wrap:balance}
.reihe-buehne .fort{display:flex;align-items:center;gap:8px;font-size:var(--t-s);color:var(--text2);margin-top:12px}
.reihe-buehne .fort .balken{width:150px;height:5px;flex:none}
.reihe-buehne .knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.reihe-buehne .teile{display:flex;gap:8px;overflow-x:auto;padding:4px 4px 8px;scrollbar-width:none;justify-content:flex-end}
.reihe-buehne .teile::-webkit-scrollbar{display:none}
.reihe-buehne .teil{position:relative;flex:none;width:92px;aspect-ratio:2/3;border-radius:var(--r-s);overflow:hidden;background:var(--flaeche3);box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);transition:transform .2s}
.reihe-buehne .teil:hover{transform:translateY(-4px)}
.reihe-buehne .teil img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s}
.reihe-buehne .teil img.da{opacity:1}
.reihe-buehne .teil.gesehen img.da{opacity:.45}
.reihe-buehne .teil .nr{position:absolute;left:6px;top:6px;font-family:var(--mono);font-size:var(--t-xs);background:rgba(0,0,0,.65);border-radius:var(--r-xs);padding:0 4px}
.reihe-buehne .teil .haken{position:absolute;right:6px;bottom:6px;width:20px;height:20px;border-radius:50%;background:var(--ok);color:#000;display:grid;place-items:center}
.reihe-buehne .teil .haken svg{width:12px;height:12px;stroke:#000;fill:none;stroke-width:2.4}
.reihe-buehne .platz,.reihen-karte .platz{display:grid;place-items:center;width:100%;height:100%;font-family:var(--kond);color:var(--text3);font-size:var(--t-xl)}
.reihen-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.reihen-karte{display:block;border-radius:var(--r-m);overflow:hidden;background:var(--flaeche);text-decoration:none;color:inherit;min-width:0;outline-offset:3px;border:1px solid transparent}
.reihen-karte:hover{border-color:var(--linie2)}
.reihen-karte .collage{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:2px;aspect-ratio:21/9;background:var(--flaeche2)}
.reihen-karte .collage img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s}
.reihen-karte .collage img:first-child{grid-row:span 2}
.reihen-karte .collage.eins{grid-template-columns:1fr;grid-template-rows:1fr}
.reihen-karte .collage.zwei{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.reihen-karte .collage.zwei img:first-child{grid-row:auto}
.reihen-karte .collage img.da{opacity:.85}
.reihen-karte:hover .collage img.da{opacity:1}
.reihen-karte .unten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:12px}
.reihen-karte .teile{display:flex;gap:4px}
.reihen-karte .teil{width:26px;aspect-ratio:2/3;border-radius:var(--r-xs);overflow:hidden;background:var(--flaeche3);flex:none}
.reihen-karte .teil img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}
.reihen-karte .teil img.da{opacity:1}
.reihen-karte .teil.gesehen{outline:1px solid var(--ok);outline-offset:-1px}
.reihen-karte .teil.gesehen img.da{opacity:.5}
.reihen-karte .drin{min-width:0}
.reihen-karte .drin b{display:block;font-family:var(--kond);font-weight:600;font-size:var(--t-l);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reihen-karte .drin small{display:block;font-size:var(--t-s);color:var(--text2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.werk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.werk{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px;border-radius:var(--r-m);text-decoration:none;color:inherit;min-width:0;border:1px solid transparent}
.werk:hover{background:var(--flaeche2);border-color:var(--linie2)}
.werk .rund{width:52px;height:52px;border-radius:50%;background:var(--flaeche3);border:1px solid var(--linie2);overflow:hidden;display:grid;place-items:center;font-family:var(--kond);font-size:var(--t-l);color:var(--text3)}
.werk .rund img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}
.werk .rund img.da{opacity:1}
.werk .drin b{display:block;font-weight:500;font-size:var(--t-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.werk .drin small{display:block;font-size:var(--t-s);color:var(--text3);margin-top:4px}
.werk .faecher{display:flex}
.werk .faecher img{width:30px;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-xs);background:var(--flaeche3);box-shadow:-3px 0 6px rgba(0,0,0,.5);opacity:0;transition:opacity .3s}
.werk .faecher img.da{opacity:1}
.werk .faecher img+img{margin-left:-8px}
.werk:hover .faecher img+img{margin-left:4px}
.jahrzehnte{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(64px,1fr);gap:8px;align-items:end;overflow-x:auto;padding-bottom:4px}
.dekade{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:inherit;min-width:0;padding:4px;border-radius:var(--r-s)}
.dekade .saeule{display:flex;align-items:flex-end;width:100%;height:120px}
.dekade .saeule i{display:block;width:100%;height:var(--h);background:var(--flaeche3);border-radius:var(--r-xs);transition:background .15s}
.dekade:hover .saeule i{background:var(--akzent)}
.dekade b{font-family:var(--kond);font-weight:500;font-size:var(--t-xl);line-height:1;letter-spacing:-.01em}
.dekade small{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.balken-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px 32px}
.balken-liste a{display:grid;grid-template-columns:130px minmax(0,1fr) 36px;gap:12px;align-items:center;padding:4px 8px;border-radius:var(--r-s);text-decoration:none;color:var(--text2);font-size:var(--t-s);min-width:0}
.balken-liste a:hover{background:var(--flaeche2);color:var(--text)}
.balken-liste .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.balken-liste .spur{height:6px;background:var(--flaeche2);border-radius:var(--r-xs);overflow:hidden}
.balken-liste .spur i{display:block;height:100%;background:var(--flaeche3);border-radius:var(--r-xs)}
.balken-liste a:hover .spur i{background:var(--akzent)}
.balken-liste small{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);text-align:right}
/* ---------------------------------------------------------------- Umgebungslicht (16.09.2026)
Zeigt man auf einen Titel, legt sich sein Farbschema (Plex-Farbtoene) leise ueber den Seitenhintergrund - von der Karte aus. */
#ambient{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .7s ease;
background:radial-gradient(72vw 62vh at var(--amx,50%) var(--amy,50%),color-mix(in srgb,var(--am1,#000) 62%,transparent) 0%,transparent 70%),
radial-gradient(52vw 52vh at calc(var(--amx,50%) + 24vw) calc(var(--amy,50%) - 12vh),color-mix(in srgb,var(--am2,#000) 48%,transparent) 0%,transparent 70%),
radial-gradient(44vw 44vh at calc(var(--amx,50%) - 22vw) calc(var(--amy,50%) + 16vh),color-mix(in srgb,var(--am3,#000) 42%,transparent) 0%,transparent 70%)}
#ambient.an{opacity:.42}
.rahmen{position:relative;z-index:1}
/* ---------------------------------------------------------------- Feed: Slots im Takt (Bibliothek) */
.feed{display:flex;flex-direction:column;gap:var(--s6);margin-top:24px}
.slot{min-width:0}
.slot-kopf{display:flex;align-items:baseline;gap:8px 12px;margin-bottom:12px;flex-wrap:wrap}
.slot-kopf h2{font-family:var(--kond);font-weight:500;font-size:var(--t-xl);letter-spacing:-.005em}
.slot-kopf .grund{font-size:var(--t-s);color:var(--text3)}
.slot-kopf .rechts{margin-left:auto;display:flex;gap:8px;align-items:center}
.gruende{list-style:none;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--t-s);color:var(--text2);margin:0;padding:0}
.gruende li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.gruende li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--akzent);flex:none}
.sicher{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);color:var(--ok);border:1px solid var(--ok-rand);background:var(--ok-tief);border-radius:var(--r-p);padding:0 8px;white-space:nowrap}
.buehne.heute .text{--text-breite:720px}
.buehne .gruende{margin-top:4px}
/* Solo: ein Titel gross. Variante a: Poster und Text; Variante b: nur Hintergrund und Logo, Text links */
.solo-huelle{position:relative}
.solo{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:end;min-height:340px;border-radius:var(--r-l);overflow:hidden;background:var(--flaeche);text-decoration:none;color:inherit;padding:32px;isolation:isolate;outline-offset:3px}
.solo .hg{position:absolute;inset:0;z-index:-1}
.solo .hg img{width:100%;height:100%;object-fit:cover;object-position:center 25%;opacity:0;transition:opacity .5s,transform .6s ease}
.solo .hg img.da{opacity:.55}
.solo:hover .hg img.da{transform:scale(1.02);opacity:.64}
.solo .hg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 44%,rgba(0,0,0,.22) 100%),linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,0) 52%)}
.solo .poster{display:block;width:200px;aspect-ratio:2/3;border-radius:var(--r-m);overflow:hidden;background:var(--flaeche3);box-shadow:0 24px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06)}
.solo .poster img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s}
.solo .poster img.da{opacity:1}
.solo .drin{display:flex;flex-direction:column;gap:8px;min-width:0;padding-bottom:48px}
.solo .logo{max-width:min(380px,70%);max-height:110px;align-self:flex-start;filter:drop-shadow(0 4px 20px rgba(0,0,0,.7))}
.solo h3{font-family:var(--kond);font-weight:500;font-size:clamp(26px,3.4vw,36px);line-height:1.02;letter-spacing:-.012em;text-wrap:balance}
.solo .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--t-s);color:var(--text2)}
.solo .meta b{color:var(--text);font-weight:500}
.solo p{font-size:var(--t-m);line-height:1.55;color:var(--text-lesen);max-width:62ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.solo-aktionen{position:absolute;left:264px;bottom:32px;z-index:2;display:flex;gap:8px;flex-wrap:wrap}
.slot-solo.v-b .solo{grid-template-columns:minmax(0,1fr);min-height:380px}
.slot-solo.v-b .solo .poster{display:none}
.slot-solo.v-b .solo .drin{max-width:58%}
.slot-solo.v-b .solo .hg img.da{opacity:.72}
.slot-solo.v-b .solo .hg::after{background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.1) 68%,rgba(0,0,0,.3) 100%),linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 50%)}
.slot-solo.v-b .solo-aktionen{left:32px}
.slot-solo.wette .solo .hg img.da{opacity:.6}
.wette-antwort{font-size:var(--t-s);color:var(--text2);padding:12px 0 0}
.wette-antwort b{color:var(--text);font-weight:500}
/* Blind Date: Titel und Logo bleiben verdeckt, bis aufgedeckt wird */
.slot-blind .solo .logo,.slot-blind .solo h3,.slot-blind .solo p,.slot-blind .solo .gruende{visibility:hidden}
.slot-blind.offen .solo .logo,.slot-blind.offen .solo h3,.slot-blind.offen .solo p,.slot-blind.offen .solo .gruende{visibility:visible}
.slot-blind:not(.offen) .solo .hg img.da{filter:blur(2px) saturate(1.1)}
.slot-blind .raetsel{font-family:var(--kond);font-weight:600;font-size:var(--t-2xl);letter-spacing:.08em;color:var(--text2)}
.slot-blind.offen .raetsel{display:none}
/* Paar: zwei Wege, zwei grosse Flaechen mit Rolle */
.paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.paar .spot{aspect-ratio:16/8.5}
.paar .rolle{position:absolute;left:14px;top:12px;z-index:1;font-family:var(--kond);font-weight:600;font-size:var(--t-s);letter-spacing:.04em;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-p);padding:4px 12px}
.paar .spot .gruende{font-size:var(--t-s)}
/* So viele Spalten, wie Karten da sind: der Kurator liefert einer Kurzreihe mal fuenf, mal vier Karten - ein festes Fuenferraster liess
dann rechts ein leeres Fuenftel (Eigentuemer 24.09.2026, "scaled nicht richtig bis zum Rand"). Kurzreihen haben mindestens vier Karten. */
.kurz-raster{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
.kurz-raster.vier{grid-auto-columns:minmax(0,1fr)}
.weiter-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
/* Fortsetzung wartet: Collage der Reihe, rechts der naechste Teil */
.fortsetzung{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:24px;align-items:end;min-height:250px;border-radius:var(--r-l);overflow:hidden;background:var(--flaeche);isolation:isolate;padding:32px}
.fortsetzung .collage{position:absolute;inset:0;z-index:-1;display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:2px}
.fortsetzung .collage img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s}
.fortsetzung .collage img:first-child{grid-row:span 2}
.fortsetzung .collage img.da{opacity:.6}
.fortsetzung::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.3) 50%,rgba(0,0,0,.5)),linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.1) 65%)}
.fortsetzung .art{font-size:var(--t-s);color:var(--text2)}
.fortsetzung .reihe-name{font-family:var(--kond);font-weight:500;font-size:var(--t-3xl);line-height:1.02;margin-top:4px;text-wrap:balance}
.fortsetzung .fort{display:flex;align-items:center;gap:8px;font-size:var(--t-s);color:var(--text2);margin-top:12px}
.fortsetzung .fort .balken{width:160px;height:5px;flex:none}
.fortsetzung .naechster{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:center;background:rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-m);padding:12px;text-decoration:none;color:inherit;min-width:0}
.fortsetzung .naechster img{width:84px;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-s);background:var(--flaeche3);display:block}
.fortsetzung .naechster b{display:block;font-family:var(--kond);font-size:var(--t-xl);font-weight:500;line-height:1.1}
.fortsetzung .naechster small{display:block;color:var(--text2);font-size:var(--t-s);margin-top:4px}
.fortsetzung .naechster .knopf{margin-top:8px}
.fortsetzung .naechster:hover{border-color:rgba(255,255,255,.3)}
/* Das ganze Banner fuehrt zur Reihe: der Link "Ganze Reihe" ist ueber die Flaeche gestreckt; die Karte "Als Naechstes" liegt darueber und behaelt ihr eigenes Ziel */
.fortsetzung .fort a.knopf::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.fortsetzung .naechster{position:relative;z-index:2}
.fortsetzung{transition:box-shadow .15s}
.fortsetzung:has(.fort a.knopf:hover){box-shadow:0 0 0 1px rgba(255,255,255,.26)}
.fortsetzung:has(.fort a.knopf:hover) .reihe-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
/* Werkschau: Portrait und vier Poster */
.werkschau{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:center}
.werkschau .person{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-decoration:none;color:inherit}
.werkschau .person img,.werkschau .person .rund{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--flaeche3);border:2px solid rgba(255,255,255,.15);display:grid;place-items:center;font-family:var(--kond);font-size:var(--t-2xl);color:var(--text3)}
.werkschau .person b{font-family:var(--kond);font-weight:500;font-size:var(--t-2xl);line-height:1.05}
.werkschau .person small{font-size:var(--t-s);color:var(--text2)}
.werkschau .poster-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:760px}
/* Pfad: Schritte mit Verbindungslinie */
.pfad{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,190px);gap:16px;align-items:start;overflow-x:auto;padding:4px 4px 8px;scrollbar-width:none}
.pfad::-webkit-scrollbar{display:none}
.pfad .schritt{position:relative;min-width:0}
.pfad .schritt .nr{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);margin-bottom:8px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.pfad .schritt .nr::after{content:"";flex:1;height:1px;background:var(--linie3)}
.pfad .schritt:last-child .nr::after{display:none}
.pfad .schritt.gesehen .tk{opacity:.45}
.pfad .schritt.naechster .nr{color:var(--akzent)}
.pfad .schritt.naechster .tk .bild{box-shadow:0 0 0 2px var(--akzent)}
/* Zeitkapsel: ein Jahr gross */
.zeitkapsel{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:center}
.zeitkapsel .jahr{font-family:var(--kond);font-weight:600;font-size:96px;line-height:.9;letter-spacing:-.04em;color:var(--text3)}
.zeitkapsel .jahr small{display:block;font-family:var(--sans);font-size:var(--t-s);letter-spacing:0;color:var(--text2);margin-top:8px;font-weight:400}
.zeitkapsel .kurz-raster{grid-auto-columns:minmax(0,1fr)}
/* Rueckblick */
.rueckblick{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:center;border:1px solid var(--linie);border-radius:var(--r-l);padding:24px 32px;background:var(--flaeche)}
.rueckblick h2{font-family:var(--kond);font-weight:500;font-size:var(--t-2xl);line-height:1.05}
.rueckblick .zahlen{display:flex;gap:24px;flex-wrap:wrap;margin-top:12px}
.rueckblick .zahlen b{display:block;font-family:var(--kond);font-weight:500;font-size:var(--t-3xl);line-height:1}
.rueckblick .zahlen span{font-size:var(--t-s);color:var(--text3)}
.rueckblick .poster-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.feed-ende{border-top:1px solid var(--linie2);padding-top:24px;color:var(--text2);font-size:var(--t-m)}
.feed-ende b{color:var(--text);font-weight:500}
.feed-ende .chips{margin-top:12px}
.feed-laden{display:flex;justify-content:center;padding:16px;color:var(--text3);font-size:var(--t-s);min-height:52px}
.feed-nachricht{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--linie);border-radius:var(--r-m);background:var(--flaeche);font-size:var(--t-s);color:var(--text2)}
/* ---------------------------------------------------------------- Schnellzugriff in der Leiste */
.schnell{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linie);width:100%;overflow-y:auto;min-height:0;flex:0 1 auto;scrollbar-width:none}
.schnell::-webkit-scrollbar{display:none}
/* R-03: ohne Links kein Block (sobald der Stift ins Kontomenue gewandert ist, P2) */
.schnell:empty{display:none}
.schnell a{width:64px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:var(--r-m);text-decoration:none;color:var(--text3);font-size:var(--t-xs);line-height:1.15;transition:color .15s,background .15s}
.schnell a:hover,.schnell a:focus-visible{color:var(--text);background:var(--flaeche2)}
.sz-bild{--sz-farbe:#9ccaff;width:28px;height:28px;border-radius:var(--r-s);display:grid;place-items:center;flex:none;background:var(--flaeche2);border:1px solid var(--linie2);overflow:hidden}
.sz-bild img{width:20px;height:20px;object-fit:contain;display:block}
.sz-bild b{font-family:var(--kond);font-size:var(--t-s);font-weight:600;letter-spacing:.02em;color:var(--sz-farbe)}
.sz-bild.ohne{border-color:color-mix(in srgb,var(--sz-farbe) 45%,transparent);background:color-mix(in srgb,var(--sz-farbe) 12%,transparent)}
.schnell a:hover .sz-bild{border-color:var(--linie3)}
.sz-name{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schnell button{width:30px;height:24px;margin-top:4px;border-radius:var(--r-s);border:1px dashed var(--linie2);background:none;color:var(--text3);cursor:pointer;display:grid;place-items:center;flex:none}
.schnell button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.schnell button:hover{color:var(--text);border-color:var(--linie3)}
.sz-posten .n{display:flex;align-items:center;gap:8px}
.sz-posten .m{padding-left:32px}
.sz-posten.an{background:var(--flaeche2);border-radius:var(--r-s);padding-inline:8px}
.sz-bild.klein{width:24px;height:24px;border-radius:var(--r-s)}
.sz-bild.klein img{width:15px;height:15px}
.sz-bild.klein b{font-size:var(--t-xs)}
.mobilnav{display:none}
/* ---------------------------------------------------------------- Breiten
Drei Umbruchpunkte (S5b): 820 Handy, 1250 schmaler PC (Seitenspalten klappen, Raster werden schmaler), 2200 breit. Die Hoechstbreite
(--inhalt-max) haelt den Inhalt ab 1720 px zusammen - das Modulraster bleibt deshalb auch auf breiten Schirmen bei zwoelf Spalten
(bis 25.09.2026: sechzehn ab 2200 px, in einer Spalte von 2.400 px). */
@media (max-width:1250px){
.cockpit{grid-template-columns:repeat(6,minmax(0,1fr))}
.m-drittel{grid-column:span 3}
.m-halb,.m-voll,.m-zweidrittel{grid-column:span 6}
.stufen-mini{grid-template-columns:repeat(4,minmax(0,1fr))}
.docs{grid-template-columns:210px minmax(0,1fr)}
.docs-toc{display:none}
.samm-raster.vier{grid-template-columns:repeat(3,minmax(0,1fr))}
.lage{grid-template-columns:1fr}
.strecke{grid-template-columns:repeat(4,minmax(0,1fr))}
.stufe:nth-child(4){border-right:0}.stufe:nth-child(4)::after{display:none}
.stufe:nth-child(n+5){border-top:1px solid var(--linie)}
.raster3{grid-template-columns:1fr 1fr}
.dgitter{grid-template-columns:1fr}
.grosskarten{grid-template-columns:1fr}
.inv-aufbau.mit-facetten{grid-template-columns:minmax(0,1fr)}
/* Unterhalb der Leistenbreite oeffnet der Filter-Knopf die Facetten in der Seitenleiste */
.inv-aufbau>.facetten{display:none}
.hinweise{max-width:100%}
}
/* Auftrag 34: als App vom Home-Bildschirm waechst der Kopf um die Statusleiste; Band und klebende Koepfe rechnen mit --mobilkopf mit.
Die :root-Zeile bleibt die erste im Block: tests/js/leiste.test.mjs verankert den Handy-Block daran. */
@media (max-width:820px){
:root{--band:40px;--seitenrand:16px;--seite-oben:var(--s4);--mobilkopf:calc(44px + env(safe-area-inset-top,0px));--klebe-oben:calc(var(--mobilkopf) + var(--band))}
body.ohne-band{--klebe-oben:var(--mobilkopf)}
body{font-size:var(--t-m)}
.cockpit{grid-template-columns:minmax(0,1fr)}
.cockpit:not(.ueb)>.modul{grid-column:1 / -1!important}
.teilung{grid-template-columns:minmax(0,1fr)}
.teilung>div+div{border-left:0;padding-left:0;border-top:1px solid var(--linie);padding-top:12px;margin-top:12px}
.hinweise{margin-left:0;justify-content:flex-start;width:100%;min-width:0}
.pille{max-width:100%}
.b-kopf h1,.kopf h1,.bib-kopf h1,.lage .satz,.mosaik-buehne .text h1{font-size:var(--t-2xl)}
.stufen-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
.plattenzeile{grid-template-columns:minmax(0,1fr) auto}
.plattenzeile .balken{grid-column:1 / -1;grid-row:2}
.rahmen{grid-template-columns:1fr}
.leiste{display:none}
.band{padding-inline:16px;gap:8px}
.band-name,.band-werte span:nth-child(n+2){display:none}
/* Auf dem Handy traegt ein schmaler Kopf Marke, Bereich, Suche und Verbindung - auf jeder Seite */
.mobilkopf{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:21;height:var(--mobilkopf);padding:env(safe-area-inset-top,0px) 12px 0 16px;background:rgba(0,0,0,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.mobilkopf .marke{margin:0;font-size:var(--t-m)}
.mobilkopf .bereich{font-size:var(--t-s);color:var(--text3);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobilkopf .live{margin-right:4px}
.band{top:var(--mobilkopf)}
.unternav{top:var(--klebe-oben)}
.hinweisband{padding-inline:16px}
.seite{padding:var(--seite-oben) var(--seite-x) calc(var(--mobilnav) + var(--s6))}
.seite:has(>.st){padding-top:14px}
.raster2,.raster3{grid-template-columns:minmax(0,1fr)}
.lage-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.netz svg.karte{display:none}
.netzliste{display:block}
.netzliste>div{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--linie)}
.netzliste>div:first-child{border-top:0}
.netzliste i{align-self:stretch;border-radius:var(--r-xs)}
.platte{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
.platte .balken{grid-column:1/-1;grid-row:2}
.strecke{grid-template-columns:1fr}
.stufe{border-right:0;border-top:1px solid var(--linie)}.stufe:first-child{border-top:0}.stufe::after{display:none}
.ereignis{grid-template-columns:44px minmax(0,1fr);gap:4px 12px}
.ereignis .akteur,.ereignis .was,.ereignis .aktionen{grid-column:2}
.bahn,.bahn.leer-bahn{flex:0 0 100%}
.bahnen{scroll-snap-type:x mandatory}
.bahn-wahl{display:flex;margin-bottom:12px}
.wand{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:16px 8px}
.werkzeuge .rechts,.plan-werkzeug .rechts{margin-left:0}
/* Ziele am Finger: alles, was klein ist, wird 36 hoch */
.chip,.knopf.klein,.ik.klein{min-height:var(--feld)}
.ik.klein{width:var(--feld);height:var(--feld)}
.segment button,.umschalter button{min-height:calc(var(--feld) - 2px)}
.facette{min-height:var(--feld)}
.aktivfilter,.chips.rollbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.aktivfilter::-webkit-scrollbar,.chips.rollbar::-webkit-scrollbar{display:none}
.detail{margin:calc(-1 * var(--seite-oben) - var(--s1)) calc(-1 * var(--seite-x)) 0}
.kinobuehne{height:46vh}
.kinobuehne::after{background:linear-gradient(0deg,#000 16%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.55) 100%)}
.detailinhalt{padding:16px var(--seite-x) calc(var(--mobilnav) + var(--s7))}
.dkopf{grid-template-columns:minmax(0,1fr);gap:16px;min-height:0;padding-top:10vh}
.dkopf>div{min-width:0}
.gcover{width:44%;max-width:190px}
.dkopf h1{font-size:var(--t-3xl)}
.dlogo{max-height:90px}
.staffelblock>summary{grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:"name knopf" "folgen knopf" "technik technik" "ton ton";gap:4px 12px}
.staffelblock summary .sb-technik{white-space:normal}
.folge-zeile{grid-template-columns:36px minmax(0,1fr)}
.folge-zeile .rechts{grid-column:2;justify-content:flex-start}
.buehne{min-height:min(66vh,520px)}
.buehne .text{padding:24px 16px 48px;max-width:100%}
.buehne .logo{max-width:70%;max-height:80px}
.buehne .beschreibung{display:none}
.buehne .punkte{display:flex;right:16px;bottom:16px}
.buehne .vorschau,.buehne .pfeil{display:none}
.spots{display:grid;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x proximity;padding:0 0 8px;scrollbar-width:none}
.spots::-webkit-scrollbar{display:none}
.samm-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
.samm .drin b,.samm.gross .drin b{font-size:var(--t-l)}
.schau{min-height:170px;grid-template-columns:minmax(0,1fr)}
.schau .text{padding:16px 16px 8px}
.schau .cta{padding:0 16px 16px}
.schau h2{font-size:var(--t-2xl)}
.reihe.breit{--kw:236px}
.feed{gap:var(--s5)}
.solo,.slot-solo.v-b .solo{grid-template-columns:1fr;min-height:0;padding:16px}
.solo .poster{width:110px}
.solo .drin,.slot-solo.v-b .solo .drin{padding-bottom:0;max-width:none}
.solo-aktionen,.slot-solo.v-b .solo-aktionen{position:static;margin-top:12px}
.solo h3{font-size:var(--t-2xl)}
.paar{grid-template-columns:1fr}
.kurz-raster,.kurz-raster.vier,.zeitkapsel .kurz-raster,.weiter-raster{display:grid;grid-auto-flow:column;grid-auto-columns:70%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:none}
.kurz-raster::-webkit-scrollbar,.weiter-raster::-webkit-scrollbar{display:none}
.fortsetzung{grid-template-columns:1fr;min-height:0;padding:16px}
.fortsetzung .reihe-name{font-size:var(--t-2xl)}
.werkschau{grid-template-columns:1fr}
.werkschau .poster-raster{max-width:none}
.zeitkapsel{grid-template-columns:1fr}
.zeitkapsel .jahr{font-size:64px}
.rueckblick{grid-template-columns:1fr;padding:16px}
#ambient{display:none}
.reihe-buehne{grid-template-columns:1fr;min-height:0;padding:16px;gap:16px}
.reihe-buehne .teile{justify-content:flex-start}
.reihe-buehne .teil{width:72px}
.reihen-raster{grid-template-columns:1fr}
.werk-raster{grid-template-columns:1fr}
.jahrzehnte{grid-auto-columns:64px}
.balken-liste{grid-template-columns:1fr}
.balken-liste a{grid-template-columns:104px minmax(0,1fr) 32px}
.segment.modus button,.segment.gesehen button{padding:4px 8px;font-size:var(--t-s)}
.reihe{--kw:124px;gap:8px}
.reihe.weiter{--kw:250px}
.reihe.quer{--kw:230px}
.reihe-pfeil{display:none}
.sa-kopf .drin{padding:48px 16px 12px}
.sa-text,.sa-block{padding-inline:16px}
.sa-aktionen{padding-inline:16px}
.formular label,.formular label.b2,.formular label.b4{grid-column:span 6}
.hilfe-raster{grid-template-columns:1fr}
.grosskarten{grid-template-columns:minmax(0,1fr)}
.gk-kopf{grid-template-columns:56px minmax(0,1fr)}
.gk-kopf img,.gk-kopf .platz{width:56px;height:84px}
.gk-aktionen{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:flex-start}
.staffel-befund{grid-template-columns:44px minmax(0,1fr)}.staffel-befund .sb-knoepfe{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
.docs{grid-template-columns:minmax(0,1fr);gap:16px}
.docs-nav{position:static;max-height:none;display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.docs-nav .gruppe{display:none}
.docs-nav a{white-space:nowrap;border:1px solid var(--linie2);border-radius:var(--r-p);padding:4px 12px}
/* DOC-02 (S5b P2): das Suchfeld steht am Handy als erstes Element der Leiste - vorher war es verborgen, die Docs nur ueber die Palette durchsuchbar */
.docs-nav .suchfeld{flex:none;width:min(240px,62vw);margin-bottom:0}
.mobilnav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(0,0,0,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linie);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
.mobilnav a,.mobilnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px 0;font-size:var(--t-xs);line-height:1.4;color:var(--text3);text-decoration:none;background:none;border:0;min-height:var(--s7)}
.mobilnav .an{color:var(--text)}.mobilnav .an svg{stroke:var(--akzent)}
.schublade{width:100vw;border-left:0}
.toasts{left:16px;right:16px;bottom:calc(var(--mobilnav) + var(--s3));align-items:stretch}
.k-form{grid-template-columns:1fr 90px}.k-form .breit{grid-column:1 / -1;grid-row:1}.k-zeilen .zeile{flex-direction:column;gap:4px}.k-zeilen .zeile>span:last-child{text-align:left}.k-dateien th:first-child{width:38%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ---------------------------------------------------------------- Lebendige Buehne (16.09.2026): mehrere Titel, Wechsel mit Ueberblendung */
.buehne .hintergrund img.ebene{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease,transform 12s ease-out;transform:scale(1.04)}
.buehne .hintergrund img.ebene.an.da{opacity:.9;transform:scale(1)}
.buehne .text{transition:opacity .26s ease,transform .26s ease}
.buehne .text.weg{opacity:0;transform:translateY(6px)}
.buehne .vorschau button{position:relative}
.buehne .vorschau button i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--text);display:block}
.buehne .vorschau button.an i{animation:fuellen var(--takt,9s) linear forwards}
.buehne:hover .vorschau button.an i,.buehne:focus-within .vorschau button.an i{animation-play-state:paused}
@keyframes fuellen{from{width:0}to{width:100%}}
/* Hochkant: Textspalte und drei grosse Plakate */
.hoch{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:center}
.hoch .text h2{font-family:var(--kond);font-weight:500;font-size:var(--t-3xl);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.hoch .text .grund{display:block;font-size:var(--t-s);color:var(--text3);margin-top:8px}
.hoch .text .knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hoch .plakate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:820px}
.hoch .plakate .tk .bild{border-radius:var(--r-m);box-shadow:0 18px 44px rgba(0,0,0,.55)}
.hoch .plakate .tk b{font-size:var(--t-l);margin-top:8px;white-space:normal}
/* Mosaik: ein grosser Titel mit Personen-Chip, daneben vier Poster */
.mosaik-slot{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px}
.mosaik-slot .gross{position:relative;display:block;border-radius:var(--r-l);overflow:hidden;background:var(--flaeche);min-height:360px;text-decoration:none;color:inherit;isolation:isolate;outline-offset:3px}
.mosaik-slot .gross img.hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s,transform .6s;z-index:-1}
.mosaik-slot .gross img.hg.da{opacity:.78}
.mosaik-slot .gross:hover img.hg.da{transform:scale(1.02)}
.mosaik-slot .gross::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.12) 100%)}
.mosaik-slot .gross .drin{position:absolute;left:22px;right:22px;bottom:20px;display:flex;flex-direction:column;gap:8px}
.mosaik-slot .gross .logo{max-width:min(320px,70%);max-height:90px;align-self:flex-start;filter:drop-shadow(0 4px 18px rgba(0,0,0,.7))}
.mosaik-slot .gross h3{font-family:var(--kond);font-weight:500;font-size:var(--t-3xl);line-height:1.02}
.mosaik-slot .gross .meta{font-size:var(--t-s);color:var(--text2)}
.mosaik-slot .gross p{font-size:var(--t-m);line-height:1.5;color:var(--text-lesen);max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chip-person{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-p);padding:4px 12px 4px 4px;font-size:var(--t-s);line-height:1.15}
.chip-person img,.chip-person i{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--flaeche3);display:grid;place-items:center;font-style:normal;font-family:var(--kond);font-size:var(--t-s);color:var(--text3);flex:none}
.chip-person small{display:block;font-size:var(--t-xs);color:var(--text3)}
.mosaik-slot .klein-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
/* Magazin: grosses Plakat und Textspalte */
.magazin{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:center;padding:32px;border-radius:var(--r-l);overflow:hidden;background:var(--flaeche);isolation:isolate}
.magazin .hauch{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:0;filter:blur(28px) saturate(1.2);transform:scale(1.15);transition:opacity .8s}
.magazin .hauch.da{opacity:.22}
.magazin .plakat{display:block;aspect-ratio:2/3;border-radius:var(--r-m);overflow:hidden;background:var(--flaeche3);box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);outline-offset:3px}
.magazin .plakat img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s}
.magazin .plakat img.da{opacity:1}
.magazin .spalte{display:flex;flex-direction:column;gap:12px;min-width:0}
.magazin .logo{max-width:min(340px,70%);max-height:100px;align-self:flex-start}
.magazin h3{font-family:var(--kond);font-weight:500;font-size:clamp(26px,3.4vw,36px);line-height:1.02;letter-spacing:-.012em}
.magazin .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--t-s);color:var(--text2)}
.magazin .meta b{color:var(--text);font-weight:500}
.magazin .slogan{font-family:var(--kond);font-size:var(--t-l);color:var(--text2)}
.magazin p{font-size:var(--t-m);line-height:1.6;color:var(--text-lesen);max-width:64ch;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.magazin .besetzung-zeile{font-size:var(--t-s);color:var(--text2)}
.magazin .solo-aktionen{position:static;margin-top:8px}
/* Mehr davon: Nachbarn auf der Titelseite (Querformat mit Grund) und in der Schnellansicht (Liste zum Weiterhuepfen) */
.nachbar-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nachbarn{display:flex;flex-direction:column;gap:2px}
.nachbar{display:grid;grid-template-columns:96px minmax(0,1fr) 16px;gap:12px;align-items:center;width:100%;padding:8px;border:0;border-radius:var(--r-m);background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.nachbar:hover,.nachbar:focus-visible{background:var(--flaeche2)}
.nachbar .bild{display:block;width:96px;aspect-ratio:16/9;border-radius:var(--r-s);overflow:hidden;background:var(--flaeche3)}
.nachbar .bild img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}
.nachbar .bild img.da{opacity:1}
.nachbar b{display:block;font-weight:500;font-size:var(--t-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nachbar small{display:block;font-size:var(--t-s);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.nachbar>svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--text3)}
.sa-block h4{display:flex;align-items:baseline;gap:8px}
.d-abschnitt>header .rechts{margin-left:auto}
/* Sammlungen mit eigenem Bild aus Plex: ein Bild statt Collage */
.samm .collage.eins,.reihen-karte .collage.eins,.reihe-buehne .collage.eins,.fortsetzung .collage.eins{grid-template-columns:1fr;grid-template-rows:1fr}
.samm .collage.eins img,.reihen-karte .collage.eins img,.reihe-buehne .collage.eins img,.fortsetzung .collage.eins img{grid-row:auto}
.reihe-buehne .collage.eins img.da,.fortsetzung .collage.eins img.da{opacity:.7}
.mosaik-buehne .mosaik.eins{display:block}
.mosaik-buehne .mosaik.eins img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.mosaik-buehne .mosaik.eins img.da{opacity:.75}
/* Themenwelt und Studio: Bildwechsel im Mosaik */
.schau .mosaik .zelle{position:relative;overflow:hidden}
.schau .mosaik .zelle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.schau .mosaik .zelle img.da.an{opacity:.5}
/* Leises Treiben grosser Bilder */
@keyframes treiben{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.08) translate(-1.2%,-1.5%)}}
.solo .hg img.da,.reihe-buehne .collage img.da{animation:treiben 26s ease-in-out infinite alternate}
@media (max-width:820px){
.hoch{grid-template-columns:1fr;gap:12px}
.hoch .plakate{max-width:none;gap:8px}
.hoch .plakate .tk b{font-size:var(--t-m)}
.mosaik-slot{grid-template-columns:1fr}
.mosaik-slot .gross{min-height:260px}
.magazin{grid-template-columns:1fr;padding:16px;gap:16px}
.magazin .plakat{width:150px}
.nachbar-raster{grid-template-columns:1fr 1fr}
.buehne .vorschau{display:none}
}
/* ---------------------------------------------------------------- Runde 8 (16.09.2026): Korrekturen, Stimmung, Faecher, Streifen, Doppelseite, Zitat */
.mosaik-slot{grid-template-columns:minmax(0,1fr) 290px;align-items:stretch}
.mosaik-slot .gross{min-height:0}
.hoch .plakate{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:12px}
.stimmung{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.stimmung .etikett{font-size:var(--t-s);color:var(--text3);margin-right:4px}
/* Faecher: die Poster einer Reihe als aufgefaecherter Stapel */
.faecher{position:relative;display:flex;align-items:flex-end;justify-content:center;height:100%;padding:9% 8% 8%;min-width:0;z-index:1}
.faecher img{width:31%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-s);background:var(--flaeche3);box-shadow:0 12px 30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08);transform-origin:50% 115%;transform:rotate(var(--r,0deg)) translateY(var(--y,0));margin:0 -6.5%;opacity:0;transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.2,1)}
.faecher img.da{opacity:1}
.faecher img.gesehen{filter:saturate(.5) brightness(.6)}
.faecher img.naechster{filter:none;box-shadow:0 0 0 2px var(--akzent),0 14px 34px rgba(0,0,0,.7);z-index:1;transform:rotate(var(--r,0deg)) translateY(calc(var(--y,0) - 7%))}
a:hover .faecher img,.fortsetzung:hover .faecher img{transform:rotate(calc(var(--r,0deg) * 1.35)) translateY(calc(var(--y,0) * 1.25))}
.samm .hg,.reihen-karte .hg,.fortsetzung .hg{position:absolute;inset:0;overflow:hidden;z-index:-1}
.samm .hg img,.reihen-karte .hg img,.fortsetzung .hg img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s}
.samm .hg.weich img,.reihen-karte .hg.weich img,.fortsetzung .hg.weich img{filter:blur(26px) saturate(1.35);transform:scale(1.35)}
.samm .hg.weich img.da,.reihen-karte .hg.weich img.da,.fortsetzung .hg.weich img.da{opacity:.5}
.samm .hg.banner img.da,.reihen-karte .hg.banner img.da{opacity:.85}
.fortsetzung .hg.banner img.da{opacity:.6}
.samm{isolation:isolate}
.samm.mit-faecher{display:grid;grid-template-columns:50% minmax(0,1fr);align-items:center}
.samm.mit-faecher::after{background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.5) 50%,rgba(0,0,0,.72))}
.samm.mit-faecher .drin{position:relative;left:auto;right:auto;bottom:auto;z-index:1;padding-right:16px}
.samm.mit-faecher .drin b{white-space:normal;font-size:var(--t-xl);line-height:1.08}
.samm.gross.mit-faecher .drin b{font-size:var(--t-2xl)}
.reihen-karte{position:relative;isolation:isolate}
.reihen-karte .oben{position:relative;display:block;aspect-ratio:21/9;overflow:hidden;isolation:isolate;background:var(--flaeche2)}
.reihen-karte .oben .collage{position:absolute;inset:0}
.reihen-karte.mit-banner .oben::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 60%)}
.reihen-karte .unten{grid-template-columns:minmax(0,1fr)}
.fortsetzung.mit-faecher{grid-template-columns:minmax(190px,.7fr) minmax(0,1fr) minmax(250px,.9fr);align-items:center}
.fortsetzung .faecher{height:190px;padding:0 4%}
.fortsetzung.mit-faecher::after{background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.6) 40%,rgba(0,0,0,.5))}
/* Filmstreifen */
.streifen .filmband{position:relative;display:block;background:#050505;border-radius:var(--r-m);overflow:hidden;padding:8px 0;outline-offset:3px}
.streifen .loecher{display:block;height:10px;margin:0 8px;background:repeating-linear-gradient(90deg,transparent 0 16px,rgba(255,255,255,.26) 16px 26px,transparent 26px 42px);border-radius:var(--r-xs)}
.streifen .bilder{position:relative;display:flex;gap:8px;padding:8px;width:max-content;animation:filmband 36s ease-in-out infinite alternate}
.streifen .bilder img{width:min(34vw,400px);aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xs);background:var(--flaeche3);opacity:0;transition:opacity .5s,transform .35s ease,filter .35s ease;flex:none}
.streifen .bilder img.da{opacity:.92}
.streifen .filmband:hover .bilder img.da{opacity:1}
.streifen .bilder img.da:hover{transform:scale(1.05);filter:brightness(1.1);z-index:1;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.streifen .filmband:hover .loecher{opacity:1}
.streifen .loecher{opacity:.8;transition:opacity .3s}
/* Das Band faehrt von links buendig nach rechts buendig - unabhaengig von Breiten: left:100% ist die Bandbreite, translateX(-100%) die eigene */
@keyframes filmband{from{left:0;transform:translateX(0)}to{left:100%;transform:translateX(-100%)}}
.streifen .filmband.hand .bilder{animation:none;left:0;transform:translateX(var(--x,0px));transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.streifen .unter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:end;padding:16px 8px 0}
.streifen .unter .logo{max-width:min(300px,60%);max-height:80px;display:block}
.streifen .unter h3{font-family:var(--kond);font-weight:500;font-size:var(--t-2xl);line-height:1.02}
.streifen .unter .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--t-s);color:var(--text2);margin-top:8px}
.streifen .unter .meta b{color:var(--text);font-weight:500}
.streifen .unter p{font-size:var(--t-m);line-height:1.5;color:var(--text-lesen);max-width:64ch;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.streifen .unter .gruende{margin-top:8px}
.streifen .unter .solo-aktionen{position:static}
/* Doppelseite */
.doppel{display:grid;grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr);gap:16px;align-items:stretch}
.doppel .seite{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:var(--flaeche);text-decoration:none;color:inherit;isolation:isolate;outline-offset:3px}
.doppel .seite img.hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s,transform .6s;z-index:-1}
.doppel .seite img.hg.da{opacity:.8}
.doppel .seite:hover img.hg.da{transform:scale(1.02)}
.doppel .seite::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.2) 55%,rgba(0,0,0,0))}
.doppel .seite .drin{position:absolute;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:8px}
.doppel .seite .logo{max-width:min(260px,70%);max-height:76px;align-self:flex-start;filter:drop-shadow(0 4px 16px rgba(0,0,0,.7))}
.doppel .seite h3{font-family:var(--kond);font-weight:500;font-size:var(--t-2xl);line-height:1.02}
.doppel .seite .meta{font-size:var(--t-s);color:var(--text2)}
.doppel .bruecke{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;padding:16px 12px;border-radius:var(--r-l);background:var(--flaeche);border:1px solid var(--linie)}
.doppel .bruecke .art{font-family:var(--kond);font-size:var(--t-l);color:var(--text2)}
.doppel .bruecke .gruende{flex-direction:column;align-items:center;gap:8px}
.doppel .bruecke .gruende li{font-size:var(--t-m);color:var(--text);text-align:center}
.doppel-aktionen{display:grid;grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr);gap:16px;margin-top:8px}
.doppel-aktionen .solo-aktionen{position:static}
.doppel-aktionen .solo-aktionen:last-child{grid-column:3}
/* Zitat */
.zitat{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 32px;align-items:center;padding:48px 48px 32px;border-radius:var(--r-l);background:var(--flaeche);isolation:isolate;overflow:hidden}
.zitat::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 18% 50%,color-mix(in srgb,var(--z1,#444) 55%,transparent),transparent 72%),radial-gradient(50% 80% at 90% 50%,color-mix(in srgb,var(--z2,#222) 40%,transparent),transparent 70%)}
.zitat blockquote{font-family:var(--kond);font-weight:500;font-size:clamp(26px,4vw,54px);line-height:1.04;letter-spacing:-.015em;text-wrap:balance;max-width:22ch;margin:0}
.zitat .wer{display:flex;gap:16px;align-items:center;text-decoration:none;color:inherit;min-width:0;max-width:340px}
.zitat .wer img{width:84px;aspect-ratio:2/3;border-radius:var(--r-s);object-fit:cover;background:var(--flaeche3);box-shadow:0 12px 30px rgba(0,0,0,.6);flex:none}
.zitat .wer b{display:block;font-family:var(--kond);font-weight:500;font-size:var(--t-xl);line-height:1.1}
.zitat .wer small{display:block;font-size:var(--t-s);color:var(--text2);margin-top:4px}
.zitat .wer .gruende{margin-top:8px}
.zitat .solo-aktionen{position:static;grid-column:1/-1}
@media (max-width:820px){
.mosaik-slot{grid-template-columns:1fr}
.hoch .plakate{grid-template-columns:repeat(2,minmax(0,1fr))}
.samm.mit-faecher{grid-template-columns:1fr;aspect-ratio:auto;min-height:170px;padding-top:130px}
.samm.mit-faecher .faecher{position:absolute;left:0;right:0;top:0;height:140px;padding:8px 20%}
.samm.mit-faecher .drin{padding:0 16px 12px}
.fortsetzung.mit-faecher{grid-template-columns:1fr}
.fortsetzung .faecher{height:150px}
.doppel,.doppel-aktionen{grid-template-columns:1fr}
.doppel-aktionen .solo-aktionen:last-child{grid-column:auto}
.doppel .bruecke{flex-direction:row;flex-wrap:wrap;padding:12px}
.doppel .bruecke .gruende{flex-direction:row}
.zitat{grid-template-columns:1fr;padding:24px 16px}
.streifen .bilder img{width:72vw}
.streifen .unter{grid-template-columns:1fr}
}
/* ---------------------------------------------------------------- Kino-Modus: seit Auftrag 53 (02.10.2026) im eigenen Block am Ende der Datei (.kino-*) */
/* ---------------------------------------------------------------- Bibliothek-Pruefung (16.09.2026): Suchleiste im Kopf, fuehrt ins Inventar */
.bib-suche{flex:0 1 250px;min-width:180px;min-height:var(--feld);padding:0 12px;gap:8px}
.bib-suche input{padding:4px 0;font-size:var(--t-m)}
.bib-suche kbd{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);border:1px solid var(--linie2);border-radius:var(--r-xs);padding:0 4px;line-height:1.5}
@media (max-width:820px){
.bib-suche{flex:1 1 100%;order:-1;min-height:40px}
}
/* ---------------------------------------------------------------- Umsetzung der Bibliotheks-Pruefung (16.09.2026) */
.bib-kopf .einstellung{margin-top:4px;font-size:var(--t-s);color:var(--text3)}
.linkknopf{background:none;border:0;color:var(--akzent);cursor:pointer;font:inherit;font-size:inherit;padding:0;text-decoration:underline;text-underline-offset:3px}
.linkknopf:hover{color:var(--text)}
.knopf .punkt{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--akzent);margin-left:4px;vertical-align:middle}
.anpassen{display:grid;gap:12px;padding:16px;border:1px solid var(--linie);border-radius:var(--r-l);background:var(--flaeche);margin:0 0 16px}
.anpassen .zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.anpassen .etikett{font-size:var(--t-s);color:var(--text3);min-width:118px}
.anpassen .stimmung{margin-top:0}
.regal-werkzeuge{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}
.auswahl-huelle{display:inline-flex;align-items:center;gap:8px}
.auswahl{background:var(--flaeche);border:1px solid var(--linie2);border-radius:var(--r-s);color:var(--text);padding:4px 8px;font:inherit;font-size:var(--t-s);min-height:var(--feld-k)}
/* Sortierung der Regalseite und von „Andere Werke" (24.09.2026): Aufklappliste und Richtungsknopf wie im Inventar, beisammen - bricht die
Werkzeugzeile um, wandern beide zusammen. Am Handy (412 px) darf die Liste schmaler werden als ihr laengster Eintrag, nie breiter als die Zeile. */
.sortierwahl{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.sortierwahl .auswahl-huelle{min-width:0}
.sortierwahl .auswahl{min-width:0;max-width:100%;text-overflow:ellipsis}
/* Der Wert, nach dem sortiert ist, an der Karte (bibliothek.js regalWertHtml): Text wie Laufzeit und Datum, Wertungen mit dem Zeichen ihrer Quelle */
.regal-wert{margin-right:8px;color:var(--text2)}
.tk-breit small .wertung{margin-right:6px;vertical-align:-3px;color:var(--text)}
.tk-zeile .mono .wertung{vertical-align:-3px}
.regal-einstieg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px}
.regal-quer{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.regal-liste{display:flex;flex-direction:column;gap:2px}
.regal-liste .tk-zeile{grid-template-columns:36px minmax(0,1fr) auto}
.regal-liste .tk-zeile .platz{display:block}
/* „Andere Werke" am Ende des Regals einer Person oder eines Studios (bibliothek.js werkeKachel, 24.09.2026): die Kachel von „Nicht dabei?"
(.tk.wunsch) - im Poster so, wie sie ist, im Querformat im 16:9-Feld der Breitkarte (ohne deren Verlauf, es gibt kein Bild), in der
Liste als letzte Zeile mit Pfeil. Gestrichelter Rand plus Innenabstand ergeben dieselben Masse wie bei den Titelkarten; der Satz bricht
um, statt abgeschnitten zu werden - auch ein Name ohne Leerzeichen laeuft nicht aus der Kachel. */
.tk.aw-kachel .wunsch-innen b{overflow-wrap:anywhere}
.tk-breit.aw-kachel .bild{border:1px dashed var(--linie3);background:var(--flaeche);display:grid;place-items:center}
.tk-breit.aw-kachel .bild::after{content:none}
.tk-breit.aw-kachel:hover .bild,.tk-breit.aw-kachel:focus-visible .bild{border-color:var(--akzent-rand);background:var(--akzent-tief)}
.tk-breit.aw-kachel .wunsch-innen{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px;text-align:center;max-height:100%;overflow:hidden}
.tk-breit.aw-kachel .wunsch-innen svg{width:24px;height:24px;flex:none;stroke:var(--akzent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tk-breit.aw-kachel .wunsch-innen b{margin:0;max-width:36ch;font-size:var(--t-s);line-height:1.35;white-space:normal;overflow-wrap:anywhere;color:var(--text)}
.tk-zeile.aw-kachel{border:1px dashed var(--linie3);padding:7px 9px}
.tk-zeile.aw-kachel:hover,.tk-zeile.aw-kachel:focus-visible{border-color:var(--akzent-rand);background:var(--akzent-tief)}
.aw-kachel-symbol{width:36px;height:54px;border-radius:var(--r-xs);background:var(--flaeche2);display:grid;place-items:center}
.aw-kachel-symbol svg{width:18px;height:18px;stroke:var(--akzent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tk-zeile.aw-kachel b{white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.aw-kachel-pfeil{display:grid;place-items:center;color:var(--text3)}
.tk-zeile.aw-kachel:hover .aw-kachel-pfeil,.tk-zeile.aw-kachel:focus-visible .aw-kachel-pfeil{color:var(--akzent)}
.aw-kachel-pfeil svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.samm-sort{margin-left:auto}
.woche{display:flex;gap:24px;flex-wrap:wrap;margin:4px 0 16px}
.woche b{display:block;font-family:var(--kond);font-weight:500;font-size:var(--t-2xl);line-height:1}
.woche span{font-size:var(--t-s);color:var(--text3)}
.tag-gruppe{margin-top:24px}
.tag-gruppe h3{font-family:var(--kond);font-weight:500;font-size:var(--t-l);color:var(--text2);margin-bottom:8px}
.verlauf-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:4px}
.vk{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:8px 12px;border-radius:var(--r-m);text-decoration:none;color:inherit;border:1px solid transparent;min-width:0}
.vk:hover{background:var(--flaeche2);border-color:var(--linie2)}
.vk img,.vk .platz{width:44px;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-s);background:var(--flaeche3);display:block}
.vk b{display:block;font-weight:500;font-size:var(--t-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vk small{display:block;font-size:var(--t-s);color:var(--text3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reihe-buehne{transition:opacity .36s ease}
.reihe-buehne.weg{opacity:0}
.slot-solo.v-b .solo .hg::after{background:linear-gradient(90deg,color-mix(in srgb,var(--z1,#000) 34%,#000) 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.1) 68%,rgba(0,0,0,.3) 100%),linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 50%)}
.szenen-streifen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 16px}
.szenen-streifen img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-s);background:var(--flaeche2);opacity:0;transition:opacity .5s}
.szenen-streifen img.da{opacity:1}
.d-teil+.d-teil{margin-top:8px}
.sa-aktionen .knopf.leise{margin-left:auto}
.sa-aktionen .knopf.leise+.knopf.leise{margin-left:0}
@media (max-width:820px){
.anpassen .etikett{min-width:100%}
.regal-einstieg{grid-template-columns:1fr}
.verlauf-raster{grid-template-columns:1fr}
.woche{gap:16px}
.woche b{font-size:var(--t-2xl)}
.szenen-streifen{grid-template-columns:repeat(2,minmax(0,1fr))}
.samm-sort{margin-left:0}
}
.bib-kopf .kopf-rechts{justify-content:flex-end}
.regal-einstieg-teil{margin-top:4px}
.regal-einstieg-teil+.regal-raster,.regal-einstieg-teil+.regal-quer{margin-top:24px}
@media (max-width:820px){.bib-kopf .kopf-rechts{justify-content:flex-start}}
/* ---------------------------------------------------------------- Runde 14: Szenenstreifen, Doppelseite, Panorama, Musik */
.szenen-streifen{display:block;width:min(100%,1240px);margin:32px 0;padding:12px;border:1px solid var(--linie);border-radius:var(--r-m);background:color-mix(in srgb,var(--flaeche) 55%,transparent)}
.szenen-streifen .etikett{display:block;margin:0 0 8px}
/* T-11 (S5b): der Streifen erscheint erst, wenn mindestens drei Szenen geladen sind - vorher blieb bei fehlenden Bildern ein leerer
Kasten mit "Szenen" stehen. Bis dahin ist er unsichtbar und ohne Platz, aber nicht display:none: die Bilder (loading=lazy) laden weiter. */
.szenen-streifen:not(:has(img.da ~ img.da ~ img.da)){position:absolute;left:0;visibility:hidden;pointer-events:none;margin:0}
.szenen-streifen .bilder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.szenen-streifen img{border-radius:var(--r-s);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.doppel{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:16px}
.doppel-aktionen{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:16px}
.doppel .bruecke{background:none;border:0;padding:0;gap:16px}
.doppel .bruecke .und{font-family:var(--kond);font-weight:500;font-size:88px;line-height:.9;letter-spacing:-.02em;background:linear-gradient(160deg,color-mix(in srgb,var(--l1,#7a9ab5) 62%,#fff),color-mix(in srgb,var(--r1,#b59a7a) 62%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.doppel .bruecke .gruende{flex-direction:column;align-items:center;gap:8px}
.doppel .bruecke .gruende li{font-size:var(--t-s);color:var(--text3);line-height:1.3;text-align:center}
.doppel .bruecke .gruende li::before{display:none}
.samm .hg.panorama,.reihen-karte .hg.panorama,.fortsetzung .hg.panorama{display:flex}
.samm .hg.panorama img,.reihen-karte .hg.panorama img,.fortsetzung .hg.panorama img{flex:1 1 0;min-width:0;width:auto;height:100%;object-fit:cover;filter:saturate(1.1)}
.samm .hg.panorama img.da,.reihen-karte .hg.panorama img.da{opacity:.72}
.fortsetzung .hg.panorama img.da{opacity:.6}
@media (max-width:820px){
.szenen-streifen{margin:24px 0;padding:8px}
.szenen-streifen .bilder{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.doppel .bruecke{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:12px;padding:4px}
.doppel .bruecke .und{font-size:var(--t-4xl);flex:none}
.doppel .bruecke .gruende{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px 12px}
.doppel .bruecke .gruende li{text-align:left}
}
/* Panorama: Uebergaenge zwischen den Hintergruenden weich, etwas heller */
.samm .hg.panorama,.reihen-karte .hg.panorama,.fortsetzung .hg.panorama{gap:0}
.samm .hg.panorama img+img,.reihen-karte .hg.panorama img+img,.fortsetzung .hg.panorama img+img{margin-left:-6%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%);mask-image:linear-gradient(90deg,transparent,#000 16%)}
.samm .hg.panorama img.da,.reihen-karte .hg.panorama img.da{opacity:.82}
.fortsetzung .hg.panorama img.da{opacity:.72}
/* ---------------------------------------------------------------- Runde 15: Zuletzt veroeffentlicht, Serienlage */
/* B-16 (S5b): der Kurator liefert meist fuenf oder sechs Karten (bis zwoelf) - ein festes Sechserraster liess bei fuenf rechts ein
leeres Sechstel. So viele Spalten wie Karten, hoechstens sechs je Zeile; bis vier Karten bleibt es bei Vierteln (keine Riesenposter). */
.erschienen-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.erschienen-raster:has(>:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
.erschienen-raster:has(>:nth-child(6)){grid-template-columns:repeat(6,minmax(0,1fr))}
.erschienen-karte .bild{position:relative}
.erschienen-karte .datum{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;align-items:center;min-width:38px;padding:4px 8px;border-radius:var(--r-s);background:rgba(0,0,0,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;line-height:1;z-index:1}
.erschienen-karte .datum b{font-family:var(--kond);font-weight:500;font-size:var(--t-xl)}
.erschienen-karte .datum small{font-size:var(--t-xs);letter-spacing:.04em;color:rgba(255,255,255,.75);margin-top:4px}
.erschienen-karte .gesehen-marke{position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.7);color:#8fd9a8;font-size:var(--t-s);display:grid;place-items:center;z-index:1}
/* >>> d1b-reihen
D1b (29.10.2026, Wort des Eigentuemers: beide Reihen nach Datum nicht mehr in derselben Gestalt und nicht direkt nacheinander; Entwurf
scratchpad/d1/KONZEPT.md, A + B): die Ordnung fuer beide Stile und das schlichte Kleid. Zuletzt hinzugefuegt als Eingangsbuch (je Tag eine
Spalte, die Zugaenge als Zeilen mit kleinem Plakat, eine Erweiterung als Stapel), Zuletzt veroeffentlicht als Startkalender (Plakate in der
Reihenfolge der Zeit, je Titel ein Faden zu seinem Tag auf der Achse). Das Kleid des Kinosaals steht in app/kinosaal.css (Abschnitt
Bibliothek). Am Fernseher bleiben beide Reihen die Plakatreihen oben (.erschienen-raster, app/bibliothek.js MX.fernseher). Neue Regeln,
keine von heute geaendert (tests/js/rahmen.test.mjs). */
.zugangsbuch{display:flex;align-items:flex-start;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding-bottom:4px}
.zugangsbuch::-webkit-scrollbar{display:none}
/* D1c (30.10.2026, Wort des Eigentuemers zum Bild von 13.158: "bei Zuletzt hinzugefuegt ist ueber die Haelfte leer"; bis dahin je Tag fest 336 px):
am PC so viele gleich breite Spalten, wie in die Reihe passen, mindestens drei, hoechstens sechs (der Kurator liefert bis zu sechs Tage). Die
Reihe ist dafuer ein Container, nur ab 821 px: ab 960 px Breite vier Spalten, ab 1200 fuenf, ab 1400 sechs, je Spalte also 233 bis 320 px bis
1920 px Fensterbreite und darueber breiter. Weniger Tage als Spalten werden breiter, bis sie die Reihe fuellen (flex-grow); mehr Tage rollen
seitlich mit Einrasten je Tag wie bisher. Am Handy bleibt alles, wie es war. */
.zugang-tag{flex:1 0 calc(100% / var(--spalten,3));min-width:0;padding:0 var(--s4);border-left:1px solid var(--linie2);scroll-snap-align:start}
.zugang-tag:first-child{padding-left:0;border-left:0}
@media (min-width:821px){.zugangsbuch{container:zugangsbuch / inline-size}}
@container zugangsbuch (min-width:960px){.zugang-tag{--spalten:4}}
@container zugangsbuch (min-width:1200px){.zugang-tag{--spalten:5}}
@container zugangsbuch (min-width:1400px){.zugang-tag{--spalten:6}}
.zugang-tag-kopf{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;margin-bottom:12px}
.zugang-tag-kopf b{font-family:var(--kond);font-weight:600;font-size:var(--t-xl);line-height:1.15}
.zugang-tag-kopf small{font-size:var(--t-s);color:var(--text3);font-variant-numeric:tabular-nums}
.zugang-liste{display:grid;gap:12px}
a.zugang{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center}
a.zugang .bild{width:56px}
a.zugang .bild .gesehen-marke{position:absolute;right:4px;top:4px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;z-index:1;background:rgba(0,0,0,.7);color:#8fd9a8}
a.zugang .bild .platzhalter{padding:4px;font-size:var(--t-xs);line-height:1.1;overflow:hidden;overflow-wrap:anywhere}
.zugang-text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
a.zugang .zugang-text b{margin:0;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.zugang .zugang-text small{margin:0;max-width:100%}
a.zugang .zugang-staffel{display:inline-flex;align-items:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--t-s);color:var(--text2)}
/* Die Erweiterung als Stapel: drei Plakate, gegeneinander gedreht wie der Faecher einer Sammlung, daneben die Zahl */
a.zugang.zugang-stapel{grid-template-columns:96px minmax(0,1fr)}
a.zugang-stapel .stapel{position:relative;display:flex;align-items:center;height:84px;padding-left:4px}
a.zugang-stapel .stapel .bild{flex:0 0 auto;width:44px;margin-left:-24px;transform:rotate(var(--r,0deg));transform-origin:50% 100%}
a.zugang-stapel .stapel .bild:first-child{margin-left:0}
.zugang-zahl{font-family:var(--kond);font-weight:600;font-size:var(--t-xl);font-variant-numeric:tabular-nums}
.zugang-tag-mehr{margin-top:12px}
/* Der Startkalender: so viele Spalten wie Karten (app/bibliothek.js setzt grid-column, der juengste Titel rechts), Plakat 120, Titel und Angabe
mittig, ein Faden nach unten; darunter die Linien zur Achse (SVG, so breit wie die Reihe), die Achse mit Punkten, Monaten und heute */
.startkalender{position:relative}
.sk-reihe{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));align-items:stretch}
a.sk-titel{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:0 8px}
a.sk-titel .bild{width:min(120px,100%);flex:0 0 auto}
.sk-text{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;max-width:100%}
a.sk-titel .sk-text b{margin:8px 0 0;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.sk-titel .sk-text small{margin:0;white-space:normal}
a.sk-titel::after{content:"";flex:1 1 auto;width:1px;min-height:12px;margin-top:8px;background:var(--film,var(--linie3))}
.sk-tag{display:none}
.sk-faeden{display:block;width:100%;height:48px;overflow:visible}
.sk-faeden line{stroke:var(--film,var(--linie3));stroke-width:1}
.startkalender-achse{position:relative;height:40px;border-top:1px solid var(--linie3)}
.sk-punkt{position:absolute;top:-4px;width:7px;height:7px;transform:translateX(-50%);border-radius:50%;background:var(--film,var(--text));box-shadow:0 0 0 3px var(--grund)}
.sk-monat{position:absolute;top:0;padding:8px 0 0 8px;font-size:var(--t-s);line-height:1.4;color:var(--text3);white-space:nowrap}
.sk-monat::before{content:"";position:absolute;left:0;top:0;height:10px;border-left:1px solid var(--linie3)}
.sk-monat.erster{padding-left:0}
.sk-monat.erster::before{display:none}
.sk-heute{position:absolute;top:-12px;padding:16px 8px 0 0;transform:translateX(-100%);font-size:var(--t-s);font-weight:600;line-height:1.4;white-space:nowrap}
.sk-heute::after{content:"";position:absolute;right:0;top:0;height:22px;border-right:2px solid currentColor}
@media (max-width:820px){
/* Am Handy je Tag eine Spalte, seitlich mit Einrasten (der naechste Tag schaut herein), Plakat 48; der Startkalender als Liste, neueste
oben: links Tag und Monat, die Achse senkrecht mit dem Punkt in der Farbe des Films, Plakat 40, Titel und Angabe; SVG und Achse entfallen */
.zugangsbuch{margin-inline:calc(-1 * var(--seitenrand));padding-inline:var(--seitenrand);scroll-padding-inline:var(--seitenrand);scroll-snap-type:x mandatory}
.zugang-tag{flex:0 0 auto;width:min(78vw,300px);padding:0 16px}
.zugang-tag:first-child{padding-left:0}
.zugang-liste{gap:8px}
a.zugang{grid-template-columns:48px minmax(0,1fr)}
a.zugang .bild{width:48px}
.sk-reihe{display:flex;flex-direction:column;position:relative}
.sk-reihe::before{content:"";position:absolute;left:51px;top:8px;bottom:8px;border-left:1px solid var(--linie3)}
a.sk-titel{position:relative;display:grid;grid-template-columns:40px 40px minmax(0,1fr);gap:0 16px;align-items:center;text-align:left;padding:4px 0}
a.sk-titel::after{position:absolute;left:48px;top:50%;width:7px;height:7px;min-height:0;margin:0;transform:translateY(-50%);border-radius:50%;flex:none;box-shadow:0 0 0 3px var(--grund)}
a.sk-titel .bild{width:40px}
.sk-tag{display:flex;flex-direction:column;align-items:center;line-height:1}
.sk-tag b{font-family:var(--kond);font-weight:600;font-size:var(--t-xl)}
.sk-tag small{font-size:var(--t-s);color:var(--text3);margin-top:4px}
.sk-text{align-items:flex-start;grid-column:3}
a.sk-titel .sk-text b{margin:0}
.sk-faeden,.startkalender-achse{display:none}
}
/* <<< d1b-reihen */
/* Alle Titel einer kleinen Bibliothek (24.09.2026, kurator.g_alle_titel): gewohnte Titelkarten im Regalraster, darunter der Hinweis */
.alle-hinweis{margin:var(--s3) 0 0;color:var(--text3)}
.serienlage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px 48px;align-items:start}
.serienlage .slot-kopf{margin-bottom:4px}
.serienlage .leer{font-size:var(--t-s);color:var(--text3);padding:12px 0}
.folgen-liste{display:flex;flex-direction:column}
.folgen-zeile{display:flex;align-items:center;gap:12px;border-top:1px solid var(--linie);padding:8px 0}
.folgen-zeile:first-child{border-top:0}
.folgen-zeile .haupt{display:grid;grid-template-columns:46px minmax(0,1fr);gap:12px;align-items:center;flex:1;min-width:0;text-decoration:none;color:inherit;border-radius:var(--r-m)}
.folgen-zeile img,.folgen-zeile .platz{width:46px;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-s);background:var(--flaeche3);display:block}
.folgen-zeile .drin{min-width:0;display:flex;flex-direction:column;gap:4px}
.folgen-zeile b{font-family:var(--kond);font-weight:500;font-size:var(--t-xl);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folgen-zeile small{font-size:var(--t-s);color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folgen-zeile small.leise{color:var(--text3)}
.folgen-zeile .knopf{flex:none}
.takt{display:inline-flex;gap:4px;margin:4px 0 0}
.takt i{width:6px;height:6px;border-radius:50%;background:var(--linie2)}
.takt i.an{background:var(--akzent)}
.takt i.heute{box-shadow:0 0 0 1.5px var(--text3)}
@media (max-width:820px){
.erschienen-raster{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:none}
.erschienen-raster .tk{flex:0 0 42%;scroll-snap-align:start}
.serienlage{grid-template-columns:1fr;gap:var(--s5)}
}
/* Filmstreifen: fuenf Bilder sind immer breiter als das Band (135vw), damit es auch auf breiten Bildschirmen bis zum Rand gefuellt ist und faehrt */
.streifen .bilder img{width:clamp(320px,27vw,820px)}
@media (max-width:820px){.streifen .bilder img{width:72vw}}
/* ---------------------------------------------------------------- Runde 16: Laeuft gerade */
.lauf-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lauf-karte{display:flex;flex-direction:column;gap:12px;min-width:0;border-radius:var(--r-l);background:var(--flaeche);overflow:hidden;isolation:isolate;border:1px solid var(--linie)}
.lauf-karte .bild{position:relative;display:block;aspect-ratio:16/8;overflow:hidden;background:var(--flaeche2);text-decoration:none;color:inherit}
.lauf-karte .bild img:not(.logo){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.lauf-karte .bild img.da:not(.logo){opacity:.85}
.lauf-karte .bild::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.18) 55%,rgba(0,0,0,0));z-index:1}
.lauf-karte .bild .drin{position:absolute;left:16px;right:16px;bottom:12px;z-index:2;display:flex;flex-direction:column;gap:8px}
.lauf-karte .bild .logo{max-width:min(220px,62%);max-height:64px;align-self:flex-start;filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))}
.lauf-karte .bild h3{font-family:var(--kond);font-weight:500;font-size:var(--t-2xl);line-height:1.02}
.lauf-karte .staffel{font-size:var(--t-s);color:var(--text2)}
.lauf-karte .stand{padding:0 16px;display:flex;flex-direction:column;gap:8px}
.lauf-karte .stand b{font-weight:500;font-size:var(--t-m)}
.lauf-karte .stand small{font-size:var(--t-s);color:var(--text2)}
.lauf-karte .stand small.leise{color:var(--text3)}
.folgenspur{display:flex;gap:4px;flex-wrap:wrap}
.folgenspur i{width:18px;height:8px;border-radius:2px;background:var(--flaeche3);border:1px solid transparent;box-sizing:border-box}
.folgenspur i.gesehen{background:var(--akzent)}
.folgenspur i.da{background:transparent;border-color:var(--akzent)}
.folgenspur i.gelaufen{background:var(--linie2)}
.lauf-karte .knoepfe{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 16px;margin-top:auto}
@media (max-width:1250px){.lauf-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.lauf-raster{grid-template-columns:1fr}}
/* ---------------------------------------------------------------- Runde 17: eine Personen-Form (Portraet, breite Karte, vier Plakate) */
.person-slot{grid-template-columns:200px minmax(0,1fr) 300px;gap:16px;align-items:stretch}
.person-slot .person-spalte{display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}
.person-slot .person{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-decoration:none;color:inherit;min-width:0}
.person-slot .person img,.person-slot .person .rund{width:104px;height:104px;border-radius:50%;object-fit:cover;background:var(--flaeche3);border:2px solid rgba(255,255,255,.15);display:grid;place-items:center;font-family:var(--kond);font-size:var(--t-2xl);color:var(--text2)}
.person-slot .person .art{color:var(--text3)}
.person-slot .person b{font-family:var(--kond);font-weight:500;font-size:var(--t-2xl);line-height:1.02;text-wrap:balance}
.person-slot .person small{font-size:var(--t-s);color:var(--text2)}
.person-slot .knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.person-slot .gross{min-height:380px}
.person-slot .klein-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1250px){.person-slot{grid-template-columns:170px minmax(0,1fr)}.person-slot .klein-raster{grid-column:1 / -1;grid-template-columns:repeat(4,minmax(0,1fr))}.person-slot .gross{min-height:320px}}
@media (max-width:820px){
.person-slot{grid-template-columns:1fr;gap:12px}
.person-slot .person{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 12px}
.person-slot .person img,.person-slot .person .rund{width:72px;height:72px}
.person-slot .person b{font-size:var(--t-2xl);flex-basis:calc(100% - 90px)}
.person-slot .person .art{order:-1;flex-basis:100%}
.person-slot .gross{min-height:240px}
.person-slot .klein-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------------------------------------------------------------- Runde 19: Weiterschauen-Karten, Streifen Aktuell in Ausstrahlung */
.folgenspur i.angefangen{background:linear-gradient(90deg,var(--akzent) 50%,transparent 50%);border-color:var(--akzent)}
.ausstrahlung{margin-top:24px}
.slot-serienlage .lauf-raster+.ausstrahlung{margin-top:24px}
.ausstrahlung .slot-kopf{margin-bottom:8px}
.ausstrahlung .slot-kopf h2{font-size:var(--t-l);color:var(--text2)}
.strahlt-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.strahlt{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:8px 12px;border-radius:var(--r-m);background:var(--flaeche);text-decoration:none;color:inherit;min-width:0;border:1px solid transparent}
.strahlt:hover{border-color:var(--linie2)}
.strahlt img,.strahlt .platz{width:40px;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-xs);background:var(--flaeche3);display:block}
.strahlt b{display:block;font-weight:500;font-size:var(--t-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strahlt small{display:block;font-size:var(--t-s);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
@media (max-width:1250px){.strahlt-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.strahlt-reihe{grid-template-columns:1fr}}
/* ---------------------------------------------------------------- Runde 21: Plex neu starten */
.dlg-inhalt .warnkasten{border:1px solid var(--warn);border-radius:var(--r-m);padding:12px 16px;margin-bottom:12px;background:color-mix(in srgb,var(--warn) 12%,transparent)}
.dlg-inhalt .warnkasten ul{margin:8px 0 8px 16px;padding:0}
.dlg-inhalt .warnkasten li{margin:4px 0}
.dlg-inhalt .warnkasten p{margin-top:8px}
.knopf.krit{background:var(--krit);border-color:transparent;color:#fff}
.knopf.krit:hover{filter:brightness(1.1)}
/* ---------------------------------------------------------------- Upload (nur im Desktop-Client, app/upload.js) */
.up-boxen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3);margin-bottom:var(--s4)}
.up-box-karte{border:1px solid var(--linie);border-radius:var(--r-l);padding:12px 16px;display:flex;flex-direction:column;gap:8px;background:var(--flaeche)}
.up-box-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.up-box-kopf b{font-weight:500}
.up-leiste{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:var(--s3);min-height:32px}
.up-leiste .statuszeile{margin-top:0}
.up-leiste-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.up-liste{display:flex;flex-direction:column;gap:8px}
.up-zeile{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(200px,1fr) minmax(170px,.9fr) auto;gap:8px 16px;align-items:center;padding:12px 16px;border:1px solid var(--linie);border-radius:var(--r-l);background:var(--flaeche);transition:border-color .15s}
.up-zeile.aktiv{border-color:var(--linie2);box-shadow:inset 3px 0 0 var(--akzent)}
.up-zeile .status{min-width:74px;justify-content:center}
.up-name{min-width:0;display:flex;flex-direction:column;gap:4px}
.up-name b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-name small,.up-fortschritt small,.up-lage small{color:var(--text3);font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-quelle{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.up-quelle:hover{color:var(--text2)}
.up-fortschritt{display:flex;flex-direction:column;gap:8px;min-width:0}
.up-lage{display:flex;flex-direction:column;gap:4px;min-width:0}
.up-lage b{font-weight:500;font-size:var(--t-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-knoepfe{display:flex;gap:4px}
.up-zeile.fertig .up-name b{color:var(--text2)}
.up-leer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:48px 24px;text-align:center;color:var(--text2);min-height:220px;border:1px dashed var(--linie2);border-radius:var(--r-l);transition:border-color .15s}
.up-leer b{font-weight:500;color:var(--text);font-size:var(--t-l)}
.up-leer span{max-width:56ch;font-size:var(--t-s)}
.up-leer-symbol svg{width:44px;height:44px;stroke:var(--text3);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
body.up-ziehen .up-zeile,body.up-ziehen .up-leer{border-color:var(--akzent-rand)}
.up-schleier{display:none;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);place-items:center;pointer-events:none}
body.up-ziehen .up-schleier{display:grid}
.up-schleier>div{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 48px;border:2px dashed var(--akzent-rand);border-radius:var(--r-l);background:var(--flaeche);color:var(--text)}
.up-schleier svg{width:40px;height:40px;stroke:var(--akzent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.up-schleier b{font-family:var(--kond);font-size:var(--t-xl);font-weight:500}
.up-schleier span{color:var(--text2);font-size:var(--t-s)}
.up-posten{display:flex;flex-direction:column;gap:12px}
.up-posten-zeile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.up-posten-zeile.aus{opacity:.6}
.up-posten-zeile>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.up-posten-zeile small{font-size:var(--t-xs);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-symbol{width:38px;height:38px;border-radius:var(--r-m);background:var(--flaeche2);display:grid;place-items:center;margin-top:4px}
.up-symbol svg{width:18px;height:18px;stroke:var(--text2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.up-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.up-box{display:flex;flex-direction:column;gap:8px;border:1px solid var(--linie2);border-radius:var(--r-m);padding:12px 16px;cursor:pointer;position:relative;background:var(--grund)}
.up-box:has(input:checked){border-color:var(--akzent2);background:var(--akzent-tief)}
.up-box.voll{opacity:.55;cursor:not-allowed}
.up-box input{position:absolute;opacity:0;pointer-events:none}
.up-box:focus-within{outline:1.5px solid var(--akzent);outline-offset:2px}
.up-box .balken{display:flex}
.up-box small{font-size:var(--t-xs);color:var(--text3)}
.up-opt{display:flex;align-items:center;gap:12px;margin-top:16px;cursor:pointer}
.up-opt span{display:flex;flex-direction:column}
.up-opt small{color:var(--text3);font-size:var(--t-xs)}
.schalterliste .up-server{display:flex;gap:8px;align-items:center;flex:none}
.up-server .feld{width:260px}
.up-pub{display:flex;gap:8px;align-items:center;border:1px solid var(--linie);border-radius:var(--r-s);padding:8px 12px;background:var(--grund)}
.up-pub code{font-family:var(--mono);font-size:var(--t-xs);color:var(--text2);word-break:break-all;flex:1;min-width:0}
.up-einst .unterteil{margin-top:16px}
@media (max-width:1250px){.up-zeile{grid-template-columns:auto minmax(0,1fr) auto}.up-fortschritt{grid-column:1 / -1}.up-lage{grid-column:1 / span 2}.up-knoepfe{grid-row:1;grid-column:3}}
@media (max-width:820px){.up-zeile{padding:12px}.schalterliste .up-server{width:100%}.up-server .feld{width:auto;flex:1}}
/* Download-Kasten oben auf der Docs-Seite "Desktop-Client": Installer mit zwei Spiegeln */
.docs-download{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;border:1px solid var(--linie2);border-radius:var(--r-l);background:var(--flaeche);padding:16px;margin:0 0 24px}
.docs-download .dd-text{display:flex;flex-direction:column;gap:4px;min-width:220px;flex:1}
.docs-download .dd-text b{font-family:var(--kond);font-size:var(--t-xl);font-weight:500}
.docs-download .dd-text span,.docs-download .dd-beigaben{font-size:var(--t-s);color:var(--text2)}
.docs-download .dd-text code{font-family:var(--mono);font-size:var(--t-xs);word-break:break-all}
.docs-download .dd-mirrors{display:flex;gap:8px;flex-wrap:wrap}
.docs-download .dd-mirrors .knopf{min-height:40px;padding:8px 16px;font-size:var(--t-m)}
.docs-download .dd-mirrors .knopf small{font-weight:400;font-size:var(--t-xs);opacity:.75;margin-left:0}
.docs-download .dd-punkt{width:8px;height:8px;border-radius:50%;background:var(--text3);flex:none}
.docs-download .dd-punkt.an{background:var(--ok)}
.docs-download .dd-punkt.aus{background:var(--krit)}
.docs-download .dd-beigaben{width:100%;display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center}
.docs-download .dd-beigaben a{color:var(--text2)}
/* ------------------------------------------------------------------ MX-Archive: Anmeldung und Kontomenue (Phase 2)
Gleiche Bausteine wie ueberall (Marke, .feld, .knopf, Radien, Grautoene) - keine eigene Bildsprache fuer die Anmeldung. */
/* Auftrag 34: black-translucent laesst die Seite als App vom Home-Bildschirm unter Statusleiste und Home-Balken reichen - der Rand
rechnet mit safe-area-inset (im Browser und am PC 0, dann wie bisher 24 und 16 px) */
.anmelden-seite{display:grid;place-items:center;min-height:100vh;padding:max(var(--s5),env(safe-area-inset-top)) max(var(--s4),env(safe-area-inset-right)) max(var(--s5),env(safe-area-inset-bottom)) max(var(--s4),env(safe-area-inset-left))}
.anmelden{width:min(380px,100%);display:flex;flex-direction:column;gap:var(--s5)}
.anmelden-marke{font-size:var(--t-xl);margin:0;align-self:flex-start;color:var(--text)}
.anmelden-karte{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);border:1px solid var(--linie2);border-radius:var(--r-l);background:var(--flaeche)}
.anmelden-karte[hidden]{display:none}
.anmelden-karte h1{font-family:var(--kond);font-size:var(--t-2xl);font-weight:600;line-height:1.15;margin-bottom:var(--s1)}
.anmelden-karte label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-s);color:var(--text2)}
.anmelden-karte .feld{width:100%;min-height:42px;font-size:var(--t-l)}
.anmelden-karte .knopf.haupt{min-height:42px;font-size:var(--t-m);margin-top:var(--s2)}
.anmelden-knoepfe{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s2)}
.anmelden-knoepfe .knopf.haupt{margin-top:0;flex:1}
.anmelden-meldung{font-size:var(--t-s);color:var(--krit-text);background:var(--krit-tief);border:1px solid var(--krit-rand);border-radius:var(--r-s);padding:8px 12px}
/* AN-01 (S5b): display:block - .hinweis ist zugleich der Baustein der Hinweiszeilen (Raster 8px | Text | Knopf), und ohne diese Angabe
landete der Satz der Anmeldebremse in der 8-px-Spalte: jedes Wort eine Zeile */
.anmelden-meldung.hinweis{display:block;color:var(--warn-text);background:var(--warn-tief);border-color:var(--warn-rand)}
/* Zwei-Faktor-Anmeldung: Code-Feld, Einrichtung mit QR-Code (Anmeldeseite und Konto > Sicherheit) */
.zf-code{font-family:var(--mono);font-size:var(--t-2xl) !important;letter-spacing:.32em;text-align:center;font-variant-numeric:tabular-nums}
.zf-schritte{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:8px;font-size:var(--t-s);color:var(--text2);line-height:1.5}
.zf-schritte a{color:var(--text)}
.zf-qr{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.zf-qr canvas{width:184px;height:184px;border-radius:var(--r-m);image-rendering:pixelated;background:#fff;flex:none}
.zf-qr div{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 180px}
.zf-qr small{font-size:var(--t-s);color:var(--text3);line-height:1.4}
.zf-qr code{font-family:var(--mono);font-size:var(--t-m);line-height:1.6;color:var(--text);word-spacing:.3em;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.anmelden-karte .klein{font-size:var(--t-s);color:var(--text3);line-height:1.45}
/* Auftrag 34: "Als App auf den Home-Bildschirm" unter der Karte (app/anmelden.js, nur iPhone/iPad im Browser). Klein und ruhig: keine
Flaeche, nur eine Linie; das Teilen-Symbol in der Akzentfarbe, wie Safari es zeichnet. Knoepfe in voller Feldhoehe - es ist ein Touch-Geraet. */
.anmelden-app{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s4);border:1px solid var(--linie);border-radius:var(--r-m);font-size:var(--t-s);line-height:1.5;color:var(--text2)}
.anmelden-app-teilen{display:inline-block;width:1.35em;height:1.35em;vertical-align:-.3em;fill:none;stroke:var(--akzent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.anmelden-app-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end}
.anmelden-app-knoepfe .knopf{min-height:var(--feld)}
/* Betrieb > Uebersicht: zwoelf Spalten, jede Reihe voll (Spannen setzt rasterAnwenden() in betrieb.js), Kacheln einer Reihe gleich hoch.
Das Innere einer Kachel richtet sich nach IHRER Breite (Container-Abfragen), nicht nach dem Fenster - so stimmt es bei jeder Skalierung. */
.cockpit.ueb{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row;align-items:stretch}
.cockpit.ueb>.modul{container:kachel / inline-size;grid-column:span 12}
.modul .rollt{flex:0 1 auto;min-height:0;max-height:340px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.cockpit.ueb .ablagefeld{min-height:96px;padding:16px}
.cockpit.ueb .netzkarte svg{max-height:340px}
.cockpit.ueb .mini-verlauf{flex:1 1 54px;min-height:54px;max-height:150px;display:flex}
.cockpit.ueb .mini-verlauf svg{height:100%}
.cockpit.ueb .neu-poster{grid-template-columns:repeat(4,minmax(0,116px))}
.netz-unten{display:flex;flex-wrap:wrap;gap:0 24px}
.stroeme-still{padding:8px 0 0}
.stroeme .strom+.stroeme-still{border-top:1px solid var(--linie);margin-top:0}
.tagfeed{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0 24px;align-content:start}
.tagfeed .f{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;padding:4px 0;border-top:1px solid var(--linie);font-size:var(--t-s);align-items:baseline}
.tagfeed time{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.tagfeed .f a{text-decoration:none}
.tagfeed .f a:hover{text-decoration:underline;text-underline-offset:3px}
.tagfeed .f small{display:block;font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.tagfeed .f .punkt{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:8px;vertical-align:1px}
@container kachel (max-width:519px){
.teilung{grid-template-columns:minmax(0,1fr)}
.teilung>div+div{border-left:0;padding-left:0;border-top:1px solid var(--linie);padding-top:12px;margin-top:12px}
.stufen-mini{grid-template-columns:repeat(4,minmax(0,1fr))}
.netzkarte{overflow-x:auto}
.netzkarte svg{min-width:720px}
}
@container kachel (max-width:419px){
.plattenzeile{grid-template-columns:minmax(0,1fr) auto}
.plattenzeile .balken{grid-column:1 / -1;grid-row:2}
.stufen-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
.schalterreihe{grid-template-columns:minmax(0,1fr)}
}
@container kachel (min-width:520px) and (max-width:719px){
.stufen-mini{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container kachel (min-width:640px) and (max-width:999px){.schalterreihe{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container kachel (min-width:1000px){.schalterreihe{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container kachel (min-width:720px){
.stufen-mini{grid-template-columns:repeat(7,minmax(0,1fr))}
.rechner-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.rechner-reihe .rechnerzeile{border-top:0}
}
/* Wiedergaben: knappe Kachel der Uebersicht */
.wg-kurz{display:flex;flex-direction:column;gap:8px}
.wg-k{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;min-width:0}
.wg-k.ruht{opacity:.75}
.wg-k .balken{grid-column:1 / -1;height:3px}
.wg-k-wo{font-size:var(--t-xs);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46cqw}
.wg-titel{font-weight:500;color:var(--text);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.wg-titel:hover{color:var(--akzent)}
.wg-titel small,.wg-was small:first-of-type,.wg-kurz-alt a small,.wg-kurz-alt>div>span small{font-family:var(--mono);font-size:var(--t-xs);color:var(--text2);font-weight:400;margin-left:4px}
.wg-kurz-alt{display:flex;flex-direction:column}
.wg-kurz-alt>div{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:4px 0;border-top:1px solid var(--linie);font-size:var(--t-s)}
.wg-kurz-alt>div:first-child{border-top:0}
.wg-kurz-alt a,.wg-kurz-alt>div>span:nth-child(2){color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-kurz-alt a:hover{color:var(--akzent)}
.wg-kurz-alt>div>small{color:var(--text3);font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30cqw}
.wg-wann{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);white-space:nowrap}
.wg-quelle{flex:none;font-size:var(--t-xs);letter-spacing:.04em;padding:0 8px;border-radius:var(--r-p);border:1px solid var(--linie2);color:var(--text2);white-space:nowrap}
.wg-quelle.plex{color:#e5a00d;border-color:rgba(229,160,13,.4)}
/* Wiedergaben: eigener Reiter */
.wg-neben{display:flex;flex-direction:column;gap:16px;min-width:0;position:sticky;top:calc(var(--klebe-oben) + var(--s3))}
.wg-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:12px}
.wg-karte{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:780px;padding:12px 16px;border:1px solid var(--linie2);border-radius:var(--r-m);background:var(--grund)}
.wg-karte.ruht .balken span{opacity:.7}
.wg-kopf{display:flex;align-items:baseline;gap:8px;min-width:0}
.wg-kopf .wg-quelle{margin-left:auto}
.wg-kopf .wg-titel{font-size:var(--t-l);font-family:var(--kond)}
.wg-unter{font-size:var(--t-s);color:var(--text2);margin-top:-4px}
.wg-zeile{display:flex;gap:4px 12px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--text3);font-variant-numeric:tabular-nums}
.wg-zeile b{font-weight:500}
.wg-zeile span:last-child{margin-left:auto}
.wg-technik{display:grid;grid-template-columns:minmax(0,1fr);margin:4px 0 0;border-top:1px solid var(--linie)}
.wg-technik>div{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:baseline;gap:12px;padding:4px 0;border-bottom:1px solid var(--linie);font-size:var(--t-s)}
.wg-technik>div:last-child{border-bottom:0}
.wg-technik dt{color:var(--text3);font-size:var(--t-xs)}
.wg-technik dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.wg-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.wg-filter input.feld{flex:1 1 200px;min-width:0}
.wg-filter select.feld{flex:0 1 170px;min-width:0}
.wg-verlauf{display:flex;flex-direction:column}
.wg-tag{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:16px 0 8px;border-bottom:1px solid var(--linie2)}
.wg-tag:first-child{padding-top:8px}
.wg-eintrag{display:grid;grid-template-columns:48px minmax(0,1.4fr) minmax(0,1fr) 92px;gap:4px 16px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--linie);font-size:var(--t-s)}
.wg-eintrag:last-child{border-bottom:0}
.wg-eintrag>.wg-quelle{justify-self:end}
.wg-was{min-width:0}
.wg-was a,.wg-was>span:first-child{color:var(--text);text-decoration:none;font-weight:500}
.wg-was a:hover{color:var(--akzent)}
.wg-was>small:last-child,.wg-wer small{display:block;color:var(--text3);font-size:var(--t-xs);margin:4px 0 0;font-family:var(--sans)}
.wg-mal{font-family:var(--mono);font-size:var(--t-xs);color:var(--text2);border:1px solid var(--linie2);border-radius:var(--r-p);padding:0 8px;margin-left:8px}
.wg-wer{min-width:0}
.wg-wer b{font-weight:500;color:var(--text2)}
.wg-saeulen{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;height:96px;align-items:end;border-bottom:1px solid var(--linie2)}
.wg-saeulen.flach{height:56px}
.wg-saeulen>span{display:flex;flex-direction:column-reverse;height:100%;min-width:0}
.wg-saeulen>span:hover{background:var(--flaeche3)}
.wg-saeulen i{display:block;width:100%;min-height:0;border-radius:var(--r-xs) var(--r-xs) 0 0}
.wg-saeulen i.plex,.wg-legende.plex,.balken span.plexfarbe{background:#e5a00d}
.wg-saeulen i.archiv,.wg-legende.archiv{background:var(--akzent)}
.wg-saeulen i.plex+i.archiv,.wg-saeulen i.archiv+i.plex{border-radius:0}
.wg-achse{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--t-xs);color:var(--text3);padding-top:4px}
.wg-legende{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.wg-rang{display:flex;flex-direction:column}
.wg-rang>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--linie);font-size:var(--t-s)}
.wg-rang>div:first-child{border-top:0}
.wg-rang b{font-weight:500}
.wg-rang .wg-quelle{margin-left:8px}
.wg-rang-zahl{font-family:var(--kond);font-size:var(--t-l);font-variant-numeric:tabular-nums}
.wg-rang .balken{grid-column:1 / -1;height:3px}
.wg-rang small{grid-column:1 / -1;color:var(--text3);font-size:var(--t-xs)}
@media (max-width:1250px){
.cockpit.wg-seite>.wg-neben{grid-column:1 / -1;position:static;order:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:stretch}
.cockpit.wg-seite>.w-lang{order:3}
}
@media (max-width:820px){
.wg-eintrag{grid-template-columns:48px minmax(0,1fr) auto}
.wg-wer{grid-column:2 / -1;grid-row:2}
.wg-eintrag>.wg-quelle{grid-column:3;grid-row:1}
.wg-technik>div{grid-template-columns:84px minmax(0,1fr)}
}
/* Planung am Handy: Termine als Liste */
.terminliste{display:flex;flex-direction:column}
.termin-zeile{display:grid;grid-template-columns:10px 74px minmax(0,1fr);gap:12px;align-items:center;min-height:48px;padding:8px 4px;background:none;border:0;border-top:1px solid var(--linie);text-align:left;color:var(--text);cursor:pointer}
.termin-zeile:first-child{border-top:0}
.termin-zeile i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--f,var(--text3));background:#000}
.termin-zeile.fehlt i{background:var(--f,var(--warn))}
.termin-zeile b{display:block;font-weight:500;font-size:var(--t-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.termin-zeile small{display:block;font-size:var(--t-xs);color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.termin-zeile .wann b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.termin-mehr summary{cursor:pointer;padding:12px 4px;font-size:var(--t-s);color:var(--text2)}
.zf-modul{max-width:640px;display:flex;flex-direction:column;gap:16px}
.zf-modul h2{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.zf-modul h3{font-family:var(--kond);font-weight:600;font-size:var(--t-l)}
.zf-erklaerung{max-width:64ch;line-height:1.5}
.zf-form{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--linie)}
.zf-form[hidden]{display:none}
.zf-form label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-s);color:var(--text2);max-width:320px}
.zf-form .feld{min-height:40px}
.zf-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.konto-knopf{font-family:var(--kond);font-weight:600;font-size:var(--t-l);color:var(--text)}
.konto-knopf[hidden]{display:none}
.konto-menue{position:fixed;left:calc(var(--leiste) + var(--s2));bottom:var(--s4);z-index:60;display:flex;flex-direction:column;gap:4px;min-width:230px;padding:var(--s3);
border:1px solid var(--linie2);border-radius:var(--r-m);background:var(--flaeche2);box-shadow:0 18px 50px rgba(0,0,0,.7)}
.konto-menue[hidden]{display:none}
.konto-wer{display:flex;flex-direction:column;gap:4px;padding:4px 4px 8px;border-bottom:1px solid var(--linie);margin-bottom:4px}
.konto-wer small{color:var(--text3);font-size:var(--t-xs)}
.konto-menue .knopf{justify-content:flex-start}
/* S5b P2: Gruppen im Kontomenue (Konto · Hilfe und Werkzeuge · Verwaltung · Abmelden), der Stand der Verbindung im Kopf, die Taste rechts;
bei niedrigen Fenstern rollt das Menue in sich (am Handy gilt die Hoehe des Blatts unten) */
.konto-menue{max-height:calc(100dvh - 2 * var(--s4));overflow-y:auto}
.konto-trenn{flex:none;height:1px;background:var(--linie);margin-block:var(--s1)}
.konto-etikett{padding:var(--s2) var(--s3) 0}
.konto-verbindung{display:flex;align-items:center;gap:var(--s1)}
.konto-menue .knopf kbd{margin-left:auto}
/* R-09 (Vorbereitung fuer P2): am Handy kommt das Kontomenue als Blatt von unten - ueber der Navigation, mit der sicheren Flaeche.
Wirksam, sobald das Menue nicht mehr in der (am Handy verborgenen) Leiste steht, sondern am Ende von body. */
@media (max-width:820px){.konto-menue{left:0;right:0;top:auto;bottom:0;z-index:70;min-width:0;max-height:80dvh;overflow-y:auto;border-bottom:0;border-radius:var(--r-l) var(--r-l) 0 0;
padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));box-shadow:0 -18px 50px rgba(0,0,0,.7)}.konto-menue .knopf{min-height:var(--zeile)}}
/* ---------------------------------------------------------------- Konto, Glocke, Avatar, Bewertung (MX-Archive Phase 3) */
.glocke{position:relative}
.glocke[hidden]{display:none}
.glocke .nav-zahl{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-p);background:var(--akzent);color:var(--grund);font-family:var(--mono);font-size:var(--t-xs);line-height:17px;text-align:center}
.konto-knopf.mit-bild{padding:0;overflow:hidden}
.konto-knopf img{width:100%;height:100%;object-fit:cover;display:block}
.avatar{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:var(--flaeche3);color:var(--text);font-family:var(--kond);font-weight:600;font-size:var(--t-l)}
.avatar.gross{width:84px;height:84px;font-size:var(--t-3xl)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* Fliessendes Raster (S5b P5, Regel vom 25.09.2026): das Konto hat keine eigene Hoechstbreite mehr (bis dahin 1080 px) - die Module
stehen in so vielen Spalten, wie die Breite traegt, jede zwischen 420 px und einem Bruchteil der Zeile */
.konto-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:var(--s4);align-items:start}
.konto .modul h2{font-family:var(--kond);font-size:var(--t-l);font-weight:500;margin-bottom:12px}
.konto-leiste{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.konto-leiste h2{margin-bottom:0}
/* Auftrag 37: "Überall sonst abmelden" oben auf Konto › Sitzungen und Geräte, ueber beiden Modulen. Links der Satz, was der Knopf tut und
wie viele andere Sitzungen es gerade gibt (konto.js ueberallSatz), rechts der Knopf; ist es zu schmal, steht er unter dem Satz. */
.konto-ueberall{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-bottom:var(--s4)}
.konto-ueberall p{flex:1 1 360px;min-width:0;color:var(--text2)}
.konto-ueberall p b{font-weight:500;color:var(--text)}
.konto-ueberall .knopf{flex:none}
/* ohne andere Sitzung ist der Knopf aus; der Zeiger steht nach dem Klick noch darauf, der rote Schwebezustand bliebe sonst stehen */
.konto-ueberall .knopf:disabled{border-color:var(--linie2);color:var(--text);background:var(--flaeche2)}
.konto-profil{display:flex;align-items:center;gap:16px;margin-bottom:16px;min-width:0}
.konto-profil b{font-size:var(--t-l);font-weight:500}
.konto-form{display:flex;flex-direction:column;gap:12px}
.konto-form label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-s);color:var(--text2)}
.konto-form label.knopf{flex-direction:row;color:var(--text);cursor:pointer}
.konto-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.konto-liste{display:flex;flex-direction:column}
.konto-zeile{display:grid;grid-template-columns:184px minmax(0,1fr) max-content max-content;gap:16px;align-items:center;padding:12px 4px;border-top:1px solid var(--linie)}
.konto-zeile>.status{justify-self:start}
.konto-liste.schmal .konto-zeile{grid-template-columns:118px minmax(0,1fr) max-content max-content}
.live[hidden]{display:none}
@media (max-width:820px){.konto-zeile,.konto-liste.schmal .konto-zeile{grid-template-columns:minmax(0,1fr) max-content;gap:8px 12px}.konto-zeile>.status,.konto-zeile>div{grid-column:1/-1}}
.konto-zeile:first-child{border-top:0}
.konto-zeile.neu{cursor:pointer}
.konto-zeile a{color:inherit;text-decoration:none}
.konto-zeile a:hover b{text-decoration:underline}
.bewerten{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.sterne{position:relative;display:inline-block;width:140px;height:28px;cursor:pointer;border-radius:var(--r-s);touch-action:manipulation}
.sterne:focus-visible{outline:2px solid var(--akzent);outline-offset:4px}
.sterne .st-ohne,.sterne .st-voll{position:absolute;inset:0 auto 0 0;display:flex;overflow:hidden;white-space:nowrap}
.sterne .st-ohne{width:100%}
.sterne .st-voll{width:calc(var(--w,0)*10%)}
.sterne[data-schau] .st-voll{width:calc(var(--schau,0)*10%);opacity:.75}
.sterne svg{flex:none;width:28px;height:28px;padding:3px;box-sizing:border-box;stroke-width:1.4;stroke-linejoin:round}
.sterne .st-ohne svg{fill:none;stroke:var(--text3)}
.sterne .st-voll svg{fill:var(--akzent);stroke:var(--akzent)}
/* Titelseite: Wertungen anderer Seiten */
/* Wertungen anderer Seiten: Zeichen der Quelle + Zahl (MX.wertung in kern.js). Das Zeichen traegt die Aussage (Tomate/Klecks, Becher steht/liegt) */
.wertungen{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;align-items:center}
.wertungen.klein{gap:8px 12px;margin-top:8px}
.wertung{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-l);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);line-height:1;white-space:nowrap}
.wertung.klein{gap:4px;font-size:var(--t-s);font-weight:500}
.wertung .wz{width:27px;height:27px;flex:none;display:block}
.wertung .wz-schild{width:auto;height:24px}
.wertung.klein .wz{width:16px;height:16px}
.wertung.klein .wz-schild{width:auto;height:14px}
.tk small .wertung{margin-right:6px;vertical-align:-3px;color:var(--text)}
.tabelle td .wertung{vertical-align:middle}
/* >>> folge-imdb
Auftrag 116 (22.10.2026): die IMDb-Wertung je Folge hinter dem Titel (app/titel.js staffelnHtml) steht im Fluss der Zeile: die Zahl auf der
Grundlinie des Titels, das Schild mittig zu den Grossbuchstaben; die Zeile bleibt so hoch wie ohne Wertung, keine Regel von heute geaendert */
.folge-zeile b .wertung{display:inline;margin-left:4px}
.folge-zeile b .wertung .wz{display:inline-block;margin-right:4px;vertical-align:-2px}
/* <<< folge-imdb */
/* Konto > Verbindungen */
.verb-raster{align-items:stretch;margin-top:12px}
.verb-karte .modul-kopf .rechts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.verb-stand{font-size:var(--t-s);color:var(--text2);margin:8px 0 0}
.verb-knoepfe{margin-top:12px;align-items:center;flex-wrap:wrap}
.verb-feed{display:flex;gap:8px;flex:1 1 240px;min-width:0}
.verb-feed .feld{flex:1;min-width:0}
.verb-warten{margin-top:12px}
/* Verwaltung > Kommentare */
.vk-kommentare{display:flex;flex-direction:column;gap:12px}
.vk-kommentar{border:1px solid var(--linie2);border-radius:var(--r-m);background:var(--grund);padding:12px 16px}
.vk-kommentar header,.vk-kommentar footer{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap}
.vk-kommentar header b{font-weight:500}
.vk-kommentar .rechts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.vk-kommentar p{margin:8px 0;white-space:pre-line;overflow-wrap:anywhere;max-width:80ch;line-height:1.5}
.vk-sterne{color:var(--text2)}
/* Bewertungen im Archiv (Titelseite): feste Sterne, Eintraege mit Bild, eigener Kommentar */
.sterne.fest{width:90px;height:18px;cursor:default;vertical-align:-3px}
.sterne.fest svg{width:18px;height:18px;padding:2px}
.d-runde .runde-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:4px 32px}
.runde-eintrag{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--linie);align-items:start}
.d-runde header+.runde-eintrag,.d-runde .runde-liste .runde-eintrag{border-top:0}
.runde-bild{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--flaeche3);display:grid;place-items:center;font-weight:600;color:var(--text2);font-size:var(--t-m)}
.runde-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.runde-kopf b{font-weight:500}
.runde-kopf small{color:var(--text3);font-size:var(--t-xs)}
.runde-kommentar{margin:8px 0 0;color:var(--text2);font-size:var(--t-m);line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;max-width:70ch}
.runde-eigen{margin-top:8px;max-width:640px}
.runde-eigen textarea{width:100%;min-height:58px;resize:vertical;line-height:1.45}
.runde-knoepfe{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.runde-knoepfe .knopf{margin-left:auto}
/* ---------------------------------------------------------------- Anfragen und Downloads (MX-Archive Phase 4) */
/* .anfragen hat seit S5b P4 keine Hoechstbreite mehr (fliessendes Raster); die Regeln dazu stehen im Block "S5b Paket 4" am Ende */
.anf-suche{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s4)}
.anf-suche input{flex:1 1 260px;min-width:0}
.anf-suche select{flex:0 1 190px}
.anf-liste{display:flex;flex-direction:column}
.anf-zeile{display:grid;grid-template-columns:64px minmax(0,1fr) max-content;gap:16px;align-items:start;padding:16px 4px;border-top:1px solid var(--linie)}
.anf-zeile:first-child{border-top:0}
.anf-zeile.ohne-bild{grid-template-columns:minmax(0,1fr) max-content}
.anf-poster{width:64px;height:96px;border-radius:var(--r-s);object-fit:cover;background:var(--flaeche3);display:grid;place-items:center;color:var(--text3);font-family:var(--kond);font-size:var(--t-2xl)}
.anf-text{min-width:0}
.anf-text h3{font-size:var(--t-l);font-weight:500;margin-bottom:4px;text-wrap:balance}
.anf-text h3 a{color:inherit;text-decoration:none}
.anf-text h3 a:hover{text-decoration:underline}
.anf-text p{margin-top:8px;max-width:70ch}
.anf-beschreibung{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.anf-aktion{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:150px}
.anf-aktion .knopf{justify-content:center}
.anf-staffeln{margin-top:12px;display:flex;flex-direction:column;gap:12px;max-width:640px}
.anf-staffeln .chip{cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.anf-staffeln .chip.aus{opacity:.5;cursor:default}
.anf-staffeln .chip small{color:var(--text3)}
.anf-kommentar{display:flex;flex-direction:column;gap:4px;font-size:var(--t-s);color:var(--text2)}
/* Upgrade-Merkmale zum Ankreuzen, Fehlermeldungen und der ruhige Hinweis darunter ("erst wird geprueft") */
.formular fieldset{border:0;padding:0;margin:0;min-width:0}
.formular legend{padding:0;font-size:var(--t-s);color:var(--text2);margin-bottom:8px}
.formular legend small{color:var(--text3);font-size:var(--t-s)}
/* Ein Chip im Formular muss sich gegen ".formular label{flex-direction:column}" wehren, sonst steht das
Ankreuzfeld ueber der Beschriftung statt daneben - genau wie ".formular label.wahl-zeile" es weiter unten tut. */
.formular label.chip{flex-direction:row;gap:8px;font-size:var(--t-s)}
.anf-merkmale .chip{cursor:pointer}
.anf-merkmale .chip:has(input:checked){border-color:var(--akzent-rand);background:var(--akzent-tief);color:var(--text)}
.anf-fehlerarten{display:flex;flex-direction:column;gap:8px}
.anf-hinweis{color:var(--text3);border-left:2px solid var(--linie2);padding-left:12px}
.anf-fehlerzeile .mono{color:var(--text2)}
/* Der Meldeknopf einer Folge haelt sich zurueck, bis die Zeile gemeint ist - auf Zeigegeraeten ohne Hover bleibt er sichtbar */
.folge-zeile .d-melden{opacity:0;transition:opacity .15s}
.folge-zeile:hover .d-melden,.folge-zeile .d-melden:focus-visible{opacity:1}
@media (hover:none){.folge-zeile .d-melden{opacity:.65}}
.anf-abschnitt{margin-bottom:var(--s5)}
.anf-abschnitt h2{font-family:var(--kond);font-size:var(--t-xl);font-weight:500;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.anf-dateien{margin-top:12px}
.anf-dateitabelle td{padding:8px 8px 8px 0;border-top:1px solid var(--linie);font-size:var(--t-s)}
.anf-client{margin-bottom:var(--s4)}
.anfragen .modul h2{font-family:var(--kond);font-size:var(--t-l);font-weight:500}
.dl-auftrag{padding:12px 0;border-top:1px solid var(--linie);display:flex;flex-direction:column;gap:4px}
.dl-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.dl-balken{height:4px;border-radius:var(--r-xs);background:var(--flaeche4);overflow:hidden}
.dl-balken i{display:block;height:100%;background:var(--akzent);transition:width .4s}
.dl-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dl-fuss .rechts{margin-left:auto;display:flex;gap:8px}
.formular .voll{grid-column:1/-1}
.wahl-liste{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto}
.formular label.wahl-zeile{flex-direction:row;font-size:var(--t-m);color:var(--text);grid-column:auto}
.wahl-zeile{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--linie2);border-radius:var(--r-m);cursor:pointer}
.wahl-zeile:has(input:checked){border-color:var(--akzent-rand);background:var(--akzent-tief)}
.wahl-zeile span{display:flex;flex-direction:column;gap:4px}
.wahl-zeile small{color:var(--text3);font-size:var(--t-s)}
.konto-zeile.mit-ziel{cursor:pointer}
@media (max-width:820px){.anf-zeile,.anf-zeile.ohne-bild{grid-template-columns:48px minmax(0,1fr)}.anf-zeile.ohne-bild{grid-template-columns:minmax(0,1fr)}.anf-poster{width:48px;height:72px}
.anf-aktion{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;min-width:0}}
/* ---------------------------------------------------------------- Netzplan: dynamische Geraeteknoten (MX-Archive Phase 5) */
.netz-geraete{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;min-height:0}
.netz-geraete:empty{display:none}
.netz-geraete .etikett{margin-right:4px}
.geraet-knoten{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:0 12px;align-items:center;min-width:190px;max-width:260px;padding:8px 12px;border:1px solid var(--linie3);border-radius:var(--r-m);background:#0d0d10}
.geraet-knoten b{font-size:var(--t-s);font-weight:600}
.geraet-knoten .klein{grid-column:1;grid-row:2}
.geraet-knoten .status{grid-column:2;grid-row:1/3}
.geraet-knoten.unklar{border-style:dashed}
.geraet-knoten.wol{min-width:240px;max-width:340px}
.geraet-knoten.wol .wol-rechts{grid-column:2;grid-row:1/3;display:flex;align-items:center;gap:8px}
/* ---------------------------------------------------------------- Verwaltung (Phase 7): die Konsole ist Tabellenarbeit - dicht, ruhig, ohne Karten */
.verwaltung .tabelle-box{margin-bottom:12px}
.vw-leiste{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:16px}
.vw-leiste>.klein{max-width:640px}
.vw-suche{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-width:0}
/* start.css gibt der Standzeile der Momentsuche die Klasse .vw-suche mit blauem Rand links - dieselbe Klasse tragen die Suchformulare
der Verwaltung, die bekamen den Rand mit. Fuer die Formulare hier zurueck; sauber waere ein eigener Name in start.css/verwaltung.js. */
form.vw-suche{border-left:0}
.vw-suche .feld{width:auto;min-width:0}
.vw-suche input[type=search]{width:min(300px,70vw)}
.vw-auditfilter{margin-bottom:16px}
.vw-auditfilter input[name=akteur],.vw-auditfilter input[name=aktion]{width:160px}
.vw-zurueck{margin-bottom:12px}
.vw-konto-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 24px;flex-wrap:wrap;margin-bottom:var(--s4)}
.vw-konto-kopf h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.vw-konto-kopf>.klein{max-width:420px}
.vw-rechte h3{font-size:var(--t-s);font-weight:500;color:var(--text3);margin:0 0 4px}
.vw-konto-raster{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);gap:var(--s4);align-items:start}
.vw-konto-raster>div{display:grid;gap:var(--s4);min-width:0}
.vw-rechteliste{columns:2 340px;column-gap:32px}
.vw-gruppe{break-inside:avoid;padding:16px 0 8px}
.vw-recht{display:grid;grid-template-columns:10px minmax(0,1fr) max-content;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linie)}
.vw-recht b{font-weight:500;font-size:var(--t-m);color:var(--text2);display:block}
.vw-recht small{color:var(--text3);font-size:var(--t-s);line-height:1.35;display:block}
.vw-recht.hat b{color:var(--text)}
.vw-punkt{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--linie3)}
.vw-recht.hat .vw-punkt{background:var(--ok);border-color:var(--ok)}
.vw-recht select.feld{width:auto;min-height:30px;padding:4px 24px 4px 8px;font-size:var(--t-s)}
.vw-matrix th.m,.vw-matrix td.m{text-align:center}
.vw-matrix td:first-child{min-width:240px}
/* Rechtematrix bei 2560 px (S5b Phase 3): die Tabelle nimmt nur so viel Breite, wie ihre Spalten brauchen - vorher zog width:100 % die
vier Rollenspalten ueber 2.100 px auseinander, die Haken standen weit weg vom Namen des Rechts */
.vw-matrix{width:auto;min-width:min(100%,900px)}
.tabelle-box:has(>.vw-matrix){width:fit-content;max-width:100%}
@media (min-width:821px){.vw-matrix th.m,.vw-matrix td.m{min-width:140px}}
.vw-matrix td:first-child .leise{font-family:var(--mono);font-size:var(--t-xs);margin-left:8px}
/* .vw-haken braucht keine eigene Gestalt mehr - die Haken der Rechtematrix sind die des ganzen Hauses (oben). */
.vw-aktionen{white-space:nowrap}
.vw-aktionen .knopf{margin-left:4px}
.vw-abschnitt{margin-bottom:32px}
/* Sperrverwaltung: die Suche steht ueber der Liste, nicht daneben - man sucht erst, dann entscheidet man. */
.vw-sperrsuche{margin-bottom:16px}
.vw-sperrsuche .rechts{display:flex;align-items:flex-end;gap:8px;justify-content:flex-end}
/* Nach Regel sperren (Auftrag 18, 25.09.2026): Wert und Schalter in einer Zeile, darunter die drei Knoepfe; die Vorschau rollt in sich,
statt die Seite um hunderte Zeilen zu verlaengern, und ein Strich trennt den Block von der Suche nach einzelnen Titeln. Am Handy steht
alles untereinander, die Knoepfe brechen um. "Alle entsperren n" und "Alle einblenden n" stehen neben der Ueberschrift der Liste. */
.vw-sperrregel-block{border-bottom:1px solid var(--linie);padding-bottom:24px;margin-bottom:24px}
.vw-sperrregel-text{max-width:96ch;margin:4px 0 12px}
.vw-sperrregel{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;margin-bottom:12px}
.vw-sperrregel input[name=ab]{width:160px}
.formular label.vw-sperrregel-haken{flex-direction:row;align-items:center;gap:12px;min-height:38px;font-size:var(--t-m);color:var(--text)}
.vw-sperrregel-knoepfe{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vw-sperrregel-knoepfe .vw-zahl,.vw-sperrkopf .vw-zahl{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.vw-sperrregel-vorschau .tabelle-box{max-height:min(60vh,560px);overflow:auto}
.vw-sperrregel-vorschau .tabelle td.umbruch{white-space:normal;min-width:160px}
.vw-sperrkopf{margin:8px 0 12px}
.vw-sperrkopf .vw-aktionen{display:flex;flex-wrap:wrap;gap:8px}
.vw-sperrkopf .vw-aktionen .knopf{margin-left:0}
@media (max-width:820px){
.vw-sperrregel-vorschau .tabelle th,.vw-sperrregel-vorschau .tabelle td{padding:8px}
.vw-sperrregel-vorschau .tabelle td.umbruch{min-width:110px}
}
.vw-abschnitt>h2{margin-bottom:12px}
/* >>> s2-1a-sammlungen
S2-1a (30.10.2026): Verwaltung > Sammlungen. Oben der Satz der Lage, die Filter in einer Zeile, die Liste als Tabelle (am Handy Karten,
.stapel); die Bearbeitung einer Sammlung ist eine eigene Seite: Angaben, darunter die Titel mit Platz, Abschnitt und Pfeilen, das Feld zum
Hinzufuegen mit seinen Treffern als Knoepfe, die ausgeschlossenen als Liste. Betrieb > Messwerte: die Kachel Sammlungen (.smk-verlauf).
Neue Regeln in beiden Stilen, keine von heute geaendert; im Stil Kinosaal setzt app/kinosaal.css (Abschnitt Verwaltung) dazu. */
.vw-sm-kopf{margin-bottom:16px}
.vw-sm-lage{font-size:var(--t-m);color:var(--text);margin-bottom:4px}
.vw-sm-filter{margin:4px 0 12px}
.vw-sm-tabelle tr.klickbar{cursor:pointer}
.vw-sm-raster{display:grid;gap:var(--s4);min-width:0}
.vw-sm-hand{border-left:2px solid var(--linie3);padding-left:12px;margin:0 0 16px;max-width:110ch}
.vw-sm-knoepfe{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vw-sm-dazu{display:grid;gap:8px;margin:12px 0 16px}
.vw-sm-dazu .feld{width:min(480px,100%)}
.vw-sm-treffer{display:flex;flex-wrap:wrap;gap:8px}
.vw-sm-mitglieder input[type=number]{width:76px}
.vw-sm-mitglieder td .feld:not([type=number]){min-width:140px;width:100%}
.vw-sm-mitglieder .vw-aktionen .ik{margin-left:4px}
.vw-sm-raus{list-style:none;margin:4px 0 16px;padding:0}
.vw-sm-raus li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--linie)}
.smk-verlauf{max-width:520px}
@media (max-width:820px){
.vw-sm-filter .feld,.vw-sm-filter .feld-rahmen{width:100%}
.vw-sm-mitglieder td .feld:not([type=number]){min-width:0}
}
/* <<< s2-1a-sammlungen */
/* >>> s2-1b-reihen
S2-1b (30.10.2026): die Reihen-Schicht in der Bibliothek, im klassischen Kleid (im Stil Kinosaal ergaenzt app/kinosaal.css). Die Seite
Sammlungen nach Kategorien (Block s2-1b-kategorien in app/bibliothek.js): unter dem Raster einer Kategorie "Alle zeigen", auf der Kachel eines
Studios die Zeile mit seinen Reihen. Die Seite der Reihe: "Teil von" unter dem Namen, die Ueberschriften der Abschnitte zwischen den Teilen,
"Reihen darin" als Chips. Neue Regeln, keine von heute geaendert; die Abstaende auf der Skala. */
.samm-kat-fuss{display:flex;justify-content:center;margin-top:12px}
.reihen-karte .drin small.samm-darin{margin-top:4px;color:var(--text3)}
.aw-reihenseite .aw-teil-von{margin:0;color:var(--text2)}
.aw-reihenseite .aw-teil-von a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.aw-reihenseite .aw-teile-abschnitt{margin:24px 0 12px}
.aw-reihenseite .aw-teile-werkzeuge+.aw-teile-abschnitt{margin-top:0}
.aw-reihenseite .aw-teile-abschnitt h3{font-family:var(--kond);font-weight:600;font-size:var(--t-l)}
.aw-reihenseite .aw-darin-chips{display:flex;flex-wrap:wrap;gap:8px}
/* <<< s2-1b-reihen */
/* >>> s2-3-reihen
S2-3b (30.10.2026): die Elemente fuer Reihen, Welten und Studios in beiden Stilen (Konzept scratchpad/s2-3/KONZEPT.md; Prototyp
scratchpad/s2-3/proto/s23.css, erste und dritte Schicht): die Ordnung und das klassische Kleid (Akzent statt der Farbe des Films, kein
Lichtkegel, der Fleck als Linie, schlichte Flaechen); im Stil Kinosaal gibt app/kinosaal.css das Kleid dazu. Der Zeitstrahl (MX.zeitstrahl),
Weiter in der Reihe, das Weltband, die Studio-Reihe, der Block In der Reihe der Titelseite, die Perlen der Kachel, das Mass des Checks und die
Uebersicht Sammlungen bei vielen Sammlungen (Suchfeld, Sprungleiste, Schaufenster, Register, kleine Reihen). Neue Regeln, keine von heute
geaendert; am Fernseher zeichnet keine Seite diese Formen. */
/* Zeitstrahl: Perlen auf einem Faden; der Faden je Teil in zwei Haelften, die leuchten, wo du gegangen bist */
.zeitstrahl{--zs-h:24px;--zs-p:10px;--zs-faden:2px;--zs-luecke:14px;--zs-an:var(--text);--zs-aus:var(--linie3);--zs-fehlt:var(--text3);--zs-naechst:var(--akzent);
list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:var(--zs-luecke);min-width:0}
.zeitstrahl.zs-s{--zs-h:14px;--zs-p:6px;--zs-faden:1px;--zs-luecke:6px}
.zeitstrahl.zs-l{--zs-h:30px;--zs-p:12px;--zs-luecke:18px}
.zs-abschnitt{flex:var(--w) 1 0;min-width:0;display:flex;flex-direction:column}
.zs-abschnitt-name{order:2;margin-top:var(--s1);padding-right:var(--s2);font-size:var(--t-s);line-height:16px;color:var(--text3);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.zs-teile{list-style:none;margin:0;padding:0;display:flex;align-items:center;min-height:var(--zs-h)}
.zs-teil{position:relative;flex:var(--w) 1 0;min-width:0;display:flex;align-items:center;justify-content:center;height:var(--zs-h)}
.zs-teil.auf{flex:0 0 auto;height:auto;padding:0 8px}
.zs-teil::before{content:"";position:absolute;left:0;right:0;top:50%;height:var(--zs-faden);transform:translateY(-50%);z-index:0;
background:linear-gradient(90deg,var(--fl,var(--zs-aus)) 50%,var(--fr,var(--zs-aus)) 50%)}
.zs-teil.weg-l{--fl:var(--zs-an)}
.zs-teil.weg-r{--fr:var(--zs-an)}
.zs-teil:first-child::before{left:50%;background:var(--fr,var(--zs-aus))}
.zs-teil:last-child::before{right:50%;background:var(--fl,var(--zs-aus))}
.zs-teil:only-child::before{display:none}
.zs-teil.fehlt::before{background:repeating-linear-gradient(90deg,var(--zs-aus) 0 3px,transparent 3px 6px)}
.zs-ziel{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-width:18px;height:100%;color:inherit;text-decoration:none;border-radius:999px;outline-offset:2px}
.zs-s .zs-ziel{min-width:8px}
.zs-perle{display:block;box-sizing:border-box;width:calc(var(--zs-p) + (var(--st,1) - 1) * var(--zs-p) * .7);height:var(--zs-p);border-radius:999px;background:var(--grund);border:1.5px solid var(--zs-aus);transition:transform .12s}
.zs-s .zs-perle{border-width:1px}
.zs-teil.gesehen .zs-perle{background:var(--zs-an);border-color:var(--zs-an)}
.zs-teil.angefangen .zs-perle{background:linear-gradient(90deg,var(--zs-an) var(--sicht),var(--grund) var(--sicht));border-color:var(--zs-an)}
.zs-teil.fehlt .zs-perle{width:calc((var(--zs-p) + (var(--st,1) - 1) * var(--zs-p) * .7) * .55);height:calc(var(--zs-p) * .55);border:0;background:var(--zs-fehlt)}
.zs-teil.naechster .zs-perle{border:2px solid var(--zs-naechst);box-shadow:0 0 0 3px color-mix(in srgb,var(--zs-naechst) 30%,transparent)}
.zs-teil.eigen .zs-perle{border:2px solid var(--zs-naechst);transform:scale(1.45);box-shadow:0 0 0 3px color-mix(in srgb,var(--zs-naechst) 30%,transparent)}
a.zs-ziel:hover .zs-perle{transform:scale(1.35)}
.zs-teil.eigen a.zs-ziel:hover .zs-perle{transform:scale(1.6)}
a.zs-ziel:focus-visible{outline:2px solid var(--zs-an)}
/* Werkband: Titel nach Jahr, desselben Jahres uebereinander, darunter die Jahre */
.zs-werk{position:relative;min-width:0}
.zeitstrahl.zs-zeit{position:relative;display:block;height:44px;margin:0;padding:0;list-style:none}
.zeitstrahl.zs-zeit::before{content:"";position:absolute;left:2%;right:2%;top:34px;height:1px;background:var(--zs-aus)}
.zs-zeit .zs-teil{position:absolute;left:var(--x);top:calc(34px - var(--zs-p) / 2 - var(--h) * (var(--zs-p) + 2px));height:auto;width:auto;transform:translateX(-50%);display:block;--zs-p:8px}
.zs-zeit .zs-teil::before{display:none}
.zs-zeit .zs-ziel{min-width:0;height:auto}
.zs-jahre{position:relative;height:20px;margin-top:var(--s1)}
.zs-jahr{position:absolute;left:var(--x);transform:translateX(-50%);font-size:var(--t-s);line-height:20px;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap}
.zs-jahr.zehner{opacity:.7}
.mit-hervor .zs-zeit .zs-teil:not(.hervor){opacity:.3}
.zs-zeit .zs-teil.hervor .zs-perle{transform:scale(1.35);border-color:var(--zs-an)}
@media (prefers-reduced-motion:reduce){.zs-perle{transition:none}}
html.ruhig .zs-perle{transition:none}
/* Die Flaechen der Reihen-Elemente im Feed (klassisch schlicht) */
.slot-fortsetzung.fortsetzung-perlen,.slot-welt,.slot-themenwelt.themenwelt-studio{border:1px solid var(--linie);border-radius:var(--r-l);background:var(--flaeche2)}
/* Weiter in der Reihe: je Reihe eine Zeile, links Name, Als Naechstes, Stand und Knoepfe, rechts der Faden mit dem Bild am naechsten Teil */
.fortsetzung-perlen{padding:var(--s5) var(--s5) var(--s4)}
.fortsetzung-perlen>.slot-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:var(--s2)}
.fortsetzung-perlen>.slot-kopf h2{margin:0}
.fortsetzung-reihen{display:flex;flex-direction:column}
.fortsetzung-reihe{display:grid;grid-template-columns:minmax(240px,280px) minmax(0,1fr);grid-template-areas:"kopf schnur" "knoepfe schnur";gap:0 var(--s5);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--linie)}
.fortsetzung-reihe:first-child{border-top:0;padding-top:var(--s2)}
.fortsetzung-reihe>.fortsetzung-anhaenger{display:none}
.fortsetzung-kopf{grid-area:kopf;align-self:end;display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.fortsetzung-schnur{grid-area:schnur;min-width:0}
.fortsetzung-knoepfe{grid-area:knoepfe;align-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.fortsetzung-reihe .reihe-name{margin:0;font-family:var(--kond);font-weight:600;font-size:var(--t-2xl);line-height:30px;color:var(--text)}
.fortsetzung-reihe .reihe-name a{color:inherit;text-decoration:none}
.fortsetzung-reihe .reihe-name a:hover{text-decoration:underline;text-underline-offset:3px}
.fortsetzung-als{font-size:14px;line-height:20px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fortsetzung-als .als{color:var(--akzent)}
.fortsetzung-stand{font-size:var(--t-s);line-height:20px;color:var(--text3);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fortsetzung-schnur .zs-teile{min-height:0;justify-content:flex-start}
.fortsetzung-schnur .zs-teil:not(.auf){max-width:56px}
.fortsetzung-anhaenger{position:relative;display:block;width:clamp(184px,14vw,224px);color:inherit;text-decoration:none}
.fortsetzung-anhaenger .bild{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--flaeche3)}
.fortsetzung-anhaenger .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fortsetzung-anhaenger .bild img.weich{inset:-40%;width:180%;height:180%;max-width:none;filter:blur(16px) brightness(.45) saturate(1.2)}
.fortsetzung-anhaenger .bild img.plakat{left:auto;right:8%;width:auto;height:100%;aspect-ratio:2/3;object-fit:cover;box-shadow:0 0 24px var(--grund)}
.fortsetzung-anhaenger .bild img.logo{inset:auto auto 8% 6%;width:auto;height:auto;max-width:56%;max-height:34%;object-fit:contain;filter:drop-shadow(0 1px 6px var(--grund))}
.fortsetzung-anhaenger .bild .ersatz{position:absolute;left:10px;right:10px;bottom:8px;font-family:var(--kond);font-weight:600;font-size:var(--t-xl);line-height:24px;color:var(--text)}
.fortsetzung-anhaenger .bild:has(img.da) .ersatz{display:none}
.fortsetzung-anhaenger .bild .spiel{position:absolute;left:10px;top:10px;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--grund);color:var(--text);opacity:0;transition:opacity .12s}
.fortsetzung-anhaenger .bild .spiel svg{width:14px;height:14px}
.fortsetzung-anhaenger:is(:hover,:focus-visible) .bild .spiel{opacity:.85}
.fortsetzung-vorgaenger{position:relative;display:block;color:inherit;text-decoration:none}
.vorgaenger-bild{position:relative;display:block;width:40px;aspect-ratio:2/3;border-radius:var(--r-xs);overflow:hidden;background:var(--flaeche3)}
.vorgaenger-bild img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.7)}
:is(.vorgaenger-bild,.welt-bild,.reihe-nb-bild) .haken{position:absolute;right:3px;bottom:3px;width:16px;height:16px;border-radius:999px;display:grid;place-items:center;background:var(--text);color:var(--grund)}
:is(.vorgaenger-bild,.welt-bild,.reihe-nb-bild) .haken svg{width:11px;height:11px}
/* Weltband: links der Kopf, rechts das Fenster mit den Plakaten ueber dem Faden; klassisch ohne Lichtkegel, der Fleck eine Linie im Akzent */
.slot-welt{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:var(--s6);align-items:stretch;padding:var(--s5) var(--s5) var(--s4);overflow:hidden}
.welt-kopf{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s2);min-width:0}
.welt-art{font-size:var(--t-s);line-height:20px;color:var(--text3)}
.welt-name{margin:0;font-family:var(--kond);font-weight:600;font-size:var(--t-3xl);line-height:40px;letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere}
.welt-name.lang{font-size:var(--t-2xl);line-height:30px}
.welt-kennzeile,.welt-weg{margin:0;font-size:14px;line-height:20px;color:var(--text2)}
.welt-weg .als{color:var(--akzent)}
.welt-fehlen{margin:0;font-size:var(--t-s);line-height:20px;color:var(--text3)}
.welt-werkzeuge{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--s3)}
.welt-buehne{position:relative;min-width:0;isolation:isolate}
.welt-fenster-zeile{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:center;gap:var(--s3)}
.welt-fenster{display:flex;gap:var(--s3);justify-content:center;min-width:0}
.reihe-pfeil.welt-pfeil{position:static;transform:none;opacity:1;flex:0 0 auto;align-self:center;margin-top:calc(-1 * var(--s6));width:36px;height:36px;border-radius:999px;border:1px solid var(--linie3);background:transparent;color:var(--text2)}
.welt-plakat{position:relative;display:flex;flex-direction:column;width:104px;color:inherit;text-decoration:none}
.welt-bild{position:relative;display:block;aspect-ratio:2/3;border-radius:var(--r-xs);background:var(--flaeche3)}
.welt-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-xs)}
.welt-bild .platzhalter{position:absolute;inset:0;display:flex;align-items:flex-end;padding:8px;font-size:var(--t-s);line-height:17px;font-weight:600;overflow:hidden;overflow-wrap:anywhere}
.welt-bild:has(img.da) .platzhalter{visibility:hidden}
.welt-plakat.serie .welt-bild{box-shadow:4px -4px 0 -1px var(--flaeche3),8px -8px 0 -2px var(--linie2)}
.welt-plakat.gesehen .welt-bild img{filter:saturate(.5) brightness(.6)}
.welt-bild .sicht{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grund)}
.welt-bild .sicht i{display:block;height:100%;background:var(--text)}
.welt-plakat b{margin-top:8px;font-size:var(--t-s);line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.welt-plakat small{font-size:var(--t-s);line-height:18px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.welt-plakat.naechster .welt-bild{outline:2px solid var(--akzent);outline-offset:3px}
.welt-plakat.naechster small{color:var(--akzent)}
.welt-kegel{display:none;position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
.welt-achse{position:relative;margin-top:var(--s7)}
.welt-achse .zeitstrahl{position:relative;z-index:1}
.welt-fleck{position:absolute;top:28px;height:2px;border-radius:999px;background:var(--akzent);z-index:0}
.welt-abschnitte{display:none}
/* Studio-Reihe: links der Vorspann (eine kleine Leinwand in der Kachel), rechts Kopf, fuenf Plakate, die Reihen darin und das Werkband */
.slot-themenwelt.themenwelt-studio{display:grid;grid-template-columns:minmax(200px,248px) minmax(0,1fr);overflow:hidden;padding:0}
.studio-vorspann{display:flex;padding:var(--s3)}
.studio-leinwand{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s5) var(--s3);text-align:center;border-radius:4px;background:var(--grund)}
.studio-art,.studio-kennzeile{font-size:var(--t-s);line-height:20px;color:var(--text3)}
.studio-zeichen{display:block;margin:0;font-family:var(--kond);font-weight:600;font-size:var(--t-3xl);line-height:40px;color:var(--text);overflow-wrap:anywhere}
.studio-schild{display:grid;place-items:center;padding:var(--s3) var(--s4);border-radius:4px;background:var(--text)}
.studio-schild img{display:block;max-width:160px;max-height:64px;object-fit:contain}
.studio-inhalt{display:flex;flex-direction:column;gap:var(--s3);min-width:0;padding:var(--s4) var(--s5) var(--s3)}
.studio-inhalt>.slot-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.studio-inhalt>.slot-kopf h2{margin:0}
.studio-inhalt>.slot-kopf .rechts{margin-left:auto;display:flex;gap:4px}
.studio-mitte{display:grid;grid-template-columns:minmax(0,620px) minmax(240px,1fr);gap:var(--s6);align-items:start}
.studio-mitte.ohne-reihen{grid-template-columns:minmax(0,620px)}
.studio-karten{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3)}
.studio-reihen{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.studio-reihen-liste{display:flex;flex-direction:column}
.studio-reihen-name,.studio-werk-name{font-size:var(--t-s);line-height:20px;color:var(--text3)}
.studio-reihen-name{margin-bottom:4px}
.studio-reihe{display:grid;grid-template-columns:minmax(0,1fr) 96px 52px;align-items:center;gap:12px;padding:var(--s1) 0;min-height:32px;border-top:1px solid var(--linie);color:inherit;text-decoration:none}
.studio-reihe b{font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-reihe small{font-size:var(--t-s);color:var(--text3);text-align:right;font-variant-numeric:tabular-nums}
.studio-reihe:is(:hover,:focus-visible) b{text-decoration:underline;text-underline-offset:3px}
.studio-reihe .zs-teil{max-width:20px}
.studio-reihe .zs-teile{justify-content:flex-start}
.studio-werk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:end;margin-top:var(--s1)}
.studio-werk-name{padding-bottom:var(--s5);white-space:nowrap}
/* In der Reihe (Titelseite): zwei Zeilen zwischen Haarlinien, Zuvor, Perlen, Danach */
.titel-reihe{display:flex;flex-direction:column;margin:var(--s3) 0 var(--s4);max-width:900px}
.titel-reihe-zeile{padding:var(--s3) 0 var(--s2);border-top:1px solid var(--linie2)}
.titel-reihe-zeile:last-child{border-bottom:1px solid var(--linie2)}
.titel-reihe .reihe-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.titel-reihe :is(.reihe-etikett,.reihe-abschnitt,.reihe-folge){font-size:var(--t-s);line-height:20px;color:var(--text3)}
.titel-reihe .reihe-name{font-family:var(--kond);font-weight:600;font-size:20px;line-height:24px;color:var(--text);text-decoration:none}
.titel-reihe .reihe-name:hover{text-decoration:underline;text-underline-offset:3px}
.titel-reihe-zeile.welt .reihe-name{font-size:var(--t-l)}
.titel-reihe .reihe-platz{font-size:14px;line-height:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.titel-reihe .reihe-kopf>.knopf{margin-left:auto}
.reihe-band{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,200px);gap:var(--s4);align-items:center;margin-top:var(--s2)}
.reihe-schnur{min-width:0}
.reihe-schnur .zs-teile{justify-content:flex-start}
.reihe-schnur .zeitstrahl.zs-m .zs-teil{max-width:40px}
.reihe-schnur .zeitstrahl.zs-s .zs-teil{max-width:24px}
.reihe-nb{display:flex;align-items:center;gap:8px;min-width:0;color:inherit;text-decoration:none}
.reihe-nb.reihe-danach{justify-content:flex-end;text-align:right}
.reihe-nb>svg{flex:0 0 auto;width:14px;height:14px;color:var(--text3)}
.reihe-nb-bild{position:relative;flex:0 0 auto;width:32px;aspect-ratio:2/3;border-radius:var(--r-xs);overflow:hidden;background:var(--flaeche3)}
.reihe-nb-bild img{width:100%;height:100%;object-fit:cover}
.reihe-nb-text{display:flex;flex-direction:column;min-width:0}
.reihe-nb-text small{font-size:var(--t-s);line-height:18px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reihe-nb-text b{font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reihe-nb.fehlt{opacity:.55}
.reihe-nb.leer{color:var(--text3)}
.reihe-nb.leer b{font-weight:400;font-size:var(--t-s)}
.reihe-nb.leer small{font-size:var(--t-s)}
a.reihe-nb:hover b{text-decoration:underline;text-underline-offset:3px}
.reihe-weltsatz{margin:var(--s1) 0 0;font-size:var(--t-s);line-height:20px;color:var(--text3)}
.reihe-weltsatz a{color:var(--text2)}
/* Die Perlen der Kachel (nur im Kinosaal, kinosaal.css zeigt sie), das Mass des Checks */
.kachel-perlen{display:none}
.samm-mass{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:var(--s1) 0 0;font-size:var(--t-s);line-height:20px;color:var(--text3)}
.samm-mass svg{flex:0 0 auto;width:14px;height:14px;color:var(--ok);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.samm-mass:not(.voll) svg{color:var(--warn)}
.samm-mass a{color:var(--text2)}
/* Uebersicht Sammlungen bei vielen Sammlungen: Suchfeld und Sprungleiste, Schaufenster, Register (drei Spalten, A bis Z), kleine Reihen */
.samm-suche{display:flex;align-items:flex-end;gap:12px;max-width:640px;margin:16px 0 0}
.samm-suche .feld{flex:1;min-width:0;width:100%}
.samm-suche-zahl{flex:0 0 auto;padding-bottom:8px;font-size:var(--t-s);line-height:20px;color:var(--text3);white-space:nowrap}
.samm-sprung{display:flex;flex-wrap:wrap;gap:var(--s2);margin:12px 0 4px}
.samm-sprung .chip small{margin-left:4px;color:var(--text3)}
.samm-kategorie{scroll-margin-top:72px}
.samm-teil{margin-top:var(--s4)}
.samm-teilkopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-bottom:var(--s2)}
.samm-teilkopf b{font-size:14px;line-height:20px;font-weight:600}
.samm-teilkopf small{font-size:var(--t-s);line-height:20px;color:var(--text3)}
.samm-teilkopf .knopf{margin-left:auto}
.samm-register{column-count:3;column-gap:32px}
.samm-register-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto 32px;gap:var(--s2);align-items:center;min-height:32px;padding:var(--s1) 0;border-top:1px solid var(--linie);break-inside:avoid;color:inherit;text-decoration:none}
.samm-register-zeile b{font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.samm-register-zeile:is(:hover,:focus-visible) b{text-decoration:underline;text-underline-offset:3px}
.samm-register-zeile small{font-size:var(--t-s);color:var(--text3);text-align:right;font-variant-numeric:tabular-nums}
.samm-perlen{display:block;width:max-content;max-width:132px;overflow:hidden}
.samm-perlen .zeitstrahl{flex-wrap:nowrap;gap:0}
.samm-perlen .zs-abschnitt{flex:0 0 auto}
.samm-perlen .zs-teil{flex:0 0 10px;width:10px}
.samm-register-buchstabe{display:block;break-after:avoid;margin:var(--s3) 0 var(--s1);font-family:var(--kond);font-weight:600;font-size:16px;line-height:20px;color:var(--text3)}
.samm-register-buchstabe:first-child{margin-top:0}
.samm-klein-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip.samm-klein-chip{color:var(--text)}
.samm-klein-chip .samm-perlen .zs-teil{flex:0 0 9px;width:9px}
.samm-gefiltert .reihe-buehne,.samm-gefiltert .samm-kategorie .samm-sort{display:none}
@media (max-width:1250px){.samm-register{column-count:2}}
/* Handy (bis 820): Weiter in der Reihe als Karten mit Einrasten, das Weltband mit Chips und ohne Kegel, die Studio-Reihe ohne Werkband, die
Titelseite mit den Perlen ueber Zuvor und Danach, das Schaufenster seitlich rollend, das Register in zwei Spalten ohne Perlen */
@media (max-width:820px){
.slot-fortsetzung.fortsetzung-perlen,.slot-welt{border:0;border-radius:0;background:transparent}
.fortsetzung-perlen{padding:var(--s4) 0 var(--s3)}
.fortsetzung-perlen>.slot-kopf{padding:0 var(--s4)}
.fortsetzung-reihen{flex-direction:row;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--s4) var(--s2);scrollbar-width:none}
.fortsetzung-reihe{flex:0 0 84%;grid-template-columns:1fr;grid-template-areas:"bild" "kopf" "schnur" "knoepfe";gap:var(--s3);padding:var(--s3);border:1px solid var(--linie);border-radius:var(--r-l);background:var(--flaeche2);scroll-snap-align:start;align-content:start}
.fortsetzung-reihe:first-child{padding-top:var(--s3);border-top:1px solid var(--linie)}
.fortsetzung-reihe>.fortsetzung-anhaenger{display:block;grid-area:bild;width:100%}
.fortsetzung-knoepfe{margin-top:0}
.fortsetzung-knoepfe .knopf{flex:1 1 auto;justify-content:center}
.slot-welt{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4) 0}
.welt-kopf{padding:0 var(--s4)}
.welt-name,.welt-name.lang{font-size:36px;line-height:38px}
.welt-fenster-zeile{display:block}
.welt-fenster{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--s4) var(--s2);scrollbar-width:none}
.welt-plakat{flex:0 0 92px;width:92px;scroll-snap-align:start}
.welt-achse{margin:var(--s3) var(--s4) 0}
.welt-achse .zeitstrahl{--zs-luecke:8px;--zs-p:8px;--zs-h:24px}
.welt-fleck{top:22px}
.welt-werkzeuge{flex-wrap:nowrap}
.welt-abschnitte{display:flex;gap:var(--s2);overflow-x:auto;margin:var(--s3) 0 0;padding:0 var(--s4);scrollbar-width:none}
.welt-abschnitte .chip{flex:0 0 auto}
.welt-fehlen{display:none}
.slot-themenwelt.themenwelt-studio{grid-template-columns:1fr}
.studio-vorspann{padding:var(--s3) var(--s3) 0}
.studio-leinwand{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;gap:var(--s1) var(--s3);padding:var(--s3) var(--s4);text-align:left}
.studio-zeichen{font-size:26px;line-height:30px}
.studio-art{flex-basis:100%}
.studio-inhalt{padding:var(--s3) var(--s4) var(--s4)}
.studio-mitte{grid-template-columns:1fr;gap:var(--s3)}
.studio-karten{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--s4));padding:0 var(--s4);scrollbar-width:none}
.studio-karten>.tk{flex:0 0 104px;scroll-snap-align:start}
.studio-reihen-liste{flex-direction:row;gap:8px;overflow-x:auto;margin:0 calc(-1 * var(--s4));padding:0 var(--s4);scrollbar-width:none}
.studio-reihe{flex:0 0 auto;grid-template-columns:auto auto auto;gap:8px;min-height:0;padding:var(--s1) var(--s3);border:1px solid var(--linie3);border-radius:999px}
.studio-reihe .zs-teil{width:12px;flex:0 0 12px}
.studio-inhalt>.slot-kopf{flex-wrap:nowrap}
.studio-inhalt>.slot-kopf h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.studio-inhalt>.slot-kopf [data-mischen-slot]{font-size:0;gap:0}
.reihe-band{grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3)}
.reihe-schnur{grid-column:1 / -1;order:-1}
.titel-reihe .reihe-kopf>.knopf{margin-left:0}
.samm-suche{max-width:none}
.samm-sprung{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:12px calc(-1 * var(--s4)) 4px;padding:0 var(--s4)}
.samm-sprung .chip{flex:0 0 auto}
.samm-kategorie .samm-kat-raster{display:flex;grid-template-columns:none;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--s4));padding:0 var(--s4) var(--s1);scrollbar-width:none}
.samm-kategorie .samm-kat-raster>.samm-kat-karte{flex:0 0 78%;scroll-snap-align:start}
.samm-register{column-count:2;column-gap:16px}
.samm-register-zeile{grid-template-columns:minmax(0,1fr) 24px;gap:var(--s2);min-height:30px}
.samm-register-zeile b{font-size:var(--t-s)}
.samm-register-zeile .samm-perlen{display:none}
}
/* <<< s2-3-reihen */
/* >>> s2-4-reihen
S2-4 (30.10.2026, Wort des Eigentuemers 15:5x und 16:07): die Reihen als Banner in der Suche, die Teile ausserhalb des Archivs mit ihren Bildern
(Weltband, Seite der Reihe), der Kopf der Uebersicht Sammlungen in einer Zeile und ihre Buehne hoeher und als Ganzes ein Link. Die Ordnung und
das klassische Kleid; im Stil Kinosaal gibt app/kinosaal.css das Kleid dazu. Neue Regeln; wo eine Form von heute groesser wird (Buehne,
Bereich, Suchfeld, Sprungleiste), steht die neue Regel hier hinter der alten. Am Fernseher zeichnet keine Seite diese Formen. */
/* Suche: die Reihen als Banner ueber den Treffern, der erste gross, dahinter die Teilreihen nebeneinander; die ganze Flaeche ist der Weg zur
Seite der Reihe (der Link am Namen spannt sich ueber das Banner), Plakate und Knopf liegen darueber */
.suche-banner{display:flex;flex-direction:column;gap:var(--s4);margin:var(--s4) 0 var(--s5)}
.reihe-banner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text plakate" "faden faden";align-items:end;gap:var(--s4) var(--s6);
min-height:280px;padding:var(--s6);border:1px solid var(--linie);border-radius:var(--r-l);background:var(--flaeche2);overflow:hidden;isolation:isolate}
.reihe-banner.klein{min-height:0;padding:var(--s4);gap:var(--s3) var(--s4)}
.reihe-banner-bild{position:absolute;inset:0;z-index:-1}
.reihe-banner-bild img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55}
.reihe-banner-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.6) 50%,rgba(0,0,0,.3)),linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,0) 60%)}
.reihe-banner-text{grid-area:text;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);min-width:0}
.reihe-banner-etikett{font-size:var(--t-s);line-height:20px;color:var(--text3)}
.reihe-banner-name{position:static;margin:0;font-family:var(--kond);font-weight:600;font-size:var(--t-3xl);line-height:40px;letter-spacing:-.01em;overflow-wrap:anywhere}
.reihe-banner.klein .reihe-banner-name{font-size:var(--t-xl);line-height:24px}
.reihe-banner-weg{color:var(--text);text-decoration:none}
.reihe-banner-weg::after{content:"";position:absolute;inset:0;z-index:0}
.reihe-banner-weg:focus-visible{outline:none}
.reihe-banner:has(.reihe-banner-weg:focus-visible){outline:2px solid var(--akzent);outline-offset:2px}
.reihe-banner:hover .reihe-banner-weg{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.reihe-banner-zahlen{margin:0;font-size:14px;line-height:20px;color:var(--text2)}
.reihe-banner-satz{margin:0;max-width:64ch;font-size:14px;line-height:20px;color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reihe-banner-text>.knopf{position:relative;z-index:1;margin-top:var(--s2)}
.reihe-banner-plakate{grid-area:plakate;position:relative;z-index:1;display:flex;gap:var(--s3);align-self:center}
.reihe-banner-plakat{position:relative;display:block;flex:0 0 auto;width:104px;aspect-ratio:2/3;border-radius:var(--r-xs);overflow:hidden;background:var(--flaeche3);box-shadow:0 12px 32px rgba(0,0,0,.55);transition:transform .2s}
.reihe-banner-plakat:is(:hover,:focus-visible){transform:translateY(-4px)}
.reihe-banner.klein .reihe-banner-plakat{width:64px}
.reihe-banner.klein .reihe-banner-plakat:nth-child(n+4){display:none}
.reihe-banner-plakat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reihe-banner-plakat .platzhalter{position:absolute;inset:0;display:flex;align-items:flex-end;padding:var(--s2);font-size:var(--t-s);line-height:16px;font-weight:600;color:var(--text2);overflow:hidden;overflow-wrap:anywhere}
.reihe-banner-plakat.gesehen img{filter:saturate(.5) brightness(.6)}
.reihe-banner-plakat .haken{position:absolute;right:4px;bottom:4px;width:18px;height:18px;border-radius:999px;display:grid;place-items:center;background:var(--text);color:var(--grund)}
.reihe-banner-plakat .haken svg{width:12px;height:12px}
.reihe-banner-faden{grid-area:faden;min-width:0}
.reihe-banner-faden .zeitstrahl .zs-teile{justify-content:flex-start}
.suche-banner-weitere{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:var(--s4)}
/* Weltband: ein Teil ausserhalb des Archivs im Fenster mit dem Plakat von TMDB, der Marke "Nicht im Archiv" und dem Weg zum Anfragen; ohne Bild
die ruhige gestreifte Flaeche; der Text der Welt unter der Kennzeile (am PC) */
.welt-plakat.fehlt .welt-bild{background:repeating-linear-gradient(135deg,var(--flaeche2),var(--flaeche2) 8px,var(--flaeche3) 8px,var(--flaeche3) 16px);box-shadow:inset 0 0 0 1px var(--linie3)}
.welt-plakat.fehlt.ohne-bild .welt-bild .platzhalter{color:var(--text3)}
.welt-plakat.fehlt b{color:var(--text2)}
.welt-fehlt-marke{position:absolute;left:4px;top:4px;right:4px;z-index:1;display:block;padding:0 4px;border-radius:var(--r-xs);
background:rgba(0,0,0,.78);color:var(--warn);font-size:var(--t-xs);line-height:16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.knopf.welt-anfragen{align-self:flex-start;min-height:0;margin-top:var(--s1);padding:0;border:0;background:none;color:var(--akzent);font-size:var(--t-s);line-height:18px}
.knopf.welt-anfragen:hover{text-decoration:underline;text-underline-offset:3px}
.welt-text{margin:0;font-size:var(--t-s);line-height:18px;color:var(--text2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.welt-achse .zs-teil.fehlt .zs-ziel{cursor:pointer}
/* Seite der Reihe (klassisch; der Kinosaal in app/kinosaal.css): die Liste der fehlenden Teile mit kleinem Plakat und dem Ueberblick von TMDB */
.aw-reihenseite .aw-fehlend-liste.mit-bildern>li{grid-template-columns:40px 40px minmax(0,1fr) auto}
.aw-fehlend-bild{display:block;width:40px;aspect-ratio:2/3;border-radius:var(--r-xs);overflow:hidden;background:var(--flaeche3)}
.aw-fehlend-bild img{display:block;width:100%;height:100%;object-fit:cover}
.aw-fehlend-text{display:-webkit-box;max-width:90ch;margin-top:var(--s1);font-size:var(--t-s);line-height:18px;color:var(--text2);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Uebersicht Sammlungen: Bereich, Suchfeld und Sprungleiste in einer Zeile ueber die ganze Breite, je eine Stufe groesser; die Buehne hoeher, die
ganze Flaeche ein Link (Plakate und Knoepfe liegen darueber) */
.samm-kopfzeile{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s4) var(--s6);margin:var(--s4) 0 var(--s5)}
.samm-kopfzeile .samm-bereich{flex:0 0 auto;margin:0}
.samm-kopfzeile .samm-bereich .etikett{font-size:14px}
.samm-kopfzeile .samm-bereich .segment button{min-height:var(--zeile);padding:0 var(--s4);font-size:14px}
.samm-kopfzeile .samm-suche{flex:1 1 320px;max-width:none;margin:0}
.samm-kopfzeile .samm-suche .feld{min-height:var(--zeile);font-size:var(--t-l)}
.samm-kopfzeile .samm-sprung{flex:1 1 auto;flex-wrap:nowrap;margin:0}
.samm-kopfzeile .samm-sprung .chip{flex:1 1 auto;justify-content:center;min-height:var(--zeile);padding:0 var(--s4);font-size:14px;font-weight:600}
.samm-kopfzeile .samm-sprung .chip small{margin-left:var(--s2);font-size:var(--t-s);font-weight:500}
.reihe-buehne{min-height:340px;cursor:pointer}
.reihe-buehne-weg{position:absolute;inset:0;z-index:0}
.reihe-buehne .knoepfe,.reihe-buehne .teile{position:relative;z-index:1}
.reihe-buehne .teile{justify-content:safe flex-end}
.reihe-buehne .teil{width:104px}
.reihe-buehne:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:820px){
.reihe-banner,.reihe-banner.klein{min-height:0;padding:var(--s4);gap:var(--s3)}
.reihe-banner-name{font-size:var(--t-2xl);line-height:30px}
.reihe-banner-plakat,.reihe-banner.klein .reihe-banner-plakat{width:72px}
.reihe-banner-plakat:nth-child(n+2){display:none}
.reihe-banner-text>.knopf{display:none}
.suche-banner-weitere{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--s4));padding:0 var(--s4);scrollbar-width:none}
.suche-banner-weitere>.reihe-banner{flex:0 0 84%;scroll-snap-align:start}
.welt-text{display:none}
.welt-fehlt-marke{white-space:normal;line-height:14px}
.aw-reihenseite .aw-fehlend-liste.mit-bildern>li{grid-template-columns:32px 32px minmax(0,1fr)}
.aw-reihenseite .aw-fehlend-liste.mit-bildern>li .wert{grid-column:3}
.aw-fehlend-bild{width:32px}
.samm-kopfzeile{flex-direction:column;align-items:stretch;gap:var(--s3)}
.samm-kopfzeile .samm-suche{flex:0 0 auto}
/* Handy (Wort des Eigentuemers 30.10.2026, 21:50): nichts laeuft mehr nach rechts aus dem Bild. Das Etikett steht ueber dem Segment, die
Bereiche und die Kategorien brechen in Zeilen um und fuellen die Breite, statt hinter dem Rand zu verschwinden */
.samm-kopfzeile .samm-bereich{display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);min-width:0}
.samm-kopfzeile .samm-bereich .segment{display:flex;flex-wrap:wrap;flex:1 1 auto;min-width:0;max-width:100%;overflow:visible}
.samm-kopfzeile .samm-bereich .segment button{flex:1 1 auto;min-width:0;padding:0 var(--s3);text-align:center;white-space:nowrap}
.samm-kopfzeile .samm-sprung{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
.samm-kopfzeile .samm-sprung .chip{flex:1 1 auto;min-width:0;padding:0 var(--s3)}
.samm-kopfzeile .samm-suche{flex-wrap:wrap;gap:var(--s1) 12px}
.samm-kopfzeile .samm-suche-zahl{flex:1 1 100%;padding-bottom:0;text-align:right}
.reihe-buehne{min-height:0}
.reihe-buehne .teil{width:80px}
}
/* <<< s2-4-reihen */
.vw-zustand{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--r-m);overflow:hidden}
.vw-komponente{background:var(--flaeche);padding:16px;min-height:96px}
.vw-komponente>div{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.vw-komponente b{font-weight:500}
.vw-komponente .klein{line-height:1.45;overflow-wrap:anywhere}
.vw-komponente.fehler{box-shadow:inset 2px 0 0 var(--krit)}
.vw-komponente.warnung{box-shadow:inset 2px 0 0 var(--warn)}
.vw-geheim{display:flex;gap:12px;align-items:center;background:var(--grund);border:1px solid var(--linie2);border-radius:var(--r-s);padding:12px 16px}
.vw-geheim code{font-family:var(--mono);font-size:var(--t-m);overflow-wrap:anywhere;flex:1;user-select:all}
.vw-paare{display:grid;gap:0}
.vw-paar{display:grid;grid-template-columns:160px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--linie);font-size:var(--t-m)}
.vw-paar>span:first-child{color:var(--text3)}
.vw-paar>span:last-child{overflow-wrap:anywhere}
.vw-aktion{font-family:var(--mono);font-size:var(--t-s);white-space:nowrap}
.vw-meta{font-size:var(--t-s);color:var(--text2);max-width:460px;min-width:220px}
.vw-meta span{display:inline-block;margin-right:12px;overflow-wrap:anywhere;max-width:100%}
.vw-meta i{font-style:normal;color:var(--text3);font-family:var(--mono);font-size:var(--t-xs)}
.anf-filter{margin-bottom:16px}
.anf-verlauf{list-style:none;margin:0;padding:0}
.anf-verlauf li{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--linie)}
.anf-verlauf li:last-child{border-bottom:0}
.anf-verlauf .m{font-family:var(--mono);font-size:var(--t-xs);color:var(--text3)}
.anf-verlauf p{margin-top:4px}
.vw-einst td:first-child{white-space:normal;min-width:240px}
.vw-einst td:first-child .klein{max-width:560px}
.vw-seiten{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:16px}
@media (max-width:1250px){.vw-konto-raster{grid-template-columns:minmax(0,1fr)}}
/* V-18 (S5b Phase 3): am schmalen PC (1024 px) ragten Geraete, Rolle, Szenen und Musik um 2 bis 34 px ueber ihre Box - mit 8 px Zellenabstand
statt 12 passen sie hinein */
@media (max-width:1250px){.verwaltung .tabelle th,.verwaltung .tabelle td{padding:8px}}
/* Zellen der Verwaltung duerfen umbrechen (Audit-Einzelheiten, Rolle, Szenen, Musik ragten 2 bis 58 px ueber die Box) - die Tabellen der
Verwaltung sind Arbeitslisten, kein Datenblatt; ein Rollbalken quer ist dort schlechter als eine zweite Zeile */
.verwaltung .tabelle td{white-space:normal;overflow-wrap:anywhere}
@media (max-width:820px){.vw-recht{grid-template-columns:10px minmax(0,1fr)}.vw-recht select.feld{grid-column:2;justify-self:start}.vw-auditfilter .feld{flex:1 1 140px}}
/* ---------------------------------------------------------------- Player (Phase 8): ein ruhiger, dunkler Raum - die Bedienung tritt zurueck, sobald der Film laeuft */
html.player-offen{overflow:hidden}
/* 100dvh statt inset:0: auf dem Handy schliesst der Layout-Viewport die Adressleiste ein, die beim Scrollen ein- und ausfaehrt.
Der Player ragte darunter, die Bedienung lag halb ausserhalb, und man schob das Bild hin und her, um heranzukommen.
Die erste Zeile bleibt als Rueckfall fuer Browser ohne dvh. */
.player{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:200;background:#000;color:var(--pl-text);display:grid;grid-template-rows:auto 1fr auto;font-size:var(--t-m);user-select:none;overscroll-behavior:contain}
.player{width:100dvw;height:100dvh}
/* >>> toast-player
Runde 6b (23.10.2026, offene Frage 7 aus Runde 5b): die Meldungen ueber MX.toast (Clip erstellt, Nicht in den Verlauf) lagen bei offenem
Player unter seiner Ebene (Toasts 120, Player 200) und waren nicht zu sehen; im Stil Kinosaal stehen sie seit Runde 5b ueber ihm, jetzt
auch im klassischen Kleid. Am Fernseher bleibt alles, wie es war. Eine neue Regel, keine von heute geaendert. */
html.player-offen:not(.tv) .toasts{z-index:210}
/* <<< toast-player */
.player.ruhig{cursor:none}
/* position:fixed am .player ist TRAGEND und kein Schmuck: .pl-video darunter ist position:absolute und bezieht
inset/width/height auf den naechsten POSITIONIERTEN Vorfahren. Nimmt jemand das fixed weg (etwa um den Player
"ins Layout zu haengen"), rutscht der Bezug auf den Initial Containing Block und das Video steht irgendwo.
Nachgemessen am 21.09.2026 bei 891x411 (Galaxy A56 im Querformat): video.offsetParent === DIV.player,
Videoflaeche 891x411 - also deckungsgleich mit dem Player. So muss es bleiben.
object-fit:contain MUSS contain bleiben. Es sah am Handy so aus, als nutze der Player den Schirm nicht:
ein 2.39:1-Film hatte ringsum Rand, auch links und rechts. Die Ursache liegt NICHT hier, sondern im Material -
1288 Dateien im Bestand liegen als 1920x1080 und 668 als 3840x2160, also im 16:9-Rahmen mit EINGEBRANNTEN
Balken (ffmpeg cropdetect an "A Bittersweet Life (2005)": Container 1920x1080 SAR 1:1, Bildinhalt aber
crop=1756:814:0:132 - 132 px Schwarz stecken in der Datei). contain legt diesen 16:9-Rahmen korrekt auf den
19.5:9-Schirm des A56 und laesst dabei (2340-1920)/2 = 210 px je Seite frei; gemessen wurden 211.
Wer hier auf cover umstellt, schneidet bei einem 1.85:1-Film in 16:9 echtes Bild weg, um ein Problem zu
kaschieren, das im Material sitzt. Die Balken gehoeren beim Einlesen weggeschnitten, nicht hier.
Bis dahin gibt es den Schalter "Bild füllen" (Entscheidung vom 21.09.2026): er misst den Bildinhalt im Rahmen und
vergroessert NUR auf Wunsch und nur so weit, wie der gemessene Inhalt ganz hineinpasst - siehe die Regeln bei .pl-ut
weiter unten. Diese Grundregel bleibt davon unberuehrt: aus ist contain. */
.pl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.pl-video::cue{background:rgba(0,0,0,.72);color:var(--pl-text);font-family:inherit;font-size:clamp(15px,2.4vw,28px);line-height:1.35}
.pl-oben,.pl-unten{position:relative;z-index:2;transition:opacity .25s ease}
/* Die Raender der BEDIENUNG folgen der sicheren Flaeche - die BILDflaeche darf das nie tun, sonst schrumpft der Film
neben der Aussparung. Deshalb stehen die env()-Werte hier und nicht am .player oder .pl-video.
env(safe-area-inset-top) gehoert dazu: index.html traegt viewport-fit=cover, die Seite reicht also bis unter die
Aussparung. Im Hochformat sitzt beim Galaxy A56 das Kameraloch oben mittig, bei iPhones der Notch - ohne diese
Zeile liegt der Schliessen-Knopf darunter. Ohne Aussparung meldet der Browser 0, dann bleiben die 18px. */
.pl-oben{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 48px max(24px,env(safe-area-inset-left));background:linear-gradient(var(--pl-verlauf),transparent)}
.pl-unten{grid-row:3;padding:48px max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:linear-gradient(transparent,var(--pl-verlauf))}
.player.ruhig .pl-oben,.player.ruhig .pl-unten{opacity:0;pointer-events:none}
.pl-titel{min-width:0;display:grid;gap:4px}
.pl-titel b{font-size:var(--t-l);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-titel span{font-size:var(--t-s);color:var(--pl-text3)}
.pl-mitte{grid-row:2;position:relative;z-index:2;display:grid;place-items:center;pointer-events:none;padding:0 16px}
.pl-mitte>*{pointer-events:auto}
.pl-lade{display:flex;align-items:center;gap:12px;color:var(--pl-text2);background:var(--pl-schleier);padding:12px 16px;border-radius:var(--r-p);pointer-events:none}
.pl-kreis{width:18px;height:18px;border-radius:50%;border:2px solid var(--pl-leer);border-top-color:var(--pl-text);animation:pl-dreh .8s linear infinite}
@keyframes pl-dreh{to{transform:rotate(360deg)}}
.pl-karte{display:grid;gap:8px;justify-items:start;max-width:520px;background:var(--pl-flaeche);border:1px solid var(--pl-linie);border-radius:var(--r-l);padding:24px}
/* Hinweis im Player (etwa: wegen der Verbindung heruntergestuft) - oben mittig, verschwindet von selbst */
.pl-hinweis{position:absolute;left:50%;top:max(64px,calc(env(safe-area-inset-top) + 56px));transform:translateX(-50%);z-index:4;max-width:min(560px,calc(100vw - 32px));padding:8px 16px;border-radius:var(--r-m);background:var(--pl-flaeche);border:1px solid var(--pl-linie);color:var(--pl-text2);font-size:var(--t-m);line-height:1.4;text-align:center}
.pl-hinweis[hidden]{display:none}
.pl-karte b{font-size:var(--t-xl);font-weight:500}
.pl-karte span{color:var(--pl-text2);line-height:1.5}
.pl-karte .pl-ausweg{color:var(--pl-text3)}
/* >>> player-texte
W5 (29.10.2026, Player-Texte): der Ausweg ist der einzige Satz der Fehlerkarte, nicht mehr der blasse zweite (app/player.js fehlerZeigen); der
Chip (app/player.js chip) zeigt die neue Stufe nach einem Wechsel der Automatik kurz an der Stelle des Hinweises. Neue Regeln, keine von heute
geaendert: die erste steht hinter der alten und gilt deshalb. */
.pl-karte .pl-ausweg{color:var(--pl-text2)}
.pl-hinweis.pl-chip{padding:4px 12px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* WT-8: der Name der Spur aus der Datei klein unter Ton und Untertitel (app/player.js Block spurtitel), eine Zeile, lang mit Ellipse */
.pl-wahl button small.pl-spurtitel{display:block;margin-left:0;font-size:var(--t-s);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* <<< player-texte */
.pl-karte-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pl-leiste{position:relative;height:18px;cursor:pointer;touch-action:none;outline:0}
.pl-leiste::before,.pl-puffer,.pl-stand{content:"";position:absolute;left:0;top:7px;height:4px;border-radius:var(--r-xs)}
.pl-leiste::before{right:0;background:var(--pl-linie2)}
.pl-puffer{background:var(--pl-puffer)}
.pl-stand{background:var(--akzent,var(--pl-text))}
.pl-griff{position:absolute;top:3px;width:12px;height:12px;translate:-50% 0;border-radius:50%;background:var(--pl-text);transform:scale(0);transition:transform .12s ease}
.pl-leiste:hover .pl-griff,.pl-leiste:focus-visible .pl-griff{transform:scale(1)}
.pl-leiste:focus-visible::before{box-shadow:0 0 0 2px var(--pl-text3)}
.pl-zeitmarke{position:absolute;bottom:22px;transform:translateX(-50%);background:var(--pl-verlauf);border:1px solid var(--pl-linie2);border-radius:var(--r-s);padding:4px 8px;font-family:var(--mono);font-size:var(--t-s);white-space:nowrap;pointer-events:none}
.pl-tasten{display:flex;align-items:center;gap:4px;margin-top:8px}
.pl-frei{flex:1}
.pl-knopf{background:none;border:0;color:var(--pl-text);width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;cursor:pointer;flex:none}
.pl-knopf:hover{background:var(--pl-linie)}
.pl-knopf:focus-visible{outline:2px solid var(--pl-text);outline-offset:1px}
.pl-knopf svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pl-knopf.gross{width:46px;height:46px}.pl-knopf.gross svg{width:26px;height:26px;fill:currentColor;stroke-width:1}
.pl-knopf.text{width:auto;border-radius:var(--r-p);padding:0 16px 0 12px;display:inline-flex;gap:8px;font-size:var(--t-s)}
.pl-knopf.text.fertig{background:var(--pl-text);color:#000}
/* Tonregler: dieselbe Gestalt wie die Positionsleiste darueber - 4 px Schiene, Akzentfarbe fuer den gefuellten Teil,
runder Griff, der beim Anfassen aufgeht. Ein nacktes accent-color ueberlaesst dem Betriebssystem, wie der Regler
aussieht; im dunklen Player passte das nie zusammen. --f setzt der Player (lautZeichnen) - CSS kann den Wert eines
range-Feldes nicht selbst lesen. Der Schatten ist keine Zierde: ohne ihn verschwindet die Schiene auf hellem Bild. */
.pl-laut{-webkit-appearance:none;appearance:none;width:84px;height:18px;margin:0 4px;background:none;cursor:pointer;flex:none;--f:100%}
.pl-laut[hidden]{display:none}
.pl-laut::-webkit-slider-runnable-track{height:4px;border-radius:var(--r-xs);box-shadow:0 1px 2px var(--pl-schleier);background:linear-gradient(90deg,var(--akzent,var(--pl-text)) var(--f),var(--pl-leer) var(--f))}
.pl-laut::-moz-range-track{height:4px;border-radius:var(--r-xs);background:var(--pl-leer);box-shadow:0 1px 2px var(--pl-schleier)}
.pl-laut::-moz-range-progress{height:4px;border-radius:var(--r-xs);background:var(--akzent,var(--pl-text))}
.pl-laut::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;margin-top:-4px;border:0;border-radius:50%;background:var(--pl-text);box-shadow:0 0 0 1px var(--pl-schleier);transition:transform .12s ease}
.pl-laut::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--pl-text);box-shadow:0 0 0 1px var(--pl-schleier);transition:transform .12s ease}
.pl-laut:hover::-webkit-slider-thumb,.pl-laut:focus-visible::-webkit-slider-thumb{transform:scale(1.3)}
.pl-laut:hover::-moz-range-thumb,.pl-laut:focus-visible::-moz-range-thumb{transform:scale(1.3)}
.pl-laut:focus-visible{outline:2px solid var(--pl-text);outline-offset:2px;border-radius:var(--r-p)}
.pl-zeit{font-family:var(--mono);font-size:var(--t-s);color:var(--pl-text2);margin-left:8px;white-space:nowrap}
.pl-wahl{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:74px;z-index:3;max-height:min(70vh,560px);overflow:auto;min-width:260px;max-width:min(420px,calc(100vw - 32px));
background:var(--pl-flaeche);border:1px solid var(--pl-linie);border-radius:var(--r-m);padding:8px 8px 12px}
.pl-wahl h4{font-size:var(--t-s);font-weight:500;color:var(--pl-text3);margin:12px 8px 4px}
.pl-wahl button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--pl-text2);padding:8px 12px 8px 24px;border-radius:var(--r-s);font-size:var(--t-m);cursor:pointer;position:relative}
.pl-wahl button:hover:not(:disabled){background:var(--pl-hover)}
.pl-wahl button.an::before{content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;translate:0 -50%;border-radius:50%;background:var(--akzent,var(--pl-text))}
.pl-wahl button:disabled{color:var(--pl-text4);cursor:default}
.pl-wahl button small{color:var(--pl-text4);margin-left:8px}
/* Lange Untertitellisten: 128 Titel im Bestand tragen 20 und mehr Spuren, einer 80. Die eigenen Sprachen stehen oben,
der Rest klappt auf - weggelassen wird nichts, wer Untertitel braucht, braucht genau seine. [hidden] muss hier
ausdruecklich stehen: das display:block eine Zeile weiter oben schlaegt sonst die Regel des Browsers. */
.pl-wahl button[hidden],.pl-wahl .pl-mehr[hidden]{display:none}
.pl-wahl h4 span{color:var(--pl-puffer)}
.pl-wahl:not(.ut-offen) [data-ut-weit]{display:none}
.pl-wahl .pl-mehr{display:block;width:100%;text-align:left;background:none;border:0;color:var(--pl-text3);padding:8px 12px 8px 24px;border-radius:var(--r-s);font-size:var(--t-s);cursor:pointer}
.pl-wahl .pl-mehr:hover{background:var(--pl-hover);color:var(--pl-text2)}
.pl-wahl .pl-mehr:focus-visible{outline:2px solid var(--pl-text);outline-offset:-2px}
.pl-ut-suche{display:block;width:calc(100% - 16px);margin:4px 8px 8px;padding:8px 12px;border:1px solid var(--pl-linie2);border-radius:var(--r-s);background:var(--pl-hover);color:var(--pl-text);font:inherit;font-size:var(--t-m)}
.pl-ut-suche::placeholder{color:var(--pl-text4)}
.pl-ut-suche:focus-visible{outline:2px solid var(--pl-text);outline-offset:1px}
.pl-ut-leer{font-size:var(--t-s);color:var(--pl-text3);margin:4px 12px 12px 24px}
.pl-ut-leer[hidden]{display:none}
/* Mehrere Fassungen (Auftrag 14, 24.09.2026) - im Menue "Fassung" des Players und im Blatt "Welche Fassung?" vor dem Start
(app/player.js, Block "fassungswahl"). Im Menue stehen die Daten UNTER dem Namen, wie "mehr als hier gemessen": in 260 px waeren
sie daneben gequetscht. Im Blatt waechst jede Zeile nach unten statt nach rechts - am Handy (412 px) laeuft nichts hinaus. */
.pl-wahl button small.pl-fassung-daten{display:block;margin-left:0}
.fw-liste{max-height:none;overflow:visible}
.fw-zeile{align-items:flex-start}
.fw-zeile input{margin-top:calc((1lh - 16px) / 2)}
.wahl-zeile .fw-text{display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere}
.wahl-zeile .fw-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-weight:500;color:var(--text)}
.wahl-zeile .fw-name .status{display:inline-flex;flex-direction:row}
.wahl-zeile .fw-daten{display:block;color:var(--text2);font-size:var(--t-s);font-variant-numeric:tabular-nums}
.fw-zeile.fw-aus{cursor:default;opacity:.62}
.wahl-zeile small.warn-text{color:var(--warn)} /* "gerade nicht erreichbar" - sonst graut ".wahl-zeile small" den Grund mit aus */
.fw-grund{margin:12px 0 0;color:var(--text3)}
.fw-merken{display:flex;align-items:flex-start;gap:12px;margin-top:16px;cursor:pointer;font-size:var(--t-m);color:var(--text)}
.fw-merken input{margin-top:calc((1lh - 16px) / 2)}
.fw-merken span{display:flex;flex-direction:column;gap:4px;min-width:0}
.fw-merken small{color:var(--text3);font-size:var(--t-s)}
/* Inventar > Technik: bei mehreren Fassungen traegt jede ihren Namen - denselben wie im Blatt und im Player */
.fassung-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-bottom:12px}
.fassung-name b{font-weight:500}
.fassung-name span{color:var(--text2);font-size:var(--t-s)}
/* "Bild füllen" (player.js, Block "bildfuellen"). Gefuellt wird nur der GEMESSENE Inhalt, so gross, wie er ganz
hineinpasst: in Chromium per object-view-box - das Feld bleibt, wie es ist, und mit ihm die Untertitel des Browsers -,
sonst per transform am Video. Beide Werte setzt der Player als Inline-Stil; hier stehen der Uebergang, der Rueckfall
und das, was die Vergroesserung nicht beruehren darf. Die Bedienleisten liegen mit z-index 2 darueber und behalten
ihre env()-Raender: vergroessert wird nie der Player, immer nur das Video in ihm. */
.pl-video{transition:transform .3s ease,object-view-box .3s ease}
/* Rueckfall, wenn sich die Balken nicht messen lassen: ein ZOOM auf den ganzen Rahmen. Er kann echtes Bild kosten und
heisst in der Oberflaeche deshalb auch so; der Player setzt die Klasse nur, wo der Schirm breiter ist als der Rahmen
(im Hochformat schnitte cover drei Viertel eines 16:9-Bildes weg). */
.pl-video.pl-zoom{object-fit:cover}
/* transform vergroessert das Video ueber den Player hinaus. clip statt hidden: hidden machte den Player zum
Scrollcontainer, und ein Fokuswechsel koennte ihn samt Bedienung verschieben. */
.player.pl-gefuellt{overflow:clip}
/* Nahtloser Wechsel (Auftrag 42, player.js Block "nahtlos"): das zweite Video laedt unsichtbar ueber dem laufenden vor, mit opacity statt
display:none, damit es wie das laufende gezeichnet wird und sein erstes Bild beim Tausch schon dasteht. Beim Tausch blendet es in 80 ms
ein, schon mit play(); das alte laeuft darunter weiter, bis das neue laeuft, und bleibt stehen, bis die Blende vorbei ist; es gibt also
keinen Augenblick ohne Bild. Klicks gehen nie an das verdeckte. */
.pl-video.pl-verdeckt{opacity:0;pointer-events:none}
.pl-video.pl-blende{transition:opacity 80ms linear,transform .3s ease,object-view-box .3s ease}
.pl-knopf[aria-pressed="true"]{background:var(--pl-an);box-shadow:inset 0 0 0 1px var(--pl-puffer)}
.pl-knopf[aria-pressed="true"]:hover{background:var(--pl-an2)}
/* Untertitel, solange transform das Video vergroessert: dann zeichnet sie der Player hier statt der Browser - im Video
wanderten sie mit und fielen unten aus dem Bild (nachgestellt am 24.09.2026). Dieselben Werte wie .pl-video::cue, ueber
dem Bild und unter der Bedienung (z-index 1 gegen 2), mit Abstand zur Aussparung und zur Gestenleiste. */
.pl-ut{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:calc(4% + env(safe-area-inset-bottom));
z-index:1;text-align:center;pointer-events:none;color:var(--pl-text);font-size:clamp(15px,2.4vw,28px);line-height:1.35}
.pl-ut[hidden]{display:none}
.pl-ut span{background:rgba(0,0,0,.72);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Untertitel ueber der Leiste (P7, player.js Block untertitel-lage): solange die Leiste steht (ohne .ruhig, ohne .fehler), ruecken die
Untertitel um ihre Hoehe nach oben; --pl-leiste-hoch misst der Player. In Chromium, am Fernseher und in Safari der Behaelter des Browsers,
sonst die eigene Zeile. Die Regeln mit dem Pseudoelement stehen allein: ein unbekanntes verwirft sonst die ganze Regel. Die Bewegung
folgt dem Ein- und Ausblenden der Leiste (0,25 s). */
.pl-video::-webkit-media-text-track-container{transition:transform .25s ease}
.player:not(.ruhig):not(.fehler) .pl-video::-webkit-media-text-track-container{transform:translateY(calc(var(--pl-leiste-hoch,0px) * -1))}
.player .pl-ut{transition:bottom .25s ease}
.player:not(.ruhig):not(.fehler) .pl-ut{bottom:max(calc(4% + env(safe-area-inset-bottom)),calc(var(--pl-leiste-hoch,0px) + 8px))}
@media (prefers-reduced-motion:reduce){.pl-video::-webkit-media-text-track-container{transition:none}}
@media (prefers-reduced-motion:reduce){.player .pl-ut{transition:none}}
/* Pause-Bild (P7): das letzte Bild auf einer Leinwand ueber dem Video, solange der Player in der Pause nachlaedt; gelegt wie .pl-video
(contain, Bild füllen per Inline-Stil) und nie im Weg eines Klicks */
.pl-standbild{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.pl-standbild.pl-zoom{object-fit:cover}
/* Tastenkuerzel (P7, player.js Block tastenkuerzel): ueber dem ganzen Player ein Schleier, darauf die Tafel; ein Klick auf den Schleier
schliesst sie. Der Knopf in der Leiste fehlt, wo keine Tastatur zu erwarten ist (schmal, nur Touch), und am Fernseher (tv.css: dort
fuehrt das Menue hin). */
.pl-tastenblatt{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:var(--pl-schleier)}
.pl-tastenblatt[hidden]{display:none}
.pl-tastenblatt-flaeche{width:min(640px,100%);max-height:100%;overflow:auto;background:var(--pl-flaeche);border:1px solid var(--pl-linie);border-radius:var(--r-l);padding:var(--s4) var(--s5) var(--s5);color:var(--pl-text2)}
.pl-tastenblatt-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pl-tastenblatt-kopf b{font-size:var(--t-l);font-weight:500;color:var(--pl-text)}
.pl-tastengruppe h4{font-size:var(--t-s);font-weight:500;color:var(--pl-text3);margin:16px 0 4px}
.pl-tastenliste{margin:0;display:grid;grid-template-columns:minmax(200px,max-content) 1fr}
.pl-tastenzeile{grid-column:1/-1;display:grid;grid-template-columns:minmax(200px,max-content) 1fr;grid-template-columns:subgrid;gap:4px 16px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--pl-linie)}
.pl-tastenzeile dt{display:flex;flex-wrap:wrap;gap:4px}
.pl-tastenzeile dd{margin:0;font-size:var(--t-s);line-height:1.45}
.pl-tastenblatt kbd{font-family:var(--mono);font-size:var(--t-xs);color:var(--pl-text);background:var(--pl-an);border:1px solid var(--pl-linie2);border-bottom-width:2px;border-radius:var(--r-xs);padding:0 var(--s2);white-space:nowrap}
.pl-tastenblatt-fuss{margin:12px 0 0;font-size:var(--t-s);color:var(--pl-text3)}
/* >>> player-stats
SN-1 (06.11.2026, app/player.js Block stats): die Tafel Statistik oben rechts unter dem Schliessen, halbtransparent auf dem Bild, ueber der
Leiste und den Untertiteln frei; sie rollt in sich, statt die Leiste zu verdecken. Werte in der Mono, was der Browser nicht weiss, blass;
Warnung und Fehler nur in den Farben der Lage. Bis 820 px (Handy, der Umbruch der Seite) ein Blatt von unten ueber der vollen Breite. Neue Regeln, keine von heute geaendert;
am Fernseher dieselbe Tafel (das Menue fuehrt hin). */
.pl-stats{position:absolute;top:max(72px,calc(env(safe-area-inset-top) + 64px));right:max(16px,env(safe-area-inset-right));z-index:3;width:min(440px,calc(100vw - 32px));max-height:calc(100% - 72px - var(--pl-leiste-hoch,120px) - 16px);overflow:auto;overscroll-behavior:contain;background:var(--pl-verlauf);border:1px solid var(--pl-linie);border-radius:var(--r-m);color:var(--pl-text2);font-size:var(--t-s);line-height:1.45;user-select:text}
.pl-stats[hidden]{display:none}
.pl-stats-flaeche{padding:var(--s2) var(--s3) var(--s3)}
.pl-stats-kopf{display:flex;align-items:center;gap:var(--s2)}
.pl-stats-kopf b{flex:1;font-size:var(--t-m);font-weight:500;color:var(--pl-text)}
.pl-stats-gruppe h4{margin:var(--s3) 0 var(--s1);font-size:var(--t-xs);font-weight:500;color:var(--pl-text3)}
.pl-stats .werte{margin:0;display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr);gap:var(--s1) var(--s3)}
.pl-stats .werte>div{display:contents}
.pl-stats .werte dt{color:var(--pl-text3)}
.pl-stats .werte dd{margin:0;min-width:0;font-family:var(--mono);color:var(--pl-text);overflow-wrap:anywhere}
.pl-stats .status{display:inline;padding:0;min-height:0;background:none;font-size:inherit;letter-spacing:0;white-space:normal}
.pl-stats-unbekannt{color:var(--pl-text4)}
@media (max-width:820px){.pl-stats{top:auto;bottom:0;left:0;right:0;width:auto;max-height:62vh;border-width:1px 0 0;border-radius:var(--r-l) var(--r-l) 0 0;padding-bottom:env(safe-area-inset-bottom)}}
/* <<< player-stats */
/* >>> zusammen
WT-0b (06.11.2026, app/gleichlauf.js): Gemeinsam schauen. Im Player die Plakette im Kopf und die Zeile unter dem Titel, der Gastmodus der
Leiste (kein Zeitstrahl zum Ziehen, keine Spruenge, kein Intro, keine naechste Folge), die Mitte ohne Kreis; das Blatt des Hosts (MX.dialog),
die Seite #/zusammen (der Block der Startseite und die Einladung von Konten sind seit UI-1 gestrichen). Am Fernseher gibt es nichts davon. */
.player .pl-raum{margin-left:auto;margin-right:var(--s2);align-self:center;cursor:pointer;border:1px solid var(--pl-linie);background:var(--pl-verlauf);color:var(--pl-text)}
.player .pl-raum[hidden],.player .pl-raumzeile[hidden]{display:none}
.player .pl-raumzeile{display:block;font-size:var(--t-s);color:var(--pl-text2)}
.player.raum-gast .pl-knopf[data-pl="zurueck"],.player.raum-gast .pl-knopf[data-pl="vor"],.player.raum-gast #pl-naechste,.player.raum-gast #pl-intro,.player.raum-gast #pl-griff{display:none}
.player.raum-gast #pl-leiste{pointer-events:none;cursor:default}
.player .pl-raum-mitte{padding:var(--s2) var(--s4);border-radius:var(--r-m);background:var(--pl-verlauf);color:var(--pl-text);font-size:var(--t-m)}
.zs-blatt{display:flex;flex-direction:column;gap:var(--s4);min-width:min(420px,calc(100vw - 48px))}
.zs-code{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.zs-code .code{display:flex;align-items:center;gap:var(--s4)}
.zs-code .code>span:not(.qr){font-family:var(--mono);font-size:2rem;letter-spacing:.08em}
.zs-code .qr img{display:block;background:#fff;border-radius:var(--r-s);padding:4px}
.zs-blatt .zs-teil{display:flex;flex-direction:column;align-items:stretch;gap:var(--s2)}
.zs-teil h4{margin:0}
.zs-blatt .suchfeld{max-width:320px}
.zs-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s1)}
.zs-zeile{display:flex;align-items:center;gap:var(--s2)}
.zs-zeile b{flex:1;font-weight:500}
.zs-punkt{width:8px;height:8px;border-radius:50%;background:var(--text3)}
.zs-punkt.gut{background:var(--gut,var(--ok))}.zs-punkt.warnung{background:var(--warnung,var(--warn))}.zs-punkt.fehler{background:var(--fehler,var(--krit))}
.zs-kipp{display:flex;align-items:center;gap:var(--s2)}
.zs-seite{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.zs-seite{max-width:640px;margin:var(--s5) auto;padding:0 var(--s4)}
.zs-plakat img{width:171px;border-radius:var(--r-m)}
.zs-feld{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s2)}
.zs-feld input{font-family:var(--mono);letter-spacing:.08em;max-width:12em}
/* WT-2: der Haken "steuert mit" im Blatt des Hosts, was ein Gast eben tat; am Fernseher (app/tv.js Block zusammen) Halt und Ziffernfeld des Codes */
.zs-steuert{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t-s)}
.zs-aktion{font-size:var(--t-s);color:var(--text2)}
html.tv .tv-zs{margin:var(--s4) 0}
html.tv .tv-zs-code{display:block;font-family:var(--mono);font-size:2.5rem;letter-spacing:.12em;margin:var(--s3) 0}
html.tv .tv-zs-feld{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:var(--s2);margin:0 0 var(--s3)}
/* WT-1 (06.11.2026): Einmal-Link und Warteraum im Blatt des Hosts (app/gleichlauf.js externHtml) */
.zs-einmal{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.zs-einmal-link{flex:1 1 100%;padding:var(--s2);border-radius:6px;background:var(--flaeche-2, rgba(255,255,255,.06));font-size:var(--t-s);overflow-wrap:anywhere;user-select:all}
.zs-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.zs-link-anfang{display:inline-flex;align-items:center;gap:var(--s2)}
/* WT-5 (06.11.2026, app/gleichlauf.js Block saal): die Reiter Raum und Saal im Blatt des Hosts, das Formular des Saals, Link mit QR */
.zs-reiter{margin-bottom:var(--s3)}
/* UI-1 (07.11.2026): das Formular des Saals als eine Spalte (Kopf mit Plakat, Feld, zwei Wahlreihen, Kippschalter, zwei kleine Felder, Hauptknopf
unten rechts); Beschriftungen ueber den Feldern und nie abgeschnitten; die Wahlreihen sind Kacheln mit Haken (gewaehlt mit der Akzentkante) */
.zs-saal-form{display:flex;flex-direction:column;align-items:stretch;gap:var(--s4);min-width:0}
.zs-saal-wahl{display:flex;flex-direction:column;gap:var(--s2);min-width:0;margin:0;padding:0;border:0}
.zs-saal-wahl legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s2);width:100%;margin-bottom:var(--s2);padding:0;font-weight:500}
.zs-saal-wahl legend small{font-weight:400;font-size:var(--t-s);color:var(--text3)}
.zs-wahlreihe{display:flex;flex-wrap:wrap;gap:var(--s2)}
.zs-wahl{display:inline-flex;align-items:center;gap:var(--s2);min-height:40px;max-width:100%;padding:var(--s2) var(--s3);border:1px solid var(--linie2);border-radius:var(--r-m);cursor:pointer}
.zs-wahl span{min-width:0;overflow-wrap:anywhere}
.zs-wahl:hover{border-color:var(--text3)}
.zs-wahl:has(input:checked){border-color:var(--akzent);background:var(--flaeche2)}
.zs-wahl:has(input:focus-visible){outline:2px solid var(--akzent);outline-offset:2px}
.zs-saal-hdr{align-self:flex-start}
.zs-saal-form .feld-rahmen.zs-saal-feld{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.zs-saal-form .zs-saal-feld .feld-name{white-space:normal;overflow:visible;text-overflow:clip}
.zs-saal-form>.feld-rahmen.zs-saal-feld{align-self:stretch;width:100%;max-width:none;margin:0}
.zs-saal-form>.zs-saal-feld .feld{width:100%}
.zs-saal-zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,12em));gap:var(--s3)}
.zs-saal-zahlen .feld{width:100%;max-width:none}
.zs-saal-fuss{display:flex;justify-content:flex-end}
/* UI-1: Titel mit kleinem Plakat (Kopf der Reiter, Titelwahl der Bibliothek) nach dem Vorbild der TMDB-Auswahl (.vorschlag) */
.zs-kopf.vorschlag{grid-template-columns:36px minmax(0,1fr);padding:0;cursor:default;min-height:54px}
.zs-kopf.vorschlag:hover{background:none}
.zs-kopf-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
.zs-kopf-text b{font-weight:500;overflow-wrap:anywhere}
.zs-titel.vorschlag{grid-template-columns:36px minmax(0,1fr);color:inherit;font:inherit}
.zs-titel.vorschlag:focus-visible{outline:2px solid var(--akzent);outline-offset:1px}
/* UI-1: Weiterschauen mit Nebenzeile auf der Titelseite (Gestalt in app/kinosaal.css): der Knopf bricht um statt zu kappen */
html:not(#saal) .ks-titel .saal-aktionen>.knopf.haupt:has(.zweit),html:not(#saal) .ks-titel .saal-aktionen>.knopf.haupt .zweit{white-space:normal}
.zs-saal-link{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.zs-saal-link .qr img{display:block;background:#fff;border-radius:var(--r-s);padding:4px}
.zs-saal-meldung[hidden]{display:none}
/* WT-5 (Nachtrag): der Knopf "Gemeinsam schauen" der Bibliothek ueber der Knopfreihe (rechts in derselben Flucht, am Handy volle Breite) und die
Titelwahl im Blatt (der Block der Startseite ist seit UI-1 gestrichen) */
/* UI-1: eine eigene Reihe ueber der Knopfreihe, rechtsbuendig mit ihr (gleiche rechte Kante); dazwischen die Luecke der Reihen des Feeds (.feed gap) */
/* UI-2 Nachtrag (Wort des Eigentuemers 07.11.2026, 03:1x: "Gemeinsam schauen doch wieder in derselben Leiste wie ??? oder Berater"): die Spalte
aus UI-1 legt den Knopf wieder IN die Reihe, als ersten links (wie WT-5); am PC eine Zeile, die eigene Reihe darueber entfaellt */
.bib-kopf>.zs-bib-spalte{display:flex;flex-direction:row;align-items:center;gap:var(--s2);flex:0 1 auto;min-width:0;margin-left:auto}
.zs-bib-spalte>.zs-bib{display:flex}
.zs-bib-spalte>.kopf-rechts{margin-left:0}
@media (max-width:820px){.bib-kopf>.zs-bib-spalte{flex-wrap:wrap;flex:none;width:100%}.zs-bib-spalte>.kopf-rechts{flex:1 1 auto}.zs-bib-spalte>.zs-bib .knopf{flex:none;width:auto}}
.zs-titelwahl{list-style:none;margin:var(--s1) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s1)}
.zs-titelwahl li{display:block}
.zs-titelwahl small{color:var(--text3)}
/* WT-8 (app/gleichlauf.js Block rueckweg): am Knopf der Bibliothek die Plakette "Gemeinsam · n", solange der Raum lebt (wie .pl-raum im Kopf
des Players); der Knopf traegt sie hinter seinem Wort, am Handy darunter */
.zs-bib .zs-plakette{display:inline-block;padding:0 var(--s2);border:1px solid var(--linie2);border-radius:var(--r-p);color:var(--akzent);font-size:var(--t-s);line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums}
/* WT-4 (06.11.2026, app/gleichlauf.js Block reaktionen): die Leiste der sechs Zeichen ueber der Leiste des Players (am Handy immer, sonst mit R oder
dem Knopf), nach einer eigenen Reaktion 3 s still; die Blasen am rechten Rand in der oberen Haelfte (nie ueber den Untertiteln), hoechstens
fuenf, die neueste unten. Im Element des Players, also auch im Vollbild und im Spielermodus; bei ruhiger Bewegung ohne Gleiten. */
.player .pl-reaktionen{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s3)}
.player .pl-reaktionen[hidden]{display:none}
.player .pl-reaktion{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--pl-linie);background:var(--pl-verlauf);color:var(--pl-text);cursor:pointer;padding:0}
.player .pl-reaktion svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.player .pl-reaktion:hover,.player .pl-reaktion:focus-visible{border-color:var(--pl-text);outline:none}
.player .pl-reaktionen.wartet .pl-reaktion{opacity:.45;cursor:default}
.player .pl-blasen{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(72px,calc(env(safe-area-inset-top) + 64px));bottom:50%;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:var(--s2);overflow:hidden;pointer-events:none}
.player .pl-blase{display:inline-flex;align-items:center;gap:var(--s2);max-width:min(240px,40vw);padding:var(--s1) var(--s4) var(--s1) var(--s2);border-radius:var(--r-p);background:var(--pl-flaeche);border:1px solid var(--pl-linie);color:var(--pl-text);font-size:var(--t-m);animation:pl-blase-da .2s ease-out}
.player .pl-blase b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .pl-blase-zeichen svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes pl-blase-da{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.player .pl-blase{animation:none}}
html.ruhig .player .pl-blase{animation:none}
/* <<< zusammen */
/* >>> spielermodus
P2b (06.11.2026): der Spielermodus (app/kern.js Block spielermodus, #/spieler/...) zeigt nur den Player, ohne Rahmen; im
Bedienfenster des Desktop-Clients (desktop/spieler.js) ist die Seite durchsichtig und, solange mpv das Bild zeichnet (.pl-mpv), auch die
Flaeche des Players: das Bild der Leinwand scheint durch, nur Leiste, Kopf, Menue und Karten liegen darueber. Spielt der Browser-Player (ein
Rueckfall), ist die Flaeche schwarz wie immer. Dazu die Kapitelmarken im Zeitstrahl und die Fernbedienung im Hauptfenster (player.js Block
spielermodus). Neue Regeln, keine von heute geaendert; am Fernseher gibt es nichts davon.
P2f (Client 1.7.1): das Bedienfenster ist deckend, durchsichtig malte Chromium es auf manchen Rechnern schwarz (NVIDIA). Was vom Bild zu sehen
ist, bestimmt seine Fensterform (player.js spielerRechtecke): Seite und Player bleiben schwarz, Kopf und Leiste behalten ihren Verlauf. Schwarz
nur mit html.spielerform (die Seite setzt es, wenn die Bruecke spieler.form hat); mit Client 1.7.0 bleibt es durchsichtig wie bisher. */
html.spielermodus,html.spielermodus body{background:transparent}
html.spielermodus.spielerform,html.spielermodus.spielerform body{background:#000}
html.spielermodus body>:not(.player):not(.toasts):not(#ebene):not(dialog):not(script){display:none!important}
html.spielermodus .player.pl-mpv{background:transparent}
html.spielermodus.spielerform .player.pl-mpv{background:#000}
html.spielermodus .player.pl-mpv .pl-video{visibility:hidden}
/* P2g (Client 1.7.2): die Form deckt nur die Teile von Kopf und Leiste (player.js spielerRechtecke), nicht mehr die Baender. Darum entfallen
die Verlaeufe: ein Verlauf ueber dem Bild waere in der Form ein schwarzer Kasten. Jedes Teil steht deckend auf Schwarz (der Grund der Seite,
Deckkraft 1, nichts scheint durch); die Ladeanzeige zeigt nur ihren Ring. Seite und Player reines Schwarz, auch gegen spaetere Regeln (Grau-Befund). */
html.spielermodus.spielerform,html.spielermodus.spielerform body,html.spielermodus.spielerform .player.pl-mpv{background:#000!important}
html.spielermodus.spielerform .player.pl-mpv .pl-oben,html.spielermodus.spielerform .player.pl-mpv .pl-unten{background:none}
html.spielermodus.spielerform .player.pl-mpv .pl-lade{background:none;padding:0}
html.spielermodus.spielerform .player.pl-mpv .pl-standbild{display:none}
/* P2i (Client 1.7.4): ohne html.spielerform ist das Bedienfenster wieder durchsichtig (desktop/spieler.js, Bedienung durchsichtig): Seite und
Player ohne Grund, auch gegen spaetere Regeln; Kopf und Leiste behalten ihren Verlauf, Karten und Menues ihre Flaechen wie im Browser-Player */
html.spielermodus:not(.spielerform),html.spielermodus:not(.spielerform) body,html.spielermodus:not(.spielerform) .player.pl-mpv{background:transparent!important}
/* WT-8 (Befund des Eigentuemers 07.11.2026 am Client 1.7.4: rechts eine helle Kante von etwa 10 px, wo die Bedienung nicht ueber dem Bild liegt):
die Seite im Bedienfenster hielt die Spur des Rollbalkens frei. Ursache ist scrollbar-gutter:stable aus app/kinosaal.css (Block Rollbalken, nur
Kinosaal): die Spur bleibt auch mit overflow:hidden reserviert (in Chrome 10 px bei scrollbar-width:thin), und der Player mit position:fixed
wird an ihr abgeschnitten; durch die durchsichtige Spur scheint das Bild von mpv ohne Verlauf. Im Spielermodus rollt nichts: keine Spur, kein
Rollbalken, weder als Standard (scrollbar-width) noch als ::-webkit-scrollbar; Kopf und Leiste reichen damit bis an den rechten Rand. */
html.spielermodus,html.spielermodus body{overflow:hidden!important;scrollbar-gutter:auto!important;scrollbar-width:none!important}
html.spielermodus::-webkit-scrollbar,html.spielermodus body::-webkit-scrollbar{display:none;width:0;height:0}
.player .pl-kapitel{position:absolute;top:0;bottom:0;width:2px;transform:translateX(-50%);background:var(--pl-leer);pointer-events:none}
.pl-fern{position:fixed;left:50%;bottom:calc(var(--s4) + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:150;max-width:calc(100vw - 32px)}
.pl-fern-innen{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid var(--pl-linie);border-radius:var(--r-m);background:var(--pl-flaeche);color:var(--pl-text);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.pl-fern-text{display:flex;flex-direction:column;min-width:0;margin-right:var(--s2)}
.pl-fern-titel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch}
.pl-fern-zeit{font-size:var(--t-s);color:var(--pl-text2);font-variant-numeric:tabular-nums}
.pl-fern svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
/* <<< spielermodus */
@media (hover:none) and (pointer:coarse){.pl-knopf[data-pl="tasten"]{display:none}}
/* Handy hochkant: dort ist in der Leiste kein Platz mehr (nachgemessen bei 375x812: mit dem Schalter reichte sie bis 382 px,
der Vollbild-Knopf ragte hinaus) - und zu fuellen gibt es dort kaum etwas: ein Film mit Balken oben und unten fuellt
hochkant die Breite schon (nur 4:3 mit Balken links und rechts wuerde noch groesser, und das tut er mit gemerktem
Stand weiterhin). Der Schalter tritt zurueck, sein Stand gilt weiter; quer ist er wieder da. */
@media (max-width:640px) and (orientation:portrait){.pl-knopf[data-pl="fuellen"]{display:none}}
@media (max-width:640px){.pl-laut,[data-pl="zurueck"],[data-pl="vor"],.pl-knopf[data-pl="tasten"]{display:none}.pl-knopf.text span{display:none}.pl-knopf.text{padding:0;width:40px}.pl-zeit{font-size:var(--t-xs);margin-left:4px}.pl-tastenliste,.pl-tastenzeile{grid-template-columns:1fr}}
/* Handy im Querformat: wenig Hoehe, viel Breite. Die Verlaeufe oben und unten fressen sonst den halben Film. */
@media (max-height:520px) and (orientation:landscape){
.pl-oben{padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left))}
.pl-unten{padding:24px max(16px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.pl-titel b{font-size:var(--t-m)}
.pl-titel span{display:none}
.pl-hinweis{top:max(48px,calc(env(safe-area-inset-top) + 40px));font-size:var(--t-s)}
}
@media (prefers-reduced-motion:reduce){.pl-kreis{animation-duration:2.4s}.pl-oben,.pl-unten,.pl-griff{transition:none}}
/* Getrennte Regeln: steht ein -webkit- neben einem -moz-Pseudoelement, verwirft JEDER Browser die ganze Regel. */
@media (prefers-reduced-motion:reduce){.pl-laut::-webkit-slider-thumb{transition:none}}
@media (prefers-reduced-motion:reduce){.pl-laut::-moz-range-thumb{transition:none}}
/* Titelseite: nachrangige Aktionen unter "Mehr" (R18: keine Knopfwand), Startknopf je Folge */
.d-mehr{position:relative;display:inline-block}
.d-mehr>summary{list-style:none;cursor:pointer}
.d-mehr>summary::-webkit-details-marker{display:none}
.d-mehr[open]>summary{background:var(--flaeche3)}
.d-mehr-liste{position:absolute;z-index:20;top:calc(100% + var(--s2));left:0;min-width:220px;display:grid;gap:2px;background:var(--flaeche2);border:1px solid var(--linie2);border-radius:var(--r-m);padding:4px;box-shadow:0 18px 40px #0009}
.d-mehr-liste .knopf{justify-content:flex-start;width:100%;border-color:transparent;background:none}
.d-mehr-liste .knopf:hover{background:var(--flaeche3)}
.d-mehr-liste:empty{display:none}
/* Das Menue "Mehr" steht am Ende der Aktionszeile: es klappt nach links auf, sonst ragte es bei 1280 px ueber den rechten Rand */
@media (min-width:821px){.daktion>.d-mehr>.d-mehr-liste{left:auto;right:0}}
.folge-zeile.mit-start{grid-template-columns:30px 40px minmax(0,1fr) auto}
.folge-zeile .ik.klein svg{width:13px;height:13px;fill:currentColor}
/* ---------------------------------------------------------------- Phase 12 (18.09.2026): haftende Leiste der Bibliothek, Trailer, Merkliste */
/* Die Leiste liegt ohne eigene Hoehe im Fluss und haftet oben; sichtbar wird sie erst, wenn der Kopf der Seite aus dem Bild ist (Klasse .an).
Schmal gehalten: Reiter, ein kurzes Suchfeld, Anpassen, nach oben. Das Band des Betriebs gibt es in der Bibliothek nicht - sonst rueckt sie darunter. */
.bib-haft{position:sticky;top:0;z-index:18;height:0}
body:not(.ohne-band):not(.kino) .bib-haft{top:var(--band)}
body.kino .bib-haft{display:none}
.bib-haft .drin{position:absolute;top:0;left:calc(-1 * var(--seite-x));right:calc(-1 * var(--seite-x));display:flex;align-items:center;gap:8px 16px;min-height:var(--zeile);padding:0 var(--seite-x);
background:rgba(8,8,9,.9);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--linie);
transform:translateY(-105%);opacity:0;visibility:hidden;transition:transform .22s ease,opacity .18s ease,visibility 0s linear .22s}
.bib-haft.an .drin{transform:none;opacity:1;visibility:visible;transition:transform .22s ease,opacity .18s ease}
.bib-haft .haft-reiter{flex:1 1 auto;min-width:0;margin:0;border-bottom:0;gap:24px;align-self:stretch;align-items:flex-end}
.bib-haft .haft-reiter a{padding:0 0 12px;min-height:0;font-size:var(--t-m);margin-bottom:0}
.bib-haft .haft-rechts{display:flex;align-items:center;gap:8px;flex:none}
.bib-suche.kurz{flex:0 1 190px;min-width:120px;min-height:var(--feld-k);padding:0 8px;gap:8px;border-radius:var(--r-s);background:var(--flaeche2)}
.bib-suche.kurz input{padding:4px 0;font-size:var(--t-s)}
.bib-suche.kurz svg{width:14px;height:14px}
.bib-haft .haft-tafel{position:absolute;top:47px;right:0;width:min(560px,calc(100vw - 2 * var(--seitenrand)));display:grid;gap:12px;padding:16px;border:1px solid var(--linie2);border-radius:var(--r-l);background:var(--flaeche);box-shadow:0 22px 50px #000b}
.bib-haft .haft-tafel[hidden]{display:none}
.bib-haft .haft-tafel .zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bib-haft .haft-tafel .etikett{font-size:var(--t-s);color:var(--text3);min-width:118px}
.bib-haft .haft-tafel .stimmung{margin-top:0}
#bib-haft-marke{height:1px;margin-top:-1px}
@media (max-width:820px){
.bib-haft,body:not(.ohne-band):not(.kino) .bib-haft{top:44px} /* unter dem mobilen Seitenkopf (44 px, haftet selbst) */
.bib-haft .drin{gap:8px;min-height:44px}
.bib-haft .haft-reiter{gap:16px}
.bib-haft [data-haft-anpassen] span{display:none}
.bib-suche.kurz{flex:0 0 112px;min-width:0}
.bib-suche.kurz:focus-within{flex-basis:min(62vw,260px)}
.bib-haft .haft-tafel{left:0;right:0;width:auto}
.bib-haft .haft-tafel .etikett{min-width:0;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.bib-haft .drin,.bib-haft.an .drin{transition:none}}
/* Merken: gedrueckter Zustand in Akzentfarbe; Trailer-Gruppe = Hauptknopf plus Auswahl der uebrigen Fassungen */
.d-merken.an{color:var(--akzent);border-color:var(--akzent-rand)}
.d-merken.an svg{stroke:var(--akzent)}
.d-trailer:empty{display:none}
.d-trailer,.d-trailer-gruppe{display:inline-flex;align-items:stretch}
.d-trailer .knopf small{font-size:var(--t-xs);color:var(--text3);margin-left:0;font-weight:400}
.d-trailer-gruppe>.knopf{border-top-right-radius:0;border-bottom-right-radius:0}
.d-trailer-gruppe .d-mehr>summary{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;padding-inline:8px;height:100%}
.d-trailer-gruppe .d-mehr-liste{min-width:240px}
/* Merkliste: Plakatraster wie im Regal, darunter eine schmale Zeile mit Stand und Entfernen */
.merk-stand{margin:4px 0 16px;color:var(--text3)}
.merk-karte{display:flex;flex-direction:column;min-width:0}
.merk-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;color:var(--text3)}
.merk-fuss .ik{border-color:transparent;background:none;color:var(--text3)}
.merk-fuss .ik:hover{color:var(--text);background:var(--flaeche2)}
/* >>> trailer (TR, 01.10.2026)
Trailer im Archiv (app/titel.js, Block trailer): der Knopf "Trailer" oeffnet eine Ueberlagerung, ein