/*
 * Bausteine der Verwaltung: Kursplan (Raster, Karten, Tabs, Legende, Hinweise, Druck),
 * Aktion (Band + Dialog), Öffnungszeiten-Tabelle. Mobile-first.
 * Benutzt ausschließlich Tokens und Klassen aus theme.css (.container, .sektion, .button, .kicker,
 * --kat-<slug>-flaeche/-text, Schrift-Tokens); Fallbacks nur für den Fall, dass ein Token fehlt.
 */

/* ---------- Gemeinsames ---------- */

/* Kategorie-Farben: die gemessenen Tokens aus theme.css (--kat-<slug>-flaeche für Pille/Karte,
   --kat-<slug>-text für Schrift und Farbleiste, ≥ 7:1 auf Weiß) – Kursplan und Kurs-Karten sind so farbgleich */
.kursplan .kategorie--yoga    { --kp-flaeche: var(--kat-yoga-flaeche);    --kp-text: var(--kat-yoga-text); }
.kursplan .kategorie--pilates { --kp-flaeche: var(--kat-pilates-flaeche); --kp-text: var(--kat-pilates-text); }
.kursplan .kategorie--ruecken { --kp-flaeche: var(--kat-ruecken-flaeche); --kp-text: var(--kat-ruecken-text); }
.kursplan .kategorie--bauch   { --kp-flaeche: var(--kat-bauch-flaeche);   --kp-text: var(--kat-bauch-text); }
.kursplan .kategorie--kraft   { --kp-flaeche: var(--kat-kraft-flaeche);   --kp-text: var(--kat-kraft-text); }
.kursplan .kategorie--cycling { --kp-flaeche: var(--kat-cycling-flaeche); --kp-text: var(--kat-cycling-text); }
.kursplan .kategorie--cardio  { --kp-flaeche: var(--kat-cardio-flaeche);  --kp-text: var(--kat-cardio-text); }
.kursplan .kategorie--tanz    { --kp-flaeche: var(--kat-tanz-flaeche);    --kp-text: var(--kat-tanz-text); }
.kursplan .kategorie--reha    { --kp-flaeche: var(--kat-reha-flaeche);    --kp-text: var(--kat-reha-text); }

/* ---------- Kursplan: Kopf und Legende ---------- */

.kursplan-kopf {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.kursplan-kopf-text {
	max-width: 40rem;
}

.kursplan-titel {
	margin: 0;
}

.kursplan-text {
	margin: 0.75rem 0 0;
	color: var(--grau-text, #5B6470);
}

.kursplan-legende-titel {
	margin: 0 0 0.5rem;
	font-size: var(--schrift-klein, 15px);
	font-weight: 600;
	color: var(--grau-text, #5B6470);
}

.kursplan-legende-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pille: Klasse und Farben aus theme.css (.kategorie, .kategorie--<slug>); hier nur Punkt und Maß */
.kursplan-legende .kategorie {
	gap: 0.5rem;
	min-height: 2rem;
	padding: 0.2rem 0.75rem 0.2rem 0.6rem;
	background: var(--kp-flaeche, var(--hellgrau, #F3F4F6));
	color: var(--kp-text, var(--anthrazit, #1F2328));
}

.kursplan-legende .kategorie::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--kp-text, currentColor);
}

/* ---------- Kursplan: Tabs (mobil) ---------- */

/* Die Reiter brechen bei Platzmangel in eine zweite Zeile um – kein seitliches Scrollen,
   das auf Touch-Geräten ohne sichtbaren Balken niemand entdeckt. */
.kursplan-tabs {
	display: none;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1rem;
	padding: 0;
}

.kursplan-tab {
	flex: 1 1 auto;
	min-width: 3rem;
	min-height: 44px;
	padding: 0.5rem 0.6rem;
	/* Rand in --grau-rand (3,07:1 auf Weiß) – die Reiterform ist als Bedienelement erkennbar (WCAG 1.4.11) */
	border: 2px solid var(--grau-rand, #8B94A0);
	border-radius: 8px;
	background: var(--weiss, #FFFFFF);
	color: var(--anthrazit, #1F2328);
	font-family: var(--schrift-titel, "Outfit", system-ui, sans-serif);
	font-size: var(--schrift-fliess, 17px);
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
}

.kursplan-tab .kursplan-tab-lang {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.kursplan-tab[aria-selected="true"] {
	border-color: var(--anthrazit, #1F2328);
	background: var(--anthrazit, #1F2328);
	color: var(--weiss, #FFFFFF);
}

.kursplan-tab:hover:not([aria-selected="true"]) {
	border-color: var(--anthrazit, #1F2328);
}

.kursplan-tab:focus-visible {
	outline: 2px solid var(--anthrazit, #1F2328);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--weiss, #FFFFFF);
}

/* Unter 360 px (z. B. 320 px): sechs Reiter gleich breit in einer Zeile statt „So“ als vollbreiter Knopf in Zeile zwei */
@media (max-width: 359.98px) {
	.kursplan-tabs {
		gap: 2px;
	}

	.kursplan-tab {
		flex: 1 1 0;
		min-width: 0;
		padding: 0.5rem 0.25rem;
	}
}

/* Hinweis über den Reitern, wenn am heutigen Tag keine Kurse stattfinden (setzt bausteine.js) */
.kursplan-heute-hinweis {
	margin: 0 0 1rem;
	color: var(--grau-text, #5B6470);
	font-size: var(--schrift-klein, 15px);
}

/* Mit JavaScript und unter 900 px: Tabs zeigen, nur den gewählten Tag anzeigen */
@media (max-width: 899.98px) {
	html:not(.kein-js) .kursplan-tabs {
		display: flex;
	}

	html:not(.kein-js) .kursplan-tag[hidden] {
		display: none;
	}

	html:not(.kein-js) .kursplan-tag-titel {
		/* Der Tab benennt den Tag bereits; der Titel bleibt für Screenreader und den Druck. */
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Lange Tagesnamen erst, wenn sieben Reiter nebeneinander passen (ab 640 px) */
@media (min-width: 640px) {
	.kursplan-tab .kursplan-tab-kurz {
		display: none;
	}

	.kursplan-tab .kursplan-tab-lang {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}
}

/* ---------- Kursplan: Raster und Karten ---------- */

.kursplan-raster {
	display: grid;
	gap: 2rem;
}

.kursplan-tag {
	position: relative;
	min-width: 0;
}

.kursplan-tag-titel {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--anthrazit, #1F2328);
	font-size: var(--schrift-zwischen, 22px);
	line-height: 1.25;
}

.kursplan-heute {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--orange-tief, #C8420F);
	color: var(--weiss, #FFFFFF);
	font-size: var(--schrift-klein, 15px);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.kursplan-liste {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kursplan-karte {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"zeit kurs"
		"zeit raum";
	column-gap: 1rem;
	align-items: start;
	padding: 0.7rem 0.9rem 0.7rem 1rem;
	border-left: 4px solid var(--kp-text, var(--anthrazit, #1F2328));
	border-radius: 0 12px 12px 0;
	background: var(--kp-flaeche, var(--hellgrau, #F3F4F6));
	color: var(--anthrazit, #1F2328);
}

.kursplan-karte.kategorie--reha {
	background: var(--weiss, #FFFFFF);
	border-left-style: dashed;
	box-shadow: inset 0 0 0 1px var(--grau-linie, #D9DCE1);
}

.kursplan-zeit {
	grid-area: zeit;
	font-family: var(--schrift-titel, "Outfit", system-ui, sans-serif);
	font-size: var(--schrift-klein, 15px);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.55;
	white-space: nowrap;
	color: var(--kp-text, var(--anthrazit, #1F2328));
}

/* Trennung nur an weichen Trennzeichen („Langhantel&shy;training“ ergänzt viva_weich_trennen()); overflow-wrap bleibt
   als Rückfall für sehr lange Namen aus dem Admin. */
.kursplan-kurs,
.kursplan a.kursplan-kurs {
	grid-area: kurs;
	overflow-wrap: anywhere;
	hyphens: manual;
	font-family: var(--schrift-titel, "Outfit", system-ui, sans-serif);
	font-size: var(--schrift-fliess, 17px);
	font-weight: 700;
	line-height: 1.35;
	color: var(--anthrazit, #1F2328);
	text-decoration: none;
}

a.kursplan-kurs {
	/* Zielgröße ≥ 24 px (WCAG 2.5.8) auch bei einzeiligem Kursnamen */
	display: inline-block;
	min-height: 24px;
	line-height: 1.45;
	text-decoration: underline;
	text-decoration-color: var(--kp-text, currentColor);
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

/* Die ganze Karte ist Ziel des Links (Zielgröße ≥ 44 px auf Touch-Breiten, wie .kurs-karte-link in theme.css) */
a.kursplan-kurs::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0 12px 12px 0;
}

a.kursplan-kurs:hover,
.kursplan-karte:hover a.kursplan-kurs {
	text-decoration-thickness: 2px;
}

a.kursplan-kurs:focus-visible {
	outline: none;
	box-shadow: none;
}

.kursplan-karte:has(a.kursplan-kurs:focus-visible) {
	outline: 2px solid var(--anthrazit, #1F2328);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--weiss, #FFFFFF);
}

/* Rückfall für Browser ohne :has() */
a.kursplan-kurs:focus-visible::after {
	outline: 2px solid var(--anthrazit, #1F2328);
	outline-offset: 2px;
}

.kursplan-raum {
	grid-area: raum;
	font-size: var(--schrift-klein, 15px);
	color: var(--grau-text, #5B6470);
}

.kursplan-karte.kategorie--reha .kursplan-kurs,
.kursplan-karte.kategorie--reha .kursplan-zeit {
	color: var(--kat-reha-text);
}

.kursplan-leer {
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px dashed var(--grau-linie, #D9DCE1);
	border-radius: 12px;
	color: var(--grau-text, #5B6470);
	font-size: var(--schrift-klein, 15px);
}

/* Desktop ≥ 900 px: eine Spalte je Tag */
@media (min-width: 900px) {
	.kursplan-kopf {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 3rem;
	}

	.kursplan-legende {
		flex: 0 1 auto;
	}

	/* 900–1023 px: drei Spalten (zwei Reihen), damit Kursnamen nicht silbengetrennt werden; ab 1024 px eine Spalte je Tag */
	.kursplan-raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}

	/* Innenabstand knapp, damit „Langhanteltraining“ (151 px, Outfit 700 17 px) ab 1100 px in die 180-px-Karte passt */
	.kursplan-karte {
		grid-template-columns: 1fr;
		grid-template-areas:
			"zeit"
			"kurs"
			"raum";
		padding: 0.75rem 0.6rem 0.75rem 0.75rem;
	}

	.kursplan-zeit {
		margin-bottom: 0.15rem;
	}

	.kursplan-tag-titel {
		font-size: var(--schrift-fliess, 17px);
	}

	.kursplan-heute {
		font-size: var(--schrift-klein, 15px);
	}
}

@media (min-width: 1024px) {
	.kursplan-raster {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.kursplan-raster {
		gap: 1.5rem;
	}

	.kursplan-tag-titel {
		font-size: var(--schrift-zwischen, 22px);
	}
}

/* Kompakt (Startseite): die H2 behält --schrift-sektion (32–40 px) wie alle Sektionsüberschriften der Startseite
   (Prüfrunde 2, Befund 8 – vorher mobil 22 px, gleich groß wie die H3 der Kurs-Karten). */

/* ---------- Kursplan: Hinweise, Fuß, Druck ---------- */

.kursplan-hinweise {
	margin-top: 2.5rem;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--orange, #E9501F);
	border-radius: 0 12px 12px 0;
	background: var(--hellgrau, #F3F4F6);
}

.kursplan-hinweise-titel {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: var(--schrift-zwischen, 22px);
}

.kursplan-hinweise-titel .icon {
	flex: none;
	color: var(--orange-tief, #C8420F);
}

.kursplan-hinweise-text {
	max-width: 40rem;
}

.kursplan-hinweise-text > :first-child {
	margin-top: 0;
}

.kursplan-hinweise-text > :last-child {
	margin-bottom: 0;
}

.kursplan-hinweise-text p,
.kursplan-hinweise-text ul,
.kursplan-hinweise-text ol {
	margin: 0 0 0.75rem;
}

/* Sektion auf Hellgrau: Hinweiskasten auf Weiß */
.sektion--grau .kursplan-hinweise,
.kursplan.sektion--grau .kursplan-hinweise {
	background: var(--weiss, #FFFFFF);
}

.kursplan-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0 0;
}

.kursplan-drucken .icon {
	width: 1.25rem;
	height: 1.25rem;
}

.kursplan-druck-hinweis {
	display: none;
	max-width: 40rem;
	color: var(--grau-text, #5B6470);
	font-size: var(--schrift-klein, 15px);
}

html.kein-js .kursplan-drucken {
	display: none;
}

html.kein-js .kursplan-druck-hinweis {
	display: block;
}

@media print {
	.kursplan-tabs,
	.kursplan-fuss,
	.kursplan-heute {
		display: none !important;
	}

	.kursplan {
		padding: 0;
	}

	.kursplan-kopf {
		display: block;
		margin-bottom: 1rem;
	}

	.kursplan-legende-liste {
		gap: 0.5rem 1rem;
	}

	.kursplan .kategorie {
		padding: 0;
		background: none !important;
		color: #000;
	}

	.kursplan-legende .kategorie::before {
		background: #000;
	}

	.kursplan-raster {
		display: block;
	}

	.kursplan-tag {
		display: block !important;
		margin: 0 0 1.25rem;
		break-inside: avoid;
	}

	/* Beim Druck gilt die Papierbreite (A4 ≈ 794 px), also auch die Mobilregel oben – deshalb hier
	   mit derselben Spezifität (html:not(.kein-js) …) und !important, sonst fehlen die Tagestitel im Ausdruck. */
	html:not(.kein-js) .kursplan-tag-titel,
	html.kein-js .kursplan-tag-titel {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 0 0.25rem !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
		white-space: normal !important;
		font-size: 14pt;
		border-bottom: 1px solid #000;
	}

	.kursplan-liste {
		display: table;
		width: 100%;
		border-collapse: collapse;
		gap: 0;
	}

	.kursplan-karte {
		display: table-row;
		background: none !important;
		border: 0;
		box-shadow: none;
		font-size: 10.5pt;
	}

	.kursplan-zeit,
	.kursplan-kurs,
	.kursplan-raum,
	.kursplan-kategorie {
		display: table-cell;
		padding: 3pt 8pt 3pt 0;
		border-bottom: 1px solid #bbb;
		color: #000;
		font-size: 10.5pt;
		vertical-align: top;
	}

	.kursplan-kategorie {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: nowrap;
	}

	.kursplan a.kursplan-kurs {
		color: #000;
		text-decoration: none;
	}

	.kursplan-hinweise {
		margin-top: 1rem;
		padding: 0.5rem 0 0;
		border: 0;
		border-top: 1px solid #000;
		border-radius: 0;
		background: none;
	}
}

/* ---------- Aktion: Band ---------- */

.aktion-band {
	padding-top: 72px;
	padding-bottom: 72px;
	background: var(--hellgrau, #F3F4F6);
}

.aktion-band-inhalt {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.aktion-band-text {
	max-width: 44rem;
}

.aktion-titel {
	margin: 0;
	text-wrap: balance;
	hyphens: manual;
	font-family: var(--schrift-titel, "Outfit", system-ui, sans-serif);
	font-size: var(--schrift-sektion, 40px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--anthrazit, #1F2328);
}

.aktion-text {
	margin: 1rem 0 0;
	font-size: var(--schrift-fliess, 17px);
}

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

/* Aufzählungszeichen: .liste-strich aus theme.css (Markup in aktion.php) */

.aktion-hinweis {
	max-width: 36rem;
	margin: 1rem 0 0;
	color: var(--grau-text, #5B6470);
	font-size: var(--schrift-klein, 15px);
}

.aktion-band-cta {
	flex: none;
}

.aktion-band-cta .button {
	width: 100%;
	max-width: 24rem;
	justify-content: center;
}

@media (min-width: 900px) {
	.aktion-band-inhalt {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 4rem;
	}

	.aktion-band-cta .button {
		width: auto;
	}
}

/* ---------- Aktion: Dialog ---------- */

/* Der Dialog selbst scrollt nicht: Kopf (Kicker + Schließen-Kreuz) und Aktionen bleiben stehen, nur der
   Textkörper scrollt (Prüfrunde 2, Befund 5 – bei 320 × 568 und 844 × 390 lagen Kreuz und CTA außerhalb). */
.aktion-dialog {
	width: min(34rem, calc(100vw - 2.5rem));
	max-width: 34rem;
	max-height: min(90vh, 90dvh);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--weiss, #FFFFFF);
	color: var(--anthrazit, #1F2328);
	box-shadow: 0 24px 64px rgba(31, 35, 40, 0.25);
	overflow: hidden;
}

.aktion-dialog[open] {
	display: flex;
	flex-direction: column;
}

.aktion-dialog::backdrop {
	background: rgba(17, 19, 21, 0.6);
}

.aktion-dialog[open] {
	animation: aktion-auf 240ms ease-out;
}

.aktion-dialog[open]::backdrop {
	animation: aktion-backdrop 240ms ease-out;
}

@keyframes aktion-auf {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes aktion-backdrop {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aktion-dialog[open],
	.aktion-dialog[open]::backdrop {
		animation: none;
	}
}

.aktion-dialog-inhalt {
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: min(90vh, 90dvh);
	padding: 0.75rem 1.5rem 1.5rem;
}

.aktion-dialog-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex: none;
	margin-bottom: 0.5rem;
}

.aktion-dialog-kopf .kicker {
	margin: 0;
}

.aktion-dialog-koerper {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	/* etwas Luft, damit der Fokusring des CTA-Links nicht am Rand des Scrollbereichs abgeschnitten wird */
	padding: 0.25rem 0.25rem 0.5rem 0;
	margin-right: -0.25rem;
}

.aktion-schliessen {
	flex: none;
	margin-right: -0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--anthrazit, #1F2328);
	cursor: pointer;
}

.aktion-schliessen:hover {
	background: var(--hellgrau, #F3F4F6);
}

.aktion-schliessen:focus-visible,
.aktion-dialog .button:focus-visible {
	outline: 2px solid var(--anthrazit, #1F2328);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--weiss, #FFFFFF);
}

.aktion-dialog-titel {
	margin: 0;
	text-wrap: balance;
	hyphens: manual;
	font-family: var(--schrift-titel, "Outfit", system-ui, sans-serif);
	font-size: var(--schrift-sektion, 40px);
	font-weight: 700;
	line-height: 1.1;
}

.aktion-dialog-text {
	margin-top: 1rem;
}

.aktion-dialog-text > p {
	margin: 0 0 0.75rem;
}

.aktion-dialog-text .aktion-punkte {
	margin-top: 0.75rem;
}

.aktion-dialog-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	flex: none;
	margin-top: 1rem;
}

.aktion-dialog-aktionen .button {
	flex: 1 1 auto;
	justify-content: center;
}

/* Unter 360 px: CTA wie im Hero ohne Icon und mit knappem Innenabstand, damit „Jetzt Probetraining buchen“ einzeilig bleibt */
@media (max-width: 359.98px) {
	.aktion-dialog-inhalt {
		padding-inline: 1.25rem;
	}

	.aktion-dialog-aktionen .button {
		padding-inline: 12px;
	}

	.aktion-dialog-aktionen .button .icon {
		display: none;
	}
}

@media (min-width: 480px) {
	.aktion-dialog-inhalt {
		padding: 1.25rem 2.25rem 2rem;
	}

	.aktion-dialog-kopf {
		margin-bottom: 0.75rem;
	}

	.aktion-dialog-aktionen {
		margin-top: 1.25rem;
	}
}

/* ---------- Öffnungszeiten ---------- */

.zeiten-titel {
	margin: 0 0 1rem;
}

.zeiten {
	width: 100%;
	max-width: 36rem;
	border-collapse: collapse;
	font-size: var(--schrift-fliess, 17px);
}

.zeiten caption {
	padding: 0 0 0.5rem;
	text-align: left;
	font-family: var(--schrift-titel, "Outfit", system-ui, sans-serif);
	font-weight: 700;
	font-size: var(--schrift-zwischen, 22px);
	color: var(--anthrazit, #1F2328);
}

.zeiten th,
.zeiten td {
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--grau-linie, #D9DCE1);
	text-align: left;
	vertical-align: top;
	line-height: 1.55;
}

/* Der Tagesname darf umbrechen („Montag –“ / „Donnerstag“), die Zeitspanne bleibt immer einzeilig –
   sonst bricht in schmalen Spalten (Fuß, Seitenleiste) „09:00 –“ / „13:00 Uhr“ mitten im Wert. */
.zeiten th {
	padding-right: 1rem;
	font-family: var(--schrift-titel, "Outfit", system-ui, sans-serif);
	font-weight: 600;
}

.zeiten td {
	font-variant-numeric: tabular-nums;
}

.zeiten tr:not(.zeiten-feiertag) td {
	white-space: nowrap;
}

/* Unter 360 px mit WCAG-Textabständen (1.4.12) liefe die Zelle sonst über den Viewport; geschützte Leerzeichen
   (template-parts/oeffnungszeiten.php) lassen nur den Umbruch nach dem Gedankenstrich zu: „09:00 –“ / „13:00 Uhr“. */
@media (max-width: 359.98px) {
	.zeiten tr:not(.zeiten-feiertag) td {
		white-space: normal;
	}
}

.zeiten tr:last-child th,
.zeiten tr:last-child td {
	border-bottom: 0;
}

.zeiten-feiertag th,
.zeiten-feiertag td {
	color: var(--grau-text, #5B6470);
}

.zeiten-hinweis {
	max-width: 36rem;
	margin: 1rem 0 0;
	padding-left: 1rem;
	border-left: 3px solid var(--orange, #E9501F);
	color: var(--grau-text, #5B6470);
	font-size: var(--schrift-klein, 15px);
}

.zeiten-block--kompakt .zeiten {
	font-size: var(--schrift-klein, 15px);
}

.zeiten-block--kompakt .zeiten th,
.zeiten-block--kompakt .zeiten td {
	padding-block: 0.4rem;
}

.zeiten-block--kompakt .zeiten-hinweis {
	font-size: var(--schrift-klein, 15px);
}

/* Auf dunklen Flächen (z. B. Fuß): Farben erben */
.zeiten-block--hell .zeiten th,
.zeiten-block--hell .zeiten td,
.zeiten-block--hell .zeiten caption,
.zeiten-block--hell .zeiten-hinweis,
.zeiten-block--hell .zeiten-titel {
	color: inherit;
	border-color: currentColor;
}