/* Warum eine eigene Schriftfamilie: Renés Schlagzeile hat ein Verhältnis von
   Breite zu Versalhöhe, das die Hausschrift nicht trifft — „Second Brain."
   geriet gegenüber „Build Your" um 13 Prozent zu breit und lief unter das
   Bild. Helvetica trifft dieses Verhältnis auf ein halbes Prozent; wo sie
   fehlt, ist Arial maßhaltig zu ihr. `isolation` macht die Bühne zum
   eigenen Stapel, damit das Bild mit `z-index: -1` hinter den Text rutscht
   und nicht hinter die Bühne selbst. */

/* Der Bildkasten und sein Ausschnitt — dreimal gemessen, zweimal daneben:

   Der Ausschnitt darf NICHTS von Renés eigener Schrift enthalten, sonst
   schimmert sie hinter der gesetzten durch (gesehen: sein „…rain." und mein
   „…rain." zwei Pixel versetzt übereinander). Seine Schlagzeile endet bei
   Quelle x=879, seine Reihe bei 856 — links also frühestens 880. Unten
   beginnt bei Quelle y=836 seine Fusslinie und bei 875 sein Fußtext; die
   zeichnet der Booster selbst, also endet der Ausschnitt bei 819.

   Bleibt die linke Kante bei 880: dort liegt der Schein des Gehirns, Renés
   Grund ist da (1,2,23) statt (0,2,13) — eine sichtbare Stufe. Sie
   verschwindet nicht durch Verschieben (links stünde Schrift), sondern durch
   Ausblenden über 70 Pixel. Unten braucht es das nicht: bei Quelle y=819 ist
   sein Grund schon genau `--fo-grund`.

   `z-index: -1` legt das Bild hinter die Schrift; dafür ist die Bühne oben
   ein eigener Stapel (`isolation`), sonst rutschte es hinter ihren Grund. */
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) > p:has(img.folieBild) {
  left: 674px; top: 0; width: 606px; height: 627px; display: block; z-index: -1; }
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) img.folieBild { width: 100%; height: 100%;
  max-width: none; max-height: none; object-fit: cover; object-position: left center;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 70px);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 70px); }

/* `padding: 0` und `border-bottom: 0` gegen die allgemeine `header`-Regel der
   Anwendung: Sie gab dem Kopf 13 x 24 Pixel und eine Trennlinie darunter —
   auf der Folie ein Strich quer unter der Marke, den Renés Entwurf nicht hat. */
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) > .folieKopf { left: 52px; top: 54px;
  gap: 16px; font-size: 1em; align-items: center; padding: 0; border-bottom: 0; }
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) .folieMarke { height: 42px; margin: 0; }
/* Dieselbe Stauchung wie bei der Schlagzeile und aus demselben Grund: Renés
   Wortmarke ist 174 breit UND 19 hoch — Helvetica liefert bei 174 nur 17. */
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) .folieWortmarke { font-size: 29.5px;
  font-weight: 700; letter-spacing: 0.031em; color: var(--fo-titel); line-height: 1;
  transform: scaleX(0.898); transform-origin: left center;
  position: relative; top: 4px; }
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) .folieKopfNummer,
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) .folieKopfKapitel { display: none; }

/* Die Stauchung ist gemessen, nicht geschmückt: bei 103 px trifft Helvetica
   Renés Versalhöhe, ist dabei aber 13 Prozent zu breit. 0,888 bringt beide
   Zeilen auf +-2 px an seine Kanten. */
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) > h1 { left: 60px; top: 158px; width: 740px;
  font-size: 103px; font-weight: 800; line-height: 1.0097; letter-spacing: 0;
  transform: scaleX(0.888); transform-origin: left top; }

.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) > blockquote { left: 60px; top: 414px;
  width: 530px; padding: 0; border-left: 0; font-size: 22.8px; line-height: 1.49;
  color: var(--fo-titel); }
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) > blockquote::before { content: "";
  position: absolute; left: 0; top: -25px; width: 49px; height: 4px;
  background: var(--fo-akzent); }

/* Die Reihe: drei gleich breite Fächer à 209 px. Renés Zeichen sitzen bei
   58, 267 und 477 und seine Trennstriche bei 242 und 452 — beides fällt
   zusammen, wenn die Liste bei 32 beginnt und jedes Fach 26 px Vorlauf hat.
   Eine feste Breite je Fach, keine vom Text abhängige: sonst wandern die
   Trenner mit der Wortlänge. Das letzte Fach darf wachsen, weil rechts kein
   Trenner mehr folgt — sonst bräche „with every project" auf drei Zeilen. */
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) > ul,
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) > ol { left: 32px; top: 539px; width: 640px;
  padding: 0; }
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) ul.folieReihe > li { font-size: 16.1px;
  line-height: 1.358; box-sizing: border-box; flex: none; width: 208.5px;
  padding: 0 0 0 26px; gap: 14px; align-items: center; color: var(--fo-titel); }
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) ul.folieReihe > li:first-child { padding-left: 26px; }
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) ul.folieReihe > li:last-child { width: auto; }
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) ul.folieReihe > li b { display: block;
  margin-bottom: 0; font-weight: 400; color: var(--fo-titel); }
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) .folieReiheSymbol,
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) .folieReiheBild { width: 43px; height: 43px; }

/* Die Farben sind an seiner Folie abgelesen, nicht aus der Haus-Palette
   gewaehlt: Untertext und beide Reihen-Zeilen sind bei ihm REIN WEISS
   (Histogramm der Buchstabenkerne), nicht das gedaempfte `--fo-leise`, das
   die allgemeine Reihen-Regel setzt. Der Fußtext liegt bei (198,195,190)
   und trifft damit `--fo-strich`.

   Renés Fußzeile ist links gruppiert: Titel, ein senkrechter Strich, das
   Datum in Akzentfarbe — und erst der dritte Teil steht rechts aussen. Die
   allgemeine Fassung zentriert den mittleren Teil; hier nicht. Der dritte
   Teil läuft weiter gesperrt als die beiden linken; das ist bei ihm so
   gemessen (402 px für 35 Zeichen gegen 110 für zehn). */
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) > .folieFuss { left: 52px; width: 1174px;
  top: 640px; padding-top: 25px; font-size: 15.3px; gap: 0;
  letter-spacing: 0.113em; justify-content: flex-start; color: var(--fo-strich);
  border-top: 1px solid var(--fo-linie); }
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) > .folieFuss > span:nth-child(2) {
  flex: none; text-align: left; color: var(--fo-akzent); }
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) > .folieFuss > span:nth-child(2)::before {
  content: "|"; color: var(--fo-strich); margin: 0 23px; }
.folieBuehne:is([data-layout="titel"], [data-layout="frei"][data-basis="titel"]) > .folieFuss > span:last-child {
  margin-left: auto; letter-spacing: 0.151em; }

/* --- Das Vorschlags-Fenster (08.09.2026) ------------------------------------
   Hier entscheidet ein Mensch, was von einem Entwurf Bestand wird. Die Form
   folgt daraus: die Folie so gross wie möglich (man beurteilt das Bild, nicht
   den Dateinamen), die Haken links, wo das Auge die Liste abläuft, und die
   zwei Ausgänge unten — „nichts übernehmen" gleichwertig neben „übernehmen".
   Ein Fenster, das nur einen Weg hinaus hat, ist keine Entscheidung. */
.folieVorschlagSchicht { position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 4, 12, 0.72); display: flex; align-items: center;
  justify-content: center; padding: 24px; }
.folieVorschlagKasten { width: min(880px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--flaeche, #14141c); color: var(--text, #e8e8ee);
  border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; }
.folieVorschlagKopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--linie); }
.folieVorschlagKopf h2 { margin: 0; font-size: 16px; }
.folieVorschlagMarke { padding: 3px 9px; border-radius: 999px; font-size: 12px;
  background: var(--zeile); color: var(--gedimmt); }
.folieVorschlagMarke.schlecht { background: rgba(226, 114, 91, 0.18); color: #e2725b; }
.folieVorschlagListe { overflow: auto; padding: 8px 12px; }
.folieVorschlagZeile { display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 8px; border-bottom: 1px solid var(--linie); cursor: pointer; }
.folieVorschlagZeile:last-child { border-bottom: 0; }
/* Was man nicht anhaken kann, sieht auch nicht danach aus. */
.folieVorschlagZeile:has(input:disabled) { cursor: default; opacity: 0.82; }
/* 18 Pixel Kästchen in einer Zeile von mindestens 44: Das Tippziel ist die
   ganze Zeile (`label`), nicht das Kästchen — deshalb ist das Mindestmass
   hier erfüllt und nicht verletzt (Haus-Regel 17 §6). */
.folieVorschlagZeile input { width: 18px; height: 18px; margin: 4px 0 0; flex: none; }
.folieVorschlagText { flex: 1; min-width: 0; }
.folieVorschlagText p { margin: 4px 0 0; font-size: 13px; color: var(--gedimmt); }
.folieVorschlagUrteil { margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.folieVorschlagUrteil.gut { background: rgba(95, 191, 127, 0.18); color: #5fbf7f; }
.folieVorschlagUrteil.aendern { background: rgba(200, 164, 92, 0.2); color: var(--goldText); }
.folieVorschlagAenderung { border-left: 2px solid var(--fo-akzent); padding-left: 8px; }
.folieVorschlagBild { width: 240px; flex: none; }
.folieVorschlagFuss { display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--linie); }

/* --- Bauform `frei`: die Plätze kommen aus der Folie (08.09.2026) ----------
   Jedes Bauteil steht absolut. WO es steht, sagt der Schlüssel `lage` der
   Steuerzeile — `folieLageSetzen` schreibt diese Werte inline, weil sie Daten
   sind und nicht Gestaltung (Haus-Regel 17 §6). Was hier steht, sind die
   RÜCKFALL-Plätze: für ein Bauteil, das noch keinen Eintrag hat, weil es eben
   erst entstand. Ohne sie lägen alle bei 0,0 übereinander — und eine
   Überlappung ist der Fehler, den der Bild-Prüfer zuerst sucht (§7). */
.folieBuehne[data-layout="frei"] { display: block; padding: 0; }
.folieBuehne[data-layout="frei"] > * { position: absolute; margin: 0;
  touch-action: none; }
.folieBuehne[data-layout="frei"] > .folieKopf { left: 54px; top: 40px; padding: 0; }
.folieBuehne[data-layout="frei"] > h1 { left: 60px; top: 120px; width: 560px; }
.folieBuehne[data-layout="frei"] > blockquote:not(.folieAussage) {
  left: 60px; top: 300px; width: 540px; }
.folieBuehne[data-layout="frei"] > ul,
.folieBuehne[data-layout="frei"] > ol { left: 60px; top: 400px; width: 560px; }
.folieBuehne[data-layout="frei"] > blockquote.folieAussage {
  left: 60px; top: 520px; width: 560px; }
.folieBuehne[data-layout="frei"] > p:has(img.folieBild),
.folieBuehne[data-layout="frei"] > p:has(.folieLuecke) {
  left: 674px; top: 120px; width: 546px; height: 400px; display: block; }
.folieBuehne[data-layout="frei"] img.folieBild { width: 100%; height: 100%;
  max-width: none; max-height: none; object-fit: cover; }
.folieBuehne[data-layout="frei"] > .folieFuss { left: 54px; top: 650px; width: 1172px; }
/* Frei aus `bild-gross` (11.09.2026): Der Text bleibt verborgen wie in der
   Bauform, das Bild bleibt die Folie — nur sein Platz und Ausschnitt kommen
   jetzt aus `lage`. Ohne diese Regeln kippte „Anordnen" auf einer Bildfolie
   Titel, Kernsatz und Zeilen sichtbar über das beschnittene Bild. */
.folieBuehne[data-layout="frei"][data-basis="bild-gross"] > :is(h1, blockquote, ul, ol, .folieKopf, .folieFuss) { display: none; }
.folieBuehne[data-layout="frei"][data-basis="bild-gross"] img.folieBild { max-width: none; max-height: none; object-fit: cover; }

/* Der Griff. Er zeigt sich erst beim Überfahren — eine Folie, die im Ruhezustand
   sieben Rahmen trägt, sieht nach Baustelle aus statt nach Vortrag. */
.folieGriff { border-radius: 4px; outline: 1px solid transparent;
  outline-offset: 4px; transition: outline-color 0.12s ease; }
.folieGriff:hover { outline-color: rgba(121, 90, 240, 0.55); cursor: move; }
.folieZieht .folieGriff:hover { outline-color: var(--fo-akzent); }
.folieZieht { cursor: move; -webkit-user-select: none; user-select: none; }

/* --- Die Bühne anfassen (08.09.2026) ----------------------------------------
   Ein Klick auf ein Bauteil öffnet ein Feld genau dort, wo der Text steht.
   Position, Grösse und Schriftbild setzt `folieZeilenFeld` inline — beides
   sind MESSUNGEN am gerenderten Bauteil (Haus-Regel 17 §6). Hier steht nur,
   wie es aussieht.

   Der Umriss beim Überfahren ist die einzige Auskunft darüber, dass die Folie
   anfassbar ist. Ein beschrifteter Knopf je Bauteil wären sieben Fremdwörter
   auf einer Folie (§4: Symbole vor Text — hier reicht die Form). */
.folieAnfassbar { border-radius: 3px;
  outline: 1px dashed transparent; outline-offset: 3px;
  transition: outline-color 0.12s ease; }
.folieAnfassbar:hover { outline-color: var(--fo-akzent); }
.folieZeilenFeld { position: absolute; z-index: 40; margin: 0; padding: 0;
  background: rgba(0, 2, 13, 0.92); border: 0;
  border-bottom: 2px solid var(--fo-akzent); border-radius: 0;
  box-shadow: 0 0 0 6px rgba(0, 2, 13, 0.92); outline: none; }

/* Bauform `bild-gross`: die Folie IST das Bild. Renés Entwurf vom 06.09.2026
   liegt als fertige 16:9-Folie vor — Titel, Aussage und Fußzeile stehen darin.
   Der Text der Datei bleibt erhalten (er trägt Redetext-Bezug und Suche), aber
   die Bühne zeigt ihn nicht: zweimal derselbe Satz wäre keine Treue zum
   Entwurf, sondern Doppelung. */
.folieBuehne[data-layout="bild-gross"] { padding: 0; gap: 0; }
.folieBuehne[data-layout="bild-gross"] > * { display: none; }
/* Der Markdown-Renderer packt ein alleinstehendes Bild in einen Absatz. Der
   Absatz verschwindet nicht — er wird durchsichtig (`contents`), damit das
   Bild selbst zum Flex-Kind wird und die Leinwand füllen kann. */
.folieBuehne[data-layout="bild-gross"] > p:has(img.folieBild),
.folieBuehne[data-layout="bild-gross"] > p:has(.folieLuecke) { display: contents; }
.folieBuehne[data-layout="bild-gross"] img.folieBild { display: block;
  align-self: stretch; width: 100%; height: 100%;
  /* `max-height` und `max-width` MÜSSEN hier fallen: die allgemeine Regel
     begrenzt ein Folienbild auf 11,5em, damit es neben dem Text nicht die
     Folie sprengt. Bei `bild-gross` IST das Bild die Folie — mit der Grenze
     blieb Renés Entwurf am 08.09.2026 auf halber Höhe stehen und wurde von
     `object-fit: cover` mittig beschnitten. */
  max-width: none; max-height: none; object-fit: cover; }
.folieBuehne[data-layout="bild-gross"] .folieLuecke { display: block; margin: auto; }
/* Die benannte Lücke: das Bild ist versprochen und liegt nicht da. Dieselbe
   Antwort gibt der Folien-Export des promms — ein stilles Nichts wäre die
   schlechtere, weil man ihm nicht ansieht, dass etwas fehlt. */
.folieLuecke { align-self: center; padding: 0.6em 1.13em; border: 2px dashed var(--fo-linie);
  border-radius: 0.4em; background: rgba(255,255,255,0.04); color: var(--fo-leise);
  font-family: var(--schriftMono, ui-monospace, monospace); font-size: 0.73em; }

/* Das Schreib-Feld liegt IM Rahmen, über der Leinwand. Die Größe steht hier,
   nicht im JavaScript (Haus-Regel 17 §6). Feste Schrift statt Leinwand-Maß:
   beim Schreiben zählt Lesbarkeit, nicht Bühnenwirkung. */
.folieFeld { position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 18px 20px; border: 0; resize: none;
  background: var(--bg); color: var(--text);
  font-family: var(--schriftMono, ui-monospace, monospace); font-size: 13.5px;
  line-height: 1.65; tab-size: 2; }
.folieFeld:focus { outline: none; }
.folieRahmen:has(.folieFeld) { border-color: var(--gold); }
.folieZaehler { flex: none; padding: 0 4px; color: var(--dim); font-size: 12px; }
.folieZurueck .ikon { transform: rotate(90deg); }
.folieVor .ikon { transform: rotate(-90deg); }

/* Der Filmstreifen in der linken Spalte. */
.folieStreifen { display: flex; flex-direction: column; gap: 8px; }
.folieMini { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px;
  padding: 6px; background: transparent; border: 1px solid transparent;
  border-radius: var(--rundKlein, 9px); cursor: pointer; text-align: left; }
.folieMini:hover, .folieMini:focus-visible { background: var(--zeile); outline: none; }
.folieMini.aktiv { border-color: var(--gold); background: var(--zeile); }
.folieMiniPlatte { position: relative; flex: 1; min-width: 0; aspect-ratio: 16 / 9;
  overflow: hidden; border: 1px solid var(--linie); border-radius: 6px;
  background: var(--panel); pointer-events: none; }
.folieMiniZahl { flex: none; width: 22px; color: var(--dim); font-size: 11.5px;
  text-align: right; }

/* Der Redetext steht UNTER der Folie, nicht in einem eigenen Reiter: Notizen
   gehören zu der Folie, die gerade steht. */
.folieRedeFeld { margin-top: 16px; }
.folieRedeKopf { display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--dim); }
.folieRedeKopf .ikon { width: 15px; height: 15px; }
.folieRedeLeer { margin: 0; color: var(--dim); font-size: 12.5px; }
.folieRede { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0;
  font-size: 12.5px; line-height: 1.55; }
.folieRede dt { color: var(--dim); }
.folieRede dd { margin: 0; color: var(--text); min-width: 0; }
/* Der zweite Weg: ein Abschnitt aus Fließtext statt einer Tabellenzeile. */
.folieRedeText { font-size: 12.5px; line-height: 1.6; color: var(--text); }
.folieRedeText p { margin: 6px 0; }
.folieRedeText em, .folieRedeText i { color: var(--dim); }

/* Vollbild: der Rahmen füllt den Schirm, der Redetext bleibt draußen. */
.folieRahmen:fullscreen { aspect-ratio: auto; width: 100%; height: 100%;
  border: 0; border-radius: 0; background: var(--bg); }
.folieRahmen:fullscreen .folieBuehne { max-width: 1600px; margin: 0 auto; }

/* --- Der Pixel-Editor ------------------------------------------------------ */
.prommWerkstatt { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.prommWerkzeuge { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prommWerkzeuge .zAktion.aktiv { border-color: var(--gold); color: var(--goldText); }
/* Der Canvas ist quadratisch und wächst mit dem Platz, bleibt aber unter der
   Fensterhöhe — sonst steht der Speichern-Knopf unter dem Rand.
   `image-rendering` hält die Punkte hart; ohne das wäre es kein Pixel-Bild. */
.prommCanvas { width: min(100%, 420px); aspect-ratio: 1 / 1; height: auto;
  border: 1px solid var(--linie); border-radius: var(--rundKlein, 8px);
  background: var(--bg); cursor: crosshair; touch-action: none;
  image-rendering: pixelated; }
.prommFarben { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-left: 6px; }
/* Die Tippfläche ist 32 Pixel, der farbige Kern kleiner: Ein Symbol darf klein
   sein, seine Fläche nicht (Haus-Regel 17 §6). */
.prommFarbe { width: 32px; height: 32px; padding: 5px; border: 1px solid var(--linie);
  border-radius: 8px; background-clip: content-box; cursor: pointer; }
.prommFarbe.aktiv { border-color: var(--gold); border-width: 2px; padding: 4px; }

/* --- Die Bilder-Galerie ---------------------------------------------------- */
.prommGalerie { display: grid; gap: 12px; margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
/* Der Leerzustand ist kein Kachel-Platz, sondern ein Satz: Ohne diese Zeile
   stand „Noch kein Bild." in der ersten 120-Pixel-Spalte und brach mitten
   entzwei (Kontrollgang 06.09.2026). */
.prommGalerie .tafelLeer { grid-column: 1 / -1; padding: 8px 0; }
.prommKachel { margin: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border: 1px solid var(--linie); border-radius: var(--rundKlein, 8px); }
.prommKachel img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--zeile); border-radius: 6px; image-rendering: pixelated; }
.prommKachel figcaption { font-size: 11.5px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prommKachelGriffe { display: flex; gap: 6px; }

@media (max-width: 900px) {
  .kwLeib[data-art="reiter"] { grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 34%) minmax(0, 1fr); }
  .kwLeib[data-art="reiter"][data-spalte="keine"] { grid-template-rows: minmax(0, 1fr); }
  /* Eine fünfspaltige Tabelle passt auf kein Telefon. Sie rollt dann in SICH,
     statt den Lesesaal waagerecht zu schieben — der Bild-Prüfer nennt das
     „waagerechter Überlauf" und hat recht damit. */
  .kwLesesaal table { display: block; width: max-content; max-width: 100%; overflow-x: auto; }
  /* Unter 900 Pixeln wird aus der linken Spalte eine Reihe über dem Inhalt
     (siehe `data-art="reiter"` oben). Ein senkrechter Filmstreifen in einer
     Reihe wäre ein Guckloch auf eine Folie; waagerecht ist er, was er heißt. */
  .folieStreifen { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .folieMini { flex: none; width: 168px; }
}
/* Unterhalb von 768 Pixeln ist das Mindestmaß 36 (Haus-Regel 17 §6). */
@media (max-width: 768px) {
  .prommFarbe { width: 36px; height: 36px; }
  .prommCanvas { width: 100%; }
  .prommTestBefehl { margin-left: 0; }
  .prommKarteMehr { width: 36px; height: 36px; }
  /* Auf dem Telefon stehen die Bahnen untereinander: vier Spalten à 90 Pixel
     wären vier Spalten, in denen kein Titel lesbar ist. */
  .prommBahnen { grid-template-columns: minmax(0, 1fr); }
}

/* --- Zeichnen auf der Folie ------------------------------------------------
   Zwei Ebenen über der Leinwand: die gespeicherte Zeichnung (ein Bild, immer
   sichtbar, nie anklickbar) und die Zeichenfläche (nur beim Zeichnen da).
   Beide liegen in Leinwand-Koordinaten und werden mit ihr skaliert. */
.folieZeichnung { position: absolute; inset: 0; width: 1280px; height: 720px;
  pointer-events: none; object-fit: fill; z-index: 10; }
.folieZeichenFlaeche { position: absolute; inset: 0; width: 1280px; height: 720px;
  cursor: crosshair; touch-action: none; z-index: 20; }

/* Der Zeichen-Streifen unter der Kopfzeile — nur im Zeichen-Modus da. */
.folieZeichenLeiste, .folieAnordnenLeiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: -6px 0 12px; padding: 6px 8px; border: 1px solid var(--gold);
  border-radius: var(--rundKlein, 8px);
  background: color-mix(in srgb, var(--gold) 8%, transparent); }
/* Der Auswahl-Streifen steht immer (11.09.2026). Ohne Auswahl sind seine
   Elemente gesperrt — sichtbar, mit Grund im Hover, nicht verschwunden. */
.folieAnordnenLeiste button:disabled, .folieAnordnenLeiste input:disabled,
.folieAnordnenLeiste select:disabled { opacity: 0.38; cursor: not-allowed; }
.folieAnordnenLeiste .folieAuswahlWeg { margin-left: auto; }
/* Ohne Auswahl ein Satz mit Symbol (Regel 17 §4: Leerzustand = Symbol plus
   ein Satz); gleiche Höhe wie die Knopfreihe, damit nichts springt. */
.folieStreifenSatz { display: flex; align-items: center; gap: 8px; min-height: 32px;
  opacity: 0.8; font-size: 13px; }
.folieStreifenSatz .ikon, .folieStreifenSatz svg { flex: none; width: 16px; height: 16px; }
/* Der Tipp: sofort da, unter dem Element, nie breiter als eine Zeile
   Lesetext. Position wird gemessen (Regel 17 §6), die Maße stehen hier. */
.tipp { position: fixed; z-index: 300; max-width: 320px; padding: 6px 10px;
  font-size: 13px; line-height: 1.35; color: var(--text);
  background: var(--zeile, #14162a); border: 1px solid var(--gold);
  border-radius: var(--rundKlein, 8px); pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
/* Eine Meldung kann einen Rückweg tragen (Rückgängig nach dem Zug, der die
   Bauform gewechselt hat) — Text links, Knopf rechts daneben. */
.kwMeldung { display: flex; align-items: center; gap: 10px; }
.kwMeldung > .zAktion { flex: none; }

/* Die fünf Farben. Ihr Wert steht inline, weil er der Zustand ist — die
   Größe steht hier (Haus-Regel 17 §6). */
.folieFarbe { flex: none; width: 32px; height: 32px; padding: 0;
  border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.folieFarbe.gewaehlt { border-color: var(--text); }
.folieFarbe:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.prommKopf button.gewaehlt { color: var(--goldText); background: var(--zeile); }

/* --- Die Werkzeugleiste des Vortrags ---------------------------------------
   Ein Trenner zwischen den Gruppen: blättern, bauen, Datei. Er trägt keine
   Bedeutung ausser der Trennung und ist deshalb ein Strich, kein Wort. */
/* Die Schiebe-Pfeile: dasselbe Chevron, um eine Vierteldrehung gekippt.
   Ein eigenes Motiv für „nach oben" wäre ein zweites Zeichen für dieselbe
   Form — und zwei Formen, die dasselbe sagen, sind eine zu viel. */
.folieHoch .ikon { transform: rotate(90deg); }
.folieRunter .ikon { transform: rotate(-90deg); }
.folieLeisteTrenner { flex: none; width: 1px; height: 20px; margin: 0 2px;
  background: var(--linie); }

/* Das Auswahl-Blatt unter einem Werkzeug. Es liegt am Körper, nicht im
   Reiter — sonst schnitte der Rahmen des Lesesaals es ab. Seine Position
   kommt aus einer MESSUNG des Knopfes und steht deshalb inline
   (Haus-Regel 17 §6: gemessen ja, gestaltet nein). */
.folieBlatt { position: fixed; z-index: 60; min-width: 190px; padding: 4px;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); }
.folieBlattZeile { display: block; width: 100%; min-height: 36px; padding: 8px 12px;
  border: 0; border-radius: 7px; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; }
.folieBlattZeile:hover, .folieBlattZeile:focus-visible { background: var(--zeile); }
.folieBlattZeile.gewaehlt { color: var(--goldText); background: var(--zeile); }
.folieBlattZeile.gewaehlt::after { content: ""; float: right; width: 8px; height: 8px;
  margin-top: 6px; border-radius: 50%; background: var(--gold); }

/* Das Bild-Blatt: was im Werk-Ordner liegt, als Raster. Der Weg zur Platte
   steht darunter — wer ein neues Bild braucht, findet ihn, wer ein
   vorhandenes will, muss ihn nicht suchen. */
.folieBildBlatt { min-width: 420px; max-width: 92vw; padding: 8px; }
.folieBildRaster { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 6px; max-height: 340px; overflow-y: auto; }
.folieBildKachel { display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 92px; padding: 6px; border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--dim); font: inherit; font-size: 11px; cursor: pointer; }
.folieBildKachel:hover { background: var(--zeile); color: var(--text); }
.folieBildKachel.gewaehlt { border-color: var(--gold); background: var(--zeile);
  color: var(--goldText); }
.folieBildKachel img { width: 100%; height: 58px; object-fit: contain;
  background: #1e1e2e; border-radius: 5px; }
.folieBildKachel span { max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* Das Symbol-Blatt: je Aufzählungszeile eine Reihe Kacheln. */
/* Breit genug für alle sechzehn Kacheln in einer Reihe: 16 x 38 plus
   Rand. Bricht eine einzelne Kachel um, sieht die Reihe aus wie ein
   Fehler statt wie eine Auswahl. */
.folieSymbolBlatt { min-width: 646px; max-width: 92vw; padding: 10px; }
.folieSymbolZeile { padding: 6px 4px 10px; }
.folieSymbolZeile + .folieSymbolZeile { border-top: 1px solid var(--linie); }
.folieSymbolText { display: block; margin-bottom: 6px; color: var(--dim);
  font-size: 12.5px; }
.folieSymbolKacheln { display: flex; flex-wrap: wrap; gap: 4px; }
.folieSymbolKachel { display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 1px solid transparent;
  border-radius: 8px; background: none; color: var(--dim); cursor: pointer; }
.folieSymbolKachel:hover { background: var(--zeile); color: var(--text); }
.folieSymbolKachel.gewaehlt { border-color: var(--gold); color: var(--goldText);
  background: var(--zeile); }
.folieSymbolKachel .ikon { width: 19px; height: 19px; }
.folieBlattSichern { margin-top: 4px; border-top: 1px solid var(--linie);
  border-radius: 0 0 7px 7px; color: var(--goldText); text-align: center; }

/* --- Anordnen (09.09.2026) --------------------------------------------------
   Der Modus, in dem Bauteile gewählt, gezogen und in der Größe geändert
   werden. Seine Schicht liegt ÜBER der Bühne und ist ein eigenes Kind der
   Bühne — nicht Kind der Bauteile, deren Zeiger-Ereignisse sonst mitfeuern.
   Alle Maße stehen hier; Plätze und Linien setzt die Hülle inline, weil sie
   Messungen und Daten sind (Haus-Regel 17 §6).

   Die Bühne ist skaliert. Ein Griff soll auf dem SCHIRM mindestens 32 Pixel
   treffen, nicht auf der Leinwand — deshalb rechnet jedes Griff-Maß den
   Maßstab heraus (`calc(34px / var(--folie-massstab))`). Der Rückfall `, 1` ist
   Pflicht: im Druck gibt es keinen Maßstab, und ohne ihn wäre die Regel
   ungültig.

   Schichten in `frei`: Bauteile 1–7 (aus `stapel`, inline), Zeichnung 10,
   Zeichenfläche 20, diese Schicht 30, Zeilen-Feld 40. `isolation` macht die
   Bühne zum eigenen Stapel — im Druck fällt der `transform` weg, der ihn
   sonst stiftet, und ein Bauteil mit Ebene läge hinter dem Grund. */
.folieBuehne[data-layout="frei"] { isolation: isolate; }
/* Ohne diese Zeile beginnt der Browser beim Ziehen eines Bildes seinen
   eigenen Bild-Zug und bricht den Zeiger-Zug ab. */
.folieBuehne[data-layout="frei"] img.folieBild { -webkit-user-drag: none; user-drag: none; }
.folieAnordnenSchicht { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.folieWahl { position: absolute; pointer-events: none; border-radius: 3px;
  outline: calc(2px / var(--folie-massstab, 1)) solid var(--fo-akzent);
  outline-offset: calc(2px / var(--folie-massstab, 1)); }
.folieWahl.nebenwahl { outline-style: dashed; }
/* Der Griff: eine unsichtbare Tippfläche von 32 Schirm-Pixeln, darin ein
   kleiner sichtbarer Punkt. Als Knopf, damit der Bild-Prüfer ihn als
   Tippziel zählt — ein `div` mit Zeiger-Handler misst er nicht. */
.folieAnfasser { position: absolute; pointer-events: auto; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  /* 34 statt 32: Der Maßstab ist ein Bruch, und 32 / 0,8039 * 0,8039 ergibt
     31,99 — der Bild-Prüfer meldete das als zu klein (Kontrollgang 09.09.).
     Zwei Pixel Reserve, damit die Rundung nie unter das Mindestmaß fällt. */
  width: calc(34px / var(--folie-massstab, 1)); height: calc(34px / var(--folie-massstab, 1));
  transform: translate(-50%, -50%); }
.folieAnfasser::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(10px / var(--folie-massstab, 1)); height: calc(10px / var(--folie-massstab, 1));
  transform: translate(-50%, -50%); box-sizing: border-box; border-radius: 2px;
  background: #ffffff; border: calc(2px / var(--folie-massstab, 1)) solid var(--fo-akzent); }
.folieAnfasser:hover::after, .folieAnfasser:focus-visible::after { background: var(--fo-akzent); }
.folieAnfasser:focus-visible { outline: none; }
.folieAnfasser[data-griff="n"], .folieAnfasser[data-griff="s"] { cursor: ns-resize; }
.folieAnfasser[data-griff="w"], .folieAnfasser[data-griff="e"] { cursor: ew-resize; }
.folieAnfasser[data-griff="nw"], .folieAnfasser[data-griff="se"] { cursor: nwse-resize; }
.folieAnfasser[data-griff="ne"], .folieAnfasser[data-griff="sw"] { cursor: nesw-resize; }
.folieHilfslinie { position: absolute; pointer-events: none; background: var(--fo-gegen); }
.folieHilfslinie[data-achse="x"] { top: 0; bottom: 0; width: calc(1px / var(--folie-massstab, 1)); }
.folieHilfslinie[data-achse="y"] { left: 0; right: 0; height: calc(1px / var(--folie-massstab, 1)); }
/* Die Zahlenfelder des Streifens: ein Buchstabe, ein Feld — das Wort steht im
   Hover (Haus-Regel 17 §4). */
.folieMass { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  color: var(--dim); }
.folieMass input { width: 60px; min-height: 32px; padding: 0 6px;
  border: 1px solid var(--linie); border-radius: 6px; background: var(--bg);
  color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.folieMass input:focus { outline: none; border-color: var(--gold); }
/* Die Schrift-Griffe des Streifens (11.09.2026): Größe als Zahl (S), Art als
   Auswahl, Fett als Buchstabe, Farbe als Feld — Worte nur im Hover. Jedes
   Ziel ist 32 Pixel hoch, am Telefon 36 (Haus-Regel 17 §6). */
.folieSchriftArt { min-height: 32px; padding: 0 6px; border: 1px solid var(--linie);
  border-radius: 6px; background: var(--bg); color: var(--text); font-size: 12.5px; }
.folieSchriftArt:focus { outline: none; border-color: var(--gold); }
.folieSchriftFett { min-width: 32px; font-weight: 800; font-size: 14px; }
.folieSchriftFett[aria-pressed="true"] { color: var(--goldText); background: var(--zeile); }
.folieSchriftFarbe { flex: none; width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 6px; background: var(--bg); }
.folieSchriftArt:disabled, .folieSchriftFett:disabled, .folieSchriftFarbe:disabled { opacity: 0.45; cursor: default; }
/* Der Bildkasten mit Ausschnitt: das Bild steht absolut darin, in Prozent
   des Kastens (gerechnet in `folien-geometrie.js`, gesetzt im `onload`), der
   Kasten schneidet ab. `object-fit: fill`, weil die Prozentwerte das
   Verhältnis schon halten — `cover` würde ein zweites Mal beschneiden. */
.folieBuehne[data-layout="frei"] > .folieBildKasten { overflow: hidden; }
.folieBuehne[data-layout="frei"] .folieBildKasten img.folieBild { position: absolute;
  max-width: none; max-height: none; object-fit: fill; }
/* Die Zuschnitt-Schicht: über allem, fängt jeden Zeiger. Die Quelle liegt
   gedimmt darunter, das Rechteck ist der helle Teil — was man dort sieht,
   ist, was der Kasten zeigen wird. */
.folieZuschnittSchicht { position: absolute; inset: 0; z-index: 35; pointer-events: auto;
  background: rgba(0, 2, 13, 0.55); cursor: default; }
.folieZuschnittQuelle { position: absolute; max-width: none; max-height: none;
  opacity: 0.45; pointer-events: none; -webkit-user-drag: none; user-drag: none; }
.folieZuschnittRahmen { position: absolute; cursor: move; box-sizing: border-box;
  border: calc(2px / var(--folie-massstab, 1)) solid var(--fo-gegen);
  box-shadow: 0 0 0 calc(1px / var(--folie-massstab, 1)) rgba(0, 0, 0, 0.6); }
.folieZuschnittSchicht .folieAnfasser::after { border-color: var(--fo-gegen); }
/* Sechs Richtungen aus zwei Zeichnungen: die Grundform ist „links" bzw.
   „waagerecht zentrieren"; der Rest ist gespiegelt oder gedreht. */
.folieAusrichten-rechts .ikon { transform: scaleX(-1); }
.folieAusrichten-oben .ikon { transform: rotate(90deg); }
.folieAusrichten-unten .ikon { transform: rotate(-90deg); }
.folieAusrichten-mittig .ikon { transform: rotate(90deg); }
@media (max-width: 768px) {
  .folieAnfasser { width: calc(38px / var(--folie-massstab, 1));
    height: calc(38px / var(--folie-massstab, 1)); }
  .folieMass input { min-height: 36px; }
  .folieSchriftArt, .folieSchriftFett { min-height: 36px; }
  .folieSchriftFarbe { width: 36px; height: 36px; }
}

/* --- Drucken = PDF (08.09.2026) ---------------------------------------------
   „Drucken -> als PDF sichern" ist der Ausgabeweg, den jeder Rechner schon
   hat. Kein Paket, kein Server-Renderer, kein zweites Bild derselben Folie.

   Die Vorgänger-Fassung zog den FILMSTREIFEN auf Seitenbreite. Das war der
   Versuch, die Bildschirm-Ansicht zu drucken, und die feste Leinwand vom
   07.09.2026 hat ihn zerbrochen: Der Maßstab wird am Behälter gemessen, und
   auf dem Papier misst niemand. Es kam eine winzige Folie in der Blattecke
   heraus. Deshalb baut `folienDrucken()` jetzt eine EIGENE Ansicht bei
   Maßstab 1 — dasselbe Markup, dasselbe Stylesheet, nur ohne Rahmen. */
@page { size: 1280px 720px; margin: 0; }
/* Am Bildschirm aus dem Weg geschoben, NICHT `display: none`. Eine Ansicht
   ohne Anzeige hat keine Maße — und dann misst `folieEngeMessen` null statt
   der Höhe, die Folie wird nicht verkleinert und läuft im PDF über. Genau
   das war der erste Versuch am 08.09.2026 (Überlauf gemessen: -720, also
   gar nichts). Aus dem Sichtfeld geschoben behält sie ihre Maße. */
#folienDruck { position: absolute; top: 0; left: -30000px;
  width: 1280px; pointer-events: none; }
.folieDruckSeite { position: relative; width: 1280px; height: 720px; overflow: hidden;
  break-after: page; }
.folieDruckSeite:last-child { break-after: auto; }
/* Die Leinwand druckt bei Maßstab 1: Der `--folie-massstab` bleibt auf seinem
   Vorgabewert, weil `folienDrucken()` keinen Beobachter anhängt. */
.folieDruckSeite .folieBuehne { transform: none; }
@media print {
  body > *:not(#folienDruck) { display: none !important; }
  #folienDruck { position: static; left: auto; }
  /* Ohne diese Zeile druckt der Browser die Flächen weiss und die Folie wäre
     ein leeres Blatt mit Text. Sie ist der eine Fall, in dem eine Farbe
     ausdrücklich mitgedruckt werden muss. */
  #folienDruck, .folieDruckSeite, .folieDruckSeite .folieBuehne {
    print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* --- Das Frage-Blatt (11.09.2026): ersetzt window.prompt und window.confirm ---
   Maße hier, nicht im Skript (Haus-Regel 17 §6). */
.frageBlattHuelle { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center;
  justify-content: center; background: rgba(0, 2, 13, 0.55); }
.frageBlatt { min-width: 320px; max-width: 90vw; padding: 16px; display: grid; gap: 12px;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); }
.frageBlattWort { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.frageBlattFeld { min-height: 36px; padding: 0 10px; border: 1px solid var(--linie); border-radius: 6px;
  background: var(--bg); color: var(--text); font: inherit; }
.frageBlattFeld:focus { outline: none; border-color: var(--gold); }
.frageBlattZeile { display: flex; justify-content: flex-end; gap: 8px; }
.frageBlattJa { color: var(--goldText); background: var(--zeile); }
/* Der Stift am Redetext sitzt rechts in der Kopfzeile. */
.folieRedeKopf { display: flex; align-items: center; gap: 8px; }
.folieRedeKopf .zAktion { margin-left: auto; }
/* Ein Gliederungs-Schritt mit Sprung zur Folie. */
.prommSchrittSprung { cursor: pointer; }
.prommSchrittSprung:hover .prommSchrittTitel, .prommSchrittSprung:focus-visible .prommSchrittTitel { color: var(--goldText); }