/* ============================================================
   wk-print.css — EINE Druckgrundlage für alle Werkzeuge.

   Warum eine gemeinsame Datei und nicht je Werkzeug ein Layout:
   Setlist, Textbuch, Belegliste, Saalplan, Freistellungen,
   später Mitgliederlisten und Jahresberichte — es kommt ständig etwas
   dazu. Bringt jedes Werkzeug sein eigenes Drucklayout mit, sehen am
   Ende sechs Dokumente unterschiedlich aus und keines richtig.

   Der Ablauf für jedes künftige Dokument ist deshalb:
     1. Das, was aufs Papier soll, in ein `.druck-seite` packen.
     2. `druckKnopf()` daneben setzen (wk-app.js) — ruft window.print().
     3. Fertig. Diese Datei tut den Rest.

   Eingebunden mit media="print" (index.html): am Bildschirm ändert sie
   nichts, sie greift ausschließlich im Druckdialog. „Als PDF speichern"
   steckt dort in jedem Browser — deshalb braucht es keinen zweiten
   Dienst, keinen Speicherplatz und keine Aktualisierungen.

   GRENZE, EHRLICH BENANNT: Seitenränder und Silbentrennung unterscheiden
   sich zwischen Browsern, und im Druckdialog lässt sich skalieren. Für
   Arbeitsdokumente ist das egal. Für die Urkunde — die aussehen MUSS wie
   die Vorlage — reicht es nicht; die bleibt beim Python-Dienst
   (dokumentation/DATEIEN-UND-WERKZEUGE.md, Abschnitt 4).
   ============================================================ */

@page{
  size:A4;
  margin:18mm 16mm 20mm;
}

/* ── Grundfarben: schwarz auf weiß ──────────────────────────
   Bordeaux und Gold sehen am Bildschirm gut aus und fressen im
   Schwarzweißdrucker eine Tonerpatrone. Auf Papier zählt Lesbarkeit,
   nicht Hausfarbe. */
html,body{
  background:#fff!important;color:#000!important;
  font-size:10.5pt;line-height:1.45;
  overflow:visible!important;
}
*{
  background:transparent!important;
  box-shadow:none!important;
  text-shadow:none!important;
  color:#000!important;
  -webkit-print-color-adjust:economy;
}

/* ── Was nie aufs Papier gehört ─────────────────────────────
   Alles, womit man am Bildschirm arbeitet: Navigation, Knöpfe,
   Auswahlfelder, der Vorhang. Ein gedrucktes
   Blatt mit einem Knopf „Hinzufügen" darauf ist ein Fehler, den
   jeder sofort sieht. */
.site-header,.site-nav,.nav-burger,.skip-link,
.phero,.site-footer,
.reveal,.overlay,.sheet,.toast,
.tool-head,.ws-zeile,.reiter,
button,select,input[type=checkbox],input[type=radio],
.btn-primary,.btn-soft,.btn-gold,.btn-sm,.btn-xs,
.mv-aktionen,.mv-hilfe,
.no-print,.nur-bildschirm{
  display:none!important;
}

/* Ausnahme von der Knopf-Regel: manche Knöpfe sind gar keine Knöpfe,
   sondern Inhalt in Knopfform. Wer so etwas baut, hängt `.druck-zeigen` dran.
   (Hier stand `.sp-gast` mit demselben Grund — die Gäste im gezeichneten Saal
   sind zum Antippen `<button>`. Seit der Saalplan als LISTE gedruckt wird und
   das Raster `no-print` trägt, kommt kein Gast-Knopf mehr aufs Papier.) */
button.druck-zeigen{display:flex!important}

/* Gegenstück: was NUR aufs Papier gehört — Vereinskopf, Datum,
   Unterschriftszeile. Am Bildschirm liegt es in wk-app.css auf
   display:none, hier kommt es zurück. */
.nur-druck{display:block!important}
.nur-druck.zeile{display:flex!important}

/* ── Seitenaufbau ───────────────────────────────────────────
   `.druck-seite` ist der Umschlag um genau ein Dokument. Mehrere
   davon hintereinander ergeben mehrere Blätter. */
main,.wrap,#stage{
  display:block!important;
  max-width:none!important;width:auto!important;
  margin:0!important;padding:0!important;
  /* `min-height:100vh` ist am Bildschirm richtig (der Inhalt soll den Schirm
     füllen) und auf Papier ein Fehler: eine Viewport-Höhe IST dort eine Seite,
     also entstand ein leeres Blatt, bevor das Dokument überhaupt anfing. Genau
     das lag im Textbuch vor dem Deckblatt. */
  min-height:0!important;
}
.druck-seite{
  break-before:page;
  padding:0!important;margin:0!important;
}
.druck-seite:first-of-type{break-before:auto}

/* Kopfzeile eines Dokuments: Vereinsname links, Datum rechts.
   Wird mit <div class="druck-kopf"> gesetzt, den Inhalt liefert
   das jeweilige Werkzeug. */
.druck-kopf{
  display:flex!important;justify-content:space-between;align-items:baseline;
  border-bottom:.6pt solid #000;padding-bottom:3mm;margin-bottom:6mm;
  font-size:9pt;letter-spacing:.04em;text-transform:uppercase;
}
.druck-fuss{
  border-top:.6pt solid #000;padding-top:2mm;margin-top:8mm;font-size:8.5pt;
}
/* KEINE Seitenzahl über @page. Das Randfeld `@bottom-right` mit
   `counter(page)` stand hier lange und hat nie etwas getan: Chrome und Firefox
   setzen die Randfelder von @page nicht um. Schlimmer noch — wo ein Browser sie
   DOCH umsetzt (Safari), zählte er ab 1 und damit an der Zählung des Textbuchs
   vorbei, das beim Dialog mit „- 3 -" beginnt.

   Wer Seitenzahlen braucht, bricht deshalb selbst um: das Textbuch tut das in
   wk-app.js (tbDruckstueck) und schreibt die Zahl als ganz gewöhnliche Zeile
   oben auf jedes Blatt. Für Arbeitsblätter, die auf eine Seite passen, bleibt
   es bei der Fußzeile im Fluss (.druck-fuss). */

/* ── Umbrüche: nichts reißt mitten durch ────────────────────
   Eine Szene, ein Song, eine Buchungszeile, ein Tisch — das sind
   Einheiten. Wer sie auf zwei Blättern sucht, hat verloren. */
.card,.ev,.mv-zeile,.tb-szene,.bt-zeile{
  break-inside:avoid;page-break-inside:avoid;
}
h1,h2,h3,h4,.eyebrow{break-after:avoid;page-break-after:avoid}
table{break-inside:auto}
tr,.mv-kopf{break-inside:avoid}
thead{display:table-header-group}

/* ── Flächen werden Linien ──────────────────────────────────
   Am Bildschirm trennen Farbflächen, auf Papier tun das Linien. */
.card,.ev{
  border:.6pt solid #000!important;border-radius:0!important;
  padding:3mm 4mm!important;margin:0 0 2mm 0!important;
}
.pill,.zu-fest{
  border:.5pt solid #000!important;border-radius:0!important;
  padding:0 1.5mm!important;font-size:8.5pt;
}
hr{border:none;border-top:.6pt solid #000}

/* Raster fallen flach: mehrspaltige Bildschirm-Layouts werden auf
   Papier untereinander gesetzt, sonst wird jede Spalte zu schmal. */
.grid.two,.grid.side,.tb-grid{
  display:block!important;
}
/* ── Der Saalplan wird auf dem Papier zur LISTE ─────────────
   Am Bildschirm ist der Saal ein RAUM: dort wird überlegt, wer
   vorn sitzt, wer hinten, und was passiert, wenn eine Gruppe
   umzieht. Die Anordnung IST dort die Frage.

   Wer „Drucken" drückt, ist damit fertig. Auf dem Blatt steht
   keine Frage mehr, sondern eine Auskunft: wer sitzt an welchem
   Tisch. Dafür ist die Zeichnung das schlechtere Werkzeug — in
   einen Kasten von 55 mm passen sechs Namen nur abgeschnitten,
   und „Schmied…" hilft am Einlass niemandem. Deshalb geht das
   Raster hier NICHT mit aufs Papier (`.sp-saal` trägt `no-print`),
   sondern die Tabelle `.sp-zettel`: je Tisch eine Zeile, Tisch 1
   bis 13 und die Stehplätze, jeder Name ausgeschrieben.

   Vorlage ist die Tabelle, die der Verein von Hand pflegte
   (05-sitzlan-saal/2025-07-04_Juli_Freitag.xlsx, Blatt „Personen").

   Ausgelöst über `body.druck-saalplan` (kvDrucken in wk-karten.js):
   ohne die Klasse druckt der Zettel wie jedes andere Dokument
   mit; mit ihr ist er allein auf dem Papier. */

/* Querformat NUR für dieses Dokument: `page:` benennt eine Seitenvorlage,
   `@page quer` beschreibt sie. Ein globales `size:landscape` würde jedes
   andere Blatt mitdrehen. Quer, weil die Namen dann in EINER Zeile stehen:
   sechs Gruppen nebeneinander brauchen Breite, und Breite ist genau das,
   was ein umbrochener Name kostet. */
@page quer{ size:A4 landscape; margin:8mm; }
body.druck-saalplan{ page:quer; }

/* Alles unsichtbar, dann den Zettel wieder sichtbar — und ihn über die ganze
   Seite legen. Der Weg über `visibility` statt `display:none` ist Absicht: er
   braucht die Vorfahren des Blattes nicht zu kennen (sonst ginge das nur mit
   `:has()`, und daran hängt hier zu viel). `display:none` aus `.no-print`
   sticht `visibility:visible` trotzdem — deshalb bleibt das Raster draußen. */
body.druck-saalplan #stage,
body.druck-saalplan #stage *{ visibility:hidden!important; }
body.druck-saalplan #saalplan,
body.druck-saalplan #saalplan *{ visibility:visible!important; }
body.druck-saalplan #saalplan{
  position:absolute;left:0;top:0;width:100%;
}
body.druck-saalplan .no-print{ display:none!important; }

/* EINE ZEILE, NICHT ZWEI. Titel, daneben Einlass und Beginn, ganz rechts die
   Gesamtzahl. Jede Zeile, die der Kopf mehr braucht, fehlt der Tabelle — und
   die Tabelle muss auf EIN Blatt. Genau daran ist die erste Fassung
   gescheitert: Zeiten unter dem Titel und eine 26-pt-Zahl daneben kosteten
   zusammen rund 6 mm, und die fehlten am Ende.

   Der Kopf ist AUSKUNFT, nicht Überschrift. Wer am Einlass steht, liest die
   Namen in der Tabelle — die Zahl oben rechts sieht er einmal beim Aufnehmen
   des Blattes an. Sie braucht deshalb keine Plakatgröße, nur eine feste
   Stelle und eine Beschriftung, damit man nicht raten muss, was sie zählt. */
.sp-druckkopf{
  display:flex!important;justify-content:space-between;align-items:baseline;gap:6mm;
  border-bottom:1pt solid #000;padding-bottom:1.6mm;margin-bottom:2.5mm;
  line-height:1.2;
}
.sp-dk-was{font-size:16pt;font-weight:700}
/* Einlass und Beginn NEBEN dem Titel: „ab wann kann ich rein?" ist die
   häufigste Frage des Abends, und wer sie beantwortet, hat dieses Blatt in
   der Hand und sonst nichts. */
.sp-dk-zeit{font-size:12pt;font-weight:400;margin-left:6mm;white-space:nowrap}
.sp-druckkopf-z{font-size:11pt;font-weight:400;white-space:nowrap;text-align:right}
.sp-dk-k{
  font-size:8pt;text-transform:uppercase;letter-spacing:.08em;
  opacity:.6;margin-right:2mm;
}
.sp-druckkopf-z b{font-size:13pt;font-weight:700;font-variant-numeric:tabular-nums}

/* ── Der Zettel ─────────────────────────────────────────────
   Vierzehn Zeilen plus Summe auf ein Querformat (194 mm nutzbare Höhe).

   DIE ZEILENHÖHE WIRD HIER GESETZT, UND ZWAR AUF JEDER ZELLE. Das ist der
   Grund, warum die erste Fassung zweiseitig wurde: oben in dieser Datei steht
   `line-height:1.45` für den Fließtext, und die erbt eine Tabellenzelle, wenn
   man sie nicht daran hindert. Bei 16 pt sind das 8,2 mm allein für die
   Zeilenbox — mal fünfzehn Zeilen rund 24 mm, die niemand im Layout sieht und
   die genau am Ende fehlen. Eine Tabelle, die aufs Blatt passen MUSS, darf
   ihre Zeilenhöhe nicht erben.

   Gerechnet: Zeile = max(Name 15pt·1.2, Zahl 19pt·1) + 3 mm Polster ≈ 9,7 mm.
   Fünfzehn Zeilen 146 mm, Kopf und Tabellenkopf 17 mm — zusammen rund 163 mm.
   Der Rest ist ABSICHT: Puffer für Tische, deren Namen umbrechen. Wer hier
   Schrift oder Zeilenhöhe hochzieht, schiebt genau diese Tische auf ein
   zweites Blatt — und ein zweites Blatt ist das, was dieser Zettel abschafft.

   Feste Spaltenbreiten für Nummer und Summe, den ganzen Rest bekommen die
   Namen — sie sind der Zweck des Blattes, alles andere ist Beiwerk. */
.sp-zettel{
  width:100%;border-collapse:collapse;table-layout:fixed;
}
/* Keine Zelle erbt die Zeilenhöhe des Fließtexts — siehe oben. */
.sp-zettel th,.sp-zettel td{line-height:1.2}
.sp-zettel thead th{
  font-size:10pt;font-weight:400;text-transform:uppercase;letter-spacing:.08em;
  text-align:left;padding:0 2mm 1mm;border-bottom:.5pt solid #000;
}
.sp-zettel thead th:last-child{text-align:right}
.sp-zettel th:first-child{width:31mm}
/* `tr>:last-child` und nicht `td:last-child`: bei `table-layout:fixed`
   bestimmt die ERSTE Zeile die Spaltenbreiten, und das ist der Kopf — dort
   ist die letzte Zelle ein `th`. Bis zum 01.10.2026 griff die Breite deshalb
   nirgends, Gäste und Gesamt teilten sich den Rest je zur Hälfte, und die
   Namen brachen auf halber Strecke um oder liefen in die Summe. */
.sp-zettel tr>:last-child{width:25mm}
/* Eine Zeile ist eine Einheit — sie reißt nicht auf zwei Blätter. */
.sp-zettel tbody tr,.sp-zettel tfoot tr{
  border-bottom:.3pt solid #000;break-inside:avoid;page-break-inside:avoid;
}
.sp-zettel tbody th,.sp-zettel tfoot th{
  text-align:left;vertical-align:baseline;padding:1.5mm 2mm;
  font-size:14pt;font-weight:700;white-space:nowrap;line-height:1.1;
}
/* DIE NAMEN WERDEN NIE ABGESCHNITTEN. Kein `ellipsis`, kein `overflow:hidden`:
   lieber bricht die Zeile um, als dass ein halber Name dasteht. Und zwar so
   spät wie möglich: ein Paar darf zwischen den Wörtern des Namens brechen,
   nur die Zahl hängt (`&nbsp;` in wk-karten.js) am letzten Wort. Ein ganzes
   Paar `nowrap` brach die Zeile ein Paar zu früh um. */
.sp-z-g{
  padding:1.5mm 2mm;vertical-align:baseline;
  font-size:15pt;line-height:1.25;
}
.sp-z-p{margin-right:4mm}
.sp-z-p b{font-weight:700}
.sp-z-p i{font-style:normal;font-variant-numeric:tabular-nums;font-weight:400;white-space:nowrap}
.sp-z-p i::before{content:"· "}
.sp-z-frei{font-style:italic;font-size:12pt;opacity:.55}
.sp-z-s{
  padding:1.5mm 2mm;vertical-align:baseline;text-align:right;
  font-size:19pt;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
  /* `1` und nicht `1.2`: diese Zahl ist die größte Schrift der Zeile und würde
     sonst allein die Zeilenhöhe bestimmen. Eine Ziffer braucht keine
     Unterlänge. */
  line-height:1;
}
/* NUR DIE TATSÄCHLICHE ANZAHL IST GROSS. Wer am Einlass abhakt, zählt Köpfe —
   „wie viele sitzen hier?" ist die Frage, „wie viele passen hin?" war die
   Frage von gestern, als der Plan gelegt wurde. Deshalb steht die Kapazität
   klein daneben und nicht gleichrangig. */
.sp-z-von{font-weight:400;font-size:10pt;opacity:.55}
/* Überbelegt heißt: am Abend wird ein Stuhl dazugestellt. Das ist kein
   Fehler, aber es muss auffallen — sonst stellt ihn niemand hin. */
.sp-z-voll th::after{content:" !";font-size:16pt}
/* DIE SUMME SITZT ABGESETZT. Sie ist keine vierzehnte Zeile, sondern der
   Strich darunter — und wenn sie direkt an Tisch 13 klebt, liest man sie als
   einen weiteren Tisch. Der Abstand kommt als Polster an den Zellen, weil
   `margin` an einer Tabellenzeile nicht greift. */
.sp-zettel tfoot tr{border-top:1pt solid #000;border-bottom:none}
.sp-zettel tfoot th,.sp-zettel tfoot td{padding-top:5mm}
.sp-zettel tfoot .sp-z-g{font-size:11.5pt;opacity:.65}
/* Wer noch keinen Platz hat, steht UNTER der Summe — der eine Fall, in dem
   das Blatt unvollständig ist, gehört aufs Blatt und nicht nur auf den
   Bildschirm, den am Einlass niemand dabeihat. */
.sp-z-offen{
  margin-top:3mm;padding:2.5mm;border:.8pt solid #000;
  font-size:13pt;break-inside:avoid;
}

/* ── Schrift ────────────────────────────────────────────────
   Die Hausschriften bleiben — sie sind selbst gehostet, also auch
   ohne Netz da, und ein gedrucktes Blatt soll nach uns aussehen. */
h1{font-size:18pt;margin-bottom:2mm}
h2{font-size:14pt;margin:4mm 0 2mm}
h3,.eyebrow{font-size:10pt;letter-spacing:.08em;text-transform:uppercase;margin:4mm 0 1.5mm}
p,li,td,th{orphans:3;widows:3}
.muted,.ev-d,.note{font-size:9pt!important}

/* Links: die Adresse gehört aufs Papier, sonst zeigt der Text ins
   Leere. Nur bei echten Zielen — interne data-a-Knöpfe haben keins. */
a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt}

/* Das Deckblatt füllt die Seite: Titel oben links, Grafik dazwischen,
   Autor:in unten rechts. Die Grafik ist ein PNG mit durchsichtigem Grund,
   deshalb kein Rahmen und keine Fläche darunter. */
.tb-deckblatt{display:flex;flex-direction:column;gap:10mm;height:252mm;
  max-width:none;width:100%;page-break-after:always;border:none;padding:0;margin:0}
.tb-deckblatt img{flex:1;min-height:0;width:100%;object-fit:contain}
/* DER TITEL BRAUCHT LUFT NACH OBEN (13.09.2026).

   Great Vibes ist eine Schreibschrift: ihre Oberlängen und Schwünge ragen weit
   über die Zeilenbox hinaus — bei einem „Ä", einem „T" oder einem „f" um ein
   Vielfaches dessen, was eine Brotschrift braucht. Mit `line-height:1.1` war
   die Zeilenbox KLEINER als die Tinte, und weil der Titel als erstes Element
   bündig an der Oberkante des Satzspiegels sitzt, ragte der Überstand in den
   Seitenrand (18 mm) und darüber hinaus aus dem Druckbereich des Druckers.
   Ergebnis: hohe Zeichen fehlten im Ausdruck, niedrige nicht — der Titel sah
   je nach Stückname mal richtig aus und mal zerschnitten.

   Beides zusammen behebt es: die Zeilenbox bekommt die Höhe, die die Schrift
   wirklich braucht, und der Titel rückt zusätzlich ein Stück nach unten. Der
   Platz geht der Grafik darunter ab (`flex:1`), was auf einem Deckblatt der
   richtige Tausch ist. */
.tb-dk-titel{align-self:flex-start;font-family:var(--f-script);font-weight:400;
  font-size:54pt;line-height:1.45;padding-top:8mm}
.tb-dk-autor{align-self:flex-end;font-size:13pt;font-style:italic}
.tb-dk-leer{display:none}

/* Ein Klang ist auf Papier schlicht eine fette Zeile — die Farbe, die ihn am
   Bildschirm unterscheidet, gibt es hier nicht. */
.tb-klang-l{font-weight:700;color:#000}

/* „Deckblatt drucken" braucht hier nichts mehr: dann wird ein Druckstück
   gebaut, in dem nur das Deckblatt steht (tbDrucken in wk-app.js). Vorher
   blendete eine Klasse am <body> alles andere aus — und jedes neue Element im
   Buch war ein Kandidat, das mit auszublenden jemand vergisst. */