/*
Theme Name: Bergatelier
Theme URI: https://bergatelier.org/
Author: Bergatelier Computerclub GmbH
Author URI: https://bergatelier.org/
Description: Thema für den Computerclub Bergatelier in Rostock. Heller Saal, Plätze nach Stunden, vier Werkzeuge zum Nachrechnen: Aufenthaltsuhr, Sitzmaß, Bildratekette und Turnierbaum. Alle Schriften und Bilder liegen im Thema, es wird nichts von fremden Servern nachgeladen.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bergatelier
Tags: light, one-column, custom-menu, translation-ready
*/

/* =========================================================================
   1. Schriften
   -------------------------------------------------------------------------
   Alles liegt im Thema. Kanit trägt die Überschriften, Plus Jakarta Sans den
   Text — und alle Ziffern. Ein Club, der Stunden verkauft, kann sich keine
   Mediävalziffern leisten: dort steht die Null auf x-Höhe und 20:00 liest
   sich als 2o:oo. Beide Familien wurden daraufhin gemessen.
   ========================================================================= */

@font-face {
	font-family: 'Kanit';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/kanit-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Kanit';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/kanit-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Jakarta';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/plus-jakarta-sans-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Jakarta';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/plus-jakarta-sans-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Jakarta';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/plus-jakarta-sans-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Jakarta';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/plus-jakarta-sans-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   2. Farben und Grundmaße
   -------------------------------------------------------------------------
   Jede Paarung ist vor der Umsetzung durchgerechnet worden, in beide
   Richtungen. --haarfuge steht bei 1,36 und darf deshalb nirgends in einer
   color-Angabe auftauchen: sie ist Rahmen und Füllung, nie Text.
   --randgruen liegt bei 4,23 und trägt sichtbare Rahmen, keinen Fließtext.
   ========================================================================= */

:root {
	--saalweiss: #eff1ee;
	--pultgrau: #e3e7e1;
	--haarfuge: #ccd2c9;
	--randgruen: #6b7568;
	--tafelschwarz: #1a1f1c;
	--stiftgrau: #4c554f;
	--petrol: #0e6f66;
	--schirmlila: #5a3fa0;
	--sperrrot: #9e2a24;

	--breite: 74rem;
	--schmal: 46rem;
	--jochen: clamp(1rem, 4vw, 2.5rem);
	--rundung: 0.375rem;
	--raster: 1.5rem;

	/* Nur zwei Ebenen im ganzen Thema, beide hier benannt.
	   Die Kopfleiste klebt oben und muss über dem Inhalt liegen; das Band
	   für die Einwilligung muss über allem liegen, auch über der Kopfleiste.
	   Sonst bekommt nichts einen z-index — und ganz besonders nicht die
	   Vorfahren der Werkzeuge: ein Vorfahr mit position und z-index sperrt
	   seine Kinder in einen eigenen Stapelkontext ein. */
	--ebene-kopf: 100;
	--ebene-band: 200;
}

/* =========================================================================
   3. Grundgerüst
   ========================================================================= */

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

/* Ein Element mit hidden muss verschwinden, auch wenn eine Klasse ihm
   danach ein display gibt. Ohne !important gewinnt die Klasse. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
}

/* Die Kopfleiste klebt oben. Ohne scroll-padding schiebt der Browser jedes
   Sprungziel an den oberen Rand des Fensters — und die Leiste liegt davor.
   Gemessen wurde: das Ziel landete 69 px unter der Leiste, also die ersten
   zwei Zeilen unsichtbar. Das trifft den Sprung „Direkt zum Inhalt" und
   ebenso die vier Formulare, die ohne JavaScript auf #aufenthaltsuhr,
   #sitzmass, #bildratekette und #turnierbaum zurückspringen. */
html {
	scroll-padding-top: 5rem;
}

/* Zwischen 48rem und 69rem steht das Menü schon waagerecht in der Leiste,
   passt dort aber noch nicht neben Namen und Schaltfläche: die Leiste bricht
   um und wird 109 px hoch, bei 776 px sogar 157 px. Weil sie klebt, wächst
   damit die Höhe, unter der ein Sprungziel verschwindet. */
@media (min-width: 48.0625rem) and (max-width: 69rem) {
	html {
		scroll-padding-top: 10.5rem;
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--saalweiss);
	color: var(--tafelschwarz);
	font-family: 'Jakarta', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
	font-family: 'Kanit', 'Jakarta', system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.18;
	margin: 0 0 0.6em;
	color: var(--tafelschwarz);
}

h1 {
	font-size: clamp(2rem, 5vw, 3.1rem);
}

h2 {
	font-size: clamp(1.5rem, 3.4vw, 2.15rem);
}

h3 {
	font-size: clamp(1.2rem, 2.4vw, 1.45rem);
}

p {
	margin: 0 0 1.1em;
}

a {
	color: var(--petrol);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--tafelschwarz);
}

/* Ein Absatz, in dem nichts als ein Link steht, ist in Wahrheit eine
   Schaltfläche. Als reiner Inline-Text misst er 20 px hoch und ist auf dem
   Telefon nicht zu treffen. */
p > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 600;
}

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

:focus-visible {
	outline: 3px solid var(--petrol);
	outline-offset: 2px;
}

code {
	font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
	font-size: 0.94em;
}

.stummgeschaltet {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.stummgeschaltet--sprung:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip: auto;
	clip-path: none;
	background: var(--petrol);
	color: var(--saalweiss);
	font-weight: 600;
	z-index: var(--ebene-band);
}

/* Was ohne JavaScript gebraucht wird und mit JavaScript stört. */
.js-an .ohne-js {
	display: none;
}

.saalwerk {
	width: min(100% - 2 * var(--jochen), var(--breite));
	margin-inline: auto;
}

.saalwerk--schmal {
	width: min(100% - 2 * var(--jochen), var(--schmal));
}

.inhalt {
	display: block;
}

/* =========================================================================
   4. Reihen
   ========================================================================= */

.reihe {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.reihe--grund {
	background: var(--saalweiss);
}

.reihe--tafel {
	background: var(--pultgrau);
}

.reihe--knapp {
	padding-block: clamp(2rem, 4vw, 3rem);
}

.reihe__kopf {
	margin-bottom: 0.35em;
}

.reihe__unter {
	max-width: 52rem;
	color: var(--stiftgrau);
	font-size: 1.08rem;
	margin-bottom: 2rem;
}

/* =========================================================================
   5. Tasten
   -------------------------------------------------------------------------
   Die Füllung trägt den Text, nicht umgekehrt: --petrol als Textfarbe auf
   einer Platte kommt nur auf 4,82, --saalweiss auf --petrol dagegen auf 5,31.
   Ein abgeschalteter Zustand bekommt deshalb auch keine Deckkraft von 0,55 —
   das ergäbe 3,9 — sondern eigene, gemessene Farben.
   ========================================================================= */

.taste {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.875rem;
	padding: 0.65rem 1.35rem;
	border: 2px solid transparent;
	border-radius: var(--rundung);
	font-family: 'Jakarta', system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.taste--melden {
	background: var(--petrol);
	color: var(--saalweiss);
	border-color: var(--petrol);
}

.taste--melden:hover,
.taste--melden:focus {
	background: var(--tafelschwarz);
	border-color: var(--tafelschwarz);
	color: var(--saalweiss);
}

.taste--still {
	background: transparent;
	color: var(--tafelschwarz);
	border-color: var(--randgruen);
}

.taste--still:hover,
.taste--still:focus {
	background: var(--tafelschwarz);
	border-color: var(--tafelschwarz);
	color: var(--saalweiss);
}

.taste--knapp {
	min-height: 2.5rem;
	padding: 0.4rem 0.9rem;
	font-size: 0.94rem;
}

.taste[disabled] {
	background: var(--pultgrau);
	border-color: var(--randgruen);
	color: var(--stiftgrau);
	cursor: not-allowed;
}

/* =========================================================================
   6. Kopfleiste
   ========================================================================= */

.traverse {
	position: sticky;
	top: 0;
	z-index: var(--ebene-kopf);
	background: var(--saalweiss);
	border-bottom: 1px solid var(--haarfuge);
}

.traverse__innen {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4.25rem;
	padding-block: 0.5rem;
}

.traverse__name {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--tafelschwarz);
	flex: 0 0 auto;
}

.traverse__zeichen {
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 auto;
}

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

.traverse__quadrat {
	fill: var(--petrol);
}

.traverse__buchstabe {
	fill: var(--saalweiss);
}

.traverse__wort {
	font-family: 'Kanit', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: 0.01em;
}

.gangreihe__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gangreihe__liste a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-inline: 0.15rem;
	color: var(--tafelschwarz);
	font-weight: 600;
	font-size: 0.98rem;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.gangreihe__liste a:hover,
.gangreihe__liste a:focus,
.gangreihe__liste .current-menu-item > a {
	color: var(--petrol);
	border-bottom-color: var(--petrol);
}

/* Der Abstand nach links gehört an die Schaltfläche und nicht an den
   Klapp-Knopf: sitzt er dort, bricht die Kopfleiste auf 390 px in zwei
   Zeilen um. */
.traverse__ruf {
	margin-left: auto;
	flex: 0 0 auto;
}

.schnappe {
	display: none;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.4rem 0.7rem;
	background: transparent;
	border: 2px solid var(--randgruen);
	border-radius: var(--rundung);
	color: var(--tafelschwarz);
	font-family: 'Jakarta', system-ui, sans-serif;
	font-size: 0.94rem;
	font-weight: 600;
	cursor: pointer;
}

/* Ein span ohne display zeichnet keine Höhe. */
.schnappe__balken {
	display: block;
	position: relative;
	width: 1.15rem;
	height: 2px;
	background: var(--tafelschwarz);
}

.schnappe__balken::before,
.schnappe__balken::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--tafelschwarz);
}

.schnappe__balken::before {
	top: -6px;
}

.schnappe__balken::after {
	top: 6px;
}

/* =========================================================================
   7. Der Kabelweg
   ========================================================================= */

.kabelweg {
	height: 3.25rem;
	background: var(--saalweiss);
	overflow: hidden;
}

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

.kabelweg__kabel {
	fill: none;
	stroke: var(--randgruen);
	stroke-width: 3;
	stroke-linecap: round;
}

.kabelweg__kabel--tief {
	stroke: var(--schirmlila);
	stroke-width: 4;
}

.kabelweg__schelle {
	fill: var(--randgruen);
}

/* =========================================================================
   8. Der Saalblick
   -------------------------------------------------------------------------
   Der Text steht auf einer deckenden Platte und nicht auf dem Foto. So ist
   der Kontrast eine feste Zahl und keine Frage der Tageszeit im Bild. Das
   Attribut data-foto-achter bleibt trotzdem stehen: die Prüfung misst hier
   Pixel für Pixel nach, statt eine Hintergrundfarbe anzunehmen.
   ========================================================================= */

.saalblick {
	position: relative;
	background: var(--pultgrau);
}

.saalblick__bild {
	width: 100%;
	height: clamp(18rem, 42vw, 30rem);
	object-fit: cover;
}

.saalblick__innen {
	position: relative;
	margin-top: -6rem;
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.saalblick__kasten {
	max-width: 44rem;
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--saalweiss);
	border: 2px solid var(--randgruen);
	border-radius: var(--rundung);
}

.saalblick__kopf {
	margin-bottom: 0.5rem;
}

.saalblick__satz {
	font-size: 1.12rem;
	color: var(--stiftgrau);
}

.saalblick__tasten,
.einladung__tasten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0;
}

/* =========================================================================
   9. Stirnband der Unterseiten
   ========================================================================= */

.stirnband {
	position: relative;
	background: var(--pultgrau);
	overflow: hidden;
}

.stirnband__textur {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stirnband__innen {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.stirnband__kopf,
.stirnband__unter {
	max-width: 46rem;
	padding: 0.35rem 0.9rem;
	background: var(--saalweiss);
	display: inline-block;
}

.stirnband__unter {
	color: var(--stiftgrau);
	margin-bottom: 0;
	font-size: 1.08rem;
}

/* =========================================================================
   10. Karten
   -------------------------------------------------------------------------
   Die Zahl der Karten steht fest, deshalb steht die Verteilung ausdrücklich
   da. auto-fit legt sechs Karten gern als 5+1 aus, und die letzte liest sich
   dann wie vergessen.
   ========================================================================= */

.platzkarten {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--raster);
}

.platzkarte {
	display: flex;
	flex-direction: column;
	background: var(--saalweiss);
	border: 1px solid var(--haarfuge);
	border-radius: var(--rundung);
	overflow: hidden;
}

.reihe--grund .platzkarte {
	background: var(--pultgrau);
}

.platzkarte__bild {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.platzkarte__innen {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.platzkarte__name {
	margin-bottom: 0.15rem;
}

.platzkarte__anzahl {
	margin-bottom: 0.75rem;
	font-weight: 600;
	color: var(--petrol);
}

.platzkarte__satz {
	color: var(--stiftgrau);
}

.platzkarte__merkmale {
	margin: 0 0 1rem;
	padding-left: 1.1rem;
	color: var(--stiftgrau);
	font-size: 0.98rem;
}

.platzkarte__merkmale li {
	margin-bottom: 0.3rem;
}

.platzkarte__preis {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--haarfuge);
}

.platzkarte__preis strong {
	font-size: 1.35rem;
	color: var(--petrol);
}

/* =========================================================================
   11. Tabellen
   ========================================================================= */

.leuchtrahmen {
	border: 2px solid var(--randgruen);
	border-radius: var(--rundung);
	overflow-x: auto;
	background: var(--saalweiss);
	margin-bottom: 1.5rem;
}

.stundentabelle,
.freigabetabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.stundentabelle caption,
.freigabetabelle caption {
	padding: 0.9rem 1rem;
	text-align: left;
	color: var(--stiftgrau);
	font-size: 0.96rem;
	border-bottom: 1px solid var(--haarfuge);
}

.stundentabelle th,
.stundentabelle td,
.freigabetabelle th,
.freigabetabelle td {
	padding: 0.7rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--haarfuge);
	vertical-align: top;
}

.stundentabelle thead th,
.freigabetabelle thead th {
	background: var(--pultgrau);
	font-weight: 600;
	white-space: nowrap;
}

.stundentabelle tbody tr:last-child th,
.stundentabelle tbody tr:last-child td,
.freigabetabelle tbody tr:last-child th,
.freigabetabelle tbody tr:last-child td {
	border-bottom: 0;
}

.stundentabelle__leer {
	color: var(--stiftgrau);
}

.stundenkarte {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.stundenkarte__punkt {
	padding: 0.6rem 0 0.6rem 1.5rem;
	border-bottom: 1px solid var(--haarfuge);
	position: relative;
}

.stundenkarte__punkt::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.15rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--petrol);
}

.stundenkarte__punkt:last-child {
	border-bottom: 0;
}

/* =========================================================================
   12. Werkzeuge — Gemeinsames
   ========================================================================= */

.aufenthaltsuhr,
.sitzmass,
.bildratekette,
.turnierbaum {
	background: var(--saalweiss);
	border: 2px solid var(--randgruen);
	border-radius: var(--rundung);
	padding: clamp(1.15rem, 3vw, 2rem);
}

.reihe--grund .aufenthaltsuhr,
.reihe--grund .sitzmass,
.reihe--grund .bildratekette,
.reihe--grund .turnierbaum {
	background: var(--pultgrau);
}

.eintragzeile {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin-bottom: 1rem;
}

.eintragzeile label {
	font-weight: 600;
	font-size: 0.98rem;
}

.eintragzeile__feld {
	min-height: 2.875rem;
	padding: 0.55rem 0.7rem;
	background: var(--saalweiss);
	border: 2px solid var(--randgruen);
	border-radius: var(--rundung);
	color: var(--tafelschwarz);
	font-family: 'Jakarta', system-ui, sans-serif;
	font-size: 1rem;
	width: 100%;
}

textarea.eintragzeile__feld {
	min-height: 7rem;
	line-height: 1.55;
	resize: vertical;
}

fieldset {
	margin: 0 0 0.5rem;
	padding: 0;
	border: 0;
}

.aufenthaltsuhr__form fieldset,
.sitzmass__form fieldset,
.bildratekette__form fieldset,
.turnierbaum__form fieldset {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0 1.25rem;
}

/* =========================================================================
   13. Werkzeug 1 — Aufenthaltsuhr
   ========================================================================= */

.aufenthaltsuhr__anzeige {
	display: grid;
	grid-template-columns: minmax(15rem, 20rem) 1fr;
	gap: clamp(1.25rem, 3vw, 2.25rem);
	align-items: start;
	margin-top: 1.25rem;
}

.aufenthaltsuhr__ring {
	margin: 0;
}

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

.aufenthaltsuhr__strich {
	stroke: var(--randgruen);
	stroke-width: 1.5;
}

.aufenthaltsuhr__strich--voll {
	stroke: var(--tafelschwarz);
	stroke-width: 2.5;
}

.aufenthaltsuhr__ziffer {
	fill: var(--stiftgrau);
	font-family: 'Jakarta', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-anchor: middle;
}

.aufenthaltsuhr__bogen {
	fill: none;
	stroke-linecap: butt;
}

.aufenthaltsuhr__bogen--offen {
	stroke: var(--randgruen);
	stroke-width: 14;
}

.aufenthaltsuhr__bogen--fenster {
	stroke: var(--petrol);
	stroke-width: 16;
}

.aufenthaltsuhr__bogen--sperre {
	stroke: var(--sperrrot);
}

.aufenthaltsuhr__legende {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: 0.75rem;
	font-size: 0.94rem;
	color: var(--stiftgrau);
}

.aufenthaltsuhr__marke {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.aufenthaltsuhr__marke::before {
	content: '';
	display: block;
	width: 1.5rem;
	height: 0.65rem;
	border-radius: 0.2rem;
	flex: 0 0 auto;
}

.aufenthaltsuhr__marke--offen::before {
	background: var(--randgruen);
}

.aufenthaltsuhr__marke--fenster::before {
	background: var(--petrol);
}

.aufenthaltsuhr__fenster {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--haarfuge);
}

.aufenthaltsuhr__kopf,
.bildratekette__kopf,
.turnierbaum__kopf {
	display: block;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stiftgrau);
}

.aufenthaltsuhr__spanne {
	display: block;
	font-family: 'Jakarta', system-ui, sans-serif;
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--petrol);
}

.aufenthaltsuhr__dauer {
	display: block;
	font-weight: 600;
}

.aufenthaltsuhr__satz {
	margin-bottom: 0.7rem;
	color: var(--stiftgrau);
}

.aufenthaltsuhr__satz:last-child {
	margin-bottom: 0;
	color: var(--tafelschwarz);
	font-weight: 600;
}

.aufenthaltsuhr__fussnote {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--haarfuge);
	font-size: 0.96rem;
	color: var(--stiftgrau);
}

/* =========================================================================
   14. Werkzeug 2 — Sitzmaß
   ========================================================================= */

.sitzmass__anzeige {
	display: grid;
	grid-template-columns: minmax(16rem, 22rem) 1fr;
	gap: clamp(1.25rem, 3vw, 2.25rem);
	align-items: start;
	margin-top: 1.25rem;
}

.sitzmass__silhouette {
	margin: 0;
}

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

.sitzmass__figur {
	fill: none;
	stroke: var(--tafelschwarz);
	stroke-width: 3;
	stroke-linejoin: round;
}

.sitzmass__boden {
	stroke: var(--randgruen);
	stroke-width: 2;
}

.sitzmass__tisch {
	stroke: var(--randgruen);
	stroke-width: 3;
	stroke-linecap: round;
}

.sitzmass__schirm {
	fill: var(--tafelschwarz);
}

.sitzmass__skala {
	stroke: var(--randgruen);
	stroke-width: 1;
}

.sitzmass__linie {
	stroke: var(--petrol);
	stroke-width: 2;
	stroke-dasharray: 4 3;
}

.sitzmass__linie--drueber,
.sitzmass__linie--drunter {
	stroke: var(--schirmlila);
	stroke-dasharray: none;
}

.sitzmass__pfeil {
	stroke: var(--schirmlila);
	stroke-width: 2;
}

.sitzmass__zahl {
	fill: var(--tafelschwarz);
	font-family: 'Jakarta', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
}

.sitzmass__zeile--drueber th,
.sitzmass__zeile--drunter th,
.sitzmass__zeile--drueber td,
.sitzmass__zeile--drunter td {
	background: var(--pultgrau);
}

.sitzmass__satz {
	margin-bottom: 0;
	font-weight: 600;
}

/* =========================================================================
   15. Werkzeug 3 — Bildratekette
   ========================================================================= */

.bildratekette__kette {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
	margin: 1.25rem 0;
	padding: 0;
	list-style: none;
	counter-reset: glied;
}

.bildratekette__glied {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.85rem;
	background: var(--saalweiss);
	border: 2px solid var(--haarfuge);
	border-radius: var(--rundung);
}

.reihe--grund .bildratekette__glied {
	background: var(--pultgrau);
}

.bildratekette__glied--engstelle {
	border-color: var(--schirmlila);
	background: var(--pultgrau);
}

.reihe--grund .bildratekette__glied--engstelle {
	background: var(--saalweiss);
}

.bildratekette__name {
	display: block;
	font-size: 0.94rem;
	color: var(--stiftgrau);
}

.bildratekette__wert {
	display: block;
	font-family: 'Jakarta', system-ui, sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
}

.bildratekette__marke {
	display: inline-block;
	align-self: flex-start;
	margin-top: 0.25rem;
	padding: 0.15rem 0.5rem;
	background: var(--schirmlila);
	color: var(--saalweiss);
	border-radius: 0.2rem;
	font-size: 0.82rem;
	font-weight: 600;
}

.bildratekette__zeit {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--haarfuge);
}

.bildratekette__gross {
	display: block;
	font-family: 'Jakarta', system-ui, sans-serif;
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	font-weight: 600;
	line-height: 1.05;
	color: var(--petrol);
}

.bildratekette__bilder {
	display: block;
	font-weight: 600;
}

.bildratekette__satz {
	margin-bottom: 0.7rem;
	font-weight: 600;
}

.bildratekette__satz--gewinn {
	margin-bottom: 0;
	font-weight: 400;
	color: var(--stiftgrau);
}

/* =========================================================================
   16. Werkzeug 4 — Turnierbaum
   ========================================================================= */

.turnierbaum__zahlen {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.75rem;
	margin: 1.25rem 0;
	padding: 0;
	list-style: none;
}

.turnierbaum__zahl {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.75rem;
	background: var(--saalweiss);
	border: 1px solid var(--haarfuge);
	border-radius: var(--rundung);
}

.reihe--grund .turnierbaum__zahl {
	background: var(--pultgrau);
}

.turnierbaum__zahl strong {
	font-family: 'Jakarta', system-ui, sans-serif;
	font-size: 1.3rem;
	color: var(--petrol);
	line-height: 1.15;
}

.turnierbaum__gitter {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--haarfuge);
}

.turnierbaum__runde {
	display: grid;
	grid-template-columns: 7rem 1fr auto;
	gap: 0.75rem;
	align-items: center;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--haarfuge);
}

.turnierbaum__nummer {
	font-weight: 600;
}

.turnierbaum__runde--finale .turnierbaum__nummer {
	color: var(--petrol);
}

/* Die Blöcke sind reine Zeichnung. Sie liegen nebeneinander in einem
   Flusskasten, ohne Verbindungslinien und ohne z-index — gezeichnete Linien
   zwischen den Runden würden sich auf dem Telefon mit den Beschriftungen
   überlagern, und dafür gibt es hier keinen Gegenwert. */
.turnierbaum__bloecke {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	align-items: center;
}

.turnierbaum__paarung,
.turnierbaum__freilos {
	display: block;
	width: 0.85rem;
	height: 1.1rem;
	border-radius: 2px;
	flex: 0 0 auto;
}

.turnierbaum__paarung {
	background: var(--petrol);
}

.turnierbaum__freilos {
	background: transparent;
	border: 2px dashed var(--randgruen);
}

.turnierbaum__takt {
	color: var(--stiftgrau);
	font-size: 0.94rem;
	text-align: right;
}

.turnierbaum__abgleich {
	padding: 1rem 1.15rem;
	background: var(--saalweiss);
	border-left: 4px solid var(--petrol);
	border-radius: var(--rundung);
}

.reihe--grund .turnierbaum__abgleich {
	background: var(--pultgrau);
}

.turnierbaum__abgleichkopf {
	font-size: 1.05rem;
	margin-bottom: 0.5rem;
}

.turnierbaum__satz {
	margin-bottom: 0.6rem;
	color: var(--stiftgrau);
}

.turnierbaum__satz:last-child {
	margin-bottom: 0;
}

.turnierbaum__satz--knapp {
	color: var(--sperrrot);
	font-weight: 600;
}

/* =========================================================================
   16b. Bild über die volle Spaltenbreite
   ========================================================================= */

.breitbild {
	margin: 0 0 2rem;
}

.breitbild img {
	width: 100%;
	border: 1px solid var(--haarfuge);
	border-radius: var(--rundung);
}

.breitbild figcaption {
	margin-top: 0.6rem;
	color: var(--stiftgrau);
	font-size: 0.96rem;
}

/* =========================================================================
   17. Duo
   ========================================================================= */

.duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.duo__bild {
	margin: 0;
}

.duo__bild img {
	width: 100%;
	border-radius: var(--rundung);
	border: 1px solid var(--haarfuge);
}

.duo__kopf {
	margin-bottom: 0.6rem;
}

/* =========================================================================
   18. Platzschilder
   ========================================================================= */

.platzschilder {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: var(--raster);
	margin-bottom: 1.5rem;
}

.platzschild {
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 0 1rem;
	margin: 0;
	padding: 1.5rem 1.15rem 1rem;
	background: var(--pultgrau);
	border: 1px solid var(--haarfuge);
	border-radius: 0.55rem;
}

.reihe--tafel .platzschild {
	background: var(--saalweiss);
}

.platzschild__schraube {
	display: block;
	position: absolute;
	top: 0.55rem;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--haarfuge);
	border: 1px solid var(--randgruen);
}

.platzschild__schraube--links {
	left: 0.6rem;
}

.platzschild__schraube--rechts {
	right: 0.6rem;
}

.platzschild__nummer {
	display: block;
	font-family: 'Kanit', system-ui, sans-serif;
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 1;
	color: var(--petrol);
}

.platzschild__zitat {
	margin: 0;
}

.platzschild__zitat p {
	margin: 0;
}

.platzschild__fuss {
	grid-column: 1 / -1;
	margin-top: 0.9rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--haarfuge);
	font-size: 0.92rem;
	color: var(--stiftgrau);
}

/* =========================================================================
   19. Anzeigetafel
   -------------------------------------------------------------------------
   Die großen Ziffern sind gefüllt und nicht als Umriss in der Rahmenfarbe
   gezeichnet. Ein Umriss in --haarfuge sähe leichter aus und fiele beim
   Kontrast durch; --petrol steht bei 5,31 auf --saalweiss.
   ========================================================================= */

.anzeigetafel {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--raster);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stelle {
	padding: 1.25rem;
	background: var(--pultgrau);
	border: 1px solid var(--haarfuge);
	border-radius: var(--rundung);
}

.reihe--tafel .stelle {
	background: var(--saalweiss);
}

.stelle__zahl {
	display: block;
	font-family: 'Jakarta', system-ui, sans-serif;
	font-size: clamp(2.5rem, 6vw, 3.4rem);
	font-weight: 600;
	line-height: 1;
	color: var(--petrol);
	margin-bottom: 0.35rem;
}

.stelle__satz {
	display: block;
	color: var(--stiftgrau);
	font-size: 0.98rem;
}

/* =========================================================================
   20. Thekenteam
   ========================================================================= */

.thekenteam {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--raster);
}

.thekenbild {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 0 1.25rem;
	align-items: start;
	padding: 1.15rem;
	background: var(--saalweiss);
	border: 1px solid var(--haarfuge);
	border-radius: var(--rundung);
}

.reihe--grund .thekenbild {
	background: var(--pultgrau);
}

.thekenbild img {
	grid-row: 1 / span 3;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--rundung);
}

.thekenbild__name {
	margin-bottom: 0.1rem;
}

.thekenbild__rolle {
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--petrol);
}

.thekenbild__satz {
	margin-bottom: 0;
	color: var(--stiftgrau);
}

/* =========================================================================
   21. Spielplan
   ========================================================================= */

.spielplan {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--raster);
	margin-bottom: 1.5rem;
}

.spielzeile {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	background: var(--pultgrau);
	border: 1px solid var(--haarfuge);
	border-radius: var(--rundung);
}

.reihe--tafel .spielzeile {
	background: var(--saalweiss);
}

.spielzeile__marke {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--stiftgrau);
}

.spielzeile__zeit {
	font-family: 'Jakarta', system-ui, sans-serif;
	padding: 0.15rem 0.45rem;
	background: var(--saalweiss);
	border: 1px solid var(--randgruen);
	border-radius: 0.2rem;
}

.reihe--tafel .spielzeile__zeit {
	background: var(--pultgrau);
}

.spielzeile__punkt {
	display: inline-block;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	flex: 0 0 auto;
}

.spielzeile__punkt--petrol {
	background: var(--petrol);
}

.spielzeile__punkt--lila {
	background: var(--schirmlila);
}

.spielzeile__punkt--rot {
	background: var(--sperrrot);
}

.spielzeile__titel {
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
}

/* Der Titel ist auf dem Telefon das Raakvlak der ganzen Karte. Eine Zeile
   Text misst dreißig Pixel; mit dem Innenabstand kommt er über sechsunddreißig. */
.spielzeile__titel a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	color: var(--tafelschwarz);
	text-decoration: none;
}

.spielzeile__titel a:hover,
.spielzeile__titel a:focus {
	color: var(--petrol);
	text-decoration: underline;
}

.spielzeile__auszug {
	color: var(--stiftgrau);
}

.spielzeile__fuss {
	margin: auto 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--haarfuge);
	font-size: 0.9rem;
	color: var(--stiftgrau);
}

/* =========================================================================
   22. Saalnotiz — ein Beitrag
   ========================================================================= */

.saalnotiz__marke {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--stiftgrau);
}

.saalnotiz__kopf {
	margin-bottom: 0.4rem;
}

.saalnotiz__fuss {
	margin-bottom: 2rem;
	color: var(--stiftgrau);
	font-size: 0.96rem;
}

.saalnotiz__text p {
	font-size: 1.08rem;
}

.saalnotiz h2 {
	margin-top: 2rem;
	font-size: clamp(1.3rem, 2.8vw, 1.7rem);
}

.saalnotiz h3 {
	margin-top: 1.5rem;
}

.saalnotiz ul,
.hausregeln__liste {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
}

.saalnotiz li,
.hausregeln__liste li {
	margin-bottom: 0.55rem;
}

.hausregeln__liste {
	list-style: none;
	padding-left: 0;
}

.hausregeln__liste li {
	padding-left: 1.5rem;
	position: relative;
}

.hausregeln__liste li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65rem;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 2px;
	background: var(--petrol);
}

.platzkasten {
	margin: 2rem 0;
	padding: 1.25rem 1.35rem;
	background: var(--pultgrau);
	border-left: 4px solid var(--schirmlila);
	border-radius: var(--rundung);
}

.platzkasten__kopf {
	font-size: 1.05rem;
	margin-bottom: 0.4rem;
}

.platzkasten p {
	margin-bottom: 0;
}

.kontakt__adresse {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-bottom: 1rem;
	font-style: normal;
}

/* =========================================================================
   23. Hausfragen
   ========================================================================= */

.hausfragen {
	border-top: 1px solid var(--haarfuge);
}

.hausfrage {
	border-bottom: 1px solid var(--haarfuge);
}

.hausfrage__frage {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 3.25rem;
	padding: 0.75rem 0;
	font-family: 'Kanit', system-ui, sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.hausfrage__frage::-webkit-details-marker {
	display: none;
}

.hausfrage__frage::before {
	content: '+';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	flex: 0 0 auto;
	background: var(--petrol);
	color: var(--saalweiss);
	border-radius: var(--rundung);
	font-size: 1.1rem;
	line-height: 1;
}

.hausfrage[open] .hausfrage__frage::before {
	content: '\2212';
}

.hausfrage__antwort {
	padding-bottom: 1rem;
	color: var(--stiftgrau);
	max-width: 54rem;
}

.hausfrage__antwort p {
	margin-bottom: 0;
}

/* =========================================================================
   24. Formulare und Meldungen
   ========================================================================= */

.meldebogen {
	margin-bottom: 0;
}

.meldebogen__hinweis {
	font-size: 0.96rem;
	color: var(--stiftgrau);
}

/* Die Falle für Maschinen. Nicht mit hidden, sonst füllt kein Roboter sie aus. */
.kabelbinder {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.thekenzettel {
	padding: 0.9rem 1.15rem;
	margin-bottom: 1.5rem;
	background: var(--pultgrau);
	border-left: 4px solid var(--petrol);
	border-radius: var(--rundung);
	font-weight: 600;
}

.thekenzettel--fehler {
	border-left-color: var(--sperrrot);
	color: var(--sperrrot);
}

/* =========================================================================
   25. Einladung
   ========================================================================= */

.einladung {
	position: relative;
	background: var(--pultgrau);
	background-image: url('images/einladung.jpg');
	background-size: cover;
	background-position: center;
}

.einladung__innen {
	position: relative;
	padding-block: clamp(2rem, 5vw, 3.25rem);
}

.einladung__kopf,
.einladung__satz,
.einladung__tasten {
	max-width: 42rem;
	background: var(--saalweiss);
}

.einladung__kopf {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	margin-bottom: 0;
}

.einladung__satz {
	padding: 0.9rem;
	margin-bottom: 0;
}

.einladung__tasten {
	padding: 0 0.9rem 0.9rem;
}

/* =========================================================================
   26. Fußleiste
   ========================================================================= */

.sockelleiste {
	background: var(--tafelschwarz);
	color: var(--saalweiss);
	padding-block: clamp(2rem, 5vw, 3rem) 1.5rem;
}

.sockelleiste__innen {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--raster);
}

.sockelleiste__kopf {
	font-size: 1.05rem;
	color: var(--saalweiss);
	margin-bottom: 0.75rem;
}

.sockelleiste a {
	color: var(--pultgrau);
}

.sockelleiste a:hover,
.sockelleiste a:focus {
	color: var(--saalweiss);
}

.sockelleiste__adresse {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-style: normal;
	color: var(--pultgrau);
}

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

.sockelleiste__liste li {
	margin-bottom: 0.1rem;
}

.sockelleiste__liste a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
}

.sockelleiste__zeiten {
	margin: 0;
	color: var(--pultgrau);
	font-size: 0.96rem;
}

.sockelleiste__zeile {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.15rem 0;
}

.sockelleiste__zeile dt {
	font-weight: 600;
}

.sockelleiste__zeile dd {
	margin: 0;
	font-family: 'Jakarta', system-ui, sans-serif;
}

.sockelleiste__unten {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--stiftgrau);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
}

.sockelleiste__zeile-klein {
	margin: 0;
	font-size: 0.92rem;
	color: var(--pultgrau);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.sockelleiste__loeschen {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.3rem 0.85rem;
	background: transparent;
	border: 1px solid var(--pultgrau);
	border-radius: var(--rundung);
	color: var(--pultgrau);
	font-family: 'Jakarta', system-ui, sans-serif;
	font-size: 0.92rem;
	cursor: pointer;
}

.sockelleiste__loeschen:hover,
.sockelleiste__loeschen:focus {
	background: var(--pultgrau);
	color: var(--tafelschwarz);
}

.sockelleiste__stand {
	color: var(--pultgrau);
}

/* =========================================================================
   27. Das Speicherband
   -------------------------------------------------------------------------
   Die beiden Schaltflächen sind absichtlich identisch: gleiche Klasse,
   gleiche Größe, gleiche Farbe, gleicher Kontrast, gleiche Schrift. Ablehnen
   darf nicht schwerer zu finden sein als Einwilligen.
   ========================================================================= */

.speicherband {
	position: fixed;
	inset: auto 0 0 0;
	z-index: var(--ebene-band);
	background: var(--saalweiss);
	border-top: 3px solid var(--petrol);
	box-shadow: 0 -6px 24px rgba(26, 31, 28, 0.16);
}

.speicherband__innen {
	padding-block: 1.15rem;
}

.speicherband__kopf {
	font-size: 1.15rem;
	margin-bottom: 0.4rem;
}

.speicherband__satz {
	max-width: 60rem;
	margin-bottom: 0.9rem;
	font-size: 0.98rem;
	color: var(--stiftgrau);
}

.speicherband__tasten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0;
}

.speicherband__mehr {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 600;
}

.speicherband__name {
	font-weight: 600;
	white-space: nowrap;
}

/* =========================================================================
   28. Der leere Platz
   ========================================================================= */

.leerplatz__kopf {
	color: var(--petrol);
}

.leerplatz__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--haarfuge);
}

.leerplatz__liste li {
	border-bottom: 1px solid var(--haarfuge);
}

.leerplatz__liste a {
	display: flex;
	align-items: center;
	min-height: 3rem;
	font-weight: 600;
}

/* =========================================================================
   29. Blättern
   ========================================================================= */

.pagination {
	margin-top: 2rem;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.6rem;
	border: 1px solid var(--randgruen);
	border-radius: var(--rundung);
	text-decoration: none;
	font-weight: 600;
}

.page-numbers.current {
	background: var(--petrol);
	color: var(--saalweiss);
	border-color: var(--petrol);
}

/* =========================================================================
   30. Schmale Fenster
   ========================================================================= */

@media (max-width: 62rem) {
	.platzkarten,
	.platzschilder,
	.spielplan,
	.thekenteam {
		grid-template-columns: repeat(2, 1fr);
	}

	.anzeigetafel {
		grid-template-columns: repeat(2, 1fr);
	}

	.sockelleiste__innen {
		grid-template-columns: repeat(2, 1fr);
	}

	.bildratekette__kette {
		grid-template-columns: repeat(2, 1fr);
	}

	.turnierbaum__zahlen {
		grid-template-columns: repeat(3, 1fr);
	}

	.aufenthaltsuhr__anzeige,
	.sitzmass__anzeige,
	.duo {
		grid-template-columns: 1fr;
	}

	.aufenthaltsuhr__ring,
	.sitzmass__silhouette {
		max-width: 22rem;
	}
}

@media (max-width: 48rem) {
	.schnappe {
		display: inline-flex;
		order: 2;
	}

	/* Auf dem Telefon passen Name, Klappknopf und Schaltfläche nicht
	   nebeneinander: die Schaltfläche stünde 19 px über dem Rand hinaus und die
	   ganze Seite ließe sich seitwärts schieben. Sie entfällt hier, denn im
	   aufgeklappten Menü steht derselbe Weg an erster Stelle. */
	.traverse__ruf {
		display: none;
	}

	.traverse__name {
		margin-right: auto;
	}

	.gangreihe {
		order: 4;
		flex-basis: 100%;
		display: none;
	}

	.gangreihe.gangreihe--offen {
		display: block;
	}

	.gangreihe__liste {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: 0.5rem;
		border-top: 1px solid var(--haarfuge);
	}

	.gangreihe__liste li {
		border-bottom: 1px solid var(--haarfuge);
	}

	.gangreihe__liste a {
		min-height: 3rem;
		width: 100%;
		border-bottom: 0;
	}

	.saalblick__innen {
		margin-top: -2.5rem;
	}

	.platzkarten,
	.platzschilder,
	.spielplan,
	.thekenteam,
	.anzeigetafel,
	.sockelleiste__innen,
	.bildratekette__kette,
	.turnierbaum__zahlen {
		grid-template-columns: 1fr;
	}

	.thekenbild {
		grid-template-columns: 6.5rem 1fr;
	}

	.turnierbaum__runde {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}

	.turnierbaum__takt {
		text-align: left;
	}

	/* Die Tabellen werden zu Karten. Der thead wird nicht auf 1 px gestaucht:
	   die Zellen darin blieben in voller Größe als unsichtbare Rechtecke über
	   der ersten Zeile liegen und fingen Klicks ab. Jede Zelle einzeln
	   ausblenden ist der einzige Weg, der wirklich verschwindet. */
	.stundentabelle,
	.freigabetabelle,
	.stundentabelle tbody,
	.freigabetabelle tbody,
	.stundentabelle tr,
	.freigabetabelle tr,
	.stundentabelle td,
	.freigabetabelle td,
	.stundentabelle tbody th,
	.freigabetabelle tbody th {
		display: block;
		width: 100%;
	}

	.stundentabelle thead,
	.freigabetabelle thead,
	.stundentabelle thead tr,
	.freigabetabelle thead tr,
	.stundentabelle thead th,
	.freigabetabelle thead th {
		display: none;
	}

	/* Eine caption bleibt beim display:block der Tabelle sonst table-caption. */
	.stundentabelle caption,
	.freigabetabelle caption {
		display: block;
	}

	.stundentabelle tbody tr,
	.freigabetabelle tbody tr {
		padding: 0.5rem 0;
		border-bottom: 2px solid var(--haarfuge);
	}

	.stundentabelle tbody tr:last-child,
	.freigabetabelle tbody tr:last-child {
		border-bottom: 0;
	}

	.stundentabelle tbody th,
	.freigabetabelle tbody th {
		border-bottom: 0;
		padding-bottom: 0.2rem;
		font-size: 1.1rem;
	}

	.stundentabelle tbody td,
	.freigabetabelle tbody td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		border-bottom: 0;
		padding-block: 0.3rem;
	}

	.stundentabelle tbody td::before,
	.freigabetabelle tbody td::before {
		content: attr(data-spalte);
		font-weight: 600;
		color: var(--stiftgrau);
	}

	.speicherband__tasten .taste {
		flex: 1 1 8rem;
	}
}

@media (max-width: 26rem) {
	.traverse__wort {
		font-size: 1.2rem;
	}

	.schnappe__wort {
		display: none;
	}

	.platzschild {
		grid-template-columns: 2.75rem 1fr;
	}

	.platzschild__nummer {
		font-size: 2rem;
	}
}

/* =========================================================================
   31. Auftauchen beim Scrollen
   -------------------------------------------------------------------------
   Bewegt wird nur die Lage, nicht die Deckkraft. Ein Element, das bei 0
   Deckkraft auf eine Klasse wartet, kann sie unter Umständen nie bekommen —
   dann steht dort unsichtbarer Text, und keine Prüfung auf Sichtbarkeit
   bemerkt es, weil das Element formal im Fluss steht. So kann das nicht
   passieren: schlimmstenfalls sitzt ein Block vierzehn Pixel zu tief.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
	.js-an .einloggen {
		transform: translateY(14px);
		transition: transform 0.45s ease-out;
	}

	.js-an .einloggen--drin {
		transform: none;
	}
}

/* =========================================================================
   32. Druck
   ========================================================================= */

@media print {
	.traverse,
	.speicherband,
	.kabelweg,
	.einladung,
	.schnappe {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}