@charset "UTF-8";

:root {
	color-scheme: light;

	--marke: #0047ba;
	--marke-tief: #003a99;
	--marke-text: #0047ba;
	--marke-zart: #eef3fd;
	--marke-spur: rgba(0, 71, 186, 0.05);
	--marke-ring: rgba(0, 71, 186, 0.16);
	--marke-rand: transparent;

	--grund: #f7f8fa;
	--flaeche: #fff;
	--linie: #e9ecf2;
	--linie-zart: #f1f3f7;
	--text: #0d1626;
	--leise: #5f6b7f;

	--ok: #0f7a3d;
	--ok-flaeche: #e7f6ec;
	--ok-punkt: #17a34a;
	--ok-fuell: #1c6236;
	--ok-fuell-tief: #065429;
	--warn: #8a5a00;
	--warn-flaeche: #fdf3d8;
	--warn-punkt: #d9a105;
	--bad: #b42318;
	--bad-flaeche: #fde8e6;
	--bad-zart: #fef5f3;
	--bad-punkt: #e0463a;
	--aus: #475467;
	--aus-flaeche: #eef1f6;
	--aus-punkt: #8a94a6;

	--rundung: 12px;
	--rundung-klein: 9px;
	--schatten: 0 1px 2px rgba(13, 22, 38, 0.04), 0 1px 3px rgba(13, 22, 38, 0.05);
	--schatten-hoch: 0 8px 28px -12px rgba(13, 22, 38, 0.28);
}

:root[data-farbe="dunkel"] {
	color-scheme: dark;

	--marke-text: #7bacff;
	--marke-zart: #182843;
	--marke-spur: rgba(123, 172, 255, 0.07);
	--marke-ring: rgba(123, 172, 255, 0.28);
	--marke-rand: rgba(255, 255, 255, 0.16);

	--grund: #0f1217;
	--flaeche: #191d23;
	--linie: #2b3139;
	--linie-zart: #21252b;
	--text: #e5e8ed;
	--leise: #9aa0ab;

	--ok: #87d09b;
	--ok-flaeche: #172e1e;
	--ok-punkt: #3cab64;
	--warn: #deb66a;
	--warn-flaeche: #33260e;
	--warn-punkt: #be8700;
	--bad: #f8a298;
	--bad-flaeche: #3b201d;
	--bad-zart: #2d1d1b;
	--bad-punkt: #dd6b60;
	--aus: #b0bdd0;
	--aus-flaeche: #24292f;
	--aus-punkt: #8393ab;

	--schatten: 0 1px 2px rgba(0, 0, 0, 0.5);
	--schatten-hoch: 0 8px 28px -12px rgba(0, 0, 0, 0.8);
}

/* Übergänge zwischen zwei Seitenaufrufen -------------------------------------
 *
 * Diese Übersicht ist eine Mehrseiten-Anwendung: Jeder Klick ist ein neuer
 * Seitenaufbau. Genau dafür ist `@view-transition` da — der Browser blendet
 * die alte Seite in die neue, ohne dass hier ein Skript etwas nachbaut.
 *
 * Wer es nicht kann (derzeit Firefox), springt wie bisher direkt auf die neue
 * Seite. Es gibt nichts zu prüfen und nichts, was dabei kaputtgehen könnte.
 *
 * Wichtig sind die Namen weiter unten: Was einen `view-transition-name` trägt,
 * wird als eigenes Stück behandelt und wandert von der alten zur neuen Seite,
 * statt mit allem anderen überblendet zu werden. Ohne sie flackerte die
 * Kopfzeile bei jedem Klick mit, obwohl sie stehen bleibt.
 */
@view-transition { navigation: auto; }

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--grund);
	color: var(--text);
	font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--marke-text); }

:focus-visible {
	outline: 2px solid var(--marke-text);
	outline-offset: 2px;
	border-radius: 5px;
}

header {
	background: var(--flaeche);
	border-bottom: 1px solid var(--linie);
	padding: 0 1.75rem;
	position: sticky;
	top: 0;
	z-index: 5;

	/* Bleibt beim Seitenwechsel stehen, statt mitzublenden. */
	view-transition-name: kopf;
}

.kopf {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1.75rem;
	height: 56px;
}

.marke {
	color: var(--marke-text);
	font-weight: 600;
	font-size: 15.5px;
	letter-spacing: -0.015em;
	text-decoration: none;
	white-space: nowrap;
}

.marke span { color: var(--leise); font-weight: 400; }

nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; height: 100%; }

nav a {
	color: var(--leise);
	text-decoration: none;
	font-size: 14.5px;
	display: flex;
	align-items: center;
	height: 100%;
	box-shadow: inset 0 -2px 0 transparent;
	transition: color 0.12s ease, box-shadow 0.12s ease;
}

nav a:hover { color: var(--text); }

nav a.aktiv {
	color: var(--marke-text);
	font-weight: 500;
	box-shadow: inset 0 -2px 0 var(--marke-text);
}

nav a.abmelden {
	padding: 0.32rem 0.8rem;
	height: auto;
	border: 1px solid var(--linie);
	border-radius: 999px;
	font-size: 13.5px;
}

nav a.abmelden:hover { border-color: var(--leise); }

.farbknopf {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 999px;
	color: var(--leise);
	margin-right: -0.5rem;
}

.farbknopf:hover { color: var(--text); border-color: var(--leise); }

.farbknopf svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

:root[data-farbe="dunkel"] .farbknopf .mond,
:root:not([data-farbe="dunkel"]) .farbknopf .sonne { display: none; }

main { max-width: 1180px; margin: 0 auto; padding: 2rem 1.75rem 4.5rem; }

h1 {
	font-size: 26px;
	line-height: 1.22;
	margin: 0 0 0.35rem;
	letter-spacing: -0.025em;
}

/* Die Überschrift einer Webseiten-Detailseite. Den Namen bekommt in der Liste
   beim Klick die angeklickte Zeile, sodass ihr Titel hierher wächst statt zu
   verblassen und woanders neu zu erscheinen. Siehe das Skript in der Liste. */
.titel { view-transition-name: titel; }

h2 { font-size: 15px; margin: 2.25rem 0 0.75rem; letter-spacing: -0.012em; }

.unterzeile { color: var(--leise); font-size: 14px; margin: 0 0 1.6rem; }

.zurueck {
	display: inline-block;
	color: var(--leise);
	text-decoration: none;
	font-size: 13.5px;
	margin-bottom: 1rem;
}

.zurueck:hover { color: var(--marke-text); }

.kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0.85rem;
	margin-bottom: 1.6rem;
}

.kachel {
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: var(--rundung);
	box-shadow: var(--schatten);
	padding: 1rem 1.15rem;
}

.kachel b {
	display: block;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.2rem;
}

.kachel small { color: var(--leise); font-size: 13px; }

.kachel.schlecht { background: var(--bad-zart); border-color: var(--bad-flaeche); }
.kachel.schlecht b { color: var(--bad); }

.karte {
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: var(--rundung);
	box-shadow: var(--schatten);
	overflow: clip;
}

.karte.polster { padding: 1.15rem; }

.karte.wartend {
	background: var(--marke-zart);
	border-color: var(--marke-ring);
	box-shadow: none;
	padding: 1.15rem 1.25rem;
	margin-bottom: 1.75rem;
}

.karte.wartend h2 { margin: 0 0 0.2rem; color: var(--marke-text); }
.karte.wartend p { margin: 0 0 0.7rem; }
.karte.wartend td { padding: 0.6rem 0; border-color: var(--marke-ring); }

table { width: 100%; border-collapse: collapse; }

thead th {
	position: sticky;
	top: 56px;
	background: var(--flaeche);
	text-align: left;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--leise);
	font-weight: 600;
	padding: 0.7rem 1.15rem;
	border-bottom: 1px solid var(--linie);
	white-space: nowrap;
}

td { padding: 0.75rem 1.15rem; border-bottom: 1px solid var(--linie-zart); }
tr:last-child td { border-bottom: 0; }

tbody tr.klick { cursor: pointer; transition: background-color 0.1s ease; }
tbody tr.klick:hover { background: var(--marke-spur); }

.rechts { text-align: right; }
.dünn { color: var(--leise); font-size: 13px; }
.mono { font-variant-numeric: tabular-nums; }
.name { font-weight: 500; letter-spacing: -0.008em; }
.leer { padding: 2.75rem 1rem; text-align: center; color: var(--leise); }

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border-radius: 999px;
	padding: 0.12rem 0.6rem 0.12rem 0.5rem;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	line-height: 1.55;
}

.badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.b-ok { background: var(--ok-flaeche); color: var(--ok); }
.b-warn { background: var(--warn-flaeche); color: var(--warn); }
.b-bad { background: var(--bad-flaeche); color: var(--bad); }
.b-aus,
.b-neutral { background: var(--aus-flaeche); color: var(--aus); }

.b-ok::before { background: var(--ok-punkt); }
.b-warn::before { background: var(--warn-punkt); }
.b-bad::before { background: var(--bad-punkt); }
.b-aus::before,
.b-neutral::before { background: var(--aus-punkt); }

.suche,
textarea,
.anmeldekarte input {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--linie);
	border-radius: var(--rundung-klein);
	background: var(--flaeche);
	color: var(--text);
	font: inherit;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.suche:focus,
textarea:focus,
.anmeldekarte input:focus {
	outline: 0;
	border-color: var(--marke-text);
	box-shadow: 0 0 0 3px var(--marke-ring);
}

.suche {
	max-width: 300px;
	margin-bottom: 1.1rem;
	padding-left: 2.15rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2398a2b3' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.6 10.6 14 14' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0.7rem center;
	background-size: 15px;
}

textarea { margin-bottom: 0.75rem; resize: vertical; }

button {
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--linie);
	border-radius: var(--rundung-klein);
	background: var(--flaeche);
	color: var(--text);
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

button:hover { border-color: var(--leise); }

button.gut { border-color: var(--marke-rand); background: var(--ok-fuell); color: #fff; }
button.gut:hover { background: var(--ok-fuell-tief); color: #fff; }

button.weg { color: var(--bad); }
button.weg:hover { border-color: var(--bad-punkt); background: var(--bad-zart); color: var(--bad); }

.karte.polster:not(.knopfreihe) button:not(.gut):not(.weg),
.anmeldekarte button {
	border-color: var(--marke-rand);
	background: var(--marke);
	color: #fff;
}

.karte.polster:not(.knopfreihe) button:not(.gut):not(.weg):hover,
.anmeldekarte button:hover { background: var(--marke-tief); color: #fff; }

.inline { display: inline; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Reiter --------------------------------------------------------------------
 *
 * Plugins und Checkliste sind beide lang; untereinander ergaben sie eine
 * Seite, auf der niemand mehr bis zum Notizfeld scrollt. Dieselbe Sprache wie
 * die Reiter in der Kopfzeile: Unterstrich in der Hausfarbe, sonst nichts.
 */

.reiter {
	display: flex;
	gap: 1.5rem;
	border-bottom: 1px solid var(--linie);
	margin: 2.25rem 0 1.15rem;

	/* Beim Reiterwechsel wandert nur der Unterstrich, die Leiste selbst
	   bleibt liegen — deshalb hat sie einen eigenen Namen. */
	view-transition-name: reiter;
}

.reiter a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	margin-bottom: -1px;
	color: var(--leise);
	text-decoration: none;
	font-size: 14.5px;
	box-shadow: inset 0 -2px 0 transparent;
	transition: color 0.12s ease, box-shadow 0.12s ease;
}

.reiter a:hover { color: var(--text); }

.reiter a.aktiv {
	color: var(--marke-text);
	font-weight: 500;
	box-shadow: inset 0 -2px 0 var(--marke-text);
}

.reiter .zahl { color: var(--leise); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Die Tafel unter den Reitern: Plugin-Tabelle oder Checkliste, nie beides.
 * Weil beide denselben Namen tragen, wächst beim Reiterwechsel die eine in
 * die andere, statt dass die halbe Seite blinkt.
 *
 * Die Bewegung ist kurz gehalten. Das hier ist ein Werkzeug, das jemand
 * zwanzig Mal am Tag benutzt, und alles, was länger als ein Lidschlag dauert,
 * ist beim zwanzigsten Mal im Weg.
 */
.tafel { view-transition-name: tafel; }

::view-transition-old( tafel ) { animation: tafel-weg 0.14s ease both; }
::view-transition-new( tafel ) { animation: tafel-hin 0.18s ease both; }

@keyframes tafel-weg {
	to { opacity: 0; transform: translateY(-4px); }
}

@keyframes tafel-hin {
	from { opacity: 0; transform: translateY(6px); }
}

/* Checkliste ---------------------------------------------------------------
 *
 * Eine lange Liste, die im Sitzen abgearbeitet wird: Der Kopf mit Zahl, Balken
 * und Speichern-Knopf bleibt deshalb stehen, sonst müsste man nach jedem
 * Abschnitt ans Seitenende scrollen, um den Haken zu sichern. Er klebt auf
 * derselben Höhe wie die Tabellenköpfe (56px, die Höhe der Kopfzeile).
 */

.checkliste { padding: 0; }

.fortschritt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.1rem;
	padding: 0.8rem 1.15rem;
	border-bottom: 1px solid var(--linie);
	background: var(--flaeche);
	position: sticky;
	top: 56px;
	z-index: 2;
}

/* Nimmt sich alles, was die Zahl übrig lässt, bis zum rechten Rand. */
.balken {
	flex: 1;
	min-width: 5rem;
	height: 5px;
	border-radius: 999px;
	background: var(--linie);
	overflow: hidden;
}

/* Als Fläche bleibt die Hausfarbe in beiden Modi unverändert — sie steht hier
   nicht als Schrift, sondern als Balken. */
.balken span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--marke);
	transition: width 0.2s ease;
}

.zahlen { flex: none; margin: 0; font-size: 13.5px; white-space: nowrap; color: var(--leise); }
.zahlen b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }

/* Der Abschnitt ist eine Zwischenüberschrift und keine zweite Tabelle: eine
   Linie und ein Wort, keine graue Fläche. Sechs graue Bänder auf einer Karte
   sahen aus, als wären es sechs Karten. */
.abschnitt-kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.35rem 1.15rem 0.45rem;
}

.abschnitt-kopf h3 {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.punkte { list-style: none; margin: 0; padding: 0; }

.punkt {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.45rem 1.15rem;
	border-top: 1px solid var(--linie-zart);
}

.punkt:first-child { border-top: 0; }

.punkt:hover { background: var(--marke-spur); }

.punkt input[type="checkbox"] {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0.25rem 0 0;
	accent-color: var(--marke);
	cursor: pointer;
}

.punkt label { flex: 1; cursor: pointer; line-height: 1.5; }

/* Erledigtes tritt zurück, statt zu verschwinden: Man muss beim Durchgehen
   sehen, was schon dasteht, ohne dass es die offenen Punkte überdeckt. */
.punkt.ist-erledigt label { color: var(--leise); }
.punkt.ist-entfaellt label { color: var(--leise); text-decoration: line-through; }
.punkt.ist-entfaellt input[type="checkbox"] { opacity: 0.45; }

.punkt .wann {
	flex: none;
	align-self: center;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Erst beim Überfahren der Zeile sichtbar: „entfällt" ist die Ausnahme und
   soll nicht achtundsiebzig Mal neben dem Text um Aufmerksamkeit bitten. */
.punkt button.klein {
	flex: none;
	align-self: center;
	padding: 0.15rem 0.5rem;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--leise);
	opacity: 0;
	transition: opacity 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.punkt:hover button.klein,
.punkt button.klein:focus-visible,
.punkt.ist-entfaellt button.klein { opacity: 1; }

/* „speichert …", „gespeichert", oder der Fehler. Liegt über dem rechten Ende
   des Balkens statt neben ihm: Ein fester Platz in der Zeile nähme dem Balken
   dauerhaft neun Zeichen weg, für eine Meldung, die meistens gar nicht
   dasteht. Deshalb der deckende Hintergrund — und deshalb räumt sich
   „gespeichert" im Skript nach zwei Sekunden selbst weg. */
.ck-stand {
	position: absolute;
	right: 1.15rem;
	top: 50%;
	transform: translateY(-50%);
	padding: 0.05rem 0.3rem;
	border-radius: var(--rundung-klein);
	background: var(--flaeche);
	font-size: 12.5px;
	color: var(--leise);
	pointer-events: none;
}

.ck-stand:empty { display: none; }

.ck-stand.ist-fehler { color: var(--bad); font-weight: 500; }

.herkunft {
	margin: 0;
	padding: 0.9rem 1.15rem;
	border-top: 1px solid var(--linie-zart);
}

.verwaist { margin-top: 0.85rem; align-items: center; }
.verwaist p { margin: 0; flex: 1; min-width: 240px; }

/* Der Knopf im Kasten liegt außerhalb eines Formulars mit .polster, deshalb
   greift die blaue Regel weiter unten hier nicht — das ist so gewollt: Das
   Wegräumen ist kein Hauptweg. */

/* Tempo ---------------------------------------------------------------------
 *
 * Die vier Noten als Ringe, weil Lighthouse sie so zeigt: Wer die Zahl schon
 * einmal bei Google gesehen hat, erkennt sie hier wieder, statt sie erst
 * übersetzen zu müssen.
 */

.tempo { padding: 0; }

.tempo-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
	padding: 1.35rem 1.15rem;
}

.ringe { display: flex; flex-wrap: wrap; gap: 1.35rem; }

.ring { width: 84px; text-align: center; }

/* Ein Kreisausschnitt und kein Diagramm: ein conic-gradient bis zum Wert,
   darüber eine Scheibe in der Kartenfarbe. Die Farbe steht am Ring selbst,
   damit der Bogen sie über currentColor mitnimmt. */
.ring .scheibe {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 0.4rem;
	border-radius: 50%;
	background: conic-gradient(currentColor calc(var(--note, 0) * 3.6deg), var(--linie) 0);
}

.ring .scheibe b {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--flaeche);
	color: var(--text);
	font-size: 17px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ring small { color: var(--leise); font-size: 12.5px; line-height: 1.3; }

.ring.r-ok { color: var(--ok-punkt); }
.ring.r-warn { color: var(--warn-punkt); }
.ring.r-bad { color: var(--bad-punkt); }
.ring.r-neutral { color: var(--aus-punkt); }

.tempo-nichts { margin: 0; }

.tempo-seite { margin-left: auto; text-align: right; }
.tempo-seite p { margin: 0; }
.tempo-seite .knopfreihe { justify-content: flex-end; margin: 0.5rem 0 0; }

.tempo-stand { margin-top: 0.5rem; }
.tempo-stand:empty { display: none; }
.tempo-stand.ist-fehler { color: var(--bad); }

/* Ein Link, der wie ein Knopf aussieht: Er steht neben einem und führt aus der
   Seite heraus, deshalb kein Formular und keine Hausfarbe. */
.knopfhaft {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--linie);
	border-radius: var(--rundung-klein);
	color: var(--leise);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: border-color 0.12s ease, color 0.12s ease;
}

.knopfhaft:hover { border-color: var(--leise); color: var(--text); }

/* Die Messwerte hinter den Noten. Gefärbt wird nur, was auffällt: Vier grüne
   Zahlen nebeneinander sind vier Mal dieselbe Aussage. */
.metriken {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.75rem;
	padding: 0.8rem 1.15rem;
	border-top: 1px solid var(--linie);
	background: var(--linie-zart);
	font-size: 13px;
	color: var(--leise);
}

.metrik b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.metrik.m-warn b { color: var(--warn); }
.metrik.m-bad b { color: var(--bad); }

.tempo-lauf { margin: 0.9rem 0 0; }

body.anmeldung {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 1.5rem;
}

.anmeldekarte {
	padding: 2rem;
	width: 100%;
	max-width: 350px;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	box-shadow: var(--schatten-hoch);
}

.anmeldekarte .marke { margin-bottom: 1.1rem; font-size: 16.5px; }
.anmeldekarte label { font-size: 13px; color: var(--leise); }
.anmeldekarte button { margin-top: 0.7rem; padding: 0.58rem; }

.fehler {
	background: var(--bad-flaeche);
	color: var(--bad);
	border-radius: var(--rundung-klein);
	padding: 0.55rem 0.7rem;
	font-size: 13px;
	margin: 0 0 0.3rem;
}

@media (max-width: 700px) {
	.klein-weg { display: none; }
	nav { gap: 1.1rem; font-size: 14px; }
	.kopf { gap: 1rem; }
	header { padding: 0 1rem; }
	main { padding: 1.35rem 1rem 3rem; }
	h1 { font-size: 22px; }
	td, thead th { padding-left: 0.9rem; padding-right: 0.9rem; }

	.fortschritt,
	.abschnitt-kopf,
	.punkt,
	.herkunft,
	.tempo-kopf,
	.metriken { padding-left: 0.9rem; padding-right: 0.9rem; }

	/* Auf dem Handy stehen die Ringe und der Knopf untereinander, nicht
	   nebeneinander an den Rändern. */
	.tempo-seite { margin-left: 0; text-align: left; }
	.tempo-seite .knopfreihe { justify-content: flex-start; }
	.ring { width: 74px; }

	/* Auf dem Handy reicht die Breite nicht für Zahl und Balken nebeneinander;
	   der Balken rutscht unter die Zahl, statt auf ein paar Pixel
	   zusammengedrückt zu werden. */
	.balken { flex-basis: 100%; }
	.ck-stand { right: 0.9rem; }
}

/* Ohne Zeigegerät gibt es kein Überfahren, und ein Knopf, der nur bei :hover
   erscheint, ist auf dem Tablet einfach nicht da. */
@media (hover: none) {
	.punkt button.klein { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }

	/* Auch die Seitenübergänge. Weggeschaltet werden kann `@view-transition`
	   nicht, aber eine Dauer von fast null ist dasselbe in sichtbar. */
	::view-transition-group( * ),
	::view-transition-old( * ),
	::view-transition-new( * ) { animation-duration: 1ms !important; }
}