/* Was „Wissen“ über die Bausteine hinaus braucht.
 *
 * Setzt `gemeinsam/tafel.css`, `gemeinsam/bausteine.css` und
 * `gemeinsam/seiten.css` voraus und wird nach ihnen geladen.
 *
 * `seiten.css` ist hier richtig, obwohl diese Anwendung gebaut wird: Der
 * Inhalt kommt aus Markdown und trägt seine Struktur in Elementen —
 * `table`, `p`, `ul`, `blockquote` —, nicht in Klassen. Genau dafür ist sie
 * geschrieben. Was sie für eine Seite ohne Kopfleiste festlegt, wird hier in
 * der einzelnen Deklaration zurückgenommen und nicht ein zweites Mal gebaut.
 *
 * Farben stehen keine hier: Was diese Anwendung braucht, ist ein Ton, und der
 * heißt `--primaer` — bis auf den einen, den die Kopfleiste führt.
 */

/* Der Ton dieser Anwendung: petrol, das Sachgebiet „Wissen“ auf der Übersicht
   — derselbe Ton, den `icon.svg` bereits trägt. Nur die Kopfleiste greift ihn
   ab; alles übrige bleibt bei `--primaer`. */
:root {
  --ton-app: var(--ton-petrol);
}

/* ---------------------------------------------------------------- Grundriss */

/* `seiten.css` polstert den Fuß der Seite; hier polstert `.inhalt` selbst. */
body {
  padding: 0;
}

/* Die Kopfleiste ist `sticky`; wie hoch sie steht, hängt vom Umbruch ihrer
   Schaltflächen ab. Das Skript misst nach und schreibt das Ergebnis hierher,
   damit Seitenleiste und Sprungziele darunter zu liegen kommen. */
:root {
  --hoehe-kopfleiste: 57px;
  --breite-navi: 17rem;
}

.grundriss {
  display: grid;
  grid-template-columns: var(--breite-navi) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.inhalt {
  min-width: 0;
  padding: 1.5rem 0 3rem;
}

/* Auf der Übersicht steht keine Seitenleiste — dort ist das Verzeichnis der
   Inhalt. Der Grundriss ist dann eine einzige Spalte. */
.grundriss--breit {
  display: block;
  max-width: 62rem;
}

/* `.kopf__marke--verweis` — das Zeichen im Kopf führt auf die Übersicht
   zurück, auf ihr selbst ist es kein Verweis. Die Regel dazu steht seit der
   Vereinheitlichung der Kopfzeilen in `gemeinsam/bausteine.css`; sie stand
   hier, solange `wissen` die einzige Anwendung mit einer verweisenden Marke
   war. */

/* Der Sprung zum Inhalt, den nur die Tastatur findet. */
.uebergehen {
  position: absolute;
  left: -9999px;
  z-index: 30;
  padding: 0.6rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--primaer);
  border-radius: var(--rundung);
  color: var(--primaer);
}

.uebergehen:focus {
  left: 1rem;
  top: 0.5rem;
}

/* Die Leiste mit », die das Verzeichnis auf schmalem Fenster hervorholt, und
   das « darin, das es wieder verbirgt, haben auf breitem nichts zu tun: Dort
   steht die Spalte ohnehin. Ausgeblendet misst `leistenhoehen.js` die Leiste
   mit null, und die Sprungziele rechnen nichts dazu. */
.navileiste,
.navi__schliessen {
  display: none;
}

/* ------------------------------------------------------------ Seitenleiste */

.navi {
  position: sticky;
  top: var(--hoehe-kopfleiste);
  /* Die Leiste rollt für sich, wenn sie länger ist als das Fenster — sonst
     wären die letzten Gebiete unerreichbar, sobald der Inhalt oben steht.
     Der Flexkasten ist dafür nötig und nicht Zierde: `max-height` allein
     macht die Höhe nicht bestimmt, ein `max-height: 100%` am Kind löste
     sich zu `none` auf, und die Rolle wuchs über die Leiste hinaus, wo
     `overflow: hidden` sie abschnitt — ohne Rollbalken. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--hoehe-kopfleiste));
  padding: 1.5rem 0 1rem;
  overflow: hidden;
}

.navi__rolle {
  flex: 1;
  /* Ein Flexkind rutscht sonst nicht unter seinen Inhalt und rollt nie. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.5rem;
}

.navi__liste,
.navi__seiten,
.navi__marken {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navi__gebiet + .navi__gebiet {
  margin-top: 1.1rem;
}

.navi__gebietstitel {
  display: block;
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
  text-decoration: none;
}

.navi__seite,
.navi__marke {
  display: block;
  padding: 0.3rem 0.5rem;
  border-left: 2px solid transparent;
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1.35;
}

.navi__marke {
  padding-left: 1.4rem;
  font-size: 0.78rem;
  color: var(--text-leise);
}

.navi__marke--2 {
  padding-left: 2.1rem;
}

.navi__seite:hover,
.navi__marke:hover,
a.navi__gebietstitel:hover {
  color: var(--primaer);
}

/* Die Gruppe, die man gerade liest, ist kein Verweis auf sich selbst — sie
   trägt ihren Namen in der Farbe der Anwendung, die übrigen führen weg. */
.navi__gebietstitel--hier {
  color: var(--primaer);
}

/* Wo man gerade steht. Das Skript setzt die Klasse beim Rollen. */
.navi__seite--hier,
.navi__marke--hier {
  border-left-color: var(--primaer);
  color: var(--primaer);
  font-weight: 600;
  background: color-mix(in srgb, var(--primaer) 8%, transparent);
}

/* Die Überschriften einer Seite stehen nur unter der Seite, in der man
   gerade liest — sonst wäre die Leiste ein zweites Inhaltsverzeichnis von
   sechzig Zeilen. */
.navi__marken {
  display: none;
}

.navi__seiten li.hier .navi__marken {
  display: block;
}

/* ------------------------------------------------------------ Die Übersicht */

.uebersicht__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.uebersicht__titel {
  font-size: 1.15rem;
  color: var(--primaer);
  margin: 0;
}

/* ------------------------------------------------------------- Die Suche */

/* Das Feld steht neben der Überschrift und nimmt, was übrig ist — auf einem
   schmalen Fenster bricht es unter sie und läuft über die volle Breite. */
.suche {
  flex: 1 1 16rem;
  max-width: 24rem;
}

.suche__ergebnis {
  margin: -0.5rem 0 0.9rem;
  font-size: 0.8rem;
  color: var(--text-leise);
}

.suche__ergebnis:empty {
  display: none;
}

.leer {
  display: none;
  padding: 1rem 0;
  color: var(--text-leise);
}

/* Die Überschriften einer Seite sind der Grund, weshalb die Suche mehr
   findet als ein Filter über die Titel. Zu sehen sind sie nur, wenn sie
   selbst der Treffer waren — sonst stünde die Übersicht als
   Inhaltsverzeichnis von sechshundert Zeilen da. */
.gruppe__marken {
  display: none;
  list-style: none;
  margin: 0.1rem 0 0.3rem 0.75rem;
  padding: 0 0 0 0.6rem;
  border-left: 2px solid var(--linie);
  font-size: 0.82rem;
}

.gruppe__seite--marken .gruppe__marken {
  display: block;
}

.gruppe__marke a {
  color: var(--text-leise);
  text-decoration: none;
}

.gruppe__marke a:hover {
  color: var(--primaer);
}

/* Eine Kachel je Themengruppe, so breit wie sie Platz findet. */
.gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

/* `article` ist in `seiten.css` schon eine Karte; hier fällt nur der
   Zwischenraum weg, den das Raster ohnehin setzt. */
.gruppe {
  margin-bottom: 0;
}

.gruppe__titel {
  font-size: 1.05rem;
  margin: 0 0 0.2rem;
}

.gruppe__titel a {
  color: var(--primaer);
  text-decoration: none;
}

.gruppe__titel a:hover {
  text-decoration: underline;
}

.gruppe__zahl {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  color: var(--text-leise);
}

.gruppe__seiten {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
}

.gruppe__seiten li {
  padding: 0.15rem 0;
}

.gruppe__seiten a {
  color: var(--text);
  text-decoration: none;
}

.gruppe__seiten a:hover {
  color: var(--primaer);
}

/* --------------------------------------------------------------- Der Inhalt */

.gebiet__titel {
  /* Die Marke des Gebiets, nicht die Überschrift einer Karte: kleiner als
     ein Seitentitel und in der Farbe der Anwendung. */
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primaer);
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--linie);
}

/* Eine Seite ist eine Karte — `article` in `seiten.css`. Hier kommt nur
   dazu, dass ihr Sprungziel nicht unter der Kopfleiste verschwindet. */
.seite {
  scroll-margin-top: calc(var(--hoehe-kopfleiste) + var(--hoehe-navileiste, 0px) + 0.75rem);
}

/* Die Überschriften innerhalb einer Seite. Sie heißen `sprungmarke` und
   nicht `marke`: In `gemeinsam/seiten.css` ist `.marke` das Zeichen neben
   dem Seitentitel und misst 2,5 rem im Quadrat — wer die Bausteine einbindet,
   erbt ihre Namen. Die Überschriften liefen dadurch spaltenschmal, brachen um
   und legten sich über den Text darunter. */
.gebiet,
.sprungmarke,
.fussnoten__liste li,
.fussnote a {
  scroll-margin-top: calc(var(--hoehe-kopfleiste) + var(--hoehe-navileiste, 0px) + 0.75rem);
}

.seite__titel {
  font-size: 1.25rem;
  color: var(--primaer);
  margin: 0 0 1rem;
}

.seite h4,
.seite h5,
.seite h6 {
  font-weight: 600;
  margin: 1.5rem 0 0.6rem;
}

.seite h4 { font-size: 1.05rem; }
.seite h5 { font-size: 0.95rem; color: var(--text-leise); }
.seite h6 { font-size: 0.88rem; color: var(--text-leise); }

.seite > :first-child {
  margin-top: 0;
}

.seite ul,
.seite ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.seite li {
  margin-bottom: 0.25rem;
}

.seite a {
  color: var(--merke);
}

/* Ein Verweis auf die eigene Überschrift, der erst beim Überfahren
   auftaucht — dauerhaft sichtbar wäre er in siebzig Überschriften Lärm. */
.sprungmarke__anker {
  margin-left: 0.4rem;
  color: var(--text-leise);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
}

.sprungmarke:hover .sprungmarke__anker,
.seite__titel:hover .sprungmarke__anker,
.sprungmarke__anker:focus-visible {
  opacity: 0.7;
}

.fehlt {
  color: var(--fehler);
}

/* ----------------------------------------------------------- Zahlenwerk */

/* Die Tabellen dieser Sammlung sind Zahlenwerk: Ziffern gleicher Breite
   stehen untereinander, und eine Zeile hebt sich beim Überfahren ab. Die
   übrigen Maße stehen in `seiten.css`. */
.seite table {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  /* `seiten.css` zieht jede Tabelle auf die volle Breite — richtig für die
     Karten von `fr` und `uz`, falsch für Zahlenwerk aus zwei Spalten: Bei den
     Dichtewerten stünde das Material am linken und sein Wert am rechten Rand,
     eine Handbreit Weiß dazwischen. Hier bestimmt der Inhalt die Breite; was
     breiter ist als die Karte, füllt sie weiterhin ganz und rollt in `.rollt`. */
  width: auto;
  max-width: 100%;
}

.seite tbody tr:hover {
  background: color-mix(in srgb, var(--primaer) 6%, transparent);
}

/* Die Ausrichtung aus dem Markdown (`|---:|`) steht am Element und darf von
   der Klassenregel in `seiten.css` nicht überschrieben werden. */
.seite th[align="right"], .seite td[align="right"] { text-align: right; }
.seite th[align="center"], .seite td[align="center"] { text-align: center; }

/* -------------------------------------------------- Zeichnungen und Belege */

/* Die Zeichnungen sind Strichgrafiken auf weißem Grund; im Dunkeln stünden
   sie als leuchtende Kacheln in der Karte. Ein heller Träger mit Rundung
   nimmt ihnen das, ohne die Zeichnung selbst anzutasten. */
.figur {
  display: block;
  max-width: min(100%, 220px);
  height: auto;
  margin: 0.4rem auto;
  padding: 0.3rem;
  background: #ffffff;
  border-radius: 4px;
}

/* Steht die Zeichnung allein in einem Absatz, darf sie größer sein als in
   einer Tabellenspalte — die beschrifteten unter ihnen sind sonst nicht zu
   entziffern. Der Nachfahrenselektor greift auch durch den Rahmen einer
   Zeichnung mit Unterschrift hindurch. */
.seite > p .figur__voll .figur {
  max-width: min(100%, 640px);
}

.figur__voll {
  display: block;
}

/* Die Unterschrift nennt Urheber und Lizenz und gehört sichtbar unter das
   Bild — im `alt` läse sie niemand. Rahmen und Beschriftung sind `span`,
   weil das Bild in einem Absatz steht; erst hier werden sie zum Block. */
.figur__rahmen {
  display: block;
  margin: 0.4rem auto;
  max-width: min(100%, 640px);
}

.figur__rahmen .figur {
  margin-bottom: 0.3rem;
}

.figur__unterschrift {
  display: block;
  text-align: center;
  font-size: 0.85em;
  line-height: 1.4;
  color: var(--text-leise);
}

.anhang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--flaeche);
  color: var(--primaer);
  text-decoration: none;
  font-size: 0.85rem;
}

.anhang:hover {
  border-color: var(--primaer);
}

/* --------------------------------------------------------------- Formeln */

/* KaTeX schreibt MathML; der Browser setzt es selbst. Nur die Größe ist zu
   sagen — voreingestellt fällt es neben der Fließschrift zu klein aus. */
math {
  font-size: 1.05em;
}

/* Eine abgesetzte Formel: der Satz mittig, die Nummer — wo es eine gibt —
   rechts daneben.

   Gebaut wird das hier und nicht von KaTeX. Dessen `\tag{}` liefert eine
   `<mtable width="100%">` mit leeren Abstandspalten — Firefox setzt sie
   richtig, Chromium kennt `width` an `mtable` und `mtd` nicht, und Formel
   samt Nummer klumpen am rechten Rand. Ein Gitter trägt in beiden.

   `span` mit `display: grid`, weil die Formel in einem Absatz steht: Ein
   `div` risse ihn auf. */
.formel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  margin: 0.8rem 0;
}

/* Der Satz rollt für sich, wenn er breiter ist als die Spalte — die Seite
   soll nicht mitwandern. `min-width: 0` gehört dazu: Ohne es wächst das
   Gitterfeld mit seinem Inhalt, statt ihn rollen zu lassen.

   `overflow-y` muss dabei ausdrücklich genannt werden: Wo `overflow-x` steht
   und `overflow-y` nicht, macht der Browser aus dem zweiten ebenfalls `auto`.
   Chrome meldet für ein `math` die Höhe seiner Grundlinie und lässt Brüche
   und Wurzeln darüber hinausragen — daraus wurde ein senkrechter Rollbalken
   neben jeder Formel, der fünfzehn Pixel der Spalte fraß.

   `hidden` allein schnitte das Hinausragende ab; das Polster gibt ihm seinen
   Platz zurück. Die 0,5 rem sind gemessen und nicht geraten: Über alle 64
   abgesetzten Formeln des Bestands ragt die höchste um drei Pixel hinaus,
   0,35 rem reichten ihr nicht. Wer eine höhere aufnimmt — eine Matrix, ein
   mehrzeiliges System —, prüft das nach. */
.formel__satz {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5rem 0;
  text-align: center;
}

.formel__nummer {
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Auf schmalem Schirm rückt die Nummer unter die Formel und an deren
   rechten Rand. Das ist kein Muss, sondern eine Rechnung: Auf 360 px
   bekommt der Satz dadurch 269 statt 248 Pixel — eine Formel, die dort
   ohnehin rollt, rollt um ein Zwölftel weniger. */
@media (max-width: 30rem) {
  .formel {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    justify-items: end;
  }

  .formel__satz {
    justify-self: stretch;
  }
}

/* Eine Formel, die KaTeX nicht versteht, steht als Quelltext da statt als
   Lücke — auffällig genug, dass sie beim Lesen bemerkt wird. */
.formel-roh {
  font-family: var(--schrift-fest);
  font-size: 0.85em;
  color: var(--warnung);
}

.seite code {
  font-family: var(--schrift-fest);
  font-size: 0.88em;
  padding: 0.1em 0.3em;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 3px;
}

/* --------------------------------------------------------------- Behelfe */

/* Die Behelfe kommen als `dataviewjs` aus dem Tresor und tragen Obsidians
   Inline-Stile mit sich — Maße bloß, aber ihre Farben und ihre feste Schrift
   nennen sie über Obsidians Variablen. Die werden hier auf die Tafel gelegt;
   damit stimmt auch die dunkle Fassung. Umgeschrieben wird der Quelltext
   nicht: Er soll im Tresor unverändert weiterlaufen.

   **Jede Variable, die ein Behelf nennt, gehört hierher.** Eine fehlende
   fällt nicht auf, sondern aus: `stroke: var(--text-muted)` ohne Wert ist
   keine Farbe, sondern gar keine Linie — so blieben im Sonnenstandsbehelf
   Horizont und Gradmarken unsichtbar und die Sonne farblos; `font-family:
   var(--font-monospace)` ohne Wert ist keine Deklaration, und die Hashwerte
   und Zahlentabellen stünden in der Fließschrift. Was der Tresor braucht,
   nennt
   `grep -rhoE 'var\(--(color|text|background|font)[a-z-]*\)' "$WISSEN_TRESOR"`. */
.behelf {
  --background-modifier-border: var(--linie);
  --color-red: var(--ton-rot);
  --color-orange: var(--ton-ocker);
  --color-green: var(--ton-gruen);
  --color-blue: var(--ton-blau);
  /* Die Palette führt kein Gelb, und Ocker ist hell ein Braun — die Sonne
     im Sonnenstandsbehelf sähe verrußt aus. Sie ist der einzige Ort, an
     dem diese Anwendung Gelb braucht, und deshalb einer der Fälle, in denen
     ein eigener Farbwert stehen darf. Über dem hellen Himmel des Schemas
     trägt nur ein sattes Gold. */
  --color-yellow: #e0a500;
  --text-normal: var(--text);
  --text-muted: var(--text-leise);
  /* Noch eine Stufe schwächer als „leise“: das Ausgegraute. */
  --text-faint: color-mix(in srgb, var(--text-leise) 55%, transparent);
  --font-monospace: var(--schrift-fest);

  margin: 1rem 0;
}

/* Im Dunkeln kehrt sich das um: Der Grund ist dunkel, und das Gold von oben
   liefe darauf schmutzig. Ein helles Gelb steht dort für dieselbe Sonne. */
[data-thema="dunkel"] .behelf { --color-yellow: #ffd24d; }

/* Der Kasten, den ein Behelf sich im Tresor selbst gibt (`box.className =
   "behelf-box"`). Im Tresor gestaltet ihn das Snippet `behelf.css`; hier
   steht dieselbe Form mit den Mitteln der Tafel. Die Klasse kommt aus dem
   Quelltext des Tresors und ist deshalb nicht `behelf__kasten` — wer sie
   umbenennt, muss 117 Notizen anfassen.

   Obsidians `--text-accent` und `--background-secondary` stehen deshalb
   nirgends belegt: Das Snippet nennt sie, der Quelltext der Behelfe nicht.
   Nennt ihn einer, schlägt der Test an — das ist die Stelle, an der man
   merkt, dass die Variable gebraucht wird. */
.behelf-box {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--primaer);
  border-radius: var(--rundung);
  padding: 0.8em 1em;
  background: var(--grund);
}

/* Die Felder eines Behelfs sehen aus wie die Felder der übrigen
   Anwendungen. Die Breite gibt der Behelf selbst vor (`width` inline), die
   Höhe der Tippfläche bleibt außen vor: Die Zeilen stehen dicht. */
.behelf input,
.behelf select {
  padding: 5px 8px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--eingabe-grund);
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.behelf input:hover,
.behelf select:hover {
  border-color: var(--primaer);
}

.behelf input:focus,
.behelf select:focus {
  border-color: var(--primaer);
}

/* Ein Behelf braucht sein Skript. Bleibt es aus — abgeschaltet oder
   gescheitert —, steht sonst eine leere Stelle da, die nichts erklärt. */
.behelf:empty::before {
  content: "Dieser Behelf braucht JavaScript.";
  display: block;
  padding: 0.8em 1em;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--rundung);
  color: var(--text-leise);
  font-size: 0.9em;
}

/* Die Überschrift eines Behelfs trägt im Tresor das Präfix „Behelf:“ und
   wird dort ausgezeichnet; hier tut es dieselbe Regel. Sie steht zwischen
   den Sachüberschriften der Notiz und soll sich von ihnen abheben — der
   Behelf ist das Werkzeug, nicht der Stoff.

   `.seite` steht davor, weil `.seite h5` und `.seite h6` weiter oben die
   tieferen Ebenen leise färben und die Klasse allein dagegen zu schwach
   wäre — ein Behelf steht je nach Notiz auf der ersten, zweiten oder
   dritten Ebene. */
.seite .sprungmarke--behelf {
  color: var(--primaer);
}

/* ------------------------------------------------------- Hinweiskästen */

/* Aus `>[!info] Beispiel` des Tresors. Der Ton kommt aus der Palette der
   Tafel und wird über `--farbe` an Rand, Titel und Untergrund gereicht —
   eine Farbe steht hier nicht. */
.hinweis {
  --farbe: var(--ton-grau);
  margin: 1.25rem 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--farbe);
  border-radius: var(--rundung);
  background: color-mix(in srgb, var(--farbe) 7%, transparent);
}

.hinweis__titel {
  margin: 0 0 0.35rem;
  font-weight: 600;
  color: var(--farbe);
}

/* Steht im Kasten nur ein Absatz, soll er nicht doppelt Luft bekommen. */
.hinweis > :last-child {
  margin-bottom: 0;
}

.hinweis--info { --farbe: var(--ton-blau); }
.hinweis--rat { --farbe: var(--ton-petrol); }
.hinweis--beispiel { --farbe: var(--ton-violett); }
.hinweis--frage { --farbe: var(--ton-magenta); }
.hinweis--gelungen { --farbe: var(--ton-gruen); }
.hinweis--warnung { --farbe: var(--ton-ocker); }
.hinweis--gefahr { --farbe: var(--ton-rot); }
.hinweis--zitat { --farbe: var(--ton-grau); }

/* ------------------------------------------------------------- Fußnoten */

/* Die Ziffer im Text. Hochgestellt, aber ohne die Zeile aufzureißen:
   `line-height: 0` hält den Absatz auf seinem Zeilenmaß. */
.fussnote {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: super;
}

.fussnote a {
  padding: 0 0.1em;
  text-decoration: none;
}

.fussnoten {
  margin-top: 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--linie);
  font-size: 0.9rem;
  color: var(--text-leise);
}

.fussnoten__liste {
  margin: 0;
  padding-left: 1.5rem;
}

.fussnoten__liste li {
  margin: 0.35rem 0;
}

.fussnoten__liste li:target {
  background: color-mix(in srgb, var(--primaer) 10%, transparent);
  border-radius: var(--rundung);
}

.fussnote__rueck {
  text-decoration: none;
}

/* ------------------------------------------------------------ Schmales Fenster */

@media (max-width: 60rem) {
  .grundriss {
    display: block;
    padding: 0;
  }

  .navileiste {
    display: block;
    position: sticky;
    top: var(--hoehe-kopfleiste);
    z-index: 14;
    padding: 0.25rem 0.5rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
  }

  .navileiste[hidden] {
    display: none;
  }

  .navileiste__knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: var(--rundung);
    background: none;
    color: var(--text-leise);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
  }

  .navileiste__knopf:hover {
    color: var(--primaer);
    background: var(--grund);
  }

  /* Das « steht oben rechts in der offenen Schublade — dort, wo sie endet. */
  .navi__schliessen {
    display: inline-flex;
    align-self: flex-end;
    margin-bottom: 0.25rem;
  }

  /* Die Leiste rückt unter die Kopfleiste und ist zunächst weg: Auf einem
     Telefon soll die erste Seite zu sehen sein und nicht das Verzeichnis. */
  .navi {
    position: sticky;
    top: var(--hoehe-kopfleiste);
    z-index: 15;
    max-height: calc(100vh - var(--hoehe-kopfleiste));
    padding: 0.5rem 1rem 1rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten);
  }

  .navi[hidden] {
    display: none;
  }

  /* Auf dem Telefon steht in der Leiste alles, was es zu finden gibt —
     eine aufgeklappte Seite gibt es dort nicht. */
  .navi__seiten li .navi__marken {
    display: block;
  }

  .inhalt {
    padding: 1rem 1rem 3rem;
  }
}