/* druck.css — Druckfassung (Papier und PDF), nach dem Muster von jozapf.de.
 *
 * Zwei Einsatzorte, EINE Regelmenge:
 *  1. Auf allen Seiten als <link media="print"> (basis.njk): greift bei Strg+P / „Als PDF speichern“.
 *  2. Auf /druck/ ohne media: dort gilt die Druckdarstellung auch am Bildschirm, die Seite ist die
 *     Druckvorschau.
 * Deshalb stehen die Regeln NICHT in @media print (das schlösse Fall 2 aus). Ausnahmen ganz unten:
 * Werkzeugleiste und Blattdarstellung der Druckseite, die nur am Bildschirm gelten.
 *
 * Inhalt kommt unverändert aus den Abschnitten der Startseite; dieses Stylesheet kennt nur Klassen.
 * Der A4-Satzspiegel ist rund 670 px breit — die Bildschirm-CSS klappt darunter auf die Handyspalte
 * zusammen. Hier wird das 4:8-Raster deshalb fest wieder aufgespannt: Überschrift links, Inhalt rechts.
 *
 * Maße in mm/pt: das ist das Zielmedium (Token-Gate: Längen in px/rem nur über Tokens, mm/pt frei).
 * Farben nur über die Tokens. Browser drucken Hintergründe standardmäßig nicht: nichts hier darf für
 * die Lesbarkeit an einer Fläche hängen, Flächen werden zu Haarlinien.
 */

@page { size: A4; margin: 14mm 16mm 16mm; }

/* ---- 1. Farbrollen: überall die hellen, auch im dunklen Kontaktbereich ---- */
.bereich-dunkel, .footer-ink {
  color: var(--hell-text); background: none;
  --c-ink: var(--hell-ink); --c-text: var(--hell-text); --c-muted: var(--hell-muted); --c-link: var(--hell-link);
  --c-border: var(--hell-border); --c-primary: var(--hell-primary);
}

/* ---- 2. Grundfläche und Typografie ---- */
body { display: block; min-height: 0; background: var(--c-surface); color: var(--c-text);
  font-size: 9.5pt; line-height: 1.4; }
h1, h2, h3 { color: var(--c-ink); break-after: avoid; }
h1 { font-size: 15pt; line-height: 1.2; margin: 0 0 2mm; }
h2 { font-size: 12pt; line-height: 1.25; margin: 0 0 2mm; }
h3 { font-size: 10.5pt; line-height: 1.3; margin: 0 0 1.5mm; }
p { margin: 0 0 1.5mm; }
a, .bereich-dunkel a { color: inherit; text-decoration: none; }
/* Externe Adressen hinter dem Linktext ausschreiben (Angebot, Anlage „Druckansicht“). Ohne Adressen mit
   Abfrage oder Sprungmarke: Routen- und Kartenlinks wären unlesbar lang, die Anschrift steht ohnehin da. Kooperationen zeigen
   ihre Adresse schon im Linktext. */
a[href^="http"]:not([href*="?"]):not([href*="#"]):not(:has(.kooperation-url))::after { content: " (" attr(href) ")"; color: var(--c-muted); }
img, svg { max-width: 100%; }
.container { max-width: none; margin: 0; padding-inline: 0; }

/* ---- 3. Nur am Bildschirm sinnvoll: weg ---- */
.skip-link, .site-kopf, .site-fuss,
.buehne-karte, .buehne-quelle, .biesdorf-schriftzug, .einstieg-aktionen, .bildband,
.formular-titel, .kontaktformular, .karte-hinweis, .anfahrt-links,
.kontaktwege li:has(a[download]) { display: none !important; }

/* Kopfzeile mit Stand und Adresse auf Seite 1 */
.druck-meta { display: block; margin: 0 0 6mm; padding-bottom: 1mm; border-bottom: 0.5pt solid var(--c-border);
  font-size: 7.5pt; color: var(--c-muted); text-align: right; }

/* ---- 4. Raster: Überschrift links (38 mm), Inhalt rechts ---- */
.bereich { padding-block: 4mm; background: none; border-top: 0.5pt solid var(--c-border); }
.bereich-raster { display: grid !important; grid-template-columns: 38mm minmax(0, 1fr) !important;
  column-gap: 8mm; row-gap: 2mm; }
.bereich-raster > .bereich-rand { grid-column: 1; }
.bereich-raster > .bereich-inhalt { grid-column: 2; }
.rand-mitlaufend { position: static; }
/* Nicht ganze Abschnitte zusammenhalten (Chrome schiebt dann schon den vorigen auf die nächste Seite), sondern Rasterzeilen */
#inhalt > section:not(.seite) > .bereich-raster, .anfahrt { break-inside: avoid; }

/* ---- 5. Einstieg: Name als Briefkopf, Gedicht in der Inhaltsspalte ---- */
.einstieg { padding: 0; }
.buehne { display: block; min-height: 0 !important; background: none; border: 0; }
.buehne::after { display: none; }   /* Verlauf über der Bildschirmkarte */
.buehne-inhalt { padding: 0 0 4mm; background: none; }
.einstieg-name { font-size: 22pt; line-height: 1.1; letter-spacing: 0; margin: 0 0 1mm; }
.einstieg-titel { margin: 0; }
.einstieg-beruf { font-size: 11pt; line-height: 1.4; color: var(--c-muted); margin: 0; }
.einstieg-folge { margin: 0; padding-block: 0 4mm; }
.einstieg-zitat { grid-column: 2 !important; }
.einstieg-zitat blockquote { margin: 0; padding: 0; font-size: 10.5pt; line-height: 1.45; }
.einstieg-zitat blockquote p { padding-left: 4mm; text-indent: -4mm; }

/* ---- 6. Über mich: Porträt unter der Überschrift, kompakte Zeitleiste ---- */
.portraet { width: 26mm; border-radius: 0; }
.zeitleiste { --zeitspalte: 30mm; --punkt: 1.8mm; }
.zeitleiste::before { top: 2mm; bottom: 2mm; }
.zeitleiste li { padding-block: 0.6mm; break-inside: avoid; }
.zeitleiste li::before { top: 2mm; }   /* Mitte der ersten Zeile: 0,6 mm + halbe Zeilenhöhe − halber Punkt */
.zeitleiste-zeit { font-size: 8.5pt; }
.zeitleiste-text { font-size: 9.5pt; }

/* ---- 7. Leistungen: zwei Spalten mit Haarlinien ---- */
.leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 8mm; }
.leistungen li { padding-block: 1.5mm; gap: 2mm; border-color: var(--c-border); break-inside: avoid; }
.leistungen .bi { width: 3.5mm; height: 3.5mm; flex: none; margin-top: 0.5mm; }

/* ---- 8. Kontakt: Überschrift und QR-Code links, Kontaktwege zweispaltig rechts ---- */
.bereich-dunkel > .bereich-raster > .bereich-rand,
.bereich-dunkel > .bereich-raster > .bereich-rand > div { display: contents; }
.bereich-dunkel > .bereich-raster > .bereich-inhalt { display: none; }
.bereich-dunkel h2 { grid-column: 1; grid-row: 1; }
.kontaktwege { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 8mm; row-gap: 3mm; align-content: start; }
.kontaktwege li { gap: 2mm; break-inside: avoid; }
.kontaktwege .bi { width: 3.5mm; height: 3.5mm; margin-top: 0.5mm; flex: none; }
.kontaktweg-art { font-size: 7.5pt; }
.kontakt-qr { display: block !important; grid-column: 1; grid-row: 2; margin: 1mm 0 0; break-inside: avoid; }
.kontakt-qr img { width: 30mm; height: 30mm; }   /* README: im Druck mindestens 3 cm */
.kontakt-qr figcaption { max-width: 34mm; margin-top: 1mm; font-size: 7pt; }

/* Anfahrt: Adresse rechts, Karte in der Inhaltsspalte */
.anfahrt { margin-top: 5mm; }
.anfahrt-titel { font-size: 10.5pt; }
.anfahrt-adresse { margin: 0; }
.karte { width: auto; height: 48mm; margin: 2mm 0 0 46mm; border: 0.5pt solid var(--c-border); background: none; }
.karte-quelle { font-size: 6.5pt; padding: 0.5mm 1mm; }

/* ---- 9. Kooperationen: drei Spalten ---- */
.kooperationen { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6mm; }
.kooperationen a { padding-top: 1.5mm; gap: 1mm; border-top-width: 0.5pt; break-inside: avoid; }
.kooperation-name { font-size: 9.5pt; }
.kooperation-text, .kooperation-url { font-size: 8pt; text-decoration: none; }

/* ---- 10. Unterseiten (Impressum, Datenschutz, Barrierefreiheit) ---- */
.seite { border-top: 0; padding-top: 0; }
/* Titel über die volle Breite: „Datenschutzhinweise“ ist breiter als die Titelspalte, und Chrome trennt
   im Druck nicht zuverlässig. Der Text bleibt in der Inhaltsspalte (angenehme Zeilenlänge). */
.seite .bereich-raster > .bereich-rand { grid-column: 1 / -1; }
.seite h1 { font-size: 15pt; margin-bottom: 3mm; }
.seite .bereich-inhalt h2 { font-size: 11pt; margin: 4mm 0 1.5mm; }
.inhalt { max-width: none; }
.seite blockquote { background: none; border: 0.5pt solid var(--c-border); border-radius: 0; padding: 2mm 3mm; margin-bottom: 4mm; }
.seite li { break-inside: avoid; }

/* ---- Nur Bildschirm: Druckseite /druck/ als Blatt mit Werkzeugleiste ---- */
@media screen {
  html { background: var(--c-surface-alt); }
  body { box-sizing: border-box; width: 210mm; max-width: 100%; margin: 0 auto 10mm; padding: 14mm 16mm 16mm;
    box-shadow: var(--schatten); }
  .druck-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 4mm; margin: -14mm -16mm 8mm;
    padding: 3mm 16mm; background: var(--c-surface-alt); border-bottom: 0.5pt solid var(--c-border); font-size: 10pt; }
  .druck-leiste p { margin: 0; flex: 1 1 auto; }
  .druck-leiste .btn { display: inline-flex; align-items: center; gap: 2mm; }
  .druck-leiste a { text-decoration: underline; }
}
@media print {
  .druck-leiste { display: none !important; }
}