/* Die Hausschrift gehoert zum Satz, nicht zur Oberflaeche - deshalb stehen
   alle vier Schnitte hier und nirgends sonst. studio.css laedt diese Datei
   mit; frueher meldete studio.css den Schnitt 600 zusaetzlich an, satz.css
   aber nicht. Der Editor setzte damit echtes SemiBold, Vorschau und
   Web-Ausgabe fielen auf 700 zurueck - dieselbe Stelle brach in drei
   Ansichten unterschiedlich um.

   font-display: block statt swap: ein Umbruch im Ersatzschnitt waere sofort
   falsch, und ein kurzer Moment ohne Text ist dem vorzuziehen.

   Fuer die eigenstaendige HTML-Ausgabe ersetzt app.py die vier url()-Pfade
   durch eingebettete data:-URIs (siehe satzregeln(...)); ohne das griffe der
   absolute Pfad ins Leere und Georgia uebernaehme den Satz. */
@font-face {
  font-family: "PageSetter";
  src: url("/static/fonts/hausschrift-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "PageSetter";
  src: url("/static/fonts/hausschrift-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: block;
}
@font-face {
  font-family: "PageSetter";
  src: url("/static/fonts/hausschrift-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: "PageSetter";
  src: url("/static/fonts/hausschrift-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
}


/* =====================================================================
   Die weiteren Ausgabeschriften

   Wer eine andere Schrift will, waehlt sie in den Einstellungen; die
   Auswahl gilt fuer den ganzen Satz eines Kontos. Alle Schnitte liegen
   auf dem eigenen Server - es gibt keinen Aufruf an Google Fonts und
   damit auch keine IP-Adresse, die dorthin abfliesst.

   Ein @font-face laedt nichts, solange die Familie nicht gesetzt ist.
   Die fuenf zusaetzlichen Familien kosten deshalb nichts, wenn niemand
   sie waehlt. Die Angaben stehen einmal hier und einmal in
   schriften.py; ein Test haelt beide aneinander.
   ===================================================================== */

@font-face {
  font-family: "EB Garamond";
  src: url("/static/fonts/ebgaramond-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/static/fonts/ebgaramond-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: block;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/static/fonts/ebgaramond-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/static/fonts/ebgaramond-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/static/fonts/sourceserif-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/static/fonts/sourceserif-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: block;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/static/fonts/sourceserif-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/static/fonts/sourceserif-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Lora";
  src: url("/static/fonts/lora-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Lora";
  src: url("/static/fonts/lora-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: block;
}
@font-face {
  font-family: "Lora";
  src: url("/static/fonts/lora-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Lora";
  src: url("/static/fonts/lora-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Alegreya";
  src: url("/static/fonts/alegreya-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Alegreya";
  src: url("/static/fonts/alegreya-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: block;
}
@font-face {
  font-family: "Alegreya";
  src: url("/static/fonts/alegreya-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Alegreya";
  src: url("/static/fonts/alegreya-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Open Sans";
  src: url("/static/fonts/opensans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Open Sans";
  src: url("/static/fonts/opensans-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: block;
}
@font-face {
  font-family: "Open Sans";
  src: url("/static/fonts/opensans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Open Sans";
  src: url("/static/fonts/opensans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
}

/* Die Wahl selbst: ein Merkmal am Blatt, gesetzt von Editor,
   Vorschau und Ausgabe gleichermassen. */
.satz[data-schrift="hausschrift"] {
  --lesetext: "PageSetter", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --groteske: "PageSetter", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
}
.satz[data-schrift="ebgaramond"] {
  --lesetext: "EB Garamond", Garamond, Georgia, serif;
  --groteske: "EB Garamond", Garamond, Georgia, serif;
}
.satz[data-schrift="sourceserif"] {
  --lesetext: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --groteske: "Source Serif 4", "Source Serif Pro", Georgia, serif;
}
.satz[data-schrift="lora"] {
  --lesetext: "Lora", Georgia, serif;
  --groteske: "Lora", Georgia, serif;
}
.satz[data-schrift="alegreya"] {
  --lesetext: "Alegreya", Georgia, serif;
  --groteske: "Alegreya", Georgia, serif;
}
.satz[data-schrift="opensans"] {
  --lesetext: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --groteske: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* =====================================================================
   PageSetter — Satzregeln der Seite

   Einzige Quelle für alles, was auf dem Blatt steht. Editor, Vorschau und
   Druck laden diese Datei gemeinsam; export.py setzt dieselben Zahlen für
   PDF und Word.

   Alle Maße sind Millimeter. --mm ist der Maßstab: im Druck genau 1mm, am
   Bildschirm der Pixelwert eines Millimeters der gezeigten Seite. Dadurch
   bricht der Text am Bildschirm exakt dort um wie in der Ausgabe.

   Das Gestaltungssystem folgt dem editorialen Buchsatz:
   Serifen für den Lesetext, eine ruhige Groteske für Auszeichnungen und
   Zwischenüberschriften, viel Weißraum, keine Zierrahmen.
   ===================================================================== */

.satz {
  --mm: 1mm;

  /* --------------------------------------------------- Schriftgrade (mm)

     Nach dem, was der Buchsatz seit Jahrzehnten empfiehlt und was Butterick,
     Bringhurst und die neuere Lesbarkeitsforschung übereinstimmend nennen:
     Lesetext 10-12 pt im Druck, Durchschuss 120-145 % des Grades, Zeilenlänge
     45-75 Zeichen mit 66 als Zielwert. 4.2 mm sind rund 12 pt - das obere Ende
     der Empfehlung, weil eine Seite lieber zu großzügig als zu eng gesetzt ist.
  */
  --grad-titel: 14;        /* H1  — Seitentitel */
  --grad-lead: 5.4;        /* Vorspann unter dem Titel */
  --grad-h2: 3.9;          /* Abschnitt */
  --grad-h3: 3.6;          /* Unterabschnitt */
  --grad-text: 5.2;        /* Lesetext, Code und Zitat teilen diesen Grad */
  --grad-klein: 4.3;       /* Paneltext, Tabellen */
  --grad-mini: 3.2;        /* Bildunterschrift, Marginalien */
  --grad-marke: 3.0;       /* Kolumnentitel, Auszeichner */
  /* Die Seitenzahl ist kein Auszeichner, sondern eine Angabe, die man beim
     Blaettern im Vorbeigehen lesen koennen muss. Im Buchsatz liegt sie
     ueblicherweise bei zwei Dritteln bis drei Vierteln des Lesetextgrades;
     3,8 von 5,2 sind knapp drei Viertel. Im Grad des Kolumnentitels war sie
     zu klein - sie ist keine Marke, sie ist eine Zahl. */
  --grad-seitenzahl: 3.8;
  --grad-zitat: 5.2;
  --grad-code: 4.6;
  --grad-blase: 4.0;

  /* ------------------------------------------------------- Durchschuss
     1.40 liegt mitten in der Spanne 1.2-1.45, die für Serifensatz im Druck
     empfohlen wird. Enger wirkt die Seite gedrängt, weiter zerfällt sie. */
  --durchschuss: 1.4;
  --durchschuss-eng: 1.3;
  --durchschuss-weit: 1.5;

  /* Zeilenlänge: 33em entsprechen rund 66 Zeichen - der meistgenannte
     Zielwert für einspaltigen Satz. Der Wert wächst mit dem Grad mit. */
  --messbreite-em: 36;

  /* ------------------------------------------------------- Zeilenraster
     Das Raster der Seite ist die Zeile des Lesetextes selbst: Grad mal
     Durchschuss. Im registerhaltigen Satz ist jedes senkrechte Mass ein
     Vielfaches davon - Blockhoehen, Blockluft, Abstaende ueber und unter
     Ueberschriften, Listen und Zitaten. Dann liegen die Zeilen zweier
     gegenueberliegender Seiten aufeinander, und man sieht durch das Papier
     hindurch keinen Zeilensalat.

     Der Wert ist bewusst nicht selbst gesetzt, sondern gerechnet: es gibt
     keine Zahl, die man versehentlich am Grad vorbei aendern koennte. */
  --zeile: calc(var(--grad-text) * var(--durchschuss));

  /* Erstzeileneinzug. Die Regel lautet Einzug ODER Absatzabstand, niemals
     beides - beide Faelle stehen weiter unten.

     Das Mass ist der Durchschuss selbst: Ein Einzug soll so weit sein, dass
     man den Absatzbeginn ohne Suchen findet, und so schmal, dass die
     Spalte keine Treppe bekommt. Bringhurst nennt genau diese Spanne - vom
     Geviert bis zur Zeilenhoehe - und die Zeilenhoehe ist zugleich die
     Zahl, an der in dieser Anwendung ohnehin alles Senkrechte haengt. */
  --einzug: calc(var(--durchschuss) * 1em);

  /* Abstand zwischen dem Strich unter dem Kolumnentitel und der Oberkante
     des Satzspiegels - und zugleich der Abstand unter einem Zwischentitel.
     Beide Male derselbe Wert: Steht ein Zwischentitel oben auf der Seite,
     haelt er dadurch nach oben und nach unten genau denselben Abstand,
     unabhaengig davon, ueber wie viele Zeilen er laeuft.

     5,46 mm sind drei Viertel der Rasterzeile bei den Vorgabegraden; ein
     Test haelt beide Zahlen aneinander, damit sie nicht auseinanderlaufen.
     Eine halbe Zeile war zu knapp: Der Strich klebte am Text. */
  --kolumnenabstand: 5.46;

  /* Abstand zwischen zwei Absaetzen, als Vielfaches des Schriftgrades.
     Derselbe Wert gilt im Editor, in der Vorschau und in der Ausgabe. */
  --absatzabstand: 0.62;

  /* Spalte fuer den Ziffernkreis einer Schrittliste - in Millimetern, damit
     PDF und Bildschirm denselben Wert lesen. */
  --schrittspalte: 10;
  --schrittkreis: 6.6;

  /* Punkteliste: Breite der Ziffernspalte und des Ziffernkreises darin - in
     Millimetern. Die Spalte ist einen Millimeter breiter als der Kreis. */
  --ziffernspalte: 9;
  --ziffernkreis: 8;

  /* Sperrung (letter-spacing) als Vielfaches der jeweiligen Schriftgroesse.
     Jede Zahl steht nur hier; die Regeln weiter unten rechnen sie ueber
     calc(... * 1em) um, und export.py liest dieselben Werte fuer die Ausgabe. */
  --sperrung-h1: -0.012;
  --sperrung-h2: 0.1;
  --sperrung-h3: 0.08;
  --sperrung-kolumnentitel: 0.14;
  --sperrung-seitenzahl: 0.1;
  --sperrung-apparatkopf: 0.14;
  --sperrung-tabellenkopf: 0.08;
  --sperrung-zaehler: 0.02;
  --sperrung-bildmarke: 0.08;
  --sperrung-cover-autor: 0.72;
  --sperrung-cover-titel: -0.035;
  --sperrung-cover-untertitel: 0.2;
  --sperrung-cover-abschluss: 0.58;

  /* ---------------------------------------------------------- Abstände */
  --blockluft: 5;
  --panelluft: 2.6;
  --polster: 2.4;
  --rahmen: 0.35;
  --paneltext-anteil: 0.66;
  --blase-maxbreite: 0.68;

  /* ------------------------------------------------------------ Farben */
  --tinte: #241f1a;
  --tinte-leise: #7c7268;
  --tinte-zart: #a1988c;
  --linie: #d4c9b6;
  --linie-fein: #e9e2d5;
  --akzent: #8b7757;
  --erzaehler: #f6f0e3;
  --infobox: #efe9de;
  --codeflaeche: #f1ede4;
  --leerflaeche: #f0ece4;

  /* --------------------------------------------------------- Schriften */
  --lesetext: "PageSetter", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --groteske: "PageSetter", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --maschine: "Courier New", Courier, monospace;

  background: #fdfcfa;
  color: var(--tinte);
  font-family: var(--lesetext);

  /* Feinsatz: Kerning und die üblichen Ligaturen an, Zahlen im Textbild,
     keine Sperrung im Fließtext. */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
  text-rendering: optimizeLegibility;
  orphans: 2;
  widows: 2;
}

/* Ligaturen lassen sich kontoweit abschalten. */
.satz[data-ligaturen="aus"] {
  font-variant-ligatures: none;
  font-feature-settings: "kern" 1;
}

/* ------------------------------------------------------------ Satzspiegel */

/* Vier Stege statt zwei: innen am Bund, aussen an der Schnittkante, oben
   und unten. Welcher Steg links liegt, haengt bei doppelseitigem Satz davon
   ab, ob die Seite rechts oder links im Buch steht - das rechnet
   satzspiegel.js aus und setzt die Zahlen hier ein.

   Die Regel stand frueher zweimal, in studio.css und in render.html, mit
   verschiedenen Schreibweisen. Jetzt steht sie da, wo alle drei Ansichten
   sie lesen. */
.satz .satzspiegel {
  position: absolute;
  inset: calc((var(--steg-oben, 18) + var(--anschnitt, 0)) * var(--mm))
         calc((var(--steg-rechts, 18) + var(--anschnitt, 0)) * var(--mm))
         calc((var(--steg-unten, 18) + var(--anschnitt, 0)) * var(--mm))
         calc((var(--steg-links, 18) + var(--anschnitt, 0)) * var(--mm));
  display: flex; flex-direction: column;
  gap: calc(var(--blockluft) * var(--mm));
}

/* Der Kolumnentitel haengt mit seiner *Unterkante* an der Oberkante des
   Satzspiegels und wird von dort um --kolumnenabstand nach oben geschoben.
   Frueher stand er ueber "top" - dann haing die Lage des Strichs an der
   Zeilenhoehe der Schrift, und der Strich lag knapp *im* Satzspiegel: Der
   Text stiess oben daran. So gerechnet ist der Abstand vom Strich zum Text
   auf jeder Seite genau derselbe, ganz gleich, welche Schrift gesetzt ist. */
.satz .kolumnentitel {
  position: absolute; left: 0; right: 0;
  bottom: 100%;
  margin-bottom: calc(var(--kolumnenabstand) * var(--mm));
  padding-bottom: calc(1.6 * var(--mm));
  border-bottom: calc(var(--rahmen) * var(--mm)) solid var(--linie);
  font-family: var(--groteske);
  font-size: calc(var(--grad-marke) * var(--mm));
  letter-spacing: calc(var(--sperrung-kolumnentitel) * 1em); text-transform: uppercase;
  color: var(--tinte-leise);
}

/* Die Seitenzahl haengt am Blatt, nicht am Satzspiegel. Ihr Abstand wird
   deshalb von der Blattunterkante gemessen: der Kolumnentitel darueber sitzt
   im Satzspiegel und darf negativ nach oben ragen, die Seitenzahl nicht.
   0.45 des unteren Randes bedeutet: sie steht 55 Prozent des Randes unterhalb
   des Textbereichs - genau die Lage, die der frueher hier stehende Wert
   -0.55 gemeint hat. Mit dem negativen Wert lag sie rund 14 mm UNTER der
   Blattkante: am Bildschirm vom overflow:hidden verschluckt und damit
   unsichtbar, im Browserdruck ein leeres Zusatzblatt je PDF. */
.satz .seitenzahl {
  position: absolute; left: 0; right: 0;
  bottom: calc((var(--anschnitt, 0) + var(--steg-unten, 18) * 0.45) * var(--mm));
  text-align: center;
  font-family: var(--groteske);
  font-size: calc(var(--grad-seitenzahl) * var(--mm));
  letter-spacing: calc(var(--sperrung-seitenzahl) * 1em);
  color: var(--tinte-zart);
}

/* ========================================================== Anschnitt

   Wer randabfallend druckt, muss das Motiv ueber die Schnittlinie
   hinausziehen: Der Schneidestapel wandert um bis zu einem Millimeter, und
   ohne Zugabe entstuende an der Kante ein weisser Blitzer. Europaeische
   Druckereien nennen dafuer uebereinstimmend drei Millimeter.

   Umgesetzt ist das als groesserer Bogen: Das Endformat bleibt, was es war,
   der bedruckte Bogen ist ringsum drei Millimeter groesser, und alles auf
   der Seite rueckt um diese Zugabe nach innen. Was randabfallend steht,
   laeuft dadurch von selbst bis an die Bogenkante.

   Die Schnittmarken zeichnet die Vorlage (render.html) in die Zugabe; im
   Editor steht dort stattdessen eine feine Linie, die zeigt, wo geschnitten
   wird. */

.satz .schnittlinie {
  position: absolute;
  inset: calc(var(--anschnitt, 0) * var(--mm));
  border: calc(var(--rahmen) * var(--mm) * 0.8) dashed var(--tinte-zart);
  pointer-events: none; z-index: 40;
  opacity: .5;
}
.satz:not([data-anschnitt-sichtbar="ja"]) .schnittlinie { display: none; }

/* Eine randabfallende Seite hat keinen Satzspiegel - das Motiv ist die
   Seite. Kolumnentitel und Seitenzahl entfallen: Sie laegen auf dem Bild,
   und im Comic traegt eine Splashseite ohnehin keine Zahl. */
.satz[data-randabfallend="ja"] .satzspiegel { inset: 0; gap: 0; }
.satz[data-randabfallend="ja"] .kolumnentitel,
.satz[data-randabfallend="ja"] .seitenzahl { display: none; }

/* ------------------------------------------------ Doppelseitiger Satz

   Im gebundenen Buch stehen Seitenzahl und Kolumnentitel aussen, nicht in
   der Mitte: Beim Blaettern faellt der Daumen auf die Aussenkante, und dort
   sucht das Auge die Zahl. Aussen heisst auf der rechten Seite rechts und
   auf der linken links - deshalb kann das keine feste Regel sein, sondern
   haengt an der Seite. */
.satz[data-doppelseitig="ja"] .seitenzahl {
  padding-left: calc((var(--steg-links, 18) + var(--anschnitt, 0)) * var(--mm));
  padding-right: calc((var(--steg-rechts, 18) + var(--anschnitt, 0)) * var(--mm));
}
.satz[data-doppelseitig="ja"][data-seite="recto"] .seitenzahl { text-align: right; }
.satz[data-doppelseitig="ja"][data-seite="verso"] .seitenzahl { text-align: left; }
.satz[data-doppelseitig="ja"][data-seite="recto"] .kolumnentitel { text-align: right; }

/* ----------------------------------------------------------------- Blöcke */

.satz .block { position: relative; min-height: 0; display: flex; flex-direction: column; }

/* --------------------------------------------------------- Nebeneinander

   Zwei Bloecke in einer Reihe: Bild neben Text, Text neben Marginalie. Die
   Reihe traegt die Hoehe - was nebeneinander steht, ist gleich hoch, sonst
   staenden die Zeilen der einen Spalte nicht auf den Linien der anderen.

   Im Modell bleibt die Blockliste flach; der zweite Block traegt nur das
   Merkmal "nebenan". Siehe satzraster.js, reihen(). */
.satz .blockreihe {
  position: relative; min-height: 0;
  display: grid; align-items: stretch;
  gap: calc(var(--blockluft) * var(--mm) * 1.4);
}
.satz[data-raster="an"] .blockreihe { gap: calc(var(--zeile) * var(--mm)); }
.satz .blockreihe > .block { min-height: 0; height: 100%; }

/* --------------------------------------------------------------- Cover */

.satz.coverseite .satzspiegel { inset: 0; gap: 0; }
.satz.coverseite .kolumnentitel,
.satz.coverseite .seitenzahl { display: none; }
.satz.coverseite .block[data-typ="cover"] { flex: 1 1 100% !important; }

.satz .cover {
  position: relative; isolation: isolate; flex: 1; min-height: 0; overflow: hidden;
  background: var(--cover-grund, #101416); font-family: var(--lesetext);
}
.satz .cover .covermotiv {
  position: absolute; inset: 0; z-index: 0; border: 0; border-radius: 0; margin: 0;
  min-height: 0; display: block; background: var(--cover-grund, #191816);
}
.satz .cover .covermotiv img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(var(--bild-helligkeit, var(--cover-bildhelligkeit, 1)));
}
.satz .coverinhalt {
  position: absolute; inset: 0; z-index: 1; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(100, minmax(0, 1fr));
  pointer-events: none;
}
.satz .coverelement {
  --cover-text-skala: 1;
  position: relative; min-width: 0; min-height: 0; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  line-height: 1.22; overflow: hidden; overflow-wrap: anywhere; text-wrap: balance;
  pointer-events: auto;
}
.satz .covertext { min-width: 0; max-width: 100%; }
.satz .coversymbol { display: inline-grid; place-items: center; flex: none; }
.satz .coversymbol svg { width: 100%; height: 100%; }
.satz .cover-autor {
  grid-column: 2 / 12; grid-row: 4 / 8; text-align: center;
  text-transform: uppercase; white-space: nowrap;
}
.satz .cover-autor .covertext {
  font-size: calc(3.8 * var(--mm) * var(--cover-text-skala));
  letter-spacing: calc(var(--sperrung-cover-autor) * 1em);
}
.satz .cover-marke {
  grid-column: 2 / 12; grid-row: 9 / 14; display: flex;
  flex-direction: row;
  align-items: center; justify-content: center; gap: calc(5.5 * var(--mm));
}
.satz .cover-marke::before,
.satz .cover-marke::after {
  content: ""; height: calc(.25 * var(--mm)); background: var(--cover-akzent); flex: 1;
}
.satz .cover-marke .coversymbol {
  width: calc(10.5 * var(--mm)); height: calc(10.5 * var(--mm)); color: var(--cover-akzent);
}
.satz .cover-titel {
  grid-column: 2 / 12; grid-row: 16 / 34;
  padding: 0 calc(5 * var(--mm)); text-align: center;
  line-height: .94;
}
.satz .cover-titel .covertext {
  font-size: calc(16 * var(--mm) * var(--cover-text-skala));
  letter-spacing: calc(var(--sperrung-cover-titel) * 1em);
}
.satz .cover-titel::after {
  content: ""; display: block; width: calc(12 * var(--mm));
  flex: none; height: calc(.25 * var(--mm)); margin: calc(3.5 * var(--mm)) auto 0;
  background: var(--cover-akzent);
}
.satz .cover-untertitel {
  grid-column: 3 / 11; grid-row: 36 / 44;
  padding: 0 calc(5 * var(--mm)); text-align: center;
  line-height: 1.34; text-transform: uppercase;
}
.satz .cover-untertitel .covertext {
  font-size: calc(4.6 * var(--mm) * var(--cover-text-skala));
  letter-spacing: calc(var(--sperrung-cover-untertitel) * 1em);
}
.satz .cover-merkmal {
  grid-row: 73 / 90; grid-column: span 3;
  padding: calc(5.5 * var(--mm)) calc(4 * var(--mm)) calc(2 * var(--mm));
  border-top: calc(.25 * var(--mm)) solid var(--cover-akzent);
  text-align: center;
}
.satz .cover-merkmale-1 .cover-merkmal { grid-column: 3 / 11; }
.satz .cover-merkmale-2 .cover-merkmal { grid-column: span 6; }
.satz .cover-merkmale-3 .cover-merkmal { grid-column: span 4; }
.satz .cover-merkmale-4 .cover-merkmal { grid-column: span 3; }
.satz .cover-merkmal + .cover-merkmal {
  border-left: calc(.25 * var(--mm)) solid color-mix(in srgb, var(--cover-akzent) 55%, transparent);
}
.satz .cover-merkmal .coversymbol {
  width: calc(9 * var(--mm)); height: calc(9 * var(--mm));
  margin: 0 auto calc(4 * var(--mm)); color: var(--cover-akzent);
}
.satz .cover-merkmal .cover-symbol-zitat {
  width: calc(12 * var(--mm)); height: calc(12 * var(--mm));
  margin-top: calc(-1.5 * var(--mm)); margin-bottom: calc(2.5 * var(--mm));
}
.satz .cover-merkmal .covertext { min-height: 0; }
.satz .cover-merkmal strong,
.satz .cover-merkmal span { display: block; }
.satz .cover-merkmal strong {
  font-size: calc(3.8 * var(--mm) * var(--cover-text-skala));
  font-weight: 700; margin-bottom: calc(1.6 * var(--mm));
}
.satz .cover-merkmal span {
  font-size: calc(3.3 * var(--mm) * var(--cover-text-skala)); line-height: 1.36;
}
.satz .cover-abschluss {
  grid-column: 2 / 12; grid-row: 92 / 99;
  display: flex; align-items: center; justify-content: center;
  border-top: calc(.25 * var(--mm)) solid var(--cover-akzent);
  text-align: center; text-transform: uppercase;
  white-space: nowrap;
}
.satz .cover-abschluss .covertext {
  font-size: calc(3.2 * var(--mm) * var(--cover-text-skala));
  letter-spacing: calc(var(--sperrung-cover-abschluss) * 1em);
}

.satz .cover-editorial-dunkel { --cover-akzent: #d6b06e; }
.satz .cover-editorial-hell { --cover-akzent: #9d7756; }

.satz .panelreihe {
  display: grid; flex: 1; min-height: 0;
  gap: calc(var(--panelluft) * var(--mm));
}

.satz .panel {
  border: calc(var(--rahmen) * var(--mm)) solid var(--comicrahmen, var(--tinte));
  overflow: hidden;
  background: var(--comicbildgrund, #fff);
  display: flex; flex-direction: column; min-height: 0;
}

/* Der Zwischenraum der Reihe bekommt nur dann eine Fläche, wenn eine
   gewählt ist - sonst bleibt das Papier sichtbar. */
.satz .panelreihe { background: var(--comiczwischenraum, transparent); }

/* Nach dem Vorbild: Bild und Textkasten sind zwei getrennte Rahmen mit
   einem schmalen Steg dazwischen, nicht ein geteilter Kasten. */
.satz .panel[data-mittext="ja"] {
  border: none; background: none; gap: calc(var(--panelluft) * var(--mm) * .55);
}
.satz .panel[data-mittext="ja"] > .bildfeld {
  border: calc(var(--rahmen) * var(--mm)) solid var(--comicrahmen, var(--tinte));
  background: var(--comicbildgrund, #fff);
}
.satz .panel[data-mittext="ja"] > .paneltext {
  border: calc(var(--rahmen) * var(--mm)) solid var(--comicrahmen, var(--tinte));
  background: var(--comictextgrund, transparent);
}

/* ------------------------------------------------------------------ Bilder */

/* Die Bildflaeche nimmt am Satz teil - sie ist kein Ueberzug.

   In einer Seitenvorlage bestimmt der Platz die Hoehe: das Bild fuellt ihn
   ueber object-fit: cover. Wo der Block dagegen seine eigene Hoehe mitbringt
   (flex: 0 0 auto, etwa der Zwischentitel oder ein angehaengter Bildblock),
   gaebe es ohne eine eigene Angabe gar keine Hoehe: das Bild ist absolut
   gesetzt und traegt nichts bei, und min-height in Prozent loest sich an
   einem Elternteil ohne feste Hoehe zu null auf. Die Flaeche fiel dort
   zusammen - das Bild war unsichtbar und der Text nahm seinen Platz ein.

   --bild-verhaeltnis traegt das Seitenverhaeltnis des tatsaechlichen Bildes
   (studio.js und render.html setzen es aus den Bildmassen). Es greift
   ausschliesslich dort, wo keine Hoehe vorgegeben ist - die Proportionen
   bestehender Seitenvorlagen bleiben damit unangetastet - und ist in allen
   drei Ansichten dasselbe: im Editor, in der Vorschau und in der Ausgabe. */
.satz .bildfeld {
  position: relative; overflow: hidden; background: #fff;
  flex: 1 1 auto; min-height: 22%;
}
.satz .block[data-eigenhoehe="ja"] .bildfeld,
.satz .bildfeld[data-hoehe="bild"] {
  flex: 0 0 auto;
  aspect-ratio: var(--bild-verhaeltnis, 3 / 2);
  height: auto; min-height: 0;
  /* Ein Bild laesst sich nicht auf zwei Seiten umbrechen. Ein Hochformat
     duerfte den Satzspiegel deshalb sonst vollstaendig fuellen und dem Text
     auf derselben Seite jeden Platz nehmen - er waere unsichtbar, statt auf
     die naechste Seite zu laufen. Drei Viertel bleiben dem Bild, ein
     Viertel ist dem Text sicher. */
  max-height: calc(var(--satzhoehe, 240) * var(--mm) * 0.75);
}
.satz .bildfeld img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.satz .bildfeld { background: var(--comicbildgrund, #fff); }
.satz .bildfeld .fehlt {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: transparent; color: var(--tinte-zart);
  font-family: var(--groteske); font-size: calc(var(--grad-mini) * var(--mm));
  letter-spacing: calc(var(--sperrung-bildmarke) * 1em); text-transform: uppercase;
}

/* --------------------------------------------------------------- Lesetext */

/* ------------------------------------------------------- Silbentrennung

   Deutscher Buchsatz ohne Silbentrennung gibt es nicht. Unsere Woerter sind
   lang; ohne Trennung reisst der Flattersatz auf und der Blocksatz bekommt
   die beruechtigten Loecher und Giessbaeche. Bisher stand hier
   hyphens: manual - es wurde also nie getrennt.

   Die Grenzen sind die des Buchsatzes, nicht die des Browsers:
   - erst ab sechs Buchstaben ueberhaupt trennen,
   - mindestens drei Buchstaben vor und nach dem Trennstrich,
   - hoechstens zwei getrennte Zeilen hintereinander (ein "Trennungsblock"
     aus drei und mehr gilt als Fehler),
   - nie in der letzten Zeile eines Absatzes trennen.

   Der Browser bringt die deutschen Trennmuster mit; die Seite traegt
   lang="de". Editor, Vorschau und PDF laufen alle in derselben Engine und
   trennen deshalb an denselben Stellen. Der reportlab-Rueckfall kennt keine
   Trennung - ein Grund mehr, den Browsersatz zu benutzen. */
.satz .textblock,
.satz .paneltext,
.satz .hinweisblock,
.satz .bildunterschrift,
.satz .listenblock {
  hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  -webkit-hyphenate-limit-last: always;
  overflow-wrap: break-word;
}

/* Ueberschriften, Titel und alles Gesperrte werden nicht getrennt - ein
   Trennstrich in einer Versalzeile ist ein Satzfehler. */
.satz h1, .satz h2, .satz h3,
.satz .kolumnentitel, .satz .seitenzahl,
.satz .covertext, .satz .blase, .satz .punkttitel {
  hyphens: none; -webkit-hyphens: none;
}

.satz .textblock {
  flex: 1; min-height: 0; overflow: hidden;
  background: var(--comictextgrund, transparent);
  font-size: calc(var(--grad-text) * var(--mm));
  line-height: var(--durchschuss);
  text-align: left;
}
/* Eine Lesespalte bleibt schmal genug, dass das Auge die Zeile hält:
   rund 66 Zeichen, gerechnet aus dem Schriftgrad selbst. */
.satz .textblock:not([data-spalten="2"]) {
  max-width: calc(var(--messbreite-em) * 1em);
}
.satz .textblock[data-spalten="2"] {
  column-count: 2;
  column-gap: calc(var(--blockluft) * var(--mm) * 1.6);
  column-rule: calc(var(--rahmen) * var(--mm)) solid var(--linie-fein);
}

.satz .paneltext {
  flex: 0 0 auto; max-height: calc(var(--paneltext-anteil) * 100%); overflow: hidden;
  border-top: calc(var(--rahmen) * var(--mm)) solid var(--tinte);
  padding: calc(var(--polster) * var(--mm) * .7) calc(var(--polster) * var(--mm) * .9);
  font-family: var(--groteske);
  font-size: calc(var(--grad-klein) * var(--mm) * .92);
  line-height: var(--durchschuss-eng);
}

.satz .bildunterschrift {
  flex: none; padding: calc(var(--polster) * var(--mm) * .8) 0 0;
  font-family: var(--groteske);
  font-size: calc(var(--grad-mini) * var(--mm));
  line-height: var(--durchschuss-eng);
  color: var(--tinte-leise);
}
.satz .bildunterschrift b, .satz .bildunterschrift strong { color: var(--tinte); }

/* Absätze: entweder Erstzeileneinzug oder Absatzabstand - nie beides.
   Der Einzug ist die Buchkonvention und daher die Voreinstellung; wer ihn
   abschaltet, bekommt stattdessen den Abstand. */
.satz p { margin: 0; }

.satz[data-einzug="an"] .textblock p + p,
.satz[data-einzug="an"] .paneltext p + p,
.satz[data-einzug="an"] .hinweisblock p + p { text-indent: var(--einzug); }

/* Nach Überschriften, Zitaten, Listen und Codeblöcken beginnt sichtbar etwas
   Neues - dort ist der Einzug überflüssig. */
.satz[data-einzug="an"] :is(h1, h2, h3, blockquote, pre, ul, ol) + p {
  text-indent: 0;
}

.satz[data-einzug="aus"] p + p {
  margin-top: calc(var(--absatzabstand) * var(--grad-text) * var(--mm));
}

/* Auch mit Einzug bekommt ein Absatz etwas Luft - nur deutlich weniger,
   damit die Buchkonvention gewahrt bleibt. */
.satz[data-einzug="an"] p + p {
  margin-top: calc(var(--absatzabstand) * var(--grad-text) * var(--mm) * .28);
}
.satz .textausrichtung-links { text-align: left; }
.satz .textausrichtung-block { text-align: justify; }
.satz .textausrichtung-rechts { text-align: right; }
/* Zentriert gehoert nicht in den Fließtext, aber Widmung, Motto und
   Verse leben davon. Keine Silbentrennung: Ein Trennstrich in einer
   zentrierten Zeile sieht immer nach Versehen aus. */
.satz .textausrichtung-mitte {
  text-align: center; text-indent: 0 !important;
  hyphens: none; -webkit-hyphens: none;
}

.satz h1, .satz h2, .satz h3 { margin: 0; font-weight: 400; }
.satz h1 {
  font-family: var(--lesetext);
  font-size: calc(var(--grad-titel) * var(--mm));
  line-height: 1.04; letter-spacing: calc(var(--sperrung-h1) * 1em);
  margin-bottom: calc(var(--grad-text) * var(--mm) * .5);
}
.satz h2 {
  font-family: var(--groteske); font-weight: 700;
  font-size: calc(var(--grad-h2) * var(--mm));
  letter-spacing: calc(var(--sperrung-h2) * 1em); text-transform: uppercase;
  line-height: 1.3;
  margin: calc(var(--grad-text) * var(--mm) * 1.1) 0 calc(var(--grad-text) * var(--mm) * .4);
}
.satz h3 {
  font-family: var(--groteske); font-weight: 700;
  font-size: calc(var(--grad-h3) * var(--mm));
  letter-spacing: calc(var(--sperrung-h3) * 1em); text-transform: uppercase;
  color: var(--tinte-leise); line-height: 1.3;
  margin: calc(var(--grad-text) * var(--mm) * .9) 0 calc(var(--grad-text) * var(--mm) * .3);
}
.satz :is(h1, h2, h3):first-child { margin-top: 0; }

.satz ul, .satz ol {
  margin: calc(var(--grad-text) * var(--mm) * .45) 0;
  padding-left: calc(var(--polster) * var(--mm) * 2.2);
}
.satz li { margin-bottom: calc(var(--grad-text) * var(--mm) * .22); }
.satz li::marker { color: var(--tinte-leise); }

.satz blockquote {
  position: relative;
  margin: calc(var(--grad-text) * var(--mm) * 1.4) 0;
  padding: 0 0 0 calc(var(--polster) * var(--mm) * 2.2);
  border-left: calc(var(--rahmen) * var(--mm) * 1.2) solid var(--linie);
  font-family: var(--lesetext); font-style: normal;
  font-size: calc(var(--grad-zitat) * var(--mm));
  line-height: 1.45; color: var(--tinte);
  text-align: left;
}
/* Das große Anführungszeichen steht frei über dem Zitat, wie im Vorbild. */
.satz blockquote::before {
  content: "\201C";
  position: absolute;
  left: calc(var(--polster) * var(--mm) * .4);
  top: calc(var(--grad-zitat) * var(--mm) * -1.35);
  font-size: calc(var(--grad-zitat) * var(--mm) * 2.6);
  line-height: 1; color: var(--linie);
  pointer-events: none;
}

.satz pre {
  margin: calc(var(--grad-text) * var(--mm) * .8) 0;
  padding: calc(var(--polster) * var(--mm)) calc(var(--polster) * var(--mm) * 1.2);
  background: var(--codeflaeche);
  border-left: calc(var(--rahmen) * var(--mm) * 2.4) solid var(--tinte-zart);
  font-family: var(--maschine);
  font-size: calc(var(--grad-code) * var(--mm));
  line-height: var(--durchschuss-eng);
  white-space: pre-wrap; overflow-wrap: break-word;
  color: var(--tinte);
}

.satz b, .satz strong { font-weight: 700; }
.satz .schrift-mono { font-family: var(--maschine); font-size: .92em; }
.satz .schrift-arial, .satz .schrift-opensans { font-family: var(--groteske); }

/* ================================================== Registerhaltiger Satz

   Ein Buch ist registerhaltig, wenn die Zeilen zweier gegenueberliegender
   Seiten genau aufeinander liegen. Man sieht das nicht bewusst - man sieht
   nur, dass die Seite ruhig ist, statt dass ein durchscheinender Zeilensalat
   das Papier grau macht. Es ist das Merkmal, an dem sich Buchsatz von
   Textverarbeitung unterscheidet.

   Erreicht wird es mit einer einzigen Regel: Jedes senkrechte Mass ist ein
   ganzes Vielfaches von --zeile. Die Blockhoehen rechnet satzraster.js aus
   (und satzraster.py fuer die Ausgabe); hier stehen die Abstaende im Text.

   Warum die Zeilenhoehe der Ueberschriften absolut gesetzt wird und nicht
   als Faktor: Eine Ueberschrift darf umbrechen. Mit einem Faktor haette ihre
   zweite Zeile eine andere Hoehe als das Raster, und alles darunter waere
   verschoben. Absolut gesetzt belegt jede Ueberschriftszeile genau eine
   Rasterzeile - egal wie viele es werden. */

.satz[data-raster="an"] .satzspiegel { gap: calc(var(--zeile) * var(--mm)); }

/* Die Regeln gelten fuer den Lauftext, nicht fuer jedes Element im Satz:
   Die Punkteliste, Tabellenzellen, Sprechblasen und das Cover haben ihren
   eigenen Rhythmus und wuerden von einer Leerzeile davor nur verschoben.
   (Die Vorschau setzt die Punkteliste als ol - ohne diese Eingrenzung
   bekaeme sie den Listenabstand und staende eine Zeile tiefer als im
   Editor, der sie als div setzt.) */

/* Absatzabstand ohne Einzug: eine ganze Leerzeile. Der Buchsatz kennt beide
   Wege - Einzug (ohne Abstand, von selbst registerhaltig) und Abstand. Nur
   ein gebrochener Abstand gehoert in keinen von beiden. */
.satz[data-raster="an"][data-einzug="aus"] :is(.textblock, .hinweisblock, .paneltext) p + p {
  margin-top: calc(var(--zeile) * var(--mm));
}

.satz[data-raster="an"] :is(.textblock, .hinweisblock, .paneltext) :is(h2, h3) {
  line-height: calc(var(--zeile) * var(--mm));
  margin: calc(var(--zeile) * var(--mm)) 0 0;
}
/* Der Seitentitel ist doppelt so gross wie die Zeile und belegt deshalb
   zwei Rasterzeilen - der Faktor 1.04 traf das schon vorher fast genau. */
.satz[data-raster="an"] :is(.textblock, .hinweisblock, .paneltext) h1 {
  line-height: calc(var(--zeile) * var(--mm) * 2);
  margin-bottom: calc(var(--zeile) * var(--mm));
}
.satz[data-raster="an"] :is(.textblock, .hinweisblock, .paneltext) :is(h1, h2, h3):first-child {
  margin-top: 0;
}

.satz[data-raster="an"] :is(.textblock, .hinweisblock, .paneltext) :is(ul, ol) {
  margin: calc(var(--zeile) * var(--mm)) 0;
}
.satz[data-raster="an"] :is(.textblock, .hinweisblock, .paneltext) li {
  margin-bottom: 0;
}

.satz[data-raster="an"] :is(.textblock, .hinweisblock, .paneltext) blockquote {
  margin: calc(var(--zeile) * var(--mm)) 0;
  line-height: var(--durchschuss);
}

/* Auch der Codeblock haelt das Raster: eine Codezeile ist eine Rasterzeile,
   und das Polster oben und unten ergibt zusammen genau eine weitere. */
.satz[data-raster="an"] :is(.textblock, .hinweisblock, .paneltext) pre {
  margin: calc(var(--zeile) * var(--mm)) 0;
  padding-top: calc(var(--zeile) * var(--mm) * .5);
  padding-bottom: calc(var(--zeile) * var(--mm) * .5);
  line-height: calc(var(--zeile) * var(--mm));
}

/* Ein Block, dessen Hoehe das Raster vorgibt, bekommt sie als feste
   Flexbasis gesetzt (data-rasterzeilen). Er darf weder wachsen noch
   schrumpfen - sonst verteilte die Flexbox die Restpixel wieder um. */
.satz .block[data-rasterzeilen],
.satz .blockreihe[data-rasterzeilen] {
  flex: 0 0 calc(var(--rasterzeilen) * var(--zeile) * var(--mm)) !important;
}
/* Ein Block *in* einer Reihe bekommt seine Hoehe von der Reihe, nicht vom
   Raster - sonst zoege die Flexbasis ihn aus dem Gitter heraus. */
.satz .blockreihe > .block[data-rasterzeilen] { flex: 1 1 auto !important; }

/* ------------------------------------------------------------ Auszeichnungen */

.satz .hinweisblock {
  flex: 1; min-height: 0; overflow: hidden;
  padding: calc(var(--polster) * var(--mm) * 1.2) calc(var(--polster) * var(--mm) * 1.5);
  font-size: calc(var(--grad-klein) * var(--mm));
  line-height: var(--durchschuss);
}
.satz .hinweisblock[data-art="erzaehler"] {
  background: var(--erzaehler);
  font-family: var(--lesetext);
}
/* Die Marginalienspalte: schmal, kleiner Grad, flatternd. Sie steht neben
   dem Fließtext (siehe .blockreihe) und trägt Anmerkungen, Jahreszahlen und
   Kurzzitate. Kein Blocksatz und keine Trennung - eine schmale Spalte
   erträgt beides nicht.

   Die Zeile bleibt die Rasterzeile, damit die Randnotiz auf denselben Linien
   steht wie der Text daneben: kleiner gesetzt, aber im gleichen Takt. */
.satz .hinweisblock[data-art="marginalie"] {
  background: none; padding: 0;
  border-left: calc(var(--rahmen) * var(--mm)) solid var(--linie);
  padding-left: calc(var(--polster) * var(--mm) * 1.2);
  font-family: var(--groteske);
  font-size: calc(var(--grad-mini) * var(--mm));
  line-height: var(--durchschuss);
  color: var(--tinte-leise);
  text-align: left;
  hyphens: none; -webkit-hyphens: none;
}
.satz[data-raster="an"] .hinweisblock[data-art="marginalie"] {
  line-height: calc(var(--zeile) * var(--mm));
}
.satz .hinweisblock[data-art="marginalie"] p + p {
  margin-top: calc(var(--zeile) * var(--mm));
  text-indent: 0;
}

.satz .hinweisblock[data-art="infobox"] {
  background: var(--infobox);
  font-family: var(--groteske);
  font-size: calc(var(--grad-klein) * var(--mm) * .95);
}
/* Der Zwischentitel beginnt oben und ist so hoch wie sein Text - eine Zeile
   oder drei, ohne Leerraum darüber. */
.satz .hinweisblock[data-art="zwischentitel"] {
  background: none; padding: 0;
  flex: 0 0 auto; min-height: 0; overflow: visible;
  display: block;
  font-family: var(--lesetext);
  font-size: calc(var(--grad-titel) * var(--mm));
  line-height: 1.04; letter-spacing: calc(var(--sperrung-h1) * 1em);
  /* Derselbe Abstand wie ueber dem Satzspiegel: Steht der Zwischentitel
     oben auf der Seite, haelt er damit nach oben und nach unten genau
     denselben Abstand - auch ueber mehrere Zeilen, weil beide Masse am
     Zeilenkasten haengen und nicht an der Zeilenzahl. */
  padding-bottom: calc(var(--kolumnenabstand) * var(--mm));
  border-bottom: calc(var(--rahmen) * var(--mm)) solid var(--linie);
}
.satz .block:has(> .hinweisblock[data-art="zwischentitel"]) { flex: 0 0 auto; }

/* ========================================================== Kapitelanfang

   Ein Kapitel faengt nicht einfach oben an. Der Buchsatz laesst ihm Luft -
   der "Kapitelaufschlag" - und setzt Zaehlzeile und Titel an den Fuss dieses
   Weissraums, unmittelbar ueber den ersten Text. Deshalb sitzt der Inhalt
   dieses Blocks unten, nicht oben.

   Wie hoch der Weissraum ist, bestimmt die Vorlage; das Zeilenraster macht
   daraus ganze Zeilen, damit der erste Text des Kapitels auf derselben Linie
   beginnt wie der Text jeder anderen Seite. */

.satz .hinweisblock[data-art="kapitelkopf"] {
  background: none; padding: 0;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  font-family: var(--lesetext);
  font-size: calc(var(--grad-text) * var(--mm));
  line-height: var(--durchschuss);
}
/* Nach unten geschoben wird mit einem automatischen Aussenabstand am ersten
   Kind, nicht mit justify-content: Ein Flexkasten mit flex-end meldet eine
   Rollhoehe knapp ueber seiner Anzeigehoehe, und der Seitenfluss haelt das
   fuer einen Ueberlauf - er haengte dann Kapitelseite an Kapitelseite. */
.satz .hinweisblock[data-art="kapitelkopf"] > :first-child { margin-top: auto; }
.satz .hinweisblock[data-art="kapitelkopf"] h1,
.satz .hinweisblock[data-art="kapitelkopf"] h2 {
  font-family: var(--lesetext); font-weight: 400;
  font-size: calc(var(--grad-titel) * var(--mm));
  line-height: 1.04; letter-spacing: calc(var(--sperrung-h1) * 1em);
  text-transform: none; color: var(--tinte);
  margin: 0;
}
/* Die Zaehlzeile ist klein, versal und weit gesperrt - sie soll den Titel
   ankuendigen, nicht mit ihm konkurrieren. */
.satz .hinweisblock[data-art="kapitelkopf"] .kapitelzahl {
  font-family: var(--groteske);
  font-size: calc(var(--grad-marke) * var(--mm));
  letter-spacing: calc(var(--sperrung-kolumnentitel) * 1em);
  text-transform: uppercase; color: var(--tinte-leise);
  margin: 0 0 calc(var(--zeile) * var(--mm) * .5);
}
/* Im registerhaltigen Satz belegt der Titel ganze Zeilen, damit der
   Kapitelaufschlag aufgeht. */
.satz[data-raster="an"] .hinweisblock[data-art="kapitelkopf"] :is(h1, h2) {
  line-height: calc(var(--zeile) * var(--mm) * 2);
}
.satz[data-raster="an"] .hinweisblock[data-art="kapitelkopf"] .kapitelzahl {
  line-height: calc(var(--zeile) * var(--mm));
  margin: 0;
}

/* -------------------------------------------------------------- Initial

   Der erste Buchstabe eines Kapitels steht drei Zeilen hoch im Text. Er
   braucht keine eigene Auszeichnung: Er entsteht dort, wo ein Textblock
   unmittelbar auf einen Kapitelkopf folgt. Der Benutzer setzt eine Vorlage
   ein und bekommt ihn - das ist der ganze Bedienvorgang.

   Die Hoehe ist bewusst ein Vielfaches der Zeile: So bleibt der Text neben
   dem Initial im Raster, und die dritte Zeile schliesst mit seinem Fuss ab.

   Nicht im PDF ueber reportlab und nicht in Word - beide kennen keinen
   Initialbuchstaben. Der Browserdruck, die Vorschau und der Editor zeigen
   ihn; das ist in docs/CORPORATE_DESIGN.md festgehalten. */

.satz[data-initialen="an"] .block[data-typ="hinweis"]:has(> .hinweisblock[data-art="kapitelkopf"])
  + .block .textblock > p:first-child::first-letter {
  float: left;
  font-family: var(--lesetext);
  font-size: calc(var(--zeile) * var(--mm) * 3);
  line-height: .78;
  padding: 0 calc(var(--polster) * var(--mm) * .8) 0 0;
  color: var(--akzent);
  -webkit-initial-letter: 3;
  initial-letter: 3;
}
/* Nach einem Initial ist der Erstzeileneinzug falsch - er schoebe den Text
   vom Buchstaben weg. */
.satz[data-initialen="an"] .block[data-typ="hinweis"]:has(> .hinweisblock[data-art="kapitelkopf"])
  + .block .textblock > p:first-child { text-indent: 0 !important; }

/* ------------------------------------------------- Kapitelanfang und Vakat

   Ein Kapitelanfang traegt keinen Kolumnentitel: Die Seite sagt selbst, wo
   man ist. Eine Vakatseite ist bewusst leer - sie traegt weder Kolumnentitel
   noch Seitenzahl, sonst waere sie nicht leer, sondern nur unbedruckt. */
.satz[data-rolle="kapitel"] .kolumnentitel,
.satz[data-rolle="vakat"] .kolumnentitel,
.satz[data-rolle="vakat"] .seitenzahl { display: none; }

/* ------------------------------------------------------------- Punkteliste */

/* Die Vorschau setzt die Punkteliste als ol/li, der Editor als div. Ohne
   diesen Reset trug das li die Browservorgaben (Aufzaehlungszeichen, Einzug,
   Aussenabstand) und die Vorschau setzte anders als der Editor. Der Reset
   stand frueher nur in render.html und wirkte deshalb nur dort. */
.satz .listenblock { list-style: none; padding: 0; margin: 0; }

.satz .listenblock {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  gap: calc(var(--grad-text) * var(--mm) * .85);
}
.satz .listenpunkt {
  margin: 0;
  display: grid;
  grid-template-columns: calc(var(--ziffernspalte) * var(--mm)) minmax(0, 1fr);
  gap: calc(var(--polster) * var(--mm) * 1.4);
  align-items: start;
}
.satz .listenpunkt .zaehler {
  width: calc(var(--ziffernkreis) * var(--mm)); height: calc(var(--ziffernkreis) * var(--mm));
  border: calc(var(--rahmen) * var(--mm) * 1.4) solid var(--akzent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--groteske); font-weight: 500;
  font-size: calc(var(--grad-marke) * var(--mm));
  letter-spacing: calc(var(--sperrung-zaehler) * 1em); color: var(--akzent);
}
.satz .listenpunkt .punkttitel {
  font-family: var(--groteske); font-weight: 700;
  font-size: calc(var(--grad-h3) * var(--mm) * 1.15);
  line-height: 1.25; color: var(--tinte);
  margin-bottom: calc(var(--grad-text) * var(--mm) * .22);
}
.satz .listenpunkt .punkttext {
  font-size: calc(var(--grad-text) * var(--mm) * .92);
  line-height: var(--durchschuss);
  color: var(--tinte-leise);
  max-width: calc(var(--messbreite-em) * 1em);
}

/* --------------------------------------------------------------- Tabellen */

.satz .tabellenblock { flex: 1; min-height: 0; overflow: hidden; }
.satz .tabellenblock table {
  width: 100%; border-collapse: collapse;
  font-family: var(--groteske);
  font-size: calc(var(--grad-klein) * var(--mm) * .92);
  line-height: var(--durchschuss-eng);
}
.satz .tabellenblock th,
.satz .tabellenblock td {
  border: none;
  border-bottom: calc(var(--rahmen) * var(--mm) * .7) solid var(--linie-fein);
  padding: calc(var(--polster) * var(--mm) * .6) calc(var(--polster) * var(--mm) * .9)
           calc(var(--polster) * var(--mm) * .6) 0;
  text-align: left; vertical-align: top;
}
.satz .tabellenblock th {
  hyphens: none; -webkit-hyphens: none;
  font-weight: 700; letter-spacing: calc(var(--sperrung-tabellenkopf) * 1em);
  text-transform: uppercase;
  font-size: calc(var(--grad-marke) * var(--mm));
  color: var(--tinte-leise);
  border-bottom: calc(var(--rahmen) * var(--mm) * 1.6) solid var(--tinte);
  padding-bottom: calc(var(--polster) * var(--mm) * .5);
}
.satz .tabellenblock tr:last-child td {
  border-bottom: calc(var(--rahmen) * var(--mm)) solid var(--linie);
}

/* ------------------------------------------------------------ Sprechblasen */

.satz .blase {
  position: absolute; z-index: 5;
  max-width: calc(var(--blase-maxbreite) * 100%); min-width: calc(12 * var(--mm));
  background: #fff;
  border: calc(var(--rahmen) * var(--mm) * 1.2) solid var(--tinte);
  border-radius: calc(3.4 * var(--mm));
  padding: calc(var(--polster) * var(--mm) * .6) calc(var(--polster) * var(--mm) * .9);
  font-family: var(--groteske);
  font-size: calc(var(--grad-blase) * var(--mm));
  line-height: var(--durchschuss-eng);
  font-weight: 600; text-align: center;
  box-shadow: 0 calc(.3 * var(--mm)) calc(.8 * var(--mm)) rgba(20,23,28,.14);
}
.satz .blase[data-art="denken"] { border-radius: calc(5 * var(--mm)); border-style: dashed; }
.satz .blase[data-art="ruf"] { border-radius: calc(.7 * var(--mm)); transform: rotate(-1.2deg); }
/* Fluestern: feine Punktlinie und ein gedaempfter Ton, dazu kleinerer Grad
   - so lesen es alle Letterer-Handbuecher. */
.satz .blase[data-art="fluestern"] {
  border-style: dotted;
  border-width: calc(var(--rahmen) * var(--mm));
  color: var(--tinte-leise);
  font-size: calc(var(--grad-blase) * var(--mm) * .88);
  font-weight: 500;
}
/* Funk, Telefon, Lautsprecher: eckige Kontur, kursiver Satz. Im
   deutschsprachigen Comic ist die eckige Blase die Konvention fuer alles,
   was aus einem Geraet kommt. */
.satz .blase[data-art="funk"] {
  border-radius: 0;
  border-style: double;
  border-width: calc(var(--rahmen) * var(--mm) * 2.4);
  font-style: italic;
}
.satz .blase[data-art="kasten"] {
  border-radius: calc(.5 * var(--mm)); background: var(--erzaehler);
  font-family: var(--lesetext); font-weight: 400; text-align: left;
}
.satz .blase .zipfel {
  position: absolute; left: calc(4 * var(--mm)); bottom: calc(-2.4 * var(--mm));
  width: 0; height: 0;
  border-left: calc(1.5 * var(--mm)) solid transparent;
  border-right: calc(1.5 * var(--mm)) solid transparent;
  border-top: calc(2.6 * var(--mm)) solid var(--tinte);
}
.satz .blase .zipfel::after {
  content: ""; position: absolute;
  left: calc(-1 * var(--mm)); top: calc(-2.9 * var(--mm));
  border-left: calc(1 * var(--mm)) solid transparent;
  border-right: calc(1 * var(--mm)) solid transparent;
  border-top: calc(2 * var(--mm)) solid #fff;
}
.satz .blase[data-art="kasten"] .zipfel,
.satz .blase[data-art="denken"] .zipfel { display: none; }

/* =====================================================================
   Markenbausteine im Satz — Infokasten, Schrittliste, Symbole
   ===================================================================== */

.satz .infokasten {
  margin: calc(var(--grad-text) * var(--mm) * 1.1) 0;
  border: calc(var(--rahmen) * var(--mm)) solid var(--linie);
  border-radius: calc(2.4 * var(--mm));
  background: var(--erzaehler);
  overflow: hidden;
}
.satz .infokasten > .kopf {
  display: flex; align-items: center;
  gap: calc(var(--polster) * var(--mm) * .8);
  padding: calc(var(--polster) * var(--mm) * .8) calc(var(--polster) * var(--mm) * 1.2);
  border-bottom: calc(var(--rahmen) * var(--mm)) solid var(--linie);
  background: rgba(139, 119, 87, .06);
}
.satz .infokasten > .kopf .symbol {
  flex: none; width: calc(6.4 * var(--mm)); height: calc(6.4 * var(--mm));
  color: var(--akzent); display: block;
}
.satz .infokasten > .kopf .symbol svg { width: 100%; height: 100%; display: block; }
.satz .infokasten > .kopf .titel {
  font-size: calc(var(--grad-klein) * var(--mm));
  color: var(--tinte-leise);
}
.satz .infokasten > .inhalt {
  padding: calc(var(--polster) * var(--mm) * 1.2);
  font-size: calc(var(--grad-text) * var(--mm));
  line-height: var(--durchschuss);
}

/* Schrittliste: Ziffernkreise, durch eine feine Linie verbunden. */
.satz ol.schrittliste {
  list-style: none; padding: 0;
  margin: calc(var(--grad-text) * var(--mm) * .9) 0;
  counter-reset: schritt;
}
.satz ol.schrittliste > li {
  position: relative; counter-increment: schritt;
  padding-left: calc(var(--schrittspalte) * var(--mm));
  margin-bottom: calc(var(--grad-text) * var(--mm) * .7);
  min-height: calc(7 * var(--mm));
}
.satz ol.schrittliste > li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: calc(-.2 * var(--mm));
  width: calc(var(--schrittkreis) * var(--mm));
  height: calc(var(--schrittkreis) * var(--mm));
  border: calc(var(--rahmen) * var(--mm) * 1.2) solid var(--akzent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--grad-klein) * var(--mm) * .85);
  color: var(--akzent);
}
/* Die Linie zwischen zwei Ziffern zeigt den Ablauf. */
.satz ol.schrittliste > li:not(:last-child)::after {
  content: ""; position: absolute;
  left: calc(var(--schrittkreis) * var(--mm) / 2); top: calc((var(--schrittkreis) + .2) * var(--mm)); bottom: calc(-.7 * var(--mm));
  border-left: calc(var(--rahmen) * var(--mm)) dotted var(--linie);
}

/* =====================================================================
   Fußnoten, Quellennachweise und Verweise
   ===================================================================== */

.satz .fussnote {
  font-size: .62em; line-height: 0; vertical-align: super;
  color: var(--tinte); cursor: pointer;
  padding-left: .06em;
}
.satz .fussnote .quelle { display: none; }
.satz .fussnote::after { content: attr(data-nr); }
.blatt .fussnote:hover { color: var(--akzent); }

/* Der Apparat sitzt am Fuß des Satzspiegels, abgesetzt durch eine feine
   Linie - wie im klassischen Buchsatz. */
.satz .quellenapparat {
  margin-top: auto;
  padding-top: calc(var(--polster) * var(--mm) * 1.4);
  border-top: calc(var(--rahmen) * var(--mm)) solid var(--linie);
  flex: 0 0 auto;
}
.satz .apparatkopf {
  font-size: calc(var(--grad-marke) * var(--mm));
  letter-spacing: calc(var(--sperrung-apparatkopf) * 1em); text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: calc(var(--polster) * var(--mm) * .7);
}
.satz .quellenapparat ol {
  margin: 0; padding-left: calc(var(--polster) * var(--mm) * 2.4);
  font-size: calc(var(--grad-mini) * var(--mm) * 1.15);
  line-height: 1.45; color: var(--tinte);
}
.satz .quellenapparat li { margin-bottom: calc(var(--polster) * var(--mm) * .35); }

/* Verweise: hervorgehoben oder unscheinbar - je nach Einstellung. */
.satz a { color: inherit; text-decoration: none; }
.satz[data-verweise="farbig"] a {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: .14em;
  text-decoration-thickness: .04em;
}

/* =====================================================================
   Landingpage-Bausteine

   Diese Elemente erscheinen ausschliesslich in der HTML-Ausgabe. Sie
   folgen demselben Farbklima und derselben Schrift wie der Buchsatz -
   eine Landingpage aus PageSetter soll aussehen, als stamme sie aus
   demselben Haus wie das Buch.
   ===================================================================== */

.satz .webblock {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  gap: calc(var(--polster) * var(--mm));
}

.satz .webmarke {
  position: absolute; right: 0; top: 0; z-index: 4;
  font-size: calc(var(--grad-marke) * var(--mm) * .82);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinte-zart);
  border: calc(var(--rahmen) * var(--mm)) solid var(--linie-fein);
  border-radius: 999px; padding: 0 calc(var(--polster) * var(--mm) * .7);
}

/* Aufmacher */
.satz .hero .herobild { flex: 1 1 auto; min-height: 30%; border-radius: calc(2 * var(--mm)); }
.satz .heroinhalt { flex: 0 0 auto; display: flex; flex-direction: column;
  gap: calc(var(--polster) * var(--mm) * .8); }
.satz .herotitel {
  font-size: calc(var(--grad-titel) * var(--mm) * .82);
  line-height: 1.08; letter-spacing: -.012em;
}
.satz .herolead, .satz .weblead {
  font-size: calc(var(--grad-lead) * var(--mm) * .82);
  line-height: 1.45; color: var(--tinte-leise);
  max-width: calc(var(--messbreite-em) * .8em);
}
.satz .webtitel, .satz .aufruftitel {
  font-size: calc(var(--grad-titel) * var(--mm) * .58);
  line-height: 1.15; letter-spacing: -.008em;
}

/* Knopf */
.satz .knopfzeile { display: flex; align-items: center;
  gap: calc(var(--polster) * var(--mm)); }
.satz .webknopf {
  display: inline-block;
  background: var(--akzent); color: #fff;
  border-radius: 999px;
  padding: calc(var(--polster) * var(--mm) * .7) calc(var(--polster) * var(--mm) * 2);
  font-size: calc(var(--grad-klein) * var(--mm));
}

/* Video */
.satz .videorahmen {
  flex: 1 1 auto; min-height: 30%;
  border: calc(var(--rahmen) * var(--mm)) solid var(--linie);
  border-radius: calc(2 * var(--mm));
  background: var(--leerflaeche);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--polster) * var(--mm) * .6);
  color: var(--tinte-zart);
}
.satz .videorahmen > svg { width: calc(14 * var(--mm)); height: calc(14 * var(--mm)); }
.satz .videoquelle {
  font-size: calc(var(--grad-mini) * var(--mm)); color: var(--tinte-leise);
  max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Belege */
.satz .beleggitter {
  flex: 1; display: grid; gap: calc(var(--polster) * var(--mm) * 1.2);
  grid-template-columns: repeat(auto-fit, minmax(calc(45 * var(--mm)), 1fr));
  align-content: start;
}
.satz .belegkarte {
  border: calc(var(--rahmen) * var(--mm)) solid var(--linie-fein);
  border-radius: calc(2 * var(--mm));
  padding: calc(var(--polster) * var(--mm) * 1.2);
  background: var(--erzaehler);
}
.satz .belegtext { font-size: calc(var(--grad-text) * var(--mm) * .88); line-height: 1.4; }
.satz .belegname {
  margin-top: calc(var(--polster) * var(--mm) * .6);
  font-size: calc(var(--grad-mini) * var(--mm)); color: var(--tinte-leise);
}

/* Formular */
.satz .formularfelder { display: grid; gap: calc(var(--polster) * var(--mm) * .9); }
.satz .formularfeld .feldname {
  display: block; font-size: calc(var(--grad-mini) * var(--mm));
  color: var(--tinte-leise); margin-bottom: calc(var(--polster) * var(--mm) * .3);
}
.satz .formularfeld .feldkasten {
  display: block; height: calc(9 * var(--mm));
  border: calc(var(--rahmen) * var(--mm)) solid var(--linie);
  border-radius: calc(1.4 * var(--mm)); background: #fff;
}
.satz .formularfeld.gross .feldkasten { height: calc(24 * var(--mm)); }
.satz .formulareinwilligung {
  display: flex; gap: calc(var(--polster) * var(--mm) * .8);
  font-size: calc(var(--grad-mini) * var(--mm)); color: var(--tinte-leise);
  line-height: 1.4;
}
.satz .formulareinwilligung .haken {
  flex: none; width: calc(4 * var(--mm)); height: calc(4 * var(--mm));
  border: calc(var(--rahmen) * var(--mm)) solid var(--linie);
  border-radius: calc(.6 * var(--mm)); margin-top: calc(.4 * var(--mm));
}
.satz .formularziel {
  font-size: calc(var(--grad-mini) * var(--mm) * .9); color: var(--tinte-zart);
  margin: 0;
}
.satz .formularfehler {
  margin: 0 0 calc(var(--polster) * var(--mm));
  padding: calc(var(--polster) * var(--mm) * .7);
  border-left: calc(.8 * var(--mm)) solid #9d3e32;
  background: rgba(157, 62, 50, .08);
  color: #772d25;
  font-weight: 600;
}
.satz .formularfelder :disabled { opacity: .58; cursor: not-allowed; }

/* Fragen */
.satz .fragenkasten {
  border-bottom: calc(var(--rahmen) * var(--mm)) solid var(--linie-fein);
  padding-bottom: calc(var(--polster) * var(--mm) * .9);
  margin-bottom: calc(var(--polster) * var(--mm) * .9);
}
.satz .fragetitel { font-size: calc(var(--grad-text) * var(--mm) * .95); }
.satz .frageantwort {
  font-size: calc(var(--grad-text) * var(--mm) * .88);
  color: var(--tinte-leise); line-height: 1.45;
  margin-top: calc(var(--polster) * var(--mm) * .4);
}

/* Abschluss-Aufruf */
.satz .aufruf {
  align-items: flex-start; justify-content: center;
  background: var(--erzaehler);
  border-radius: calc(2.4 * var(--mm));
  padding: calc(var(--polster) * var(--mm) * 2);
}