/* ═══════════════════════════════════════════════════════════
   Basis: Reset, Raster, Anzeigentypografie, Filmkorn, Reveal.
   Werte aus design/final/index.html.
   ═══════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

html {
	scroll-behavior: smooth;
	/* Der feste Kopf darf Sprungziele nicht verdecken. */
	scroll-padding-top: calc(var(--kopf) + var(--s1));
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--pa);
	color: var(--tx);
	overflow-x: hidden;
	font: var(--gw-normal) var(--t-basis) / 1.55 var(--sans);
	letter-spacing: var(--lw-text);
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

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

button {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

ul,
ol { list-style: none; }

/* ── Keine Trennstriche, nirgends ────────────────────────── */
/* Die Startseite trennte "Wohlfuehl-appartements". Ein
   Trennstrich mitten in einem Markennamen liest sich wie ein
   Fehler, und automatische Trennung trifft im Deutschen oft
   daneben. Lange Woerter werden umformuliert, nicht getrennt. */
h1, h2, h3, p, li, td, th, dt, dd, summary {
	hyphens: none;
	-webkit-hyphens: none;
	overflow-wrap: break-word;
	word-break: normal;
}

/* Ueberschriften brechen auf gleich lange Zeilen statt auf eine
   lange und ein Restwort. */
/* 400 fuer alles Grosse, Entscheidung vom 3. September; der Browser
   gaebe einer H1 sonst 700, und das sah auf 64 Seiten aus wie eine
   andere Website. Instrument Sans 400 mit enger Sperrung ist die
   ganze Typografie dieser Seite. */
h1, h2, h3 { text-wrap: balance; font-weight: var(--gw-normal); }
/* Absaetze brechen ohne Witwe und laufen nicht ueber 68 Zeichen,
   sonst findet das Auge die naechste Zeile nicht. Die Farbe steht
   nicht hier: ein Absatz im Fuss oder auf einem Foto erbt Weiss. */
p {
	text-wrap: pretty;
	max-width: 68ch;
}

/* Werte und Aufzaehlungen brechen wie Absaetze. Sie standen bisher
   ohne Regel da, und im Englischen blieb regelmaessig ein Wort in
   der letzten Zeile stehen: englische Woerter sind laenger, und
   derselbe Satz bricht anders als auf Deutsch. */
dd, dt, li {
	text-wrap: pretty;
}

/* Ein Vorspann ist kurz genug, dass balance greift: er bricht auf
   gleich lange Zeilen statt auf eine lange und ein Restwort.
   pretty sieht nur die letzten Zeilen und half hier nicht. */
.lead {
	text-wrap: balance;
}

/* Der Abstand einer Ueberschrift nach unten. Vorher stand er
   verstreut in den Bausteinen und lag zwischen elf und
   achtunddreissig Pixeln; wo er gross war, riss er die
   Ueberschrift von ihrem eigenen Text ab. Sechzehn Pixel, ueberall.
   Ein Absatz oder Lead direkt darunter setzt nichts obendrauf,
   sonst addierten sich zwei Abstaende. */
h2 { margin-bottom: var(--s3); }
h2 + p,
h2 + .lead { margin-top: 0; }

/* hidden muss staerker sein als jede display-Regel. Ohne das
   bleibt ein per Skript verstecktes Feld sichtbar, sobald es
   irgendwo display:flex hat. */
[hidden] { display: none !important; }

/* ── Satzspiegel ────────────────────────────────────────── */
.w {
	max-width: var(--breit);
	margin: 0 auto;
	padding-inline: var(--m);
}

/* Abstaende der Abschnitte immer als padding-block. Die Kurzform
   padding ueberschreibt das padding-inline von .w, und die
   Sektion laeuft randlos aus dem Layout. */

/* ── Anzeigentypografie ─────────────────────────────────── */
/* Eine Familie, deshalb traegt hier die Laufweite, was vorher die
   Serife getragen hat: Gewicht 400, eng gesetzt, Zeile 1,0. Nie
   600, nie 700: fett und riesig las sich billig. */
.dis {
	font-weight: var(--gw-normal);
	letter-spacing: var(--lw-dis);
	line-height: 1;
}
/* Der zweite Teil einer Ueberschrift steht nicht kursiv, sondern
   gedaempft. Gleiche Groesse, gleiches Gewicht, ruhiger. */
.dis em {
	font-style: normal;
	font-weight: var(--gw-normal);
	color: var(--mu);
}
.d1 { font-size: var(--t-d1); }
.d2 { font-size: var(--t-d2); }

/* Der Vorspann steht in Textfarbe. Grau war er nicht zu lesen. */
.lead {
	font-size: var(--t-lead);
	line-height: 1.55;
	letter-spacing: -.012em;
	color: var(--tx);
}

/* Kicker: nie blau. Grau, klein, gesperrt. Ein Bauteil, eine
   Fassung, ueberall: 11 Pixel, .16em, --mu, Grossbuchstaben, ohne
   eigenen Abstand. Wer ihn in einem Block anders braucht, braucht
   ihn nicht anders. Kein ".block p" darf ihn treffen: genau so kam
   er auf 36 Seiten zu 15 Pixeln in Schwarz, aus ".abschnittskopf p".
   Der Beitext hat deshalb seine eigene Klasse, .beitext. */
.kick {
	margin: 0;
	padding: 0;
	font-size: var(--t-kick);
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mu);
	font-weight: var(--gw-halb);
}

/* Der Abstand vom Kicker nach unten ist --s2 und liegt am naechsten
   Element, wie in der Referenz (.h2{margin-top:var(--s2)}). Beide
   Formen des Abschnittskopfs: mit Ueberschrift, oder ohne, dann
   folgt der Lead, der Fliesstext oder der Hinweis der Preisseite. */
/* Auf Foto und auf dunkler Platte steht der Kicker in einem
   einzigen Weiss, --mu-hell. Das weiss aber nicht der Kicker,
   sondern die Umgebung: .ende und .platte--dunkel setzen --mu bei
   sich auf --mu-hell, und alles darin, was --mu
   sagt, wird hell. Der Kicker sagt ueberall dasselbe. */

/* Dasselbe nach der Brotkrume im Seitenkopf: Referenz .kopf h1
   {margin-top:var(--s2)}. */
.brotkrumen + h1,
.kick + h1,
.kick + h2,
.kick + h3,
.kick + .lead,
.kick + .fliesstext,
.kick + .willkommen__lead,
.kick + .hin {
	margin-top: var(--s2);
}

/* ── Der Abschnitt ──────────────────────────────────────── */
/* Jedes Kind von main ist ein Abschnitt und hat nur oben Abstand,
   --abschnitt, als Polster, damit ein getoenter Abschnitt (.hell)
   seine Farbe bis zur Grenze traegt. Kein Abschnitt hat unten
   etwas, keiner eine Mindesthoehe. Bis zum 16. September setzte
   jeder Blocktyp sein eigenes Polster, das Inventar zaehlte 13 bis
   16 Fassungen.

   Ausgenommen: die Koepfe (header.kopf, .hero, .kopf-papier),
   die einzige Ausnahme fuer eine Mindesthoehe, mit eigenem Innen-
   abstand; und das Abschlussband (.ende), dessen Foto sein Polster
   fuellen wuerde, deshalb traegt es den Abstand als Rand. */
.hauptteil > *:not(header):not(.hero):not(.kopf-papier):not(.ende):not(script):not(style) {
	padding-top: var(--abschnitt);
}
.hauptteil > .ende { margin-top: var(--abschnitt); }

/* Der Fuss ist der naechste Abschnitt und traegt seinen Abstand
   selbst. Auf das Abschlussband folgt er ohne Papier dazwischen,
   dunkel auf dunkel. */
body > footer { margin-top: var(--abschnitt); }
main:has(> .ende:last-child) ~ footer { margin-top: 0; }

/* ── Der Kopf eines Abschnitts ──────────────────────────── */
/* Kicker und Ueberschrift links, Beitext oder Textverweis rechts
   unten, beide auf einer Grundlinie. Aus 03_Design/final/idee-start.html.

   Der Name traegt das Praefix nicht, weil der Kopf allen Bausteinen
   gehoert. .kopf ist vergeben, siehe CLAUDE.md: die Klasse gehoert
   dem Seitenkopf und braechte hier weisse Schrift auf einen dunklen
   Verlauf. */
.abschnittskopf {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--s5);
	/* Oben nichts, den Abstand traegt der Abschnitt. Unten --s5,
	   nicht --s4: unter dem Kopf steht auf drei Abschnitten
	   unmittelbar ein Bildraster, und der Verweis rechts stand mit
	   neunzehn Pixeln an der Bildkante. */
	padding-block: 0 var(--s5);
}
/* Der Titel im Abschnittskopf, aus kr_abschnittskopf(). Werte aus
   idee-soelden.html: .h2 und h1,h2,h3. Eine Groesse fuer alle
   Seiten, die Startseite hat keine eigene. */
.abschnittskopf__titel {
	/* Ueberschrift zu Absatz --s3; als letztes Kind, etwa links im
	   zweispaltigen Rahmen, kein Abstand nach unten. */
	margin: 0 0 var(--s3);
	font-size: var(--t-abschnitt);
	font-weight: var(--gw-normal);
	letter-spacing: -.03em;
	line-height: 1.05;
}
.abschnittskopf__titel:last-child { margin-bottom: 0; }
.abschnittskopf__titel em {
	font-style: normal;
	font-weight: var(--gw-normal);
	color: var(--mu);
}
/* Textfarbe, nicht grau. Die Referenz daempft diesen Beitext, aber
   er hat drei Zeilen, und mehr als eine Zeile in --mu ist nicht zu
   lesen: AUFTRAG_STIMME.md, Commit 5. Vom Titel trennt ihn die
   Groesse, fuenfzehn Pixel gegen vierunddreissig. */
.beitext {
	max-width: 44ch;
	color: var(--tx);
	font-size: .9375rem;
}

@media (max-width: 61.25rem) {
	.abschnittskopf {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s2);
		/* --s4, nicht --s3: unter dem Kopf steht auf /buchen/ das
		   Groessenraster, und der Beitext stand mit 18 Pixeln an der
		   ersten Bildkante. Raster mit Text am Handy: --s4. */
		padding-block: 0 var(--s4);
	}
}

/* ── Die Liste aus Begriff und Wert, drei Formen ────────── */
/* Aus kr_liste() in inc/bauteile.php. Ein Bauteil je Aufgabe, eine
   Fassung je Bauteil; die zehn dl-Klassen der Bloecke sind weg.
   Der Abstand nach oben liegt nicht hier: den traegt der
   Abschnittskopf oder der Text davor, siehe CLAUDE.md, "ein Abstand
   hat genau einen Traeger". */
.liste {
	/* Der Abstand nach oben gehoert zum Paar: nach Text --s4, nach
	   einem Kicker --s2, nach einer Ueberschrift nichts (sie traegt
	   --s3). Steht die Liste allein in einer Rasterzelle, traegt die
	   Fuge des Rasters den Abstand, und die Liste nichts. */
	margin: 0;
	list-style: none;
	border-top: 1px solid var(--ln);
	font-size: .9375rem;
}
p + .liste, ul + .liste, ol + .liste { margin-top: var(--s4); }
.kick + .liste { margin-top: var(--s2); }
.liste > div { border-bottom: 1px solid var(--ln); }
.liste dt { color: var(--mu); }
.liste dd { margin: 0; }

/* Haarlinienliste: Begriff links leise, kurzer Wert rechts.
   idee-appartement.html .fakten div */
.liste--zeilen > div {
	display: flex;
	justify-content: space-between;
	gap: var(--s3);
	padding-block: var(--s2);
}
.liste--zeilen dd {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Haarlinienliste mit Text: Begriff in fester Spalte, der Wert laeuft.
   idee-kontakt.html .seite dl div; am Handy Begriff ueber Wert wie
   idee-wissen.html, weil neben 9rem Begriff bei 390 Pixeln nur 200
   fuer den Wert bleiben, gemessen. */
.liste--text > div {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: var(--s3);
	padding-block: var(--s2);
}
.liste--text dd { max-width: 62ch; }

/* Faktenraster: Zellen nebeneinander, Begriff ueber Wert.
   idee-start.html .fakten; am Handy zwei Spalten. */
.liste--fakten {
	display: grid;
	grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
}
.liste--fakten > div {
	padding: var(--s3) var(--s4) var(--s3) 0;
}
.liste--fakten > div:not(.liste__erste) {
	padding-left: var(--s4);
	border-left: 1px solid var(--ln);
}
.liste--fakten dt {
	font-size: .625rem;
	line-height: 1;
	font-weight: var(--gw-halb);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.liste--fakten dd { margin-top: var(--s1); }

@media (max-width: 760px) {
	.liste--text > div {
		grid-template-columns: 1fr;
		gap: var(--s1);
		padding-block: var(--s3);
	}
	.liste--fakten { grid-template-columns: 1fr 1fr; }
	.liste--fakten > div {
		padding: var(--s3) var(--s3) var(--s3) 0;
		border-left: 0;
	}
	/* liste__erste zaehlt die Spalten am Rechner. Hier sind es
	   immer zwei, die erste Zelle jeder Zeile ist die ungerade.
	   Ohne diese Regel gewann .liste--fakten > div:not(.liste__erste)
	   und gab Zelle 3 und 5 Linie und Einzug (1. Oktober). */
	.liste--fakten > div:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
	.liste--fakten > div:nth-child(even) {
		padding-left: var(--s3);
		border-left: 1px solid var(--ln);
	}
	/* Ungerade Zahl: die letzte Zelle nimmt beide Spalten, sonst
	   bleibt rechts unten ein leeres Feld. */
	.liste--fakten > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── Die Textkachel: eine Platte ────────────────────────── */
/* Eine getoente Platte mit Kicker, Wert, Satz, Liste und einem Weg
   weiter; jeder Teil ausser dem Kicker ist optional. Sieben Bloecke
   hatten sieben Fassungen, Polster 24 bis 48, Fuge 12 bis 24, drei
   Wertgroessen, eine Mindesthoehe. Jetzt: innen --s4 wie die
   Tabelle in Phase 2, und statt einer Fuge ein Traeger je Paar:
   Kicker zum Naechsten --s2, sonst --s3, zum Weg --s4. Der Wert ist
   die eine Zeile, um die es geht (Nummer, Adresse, Zusage), in der
   Groesse aus idee-kontakt.html .k b; der Satz erklaert ihn, klein
   und leise, .k p. Eine Liste in der Platte ist die Haarlinienliste
   aus kr_liste(), kein eigener Stil.

   Der Weg sitzt unten, damit Kacheln einer Reihe unten auf einer
   Linie enden, ohne Mindesthoehe: nicht ueber margin-top: auto am
   Weg, dessen Wert dann je Kachel ein anderer Pixelwert waere,
   sondern das Element vor dem Weg waechst (flex-grow) und nimmt die
   Hoehe, die das Raster der Platte gibt. Der Abstand zum Weg bleibt
   --s4 am Weg, ein Traeger, ein Wert.

   Dunkel ist eine Umgebung, keine zweite Platte: .platte--dunkel
   setzt --platte-grund, --tx, --mu und --ln um, und alles darin,
   was diese Tokens sagt, wird hell. Auf / und /kontakt/ ist die
   dunkle Platte die, die zur Buchung fuehrt; der Baustein vergibt
   die Klasse aus seinem Inhalt. */
.platte {
	--platte-grund: var(--pa2);
	display: flex;
	flex-direction: column;
	padding: var(--s4);
	background: var(--platte-grund);
	color: var(--tx);
}
.platte > * { margin: 0; }
.platte > * + * { margin-top: var(--s3); }
.platte > .kick + * { margin-top: var(--s2); }
.platte__wert {
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	line-height: 1.25;
	letter-spacing: -.025em;
	font-style: normal;   /* auch als <address> */
}
.platte__satz {
	max-width: 34ch;
	font-size: .875rem;
	color: var(--mu);
}
.platte > .platte__weiter {
	margin-top: var(--s4);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s3);
}
.platte > :has(+ .platte__weiter) { flex-grow: 1; }
/* Der Textverweis neben einem Knopf ist so hoch wie der Knopf, ueber
   stretch: sonst endet die Kachel mit Verweis vier Pixel frueher als
   die mit Knopf, und die Reihe hat fuer dieselbe Fuge zwei Zahlen. */
.platte__weiter .tl {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
}
.platte--dunkel {
	--platte-grund: var(--dk);
	--tx: var(--pa);
	--mu: var(--mu-hell);
	--ln: var(--ln-hell);
}

/* Eine Webadresse als Verweis im Fliesstext der Rechtsseiten, aus
   kr_adressverweise(): sie steht woertlich wie in der Endfassung.
   Eine Adresse mit Pfad darf ueberall brechen:
   easyguestmanagement.at/web/datenschutz.php ist bei 390 mit 370
   Pixeln breiter als die Spalte (354) und brach an seinen Punkten,
   mit "php" allein in der letzten Zeile. overflow-wrap: anywhere
   aendert daran nichts, gemessen: es greift nur, wenn ein Stueck
   zwischen zwei Umbruchstellen nicht in die Zeile passt, und die
   Stuecke zwischen den Punkten passen. line-break: anywhere fuellt
   die Zeile und bricht mitten im Wort; auf alle Adressen angewandt
   zerlegte es social-mountain.at in "social-mountain." und "at".
   Deshalb nur Adressen mit Pfad; eine blosse Domain passt in eine
   Zeile und bricht wie ein Wort. Nur der Verweis, nie der Absatz. */
.adresse--pfad { line-break: anywhere; }

/* ── Der Aufklapper ──────────────────────────────────────── */
/* Aus kr_aufklapper() in inc/bauteile.php. Frage 1rem / 400, Zeile
   .75rem oben und unten, Antwort .9375rem mit --s3 darunter,
   Haarlinie unter jedem. Eine Fassung fuer alle vier Bloecke, die
   ihn tragen; idee-start.html, bestaetigt am 17. September. */
.aufklapper { border-bottom: 1px solid var(--ln); }
.aufklapper > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s4);
	padding-block: .75rem;
	font-size: 1rem;
	font-weight: var(--gw-normal);
}
.aufklapper > summary::-webkit-details-marker { display: none; }
.aufklapper > summary::after { content: "+"; color: var(--mu); }
.aufklapper[open] > summary::after { content: "–"; }
.aufklapper > p {
	margin: 0;
	padding-bottom: var(--s3);
	font-size: .9375rem;
	line-height: 1.55;
	max-width: 56ch;
}

/* ── Textverweis am Ende eines Abschnitts ───────────────── */
/* Eine ruhende Haarlinie, beim Ueberfahren wird sie blau. Das ist
   eine der drei Stellen, an denen Blau bleibt. */
.tl {
	display: inline-block;
	font-size: .875rem;
	box-shadow: inset 0 -1px 0 var(--ln);
	transition: box-shadow .4s var(--e);
}
.tl:hover,
.tl:focus-visible { box-shadow: inset 0 -1px 0 var(--tx); }

/* Am Handy ist jeder Verweis eine Tastflaeche von 44 Pixeln. Der
   Textverweis steht allein, nicht im Satz, also darf er wachsen. */
@media (max-width: 61.25rem) {
	.tl {
		display: inline-flex;
		align-items: center;
		min-height: var(--tippflaeche);
	}
}

/* ── Bildunterschrift auf einer Platte ──────────────────── */
/* Auf einem Foto traegt eine Platte sicherer als ein Verlauf: sie
   deckt unabhaengig davon, was hinter ihr liegt. */
.pl {
	position: absolute;
	left: var(--s3);
	bottom: var(--s3);
	font-size: .625rem;
	font-weight: var(--gw-halb);
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--we);
	background: rgba(12, 13, 15, .62);
	padding: .45rem .6rem .4rem;
}

/* ── Verweis im Fliesstext ──────────────────────────────── */
/* Sieht aus wie der Text, kein Blau, kein Pfeil. Die ruhende
   Linie ist sehr leise und macht den Verweis trotzdem ohne
   Zeiger erkennbar. Beim Ueberfahren waechst die volle Linie von
   links und verschwindet nach rechts, wie in der Navigation.

   Zwei Verlaeufe statt Pseudoelementen: eine Wendung mitten im
   Satz kann ueber zwei Zeilen laufen, und ein absolut gesetztes
   Pseudoelement unterstriche nur die erste. Ein Hintergrundbild
   wiederholt sich ueber jede Zeile.

   Beide Linien nehmen die Textfarbe, damit der Verweis auch auf
   einem Foto und im Fuss funktioniert. */
.tv {
	color: inherit;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(color-mix(in srgb, currentColor 26%, transparent),
			color-mix(in srgb, currentColor 26%, transparent));
	background-repeat: no-repeat;
	background-size: 0 1px, 100% 1px;
	background-position: 100% 100%, 0 100%;
	transition: background-size .5s var(--e);
}
.tv:hover,
.tv:focus-visible {
	background-size: 100% 1px, 100% 1px;
	background-position: 0 100%, 0 100%;
}

/* ── Reveal beim Hereinscrollen ─────────────────────────── */
/* Der Endzustand ist der Standard: ein .rv ohne weitere Klasse
   steht da, wo es hingehoert. Erst app.js schaltet mit der Klasse
   js am html-Element die Ausgangslage und den Uebergang ein, und
   zwar im selben Zug, in dem es alles im ersten Fenster auf "in"
   setzt. Faellt das Skript aus, weil es 403 liefert, blockiert wird
   oder gar nicht laeuft, steht die Seite richtig da, nur ohne
   Bewegung. Vorher war es umgekehrt: ohne Skript blieb jeder
   Baustein 22 Pixel verschoben und unsichtbar, und niemand sah es,
   weil das Skript beim Pruefen immer lief. */
.js .rv {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .9s var(--e), transform 1.1s var(--e);
}
.js .rv.in {
	opacity: 1;
	transform: none;
}

/* ── Filmkorn, nimmt den Flaechen das Digitale ──────────── */
.korn {
	position: fixed;
	inset: 0;
	z-index: var(--z-korn);
	pointer-events: none;
	opacity: .05;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Fokus, sichtbar und ueberall gleich ────────────────── */
:focus-visible {
	outline: 2px solid var(--ak);
	outline-offset: 3px;
}
/* Auf Fotos und im Fuss traegt Blau zu wenig Kontrast */
.hero :focus-visible,
.ende :focus-visible,
body > footer :focus-visible {
	outline-color: var(--we);
}

/* ── Sprung zum Inhalt ──────────────────────────────────── */
.sprunglink {
	position: absolute;
	left: var(--m);
	top: -100px;
	z-index: calc(var(--z-kopf) + 1);
	background: var(--tx);
	color: var(--pa);
	display: inline-flex;
	align-items: center;
	min-height: var(--tippflaeche);
	padding: 12px 20px;
	font-size: var(--t-klein);
	transition: top .35s var(--e);
}
.sprunglink:focus { top: 12px; }

/* Die Seite, auf der man steht, steht im Menue und im Fuss als Name
   da und nicht als Verweis. Sie sieht aus wie einer, nur ohne
   Unterstreichung beim Ueberfahren: sie ist die Angabe, wo man ist.
   Siehe kr_verweis() in inc/navigation.php.

   Keine eigene Farbe. --mu ist im dunklen Fuss Grau auf Schwarz, die
   Kontrastpruefung mass 1,01 zu 1. Die Angabe traegt dieselbe Farbe
   wie die Verweise daneben; unterschieden ist sie dadurch, dass sie
   beim Ueberfahren nichts tut. */
[aria-current="page"] {
	cursor: default;
}

/* Nur fuer Screenreader */
.nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

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

	/* Endzustand sofort, keine Bewegung. Ein Element, das nur
	   nicht mehr animiert, aber in der Ausgangslage bleibt, macht
	   die Seite nicht ruhiger, sondern kaputt. app.js schaltet den
	   Reveal bei diesem Wunsch gar nicht erst ein; das hier gilt,
	   falls doch. */
	.rv {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001s !important;
	}
}

/* ── Verweis nach draussen ──────────────────────────────── */
/* Unterstreichung ueber box-shadow, damit sie unter den
   Unterlaengen durchlaeuft und nicht daran haengen bleibt.
   Dahinter ein kleiner Pfeil nach schraeg oben. Kein Blau, keine
   Standardunterstreichung, nie ein gefuellter Knopf. */
.ex {
	box-shadow: inset 0 -1px 0 var(--ln);
	transition: box-shadow .35s var(--e), color .35s var(--e);
	white-space: nowrap;
}
.ex::after {
	content: "↗";
	display: inline-block;
	margin-left: .32em;
	font-size: .84em;
	transform: translateY(-.06em);
}
.ex:hover,
.ex:focus-visible {
	color: var(--tx);
	box-shadow: inset 0 -1px 0 currentColor;
}
/* Auf dunklem Grund, etwa im Abschlussband oder auf einer Kachel. */
.ende .ex,
.karte .ex { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .4); }

/* Im Fliesstext traegt jeder Verweis dieselbe ruhige Unterstreichung
   wie .ex, nur ohne den Pfeil: der weist nach draussen, und diese
   Verweise fuehren ins eigene Haus. Farbe geerbt, eine Haarlinie
   darunter, beim Ueberfahren in Textfarbe. Kein Blau im Fliesstext.

   .tv behaelt anderswo seine einlaufende Linie. Im Satz ist die
   unruhig, an einer Zahl oder unter einem Bild traegt sie. */
.fliesstext a {
	color: inherit;
	background-image: none;
	box-shadow: inset 0 -1px 0 var(--ln);
	transition: box-shadow .35s var(--e), color .35s var(--e);
}
.fliesstext a:hover,
.fliesstext a:focus-visible {
	color: var(--tx);
	box-shadow: inset 0 -1px 0 currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.ex { transition: none; }
}