/*
 * Hilfe-Seiten (oeffentlich, ohne Anmeldung erreichbar).
 *
 * Eigene Datei statt <style> im Dokument: die Sicherheitsrichtlinie dieses
 * Webroots erlaubt eingebettete Stile nur fuer /apps/ (siehe .htaccess). Ein
 * <style>-Block hier wuerde vom Browser stillschweigend verworfen - die Seite
 * erschiene unformatiert.
 *
 * Schriften: Systemschriften wie in der Anwendung und den Modul-Apps. Keine
 * Web-Schriftart von fremden Servern - die Hilfe soll niemanden an Dritte
 * melden, nur weil er sie liest.
 *
 * Die Seiten sind zum Ausdrucken gedacht (je zwei Seiten A4). Der Druckteil am
 * Ende dieser Datei ist deshalb kein Beiwerk, sondern Teil des Zwecks.
 */

:root {
	--grund: #1e293b;
	--gedaempft: #64748b;
	--akzent: #4f46e5;
	--linie: #e2e8f0;
	--flaeche: #f8fafc;
	--warnung: #b45309;
	--warnung-flaeche: #fffbeb;
	--gefahr: #b91c1c;
	--gefahr-flaeche: #fef2f2;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 2rem 1.25rem 4rem;
	font-family:
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Arial,
		sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: var(--grund);
	background: var(--flaeche);
}

/* Zwei Spalten: links die Bereichsnavigation, rechts der Text.
   
   Die Leiste stand frueher quer ueber dem Text. Das kostete auf jeder Seite
   die ersten Zentimeter, bevor ein Wort zu lesen war - und beim Blaettern
   sprang der Textanfang jedes Mal an dieselbe Stelle zurueck. Als Spalte
   bleibt sie stehen und nimmt dem Text nichts weg.
   
   Unterhalb von 60rem kippt das Ganze zurueck in die alte Form, dann aber
   zusammengeklappt hinter einem Schalter (siehe weiter unten). */
main {
	max-width: 68rem;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: 0.75rem;
	padding: 2rem 2.25rem 2.5rem;
	display: flex;
	align-items: flex-start;
	gap: 2.25rem;
}

/* Der Textbereich. `min-width: 0` ist nicht Zierde: ohne diese Angabe
   weigert sich ein Flex-Element, schmaler zu werden als sein breitester
   unteilbarer Inhalt. Eine lange Adresse oder eine breite Tabelle wuerde die
   Spalte dann auseinanderdruecken und die Leiste zusammenquetschen. */
.inhalt {
	flex: 1;
	min-width: 0;
}

/* ============ Kopf ============ */

.kopf {
	border-bottom: 2px solid var(--linie);
	padding-bottom: 0.9rem;
	margin-bottom: 1.4rem;
}

.kopf-marke {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--akzent);
	margin: 0 0 0.3rem;
}

h1 {
	font-size: 1.5rem;
	margin: 0 0 0.35rem;
	line-height: 1.25;
}

.kopf-unterzeile {
	margin: 0;
	color: var(--gedaempft);
	font-size: 0.9rem;
}

h2 {
	font-size: 1.05rem;
	margin: 1.5rem 0 0.5rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--linie);
}

h2:first-of-type {
	border-top: 0;
	padding-top: 0;
}

h3 {
	font-size: 0.92rem;
	margin: 1rem 0 0.3rem;
}

p {
	margin: 0.5rem 0;
}

ul {
	margin: 0.5rem 0;
	padding-left: 1.2rem;
}

li {
	margin: 0.25rem 0;
}

strong {
	font-weight: 600;
}

/* Ein Begriff der Oberflaeche, genau so geschrieben wie er dort steht. Wer die
   Hilfe neben dem Bildschirm liegen hat, soll nicht raten muessen, ob ein Wort
   erklaerender Text oder eine Beschriftung ist. */
.knopf {
	display: inline-block;
	padding: 0.05rem 0.35rem;
	border: 1px solid var(--linie);
	border-radius: 0.3rem;
	background: var(--flaeche);
	font-size: 0.88em;
	font-weight: 600;
	white-space: nowrap;
}

/* ============ Tabellen ============ */

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.7rem 0;
	font-size: 0.9rem;
}

th,
td {
	text-align: left;
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid var(--linie);
	vertical-align: top;
}

th {
	background: var(--flaeche);
	font-weight: 600;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gedaempft);
}

td.ja {
	color: #15803d;
	font-weight: 600;
}

/* Weder ja noch nein: das Entschluesseln haengt fuer Gaeste an einer Freigabe
   je App. Bewusst in der Warnfarbe und nicht im Gruen der klaren Erlaubnis -
   wer die Tabelle ueberfliegt, soll hier haengenbleiben. */
td.teils {
	color: var(--warnung);
	font-weight: 600;
}

td.nein {
	color: var(--gedaempft);
}

/* ============ Hervorhebungen ============ */

.kasten {
	border-left: 3px solid var(--akzent);
	background: var(--flaeche);
	padding: 0.7rem 0.9rem;
	margin: 0.9rem 0;
	border-radius: 0 0.4rem 0.4rem 0;
}

.kasten-warnung {
	border-left-color: var(--warnung);
	background: var(--warnung-flaeche);
}

.kasten-gefahr {
	border-left-color: var(--gefahr);
	background: var(--gefahr-flaeche);
}

.kasten p:first-child {
	margin-top: 0;
}

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

.kasten-titel {
	font-weight: 700;
	font-size: 0.86rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.25rem;
}

.kasten-gefahr .kasten-titel {
	color: var(--gefahr);
}

.kasten-warnung .kasten-titel {
	color: var(--warnung);
}

/* Nummerierte Schrittfolge der Ersteinrichtung. */
ol.schritte {
	margin: 0.7rem 0;
	padding-left: 1.3rem;
}

ol.schritte > li {
	margin: 0.45rem 0;
	padding-left: 0.2rem;
}

/* ============ Gemeinsame Bereichsnavigation ============
   Steht auf JEDER Seite des Hilfebereichs, wortgleich und in derselben
   Reihenfolge. Sie ist der einzige Ort, an dem der Bereich als Ganzes
   sichtbar wird - ohne sie waeren es fuenf Seiten, die zufaellig
   aufeinander verweisen.

   DIE SYMBOLE STEHEN IM STYLESHEET, NICHT IM MARKUP

   Es gibt keinen Server, der ein gemeinsames Kopfstueck einsetzen koennte:
   der Bereich ist statisch gehostet. Die Navigation muss also in jeder
   Datei stehen. Stuenden die Symbole als <svg> darin, waeren es sechs
   Symbole mal sechs Seiten - sechsunddreissig Stellen, an denen dieselbe
   Zeichnung gepflegt werden muesste.

   Als Data-URI im Hintergrund stehen sie genau einmal hier. Die Seiten
   tragen nur noch `class="hn hn-handbuch"`. Das hat einen zweiten Vorteil:
   ein Symbol neben einer Beschriftung ist Schmuck, kein Inhalt - im
   Hintergrund ist es fuer Vorleseprogramme richtigerweise unsichtbar.

   `#` muss in einer Data-URI als %23 geschrieben werden, sonst endet der
   Wert dort - der Browser liest den Rest als Fragment und zeigt nichts. */

.hilfe-nav {
	flex: 0 0 14rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	/* Bleibt beim Blaettern stehen. Das Handbuch ist lang; wer auf halber
	   Strecke woanders hinwill, soll nicht erst nach oben zurueckmuessen. */
	position: sticky;
	top: 2rem;
}

/* ---- Schalter fuer schmale Schirme ----
   Auf breiten Schirmen unsichtbar: dort steht die Leiste ohnehin offen. Die
   Checkbox wird NICHT mit `display: none` versteckt - damit waere sie auch
   fuer die Tastatur verschwunden und das Menue mit ihr. Sie wird stattdessen
   aus dem Sichtfeld geschoben und bleibt bedienbar. */
.hn-schalter {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.hn-knopf {
	display: none;
	align-items: center;
	gap: 0.6rem;
	align-self: flex-start;
	margin: 0 0 1.1rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--linie);
	border-radius: 0.5rem;
	background: #fff;
	color: var(--grund);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.hn-knopf:hover {
	border-color: var(--akzent);
	color: var(--akzent);
}

/* Der Fokus liegt auf der ausgeblendeten Checkbox - sichtbar machen muss ihn
   deshalb die Beschriftung, sonst tastet sich niemand blind durch. */
.hn-schalter:focus-visible ~ .hn-knopf {
	outline: 2px solid var(--akzent);
	outline-offset: 2px;
}

/* Drei Striche. Aus einem Rechteck und seinen beiden Pseudoelementen - ein
   Bild waere ein weiterer Abruf fuer etwas, das aus sechs Zeilen entsteht. */
.hn-balken,
.hn-balken::before,
.hn-balken::after {
	display: block;
	width: 1.05rem;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}

.hn-balken {
	position: relative;
}

.hn-balken::before,
.hn-balken::after {
	content: "";
	position: absolute;
	left: 0;
}

.hn-balken::before {
	top: -0.36rem;
}

.hn-balken::after {
	top: 0.36rem;
}

.hilfe-nav .hn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.75rem 0.45rem 2.05rem;
	border: 1px solid transparent;
	/* In der Spalte ein Rechteck mit weichen Ecken - eine Pille ueber die
	   volle Spaltenbreite wirkt wie ein Knopf, nicht wie ein Listeneintrag.
	   Quer ueber dem Text (schmale Schirme) wird daraus wieder eine Pille. */
	border-radius: 0.5rem;
	/* ACHTUNG - hier ausdruecklich KEINE Kurzschreibweise `background:`.
	   Sie setzt alle background-Eigenschaften zurueck, auch `background-image`,
	   und zwar mit der Spezifitaet dieser Regel (zwei Klassen). Die Symbole
	   weiter unten stehen unter einer einzigen Klasse (`.hn-start` und so
	   fort) und verloeren damit die Kaskade: ihr Bild waere `none`.
	   Sichtbar blieb dann nur das Symbol der aktuellen Seite, weil dessen
	   Regel drei Klassen traegt - genau das war der Fehler "Symbole fehlen
	   bei den nicht gewaehlten Punkten". */
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 0.7rem center;
	background-size: 1rem 1rem;
	color: var(--grund);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.hilfe-nav .hn:hover {
	border-color: var(--akzent);
	color: var(--akzent);
}

/* Die Seite, auf der man steht: ohne diese Markierung ist eine Leiste, die
   ueberall gleich aussieht, eher verwirrend als hilfreich. `aria-current`
   statt einer Klasse - derselbe Grund wie bei der Kapitelnavigation des
   Handbuchs: der Zustand steht einmal im Dokument, und zwar dort, wo auch
   Hilfsmittel ihn lesen. */
.hilfe-nav .hn[aria-current="page"] {
	border-color: var(--akzent);
	background-color: var(--akzent);
	color: #fff;
	cursor: default;
}

/* Haus */
.hn-start {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/><path d="M9.5 21v-6h5v6"/></svg>');
}

/* Aufgeschlagenes Buch */
.hn-handbuch {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6.5S10 4.5 3 4.5v13c7 0 9 2 9 2s2-2 9-2v-13c-7 0-9 2-9 2Z"/><path d="M12 6.5v13"/></svg>');
}

/* Schluessel - die Besitzer-Anleitung dreht sich um den Organisationsschluessel */
.hn-besitzer {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="16.5" r="3.5"/><path d="m10 14 8.5-8.5"/><path d="m16 8 2 2"/><path d="m19 5 2 2"/></svg>');
}

/* Zwei Personen */
.hn-kraefte {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5"/><path d="M16 5.2a3.2 3.2 0 0 1 0 5.6"/><path d="M17.5 14.9c2.1.6 3.5 2.400 3.5 5.1"/></svg>');
}

/* Bildschirm */
.hn-bilder {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4" width="19" height="13" rx="2"/><path d="M8.5 21h7"/><path d="M12 17v4"/></svg>');
}

/* Umzugskarton */
.hn-umzug {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h18v12H3z"/><path d="M3 8 5 3h14l2 5"/><path d="M12 3v5"/><path d="M9.5 12h5"/></svg>');
}

/* Vier Kacheln - das Sinnbild der Anwendungsuebersicht, dasselbe Zeichen wie
   das Neun-Punkte-Menue in der Anwendung. */
.hn-apps {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5"/></svg>');
}

/* Auf der aktuellen Seite muss das Symbol mitwechseln: ein schiefergraues
   Symbol auf dunkelblauem Grund waere kaum zu erkennen. */
.hilfe-nav .hn[aria-current="page"].hn-start {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/><path d="M9.5 21v-6h5v6"/></svg>');
}

.hilfe-nav .hn[aria-current="page"].hn-handbuch {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6.5S10 4.5 3 4.5v13c7 0 9 2 9 2s2-2 9-2v-13c-7 0-9 2-9 2Z"/><path d="M12 6.5v13"/></svg>');
}

.hilfe-nav .hn[aria-current="page"].hn-besitzer {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="16.5" r="3.5"/><path d="m10 14 8.5-8.5"/><path d="m16 8 2 2"/><path d="m19 5 2 2"/></svg>');
}

.hilfe-nav .hn[aria-current="page"].hn-kraefte {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5"/><path d="M16 5.2a3.2 3.2 0 0 1 0 5.6"/><path d="M17.5 14.9c2.1.6 3.5 2.400 3.5 5.1"/></svg>');
}

.hilfe-nav .hn[aria-current="page"].hn-bilder {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4" width="19" height="13" rx="2"/><path d="M8.5 21h7"/><path d="M12 17v4"/></svg>');
}

.hilfe-nav .hn[aria-current="page"].hn-umzug {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h18v12H3z"/><path d="M3 8 5 3h14l2 5"/><path d="M12 3v5"/><path d="M9.5 12h5"/></svg>');
}

.hilfe-nav .hn[aria-current="page"].hn-apps {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5"/></svg>');
}

/* ============ Zweite Ebene: die einzelnen Apps ============

   WARUM UEBERHAUPT ZWEI EBENEN

   Die Hauptleiste beschreibt die Anwendung als Ganzes - Aufbau, Rechte,
   Verschluesselung, Zugang. Das gilt unabhaengig davon, welche Apps eine
   Organisation gebucht hat. Die Apps selbst sind beweglich: es koennen
   welche hinzukommen, andere koennen wegfallen, und keine Organisation
   sieht alle.

   Stuenden sie in derselben Leiste, muesste diese bei jeder neuen App
   angefasst werden - auf dann neun Seiten. Und ein Leser, dessen
   Organisation nur den Dienstplan gebucht hat, saehe drei Punkte, von
   denen zwei ins Leere seiner Erfahrung fuehren.

   Deshalb: ein einziger Punkt "Apps" in der Hauptleiste, dahinter eine
   eigene Ebene. Wer dort nichts sucht, sieht davon nichts. */

.app-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.5rem;
	padding: 0 0 1.1rem;
	border-bottom: 1px solid var(--linie);
}

/* Flacher als die Hauptleiste und ohne Sinnbild: die zweite Ebene soll
   erkennbar untergeordnet sein, sonst konkurrieren zwei gleich laute
   Leisten uebereinander um dieselbe Aufmerksamkeit. */
.app-nav .an {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.7rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--flaeche);
	color: var(--gedaempft);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.app-nav .an:hover {
	border-color: var(--linie);
	color: var(--akzent);
}

.app-nav .an[aria-current="page"] {
	border-color: var(--linie);
	background: #fff;
	color: var(--grund);
	cursor: default;
}

/* Farbpunkt je App - dieselbe Zuordnung wie die Kachelfarben in der
   Anwendung. Er ersetzt kein Wort, er macht die Zeile nur schneller
   ueberfliegbar. */
.app-nav .an::before {
	content: "";
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.45rem;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
}

.app-nav .an-uebersicht::before {
	background: #94a3b8;
}

.app-nav .an-dienstplan::before {
	background: #6366f1;
	opacity: 1;
}

.app-nav .an-einsatzprotokoll::before {
	background: #0ea5e9;
	opacity: 1;
}

.app-nav .an-notizen::before {
	background: #14b8a6;
	opacity: 1;
}

/* Kopfzeile einer App-Seite: Farbe und Name der App, damit beim Blaettern
   zwischen drei aehnlich aufgebauten Seiten sofort klar ist, wo man ist. */
.app-marke {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.3rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.app-marke::before {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 0.2rem;
	background: currentColor;
}

.app-marke-dienstplan {
	color: #6366f1;
}

.app-marke-einsatzprotokoll {
	color: #0284c7;
}

.app-marke-notizen {
	color: #0d9488;
}

/* ============ Bildschirmfotos ============
   Die Bilder tragen feine Linien und kleine Schrift. Ein Rahmen grenzt sie
   klar vom hellen Seitenrand ab, ohne dass ein Schlagschatten ausfranst.

   `width`/`height` stehen zusaetzlich am <img>-Tag: damit kennt der Browser
   das Seitenverhaeltnis, bevor die Datei geladen ist, und reserviert den
   Platz. Ohne das springt der Text beim Nachladen nach unten weg - und zwar
   genau dann, wenn jemand gerade angefangen hat zu lesen. */

figure.bild {
	margin: 1.2rem 0 1.6rem;
}

figure.bild img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--linie);
	border-radius: 0.5rem;
	background-color: #fff;
}

figure.bild figcaption {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	color: var(--gedaempft);
}

/* ============ Fuss und Navigation ============ */

.fuss {
	margin-top: 2rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--linie);
	font-size: 0.83rem;
	color: var(--gedaempft);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	align-items: center;
}

a {
	color: var(--akzent);
}

.fuss a {
	color: var(--gedaempft);
}

/* ============ Startseite der Hilfe ============ */

/* `auto-fit` statt fester Spaltenzahl: der Bereich ist von zwei auf fuenf
   Karten gewachsen und wird es wieder tun. Mit einer festen Zahl muesste
   dieses Raster bei jeder neuen Seite nachgezogen werden - und wenn das
   jemand vergisst, steht eine Karte allein in der letzten Reihe. */
.wahl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 1.2rem 0;
}

.wahl-karte {
	display: block;
	border: 1px solid var(--linie);
	border-radius: 0.6rem;
	padding: 1rem 1.1rem;
	text-decoration: none;
	color: inherit;
	background: #fff;
}

.wahl-karte:hover {
	border-color: var(--akzent);
	background: var(--flaeche);
}

.wahl-karte h2 {
	border: 0;
	padding: 0;
	margin: 0 0 0.3rem;
	font-size: 1rem;
	color: var(--akzent);
}

.wahl-karte p {
	margin: 0;
	font-size: 0.88rem;
	color: var(--gedaempft);
}

/* ============ Schmale Schirme ============
   Unterhalb von 60rem ist fuer zwei Spalten kein Platz: die Leiste nimmt
   entweder dem Text zu viel weg oder wird selbst zu schmal fuer ihre
   laengste Beschriftung. Sie kehrt deshalb ueber den Text zurueck - aber
   zusammengeklappt, denn aufgeklappt fuellte sie die halbe erste
   Bildschirmseite, bevor ein Wort zu lesen waere. */

@media (max-width: 60rem) {
	main {
		display: block;
		max-width: 52rem;
	}

	.hn-knopf {
		display: inline-flex;
	}

	.hilfe-nav {
		display: none;
		flex: none;
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin: 0 0 1.5rem;
		padding: 0 0 1.1rem;
		border-bottom: 1px solid var(--linie);
	}

	/* Der Schalter steht im Quelltext vor der Leiste - nur deshalb kann diese
	   Regel sie ueberhaupt erreichen (~ greift ausschliesslich nach hinten).
	   `pruefe-hilfe-struktur.php` prueft die Reihenfolge auf jeder Seite. */
	.hn-schalter:checked ~ .hilfe-nav {
		display: flex;
	}

	.hilfe-nav .hn {
		border-color: var(--linie);
		border-radius: 999px;
	}
}

@media (max-width: 40rem) {
	body {
		padding: 1rem 0.75rem 2rem;
	}

	main {
		padding: 1.25rem 1.1rem 1.5rem;
	}

	.wahl {
		grid-template-columns: 1fr;
	}

	/* Auf schmalen Schirmen wuerde die Leiste sonst die halbe erste
	   Bildschirmseite fuellen, bevor ein Wort des Textes zu sehen ist. */
	.hilfe-nav {
		gap: 0.3rem;
		margin-bottom: 1.1rem;
		padding-bottom: 0.8rem;
	}

	.hilfe-nav .hn {
		padding: 0.3rem 0.6rem 0.3rem 1.8rem;
		background-position: 0.55rem center;
		background-size: 0.9rem 0.9rem;
		font-size: 0.8rem;
	}

	.app-nav {
		gap: 0.3rem;
		margin-bottom: 1.1rem;
		padding-bottom: 0.8rem;
	}

	.app-nav .an {
		font-size: 0.78rem;
	}
}

/* ============ Druck ============
   Beide Anleitungen sollen auf zwei Blatt passen. Alles, was am Bildschirm der
   Orientierung dient (Rahmen, Flaechen, Verweise auf die jeweils andere
   Anleitung), traegt auf Papier nichts bei und faellt deshalb weg. */

@media print {
	body {
		padding: 0;
		background: #fff;
		font-size: 9.5pt;
		line-height: 1.4;
	}

	main {
		max-width: none;
		border: 0;
		border-radius: 0;
		padding: 0;
		/* Zurueck auf eine Spalte. Bliebe es beim Nebeneinander, stuende auf
		   jedem Blatt links eine leere Spalte in Leistenbreite - die Leiste
		   selbst wird ja ausgeblendet. */
		display: block;
	}

	h1 {
		font-size: 15pt;
	}

	h2 {
		font-size: 10.5pt;
		margin-top: 0.8rem;
		padding-top: 0.5rem;
		/* Eine Ueberschrift allein am Seitenende ist eine leere Ankuendigung. */
		break-after: avoid;
	}

	h3 {
		break-after: avoid;
	}

	table,
	.kasten,
	ol.schritte > li {
		break-inside: avoid;
	}

	.kasten {
		border: 1px solid #999;
		border-left-width: 3px;
	}

	.nicht-drucken {
		display: none;
	}

	/* Die Bereichsnavigation ist auf Papier sinnlos: anklicken laesst sie
	   sich nicht, und sie stuende auf jedem Ausdruck oben als Block aus
	   Kaestchen. Der Fuss nennt die Nachbarseiten ohnehin im Klartext.
	   Der Menueschalter gehoert aus demselben Grund dazu - ein Knopf auf
	   Papier ist eine Aufforderung ins Leere. */
	.hilfe-nav,
	.app-nav,
	.hn-schalter,
	.hn-knopf {
		display: none;
	}

	a {
		color: inherit;
		text-decoration: none;
	}
}