/*
 * Handbuch - Ergaenzung zu hilfe.css
 * =====================================================================
 *
 * WARUM EINE ZWEITE DATEI
 *
 * Das Handbuch teilt Schrift, Tabellen, Kaesten und Druckregeln mit den
 * beiden Kurzanleitungen; es laedt `hilfe.css` deshalb mit. Eigen ist ihm
 * nur dreierlei: die Kapitelnavigation, die Rollenspalten und die
 * Schaubilder. Das gehoert nicht in `hilfe.css` - die beiden
 * Kurzanleitungen wuerden sonst bei jeder Aenderung am Handbuch neu
 * ausgeliefert, obwohl sich fuer sie nichts geaendert hat.
 *
 * Eigene Datei heisst auch eigene Fassungskennung: `handbuch.css?v=1`
 * laesst sich hochzaehlen, ohne `hilfe.css?v=2` anzufassen.
 *
 * OHNE JAVASCRIPT VOLLSTAENDIG
 *
 * Im Grundzustand sind alle Kapitel sichtbar. Erst das Skript blendet aus,
 * was gerade nicht gewaehlt ist. Faellt es aus, wird geblockt oder druckt
 * jemand die Seite, bleibt ein vollstaendiges Handbuch uebrig statt einer
 * Seite mit einer Navigation, die nichts oeffnet.
 */

/* ============ Kopf des Handbuchs ============ */

/* Das Handbuch ist breiter als die Kurzanleitungen: es traegt Tabellen mit
   vier Rollenspalten und Schaubilder, die bei 52rem gestaucht wirken. */
main.handbuch {
	max-width: 64rem;
}

/* ============ Kapitelnavigation ============ */

.hb-nav {
	position: sticky;
	/* Bleibt beim Blaettern stehen. Ohne `top` waere `sticky` wirkungslos. */
	top: 0;
	z-index: 10;
	margin: 0 -2.25rem 1.5rem;
	padding: 0.75rem 2.25rem;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--linie);
	/* Fuer den Fall, dass der Browser `backdrop-filter` kann - sonst genuegt
	   die fast deckende Flaeche darueber. */
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.hb-nav-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hb-nav-knopf {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--linie);
	border-radius: 999px;
	background: #fff;
	color: var(--gedaempft);
	font: inherit;
	font-size: 0.83rem;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

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

/* `aria-current` statt einer eigenen Klasse: der Zustand steht damit genau
   einmal im Dokument, und zwar dort, wo auch Hilfsmittel ihn lesen. */
.hb-nav-knopf[aria-current="true"] {
	border-color: var(--akzent);
	background: var(--akzent);
	color: #fff;
}

/* ============ Kapitel ============ */

.hb-kapitel {
	scroll-margin-top: 4.5rem;
}

/* Trennlinie zwischen den Kapiteln - aber nur, solange alle untereinander
   stehen. Ist gefiltert, gibt es nichts zu trennen. */
.hb-kapitel + .hb-kapitel {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 2px solid var(--linie);
}

body.hb-gefiltert .hb-kapitel + .hb-kapitel {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.hb-kapitel[hidden] {
	display: none;
}

/* Die Kapitelueberschrift traegt keine Trennlinie: die hat das Kapitel schon. */
.hb-kapitel > h2:first-child {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
	font-size: 1.2rem;
	color: var(--akzent);
}

/* ============ Rollentabellen ============ */

/* Vier schmale Spalten nach einer breiten. `table-layout: fixed` verhindert,
   dass eine lange Beschriftung in der ersten Spalte die Rollenspalten
   zusammendrueckt, bis „Leiter“ umbricht. */
table.hb-rollen {
	table-layout: fixed;
}

table.hb-rollen th:first-child,
table.hb-rollen td:first-child {
	width: 40%;
}

table.hb-rollen th:not(:first-child),
table.hb-rollen td:not(:first-child) {
	text-align: center;
	width: 15%;
}

/* Die drei Zustaende einer Rollenzelle. Nicht allein an der Farbe erkennbar -
   im Text steht „ja“, „nein“ oder der Vorbehalt selbst; die Farbe hilft nur
   beim Ueberfliegen und faellt im Druck ohnehin weg. */
td.ja {
	color: #15803d;
	font-weight: 600;
}

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

td.teils {
	color: var(--warnung);
	font-weight: 600;
}

/* ============ Schaubilder ============ */

figure.hb-bild {
	margin: 1.1rem 0;
	padding: 1rem;
	border: 1px solid var(--linie);
	border-radius: 0.6rem;
	background: #fff;
}

figure.hb-bild svg {
	display: block;
	width: 100%;
	height: auto;
}

figure.hb-bild figcaption {
	margin-top: 0.7rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--linie);
	font-size: 0.85rem;
	color: var(--gedaempft);
}

/* ============ Kleinteile ============ */

/* Pfad durch die Oberflaeche, z.B. Organisation → Sicherheit. */
.hb-pfad {
	white-space: nowrap;
}

/* Begriffsliste am Kapitelanfang. */
dl.hb-begriffe {
	margin: 0.8rem 0;
}

dl.hb-begriffe dt {
	font-weight: 600;
	margin-top: 0.7rem;
}

dl.hb-begriffe dd {
	margin: 0.15rem 0 0 1.2rem;
	color: var(--gedaempft);
}

/* ============ Druck ============
   Gedruckt wird immer das GANZE Handbuch, gleich was die Navigation gerade
   zeigt. Ein Ausdruck, dem ohne Vorwarnung acht von neun Kapiteln fehlen,
   waere die unangenehmste Art, das zu erfahren. Die Regel steht bewusst mit
   `!important` da: sie muss das `hidden`-Attribut ueberstimmen, das das
   Skript setzt. */

@media print {
	main.handbuch {
		max-width: none;
	}

	.hb-nav {
		display: none;
	}

	.hb-kapitel[hidden] {
		display: block !important;
	}

	/* Beim Ausdruck stehen wieder alle Kapitel untereinander - also brauchen
	   sie auch wieder ihre Trennung, selbst wenn am Bildschirm gefiltert war. */
	body.hb-gefiltert .hb-kapitel + .hb-kapitel {
		margin-top: 1.2rem;
		padding-top: 0.8rem;
		border-top: 1px solid #999;
	}

	.hb-kapitel {
		break-before: page;
	}

	.hb-kapitel:first-of-type {
		break-before: auto;
	}

	figure.hb-bild {
		break-inside: avoid;
		border: 1px solid #999;
	}
}