/* ------------------------------------------------------------------
   zuhause-in-pitzling.de
   Ein Heft, keine Website. Alles CSS steht in dieser einen Datei.

   Bildregeln (bitte einhalten, wenn Fotos dazukommen):
     - Fotografiert werden Menschen nie, auch nicht die Familie selbst,
       auch nicht von hinten oder angeschnitten. Gezeichnet erscheinen
       sie als Strichfiguren im Hero der Startseite — nur dort.
     - Kein identifizierbares Haus eines realen Eigentuemers
     - Jede Bildunterschrift traegt Ort und Monat; Datierung ist Beweis
   ------------------------------------------------------------------ */

/* --- Schrift. Selbst gehostet, keine externe Anfrage. -------------- */

/* Newsreader, variabel auf der Achse fuer optische Groessen (opsz 6–72).
   Dadurch bekommt die 56px-Ueberschrift andere Buchstabenformen als die
   17px-Fusszeile: offenere Punzen und feinere Serifen im Grossen,
   kraeftigere im Kleinen. Ein Gewicht, 400 — mehr braucht es nicht, denn
   Fettdruck gibt es hier nirgends.

   Vier Dateien, aber dank unicode-range laedt ein deutscher Besucher nur
   die beiden Latin-Schnitte. Latin-ext liegt fuer den Fall bereit, dass
   je ein Name mit osteuropaeischer Diakritik auf der Seite steht.

   Selbst gehostet, keine externe Anfrage zur Laufzeit. Newsreader steht
   unter der SIL Open Font License 1.1, siehe fonts/LIESMICH.txt. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-ext-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Farbe. Drei Werte plus zwei Abstufungen. Mehr nicht. ---------- */

:root {
  --papier:      #F6F2EC;
  --tinte:       #1C1A17;
  --gruengrau:   #6B7268;
  --papier-tief: #EFE9E0;
  --tinte-weich: #4A453E;

  /* Der Satzspiegel steht nicht in der Mitte. Links ein breiter Steg,
     rechts ein schmaler Rand — so setzt man ein Buch, und so sieht man
     einer Seite an, dass jemand sie gesetzt hat. Beide Masse stehen als
     Variablen, weil Bogen, Ruhefläche und Kapitelzahlen sich danach
     richten. Auf dem Telefon fällt der Steg weg. */
  --steg: 1.5rem;
  --rand: 1.5rem;

  /* Die Grundzeile. Alle senkrechten Abstaende im laufenden Text sind
     Vielfache davon, damit die Zeilen ueber alle Seiten hinweg auf
     demselben Raster liegen — Registerhaltigkeit. Einzeln sieht das
     niemand; zusammen ist es der Unterschied zwischen gut gemacht und
     gesetzt. Navigation und Trefferflaechen bleiben ausgenommen, wie im
     Buch die Kolumnentitel. */
  --zeile: 34px;
}

@media (max-width: 40rem) {
  :root { --zeile: 30px; }
  .zuspruch { font-size: 26px; }
  .ruf { font-size: 25px; }
  h2 { font-size: 24px; }
}

@media (min-width: 48rem) {
  :root { --steg: 8rem;  --rand: 3rem; }
}

/* Der ausgebaute Satzspiegel: Steg 22 %, Textspalte 65 %, Aussenrand 13 %
   des Bogens. Die urspruengliche Vorgabe lautete 20 / 55 / 25 — daraus
   wuerden bei 21px aber nur 44 Zeichen je Zeile, und zu schmal war der
   Satz schon einmal. Die Spalte behaelt deshalb ihre 57 Zeichen, und der
   Bogen ist entsprechend breiter. */
@media (min-width: 70rem) {
  :root { --steg: 13rem; --rand: 8rem; }
}

/* Gelb gibt es ausschliesslich innerhalb von Fotografien.
   Niemals im Interface. Kein gelber Button, kein gelber Akzent. */

/* --- Boden -------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 0;
}

/* Der Bogen. Aussen der Tisch, innen das Papier — zwei Toene, die
   aneinanderstossen, randabfallend von oben nach unten. Kein Schatten,
   keine Rundung, kein Rahmen: keine Karte, ein Blatt. */

html {
  background: var(--papier-tief);
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 60rem;
  min-height: 100vh;
  margin: 0 auto;
  /* Haelt die Aussenabstaende der Kinder im Bogen. Ohne das faellt der
     obere Abstand des Signets aus dem Blatt heraus und laesst oben einen
     Streifen Tischfarbe stehen. */
  display: flow-root;
  background: var(--papier);
  color: var(--tinte);
  font-optical-sizing: auto;
  /* Mediaevalziffern laufen mit Ober- und Unterlaengen im Text mit,
     statt wie Versalien herauszustechen. Greift erst, wenn Newsreader
     tatsaechlich geladen wird. */
  font-variant-numeric: oldstyle-nums;
  /* Anfuehrungszeichen haengen in den Rand hinaus, damit die Kante des
     Satzblocks optisch gerade wird und nicht nur rechnerisch. */
  hanging-punctuation: first last;
  font-family: Newsreader, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: var(--zeile);
  font-kerning: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Deutsch trennt gern und oft. Ohne Grenze steht in jeder zweiten Zeile
     ein Trennstrich („Wir ha-ben“, „Die-se Seite“). Erst ab acht Zeichen
     trennen, nie weniger als vier stehen lassen, hoechstens zwei
     Trennstriche untereinander. */
  hyphenate-limit-chars: 8 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  -webkit-hyphenate-limit-lines: 2;
  widows: 3;
  orphans: 3;
  text-rendering: optimizeLegibility;
}

@media (max-width: 40rem) {
  body { font-size: 19px; }
}

img, svg { max-width: 100%; height: auto; }

/* --- Mass ---------------------------------------------------------- */
/* Zeilenlaenge rund 57 Zeichen. Die Breite macht jetzt der Bogen, die
   Lage machen Steg und Rand. Dadurch steht die Textspalte rechts der
   Blattmitte, und links bleibt eine Spalte fuer Kapitelzahlen. */

.blatt {
  padding-left: var(--steg);
  padding-right: var(--rand);
}

/* --- Ueberschriften. Kein Fettdruck, nirgends. --------------------- */
/* Ueberschriften werden nie getrennt — ein Trennstrich in einer
   Ueberschrift ist der sichtbarste Satzfehler ueberhaupt. Statt dessen
   verteilt "text-wrap: balance" die Zeilen gleichmaessig; wo der Browser
   das nicht kennt, bleibt es beim normalen Umbruch. */

h1, h2 {
  font-weight: 400;
  margin: 0 0 calc(var(--zeile) * 2);
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: balance;
}

/* Groessenkontrast statt Fettdruck: sehr gross gegen sehr klein, dazwischen
   nichts. Grosse Serifenschrift braucht eine leicht negative Laufweite,
   sonst faellt sie auseinander. */
h1 {
  font-size: clamp(34px, 5.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  position: relative;
}

/* Zwischenfrage innerhalb eines Kapitels. */
h2 {
  font-size: 28px;
  /* Auch die Zwischenueberschrift laeuft auf der Grundzeile, sonst setzt
     jede von ihnen das Register fuer alles Folgende zurueck. Die grosse
     h1 bleibt davon ausgenommen: sie steht einmal oben, wird optisch
     gesetzt, und danach faengt das Raster neu an. */
  line-height: var(--zeile);
  margin-top: calc(var(--zeile) * 3);
  margin-bottom: var(--zeile);
}

/* Die Kapitelzahl haengt im Steg, auf der ersten Zeile der Ueberschrift.
   Sie ist Zierat, kein Inhalt — deshalb aria-hidden im Markup und
   Gruengrau in der Farbe. Auf dem Telefon steht sie ueber dem Titel. */
.zahl {
  display: block;
  margin-bottom: 1rem;
  font-size: 16px;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--gruengrau);
}

@media (min-width: 48rem) {
  .zahl {
    position: absolute;
    right: calc(100% + 1.5rem);
    top: 0.45em;
    margin-bottom: 0;
    width: 6rem;
    text-align: right;
  }
}

p {
  margin: 0 0 var(--zeile);
  /* Kein einzelnes Wort allein in der letzten Zeile. */
  text-wrap: pretty;
}

/* Markierter Text wird umgekehrt gesetzt, nicht blau hinterlegt. Das
   Browserblau ist die letzte Stelle, an der die Seite nach Voreinstellung
   aussieht. Keine neue Farbe: Tinte auf Papier, vertauscht. */
::selection {
  background: var(--tinte);
  color: var(--papier);
}

/* --- Links. Farbe bleibt Tinte, nur die Linie wird dicker. --------- */

a {
  color: var(--tinte);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
}

/* --- Sprungmarke --------------------------------------------------- */

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
}

.sprung:focus {
  left: 0;
  top: 0;
  z-index: 2;
  display: block;
  padding: 1rem 1.5rem;
  background: var(--papier);
}

/* Für Vorlesegeräte und Suchmaschinen, nicht für das Auge. */
.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Kopf. Kein Balken, keine Navigation, nichts Klebendes. -------- */

.kopf {
  padding-top: calc(var(--zeile) * 2);
  padding-bottom: 0;
}

/* Trefferfläche mindestens 48x48, ohne dass sich das Signet verschiebt. */
.kopf a {
  display: inline-block;
  padding: 15px;
  margin: -15px;
}

.signet-klein {
  display: block;
  width: 28px;
  height: auto;
  color: var(--tinte);
}

/* Der Seitentitel steht unter dem Signet, mit deutlichem Abstand. */
main > h1:first-child {
  margin-top: calc(var(--zeile) * 2);
}

/* --- Startseite ---------------------------------------------------- */

/* Die Zeichnung der Startseite steht auf derselben Achse wie der Text,
   nicht in der Mitte des Blatts. Eine Kante, an der alles ausgerichtet
   ist — Zeichnung, Ueberschrift, erste Zeile — ist der halbe Unterschied
   zwischen "hingestellt" und "gesetzt". Auf dem Telefon fuellt sie die
   Spalte, auf dem Rechner endet sie bei 460px. */
.hero {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: calc(var(--zeile) * 4) 0;
  color: var(--tinte);
  animation: auftauchen 500ms ease-out both;
}

/* Das grosse Signet bleibt als Regel bestehen: falls die Startseite je
   wieder mit den Stiefeln oeffnen soll. */
.signet-gross {
  display: block;
  width: clamp(220px, 26vw, 320px);
  height: auto;
  margin: calc(var(--zeile) * 4) 0;
  color: var(--tinte);
  animation: auftauchen 500ms ease-out both;
}

@keyframes auftauchen {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Platz fuer das spaetere Foto zweier gelber Kindergummistiefel auf einem
   matschigen Waldweg. Es tritt an die Stelle des grossen Signets, ohne dass
   sich das Layout aendert: gleiche Breitenlage, reserviertes Seitenverhaeltnis.
   Nur dieses eine Bild bekommt loading="eager". */
.bild {
  margin: calc(var(--zeile) * 3) 0;
}

.bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Grueengrau erreicht auf Papier nur 4,45:1 und faellt damit unter die
   Grenze von 4,5:1 fuer Fliesstext — auf einer Seite fuer Siebzigjaehrige
   der falsche Wert. Kleingesetzter Text steht deshalb in Tinte-weich
   (8,5:1). Gruengrau bleibt den Zeichnungen vorbehalten. */
figcaption,
.bildunterschrift {
  margin-top: var(--zeile);
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
  color: var(--tinte-weich);
  hyphens: none;
  -webkit-hyphens: none;
}

/* Der Satz, der fuer sich steht. Groesse einer H2, aber keine Ueberschrift. */
.zuspruch {
  font-size: 32px;
  /* Auch die grossen Zeilen laufen auf der Grundzeile, sonst schiebt sich
     alles darunter um ein paar Pixel aus dem Register. */
  line-height: var(--zeile);
  letter-spacing: -0.01em;
  margin-top: calc(var(--zeile) * 3);
  margin-bottom: calc(var(--zeile) * 3);
}

/* Der Standvermerk. Beweis, dass ein Mensch die Seite pflegt — und damit
   die Zeile, nach der ein misstrauischer Leser sucht. Deshalb größer und
   dunkler als ursprünglich vorgesehen: 15px Kapitälchen in Grüngrau waren
   die schlechteste Lesbarkeit auf einer Seite für Siebzigjährige. */
/* Frueher Kapitälchen — aber das Latin-Subset von Newsreader traegt kein
   smcp, und der Browser faelscht sie dann aus verkleinerten Versalien:
   zu duenn im Strich, zu eng in der Proportion. Echte Versalien mit
   weiter Laufweite sind die ehrliche Form, und sie sprechen dieselbe
   Sprache wie die Kapitelzahlen. */
.stand {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tinte-weich);
  margin-bottom: calc(var(--zeile) * 3);
  hyphens: none;
  -webkit-hyphens: none;
}

/* Im Fuss ist der Standvermerk eine Zeile unter der Navigation: der
   Beweis der Pflege auch fuer alle, die ueber einen geteilten Link
   mitten im Heft einsteigen. */
.fuss .stand {
  font-size: 13px;
  margin: 0 0 var(--zeile);
}

/* --- Die eine Flaeche der Website ---------------------------------- */
/* Sie reicht in die Randstege des Blatts hinein, damit sie wie anderes
   Papier wirkt und nicht wie eine Karte. Der Innenabstand entspricht
   genau dem Randsteg: der Text darin steht auf derselben Fluchtlinie
   wie der uebrige Text, nicht eingerueckt. */

.ruhe {
  background: var(--papier-tief);
  padding: calc(var(--zeile) * 2) var(--rand) calc(var(--zeile) * 2) var(--steg);
  margin-top: calc(var(--zeile) * 3);
  margin-bottom: calc(var(--zeile) * 3);
  margin-left: calc(-1 * var(--steg));
  margin-right: calc(-1 * var(--rand));
}

.ruhe p:last-child {
  margin-bottom: 0;
}

/* --- Die einzige Mikrointeraktion: die Telefonnummer. -------------- */

.ruf {
  font-size: 30px;
  line-height: var(--zeile);
  margin-top: calc(var(--zeile) * 3);
  hyphens: none;
  -webkit-hyphens: none;
}

.ruf a {
  display: inline-block;
  min-height: 48px;
  line-height: 48px;
  padding-right: 2px;
}

.ruhe .ruf {
  margin-top: var(--zeile);
  margin-bottom: 0;
}

/* --- Sichtbarer Platzhalter, wo noch etwas fehlt ------------------- */
/* Verschwindet, sobald die echte Angabe eingesetzt ist. */

.fehlt {
  color: var(--tinte-weich);
  font-style: italic;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  hyphens: none;
  -webkit-hyphens: none;
}

/* --- Kapiteltrenner statt einer Linie ------------------------------ */

.trenner {
  display: block;
  width: 32px;
  height: auto;
  margin: calc(var(--zeile) * 3) 0;
  color: var(--gruengrau);
}

/* Jedes Kapitel schliesst mit seiner eigenen Zeichnung: Grundriss,
   Dorf, Wildpark, Lech, Volleyballfeld. Nur die Startseite und die
   Maklerseite tragen das Stiefel-Signet. Erklaert wird keine davon.

   Die vier Ortszeichnungen brauchen deutlich mehr Breite als die
   Stiefel, sonst zerfallen sie: bei 46px war der Lech ein Kringel und
   alle vier lasen sich als Icons. Die Strichstaerke steht in der
   jeweiligen Zeichnung, damit alle gleich schwer wirken.

   Menschen werden weiterhin nicht abgebildet. */
.trenner--breit {
  width: 110px;
}

/* Der gezeichnete Grundriss: links der Lech, rechts der Ort, oben der
   Wildpark, unten Waldkindergarten und Volleyballfeld. Ohne Beschriftung —
   wer hier wohnt, erkennt ihn sofort, und alle anderen muessen es nicht. */
.karte {
  display: block;
  width: 320px;
  height: auto;
  margin: calc(var(--zeile) * 3) 0;
  color: var(--gruengrau);
}

/* --- Der Kustode ---------------------------------------------------- */
/* Unten steht, was als Nächstes kommt. Ein Heft macht das seit
   dreihundert Jahren so. Ohne diese Zeile liest die Hälfte der Besucher
   nur das erste Kapitel — ausgerechnet das mit dem wenigsten Vertrauen.
   Keine Leiste, nichts Klebendes, kein Menü: eine Zeile. */

.weiter {
  margin: 0 0 calc(var(--zeile) * 3);
  font-size: 21px;
  /* Im Buch steht der Kustode rechtsbuendig am Fuss der Seite. Kursiv,
     weil die Kursive bei einer Schrift ohne Fettdruck die einzige zweite
     Stimme ist, die es gibt. */
  text-align: right;
  font-style: italic;
}

.weiter a {
  display: inline-block;
  min-height: 48px;
  line-height: 48px;
}

@media (max-width: 40rem) {
  .weiter { font-size: 19px; }
}

/* --- Fuss. Hier steht die Navigation. Man blaettert weiter. -------- */

.fuss {
  margin-top: calc(var(--zeile) * 3);
  padding-top: calc(var(--zeile) * 2);
  padding-bottom: calc(var(--zeile) * 2);
}

.kapitel {
  list-style: none;
  margin: 0 0 calc(var(--zeile) * 3);
  padding: 0;
  counter-reset: kapitel;
}

/* Die Ziffern haengen im Steg und binden die sieben Seiten zu einem Heft.
   Die Startseite ist das Titelblatt und bekommt keine. */
@media (min-width: 48rem) {
  .kapitel li { position: relative; }

  .kapitel li + li::before {
    counter-increment: kapitel;
    content: counter(kapitel, upper-roman);
    position: absolute;
    right: calc(100% + 1.5rem);
    top: 12px;
    width: 6rem;
    text-align: right;
    font-size: 16px;
    letter-spacing: 0.18em;
    line-height: 1.4;
    color: var(--gruengrau);
  }
}

/* Die 48px Trefferflaeche entsteht aus Innenabstand, nicht aus der
   Zeilenhoehe. Mit "line-height: 48px" wurde ein zweizeiliger Kapiteltitel
   auf dem Telefon 96px hoch, und der Fuss war hoeher als der Inhalt. */
.kapitel li {
  margin-bottom: 0.25rem;
}

.kapitel li:last-child {
  margin-bottom: 0;
}

.kapitel a,
.kapitel em {
  display: inline-block;
  min-height: 48px;
  line-height: 1.4;
  padding-top: 12px;
  padding-bottom: 12px;
}

.kapitel em {
  color: var(--tinte-weich);
}

.anschrift {
  color: var(--tinte-weich);
  hyphens: none;
  -webkit-hyphens: none;
}

.post a,
.fuss .schreiben a {
  display: inline-block;
  min-height: 48px;
  line-height: 48px;
}

.stille {
  color: var(--tinte-weich);
  font-size: 17px;
  line-height: 1.5;
  margin-top: calc(var(--zeile) * 2);
}

.recht {
  color: var(--tinte-weich);
  font-size: 17px;
  margin-bottom: 0;
}

.recht a {
  display: inline-block;
  min-height: 48px;
  line-height: 1.4;
  padding-top: 12px;
  padding-bottom: 12px;
  color: var(--tinte-weich);
}

/* Das Kolophon, falls es freigegeben wird. Das Markup liegt auf
   /kontakt/ auskommentiert bereit. */
.kolophon {
  font-size: 17px;
  line-height: 1.5;
  font-style: italic;
  color: var(--tinte-weich);
  margin-top: calc(var(--zeile) * 3);
  hyphens: none;
  -webkit-hyphens: none;
}

/* --- Rechtstexte --------------------------------------------------- */

.recht-seite h2 {
  font-size: 21px;
  margin-top: calc(var(--zeile) * 2);
  margin-bottom: var(--zeile);
}

.recht-seite p {
  margin-bottom: 1.6em;
}

/* --- Druckfuss: auf dem Bildschirm unsichtbar ---------------------- */

.druckfuss {
  display: none;
}

/* --- Bewegung nur, wenn sie gewuenscht ist ------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero,
  .signet-gross { animation: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ------------------------------------------------------------------
   Druck. Kein Nebenprodukt, sondern eine Kernfunktion:
   Die Tochter druckt die Seite fuer ihren Vater aus.
   ------------------------------------------------------------------ */

@media print {

  /* Auf Papier gilt eine andere Grundzeile. Alle Abstaende, die als
     Vielfache davon gesetzt sind, rechnen sich damit von selbst um —
     sonst stuenden Pixelmasse im Druck, und die Kapitel liefen ueber. */
  :root {
    --zeile: 5mm;
  }

  /* Die Seitenraender machen das Satzmass: bei 2cm rundum standen rund
     100 Zeichen in einer Zeile, was auf Papier kaum noch zu verfolgen ist.
     3,5cm links und rechts ergeben rund 72 Zeichen.

     Achtung beim Aendern: die laufende Fusszeile (.druckfuss) steht fest
     am unteren Rand des Satzspiegels und haelt im Textfluss keinen Platz
     frei. Seit alle Kapitel hintereinander stehen, koennen Seiten ganz
     voll werden; dann rueckt die letzte Zeile dicht an die Fusszeile.
     Nach jeder Textaenderung den Ausdruck als PDF pruefen. */
  @page {
    margin: 17mm 3.5cm 2cm;
  }

  html, body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.4;
    widows: 3;
    orphans: 3;
  }

  /* Auf Papier macht der Seitenrand den Satzspiegel. Der Bogen, der Steg
     und die haengenden Kapitelzahlen entfallen. */
  body {
    max-width: none;
    min-height: 0;
    margin: 0;
  }

  .blatt {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* Die Startseite oeffnet auf Papier wie ein Titelblatt: das Signet
     steht tiefer, allein, mit Luft darueber. Chrome kennt @page :first
     nur fuer das ganze Dokument — und da jedes Kapitel ohnehin ein Blatt
     ist, traefe das jede Seite. Deshalb ueber eine Klasse am body. */
  .titelblatt .hero,
  .titelblatt .signet-gross {
    margin-top: 22mm;
  }

  .hero {
    width: 100mm;
    margin-bottom: 10mm;
    color: #000;
    animation: none;
  }

  .zahl {
    position: static;
    width: auto;
    text-align: left;
    margin-bottom: 2mm;
    font-size: 9pt;
    color: #000;
  }

  h1 { letter-spacing: 0; }

  /* Navigation, Fussnavigation und Sprungmarke haben auf Papier nichts verloren.
     Telefon und Anschrift entfallen hier ebenfalls: sie stehen ohnehin auf
     jeder gedruckten Seite in der Fusszeile. Ohne diese Kuerzung entsteht am
     Ende eine fast leere Extraseite. */
  .sprung,
  .verborgen,
  .fuss nav,
  .kapitel,
  .weiter,
  .fuss .ruf,
  .fuss .anschrift,
  .fuss .schreiben,
  .recht {
    display: none !important;
  }

  /* Die Kapitelzeichnungen stehen auch auf Papier, kleiner und in
     Schwarz. Sie sind der Grund, warum ein Ausdruck nicht wie ein
     Behoerdenschreiben aussieht. */
  .trenner {
    width: 7mm;
    margin: 4mm 0 0;
    color: #000;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .trenner--breit {
    width: 18mm;
  }

  .karte {
    width: 34mm;
    margin: 4mm 0 0;
    color: #000;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Das Signet erscheint genau einmal, oben auf Seite 1. */
  .kopf { padding-top: 0; }

  .signet-klein { width: 16mm; }

  .signet-gross {
    width: 34mm;
    margin: 0 0 12mm;
    animation: none;
  }

  h1 { font-size: 20pt; margin-bottom: 5mm; }
  h2 { font-size: 14pt; margin-top: 4mm; margin-bottom: 2mm; }

  p { margin-bottom: 3.5mm; }

  /* Das Foto fuellte auf Papier eine halbe Seite und schob das Kapitel
     auf ein zweites Blatt. */
  .bild { margin: 6mm 0; }
  .bild img { width: 80mm; }

  .zuspruch { font-size: 14pt; margin: 8mm 0; }
  .ruf      { font-size: 14pt; margin-top: 5mm; }
  .ruhe .ruf { margin-top: 2mm; }
  .ruf a    { min-height: 0; line-height: inherit; }
  .stand    { font-size: 10pt; margin-bottom: 10mm; color: #000; }
  .fuss .stand { font-size: 8pt; margin: 0 0 2mm; }
  /* "Kein Tracking, keine Cookies" beschreibt den Besuch im Browser.
     Auf Papier ist der Satz gegenstandslos — Papier trackt nicht. */
  .stille { display: none !important; }
  .anschrift, figcaption, .bildunterschrift { color: #000; }

  .ruhe {
    background: none;
    padding: 0;
    margin: 3mm 0;
  }

  .fuss {
    margin-top: 2mm;
    padding-top: 0;
    padding-bottom: 5mm;   /* Abstand zur laufenden Fusszeile */
  }

  main {
    padding-bottom: 0;
  }

  p, figure, h1, h2, .ruhe, .stand, .ruf {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  h1, h2 {
    page-break-after: avoid;
    break-after: avoid;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* Externe Adressen ausschreiben, Telefon und E-Mail nicht: dort steht
     der Klartext bereits im Linktext. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-style: italic;
  }

  a[href^="tel:"]::after,
  a[href^="mailto:"]::after {
    content: "";
  }

  /* Telefonnummer und Postanschrift auf jeder gedruckten Seite.
     Sie steht fest am unteren Rand des Satzspiegels. Ein negativer Wert
     waere naheliegend, um sie in den Seitenrand zu setzen — Chrome
     verschiebt sie dann aber auf die naechste Seite mitten in den Text.
     Deshalb bleibt es bei 0. */
  .druckfuss {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 9pt;
    line-height: 1.35;
    color: #000;
    background: #fff;
    padding-top: 2mm;
  }

  .druckfuss span::after {
    content: " · ";
  }

  .druckfuss span:last-child::after {
    content: "";
  }
}