/*
  Die Gestaltung der Produktseite und des Verwaltungsbereichs.

  ────────────────────────────────────────────────────────────────────────
  DIESELBEN WERTE WIE DIE ANWENDUNG, ABGESCHRIEBEN UND NICHT GETEILT
  ────────────────────────────────────────────────────────────────────────

  Farben, Masse und Rundungen stammen aus `web/src/stil/marken.css` der
  Anwendung. Sie stehen hier noch einmal, statt aus einem gemeinsamen Paket zu
  kommen: Die Seite ist ein eigenes Erzeugnis mit eigenem Auslieferungsweg, und
  eine geteilte Datei zwischen zwei Abbildern wäre eine Abhängigkeit für ein
  paar Hexzahlen.

  Wer die Anwendung umgestaltet, gestaltet hier mit. Der Preis ist bekannt und
  angenommen — die Alternative wäre ein drittes Paket, das beide einbinden.

  KEINE SCHRIFT AUS DEM NETZ. Ein Aufruf an eine fremde Schriftablage gäbe die
  Adresse jedes Besuchers dorthin weiter — auf einer Seite, die von sich sagt,
  sie gebe nichts heraus. Es gilt die Schrift des Systems; IBM Plex nur, wenn
  sie ohnehin installiert ist.

  ────────────────────────────────────────────────────────────────────────
  DIE FESTE SCHRIFT IST DAS ERKENNUNGSMERKMAL
  ────────────────────────────────────────────────────────────────────────

  Alles Nachprüfbare steht in Mono: Preise, Kennzahlen, Techniktafelwerte,
  Dateigrössen, Achsenbeschriftungen, Adressen. Alles Erklärende in der
  Textschrift. Der Leser lernt den Unterschied nach zwei Abschnitten und weiss
  danach, wo eine Behauptung steht und wo eine Zahl.

  Das ist keine Zierde: Das Erzeugnis ist ein Werkzeug für SSH und RDP. Die
  feste Schrift ist die Schrift seines Gegenstands.
*/

:root {
	color-scheme: light;

	--schiene: #eef0f4;
	--schiene-tief: #e2e5eb;
	--feld: #ffffff;
	--feld-erhoben: #ffffff;

	--gravur: #12151a;
	--gravur-leise: #545d6b;
	--gravur-still: #7d8794;

	--raster: #d7dbe2;
	--raster-fein: #e8ebf0;

	--aktiv: #d4901f;
	--aktiv-tief: #9c6510;
	--aktiv-hauch: #fdf1dd;

	--zusage: #2f7d6b;
	--zusage-hauch: #e6f2ef;

	/*
	 * DIESE ZWEI FEHLTEN, UND DAS WAR AN SECHS STELLEN ZU SEHEN.
	 *
	 * `--sperre` und `--sperre-hauch` wurden vom Stilblatt zehnmal benutzt —
	 * für den Abmeldeknopf, die Warnkennzahl, die Fehlermeldung und die Perle
	 * „failed" — aber nie definiert. Ein `var()` ohne Wert und ohne Rückfall
	 * macht die ganze Eigenschaft ungültig: kein Rahmen, keine Farbe, kein
	 * Hintergrund. Der Knopf blieb ein Wort auf dem Grund.
	 *
	 * Ziegelrot und nicht Signalrot: Es steht neben Bernstein, und zwei
	 * Vollfarben nebeneinander streiten.
	 */
	--sperre: #b3453a;
	--sperre-hauch: #fbeceb;

	--schwebe-1: 0 1px 2px rgb(16 20 28 / 0.06), 0 2px 8px rgb(16 20 28 / 0.05);
	--schwebe-2: 0 2px 4px rgb(16 20 28 / 0.07), 0 8px 24px rgb(16 20 28 / 0.09);

	--schrift-text: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
	--schrift-marke: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
	--schrift-fest: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	--grad-klein: 0.8125rem;
	--grad-winzig: 0.6875rem;
	--grad-text: 1rem;
	--grad-gross: 1.25rem;
	--grad-abschnitt: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
	--grad-titel: clamp(2rem, 1.3rem + 3vw, 3.25rem);

	--mass-1: 0.25rem;
	--mass-2: 0.5rem;
	--mass-3: 0.75rem;
	--mass-4: 1rem;
	--mass-6: 1.5rem;
	--mass-8: 2rem;
	--mass-12: 3rem;
	--mass-16: 4rem;
	--mass-24: 6rem;

	--kante-klein: 6px;
	--kante: 10px;
	--kante-gross: 16px;
	--kante-voll: 999px;

	--takt: 140ms;
}

/*
 * Das dunkle Schema ist GEWÄHLT und nicht umgedreht.
 *
 * Eine automatische Umkehr macht aus einem warmen Bernstein ein grelles Gelb
 * und aus dem Ziegelrot ein Braun, das man für eine Randfarbe hält. Jeder Wert
 * hier ist einzeln gesetzt und gegen den dunklen Grund geprüft.
 */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		--schiene: #0e1116;
		--schiene-tief: #090b0f;
		--feld: #171b21;
		--feld-erhoben: #1e232a;

		--gravur: #e6eaef;
		--gravur-leise: #9aa4b1;
		--gravur-still: #6b7583;

		--raster: #2b313a;
		--raster-fein: #21262d;

		--aktiv: #e8a93d;
		--aktiv-tief: #f2c477;
		--aktiv-hauch: #3b2c13;

		--zusage: #4fae96;
		--zusage-hauch: #14312a;

		/* Heller als im Hellen: Ziegelrot auf Anthrazit hat sonst zu wenig
		   Abstand zum Grund und liest sich als Braun. */
		--sperre: #e0776b;
		--sperre-hauch: #3a1a16;

		--schwebe-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.3);
		--schwebe-2: 0 2px 4px rgb(0 0 0 / 0.45), 0 8px 24px rgb(0 0 0 / 0.4);
	}
}

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

/*
 * ────────────────────────────────────────────────────────────────────────
 * `hidden` MUSS JEDE LAYOUTREGEL SCHLAGEN — DARUM `!important`
 * ────────────────────────────────────────────────────────────────────────
 *
 * Das HTML-Attribut `hidden` wirkt allein über die Regel `[hidden] { display:
 * none }` im Stylesheet des Browsers, und die hat die schwächste Priorität,
 * die es gibt. JEDE eigene `display`-Regel schlägt sie — ein Klassenselektor
 * genügt, ein ID-Selektor erst recht.
 *
 * Genau das ist hier passiert: `#kennwortweg { display: grid }` und
 * `.zweiterweg { display: grid }` hielten Kennwortfeld, Anmeldeknopf UND den
 * Passkey-Weg sichtbar, obwohl `passkey.js` das Attribut korrekt setzte. Das
 * Umschalten zwischen den Anmeldewegen tat nichts, und es sah aus wie ein
 * Fehler im Skript — gesucht wurde er dann dort.
 *
 * `!important` ist hier kein Notnagel, sondern die Bedeutung des Attributs:
 * `hidden` sagt „dieses Element ist gerade nicht Teil der Seite". Das ist eine
 * Aussage über den Zustand und keine über das Layout, und deshalb darf keine
 * Layoutregel dagegen gewinnen.
 */
[hidden] {
	display: none !important;
}

body {
	margin: 0;
	background: var(--schiene);
	color: var(--gravur);
	font-family: var(--schrift-text);
	font-size: var(--grad-text);
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
}

a {
	color: var(--aktiv-tief);
}

@media (prefers-color-scheme: dark) {
	a { color: var(--aktiv); }
}

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

.mitte {
	max-width: 68rem;
	margin: 0 auto;
	padding: 0 var(--mass-6);
}

/*
 * Wer mit der Tastatur ankommt, muss sonst durch die ganze Kopfzeile — und
 * zwar auf jeder Seite wieder. Sichtbar wird der Verweis erst im Fokus.
 */
.ueberspringen {
	position: absolute;
	left: var(--mass-4);
	top: -4rem;
	z-index: 100;
	padding: var(--mass-2) var(--mass-4);
	background: var(--feld);
	border: 1px solid var(--aktiv);
	border-radius: var(--kante);
	text-decoration: none;
	transition: top var(--takt);
}

.ueberspringen:focus-visible {
	top: var(--mass-4);
}

/* Wer das nicht will, bekommt es nicht. Gilt für alles unten. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
   DIE ÖFFENTLICHE SEITE
   ═════════════════════════════════════════════════════════════════════════ */

/* --- Kopf ---------------------------------------------------------------- */

/*
 * Der Kopf bleibt oben stehen.
 *
 * Die Seite ist lang, und der Weg zum Preis ist der Grund, aus dem sie
 * existiert. Wer unten bei der Techniktafel steht, soll nicht scrollen müssen,
 * um ihn wiederzufinden.
 */
header.kopf {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--schiene) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--raster-fein);
}

.kopfzeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mass-4);
	min-height: 3.75rem;
}

.signet {
	display: inline-flex;
	align-items: center;
	gap: var(--mass-2);
	color: var(--gravur);
	text-decoration: none;
}

.marke {
	font-family: var(--schrift-marke);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--grad-klein);
}

.kopfrest {
	display: flex;
	align-items: center;
	gap: var(--mass-4);
}

/* Die Ankerverweise verschwinden auf schmalen Geräten: Dort zählt der Weg zum
   Preis, nicht die Gliederung. */
.kopflink {
	color: var(--gravur-leise);
	text-decoration: none;
	font-size: var(--grad-klein);
}

.kopflink:hover {
	color: var(--gravur);
}

/*
 * Der Umschalter zeigt BEIDE Sprachen. „English" allein beantwortet nicht,
 * worauf man gerade steht.
 */
.sprachwahl {
	display: inline-flex;
	border: 1px solid var(--raster);
	border-radius: var(--kante-voll);
	overflow: hidden;
}

.sprachwahl a {
	padding: 0.2rem var(--mass-3);
	font-family: var(--schrift-fest);
	font-size: var(--grad-winzig);
	color: var(--gravur-still);
	text-decoration: none;
	transition: background var(--takt), color var(--takt);
}

.sprachwahl a:hover {
	color: var(--gravur);
}

.sprachwahl a.hier {
	background: var(--gravur);
	color: var(--feld);
}

.kopfknopf {
	padding: var(--mass-2) var(--mass-4);
	background: var(--aktiv);
	border: 1px solid var(--aktiv);
	border-radius: var(--kante);
	color: #1a1206;
	font-size: var(--grad-klein);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: box-shadow var(--takt);
}

.kopfknopf:hover {
	box-shadow: var(--schwebe-2);
}

@media (prefers-color-scheme: dark) {
	.kopfknopf { color: #1a1206; }
}

@media (width <= 52rem) {
	.kopflink { display: none; }
}

/* --- Aufschlag ----------------------------------------------------------- */

/*
 * ZWEISPALTIG: Aussage links, Bildschirmabzug rechts.
 *
 * Vorher stand alles mittig untereinander und das Bild kam nach drei Absätzen.
 * Wer eine Verbindungsverwaltung sucht, will als Erstes sehen, wie sie
 * aussieht — der Abzug ist das stärkste Argument der Seite.
 */
.aufschlag {
	padding: var(--mass-16) 0 var(--mass-12);
	border-bottom: 1px solid var(--raster-fein);
}

.aufschlagraster {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--mass-12);
	align-items: center;
}

.aufschlagtext h1 {
	margin: 0;
	font-size: var(--grad-titel);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 600;
	text-wrap: balance;
}

.aufschlagtext .unterzeile {
	margin: var(--mass-4) 0 0;
	font-size: var(--grad-gross);
	line-height: 1.35;
	color: var(--aktiv-tief);
	font-weight: 500;
	text-wrap: balance;
}

@media (prefers-color-scheme: dark) {
	.aufschlagtext .unterzeile { color: var(--aktiv); }
}

.aufschlagtext .beschreibung {
	margin: var(--mass-6) 0 0;
	max-width: 34rem;
	color: var(--gravur-leise);
}

.knopfreihe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mass-3);
	margin-top: var(--mass-8);
}

/*
 * Die drei Fakten in fester Schrift, mit einem Haken davor.
 *
 * Sie stehen absichtlich in derselben Schrift wie die Technikwerte weiter
 * unten: Was nachprüfbar ist, sieht auf dieser Seite gleich aus.
 */
.fakten {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mass-2) var(--mass-6);
	margin: var(--mass-8) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--schrift-fest);
	font-size: var(--grad-winzig);
	color: var(--gravur-still);
}

.fakten li {
	display: flex;
	align-items: center;
	gap: var(--mass-2);
}

.fakten li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--zusage);
	flex: none;
}

/* Der Abzug sitzt leicht erhoben und angeschnitten: Er ist ein Fenster, kein
   Bild in einem Rahmen. */
.aufschlagbild img {
	display: block;
	width: 100%;
	border: 1px solid var(--raster);
	border-radius: var(--kante-gross);
	box-shadow: var(--schwebe-2);
}

@media (width <= 60rem) {
	.aufschlagraster {
		grid-template-columns: 1fr;
		gap: var(--mass-8);
	}

	.aufschlag {
		padding-top: var(--mass-12);
	}
}

/* --- Abschnitte ---------------------------------------------------------- */

.abschnitt {
	padding: var(--mass-24) 0 0;
	scroll-margin-top: 5rem;
}

.abschnitt h2 {
	margin: 0 0 var(--mass-8);
	font-size: var(--grad-abschnitt);
	line-height: 1.2;
	letter-spacing: -0.015em;
	font-weight: 600;
}

.abschnittstext {
	margin: calc(var(--mass-8) * -1) 0 var(--mass-8);
	max-width: 46rem;
	color: var(--gravur-leise);
}

/* Fliesstext in einer Karte. `letzter` nimmt den Abstand unten weg, wenn
   nichts mehr folgt — sonst hat die Karte unten mehr Luft als oben. */
.fliess {
	margin: 0 0 var(--mass-6);
	max-width: 46rem;
	color: var(--gravur-leise);
}

.fliess.letzter {
	margin-bottom: 0;
}

.karte {
	padding: var(--mass-6);
	background: var(--feld);
	border: 1px solid var(--raster-fein);
	border-radius: var(--kante-gross);
	box-shadow: var(--schwebe-1);
}

.karte h3 {
	margin: 0 0 var(--mass-3);
	font-size: var(--grad-text);
	font-weight: 600;
}

.karte p {
	margin: 0;
	color: var(--gravur-leise);
}

/* --- Merkmale ------------------------------------------------------------ */

.merkmale {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: var(--mass-4);
}

/* Eine Karte hebt sich beim Zeigen um EINEN Pixel. Alles darüber wirkt wie
   ein Knopf, und die Karte ist keiner. */
.merkmal {
	transition: transform var(--takt), box-shadow var(--takt);
}

.merkmal:hover {
	transform: translateY(-1px);
	box-shadow: var(--schwebe-2);
}

/*
 * Das Sinnbild sitzt in einer Fläche in Bernsteinhauch.
 *
 * Ohne Fläche schwebt eine Strichzeichnung über dem Text und liest sich als
 * Fehler im Satz. Mit Fläche ist sie eine Marke am Anfang der Karte.
 */
.sinnbild {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--mass-4);
	border-radius: var(--kante);
	background: var(--aktiv-hauch);
	color: var(--aktiv-tief);
}

.sinnbild svg {
	width: 1.375rem;
	height: 1.375rem;
}

@media (prefers-color-scheme: dark) {
	.sinnbild { color: var(--aktiv); }
}

/* --- Preise -------------------------------------------------------------- */

.tarife {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--mass-4);
	align-items: start;
}

.tarif {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--mass-4);
	padding: var(--mass-8) var(--mass-6) var(--mass-6);
	background: var(--feld);
	border: 1px solid var(--raster-fein);
	border-radius: var(--kante-gross);
	box-shadow: var(--schwebe-1);
}

/*
 * EIN TARIF IST HERVORGEHOBEN, und das ist eine Auskunft.
 *
 * Drei gleich aussehende Kacheln schieben die Entscheidung auf den Leser
 * zurück, ohne ihm etwas zu sagen. Welcher hervorgehoben ist, steht in
 * `texte.go` bei den Daten — nicht hier.
 */
.tarif.empfohlen {
	border-color: var(--aktiv);
	box-shadow: var(--schwebe-2);
}

.tarifband {
	position: absolute;
	top: -0.6875rem;
	left: var(--mass-6);
	padding: 0.15rem var(--mass-3);
	background: var(--aktiv);
	border-radius: var(--kante-voll);
	color: #1a1206;
	font-family: var(--schrift-fest);
	font-size: var(--grad-winzig);
	font-weight: 600;
	white-space: nowrap;
}

.tarifkopf {
	display: grid;
	gap: 2px;
}

.tarif .name {
	font-family: var(--schrift-marke);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: var(--grad-klein);
	color: var(--gravur-still);
}

/* Der Preis in fester Schrift mit Tabellenziffern: Drei Preise untereinander
   sollen an der Kommastelle fluchten. */
.tarif .preis {
	font-family: var(--schrift-fest);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.tarif .zusatz {
	font-size: var(--grad-klein);
	color: var(--gravur-still);
}

.tarif .probe {
	padding: var(--mass-2) var(--mass-3);
	border-radius: var(--kante-klein);
	background: var(--schiene);
	font-size: var(--grad-klein);
	color: var(--gravur-leise);
	text-align: center;
}

.tarif .hauptknopf,
.tarif .nebenknopf {
	margin-top: auto;
}

.hinweis {
	margin: var(--mass-6) 0 0;
	max-width: 46rem;
	font-size: var(--grad-klein);
	color: var(--gravur-still);
}

/* --- Dateien und Anleitung ----------------------------------------------- */

.dateien {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mass-3);
	margin: 0 0 var(--mass-4);
}

/*
 * Ein Verweis auf eine Datei sieht aus wie eine Datei.
 *
 * Als blosser blauer Text unterscheidet er sich nicht von einem Verweis auf
 * einen Absatz, und niemand weiss vorher, ob etwas heruntergeladen wird.
 */
.datei {
	display: inline-flex;
	align-items: center;
	gap: var(--mass-3);
	padding: var(--mass-3) var(--mass-4);
	background: var(--schiene);
	border: 1px solid var(--raster);
	border-radius: var(--kante);
	color: var(--gravur);
	text-decoration: none;
	transition: border-color var(--takt), background var(--takt);
}

.datei::before {
	content: '';
	width: 14px;
	height: 16px;
	flex: none;
	background: currentColor;
	opacity: 0.45;
	clip-path: polygon(0 0, 65% 0, 100% 30%, 100% 100%, 0 100%);
}

.datei:hover {
	border-color: var(--aktiv);
	background: var(--aktiv-hauch);
}

.dateiname {
	font-family: var(--schrift-fest);
	font-size: var(--grad-klein);
}

.dateigroesse {
	font-size: var(--grad-winzig);
	color: var(--gravur-still);
}

/*
 * DIE SCHRITTE SIND NUMMERIERT, weil sie eine Reihenfolge haben.
 *
 * Wer den Schlüssel nach dem ersten Start erzeugt, hat einen Container, der
 * ohne ihn hochgekommen ist. Nummern an einer Liste ohne Folge wären Zierrat;
 * hier tragen sie die Information.
 */
.schritte {
	display: grid;
	gap: var(--mass-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: schritt;
}

.schritt {
	position: relative;
	counter-increment: schritt;
	padding: var(--mass-6) var(--mass-6) var(--mass-6) var(--mass-16);
	background: var(--feld);
	border: 1px solid var(--raster-fein);
	border-radius: var(--kante-gross);
	box-shadow: var(--schwebe-1);
}

.schritt::before {
	content: counter(schritt);
	position: absolute;
	left: var(--mass-6);
	top: var(--mass-6);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--aktiv-hauch);
	color: var(--aktiv-tief);
	font-family: var(--schrift-fest);
	font-size: var(--grad-klein);
	font-weight: 600;
}

@media (prefers-color-scheme: dark) {
	.schritt::before { color: var(--aktiv); }
}

.schritt h3 {
	margin: 0 0 var(--mass-2);
	font-size: var(--grad-text);
	font-weight: 600;
}

.schritt p {
	margin: 0 0 var(--mass-4);
	color: var(--gravur-leise);
}

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

@media (width <= 40rem) {
	.schritt {
		padding-left: var(--mass-6);
		padding-top: var(--mass-12);
	}
}

.befehle {
	margin: 0;
	padding: var(--mass-4);
	background: var(--schiene-tief);
	border: 1px solid var(--raster-fein);
	border-radius: var(--kante);
	overflow-x: auto;
}

.befehle code {
	font-family: var(--schrift-fest);
	font-size: var(--grad-klein);
	line-height: 1.7;
	white-space: pre;
	color: var(--gravur);
}

/*
 * Der Warnkasten trägt Farbe und einen Streifen, nicht nur fetten Text.
 *
 * Es ist der einzige Absatz der Seite, dessen Missachtung Daten kostet. Er
 * darf aussehen wie eine Warnung.
 */
.warnkasten {
	margin: var(--mass-4) 0 0;
	padding: var(--mass-4);
	border-left: 3px solid var(--sperre);
	border-radius: 0 var(--kante) var(--kante) 0;
	background: var(--sperre-hauch);
}

.warnkasten strong {
	display: block;
	margin-bottom: var(--mass-2);
	color: var(--sperre);
}

.warnkasten p {
	margin: 0;
	font-size: var(--grad-klein);
	color: var(--gravur-leise);
}

.textverweis {
	font-family: var(--schrift-fest);
	font-size: var(--grad-klein);
}

/* --- Technik ------------------------------------------------------------- */

table.technik {
	width: 100%;
	border-collapse: collapse;
	background: var(--feld);
	border: 1px solid var(--raster-fein);
	border-radius: var(--kante-gross);
	box-shadow: var(--schwebe-1);
	overflow: hidden;
}

table.technik th {
	width: 12rem;
	padding: var(--mass-4) var(--mass-6);
	border-bottom: 1px solid var(--raster-fein);
	text-align: left;
	vertical-align: top;
	font-family: var(--schrift-marke);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--grad-klein);
	font-weight: 600;
	color: var(--gravur-still);
}

table.technik td {
	padding: var(--mass-4) var(--mass-6);
	border-bottom: 1px solid var(--raster-fein);
	color: var(--gravur-leise);
}

table.technik tr:last-child th,
table.technik tr:last-child td {
	border-bottom: none;
}

/* Auf dem Telefon untereinander: Zwei Spalten von je zehn Zeichen sind keine
   Tabelle mehr. */
@media (width <= 40rem) {
	table.technik th,
	table.technik td {
		display: block;
		width: auto;
		padding: var(--mass-3) var(--mass-4);
	}

	table.technik th {
		border-bottom: none;
		padding-bottom: 0;
	}
}

/* --- Kontaktformular ----------------------------------------------------- */

.kontaktform {
	display: grid;
	gap: var(--mass-4);
	max-width: 46rem;
}

.kontaktform .paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--mass-4);
}

.kontaktform label span {
	display: block;
	margin-bottom: var(--mass-2);
	font-size: var(--grad-klein);
	font-weight: 600;
	color: var(--gravur-leise);
}

.kontaktform input,
.kontaktform textarea {
	width: 100%;
	padding: var(--mass-3);
	background: var(--schiene);
	border: 1px solid var(--raster);
	border-radius: var(--kante);
	color: var(--gravur);
	font: inherit;
}

.kontaktform textarea {
	resize: vertical;
	min-height: 8rem;
}

.kontaktform input:focus-visible,
.kontaktform textarea:focus-visible {
	outline: 2px solid var(--aktiv);
	outline-offset: 1px;
	border-color: var(--aktiv);
}

.kontaktform button {
	justify-self: start;
}

/*
 * DAS FELD SIEHT NIEMAND, und genau das ist der Zweck. Ein Mensch füllt es
 * nicht aus, weil er es nicht sieht; wer es ausfüllt, ist ein Programm.
 *
 * Nicht `display: none` — manche Programme überspringen, was so verborgen ist.
 */
.falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Fuss ---------------------------------------------------------------- */

footer {
	margin-top: var(--mass-24);
	padding: var(--mass-8) 0;
	border-top: 1px solid var(--raster-fein);
	font-size: var(--grad-klein);
	color: var(--gravur-still);
}

.fusszeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mass-4);
}

.fussrest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mass-6);
}

/* --- Das Einwilligungsband ----------------------------------------------- */

/*
 * ES LIEGT UNTEN LINKS UND NICHT ÜBER DER GANZEN BREITE.
 *
 * Ein Vollbreitband verdeckt auf einem Telefon den halben Aufschlag, und die
 * erste Begegnung mit der Seite ist dann eine Einwilligungsfrage. Als Karte in
 * der Ecke bleibt es lesbar und nimmt der Seite nichts weg.
 *
 * Es steht nur da, solange die Frage offen ist. Wer geantwortet hat — ja oder
 * nein —, sieht es nie wieder.
 */
.keksband {
	position: fixed;
	left: var(--mass-4);
	bottom: var(--mass-4);
	z-index: 30;
	width: min(24rem, calc(100vw - 2 * var(--mass-4)));
	padding: var(--mass-6);
	background: var(--feld-erhoben);
	border: 1px solid var(--raster);
	border-radius: var(--kante-gross);
	box-shadow: var(--schwebe-2);
}

.keksband h2 {
	margin: 0 0 var(--mass-2);
	font-size: var(--grad-text);
	font-weight: 600;
}

.keksband p {
	margin: 0 0 var(--mass-4);
	font-size: var(--grad-klein);
	color: var(--gravur-leise);
}

.keksband form {
	display: flex;
	gap: var(--mass-3);
}

.keksband form button {
	flex: 1;
}

/* --- Knöpfe der öffentlichen Seite --------------------------------------- */

/*
 * ZWEI KNÖPFE, UND DIE FÜLLUNG SAGT WELCHER.
 *
 *   hauptknopf  — die eine Handlung: bernstein, gefüllt
 *   nebenknopf  — die Nebenhandlung: umrandet, Tafelfarbe
 *
 * Gefüllt ist nur, was die Seite tatsächlich will.
 */
.hauptknopf,
.nebenknopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: var(--mass-3) var(--mass-6);
	border-radius: var(--kante);
	font: inherit;
	font-size: var(--grad-klein);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow var(--takt), border-color var(--takt), background var(--takt);
}

.hauptknopf {
	background: var(--aktiv);
	border: 1px solid var(--aktiv);
	color: #1a1206;
	box-shadow: var(--schwebe-1);
}

.hauptknopf:hover {
	box-shadow: var(--schwebe-2);
}

.nebenknopf {
	background: var(--feld);
	border: 1px solid var(--raster);
	color: var(--gravur);
}

.nebenknopf:hover {
	border-color: var(--aktiv);
	background: var(--aktiv-hauch);
}

.hauptknopf:active,
.nebenknopf:active {
	transform: translateY(1px);
}

.hauptknopf:focus-visible,
.nebenknopf:focus-visible {
	outline: 2px solid var(--aktiv);
	outline-offset: 2px;
}

/* ═════════════════════════════════════════════════════════════════════════
   DER VERWALTUNGSBEREICH
   ═════════════════════════════════════════════════════════════════════════ */

.verwaltungsseite {
	height: 100dvh;
	overflow: hidden;
	background: var(--schiene-tief);
}

html:has(.verwaltungsseite) {
	height: 100%;
}

.rahmen {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	height: 100dvh;
}

/* --- Die Leiste ---------------------------------------------------------- */

.leiste {
	display: flex;
	flex-direction: column;
	gap: var(--mass-6);
	padding: var(--mass-6) var(--mass-4);
	background: var(--feld);
	border-right: 1px solid var(--raster-fein);
	overflow-y: auto;
}

.leiste .signet {
	display: flex;
	align-items: center;
	gap: var(--mass-3);
	padding: 0 var(--mass-2);
	color: var(--gravur);
}

.leistenmitte {
	display: grid;
	gap: 2px;
	align-content: start;
}

/* Der Fuss klebt unten, auch wenn die Liste kurz ist. */
.leistenfuss {
	display: grid;
	gap: var(--mass-2);
	margin-top: auto;
	padding-top: var(--mass-4);
	border-top: 1px solid var(--raster-fein);
}

/*
 * Der Bereich, auf dem man steht, trägt DREI Merkmale: Fläche, Farbe und eine
 * Lasche am linken Rand. Ein einzelnes davon übersieht man beim Überfliegen.
 */
.eintrag {
	position: relative;
	padding: var(--mass-2) var(--mass-3);
	border-radius: var(--kante-klein);
	color: var(--gravur-leise);
	text-decoration: none;
	font-size: var(--grad-klein);
	transition: background var(--takt), color var(--takt);
}

.eintrag::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	border-radius: 0 2px 2px 0;
	background: var(--aktiv);
	transition: height var(--takt);
}

.eintrag:hover {
	background: var(--schiene);
	color: var(--gravur);
}

.eintrag:hover::before {
	height: 40%;
}

.eintrag.hier {
	background: var(--aktiv-hauch);
	color: var(--gravur);
	font-weight: 600;
}

.eintrag.hier::before {
	height: 60%;
}

.eintrag:focus-visible {
	outline: 2px solid var(--aktiv);
	outline-offset: -2px;
}

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

/*
 * DER INHALT IST KEINE KARTE — ER IST DER GRUND.
 *
 * Drei Tiefen, nicht vier: Grund (hier), Tafel (die Karten darauf), Erhoben
 * (Blenden). Wer eine vierte einführt, hat eine zu viel.
 */
.inhalt {
	min-height: 0;
	overflow-y: auto;
	padding: var(--mass-6) var(--mass-8) var(--mass-12);
}

/*
 * DER KOPF IST EINE ZEILE UND NUR EINE ZEILE.
 *
 * Vorher fehlte im Markup das schliessende Tag, und der gesamte Inhalt der
 * Seite lag in diesem Element: Kennzahlen, Karten, Diagramme und Tabellen
 * wurden allesamt als Flex-Elemente in EINE Zeile nebeneinander gequetscht.
 * Es sah nach einem Gestaltungsfehler aus und war ein fehlendes `</header>`.
 */
.inhaltskopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--mass-4);
	margin-bottom: var(--mass-6);
	padding-bottom: var(--mass-4);
	border-bottom: 1px solid var(--raster-fein);
}

.inhaltskopf h1 {
	margin: 0;
	font-size: var(--grad-gross);
	font-family: var(--schrift-marke);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/*
 * DIE SPANNE IST EINE ADRESSE, kein Zustand im Browser. `?tage=90` lässt sich
 * als Lesezeichen ablegen und weiterschicken.
 */
.zeitraum {
	display: inline-flex;
	border: 1px solid var(--raster);
	border-radius: var(--kante-voll);
	overflow: hidden;
}

.zeitraum a {
	padding: 0.25rem var(--mass-3);
	font-family: var(--schrift-fest);
	font-size: var(--grad-winzig);
	color: var(--gravur-still);
	text-decoration: none;
	transition: background var(--takt), color var(--takt);
}

.zeitraum a:hover {
	color: var(--gravur);
	background: var(--schiene);
}

.zeitraum a.hier {
	background: var(--gravur);
	color: var(--feld);
}

/*
 * Der Block hält die Karten eines Bereichs zusammen und gibt ihnen den
 * Abstand. Er stand im Stilblatt, aber in keiner Vorlage — die Regeln für den
 * Zwischenraum liefen deshalb ins Leere, und die Karten klebten aneinander.
 */
.block {
	display: grid;
	gap: var(--mass-4);
	align-content: start;
}

.block h3 {
	margin: 0 0 var(--mass-4);
	font-size: var(--grad-klein);
	font-family: var(--schrift-marke);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gravur-still);
	font-weight: 600;
}

.erster {
	margin-top: 0;
}

/* --- Kennzahlen ---------------------------------------------------------- */

.zahlen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	gap: var(--mass-4);
}

.zahl {
	display: grid;
	gap: 2px;
	align-content: start;
	padding: var(--mass-4) var(--mass-6);
	background: var(--feld);
	border: 1px solid var(--raster-fein);
	border-radius: var(--kante-gross);
	box-shadow: var(--schwebe-1);
}

/* Tabellenziffern: Kennzahlen stehen nebeneinander und sollen gleich breit
   sein, egal ob eine 1 oder eine 8 darin vorkommt. */
.zahl .wert {
	font-family: var(--schrift-fest);
	font-size: 1.875rem;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.zahl .marke {
	font-family: var(--schrift-marke);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: var(--grad-klein);
}

/* Die Fussnote sagt, was die Zahl bedeutet. Ohne sie ist „412" eine Zahl und
   keine Auskunft. */
.fussnote {
	margin-top: var(--mass-1);
	font-size: var(--grad-winzig);
	line-height: 1.4;
	color: var(--gravur-still);
}

/* Eine Kennzahl, die etwas meldet, trägt Farbe — aber nur, wenn sie es tut. */
.zahl.warn {
	border-color: var(--sperre);
	background: var(--sperre-hauch);
}

.zahl.warn .wert {
	color: var(--sperre);
}

.warnton {
	color: var(--sperre);
}

/*
 * DIE RICHTUNG STEHT ALS ZEICHEN DA, NICHT NUR ALS FARBE.
 *
 * Wer Rot und Grün nicht unterscheidet, liest sonst eine Zahl ohne Vorzeichen.
 * Dreieck und Vorzeichen sagen dasselbe noch einmal, ohne Farbe.
 */
.wandel {
	font-family: var(--schrift-fest);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wandel.hoch   { color: var(--zusage); }
.wandel.runter { color: var(--sperre); }
.wandel.gleich { color: var(--gravur-still); }

/* --- Das Raster ---------------------------------------------------------- */

.raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--mass-4);
	align-items: start;
}

.raster.zwei {
	grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

/* --- Tabellen ------------------------------------------------------------ */

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--grad-klein);
}

/*
 * Der Kopf bleibt beim Rollen stehen. Eine Tabelle mit hundert Zeilen, deren
 * Spaltennamen nach der zwanzigsten verschwinden, ist eine Zahlenwand.
 */
th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: var(--mass-2) var(--mass-3);
	background: var(--feld);
	border-bottom: 1px solid var(--raster);
	text-align: left;
	font-family: var(--schrift-marke);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--grad-winzig);
	font-weight: 600;
	color: var(--gravur-still);
	white-space: nowrap;
}

td {
	padding: var(--mass-2) var(--mass-3);
	border-bottom: 1px solid var(--raster-fein);
	vertical-align: top;
}

/* Zebrastreifen statt Linien allein: Bei sechs Spalten verliert das Auge sonst
   die Zeile, sobald es nach rechts wandert. */
tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--schiene) 45%, transparent);
}

tbody tr:last-child td {
	border-bottom: none;
}

/* Alles Maschinenlesbare in fester Schrift: Adressen, Pfade, Zeitstempel. */
td.fest {
	font-family: var(--schrift-fest);
	font-size: var(--grad-winzig);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

td.rechts {
	text-align: right;
}

td.leer {
	padding: var(--mass-8) var(--mass-3);
	text-align: center;
	color: var(--gravur-still);
}

/* Ein langer Browserkennzeichner darf die Tabelle nicht sprengen. */
td.kurz {
	max-width: 18rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rollbar {
	max-height: 30rem;
	overflow: auto;
	margin: 0 calc(var(--mass-6) * -1) calc(var(--mass-6) * -1);
	padding: 0 var(--mass-6) var(--mass-6);
}

/* --- Diagramme ----------------------------------------------------------- */

/*
 * EINE FARBE JE DIAGRAMM, NICHT EINE JE BALKEN.
 *
 * Jedes Diagramm zeigt EINE Messgrösse. Farbe trägt dann keine Information —
 * die Länge tut es. Balken verschieden einzufärben behauptet eine Einteilung,
 * die es nicht gibt, und beim nächsten Filter wechseln alle die Farbe, ohne
 * dass sich etwas geändert hätte.
 */

.balkenliste {
	display: grid;
	gap: var(--mass-2);
}

.balkenzeile {
	display: grid;
	grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 3rem 2.5rem;
	align-items: center;
	gap: var(--mass-3);
	font-size: var(--grad-klein);
}

.balkenname {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--gravur-leise);
}

/* Die Bahn zeigt, wovon der Balken ein Teil ist. Ohne sie schwebt er, und man
   sieht nicht, wie viel noch fehlt. */
.balkenbahn {
	height: 0.625rem;
	background: var(--schiene);
	border-radius: var(--kante-voll);
	overflow: hidden;
}

.balken {
	display: block;
	height: 100%;
	min-width: 3px;
	background: var(--aktiv);
	border-radius: var(--kante-voll);
}

.balkenzahl {
	font-family: var(--schrift-fest);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.balkenanteil {
	font-family: var(--schrift-fest);
	font-size: var(--grad-winzig);
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--gravur-still);
}

.saeulen {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	min-height: 11rem;
}

.saeule {
	display: grid;
	grid-template-rows: 1rem 1fr 1.25rem;
	align-items: end;
	justify-items: center;
	flex: 1;
	min-width: 0;
	height: 11rem;
}

/* Nur der Spitzenwert bekommt eine Zahl. Eine Zahl über jeder Säule ergibt
   eine Zahlenwand, durch die man das Diagramm nicht mehr sieht. */
.saeulenzahl {
	font-family: var(--schrift-fest);
	font-size: var(--grad-winzig);
	font-variant-numeric: tabular-nums;
	color: var(--gravur-still);
	line-height: 1;
}

/* Die Bahn gibt jeder Säule dieselbe Grundlinie — ohne sie stehen sie auf dem
   Kartenrand und man sieht nicht, wo null ist. */
.saeulenbahn {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	border-bottom: 1px solid var(--raster);
}

.saeulenwert {
	width: 100%;
	min-height: 2px;
	background: var(--aktiv);
	/* Oben gerundet, unten flach: Die Säule sitzt auf der Nulllinie auf. */
	border-radius: 4px 4px 0 0;
	transition: background var(--takt);
}

.saeule:hover .saeulenwert {
	background: var(--aktiv-tief);
}

.saeulenmarke {
	font-family: var(--schrift-fest);
	font-size: var(--grad-winzig);
	color: var(--gravur-still);
	white-space: nowrap;
	line-height: 1.2;
}

.leerzeile {
	margin: 0;
	padding: var(--mass-8) 0;
	text-align: center;
	font-size: var(--grad-klein);
	color: var(--gravur-still);
}

/* --- Perlen und Meldungen ------------------------------------------------ */

.perle {
	display: inline-block;
	padding: 0.1rem var(--mass-2);
	border-radius: var(--kante-voll);
	font-family: var(--schrift-fest);
	font-size: var(--grad-winzig);
	white-space: nowrap;
}

.perle.zusage {
	background: var(--zusage-hauch);
	color: var(--zusage);
}

.perle.sperre {
	background: var(--sperre-hauch);
	color: var(--sperre);
}

.meldung {
	margin: 0 0 var(--mass-4);
	padding: var(--mass-3) var(--mass-4);
	border-radius: var(--kante);
	font-size: var(--grad-klein);
}

.meldung.zusage {
	background: var(--zusage-hauch);
	color: var(--zusage);
	border: 1px solid var(--zusage);
}

.meldung.sperre {
	background: var(--sperre-hauch);
	color: var(--sperre);
	border: 1px solid var(--sperre);
}

.stille {
	color: var(--gravur-still);
	font-size: var(--grad-klein);
}

.kleiner {
	font-size: var(--grad-winzig);
	word-break: break-all;
}

/* --- Knöpfe des Verwaltungsbereichs -------------------------------------- */

/*
 * DIE FARBE FOLGT DER FOLGE, NICHT DEM KNOPF.
 *
 *   haupt   — die eine Handlung der Maske: bernstein, gefüllt
 *   sperre  — nimmt etwas weg: ziegelrot, umrandet
 *   still   — Nebensächliches: Tafelfarbe, umrandet
 *
 * Gefüllt ist nur, was tatsächlich geschieht.
 */
.knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mass-2);
	min-height: 2.4rem;
	padding: var(--mass-2) var(--mass-6);
	border-radius: var(--kante);
	font: inherit;
	font-size: var(--grad-klein);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--takt), color var(--takt), border-color var(--takt);
}

.knopf:active {
	transform: translateY(1px);
}

.knopf.haupt {
	background: var(--aktiv);
	border: 1px solid var(--aktiv);
	color: #1a1206;
	box-shadow: var(--schwebe-1);
}

.knopf.haupt:hover {
	box-shadow: var(--schwebe-2);
}

/*
 * `still` ist Tafelfarbe PLUS Rahmen — nicht nur Fläche.
 *
 * Im Fuss der Leiste liegt dieselbe Farbe darunter; ohne Rahmen verschwindet
 * der Knopf und übrig bleibt ein Wort.
 */
.knopf.still {
	background: var(--schiene);
	border: 1px solid var(--raster);
	color: var(--gravur);
	text-decoration: none;
}

.knopf.still:hover {
	border-color: var(--aktiv);
	color: var(--aktiv-tief);
}

@media (prefers-color-scheme: dark) {
	.knopf.still:hover { color: var(--aktiv); }
}

.knopf.sperre {
	background: var(--sperre-hauch);
	border: 1px solid var(--sperre);
	color: var(--sperre);
}

.knopf.sperre:hover {
	background: var(--sperre);
	color: var(--feld);
}

.knopf.breit {
	width: 100%;
}

.knopf:focus-visible {
	outline: 2px solid var(--aktiv);
	outline-offset: 2px;
}

/* --- Masken -------------------------------------------------------------- */

.maske {
	display: grid;
	gap: var(--mass-4);
	max-width: 44rem;
}

.maske .paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--mass-4);
}

.maske label span {
	display: block;
	margin-bottom: var(--mass-2);
	font-size: var(--grad-klein);
	font-weight: 600;
	color: var(--gravur-leise);
}

.maske input {
	width: 100%;
	padding: var(--mass-2) var(--mass-3);
	background: var(--schiene);
	border: 1px solid var(--raster);
	border-radius: var(--kante);
	color: var(--gravur);
	font: inherit;
	font-size: var(--grad-klein);
}

.maske input:focus-visible {
	outline: 2px solid var(--aktiv);
	outline-offset: 1px;
	border-color: var(--aktiv);
}

/* Der Knopf steht auf eigener Zeile, links. Rechtsbündig sucht ihn das Auge
   am Ende einer Zeile, die es gar nicht gelesen hat. */
.maskenfuss {
	display: flex;
	gap: var(--mass-3);
	padding-top: var(--mass-2);
	border-top: 1px solid var(--raster-fein);
}

.anhang {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mass-3);
	margin-top: var(--mass-4);
	padding-top: var(--mass-4);
	border-top: 1px solid var(--raster-fein);
}

.anhang input {
	flex: 1;
	min-width: 12rem;
	padding: var(--mass-2) var(--mass-3);
	background: var(--schiene);
	border: 1px solid var(--raster);
	border-radius: var(--kante);
	color: var(--gravur);
	font: inherit;
	font-size: var(--grad-klein);
}

.anhang input:focus-visible {
	outline: 2px solid var(--aktiv);
	outline-offset: 1px;
	border-color: var(--aktiv);
}

/* --- Der zweite Faktor --------------------------------------------------- */

.zweifaktor {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--mass-8);
	align-items: start;
}

/* Das QR-Bild bekommt eine weisse Fläche darunter — auch in der dunklen
   Fassung. Ein Code auf Anthrazit liest keine Kamera. */
.zweifaktor img {
	padding: var(--mass-3);
	background: #ffffff;
	border-radius: var(--kante);
}

.zweifaktortext {
	display: grid;
	gap: var(--mass-4);
}

.zweifaktortext p {
	margin: 0;
}

/* Der Code zum Abtippen: fest, gross genug, in Gruppen lesbar. */
.geheimnis code {
	display: inline-block;
	padding: var(--mass-2) var(--mass-3);
	background: var(--schiene);
	border: 1px solid var(--raster);
	border-radius: var(--kante-klein);
	font-family: var(--schrift-fest);
	font-size: var(--grad-text);
	letter-spacing: 0.12em;
	word-break: break-all;
}

@media (width <= 44rem) {
	.zweifaktor {
		grid-template-columns: 1fr;
		gap: var(--mass-6);
	}
}

/* --- Die Anmeldung ------------------------------------------------------- */

/*
 * Sie steht allein auf dem Grund, mittig, ohne Leiste. Es gibt hier nichts zu
 * navigieren — es gibt eine Sache zu tun.
 */
.anmeldung {
	display: grid;
	gap: var(--mass-4);
	width: min(24rem, calc(100vw - 2 * var(--mass-4)));
	margin: 12vh auto;
	padding: var(--mass-8);
	background: var(--feld);
	border: 1px solid var(--raster-fein);
	border-radius: var(--kante-gross);
	box-shadow: var(--schwebe-2);
}

.anmeldemarke {
	display: flex;
	align-items: center;
	gap: var(--mass-3);
	margin-bottom: var(--mass-2);
	color: var(--gravur);
}

.anmeldung label span {
	display: block;
	margin-bottom: var(--mass-2);
	font-size: var(--grad-klein);
	font-weight: 600;
	color: var(--gravur-leise);
}

.anmeldung input {
	width: 100%;
	padding: var(--mass-3);
	background: var(--schiene);
	border: 1px solid var(--raster);
	border-radius: var(--kante);
	color: var(--gravur);
	font: inherit;
}

.anmeldung input:focus-visible {
	outline: 2px solid var(--aktiv);
	outline-offset: 1px;
	border-color: var(--aktiv);
}

#kennwortweg,
.zweiterweg {
	display: grid;
	gap: var(--mass-4);
}

/* Der Rückweg zum Kennwort ist ein Verweis, kein Knopf: Er ist die zweite
   Wahl, und zwei gleich schwere Knöpfe übereinander sind eine Frage. */
.zurueckknopf {
	background: none;
	border: none;
	padding: 0;
	color: var(--gravur-still);
	font: inherit;
	font-size: var(--grad-klein);
	text-decoration: underline;
	cursor: pointer;
}

.zurueckknopf:hover {
	color: var(--gravur);
}

/* --- Der Verwaltungsbereich auf schmalen Geräten ------------------------- */

/*
 * Unter 60rem wird aus den zwei Spalten eine: Die Leiste legt sich als Zeile
 * darüber, und der Inhalt bekommt die volle Breite. Eine 15rem-Leiste neben
 * einer Tabelle mit sechs Spalten lässt für die Tabelle nichts übrig.
 */
@media (width <= 60rem) {
	.verwaltungsseite {
		height: auto;
		overflow: visible;
	}

	.rahmen {
		grid-template-columns: 1fr;
		height: auto;
	}

	.leiste {
		border-right: none;
		border-bottom: 1px solid var(--raster-fein);
	}

	.leistenmitte {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		overflow-x: auto;
		gap: var(--mass-2);
	}

	.leistenfuss {
		grid-auto-flow: column;
		margin-top: 0;
	}

	.inhalt {
		overflow-y: visible;
		padding: var(--mass-6) var(--mass-4) var(--mass-12);
	}
}

/* --- Die Welle ----------------------------------------------------------- */

/*
 * DAS SVG WIRD IN DIE BREITE GEZOGEN, die Beschriftung nicht.
 *
 * `preserveAspectRatio="none"` streckt den Zeichenbereich auf die Kartenbreite
 * — praktisch für die Kurve, tödlich für alles andere darin: Ein Kreis würde
 * zur Ellipse, ein Buchstabe zum Zerrbild. Punkt und Zahl liegen darum als
 * HTML DARÜBER und werden über Prozentwerte gesetzt, die `welle.go` rechnet.
 */
.welle {
	margin: 0;
}

.wellenbild {
	position: relative;
	height: 11rem;
}

.wellenbild svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wellenflaeche {
	fill: url(#wellenverlauf);
}

/*
 * `vector-effect` hält die Strichstärke konstant. Ohne das wäre die Linie
 * waagerecht dünn und senkrecht dick — dieselbe Streckung, die den Rest
 * verzerrt, trifft sonst auch sie.
 */
.wellenlinie {
	fill: none;
	stroke: var(--aktiv);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Die Zeigerfelder sind unsichtbar und berühren sich lückenlos: Jede Stelle
   der Karte trifft einen Tag, nicht nur der Punkt selbst. */
.wellenfeld {
	fill: transparent;
}

.wellenfeld:hover {
	fill: color-mix(in srgb, var(--aktiv) 9%, transparent);
}

/* Ein Element ohne Ausdehnung, das genau auf dem Datenpunkt sitzt. Erst seine
   Kinder haben eine Grösse und hängen sich daran auf. */
.wellenspitze {
	position: absolute;
	width: 0;
	height: 0;
}

.wellenknoten {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--aktiv);
	/* Ein Ring in Tafelfarbe trennt den Punkt von der Linie darunter. */
	box-shadow: 0 0 0 2px var(--feld);
}

.wellenzahl {
	position: absolute;
	left: 0;
	bottom: 0.75rem;
	transform: translateX(-50%);
	font-family: var(--schrift-fest);
	font-size: var(--grad-winzig);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--gravur);
	white-space: nowrap;
}

.wellenachse {
	position: relative;
	height: 1.25rem;
	margin-top: var(--mass-2);
	border-top: 1px solid var(--raster-fein);
	padding-top: var(--mass-2);
}

.wellenachse span {
	position: absolute;
	transform: translateX(-50%);
	font-family: var(--schrift-fest);
	font-size: var(--grad-winzig);
	color: var(--gravur-still);
	white-space: nowrap;
}

/* Erste und letzte Marke werden nach innen gezogen. Zentriert stünden sie zur
   Hälfte ausserhalb der Karte. */
.wellenachse span:first-child {
	transform: none;
}

.wellenachse span:last-child {
	transform: translateX(-100%);
}

/* --- Die Profilseite ----------------------------------------------------- */

/*
 * Drei Abschnitte unter einer Überschrift, die bis zum Rand durchläuft.
 *
 * Konto, zweiter Faktor und Passkeys beantworten dieselbe Frage — wie komme
 * ich hier herein — und gehören darum auf eine Seite. Getrennt werden sie
 * durch die Linie, nicht durch einen weiteren Rahmen: Karten in Karten machen
 * jede Kante bedeutungslos.
 */
.tafel {
	display: grid;
	gap: var(--mass-4);
	scroll-margin-top: var(--mass-8);
}

.tafel h2 {
	display: flex;
	align-items: center;
	gap: var(--mass-3);
	margin: var(--mass-4) 0 0;
	font-size: var(--grad-klein);
	font-family: var(--schrift-marke);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gravur-still);
	font-weight: 600;
}

.tafel h2::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--raster-fein);
}

/* Ein Benutzername ist keine Kennzahl — er braucht Platz für Buchstaben, nicht
   die Grösse einer Zahl. */
.zahl .wert.klein {
	font-size: 1.25rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* Trennt im Formular den Namen von der Kennwortänderung: darüber, was immer
   gilt, darunter, was man auch leer lassen kann. */
.maskentrenner {
	width: 100%;
	margin: var(--mass-2) 0;
	border: none;
	border-top: 1px solid var(--raster-fein);
}

/*
 * Der Passkey-Weg blendet sich ein, wenn ein Name dasteht.
 *
 * Die Klasse setzt `passkey.js`. Ohne sie erschiene der Knopf schlagartig
 * unter dem Namensfeld, und es sähe aus, als wäre etwas umgesprungen.
 */
.kommt {
	animation: einblenden var(--takt) ease-out;
}

@keyframes einblenden {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Die zweite Stufe der Anmeldung -------------------------------------- */

/*
 * Eine Zeile, die sagt, wo man steht.
 *
 * Ohne sie sieht die zweite Stufe aus wie eine Anmeldung, die von vorn
 * beginnt, und man fragt sich, ob das Kennwort durchging.
 */
.stufenschritt {
	display: flex;
	align-items: center;
	gap: var(--mass-2);
	margin: 0;
	font-size: var(--grad-klein);
	color: var(--gravur-leise);
}

.stufenperle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	border-radius: 50%;
	font-size: var(--grad-winzig);
	font-weight: 700;
}

.stufenperle.erledigt {
	background: var(--zusage-hauch);
	color: var(--zusage);
}

/* Der Rückweg steht unter der Karte, nicht darin: Er gehört nicht zur
   Handlung, sondern daneben. */
.anmeldungzurueck {
	display: flex;
	justify-content: center;
	margin-top: calc(var(--mass-6) * -1);
}

/*
 * Eine Perle für Vorgänge, die weder gut noch schlecht sind: der
 * Zugangswechsel. Grün hiesse „alles in Ordnung", rot „jemand griff an" —
 * beides wäre eine Wertung, die dem Betreiber nicht zusteht.
 */
.perle.hinweis {
	background: var(--aktiv-hauch);
	color: var(--aktiv-tief);
}

@media (prefers-color-scheme: dark) {
	.perle.hinweis { color: var(--aktiv); }
}