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

   Warum eine gemeinsame Datei und nicht je Werkzeug ein Layout:
   Setlist, Moderation, 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,
.fab,.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 — die Gäste im Saalplan etwa sind zum
   Antippen `<button>`, aufs Papier gehören sie aber unbedingt. Wer so
   etwas baut, hängt `.druck-zeigen` dran. */
button.druck-zeigen,.sp-gast{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,.sp-tisch,.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,.sp-tisch{
  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,.sp-plan{
  display:block!important;
}
/* ── Der Saalplan ist ein eigenes Dokument ──────────────────
   Er ist die Ausnahme von allem darüber, und zwar aus einem
   praktischen Grund: er hängt am Einlass, und wer davorsteht,
   liest ihn aus einem Meter Entfernung im Vorbeigehen. Deshalb
   bekommt er das GANZE Blatt, quer, und die Namen so groß wie
   das Raster hergibt.

   Ausgelöst über `body.druck-saalplan` (kvDrucken in wk-app.js):
   ohne die Klasse druckt der Saalplan wie jedes andere Dokument
   mit; mit ihr ist er allein auf dem Papier. */
.sp-plan .sp-tisch{margin-bottom:3mm!important}

/* Querformat NUR für dieses Dokument: `page:` benennt eine Seitenvorlage,
   `@page quer` beschreibt sie. Ein globales `size:landscape` würde jedes
   andere Blatt mitdrehen. */
@page quer{ size:A4 landscape; margin:8mm; }
body.druck-saalplan{ page:quer; }

/* Alles unsichtbar, dann den Plan wieder sichtbar — und ihn über die ganze
   Seite legen. Der Weg über `visibility` statt `display:none` ist Absicht: er
   braucht die Vorfahren des Plans nicht zu kennen (sonst ginge das nur mit
   `:has()`, und daran hängt hier zu viel). */
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%;
  display:grid!important;
  /* Zeilenhöhe aus dem Blatt statt fest: 16 Rasterzeilen sollen die Seite
     füllen, damit die Namen so groß wie möglich stehen. */
  grid-auto-rows:minmax(9mm,1fr)!important;
  height:184mm;
}
body.druck-saalplan .no-print{ display:none!important; }

.sp-saal{
  display:grid!important;
  grid-template-columns:repeat(10,1fr)!important;
  gap:1.5mm!important;
  background:none!important;border:none!important;
  padding:0!important;break-inside:avoid;page-break-inside:avoid;
}
.sp-saal .sp-tisch{
  margin:0!important;padding:1mm 1.5mm!important;
  border:.8pt solid #000!important;border-radius:0!important;
  display:flex!important;flex-direction:column;gap:.4mm;overflow:hidden;
}
.sp-saal .sp-tisch.voll{border-width:2pt!important}
.sp-kopf{
  display:flex!important;justify-content:space-between;
  font-size:8pt!important;font-weight:700;margin:0!important;
  border-bottom:.4pt solid #000;padding-bottom:.4mm;
}
/* DIE NAMEN SIND DER ZWECK DES BLATTES — alles andere ist Beiwerk. */
.sp-saal .sp-gast{
  display:flex!important;justify-content:space-between;align-items:baseline;
  gap:1.5mm;font-size:15pt!important;font-weight:700;line-height:1.1;
  padding:0!important;background:none!important;border:none!important;color:#000!important;
}
.sp-gaeste{display:flex!important;flex-direction:column;gap:.3mm;overflow:hidden}
.sp-g-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-g-z{font-size:13pt!important;font-weight:700;font-variant-numeric:tabular-nums}
.sp-saal .sp-leer{font-size:8pt!important;font-style:italic;opacity:.5}
.sp-moebel{
  display:flex!important;align-items:center;justify-content:center;
  border:.4pt dashed #000!important;font-size:8pt!important;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  background:none!important;color:#000!important;
}
/* Bühne, Buffet, Eingang: NUR Orientierung. Sie stehen deshalb dünn und
   klein da — wer den Plan liest, sucht einen Namen und richtet sich an der
   Bühne aus, nicht umgekehrt. Die Bühne bleibt gefüllt, weil sie der eine
   Bezugspunkt ist, den jeder sofort findet. */
.sp-buehne{background:#000!important;color:#fff!important;border:none!important;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.sp-druckkopf{
  grid-column:1/-1;font-size:10pt;font-weight:700;
  border-bottom:1pt solid #000;padding-bottom:1mm;margin-bottom:1mm;
}

/* ── 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}
.tb-dk-titel{align-self:flex-start;font-family:'Great Vibes',cursive;font-weight:400;
  font-size:54pt;line-height:1.1}
.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. */