/**
 * Pilates Office – Frontend.
 *
 * Farben kommen aus den globalen Elementor-Variablen des Themes, mit den
 * Studiofarben als Rückfallebene. Färbt das Studio sein Kit um, zieht das
 * Buchungssystem mit, ohne dass hier jemand CSS anfassen muss.
 *
 * Schrift wird geerbt (Poppins/Oswald aus dem Kit) — gesetzt werden nur Größen
 * und Gewichte, damit Theme-Überschriften die Karten nicht sprengen.
 *
 * Barrierefreiheit:
 * - Weiß auf dem Studio-Orange erreicht nur 2,97:1. Buttons tragen deshalb
 *   dunkle Schrift (5,2:1) statt weißer. WCAG 2.2 AA verlangt 4,5:1.
 * - Sekundärtext ist kräftig genug für 4,5:1, auch auf der cremefarbenen Fläche.
 * - Jedes bedienbare Element hat einen sichtbaren Fokusring und mindestens
 *   44 px Trefferfläche (WCAG 2.2, 2.5.8 Target Size).
 * - Zustände werden nie allein über Farbe transportiert, immer auch über Text.
 */

.po-schedule,
.po-dashboard,
.po-card,
.po-notices,
.po-modal {
	--po-primary: var( --e-global-color-primary, #f36f24 );
	--po-primary-dark: var( --e-global-color-secondary, #cf5f1f );

	/* Gefüllte Schaltflächen tragen weiße Schrift. Auf dem hellen
	   Studio-Orange erreicht Weiß nur 2,95:1 — WCAG 2.2 AA verlangt 4,5:1.
	   Derselbe Farbton, nur tiefer, kommt auf 4,87:1 und bleibt erkennbar
	   die Hausfarbe. Umrandungen, Kachelkanten und Akzente behalten das
	   originale Orange. */
	--po-primary-strong: #b85410;
	--po-primary-stronger: #99450b;
	--po-text: var( --e-global-color-text, #222222 );
	--po-surface: #fbf7f2;
	--po-card: #ffffff;

	--po-line: rgba( 34, 34, 34, 0.14 );
	--po-muted: rgba( 34, 34, 34, 0.72 );

	--po-ok: #1e6b23;
	--po-warn: #8a5000;
	--po-danger: #a82315;

	--po-radius: 12px;
	--po-tap: 44px;

	color: var( --po-text );
}

/* Ein Fokusring für alles Bedienbare. Dunkel, damit er auf Weiß, auf der
   Cremefläche und auf dem orangen Button gleichermaßen sichtbar ist. */
.po-schedule :focus-visible,
.po-dashboard :focus-visible,
.po-card :focus-visible,
.po-modal :focus-visible {
	outline: 3px solid var( --po-text );
	outline-offset: 2px;
	border-radius: 4px;
}

@media ( prefers-reduced-motion: reduce ) {
	.po-schedule *,
	.po-dashboard *,
	.po-card * {
		transition: none !important;
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ Karten */

.po-card {
	background: var( --po-card );
	border: 1px solid var( --po-line );
	border-radius: var( --po-radius );
	padding: 2rem;
	margin: 0 0 1.75rem;
}

.po-card--narrow {
	max-width: 32rem;
	margin-inline: auto;
}

/* Überschriften in Karten: Familie erben, Größe selbst bestimmen. Sonst
   schlägt die Kit-Typografie (Oswald, sehr groß) in die Karte durch. */
.po-card .po-card__title,
.po-dashboard .po-card__title {
	margin: 0 0 1.25rem;
	font-size: 1.15rem;
	line-height: 1.3;
	letter-spacing: 0;
}

/* ---------------------------------------------------------------- Formulare */

.po-form {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
}

.po-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.po-field__label {
	font-size: 0.9rem;
	font-weight: 600;
}

.po-field input[type="text"],
.po-field input[type="email"],
.po-field input[type="tel"],
.po-field input[type="date"],
.po-field input[type="password"],
.po-field textarea {
	width: 100%;
	min-height: var( --po-tap );
	padding: 0.7rem 0.85rem;
	border: 1px solid var( --po-line );
	border-radius: 8px;
	font: inherit;
	color: var( --po-text );
	background: var( --po-card );
}

.po-field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.65rem;
	min-height: var( --po-tap );
}

.po-field--check input {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	flex: none;
}

.po-grid-2 {
	display: grid;
	gap: 1.15rem;
	grid-template-columns: 1fr 1fr;
}

/* Honeypot: für Menschen unsichtbar, für Bots ein verlockendes Feld. */
.po-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ Buttons */

.po-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: var( --po-tap );
	padding: 0.6rem 1.35rem;
	border: 1px solid var( --po-primary-strong );
	border-radius: 999px;
	background: var( --po-primary-strong );
	color: #fff;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.po-button:hover,
.po-button:focus-visible {
	background: var( --po-primary-stronger );
	border-color: var( --po-primary-stronger );
	color: #fff;
}

.po-button--ghost {
	background: var( --po-card );
	color: var( --po-text );
	border-color: var( --po-line );
}

.po-button--ghost:hover,
.po-button--ghost:focus-visible {
	background: var( --po-surface );
	color: var( --po-text );
	border-color: var( --po-primary );
}

.po-button[disabled],
.po-button.is-busy {
	opacity: 0.55;
	cursor: progress;
}

/* Das Kit färbt Links und Schaltflächen selbst ein — Links über
   `.elementor-kit-NN a`, Buttons über `.elementor-kit-NN button`. Beides
   schlägt eine einfache Klasse wie `.po-button`. Die Folge war weiße Schrift
   auf dem Studio-Orange (2,95:1, WCAG verlangt 4,5:1) und ein heller
   Nebenknopf, der plötzlich wie der Hauptknopf aussah.

   `:is( a, button )` zählt als Typselektor und hebt die Regel damit knapp
   über die des Kits — ohne ein einziges !important. */
:is( .po-card, .po-schedule, .po-dashboard, .po-modal ) :is( a, button ).po-button,
:is( .po-card, .po-schedule, .po-dashboard, .po-modal ) :is( a, button ).po-button:visited {
	background: var( --po-primary-strong );
	border-color: var( --po-primary-strong );
	color: #fff;
}

:is( .po-card, .po-schedule, .po-dashboard, .po-modal ) :is( a, button ).po-button--ghost,
:is( .po-card, .po-schedule, .po-dashboard, .po-modal ) :is( a, button ).po-button--ghost:visited {
	background: var( --po-card );
	border-color: var( --po-line );
	color: var( --po-text );
}

:is( .po-card, .po-schedule, .po-dashboard, .po-modal ) :is( a, button ).po-button:not( .po-button--ghost ):hover,
:is( .po-card, .po-schedule, .po-dashboard, .po-modal ) :is( a, button ).po-button:not( .po-button--ghost ):focus-visible {
	background: var( --po-primary-stronger );
	border-color: var( --po-primary-stronger );
	color: #fff;
}

:is( .po-card, .po-schedule, .po-dashboard, .po-modal ) :is( a, button ).po-button--ghost:hover,
:is( .po-card, .po-schedule, .po-dashboard, .po-modal ) :is( a, button ).po-button--ghost:focus-visible {
	background: var( --po-surface );
	border-color: var( --po-primary );
	color: var( --po-text );
}

/* Auch normale Textlinks im Plugin fielen unter die Kit-Regel und standen
   orange auf Weiß — 2,95:1. Dunkel und unterstrichen ist beides gelöst: der
   Kontrast stimmt, und der Link ist auch ohne Farbe als Link erkennbar. */
:is( .po-card, .po-schedule, .po-dashboard, .po-modal ) a:not( .po-button ):not( .po-chip ),
:is( .po-card, .po-schedule, .po-dashboard, .po-modal ) a:not( .po-button ):not( .po-chip ):visited {
	color: var( --po-text );
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Die beiden Links unter der Begrüßung stehen allein in ihrer Zeile und
   sind deshalb echte Ziele — mit 44 px Trefferfläche statt 23. */
.po-dashboard__head a {
	display: inline-block;
	min-height: var( --po-tap );
	padding-block: 0.6rem;
	padding-inline: 0.2rem;
}

/* Dieselbe Geschichte bei den Filterchips: das Kit färbte die Schrift
   orange, das ergab auf Weiß 2,95:1 — unlesbar für genau die Zielgruppe,
   die hier bucht. */
.po-schedule a.po-chip,
.po-schedule a.po-chip:visited {
	color: var( --po-text );
}

/* Das Theme setzt Buttons global auf Oswald in Versalien. In der Kursliste
   ist die Aktion aber Beiwerk, nicht Plakat — deshalb hier zurückholen. */
.po-schedule .po-button,
.po-dashboard .po-button,
.po-card .po-button {
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* Nur für Screenreader: meldet nach dem Filtern, was jetzt zu sehen ist.
   Ohne das würde sich der Plan lautlos austauschen. */
.po-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* Während nachgeladen wird: sichtbar, aber gedimmt — und keine Klicks auf
   halb ausgetauschte Inhalte. */
[ data-po-schedule ][ aria-busy='true' ] {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ----------------------------------------------------------------- Hinweise */

.po-notices {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
}

.po-notice {
	border: 1px solid var( --po-line );
	border-left: 4px solid var( --po-muted );
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: 0 0 0.9rem;
	background: var( --po-card );
	font-size: 0.95rem;
	line-height: 1.55;
}

.po-notice--info { border-left-color: #1c6091; background: rgba( 28, 96, 145, 0.06 ); }
.po-notice--success { border-left-color: var( --po-ok ); background: rgba( 30, 107, 35, 0.06 ); }
.po-notice--warning { border-left-color: var( --po-warn ); background: rgba( 138, 80, 0, 0.07 ); }
.po-notice--danger { border-left-color: var( --po-danger ); background: rgba( 168, 35, 21, 0.06 ); }

/* Aktuelles aus dem Studio, beim ersten Aufruf nach dem Anmelden.
   Als natives <dialog>: Fokusfalle, Escape und das Sperren des Hintergrunds
   kommen damit vom Browser und nicht aus nachgebautem JavaScript. */
.po-modal {
	width: min( 34rem, calc( 100vw - 2rem ) );
	max-height: min( 80vh, 44rem );
	overflow-y: auto;
	padding: 2rem;
	border: 0;
	border-top: 5px solid var( --e-global-color-primary, #f36f24 );
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba( 34, 34, 34, 0.25 );
	color: var( --e-global-color-text, #222222 );
}

.po-modal::backdrop {
	background: rgba( 34, 34, 34, 0.55 );
}

.po-modal .po-notices {
	margin-bottom: 1.5rem;
}

.po-modal .po-notices__title {
	margin: 0 0 1.25rem;
	font-size: 1.2rem;
	line-height: 1.3;
	letter-spacing: 0;
}

.po-modal .po-modal__close {
	display: flex;
	width: 100%;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* Auf der Seite selbst braucht die Überschrift keine eigene Betonung —
   sie steht dort im Fluss der übrigen Abschnitte. */
.po-notices__title {
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

.po-flash {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	color: var( --po-ok );
}

.po-flash--error { color: var( --po-danger ); }

.po-muted { color: var( --po-muted ); }
.po-small { font-size: 0.87rem; }

/* ----------------------------------------------------------------- Kursplan */

.po-schedule {
	padding-block: 0.5rem;
}

/* Steht der Shortcode auf einer schlichten Seite ohne Elementor-Container,
   fehlt ihm dessen Innenabstand und er klebt am Rand. Dann übernimmt das
   Plugin die Maße aus dem Kit. Steckt er in einem Container, greift die
   Regel nicht — die Kindauswahl trifft dann nicht zu und der Abstand
   wird nicht doppelt. */
.page-content > .po-schedule,
.page-content > .po-dashboard,
.page-content > .po-card,
.entry-content > .po-schedule,
.entry-content > .po-dashboard,
.entry-content > .po-card {
	box-sizing: border-box;
	width: 100%;
	max-width: var( --container-max-width, 1600px );
	margin-inline: auto;
	padding-inline: 5%;
	padding-block: clamp( 2rem, 5vw, 50px );
}

.po-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.75rem;
	padding: 1.15rem 1.5rem;
	margin-bottom: 2.25rem;
	background: var( --po-surface );
	border-radius: var( --po-radius );
}

.po-toolbar__nav {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.po-toolbar__week {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.po-toolbar__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.po-toolbar__credits {
	font-size: 0.95rem;
	color: var( --po-muted );
}

.po-chip {
	display: inline-flex;
	align-items: center;
	min-height: var( --po-tap );
	padding: 0.35rem 1rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var( --po-card );
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none;
	color: var( --po-text );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.po-chip:hover { border-color: var( --po-primary ); color: var( --po-text ); }

.po-chip.is-active,
.po-schedule a.po-chip.is-active,
.po-schedule a.po-chip.is-active:visited {
	background: var( --po-primary-strong );
	border-color: var( --po-primary-strong );
	color: #fff;
	font-weight: 600;
}

.po-week {
	display: grid;
	gap: 2.75rem;
}

/* Tagesüberschrift: eine Zeile Orientierung, kein Plakat. Die hohe
   Spezifität hält die Überschriften-Typografie des Themes draußen. */
.po-schedule .po-day .po-day__title {
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var( --po-line );
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --po-muted );
}

.po-slots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.po-slot {
	display: grid;
	grid-template-columns: 9rem minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 0.75rem 1.75rem;
	padding: 1.15rem 1.5rem;
	background: var( --po-card );
	border: 1px solid var( --po-line );
	border-left: 4px solid var( --po-slot-color, var( --po-primary ) );
	border-radius: var( --po-radius );
	transition: box-shadow 0.15s ease;
}

.po-slot:hover {
	box-shadow: 0 2px 14px rgba( 34, 34, 34, 0.08 );
}

.po-slot__time {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 0.97rem;
	white-space: nowrap;
}

.po-slot__main {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.po-slot__title {
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.35;
}

.po-slot__meta {
	font-size: 0.87rem;
	line-height: 1.5;
	color: var( --po-muted );
}

/* Der Grund, warum gerade nicht gebucht werden kann, ist eine Erklärung —
   keine Fehlermeldung. Deshalb dezent statt rot. */
.po-slot__reason {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var( --po-muted );
}

.po-slot__action {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.po-state {
	font-size: 0.9rem;
	color: var( --po-muted );
}

.po-state--ok {
	color: var( --po-ok );
	font-weight: 600;
}

/* ------------------------------------------------------------ Kurs-Zustände */

/* Nicht buchbar: zurücknehmen, nicht alarmieren. */
.po-slot--closed,
.po-slot--blocked,
.po-slot--full {
	background: var( --po-surface );
}

.po-slot--closed .po-slot__title,
.po-slot--blocked .po-slot__title {
	font-weight: 500;
}

/* Eigene Buchung: ruhig grün, damit man seine Termine im Plan sofort findet. */
.po-slot--booked,
.po-slot--fixed_booked {
	background: rgba( 30, 107, 35, 0.05 );
	border-color: rgba( 30, 107, 35, 0.35 );
}

.po-slot--released {
	background: repeating-linear-gradient(
		135deg,
		var( --po-surface ),
		var( --po-surface ) 8px,
		rgba( 34, 34, 34, 0.035 ) 8px,
		rgba( 34, 34, 34, 0.035 ) 16px
	);
}

.po-slot--cancelled .po-slot__title {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Leere Woche. Eine leere Fläche liest sich wie ein Fehler — hier steht
   stattdessen, was los ist und wie es weitergeht. */
.po-empty {
	padding: 2rem 1.75rem;
	background: var( --po-surface );
	border: 1px solid var( --po-line );
	border-radius: var( --po-radius );
	text-align: center;
}

.po-empty__text {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	line-height: 1.6;
}

.po-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
}

/* --------------------------------------------------------------- Dashboard */

.po-dashboard__head {
	margin-bottom: 1.75rem;
}

.po-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.po-list--compact {
	gap: 0.35rem;
	font-size: 0.93rem;
}

.po-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var( --po-line );
}

.po-list__item:last-child { border-bottom: 0; }

.po-list__item--row { justify-content: space-between; }

.po-list__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.po-dot {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	display: inline-block;
	flex: none;
}

.po-tag {
	display: inline-block;
	padding: 0.15rem 0.65rem;
	border-radius: 999px;
	background: var( --po-surface );
	border: 1px solid var( --po-line );
	font-size: 0.78rem;
	font-weight: 500;
	color: var( --po-muted );
}

.po-slot__main .po-tag {
	align-self: flex-start;
}

.po-tag--late_cancelled,
.po-tag--no_show {
	background: rgba( 168, 35, 21, 0.1 );
	border-color: transparent;
	color: var( --po-danger );
}

.po-tag--attended {
	background: rgba( 30, 107, 35, 0.1 );
	border-color: transparent;
	color: var( --po-ok );
}

.po-credits {
	font-size: 1.05rem;
}

/* Eigene Daten: erst zeigen, was gespeichert ist, und das Formular dahinter
   wegklappen. Ein sofort sichtbares Formular liest sich wie ein
   Kontaktformular — man weiß nicht, ob man etwas absenden soll. */
.po-data {
	margin: 0 0 1.25rem;
}

.po-data__row {
	display: grid;
	grid-template-columns: 12rem minmax( 0, 1fr );
	gap: 0.3rem 1.25rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var( --po-line );
}

.po-data__row:last-child {
	border-bottom: 0;
}

.po-data dt {
	margin: 0;
	font-size: 0.88rem;
	color: var( --po-muted );
}

.po-data dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.po-details {
	border-top: 1px solid var( --po-line );
	padding-top: 0.5rem;
}

.po-details__summary {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: var( --po-tap );
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	list-style: none;
}

.po-details__summary::-webkit-details-marker {
	display: none;
}

.po-details__summary::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	border-radius: 50%;
	background: var( --po-surface );
	border: 1px solid var( --po-line );
	font-weight: 700;
	line-height: 1;
}

.po-details[open] .po-details__summary::before {
	content: "\2013";
}

.po-details > .po-form {
	margin-top: 1.25rem;
}

@media ( max-width: 720px ) {
	.po-data__row {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

/* ------------------------------------------------------------------ Mittel */

@media ( max-width: 1024px ) {
	.po-slot {
		grid-template-columns: 7.5rem minmax( 0, 1fr ) auto;
		gap: 0.7rem 1.25rem;
		padding: 1.05rem 1.25rem;
	}

	.po-week { gap: 2.25rem; }
}

/* ------------------------------------------------------------------- Klein */

@media ( max-width: 720px ) {
	.po-slot {
		grid-template-columns: 1fr;
		gap: 0.65rem;
		padding: 1.15rem 1.25rem;
	}

	/* Uhrzeit zuerst, dann Kurs, dann Aktion — dieselbe Reihenfolge wie
	   im Fließtext, damit Screenreader und Auge dasselbe lesen. */
	.po-slot__action {
		justify-content: flex-start;
	}

	.po-slot__action .po-button {
		width: 100%;
	}

	.po-grid-2 {
		grid-template-columns: 1fr;
	}

	.po-toolbar {
		align-items: stretch;
		gap: 1rem;
		padding: 1.1rem 1.15rem;
	}

	/* Drei Elemente nebeneinander sprengen 375 px. Das Datum bekommt eine
	   eigene Zeile, die beiden Pfeile teilen sich die darunter. */
	.po-toolbar__nav {
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0.5rem;
	}

	.po-toolbar__week {
		order: -1;
		width: 100%;
		text-align: center;
	}

	/* Beide Pfeile teilen sich eine Zeile, statt untereinander zu stehen.
	   Auf 375 px kostete der gestapelte Kopf sonst fast den halben Bildschirm,
	   bevor der erste Kurs zu sehen war. */
	.po-toolbar__nav .po-button {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: 0.6rem;
		font-size: 0.85rem;
	}

	.po-toolbar__filter .po-chip {
		padding-inline: 0.75rem;
		font-size: 0.82rem;
	}

	.po-card {
		padding: 1.4rem;
	}

	.po-list__item--row {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* ================================================================ 1.6.0 */

/* ------------------------------------------------------- Ausfall = grau
   So kennen es die Kundinnen aus dem alten Plan und so steht es in Judiths
   Erklärung: grau hinterlegt heißt, der Kurs findet nicht statt. Grau ist
   dabei nie der einzige Hinweis — der Titel ist durchgestrichen und
   "Fällt aus" steht als Text daneben. */
.po-slot--cancelled {
	background: #e6e6e6;
	border-color: #c8c8c8;
	border-left-color: #767676;
}

.po-slot--cancelled .po-slot__title,
.po-slot--cancelled .po-slot__time {
	color: #4a4a4a;
}

.po-slot--cancelled .po-slot__meta,
.po-slot--cancelled .po-slot__reason,
.po-slot--cancelled .po-state {
	color: #3d3d3d;
}

.po-slot--cancelled .po-slot__reason {
	font-weight: 600;
}

/* Vorbei: zurücktreten, aber lesbar bleiben — deshalb keine Deckkraft,
   die würde den Kontrast unter 4,5:1 drücken. */
.po-slot--past {
	background: var( --po-surface );
	border-left-color: var( --po-line );
	box-shadow: none;
}

.po-slot--past .po-slot__title {
	font-weight: 500;
}

.po-slot--past:hover {
	box-shadow: none;
}

/* ------------------------------------------------------------- Heute */

.po-schedule .po-day--today .po-day__title {
	color: var( --po-primary-strong );
	border-bottom: 2px solid var( --po-primary-strong );
}

.po-day__today {
	display: inline-block;
	margin-left: 0.6rem;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: var( --po-primary-strong );
	color: #fff;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	vertical-align: 0.1em;
}

/* ---------------------------------------------- Erklärung über dem Plan */

.po-intro {
	margin: 0 0 1.75rem;
	background: var( --po-surface );
	border: 1px solid var( --po-line );
	border-left: 4px solid var( --po-primary );
	border-radius: var( --po-radius );
}

.po-intro__summary {
	display: flex;
	align-items: center;
	min-height: var( --po-tap );
	padding: 0.75rem 1.5rem;
	font-weight: 700;
	font-size: 1.05rem;
	cursor: pointer;
	list-style: none;
}

.po-intro__summary::-webkit-details-marker {
	display: none;
}

/* Eigener Pfeil statt des Browser-Dreiecks: größer, und er zeigt, in welche
   Richtung es aufgeht. */
.po-intro__summary::after {
	content: "";
	margin-left: auto;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.15s ease;
}

.po-intro[open] > .po-intro__summary::after {
	transform: rotate( -135deg );
}

.po-intro__body {
	padding: 0 1.5rem 1.25rem;
	font-size: 1rem;
	line-height: 1.65;
}

.po-intro__body p {
	margin: 0 0 0.9rem;
}

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

/* ------------------------------------------- Matte oder Reformer?
   Zwei gleich große Karten ganz oben. Farbe trägt hier keine Bedeutung —
   Ocker und Türkis stehen im Plan für die Räume und bleiben dafür frei. */
.po-choice {
	margin: 0 0 2rem;
}

.po-schedule .po-choice .po-choice__title {
	margin: 0 0 1rem;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var( --po-text );
}

.po-choice__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1rem;
}

.po-choice__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1.5rem;
	background: var( --po-card );
	border: 1px solid var( --po-line );
	border-top: 4px solid var( --po-primary );
	border-radius: var( --po-radius );
}

.po-choice__card--reformer {
	border-top-color: var( --po-text );
}

.po-schedule .po-choice .po-choice__name {
	margin: 0;
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var( --po-text );
}

.po-choice__where {
	margin: 0;
	font-weight: 600;
	line-height: 1.5;
}

.po-choice__text {
	margin: 0 0 0.5rem;
	line-height: 1.55;
	color: var( --po-muted );
}

/* Knopf ans untere Ende, damit beide Karten auf einer Linie abschließen. */
.po-choice__card .po-button {
	box-sizing: border-box;
	max-width: 100%;
	margin-top: auto;
}

/* Sprungziel: Sticky-Header des Themes soll den Plan nicht verdecken. */
#po-plan {
	scroll-margin-top: 110px;
}

#po-plan:focus {
	outline: none;
}

@media ( max-width: 720px ) {
	.po-choice__grid { grid-template-columns: 1fr; }
	.po-choice__card { padding: 1.25rem; }
	.po-choice__card .po-button { width: 100%; }
}

/* --------------------------------------------- Urlaube unter dem Plan */

.po-absences {
	margin-top: 2.75rem;
	padding: 1.5rem;
	background: var( --po-surface );
	border: 1px solid var( --po-line );
	border-radius: var( --po-radius );
}

.po-schedule .po-absences .po-absences__title {
	margin: 0 0 1rem;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var( --po-text );
}

.po-absences__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.po-absences__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.9rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var( --po-line );
	line-height: 1.5;
}

.po-absences__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* --------------------------------------------------- X im Aushang-Fenster */

.po-modal .po-notices__title {
	padding-right: 2.5rem;
}

.po-modal button.po-modal__x {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --po-tap, 44px );
	height: var( --po-tap, 44px );
	padding: 0;
	border: 2px solid var( --e-global-color-text, #222222 );
	border-radius: 50%;
	background: #fff;
	color: var( --e-global-color-text, #222222 );
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.po-modal button.po-modal__x:hover,
.po-modal button.po-modal__x:focus-visible {
	background: var( --e-global-color-text, #222222 );
	color: #fff;
}

/* Das Fenster zählte seinen Innenabstand zur Breite dazu (content-box) und
   ragte auf 375 px rechts aus dem Bild — das X war halb abgeschnitten. */
.po-modal {
	box-sizing: border-box;
}

@media ( max-width: 720px ) {
	.po-modal { padding: 1.5rem 1.25rem; }

	/* "Dein fester Platz" bekommt eine eigene Zeile, der Knopf die volle
	   Breite darunter — statt drei Wörter untereinander neben dem Knopf. */
	.po-slot__action { flex-wrap: wrap; }
	.po-slot__action .po-state { flex: 1 0 100%; }

	.po-intro__summary { padding-inline: 1.15rem; }
	.po-intro__body { padding-inline: 1.15rem; }
	.po-absences { padding: 1.15rem; }
}

/* ================================================================ 1.8.0 */

/* "Aktuelles aus dem Studio" auf der Seite (nach dem Schließen des Fensters):
   Das Theme macht jede h2 zur Plakat-Überschrift. Hier ist es nur ein
   Abschnittstitel. Im Fenster selbst gilt weiter die .po-modal-Regel. */
:is( .po-schedule, .po-dashboard ) .po-notices .po-notices__title {
	margin: 0 0 0.75rem;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var( --po-text );
}

/* ---------------------------------------------------------- Zählmodus
   Zwei Knöpfe nebeneinander. Was gerade nicht geht, bleibt sichtbar, ist
   aber deutlich zurückgenommen — darunter steht als Text, warum. WCAG nimmt
   abgeschaltete Bedienelemente vom Kontrastgebot aus; lesbar bleibt es
   trotzdem. */
.po-slot__action {
	flex-wrap: wrap;
	justify-content: flex-end;
}

:is( .po-schedule, .po-dashboard ) :is( a, button ).po-button:disabled,
:is( .po-schedule, .po-dashboard ) :is( a, button ).po-button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: none;
}

:is( .po-schedule, .po-dashboard ) :is( a, button ).po-button:disabled:hover {
	background: inherit;
}

/* ------------------------------------------------------ Woche / Monat */
.po-toolbar__view {
	order: -2;
}

/* -------------------------------------------------------- Monatsansicht */

/* Das ganze Tagesfeld ist der Link — unterstrichen wäre jede Zeile darin
   wie ein eigener Link. Die allgemeine Link-Regel oben (Unterstreichung für
   Textlinks) wird deshalb hier gezielt aufgehoben. */
:is( .po-card, .po-schedule, .po-dashboard, .po-modal ) a.po-month__link:not( .po-button ):not( .po-chip ),
:is( .po-card, .po-schedule, .po-dashboard, .po-modal ) a.po-month__link:not( .po-button ):not( .po-chip ):visited {
	color: var( --po-text );
	text-decoration: none;
}
.po-month__hint {
	margin: 0 0 1rem;
	color: var( --po-muted );
	font-size: 0.95rem;
}

.po-month__head,
.po-month__grid {
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 0.6rem;
}

.po-month--cols-7 .po-month__head,
.po-month--cols-7 .po-month__grid {
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
}

.po-month__head {
	margin-bottom: 0.4rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --po-muted );
}

.po-month__head span {
	padding-left: 0.75rem;
}

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

.po-month__day,
.po-month__blank {
	min-height: 7.5rem;
	border-radius: var( --po-radius );
}

.po-month__day {
	position: relative;
	background: var( --po-card );
	border: 1px solid var( --po-line );
}

.po-month__day.is-empty {
	background: transparent;
	border-style: dashed;
}

.po-month__day.is-past {
	background: var( --po-surface );
}

/* Ausfall: grau, wie im Wochenplan — und "Fällt aus" steht als Text da. */
.po-month__day.is-off {
	background: #e6e6e6;
	border-color: #c8c8c8;
}

.po-month__day.is-today {
	border: 2px solid var( --po-primary-strong );
}

.po-month__link,
.po-month__day.is-empty {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.7rem 0.75rem;
}

.po-month__link {
	height: 100%;
	box-sizing: border-box;
	border-radius: inherit;
	color: inherit;
	text-decoration: none;
}

.po-month__link:hover {
	background: rgba( 34, 34, 34, 0.04 );
}

.po-month__link:focus-visible {
	outline: 3px solid var( --po-text );
	outline-offset: 2px;
}

.po-month__num {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.po-month__day.is-empty .po-month__num {
	color: var( --po-muted );
	font-weight: 500;
}

/* Den ausgeschriebenen Tag braucht nur die Handy-Liste — im Raster sagt
   die Spalte, welcher Wochentag es ist. Screenreader bekommen ihn immer. */
.po-month__date {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.po-month__today {
	align-self: flex-start;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var( --po-primary-strong );
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.po-month__line {
	font-size: 0.88rem;
	line-height: 1.35;
}

.po-month__line--off {
	font-weight: 600;
	color: #3d3d3d;
}

.po-month__line--free {
	color: var( --po-ok );
	font-weight: 600;
}

/* Tablet: Raster bleibt, aber kompakter. */
@media ( max-width: 1024px ) {
	.po-month__head,
	.po-month__grid { gap: 0.4rem; }
	.po-month__day,
	.po-month__blank { min-height: 6.5rem; }
	.po-month__link,
	.po-month__day.is-empty { padding: 0.55rem 0.6rem; }
	.po-month__line { font-size: 0.8rem; }
}

/* Handy: das Raster bleibt (Mo–Fr passt in 5 Spalten). Im Feld nur noch
   die Zahl und eine Kurzzeile ("5 frei", "voll", "fällt aus"). */
@media ( max-width: 720px ) {
	.po-month__head,
	.po-month__grid { gap: 0.3rem; }

	.po-month__head span {
		padding-left: 0;
		text-align: center;
	}

	.po-month__day,
	.po-month__blank { min-height: 3.75rem; }

	.po-month__link,
	.po-month__day.is-empty {
		align-items: center;
		justify-content: center;
		gap: 0.15rem;
		padding: 0.4rem 0.2rem;
		text-align: center;
	}

	.po-month__num { font-size: 1.15rem; }

	.po-month__line,
	.po-month__today { display: none; }

	.po-month__short {
		display: block;
		font-size: 0.72rem;
		font-weight: 700;
		line-height: 1.2;
		color: var( --po-ok );
	}

	.po-month--cols-7 .po-month__head,
	.po-month--cols-7 .po-month__grid { gap: 0.2rem; }
}

/* ================================================================ 1.8.4 */

/* Rückfrage beim Termin ("Wirklich austragen?") statt Browser-Fenster. */
.po-ask {
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.75rem;
	border-radius: var( --po-radius );
	background: rgba( 184, 84, 16, 0.07 );
	outline: 2px solid var( --po-primary-strong );
}

.po-ask__question {
	flex-basis: 100%;
	font-weight: 700;
	font-size: 1rem;
}

@media ( max-width: 720px ) {
	.po-ask .po-button {
		width: 100%;
	}
}

/* ================================================================ 1.9.0 */

/* Monat vor / zurück, Monatsname groß dazwischen. */
.po-toolbar__nav--month {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
}

:is( .po-schedule ) .po-toolbar__month {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.2;
	text-align: center;
}

@media ( max-width: 720px ) {
	:is( .po-schedule ) .po-toolbar__month { font-size: 1.15rem; }
	.po-toolbar__nav--month .po-button { padding-left: 0.75rem; padding-right: 0.75rem; }
	.po-toolbar__navtext { display: none; }
}

/* Heute: nur das Wort "Heute", kein eigener Rahmen — der Rahmen gehört dem
   angetippten Tag, sonst gäbe es zwei hervorgehobene Felder. */
.po-month__day.is-today {
	border: 1px solid var( --po-line );
}

.po-month__day.is-selected {
	border: 3px solid var( --po-primary-strong );
	background: #fff4ec;
}

.po-month__day.is-selected .po-month__num {
	color: var( --po-primary-stronger );
}

/* "alles voll" ist keine gute Nachricht — also nicht grün. */
.po-month__line--free.is-full,
.po-month__short.is-full {
	color: var( --po-muted );
}

/* Kurzzeile nur auf dem Handy. */
.po-month__short { display: none; }

.po-month__short--off {
	color: #3d3d3d !important;
}

@media ( max-width: 720px ) {
	.po-month__short { display: block; }
	.po-month__day.is-today .po-month__num {
		text-decoration: underline;
		text-decoration-thickness: 3px;
		text-underline-offset: 4px;
		text-decoration-color: var( --po-primary-strong );
	}
}

/* Die Kurse des angetippten Tages. */
.po-daylist {
	margin-top: 1.75rem;
	scroll-margin-top: 6rem;
}

.po-daylist:focus { outline: none; }

:is( .po-schedule ) .po-daylist__title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	font-size: 1.3rem;
	line-height: 1.3;
}

.po-daylist__staff {
	margin: 0 0 1rem;
	padding: 0.6rem 0.9rem;
	border-radius: var( --po-radius );
	background: var( --po-surface );
	font-size: 0.9rem;
	color: var( --po-muted );
}

/* Raum als Farbfeld mit Namen: hellblau / orange wie im Studio. */
.po-slot__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
}

.po-room {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
	background: var( --po-room, #e6e6e6 );
	color: #1a1a1a;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.5;
}

.po-slot--cancelled .po-room,
.po-slot--past .po-room {
	opacity: 0.6;
}

/* ================================================================ 1.9.3 */

/* Anmeldefeld statt Kursplan: ein Satz, warum. */
.po-card__lead {
	margin: 0 0 1.25rem;
	font-size: 1rem;
	line-height: 1.5;
}

/* ================================================================ 1.9.6 */

/* Abmelden unter den Auswahlkarten, rechtsbündig. */
.po-logout {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 1rem;
}

.po-logout .po-button {
	min-height: var( --po-tap );
}