/* MX-Archive - Designsprache "Kinosaal" (Runde 0a, 09.10.2026; Runde 1, 15.10.2026: Tokens und Grundzuweisungen). Das neue Kleid waechst Runde fuer Runde (Plan: scratchpad/a84/PLAN.md, Gestaltung: scratchpad/a84/SPEZIFIKATION.md). app/app.css bleibt das klassische Kleid und wird dafuer nicht umgebaut; was hier steht, gilt nur, wenn der Stil kinosaal gilt. Dann steht data-stil="kinosaal" am html-Knoten: seit Runde 1 schreibt der Server ihn schon in die Seite und schaltet diese Datei dort ein (mx/tor.py stil_einsetzen, sonst blitzte vor dem ersten Bild das klassische Kleid auf), app/kern.js (Block stil) bleibt der Rueckfall und schaltet um, ohne Neuladen. Zurueck auf klassisch steht media wieder auf "not all", und nichts von hier wirkt mehr. Zur Sicherheit haengt zudem jede Regel an :root[data-stil="kinosaal"] bzw. html[data-stil="kinosaal"]. Gewaehlt wird je Konto unter Konto > Profil, die Vorgabe des Hauses steht unter Verwaltung > Einstellungen (oberflaeche.stil); am Fernseher gilt immer klassisch (Runde 8 bringt dort die Stufen unter html.tv). Eingebunden in app/index.html, app/anmelden.html und app/kontolink.html (link[data-stil-css]); auf den beiden letzten schaltet sie bis Runde 3 nichts ein. Runde 1: die Tokens aus SPEZIFIKATION.md Abschnitte 2 und 3, Stand des abgenommenen Prototyps (scratchpad/a84/arbeit/prototyp/css/tokens.css), und die Grundzuweisungen (Koerper, Schrift, Links, Fokus und Kippschalter in Licht statt Blau). Runde 2a: die Bausteine der Bedienung, Runde 2b: die Bausteine der Inhalte und Ebenen (beide am Ende der Datei). Keine Seiten (Runden 3 bis 7b). Die Variablen von app/app.css (--sans, --kond, --mono, --t-*, --s*, --r-*, die Farben, Zeilen und Felder) bekommen unten im Uebergang die neuen Werte, damit das klassische CSS unter kinosaal schon die neue Skala und die neuen Farben nutzt. Abweichungen vom Prototyp, je mit Grund: --spalten fehlt: app/app.css liest var(--spalten,3) in den fliessenden Rastern der Bibliothek, und app/bibliothek.js setzt den Wert je Raster selbst. Ein Wert hier am :root erbte sich dorthin und zeigte 8 oder 12 Spalten, bis das Skript misst. Kommt mit dem Raster der Bausteine (Runde 2b, Bibliothek Runde 6) unter einem eigenen Namen. html.tv fehlt: am Fernseher gilt nie kinosaal (Runde 8 setzt die Stufen dort in app/tv.css). --neu, --pl-text2 und weitere Namen von app/app.css stehen zusaetzlich im Uebergang (Blau als Akzent entfaellt, alle Player-Stufen bleiben). Startseite: behaelt ihre Skala, ihren Rand und ihre Rundungen von heute, bis Runde 6 sie umbaut (SPEZIFIKATION.md Abschnitt 2 und 12.1: app/start.css behaelt seine Werte, der Formfaktor von heute); die Farben folgen schon den Tokens. Grundsaetze (a82, Satz 7 geaendert nach K62) 1 Das Licht kommt vom Film. Grund Schwarz, Schrift im warmen Weiss des Projektors; Farbe aus dem Titel (--film, --film-tief), fuer Lage (--gut, --warnung, --fehler) und als Kennfarbe mit Wort (Netze, Bereiche, Termine, Listen der Planung). 2 Eine Sache, eine Gestalt. Jeder Baustein hat genau eine Bauart. 3 Was ein Werk zeigt, hat Ecken (Radius 2); was du drueckst, ist rund (Pille); worin du schreibst, ist ein Kasten (Radius 8). 4 Eine Satzkante je Spalte; eingerueckt wird nur Untergeordnetes, immer um --einzug (24). 5 Nur Werte aus den Skalen. Farben stehen nur hier oben in den Tokens; jede Regel darunter nimmt var() (tests/js/tokens.test.mjs). 6 Eine Schreibweise je Art von Zahl (MX.format in app/kern.js, mx/format.py). 7 Bewegung antwortet. Von selbst bewegen sich nur die Rolle der Startseite und die Clips; mit "Bewegung: ruhig" stehen sie. */ :root[data-stil="kinosaal"]{ color-scheme:dark; /* ---------------------------------------------------------------- Farbe: Grund, Licht, Linien, Flaechen (a82) */ --grund:#000000; --licht:#f4efe6; /* Projektorweiss: Text, Hauptknopf, Fokusring, gewaehlte Auswahl */ --licht-voll:#ffffff; /* nur Hover des Hauptknopfs */ --text:var(--licht); /* 18,3 : 1 auf Schwarz */ --text-2:#c8c3ba; /* Lesetext, Nebentext: 12,0 : 1 auf Schwarz */ --text-3:#9b968e; /* Kennzeilen, Beschriftungen, Spaltenkoepfe: 7,2 : 1 auf Schwarz */ --text-4:#6f6b65; /* nur Deaktiviertes: 4,0 : 1 */ --linie:#1b1a18; /* Haarlinie zwischen Zeilen und Abschnitten */ --linie-2:#34322e; /* Rand von Modulen, Menues, Blaettern, Dialogen */ --linie-3:#5f5b55; /* Rand von Feldern, Nebenknoepfen, Ankreuzfeldern: 3,1 : 1 auf Schwarz */ --flaeche:#0c0b0a; --flaeche-2:#161512; --flaeche-3:#24221f; /* Farbe aus dem Titel (mx/farben.py ab Runde 5a); je Titel als style="--film:...;--film-tief:...;--film-glut:...", hier die neutralen Werte */ --film:#d9d4ca; --film-tief:#1d1c1a; --film-glut:rgba(217,212,202,.28); /* Lage: nur zusammen mit einem Satz */ --gut:#8fd19e; --gut-tief:#0e1d12; --gut-rand:#2c5536; --warnung:#e8c46a; --warnung-tief:#211a08; --warnung-rand:#6b5520; --fehler:#f2938a; --fehler-tief:#2a1210; --fehler-rand:#6e2c26; /* Schleier ueber Bildern (gemessen in a82: Text unter --schleier-links und --schleier-unten mindestens 9,5 : 1) */ --schleier-1:rgba(0,0,0,.35); --schleier-2:rgba(0,0,0,.62); --schleier-3:rgba(0,0,0,.86); --schleier-links:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,0) 68%); --schleier-unten:linear-gradient(0deg,#000 0%,rgba(0,0,0,.62) 38%,rgba(0,0,0,0) 72%); /* Metall der Aufloesung in der Kennzeile der Titelseite (Auftrag 116, Wort des Eigentuemers vom 22.10.2026): 4K in Gold, HD in Silber wie die bekannten Scheibenlogos, nur mit Text. Zwei Verlaeufe von oben nach unten mit dem dunklen Band in der Mitte, kein Bild; dunkle Schrift (auf der dunkelsten Stelle Gold 6,8 : 1, Silber 8,5 : 1, sonst mehr), der Rand eine Stufe dunkler als das Band */ --metall-gold:linear-gradient(180deg,#f6e3a1 0%,#e3bf62 40%,#c39432 52%,#d8b056 72%,#edd389 100%); --metall-gold-rand:#8a6a22; --metall-silber:linear-gradient(180deg,#f7f9fa 0%,#d6dbe0 40%,#a7afb7 52%,#c6ccd2 72%,#e3e7ea 100%); --metall-silber-rand:#7b838b; --metall-schrift:#14110a; /* ---------------------------------------------------------------- Kennfarben mit Wort (A84, aus app/app.css; gedaempft, nie allein) */ --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; --l-hinzufuegen:#94b383; --l-bearbeitung:#d192af; --l-upgraden:#7bb4b0; --l-kommt:#90a5cb; --l-nichtda:#cb8c7f; --l-laeuft:#b398c8; --l-spaeter:#c6ae82; --l-erledigt:#7f7e85; --termin-kino:#ee8aa8; --termin-digital:var(--licht); --termin-disc:#d9d4c7; --termin-folge:var(--l-laeuft); --termin-fehlt:var(--warnung); /* ---------------------------------------------------------------- Schrift: die heutige (Entscheidung des Eigentuemers, 08.10.2026 20:55) */ --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; --schrift:var(--sans); --schrift-mono:var(--mono); /* Grade und Zeilenhoehen (SPEZIFIKATION.md Abschnitt 2); jede Zeilenhoehe auf dem Raster 2 bis 4 */ --t-13:13px; --z-13:20px; /* Kennzeile, Beschriftung, Spaltenkopf, Taste, Plakette */ --t-14:14px; --z-14:20px; /* Administration: Tabellen, dichte Listen, kompakte Knoepfe */ --t-16:16px; --z-16:24px; /* Text, Knoepfe, Felder, Menues */ --t-18:18px; --z-18:28px; /* Lesetext, hoechstens --mass Zeichen */ --t-24:24px; --z-24:28px; /* Kopf eines Abschnitts */ --t-32:32px; --z-32:36px; /* Kopf einer Seite */ --t-36:36px; --z-36:38px; /* Titelkarte am Handy (a82: 40) */ --t-46:46px; --z-46:48px; /* Titelkarte am PC (a82: 56) */ --t-60:60px; --z-60:62px; /* Titelkarte gross (a82: 72) */ --t-54:54px; --z-54:56px; /* nur Startseite: die heutige Anzeigeschrift (--t-4xl) */ --g-text:400; --g-mittel:500; --g-halb:600; --g-kopf:500; /* Kopf: Plex Condensed 500 wie heute */ --g-titel:600; /* Titelkarte: Plex Condensed 600 (es gibt keinen schwereren Schnitt) */ --mass:66ch; /* ---------------------------------------------------------------- Abstaende (Raster 4) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --einzug:var(--s5); /* ---------------------------------------------------------------- Raster (Umbrueche 820, 1250, 1600, 2200); --spalten siehe Kopf */ --rand:16px; --rinne:16px; --poster-b:128px; --bild-b:280px; --kopfzeile:56px; /* Hoehe der Kopfleiste (Handy: Mobilkopf), ab Runde 3 */ --bereichsleiste:48px; /* zweite Zeile in der Administration, ab Runde 3 */ --leinwand-h:min(68vh,calc(100vw / 2.39 + 120px)); /* ---------------------------------------------------------------- Bedienung */ --hoehe:44px; --hoehe-k:36px; --hoehe-chip:32px; --hoehe-marke:22px; --zeile:48px; --zeile-k:40px; --ziel-min:44px; /* ---------------------------------------------------------------- Form */ --r-werk:2px; --r-marke:4px; --r-feld:8px; --r-flaeche:14px; --r-rund:999px; --rand-b:1px; --kante:inset 0 0 0 1px rgba(244,239,230,.09); --glut:0 28px 90px -30px var(--film-glut); --hebung:0 24px 64px rgba(0,0,0,.72); /* Startseite: die erhabenen Tafeln bleiben (offene Frage 2 aus A84b, bis zur Antwort: behalten) */ --erhaben:0 1px 0 rgba(244,239,230,.07) inset,0 30px 60px -28px rgba(0,0,0,.9); --ring:2px; --ring-abstand:2px; /* ---------------------------------------------------------------- Bewegung */ --kurve:cubic-bezier(.2,.8,.2,1); --dauer-fokus:120ms; --dauer-ebene:240ms; --dauer-bild:600ms; /* ---------------------------------------------------------------- Player: alle Stufen (A84: 15 statt 8 aus a82) */ --pl-text:#ffffff; --pl-text-2:rgba(255,255,255,.86); --pl-text-3:rgba(255,255,255,.62); --pl-text-4:rgba(255,255,255,.4); --pl-flaeche:rgba(12,11,10,.94); --pl-linie:rgba(255,255,255,.18); --pl-linie-2:rgba(255,255,255,.2); --pl-leer:rgba(255,255,255,.27); --pl-spur:rgba(255,255,255,.28); --pl-puffer:rgba(255,255,255,.46); --pl-hover:rgba(255,255,255,.07); --pl-an:rgba(255,255,255,.15); --pl-an-2:rgba(255,255,255,.22); --pl-schleier:rgba(0,0,0,.6); --pl-verlauf:rgba(0,0,0,.85); } @media (min-width:821px){:root[data-stil="kinosaal"]{--rand:32px;--rinne:16px;--poster-b:150px;--bild-b:300px;--kopfzeile:64px}} @media (min-width:821px) and (max-width:1599px){:root[data-stil="kinosaal"]{--kopfzeile:97px}} @media (min-width:1251px){:root[data-stil="kinosaal"]{--rand:48px;--rinne:24px;--poster-b:160px;--bild-b:320px}} @media (min-width:1600px){:root[data-stil="kinosaal"]{--rand:64px;--rinne:24px;--poster-b:176px;--bild-b:352px}} @media (min-width:2200px){:root[data-stil="kinosaal"]{--poster-b:192px;--bild-b:384px}} @media (pointer:coarse){:root[data-stil="kinosaal"]{--hoehe-k:44px;--hoehe-chip:44px;--zeile-k:48px}} /* Handy (SPEZIFIKATION.md Abschnitt 2, Spalte Handy) */ @media (max-width:820px){:root[data-stil="kinosaal"]{ --t-18:16px; --z-18:26px; --t-32:26px; --z-32:32px; --t-46:36px; --z-46:38px; --t-60:36px; --z-60:38px; --t-54:36px; --z-54:38px; }} @media (prefers-reduced-motion:reduce){:root[data-stil="kinosaal"]{--dauer-ebene:120ms;--dauer-bild:120ms}} :root[data-stil="kinosaal"].ruhig{--dauer-ebene:120ms;--dauer-bild:120ms} /* ---------------------------------------------------------------- Uebergang (Runde 1 bis 9): die Namen von app/app.css zeigen auf die neuen Werte (SPEZIFIKATION.md Abschnitt 2 und 3, Prototyp). --sans, --kond, --mono behalten ihre Werte (oben, wie in app/app.css). Blau als Akzent entfaellt (Abschnitt 3.4): --akzent und --neu werden Licht, ihre Flaechen und Raender die neutralen Stufen. Die Player-Stufen tragen in app/app.css Namen ohne Bindestrich vor der Ziffer (--pl-text2), hier mit (--pl-text-2); der Uebergang verbindet beide. Runde 10 (24.10.2026, Punkt 4 des Briefs): jeder der 47 Namen bleibt, weil app/app.css (dazu app/start.css und app/werke.css) ihn unter kinosaal fuer geteiltes Markup noch braucht. Gemessen mit scratchpad/r10/werkzeug/uebergang.mjs (53 Seiten, PC 1600 und Handy 390): je Name die Regeln dieser Dateien, die ihn lesen und auf einer Seite treffen. --text2 120, --text3 156, --text-lesen 5, --linie2 50, --linie3 14, --flaeche2 33, --flaeche3 23, --flaeche4 3, --akzent 37, --akzent-tief 4, --akzent-rand 3, --neu-tief 1, --neu-rand 1, --ok 11, --ok-tief 1, --ok-rand 1, --warn 9, --warn-tief 1, --warn-rand 1, --warn-text 5, --krit 6, --krit-tief 4, --krit-rand 2, --krit-text 5, --t-xs 74, --t-s 148, --t-m 66, --t-l 26, --t-xl 23, --t-2xl 13, --t-3xl 10, --t-4xl 3, --r-xs 25, --r-s 33, --r-m 57, --r-l 21, --r-p 13, --feld 16, --feld-k 9, --seitenrand 13. Ohne Treffer im Gang, gelesen in Zustaenden, die er nicht oeffnet: --akzent2 (Fokus und Hover von Feldern, Suchfeldern und Ablage), --neu (Band des Umzugs auf der Titelseite), --pl-text2, --pl-text3, --pl-text4, --pl-linie2, --pl-an2 (die Regeln des Players). Keine Regel dieser Datei liest einen alten Namen ausser der Startseite: .st setzt ihre Skala von heute fuer app/start.css und liest sie selbst (Formfaktor von heute, tests/js/start-kinosaal.test.mjs haelt die Regel Zeichen fuer Zeichen). */ :root[data-stil="kinosaal"]{ --text2:var(--text-2); --text3:var(--text-3); --text-lesen:var(--text-2); --linie2:var(--linie-2); --linie3:var(--linie-3); --flaeche2:var(--flaeche-2); --flaeche3:var(--flaeche-3); --flaeche4:var(--flaeche-3); --akzent:var(--licht); --akzent2:var(--licht); --akzent-tief:var(--flaeche-3); --akzent-rand:var(--linie-3); --neu:var(--licht); --neu-tief:var(--flaeche-3); --neu-rand:var(--linie-3); --ok:var(--gut); --ok-tief:var(--gut-tief); --ok-rand:var(--gut-rand); --warn:var(--warnung); --warn-tief:var(--warnung-tief); --warn-rand:var(--warnung-rand); --warn-text:var(--warnung); --krit:var(--fehler); --krit-tief:var(--fehler-tief); --krit-rand:var(--fehler-rand); --krit-text:var(--fehler); --t-xs:var(--t-13); --t-s:var(--t-13); --t-m:var(--t-14); --t-l:var(--t-16); --t-xl:var(--t-24); --t-2xl:var(--t-32); --t-3xl:var(--t-36); --t-4xl:var(--t-54); --r-xs:var(--r-marke); --r-s:var(--r-feld); --r-m:var(--r-feld); --r-l:var(--r-flaeche); --r-p:var(--r-rund); --feld:var(--hoehe); --feld-k:var(--hoehe-k); --seitenrand:var(--rand); --pl-text2:var(--pl-text-2); --pl-text3:var(--pl-text-3); --pl-text4:var(--pl-text-4); --pl-linie2:var(--pl-linie-2); --pl-an2:var(--pl-an-2); } /* ---------------------------------------------------------------- Grundzuweisungen (SPEZIFIKATION.md Abschnitt 2 und 3.4, Prototyp bausteine.css) Jede Regel steht hinter :where(html[data-stil="kinosaal"]): die Bedingung zaehlt nicht zur Spezifitaet, eine Grundzuweisung wiegt also so viel wie ihr Gegenstueck in app/app.css (body, a, :focus-visible, .kipp:checked) und gewinnt nur, weil diese Datei spaeter kommt. Jede Regel eines Bausteins in app/app.css (.nav a, .tk:focus-visible .bild ...) bleibt staerker; sie bekommt ihr neues Kleid in ihrer Runde. Koerper: Text 16 (Sans 400) statt 14, auf Schwarz im Licht des Projektors (Farben ueber den Uebergang). Die Zeilenhoehe bleibt 1,5 statt --z-16: bei 16 px dasselbe (24), aber relativ; das klassische CSS hat Koepfe ohne eigene Zeilenhoehe, die bei festen 24 px uebereinanderliefen. */ :where(html[data-stil="kinosaal"]) body{background:var(--grund);color:var(--text);font-family:var(--sans);font-size:var(--t-16);line-height:1.5;font-weight:var(--g-text);font-feature-settings:"kern"} /* Schrift: Zahlen mit gleich breiten Ziffern in Versalhoehe (Plex hat beides) */ :where(html[data-stil="kinosaal"]) .zahl{font-variant-numeric:tabular-nums lining-nums} /* Links: unterstrichen in --linie-3, beim Zeigen in Licht (Verweis aus a82); wo das klassische CSS keine Linie zieht, bleibt keine */ :where(html[data-stil="kinosaal"]) a{text-decoration-color:var(--linie-3);text-underline-offset:.22em;text-decoration-thickness:1px} :where(html[data-stil="kinosaal"]) a:hover{text-decoration-color:var(--licht)} /* Fokus: Ring in Licht, 2 px statt 1,5 px (Abstand 2 px wie in app/app.css). Nur Breite und Farbe: Art und Abstand bleiben bei den Regeln von app/app.css, sonst ueberstimmte diese Regel .seite{outline:none} und gaebe main#inhalt nach jedem Seitenwechsel einen Rahmen. */ :where(html[data-stil="kinosaal"]) :focus-visible{outline-width:var(--ring);outline-color:var(--licht)} /* Kippschalter: an ist eine helle Flaeche mit schwarzem Knopf (a82), nicht mehr Blau auf Blau */ :where(html[data-stil="kinosaal"]) .kipp:checked{background:var(--licht);border-color:var(--licht)} :where(html[data-stil="kinosaal"]) .kipp:checked::after{background:var(--grund)} /* Markierter Text in Licht */ :where(html[data-stil="kinosaal"]) ::selection{background:var(--licht);color:var(--grund)} /* ---------------------------------------------------------------- Startseite (Runde 6, 23.10.2026): das Kleid des Prototyps im Formfaktor von heute SPEZIFIKATION.md Abschnitte 8 und 12.1, Prototyp start.html, start-stueck.html und start-bearbeiten.html, 03-PROTOTYP-VORGABE.md Abschnitt 8 (Startseite, Stueck, Seite bearbeiten). Aufbau, Reihenfolge, Texte, Rolle, Bearbeiten, Musik und Kapitel bleiben die von heute (app/start.js); der Formfaktor auch: Breiten, Hoehen, Seitenverhaeltnisse, Spalten, Hoechstmasse und Umbrueche kommen weiter aus app/start.css. Darum behaelt .st die Skala von heute fuer alles, was dieser Abschnitt nicht neu setzt, und den Seitenrand von heute (am Elternteil, weil .st mit --voll bis an den Rand rechnet). Neu ist das Kleid: die Schrift in den Stufen der Tokens (Titel in der Kondensierten 54, Abschnitte 46 und 32, Lesetext 18, Beschriftungen 13), die Farbe aus dem Film (jeder Abschnitt traegt die Palette eines Titels als --a1 bis --a3, app/start.js; daraus --film, --film-tief und --film-glut), die erhabenen Tafeln mit Radius 14 und der Kante oben, die Knoepfe als Pillen (die Bausteine nehmen die Startseite aus, darum stehen ihre Gestalten hier), die Siegel ohne Kuerzung, Stand der Dinge mit dem Bild links, "Weiter mit ..." als Karte. Jede Regel ausser den beiden von heute haengt an html[data-stil="kinosaal"]:not(#saal) .st (das Gewicht einer ID gegen app/start.css). */ html[data-stil="kinosaal"] .seite:has(>.st){--seitenrand:clamp(20px,2.2vw,44px)} @media (max-width:820px){html[data-stil="kinosaal"] .seite:has(>.st){--seitenrand:16px}} html[data-stil="kinosaal"] .st{--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;font-size:var(--t-m);line-height:1.5} /* Farbe aus dem Film: aus der Palette des Abschnitts (Plex, --a1) wie die Farbe eines Titels (mx/farben.py): hell zum Licht hin, tief zum Grund */ html[data-stil="kinosaal"]:not(#saal) .st [style*="--a1"]{--film:color-mix(in oklab,var(--a1) 30%,var(--licht));--film-tief:color-mix(in oklab,var(--a1) 32%,var(--grund));--film-glut:color-mix(in oklab,var(--a1) 40%,transparent)} /* Die Knoepfe der Startseite in der Gestalt der Bausteine (Pille, Hauptsache hell, still ohne Rand) */ html[data-stil="kinosaal"]:not(#saal) .st .knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--hoehe);padding:0 var(--s5);border-radius:var(--r-rund);border:var(--rand-b) solid var(--linie-3);background:none;color:var(--text);font-family:var(--sans);font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-mittel);letter-spacing:0;text-transform:none;text-decoration:none;box-shadow:none;transition:background var(--dauer-fokus) var(--kurve),border-color var(--dauer-fokus) var(--kurve),color var(--dauer-fokus) var(--kurve)} html[data-stil="kinosaal"]:not(#saal) .st .knopf:hover{border-color:var(--licht);background:var(--flaeche-2);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .st .knopf:focus-visible{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} html[data-stil="kinosaal"]:not(#saal) .st .knopf.haupt{background:var(--licht);border-color:var(--licht);color:var(--grund);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .st .knopf.haupt:hover{background:var(--licht-voll);border-color:var(--licht-voll);color:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .st .knopf.leise{border-color:transparent;color:var(--text-2);padding:0 var(--s4)} html[data-stil="kinosaal"]:not(#saal) .st .knopf.leise:hover{border-color:transparent;background:var(--flaeche-2);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .st .knopf.klein{min-height:var(--hoehe-k);padding:0 var(--s4);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .st .knopf svg{width:20px;height:20px;stroke-width:1.5} /* Titelkarte: die Rolle randlos oben, links oben was gerade laeuft (Anlass in der Farbe des Films), Titel 54, Lesetext 18, Slogan 24 im Film */ html[data-stil="kinosaal"]:not(#saal) .st .st-hero{background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .st .st-hero .st-bild::after{background:var(--schleier-links),var(--schleier-unten)} html[data-stil="kinosaal"]:not(#saal) .st .st-laeuft{gap:2px} html[data-stil="kinosaal"]:not(#saal) .st .st-laeuft small{font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--film)} html[data-stil="kinosaal"]:not(#saal) .st .st-laeuft b{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .st .st-laeuft b span{font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-14);color:var(--text-2);margin-left:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .st .st-h1{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-54);line-height:var(--z-54);letter-spacing:-.015em} html[data-stil="kinosaal"]:not(#saal) .st .st-h1.kap{font-size:var(--t-46);line-height:var(--z-46)} html[data-stil="kinosaal"]:not(#saal) .st .st-unter{margin-top:var(--s4);font-size:var(--t-18);line-height:var(--z-18);color:var(--text-2);max-width:52ch} html[data-stil="kinosaal"]:not(#saal) .st .st-hero .st-slogan{margin-top:var(--s4);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:0;color:var(--film);max-width:28ch} /* "Weiter mit ...": eine Karte auf dem Schleier, das Zeichen Abspielen, darunter Folge und Rest, unten der Balken im Licht */ html[data-stil="kinosaal"]:not(#saal) .st .st-weiter{margin-top:var(--s4);font-size:var(--t-14);line-height:var(--z-14);text-shadow:none} html[data-stil="kinosaal"]:not(#saal) .st .st-weiter a{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s2) var(--s3);min-width:320px;max-width:100%;padding:var(--s3) var(--s4);border-radius:var(--r-flaeche);background:var(--schleier-2);border:var(--rand-b) solid color-mix(in srgb,var(--licht) 18%,transparent);color:var(--text);transition:border-color var(--dauer-fokus) var(--kurve)} html[data-stil="kinosaal"]:not(#saal) .st .st-weiter a:hover{border-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .st .st-weiter a>svg{grid-column:1;grid-row:1;width:28px;height:28px;fill:currentColor;stroke:none} html[data-stil="kinosaal"]:not(#saal) .st .st-weiter a>span{grid-column:2;grid-row:1;font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .st .st-weiter a>span b{font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .st .st-weiter a>span small{display:block;font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-text);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .st .st-weiter-stand{grid-column:1/-1;grid-row:2;width:auto;height:3px;margin:0;border-radius:var(--r-rund);background:linear-gradient(90deg,var(--licht) calc(var(--anteil,0) * 100%),color-mix(in srgb,var(--licht) 22%,transparent) 0)} /* Musik: der runde Knopf oben rechts auf dem Schleier, das Fenster eine Flaeche mit Hebung */ html[data-stil="kinosaal"]:not(#saal) .st .st-musik-knopf{border-radius:var(--r-rund);background:var(--schleier-2);border:var(--rand-b) solid color-mix(in srgb,var(--licht) 28%,transparent);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .st .st-musik-knopf:hover{border-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .st .st-musik-karte{border-radius:var(--r-flaeche);background:var(--flaeche-2);border:var(--rand-b) solid var(--linie-2);box-shadow:var(--hebung)} /* Einstiege: zwei grosse Kacheln, das Zeichen klein neben dem Namen (46), der Satz darunter (18) */ html[data-stil="kinosaal"]:not(#saal) .st .st-knopf{border-radius:var(--r-flaeche);background:var(--film-tief);border:var(--rand-b) solid color-mix(in srgb,var(--licht) 12%,transparent);border-top-color:color-mix(in srgb,var(--licht) 26%,transparent);box-shadow:var(--erhaben)} html[data-stil="kinosaal"]:not(#saal) .st .st-knopf:is(:hover,:focus-visible){transform:translateY(-4px);box-shadow:var(--erhaben)} html[data-stil="kinosaal"]:not(#saal) .st .st-knopf:focus-visible{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} html[data-stil="kinosaal"]:not(#saal) .st .st-knopf::after{background:linear-gradient(0deg,var(--schleier-3) 0%,var(--schleier-1) 55%,transparent)} html[data-stil="kinosaal"]:not(#saal) .st .st-ktext{gap:var(--s2) var(--s3)} html[data-stil="kinosaal"]:not(#saal) .st .st-ktext svg{grid-row:auto;width:32px;height:32px;stroke-width:1.4;filter:none} html[data-stil="kinosaal"]:not(#saal) .st .st-ktext b{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-46);line-height:var(--z-46);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .st .st-ksatz{grid-column:1/-1;font-size:var(--t-18);line-height:var(--z-18);color:var(--text-2)} /* Die Stuecke der Wand: Zwischentitel 46, je Stueck der Anlass im Film, Logo oder Titel 46, der Satz 24, die Siegel ganz, zwei Pillen */ html[data-stil="kinosaal"]:not(#saal) .st .st-zlead{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-46);line-height:var(--z-46);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .st .st-zunter{margin-top:var(--s2);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .st .st-tafel{border-radius:var(--r-flaeche);border-color:var(--linie-2);border-top-color:color-mix(in srgb,var(--licht) 16%,transparent);box-shadow:var(--erhaben)} html[data-stil="kinosaal"]:not(#saal) .st .st-tafel:hover{transform:translateY(-2px);box-shadow:var(--erhaben)} html[data-stil="kinosaal"]:not(#saal) .st .st-szene .st-sbild::after{background:var(--schleier-links),linear-gradient(0deg,var(--schleier-2),transparent 45%)} html[data-stil="kinosaal"]:not(#saal) .st .st-sanlass{margin-bottom:var(--s3);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--film);text-shadow:none} html[data-stil="kinosaal"]:not(#saal) .st .st-slogo{max-width:min(340px,60%);max-height:110px} html[data-stil="kinosaal"]:not(#saal) .st .st-stitel{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-46);line-height:var(--z-46);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .st .st-szeile{margin-top:var(--s3);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:0;max-width:28ch} html[data-stil="kinosaal"]:not(#saal) .st .st-siegel{margin-top:var(--s5);flex-wrap:wrap;row-gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .st .st-siegel li{gap:2px;padding:0 var(--s4);border-left:var(--rand-b) solid var(--linie-3);flex:none} html[data-stil="kinosaal"]:not(#saal) .st .st-siegel li:first-child{padding-left:0;border-left:0} html[data-stil="kinosaal"]:not(#saal) .st .st-siegel li b{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:0;color:var(--text);overflow:visible;text-overflow:clip;max-width:none} html[data-stil="kinosaal"]:not(#saal) .st .st-siegel li.gross b{font-size:var(--t-32);line-height:var(--z-32)} html[data-stil="kinosaal"]:not(#saal) .st .st-siegel li span{font-size:var(--t-13);line-height:var(--z-13);letter-spacing:0;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .st :is(.st-sknoepfe,.st-kknoepfe){gap:var(--s2);margin-top:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .st .st-sknoepfe .knopf{min-height:var(--hoehe);font-size:var(--t-16)} /* Paukenschlaege: Ziffern in der Kondensierten 54, Beischrift 13, der Satz in Lesegroesse; der Klang im Film */ html[data-stil="kinosaal"]:not(#saal) .st .st-zahlen{background:linear-gradient(180deg,color-mix(in srgb,var(--film-tief) 55%,var(--flaeche-2)) 0%,var(--flaeche) 100%)} html[data-stil="kinosaal"]:not(#saal) .st .st-klang i{background:linear-gradient(0deg,var(--film) 0%,transparent 100%)} html[data-stil="kinosaal"]:not(#saal) .st .st-schlaege{gap:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .st .st-schlaege b{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-54);line-height:var(--z-54);letter-spacing:-.01em} html[data-stil="kinosaal"]:not(#saal) .st .st-schlaege span{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .st .st-zahlen .st-zunter{margin-top:var(--s5);font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-18);line-height:var(--z-18);color:var(--text-2);max-width:48ch} /* Die Tafeln darunter: Kopf 32 in der Kondensierten, der Satz darunter in Text 2; die Flaeche in der Tiefe des Films */ html[data-stil="kinosaal"]:not(#saal) .st .st-abschnitt.st-tafel{background:linear-gradient(180deg,color-mix(in srgb,var(--film-tief) 55%,var(--flaeche-2)) 0%,var(--flaeche) 100%)} html[data-stil="kinosaal"]:not(#saal) .st .st-abschnitt.farbig::before{opacity:.45} html[data-stil="kinosaal"]:not(#saal) .st :is(.st-abschnitt>h2,.st-manifest-text h2){margin-bottom:var(--s2);font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .st .st-neusatz{margin:0 0 var(--s5);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} /* Karten auf der Startseite (Neu im Archiv): Plakat mit Ecken (Radius 2) und Kante, Titel 13 halbfett, Zeile 13 in Text 3 */ html[data-stil="kinosaal"]:not(#saal) .st .st-neu-reihe .tk .bild{border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante),0 14px 34px var(--schleier-2)} html[data-stil="kinosaal"]:not(#saal) .st .st-neu-reihe .tk b{font-weight:var(--g-halb);font-size:var(--t-13);line-height:var(--z-13);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .st .st-neu-reihe .tk small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .st .st-ausfall{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Zeitleiste: das Jahrzehnt 32, die Zahl 13, die Plakate mit Ecken */ html[data-stil="kinosaal"]:not(#saal) .st .st-dekade b{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .st .st-dekade>span{margin-top:0;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .st .st-dposter a{border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante),0 10px 26px var(--schleier-2)} /* Reihen und Sammlungen: je Reihe eine Flaeche (Radius 14) mit dem Faecher, Name 16 halbfett, Zeile 13 */ html[data-stil="kinosaal"]:not(#saal) .st .st-sammlung{border-radius:var(--r-flaeche);background:var(--flaeche-2);border-color:var(--linie-2);border-top-color:color-mix(in srgb,var(--licht) 12%,transparent);box-shadow:none} html[data-stil="kinosaal"]:not(#saal) .st .st-sammlung:hover{border-color:var(--linie-3);box-shadow:none} html[data-stil="kinosaal"]:not(#saal) .st .st-sposter img{border-radius:var(--r-werk);box-shadow:var(--kante),0 10px 24px var(--schleier-2)} html[data-stil="kinosaal"]:not(#saal) .st .st-sammlung b{font-family:var(--sans);font-weight:var(--g-halb);font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .st .st-sammlung>span:not(.st-sposter){font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Manifest: der Text in Lesegroesse, der Schlusssatz 46, der Kolophon 14 mit den Zahlen halbfett */ html[data-stil="kinosaal"]:not(#saal) .st .st-manifest{font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2);gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .st .st-kolophon{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .st .st-kolophon b{font-family:var(--sans);font-weight:var(--g-halb);font-size:1em;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .st .st-schluss{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-46);line-height:var(--z-46);letter-spacing:0;color:var(--licht)} /* Logbuch: Spalten mit Kopf 13, das Datum und der Stand als kleine Plakette, Titel 16 halbfett, Text 14 */ html[data-stil="kinosaal"]:not(#saal) .st .st-logbuch>h2{align-items:center} html[data-stil="kinosaal"]:not(#saal) .st .st-log-spalte h3{margin-bottom:var(--s2);font-family:var(--sans);font-weight:var(--g-halb);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .st .st-log li{border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .st .st-log time{font-family:var(--sans);font-size:var(--t-13);color:var(--film);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .st .st-log .st-stand{justify-self:start;align-self:start;display:inline-flex;align-items:center;min-height:var(--hoehe-marke);padding:0 var(--s2);border-radius:var(--r-marke);background:var(--flaeche-3);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .st .st-road li.in_arbeit .st-stand{color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .st .st-road li.fertig .st-stand{color:var(--gut)} html[data-stil="kinosaal"]:not(#saal) .st .st-log b{font-weight:var(--g-halb);font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .st .st-log p{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} /* Stand der Dinge (Prototyp): das Bild links ueber die halbe Tafel, rechts Titel, Text und Knopf; unten rechts im Bild Titel und Jahr */ html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:0;padding:0} /* align-self:stretch (Nachtrag 23.10.2026, Eigentuemer 10:05: "das hier ist kaputt"): .st-stand setzt in app/start.css align-items:start, und das Banner hat als Rasterzelle keinen eigenen Inhalt (sein Bild liegt absolut), also war es 0 px hoch und das Bild unsichtbar; die Datenkopie der Runden konnte kein Bild laden, darum fiel es dort nicht auf */ html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner .st-stand-banner{position:relative;inset:auto;grid-column:1;grid-row:1/span 2;align-self:stretch;min-height:100%} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner .st-stand-banner img{-webkit-mask-image:none;mask-image:none;object-position:center 30%} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner>h2{grid-column:2;grid-row:1;padding:clamp(26px,3vw,44px) clamp(22px,3vw,44px) 0;text-shadow:none} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner .st-stand-spalte{grid-column:2;grid-row:2;padding:var(--s3) clamp(22px,3vw,44px) clamp(26px,3vw,44px)} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner .st-stand-text{text-shadow:none} html[data-stil="kinosaal"]:not(#saal) .st .st-stand-text{font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2);gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner .st-stand-titel{position:relative;grid-column:1;grid-row:1/span 2;align-self:end;justify-self:end;right:auto;bottom:auto;margin:0 var(--s4) var(--s3) 0;font-size:var(--t-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .st .st-stand .knopf.gross{padding:0 var(--s5);border-radius:var(--r-rund);box-shadow:none;font-size:var(--t-16)} /* Abspann: die Tafel mittig, Kopf 32, die Beischrift 13 in Text 3, die Namen 16 halbfett, am Ende das Archiv 32 */ html[data-stil="kinosaal"]:not(#saal) .st .st-abspann>h2{justify-content:center} html[data-stil="kinosaal"]:not(#saal) .st .st-crawl li span{font-size:var(--t-13);line-height:var(--z-13);letter-spacing:0;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .st .st-crawl li b{font-family:var(--sans);font-weight:var(--g-halb);font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .st .st-crawl li.st-cende span{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:0;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .st .st-crawl li.st-cende b{font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3)} /* Ausserdem: der Kopf 13, je Weg der Name 14 halbfett und die Zeile 13 in Text 3 */ html[data-stil="kinosaal"]:not(#saal) .st .st-fuss{border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .st .st-fuss h2{margin-bottom:var(--s3);font-family:var(--sans);font-weight:var(--g-halb);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .st .st-fuss a b{font-weight:var(--g-halb);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .st .st-fuss a span{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .st .st-fuss p{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Ein Stueck als Kapitel: Zurueck still, der Satz 24 in Lesegroesse, die Platte mit den Werten in der Kondensierten 32 */ html[data-stil="kinosaal"]:not(#saal) .st .st-zurueck{font-size:var(--t-14);color:var(--text-2);border-bottom-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .st .st-khero .st-bild::after{background:var(--schleier-links),var(--schleier-unten)} html[data-stil="kinosaal"]:not(#saal) .st .st-klogo{max-width:min(420px,78%);max-height:140px} html[data-stil="kinosaal"]:not(#saal) .st .st-khero .st-ksatz{font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-24);line-height:1.35;max-width:42ch} html[data-stil="kinosaal"]:not(#saal) .st .st-spez{border-color:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .st .st-spgruppe{border-right-color:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .st .st-spgruppe h3{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .st .st-spgross{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .st .st-spgruppe p{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} /* Seite bearbeiten: die Leiste auf Flaeche 2 unter der Kopfleiste, ihr Name 18 in der Kondensierten */ html[data-stil="kinosaal"]:not(#saal) .st-bearbeiten-leiste{top:var(--kopfzeile);background:var(--flaeche-2);border-bottom-color:var(--linie-2);backdrop-filter:none;-webkit-backdrop-filter:none} /* Die Umbrueche von heute (app/start.css): bis 1180 Stand der Dinge einspaltig, das Bild oben */ @media (max-width:1180px){ html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner .st-stand-banner{grid-column:1;grid-row:1;min-height:240px} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner>h2{grid-column:1;grid-row:2} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner .st-stand-spalte{grid-column:1;grid-row:3} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner .st-stand-titel{grid-column:1;grid-row:1} } /* Handy (bis 820, Prototyp start.html): 16 px Rand; die Titelkarte mit dem Bild oben und dem Text auf der Tiefe des Films darunter, die Karte "Weiter mit ..." und die Knoepfe in voller Breite */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .st .st-titel{background:linear-gradient(180deg,var(--grund),var(--film-tief))} html[data-stil="kinosaal"]:not(#saal) .st .st-h1{font-size:var(--t-36);line-height:var(--z-36)} html[data-stil="kinosaal"]:not(#saal) .st .st-unter{font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .st .st-hero .st-slogan{font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .st .st-weiter a{display:grid;min-width:0;width:100%} html[data-stil="kinosaal"]:not(#saal) .st .st-ktext b{font-size:var(--t-32);line-height:var(--z-32)} html[data-stil="kinosaal"]:not(#saal) .st .st-ksatz{font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .st :is(.st-zlead,.st-stitel){font-size:var(--t-32);line-height:var(--z-32)} html[data-stil="kinosaal"]:not(#saal) .st .st-szeile{font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .st .st-siegel li{padding:0 var(--s3)} html[data-stil="kinosaal"]:not(#saal) .st .st-siegel li b{font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .st .st-siegel li.gross b{font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .st .st-sknoepfe .knopf{flex:1 1 100%} html[data-stil="kinosaal"]:not(#saal) .st .st-schlaege b{font-size:var(--t-36);line-height:var(--z-36)} html[data-stil="kinosaal"]:not(#saal) .st .st-schluss{font-size:var(--t-32);line-height:var(--z-32)} html[data-stil="kinosaal"]:not(#saal) .st .st-crawl li b{font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner .st-stand-banner{margin:0;width:auto;min-height:0;aspect-ratio:16/9} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner>h2{margin-top:0;padding:var(--s5) var(--s4) 0} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner .st-stand-spalte{padding:var(--s3) var(--s4) var(--s5)} html[data-stil="kinosaal"]:not(#saal) .st .st-stand.mit-banner .st-stand-titel{margin:0 var(--s3) var(--s2) 0} } /* ---------------------------------------------------------------- Bibliothek (Runde 6, 23.10.2026): was der Feed und seine Seiten ueber die Bausteine hinaus brauchen SPEZIFIKATION.md Abschnitte 12.5 bis 12.7, 00-KORREKTUR.md Abschnitte 5 und 8.2 (6), Prototyp bibliothek.html und sammlungen.html. Kopf, Buehne, Reiter, Slot-Koepfe, Karten, Kacheln, Kino-Modus, Regal, Merkliste und Verlauf tragen ihr Kleid schon aus den Bausteinen (Runden 2a und 2b) und dem Rahmen (Runde 3); hier steht nur, was die Bibliothek im Stil Kinosaal anders baut (app/bibliothek.js, Block kleid-bibliothek; die Schnellansicht in app/titel.js, Block saal): Sammlungen die Kachel flach 2 : 1, der Faecher aus vier Plakaten gross im Vordergrund, rechts bis fast an den Rand; das Bild dahinter dunkler und ruhiger; Name und Kennzeile unten links. Fehlt ein Plakat, steht das Ersatzplakat (Titel und Jahr). Im Feed (.samm) und auf der Seite Sammlungen (.reihen-karte) dieselbe Gestalt. Ein Moment die Herkunft als Zeile ueber den Angaben, der Name des Moments in der Farbe des Films; am Handy Film ansehen breit. Schnellansicht die Kennzeile wie auf der Titelseite (Freigabe und Stern fett, zweite Zeile mit der Aufloesung in Metall), die Wertungen klein darunter, das Menue Mehr in Gruppen. Die Farbe des Films kommt hier aus der Palette am Element (--z1 aus app/bibliothek.js clipFarben), wie auf der Startseite aus --a1. Jede Regel haengt an html[data-stil="kinosaal"]:not(#saal) (Gewicht einer ID; der Abschnitt steht vor den Bausteinen, die Gewichte entscheiden). Am Fernseher gilt nie der Stil Kinosaal. */ html[data-stil="kinosaal"]:not(#saal) :is(.slot-redaktion .redaktion,.slot-moment .moment-ausstellung,.samm-ks)[style*="--z1"]{--film:color-mix(in oklab,var(--z1) 30%,var(--licht));--film-tief:color-mix(in oklab,var(--z1) 30%,var(--grund))} /* Sammlungen: 2 : 1, das Bild dahinter leise (Deckkraft 0,32 statt 0,5 bis 0,85), ein Schleier von unten fuer Name und Kennzeile */ html[data-stil="kinosaal"]:not(#saal) :is(.samm,.reihen-karte).samm-ks{position:relative;isolation:isolate;display:block;aspect-ratio:2/1;min-width:0;overflow:hidden;border:0;background:var(--film-tief);color:var(--text);text-decoration:none} html[data-stil="kinosaal"]:not(#saal) :is(.samm,.reihen-karte).samm-ks::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(0deg,var(--schleier-3) 0%,var(--schleier-1) 38%,transparent 62%)} html[data-stil="kinosaal"]:not(#saal) .samm-ks>.hg{z-index:-1} html[data-stil="kinosaal"]:not(#saal) .samm-ks>.hg img.da{opacity:.32} html[data-stil="kinosaal"]:not(#saal) .samm-ks>.collage{position:absolute;inset:0;z-index:-1;aspect-ratio:auto;background:none} html[data-stil="kinosaal"]:not(#saal) .samm-ks>.collage img.da{opacity:.45} html[data-stil="kinosaal"]:not(#saal) .samm-ks:hover>:is(.hg,.collage) img.da{opacity:.55} /* Der Faecher: vier Plakate 2 : 3, hoch 72 % der Kachel, je ein Drittel ueberlappend, um je 4 Grad gegeneinander gedreht; beim Zeigen faechern sie weiter auf (nicht bei ruhiger Bewegung) */ html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-faecher{position:absolute;inset:5% 4% 23% 0;z-index:1;display:flex;align-items:flex-start;justify-content:flex-end;pointer-events:none} html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-fp{position:relative;flex:0 0 auto;height:100%;aspect-ratio:2/3;margin-left:-9%;overflow:hidden;border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante),0 14px 30px var(--schleier-2);transform:rotate(var(--r,0deg));transform-origin:50% 115%;transition:transform var(--dauer-ebene) var(--kurve)} html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-fp:first-child{margin-left:0} html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-fp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-fp.gesehen img{filter:saturate(.5) brightness(.6)} html[data-stil="kinosaal"]:not(#saal) .samm-ks:is(:hover,:focus-visible) .samm-fp{transform:rotate(calc(var(--r,0deg) * 1.4)) translateY(-4px)} html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-ersatz{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s1);padding:var(--s2);background:linear-gradient(180deg,color-mix(in srgb,var(--film-tief) 70%,var(--flaeche-3)),var(--film-tief));color:var(--film)} html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-ersatz b{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-13);line-height:1.15;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-ersatz small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Name und Kennzeile unten links, ueber dem Schleier; der Name darf zwei Zeilen haben */ html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-text{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s3);z-index:2;display:flex;flex-direction:column;gap:2px;min-width:0;text-shadow:0 1px 2px var(--grund),0 2px 14px var(--grund)} html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-text b{margin:0;font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:-.005em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-text small{margin:0;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical} html[data-stil="kinosaal"]:not(#saal) .samm-raster.vier .samm-ks .samm-text b{font-size:var(--t-18);line-height:var(--z-18)} /* S2-1b (30.10.2026): auf der Seite Sammlungen nach Kategorien die Zeile mit den Reihen eines Studios (leiser als die Kennzeile) und unter dem Raster einer Kategorie "Alle zeigen" */ html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-text small.samm-darin{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .samm-kat-fuss{display:flex;justify-content:center;margin-top:var(--s4)} /* Ein Moment (00-KORREKTUR.md Abschnitt 5): Werk, darunter die Herkunft ("Der Flug nach Wakanda, Minute 24"), dann die Angaben; Clip 7 von 12 und Ausstellung gleich hoch wie bisher (app/app.css) */ html[data-stil="kinosaal"]:not(#saal) .slot-moment .moment-ausstellung{grid-template-areas:"plakat werk" "plakat stelle" "plakat meta" "unter unter";border-radius:var(--r-flaeche);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) .slot-moment .moment-stelle{font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .slot-moment .moment-stelle b{font-weight:var(--g-halb);color:var(--film)} html[data-stil="kinosaal"]:not(#saal) .slot-moment .moment-plakat{border-radius:var(--r-werk);box-shadow:var(--kante),var(--hebung)} html[data-stil="kinosaal"]:not(#saal) .slot-moment .moment-rahmen{border-radius:var(--r-flaeche)} @container moment (min-width:1560px){ html[data-stil="kinosaal"]:not(#saal) .slot-moment .moment-ausstellung{grid-template-areas:"plakat werk" "plakat stelle" "plakat meta" "plakat ." "plakat unter"} html[data-stil="kinosaal"]:not(#saal) .slot-moment .moment-stelle{font-size:var(--t-18);line-height:var(--z-18)} } /* Schnellansicht im Stil Kinosaal (.ks-sa): die Kennzeile wie auf der Titelseite seit den Auftraegen 111 und 116, die Wertungen klein darunter, das Menue Mehr in Gruppen wie dort */ html[data-stil="kinosaal"]:not(#saal) .ks-sa .sa-kopf .meta{align-items:baseline;gap:var(--s1) var(--s3);font-size:var(--t-14);line-height:var(--z-14);color:var(--text);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .ks-sa .sa-kopf .meta .ks-fett{min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--text);font-family:var(--sans);font-size:inherit;line-height:inherit;font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .ks-sa .sa-kopf .meta>.ks-zeile-zwei{display:flex;flex-wrap:wrap;flex-basis:100%;align-items:baseline;gap:var(--s1);margin-top:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .ks-sa .sa-kopf .meta :is(.ks-bild,.ks-ton){display:inline-flex;align-items:baseline;gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .ks-sa .sa-kopf .meta .plakette{background:var(--schleier-2);color:var(--text);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .ks-sa .sa-kopf .meta .plakette.ks-aufl{min-height:0;font-size:var(--t-14);line-height:calc(var(--hoehe-marke) + var(--s1) - 2 * var(--rand-b))} html[data-stil="kinosaal"]:not(#saal) .ks-sa .sa-kopf .meta .plakette.ks-gold{border-color:var(--metall-gold-rand);background:var(--metall-gold);color:var(--metall-schrift)} html[data-stil="kinosaal"]:not(#saal) .ks-sa .sa-kopf .meta .plakette.ks-silber{border-color:var(--metall-silber-rand);background:var(--metall-silber);color:var(--metall-schrift)} html[data-stil="kinosaal"]:not(#saal) .ks-sa .sa-wertungen{margin-top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .ks-sa .sa-wertungen:empty{display:none} html[data-stil="kinosaal"]:not(#saal) .ks-sa .d-mehr-liste .mehr-gruppe{display:grid;gap:2px;padding:var(--s1) 0} html[data-stil="kinosaal"]:not(#saal) .ks-sa .d-mehr-liste .mehr-gruppe+.mehr-gruppe{border-top:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .ks-sa .d-mehr-liste .mehr-gruppe:not(:has(>:is(a,button):not([hidden]),>span>:is(a,button):not([hidden]))){display:none} html[data-stil="kinosaal"]:not(#saal) .ks-sa .d-mehr-liste .mehr-gruppe-name{padding:var(--s2) var(--s3) var(--s1);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text-2)} /* Eingangsbuch und Startkalender (D1b, 29.10.2026; scratchpad/d1/KONZEPT.md, A + B; Ordnung in app/app.css): der Name des Tages in der Stimme der Titelkarte (Kondensiert 600, 24), heute im Licht, die Tage davor in Text 2, die Zahl 13 in Text 3, Haarlinien in Linie 2; der Stapel einer Erweiterung mit Ecken, Kante und Schleier, beim Zeigen etwas weiter gefaechert (nicht bei ruhiger Bewegung). Im Startkalender Faden und Punkt in der Farbe des Films, die einzige Farbe der beiden Reihen; Achse und Monate leise, heute halbfett im Licht mit seinem Strich */ html[data-stil="kinosaal"]:not(#saal) .zugang-tag{border-left-color:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .zugang-tag-kopf b{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:-.01em;color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .zugang-tag.heute .zugang-tag-kopf b{color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .zugang-tag-kopf small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) a.zugang{border-radius:var(--r-feld)} html[data-stil="kinosaal"]:not(#saal) a.zugang .bild .gesehen-marke{background:var(--schleier-3);color:var(--gut)} html[data-stil="kinosaal"]:not(#saal) a.tk.zugang .bild .platzhalter{padding:var(--s1);font-size:var(--t-13);line-height:1.1;letter-spacing:0;overflow-wrap:anywhere} html[data-stil="kinosaal"]:not(#saal) a.zugang .plakette.zugang-staffel{font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) a.zugang-stapel .stapel .bild{border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante),0 10px 22px var(--schleier-2);transition:transform var(--dauer-ebene) var(--kurve)} html[data-stil="kinosaal"]:not(#saal) a.zugang-stapel .stapel .bild.leer{background:linear-gradient(160deg,color-mix(in srgb,var(--film) 22%,var(--grund)),var(--grund) 135%)} html[data-stil="kinosaal"]:not(#saal) a.zugang-stapel:is(:hover,:focus-visible) .stapel .bild{transform:rotate(calc(var(--r,0deg) * 1.6)) translateY(-2px)} html[data-stil="kinosaal"]:not(#saal) .zugang-zahl{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:var(--z-24);color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) a.sk-titel .sk-text small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) a.sk-titel::after{background:var(--film);opacity:.8} html[data-stil="kinosaal"]:not(#saal) a.sk-titel:is(:hover,:focus-visible)::after{opacity:1} html[data-stil="kinosaal"]:not(#saal) .sk-faeden line{stroke:var(--film);opacity:.8} html[data-stil="kinosaal"]:not(#saal) .startkalender-achse{border-top-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .sk-punkt{background:var(--film);box-shadow:0 0 0 3px var(--grund)} html[data-stil="kinosaal"]:not(#saal) .sk-monat{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .sk-monat::before{border-left-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .sk-heute{font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--licht)} @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .sk-tag b{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:1;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .sk-tag small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .sk-reihe::before{border-left-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) a.sk-titel::after{opacity:1;box-shadow:0 0 0 3px var(--grund)} } @media (prefers-reduced-motion:reduce){html[data-stil="kinosaal"]:not(#saal) a.zugang-stapel .stapel .bild{transition:none}html[data-stil="kinosaal"]:not(#saal) a.zugang-stapel:is(:hover,:focus-visible) .stapel .bild{transform:rotate(var(--r,0deg))}} html[data-stil="kinosaal"].ruhig:not(#saal) a.zugang-stapel:is(:hover,:focus-visible) .stapel .bild{transform:rotate(var(--r,0deg))} /* S2-3b (30.10.2026): Weiter in der Reihe, Weltband, Studio-Reihe, Perlen der Kachel, Mass des Checks und die Uebersicht bei vielen Sammlungen (scratchpad/s2-3/KONZEPT.md; Ordnung in app/app.css, Block s2-3-reihen). Die Flaechen wie jede Kachel des Feeds, die Namen in der Stimme der Titelkarte, die Farbe des Films nur am naechsten Teil, im Lichtkegel und im Fleck auf dem Faden. Der Kegel nur hier (klassisch keiner). */ html[data-stil="kinosaal"]:not(#saal) :is(.slot-fortsetzung.fortsetzung-perlen,.slot-welt,.slot-themenwelt.themenwelt-studio){border:0;background:var(--flaeche);border-radius:var(--r-flaeche);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-reihe{border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) :is(.fortsetzung-reihe .reihe-name,.welt-name,.studio-zeichen,.titel-reihe .reihe-name){font-family:var(--kond);font-weight:var(--g-titel);color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) :is(.fortsetzung-stand,.welt-kennzeile,.welt-weg){color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(.welt-art,.welt-fehlen,.studio-art,.studio-kennzeile,.studio-werk-name,.studio-reihen-name,.zs-abschnitt-name,.zs-jahr){color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(.fortsetzung-als .als,.welt-weg .als){color:var(--film)} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-anhaenger .bild{border-radius:var(--r-werk);box-shadow:var(--kante),0 18px 40px -18px var(--film-glut);background:var(--film-tief)} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-anhaenger:is(:hover,:focus-visible) .bild{box-shadow:inset 0 0 0 1px var(--linie-3),var(--glut)} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-anhaenger .bild .ersatz{color:var(--film)} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-anhaenger .bild .spiel{background:var(--schleier-3);color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) :is(.vorgaenger-bild,.welt-bild,.reihe-nb-bild) .haken{background:var(--licht);color:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .welt-name{font-size:var(--t-46);line-height:var(--z-46)} html[data-stil="kinosaal"]:not(#saal) .welt-name.lang{font-size:var(--t-36);line-height:var(--z-36)} html[data-stil="kinosaal"]:not(#saal) .welt-bild{background:var(--film-tief)} html[data-stil="kinosaal"]:not(#saal) .welt-bild .platzhalter{color:var(--film);font-family:var(--kond)} html[data-stil="kinosaal"]:not(#saal) .welt-plakat.serie .welt-bild{box-shadow:4px -4px 0 -1px var(--flaeche-3),8px -8px 0 -2px var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .welt-plakat.naechster .welt-bild{outline-color:var(--film)} html[data-stil="kinosaal"]:not(#saal) .welt-plakat.naechster small{color:var(--film)} html[data-stil="kinosaal"]:not(#saal) .welt-bild .sicht i{background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .reihe-pfeil.welt-pfeil{border-color:var(--linie-3);color:var(--text-2);background:transparent} html[data-stil="kinosaal"]:not(#saal) .reihe-pfeil.welt-pfeil:hover{color:var(--licht);border-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .welt-kegel{display:block} html[data-stil="kinosaal"]:not(#saal) .welt-kegel .k0{stop-color:var(--film);stop-opacity:.30} html[data-stil="kinosaal"]:not(#saal) .welt-kegel .k1{stop-color:var(--film);stop-opacity:.03} html[data-stil="kinosaal"]:not(#saal) .welt-fleck{top:2px;height:26px;background:var(--film-glut);filter:blur(2px)} html[data-stil="kinosaal"]:not(#saal) .studio-leinwand{background:radial-gradient(ellipse 80% 62% at 50% 46%,color-mix(in srgb,var(--licht) 7.5%,transparent),transparent 72%),var(--grund);border-radius:var(--r-werk);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) .studio-schild{background:var(--licht);border-radius:var(--r-marke)} html[data-stil="kinosaal"]:not(#saal) .studio-reihe{border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .samm-ks .kachel-perlen{display:block;margin-top:var(--s2);max-width:min(100%,420px)} html[data-stil="kinosaal"]:not(#saal) .samm-ks .kachel-perlen .zs-teil.naechster .zs-perle{box-shadow:none} html[data-stil="kinosaal"]:not(#saal) .samm-ks .kachel-perlen .zs-teil{max-width:28px} html[data-stil="kinosaal"]:not(#saal) .samm-ks .kachel-perlen .zs-teile{justify-content:flex-start} html[data-stil="kinosaal"]:not(#saal) .samm-ks:has(.kachel-perlen) .samm-faecher{bottom:31%} html[data-stil="kinosaal"]:not(#saal) .samm-mass svg{color:var(--gut)} html[data-stil="kinosaal"]:not(#saal) .samm-mass:not(.voll) svg{color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) .samm-mass a{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .samm-suche .feld-rahmen{flex:1 1 auto} html[data-stil="kinosaal"]:not(#saal) :is(.samm-suche-zahl,.samm-teilkopf small,.samm-register-zeile small,.samm-register-buchstabe,.samm-sprung .chip small){color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .samm-register-zeile{border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .chip.samm-klein-chip{border-color:var(--linie-3);color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .chip.samm-klein-chip:hover{border-color:var(--licht)} @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) :is(.slot-fortsetzung.fortsetzung-perlen,.slot-welt){background:transparent;box-shadow:none;border-radius:0} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-reihe{border:0;background:var(--flaeche);box-shadow:var(--kante);border-radius:var(--r-flaeche)} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-reihe:first-child{border-top:0} html[data-stil="kinosaal"]:not(#saal) :is(.welt-name,.welt-name.lang){font-size:var(--t-36);line-height:var(--z-36)} html[data-stil="kinosaal"]:not(#saal) .welt-fleck{top:-3px;height:26px} } /* S2-4 (30.10.2026): die Reihen als Banner in der Suche (die Flaeche wie eine Kachel des Feeds, der Name in der Stimme der Titelkarte, das Querbild hinter den Schleiern der Leinwand), die Teile ausserhalb des Archivs im Weltband und auf der Seite der Reihe (die Marke "Nicht im Archiv" wie dort), der Kopf der Uebersicht in einer Zeile, die Kategorien in der Groesse der Reiter (Ordnung in app/app.css, Block s2-4-reihen) */ html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-banner{margin:0} html[data-stil="kinosaal"]:not(#saal) .reihe-banner{border:0;background:var(--flaeche);border-radius:var(--r-flaeche);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) .reihe-banner:hover{box-shadow:inset 0 0 0 1px var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .reihe-banner-bild img{opacity:.8} html[data-stil="kinosaal"]:not(#saal) .reihe-banner-bild::after{background:var(--schleier-links),var(--schleier-unten)} html[data-stil="kinosaal"]:not(#saal) .reihe-banner-etikett{font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .reihe-banner-name{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-46);line-height:var(--z-46);color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .reihe-banner.klein .reihe-banner-name{font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .reihe-banner-weg{color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .reihe-banner:has(.reihe-banner-weg:focus-visible){outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} html[data-stil="kinosaal"]:not(#saal) :is(.reihe-banner-zahlen,.reihe-banner-satz){font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .reihe-banner.klein .reihe-banner-zahlen{font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .reihe-banner-plakat{border-radius:var(--r-werk);background:var(--flaeche-3);box-shadow:var(--kante),0 18px 40px -18px var(--schleier-3)} html[data-stil="kinosaal"]:not(#saal) .reihe-banner-plakat .platzhalter{color:var(--text-2);font-family:var(--kond)} html[data-stil="kinosaal"]:not(#saal) .reihe-banner-plakat .haken{background:var(--licht);color:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .welt-plakat.fehlt .welt-bild{background:repeating-linear-gradient(135deg,var(--flaeche),var(--flaeche) 8px,var(--flaeche-2) 8px,var(--flaeche-2) 16px);box-shadow:inset 0 0 0 1px var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .welt-plakat.fehlt .welt-bild .platzhalter{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .welt-plakat.fehlt b{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .welt-bild .plakette.welt-fehlt-marke{display:block;min-height:0;padding:0;border-color:var(--warnung-rand);background:var(--schleier-3);color:var(--warnung); font-size:calc(var(--t-13) - 1px);line-height:var(--z-13);letter-spacing:-.01em;text-align:center} html[data-stil="kinosaal"]:not(#saal) .welt-plakat.fehlt .knopf.welt-anfragen{min-height:0;padding:0;border:0;background:none;color:var(--licht);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);text-decoration:underline;text-decoration-color:var(--linie-3);text-underline-offset:.22em} html[data-stil="kinosaal"]:not(#saal) .welt-plakat.fehlt .knopf.welt-anfragen:hover{text-decoration-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .welt-text{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-fehlend-liste.mit-bildern>li{grid-template-columns:40px 40px minmax(0,1fr) auto} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-fehlend-bild{border-radius:var(--r-werk);background:var(--flaeche-3);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-fehlend-text{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .samm-kopfzeile .samm-bereich .etikett{font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .samm-kopfzeile .samm-bereich .segment button{min-height:calc(var(--hoehe) - 8px);padding:0 var(--s4);font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .samm-kopfzeile .samm-suche input.feld{min-height:calc(var(--hoehe) + var(--s1));font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .samm-kopfzeile .samm-suche .feld-rahmen>.feld-name{font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .samm-kopfzeile .samm-sprung .chip{min-height:var(--hoehe);padding:0 var(--s4);font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .samm-kopfzeile .samm-sprung .chip small{font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .reihe-buehne:hover{box-shadow:inset 0 0 0 1px var(--linie-3)} @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .reihe-banner-name{font-size:var(--t-32);line-height:var(--z-32)} html[data-stil="kinosaal"]:not(#saal) :is(.reihe-banner-zahlen,.reihe-banner-satz){font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-fehlend-liste.mit-bildern>li{grid-template-columns:32px 32px minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) .samm-kopfzeile .samm-sprung .chip{min-height:var(--hoehe-chip);padding:0 var(--s3);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .samm-kopfzeile .samm-bereich .segment button{min-height:calc(var(--hoehe-k) - 8px);padding:0 var(--s3);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .samm-kopfzeile .samm-bereich .etikett{font-size:var(--t-14);line-height:var(--z-14)} } /* Ruhige Bewegung: der Faecher steht */ @media (prefers-reduced-motion:reduce){html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-fp{transition:none}html[data-stil="kinosaal"]:not(#saal) .samm-ks:is(:hover,:focus-visible) .samm-fp{transform:rotate(var(--r,0deg))}} html[data-stil="kinosaal"].ruhig:not(#saal) .samm-ks:is(:hover,:focus-visible) .samm-fp{transform:rotate(var(--r,0deg))} /* Handy (bis 820): Name 18, die Herkunft in Text 16, Film ansehen ueber die ganze Breite */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-text b{font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .samm-ks .samm-text{left:var(--s3);right:var(--s3);bottom:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .slot-moment .moment-unter .solo-aktionen>.knopf.haupt:first-child{flex:1 1 100%;justify-content:center} } /* ---------------------------------------------------------------- Empfehlung der Redaktion (Runde 6, 23.10.2026; entwicklung/TODO.md "Empfehlung der Redaktion neu", Weg (a)) Wie heute Szene (oder Trailer), Text und Plakat in einer Reihe (50 : 31,25 : 18,75; ohne Plakat 58 : 42; bis 1250 die Szene oben), im Stil Kinosaal (.ks-red): die Flaeche im Licht des Films, Szene und Plakat so hoch wie die Reihe (bildfuellend, keine leere Flaeche), die Mittelspalte gefuellt: oben das Zitat vertikal mittig mit der freiwilligen Zeile darueber und der Unterschrift darunter, unten als Block Logo, Angaben, Fassung und Knoepfe. Die Groesse des Zitats nach seiner Laenge (app/bibliothek.js redaktionGroesse): bis etwa 90 Zeichen sehr gross (Kondensierte bis 46), bis 220 gross (bis 32), darueber Lesegroesse (18); ab etwa 600 Zeichen der Anfang mit "Mehr". Ohne Text stehen Logo und Angaben mittig. Der Ton-Knopf des Trailers unten rechts im Bild als runder Knopf auf dem Schleier. */ html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion:has(>.ks-red){border-color:var(--linie-2);border-radius:var(--r-flaeche);background:linear-gradient(90deg,var(--film-tief),var(--flaeche) 80%)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion:has(>.ks-red)>:is(.redaktion-rahmen,.redaktion-bild){align-self:stretch;height:auto;min-height:100%} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion:has(>.ks-red)>.redaktion-plakat{position:relative;align-self:stretch;background:var(--film-tief)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion:has(>.ks-red)>.redaktion-plakat img{position:absolute;inset:0} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion-text.ks-red{align-items:stretch;justify-content:space-between;gap:var(--s5);padding:var(--s6) var(--s6) var(--s5)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red>.redaktion-zitat{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--s3);min-width:0} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red>.redaktion-block{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);min-width:0} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red.ohne-satz{justify-content:center} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red.ohne-satz>.redaktion-zitat{flex:none} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red.ohne-satz>.redaktion-zitat:empty{display:none} /* Das Zitat: sehr gross und gross in der Kondensierten 500, Lesegroesse in der Sans; Absaetze mit Luft */ html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-satz{margin:0;font-family:var(--kond);font-weight:var(--g-kopf);color:var(--text);letter-spacing:-.005em;text-wrap:balance} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-satz.gr-sehr-gross{font-size:clamp(var(--t-32),2.6vw,var(--t-46));line-height:1.08} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-satz.gr-gross{font-size:clamp(var(--t-24),1.9vw,var(--t-32));line-height:1.16} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-satz.gr-lese{font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-18);line-height:var(--z-18);letter-spacing:0;text-wrap:pretty} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .mit-plakat .ks-red .redaktion-satz.gr-sehr-gross{font-size:clamp(var(--t-24),2.2vw,var(--t-46))} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .mit-plakat .ks-red .redaktion-satz.gr-gross{font-size:clamp(var(--t-18),1.6vw,var(--t-32))} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-satz p{margin:0 0 .5em} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-satz p:last-child{margin-bottom:0} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-zeile{font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--film)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-unterschrift{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-mehr{margin-left:calc(-1 * var(--s3) - var(--rand-b))} /* Der Block unten: Logo (hoechstens 64 hoch) oder Titel 32, Angaben 14, Fassung 13, die Knoepfe */ html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-werk .logo{max-width:min(280px,90%);max-height:64px} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-werk h3{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:-.01em} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .meta{gap:var(--s1) var(--s3);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-fassung{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .solo-aktionen{margin-top:var(--s2)} /* Ton-Knopf und Tuer des Trailers */ html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion-ton{width:var(--hoehe);height:var(--hoehe);border:var(--rand-b) solid var(--linie-3);background:var(--schleier-2);color:var(--text);backdrop-filter:none;-webkit-backdrop-filter:none;transition:background var(--dauer-fokus) var(--kurve),border-color var(--dauer-fokus) var(--kurve)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion-ton:hover{border-color:var(--licht);background:var(--schleier-3)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion-ton[aria-pressed="true"]{border-color:var(--licht);background:var(--licht);color:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion-ton:focus-visible{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .trailer-tuer:focus-visible{outline:var(--ring) solid var(--licht);outline-offset:calc(-1 * var(--s1))} /* Bis 1250 (Szene oben, Text und Plakat darunter) und am Handy: das Zitat eine Stufe kleiner, der Rand schmaler */ @media (max-width:1250px){ html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion-text.ks-red{padding:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-satz.gr-sehr-gross,html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .mit-plakat .ks-red .redaktion-satz.gr-sehr-gross{font-size:var(--t-36);line-height:var(--z-36)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-satz.gr-gross,html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .mit-plakat .ks-red .redaktion-satz.gr-gross{font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion:has(>.ks-red)>.redaktion-plakat{border-radius:var(--r-werk)} } @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion-text.ks-red{padding:var(--s5) var(--s4)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-satz.gr-sehr-gross,html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .mit-plakat .ks-red .redaktion-satz.gr-sehr-gross{font-size:var(--t-32);line-height:var(--z-32)} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-satz.gr-gross,html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .mit-plakat .ks-red .redaktion-satz.gr-gross{font-size:var(--t-18);line-height:var(--z-18)} } /* ---------------------------------------------------------------- Lass dich ueberraschen (UE-1, 06.11.2026; app/bibliothek.js Block ueberraschung) Die Ordnung steht in app/app.css (Block ueberraschung, beide Stile); hier das Kleid: das Banner eine Flaeche im Licht des Films mit Radius 14, der Satz in der Kondensierten, das Blatt eine Flaeche mit Hebung, die Wahl als grosse Tafeln, der Ring in Licht. Die Knoepfe kommen aus den Bausteinen (Pille, still). */ html[data-stil="kinosaal"]:not(#saal) .ue-banner-knopf{border-color:var(--linie-2);border-radius:var(--r-flaeche);background:linear-gradient(90deg,var(--film-tief),var(--flaeche-2) 70%);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ue-banner-knopf:hover,html[data-stil="kinosaal"]:not(#saal) .ue-banner-knopf:focus-visible{border-color:var(--linie-3);background-color:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) .ue-banner-knopf:focus-visible{outline-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .ue-zeichen{background:var(--flaeche-3);color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .ue-zeichen svg,html[data-stil="kinosaal"]:not(#saal) .ue-etikett svg{width:20px;height:20px} html[data-stil="kinosaal"]:not(#saal) .ue-banner-text b{font-family:var(--kond);font-size:var(--t-24);font-weight:var(--g-titel)} html[data-stil="kinosaal"]:not(#saal) .ue-banner-text small{color:var(--text-2);font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) .ue-banner-knopf .ue-fragen{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .ue-schleier{background:var(--schleier-2)} html[data-stil="kinosaal"]:not(#saal) .ue-blatt{border-color:var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche-2);box-shadow:var(--hebung)} html[data-stil="kinosaal"]:not(#saal) .ue-blatt h2{font-family:var(--kond);font-size:var(--t-32)} html[data-stil="kinosaal"]:not(#saal) .ue-etikett,html[data-stil="kinosaal"]:not(#saal) .ue-angaben{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ue-schritt,html[data-stil="kinosaal"]:not(#saal) .ue-start{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .ue-wahl>.ue-wahl-knopf.knopf.knopf{height:auto;min-height:96px;padding:var(--s4);border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche-3);color:var(--text);box-shadow:none} html[data-stil="kinosaal"]:not(#saal) .ue-wahl>.ue-wahl-knopf.knopf.knopf:hover{border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .ue-wahl>.ue-wahl-knopf.knopf.knopf:focus-visible{outline:2px solid var(--licht);outline-offset:2px} @media (max-width:820px){html[data-stil="kinosaal"]:not(#saal) .ue-wahl>.ue-wahl-knopf.knopf.knopf{min-height:80px;padding:var(--s3)}} html[data-stil="kinosaal"]:not(#saal) .ue-wahl>.ue-wahl-knopf.knopf.knopf[aria-pressed="true"]{border-color:var(--licht);background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) .ue-wahl-knopf b{font-size:var(--t-24);line-height:1.15} /* UI-1 */ html[data-stil="kinosaal"]:not(#saal) .ue-wahl-knopf small{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ue-bereich{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ue-bereich span{color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .ue-ring-lauf{stroke:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .ue-ring-grund{stroke:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .ue-flaeche{background:radial-gradient(120% 90% at 70% 30%,var(--film-tief),var(--grund) 70%)} html[data-stil="kinosaal"]:not(#saal) .ue-schatten{background:var(--schleier-links),var(--schleier-unten)} html[data-stil="kinosaal"]:not(#saal) .ue-satz{color:var(--text)} @media (max-width:820px){html[data-stil="kinosaal"]:not(#saal) .ue-blatt{border-radius:var(--r-flaeche) var(--r-flaeche) 0 0}html[data-stil="kinosaal"]:not(#saal) .ue-banner-text b{font-size:var(--t-18)}} /* ---------------------------------------------------------------- Frag unsere KI (KI-1, 06.11.2026; app/ki.js, app/bibliothek.js Block frag-ki) Die Ordnung steht in app/app.css (Block frag-ki, beide Stile); hier das Kleid: die Nachricht des Nutzers als Flaeche mit Radius 14, die Karten als Flaechen im Licht des Films, Titel in der Kondensierten, das Licht des Denkens in Licht. Knoepfe, Chips und Feld kommen aus den Bausteinen. */ html[data-stil="kinosaal"]:not(#saal) .ki-du{border-radius:var(--r-flaeche);background:var(--flaeche-3);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ki-du small,html[data-stil="kinosaal"]:not(#saal) .ki-zeit,html[data-stil="kinosaal"]:not(#saal) .ki-nr{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .ki-leer,html[data-stil="kinosaal"]:not(#saal) .ki-hinweis,html[data-stil="kinosaal"]:not(#saal) .ki-angaben, html[data-stil="kinosaal"]:not(#saal) .ki-warum.leise,html[data-stil="kinosaal"]:not(#saal) .ki-denkt{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ki-fehler{color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) .ki-karte{border-color:var(--linie-2);border-radius:var(--r-flaeche);background:linear-gradient(90deg,var(--film-tief),var(--flaeche-2) 60%)} html[data-stil="kinosaal"]:not(#saal) .ki-bild{border-radius:var(--r-feld);background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) .ki-titel{font-family:var(--kond);font-size:var(--t-18);font-weight:var(--g-titel);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ki-warum{color:var(--text);font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) .ki-licht{background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .kino-ki .knopf{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ki-eingabe .feld-rahmen{display:grid;width:100%;align-self:stretch} html[data-stil="kinosaal"]:not(#saal) .ki-eingabe .ki-feld{width:100%} /* RE-1 (06.11.2026, Marke 13.203; Wort des Eigentuemers 20:2x): das Filmlogo oben ueber Zeile und Text, die Groessen nach der Zahl der Woerter und der Flaeche. Die Flaeche (.redaktion) ist ein Container ihrer Breite: cqi ist ein Hundertstel davon, und weil Szene und Plakat die Hoehe der Reihe aus der Breite geben (16 : 9 und 2 : 3), deckelt cqi auch die Hoehe; cqh (ohne Container der Hoehe die Hoehe des Fensters) deckelt sie bei flachen Fenstern. Raster: eine Rasterzeile ist --zeile (48). Regeln als Tabelle in scratchpad/p2/BERICHT-RE-1.md. Logo bis 3 Rasterzeilen hoch (am Handy 2), hoechstens 90 % der Textspalte (die Vorgabe 60 % machte breite Logos in der Mittelspalte am PC kleiner als vorher: 235 statt 258 px), nie ueber seine eigene Groesse (nur max-*) ohne Logo der Titel in der Kondensierten an derselben Stelle, bis 2 Rasterzeilen Text st-3 bis 25 Woerter: clamp(24, 2,4 cqi, 46), hoechstens 6 cqh Text st-2 bis 50 Woerter: clamp(18, 1,8 cqi, 32), hoechstens 4,6 cqh Text st-1 darueber: Lesegroesse clamp(18, 1,3 cqi, 24) in der Plex Sans Zeile st-3 bis 8 Woerter: clamp(14, 1,1 cqi, 18); st-2 und st-1 clamp(14, 1 cqi, 16); immer kleiner als der Text (der kleinste Text ist 18) Nie abgeschnitten: der Text bricht um und die Reihe waechst; ab 600 Zeichen bleibt der Anfang mit Mehr (app/bibliothek.js). */ html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion:has(>.ks-red){container-type:inline-size} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red>.redaktion-zitat>.redaktion-werk{display:block;width:100%;margin:0 0 var(--s2);line-height:0} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red>.redaktion-zitat>.redaktion-werk .logo{display:block;width:auto;height:auto;max-width:90%;max-height:min(calc(3 * var(--zeile)),18cqh);object-fit:contain;object-position:left bottom;filter:drop-shadow(0 2px 12px var(--grund))} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red>.redaktion-zitat>.redaktion-werk.ohne-logo h3{margin:0;font-family:var(--kond);font-weight:var(--g-titel);font-size:clamp(var(--t-32),3cqi,var(--t-46));line-height:1.05;letter-spacing:-.01em;color:var(--licht);text-wrap:balance;max-height:none} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-zeile.st-3{font-size:clamp(var(--t-14),1.1cqi,var(--t-18));line-height:1.3} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red .redaktion-zeile:is(.st-2,.st-1){font-size:clamp(var(--t-14),1cqi,var(--t-16));line-height:1.35} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion .ks-red .redaktion-satz.st-3[data-woerter]{font-family:var(--kond);font-weight:var(--g-kopf);font-size:clamp(var(--t-24),min(2.4cqi,6cqh),var(--t-46));line-height:1.1;letter-spacing:-.005em;text-wrap:balance} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion .ks-red .redaktion-satz.st-2[data-woerter]{font-family:var(--kond);font-weight:var(--g-kopf);font-size:clamp(var(--t-18),min(1.8cqi,4.6cqh),var(--t-32));line-height:1.18;letter-spacing:0;text-wrap:pretty} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .redaktion .ks-red .redaktion-satz.st-1[data-woerter]{font-family:var(--sans);font-weight:var(--g-text);font-size:clamp(var(--t-18),1.3cqi,var(--t-24));line-height:1.5;letter-spacing:0;text-wrap:pretty} @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red>.redaktion-zitat>.redaktion-werk .logo{max-height:calc(2 * var(--zeile))} html[data-stil="kinosaal"]:not(#saal) .slot-redaktion .ks-red>.redaktion-zitat>.redaktion-werk.ohne-logo h3{font-size:var(--t-32);line-height:var(--z-32)} } /* ---------------------------------------------------------------- RE-1: Ein Satz mit Querbild, Weiter in der Reihe ueber die ganze Breite (06.11.2026, Marke 13.203; Ergaenzung des Eigentuemers 21:2x; app/bibliothek.js Block re1-feinschliff im Block saal) Ein Satz das Querbild des Titels ueber die ganze Breite des Stuecks, abgedunkelt (Helligkeit 0,42) und zu beiden Seiten ausgeblendet (Maske: links bis 30 % durchsichtig unter dem Satz, rechts ab 78 % unter Plakat und Titel); darueber der Schleier links und rechts, damit Satz und Titel lesbar bleiben. Am Handy ein Band 21 : 9 zwischen Satz und Titel, oben und unten ausgeblendet. Weiter in der Reihe die Knoten ohne Hoechstbreite (bis dahin 56 px: kurze Reihen hingen links, lange liefen ueber den Rand), gleichmaessig verteilt; verdichtet stehen Gruppen als laengliche Perle mit Zaehler darunter; nie breiter als die Spalte. */ html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat.mit-banner{overflow:hidden} html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat-banner{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden} html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:brightness(.42) saturate(1.05);-webkit-mask-image:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--grund) 35%,transparent) 18%,var(--grund) 34%,var(--grund) 66%,color-mix(in srgb,var(--grund) 35%,transparent) 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--grund) 35%,transparent) 18%,var(--grund) 34%,var(--grund) 66%,color-mix(in srgb,var(--grund) 35%,transparent) 82%,transparent 100%)} html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--schleier-2) 0%,transparent 40%,transparent 60%,var(--schleier-2) 100%)} html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat.mit-banner blockquote,html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat.mit-banner .wer{text-shadow:0 1px 18px var(--grund)} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-schnur .zs-teil:not(.auf){max-width:none} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-schnur .zeitstrahl.re1-faden{width:100%;min-width:0;overflow:hidden} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-schnur .zeitstrahl.re1-faden.verdichtet{padding-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-schnur .re1-faden .zs-teile{justify-content:space-between} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-schnur .re1-faden>.zs-abschnitt{justify-content:center} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-schnur .re1-faden .zs-ziel{min-width:0} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-schnur .re1-faden .zs-teil[data-gruppe]{flex-direction:column;justify-content:center} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-schnur .re1-faden .zs-teil[data-gruppe] .zs-perle{width:calc(var(--zs-p) * 2.6);border-style:dashed} html[data-stil="kinosaal"]:not(#saal) .fortsetzung-schnur .re1-faden .zs-teil[data-gruppe]>.zs-zaehler{position:absolute;top:calc(50% + var(--zs-p));left:50%;transform:translateX(-50%);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3);font-variant-numeric:tabular-nums} @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat.mit-banner{grid-template-columns:minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat.mit-banner blockquote{grid-row:1} html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat-banner{position:relative;inset:auto;z-index:0;grid-row:2;margin:0 calc(-1 * var(--s4));aspect-ratio:21/9} html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat-banner img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,var(--grund) 28%,var(--grund) 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,var(--grund) 28%,var(--grund) 72%,transparent 100%);filter:brightness(.6)} html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat-banner::after{display:none} html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat.mit-banner .wer{grid-row:3} html[data-stil="kinosaal"]:not(#saal) .slot-zitat .zitat.mit-banner .solo-aktionen{grid-row:4} } /* ---------------------------------------------------------------- Bausteine der Bedienung (Runde 2a, 15.10.2026) Gestalt aus dem Prototyp (scratchpad/a84/arbeit/prototyp/css/bausteine.css, SPEZIFIKATION.md Abschnitt 4) fuer das Markup, das app/kern.js (Block bausteine) baut: die Klassen von heute, also .knopf.leise fuer still, .knopf.klein fuer kompakt, .ik fuer den Knopf nur mit Zeichen, .knopf.still fuer das Zeichen ohne Rand aus dem Saal, input.feld, select.feld und textarea.feld fuer die Eingabe, .suchfeld, .segment. Gewicht: jede Regel steht hinter html[data-stil="kinosaal"]:not(#saal). Das :not(#saal) zaehlt wie eine ID; so gewinnt die Gestalt eines Bausteins gegen jede Regel einer Seite in app/app.css (a82, Grundregel 3: eine Seite ordnet Bausteine an, sie ueberschreibt keinen Wert). Gesetzt werden nur Werte der Gestalt (Hoehe, Innenabstand, Rand, Rundung, Flaeche, Schrift, Farbe), nie display, position oder Breite einer Seite; so bleibt jede Anordnung und jedes Ausblenden der Seiten, wie es ist. Zielgroessen mindestens 24 px, Knoepfe 44 (kompakt 36, am Finger 44 ueber --hoehe-k), Fokus als Ring in Licht. Bewusst noch nicht: die Startseite (.st, Formfaktor von heute bis Runde 6) und der Player (.player, Runde 5b) behalten ihre Knoepfe; im Player bekommt nur der Knopf "Intro ueberspringen" (.pl-intro, Auftrag 98) die Gestalt einer Nebenhandlung auf dem Bild. */ /* Knopf: drei Stufen, zwei Groessen, eine Form (Pille) */ html[data-stil="kinosaal"]:not(#saal) :is(.knopf,.ik):not(:is(.st,.player) *){gap:var(--s2);min-height:var(--hoehe);padding:0 var(--s5);border-radius:var(--r-rund);border:var(--rand-b) solid var(--linie-3);background:none;color:var(--text);font-family:var(--sans);font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-mittel);letter-spacing:0;text-transform:none;text-decoration:none;transition:background var(--dauer-fokus) var(--kurve),border-color var(--dauer-fokus) var(--kurve),color var(--dauer-fokus) var(--kurve)} html[data-stil="kinosaal"]:not(#saal) :is(.knopf,.ik):not(:is(.st,.player) *):hover{border-color:var(--licht);background:var(--flaeche-2);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(.knopf,.ik):not(:is(.st,.player) *):active{background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) :is(.knopf,.ik):not(:is(.st,.player) *):focus-visible{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} html[data-stil="kinosaal"]:not(#saal) .knopf:not(:is(.st,.player) *) svg{width:20px;height:20px;stroke-width:1.5} html[data-stil="kinosaal"]:not(#saal) .knopf.haupt:not(:is(.st,.player) *){background:var(--licht);border-color:var(--licht);color:var(--grund);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .knopf.haupt:not(:is(.st,.player) *):hover{background:var(--licht-voll);border-color:var(--licht-voll);color:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .knopf.leise:not(:is(.st,.player) *){border-color:transparent;color:var(--text-2);padding:0 var(--s4)} html[data-stil="kinosaal"]:not(#saal) .knopf.leise:not(:is(.st,.player) *):hover{border-color:transparent;background:var(--flaeche-2);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .knopf.klein:not(:is(.st,.player) *){min-height:var(--hoehe-k);padding:0 var(--s4);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .knopf.klein.leise:not(:is(.st,.player) *){padding:0 var(--s3)} html[data-stil="kinosaal"]:not(#saal) .knopf.klein:not(:is(.st,.player) *) svg{width:16px;height:16px} html[data-stil="kinosaal"]:not(#saal) .knopf.gefahr:not(:is(.st,.player) *){border-color:var(--fehler-rand);color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) .knopf.leise.gefahr:not(:is(.st,.player) *){border-color:transparent} html[data-stil="kinosaal"]:not(#saal) .knopf.gefahr:not(:is(.st,.player) *):hover{background:var(--fehler-tief);border-color:var(--fehler);color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) :is(.knopf.haupt.gefahr,.knopf.krit):not(:is(.st,.player) *){background:var(--fehler);border-color:var(--fehler);color:var(--grund)} html[data-stil="kinosaal"]:not(#saal) :is(.knopf.scharf,.ik.scharf):not(:is(.st,.player) *){background:var(--fehler-tief);border-color:var(--fehler);color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) :is(.knopf.an,.ik.an):not(:is(.st,.player) *){background:var(--flaeche-3);border-color:var(--licht);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(.knopf,.ik):not(:is(.st,.player) *):disabled{opacity:.4;cursor:default} /* Knopf nur mit Zeichen: rund, so breit wie hoch; still ohne Rand (der Saal) */ html[data-stil="kinosaal"]:not(#saal) :is(.ik,.knopf.still):not(:is(.st,.player) *){width:var(--hoehe);min-width:var(--hoehe);height:var(--hoehe);padding:0;color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(.ik.klein,.knopf.still.klein):not(:is(.st,.player) *){width:var(--hoehe-k);min-width:var(--hoehe-k);height:var(--hoehe-k);min-height:var(--hoehe-k)} html[data-stil="kinosaal"]:not(#saal) .knopf.still:not(:is(.st,.player) *){border-color:transparent} html[data-stil="kinosaal"]:not(#saal) .ik:not(:is(.st,.player) *) svg{width:20px;height:20px;stroke-width:1.5} html[data-stil="kinosaal"]:not(#saal) .ik.klein:not(:is(.st,.player) *) svg{width:16px;height:16px} /* Nebenhandlung im Player (Auftrag 98): lesbar auf jedem Bild; Verhalten und Platz bleiben bei app/app.css */ html[data-stil="kinosaal"]:not(#saal) .pl-intro{min-height:var(--hoehe);padding:0 var(--s5);border-radius:var(--r-rund);border:var(--rand-b) solid var(--linie-3);background:var(--schleier-2);color:var(--text);font-family:var(--sans);font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb);letter-spacing:0;text-transform:none} html[data-stil="kinosaal"]:not(#saal) .pl-intro:hover{background:var(--licht);border-color:var(--licht);color:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .pl-intro:focus-visible{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} /* Handlungszeile: Abstand 8, umbrechen; die Ordnung (Ausrichtung, Platz) bleibt bei der Zeile der Seite */ html[data-stil="kinosaal"]:not(#saal) .handlungen:not(:is(.st,.player) *){gap:var(--s2);flex-wrap:wrap;align-items:center} /* Feld und Auswahl: ein Kasten (Radius 8), Beschriftung sichtbar darueber */ html[data-stil="kinosaal"]:not(#saal) :is(input.feld,select.feld,textarea.feld,select.auswahl):not(:is(.st,.player) *){min-height:var(--hoehe);padding:0 var(--s3);border-radius:var(--r-feld);border:var(--rand-b) solid var(--linie-3);background:var(--flaeche);color:var(--text);font-family:var(--sans);font-size:var(--t-16);line-height:var(--z-16);box-shadow:none} html[data-stil="kinosaal"]:not(#saal) :is(input.feld,select.feld,textarea.feld).mono:not(:is(.st,.player) *){font-family:var(--mono);font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) textarea.feld:not(:is(.st,.player) *){min-height:calc(var(--hoehe) * 2.5);padding:var(--s2) var(--s3)} html[data-stil="kinosaal"]:not(#saal) :is(select.feld,select.auswahl):not(:is(.st,.player) *){appearance:none;padding-right:var(--s7);background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat} html[data-stil="kinosaal"]:not(#saal) :is(input.feld,select.feld,textarea.feld):not(:is(.st,.player) *)::placeholder{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(input.feld,select.feld,textarea.feld):not(:is(.st,.player) *):hover{border-color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(input.feld,select.feld,textarea.feld):not(:is(.st,.player) *):focus{border-color:var(--licht);outline:var(--ring) solid var(--licht);outline-offset:0;box-shadow:none} html[data-stil="kinosaal"]:not(#saal) :is(input.feld,select.feld,textarea.feld):not(:is(.st,.player) *):disabled{opacity:.5} html[data-stil="kinosaal"]:not(#saal) :is(input.feld,select.feld,textarea.feld)[readonly]:not(:is(.st,.player) *){background:none;border-style:dashed} html[data-stil="kinosaal"]:not(#saal) :is(select.feld.klein,.tabelle .feld,.rg-zeile .feld):not(:is(.st,.player) *){min-height:var(--hoehe-k);font-size:var(--t-14);line-height:var(--z-14)} /* Die sichtbare Beschriftung: im klassischen Kleid ohne Box und verborgen (app/app.css), hier ueber dem Feld */ /* Der Rahmen ist ein Raster, keine Flexbox: ein Feld mit flex:1 aus seiner Zeile wuechse sonst in die Hoehe. In einer Zeile waechst der Rahmen statt des Felds (flex 1 1 auto) und steht unten, damit das Feld auf der Linie der Knoepfe bleibt. */ html[data-stil="kinosaal"]:not(#saal) .feld-rahmen{display:inline-grid;grid-template-columns:minmax(0,1fr);align-content:end;align-self:end;gap:var(--s1);flex:1 1 auto;min-width:0;vertical-align:bottom} html[data-stil="kinosaal"]:not(#saal) .feld-rahmen>.feld-name{display:block;font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text-2);overflow:hidden;text-overflow:ellipsis} html[data-stil="kinosaal"]:not(#saal) .feld-rahmen>.feld{width:100%} /* Suchfeld: Pille mit Zeichen, Eingabe und Taste */ html[data-stil="kinosaal"]:not(#saal) .suchfeld:not(:is(.st,.player) *){gap:var(--s2);min-height:var(--hoehe-k);padding:0 var(--s2) 0 var(--s3);border-radius:var(--r-rund);border:var(--rand-b) solid var(--linie-3);background:var(--flaeche);color:var(--text-3);box-shadow:none} html[data-stil="kinosaal"]:not(#saal) .suchfeld:not(:is(.st,.player) *):focus-within{border-color:var(--licht);box-shadow:none} html[data-stil="kinosaal"]:not(#saal) .suchfeld:not(:is(.st,.player) *) input{border:0;background:none;color:var(--text);font-family:var(--sans);font-size:var(--t-14);min-height:calc(var(--hoehe-k) - 2px);padding:0} html[data-stil="kinosaal"]:not(#saal) .suchfeld:not(:is(.st,.player) *) svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5} /* Waehlen: Ankreuzfeld und Optionsfeld 20 (nativ, Akzent in Licht), Kippschalter 44 x 24, Umschalter als Pille */ html[data-stil="kinosaal"]:not(#saal) :is(input[type=checkbox]:not(.kipp),input[type=radio]):not(:is(.st,.player) *){width:20px;height:20px;accent-color:var(--licht);cursor:pointer} html[data-stil="kinosaal"]:not(#saal) :is(input[type=checkbox],input[type=radio]):not(:is(.st,.player) *):focus-visible{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} html[data-stil="kinosaal"]:not(#saal) .kipp:not(:is(.st,.player) *){width:44px;height:24px;border-radius:var(--r-rund);border:var(--rand-b) solid var(--linie-3);background:var(--flaeche)} html[data-stil="kinosaal"]:not(#saal) .kipp:not(:is(.st,.player) *)::after{top:3px;left:3px;width:16px;height:16px;background:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .kipp:checked:not(:is(.st,.player) *){background:var(--licht);border-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .kipp:checked:not(:is(.st,.player) *)::after{left:23px;background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .kipp:not(:is(.st,.player) *):focus-visible{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} html[data-stil="kinosaal"]:not(#saal) :is(.segment,.umschalter):not(:is(.st,.player) *){padding:3px;gap:2px;border-radius:var(--r-rund);border:var(--rand-b) solid var(--linie-3);background:var(--flaeche)} html[data-stil="kinosaal"]:not(#saal) :is(.segment,.umschalter):not(:is(.st,.player) *) :is(button,a){min-height:calc(var(--hoehe-k) - 8px);padding:0 var(--s4);border:0;border-radius:var(--r-rund);background:none;color:var(--text-2);font-family:var(--sans);font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-mittel)} html[data-stil="kinosaal"]:not(#saal) :is(.segment,.umschalter):not(:is(.st,.player) *) :is(button,a):hover{background:var(--flaeche-3);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(.segment,.umschalter):not(:is(.st,.player) *) :is(button,a).an{background:var(--licht);color:var(--grund)} html[data-stil="kinosaal"]:not(#saal) :is(.segment,.umschalter):not(:is(.st,.player) *) small{color:inherit;font-weight:var(--g-text);opacity:.72} /* Chip: filtert; gewaehlt hell. Die Facetten des Inventars sind Chips */ html[data-stil="kinosaal"]:not(#saal) :is(.chip,.facette):not(:is(.st,.player) *){gap:var(--s2);min-height:var(--hoehe-chip);padding:0 var(--s3);border-radius:var(--r-rund);border:var(--rand-b) solid var(--linie-3);background:none;color:var(--text-2);font-family:var(--sans);font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-mittel)} html[data-stil="kinosaal"]:not(#saal) :is(.chip,.facette):not(:is(.st,.player) *):hover{color:var(--text);border-color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(.chip,.facette).an:not(:is(.st,.player) *){background:var(--licht);border-color:var(--licht);color:var(--grund)} html[data-stil="kinosaal"]:not(#saal) :is(.chip,.facette):not(:is(.st,.player) *):focus-visible{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} html[data-stil="kinosaal"]:not(#saal) :is(.chip,.facette):not(:is(.st,.player) *) small{font-family:var(--sans);font-size:var(--t-13);color:inherit;opacity:.72;font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .chip.weg:not(:is(.st,.player) *){border-style:dashed} html[data-stil="kinosaal"]:not(#saal) .chips:not(:is(.st,.player) *){gap:var(--s2)} /* Reiter: Seiten derselben Sache; gewaehlt mit einem Strich in Licht */ html[data-stil="kinosaal"]:not(#saal) .reiter:not(:is(.st,.player) *){gap:var(--s5);border-bottom:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) .reiter:not(:is(.st,.player) *) :is(a,button){min-height:var(--ziel-min);padding:0;border-bottom:2px solid transparent;color:var(--text-3);font-family:var(--sans);font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-mittel)} html[data-stil="kinosaal"]:not(#saal) .reiter:not(:is(.st,.player) *) :is(a,button):hover{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .reiter:not(:is(.st,.player) *) :is(a,button).an{color:var(--text);border-bottom-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .reiter:not(:is(.st,.player) *) :is(a,button):focus-visible{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} html[data-stil="kinosaal"]:not(#saal) .reiter:not(:is(.st,.player) *) :is(a,button) span{font-family:var(--sans);font-size:var(--t-13);color:var(--text-3);font-variant-numeric:tabular-nums} /* Kennzeichen: Status, Plakette, Etikett, Taste */ html[data-stil="kinosaal"]:not(#saal) .status:not(:is(.st,.player) *){gap:6px;min-height:var(--hoehe-marke);padding:0 var(--s2);border-radius:var(--r-marke);background:var(--flaeche-3);color:var(--text-2);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);letter-spacing:0;text-transform:none} html[data-stil="kinosaal"]:not(#saal) .status:not(:is(.st,.player) *)::before{width:8px;height:8px} html[data-stil="kinosaal"]:not(#saal) .status.ok:not(:is(.st,.player) *){background:var(--gut-tief);color:var(--gut)} html[data-stil="kinosaal"]:not(#saal) .status.warn:not(:is(.st,.player) *){background:var(--warnung-tief);color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) .status.krit:not(:is(.st,.player) *){background:var(--fehler-tief);color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) .status.neu:not(:is(.st,.player) *){background:var(--flaeche-3);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(.plakette,.plaketten>span):not(:is(.st,.player) *){gap:var(--s1);min-height:var(--hoehe-marke);padding:0 var(--s2);border-radius:var(--r-marke);border:var(--rand-b) solid var(--linie-3);color:var(--text-2);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);letter-spacing:0;text-transform:none} html[data-stil="kinosaal"]:not(#saal) .etikett:not(:is(.st,.player) *){font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);letter-spacing:0;text-transform:none;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) kbd:not(:is(.st,.player) *){min-width:var(--hoehe-marke);height:var(--hoehe-marke);padding:0 6px;border-radius:var(--r-marke);border:var(--rand-b) solid var(--linie-3);border-bottom-width:2px;background:var(--flaeche);color:var(--text-2);font-family:var(--sans);font-size:var(--t-13);line-height:1;font-weight:var(--g-halb);vertical-align:middle} html[data-stil="kinosaal"]:not(#saal) .tasten:not(:is(.st,.player) *){gap:var(--s1);color:var(--text-3);font-size:var(--t-13)} /* Tabelle: Koepfe in Sans 13, Zeilen 40, Zahlen rechtsbuendig mit gleich breiten Ziffern */ html[data-stil="kinosaal"]:not(#saal) .tabelle-box:not(:is(.st,.player) *){border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche)} html[data-stil="kinosaal"]:not(#saal) .tabelle:not(:is(.st,.player) *){font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .tabelle:not(:is(.st,.player) *) th{height:var(--zeile-k);padding:0 var(--s3);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);letter-spacing:0;text-transform:none;color:var(--text-3);background:var(--grund);border-bottom:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .tabelle:not(:is(.st,.player) *) th button{min-height:var(--zeile-k);font-weight:inherit;color:inherit} html[data-stil="kinosaal"]:not(#saal) .tabelle:not(:is(.st,.player) *) th button.an{color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .tabelle:not(:is(.st,.player) *) td{height:var(--zeile-k);padding:var(--s1) var(--s3);border-bottom:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) .tabelle:not(:is(.st,.player) *) :is(td.r,th.r){text-align:right;font-variant-numeric:tabular-nums lining-nums} html[data-stil="kinosaal"]:not(#saal) .tabelle:not(:is(.st,.player) *) td.m{font-family:var(--mono);font-size:var(--t-13)} html[data-stil="kinosaal"]:not(#saal) .tabelle:not(:is(.st,.player) *) tbody tr:hover td{background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) .tabelle:not(:is(.st,.player) *) tbody tr.an td{background:var(--flaeche-3)} /* Gestapelte Tabellen am Handy (app/app.css, VH-02: Klasse stapel, je Zelle data-spalte): bis 820 px behaelt jede Zelle die Gestalt des Stapels, mit Spaltennamen 35 % und 12 eingerueckt neben ihm. Die Zeile der Zellen oben wiegt wie eine ID und nahm ihnen sonst Einruecken, Hoehe und Linie, Name und Inhalt lagen uebereinander (Nachtrag 23:05 zur Runde 5b, Befund von Auftrag 112, 22.10.2026) */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .tabelle.stapel:not(:is(.st,.player) *) td{height:auto;padding:var(--s1) 0;border-bottom:0;text-align:left} html[data-stil="kinosaal"]:not(#saal) .tabelle.stapel:not(:is(.st,.player) *) td[data-spalte]{padding-left:calc(35% + var(--s3))} } /* Einstellungszeile (A84 .regler): Name und Wirkung, Wert, Standard und Aendern an einer Zeile, getrennt durch Linien statt Kaesten */ html[data-stil="kinosaal"]:not(#saal) .rg-liste{border:0;border-radius:0;background:none} html[data-stil="kinosaal"]:not(#saal) .rg-zeile{gap:var(--s2) var(--s5);align-items:center;padding:var(--s3) 0;background:none;border-top:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) .rg-zeile:first-child{border-top:0} html[data-stil="kinosaal"]:not(#saal) .rg-zeile.abweichend{box-shadow:inset 3px 0 0 var(--warnung);padding-left:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .rg-zeile .rg-text p{font-size:var(--t-14);line-height:var(--z-14);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .rg-zeile .rg-text .mono{font-size:12px;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .rg-zeile .rg-wert{align-items:flex-end;text-align:right} html[data-stil="kinosaal"]:not(#saal) .rg-zeile .rg-wert b{font-size:var(--t-14);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .rg-zeile .rg-wert .klein{font-size:var(--t-13);color:var(--text-3)} /* Schieberegler; Wegmarke (heute .d-chip: die Wege der Titelseite) */ html[data-stil="kinosaal"]:not(#saal) .schieber:not(:is(.st,.player) *){appearance:none;height:24px;background:none;cursor:pointer} html[data-stil="kinosaal"]:not(#saal) .schieber:not(:is(.st,.player) *)::-webkit-slider-runnable-track{height:4px;border-radius:var(--r-rund);background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) .schieber:not(:is(.st,.player) *)::-webkit-slider-thumb{appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:var(--r-rund);background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) :is(.wegmarke,.d-chip):not(:is(.st,.player) *){gap:var(--s2);min-height:32px;padding:0 var(--s3);border-radius:var(--r-rund);background:var(--flaeche-2);border:var(--rand-b) solid var(--linie-2);color:var(--text);font-family:var(--sans);font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-mittel);text-decoration:none} html[data-stil="kinosaal"]:not(#saal) :is(.wegmarke,.d-chip):not(:is(.st,.player) *):hover{border-color:var(--text-3);background:var(--flaeche-3)} /* Zielgroesse: kein Ziel unter 24 px. Die Bausteine haben ihre Hoehe oben; hier die kleinen Ziele mit eigener Gestalt einer Seite (Termine der Zeitleiste, das Kreuz einer Notiz, Mehr der grossen Karte, Kopfzeilen der Aufklapper). Gezielt statt fuer jeden Knopf: ein festes min-height auf einer grossen Flaeche (Karte der Planung mit role=button) nimmt ihr in einer Spalte das automatische Minimum, und sie schrumpft (gesehen im Board der Planung). :where() wiegt nichts: ein Knopf, der zugleich Kopf eines Aufklappers ist, behaelt seine Hoehe. */ html[data-stil="kinosaal"]:not(#saal) :where(.spur .termin,.notiz button,.gk-mehr,details>summary):not(:is(.st,.player) *){min-height:24px} @media (pointer:coarse){html[data-stil="kinosaal"]:not(#saal) :is(.ik.klein,.knopf.still.klein):not(:is(.st,.player) *){width:var(--hoehe-k);min-width:var(--hoehe-k);height:var(--hoehe-k)}} @media (prefers-reduced-motion:reduce){html[data-stil="kinosaal"]:not(#saal) :is(.knopf,.ik){transition:none}} html[data-stil="kinosaal"].ruhig:not(#saal) :is(.knopf,.ik){transition:none} /* ---------------------------------------------------------------- Bausteine der Inhalte und Ebenen (Runde 2b, 16.10.2026) Gestalt aus dem Prototyp (scratchpad/a84/arbeit/prototyp/css/bausteine.css, SPEZIFIKATION.md Abschnitt 4) fuer das Markup, das app/kern.js baut: Block bausteine-inhalte (MX.satz, MX.pfad, MX.lesetext, MX.kennzahl, MX.abschnittskopf, MX.modul, MX.kachel, MX.buehne, MX.personenkarte, MX.menue, MX.hinweis, MX.meldung, MX.lagekachel, MX.band, MX.zeitleiste, MX.diagramm, MX.bahn, MX.planungskarte, MX.kommentar, MX.sterne, MX.ablage, MX.code, MX.clip) und MX.karte, MX.regal, MX.leer, MX.blatt, MX.dialog, MX.toast. Die Seiten nennen dort die Klassen von heute (MX.GESTALTEN); hier bekommt jede Klasse eines Bausteins die eine Gestalt ihres Bausteins. Wie in Runde 2a: jede Regel hinter html[data-stil="kinosaal"]:not(#saal) (Gewicht einer ID: die Gestalt gewinnt gegen jede Regel einer Seite), gesetzt werden nur Werte der Gestalt (Rand, Rundung, Flaeche, Schatten, Innenabstand, Schrift, Farbe), nie display, position, Breite oder Abstand nach aussen einer Seite. Startseite (.st, Runde 6) und Player (.player, Runde 5b) behalten ihre Gestalt. */ /* Titelkarte: Plakat 2 : 3 und Querformat 16 : 9 (Breitkarte, Weiterschauen); Bild mit Ecken (Radius 2), Kante, beim Zeigen das Licht des Films; Titel 14 halbfett, Unterzeile 13 in Text 3. Als Zeile (Regal als Liste, Ausstrahlung) dasselbe Bild klein. */ html[data-stil="kinosaal"]:not(#saal) :is(.tk,.tk-breit,.tk-weiter):not(:is(.st,.player) *){border-radius:var(--r-werk)} html[data-stil="kinosaal"]:not(#saal) :is(.tk,.tk-breit,.tk-weiter):not(:is(.st,.player) *) .bild{border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) :is(.tk,.tk-breit,.tk-weiter):not(:is(.st,.player) *):is(:hover,:focus-visible) .bild{box-shadow:var(--kante),var(--glut)} html[data-stil="kinosaal"]:not(#saal) :is(.tk,.tk-breit,.tk-weiter,.tk-zeile,.strahlt):not(:is(.st,.player) *) b{font-weight:var(--g-halb);font-size:var(--t-14);line-height:var(--z-14);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(.tk,.tk-breit,.tk-weiter,.tk-zeile,.strahlt):not(:is(.st,.player) *) small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(.tk,.tk-breit,.tk-weiter):not(:is(.st,.player) *) .sicht i{background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .tk:not(:is(.st,.player) *) .haken{border-radius:var(--r-rund);background:var(--schleier-3);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(.tk-zeile,.strahlt):not(:is(.st,.player) *){border-radius:var(--r-feld)} html[data-stil="kinosaal"]:not(#saal) :is(.tk-zeile,.strahlt):not(:is(.st,.player) *) :is(img,.platz){border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante)} /* Ersatzplakat: ohne Plakat die Farbe des Titels (--film vom Server, sonst die neutrale) als Flaeche, der Titel als Plakattext */ html[data-stil="kinosaal"]:not(#saal) .tk:not(:is(.st,.player) *) .platzhalter{padding:var(--s3);background:linear-gradient(160deg,color-mix(in srgb,var(--film) 22%,var(--grund)),var(--grund) 135%);color:var(--film);font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:-.01em} /* Personenkarte: Bild oder Anfangsbuchstaben im Kreis auf der Tiefe des Films, Name halbfett, Rolle 13. Der Name in 14 statt 16 (Prototyp): die Reihe der Besetzung hat bis Runde 5a ihre Breite von heute, in 16 kuerzte sie jeden zweiten Namen. */ html[data-stil="kinosaal"]:not(#saal) :is(.tk-person,a.person,a.werk):not(:is(.st,.player) *) .rund{border-radius:var(--r-rund);border:0;background:var(--film-tief);color:var(--film);font-family:var(--kond);font-weight:var(--g-titel);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) .tk-person:not(:is(.st,.player) *) b{font-weight:var(--g-halb);font-size:var(--t-14);line-height:var(--z-14);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .tk-person:not(:is(.st,.player) *) small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Abschnittskopf: Titel in der Kondensierten (Regal und Slot 24, Modul 18), Grund 14 in Text 3, rechts alle Werkzeuge mit kleinem Abstand */ html[data-stil="kinosaal"]:not(#saal) :is(.abschnitt-kopf,.slot-kopf,.regal-kopf,.modul-kopf,.tafel-kopf,.k-kopf,.teil-kopf):not(:is(.st,.player) *){gap:var(--s1) var(--s3)} html[data-stil="kinosaal"]:not(#saal) :is(.abschnitt-kopf,.slot-kopf,.regal-kopf):not(:is(.st,.player) *) :is(h2,h3){font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:0;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(.modul-kopf,.tafel-kopf,.k-kopf,.teil-kopf):not(:is(.st,.player) *) :is(h2,h3){font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);letter-spacing:0;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(.abschnitt-kopf,.slot-kopf,.regal-kopf,.modul-kopf,.tafel-kopf,.k-kopf,.teil-kopf):not(:is(.st,.player) *) .grund{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(.abschnitt-kopf,.slot-kopf,.regal-kopf,.modul-kopf,.tafel-kopf,.k-kopf,.teil-kopf):not(:is(.st,.player) *) .rechts{gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .werkzeuge:not(:is(.st,.player) *){gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) :is(.regal-kopf,.modul-kopf):not(:is(.st,.player) *) a.mehr{border-radius:var(--r-rund);font-size:var(--t-14);font-weight:var(--g-mittel);color:var(--text-2)} /* Modul: ein Kasten (Radius 14, Rand Linie 2, Grund schwarz, Innenabstand 24) */ html[data-stil="kinosaal"]:not(#saal) :is(.modul,.tafel,.technik-karte,.docs-download,.up-box-karte,.wg-karte,.k-auftrag,.mods-karte):not(:is(.st,.player) *){border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche);background:var(--grund);padding:var(--s5)} /* Lagekachel (Uebersicht im Betrieb): der Kasten des Moduls mit kleinerem Innenabstand, der Kopf als Name in 18 */ html[data-stil="kinosaal"]:not(#saal) .cockpit.ueb>.modul:not(:is(.st,.player) *){border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche);background:var(--grund);padding:var(--s4) var(--s5)} /* Kachel: die grosse Flaeche einer Kategorie im Feed (Einzelstueck, Magazin, Zitat, Paar, Sammlung, Laeuft gerade): Radius 14, eine feine Kante, beim Zeigen das Licht des Films. Der Slot selbst (Kopf und Flaeche) bleibt ohne Kasten. */ html[data-stil="kinosaal"]:not(#saal) :is(.kachel,.spot,.samm,.reihen-karte,.lauf-karte,.slot .solo,.slot .magazin,.slot .zitat,.slot .schau,.slot .streifen):not(:is(.st,.player) *){border-radius:var(--r-flaeche);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) :is(.kachel,.spot,.samm,.reihen-karte,.lauf-karte,.slot .solo,.slot .magazin,.slot .zitat,.slot .schau):not(:is(.st,.player) *):hover{box-shadow:inset 0 0 0 1px var(--linie-3),var(--glut)} html[data-stil="kinosaal"]:not(#saal) :is(.kachel,.spot,.slot .solo,.slot .schau):not(:is(.st,.player) *) h3{font-family:var(--kond);font-weight:var(--g-titel);letter-spacing:-.01em} /* Buehne: "Fuer heute" der Bibliothek und des Kino-Modus; der Titel in der Kondensierten, die Vorschaubilder mit Ecken, die gewaehlte im Licht */ html[data-stil="kinosaal"]:not(#saal) :is(.buehne,.reihe-buehne,.kino-buehne):not(:is(.st,.player) *) :is(h1,h2){font-family:var(--kond);font-weight:var(--g-titel);letter-spacing:-.01em} html[data-stil="kinosaal"]:not(#saal) :is(.buehne,.reihe-buehne,.kino-buehne):not(:is(.st,.player) *) .vorschau :is(button,img){border-radius:var(--r-werk)} /* Menue: Flaeche 2, Rand Linie 2, Radius 14, Hebung; Eintraege 44 hoch mit Radius 8 */ html[data-stil="kinosaal"]:not(#saal) :is(.menue,.d-mehr-liste):not(:is(.st,.player) *){padding:var(--s2);border-radius:var(--r-flaeche);background:var(--flaeche-2);border:var(--rand-b) solid var(--linie-2);box-shadow:var(--hebung)} html[data-stil="kinosaal"]:not(#saal) :is(.menue,.d-mehr-liste):not(:is(.st,.player) *) :is(a,button){min-height:var(--hoehe-k);border-radius:var(--r-feld);color:var(--text);font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) :is(.menue,.d-mehr-liste):not(:is(.st,.player) *) :is(a,button):hover{background:var(--flaeche-3)} /* Blatt (statt Schublade) und Dialog: Flaeche 2, Rand Linie 2, Hebung; Kopf mit Linie, Titel 24 in der Kondensierten */ html[data-stil="kinosaal"]:not(#saal) .schublade{background:var(--flaeche-2);border-left:var(--rand-b) solid var(--linie-2);box-shadow:var(--hebung)} html[data-stil="kinosaal"]:not(#saal) .schublade-kopf{background:var(--flaeche-2);border-bottom:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg{border-radius:var(--r-flaeche);background:var(--flaeche-2);border:var(--rand-b) solid var(--linie-2);box-shadow:var(--hebung);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .dlg-kopf{border-bottom:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .dlg-kopf h3{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .dlg-fuss{border-top:var(--rand-b) solid var(--linie-2)} /* Toast: Flaeche 2, Radius 14, Hebung, die Art als Strich links (gut, Fehler, Licht) */ html[data-stil="kinosaal"]:not(#saal) .toast{border-radius:var(--r-flaeche);background:var(--flaeche-2);border:var(--rand-b) solid var(--linie-2);box-shadow:var(--hebung),inset 3px 0 0 var(--gut);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .toast.fehler{box-shadow:var(--hebung),inset 3px 0 0 var(--fehler)} html[data-stil="kinosaal"]:not(#saal) .toast.info{box-shadow:var(--hebung),inset 3px 0 0 var(--licht)} /* Hinweis: ein Kasten mit Radius 14 auf Flaeche 2, Warnung und Fehler in ihrer Tiefe; als Band quer ueber der Seite ohne Rundung */ html[data-stil="kinosaal"]:not(#saal) :is(.hinweis,.vs-gruende,.aw-hinweis,.warnkasten,.anf-hinweis,.wunsch-band,.inv-ausfall):not(:is(.st,.player) *){padding:var(--s4);border-radius:var(--r-flaeche);background:var(--flaeche-2);border:var(--rand-b) solid var(--linie-2);color:var(--text);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) :is(.vs-gruende,.warnkasten,.aw-hinweis,.inv-ausfall):not(:is(.st,.player) *){border-color:var(--warnung-rand);background:var(--warnung-tief)} html[data-stil="kinosaal"]:not(#saal) :is(.d-ausfallband,.d-sperrband,.d-umzugband):not(:is(.st,.player) *){padding:var(--s3) var(--s4);border-radius:var(--r-flaeche);background:var(--flaeche-2);border:var(--rand-b) solid var(--linie-2);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .d-sperrband:not(:is(.st,.player) *){border-color:var(--warnung-rand);background:var(--warnung-tief)} /* Meldung: ein Eintrag der Benachrichtigungen, getrennt durch eine Linie; neu mit dem Licht links */ html[data-stil="kinosaal"]:not(#saal) :is(.meldung,#kb-liste .konto-zeile):not(:is(.st,.player) *){padding:var(--s4) 0;border-top:var(--rand-b) solid var(--linie-2);border-radius:0;background:none} html[data-stil="kinosaal"]:not(#saal) :is(.meldung,#kb-liste .konto-zeile):not(:is(.st,.player) *) b{font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(.meldung.neu,#kb-liste .konto-zeile.neu):not(:is(.st,.player) *){box-shadow:inset 3px 0 0 var(--licht);padding-left:var(--s3)} html[data-stil="kinosaal"]:not(#saal) :is(.fg-meldung,.anmelden-meldung):not(:is(.st,.player) *){padding:var(--s3) var(--s4);border-radius:var(--r-flaeche);border:var(--rand-b) solid var(--fehler-rand);background:var(--fehler-tief);color:var(--text);font-size:var(--t-14);line-height:var(--z-14)} /* Leerzustand: eine Gestalt fuer alle Leerzustaende von heute (Satz in Text 2, 14; der Titel in der Kondensierten; die Wege darunter), ohne eigenen Kasten. Jeder Leerzustand behaelt alle seine Wege (MX.leer: wege). Von den zwoelf Klassen der Bestandsaufnahme sind zwei keine Leerzustaende, sondern Platzhalter und behalten ihre Gestalt: das Zeichen im Upload (.up-leer-symbol) und das fehlende Bild im Kino (.kino-danach-leer); dazu kam .vw-musik-leer (Startseite, Musik). Die leere Zeile einer Tabelle (td.leer, Betrieb Netz; MX.leer mit tag td) gehoert zur Tabelle und hat deren Gestalt (Runde 2a); eine Zelle mit der Klasse leer ist dort ein leerer Wert, kein Leerzustand. */ html[data-stil="kinosaal"]:not(#saal) :is(.leerzustand,p.leer,.leer-klein,.kino-leer,.bib-treffer-leer,.aw-archiv-leer,.up-leer,.pl-ut-leer,.vw-quellen-leer,.vw-musik-leer,.leer-bahn):not(:is(.st,.player) *){padding:var(--s4) 0;border:0;border-radius:0;background:none;min-height:0;color:var(--text-2);font-size:var(--t-14);line-height:var(--z-14);font-style:normal;text-align:left} html[data-stil="kinosaal"]:not(#saal) :is(.leerzustand,.kino-leer,.up-leer):not(:is(.st,.player) *) :is(b,h1,h2,h3){font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);color:var(--text)} /* Kennzahl: grosse Zahl in der Kondensierten mit gleich breiten Ziffern, Beschriftung 13 in Text 3 */ html[data-stil="kinosaal"]:not(#saal) :is(.kennzahl,.summen>div,.zahlzeile .gross-zahl):not(:is(.st,.player) *) b,html[data-stil="kinosaal"]:not(#saal) .zahlzeile:not(:is(.st,.player) *) .gross-zahl{font-family:var(--kond);font-weight:var(--g-titel);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(.kennzahl,.summen>div):not(:is(.st,.player) *) :is(small,span){font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Band: Stufen einer Kette nebeneinander auf Flaeche 2; die laufende hell mit dem Licht unten, fertige in Gruen, Fehler rot */ html[data-stil="kinosaal"]:not(#saal) :is(ol.band,.k-schritte,.melde-schritte,.vr-stufen):not(:is(.st,.player) *)>*{background:var(--flaeche-2);color:var(--text-3);font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) :is(ol.band,.k-schritte,.melde-schritte,.vr-stufen):not(:is(.st,.player) *)>:is(.an,.jetzt,.laeuft){background:var(--flaeche-3);color:var(--text);box-shadow:inset 0 -2px 0 var(--licht)} html[data-stil="kinosaal"]:not(#saal) :is(ol.band,.k-schritte,.melde-schritte,.vr-stufen):not(:is(.st,.player) *)>:is(.fertig,.ok){color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(ol.band,.k-schritte,.melde-schritte,.vr-stufen):not(:is(.st,.player) *)>:is(.fehler,.krit){box-shadow:inset 0 -2px 0 var(--fehler)} /* Zeitleiste: Achse mit der Linie oben und der Marke heute im Licht */ html[data-stil="kinosaal"]:not(#saal) :is(.zeitleiste,.p-verlauf):not(:is(.st,.player) *){border-color:var(--linie-2);border-radius:var(--r-flaeche)} html[data-stil="kinosaal"]:not(#saal) .zeitleiste:not(:is(.st,.player) *) .heute{background:var(--licht)} /* Diagramm: Achsen in Linie 2, Beschriftung 11 in Text 3 */ html[data-stil="kinosaal"]:not(#saal) :is(.diagramm,.wg-saeulen,.mini-verlauf,.verlauf):not(:is(.st,.player) *){border-radius:var(--r-feld)} html[data-stil="kinosaal"]:not(#saal) :is(.diagramm,.verlauf):not(:is(.st,.player) *) text{fill:var(--text-3);font-family:var(--sans)} /* Bahn und Planungskarte: die Bahn auf Flaeche mit Rand und farbigem Strich oben; die Karte auf Flaeche 2 mit Radius 8 und kleinem Plakat */ html[data-stil="kinosaal"]:not(#saal) .bahn:not(:is(.st,.player) *){border-radius:var(--r-flaeche);background:var(--flaeche);border:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) :is(.pk,.staffel-befund,.fw-befund,.gk):not(:is(.st,.player) *){border-radius:var(--r-feld);background:var(--flaeche-2);border:var(--rand-b) solid var(--linie-2);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) :is(.pk,.staffel-befund,.fw-befund,.gk):not(:is(.st,.player) *):hover{border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) :is(.pk,.staffel-befund,.fw-befund,.gk):not(:is(.st,.player) *) img{border-radius:var(--r-werk)} /* Kommentar und Sterne: Eintraege durch eine Linie getrennt; Sterne im Licht */ html[data-stil="kinosaal"]:not(#saal) :is(.kommentar,.vk-kommentar,.runde-eintrag):not(:is(.st,.player) *){border-radius:0;border:0;border-top:var(--rand-b) solid var(--linie);background:none;padding:var(--s4) 0} html[data-stil="kinosaal"]:not(#saal) .sterne:not(:is(.st,.player) *) .st-voll svg{fill:var(--licht);stroke:var(--licht)} /* Ablage: Flaeche zum Hineinziehen, gestrichelt in Linie 3, Radius 14; beim Ziehen im Licht */ html[data-stil="kinosaal"]:not(#saal) :is(.ablage,.ablagefeld):not(:is(.st,.player) *){border:2px dashed var(--linie-3);border-radius:var(--r-flaeche);color:var(--text-2);background:none} html[data-stil="kinosaal"]:not(#saal) :is(.ablage,.ablagefeld):not(:is(.st,.player) *) svg{stroke:var(--text-2)} /* Code: der Anmeldecode in Mono mit Sperrung */ html[data-stil="kinosaal"]:not(#saal) :is(.code,.zf-form,.fg-eingabe):not(:is(.st,.player) *) :is(code,.zeichen-code){font-family:var(--mono);letter-spacing:.18em} html[data-stil="kinosaal"]:not(#saal) :is(.code,.zf-form):not(:is(.st,.player) *) :is(canvas,img,.qr){border-radius:var(--r-feld)} /* Clip: Bild mit Ecken auf der Tiefe des Films; Name und Minute als Herkunft in der Kondensierten */ html[data-stil="kinosaal"]:not(#saal) :is(.clip,.szclip-kachel):not(:is(.st,.player) *){border-radius:var(--r-werk);background:var(--film-tief)} html[data-stil="kinosaal"]:not(#saal) .szclip-kachel:not(:is(.st,.player) *) :is(img,.szclip-bild){border-radius:var(--r-werk)} /* Pfad (Mono 13), Lesetext (18 in Text 2), Satz (14 in Text 2). Die Klassen .pfad, .satz und .lage aus A84 traegt hier keine Regel: app/app.css nennt so heute den Slot Pfad der Bibliothek und den Kopf des Betriebs (.lage .satz); die Seiten nennen die Klassen von heute. */ html[data-stil="kinosaal"]:not(#saal) .mono:not(input,textarea,select):not(:is(.st,.player) *){font-family:var(--mono);font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) :is(.lesetext,.docs-text,.dtext,.sa-text,p.beschreibung):not(:is(.st,.player) *){font-size:var(--t-18);line-height:var(--z-18);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(p.klein,p.voll,p.unterzeile):not(:is(.st,.player) *){font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(p.warn-text,p.klein.warn-text,p.voll.warn-text):not(:is(.st,.player) *){color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) :is(p.krit-text,p.klein.krit-text,p.voll.krit-text):not(:is(.st,.player) *){color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) :is(p.ok-text,p.klein.ok-text):not(:is(.st,.player) *){color:var(--gut)} @media (prefers-reduced-motion:reduce){html[data-stil="kinosaal"]:not(#saal) :is(.tk,.tk-breit,.tk-weiter,.kachel,.spot,.samm) .bild{transition:none}} /* Zeitstrahl (S2-3b, MX.zeitstrahl): Licht fuer den Weg und die gesehenen Perlen, Linie 3 voraus, Text 4 fuer fehlende Teile, die Farbe des Films am naechsten Teil (die Ordnung in app/app.css, Block s2-3-reihen) */ html[data-stil="kinosaal"]:not(#saal) .zeitstrahl:not(:is(.st,.player) *){--zs-an:var(--licht);--zs-aus:var(--linie-3);--zs-fehlt:var(--text-4);--zs-naechst:var(--film)} /* ---------------------------------------------------------------- Rahmen und Navigation (Runde 3, 16.10.2026) Gestalt aus dem Prototyp (scratchpad/a84/prototyp/rahmen.html und administration.html; css/bausteine.css: Wortmarke, Kopfleiste, Bereichsleiste, Mobilkopf und Leiste unten; css/seiten.css: Rahmen und Administration) fuer das Markup aus app/kern.js (Bloecke kopfleiste und kopfleiste-dom) und app/administration.js. Anders als die Abschnitte der Runden 2a und 2b ordnet dieser Abschnitt auch an, denn er ist der Rahmen: im Stil Kinosaal ist die Seitenleiste verborgen und die Seite ohne ihre Spalte, am PC steht die Kopfleiste oben, auf Seiten der Administration die Bereichsleiste darunter, unten am Handy #mobilnav-saal statt #mobilnav. Was klebt, rechnet mit --kopf-h (die Hoehe der Kopfleiste, app/kern.js misst sie) und mit der Bereichsleiste (body.mit-bereichsleiste). Unter 1600 px zwei Zeilen, die Reiter in der zweiten (offene Frage 1 aus A84b, Vorgabe); ab 1600 eine, die Reiter in 14 px, ab 1800 in 16 px. Startseite und Player bleiben, wie sie sind. */ /* Die Seitenleiste ist verborgen (sie bleibt im Dokument: ihre Knoten tragen weiter ihre Kennungen), die Seite fuellt die Breite */ @media (min-width:821px){ html[data-stil="kinosaal"]:not(#saal) .rahmen{display:block} html[data-stil="kinosaal"]:not(#saal) .rahmen>.leiste{display:none} } /* Kopfleiste: Wortmarke, Suchfeld, Reiter der Bibliothek, rechts Inventar, Administration, Schnellzugriff, Glocke, Konto */ html[data-stil="kinosaal"]:not(#saal) .kopfleiste{display:none} @media (min-width:821px){ html[data-stil="kinosaal"]:not(#saal) .kopfleiste{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s3);row-gap:0;min-height:64px;padding:var(--s2) clamp(16px,2vw,48px) 0;background:var(--grund);border-bottom:var(--rand-b) solid var(--linie)} } html[data-stil="kinosaal"]:not(#saal) .kopfleiste .wortmarke{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:var(--ziel-min);font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:1;letter-spacing:.01em;color:var(--text);text-decoration:none} html[data-stil="kinosaal"]:not(#saal) .kopfleiste .wortmarke span{font-weight:var(--g-kopf);color:var(--text-3);letter-spacing:.04em;font-size:var(--t-16)} /* die Wortmarke der Anmeldeseite und der Konto-Link-Seite mit demselben Abstand (Seiten ohne Sitzung, Vorgabe des Hauses) */ html[data-stil="kinosaal"]:not(#saal) .marke.anmelden-marke{display:inline-flex;align-items:baseline;gap:6px} /* Suchfeld: die Lupe mit dem Ring der Verbindung steht vorn im Feld (sie oeffnet die Palette wie heute); das Feld der Bibliothek bringt seine Treffer mit, sie klappen nach rechts auf */ html[data-stil="kinosaal"]:not(#saal) .kopf-suche{position:relative;display:flex;align-items:center;flex:1 1 200px;min-width:150px;max-width:560px} html[data-stil="kinosaal"]:not(#saal) .kopf-suche-platz{display:flex;flex:1 1 auto;min-width:0} html[data-stil="kinosaal"]:not(#saal) .kopf-suche .bib-suche-huelle{flex:1 1 auto;min-width:0} html[data-stil="kinosaal"]:not(#saal) .kopf-suche .suchfeld{flex:1 1 auto;min-width:0;padding-left:40px} html[data-stil="kinosaal"]:not(#saal) .kopf-suche .suchfeld>svg{display:none} html[data-stil="kinosaal"]:not(#saal) .kopf-suche .bib-treffer{left:0;right:auto} html[data-stil="kinosaal"]:not(#saal) .kopf-suche #knopf-suche{position:absolute;left:4px;top:50%;z-index:1;width:28px;height:28px;margin-top:-14px;border:0;border-radius:var(--r-rund);background:none;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .kopf-suche #knopf-suche:hover{background:var(--flaeche-2);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .kopf-suche #knopf-suche svg{width:18px;height:18px} html[data-stil="kinosaal"]:not(#saal) :is(.kopf-suche #knopf-suche,.mobilkopf #knopf-suche-mobil).live-an{box-shadow:inset 0 0 0 2px var(--gut-rand)} html[data-stil="kinosaal"]:not(#saal) :is(.kopf-suche #knopf-suche,.mobilkopf #knopf-suche-mobil).live-warn{box-shadow:inset 0 0 0 2px var(--warnung-rand)} html[data-stil="kinosaal"]:not(#saal) :is(.kopf-suche #knopf-suche,.mobilkopf #knopf-suche-mobil).live-aus{box-shadow:inset 0 0 0 2px var(--fehler-rand)} /* Reiter der Bibliothek: unter 1600 px in der zweiten Zeile, rollen seitlich, wenn der Platz nicht reicht; der gewaehlte mit Strich in Licht */ html[data-stil="kinosaal"]:not(#saal) .kopf-reiter{order:9;flex:1 0 100%;display:flex;align-items:center;gap:var(--s4);min-width:0;min-height:44px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,var(--grund) calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,var(--grund) calc(100% - 32px),transparent)} html[data-stil="kinosaal"]:not(#saal) .kopf-reiter[hidden]{display:none} html[data-stil="kinosaal"]:not(#saal) .kopf-reiter::-webkit-scrollbar{display:none} html[data-stil="kinosaal"]:not(#saal) .kopf-reiter a{position:relative;display:inline-flex;align-items:center;gap:6px;flex:none;min-height:var(--ziel-min);color:var(--text-2);font-family:var(--sans);font-weight:var(--g-mittel);font-size:var(--t-14);line-height:var(--z-14);text-decoration:none} html[data-stil="kinosaal"]:not(#saal) .kopf-reiter a:hover,html[data-stil="kinosaal"]:not(#saal) .kopf-reiter a.an{color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .kopf-reiter a.an::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:var(--r-rund);background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .kopf-reiter a span{font-size:var(--t-13);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .kopf-reiter a:focus-visible{outline:var(--ring) solid var(--licht);outline-offset:calc(-1 * var(--ring))} /* rechts: Inventar und Administration als kompakte Knoepfe (Nebenhandlung), Schnellzugriff, Glocke, Konto */ html[data-stil="kinosaal"]:not(#saal) .kopf-rechts{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto;min-height:var(--ziel-min)} html[data-stil="kinosaal"]:not(#saal) .kopf-knoepfe{display:flex;align-items:center;gap:6px} html[data-stil="kinosaal"]:not(#saal) .kopfleiste .kopf-knoepfe .knopf.kopf-knopf{padding:0 var(--s3);font-size:var(--t-14);line-height:var(--z-14);text-decoration:none} html[data-stil="kinosaal"]:not(#saal) .kopfleiste .kopf-knoepfe .knopf.kopf-knopf.an{background:var(--flaeche-3);border-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .kopfleiste .kopf-knoepfe .knopf.kopf-knopf svg{width:18px;height:18px} html[data-stil="kinosaal"]:not(#saal) .kopfleiste .kopf-knoepfe .kopf-knopf .zaehler{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:2px;padding:0 6px;border-radius:var(--r-rund);background:var(--flaeche-3);color:var(--text-2);font-size:var(--t-13);line-height:20px;font-weight:var(--g-halb);font-variant-numeric:tabular-nums} @media (min-width:821px) and (max-width:1100px){ html[data-stil="kinosaal"]:not(#saal) .kopfleiste .kopf-knoepfe .kopf-knopf>span:not(.zaehler):not(.sr){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} } html[data-stil="kinosaal"]:not(#saal) body:not(:has(#bib-haft.an)) .kopf-oben{display:none} html[data-stil="kinosaal"]:not(#saal) .kopf-schnell-ort{position:relative;display:inline-flex} html[data-stil="kinosaal"]:not(#saal) .kopf-schnell-ort[hidden]{display:none} html[data-stil="kinosaal"]:not(#saal) .kopf-schnell{display:inline-flex;align-items:center;gap:3px;height:var(--ziel-min);padding:0 6px;border:0;border-radius:var(--r-rund);background:none;cursor:pointer} html[data-stil="kinosaal"]:not(#saal) .kopf-schnell:hover,html[data-stil="kinosaal"]:not(#saal) .kopf-schnell[aria-expanded="true"]{background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) .kopf-schnell .schnell-punkt{display:block;width:16px;height:16px;border-radius:5px;background:var(--sz-farbe)} html[data-stil="kinosaal"]:not(#saal) .kopf-schnell-menue{position:absolute;right:0;top:calc(100% + var(--s2));z-index:60;display:flex;flex-direction:column;min-width:240px;max-height:70vh;overflow-y:auto} html[data-stil="kinosaal"]:not(#saal) .kopf-schnell-menue[hidden]{display:none} html[data-stil="kinosaal"]:not(#saal) .kopf-schnell-menue>a{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s3);text-decoration:none} html[data-stil="kinosaal"]:not(#saal) .kopf-schnell-menue .sz-name{max-width:none} html[data-stil="kinosaal"]:not(#saal) .kopf-schnell-menue>.knopf.leise{justify-content:flex-start;width:100%;padding:0 var(--s3);border-radius:var(--r-feld)} html[data-stil="kinosaal"]:not(#saal) .kopfleiste .kopf-glocke:not([hidden]){position:relative;display:grid;place-items:center;width:var(--ziel-min);height:var(--ziel-min);padding:0;border:0;border-radius:var(--r-rund);background:none;color:var(--text-2);cursor:pointer} html[data-stil="kinosaal"]:not(#saal) .kopfleiste .kopf-glocke:hover{background:var(--flaeche-2);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .kopfleiste .kopf-glocke svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} html[data-stil="kinosaal"]:not(#saal) .kopfleiste .kopf-glocke .nav-zahl{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-rund);background:var(--licht);color:var(--grund);font-family:var(--sans);font-size:var(--t-13);line-height:20px;font-weight:var(--g-halb);text-align:center} html[data-stil="kinosaal"]:not(#saal) .kopfleiste .kopf-konto:not([hidden]){display:grid;place-items:center;width:var(--ziel-min);height:var(--ziel-min);padding:0;border-radius:var(--r-rund);background:var(--flaeche-3);border:var(--rand-b) solid var(--linie-2);font-family:var(--sans);font-weight:var(--g-halb);font-size:var(--t-14);color:var(--text);cursor:pointer;overflow:hidden} html[data-stil="kinosaal"]:not(#saal) .kopfleiste .kopf-konto:hover{border-color:var(--licht)} /* ab 1600 px eine Zeile: die Reiter zwischen Suchfeld und den Knoepfen rechts; ab 1800 px groesser */ @media (min-width:1600px){ html[data-stil="kinosaal"]:not(#saal) .kopfleiste{flex-wrap:nowrap;height:var(--kopfzeile);min-height:0;padding-top:0} html[data-stil="kinosaal"]:not(#saal) .kopf-suche{flex:0 1 250px} html[data-stil="kinosaal"]:not(#saal) .kopf-reiter{order:0;flex:1 0 auto;gap:var(--s3);-webkit-mask-image:none;mask-image:none} } @media (min-width:1800px){ html[data-stil="kinosaal"]:not(#saal) .kopfleiste{column-gap:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .kopf-suche{flex-basis:300px} html[data-stil="kinosaal"]:not(#saal) .kopf-reiter{gap:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .kopf-reiter a{font-size:var(--t-16);line-height:var(--z-16)} } /* Was klebt, steht unter der Kopfleiste (und auf Seiten der Administration unter der Bereichsleiste): Band des Betriebs, Koepfe der Seiten */ @media (min-width:821px){ html[data-stil="kinosaal"]:not(#saal) body{--kopf-bl:0px;--klebe-oben:calc(var(--kopf-h,64px) + var(--kopf-bl) + var(--band))} html[data-stil="kinosaal"]:not(#saal) body.ohne-band{--klebe-oben:calc(var(--kopf-h,64px) + var(--kopf-bl))} html[data-stil="kinosaal"]:not(#saal) body.mit-bereichsleiste{--kopf-bl:var(--bereichsleiste)} html[data-stil="kinosaal"]:not(#saal) .band{top:calc(var(--kopf-h,64px) + var(--kopf-bl))} } /* Konto-Menue: klappt am PC unter dem Konto rechts oben auf, Inhalt wie heute; Gestalt des Menues (Runde 2b) mit Gruppen */ @media (min-width:821px){ html[data-stil="kinosaal"]:not(#saal) .konto-menue{left:auto;right:clamp(16px,2vw,48px);top:calc(var(--kopf-h,64px) - var(--s2));bottom:auto;min-width:260px;max-height:calc(100dvh - var(--kopf-h,64px) - var(--s4));gap:0;padding:var(--s2);border-radius:var(--r-flaeche);background:var(--flaeche-2);border:var(--rand-b) solid var(--linie-2);box-shadow:var(--hebung)} } html[data-stil="kinosaal"]:not(#saal) .konto-menue .knopf.leise{justify-content:flex-start;min-height:var(--hoehe-k);padding:0 var(--s3);border:0;border-radius:var(--r-feld);background:none;color:var(--text);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .konto-menue .knopf.leise:hover{background:var(--flaeche-3);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .konto-menue .konto-wer{gap:2px;margin:0;padding:var(--s3);border-bottom:0} html[data-stil="kinosaal"]:not(#saal) .konto-menue .konto-wer b{font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .konto-menue .konto-wer small{color:var(--text-3);font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) .konto-menue .konto-trenn{height:1px;margin:var(--s2) 0;background:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .konto-menue .konto-etikett{padding:var(--s3) var(--s3) var(--s1);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text-3)} /* Bereichsleiste: zweite Zeile unter der Kopfleiste, am Handy unter dem Mobilkopf als rollende Zeile ohne Tasten */ html[data-stil="kinosaal"]:not(#saal) .bereichsleiste{position:sticky;top:var(--kopf-h,64px);z-index:29;display:flex;align-items:center;gap:var(--s5);min-height:var(--bereichsleiste);padding-inline:var(--seite-x,var(--rand));background:var(--grund);border-bottom:var(--rand-b) solid var(--linie);overflow-x:auto;scrollbar-width:none} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste::-webkit-scrollbar{display:none} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste a{position:relative;display:inline-flex;align-items:center;gap:var(--s2);flex:none;min-height:var(--bereichsleiste);color:var(--text-3);font-family:var(--sans);font-weight:var(--g-mittel);font-size:var(--t-14);line-height:var(--z-14);text-decoration:none} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste a:hover{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste a.an{color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste a.an::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste a:focus-visible{outline:var(--ring) solid var(--licht);outline-offset:calc(-1 * var(--ring))} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste kbd{min-width:18px;height:18px;font-size:11px;line-height:16px;text-align:center} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste .zaehler{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-rund);background:var(--flaeche-3);color:var(--text-2);font-size:var(--t-13);line-height:20px;font-weight:var(--g-halb);font-variant-numeric:tabular-nums} /* Am Handy: Mobilkopf (Wortmarke, Bereich, Suchen, Glocke, Konto) und unten Bibliothek, Suchen, Inventar, Administration */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal){--mobilkopf:calc(var(--kopfzeile) + env(safe-area-inset-top,0px))} html[data-stil="kinosaal"]:not(#saal) body.mit-bereichsleiste{--klebe-oben:calc(var(--mobilkopf) + var(--bereichsleiste) + var(--band))} html[data-stil="kinosaal"]:not(#saal) body.mit-bereichsleiste.ohne-band{--klebe-oben:calc(var(--mobilkopf) + var(--bereichsleiste))} html[data-stil="kinosaal"]:not(#saal) body.mit-bereichsleiste .band{top:calc(var(--mobilkopf) + var(--bereichsleiste))} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste{top:var(--mobilkopf);gap:var(--s4);padding-inline:var(--rand)} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste kbd{display:none} html[data-stil="kinosaal"]:not(#saal) .mobilkopf{gap:var(--s2);padding:env(safe-area-inset-top,0px) var(--s2) 0 var(--rand);background:var(--grund);border-bottom:var(--rand-b) solid var(--linie);-webkit-backdrop-filter:none;backdrop-filter:none} html[data-stil="kinosaal"]:not(#saal) .mobilkopf .marke{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-18);line-height:1;letter-spacing:.01em} html[data-stil="kinosaal"]:not(#saal) .mobilkopf .marke span{font-weight:var(--g-kopf);color:var(--text-3);letter-spacing:.04em} html[data-stil="kinosaal"]:not(#saal) .mobilkopf .bereich{margin-left:var(--s1);padding-left:var(--s3);border-left:var(--rand-b) solid var(--linie-2);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-16);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .mobilkopf #knopf-suche-mobil{order:1} html[data-stil="kinosaal"]:not(#saal) .mobilkopf .glocke{order:2} html[data-stil="kinosaal"]:not(#saal) .mobilkopf .konto-knopf{order:3} html[data-stil="kinosaal"]:not(#saal) .mobilkopf .rund{width:var(--ziel-min);height:var(--ziel-min);border:0;border-radius:var(--r-rund);background:none;color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .mobilkopf .rund.konto-knopf{background:var(--flaeche-3);border:var(--rand-b) solid var(--linie-2);color:var(--text);font-family:var(--sans);font-weight:var(--g-halb);font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) .mobilkopf .glocke .nav-zahl{top:2px;right:0;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-rund);background:var(--licht);color:var(--grund);font-family:var(--sans);font-size:var(--t-13);line-height:20px} html[data-stil="kinosaal"]:not(#saal) #mobilnav{display:none} html[data-stil="kinosaal"]:not(#saal) .mobilnav.kopf-unten{height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--grund);border-top:var(--rand-b) solid var(--linie-2);-webkit-backdrop-filter:none;backdrop-filter:none} html[data-stil="kinosaal"]:not(#saal) .mobilnav.kopf-unten :is(a,button){position:relative;gap:2px;padding:0;border:0;background:none;color:var(--text-3);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-mittel);text-decoration:none;cursor:pointer} html[data-stil="kinosaal"]:not(#saal) .mobilnav.kopf-unten svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} html[data-stil="kinosaal"]:not(#saal) .mobilnav.kopf-unten .an{color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .mobilnav.kopf-unten .an svg{stroke:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .mobilnav.kopf-unten .punkt{position:absolute;top:10px;left:calc(50% + 8px);width:8px;height:8px;border-radius:var(--r-rund);background:var(--licht)} } /* Bibliothek: Reiter und Suchfeld stehen am PC in der Kopfleiste, die haftende Leiste geht in ihr auf (Nach oben steht dort, sobald der Kopf der Bibliothek aus dem Bild ist); am Handy bleiben die Reiter oben auf der Bibliothek und die haftende Leiste wie heute */ @media (min-width:821px){ html[data-stil="kinosaal"]:not(#saal) .bib-haft{display:none} html[data-stil="kinosaal"]:not(#saal) .bib-reiter{display:none} } /* Uebersicht der Administration: Wege in drei, zwei, einer Spalte (das Raster von heute, .raster3); je Weg ein Kasten mit Zeichen, Name, Zahl und Taste, einem Satz und der Zahl in Worten */ html[data-stil="kinosaal"]:not(#saal) .adm-wege{gap:var(--s4);align-items:stretch} html[data-stil="kinosaal"]:not(#saal) .adm-wege .modul.adm-weg{gap:var(--s3);padding:var(--s5);border-radius:var(--r-flaeche);border:var(--rand-b) solid var(--linie-2);background:linear-gradient(180deg,var(--flaeche),var(--grund))} html[data-stil="kinosaal"]:not(#saal) .adm-wege .modul.adm-weg:hover{border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .adm-wege .adm-weg-kopf{gap:var(--s3);margin:0} html[data-stil="kinosaal"]:not(#saal) .adm-wege .adm-weg-kopf h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .adm-wege .adm-weg-kopf a{gap:var(--s3);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .adm-wege .adm-weg-kopf a:hover{color:var(--text);text-decoration:underline;text-decoration-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .adm-wege .adm-weg-kopf svg{width:24px;height:24px;color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .adm-wege .adm-weg .zaehler{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-rund);background:var(--licht);color:var(--grund);font-family:var(--sans);font-size:var(--t-13);line-height:20px;font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .adm-wege .adm-weg .adm-satz{color:var(--text-2);font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .adm-wege .adm-weg .adm-zahl{color:var(--text-3)} /* ---------------------------------------------------------------- Player (Runde 5b, 22.10.2026) Der Player im Kleid des Prototyps (scratchpad/a84/prototyp/player.html und player-fassung.html; SPEZIFIKATION.md Abschnitt 4.3, Baustein Player-Bedienung) auf dem Markup von heute (app/player.js): Kopf mit Titel und Weg, Ladekreis mit Satz, die Karten auf dem Bild (Fehler mit Diagnose, gesperrt, Zu Ende, Naechste Folge), der Hinweis oben, das Menue Fassung, Ton, Untertitel, Qualitaet und Tonausgabe, die Bedienleiste mit Zeitstrahl und runden Zeichenknoepfen, die Tastenkuerzel als Blatt, die Untertitelzeile; dazu die Blaetter Welche Fassung? und Clip erstellen (MX.dialog) und die Toasts ueber dem offenen Player. Keine Logik: was app/app.css ein- und ausblendet (.ruhig, .fehler, [hidden], die Knoepfe bis 640 px, Bild fuellen hochkant, das flache Querformat, Touch ohne Tastenkuerzel), bleibt dort; darum setzt hier keine Regel display an einem Knopf der Leiste, am Regler oder an der Zeit. Gesetzt werden Masse, Abstaende, Flaechen, Schrift und Farbe, Farben nur aus den Tokens (Stufen --pl-*, Licht, Linien, Flaechen). Jede Regel mit dem Gewicht einer ID wie die Bausteine (:not(#saal)): sie gewinnt gegen die Regeln des Players in app/app.css. Die Zeichen kommen im Stil Kinosaal aus dem Sprite (app/player.js, Block kinosaal). Der Abschnitt steht vor dem der Titelseite (Runde 5a), deren Test ihren Abschnitt bis zur Runde 4a liest. Am Fernseher gilt nie kinosaal. */ /* Kopf: Titel in der Kondensierten 24, darunter der Weg der Wiedergabe in Text 3; Rand wie die Seite (--rand), Verlauf nach unten */ html[data-stil="kinosaal"]:not(#saal) .player .pl-oben{gap:var(--s4);padding:max(var(--s5),env(safe-area-inset-top)) max(var(--rand),env(safe-area-inset-right)) var(--s8) max(var(--rand),env(safe-area-inset-left))} html[data-stil="kinosaal"]:not(#saal) .player .pl-titel{gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .player .pl-titel b{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .player .pl-titel #pl-modus{font-size:var(--t-14);line-height:var(--z-14);color:var(--pl-text-3)} /* Ohne Verlauf: eine Plakette auf dem Bild unter dem Weg */ html[data-stil="kinosaal"]:not(#saal) .player .pl-titel .pl-privat{gap:var(--s1);min-height:var(--hoehe-marke);padding:0 var(--s2);border-radius:var(--r-marke);background:var(--pl-schleier);border:var(--rand-b) solid var(--pl-linie-2);color:var(--pl-text);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .player .pl-privat svg{width:16px;height:16px;stroke-width:1.5} /* Mitte: der Ladekreis 48 ueber dem Satz, auf einem Schleier, damit beides auf jedem Bild lesbar bleibt */ html[data-stil="kinosaal"]:not(#saal) .player .pl-lade{flex-direction:column;gap:var(--s3);padding:var(--s4) var(--s5);border-radius:var(--r-flaeche);background:var(--pl-schleier);color:var(--pl-text-2);font-size:var(--t-16);line-height:var(--z-16);text-align:center} html[data-stil="kinosaal"]:not(#saal) .player .pl-kreis{width:48px;height:48px;border-width:3px} /* Karten auf dem Bild (Fehler, gesperrt, Zu Ende, Naechste Folge): ein Blatt ueber dem letzten Bild, Flaeche des Players mit Radius 14 und Hebung, 520 breit; Kopf in der Kondensierten 24, Satz 14 in Text 2, der Ausweg hell */ html[data-stil="kinosaal"]:not(#saal) .player .pl-karte{gap:var(--s2);width:min(520px,calc(100vw - 2 * var(--rand)));max-width:none;padding:var(--s5);border-radius:var(--r-flaeche);background:var(--pl-flaeche);border:var(--rand-b) solid var(--pl-linie);box-shadow:var(--hebung)} html[data-stil="kinosaal"]:not(#saal) .player .pl-karte>b{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);color:var(--pl-text)} html[data-stil="kinosaal"]:not(#saal) .player .pl-karte>span{font-size:var(--t-14);line-height:var(--z-14);color:var(--pl-text-2)} html[data-stil="kinosaal"]:not(#saal) .player .pl-karte>.pl-ausweg{color:var(--pl-text)} html[data-stil="kinosaal"]:not(#saal) .player .pl-karte-knoepfe{gap:var(--s2);margin-top:var(--s2)} /* Knoepfe auf den Karten: die Gestalt der Bausteine (Runde 2a) auch im Player; Hauptsache hell, sonst eine Pille mit Rand */ html[data-stil="kinosaal"]:not(#saal) .player .knopf{gap:var(--s2);min-height:var(--hoehe);padding:0 var(--s5);border-radius:var(--r-rund);border:var(--rand-b) solid var(--linie-3);background:none;color:var(--pl-text);font-family:var(--sans);font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-mittel)} html[data-stil="kinosaal"]:not(#saal) .player .knopf:hover{border-color:var(--licht);background:var(--pl-hover)} html[data-stil="kinosaal"]:not(#saal) .player .knopf.haupt{background:var(--licht);border-color:var(--licht);color:var(--grund);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .player .knopf.haupt:hover{background:var(--licht-voll);border-color:var(--licht-voll)} html[data-stil="kinosaal"]:not(#saal) .player .knopf:focus-visible{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} /* Hinweis oben (der Toast des Players): eine Pille mittig unter dem Kopf */ html[data-stil="kinosaal"]:not(#saal) .player .pl-hinweis{top:max(calc(var(--s8) + var(--s5)),calc(env(safe-area-inset-top) + var(--s8)));padding:var(--s2) var(--s4);border-radius:var(--r-rund);background:var(--pl-flaeche);border:var(--rand-b) solid var(--pl-linie);color:var(--pl-text);font-size:var(--t-14);line-height:var(--z-14);box-shadow:var(--hebung)} /* Untertitel: halbfett; die eigene Zeile (solange Bild fuellen vergroessert) mit Ecken auf dem Schleier */ html[data-stil="kinosaal"]:not(#saal) .player .pl-video::cue{font-family:var(--sans);font-weight:var(--g-mittel)} html[data-stil="kinosaal"]:not(#saal) .player .pl-ut span{padding:2px var(--s3);border-radius:var(--r-marke);background:var(--pl-schleier);font-weight:var(--g-mittel)} /* Bedienleiste: Rand wie die Seite, Verlauf nach oben; der Zeitstrahl 6 hoch mit sichtbarem Griff 14, die Zeitmarke als kleine Flaeche */ html[data-stil="kinosaal"]:not(#saal) .player .pl-unten{padding:var(--s8) max(var(--rand),env(safe-area-inset-right)) calc(var(--s5) + env(safe-area-inset-bottom)) max(var(--rand),env(safe-area-inset-left))} html[data-stil="kinosaal"]:not(#saal) .player .pl-leiste{height:22px} html[data-stil="kinosaal"]:not(#saal) .player .pl-leiste::before{top:8px;height:6px;border-radius:var(--r-rund);background:var(--pl-leer)} html[data-stil="kinosaal"]:not(#saal) .player :is(.pl-puffer,.pl-stand){top:8px;height:6px;border-radius:var(--r-rund)} html[data-stil="kinosaal"]:not(#saal) .player .pl-puffer{background:var(--pl-puffer)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stand{background:var(--pl-text)} html[data-stil="kinosaal"]:not(#saal) .player .pl-griff{top:4px;width:14px;height:14px;transform:none;box-shadow:0 0 0 var(--rand-b) var(--pl-schleier)} html[data-stil="kinosaal"]:not(#saal) .player .pl-leiste:is(:hover,:focus-visible) .pl-griff{transform:scale(1.15)} html[data-stil="kinosaal"]:not(#saal) .player .pl-leiste:focus-visible::before{box-shadow:0 0 0 var(--ring) var(--licht)} html[data-stil="kinosaal"]:not(#saal) .player .pl-zeitmarke{bottom:26px;padding:2px var(--s2);border-radius:var(--r-marke);background:var(--pl-flaeche);border:var(--rand-b) solid var(--pl-linie);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .player .pl-tasten{gap:var(--s1);margin-top:var(--s3)} /* Intro ueberspringen (Auftrag 98, Gestalt aus Runde 2a): rechts buendig mit der Leiste */ html[data-stil="kinosaal"]:not(#saal) .player .pl-intro{right:max(var(--rand),env(safe-area-inset-right))} /* Knoepfe der Leiste und des Kopfs: rund 44, das Zeichen 20 mit Strich 1,5; Abspielen 56 auf einer Flaeche; gedrueckt (Nicht in den Verlauf, Bild fuellen) und offen (Menue, Tastenkuerzel) hell hinterlegt; Naechste Folge mit Wort, in den letzten 25 Sekunden hell */ html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf{width:var(--hoehe);height:var(--hoehe);color:var(--pl-text)} html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf:hover{background:var(--pl-hover)} html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf svg{width:20px;height:20px;stroke-width:1.5} html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf.gross{width:56px;height:56px;background:var(--pl-an)} html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf.gross:hover{background:var(--pl-an-2)} html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf.gross svg{width:24px;height:24px;stroke-width:2.5} html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf:is([aria-pressed="true"],[aria-expanded="true"]){background:var(--pl-an);box-shadow:inset 0 0 0 var(--rand-b) var(--pl-linie-2)} html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf:focus-visible{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf:disabled{opacity:.4} html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf:disabled:hover{background:none} html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf.text{width:auto;gap:var(--s2);padding:0 var(--s4);font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-mittel)} html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf.text.fertig{background:var(--licht);color:var(--grund)} /* Lautstaerke: der Schieberegler der Bausteine auf dem Bild (Schiene 4, Griff 16), 110 breit; --f setzt der Player */ html[data-stil="kinosaal"]:not(#saal) .player .pl-laut{width:110px;height:24px;margin:0 var(--s1)} html[data-stil="kinosaal"]:not(#saal) .player .pl-laut::-webkit-slider-runnable-track{height:4px;border-radius:var(--r-rund);background:linear-gradient(90deg,var(--pl-text) var(--f),var(--pl-leer) var(--f))} html[data-stil="kinosaal"]:not(#saal) .player .pl-laut::-webkit-slider-thumb{width:16px;height:16px;margin-top:-6px;background:var(--pl-text)} html[data-stil="kinosaal"]:not(#saal) .player .pl-laut::-moz-range-track{height:4px;border-radius:var(--r-rund);background:var(--pl-leer)} html[data-stil="kinosaal"]:not(#saal) .player .pl-laut::-moz-range-progress{height:4px;border-radius:var(--r-rund);background:var(--pl-text)} html[data-stil="kinosaal"]:not(#saal) .player .pl-laut::-moz-range-thumb{width:16px;height:16px;background:var(--pl-text)} html[data-stil="kinosaal"]:not(#saal) .player .pl-laut:focus-visible{outline:var(--ring) solid var(--licht)} /* Zeit und Dauer in der Schrift des Textes mit gleich breiten Ziffern */ html[data-stil="kinosaal"]:not(#saal) .player .pl-zeit{margin-left:var(--s2);font-family:var(--sans);font-size:var(--t-14);line-height:var(--z-14);font-variant-numeric:tabular-nums;color:var(--pl-text-2)} /* Menue Fassung, Ton, Untertitel, Qualitaet, Tonausgabe: eine Flaeche (Radius 14, Hebung) rechts ueber dem Zeitstrahl (--pl-leiste-hoch misst der Player); mit Untertiteln und einer weiteren Gruppe zwei Spalten wie im Prototyp: die Fassung ueber die ganze Breite, links Ton, Qualitaet und Tonausgabe, rechts die Untertitel. Gewaehlt mit Haken auf heller Flaeche, die Automatik der Qualitaet als Kippschalter. */ html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl{right:max(var(--rand),env(safe-area-inset-right));bottom:calc(var(--pl-leiste-hoch,120px) + var(--s3));min-width:280px;max-width:min(400px,calc(100vw - 2 * var(--rand)));max-height:calc(100% - var(--pl-leiste-hoch,120px) - 120px);padding:var(--s2) var(--s3);border-radius:var(--r-flaeche);background:var(--pl-flaeche);border:var(--rand-b) solid var(--pl-linie);box-shadow:var(--hebung)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl:has(>[aria-label="Untertitel"]):has(>:is([aria-label="Ton"],[aria-label^="Qualit"],[aria-label="Tonausgabe"])){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;align-items:start;column-gap:var(--s4);width:min(680px,calc(100vw - 2 * var(--rand)));max-width:none} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl>[aria-label="Fassung"]{grid-column:1/-1} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl>[aria-label="Untertitel"]{grid-column:2;grid-row:span 4} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl>:is([aria-label="Ton"],[aria-label^="Qualit"],[aria-label="Tonausgabe"],[aria-label="Hilfe"]){grid-column:1} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl>[role="group"]{min-width:0;padding:var(--s2) 0} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl h4{margin:0;padding:var(--s1) var(--s2) var(--s2);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--pl-text-3)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl h4 span{margin-left:var(--s1);font-weight:var(--g-text);color:var(--pl-text-3)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button{min-height:var(--hoehe-k);padding:var(--s2) var(--s2) var(--s2) calc(var(--s2) + 16px + var(--s2));border-radius:var(--r-feld);color:var(--pl-text);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button:hover:not(:disabled){background:var(--pl-hover)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button.an{background:var(--pl-an)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button.an::before{left:calc(var(--s2) + 5px);top:calc(var(--s2) + 3px);width:6px;height:11px;translate:none;transform:rotate(45deg);border:solid var(--pl-text);border-width:0 1.5px 1.5px 0;border-radius:0;background:none} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button:disabled{color:var(--pl-text-4)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button small{color:var(--pl-text-3)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button small.pl-fassung-daten{font-size:var(--t-13);line-height:var(--z-13);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button small.pl-spurtitel{font-size:var(--t-13);line-height:var(--z-13)} /* WT-8: Name der Spur aus der Datei */ html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button[data-wahl^="auto:"]{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-left:var(--s2);background:none} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button[data-wahl^="auto:"]:hover{background:var(--pl-hover)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button[data-wahl^="auto:"]::before{display:none} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button[data-wahl^="auto:"]::after{content:"";flex:none;width:44px;height:24px;border-radius:var(--r-rund);border:var(--rand-b) solid var(--pl-linie-2);background:radial-gradient(circle at 12px 50%,var(--pl-text-3) 7px,transparent 7.5px),var(--pl-hover)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl button[data-wahl^="auto:"].an::after{border-color:var(--licht);background:radial-gradient(circle at 31px 50%,var(--grund) 7px,transparent 7.5px),var(--licht)} html[data-stil="kinosaal"]:not(#saal) .player .pl-ut-suche{width:calc(100% - 2 * var(--s2));min-height:var(--hoehe-k);margin:0 var(--s2) var(--s2);padding:0 var(--s4);border-radius:var(--r-rund);border:var(--rand-b) solid var(--pl-linie-2);background:var(--pl-hover);color:var(--pl-text);font-family:var(--sans);font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) .player .pl-ut-suche:focus-visible{outline:var(--ring) solid var(--licht);outline-offset:0} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl .pl-mehr{padding:var(--s2) var(--s2) var(--s2) calc(var(--s2) + 16px + var(--s2));border-radius:var(--r-feld);color:var(--pl-text-2);font-size:var(--t-14);line-height:var(--z-14)} /* Leerzustand im Player (MX.leer, die Suche der Untertitel findet nichts): die Gestalt aller Leerzustaende auf dem Bild */ html[data-stil="kinosaal"]:not(#saal) .player .pl-ut-leer{margin:0;padding:var(--s2) var(--s2) var(--s2) calc(var(--s2) + 16px + var(--s2));border:0;border-radius:0;background:none;color:var(--pl-text-2);font-size:var(--t-14);line-height:var(--z-14);font-style:normal;text-align:left} /* Tastenkuerzel: ein Blatt ueber dem Schleier (Flaeche 2, Radius 14, Hebung; Kopf mit Linie, Titel 24 in der Kondensierten), die Tasten als Taste */ html[data-stil="kinosaal"]:not(#saal) .player .pl-tastenblatt-flaeche{padding:0 var(--s5) var(--s5);border-radius:var(--r-flaeche);background:var(--flaeche-2);border:var(--rand-b) solid var(--linie-2);box-shadow:var(--hebung);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .player .pl-tastenblatt-kopf{margin:0 calc(-1 * var(--s5)) var(--s2);padding:var(--s3) var(--s3) var(--s3) var(--s5);border-bottom:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .player .pl-tastenblatt-kopf b{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .player .pl-tastengruppe h4{margin:var(--s4) 0 var(--s1);font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .player .pl-tastenzeile{padding:var(--s2) 0;border-bottom:0;border-top:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) .player .pl-tastenzeile dd{font-size:var(--t-14);line-height:var(--z-14);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .player .pl-tastenblatt kbd{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hoehe-marke);height:var(--hoehe-marke);padding:0 6px;border-radius:var(--r-marke);border:var(--rand-b) solid var(--linie-3);border-bottom-width:2px;background:var(--flaeche);color:var(--text-2);font-family:var(--sans);font-size:var(--t-13);line-height:1;font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .player .pl-tastenblatt-fuss{margin:var(--s4) 0 0;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Statistik (SN-1, 06.11.2026, app/player.js Block stats): die Tafel oben rechts unter dem Kopf auf dem Schleier des Players, Radius 14 und Hebung; Kopf in der Kondensierten 18, Gruppen in Text 3, die Namen in einer Spalte von 10 Zeichen, Werte in der Mono 13; Lage nur in --warnung und --fehler, ohne Flaeche. Der Eintrag im Menue steht in der linken Spalte (Gruppe Mehr). Am Handy (unten) ein Blatt von unten. */ html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl>[aria-label="Mehr"]{grid-column:1} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats{top:calc(max(var(--s5),env(safe-area-inset-top)) + var(--hoehe) + var(--s3));right:max(var(--rand),env(safe-area-inset-right));width:min(440px,calc(100vw - 2 * var(--rand)));max-height:calc(100% - var(--s5) - var(--hoehe) - var(--s3) - var(--pl-leiste-hoch,120px) - var(--s4));border-radius:var(--r-flaeche);background:var(--pl-verlauf);border:var(--rand-b) solid var(--pl-linie);box-shadow:var(--hebung);color:var(--pl-text-2);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats-flaeche{padding:var(--s2) var(--s4) var(--s4)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats-kopf{gap:var(--s2);margin:0 calc(-1 * var(--s4)) var(--s1);padding:var(--s1) var(--s2) var(--s2) var(--s4);border-bottom:var(--rand-b) solid var(--pl-linie)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats-kopf b{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);color:var(--pl-text)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats .knopf{min-height:var(--hoehe-k);padding:0 var(--s3);border-color:transparent;font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats-gruppe h4{margin:var(--s3) 0 var(--s1);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--pl-text-3)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats .werte{gap:var(--s1) var(--s3)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats .werte dt{color:var(--pl-text-3)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats .werte dd{font-family:var(--mono);font-size:var(--t-13);line-height:var(--z-13);color:var(--pl-text)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats .status.warn{color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats .status.krit{color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats-unbekannt{color:var(--pl-text-4)} /* Gemeinsam schauen im Player (WT-0b, app/gleichlauf.js): die Plakette im Kopf in der Kondensierten, die Mitte ohne Kreis */ html[data-stil="kinosaal"]:not(#saal) .player .pl-raum{font-family:var(--kond);font-size:var(--t-13);line-height:var(--z-13);border-radius:var(--r-voll,999px);border-color:var(--pl-linie)} html[data-stil="kinosaal"]:not(#saal) .player .pl-raum-mitte{font-family:var(--kond);font-size:var(--t-18);line-height:var(--z-18);border-radius:var(--r-flaeche)} /* das Blatt Gemeinsam schauen (MX.dialog ueber dem Player): der Code in der Mono gross, die Lage nur als Wort in --warnung und --fehler, Ueberschriften in der Kondensierten */ html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-code .code>span:not(.qr){font-family:var(--mono);font-size:var(--t-32,2rem);line-height:1.1} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-zeile .status.warn{color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-zeile .status.krit{color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-teil h4{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* UI-1 (07.11.2026): Wahlreihen, Kopf mit Plakat und Titelwahl im Blatt Gemeinsam schauen (Ordnung in app/app.css Block zusammen), wie die Wahl unter Konto (fw-liste) und die TMDB-Auswahl im Player (#pl-vorschlag) */ html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-wahl{min-height:var(--ziel-min);padding:var(--s2) var(--s3);border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-feld);background:none;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-wahl:hover{border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-wahl:has(input:checked){border-color:var(--licht);background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-wahl:has(input:focus-visible){outline:2px solid var(--licht);outline-offset:2px} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-saal-wahl legend{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-saal-wahl legend small{font-family:inherit;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-saal-form>.feld-rahmen,html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-saal-zahlen>.feld-rahmen{display:grid;width:100%;align-self:stretch} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) :is(.zs-kopf,.zs-titel).vorschlag{border-radius:var(--r-feld);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-titel.vorschlag{min-height:var(--zeile);padding:var(--s2)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-titel.vorschlag:is(:hover,:focus-visible){background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-titel.vorschlag:focus-visible{outline:2px solid var(--licht);outline-offset:1px} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) :is(.zs-kopf,.zs-titel).vorschlag :is(img,.platz){width:36px;height:54px;border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) :is(.zs-kopf,.zs-titel) .zs-kopf-text b{font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-kopf .zs-kopf-text b{font-family:var(--kond);font-size:var(--t-18);line-height:var(--z-18);font-weight:var(--g-titel)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(.zs-blatt) .zs-titel .zs-kopf-text small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Welche Fassung? und Clip erstellen (MX.dialog ueber dem Player, nach player-fassung.html und player.html): im Kopf der Titel unter dem Namen des Blatts, Schliessen rechts; je Fassung eine Zeile als Flaeche mit Rand, die gewaehlte in Licht, empfohlen als helle Plakette */ html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .dlg-kopf,html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#pl-clip-form) .dlg-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--s3);row-gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .dlg-kopf>.klein,html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#pl-clip-form) .dlg-kopf>.klein{grid-column:1;grid-row:2;color:var(--text-2);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .dlg-kopf>.rechts,html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#pl-clip-form) .dlg-kopf>.rechts{grid-column:2;grid-row:1/span 2;margin-left:0} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .fw-liste{gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .fw-zeile{gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-feld);border:var(--rand-b) solid var(--linie-2);background:none} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .fw-zeile:has(input:checked){border-color:var(--licht);background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .fw-name{gap:var(--s1) var(--s2);font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .fw-name .status{gap:0;min-height:var(--hoehe-marke);padding:0 var(--s2);border-radius:var(--r-marke);border:var(--rand-b) solid var(--licht);background:var(--licht);color:var(--grund);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .fw-name .status::before{display:none} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .fw-daten{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .fw-zeile small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .fw-zeile small.warn-text{color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .fw-merken small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Toasts ueber dem offenen Player: die Meldungen, die der Player ueber MX.toast gibt (Clip, Nicht in den Verlauf), lagen bisher unter seiner Ebene */ html[data-stil="kinosaal"].player-offen:not(#saal) .toasts{z-index:210} /* Handy und schmaler PC bis 820 px: Kopf und Leiste enger, die Knoepfe rechts in einer zweiten Reihe (wie im Prototyp); das Menue als Blatt in voller Breite ueber der Leiste, eine Spalte, so dass der Knopf darunter es wieder schliesst */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .player .pl-oben{padding:max(var(--s4),env(safe-area-inset-top)) max(var(--rand),env(safe-area-inset-right)) var(--s7) max(var(--rand),env(safe-area-inset-left))} html[data-stil="kinosaal"]:not(#saal) .player .pl-titel b{font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .player .pl-unten{padding-top:var(--s7)} html[data-stil="kinosaal"]:not(#saal) .player .pl-tasten{flex-wrap:wrap;row-gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .player .pl-frei{flex-basis:100%} html[data-stil="kinosaal"]:not(#saal) .player .pl-hinweis{top:max(calc(var(--s7) + var(--s4)),calc(env(safe-area-inset-top) + var(--s7)));max-width:calc(100vw - 2 * var(--rand));text-align:center} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl{left:var(--s2);right:var(--s2);width:auto;min-width:0;max-width:none;max-height:min(52vh,calc(100% - var(--pl-leiste-hoch,120px) - 96px));grid-template-columns:minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl:has(>[aria-label="Untertitel"]):has(>:is([aria-label="Ton"],[aria-label^="Qualit"],[aria-label="Tonausgabe"])){width:auto;grid-template-columns:minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl>[aria-label]{grid-column:1;grid-row:auto} html[data-stil="kinosaal"]:not(#saal) .player .pl-karte{padding:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .player .pl-stats{top:auto;bottom:0;left:0;right:0;width:auto;max-height:min(64vh,calc(100% - var(--s8)));border-width:var(--rand-b) 0 0;border-radius:var(--r-flaeche) var(--r-flaeche) 0 0;padding-bottom:env(safe-area-inset-bottom)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .dlg-fuss .rechts,html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#pl-clip-form) .dlg-fuss .rechts{flex-wrap:wrap;justify-content:flex-end} html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#fw-form) .dlg-fuss .knopf,html[data-stil="kinosaal"]:not(#saal) dialog.dlg:has(#pl-clip-form) .dlg-fuss .knopf{padding:0 var(--s3)} } @media (max-width:640px){ html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf.text{width:var(--hoehe);padding:0} html[data-stil="kinosaal"]:not(#saal) .player .pl-zeit{margin-left:var(--s1);font-size:var(--t-13)} } /* Handy quer (wenig Hoehe): Kopf und Leiste so eng wie heute, der Titel 16 */ @media (max-height:520px) and (orientation:landscape){ html[data-stil="kinosaal"]:not(#saal) .player .pl-oben{padding:max(10px,env(safe-area-inset-top)) max(var(--s4),env(safe-area-inset-right)) var(--s5) max(var(--s4),env(safe-area-inset-left))} html[data-stil="kinosaal"]:not(#saal) .player .pl-unten{padding:var(--s5) max(var(--s4),env(safe-area-inset-right)) calc(var(--s2) + env(safe-area-inset-bottom)) max(var(--s4),env(safe-area-inset-left))} html[data-stil="kinosaal"]:not(#saal) .player .pl-titel b{font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .player .pl-hinweis{top:max(48px,calc(env(safe-area-inset-top) + 40px));font-size:var(--t-13)} html[data-stil="kinosaal"]:not(#saal) .player .pl-wahl{max-height:calc(100% - var(--pl-leiste-hoch,96px) - var(--s5))} } /* ---------------------------------------------------------------- Titelseite (Runde 5a, 22.10.2026) Gestalt aus dem Prototyp (scratchpad/a84/prototyp/titel-film.html, titel-serie.html, titel-doku.html; css/seiten.css Abschnitt 30-titel; SPEZIFIKATION.md Abschnitt 13 mit 13.5) fuer das Markup von app/titel.js (Block saal, im Stil Kinosaal mit .ks-titel an der Seite und der Huelle .ks-leinwand um Querbild, Leiste und Kopf; Block kinosaal-titel). Aufbau und Reihenfolge sind die von heute, hier steht nur das Kleid: Leinwand mit der Farbe des Titels (--film, --film-tief, --film-glut vom Server, mx/farben.py), das Plakat unten buendig mit Deine Bewertung, Titelkarte oder Logo bis 120, Kennzeile mit Plaketten, die Wertungen klein in einer Zeile, die Auszeichnungen als eine Pille zum Aufklappen, Abspielen hell mit der zweiten Zeile, Chips als Wegmarken auf Bild, Hinweise als ruhige Zeilen; darunter Szenen als Raster, echte Reiter, Besetzung in zwei Reihen zu sechs, Technik in Kuerze als Flaeche, die Staffeln mit Reitern je Staffel und Zeilen je Folge, Technik und Verlauf ohne Kaesten um jede Angabe. Jede Regel steht unter .ks-titel; am Fernseher gilt nie kinosaal, im Stil klassisch fehlt die Klasse. Der Abschnitt steht vor dem der Runde 4a: tests/js/reihe.test.mjs und tests/js/suche.test.mjs lesen die Abschnitte ab der Runde 4a. Auftrag 111 (Wort des Eigentuemers vom 22.10.2026, "damit es nicht so gedrueckt aussieht"): im Kopf steht jede Zeile 16 unter der davor (Kennzeile, Wertungen, Auszeichnungen, Warnband, Umzug, Knoepfe, Slogan, Handlung, Chips, Hinweise, Deine Bewertung; bis dahin 12, zwischen Wertungen, Auszeichnungen, Warnband und Knoepfen 8 oder 4), Slogan und Handlung bleiben 4 auseinander, die Zeilen der Chips 10 statt 8. Die Szenen stehen nur noch als Bilder (app/titel.js); die Regeln fuer Clip-Kacheln und Andere Werke unten bleiben ohne Wirkung stehen. Seit den Zusaetzen (11:40 und 11:50) in der Kennzeile Kanaele und Atmos (.ks-ton) und der Stern als Durchschnitt; die Wertung aus Plex steht als fuenfte in der Zeile der Wertungen, die am Handy darum umbricht (bis dahin nowrap). */ html[data-stil="kinosaal"]:not(#saal) .ks-titel{background:linear-gradient(180deg,var(--film-tief) 0,transparent 760px)} /* Leinwand: das Querbild unter Schleiern ueber Leiste und Kopf, ohne Querbild das Plakat weich; die Farbe des Titels als Grund und Glut */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand{position:relative;z-index:2;isolation:isolate;display:flex;flex-direction:column;min-height:var(--leinwand-h);margin:-16px calc(-1 * var(--seite-x)) 0;padding:16px var(--seite-x) var(--s6);background:var(--film-tief)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand::after{content:"";position:absolute;left:8%;right:8%;bottom:-1px;height:1px;z-index:-1;box-shadow:var(--glut)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.kinobuehne{position:absolute;inset:0;z-index:-1;height:auto;overflow:hidden} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.kinobuehne img{object-position:center 30%} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.kinobuehne img.da{opacity:1} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.kinobuehne.weich img.da{filter:blur(28px) brightness(.55);transform:scale(1.12);opacity:1} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.kinobuehne::after{background:linear-gradient(90deg,var(--schleier-3) 0%,var(--schleier-2) 46%,var(--schleier-1) 72%,transparent 100%),var(--schleier-unten)} /* Leiste: Zurueck (im Inventar Position und Blaettern), rechts Im Inventar oder In der Bibliothek; kompakte Knoepfe mit Rand auf Bild */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .detail-leiste{margin-bottom:var(--s4);gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .detail-leiste .knopf{background:var(--schleier-2);border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .detail-leiste .knopf:hover{border-color:var(--licht);background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .detail-leiste>.klein:not(.knopf){margin-inline:var(--s2);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.laeuft-band{border-radius:var(--r-feld);border:var(--rand-b) solid var(--linie-2);background:var(--schleier-2)} /* Kopf: Plakat links (unten buendig mit Deine Bewertung), rechts Titel und Kennzeile, darunter der Rest in einer Spalte; ist der Text kuerzer als das Plakat, steht er unten an dessen Ende */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal{min-height:0;margin-top:auto;padding-top:var(--s8);grid-template-columns:clamp(200px,17.5vw,280px) minmax(0,1fr);grid-template-rows:1fr auto;column-gap:var(--s7);row-gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal>.saal-titel{align-self:end;display:flex;flex-direction:column;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal>.gcover{border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante),var(--hebung)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .gcover.ks-ersatz{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:2/3;padding:var(--s3);background:linear-gradient(160deg,color-mix(in srgb,var(--film) 22%,var(--grund)),var(--grund) 135%)!important;color:var(--film)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .gcover.ks-ersatz b{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:-.01em;overflow-wrap:anywhere} html[data-stil="kinosaal"]:not(#saal) .ks-titel .gcover.ks-ersatz small{font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-titel h1{margin:0;font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-46);line-height:var(--z-46);letter-spacing:-.01em;text-wrap:balance} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-titel .dlogo{max-width:min(440px,70%);max-height:120px;margin:0 0 var(--s1);object-fit:contain;object-position:left bottom} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-titel .saal-original{margin:0;font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} /* Kennzeile: Jahr halbfett, Abstaende statt Punkte, Freigabe und Bild als Plaketten auf Bild; lesbar auch ueber hellem Himmel. Seit Auftrag 111 auch die Sternwertung (der Durchschnitt aller Wertungen) und hinter dem Bild Kanaele und Atmos (.ks-ton), dieselben Plaketten */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .dmeta{gap:var(--s2) var(--s4);font-size:var(--t-16);line-height:var(--z-16);color:var(--text);font-variant-numeric:tabular-nums;text-shadow:0 0 1px var(--grund),0 1px 3px var(--grund),0 2px 14px var(--grund)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dmeta>b{font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dmeta :is(.ks-bild,.ks-ton){display:inline-flex;gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dmeta :is(.status,.plakette){min-height:var(--hoehe-marke);padding:0 var(--s2);border:var(--rand-b) solid var(--linie-3);border-radius:var(--r-marke);background:var(--schleier-2);color:var(--text);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);text-shadow:none} /* Auftrag 116 (Wort des Eigentuemers vom 22.10.2026, 15:40 und 16:45): die Kennzeile in zwei Zeilen. Freigabe und Stern fett in der Hoehe der Zeile, ohne Plakette (.ks-fett); die zweite Zeile (.ks-zeile-zwei) beginnt mit der Aufloesung in Metall (4K Gold, HD Silber, SD neutral), eine Stufe groesser als die Plaketten daneben (Schrift 14 statt 13, Hoehe 26 statt 22) und auf derselben Grundlinie; dahinter HDR, Kanaele und Atmos wie bisher. Abstaende wie in der Zeile davor (gap der Kennzeile), am Handy brechen beide Zeilen wie bisher */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .dmeta .ks-fett{min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--text);font-family:var(--sans);font-size:inherit;line-height:inherit;font-weight:var(--g-halb);text-shadow:inherit} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dmeta>.ks-zeile-zwei{display:flex;flex-wrap:wrap;flex-basis:100%;align-items:baseline;gap:inherit} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dmeta>.ks-zeile-zwei>:is(.ks-bild,.ks-ton){align-items:baseline} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dmeta .plakette.ks-aufl{min-height:0;font-size:var(--t-14);line-height:calc(var(--hoehe-marke) + var(--s1) - 2 * var(--rand-b))} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dmeta .plakette.ks-gold{border-color:var(--metall-gold-rand);background:var(--metall-gold);color:var(--metall-schrift)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dmeta .plakette.ks-silber{border-color:var(--metall-silber-rand);background:var(--metall-silber);color:var(--metall-schrift)} /* Wertungen klein in einer Zeile (Zeichen 24, Schild 22, Zahl 16 halbfett), darunter die Auszeichnungen als eine Pille zum Aufklappen (Pokal in Gold wie heute, Kurzform 14, zu lang mit "…"); aufgeklappt die Liste auf einer Flaeche */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal .saal-fakten{margin-top:0;gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .wertungen{margin-top:0;gap:var(--s2) var(--s5)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .wertung{gap:var(--s2);font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb);color:var(--text);text-shadow:0 1px 3px var(--grund)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .wertung .wz{width:24px;height:24px} html[data-stil="kinosaal"]:not(#saal) .ks-titel .wertung .wz-schild{width:auto;height:22px} html[data-stil="kinosaal"]:not(#saal) .ks-titel details.ausz{margin-top:0} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ausz-zeile{min-height:32px;padding:var(--s1) var(--s3);border:var(--rand-b) solid var(--linie-3);border-radius:var(--r-rund);background:var(--schleier-2);font-size:var(--t-14);line-height:var(--z-14);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ks-titel :is(.ausz-zeile:hover,.ausz-zeile:focus-visible,details.ausz[open]>.ausz-zeile){border-color:var(--text-3);background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ausz-liste{max-width:680px;padding:var(--s3) var(--s4);border-radius:var(--r-flaeche);border:var(--rand-b) solid var(--linie-2);background:var(--schleier-3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ausz-familie h3{font-family:var(--sans);font-weight:var(--g-halb);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ausz-familie li{font-size:var(--t-14);line-height:var(--z-14)} /* Warnband und Umzug ueber den Knoepfen (Baustein Hinweis, Runde 2b). Auftrag 111: 16 unter der Zeile davor; steht davor im Rest nichts, gibt die Zeile des Rasters den Abstand (ein leeres Band ist ausgeblendet, app/app.css) */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal .saal-warn{margin-top:0} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal .saal-fakten~.saal-warn{margin-top:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal .saal-umzug .d-umzugband{margin:0} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal :is(.saal-fakten,.saal-warn:not(:empty))~.saal-umzug{margin-top:var(--s4)} /* Knoepfe in einer Zeile: Abspielen hell mit Dreieck und zweiter Zeile, die Nebenknoepfe auf Bild, der Satz zum Stand mit Balken 120, still Merken, Gesehen und Mehr direkt dahinter */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal .saal-aktionen{margin-top:0;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal :is(.saal-fakten,.saal-warn:not(:empty),.saal-umzug:not(:empty))~.saal-aktionen{margin-top:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.knopf.haupt{padding:0 var(--s5) 0 var(--s4)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.knopf.haupt svg{fill:currentColor} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.knopf.haupt .zweit{margin-left:var(--s1);font-size:var(--t-14);font-weight:var(--g-text);opacity:.72} /* UI-1 (Bild des Eigentuemers 07.11.2026: "Weiterschauen · Staffel 3, Folge 1, noch …" links und rechts abgeschnitten): mit Nebenzeile traegt der Hauptknopf zwei Zeilen, oben das Wort, darunter klein Folge und Rest; der Knopf waechst in der Hoehe statt den Text zu kappen */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.knopf.haupt:has(.zweit){height:auto;min-height:var(--zeile);padding-block:var(--s1);max-width:100%} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.knopf.haupt>span:has(>.zweit){display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:var(--z-14);text-align:left} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.knopf.haupt .zweit{display:block;margin-left:0;font-size:var(--t-13);line-height:var(--z-13);overflow-wrap:anywhere} @media (min-width:821px){html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.knopf.haupt:has(.zweit){flex-basis:auto}} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen .d-trailer .knopf,html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.knopf:not(.haupt):not(.still){background:var(--schleier-2);border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>#d-sichtsatz .statuszeile{flex-wrap:nowrap;gap:var(--s2);margin-left:var(--s2);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>#d-sichtsatz .statuszeile b{min-width:0;font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ks-titel #d-sichtsatz .balken{flex:none} html[data-stil="kinosaal"]:not(#saal) .ks-titel #d-sichtsatz .balken{width:120px!important;height:4px;border-radius:var(--r-rund);background:var(--flaeche-3);overflow:hidden} html[data-stil="kinosaal"]:not(#saal) .ks-titel #d-sichtsatz .balken>span{display:block;height:100%;background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .ks-titel #d-sichtsatz .ok-text{color:var(--gut)} /* Menue Mehr: die Eintraege von heute in Gruppen (Ansehen, Planen und melden, Administration, Andere Seiten), je Gruppe ihr Name, Linien dazwischen; eine Gruppe mit nur verborgenen Eintraegen (Von vorn abspielen vor dem Stand) steht nicht da */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-still>.d-mehr>.d-mehr-liste{min-width:300px;max-height:min(72vh,680px);overflow-y:auto} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-mehr-liste .mehr-gruppe{display:grid;gap:2px;padding:var(--s1) 0} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-mehr-liste .mehr-gruppe+.mehr-gruppe{border-top:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-mehr-liste .mehr-gruppe:not(:has(>:is(a,button):not([hidden]),>span>:is(a,button):not([hidden]))){display:none} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-mehr-liste .mehr-gruppe-name{padding:var(--s2) var(--s3) var(--s1);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-still>.d-mehr>.d-mehr-liste :is(a,button){min-height:var(--hoehe-k);padding:0 var(--s3);gap:var(--s2);border-color:transparent;background:none;color:var(--text);font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-mittel)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-still>.d-mehr>.d-mehr-liste :is(a,button):hover{border-color:transparent;background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-still>.d-mehr>.d-mehr-liste :is(a,button).gefahr{color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-mehr-liste a[target="_blank"] svg{margin-left:auto;width:14px;height:14px;color:var(--text-3)} /* Slogan (Condensed 16 in Anfuehrungszeichen) und Handlung (Lesetext 18 in Licht, hoechstens 66 Zeichen; am PC der ganze Text) */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal .slogan{margin-top:var(--s4);max-width:var(--mass);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-16);line-height:var(--z-16);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal .slogan::before{content:"„"} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal .slogan::after{content:"“"} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-text .dtext{max-width:var(--mass);margin-top:var(--s4);font-size:var(--t-18);line-height:var(--z-18);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal .slogan+.saal-text .dtext{margin-top:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-weiter{min-height:var(--hoehe-k);color:var(--text);font-size:var(--t-14);font-weight:var(--g-halb);text-decoration:underline;text-decoration-color:var(--linie-3);text-underline-offset:.25em} /* Chips als Wegmarken auf Bild: das Etikett einmal vor der Gruppe, die Regie mit Anfangsbuchstaben, Andere Werke gestrichelt mit Pfeil (seit Auftrag 111 nicht mehr auf der Titelseite: der Name des Studios fuehrt auf seine Seite); die Zeilen 10 auseinander (Auftrag 111) */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-chips{margin-top:var(--s4);gap:10px var(--s5)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-chip-gruppe{row-gap:10px} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-chip-gruppe>i{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3);margin-right:2px} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-chip{background:var(--schleier-2);border-color:var(--linie-3);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-chip:hover{border-color:var(--text-3);background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-chip .ini{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;margin-left:calc(-1 * var(--s1));border-radius:var(--r-rund);background:var(--film-tief);color:var(--film);font-size:var(--t-13);line-height:1;font-weight:var(--g-halb)} /* Hinweise als ruhige Zeilen (Zeichen 14, Etikett 13, Satz 14 in Licht, Aendern still dahinter); kein Kasten, keine Farbe der Art */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .notizen.angaben{margin-top:var(--s4);gap:var(--s2);max-width:var(--mass)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .notiz-angabe{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .notiz-angabe .notiz-etikett{font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .notiz-angabe .notiz-satz{color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .notiz-angabe .notiz-knoepfe .knopf{min-height:28px;padding-inline:var(--s2);font-size:var(--t-13)} /* Deine Bewertung am Ende des Kopfs (Etikett 14 halbfett, Sterne 22, Satz 13) */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal .bewerten{margin-top:var(--s4);gap:var(--s2) var(--s4)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .bewerten .etikett{font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .bewerten .sterne svg{width:22px;height:22px} html[data-stil="kinosaal"]:not(#saal) .ks-titel .bewerten .klein{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Szenen: Kopf eines Abschnitts, Raster aus vier Bildern 16 : 9 (schmaler PC drei, Handy zwei); ohne Kasten. Seit Auftrag 111 zeigt die Titelseite der Webseite nur die Szenenbilder (szenenBilderHtml); die Regeln der Clip-Kacheln entfielen in Runde 10 */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .szenen-streifen{width:auto;margin:var(--s7) 0 0;padding:0;border:0;border-radius:0;background:none} html[data-stil="kinosaal"]:not(#saal) .ks-titel .szenen-streifen .etikett{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .szenen-streifen .etikett{margin:0 0 var(--s4)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .szenen-streifen .bilder{gap:var(--s5) var(--s4)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .szenen-streifen img{border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante)} /* Echte Reiter: bei Filmen unter den Szenen, bei Serien direkt unter dem Kopf; der gewaehlte Teil gleich unter der Leiste */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-reiter{margin-top:var(--s7)} html[data-stil="kinosaal"]:not(#saal) .ks-titel.ks-serie .d-reiter{margin-top:var(--s6)} html[data-stil="kinosaal"]:not(#saal) .ks-titel #d-inhalt>.d-teil{margin-top:0;scroll-margin-top:calc(var(--kopfzeile) + 64px)} html[data-stil="kinosaal"]:not(#saal) .ks-titel #d-inhalt>.d-teil>:first-child{margin-top:var(--s6)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-szenen-teil>.szenen-streifen{margin-top:var(--s6)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-abschnitt{margin-top:var(--s7)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-abschnitt>header{gap:var(--s2) var(--s3);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-abschnitt>header h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-abschnitt>header .klein{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3)} /* Uebersicht: Besetzung als Personenkarten in zwei Reihen zu sechs (die Pfeile blaettern), Mehr davon als drei breite Karten, Technik in Kuerze als eine Zeile auf einer Flaeche mit Alle Angaben */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .reihe.besetzung{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * var(--s4)) / 6);gap:var(--s5) var(--s4)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .reihe.besetzung .tk-person-huelle{align-items:flex-start} html[data-stil="kinosaal"]:not(#saal) .ks-titel .reihe.besetzung .tk-person{align-items:flex-start;text-align:left;padding:var(--s1) 0} html[data-stil="kinosaal"]:not(#saal) .ks-titel .reihe.besetzung .tk-person .rund{width:min(100%,120px);height:auto;aspect-ratio:1;font-size:var(--t-32)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .nachbar-raster{gap:var(--s5) var(--s4)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .technik-kurz{gap:var(--s2) var(--s4);margin-top:var(--s7);padding:var(--s3) var(--s4);border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .technik-kurz b{font-weight:var(--g-halb);color:var(--text)} /* Staffeln in der Darstellung des Prototyps: Reiter je Staffel mit Zahl, Kopf der Staffel (Name, gesehen, Staffel als gesehen markieren, Technik in Mono, Ton), Zeile je Folge (Abspielen, Nummer, Titel mit weiter hier, Technik, Stand, Dauer, Fehler melden, Gesehen), die Technische Tabelle zum Aufklappen */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-staffelreiter{margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .staffelblock{padding:0;border-top:0} html[data-stil="kinosaal"]:not(#saal) .ks-titel .staffelblock>.sb-kopf{display:grid;grid-template-columns:max-content max-content minmax(0,1fr) max-content;grid-template-areas:"name folgen . knopf" "technik technik technik technik" "ton ton ton ton";gap:var(--s1) var(--s4);align-items:baseline;padding-bottom:var(--s3);border-bottom:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .sb-kopf .sb-name{grid-area:name;font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .sb-kopf .sb-folgen{grid-area:folgen;font-family:var(--sans);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .ks-titel .sb-kopf .sb-knopf{grid-area:knopf;align-self:center} html[data-stil="kinosaal"]:not(#saal) .ks-titel .sb-kopf .sb-technik{grid-area:technik;color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .sb-kopf .sb-ton{grid-area:ton;font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .sb-kopf .sb-ton:not(.warn-text){color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .sb-kopf .staffel-gesehen[aria-pressed="true"]{color:var(--gut)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .staffelblock .folgenliste{margin-top:0} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile{grid-template-columns:var(--hoehe-k) 48px minmax(0,1fr) auto;gap:var(--s4);padding:var(--s3) 0;border-top:var(--rand-b) solid var(--linie);font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile:first-child{border-top:0} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile:not(.mit-start){grid-template-columns:48px minmax(0,1fr) auto} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile:has(.ks-folge-stand:not(:empty)){background:linear-gradient(90deg,var(--flaeche-2),transparent)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile .nr{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile b{font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile b .status{margin-left:var(--s2);vertical-align:1px} /* Auftrag 116: hinter dem Titel einer Folge ihre IMDb-Wertung, klein (Schild 16 hoch, Zahl 13 wie die Technik darunter) im Fluss der Zeile (app/app.css): die Zahl auf der Grundlinie des Titels, das Schild mittig zu den Grossbuchstaben */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile b .wertung{margin-left:var(--s1);font-size:var(--t-13);line-height:1;font-weight:var(--g-halb);color:var(--text-2);text-shadow:none} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile b .wertung .wz-schild{height:16px;margin-right:var(--s1);vertical-align:-3px} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-folge-stand{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-folge-stand:empty{display:none} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-folge-stand .fortschritt{display:block;width:120px;height:4px;border-radius:var(--r-rund);background:var(--flaeche-3);overflow:hidden} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-folge-stand .fortschritt>i{display:block;height:100%;background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile .rechts{gap:var(--s2);font-family:var(--sans);font-size:var(--t-13);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile .d-melden{opacity:.45;border-color:transparent;background:none} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile .d-melden svg{fill:none;stroke:currentColor;stroke-width:1.5} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile:is(:hover,:focus-within) .d-melden{opacity:1} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile .sichtpunkt{width:10px;height:10px;background:none;border:1.5px solid var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile .sichtpunkt.voll{background:var(--licht);border-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile .sichtpunkt.teil{background:linear-gradient(90deg,var(--licht) 50%,transparent 50%);border-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .staffelblock .k-schema{margin-top:0;border-top:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .staffelblock .k-schema>summary{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s4) 0;font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .staffelblock .k-schema>summary small{font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .staffelblock .k-schema>summary::after{content:"";width:8px;height:8px;margin:0 var(--s2) 0 auto;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:translateY(-3px) rotate(45deg)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .staffelblock .k-schema[open]>summary::after{transform:translateY(2px) rotate(-135deg)} /* Technik und Verlauf: nicht zugeklappt; die Fassung auf einer Flaeche mit Werten, Kennwerte daneben (bei Serien darunter) */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .dgitter{column-gap:var(--s8)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .fassung{padding:var(--s4) var(--s5);border-radius:var(--r-flaeche);border:var(--rand-b) solid var(--linie-2);background:var(--flaeche)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .fassung+.fassung{margin-top:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .fassung-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s1) var(--s2);margin-bottom:var(--s3);font-family:var(--kond);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .fassung-name b{font-weight:var(--g-kopf);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .fassung-name span::before{content:"· ";color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .fassung-name span{font-size:inherit;line-height:inherit;font-weight:var(--g-kopf);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .kennwerte{gap:var(--s1) var(--s4);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .kennwerte dt{color:var(--text-3)} /* Schmaler PC: Plakat 180, Szenen in drei Spalten */ @media (min-width:821px) and (max-width:1250px){ html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal{grid-template-columns:180px minmax(0,1fr);column-gap:var(--s6)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .szenen-streifen .bilder{grid-template-columns:repeat(3,minmax(0,1fr))} html[data-stil="kinosaal"]:not(#saal) .ks-titel .reihe.besetzung{grid-auto-columns:calc((100% - 3 * var(--s4)) / 4)} } /* Handy wie heute: das Querbild oben in 16 : 9, Plakat 84 klein neben Titel und Kennzeile, alles darunter in voller Breite; Abspielen breit mit den stillen Zeichen in der ersten Zeile, die Nebenknoepfe darunter, der Satz zum Stand zuletzt; Chips je Gruppe eine Zeile mit dem Etikett in einer eigenen Spalte; Besetzung rollt seitlich; Mehr davon und Szenen in zwei Spalten */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-height:0;padding-bottom:var(--s5);background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.kinobuehne{position:relative;inset:auto;grid-area:1/1;align-self:start;aspect-ratio:16/9;margin:-16px calc(-1 * var(--seite-x)) 0} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.kinobuehne::after{background:linear-gradient(0deg,var(--grund) 0%,transparent 60%)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.detail-leiste{grid-area:1/1;align-self:start;z-index:1;flex-wrap:nowrap} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.laeuft-band{grid-row:2} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.dkopf.saal{grid-area:1/1;z-index:1;margin-top:44vw;padding-top:0;grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--s4);row-gap:var(--s4);align-items:end} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.laeuft-band~.dkopf.saal{grid-area:auto;margin-top:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-titel .dlogo{max-width:100%;max-height:96px} html[data-stil="kinosaal"]:not(#saal) .ks-titel .gcover.ks-ersatz{padding:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .gcover.ks-ersatz b{font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dmeta{gap:var(--s1) var(--s3);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .dkopf.saal .saal-fakten{margin:0} html[data-stil="kinosaal"]:not(#saal) .ks-titel .wertungen{flex-wrap:wrap;gap:var(--s2) var(--s3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .wertung .wz{width:22px;height:22px} html[data-stil="kinosaal"]:not(#saal) .ks-titel .wertung .wz-schild{width:auto;height:20px} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.knopf.haupt .zweit{display:none} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>#d-sichtsatz .statuszeile{margin-left:0} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-chips{flex-direction:column;align-items:stretch;gap:10px} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-chip-gruppe{position:relative;padding-left:72px} html[data-stil="kinosaal"]:not(#saal) .ks-titel .d-chip-gruppe>i{position:absolute;left:0;top:6px} html[data-stil="kinosaal"]:not(#saal) .ks-titel .reihe.besetzung{grid-auto-columns:42%} html[data-stil="kinosaal"]:not(#saal) .ks-titel .szenen-streifen .bilder{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .staffelblock>.sb-kopf{grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:"name knopf" "folgen knopf" "technik technik" "ton ton"} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile{grid-template-columns:var(--hoehe-k) 32px minmax(0,1fr);row-gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile .rechts{grid-column:3;justify-content:flex-start} html[data-stil="kinosaal"]:not(#saal) .ks-titel .folge-zeile .d-melden{opacity:1} html[data-stil="kinosaal"]:not(#saal) .ks-titel .fassung{padding:var(--s3) var(--s4)} } /* S2-3b (30.10.2026): In der Reihe ueber den Chips, zwei Zeilen zwischen Haarlinien in Linie 2, der Name in der Stimme der Titelkarte, der Platz im Licht (Ordnung in app/app.css, Block s2-3-reihen) */ html[data-stil="kinosaal"]:not(#saal) .ks-titel .titel-reihe .titel-reihe-zeile{border-color:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .titel-reihe :is(.reihe-etikett,.reihe-abschnitt,.reihe-folge,.reihe-weltsatz,.reihe-nb-text small){color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .titel-reihe .reihe-platz{color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .titel-reihe .reihe-weltsatz a{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .titel-reihe .reihe-nb-bild{border-radius:var(--r-werk);background:var(--film-tief)} /* ---------------------------------------------------------------- Personen, Studios, Sender und Reihen (Runde 4a, 16.10.2026) Gestalt aus dem Prototyp (scratchpad/a84/prototyp/person.html, studio.html, studio-sender.html, reihe.html; css/seiten.css Abschnitt 85-werke, css/bausteine.css: Leinwand, Titelkarte, Werte, Kennzeile, Marken, Fortschritt, Liste) fuer das Markup aus app/werke.js (Block saal-werke) und die Bausteine aus app/kern.js (Block bausteine-saal). Wie der Abschnitt der Runde 3 ordnet er auch an: die Leinwand eines Studios, Senders oder einer Reihe mit den Fakten oder deinem Stand rechts, Bekannt fuer, Im Archiv mit Umschalter und Sortierung, die Teile als Leinwandkarten in drei, zwei, einer Spalte. Der Kopf einer Person behaelt das Markup von heute und bekommt hier das Kleid des Prototyps. Jede Regel steht unter den Seiten der Werke (.aw-seite): die Klassen satz, marken, werte und fortschritt nennen in app/app.css heute anderes (Betrieb, Planung, Inventar); die Titelseite (Runde 5a) hebt die Leinwand aus diesem Rahmen. */ html[data-stil="kinosaal"]:not(#saal) .aw-seite .titelkarte{margin:0;font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-46);line-height:var(--z-46);letter-spacing:-.01em;text-wrap:balance;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .titelkarte.gross{font-size:var(--t-60);line-height:var(--z-60)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .kennzeile{margin:0;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .kennzeile b{font-weight:var(--g-halb);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .satz{margin:0;max-width:var(--mass);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .satz.gross{font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .werte{display:flex;flex-direction:column;margin:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .werte>div{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:var(--s4);align-items:baseline;min-height:32px;padding:var(--s2) 0;border-top:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .werte>div:first-child{border-top:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .werte dt{font-size:var(--t-13);line-height:var(--z-16);font-weight:var(--g-text);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .werte dd{margin:0;min-width:0;font-size:var(--t-16);line-height:var(--z-16);color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .werte dd small{font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .marken{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .plakette.auf-bild{background:var(--schleier-2);border-color:var(--linie-3);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .fortschritt{display:block;height:4px;min-width:48px;border-radius:var(--r-rund);background:var(--flaeche-3);overflow:hidden} html[data-stil="kinosaal"]:not(#saal) .aw-seite .fortschritt.dick{height:8px} html[data-stil="kinosaal"]:not(#saal) .aw-seite .fortschritt i{display:block;height:100%;border-radius:var(--r-rund);background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .handlungen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .knopf .zweit{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:var(--g-text);opacity:.72} html[data-stil="kinosaal"]:not(#saal) .aw-seite .abschnitt-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);margin-bottom:var(--s4)} /* Abschnitte: Abstand, Kopf mit Zahl und rechts den Werkzeugen von Im Archiv (Umschalter, Sortieren in einer Zeile) */ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-abschnitt{margin-top:var(--s7)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-abschnitt>header{align-items:center;gap:var(--s2) var(--s3);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-abschnitt>header h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-zaehlung{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-archiv-werkzeuge{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-left:auto} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-sortieren{display:inline-flex;align-items:center;gap:var(--s2);flex:none} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-sortieren>.feld{width:auto} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-weg{gap:var(--s2) var(--s4);margin-top:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-weg>span{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-weg .knopf svg{width:16px;height:16px} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-quelle{margin-top:var(--s8);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Personenseite: der Kopf von heute im Kleid des Prototyps: Bild im Mass eines Plakats, Kennzeile, der Name als Titelkarte, das Fach, die Lebensdaten als Werte, Hinweis und Biografie als Lesetext; die Glut bleibt (das Bild der Person, sonst die Farben eines Werks) */ html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-vorstellung{--aw-bild:208px;column-gap:var(--s6);margin-bottom:var(--s7)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-portraet{border-radius:var(--r-werk);box-shadow:var(--kante),var(--glut)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-portraet:not(.farbig){background:linear-gradient(160deg,var(--film-tief),var(--grund) 135%)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-portraet:not(.farbig) .aw-initialen{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-60);line-height:var(--z-60);letter-spacing:.02em;color:var(--film)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-angaben{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-vorstellung h1{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-46);line-height:var(--z-46);letter-spacing:-.01em} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-fach{margin:0;font-family:var(--sans);font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-steckbrief{display:flex;flex-direction:column;gap:0;margin:0;width:min(560px,100%)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-steckbrief>div{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:var(--s4);align-items:baseline;padding:var(--s2) 0;border-top:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-steckbrief>div:first-child{border-top:0} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-steckbrief dt{font-size:var(--t-13);line-height:var(--z-16);font-weight:var(--g-text);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-steckbrief dd{font-size:var(--t-16);line-height:var(--z-16);color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-bio-text{font-size:var(--t-18);line-height:var(--z-18);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-bio-mehr{color:var(--text-2);font-weight:var(--g-mittel)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-bio-mehr:hover{color:var(--text)} /* Leinwand (Studio, Sender, Reihe): das Querbild des bekanntesten Werks hinter dem Kopf ueber die volle Breite, mit den Schleiern der Leinwand; die Leiste oben auf dem Bild, links Kennzeile, Name, Art oder Marken, Handlungszeile; rechts die Fakten oder dein Stand auf der Flaeche der Vorfuehrung. Ohne Bild bleibt die Tiefe des Films mit der Glut. */ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand{position:relative;isolation:isolate;display:grid;align-items:end;min-height:var(--leinwand-h);margin:calc(-1 * var(--seite-oben)) calc(-1 * var(--seite-x)) var(--s7);overflow:hidden;background:var(--film-tief)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand.ohne-bild{min-height:0;background:radial-gradient(70% 110% at 12% 35%,var(--film-glut),transparent 72%),linear-gradient(180deg,var(--film-tief),var(--grund) 92%)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand>.hg{position:absolute;inset:0;z-index:-2;overflow:hidden} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand>.hg img{width:100%;height:100%;object-fit:cover;object-position:center 30%} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand>.hg::after{content:"";position:absolute;inset:0;background:var(--schleier-links),var(--schleier-unten)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand::after{content:"";position:absolute;left:8%;right:8%;bottom:-1px;height:1px;z-index:-1;box-shadow:var(--glut)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand>.leinwand-leiste{position:absolute;top:var(--s4);left:var(--seite-x);right:var(--seite-x);z-index:2;margin:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand>.leinwand-leiste .knopf{background:var(--schleier-2);border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand .leinwand-inhalt{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s6);align-items:end;padding:calc(var(--s8) + var(--s6)) var(--seite-x) var(--s7)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand .leinwand-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);max-width:760px;min-width:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand .titelkarte{margin:var(--s1) 0 0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand .handlungen{margin-top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand .handlungen .knopf:not(.haupt){background:var(--schleier-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand .aw-logo-tafel{width:208px;margin-bottom:var(--s2);border-radius:var(--r-feld)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-lw-art{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-lw-quelle{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand .aw-hinweis{margin:0;max-width:var(--mass)} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-fakten,.aw-stand){width:100%;padding:var(--s5);border-radius:var(--r-flaeche);background:var(--schleier-2);border:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-fakten,.aw-stand) h2{margin:0 0 var(--s2);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} /* Bekannt fuer: bei der Person vier Plakate in einer Reihe, bei Studio und Sender vier breite Karten ueber die ganze Breite */ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-bekannt{margin-top:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-bekannt-reihe,.aw-archiv-reihe){--kw:var(--poster-b)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-breit-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-breit-raster .tk-breit{width:auto} html[data-stil="kinosaal"]:not(#saal) .aw-firmenseite .aw-archiv{margin-top:var(--s8)} /* Die Teile einer Reihe als Leinwandkarten 2,39 : 1 (Titelkarte als Leinwand): Nummer gross oben links, Name unten links im Bild, Zustand oben rechts, Sichtbalken unten; darunter Jahr, Fassung, Stand und bei fehlenden Teilen Anfragen. Drei Spalten, schmaler PC zwei, Handy eine. */ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teile-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s4)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teil{display:flex;flex-direction:column;gap:var(--s2);min-width:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-karte{position:relative;display:block;color:var(--text);text-decoration:none} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-bild{position:relative;display:block;aspect-ratio:2.39/1;border-radius:var(--r-werk);overflow:hidden;isolation:isolate;background:linear-gradient(160deg,var(--film-tief),var(--grund) 135%);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-bild>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 30%} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-bild>img.lw-logo{inset:auto var(--s3) var(--s3) auto;z-index:0;width:auto;height:auto;max-width:34%;max-height:38%;object-fit:contain;object-position:right bottom} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-ersatz{position:absolute;inset:0;z-index:-2;background:radial-gradient(80% 120% at 85% 20%,color-mix(in srgb,var(--film) 22%,transparent),transparent 70%)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-schleier{position:absolute;inset:0;z-index:-1;background:var(--schleier-links),var(--schleier-unten)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-bild>.nr{position:absolute;left:var(--s3);top:var(--s3);display:grid;place-items:center;min-width:40px;height:40px;padding:0 var(--s2);border-radius:var(--r-marke);background:var(--licht);color:var(--grund);font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:1;font-variant-numeric:tabular-nums lining-nums} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-name{position:absolute;left:var(--s3);right:38%;bottom:var(--s3);display:flex;flex-direction:column;gap:2px;min-width:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-name b{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:-.01em;text-wrap:balance;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-name small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-ecke{position:absolute;right:var(--s3);top:var(--s3);display:flex;gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-bild>.sicht{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--schleier-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-bild>.sicht i{display:block;height:100%;background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .aw-seite a.lw-karte:is(:hover,:focus-visible) .lw-bild{box-shadow:var(--kante),var(--glut)} html[data-stil="kinosaal"]:not(#saal) .aw-seite a.lw-karte:focus-visible{outline:none} html[data-stil="kinosaal"]:not(#saal) .aw-seite a.lw-karte:focus-visible .lw-bild{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-karte.fehlt .lw-bild{box-shadow:inset 0 0 0 1px var(--linie-3);background:repeating-linear-gradient(135deg,var(--flaeche),var(--flaeche) 10px,var(--flaeche-2) 10px,var(--flaeche-2) 20px)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-karte.fehlt .lw-name b{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .plakette.aw-zustand{display:inline-flex;align-items:center;gap:var(--s1);background:var(--schleier-2);border-color:var(--linie-3);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .plakette.aw-zustand:is(.gesehen,.angefangen){background:var(--licht);border-color:var(--licht);color:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .plakette.aw-zustand.fehlt{border-color:var(--warnung-rand);color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .plakette.aw-zustand svg{width:14px;height:14px} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teil-unter{display:flex;flex-direction:column;gap:2px;min-width:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teil-jahr{margin:0;font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teil-jahr b{font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teil-fassung{margin:0;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teil-stand{margin:0;font-size:var(--t-13);line-height:var(--z-13);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teil-tun{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s2)} /* Ansicht Poster: die Karte der Bibliothek mit der Nummer unten links; ein fehlender Teil gestreift */ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teile-poster .bild>.nr{position:absolute;left:var(--s2);bottom:var(--s2);z-index:2;display:grid;place-items:center;min-width:28px;height:28px;padding:0 var(--s2);border-radius:var(--r-marke);background:var(--licht);color:var(--grund);font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-16);line-height:1} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teile-poster .bild>.aw-zustand{position:absolute;right:var(--s2);top:var(--s2);z-index:2} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teil-poster.fehlt .bild{box-shadow:inset 0 0 0 1px var(--linie-3);background:repeating-linear-gradient(135deg,var(--flaeche),var(--flaeche) 10px,var(--flaeche-2) 10px,var(--flaeche-2) 20px)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teil-poster>.knopf{margin-top:var(--s2)} /* Ansicht Liste, Festlegen der Erzaehlung und die fehlenden Teile: Zeilen mit Nummer, Name und Zustand */ html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-teil-liste,.aw-fehlend-liste){display:flex;flex-direction:column;margin:0;padding:0;list-style:none} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-teil-liste,.aw-fehlend-liste)>li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--s4);align-items:center;min-height:var(--zeile);padding:var(--s3) 0;border-top:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-teil-liste,.aw-fehlend-liste)>li:last-child{border-bottom:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teil-liste>li>a{display:block;min-width:0;color:inherit;text-decoration:none} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teil-liste>li>a:hover b{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-teil-liste,.aw-fehlend-liste) .nr{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:var(--z-24);color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-teil-liste,.aw-fehlend-liste) .haupt{display:block;min-width:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-teil-liste,.aw-fehlend-liste) .haupt b{display:block;font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-teil-liste,.aw-fehlend-liste) .haupt small{display:block;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-teil-liste,.aw-fehlend-liste) .wert{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teil-liste.bearbeiten>li{background:var(--flaeche);padding-inline:var(--s3)} /* Dein Stand: drei Kennzahlen (gesehen, angefangen, noch offen), der Balken, der angefangene Teil, was fehlt */ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-stand{display:flex;flex-direction:column;gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-zahlen .kennzahl{display:flex;flex-direction:column;gap:2px;min-width:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-zahlen .kennzahl b{font-size:var(--t-32);line-height:var(--z-32)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-zahlen .kennzahl b small{font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-14);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-stand .verweis{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-decoration-color:var(--linie-3);text-underline-offset:.22em;text-decoration-thickness:1px;cursor:pointer} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-stand .verweis:hover{text-decoration-color:var(--licht)} /* Seite einer Reihe: Abstaende, Werkzeuge ueber den Teilen, Hinweis der Sperre, Festlegen der Erzaehlung */ html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-reihe>.hinweis{margin:0 0 var(--s6)} html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-teile{margin-top:0} html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-teile-werkzeuge{margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-erz-leiste{margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-teile-satz{margin:0 0 var(--s4)} /* S2-1b (30.10.2026): Teil von (der Weg zur Oberreihe) unter dem Namen, die Ueberschriften der Abschnitte zwischen den Teilen, Reihen darin als Chips mit der Zahl ihrer Titel; ein Mitglied ausserhalb des Bestands steht wie ein fehlender Teil gestreift da (.fehlt) */ html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-teil-von{margin:0;font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-teil-von a{color:var(--text);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px} html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-teile-abschnitt{margin:var(--s7) 0 var(--s4)} html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-teile-werkzeuge+.aw-teile-abschnitt{margin-top:0} html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-teile-abschnitt h3{margin:0;font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-reihen-darin{margin:0 0 var(--s7)} html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-darin-chips{display:flex;flex-wrap:wrap;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-fehlend{margin-top:var(--s8);scroll-margin-top:calc(var(--kopf-h,64px) + var(--s4))} html[data-stil="kinosaal"]:not(#saal) .aw-reihenseite .aw-reihe-geruest{min-height:var(--leinwand-h);margin:calc(-1 * var(--seite-oben)) calc(-1 * var(--seite-x)) var(--s7);padding:var(--s8) var(--seite-x);background:var(--flaeche)} @media (max-width:1250px){ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand .leinwand-inhalt{grid-template-columns:minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-fakten,.aw-stand){width:min(560px,100%)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-breit-raster{grid-template-columns:repeat(2,minmax(0,1fr))} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teile-raster{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Handy: das Bild der Leinwand oben in 16 : 9, der Text darunter; die Flaechen auf Flaeche 2; Bekannt fuer rollt (78 %), die Teile in einer Spalte */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-vorstellung{--aw-bild:112px;column-gap:var(--s4);margin-bottom:var(--s6)} html[data-stil="kinosaal"]:not(#saal) .aw-personenseite .aw-steckbrief>div{grid-template-columns:64px minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand{min-height:0;background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand>.hg{position:relative;inset:auto;grid-area:1/1;align-self:start;aspect-ratio:16/9} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand>.hg::after{background:linear-gradient(0deg,var(--grund) 0%,transparent 60%)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand .leinwand-inhalt{grid-area:1/1;grid-template-columns:minmax(0,1fr);margin-top:44vw;padding:0 var(--seite-x) var(--s5)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand.ohne-bild .leinwand-inhalt{margin-top:0;padding-top:calc(var(--s8) + var(--s2))} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-leinwand>.leinwand-leiste{top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-fakten,.aw-stand){background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-breit-raster{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--seite-x));padding-inline:var(--seite-x)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-breit-raster::-webkit-scrollbar{display:none} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-teile-raster{grid-template-columns:minmax(0,1fr);gap:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-archiv-werkzeuge{flex-basis:100%;margin-left:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .lw-name b{font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .leinwand-text .knopf .zweit{display:none} } /* ---------------------------------------------------------------- Wegmarken, Auszeichnungen und Geschichte (Runde 4c, 22.10.2026) Fuer das Markup aus app/werke.js (Block wegmarken). Die Seite einer Wegmarke (Genre, Land, Jahrzehnt) traegt das Kleid der Seite einer Reihe aus dem Abschnitt der Runde 4a: Leinwand mit deinem Stand rechts, darunter der Text als Lesetext im Mass mit den praegenden Werken in einer Reihe (im Archiv mit Querbild, sonst ruhig als Text auf gestrichelter Flaeche), dann Im Archiv mit Bereich, Sichtstand und Sortierung ueber dem Raster. Die Geschichte eines Studios steht wie der Text einer Wegmarke. Auszeichnungen als Zeilen mit Linie dazwischen (Preis und Kategorie, wofuer, Jahr, gewonnen), die Preise der Werke und beim Studio je Werk zum Aufklappen. Am Handy rollen die praegenden Werke (78 %), die Zeile eines Preises bricht in zwei. Jede Regel unter den Seiten der Werke (.aw-seite), nur Tokens. */ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-wegmarke>.aw-textblock{margin-top:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-lesetext{max-width:var(--mass)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-lesetext p{margin:0 0 var(--s3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-lesetext p:last-child{margin-bottom:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-praegend{margin-top:var(--s6)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-praegend .abschnitt-kopf h3{margin:0;font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-praegend-reihe{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-praegend-reihe .tk-breit{width:auto;min-width:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-werk-ruhig{display:flex;flex-direction:column;gap:var(--s1);min-width:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-werk-flaeche{display:flex;align-items:flex-end;aspect-ratio:16/9;padding:var(--s3);border-radius:var(--r-werk);border:var(--rand-b) dashed var(--linie-2);background:var(--flaeche)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-werk-flaeche b{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);color:var(--text-2);overflow-wrap:anywhere} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-werk-ruhig small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Praegende Werke ausserhalb des Archivs (Auftrag 117): mit Bildern von TMDB die breite Karte wie im Archiv, die Plakette "Nicht im Archiv" oben links; ohne Bilder die ruhige Flaeche. Darunter der Stand einer Anfrage und der Knopf, in einer Reihe auf einer Hoehe (unten in der Zelle). Die Karte ist kein Link: kein Zoom und keine Glut. */ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-werk-aussen{display:flex;flex-direction:column;min-width:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .tk-breit.aw-werk-aussen .bild img.hg{transform:none} html[data-stil="kinosaal"]:not(#saal) .aw-seite .tk-breit.aw-werk-aussen:is(:hover,:focus-visible) .bild{box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-werk-tun{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:auto;padding-top:var(--s2)} /* Im Archiv einer Wegmarke: Bereich, Sichtstand und Sortierung in einer Zeile ueber dem Raster, der Wert der Sortierung vor der Zeile der Karte */ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-wm-regal{margin-top:var(--s8)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-wm-werkzeuge{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-wm-werkzeuge>*{flex:none;max-width:100%} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-wm-sortierung{display:inline-flex;align-items:center;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-wm-wert{margin-right:var(--s1);color:var(--text-2)} /* Auszeichnungen: eine Zeile je Preis; gewonnen hell mit Plakette, nominiert leise */ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-liste{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;max-width:1120px} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-preis{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) 56px 104px;grid-template-areas:"name wofuer jahr art";column-gap:var(--s4);align-items:baseline;padding:var(--s3) 0;border-top:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-preis:first-child{border-top:0} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-name{grid-area:name;min-width:0;font-size:var(--t-16);line-height:var(--z-16);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-name b{margin-right:var(--s1);font-weight:var(--g-halb);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-preis.gewonnen .aw-ausz-name{color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-preis.gewonnen .aw-ausz-name b{color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-wofuer{grid-area:wofuer;min-width:0;font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-wofuer a{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--linie-3);text-underline-offset:.22em;text-decoration-thickness:1px} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-wofuer a:hover{text-decoration-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-jahr{grid-area:jahr;font-variant-numeric:tabular-nums;font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-art{grid-area:art;justify-self:end;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-satz{margin-bottom:var(--s3)} /* Zum Aufklappen: die Preise der Werke (Person) und je Werk (Studio); der Pfeil dreht sich beim Oeffnen */ html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-ausz-werke,.aw-ausz-werk){max-width:1120px;border-top:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-werke{margin-top:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-werk:last-child{border-bottom:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-ausz-werke,.aw-ausz-werk)>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);min-height:44px;padding:var(--s3) 0;cursor:pointer;list-style:none} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-ausz-werke,.aw-ausz-werk)>summary::-webkit-details-marker{display:none} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-ausz-werke,.aw-ausz-werk)>summary b{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-ausz-werke,.aw-ausz-werk)>summary small{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-ausz-werke,.aw-ausz-werk)>summary svg{align-self:center;width:16px;height:16px;margin-left:auto;color:var(--text-3);transition:transform var(--dauer-ebene) ease} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-ausz-werke,.aw-ausz-werk)[open]>summary svg{transform:rotate(180deg)} html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-ausz-werke,.aw-ausz-werk)>summary:hover b{color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-titel{display:inline-flex;align-items:baseline;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-titel span{font-size:var(--t-14);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-werk .aw-ausz-liste{padding-bottom:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-werk .aw-weg{margin:0 0 var(--s4)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-werkliste{display:flex;flex-direction:column;margin:0 0 var(--s4);padding:0;list-style:none} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-werkliste li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);padding:var(--s2) 0;border-top:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-werkliste a{display:inline-flex;align-items:baseline;gap:var(--s2);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-werkliste a b{font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-werkliste a span{font-size:var(--t-14);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-werkliste small{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3)} @media (prefers-reduced-motion:reduce){ html[data-stil="kinosaal"]:not(#saal) .aw-seite :is(.aw-ausz-werke,.aw-ausz-werk)>summary svg{transition:none} } @media (max-width:1250px){ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-praegend-reihe{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-praegend-reihe{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--seite-x));padding-inline:var(--seite-x)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-praegend-reihe::-webkit-scrollbar{display:none} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-wm-regal{margin-top:var(--s7)} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-wm-werkzeuge>.segment{max-width:100%;overflow-x:auto;scrollbar-width:none} html[data-stil="kinosaal"]:not(#saal) .aw-seite .aw-ausz-preis{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name art" "wofuer jahr";row-gap:2px} } /* ---------------------------------------------------------------- Suche (Runde 4b, 17.10.2026) Gestalt aus dem Prototyp (scratchpad/a84/prototyp/suche.html, Bild scratchpad/a84/bilder/nachher/suche-pc.png; css/bausteine.css: Seitenkopf, Personenkarte, Wegmarke, Spalten) fuer das Markup aus app/suche.js, die Trefferseite #/suche. Wie die Abschnitte der Runden 3 und 4a ordnet er auch an: Kopf mit Kennzeile, Filter, die Gruppen als Regale (Personen und Titel in einer Reihe, mit "Alle N" im Raster), Sammlungen und Genres nebeneinander, Nicht im Archiv mit den Karten von TMDB, Alle Treffer im Inventar; am Handy das Feld im Mobilkopf. Jede Regel steht unter der Seite (.suche-seite) oder am Feld im Mobilkopf: regal, reihe, tk, tk-person und wegmarke tragen sonst ihre Gestalt aus den Abschnitten der Runden 2a und 2b. Der gewaehlte Treffer (Pfeile im Suchfeld) traegt den Ring des Fokus. */ html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3) var(--s5);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-kopf .text{display:flex;flex-direction:column;gap:var(--s2);flex:1 1 420px;min-width:0} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-kopf .kennzeile{margin:0;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-kopf h1{margin:0;font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-32);line-height:var(--z-32);color:var(--text);overflow-wrap:anywhere} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-kopf .satz{margin:0;max-width:var(--mass);font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-filter{margin-bottom:var(--s6)} /* Die Gruppen untereinander; Reihen in der Breite der Plakate, mit "Alle N" im Raster */ html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-gruppen{display:flex;flex-direction:column;gap:var(--s7)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-gruppen .regal{margin:0} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-gruppen .regal-kopf{margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-gruppen .reihe{--kw:var(--poster-b)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--poster-b),1fr));gap:var(--s5) var(--s4)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-raster+.satz{margin:var(--s4) 0 0;font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s6)} /* Personen: Bild oder Anfangsbuchstaben im Kreis in der Breite eines Plakats, Name und Kennzeile links darunter */ html[data-stil="kinosaal"]:not(#saal) .suche-seite .tk-person{align-items:flex-start;gap:var(--s1);padding:0;text-align:left} html[data-stil="kinosaal"]:not(#saal) .suche-seite .tk-person .rund{width:100%;height:auto;aspect-ratio:1;margin-bottom:var(--s2);font-size:var(--t-32)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .tk-person b{font-size:var(--t-16);line-height:var(--z-16)} /* Sammlungen und Reihen, Genres und Laender als Wegmarken; eine Sammlung mit ihren Anfangsbuchstaben vorn */ html[data-stil="kinosaal"]:not(#saal) .suche-seite .wegmarken{display:flex;flex-wrap:wrap;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .wegmarke{display:inline-flex;align-items:center;padding:0 var(--s3) 0 var(--s1)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .wegmarke.ohne-ini{padding-left:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .wegmarke .ini{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:var(--r-rund);background:var(--film-tief);color:var(--film);font-family:var(--kond);font-weight:var(--g-titel);font-size:11px;line-height:1} /* Nicht im Archiv: der Weg zum Anfragen als Verweis, darunter die Karten von TMDB mit Anfragen in der ganzen Breite */ html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-wunsch{margin:0 0 var(--s4);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-wunsch+.satz{margin:0 0 var(--s4);font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .verweis{color:var(--text);text-decoration:underline;text-decoration-color:var(--linie-3);text-underline-offset:.22em;text-decoration-thickness:1px} html[data-stil="kinosaal"]:not(#saal) .suche-seite .verweis:hover{text-decoration-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-extern-karte{display:flex;flex-direction:column;gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-extern-karte .bild{margin-bottom:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-extern-karte .knopf{justify-content:center;width:100%;margin-top:var(--s2)} /* Zustaende: die Saetze von heute (Sucht, Keine Treffer, antwortet nicht) ohne eigenen Rand, auch im Leerzustand Nichts gefunden */ html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-gruppen .bib-treffer-leer{padding:0;font-size:var(--t-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-fehler .chips{margin-top:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .leerzustand .bib-treffer-leer{padding:0;margin:var(--s2) 0 0} /* Der gewaehlte Treffer (Pfeile im Suchfeld, Enter oeffnet ihn) */ html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-wahl{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand);border-radius:var(--r-werk)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .tk-person.suche-wahl,html[data-stil="kinosaal"]:not(#saal) .suche-seite .wegmarke.suche-wahl{border-radius:var(--r-rund)} @media (max-width:1250px){ html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-spalten{grid-template-columns:minmax(0,1fr)} } /* Am Handy: das Feld steht im Mobilkopf (die Seite hat dann kein eigenes), der Name des Bereichs und ARCHIVE machen ihm Platz */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .mobilkopf.mit-suche .bereich,html[data-stil="kinosaal"]:not(#saal) .mobilkopf.mit-suche .marke span{display:none} html[data-stil="kinosaal"]:not(#saal) .mobilkopf .mobil-suche{flex:1 1 auto;min-width:0;min-height:40px;margin-left:var(--s1);padding:0 var(--s3)} html[data-stil="kinosaal"]:not(#saal) .mobilkopf .mobil-suche input{min-width:0;font-size:var(--t-16)} html[data-stil="kinosaal"]:not(#saal) .mobilkopf .mobil-suche svg{width:18px;height:18px;flex:none} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-kopf h1{font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--seite-x));padding-inline:var(--seite-x)} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-filter::-webkit-scrollbar{display:none} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-filter .chip{flex:none} html[data-stil="kinosaal"]:not(#saal) .suche-seite .suche-gruppen{gap:var(--s6)} } /* ---------------------------------------------------------------- Zwischenabnahme (Runde 6b, 23.10.2026): was der Gang durch die Seiten fand Bild des Prototyps neben der gebauten Seite (scratchpad/r6b/bilder/vergleich), dieselbe Datenkopie, PC 1600 und Handy 390. Nur nachgezogen, was im alten Kleid stand oder schlampig war; die Bausteine bleiben, wie sie gebaut sind (Bericht scratchpad/r6b/BERICHT.md). Raster die Raster der Plakate (Regal, Merkliste, Alle, Im Archiv, Andere Werke, Wegmarke) wie .raster im Prototyp: Mindestbreite --poster-b, Abstand 32 und 16; vorher die 152 px von heute (bei 1600 neun Spalten statt sieben) Regal die Art im Banner (Genre, Person, Sammlung ...) als Plakette auf dem Bild (regal-genre.html), vorher ein Etikett Formular der Zusatz einer Beschriftung (optional, hilft aber sehr) in derselben Zeile wie sie (bausteine.css .feld-name small) Optionsfeld ohne Kasten wie .wahl im Prototyp; die Kaesten bleiben bei Welche Fassung (.fw-zeile, player-fassung.html) Blatt am PC rechts unter der Kopfleiste mit Rand und Rundung (bausteine.css .ebene.rechts), am Handy von unten, hoechstens 86 % der Hoehe, mit runden oberen Ecken; vorher ueber die ganze Hoehe am Rand Menue Mehr je Eintrag sein Zeichen vor dem Text (app/titel.js ksMehrZeichen), Abstand 12 wie im Prototyp Handlungen am Handy schrumpft der Hauptknopf nicht unter seinen Text: passen die stillen Knoepfe nicht daneben, stehen sie darunter (Schnellansicht mit vier stillen Knoepfen, vorher abgeschnitten) Dialog der Zusatz unter dem Titel (bausteine.css .dlg-kopf p), Schliessen rechts ueber beide Zeilen, wie seit Runde 5b schon in Welche Fassung und Clip erstellen; vorher stand der Zusatz klein in der Zeile des Titels */ html[data-stil="kinosaal"]:not(#saal) .regal-raster{grid-template-columns:repeat(auto-fill,minmax(var(--poster-b),1fr));gap:var(--s6) var(--s4)} html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne .text .etikett{display:inline-flex;align-items:center;min-height:var(--hoehe-marke);margin-bottom:var(--s2);padding:0 var(--s2);border-radius:var(--r-marke);border:var(--rand-b) solid var(--linie-3);background:var(--schleier-2);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .formular label:has(>small+:is(input,textarea,select)){display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;column-gap:var(--s2);row-gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .formular label:has(>small+:is(input,textarea,select))>:is(input,textarea,select){grid-column:1/-1} html[data-stil="kinosaal"]:not(#saal) .formular label>small:has(+:is(input,textarea,select)){font-weight:var(--g-text);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .wahl-zeile:not(.fw-zeile){align-items:flex-start;gap:var(--s3);padding:var(--s1) 0;border:0;border-radius:0;background:none} html[data-stil="kinosaal"]:not(#saal) .wahl-zeile:not(.fw-zeile):has(input:checked){background:none} html[data-stil="kinosaal"]:not(#saal) .wahl-zeile:not(.fw-zeile)>input{margin-top:2px} html[data-stil="kinosaal"]:not(#saal) .schublade{top:calc(var(--kopfzeile) + var(--s2));right:var(--s5);bottom:var(--s5);width:min(600px,calc(100vw - 2 * var(--s5)));border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche)} html[data-stil="kinosaal"]:not(#saal) .schublade.breit{width:min(760px,calc(100vw - 2 * var(--s5)))} html[data-stil="kinosaal"]:not(#saal) .schublade:focus-visible{outline:none} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .dlg-kopf:has(>.klein){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--s3);row-gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .dlg-kopf:has(>.klein)>.klein{grid-column:1;grid-row:2;color:var(--text-2);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .dlg-kopf:has(>.klein)>.rechts{grid-column:2;grid-row:1/span 2;margin-left:0} html[data-stil="kinosaal"]:not(#saal) :is(.ks-titel,.ks-sa) .d-mehr-liste :is(a,button){gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) :is(.ks-titel,.ks-sa) .d-mehr-liste :is(a,button)>svg:first-child{flex:none;width:20px;height:20px;margin-left:0;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(.ks-titel,.ks-sa) .d-mehr-liste :is(a,button).gefahr>svg:first-child{color:inherit} @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .schublade{top:auto;right:0;bottom:0;left:0;width:100vw;max-height:86vh;max-height:86dvh;border-width:var(--rand-b) 0 0;border-radius:var(--r-flaeche) var(--r-flaeche) 0 0} html[data-stil="kinosaal"]:not(#saal) .schublade.breit{width:100vw} html[data-stil="kinosaal"]:not(#saal) :is(.ks-titel,.ks-sa) .saal-aktionen>.knopf.haupt{min-width:max-content} } /* ---------------------------------------------------------------- Nachlese (Runde 9, 23.10.2026): die Ergaenzungen seit dem Prototyp Was der Gang durch die Ergaenzungen fand (Bericht scratchpad/r9/BERICHT.md), dieselbe Datenkopie, PC 1600 und Handy 390. Die Ergaenzungen stehen in ihren Bausteinen; nachgezogen ist, was im Kinosaal noch die Gestalt von heute hatte: Bessere Fassungen die Funde unter Technik der Titelseite ohne die Einrueckung, die im Reiter Fassungsupgrade bis zum Text der Karte reicht (dort steht ein Plakat davor, hier nicht) Menue Mehr der Titelseite am Handy ein Blatt von unten wie die Blaetter der Schnellansicht und des Players (Runde 5a, Frage 8; Prototyp bausteine.css .ebene>.menue bis 820 px): volle Breite, oben rund, hoechstens 86 % der Hoehe, der Schleier dahinter. In der Schnellansicht bleibt es unter dem Knopf: sie ist am Handy selbst schon ein Blatt Bereichsleiste am Handy mit weicher Kante wie die Reiter (Runde 7b, Bericht Abschnitt 9): das Rollen zeigt sich an der Seite, die weiter geht; die Flaeche der Leiste bleibt (sie haftet ueber der Seite), nur die Eintraege laufen weich aus Leseprobe die Zeile der Leseprobe je Box in der Netzkarte, schleichend als Plakette in Warnung (Auftrag 120, Frage 11) Nur unter html[data-stil="kinosaal"]; klassisch bleibt Zeichen fuer Zeichen, am Fernseher gilt nie kinosaal. */ html[data-stil="kinosaal"]:not(#saal) #d-technik-fassungen .fw-funde{margin-inline-start:0} html[data-stil="kinosaal"]:not(#saal) .netzkarte .kplakette{stroke-width:1} @media (max-width:820px){ /* Der Schleier ist das Zeichen ::before des Knopfs Mehr (summary): ein Tipp darauf schliesst das Menue wie ein Tipp auf den Knopf */ html[data-stil="kinosaal"]:not(#saal) .ks-titel details.d-mehr[open]>summary::before{content:"";position:fixed;inset:0;z-index:60;background:var(--schleier-2);cursor:default} /* Die Titelseite liegt in zwei Ebenen (.rahmen, .ks-leinwand mit isolation); solange das Menue offen ist, liegen beide ueber der Kopfleiste und der Leiste unten, sonst laege das Blatt darunter */ html[data-stil="kinosaal"]:not(#saal) .rahmen:has(.ks-titel details.d-mehr[open]),html[data-stil="kinosaal"]:not(#saal) .ks-titel :is(.ks-leinwand,.dkopf):has(details.d-mehr[open]){z-index:70} html[data-stil="kinosaal"]:not(#saal) .ks-titel details.d-mehr[open]>.d-mehr-liste{position:fixed;top:auto;right:0;bottom:0;left:0;z-index:61;width:auto;min-width:0;max-width:none;max-height:86vh;overflow-y:auto;overscroll-behavior:contain;padding:var(--s2) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom,0px));border-bottom:0;border-radius:var(--r-flaeche) var(--r-flaeche) 0 0} /* Die weiche Kante: je Seite ein haftendes Stueck ueber den Eintraegen im Grund der Leiste; sein Verlauf ist so breit wie die Laengen --verlauf-l und --verlauf-r aus der Rollzeitachse der Leiste (app/app.css, rollverlauf wie bei .reiter): 0 an der Seite, an der nichts mehr kommt. Die Raender gleichen Breite (--s5), Abstand (--s4) und Rand (--rand) der Leiste am Handy aus: die Eintraege stehen, wo sie standen, die Leiste rollt so weit wie vorher. */ html[data-stil="kinosaal"]:not(#saal) .bereichsleiste::before,html[data-stil="kinosaal"]:not(#saal) .bereichsleiste::after{content:"";position:sticky;z-index:1;flex:none;align-self:stretch;width:var(--s5);pointer-events:none;animation:rollverlauf linear both;animation-timeline:scroll(nearest inline)} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste::before{left:0;margin-inline:calc(-1 * var(--rand)) calc(var(--rand) - var(--s5) - var(--s4));background:linear-gradient(90deg,var(--grund),transparent var(--verlauf-l))} html[data-stil="kinosaal"]:not(#saal) .bereichsleiste::after{right:0;margin-inline:calc(var(--rand) - var(--s5) - var(--s4)) calc(-1 * var(--rand));background:linear-gradient(270deg,var(--grund),transparent var(--verlauf-r))} } /* ---------------------------------------------------------------- Zurueck ueberall (Runde 10, 24.10.2026): an derselben Stelle auf jeder Seite Wort des Eigentuemers vom 23.10.2026 (scratchpad/a84/briefe/RUNDE-10-11-WORT.md Punkte 3, 6 und 7): jede Seite ausser der Startseite hat in jeder Breite und in jedem Zustand einen Knopf Zurueck an derselben Stelle, dem Muster der Leiste auf den Seiten unter app/werke.js: am linken Rand des Inhalts (--seite-x) und --zurueck-oben unter dem oberen Rand der Seite (16 px am PC, 8 px am Handy). #saal-zurueck die Leiste des Rahmens vor main#inhalt (app/kern.js, Block zurueck-dom) auf den Seiten ohne eigenen Knopf; darunter beginnt die Seite mit ihrem Abstand wie bisher Titelseite ihr Knopf auf der Hoehe der Werke (am PC 4 px tiefer, am Handy 4 px hoeher) und ohne den Einzug der Zahl daneben (.klein) Regal, Liste ihre Leiste um den Unterschied hoeher (sie stand unter dem ganzen Abstand der Seite), ebenso die Personenseite und die Zustaende der Werke (Geruest, Fehler); Laden und Fehler der Titelseite 4 px tiefer wie die Titelseite Kino-Modus ohne die Leiste: er hat seine eigene Leiste mit Schliessen Nur unter html[data-stil="kinosaal"]; klassisch bleibt Zeichen fuer Zeichen, am Fernseher gilt nie kinosaal. */ html[data-stil="kinosaal"]:not(#saal) .rahmen>.haupt{--zurueck-oben:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #saal-zurueck{margin:0;padding:var(--zurueck-oben) var(--seite-x) 0} html[data-stil="kinosaal"]:not(#saal) body.kino #saal-zurueck{display:none} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.detail-leiste{margin-top:var(--s1)} html[data-stil="kinosaal"]:not(#saal) :is(#inhalt,.aw-seite)>.detail-leiste:first-child{margin-top:calc(var(--zurueck-oben) - var(--seite-oben))} html[data-stil="kinosaal"]:not(#saal) #inhalt>.detail:not(.ks-titel)>.detailinhalt>.detail-leiste:first-child{margin-top:var(--s1)} @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .rahmen>.haupt{--zurueck-oben:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .ks-leinwand>.detail-leiste{margin-top:calc(-1 * var(--s1))} html[data-stil="kinosaal"]:not(#saal) #inhalt>.detail:not(.ks-titel)>.detailinhalt>.detail-leiste:first-child{margin-top:calc(-1 * var(--s1))} } /* ---------------------------------------------------------------- Knoepfe, die springen (Runde 10, 24.10.2026): Platz halten, was nachkommt Wort des Eigentuemers vom 23.10.2026 (RUNDE-10-11-WORT.md Punkte 2 und 4), gemessen mit scratchpad/r10/werkzeug/spruenge.mjs (layout-shift je Seite, Lage jedes Reiters, Umschalters und Chips vor und nach dem Klick, Hoehe der Kopfleiste beim Rollen; Tabelle im Bericht). Was die Messung fand und wie es hier haelt: Kopfleiste app/kern.js baut sie erst nach /api/ich; bis dahin haelt die Hauptflaeche ihre Hoehe frei (64 px ab 1600, darunter zwei Zeilen 97 px), sonst rutschte jede Seite beim ersten Bild um diese Hoehe nach unten Glocke, Konto stehen bis zu ihrem ersten Zeichnen verborgen und unsichtbar an ihrem Platz: Inventar und Administration rueckten sonst um 50 px nach links, wenn die Glocke kam Titelseite das Logo hat seine Hoehe, bevor es geladen ist (Kennzeile, Knoepfe und Plakat rutschten um 120 px); der Satz zum Stand ("Gesehen · heute", "Angefangen") steht am PC hinter den stillen Knoepfen, sonst sprangen Merken und Gesehen beim Klick um seine Breite (141 px; am Handy steht er wie bisher zuletzt in eigener Zeile); der Platz des Trailers hat von Anfang an die Breite des laengeren Worts ("Trailer suchen", 17,5ch), sonst rueckten die stillen Knoepfe um 174 px, sobald er kam; der Hauptknopf ebenso ("Noch einmal ansehen", 24ch), sonst rueckte alles dahinter um 85 px, wenn Gesehen ihn umschrieb (Geschmack 3) Mobilkopf die Glocke steht bis zu ihrem ersten Zeichnen unsichtbar an ihrem Platz; die Suche rueckte sonst um 52 px Inventar Statuszeile, Reiter und Werkzeuge halten ihre Hoehe, bevor die Antwort da ist; der Kopf hat die Breite der Zahl ("1.076 Titel · 58,4 TB"), bevor sie da ist, sonst rueckte Exportieren um 170 px Betrieb der Kopf haelt die Zeile des Befunds, bevor er gezeichnet ist (die Reiter rutschten um 114 px), und bis zum ersten Zeichnen die Hoehe, die er auf diesem Geraet zuletzt hatte (app/betrieb.js, localStorage mx.betrieb.kopf) Trailer der leere Platz des Trailers steht schon da (17,5ch, Hoehe eines Knopfs); app/app.css blendet ihn leer aus Rollbalken scrollbar-gutter: stable: wird eine Seite laenger als das Fenster, ruckt die Seite nicht um die Breite des Rollbalkens Nur unter html[data-stil="kinosaal"]; klassisch bleibt Zeichen fuer Zeichen, am Fernseher gilt nie kinosaal. */ html[data-stil="kinosaal"]:not(#saal){scrollbar-gutter:stable} @media (min-width:821px){ html[data-stil="kinosaal"]:not(#saal) .rahmen:not(:has(>.kopfleiste))::before{content:"";display:block;height:97px} } @media (min-width:1600px){ html[data-stil="kinosaal"]:not(#saal) .rahmen:not(:has(>.kopfleiste))::before{height:64px} } html[data-stil="kinosaal"]:not(#saal) .kopfleiste :is(.kopf-glocke,.kopf-konto)[hidden]{display:grid!important;visibility:hidden;width:var(--ziel-min);height:var(--ziel-min);padding:0;border:0} html[data-stil="kinosaal"]:not(#saal) .mobilkopf .glocke[hidden]{display:grid!important;visibility:hidden} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-titel .dlogo{height:120px} @media (min-width:821px){ html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>#d-sichtsatz{order:1} } html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.knopf.haupt{flex-basis:24ch} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.d-trailer{min-width:17.5ch} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.d-trailer:empty{display:inline-flex;min-height:var(--hoehe)} html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-aktionen>.d-trailer>.knopf{flex:1 1 auto} html[data-stil="kinosaal"]:not(#saal) #inv-kopf{min-width:9em} html[data-stil="kinosaal"]:not(#saal) #inv-status:empty{min-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) #inv-reiter:empty{min-height:var(--ziel-min)} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge:empty{min-height:var(--hoehe-k)} html[data-stil="kinosaal"]:not(#saal) #b-kopf:empty{min-height:var(--z-32)} @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .ks-titel .saal-titel .dlogo{height:96px} } /* ---------------------------------------------------------------- Listen und Regale im Kleid der Werke (Runde 10, Wort des Eigentuemers vom 24.10.2026, 12:30): die Seiten hinter "Alle" und die Regale (app/bibliothek.js regalRender: Liste, Aehnlich, Sammlung, Person, Studio, Genre, Land, Jahrzehnt) tragen den Kopf der Seiten unter app/werke.js statt der Buehne aus drei Querbildern: Etikett klein, Titel in der Kondensierten, darunter die Kennzeile (Zahl der Titel, gesehen, Bereiche), der Satz der Liste und die Beschreibung einer Reihe als Lesetext; die Werkzeuge kompakt wie die Werkzeuge der Wegmarke (Auswahl 36, Luecke 12). Nur diese Datei: das Markup bleibt, klassisch Zeichen fuer Zeichen, jede Kennung an ihrer Stelle; am Fernseher gilt nie kinosaal. */ html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne{min-height:0;display:block;margin:0 0 var(--s6);border-radius:0;background:none;overflow:visible;isolation:auto} html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne::after{content:none} html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne .mosaik{display:none} html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne .text{padding:0;align-items:center;gap:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne .text .etikett{display:block;min-height:0;margin:0 0 var(--s2);padding:0;border:0;border-radius:0;background:none;font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);letter-spacing:0;text-transform:none;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne .text h1{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-46);line-height:var(--z-46);letter-spacing:-.01em;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne .statuszeile{gap:0;margin-top:var(--s2)!important;font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne .statuszeile>b{font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne .statuszeile>:is([data-inv~="bibliothek.regal.buehne.gesehen"],[data-inv~="bibliothek.regal.buehne.bereiche"])::before{content:"\00b7";margin:0 var(--s2);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne .statuszeile>[data-inv~="bibliothek.regal.buehne.grund"]{order:1;flex-basis:100%;margin-top:var(--s3);max-width:var(--mass);font-size:var(--t-18);line-height:var(--z-18);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne [data-inv~="bibliothek.regal.buehne.beschreibung"]{margin-top:var(--s3)!important;max-width:var(--mass)!important;font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .regal-werkzeuge{gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .regal-werkzeuge .auswahl-huelle>.klein{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .regal-werkzeuge select.auswahl{min-height:var(--hoehe-k);height:var(--hoehe-k);padding-block:0;font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) .regal-werkzeuge [data-regal-richtung]{width:var(--hoehe-k);height:var(--hoehe-k);min-height:var(--hoehe-k)} @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .mosaik-buehne .text h1{font-size:var(--t-36);line-height:var(--z-36)} } /* ---------------------------------------------------------------- Abnahme (Runde 11, 29.10.2026): was der Gang durch die ganze App fand Nur unter dem Stil Kinosaal, nur das Kleid: Markup, Kennungen und klassisch bleiben Zeichen fuer Zeichen, am Fernseher gilt nie kinosaal. Plaketten der Auszeichnungen (Wort des Eigentuemers vom 28.10.2026): die Reihen "Mehrfach mit dem Oscar ausgezeichnet" und "Oscar fuer die beste Hauptrolle" (app/bibliothek.js auszPlakette) trugen die helle Schrift jeder Plakette auf dem goldenen Grund aus app/app.css (1,02 : 1). Jetzt das Gold der Kennzeile (Metall aus Auftrag 116, dunkle Schrift, auf der dunkelsten Stelle 6,8 : 1). */ html[data-stil="kinosaal"]:not(#saal) .tk .plaketten>span.ausz-plakette{border-color:var(--metall-gold-rand);background:var(--metall-gold);color:var(--metall-schrift)} /* Kontomenue (Runde 3 gab Zeichen und Gruppenname an Runde 7b, dort blieb es liegen): Eintraege wie .menue a im Prototyp (44 hoch, Text 16 in der Schrift des Lesens, Zeichen 20 in Text 3), Zahl und Taste rechts in Text 3; der Name der Gruppe kommt aus app/kern.js (Block kontomenue-saal) und traegt das Etikett des Menues. Das Blatt Mehr am Handy bleibt, wie es ist. */ html[data-stil="kinosaal"]:not(#saal) .konto-menue:not(.mehr-blatt) .knopf.leise[role="menuitem"]{gap:var(--s3);min-height:var(--hoehe);font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-text)} html[data-stil="kinosaal"]:not(#saal) .konto-menue .ks-km-zeichen{display:inline-flex;flex:none;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .konto-menue .ks-km-zeichen svg{width:20px;height:20px} html[data-stil="kinosaal"]:not(#saal) .konto-menue:not(.mehr-blatt) .knopf.leise[role="menuitem"]>:is(.leise,kbd){margin-left:auto;color:var(--text-3);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-text)} /* Kopf der Bibliothek am Handy: Kino, Neu mischen und Anpassen rechts neben dem Gruss wie im Prototyp (bibliothek.html, 390); app/app.css gibt der Gruppe dort die ganze Breite fuer das Suchfeld des klassischen Stils, im Kinosaal steht das Suchfeld in der Kopfleiste. */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .bib-kopf{flex-wrap:nowrap;align-items:flex-start} html[data-stil="kinosaal"]:not(#saal) .bib-kopf>div:first-child{flex:1 1 0} html[data-stil="kinosaal"]:not(#saal) .bib-kopf>.kopf-rechts{width:auto;flex:none} html[data-stil="kinosaal"]:not(#saal) .bib-kopf>.zs-bib-spalte,html[data-stil="kinosaal"]:not(#saal) .zs-bib-spalte>.kopf-rechts{width:auto;flex:none} /* UI-1 */ } /* UI-2 (07.11.2026, Wort des Eigentuemers: "fuer die Bibliothek ist die ganze Flaeche oben voellig verschoben", "oben kann man die Settings fuer die Bibliothek gar nicht einstellen, die Knoepfe sind nicht da"). Kopf der Bibliothek am Handy in EINER Spalte: der Gruss in voller Breite, darunter die Zeile (nie Wort fuer Wort), darunter die Spalte aus UI-1 (.zs-bib-spalte) als EINE Reihe (Nachtrag 03:1x): "Gemeinsam schauen" als erste Zelle links, dann Kino, ???, Berater, Mischen, Anpassen, alle als Raster gleich breiter Zellen, je Zeichen mit der Beschriftung darunter (nie abgeschnitten, jede Zelle mindestens 44 hoch). Die Reiter reichen bis an den Rand und laufen dort mit sichtbarem Anschnitt aus (sie rollen seitlich wie bisher). Vorher stand der Kopf nebeneinander (nowrap): die Spalte nahm sich ihre Breite, der Gruss brach Wort fuer Wort, und bei groesserer Schrift des Telefons lag die Reihe rechts ausserhalb. */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf>div:first-child{flex:none;width:100%;min-width:0} html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf>.zs-bib-spalte{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:var(--s2);flex:none;width:100%;margin-left:0} html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf .kopf-rechts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s2);width:100%;flex:none;margin-left:0} html[data-stil="kinosaal"]:not(#saal) #inhalt .zs-bib-spalte>:is(.zs-bib,.kopf-rechts){display:contents} html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf .kopf-rechts>[hidden],html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf .kopf-rechts>.bib-modi>[hidden]{display:none} html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf :is(.kopf-rechts,.zs-bib) :is(.knopf,.ik){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);width:auto;min-width:0;min-height:56px;height:auto;padding:var(--s2) var(--s1);border-radius:var(--r-flaeche);font-size:var(--t-13);line-height:var(--z-13);text-align:center} html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf :is(.kopf-rechts,.zs-bib) :is(.knopf,.ik)>span:not(.ue-fragen){display:block;max-width:100%;text-wrap-mode:wrap;overflow-wrap:anywhere} html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf :is(.kopf-rechts,.zs-bib) :is(.knopf,.ik) svg{width:20px;height:20px} html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf .kopf-rechts .knopf>.punkt{position:absolute;top:6px;right:calc(50% - 16px)} html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf .kopf-rechts .knopf[data-anpassen]{position:relative} html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf .kopf-rechts .ik[data-neu-mischen]::after{content:"Mischen";display:block} html[data-stil="kinosaal"]:not(#saal) #inhalt .bib-kopf .kopf-rechts .ik:not(:hover):not(:focus-visible){border-color:transparent;background:none} html[data-stil="kinosaal"]:not(#saal) #inhalt #bib-reiter{margin-inline:calc(-1 * var(--seitenrand));padding-inline:var(--seitenrand);scroll-padding-inline:var(--seitenrand); -webkit-mask-image:linear-gradient(90deg,var(--grund) calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,var(--grund) calc(100% - 40px),transparent)} html[data-stil="kinosaal"]:not(#saal) #inhalt #bib-reiter>a{flex:none} } /* UI-2, Pruefung aller Hauptflaechen bei 390 und 412 px: Tippflaechen unter 44 px am Handy auf die Mindestgroesse (--ziel-min): Umschalter (Filter der Automatiken und Wiedergaben, Zielbox der Downloads, Ansicht des Inventars, Anpassen, Kurz und Gruendlich des Beraters, 36 bis 40 hoch), der Knopf Netz in den Reitern des Betriebs (34 breit), der Haken gesehen je Folge (28, jetzt 44 bei gleichem Platz in der Zeile) und der Musikknopf der Startseite (40). */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) :is(.segment,.umschalter):not(:is(.st,.player) *) :is(button,a){min-width:var(--ziel-min);min-height:var(--ziel-min)} /* 07.11.2026 (Bild des Eigentuemers 13:44, Betrieb am Handy): min-width allein liess die Reiter-Knoepfe unter ihre Textbreite schrumpfen (vorher min-width auto = Inhalt), die Beschriftungen lagen uebereinander. flex:none haelt die Inhaltsbreite, die Zeile rollt wie zuvor. */ html[data-stil="kinosaal"]:not(#saal) .reiter>button{flex:none;min-width:var(--ziel-min)} html[data-stil="kinosaal"]:not(#saal) .sichtknopf{width:var(--ziel-min);height:var(--ziel-min);margin:calc(-1 * var(--s4)) calc(-1 * var(--s4)) calc(-1 * var(--s4)) calc(-1 * var(--s1))} html[data-stil="kinosaal"]:not(#saal) .st .st-musik-knopf{width:var(--ziel-min);height:var(--ziel-min)} } /* Dialoge am Handy als Blatt von unten wie im Prototyp (bausteine.css: .ebene>.dlg bis 820 px volle Breite, oben rund, hoechstens 86 % der Hoehe); gebaut standen sie mittig mit Rand. Der Dialog Anpassen des Kino-Modus bleibt (ganze Hoehe). Und das Anpassen der Bibliothek: ein Umschalter, der breiter ist als die Flaeche, rollt seitlich wie die Umschalter der Werke und des Betriebs. */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) dialog.dlg:not(.kino-anpassen){width:100vw;max-width:100vw;max-height:86vh;max-height:86dvh;margin:auto 0 0;border-width:var(--rand-b) 0 0;border-radius:var(--r-flaeche) var(--r-flaeche) 0 0} html[data-stil="kinosaal"]:not(#saal) :is(#bib-anpassen,dialog.dlg.kino-anpassen) .segment{max-width:100%;overflow-x:auto;scrollbar-width:none} html[data-stil="kinosaal"]:not(#saal) :is(#bib-anpassen,dialog.dlg.kino-anpassen) .segment>:is(button,a){flex:none} } /* UI-3 (07.11.2026, Marke 13.208): Player und Gemeinsam schauen am Handy, im Player selbst geprueft (Aufbau in app/app.css Block ui3-handy). Hier nur, was das Kleid des Players dort anders setzt: ein Hinweis mit Knopf ("Andere Toene auf diesem Geraet sind stumm." mit "Ton teilen") bricht in zwei Zeilen und ist dann eine Flaeche mit Radius 14 statt eines Ovals; die Knoepfe mit Wort quer nur als Zeichen (44 rund) und hochkant mittig, "Jetzt starten" hochkant mit seinem Wort in der ersten Reihe. */ html[data-stil="kinosaal"]:not(#saal) .player .pl-hinweis:has(.knopf){border-radius:var(--r-flaeche)} @media (max-width:640px) and (orientation:portrait){ html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf.text{justify-content:center} html[data-stil="kinosaal"]:not(#saal) .player .pl-tasten>#pl-raum-start{width:auto;padding:0 var(--s4)} } @media (max-height:520px) and (orientation:landscape) and (pointer:coarse){ html[data-stil="kinosaal"]:not(#saal) .player .pl-knopf.text{width:var(--hoehe);padding:0;justify-content:center} } /* ---------------------------------------------------------------- Betrieb (Runde 7b, 23.10.2026): Kopf als Befund, Datenstrom, alle Reiter und Remux Prototyp scratchpad/a84/prototyp/betrieb*.html (css/seiten.css, Teil 40-betrieb) im Aufbau von heute (app/betrieb.js, app/remux.js, app/tonspuren.js; seit dem Prototyp dazu Remux, drei Boxen und Worker, Stufen, Auslastung, Downloads, Netzkarte mit Verkehr, Vorrang): Kopf der Satz in der Kondensierten 32, die Zahl in Text 3; darunter die Hinweise als Karten (Baustein Hinweis kompakt: eine Zeile Titel, eine Zeile Satz, in der Farbe ihrer Stufe), am PC drei nebeneinander, die Knoepfe "+ n weitere" und "n ausgeblendet" rechts daneben; aufgeklappt eine Liste in einem Kasten Band die Werte rechts in Sans 13 mit gleich breiten Ziffern, die Zahlen halbfett in Licht Etiketten die Unterteile (Einsortierung, Zuletzt, Neu in Plex, Dienste ...) in Sans 13 halbfett in Text 3 statt Mono in Versalien, mit der Linie davor wie im Prototyp Schrift Zeiten, Daten, Akteure, Einzelheiten und Zahlen der Tabellen in Sans mit gleich breiten Ziffern; Mono bleibt fuer Pfade, Releases, Kennungen, Adressen und die Werte der Netzkarte und der Wege Kacheln die Summen der Datenstroeme als freie Kennzahlen ohne Kaesten, die Netzkarte der Uebersicht bis 520 hoch (Auftrag 115, offene Frage 3), die Teilzeilen der Automatiken in der Schrift der Zeilen (app/app.css .teil gab ihnen Mono in Versalien) Am Handy (bis 820) ein eigener Gang je Reiter (Wort des Eigentuemers vom 23.10.2026, 13:20: "Vor allem am Handy hat Betrieb sehr gelitten durch viele Additionen"): einspaltig, Kacheln untereinander in voller Breite, Tabellen gestapelt (stapel, data-spalte) mit dem Spaltennamen in Sans, Zahlen brechen nicht um, die Netzkarte skaliert in die Breite (Pinch vergroessert, die Zahlen stehen darunter als Liste der Datenstroeme), Zeilen der Automatiken und Wiedergaben in zwei Zeilen statt in schmalen Spalten; seitlich rollen nur die Reiter, die Segmente und die Matrix des Speichers, bewusst und mit weicher Kante. Jede Regel steht unter html[data-stil="kinosaal"]:not(#saal) und an einer Klasse oder Kennung des Betriebs: .b-kopf, .b-reiterzeile, #b-inhalt (alle Reiter und Remux zeichnen dort hinein), #band (das Band des Betriebs). */ /* Kopf als Befund: Satz, dann die Hinweise als Karten */ html[data-stil="kinosaal"]:not(#saal) .b-kopf{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:var(--s4);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .b-kopf h1{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:0;text-wrap:balance} html[data-stil="kinosaal"]:not(#saal) .b-kopf h1 span{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise{max-width:none;width:100%;margin-left:0;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise:not(.liste) .hinweise-gruppe{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);min-width:0} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise-knoepfe{flex:none;gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille{max-width:none;min-width:0;min-height:56px;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s3);border-radius:var(--r-flaeche);border:var(--rand-b) solid var(--linie-2);background:var(--flaeche-2);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille:has(>i[style*="krit"]){border-color:var(--fehler-rand);background:var(--fehler-tief)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille:has(>i[style*="warn"]){border-color:var(--warnung-rand);background:var(--warnung-tief)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille>i{align-self:center} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille a{flex:1 1 auto;color:var(--text);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille a:hover{color:var(--text);text-decoration:underline;text-decoration-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille a small{display:block;overflow:hidden;text-overflow:ellipsis;font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-text);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille button{width:var(--ziel-min);height:var(--ziel-min);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille button svg{width:16px;height:16px} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille.aus{background:none} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise.liste{flex-direction:column;align-items:stretch;border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche);background:var(--grund);gap:0} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise.liste .pille{min-height:var(--zeile);border:0;border-top:var(--rand-b) solid var(--linie);border-radius:0;background:none} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise.liste .pille:first-child{border-top:0} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise.liste .pille a{display:flex;align-items:baseline;gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise.liste .pille a small{flex:1 1 auto;min-width:0} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise.liste>.hinweise-knoepfe{padding:var(--s1) var(--s2);border-top-color:var(--linie-2)} /* Datenstrom: die Werte rechts im Band */ html[data-stil="kinosaal"]:not(#saal) #band .band-werte{gap:var(--s4);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3);font-variant-numeric:tabular-nums lining-nums} html[data-stil="kinosaal"]:not(#saal) #band .band-werte b{font-weight:var(--g-halb);color:var(--text)} /* Reiterzeile: Anpassen klein und still rechts daneben */ html[data-stil="kinosaal"]:not(#saal) .b-reiterzeile{border-bottom-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .b-reiterzeile>.reiter-anpassen{align-self:center} /* Etiketten der Unterteile, Gruppen und Tage: Sans 13 halbfett in Text 3, mit der Linie davor */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .unterteil{margin:var(--s3) 0 var(--s1);padding-top:var(--s3);border-top:var(--rand-b) solid var(--linie-2);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);letter-spacing:0;text-transform:none;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .unterteil::after{content:none} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.protokoll .tag,.melde-verlauf .tag,.wg-tag){font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);letter-spacing:0;text-transform:none;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .protokoll .tag{background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .wg-tag{border-bottom-color:var(--linie-2)} /* Schrift: Zeiten, Daten, Meta-Zeilen und Einzelheiten in Sans mit gleich breiten Ziffern (Mono bleibt fuer Pfade und Releases) */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.tagfeed time,.ereignis time,.wg-wann,.p-verlauf .z,.p-verlauf .d,.stufe .nr,.wg-achse span,.mw-tage-namen small){font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);letter-spacing:0;color:var(--text-3);font-variant-numeric:tabular-nums lining-nums} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.posten .m,.tagfeed .f small,.rechnerzeile small,.ereignis .details,.platte .name small){font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);letter-spacing:0;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .akteur{font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.plattenzeile .wert,.platte .fuell,.zeilen .zeile>span:last-child){font-family:var(--sans);font-size:var(--t-13);font-variant-numeric:tabular-nums lining-nums} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.k-meta,.p-zeile){font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.k-schritte,.p-stufen) li{font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .wg-titel small,html[data-stil="kinosaal"]:not(#saal) #b-inhalt .wg-was small:first-of-type,html[data-stil="kinosaal"]:not(#saal) #b-inhalt .wg-kurz-alt a small{font-family:var(--sans);font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .wg-quelle{min-height:var(--hoehe-marke);display:inline-flex;align-items:center;padding:0 var(--s2);border-radius:var(--r-marke);border-color:var(--linie-3);font-size:var(--t-13);font-weight:var(--g-halb);letter-spacing:0;text-transform:none} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .wg-mal{min-height:var(--hoehe-marke);display:inline-flex;align-items:center;vertical-align:middle;padding:0 var(--s2);border-radius:var(--r-marke);border-color:var(--linie-3);font-family:var(--sans);font-size:var(--t-13);font-weight:var(--g-halb);font-variant-numeric:tabular-nums lining-nums} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .vr-stufe b{font-family:var(--sans);font-size:var(--t-14);font-weight:var(--g-halb);letter-spacing:0;text-transform:none} /* Tabellen: Zahlen in Sans 14 mit gleich breiten Ziffern, rechtsbuendig; Mono nur in Spalten ohne Zahlen (Laufwerk, Worker, Fassung) */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle td.m.r{font-family:var(--sans);font-size:var(--t-14);line-height:var(--z-14);font-variant-numeric:tabular-nums lining-nums} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle td.m:is([data-spalte="Umwandeln bis"],[data-spalte="Zuletzt gemeldet"]){font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums} /* Worker: Grenzen und Zeitpunkt sind keine Pfade */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle td :is(.leise,small){font-family:var(--sans);font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle th small{font-size:var(--t-13);font-weight:var(--g-text)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle td.leer{color:var(--text-4)} /* Automatiken: die Teilzeilen in der Schrift der Zeilen, eingerueckt; Gruppen als Aufklapper */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-zeile.teil{font-family:var(--sans);font-size:var(--t-16);letter-spacing:0;text-transform:none;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-zeile.teil .am-name{padding-left:var(--einzug)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-zeile.teil .am-name b{font-weight:var(--g-mittel);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.am-zeit,.am-schalter){font-size:var(--t-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-zeit i{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-liste{border-color:var(--linie-2);border-radius:var(--r-flaeche)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-zeile{background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-auf:hover{background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-zeile.befund{box-shadow:inset 3px 0 0 var(--fehler)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-gruppe{border-top-color:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-gruppe-kopf{min-height:var(--zeile);padding:var(--s2) 0;gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-gruppe-kopf b{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-gruppe-kopf::before{content:none} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-gruppe-kopf::after{content:"";flex:none;width:8px;height:8px;margin:0 var(--s2) 0 var(--s1);border-right:1.5px solid var(--text-2);border-bottom:1.5px solid var(--text-2);transform:rotate(45deg) translateY(-2px);transition:transform var(--dauer-fokus) var(--kurve)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-gruppe-kopf[aria-expanded="true"]::after{transform:rotate(225deg)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.am-fenster,.am-abweichend){border-color:var(--linie-2);border-radius:var(--r-feld);background:var(--flaeche-2)} /* Kacheln der Uebersicht und Module: Summen als freie Kennzahlen, Netzkarte bis 520 hoch, Posten und Zeilen mit Linien */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .summen{gap:var(--s3) var(--s4);padding-bottom:var(--s3);border-radius:0;background:none;border-bottom:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .summen>div{padding:0;background:none} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .summen b{font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .cockpit.ueb .netzkarte svg{max-height:520px} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.posten,.rechnerzeile,.stroeme .strom,.tagfeed .f){border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .posten.fehler .n{color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.stufen-mini>div,.schalterreihe>div){border-color:var(--linie-2);border-radius:var(--r-feld)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .stufen-mini>div{background:var(--flaeche-2);border-color:transparent} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .schalterreihe>div>span{font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .schalterreihe small{font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.strecke,.platten,.protokoll){border-color:var(--linie-2);border-radius:var(--r-flaeche)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.k-auftrag,.p-paket){border-color:var(--linie-2);border-radius:var(--r-feld);background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.k-auftrag.zurueckgehalten,.p-paket.z-entscheidung,.p-paket.zulange){border-color:var(--warnung-rand)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.k-auftrag.fehler,.p-paket.z-haengt,.p-paket.z-fehler){border-color:var(--fehler-rand)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .zielbox-zeile{border-color:var(--linie-2);border-radius:var(--r-feld)} /* Segmente rollen bewusst seitlich mit weicher Kante (die Laengen --verlauf-l und --verlauf-r rechnet app/app.css aus der Rollzeitachse) */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .segment{max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,var(--grund) var(--verlauf-l),var(--grund) calc(100% - var(--verlauf-r)),transparent);mask-image:linear-gradient(90deg,transparent,var(--grund) var(--verlauf-l),var(--grund) calc(100% - var(--verlauf-r)),transparent);animation:rollverlauf linear both;animation-timeline:scroll(self inline)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .segment::-webkit-scrollbar{display:none} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .segment>:is(button,a){flex:none} /* bei weniger Bewegung bleibt die Rollzeitachse (app/app.css nimmt sonst jede Animation; dieselbe Ausnahme wie fuer .reiter dort) */ @media (prefers-reduced-motion:reduce){html[data-stil="kinosaal"]:not(#saal) #b-inhalt :is(.segment,.tabelle-box:has(>.tabelle:not(.stapel))){animation:rollverlauf linear both!important;animation-timeline:scroll(self inline)!important}} /* auch im Ruhemodus der App (html.ruhig nimmt in app/app.css jede Animation; die Reiter bekommen dort dieselbe Ausnahme) */ html[data-stil="kinosaal"].ruhig:not(#saal) #b-inhalt :is(.segment,.tabelle-box:has(>.tabelle:not(.stapel))){animation:rollverlauf linear both!important;animation-timeline:scroll(self inline)!important} /* Die Netzkarte in schmalen Kacheln (Uebersicht am Handy und am schmalen PC): skaliert in die Breite statt seitlich zu rollen */ @container kachel (max-width:519px){ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .netzkarte{overflow-x:visible} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .netzkarte svg{min-width:0;width:100%} } /* Bloecke der Regler an ihrem Ort (MX.regler.zeigen in app/kern.js, im Betrieb je Reiter, in der Verwaltung je Reiter): Kopf als Aufklapper (Abschnitt 8a) mit Titel in der Kondensierten, Zahl und Marken, der Pfeil rechts */ html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-block>summary.rg-kopf{flex-wrap:nowrap;align-items:center;gap:var(--s2) var(--s3);min-height:var(--zeile-k)} html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-block>summary.rg-kopf::before{content:none} html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-block>summary.rg-kopf::after{content:"";flex:none;width:8px;height:8px;margin:0 var(--s2) 0 auto;border-right:1.5px solid var(--text-2);border-bottom:1.5px solid var(--text-2);transform:rotate(45deg) translateY(-2px);transition:transform var(--dauer-fokus) var(--kurve)} html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-block[open]>summary.rg-kopf::after{transform:rotate(225deg)} html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-block>summary.rg-kopf h2{flex:0 1 auto;font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-block>summary.rg-kopf .klein{flex:none;text-wrap:nowrap;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-block>summary.rg-kopf .status{flex:none} html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-unter{font-family:var(--sans);font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-halb);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-geplant>summary{font-size:var(--t-13);color:var(--text-3)} /* Game Server (Runde GS, 29.10.2026; app/betrieb.js Block spiele, Grundlage in app/app.css Block gs-server): die Spieler als Kennzahl in der Kondensierten 32, die Etiketten der Zeilen in Text 3, Adresse und Passwoerter in Mono 13 */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .gs-server .gs-spieler b{font-size:var(--t-32);line-height:var(--z-32)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .gs-server .gs-spieler small{font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .gs-server .gs-zeilen .zeile>span:first-child{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .gs-server .gs-wert .mono{font-family:var(--mono);font-size:var(--t-13)} /* ---- Handy: ein eigener Gang je Reiter */ @media (max-width:820px){ /* Kopf: der Satz, darunter die Hinweise untereinander in voller Breite, die Knoepfe darunter */ html[data-stil="kinosaal"]:not(#saal) .b-kopf{gap:var(--s3);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise{flex-direction:column;align-items:stretch;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise:not(.liste) .hinweise-gruppe{grid-template-columns:minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille{align-items:flex-start;min-height:0} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille>i{align-self:flex-start;margin-top:calc((var(--z-14) - 8px) / 2)} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille a small{text-wrap:wrap} html[data-stil="kinosaal"]:not(#saal) .b-kopf .pille button{margin:calc(-1 * var(--s2)) calc(-1 * var(--s1)) 0 0} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise-knoepfe{align-self:flex-start} html[data-stil="kinosaal"]:not(#saal) .b-kopf .hinweise.liste .pille a{display:block} /* Bloecke der Regler: der Titel ueber die Breite mit dem Pfeil rechts, Zahl und Marken darunter */ html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-block>summary.rg-kopf{flex-wrap:wrap} html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-block>summary.rg-kopf h2{flex:1 1 0} html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-block>summary.rg-kopf::after{order:1} html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-block>summary.rg-kopf .klein{order:2;flex-basis:100%;text-wrap:wrap} html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-block>summary.rg-kopf .status{order:3} /* Einstellungszeilen: der Wert links unter dem Satz, Standard und Aendern rechts daneben (rechts gequetscht brach ein langer Wert dreizeilig) */ html[data-stil="kinosaal"]:not(#saal) :is(#b-inhalt,.verwaltung) .rg-zeile .rg-wert{align-items:flex-start;text-align:left} /* Band: nur die Zahl der Downloads, kleiner Abstand */ html[data-stil="kinosaal"]:not(#saal) #band .band-werte{gap:var(--s2)} /* Tabellen gestapelt: der Spaltenname in Sans 13 halbfett, 40 % breit; Zahlen brechen nicht um */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle.stapel td[data-spalte]{padding-left:calc(40% + var(--s3))} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle.stapel td::before{width:40%;font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-14);font-weight:var(--g-halb);letter-spacing:0;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle.stapel td.r{text-align:left} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle.stapel td.m:not(.r){font-size:12px} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle.stapel td.m:is([data-spalte="Umwandeln bis"],[data-spalte="Zuletzt gemeldet"]){font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle:not(.stapel) :is(td,th){padding-inline:var(--s1)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle:not(.stapel) :is(td,th):first-child{padding-left:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle:not(.stapel) :is(td,th):last-child{padding-right:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle:not(.stapel) td.r{text-wrap:nowrap;overflow-wrap:normal} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle:not(.stapel) :is(td:not(.r),th){overflow-wrap:break-word;hyphens:auto} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle:not(.stapel) th{text-wrap:wrap} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle:not(.stapel):not(.matrix) td:not(.r){text-wrap:wrap} /* Textspalten brechen um, damit die Tabelle in die Breite passt; Zahlen bleiben in einer Zeile */ /* Segmente brechen am Handy um, statt zu rollen: jede Wahl bleibt sichtbar (Zielbox, Filter der Automatiken, Zeitraum und Routen der Messwerte) */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .segment{flex-wrap:wrap;overflow-x:visible;border-radius:var(--r-flaeche);-webkit-mask-image:none;mask-image:none} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .modul-kopf:has(.segment) .rechts{flex:1 1 100%;margin-left:0} /* Baender der Einsortierung und der Pipeline: zwei oder drei Stufen je Zeile */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .k-schritte:not(.p-stufen){grid-template-columns:repeat(2,minmax(0,1fr))} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .p-stufen{grid-template-columns:repeat(3,minmax(0,1fr))} /* Rollende Tabellen (die Matrix des Speichers, die Groessen unter Messwerte; Werte mit Einheit brechen nicht um): weiche Kante rechts, solange noch etwas kommt */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle-box:has(>.tabelle:not(.stapel)){-webkit-mask-image:linear-gradient(90deg,var(--grund) calc(100% - var(--verlauf-r)),transparent);mask-image:linear-gradient(90deg,var(--grund) calc(100% - var(--verlauf-r)),transparent);animation:rollverlauf linear both;animation-timeline:scroll(self inline)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .tabelle.matrix :is(th,td):first-child{background:var(--grund)} /* Automatiken: eine Zeile je Automatik in zwei Zeilen (Name und Stand oben, zuletzt, naechster und Schalter darunter); Zum Schalter darunter */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-kopfzeile{flex-wrap:wrap;align-items:center} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-auf{flex:1 1 0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s3);row-gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-auf .am-name{flex:1 1 60%;min-width:0} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-auf .status{flex:none;margin-left:auto;align-self:flex-start} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-auf :is(.am-zeit,.am-schalter){flex:none;min-width:0;overflow-wrap:normal} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-zeile.teil .am-name{padding-left:var(--s3)} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .am-schalten:has(>:is(a,.knopf)){flex:1 0 100%;padding:0 var(--s3) var(--s2)} /* Wiedergaben im Verlauf: der Titel ueber die ganze Breite, darunter Geraet und Quelle */ html[data-stil="kinosaal"]:not(#saal) #b-inhalt .wg-eintrag{grid-template-columns:44px minmax(0,1fr) auto} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .wg-eintrag>.wg-was{grid-column:2 / -1;grid-row:1} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .wg-eintrag>.wg-wer{grid-column:2;grid-row:2} html[data-stil="kinosaal"]:not(#saal) #b-inhalt .wg-eintrag>.wg-quelle{grid-column:3;grid-row:2;align-self:start} } /* ---------------------------------------------------------------- Verwaltung (Runde 7b, 23.10.2026): 14 Reiter mit ihren Unterreitern, die Seite eines Kontos Prototyp scratchpad/a84/prototyp/verwaltung*.html (css/seiten.css, Teil 50-verwaltung) im Aufbau von heute (app/verwaltung.js; seit dem Prototyp dazu Downloads, die Ankuendigung unter Inhalte, Mods unter Zugaenge): Kopf Titel in der Kondensierten 32, der Satz 16 in Text 2; die Reiter in einer Zeile mit dem Strich in Licht (Geschmack 3), am Handy als Leiste zum Wischen mit weicher Kante (app/app.css) Abschnitte jeder Abschnitt eines Reiters (.vw-abschnitt) als Modul: Rand, Radius 14, Innenabstand 24; sein Kopf in der Kondensierten 18, der Zusatz in Text 3; Formulare darin hoechstens 760 breit, die Paare (Stand, Absender ...) mit dem Etikett in Text 3 Tabellen Zeiten und Daten in Sans mit gleich breiten Ziffern; Mono bleibt fuer Adresse, Client und Ziel; in den Tabellen der Startseite steht die Beschriftung der Felder nur fuer Vorleser (der Spaltenkopf sagt dasselbe), die Staende in Sans 13 Einstellungen die Gruppen als Aufklapper (Abschnitt 8a) in einem Rahmen: eine Zeile je Gruppe mit Name, Zahl und Marken, der Pfeil rechts; der Kurator als eigener Kasten darunter; die Einstellungszeile wie in kinosaal.css (Runde 2a) Anfragen das eingebettete Entscheiden (#vw-anfragen) im Kleid der Seite Anfragen (Runde 7a: Liste mit Plakat 64, Titel 18, Handlungen rechts in der kleinen Hoehe), dort haengt es an .anfragen Am Handy dasselbe Mass wie im Betrieb: einspaltig, Tabellen gestapelt mit dem Spaltennamen in Sans, Segmente brechen um, nichts rollt seitlich ausser der Reiterzeile und der Rechtematrix. Jede Regel steht unter html[data-stil="kinosaal"]:not(#saal) und an .verwaltung. */ /* Kopf und Reiter */ html[data-stil="kinosaal"]:not(#saal) .verwaltung>.kopf{margin-top:var(--s5);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .verwaltung>.kopf h1{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .verwaltung>.kopf .unterzeile{margin-top:var(--s2);max-width:78ch;font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-reiter{margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-reiter a span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:var(--s1);padding:0 6px;border-radius:var(--r-rund);background:var(--licht);color:var(--grund);font-size:var(--t-13);line-height:20px;font-weight:var(--g-halb)} /* Abschnitte als Module, ihr Kopf in der Kondensierten 18 */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt{margin-bottom:var(--s4);padding:var(--s5);border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche);background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt.vw-regler{padding:var(--s3) var(--s5)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt.vw-regler[hidden]{display:none} html[data-stil="kinosaal"]:not(#saal) .verwaltung :is(.vw-abschnitt>h2,.vw-abschnitt>.konto-leiste h2,.vw-abschnitt>div>.konto-leiste h2){margin-bottom:var(--s3);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);letter-spacing:0;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt :is(h2,h3) .leise{color:var(--text-3);font-weight:var(--g-kopf)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt>.konto-leiste{margin-bottom:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt>.konto-leiste h2{margin-bottom:0} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt h3.vw-unter{margin:var(--s4) 0 var(--s2);padding-top:var(--s4);border-top:var(--rand-b) solid var(--linie);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt>p.klein{max-width:110ch;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt>.konto-leiste .knopf:not(.klein){min-height:var(--hoehe-k);padding:0 var(--s4);font-size:var(--t-14);line-height:var(--z-14)} /* Kein Kasten fuer die Startseite (ihre Unterreiter tragen eigene Bloecke) und die zwei Teile der Einstellungen (wie im Prototyp: Kopf 24, darunter der Kasten der Abweichungen und der Rahmen der Gruppen) */ html[data-stil="kinosaal"]:not(#saal) .verwaltung :is(#vw-start,#rg-abweichend,.vw-abschnitt:has(>#rg-liste)){padding:0;border:0;border-radius:0;background:none} html[data-stil="kinosaal"]:not(#saal) .verwaltung :is(#rg-abweichend>h2,.vw-abschnitt:has(>#rg-liste)>.konto-leiste h2){font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt+:is(#rg-abweichend,.vw-abschnitt:has(>#rg-liste)){margin-top:var(--s6)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt .formular{max-width:760px} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt .tabelle-box:last-child{margin-bottom:0} /* Paare: Etikett links in Text 3, Wert daneben, Linien dazwischen (Baustein Werte) */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-paar{grid-template-columns:160px minmax(0,1fr);padding:var(--s2) 0;border-bottom-color:var(--linie);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-paar>span:first-child{font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-paar b{font-weight:var(--g-halb)} /* Leisten ueber den Tabellen: Suche links, Handlungen rechts */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-leiste{align-items:flex-end;margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-leiste>.klein{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-verweise{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-inhalt>p.klein{font-size:var(--t-13);color:var(--text-3)} /* Tabellen: Zeiten und Daten in Sans mit gleich breiten Ziffern, Mono nur fuer Adresse, Client und Ziel */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .tabelle td.m:not([data-spalte="Adresse"]):not([data-spalte="Client"]):not([data-spalte="Ziel"]){font-family:var(--sans);font-size:var(--t-14);line-height:var(--z-14);font-variant-numeric:tabular-nums lining-nums} html[data-stil="kinosaal"]:not(#saal) .verwaltung .tabelle td .leise{font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .tabelle td .mono{font-size:var(--t-13)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .tabelle tr.leise td{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-aktion{font-size:var(--t-13)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-meta{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-meta i{font-family:var(--sans);font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-aktionen .knopf{margin-left:var(--s1)} /* Module der Verwaltung (Seite eines Kontos, Downloads, Kommentare): Kopf 18 in der Kondensierten, weitere Koepfe darin 16 mit Linie davor; Handlungen der Gefahr (Sperren, Loeschen, Beenden, Widerrufen) mit ihrem Rand wie im Prototyp */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .modul>h2,html[data-stil="kinosaal"]:not(#saal) .verwaltung .modul>.konto-leiste h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-konto-raster .modul>h2:not(:first-child){padding-top:var(--s3);border-top:var(--rand-b) solid var(--linie);font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .modul>h2 .leise{font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-14);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .knopf.leise.gefahr{border-color:var(--fehler-rand)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .knopf.leise.gefahr:hover{border-color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-konto-kopf .knopf:not(.klein){min-height:var(--hoehe-k);padding:0 var(--s4);font-size:var(--t-14);line-height:var(--z-14)} /* Rechtematrix: Rollen als Spalten, die Haken mittig; der Name des Rechts mit seinem Schluessel in Mono 12 */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-matrix td:first-child b{font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-matrix td:first-child .leise{font-size:12px;color:var(--text-3)} /* Seite eines Kontos: Kopf mit Name in der Kondensierten 32, Rechte in zwei Spalten mit Linien, Punkt in Gut fuer erteilt */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-konto-kopf h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-32);line-height:var(--z-32)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-konto-kopf>.klein{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-rechte h3{font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-recht{border-bottom-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-recht b{font-weight:var(--g-halb);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-recht small{font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-recht.hat .vw-punkt{background:var(--gut);border-color:var(--gut)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-geheim{border-color:var(--linie-2);border-radius:var(--r-feld)} /* Zustand der Komponenten (Sicherheit): Kacheln mit Linien, Warnung und Fehler als Strich links */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-zustand{background:var(--linie-2);border-color:var(--linie-2);border-radius:var(--r-flaeche)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-komponente{background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-komponente.fehler{box-shadow:inset 3px 0 0 var(--fehler)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-komponente.warnung{box-shadow:inset 3px 0 0 var(--warnung)} /* Sperren (Inhalte): die Regel als Block mit Linie, die Zahlen in Sans */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-sperrregel-block{border-bottom-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .verwaltung :is(.vw-sperrregel-knoepfe,.vw-sperrkopf) .vw-zahl{font-family:var(--sans);font-size:var(--t-13);color:var(--text-3);font-variant-numeric:tabular-nums} /* Einstellungen: die Gruppen als Aufklapper in einem Rahmen (eine Zeile je Gruppe), der Kurator als Kasten darunter */ html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe{margin:0;padding:0 var(--s5);border:var(--rand-b) solid var(--linie-2);border-bottom:0;border-radius:0;background:var(--grund);scroll-margin-top:calc(var(--klebe-oben,64px) + var(--s4))} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe:first-of-type{border-radius:var(--r-flaeche) var(--r-flaeche) 0 0} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe:last-of-type{border-bottom:var(--rand-b) solid var(--linie-2);border-radius:0 0 var(--r-flaeche) var(--r-flaeche)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe:first-of-type:last-of-type{border-radius:var(--r-flaeche)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe+details.rg-gruppe>summary{border-top:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe>summary{gap:var(--s1) var(--s3);min-height:var(--zeile);padding:var(--s2) 0} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe>summary::before{content:none} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe>summary::after{content:"";flex:none;width:8px;height:8px;margin:0 var(--s2) 0 auto;border-right:1.5px solid var(--text-2);border-bottom:1.5px solid var(--text-2);transform:rotate(45deg) translateY(-2px);transition:transform var(--dauer-fokus) var(--kurve)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe[open]>summary::after{transform:rotate(225deg)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe>summary h3{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe>summary h3 .leise{font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-13);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe>summary .klein{font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe>:not(summary){margin-inline:0} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe[open]{padding-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>.rg-gruppe-hinweis{margin-top:var(--s5);padding:var(--s4) var(--s5);border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>.rg-gruppe-hinweis>h3{margin:0 0 var(--s2);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .rg-einleitung{max-width:110ch;font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .rg-sprung{margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .rg-dort-zeile{font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-abweichend .rg-liste{padding:0 var(--s4);border:var(--rand-b) solid var(--warnung-rand);border-radius:var(--r-flaeche);background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-abweichend .rg-zeile.abweichend{box-shadow:none;padding-left:0} /* Startseite: Kopf, Unterreiter als Reiter, Tabellen dicht wie im Prototyp, die Staende in Sans 13 */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-kopf h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-kopf h2 .leise{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-reiter{gap:var(--s5);border-bottom:var(--rand-b) solid var(--linie)} /* rollen die Unterreiter seitlich (am Handy), dann mit weicher Kante wie eine Reiterzeile (app/app.css .reiter) */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-reiter{scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,var(--grund) var(--verlauf-l),var(--grund) calc(100% - var(--verlauf-r)),transparent);mask-image:linear-gradient(90deg,transparent,var(--grund) var(--verlauf-l),var(--grund) calc(100% - var(--verlauf-r)),transparent);animation:rollverlauf linear both;animation-timeline:scroll(self inline)} @media (prefers-reduced-motion:reduce){html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-reiter{animation:rollverlauf linear both!important;animation-timeline:scroll(self inline)!important}} html[data-stil="kinosaal"].ruhig:not(#saal) .verwaltung .vw-start-reiter{animation:rollverlauf linear both!important;animation-timeline:scroll(self inline)!important} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-reiter button{min-height:var(--ziel-min);padding:0;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--text-3);font-family:var(--sans);font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-mittel)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-reiter button:hover{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-reiter button.an{color:var(--text);border-bottom-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .verwaltung :is(.vw-quellen,.vw-start-tabelle,.vw-musik-tabelle) td .feld-rahmen>.feld-name[aria-hidden="true"]{display:none} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-quellen :is(th,td){padding:var(--s2) var(--s2);border-bottom:var(--rand-b) solid var(--linie);vertical-align:top} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-quellen th{font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text-3);text-align:left} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-quellen td.t b{font-weight:var(--g-halb);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-quellen td.t small{display:block;font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-quellen .stand{font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-quellen .stand small{display:block;font-weight:var(--g-text);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-quellen :is(.vw-fest,.vw-wunsch,.vw-gesucht){font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-tabelle td.t small{display:block;font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-tabelle th{font-size:var(--t-13)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-tabelle .stand{font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-tabelle .stand small{display:block;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-start-tabelle :is(.vw-fest,.vw-wunsch,.vw-gesucht){font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung :is(.vw-clip-art,.vw-clip-hinweis,.vw-mo-ohne){font-family:var(--sans);font-size:var(--t-13);letter-spacing:0;text-transform:none} html[data-stil="kinosaal"]:not(#saal) .verwaltung :is(.vw-clip-meta,.vw-clip-wo,.vw-clip-satz,.vw-vorgabe,.vw-mo-marke){font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-quote h4 span{font-family:var(--sans);font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-quellen-filter button{font-size:var(--t-13)} /* Anfragen: das eingebettete Entscheiden im Kleid der Seite Anfragen (Runde 7a) */ html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen>h2,html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-abschnitt h2{gap:var(--s3);margin-bottom:var(--s2);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-filter{margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-abschnitt{margin-bottom:var(--s6)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-liste{grid-template-columns:minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-zeile{grid-template-columns:64px minmax(0,1fr) auto;gap:var(--s4);padding:var(--s4) 0;border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-zeile.ohne-bild{grid-template-columns:minmax(0,1fr) auto} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-poster{width:64px;height:96px;border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante);color:var(--film);font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-text{display:flex;flex-direction:column;gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-text h3{margin-bottom:0;font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-text h3 .leise{font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-14);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-text .statuszeile{gap:var(--s1) var(--s3);max-width:none;margin-top:0;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-text .statuszeile b{font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-text p{margin-top:0;max-width:var(--mass)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-text p.klein{font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-beschreibung{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-aktion{gap:var(--s2);min-width:160px} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-aktion .knopf{min-height:var(--hoehe-k);padding:0 var(--s4);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-aktion .knopf.leise.gefahr{border-color:var(--fehler-rand)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-kommentar{width:min(420px,100%);gap:var(--s1);font-size:var(--t-13);font-weight:var(--g-halb);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-kommentar small{font-weight:var(--g-text);color:var(--text-3)} /* ---- Handy */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .verwaltung>.kopf{margin-top:var(--s2);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt{padding:var(--s3) var(--s4)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-abschnitt.vw-regler{padding:var(--s2) var(--s4)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-paar{grid-template-columns:minmax(96px,35%) minmax(0,1fr);gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #rg-liste>details.rg-gruppe{padding:0 var(--s4)} /* gestapelte Tabellen: der Spaltenname in Sans 13 halbfett, 40 % breit; Zahlen links */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .tabelle.stapel td[data-spalte]{padding-left:calc(40% + var(--s3))} html[data-stil="kinosaal"]:not(#saal) .verwaltung .tabelle.stapel td::before{width:40%;font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-14);font-weight:var(--g-halb);letter-spacing:0;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .tabelle.stapel td.r{text-align:left} html[data-stil="kinosaal"]:not(#saal) .verwaltung .tabelle.stapel td.m:not(.r){font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .tabelle.stapel td.m:is([data-spalte="Adresse"],[data-spalte="Client"],[data-spalte="Ziel"]){font-size:12px} /* Segmente (Stand der Kommentare, Wahl der Rolle) brechen um, statt ueber den Rand zu ragen */ html[data-stil="kinosaal"]:not(#saal) .verwaltung :is(.segment,.umschalter){flex-wrap:wrap;max-width:100%;border-radius:var(--r-flaeche)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .modul-kopf:has(:is(.segment,.umschalter)) .rechts{flex:1 1 100%;margin-left:0} /* Anfragen: Plakat 48, Handlungen unter dem Text (wie Runde 7a) */ html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-zeile{grid-template-columns:48px minmax(0,1fr);gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-zeile.ohne-bild{grid-template-columns:minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-poster{width:48px;height:72px;font-size:var(--t-18)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #vw-anfragen .anf-aktion{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;min-width:0} } /* S2-1a (30.10.2026): Verwaltung > Sammlungen im Kleid des Saals. Der Satz der Lage in 16, Hand gewinnt als Satz mit Strich in Licht, die Treffer beim Hinzufuegen als stille Knoepfe in einer Zeile; sonst tragen die Bausteine (Modul, Tabelle, Feld, Knopf, Status) das Kleid. */ html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-sm-lage{font-size:var(--t-16);line-height:var(--z-24);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-sm-hand{border-left:2px solid var(--licht);padding:var(--s2) var(--s3);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-sm-treffer{gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .verwaltung .vw-sm-raus li{border-bottom:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .verwaltung #sm-liste .abschnitt-kopf .rechts{margin-left:auto} /* ---------------------------------------------------------------- Konto (Runde 7b, 23.10.2026): zehn Reiter, die Module des Players unter Wiedergabe Prototyp scratchpad/a84/prototyp/konto-*.html (css/seiten.css, Teil 60-konto) im Aufbau von heute (app/konto.js; seit dem Prototyp dazu Geteilte Downloads, der Schalter Oberflaeche unter Profil; Apps und Clients steht im Kontomenue und traegt sein Kleid aus Runde 7a): Kopf Titel in der Kondensierten 32, der Satz 16 in Text 2; Reiter mit dem Strich in Licht, die Zahl ungelesener Meldungen hell Module die Bausteine Modul (Runde 2b) mit Kopf in der Kondensierten 18, kleine Saetze in 13 in Text 2, Unterkoepfe 16 Wiedergabe die Module aus app/player.js (Verlauf, Welche Fassung zuerst, Musik auf der Startseite): die Wahl als Zeilen mit Kasten und Satz, die gewaehlte mit heller Kante auf Flaeche 2 (Baustein-Variante kt-wahl im Prototyp, wie Welche Fassung im Player) Listen Sitzungen, Geraete, Bewertungen und Verbindungen als Zeilen mit Linien; Kennzeilen in 13 in Text 3 Am Handy einspaltig, die Module in voller Breite, gestapelte Tabellen mit dem Spaltennamen in Sans; nichts rollt seitlich ausser der Reiterzeile. Jede Regel steht unter html[data-stil="kinosaal"]:not(#saal) und an .konto. */ /* Kopf und Reiter */ html[data-stil="kinosaal"]:not(#saal) .konto>.kopf{margin-top:var(--s5);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .konto>.kopf h1{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .konto>.kopf .unterzeile{margin-top:var(--s2);max-width:78ch;font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .konto #konto-reiter{margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .konto #konto-reiter a span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:var(--s1);padding:0 6px;border-radius:var(--r-rund);background:var(--licht);color:var(--grund);font-size:var(--t-13);line-height:20px;font-weight:var(--g-halb)} /* Module: Kopf 18 in der Kondensierten, Unterkoepfe 16, kleine Saetze 13 */ html[data-stil="kinosaal"]:not(#saal) .konto .modul>h2,html[data-stil="kinosaal"]:not(#saal) .konto .modul>.konto-leiste h2{margin-bottom:var(--s3);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .konto .modul>.konto-leiste{margin-bottom:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .konto .modul>.konto-leiste h2{margin-bottom:0} html[data-stil="kinosaal"]:not(#saal) .konto .modul>h2 .leise,html[data-stil="kinosaal"]:not(#saal) .konto .modul>.konto-leiste h2 .leise{font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .konto .modul>h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s1) var(--s3);margin:var(--s4) 0 var(--s2);padding-top:var(--s4);border-top:var(--rand-b) solid var(--linie);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .konto .modul>h3 .klein{font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-13)} html[data-stil="kinosaal"]:not(#saal) .konto .modul p.klein{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .konto .modul .schalterreihe>div{border-color:var(--linie-2);border-radius:var(--r-feld);background:var(--flaeche)} html[data-stil="kinosaal"]:not(#saal) .konto .modul .schalterreihe>div>span{font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .konto .modul .schalterreihe small{font-weight:var(--g-text);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .konto .konto-liste{border-color:var(--linie-2);border-radius:var(--r-flaeche)} html[data-stil="kinosaal"]:not(#saal) .konto .konto-zeile{border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .konto .konto-zeile small{font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .konto .konto-zeile .knopf.leise.gefahr{border-color:var(--fehler-rand)} html[data-stil="kinosaal"]:not(#saal) .konto .konto-zeile .knopf.leise.gefahr:hover{border-color:var(--fehler)} /* Sitzungen und Geraete (schmale Listen): Stand links, Name mit Kennzeile, die Zeit darunter in Text 3, Abmelden rechts; so bleibt dem Namen die Breite des Moduls (vorher vier Spalten, der Name brach Wort fuer Wort) */ @media (min-width:821px){ html[data-stil="kinosaal"]:not(#saal) .konto .konto-liste.schmal .konto-zeile{grid-template-columns:max-content minmax(0,1fr) max-content;column-gap:var(--s3);row-gap:0} html[data-stil="kinosaal"]:not(#saal) .konto .konto-liste.schmal .konto-zeile>.status{grid-column:1;grid-row:1 / span 2;align-self:center} html[data-stil="kinosaal"]:not(#saal) .konto .konto-liste.schmal .konto-zeile>div{grid-column:2;grid-row:1} html[data-stil="kinosaal"]:not(#saal) .konto .konto-liste.schmal .konto-zeile>span.klein{grid-column:2;grid-row:2;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .konto .konto-liste.schmal .konto-zeile>:is(button,a.knopf){grid-column:3;grid-row:1 / span 2;align-self:center} } html[data-stil="kinosaal"]:not(#saal) .konto .konto-ueberall{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3) var(--s5)} html[data-stil="kinosaal"]:not(#saal) .konto .konto-ueberall p{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} /* Wiedergabe: die Wahl der Fassung und der Musik als Zeilen mit Kasten, die gewaehlte mit heller Kante */ html[data-stil="kinosaal"]:not(#saal) .konto .fw-liste{display:flex;flex-direction:column;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .konto .fw-liste>.wahl-zeile:not(.fw-zeile){padding:var(--s3) var(--s4);border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-feld);background:none} html[data-stil="kinosaal"]:not(#saal) .konto .fw-liste>.wahl-zeile:not(.fw-zeile):hover{border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .konto .fw-liste>.wahl-zeile:not(.fw-zeile):has(input:checked){border-color:var(--licht);background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) .konto .fw-liste>.wahl-zeile b{font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .konto .fw-liste>.wahl-zeile small{font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .konto .vl-stunden{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) .konto .vl-stunden .feld{width:88px} html[data-stil="kinosaal"]:not(#saal) .konto .vl-vorschau{padding:var(--s3) var(--s4);border-radius:var(--r-feld);background:var(--flaeche-2)} /* Profil: das Bild rund auf Flaeche 3, Name halbfett, Angaben 13 */ html[data-stil="kinosaal"]:not(#saal) .konto .konto-profil b{font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .konto .konto-profil small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Benachrichtigungen: Kanaele als Zeilen mit Linie; ein Kanal ohne Versand gestrichelt (app/app.css K-06) */ html[data-stil="kinosaal"]:not(#saal) .konto .kb-kanaele>div{border-color:var(--linie-2);border-radius:var(--r-feld)} /* Sicherheit: Zwei-Faktor mit dem Schluessel in Mono und dem QR-Code auf hellem Grund */ html[data-stil="kinosaal"]:not(#saal) .konto .zf-schritte{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .konto .zf-qr{gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .konto .zf-qr code{font-size:var(--t-14);letter-spacing:.08em} /* ---- Handy */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .konto>.kopf{margin-top:var(--s2);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .konto .tabelle.stapel td[data-spalte]{padding-left:calc(40% + var(--s3))} html[data-stil="kinosaal"]:not(#saal) .konto .tabelle.stapel td::before{width:40%;font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-14);font-weight:var(--g-halb);letter-spacing:0;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .konto .konto-ueberall{flex-direction:column;align-items:stretch} /* Vorlieben der Bibliothek: die Wahlen brechen um, statt seitlich zu rollen (jede bleibt sichtbar, wie die Segmente im Betrieb) */ html[data-stil="kinosaal"]:not(#saal) .konto .kb-vorliebe .segment{flex-wrap:wrap;border-radius:var(--r-flaeche)} } /* ---------------------------------------------------------------- Zugang (Runde 7b, 23.10.2026): Anmelden, Link aus der Mail, Fernseher anmelden Prototyp scratchpad/a84/prototyp/anmelden*.html, kontolink*.html, freigeben*.html (css/seiten.css, Teil 15-zugang) im Aufbau von heute (app/anmelden.html und app/anmelden.js mit Anmelden, Passwort vergessen, Code eingeben, Zwei-Faktor einrichten, neuem Passwort und dem Code fuer den Fernseher; app/kontolink.html und app/kontolink.js mit Einladung, Passwort und Adresse; app/freigeben.js mit Eingabe, Frage, Fertig und Fehler). Anmeldung und Konto-Link tragen die Vorgabe des Hauses (Runde 3), am Fernseher immer klassisch: Seite die Wortmarke 24 ueber der Karte, beide mittig in einer Spalte von 420 (mit dem Code fuer den Fernseher 820), oben ein Hauch von Licht wie im Prototyp Karte auf Flaeche 2 (Geschmack 4), Radius 14, Innenabstand 32; Titel in der Kondensierten 24, Saetze 14 in Text 2, Beschriftungen 13 halbfett, Felder und Hauptknopf in der vollen Hoehe 44; Meldungen im Baustein Meldung (Runde 2b) Zwei-Faktor die Schritte als Liste, der QR-Code mit Radius 8 auf hellem Grund, der Schluessel in Mono mit Sperrung Freigeben der Kopf wie die Seiten der Administration (Kondensierte 32, Satz 16), die Karte als Modul; der Code in Mono mit Sperrung, die Angaben als Werte (Etikett in Text 3), der Hinweis auf ein anderes Netz in Warnung Jede Regel steht unter html[data-stil="kinosaal"]:not(#saal) und an .anmelden-seite (Anmeldung und Konto-Link) oder .freigeben. */ /* Seite und Spalte */ html[data-stil="kinosaal"]:not(#saal) .anmelden-seite{background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--licht) 5%,transparent),transparent 70%),var(--grund)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden{width:min(420px,100%);gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden.mit-tv{width:min(820px,100%)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-marke{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:1;letter-spacing:.01em;text-decoration:none} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-marke span{font-weight:var(--g-kopf);font-size:var(--t-16);letter-spacing:.04em;color:var(--text-3)} /* Karte auf Flaeche 2 */ html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-karte{gap:var(--s4);padding:var(--s6);border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-karte h1{margin-bottom:0;font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-karte :is(.unterzeile,p.klein){max-width:none;font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-karte label{gap:var(--s1);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-karte .feld{min-height:var(--hoehe);font-size:var(--t-16)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-karte .feld[readonly]{border-style:dashed} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-karte .knopf.haupt{min-height:var(--hoehe);margin-top:var(--s1);font-size:var(--t-16)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-knoepfe{gap:var(--s2);margin-top:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-knoepfe .knopf.haupt{margin-top:0} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite #anmelden-vergessen{margin-top:calc(-1 * var(--s2))} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-meldung.hinweis{border-color:var(--warnung-rand);background:var(--warnung-tief)} /* Zwei-Faktor einrichten: Schritte, QR-Code, Schluessel */ html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .zf-schritte{display:flex;flex-direction:column;gap:var(--s2);padding-left:var(--s5);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .zf-qr{gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .zf-qr canvas{border-radius:var(--r-feld)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .zf-qr small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .zf-qr code{font-family:var(--mono);font-size:var(--t-14);letter-spacing:.08em;color:var(--text)} /* Hinweis fuer iPhone und iPad: klein und ruhig unter der Karte */ html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-app{border-color:var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche);font-size:var(--t-14);line-height:var(--z-14)} /* Mit dem Handy anmelden (der Code fuer den Fernseher, ?tv=1 oder die Kennung eines Fernsehers; dort gilt klassisch) */ html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-tv h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-tv-code{font-family:var(--mono);font-size:var(--t-36);line-height:var(--z-36);letter-spacing:.12em} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-tv-satz{font-size:var(--t-16);line-height:var(--z-16)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-tv-qr{border-radius:var(--r-feld)} html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-tv-stand{font-size:var(--t-14);color:var(--text-3)} /* Fernseher anmelden: Kopf, Karte, Code, Angaben */ html[data-stil="kinosaal"]:not(#saal) .freigeben>.kopf{margin-top:var(--s5);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .freigeben>.kopf h1{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .freigeben>.kopf .unterzeile{margin-top:var(--s2);max-width:62ch;font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .freigeben .fg-karte{display:flex;flex-direction:column;gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .freigeben .fg-karte h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .freigeben :is(.fg-feld,.fg-eingabe label){gap:var(--s1);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .freigeben :is(#fg-code,.fg-code){font-family:var(--mono);letter-spacing:.12em} html[data-stil="kinosaal"]:not(#saal) .freigeben .fg-daten{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s2) var(--s3);margin:0;font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .freigeben .fg-daten dt{font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .freigeben .fg-daten dd{margin:0;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .freigeben .fg-netz{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .freigeben .fg-netz.warn{color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) .freigeben p.klein{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .freigeben .fg-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .freigeben .fg-fertig{display:flex;flex-direction:column;gap:var(--s3)} /* ---- Handy */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .anmelden-seite .anmelden-karte{padding:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .freigeben>.kopf{margin-top:var(--s2);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .freigeben .fg-daten{grid-template-columns:96px minmax(0,1fr)} } /* ---------------------------------------------------------------- Inventar (Runde 7a, 23.10.2026): Bestand und Technik im Kleid des Prototyps Grundlage: scratchpad/a84/prototyp/inventar.html, inventar-liste.html, inventar-technik.html und css/seiten.css (80-inventar), Vorgabe 03-PROTOTYP-VORGABE.md Abschnitt 8 "Inventar" und "Inventar > Technik". Aufbau wie heute (app/inventar.js): Kopf als Befund mit Statuszeile, Menues Exportieren und Spalten, Suchfeld rechts; Reiter Bestand und Technik; Werkzeugzeile; aktive Filter; Hinweis Ausfall; Facetten links, rechts Wand, Liste oder Technik. Nur Klassen von heute, nur unter dem Stil kinosaal; die Seite hat keine eigene Huelle, darum haengt jede Regel an ihren Kennungen (#inv-*), am Kopf mit #inv-kopf oder an der Huelle #inv-facetten-mobil des Blatts am Handy. Kopf ueber dem Befund das Wort Inventar (Kennzeile 13), der Befund in der Kondensierten 36 (Groesse und "gefiltert" leiser), die Statuszeile 14 in Text 3 mit Punkten zwischen den Angaben, Sofortmeldungen als Status (app/inventar.js, Weiche) Werkzeuge Bereiche als Chips, rechts Filter, Sortierung (die Beschriftung sichtbar links daneben, eine Zeile), Richtung und die Ansichten mit Zeichen; alles in der kompakten Hoehe Facetten eine Tafel links (264), je Gruppe ein Kopf mit Pfeil rechts, die Werte als Chips mit Zaehler (Geschmack 1, Vorgabe ja); das Kaestchen bleibt im Markup und tritt hinter den Chip zurueck, gewaehlt ist der Chip hell Wand Raster mit der Mindestbreite --poster-b (bei 1600 sechs Spalten neben den Facetten), Kompakt 0,72 davon; Plaketten mit Lage in ihrer Farbe (DV P5 rot, ohne DE gelb, die Liste der Planung in ihrer Kennfarbe) Liste Zeilen 40 (Geschmack 4), Zellen in der Schrift des Textes mit gleich breiten Ziffern, Zahlen und Datum rechtsbuendig, das kleine Plakat 24 x 36 mit Ecken Technik Kacheln als Module (280), die Zahl in der Kondensierten 32: Problemfaelle in Gelb oder Rot, ohne Fall leise */ html[data-stil="kinosaal"]:not(#saal) .kopf:has(#inv-kopf){align-items:flex-end;gap:var(--s4) var(--s6);margin-top:var(--s5);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .kopf:has(#inv-kopf)>div:first-child{display:flex;flex-direction:column;gap:var(--s2);min-width:0} html[data-stil="kinosaal"]:not(#saal) .kopf:has(#inv-kopf)>div:first-child::before{content:"Inventar";font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-text);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .kopf .inv-titelzeile{gap:var(--s2) var(--s4)} html[data-stil="kinosaal"]:not(#saal) #inv-kopf{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-36);line-height:var(--z-36);letter-spacing:-.01em;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #inv-kopf em{font-style:normal;font-weight:var(--g-kopf);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #inv-status{gap:var(--s1) 0;margin-top:0;font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #inv-status>span+span:not(.status)::before,html[data-stil="kinosaal"]:not(#saal) #inv-status>span:has(+.status)::after{content:"\00b7";margin:0 var(--s2);color:var(--text-4)} html[data-stil="kinosaal"]:not(#saal) .kopf:has(#inv-kopf)>.suchfeld{min-height:var(--hoehe);padding:0 var(--s2) 0 var(--s4)} html[data-stil="kinosaal"]:not(#saal) .kopf:has(#inv-kopf)>.suchfeld input{font-size:var(--t-16);min-height:calc(var(--hoehe) - 2px)} html[data-stil="kinosaal"]:not(#saal) #inv-reiter{margin-bottom:var(--s5)} /* Menues Exportieren und Spalten: die Gestalt des Menues (Runde 2b), der Satz oben 13, die Wahl der Spalten als Zeilen mit Ankreuzfeld */ html[data-stil="kinosaal"]:not(#saal) .inv-export .d-mehr-liste{min-width:300px} html[data-stil="kinosaal"]:not(#saal) .inv-export-was{padding:var(--s1) var(--s3) var(--s2);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .inv-export .d-mehr-liste small{margin-left:var(--s2);font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .inv-spalten[open]>summary{background:var(--flaeche-3);border-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .inv-spalten-liste{min-width:280px;gap:2px;padding:var(--s2);border-radius:var(--r-flaeche);background:var(--flaeche-2);border:var(--rand-b) solid var(--linie-2);box-shadow:var(--hebung)} html[data-stil="kinosaal"]:not(#saal) .inv-sp{gap:var(--s3);min-height:var(--hoehe-k);padding:0 var(--s3);border-radius:var(--r-feld);font-size:var(--t-14);line-height:var(--z-14);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .inv-sp:hover{background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) .inv-sp small{font-family:var(--sans);font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .inv-spalten-liste .knopf{justify-content:flex-start;margin-top:var(--s1);border-top:var(--rand-b) solid var(--linie-2);border-radius:0 0 var(--r-feld) var(--r-feld)} /* Werkzeuge: eine Zeile in der kompakten Hoehe; die Beschriftung der Sortierung steht sichtbar links neben dem Feld */ html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge{gap:var(--s3);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge .rechts{gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge .feld-rahmen{grid-template-columns:auto minmax(0,1fr);align-items:center;align-self:center;column-gap:var(--s2);flex:0 1 auto} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge .feld-rahmen>.feld-name{font-weight:var(--g-mittel);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge select.feld{width:auto;min-width:200px;min-height:var(--hoehe-k);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge .ik{width:var(--hoehe-k);min-width:var(--hoehe-k);height:var(--hoehe-k);min-height:var(--hoehe-k)} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge .ik svg{width:18px;height:18px} html[data-stil="kinosaal"]:not(#saal) #inv-facetten-knopf small{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-rund);background:var(--licht);color:var(--grund);font-size:var(--t-13);line-height:20px;font-weight:var(--g-halb);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .inv-ansicht button{display:inline-flex;align-items:center;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .inv-ansicht svg{display:block;flex:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} /* Aktive Filter und Hinweis Ausfall */ html[data-stil="kinosaal"]:not(#saal) #inv-aktiv{gap:var(--s2);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #inv-aktiv .chip .x{margin-left:0;font-size:var(--t-16);opacity:.72} html[data-stil="kinosaal"]:not(#saal) #inv-aktiv .treffer{margin-left:var(--s2);font-size:var(--t-14);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #inv-ausfall .inv-ausfall{gap:var(--s3) var(--s4);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #inv-ausfall .inv-ausfall b{font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) #inv-ausfall .inv-ausfall small{margin-top:2px;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2)} /* Aufbau: die Tafel der Facetten links (264), Inhalt rechts */ html[data-stil="kinosaal"]:not(#saal) #inv-aufbau{gap:var(--s5)} html[data-stil="kinosaal"]:not(#saal) #inv-aufbau.mit-facetten{grid-template-columns:264px minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) #inv-facetten{top:calc(var(--klebe-oben) + var(--s3));padding:var(--s2) var(--s4);border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche);scrollbar-width:thin} html[data-stil="kinosaal"]:not(#saal) #inv-facetten-mobil{padding:0 var(--s4) var(--s4)} html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) details{border-top:var(--rand-b) solid var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) details:first-child{border-top:0} html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) summary{gap:var(--s2);min-height:40px;padding:0;font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) summary small{margin-left:0;font-family:var(--sans);font-size:var(--t-13);font-weight:var(--g-text);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) summary svg{margin-left:auto;width:14px;height:14px;stroke:var(--text-3);stroke-width:1.5} html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) .werte{display:flex;flex-wrap:wrap;gap:var(--s2);padding:var(--s1) 0 var(--s3)} /* Geschmack 1 (Vorgabe ja): jede Facette ein Chip mit Zaehler; das Kaestchen bleibt im Markup, der helle Chip zeigt die Wahl */ html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) .facette{display:inline-flex;width:auto;max-width:100%;text-align:left} html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) .facette .kaestchen{display:none} html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) .facette .name{flex:0 1 auto} html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) .facette small{font-family:var(--sans);font-size:var(--t-13)} html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) .facette.null:not(.an){opacity:.45} html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) .mehr{flex-basis:100%;width:auto;min-height:24px;padding:0;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(#inv-facetten,#inv-facetten-mobil) .mehr:hover{color:var(--text)} /* Wand: Raster aus Titelkarten wie .raster im Prototyp; Kompakt enger; die Zeile unter dem Titel eine Zeile */ html[data-stil="kinosaal"]:not(#saal) #inv-wand{grid-template-columns:repeat(auto-fill,minmax(var(--poster-b),1fr));gap:var(--s6) var(--s4)} html[data-stil="kinosaal"]:not(#saal) #inv-wand.kompakt{grid-template-columns:repeat(auto-fill,minmax(calc(var(--poster-b) * .72),1fr));gap:var(--s4) var(--s3)} html[data-stil="kinosaal"]:not(#saal) #inv-wand .tk b{display:-webkit-box;margin-top:var(--s2);text-wrap:wrap;-webkit-line-clamp:2;-webkit-box-orient:vertical} html[data-stil="kinosaal"]:not(#saal) #inv-wand.kompakt .tk b{font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) #inv-wand .tk small{display:block;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #inv-wand .tk .plaketten{gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) #inv-wand .tk .plaketten>span{background:var(--schleier-3)} html[data-stil="kinosaal"]:not(#saal) #inv-wand .tk .plaketten>span.krit{color:var(--fehler);border-color:var(--fehler-rand)} html[data-stil="kinosaal"]:not(#saal) #inv-wand .tk .plaketten>span.warn{color:var(--warnung);border-color:var(--warnung-rand)} html[data-stil="kinosaal"]:not(#saal) #inv-wand .tk .plaketten>span.ok{color:var(--l-kommt);border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) #inv-wand .tk.wunsch .bild{border:var(--rand-b) dashed var(--linie-3);background:var(--flaeche);box-shadow:none} /* Liste: Zeilen 40, Zellen in der Schrift des Textes, Zahlen und Datum rechtsbuendig mit gleich breiten Ziffern */ html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .inv-liste td{height:var(--zeile-k);padding:2px var(--s3)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .inv-liste td.m{font-family:var(--sans);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2);font-variant-numeric:tabular-nums lining-nums} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .inv-liste td:first-child{color:var(--text);font-weight:var(--g-mittel)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .inv-liste .miniposter{width:24px;height:36px;margin-right:var(--s3);border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .inv-liste .inv-titel .status{margin-left:var(--s1);vertical-align:middle} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .inv-liste :is(td[data-inv~="inventar.liste.spalte.hinzugefuegt"],th:has(>button[data-sortspalte="neu"])){text-align:right} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .inv-liste th button svg{width:12px;height:12px} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .inv-liste .wertung{font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .wunsch-band{margin-top:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #inv-mehr{padding:var(--s7) 0 var(--s5);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3);font-variant-numeric:tabular-nums} /* Technik: Abschnitte mit Kopf, Kacheln als Module (Mindestbreite 280), die Zahl in der Kondensierten 32 */ html[data-stil="kinosaal"]:not(#saal) #inv-inhalt>section.abschnitt{margin-top:var(--s7)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt>section.abschnitt>header{gap:var(--s1) var(--s3);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt>section.abschnitt>header h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt>section.abschnitt>header .klein:not(.knopf){font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-raster{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-karte{gap:var(--s2);min-height:128px;text-decoration:none} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-karte:hover{border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-karte b{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-karte span{font-size:var(--t-14);line-height:var(--z-14);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-karte small.was{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-karte.krit b{color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-karte.warn b{color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt [data-inv~="inventar.technik.problemfaelle"] .technik-karte.ok b{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-karte.offen{opacity:1} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-karte.offen b small{font-family:var(--sans);font-size:var(--t-14);font-weight:var(--g-mittel);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt [data-inv~="inventar.technik.speicher"] p.klein{font-size:var(--t-14);line-height:var(--z-14)} /* Schmaler PC (bis 1250): die Facetten als Blatt ueber den Filterknopf (wie heute) */ @media (max-width:1250px){ html[data-stil="kinosaal"]:not(#saal) #inv-aufbau.mit-facetten{grid-template-columns:minmax(0,1fr)} } /* Handy (bis 820): Kopf untereinander, Werkzeuge in zwei Zeilen, Wand drei Spalten, Liste mit der Zeile unter dem Titel, Technik zwei Spalten */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .kopf:has(#inv-kopf){gap:var(--s3);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .kopf:has(#inv-kopf)>div:first-child{flex:1 1 100%} html[data-stil="kinosaal"]:not(#saal) .kopf .inv-titelzeile{justify-content:space-between;flex-wrap:nowrap} html[data-stil="kinosaal"]:not(#saal) #inv-kopf{font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) #inv-reiter{margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge>.chips{margin-inline:calc(-1 * var(--rand));padding-inline:var(--rand)} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge .rechts{margin-left:0;align-items:flex-end} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge .feld-rahmen{grid-template-columns:minmax(0,1fr);align-self:flex-end;flex:1 1 0;min-width:0} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge select.feld{min-width:0;width:100%} html[data-stil="kinosaal"]:not(#saal) #inv-werkzeuge .inv-ansicht button{padding:0 var(--s3)} html[data-stil="kinosaal"]:not(#saal) .kopf:has(#inv-kopf){margin-top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #inv-aktiv{margin-inline:calc(-1 * var(--rand));padding-inline:var(--rand)} html[data-stil="kinosaal"]:not(#saal) #inv-wand{grid-template-columns:repeat(auto-fill,minmax(calc(var(--s9) + var(--s2)),1fr));gap:var(--s5) var(--s3)} html[data-stil="kinosaal"]:not(#saal) #inv-wand.kompakt{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3) var(--s2)} html[data-stil="kinosaal"]:not(#saal) #inv-wand .tk b{font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .inv-liste td{height:auto;padding:var(--s2) var(--s3)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .inv-liste .inv-unter{font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3);font-weight:var(--g-text)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .inv-liste .inv-unter b{font-weight:var(--g-halb);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #inv-mehr{padding-top:var(--s6)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-karte{min-height:0;padding:var(--s3) var(--s4)} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-karte small.was{display:none} html[data-stil="kinosaal"]:not(#saal) #inv-inhalt .technik-karte b{font-size:var(--t-24);line-height:var(--z-24)} } /* ---------------------------------------------------------------- Planung (Runde 7a, 23.10.2026): Board, Listen, Fassungsupgrade und Schublade Grundlage: scratchpad/a84/prototyp/planung.html, planung-listen.html, planung-eintrag.html und css/seiten.css (45-planung), Vorgabe 03-PROTOTYP-VORGABE.md Abschnitt 8 "Planung > Board", "> Listen", "> Eintrag". Aufbau wie heute (app/planung.js): Kopf als Befund links, Eingabezeile rechts; Reiter Board, Listen und Fassungsupgrade (Auftraege 81b und 108) mit der Bereichswahl; Demnaechst; Neue Staffeln (mit den unvollstaendigen, Auftrag 97); Werkzeugzeile; Board oder Listen; die Schublade eines Eintrags. Nur Klassen von heute, nur unter kinosaal. Kopf der Befund ("157 offen") in der Kondensierten 36, die Kennzahlen 14 in Text 2; die Eingabezeile in einer Reihe, unten buendig, die Beschriftungen von Bereich und Liste sichtbar darueber (Felder mit Beschriftung: Messziel 100 %) Demnaechst Kopf 24, Legende mit Farbfeldern; die Termine als kleine Flaechen mit dem Strich ihrer Farbe (statt Punkt), Titel halbfett, Art und Datum in Text 3 mit gleich breiten Ziffern; Monate und heute in der Schrift des Textes Staffeln Neue und unvollstaendige Staffeln als Liste (Vorgabe: Abschnittskopf + Liste), Zeilen mit Plakat, Titel, Stand, Knoepfen Board die Bahnen als Raster (Mindestbreite 300, bei 1600 vier je Reihe, Geschmack 2), jede Bahn eine Flaeche mit Kopf, Zaehler und Satz; die Karten mit Plakat links und den Plaketten im Text Listen grosse Karten ab 600 breit (bei 1280 eine je Reihe, bei 1600 zwei), eine Satzkante je Karte: alles an der Innenkante, nur der Titel neben dem Plakat; Daten als Werte (Etikett 160 links), In Plex als Modul mit Zahlen rechtsbuendig in Spalten Schublade das Blatt aus Runde 6b; darin Plakat mit Ecken, Bereich und Liste als Plakette, die Teile durch Linien getrennt */ html[data-stil="kinosaal"]:not(#saal) .kopf:has(#pl-kopfzahl){align-items:flex-start;gap:var(--s4) var(--s6);margin-top:var(--s5);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .kopf>[data-inv~="planung.kopf"]{display:flex;flex-direction:column;gap:var(--s2);flex:1 1 280px;min-width:0} html[data-stil="kinosaal"]:not(#saal) #pl-kopfzahl{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-36);line-height:var(--z-36);letter-spacing:-.01em;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #pl-hinweis{gap:var(--s1) var(--s4);margin-top:0;max-width:none;font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #pl-hinweis .warn-text{color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) #pl-hinweis a{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #pl-hinweis a:hover{color:var(--text)} /* Eingabezeile: Feld, Bereich, Liste, Eintragen, Ausfuehrlich in einer Reihe, unten buendig; die Vorschlaege als Menue darunter */ html[data-stil="kinosaal"]:not(#saal) #pl-eingabe{flex:4 1 760px;max-width:none;justify-content:flex-end;align-items:flex-end;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #pl-eingabe .pl-eintragfeld{flex:1 1 280px;max-width:420px;min-height:var(--hoehe);padding:0 var(--s2) 0 var(--s4)} html[data-stil="kinosaal"]:not(#saal) #pl-eingabe .pl-eintragfeld input{font-size:var(--t-16);min-height:calc(var(--hoehe) - 2px)} html[data-stil="kinosaal"]:not(#saal) #pl-eingabe .pl-eintragfeld svg{stroke:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #pl-eingabe .feld-rahmen{flex:0 1 auto} html[data-stil="kinosaal"]:not(#saal) #pl-eingabe select.feld{width:auto} html[data-stil="kinosaal"]:not(#saal) #pl-vorschlag{padding:var(--s2);border-radius:var(--r-flaeche);background:var(--flaeche-2);border:var(--rand-b) solid var(--linie-2);box-shadow:var(--hebung)} html[data-stil="kinosaal"]:not(#saal) #pl-vorschlag .vorschlag{min-height:var(--zeile);padding:var(--s2);border-radius:var(--r-feld);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #pl-vorschlag .vorschlag:is(.an,:hover){background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) #pl-vorschlag .vorschlag :is(img,.platz){width:32px;height:48px;border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) #pl-vorschlag .vorschlag b{font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) #pl-vorschlag .vorschlag small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Reiter der Ansicht links, Bereichswahl rechts, eine Linie darunter */ html[data-stil="kinosaal"]:not(#saal) .pl-steuer{gap:var(--s2) var(--s5);margin-bottom:var(--s6)} html[data-stil="kinosaal"]:not(#saal) .pl-steuer>.reiter{gap:var(--s5)} html[data-stil="kinosaal"]:not(#saal) #pl-bereiche{gap:var(--s2)} /* Demnaechst: Kopf mit Zahl und Legende, die Zeitleiste auf Flaeche, die Termine als kleine Flaechen mit dem Strich ihrer Farbe */ html[data-stil="kinosaal"]:not(#saal) #pl-demn-abschnitt{margin-top:0} html[data-stil="kinosaal"]:not(#saal) #pl-demn-abschnitt>summary{align-items:center;gap:var(--s2) var(--s3);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #pl-demn-abschnitt>summary h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) #pl-demn-abschnitt>summary>svg{width:16px;height:16px;stroke:var(--text-3);stroke-width:1.5} html[data-stil="kinosaal"]:not(#saal) #pl-demn-zahl{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #pl-legende{gap:var(--s1) var(--s4);margin-left:var(--s2);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #pl-legende span{gap:6px} html[data-stil="kinosaal"]:not(#saal) :is(#pl-legende i,#pl-demn i.punkt){width:8px;height:8px;border:0;border-radius:2px;background:var(--f)} html[data-stil="kinosaal"]:not(#saal) #pl-demn-abschnitt .zl-alle{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} /* Marke 13.175: der Schalter "Anime ausblenden" am Ende der Bereichswahl, im Kleid von "Alle Termine" */ html[data-stil="kinosaal"]:not(#saal) .pl-anime-aus{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .zeitleiste{padding:var(--s3) var(--s4) var(--s2);background:var(--flaeche)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .spur .monat{margin-left:var(--s2);transform:none;font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-mittel);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .spur .monatlinie{background:var(--linie)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .spur .achse{background:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .spur .heute{width:2px;background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .spur .heute span{top:-4px;left:var(--s2);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin{height:22px;gap:var(--s2);padding:0 var(--s2);border-radius:var(--r-marke);background:var(--flaeche-2);box-shadow:inset 2px 0 0 currentColor} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin.nach-links{box-shadow:inset -2px 0 0 currentColor} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin i{display:none} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin span{font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin small{font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin.fehlt small{color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin:hover{background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin:hover span{color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin:focus-visible{outline:var(--ring) solid var(--licht);outline-offset:var(--ring-abstand)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin-mehr summary{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin-zeile{border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin-zeile i{width:8px;height:8px;border:0;border-radius:2px;background:var(--f,var(--text-3))} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin-zeile b{font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin-zeile .wann b{font-family:var(--sans);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin-zeile small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-demn .termin-zeile.fehlt .was small{color:var(--warnung)} /* Neue Staffeln: Kopf mit Satz und Knoepfen rechts, die Befunde als Liste (Zeilen mit Linie) */ html[data-stil="kinosaal"]:not(#saal) #pl-staffeln{margin-top:var(--s7)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln>header{gap:var(--s1) var(--s3);margin-bottom:var(--s3)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-staffeln,#pl-fassungen)>header h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) :is(#pl-staffeln,#pl-fassungen)>header .klein:not(.knopf){font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .staffel-befunde{display:flex;flex-direction:column;gap:0} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .staffel-befund{grid-template-columns:40px minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:var(--s4) 0;border:0;border-top:var(--rand-b) solid var(--linie);border-radius:0;background:none} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .staffel-befund:last-child{border-bottom:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .staffel-befund:hover{border-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .staffel-befund>:is(img,.platz){width:40px;height:60px;border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-text{gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-text b{font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-text b a{text-decoration:underline;text-decoration-color:var(--linie-3);text-underline-offset:.22em} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-text b a:hover{text-decoration-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-text>small{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-text .chips{gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-text p.klein{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-knoepfe{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-knoepfe .ik{align-self:center} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-unvollstaendig{margin-top:var(--s5)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-unvollstaendig>p.klein{margin-bottom:var(--s2);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-unvollstaendig>p.klein b{font-weight:var(--g-halb);color:var(--text)} /* Werkzeugzeile: Filtern links, Knoepfe rechts, die Listen-Filter (Listen) als eigene Reihe darunter */ html[data-stil="kinosaal"]:not(#saal) .plan-werkzeug{gap:var(--s3);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .plan-werkzeug>.suchfeld{flex:0 1 320px;min-height:var(--hoehe-k)} html[data-stil="kinosaal"]:not(#saal) #pl-rechts{order:2;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #pl-filter{order:3;flex:1 1 100%;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #pl-filter:empty{display:none} html[data-stil="kinosaal"]:not(#saal) #pl-filter .chip i{width:8px;height:8px;border-radius:2px} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt>p.klein{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt>section.abschnitt>header{gap:var(--s2);margin-bottom:var(--s3)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt>section.abschnitt>header h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt>section.abschnitt>header .klein:not(.knopf){display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 var(--s2);border-radius:var(--r-rund);background:var(--flaeche-3);color:var(--text-2);font-size:var(--t-13);font-weight:var(--g-halb);font-variant-numeric:tabular-nums} /* Board: die Bahnen als Raster (Geschmack 2), jede eine Flaeche mit Kopf, Zaehler und Satz; Karten mit Plakat links, Plaketten im Text */ @media (min-width:821px){ html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .bahnen{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start;gap:var(--s4);overflow:visible;padding:0;margin:0} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .bahnen-huelle .reihe-pfeil{display:none} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .bahn.leer-bahn>header p{display:block} } html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .bahn{min-width:0;overflow:hidden} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .bahn>header{gap:var(--s1) var(--s2);align-items:center;margin-bottom:0;padding:var(--s3) var(--s4) var(--s2);border-bottom-width:2px} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .bahn>header b{font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .bahn>header small{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-rund);background:var(--flaeche-3);color:var(--text-2);font-family:var(--sans);font-size:var(--t-13);line-height:20px;font-weight:var(--g-halb);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .bahn>header p{text-wrap:wrap;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .bahn .karten{gap:var(--s2);padding:var(--s3);max-height:640px;scrollbar-width:thin} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .bahn .karten .leer{padding:var(--s4) var(--s2);border-color:var(--linie-2);border-radius:var(--r-feld);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .pk{grid-template-columns:40px minmax(0,1fr);gap:var(--s3);padding:var(--s3);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .pk>:is(img,.platz){width:40px;height:60px;border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .pk b{font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .pk .meta{margin-top:2px;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .pk .marken{gap:var(--s1) var(--s2);margin-top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .pk .marken .leise.klein{font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .pk .fortschritt{gap:var(--s2);font-family:var(--sans);font-size:var(--t-13);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .pk .fortschritt .balken{width:48px;border-radius:var(--r-rund);background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .pk.davor{box-shadow:0 -2px 0 var(--licht)} /* Listen: grosse Karten (ab 600 breit), eine Satzkante je Karte; die Teile gelten auch in der Schublade */ html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .grosskarten{grid-template-columns:repeat(auto-fill,minmax(min(100%,600px),1fr));gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk{background:var(--flaeche);border-color:var(--linie-2);border-radius:var(--r-flaeche);box-shadow:inset 3px 0 0 var(--gk-farbe);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk:hover{border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-kopf{grid-template-columns:72px minmax(0,1fr);gap:var(--s3) var(--s4);padding:var(--s4) var(--s4) var(--s3) var(--s5)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-kopf>:is(img,.platz){grid-row:span 2;width:72px;height:108px;border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-aktionen{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-aktionen .feld-rahmen{flex:0 1 240px} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-aktionen select.feld{width:100%;min-height:var(--hoehe-k);padding:0 var(--s7) 0 var(--s3);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-aktionen>span{gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-titel{display:flex;flex-direction:column;gap:2px;min-width:0} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-titel h3{gap:var(--s2);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-titel h3 button{color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-titel h3 button:hover{text-decoration:underline;text-decoration-color:var(--linie-3);text-underline-offset:.2em} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-titel h3 small{font-family:var(--sans);font-size:var(--t-13);font-weight:var(--g-text);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-titel .unter{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-titel .info{margin-top:0;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-titel .chips{margin-top:var(--s1);gap:var(--s1) var(--s2)} /* Daten als Werte: Etikett links (160), der Wert daneben, eine Spalte, Zeilen durch Linien getrennt */ html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-daten{display:flex;flex-direction:column;gap:0} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-daten{padding:var(--s2) var(--s4) var(--s3) var(--s5);border-top:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-daten>div{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:var(--s4);align-items:baseline;min-height:28px;padding:var(--s1) 0;border-top:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-daten>div:first-child{border-top:0} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-daten dt{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-daten dd{font-size:var(--t-14);line-height:var(--z-14);color:var(--text);text-wrap:wrap;font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-daten dd a{color:var(--text);text-decoration:underline;text-decoration-color:var(--linie-3);text-underline-offset:.2em} /* In Plex: ein Modul je Treffer, eine Zeile je Fassung oder Staffel; Bitrate und Groesse in festen Spalten rechtsbuendig */ html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-plex{padding:var(--s3) var(--s4);border-color:var(--linie-2);border-radius:var(--r-flaeche);background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-plex+.gk-plex{margin-top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-plex .plexkopf{gap:var(--s2);padding:0 0 var(--s2);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-plex .plexkopf b{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-plex .plexzeile{grid-template-columns:44px minmax(0,1fr) 96px 80px;gap:2px var(--s3);padding:var(--s2) 0;border-top-color:var(--linie);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-plex .plexzeile b{font-family:var(--sans);font-size:var(--t-13);font-weight:var(--g-halb);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-plex .plexzeile .mono{font-family:var(--sans);font-size:var(--t-14);line-height:var(--z-14);color:var(--text);text-align:right;font-variant-numeric:tabular-nums lining-nums} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-plex .plexzeile .ton{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Teile: Kopf 14 halbfett mit Zahl oder Quelle, darunter der Block an derselben Kante */ html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-teil{gap:var(--s2);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-teil{padding:var(--s3) var(--s4) 0 var(--s5)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-teil b{font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-block{padding:var(--s1) var(--s4) var(--s3) var(--s5)} html[data-stil="kinosaal"]:not(#saal) .schublade .gk-block{padding-top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-text{max-width:var(--mass);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-mehr{min-height:24px;padding:var(--s1) 0 0;font-size:var(--t-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-mehr:hover{color:var(--text)} /* Staffeln: je Staffel Nummer und Stand, die Folgen als Raster darunter ueber die ganze Breite (Folgen, Variante Raster) */ html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-staffel{grid-template-columns:40px minmax(0,1fr);gap:var(--s2) var(--s3);padding:var(--s2) 0;border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-staffel .nr{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-staffel .nr small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-staffel .stand{gap:var(--s1) var(--s3);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-staffel .stand .balken{width:72px;border-radius:var(--r-rund);background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-staffel .stand .mono{font-family:var(--sans);font-size:var(--t-13);color:var(--text);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-staffel .folgenraster{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .folgenraster .folge{min-width:0;height:auto;min-height:40px;padding:2px var(--s1);border-radius:var(--r-marke);border:var(--rand-b) solid var(--linie-2);background:var(--flaeche-2);color:var(--text);font-family:var(--sans);font-size:var(--t-13);line-height:16px;font-weight:var(--g-halb);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .folgenraster .folge small{font-family:var(--sans);font-size:var(--t-13);line-height:16px;font-weight:var(--g-text);color:inherit;opacity:.8} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .folgenraster .folge.plex{border-color:var(--gut-rand);background:var(--gut-tief);color:var(--gut)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .folgenraster .folge.habe{border-color:var(--gut-rand);background:var(--flaeche-2);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .folgenraster .folge.faellig{border-color:var(--warnung-rand);color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .folgenraster .folge.kommt{border-style:dashed;color:var(--text-3)} /* Notizen: Datum in einer Spalte (48), Text, Loeschen; das Feld darunter mit Beschriftung */ html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-notizen .notiz{grid-template-columns:48px minmax(0,1fr) auto;gap:var(--s2);padding:var(--s1) 0;border-top-color:var(--linie);font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-notizen time{font-family:var(--sans);font-size:var(--t-13);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-notizen .notiz button{min-width:24px;min-height:24px;padding:0;color:var(--text-3);font-size:var(--t-16)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-notizen .notiz button:hover{color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-block>.feld-rahmen{display:grid;margin-top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) input.gk-notiz-feld{margin-top:0;min-height:var(--hoehe-k);padding:0 var(--s3);font-size:var(--t-14)} /* Fuss: angelegt, darunter die Wege (TMDB, IMDb, Verknuepfung, Titelseite) an der Kante der Karte */ html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-fuss{flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s3) var(--s4) var(--s3) var(--s5);border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-fuss>.klein{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-fuss .rechts{margin-left:0;gap:var(--s1)} /* Schublade eines Eintrags (Blatt aus Runde 6b): Plakat mit Ecken, Bereich und Liste als Plakette, Teile durch Linien getrennt, Verlauf */ html[data-stil="kinosaal"]:not(#saal) .schublade [data-inv~="planung.eintrag.plakat"]{gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .schublade [data-inv~="planung.eintrag.plakat"]>:is(img,.platz){border-radius:var(--r-werk)!important;background:var(--film-tief)!important;box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) .schublade [data-inv~="planung.eintrag.angabe.bereich-liste"]{display:inline-flex;align-items:center;align-self:flex-start;min-height:var(--hoehe-marke);padding:0 var(--s2);border-radius:var(--r-marke);border:var(--rand-b) solid var(--linie-3);color:var(--text-2);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);letter-spacing:0;text-transform:none} html[data-stil="kinosaal"]:not(#saal) .schublade [data-inv~="planung.eintrag.angabe.titel"]{font-family:var(--kond);font-weight:var(--g-kopf);line-height:1.15} html[data-stil="kinosaal"]:not(#saal) .schublade [data-inv~="planung.eintrag.angabe.titel"] small{margin-left:var(--s2);font-family:var(--sans);font-size:var(--t-16);font-weight:var(--g-text);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .schublade .gk-titel>.chips:last-child{gap:var(--s2);align-items:flex-end} html[data-stil="kinosaal"]:not(#saal) .schublade-inhalt>section[data-inv^="planung.eintrag"]{margin-top:var(--s4);padding-top:var(--s4);border-top:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) .schublade-inhalt>section[data-inv^="planung.eintrag"] .gk-daten{padding-top:0} html[data-stil="kinosaal"]:not(#saal) .schublade [data-inv~="planung.eintrag.verlauf"] .herkunft{padding-left:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .schublade [data-inv~="planung.eintrag.verlauf"] .herkunft::before{background:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .schublade [data-inv~="planung.eintrag.verlauf"] .herkunft>div{padding-bottom:var(--s3);font-size:var(--t-14);line-height:var(--z-14);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .schublade [data-inv~="planung.eintrag.verlauf"] .herkunft>div::before{background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .schublade [data-inv~="planung.eintrag.verlauf"] .herkunft time{font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3);font-variant-numeric:tabular-nums} /* Fassungsupgrade (Auftraege 81b und 108): der Zugang als Modul, der Filter auf zwei Achsen mit dem Namen der Achse in Text 3, je Titel eine Karte (Planungskarte) mit den weiteren Funden als Liste, Gruppenkopf 18 mit Zahl */ html[data-stil="kinosaal"]:not(#saal) #pl-fassungen>header{gap:var(--s1) var(--s3);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-zugang{margin-bottom:var(--s5);padding:var(--s5);border-color:var(--linie-2);border-radius:var(--r-flaeche);background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-filter{gap:var(--s2) var(--s4)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-filter-name{font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-mittel);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-filter-gruppe+.fw-filter-gruppe{border-inline-start-color:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-gruppe{gap:var(--s2);margin:var(--s6) 0 var(--s3);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-gruppe small{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 var(--s2);border-radius:var(--r-rund);background:var(--flaeche-3);color:var(--text-2);font-family:var(--sans);font-size:var(--t-13);font-weight:var(--g-halb);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-befunde{gap:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-titel{gap:var(--s3);padding:var(--s4);border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-befund{padding:0;border:0;border-radius:0;background:none} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-befund>:is(img,.platz){width:40px;height:60px;border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-text b{font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-text b small{font-size:var(--t-14);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-grund{font-size:var(--t-14);line-height:var(--z-14);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-vergleich{font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-vergleich dt{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-vergleich dd{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen :is(.fw-release code,.fw-fund-release){font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-fund{border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-fund-fassung{font-size:var(--t-14);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-fund-angaben{font-size:var(--t-13);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-ohne{gap:var(--s2) var(--s4)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-ohne>.klein{font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-ohne-titel{font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) #pl-fassungen .fw-ohne-titel small{font-size:var(--t-13);color:var(--text-3);font-variant-numeric:tabular-nums} /* Schmaler PC (bis 1250): die Eingabezeile unter dem Kopf ueber die ganze Breite */ @media (max-width:1250px){ html[data-stil="kinosaal"]:not(#saal) #pl-eingabe{flex:1 1 100%;justify-content:flex-start} } /* Handy (bis 820): Eingabe in zwei Reihen (Feld und Ausfuehrlich, dann Bereich, Liste, Eintragen), Bahnwahl, eine Bahn zur Zeit, Karten eng */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .kopf:has(#pl-kopfzahl){margin-top:var(--s2);margin-bottom:var(--s4)} html[data-stil="kinosaal"]:not(#saal) #pl-kopfzahl{font-size:var(--t-32);line-height:var(--z-32)} html[data-stil="kinosaal"]:not(#saal) #pl-eingabe .pl-eintragfeld{flex:1 1 0;min-width:0;max-width:none} html[data-stil="kinosaal"]:not(#saal) #pl-eingabe .pl-eintragwahl{align-items:flex-end} html[data-stil="kinosaal"]:not(#saal) #pl-eingabe .pl-eintragwahl .feld-rahmen{flex:1 1 0} html[data-stil="kinosaal"]:not(#saal) #pl-eingabe .pl-eintragwahl select.feld{width:100%;padding-right:var(--s6)} html[data-stil="kinosaal"]:not(#saal) .pl-steuer{margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .staffel-befund{grid-template-columns:40px minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) #pl-staffeln .sb-knoepfe{grid-column:1/-1;justify-content:flex-start} html[data-stil="kinosaal"]:not(#saal) .plan-werkzeug>.suchfeld{flex:1 1 100%} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .bahn{flex:0 0 100%} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-kopf{grid-template-columns:56px minmax(0,1fr);padding:var(--s3) var(--s3) var(--s3) var(--s4)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-kopf>:is(img,.platz){width:56px;height:84px} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-aktionen{grid-column:1/-1;flex-wrap:nowrap} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-aktionen .feld-rahmen{flex:1 1 0} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-daten>div{grid-template-columns:112px minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt :is(.gk-daten,.gk-teil,.gk-block){padding-left:var(--s4);padding-right:var(--s3)} html[data-stil="kinosaal"]:not(#saal) #pl-inhalt .gk-fuss{padding-left:var(--s4);padding-right:var(--s3)} html[data-stil="kinosaal"]:not(#saal) :is(#pl-inhalt,.schublade) .gk-plex .plexzeile{grid-template-columns:36px minmax(0,1fr) auto auto} } /* ---------------------------------------------------------------- Anfragen (Runde 7a, 23.10.2026): Suchen, Meine Anfragen, Downloads, Entscheiden Grundlage: scratchpad/a84/prototyp/anfragen-suchen.html, -meine, -downloads, -entscheiden und css/seiten.css (47-anfragen), Vorgabe 03-PROTOTYP-VORGABE.md Abschnitt 8 "Anfragen" mit den vier Reitern. Aufbau wie heute (app/anfragen.js): Kopf mit Satz, Reiter (nur, was das Konto darf; Freunde ihren ersten erlaubten), Inhalt des Reiters. Entscheiden ohne eigenen Kasten "Verwaltung > Anfragen" (Nachtrag A84d): die Abschnitte stehen wie in den anderen Reitern. Downloads teilen (Auftrag 112) reicht nur mit dem Knopf hinein, der Dialog gehoert app/teilen.js. Fenster Upgrade vorschlagen, Fehler melden und Verlauf ueber MX.dialog (Runde 2b, Zusatz unter dem Titel seit Runde 6b). Kopf Titel in der Kondensierten 32, der Satz 16 in Text 2 Suchen Feld (Beschriftung sichtbar), Art und Suchen in einer Reihe, unten buendig; Treffer als Liste mit Plakat 64, Titel 18 in der Kondensierten, Stand als Status, Handlungen rechts untereinander; Staffeln waehlen auf Flaeche 2 Downloads der Block des Desktop-Clients als Modul mit den Auftraegen als Zeilen; die Dateien als Tabelle mit Namen in Mono Entscheiden die Abschnitte mit Kopf 24 und dem Stand als Status, darunter die Liste wie in Meine Anfragen */ html[data-stil="kinosaal"]:not(#saal) .anfragen>.kopf{margin-top:var(--s5);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .anfragen>.kopf h1{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .anfragen>.kopf .unterzeile{margin-top:var(--s2);max-width:var(--mass);font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #anf-reiter{margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) #anf-reiter a span{margin-left:var(--s1)} /* Suchen: Feld, Art und Suchen in einer Reihe, unten buendig */ html[data-stil="kinosaal"]:not(#saal) #anf-suchform{align-items:flex-end;gap:var(--s2);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) #anf-suchform .feld-rahmen:has(#anf-q){flex:1 1 360px;max-width:640px} html[data-stil="kinosaal"]:not(#saal) #anf-suchform .feld-rahmen:has(#anf-typ){flex:0 1 220px} html[data-stil="kinosaal"]:not(#saal) #anf-suchform :is(#anf-q,#anf-typ){width:100%} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-beispiel{margin-bottom:var(--s4)} /* Liste der Treffer und Anfragen: einspaltig, Plakat 64, Text, Handlungen rechts untereinander; Zeilen durch Linien getrennt */ html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-liste{grid-template-columns:minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-zeile{grid-template-columns:64px minmax(0,1fr) auto;gap:var(--s4);padding:var(--s4) 0;border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-zeile.ohne-bild{grid-template-columns:minmax(0,1fr) auto} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-poster{width:64px;height:96px;border-radius:var(--r-werk);background:var(--film-tief);box-shadow:var(--kante);color:var(--film);font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-text{display:flex;flex-direction:column;gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-text h3{margin-bottom:0;font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-text h3 a:hover{text-decoration:underline;text-decoration-color:var(--linie-3);text-underline-offset:.2em} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-text h3 .leise{font-family:var(--sans);font-weight:var(--g-text);font-size:var(--t-14);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-text .statuszeile{gap:var(--s1) var(--s3);max-width:none;margin-top:0;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-text .statuszeile b{font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-text .statuszeile a{color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-text p{margin-top:0;max-width:var(--mass)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-text p.klein{font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-beschreibung{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-aktion{gap:var(--s2);min-width:160px} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-aktion .knopf{min-height:var(--hoehe-k);padding:0 var(--s4);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-aktion .knopf.leise.gefahr{border-color:var(--fehler-rand)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-aktion .knopf.leise.gefahr:hover{border-color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-staffeln{align-items:flex-start;gap:var(--s3);max-width:none;margin-top:var(--s2);padding:var(--s3) var(--s4);border-radius:var(--r-feld);background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-staffeln .chip small{color:inherit;opacity:.72} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-staffeln .chip input{width:16px;height:16px} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-kommentar{width:min(420px,100%);gap:var(--s1);font-size:var(--t-13);font-weight:var(--g-halb);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-kommentar small{font-weight:var(--g-text);color:var(--text-3)} /* Downloads: der Block des Clients als Modul, die Auftraege als Zeilen mit Balken; die Dateien als Tabelle */ html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-client{margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-client .konto-leiste h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .anfragen .dl-auftrag{gap:var(--s1);padding:var(--s3) 0;border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .anfragen .dl-kopf b{font-family:var(--mono);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .anfragen .dl-balken{border-radius:var(--r-rund);background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) .anfragen .dl-balken i{background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .anfragen .dl-auftrag:has(.dl-kopf .status.ok) .dl-balken i{background:var(--gut)} html[data-stil="kinosaal"]:not(#saal) .anfragen .dl-fuss{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-dateien{gap:var(--s2);margin-top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-dateitabelle td{border-top:0;font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-dateitabelle td:first-child{font-family:var(--mono);font-size:var(--t-13);text-wrap:wrap;word-break:break-all;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-dateitabelle td.r{text-wrap:nowrap} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-dateitabelle td.m{font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-dateien>.tabelle-box{border:var(--rand-b) solid var(--linie-2)!important} /* Entscheiden: Umfang als Chips, je Abschnitt Kopf 24 mit dem Stand als Status, darunter die Liste */ html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-filter{margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-abschnitt{margin-bottom:var(--s6)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-abschnitt h2{gap:var(--s3);margin-bottom:var(--s2);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24)} /* Der Hinweis (Upgrade wird erst geprueft, Beispielkatalog) als leiser Satz wie im Prototyp, auf der Seite und im Fenster */ html[data-stil="kinosaal"]:not(#saal) :is(.anfragen,dialog.dlg) .anf-hinweis{padding:0;border:0;border-radius:0;background:none;color:var(--text-3)} /* Fenster: Verlauf (Zeit in einer Spalte, gleich breite Ziffern), Merkmale und Fehlerarten */ html[data-stil="kinosaal"]:not(#saal) dialog.dlg .anf-verlauf li{grid-template-columns:150px minmax(0,1fr);gap:var(--s4);border-bottom-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .anf-verlauf .m{font-family:var(--sans);font-size:var(--t-13);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .anf-merkmale .chip:has(input:checked){border-color:var(--licht);background:var(--flaeche-3);color:var(--text)} /* Handy (bis 820): Plakat 48, die Handlungen als Reihe unter dem Text, Feld ueber die ganze Breite, Art und Suchen darunter */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .anfragen>.kopf{margin-top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .anfragen>.kopf h1{font-size:var(--t-32);line-height:var(--z-32)} html[data-stil="kinosaal"]:not(#saal) #anf-suchform .feld-rahmen:has(#anf-q){flex:1 1 100%;max-width:none} html[data-stil="kinosaal"]:not(#saal) #anf-suchform .feld-rahmen:has(#anf-typ){flex:1 1 0} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-zeile{grid-template-columns:48px minmax(0,1fr);gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-zeile.ohne-bild{grid-template-columns:minmax(0,1fr)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-poster{width:48px;height:72px;font-size:var(--t-18)} html[data-stil="kinosaal"]:not(#saal) .anfragen .anf-aktion{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;min-width:0} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .anf-verlauf li{grid-template-columns:minmax(0,1fr);gap:var(--s1)} } /* ---------------------------------------------------------------- Docs (Runde 7a, 23.10.2026): Uebersicht, Seite, Aenderungen, Suche Grundlage: scratchpad/a84/prototyp/docs.html, docs-seite.html, docs-aenderungen.html, docs-suche.html und css/seiten.css (70-docs), dazu bausteine.css .lesetext und .hinweisband (Variante Fundleiste, SPEZIFIKATION.md Abschnitt 8a), Vorgabe 03-PROTOTYP-VORGABE.md Abschnitt 8 "Docs > ...". Aufbau wie heute (app/docs.js): Gruppen links mit dem Suchfeld, in der Mitte der Text, rechts das Inhaltsverzeichnis; ohne die Spalte rechts steht es zugeklappt ueber dem Text. Nur Klassen von heute, nur unter kinosaal. Navigation Gruppen als Kennzeile 13 (statt Versalien in Mono), Seiten 14, die offene Seite auf Flaeche 3 mit dem Strich in Licht Text Lesetext in Lesegroesse 18 mit hoechstens 60ch (rund 70 Zeichen je Zeile, Geschmack 3); Kopf 32, Abschnitte 24 und 18 in der Kondensierten; Tabellen 14, Code mit Flaeche 2; Meta mit Punkten zwischen den Angaben Uebersicht die Seiten einer Gruppe als Kacheln (Radius 14) im Raster Fundleiste das Hinweisband als Leiste ueber dem Text, klebt unter der Kopfleiste; die gewaehlte Fundstelle in Licht Aenderungen je Monat ein Aufklapper mit Zahl, je Eintrag das Datum vorn in gleich breiten Ziffern Alle Regeln haengen an der Seite (.docs): die Ankuendigung (MX.ankuendigungZeigen) traegt ebenfalls .docs-text und bleibt, wie sie ist. Links im Text unterstrichen, Knoepfe und Chips im Text (Download, Erneut versuchen, Uebersicht) nicht. */ html[data-stil="kinosaal"]:not(#saal) .docs{grid-template-columns:240px minmax(0,1fr) 200px;gap:var(--s7);margin-top:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav{top:calc(var(--klebe-oben) + var(--s4));display:flex;flex-direction:column;gap:2px;padding-right:0;scrollbar-width:thin} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav>*{flex-shrink:0} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav .suchfeld{margin-bottom:var(--s3);min-height:var(--hoehe-k)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav .suchfeld input{padding:0;font-size:var(--t-14)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav .gruppe{margin:var(--s4) 0 var(--s1);padding:0 var(--s3);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);letter-spacing:0;text-transform:none;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav a{align-items:center;min-height:32px;padding:var(--s1) var(--s3);border-radius:var(--r-feld);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav a:hover{background:var(--flaeche-2);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav a.an{background:var(--flaeche-3);color:var(--text);box-shadow:inset 2px 0 0 var(--licht)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav a.fehlt{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav a small{font-family:var(--sans);font-size:var(--t-13);color:var(--text-3)} /* Text: Lesetext in Lesegroesse mit rund 70 Zeichen je Zeile */ html[data-stil="kinosaal"]:not(#saal) .docs .docs-text{max-width:60ch;font-size:var(--t-18);line-height:var(--z-18);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text>*+*{margin-top:var(--s4)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text h1{margin-bottom:var(--s2);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:0;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text h2{margin-top:var(--s7);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text h3{margin-top:var(--s5);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text h4{font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text p{margin-top:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text :is(ul,ol){gap:var(--s1);padding-left:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text a:where(:not(.knopf,.chip)){color:var(--text);text-decoration:underline;text-decoration-color:var(--linie-3);text-underline-offset:.2em} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text a:where(:not(.knopf,.chip)):hover{text-decoration-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text strong{font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text code{padding:1px 4px;border:0;border-radius:var(--r-marke);background:var(--flaeche-2);font-size:.86em;color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text pre{padding:var(--s3) var(--s4);border-color:var(--linie-2);border-radius:var(--r-feld);background:var(--flaeche);font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text pre code{padding:0;background:none} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text blockquote{border-left-color:var(--linie-3);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text hr{border-top-color:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text table{font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text th{font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text-3);border-bottom-color:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text td{border-bottom-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text td:first-child{font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text mark{background:var(--warnung-tief);color:var(--warnung)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text mark.docs-fund-marke.an{background:var(--licht);color:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-meta{gap:var(--s1) 0;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .docs .docs-meta>span+span::before{content:"\00b7";margin:0 var(--s2);color:var(--text-4)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-stapel{border-top-color:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-stapel-zeile{border-bottom-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-stapel-zeile dl{grid-template-columns:160px minmax(0,1fr);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-stapel-zeile dt{font-size:var(--t-13);font-weight:var(--g-text);color:var(--text-3)} /* Uebersicht: die Seiten einer Gruppe als Kacheln */ html[data-stil="kinosaal"]:not(#saal) .docs .docs-text:has(>.docs-uebersicht){max-width:none} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text:has(>.docs-uebersicht)>p{max-width:60ch} html[data-stil="kinosaal"]:not(#saal) .docs .docs-uebersicht{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-uebersicht a{gap:var(--s1);min-height:0;padding:var(--s4);border-color:var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche);color:var(--text);text-decoration:none} html[data-stil="kinosaal"]:not(#saal) .docs .docs-uebersicht a:hover{border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-uebersicht a b{font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-uebersicht a small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-uebersicht a.fehlt{opacity:.6} /* Inhaltsverzeichnis rechts (und zugeklappt ueber dem Text, wo die Spalte fehlt) */ html[data-stil="kinosaal"]:not(#saal) .docs .docs-toc{top:calc(var(--klebe-oben) + var(--s4));font-size:var(--t-13);line-height:var(--z-13)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-toc b{margin-bottom:var(--s2);font-family:var(--sans);font-size:var(--t-13);font-weight:var(--g-halb);letter-spacing:0;text-transform:none;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .docs :is(.docs-toc,.docs-toc-klapp) a{border-left-color:var(--linie-2);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .docs :is(.docs-toc,.docs-toc-klapp) a.h3{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .docs :is(.docs-toc,.docs-toc-klapp) a:is(:hover,.an){color:var(--text);border-left-color:var(--licht)} html[data-stil="kinosaal"]:not(#saal) .docs :is(.docs-toc,.docs-toc-klapp) a small{font-size:var(--t-13);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .docs .docs-toc-klapp{padding:var(--s2) var(--s4);border-color:var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-toc-klapp summary{min-height:32px;color:var(--text);font-weight:var(--g-halb)} /* Blaettern: zurueck links, weiter rechts, unter einer Linie */ html[data-stil="kinosaal"]:not(#saal) .docs .docs-blaettern{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s7);padding-top:var(--s4);border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-blaettern a{max-width:none;font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb);color:var(--text);text-decoration:none} html[data-stil="kinosaal"]:not(#saal) .docs .docs-blaettern a:hover{text-decoration:underline;text-decoration-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-blaettern small{font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-text);color:var(--text-3)} /* Fundleiste (Hinweisband, Variante Fundleiste): klebt unter der Kopfleiste ueber dem Text */ html[data-stil="kinosaal"]:not(#saal) .docs .docs-text .docs-fund{gap:var(--s2) var(--s4);padding:var(--s2) var(--s2) var(--s2) var(--s4);border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-feld);background:var(--flaeche-2);box-shadow:var(--hebung);color:var(--text);font-size:var(--t-14);line-height:var(--z-14)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text .docs-fund b{font-family:var(--sans);font-weight:var(--g-halb);font-variant-numeric:tabular-nums} /* Aenderungen: je Monat ein Aufklapper mit Zahl, je Eintrag das Datum vorn */ html[data-stil="kinosaal"]:not(#saal) .docs .docs-monat{margin-top:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-monat>summary{align-items:center;min-height:var(--zeile);padding-bottom:var(--s2);border-bottom-color:var(--linie-2)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-monat>summary h2{margin:0;font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-monat>summary>svg{width:16px;height:16px;stroke:var(--text-3);stroke-width:1.5} html[data-stil="kinosaal"]:not(#saal) .docs .docs-monat-zahl{display:inline-flex;align-items:center;min-height:var(--hoehe-marke);padding:0 var(--s2);border:var(--rand-b) solid var(--linie-3);border-radius:var(--r-marke);font-family:var(--sans);font-size:var(--t-13);line-height:var(--z-13);font-weight:var(--g-halb);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .docs .docs-eintrag{border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text .docs-eintrag h3{font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-datum{margin-right:var(--s3);font-family:var(--sans);font-size:var(--t-14);font-weight:var(--g-halb);letter-spacing:0;color:var(--text-3);font-variant-numeric:tabular-nums} /* Suche: die Treffer als Liste mit Linie, das Suchwort markiert */ html[data-stil="kinosaal"]:not(#saal) .docs .docs-treffer{gap:0} html[data-stil="kinosaal"]:not(#saal) .docs .docs-treffer a{padding:var(--s3) 0;border-radius:0;border-top:var(--rand-b) solid var(--linie);background:none;color:var(--text);text-decoration:none} html[data-stil="kinosaal"]:not(#saal) .docs .docs-treffer a b{font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-treffer a:hover b{text-decoration:underline;text-decoration-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-treffer a small{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-3)} /* Download des Desktop-Clients (Seite Desktop-Client): ein Modul mit dem Namen in der Kondensierten */ html[data-stil="kinosaal"]:not(#saal) .docs .docs-download .dd-text b{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-download :is(.dd-text span,.dd-beigaben){font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-download .dd-text code{font-size:var(--t-13)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-download .dd-mirrors .knopf small{margin-left:var(--s1);font-size:var(--t-13)} /* Schmaler PC: ohne Spalte rechts, das Inhaltsverzeichnis zugeklappt ueber dem Text */ @media (max-width:1250px){ html[data-stil="kinosaal"]:not(#saal) .docs{grid-template-columns:220px minmax(0,1fr);gap:var(--s6)} } /* Handy: die Navigation als rollende Reihe aus Pillen, der Text ueber die ganze Breite */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .docs{grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav{flex-direction:row;gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav .suchfeld{margin-bottom:0} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav a{border-color:var(--linie-3);border-radius:var(--r-rund);min-height:var(--hoehe-chip)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-nav a.an{box-shadow:none;border-color:var(--licht);background:var(--licht);color:var(--grund)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text{max-width:none} html[data-stil="kinosaal"]:not(#saal) .docs .docs-text h1{font-size:var(--t-32);line-height:var(--z-32)} html[data-stil="kinosaal"]:not(#saal) .docs .docs-stapel-zeile dl{grid-template-columns:minmax(0,1fr)} } /* ---------------------------------------------------------------- Upload (Runde 7a, 23.10.2026): nur im Desktop-Client Grundlage: scratchpad/a84/prototyp/upload.html und css/seiten.css (70-docs, Upload), Vorgabe 03-PROTOTYP-VORGABE.md Abschnitt 8 "Upload". Aufbau wie heute (app/upload.js): Kopf mit Satz und den Knoepfen rechts, die Boxen mit Fuellstand als Raster aus Modulen, die Statusleiste, die Warteschlange; Fenster Wohin damit?, Upload entfernen? und Einstellungen des Clients ueber MX.dialog. Im Browser gibt es die Seite nicht; im Desktop-Client sieht sie aus wie am PC. Boxen je Box ein Modul: Name in der Kondensierten 18, Laufwerk in Mono, Standard als Plakette rechts, Fuellstand 6 hoch (normal in Licht, eng in Gelb, voll in Rot), darunter frei und belegt in gleich breiten Ziffern Leiste eine Flaeche mit der Zahl der offenen Uploads als Kennzahl, den Angaben in einer Zeile und den Knoepfen rechts; die Hinweise (Sperre, Meldung an den Betrieb) als Hinweis ueber der Zeile Liste Zeilen mit Linie statt Kaesten: Stand links, Name, Angaben, Balken und Lage untereinander, die Knoepfe rechts (Entfernen rot) */ html[data-stil="kinosaal"]:not(#saal) .up>.kopf{align-items:flex-end;margin-top:var(--s5);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .up>.kopf h1{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .up>.kopf .unterzeile{margin-top:var(--s2);max-width:var(--mass);font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .up>.kopf .kopf-rechts{gap:var(--s2)} /* Boxen mit Fuellstand */ html[data-stil="kinosaal"]:not(#saal) #up-boxen{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s4);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) #up-boxen .up-box-karte{gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) #up-boxen .up-box-kopf{gap:var(--s2) var(--s3)} html[data-stil="kinosaal"]:not(#saal) #up-boxen .up-box-kopf b{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-18);line-height:var(--z-18);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #up-boxen .up-box-kopf .mono{color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #up-boxen .up-box-kopf>.mono+.status{margin-left:auto} html[data-stil="kinosaal"]:not(#saal) :is(#up-boxen,dialog.dlg .up-wahl) .balken{height:6px;border-radius:var(--r-rund);background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) :is(#up-boxen,dialog.dlg .up-wahl) .balken>span{border-radius:var(--r-rund)} html[data-stil="kinosaal"]:not(#saal) :is(#up-boxen,dialog.dlg .up-wahl) .balken>span.ok{background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) #up-boxen .up-box-karte>.klein{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2);font-variant-numeric:tabular-nums} /* Statusleiste: eine Flaeche mit Kennzahl, Angaben und Knoepfen; die Hinweise darueber */ html[data-stil="kinosaal"]:not(#saal) #up-leiste{gap:var(--s3) var(--s5);margin-bottom:var(--s5)} html[data-stil="kinosaal"]:not(#saal) #up-leiste:has(>.statuszeile){padding:var(--s4) var(--s5);border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche)} html[data-stil="kinosaal"]:not(#saal) #up-leiste .statuszeile{gap:var(--s2) var(--s5);font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #up-leiste .statuszeile b{font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #up-leiste [data-inv~="upload.leiste.angabe.offen"]{display:inline-flex;flex-direction:column;font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) #up-leiste [data-inv~="upload.leiste.angabe.offen"] b{font-family:var(--kond);font-weight:var(--g-titel);font-size:var(--t-24);line-height:var(--z-24);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #up-leiste .up-leiste-knoepfe{gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #up-leiste .up-sperre{flex:1 1 100%;gap:var(--s3);margin-bottom:0;padding:var(--s3) var(--s4);border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche-2);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #up-leiste .up-sperre svg{width:20px;height:20px;fill:none;stroke:var(--text-2);stroke-width:1.5} html[data-stil="kinosaal"]:not(#saal) #up-leiste .up-sperre b{font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) #up-leiste .up-sperre small{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} /* Warteschlange: Zeilen mit Linie, Stand links, Name und Angaben, Balken, Lage untereinander, Knoepfe rechts */ html[data-stil="kinosaal"]:not(#saal) #up-liste{gap:0} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-zeile{grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"st name kn" "st fs kn" "st lage kn";gap:var(--s1) var(--s4);padding:var(--s4) 0;border:0;border-top:var(--rand-b) solid var(--linie);border-radius:0;background:none;box-shadow:none} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-zeile:last-child{border-bottom:var(--rand-b) solid var(--linie)} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-zeile>.status{grid-area:st;align-self:center;justify-self:start;min-width:0} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-name{grid-area:name;gap:2px} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-fortschritt{grid-area:fs;gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-lage{grid-area:lage;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 var(--s3)} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-knoepfe{grid-area:kn;align-self:center;gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-name b{font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #up-liste :is(.up-name,.up-fortschritt,.up-lage) small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-quelle{font-family:var(--mono);color:var(--text-2);text-decoration:underline;text-decoration-color:var(--linie-3);text-underline-offset:.2em} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-quelle:hover{color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #up-liste .balken{height:4px;border-radius:var(--r-rund);background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) #up-liste .balken>span{border-radius:var(--r-rund)} html[data-stil="kinosaal"]:not(#saal) #up-liste .balken>span.akzent{background:var(--licht)} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-lage b{font-size:var(--t-14);line-height:var(--z-14);font-weight:var(--g-mittel);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-zeile.laeuft .up-lage b{color:var(--text)} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-knoepfe .ik{width:var(--hoehe-k);min-width:var(--hoehe-k);height:var(--hoehe-k);min-height:var(--hoehe-k);border-color:transparent} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-knoepfe .ik:hover{border-color:var(--linie-3)} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-knoepfe .ik.gefahr{border-color:var(--fehler-rand);color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-knoepfe .ik.gefahr:hover{background:var(--fehler-tief);border-color:var(--fehler)} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-leer-symbol svg{stroke:var(--text-3);stroke-width:1.5} /* Fenster: Wohin damit? (Posten, Wahl der Box), Einstellungen des Clients (Schalter, Schluessel) */ html[data-stil="kinosaal"]:not(#saal) dialog.dlg .up-posten-zeile small{font-size:var(--t-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .up-posten-zeile .feld-rahmen{align-self:stretch} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .up-symbol{border-radius:var(--r-feld);background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .up-box{gap:var(--s2);padding:var(--s3) var(--s4);border-color:var(--linie-2);border-radius:var(--r-flaeche);background:var(--grund)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .up-box:has(input:checked){border-color:var(--licht);background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .up-box:focus-within{outline:var(--ring) solid var(--licht)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .up-box small{font-size:var(--t-13);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .up-einst .schalterliste{border:var(--rand-b) solid var(--linie-2);border-radius:var(--r-flaeche)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .up-einst .schalterliste>div{gap:var(--s4);padding:var(--s3) var(--s4);border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .up-einst .schalterliste b{font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .up-einst .schalterliste small{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg :is(.up-einst,.up-dlg) .unterteil{margin-top:var(--s5);font-family:var(--sans);font-size:var(--t-13);font-weight:var(--g-halb);letter-spacing:0;text-transform:none;color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) dialog.dlg .up-pub code{font-size:var(--t-13);word-break:break-all} /* Handy und schmales Fenster: Knoepfe des Kopfs untereinander umbrechen, Zeile der Warteschlange mit dem Stand oben */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .up>.kopf{margin-top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) #up-liste .up-zeile{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"st kn" "name name" "fs fs" "lage lage"} } /* ---------------------------------------------------------------- Mods (Runde 7a, 23.10.2026): der Bereich Mods (Auftraege 89 und 92) Ohne Prototyp: der Bereich kam nach dem Inventar (13.86 bis 13.90; Nachtrag des Eigentuemers vom 15.10.2026 im Plan: neue Elemente in der Runde ihres Bereichs). Gebaut nach den Bausteinen der Seiten dieser Runde: Kopf wie Upload und Anfragen, je Abschnitt ein Modul mit Kopf 24, der Download als Karte auf Flaeche, die Pakete je Familie als Planungskarte mit Merkmalen als Plakette, die Fassungen als Zeilen mit Linie, die Verwaltung mit Tabellen (gestapelt am Handy) und dem Teilstueck-Upload mit Balken. Die Seite "Apps und Clients" (#/client) steht in derselben Datei auf denselben Bausteinen (.mods, .mods-abschnitt, .mods-karte) und bekommt das Kleid mit; ihr Ort im Konto bleibt Runde 7b. */ html[data-stil="kinosaal"]:not(#saal) .mods{gap:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .mods>.kopf{margin-top:var(--s5);margin-bottom:0} html[data-stil="kinosaal"]:not(#saal) .mods>.kopf h1{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-32);line-height:var(--z-32);letter-spacing:0} html[data-stil="kinosaal"]:not(#saal) .mods>.kopf .unterzeile{margin-top:var(--s2);max-width:var(--mass);font-size:var(--t-16);line-height:var(--z-16);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .mods-stapel{gap:var(--s5)} html[data-stil="kinosaal"]:not(#saal) .mods-abschnitt{display:flex;flex-direction:column;gap:var(--s3)} html[data-stil="kinosaal"]:not(#saal) .mods-abschnitt>h2{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .mods-abschnitt>h2 .leise{font-family:var(--sans);font-size:var(--t-14);font-weight:var(--g-text);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .mods-abschnitt>h3{margin-top:var(--s3);font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .mods-abschnitt>p.klein{max-width:var(--mass)} html[data-stil="kinosaal"]:not(#saal) .mods-hinweis{font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} /* Download: die Karte auf Flaeche (kein Kasten im Kasten), der Name in der Kondensierten 24, Pruefsumme in Mono */ html[data-stil="kinosaal"]:not(#saal) .mods .mods-karte{gap:var(--s3) var(--s5);padding:var(--s4) var(--s5);border-color:var(--linie);border-radius:var(--r-flaeche);background:var(--flaeche)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-karte.leer{border-style:dashed;border-color:var(--linie-3);background:none} html[data-stil="kinosaal"]:not(#saal) .mods .mods-karte-text{gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-karte-text b{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-24);line-height:var(--z-24);color:var(--text)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-karte.leer .mods-karte-text b{font-size:var(--t-18);line-height:var(--z-18);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-karte-text>span{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .mods .mods-karte-knoepfe .knopf small{margin-left:var(--s1);font-size:var(--t-13);font-weight:var(--g-text)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-sha{gap:var(--s2);font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-sha code{font-size:var(--t-13);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-beschreibung{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} /* Im Desktop-Client: der Mod-Manager auf Flaeche 3 mit dem Strich in Licht, der Fortschritt in Licht */ html[data-stil="kinosaal"]:not(#saal) .mods .mods-nativ{gap:var(--s3);padding:var(--s4) var(--s5);border-color:var(--linie-2);border-radius:var(--r-flaeche);background:var(--flaeche-2);box-shadow:inset 3px 0 0 var(--licht)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-nativ-kopf b{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .mods :is(.mods-fortschritt,.mods-hoch) .balken{height:4px;border-radius:var(--r-rund);background:var(--flaeche-3)} html[data-stil="kinosaal"]:not(#saal) .mods :is(.mods-fortschritt,.mods-hoch) .balken>span{border-radius:var(--r-rund);background:var(--licht)} /* Pakete: je Familie eine Karte, Name 18 in der Kondensierten, Merkmale als Plakette; Fassungen als Zeilen mit Linie */ html[data-stil="kinosaal"]:not(#saal) .mods .mods-familie{gap:var(--s2);padding:var(--s4) var(--s5);border-color:var(--linie-2);border-radius:var(--r-feld);background:var(--flaeche-2)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-familie h3{font-family:var(--kond);font-weight:var(--g-kopf);font-size:var(--t-18);line-height:var(--z-18)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-merkmale{gap:var(--s1)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-merkmale .status{background:none;border:var(--rand-b) solid var(--linie-3);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-zeile{gap:var(--s2) var(--s4);padding:var(--s3) 0;border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-zeile-text b{font-size:var(--t-16);line-height:var(--z-16);font-weight:var(--g-halb);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .mods .mods-zeile-text .klein:not(.knopf){font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3);font-variant-numeric:tabular-nums} html[data-stil="kinosaal"]:not(#saal) .mods .mods-aeltere>summary{min-height:32px;font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-titelliste{font-size:var(--t-14);line-height:var(--z-14);color:var(--text-2)} /* Verwalten: Hochladen als Knoepfe, laufende Uploads mit Balken, die Tabellen mit Aktionen rechts */ html[data-stil="kinosaal"]:not(#saal) .mods .mods-hochladen{gap:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-hoch{gap:var(--s1);padding:var(--s3) 0;border-top-color:var(--linie)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-hoch b{font-weight:var(--g-halb)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-tabelle td .klein:not(.knopf){font-size:var(--t-13);line-height:var(--z-13);color:var(--text-3)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-tabelle .mods-aktionen{gap:var(--s1)} /* Handy: Knoepfe der Karten ueber die ganze Breite (wie heute) */ @media (max-width:820px){ html[data-stil="kinosaal"]:not(#saal) .mods>.kopf{margin-top:var(--s2)} html[data-stil="kinosaal"]:not(#saal) .mods .mods-karte,html[data-stil="kinosaal"]:not(#saal) .mods .mods-familie{padding:var(--s3) var(--s4)} }