/* =========================================================================
   Studio für digitales Publizieren — Grundlagen

   Zwei Schnitte der Halvar: proportional für Text und Überschriften,
   Mono für den Apparat. Sechs Schriftgrade, Zeilenabstand 1,3 im
   Verzeichnis und 1,4 im Fließtext. Alles andere macht das Raster.
   ========================================================================= */

/* --- Schrift ------------------------------------------------------------ */
/* Lokal eingebunden. Kein Aufruf externer Server, kein Tracking. */

/* --- Schriften ---------------------------------------------------------

   Halvar Flex (TypeMates, Lizenz der Folkwang Universität der Künste) für
   Überschriften und Fließtext, Halvar Mono für den Apparat.

   Die gelieferte TTF von 2019 benutzt eigene Achsskalen — wght 10–160,
   wdth 50–150 — und hat Black/Breitschrift als Standardschnitt. In CSS
   hieße font-weight: 400 dadurch „schwerstmöglich". Die eingebundene woff2
   ist deshalb umgerechnet: Standardschnitt auf Regular/Mittelschrift
   verschoben, Achsen auf wght 100–900 und wdth 75–125 umbenannt, eine
   avar-Tabelle legt die benannten Schnitte auf die üblichen CSS-Werte.
   Geprüft gegen das Original: höchstens 1 von 1000 Einheiten Abweichung.

     100 Hairline   150 ExtraThin   200 Thin   300 Light   400 Regular
     500 Medium     700 Bold        800 ExtraBold         900 Black
     75% Engschrift  100% Mittelschrift  125% Breitschrift

   Die Neigungsachse (slnt 0–24) ist herausgerechnet — sie kostete 150 KB
   und wird nirgends benutzt. Zum Wiederherstellen die TTF erneut mit
   pyftsubset umwandeln, ohne slnt festzusetzen.

   Halvar Mono ist die lizenzierte variable Fassung mit vollständigem
   Zeichensatz. Sie hat nur die Gewichtsachse, keine Breiten; siehe den
   Block darunter.
   ---------------------------------------------------------------------- */

@font-face {
  font-family: 'Halvar Flex';
  src: url('../fonts/halvar-flex.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 75% 125%;   /* Engschrift .. Breitschrift */
  font-style: normal;
  font-display: swap;
}

/* Halvar Mono: lizenziert als variable Webfont (TypeMates, Bestellung
   #260545, Web bis 10 000 Seitenaufrufe im Monat), siehe
   assets/fonts/LICENSE.md. Die Datei steht unverändert da — die Lizenz
   verbietet Umwandeln und Bearbeiten, erlaubt nur Subsetting.

   Eine Achse, ein Block. Gebraucht werden die Stufen der Schnitt-Variablen
   (--schnitt-leicht … --schnitt-kraeftig, siehe :root) im hellen und im
   dunklen Modus:

     hell    300 leicht   400 normal   500 mittel   700 kräftig
     dunkel  200 leicht   300 normal   400 mittel   500 kräftig

   Gemessen am 19.09.2026 über 71 Seiten in beiden Modi: In der Mono kommen
   300, 400, 500 und 700 vor. Regular trägt im Hellen den gesamten Apparat,
   Medium die kleinen Angaben, die nicht blass werden dürfen (Kalenderwoche,
   Uhrzeiten, Blocktitel der Randspalte), Bold <strong>, die gewählte
   Sprache und die Semesternamen. Im Dark Mode rückt jede Stufe einen
   Schnitt tiefer.

   Bis zum Kauf standen hier fünf feste Blöcke, alle auf der Demo-Datei —
   feste Werte, damit ablesbar blieb, was zu lizenzieren war. Mit der
   variablen Lizenz ist jeder Wert der Achse abgedeckt. */

@font-face {
  font-family: 'Halvar Mono';
  src: url('../fonts/halvar-mono-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Farbwerte ---------------------------------------------------------- */
/*
   Schwarzweiß. Der Farbmodus hängt an :root — entweder über die
   Systemeinstellung oder über data-farbmodus, das der Umschalter setzt.
*/

:root {
  --papier:     #ffffff;
  --tinte:      #303030;
  --gedaempft:  #565656;
  --linie:      rgba(48, 48, 48, 0.85);
  --linie-fein: rgba(48, 48, 48, 0.32);
  --flaeche:    rgba(48, 48, 48, 0.05);
  --invers-papier: #151515;
  --invers-tinte:  #f4f4f2;

  /* Grund und Schrift des invertierten Bandes — im Hellen die Umkehrung,
     im Dunkeln nicht. Dort wäre die Umkehrung ein weißer Block am Fuß einer
     dunklen Seite: der hellste Fleck der Seite ausgerechnet dort, wo das
     Kleingedruckte steht. Stattdessen hebt sich das Band nur leicht vom
     Grund ab und behält die Schriftfarbe der Seite. */
  --band-grund:   var(--tinte);
  --band-schrift: var(--papier);

  /* Bilder im dunklen Modus: Ein Foto in voller Helligkeit ist auf fast
     schwarzem Grund ein Scheinwerfer. Im Hellen bleibt es, wie es ist. */
  --bild-helligkeit: 1;

  /* --- Schriftschnitte ---------------------------------------------------
     Vier Stufen, überall als Variable statt als Zahl. Im Dark Mode steht
     jede eine Stufe leichter (siehe unten): Helle Schrift auf dunklem Grund
     wirkt kräftiger, als sie ist — der leichtere Schnitt gleicht das aus. */
  --schnitt-leicht:   300;
  --schnitt-normal:   400;
  --schnitt-mittel:   500;
  --schnitt-kraeftig: 700;

  /* Überschriften stehen eine Spur dunkler als der Text (#303030), damit sie
     sich abheben — im Dark Mode entsprechend heller. Gilt für alle h1–h4
     und für die kleinen Beschriftungen über Abschnitten, Blöcken und
     Kästen. */
  --ueberschrift: #161616;
  /* --band-gedaempft-fest bleibt hier absichtlich ungesetzt. Bei Schwarzweiß
     mischt layout.css den gedämpften Ton im Band aus den beiden Bandtönen;
     die Neonpaletten setzen stattdessen einen gerechneten Festwert, weil
     ein Mischverhältnis dort nicht trägt — bei Pink bleibt zwischen Grund
     und Schrift kein Spielraum. */


  /* --- Schriftgrade -----------------------------------------------------
     Bewusst wenige. Wer einen sechsten braucht, braucht meist ein
     anderes Layout.

     Die ganze Leiter steht 0,15rem höher als zuvor — jede Stufe um
     denselben Betrag, nicht um denselben Faktor. Dadurch rücken die
     kleinen Grade spürbar auf (Mikro +20 %, Klein +18 %), während die
     großen fast unverändert bleiben (Groß +2,7 %): Genau dort saß das
     Problem, denn 12 px für Legenden und Spaltenköpfe waren an der
     Grenze. Bei den Clamps wandern Anfangs-, Endwert und der feste
     Anteil der Steigung mit, damit die Kurve dieselbe bleibt und nur
     höher liegt.
     ------------------------------------------------------------------- */
  /* Eine Stufe unter Mikro, nur für die Ränder der Seite: Kopf- und
     Fußzeile. Sie sind Apparat um den Inhalt herum und dürfen leiser sein
     als das Kleingedruckte im Inhalt selbst. Der Wert hängt an --mikro und
     nicht an einer eigenen Zahl — wird die Leiter noch einmal verschoben,
     wandert er mit. */
  --winzig:  calc(var(--mikro) - 0.15rem);   /* Kopfzeile */
  --mikro:   0.9rem;     /* Feldbeschriftungen, Legenden, Spaltenköpfe */
  --klein:   1rem;       /* Rollen, Meta, Bildunterschriften */
  --basis:   1.175rem;   /* Fließtext, Links */
  --eintrag: 1.45rem;    /* Titel einer Karte, eines Termins, eines Eintrags */
  --mittel:  clamp(1.65rem, 1.25rem + 1.6vw, 2.25rem);  /* Abschnittstitel, Teaser */
  --gross:   clamp(2.55rem, 1.15rem + 6.5vw, 5.65rem);  /* Seitentitel */

  --eng:   1.3;   /* Verzeichnis, Karten, Überschriften */
  --lesen: 1.4;   /* laufender Text */

  /* Strichstärke der waagerechten Trennlinien. Sie sind Kastenrahmen, und
     die rundet der Browser auf das dünnste Gerätepixel auf — 0,1 px wird
     also zu 0,5 px auf Retina, 1 px sonst. Kastenrahmen mit Kontur (Knöpfe,
     Marken, Filterschalter) bleiben bei 1 px, sonst verlieren sie sie. */
  --strich: 0.1px;

  /* Die senkrechten Linien sind keine Rahmen, sondern Hintergrundverläufe —
     und die rundet niemand auf. Bei 0,1 px wurden davon 0,2 Gerätepixel
     gezeichnet und mit 32 Prozent Deckkraft verrechnet: rechnerisch rund
     sechs Prozent Deckung, praktisch unsichtbar. Deshalb ein eigener Wert,
     der auf genau ein Gerätepixel fällt — so stehen sie gleich stark da wie
     die waagerechten. */
  --strich-senkrecht: 1px;

  /* --- Senkrechte Abstände ----------------------------------------------
     Eine Linie trennt, Luft ordnet. Wo eine Linie steht, braucht es
     beidseitig genug Raum, damit sie nicht klemmt.
     ------------------------------------------------------------------- */
  --luft-eng:  0.9rem;                          /* innerhalb eines Eintrags */
  --luft:      1.6rem;                          /* zwischen Einträgen */
  --luft-weit: clamp(2.75rem, 5vw, 5rem);       /* zwischen Abschnitten */

  /* --- Raster ----------------------------------------------------------- */
  --spalte:  minmax(0, 1fr);
  --gasse:   clamp(0.9rem, 2vw, 1.75rem);
  --rand:    clamp(1rem, 4vw, 3rem);
  --breite:  1440px;  /* Kopf, Inhalt, Bänder und Fuß laufen nicht breiter */
  --breite-text: 40rem;
  --mass:    66ch;   /* Zeilenmaß für laufenden Text — das Raster darf breiter */
  --mass-eng: 54ch;  /* Zeilenmaß für Nebentext im kleineren Grad:
                        Beschreibungen in Terminlisten, Notizen an Sitzungen.
                        Sie stehen oft in einer Spalte, die so breit ist wie
                        die Seite, und sind Beiwerk — 66 Zeichen wären dort
                        nicht zu eng, aber zu viel Fläche für einen Nachsatz. */

  /* Zwei Rollen, zwei Schriften.

     --schrift        Überschriften und Fließtext: Halvar Flex
     --schrift-daten  Apparat: Halvar Mono — Marginalien, Metazeilen,
                      Zahlen, Kalender, Knöpfe, Filter

     Hinter der Mono steht Halvar Flex als Rückfall, falls die Datei
     nicht lädt. Welcher Baustein welche Rolle bekommt, steht am Dateiende. */
  --schrift:       'Halvar Flex', ui-sans-serif, system-ui, sans-serif;
  --schrift-daten: 'Halvar Mono', 'Halvar Flex', ui-monospace, monospace;

  --tempo: 160ms;
}

/* Auf Bildschirmen mit doppelter Auflösung ist ein halbes CSS-Pixel bereits
   ein volles Gerätepixel. Ohne diese Stufe wären die senkrechten Linien
   dort doppelt so kräftig wie die waagerechten. */
@media (min-resolution: 2dppx) {
  :root { --strich-senkrecht: 0.5px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-farbmodus='light']) {
    --papier:     #151515;
    --tinte:      #f4f4f2;
    --gedaempft:  #a3a3a0;
    --linie:      rgba(244, 244, 242, 0.85);
    --linie-fein: rgba(244, 244, 242, 0.34);
    --flaeche:    rgba(244, 244, 242, 0.07);
    --invers-papier: #f4f4f2;
    --invers-tinte:  #151515;
    /* Der Fuß ist ein umgekehrtes Band: im hellen Modus dunkel, im dunklen
       hell. Vorher stand er auf #272727 und war von der fast schwarzen
       Seite kaum zu unterscheiden. */
    --band-grund:    #f4f4f2;
    --band-schrift:  #151515;
    /* Im Dark Mode jede Schriftstufe einen Schnitt leichter */
    --schnitt-leicht:   200;
    --schnitt-normal:   300;
    --schnitt-mittel:   400;
    --schnitt-kraeftig: 500;
    --ueberschrift:     #ffffff;
    --bild-helligkeit:  0.86;
  }
}

:root[data-farbmodus='dark'] {
  --papier:     #151515;
  --tinte:      #f4f4f2;
  --gedaempft:  #a3a3a0;
  --linie:      rgba(244, 244, 242, 0.85);
  --linie-fein: rgba(244, 244, 242, 0.34);
  --flaeche:    rgba(244, 244, 242, 0.07);
  --invers-papier: #f4f4f2;
  --invers-tinte:  #151515;
  --band-grund:    #f4f4f2;
  --band-schrift:  #151515;
  --schnitt-leicht:   200;
  --schnitt-normal:   300;
  --schnitt-mittel:   400;
  --schnitt-kraeftig: 500;
  --ueberschrift:     #ffffff;
  --bild-helligkeit:  0.86;
}

/* --- Reset -------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--basis);
  font-weight: var(--schnitt-normal);
  line-height: var(--eng);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: clip;
}

/* Der einzige Ort, an dem die Website den fetten Schnitt abruft.

   Der Browser setzt <strong> und <b> von sich aus auf 700. Solange das
   nirgends steht, sieht man der Website nicht an, dass sie einen zweiten
   Schnitt braucht — hier steht es. Wer den fetten Schnitt einsparen will,
   ändert die eine Zahl; die Auszeichnung bleibt dann semantisch erhalten
   und wird nur nicht mehr sichtbar. */
strong, b { font-weight: var(--schnitt-kraeftig); }

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

/* Nur im dunklen Modus gesetzt, nicht als brightness(1) im hellen: Ein
   Filter zwingt den Browser sonst auf jeder Seite zu einer eigenen Ebene
   je Bild, ohne dass sich etwas ändert. Die Bildmarke ist ein Inline-SVG
   und bleibt außen vor. */
@media (prefers-color-scheme: dark) {
  :root:not([data-farbmodus='light']) img { filter: brightness(var(--bild-helligkeit)); }
}

:root[data-farbmodus='dark'] img { filter: brightness(var(--bild-helligkeit)); }

ul, ol { padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-style: dotted; }

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

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: var(--strich) solid var(--linie); margin: 1.5rem 0; }

/* --- Überschriften ------------------------------------------------------ */

h1, h2, h3, h4 { font-weight: var(--schnitt-normal); color: var(--ueberschrift); }

/* Seitentitel kleingeschrieben, wie die Komposition der Startseite. Die
   Umwandlung macht das Stylesheet: Im Panel steht der Titel in normaler
   Schreibung, und so lesen ihn auch Sprachausgabe, Browser-Tab und
   Suchmaschinen. */
.titel {
  font-size: var(--gross);
  font-weight: var(--schnitt-normal);
  text-transform: lowercase;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: none;
}

/* Die große Zeile der Startseite läuft über mehrere Zeilen — dort sitzt
   1.1 besser als das satte 1 der einzeiligen Seitentitel.

   Eigener Schriftgrad statt --gross: Die Steigung bleibt dieselbe, nur die
   Obergrenze liegt ein rem höher. Sie greift ab rund 1108 px Fensterbreite,
   darunter sind beide Werte gleich. Die Seitentitel der Unterseiten bleiben
   bei --gross.

   Strichstärke 400 — dieselbe wie im Fließtext. Bei diesem Grad trägt sie
   ohne schwer zu wirken; die dünneren Schnitte 100 und 200 standen hier
   zwischenzeitlich und wirkten neben dem Vorspann zu zart. Gemessen steigt
   der Deckungsgrad der Schrift von 100 auf 200 um rund das Dreifache und
   von 200 auf 400 noch einmal knapp aufs Doppelte. */
.titel--gross {
  font-size: clamp(2.4rem, 1rem + 6.5vw, 6.5rem);
  font-weight: var(--schnitt-normal);
  line-height: 1.1;
}

/* Abschnittsüberschrift: kleine Versalzeile über einer Haarlinie —
   sie ordnet, ohne sich in den Vordergrund zu stellen. */
.abschnitt__titel {
  font-size: var(--mikro);
  font-weight: var(--schnitt-normal);
  line-height: var(--eng);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ueberschrift);
  margin-block: var(--luft-weit) var(--luft);
  padding-block-end: 0.3rem;
  border-block-end: var(--strich) solid var(--linie);
}

/* --- Fließtext ---------------------------------------------------------- */

.fliesstext {
  max-width: var(--breite-text);
  line-height: var(--lesen);
}

.fliesstext > * + * { margin-block-start: 0.9em; }
.fliesstext--schmal { max-width: 34rem; }
.fliesstext--gross  { max-width: 46rem; font-size: 1.2rem; }

/* Rechtliche Seiten: Impressum und Datenschutz. Der Seitentitel steht hier
   in der Größe eines Abschnittstitels statt in der eines Seitentitels, der
   Text eine Stufe unter dem Fließtext der übrigen Seiten. Die Angaben
   müssen da sein und auffindbar bleiben — laut werden müssen sie nicht. */
.rechtstext .titel { font-size: var(--mittel); letter-spacing: -0.02em; }
/* Die Monozeile unter dem Titel skaliert mit der Seitenbreite und wäre
   neben dem kleineren Titel die zweitgrößte Schrift der Seite. */
.rechtstext .seitenkopf__teaser { font-size: var(--basis); }
.rechtstext .fliesstext { font-size: var(--klein); }
.rechtstext .fliesstext h2 { font-size: var(--basis); }
.rechtstext .fliesstext h3 { font-size: var(--klein); }

.fliesstext h2 {
  font-size: var(--mittel);
  line-height: var(--eng);
  letter-spacing: -0.02em;
  margin-block-start: 1.8em;
}

.fliesstext h3 {
  font-size: var(--basis);
  font-weight: var(--schnitt-normal);
  margin-block-start: 1.6em;
}

.fliesstext ul li { padding-inline-start: 1.2em; position: relative; }
.fliesstext ul li::before {
  content: '—';
  position: absolute;
  inset-inline-start: 0;
  color: var(--gedaempft);
}
.fliesstext ol { list-style: decimal; padding-inline-start: 1.3em; }

/* Aufzählungen im Fließtext. Das Reset oben nimmt allen Listen Marker und
   Einzug; die nummerierte Liste bekam beides zurück, die Aufzählung nie —
   eine Liste aus einem Textfeld erschien als lose untereinanderstehende
   Zeilen. Der Gedankenstrich als Marker folgt .liste-strich. */
.fliesstext ul { padding-inline-start: 1.3em; }
.fliesstext ul > li { position: relative; }
.fliesstext ul > li::before {
  content: '—';
  position: absolute;
  inset-inline-start: -1.3em;
  color: var(--gedaempft);
}
.fliesstext li + li { margin-block-start: 0.35em; }

.fliesstext blockquote {
  border-inline-start: 2px solid var(--tinte);
  padding-inline-start: 1em;
  font-size: 1.1em;
}

.fliesstext code {
  background: var(--flaeche);
  padding: 0.1em 0.3em;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
}

.fliesstext pre {
  background: var(--flaeche);
  padding: 0.9rem;
  overflow-x: auto;
  border: 1px solid var(--linie-fein);
}

/* Untertitel: erklärt die Überschrift, tritt aber hinter den Teaser zurück */
/* Der Untertitel steht zwischen Titel und Vorspann und muss zwischen beiden
   liegen, auch im Grad. Seit der Vorspann in der Mono auf 24 px sitzt, wären
   die alten 16,4 px die kleinste Stufe im Kopf gewesen — eine Zeile, die
   näher am Titel steht als der Vorspann, aber leiser wirkt als er. Jetzt
   steigt es von 88 über 33,6 auf 24 px ab. */
.untertitel {
  font-size: var(--mittel);
  font-weight: var(--schnitt-leicht);
  line-height: var(--eng);
  letter-spacing: -0.02em;
  color: var(--gedaempft);
  margin-block-start: clamp(0.6rem, 1.2vw, 1rem);
}

/* --- Zeilenmaß von Überschrift und Vorspann ------------------------------
   Der Seitentitel und der Absatz darunter laufen über 60 Prozent der
   Spalte. Erst ab 60rem — darunter wären 60 Prozent von 375 Pixeln
   knapp 225 Pixel, in denen der Titel zerbräche.
   ---------------------------------------------------------------------- */

@media (min-width: 60rem) {
  .titel,
  .titel + p,
  .buehne__claim,
  .seitenkopf__teaser { max-width: 60%; }

  /* Die große Zeile der Startseite darf weiter laufen als der Text unter
     ihr. Bei diesem Grad braucht sie die Länge, sonst bricht sie in zu
     viele kurze Zeilen. */
  .titel--gross { max-width: 75%; }
}

.stand {
  color: var(--gedaempft);
  font-size: var(--klein);
  margin-block-start: 1.5rem;
}

/* --- Hilfsklassen ------------------------------------------------------- */

.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skiplink {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform: translateY(-120%);
  background: var(--tinte);
  color: var(--papier);
  padding: 0.6rem 1rem;
  z-index: 100;
  text-decoration: none;
}

.skiplink:focus { transform: translateY(0); }

.leer {
  padding: 1.25rem 0;
  color: var(--gedaempft);
  border-block: var(--strich) solid var(--linie);
  font-size: var(--klein);
}

/* =========================================================================
   Rollenverteilung der beiden Schnitte

   Fließtext und Überschriften laufen in der proportionalen Halvar — sie
   liest sich besser über längere Strecken. Alles, was beschriftet, zählt,
   datiert oder bedient wird, läuft in der Mono: dort ist die feste
   Zeichenbreite ein Vorteil, weil Spalten, Uhrzeiten und Platzzahlen
   untereinander fluchten.
   ========================================================================= */

/* --- Marginalien und Beschriftungen ------------------------------------- */
.abschnitt__titel,
.fuss__titel,
.hinweis__titel,
.buchung__titel,
.filter__titel,
.filter__legende,
.legende__titel,
.brotkrumen ol,
.tabelle thead th,
.monat th,
.daten dt,

/* --- Daten, Zahlen, Datum ----------------------------------------------- */
.meta-zeile,
.daten dd,
.karte__datum,
.karte__meta,
.karte__fuss,
.karte__status,
.artikel__datum,
.stand,
.frist,
.prinzip__zahl,
.schritt__zahl,
.pfad__zahl,
.leitbegriff__zahl,
.pfad__kurz,
.person__funktion,
.person__kontakt,
.person__zeit,

/* --- Kalender ------------------------------------------------------------ */
.kalendertag__titel,
.zeitraum__titel,
.termin__zeit,
.termin__kategorie,
.termin__ort,
.termin__hinweis,
.monat__tag,
.legende__eintrag,
.woche__kopf,
.kalendereintrag__zeit,
.kalendereintrag__hinweis,

/* --- Bedienung ----------------------------------------------------------- */
.knopf,
.knopf-menue,
.sprachen a,
.marke,
.filter__optionen label,
.filter__anzahl,
.ansichten__link,
.weiterlesen,
.weg__marke,
.auslastung,
.buchung,
.leer,

/* --- Listen und Fuß ------------------------------------------------------ */
.liste-schlicht,
.naechster__weitere,
/* Der ganze Fuß: Überschriften, Adresse, Kontakt, Listen, Hinweis —
   auch was im Panel formatiert wird, erbt die Mono. */
.fuss {
  font-family: var(--schrift-daten);
}

/* Überschriften bleiben proportional, auch wenn sie in einem Apparat-Block
   stehen — sonst kippt die Karte oder der Termin ins Technische. */
.karte__titel,
.termin__titel { font-family: var(--schrift); }

/* Der Kopfschriftzug läuft in der Mono, siehe .wortmarke__text in layout.css */

/* =========================================================================
   Ruhe

   Es gibt keine Animationen mehr auf der Seite, nur noch kurze Übergänge
   an Knöpfen und Links. Wer das System auf reduzierte Bewegung stellt,
   bekommt auch die nicht.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   Druck
   ========================================================================= */

@media print {
  .kopf,
  .menue,
  .filter,
  .ansichten,
  .zeitraum,
  .skiplink { display: none; }

  body { background: #fff; color: #000; }

  a::after { content: ' (' attr(href) ')'; font-size: 0.8em; word-break: break-all; }
  .karte, .termin { break-inside: avoid; }
}