/*
 * Shop auf der Website: Kurstermine, Banner, Buchungsformular, Danke-Seite.
 * Nur Tokens var(--pe-…) aus dem Zusatz-CSS der Seite (marke/design-system.html), dadurch auch im Dunkelmodus richtig.
 * Rot (--pe-aktion) nur für „Jetzt buchen“ und „Zahlungspflichtig buchen“, Fehler als roter Rand.
 */

/* Banner „Kurse im … buchbar“ */
.pe-banner {
	margin: 0;
	padding: var(--pe-space-4) var(--pe-gutter);
	background: var(--pe-aktion);
	color: var(--pe-aktion-text);
	font-weight: var(--pe-fw-heavy);
	font-size: var(--pe-fs-h3);
	line-height: var(--pe-lh-snug);
	text-align: center;
}

/* Kurstermine als Karten */
.pe-kursliste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--pe-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pe-kurskarte {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--pe-space-5);
	background: var(--pe-flaeche);
	color: var(--pe-text);
	border: var(--pe-border-w) solid var(--pe-rand);
	border-top: var(--pe-space-1) solid var(--pe-akzent);
	border-radius: var(--pe-r-md);
}
.pe-kurskarte .pe-dachzeile {
	margin: 0 0 var(--pe-space-1);
}
.pe-kurskarte__titel {
	margin: 0 0 var(--pe-space-3);
	font-size: var(--pe-fs-h3);
	color: var(--pe-ueberschrift);
}
.pe-kurskarte__platz {
	align-self: flex-start;
	margin: 0 0 var(--pe-space-4);
	padding: var(--pe-space-1) var(--pe-space-3);
	border: var(--pe-border-w) solid var(--pe-rand-stark);
	border-radius: var(--pe-r-sm);
	font-size: var(--pe-fs-sm);
	font-weight: var(--pe-fw-semibold);
}
.pe-kurskarte__platz--wenig,
.pe-kurskarte__platz--voll {
	border-color: var(--pe-aktion);
}
.pe-kurskarte__untertitel {
	margin: 0 0 var(--pe-space-1);
	font-weight: var(--pe-fw-semibold);
	color: var(--pe-ueberschrift);
}
.pe-kurskarte__termine,
.pe-kasse-kopf__termine ul {
	margin: 0 0 var(--pe-space-4);
	padding-left: var(--pe-space-5);
}
.pe-kurskarte__hinweis {
	margin: 0 0 var(--pe-space-4);
	color: var(--pe-text-leise);
}
.pe-kurskarte__preis {
	margin: auto 0 0;
	font-size: var(--pe-fs-h2);
	font-weight: var(--pe-fw-heavy);
	color: var(--pe-ueberschrift);
	line-height: var(--pe-lh-tight);
}
.pe-kurskarte__steuer,
.pe-ueberweisung__steuer {
	margin: var(--pe-space-1) 0 var(--pe-space-4);
	font-size: var(--pe-fs-sm);
	color: var(--pe-text-leise);
}
.pe-kurskarte__aktion {
	margin: 0;
}
.pe-kurskarte__status {
	font-weight: var(--pe-fw-bold);
}
.pe-knopf-buchen,
.pe-buchung button.pe-knopf-buchen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pe-tap);
	padding: var(--pe-space-3) var(--pe-space-5);
	background: var(--pe-aktion);
	color: var(--pe-aktion-text);
	border: 0;
	border-radius: var(--pe-r-sm);
	font-weight: var(--pe-fw-bold);
	font-size: var(--pe-fs-button);
	text-decoration: none;
	cursor: pointer;
}
.pe-knopf-buchen:hover,
.pe-knopf-buchen:focus-visible {
	background: var(--pe-aktion-hover);
	color: var(--pe-aktion-text);
}
.pe-shop-leer,
.pe-hinweisbox {
	padding: var(--pe-space-4) var(--pe-space-5);
	background: var(--pe-flaeche-2);
	border-left: var(--pe-space-1) solid var(--pe-akzent);
	border-radius: var(--pe-r-sm);
}

/* Buchung */
.pe-buchung {
	max-width: var(--pe-narrow);
	color: var(--pe-text);
}
/* Kopf der Kasse: kompakt, Termine aufklappbar */
.pe-kasse-kopf {
	margin-bottom: var(--pe-space-5);
	padding: var(--pe-space-4) var(--pe-space-5);
	background: var(--pe-flaeche-2);
	border-top: var(--pe-space-1) solid var(--pe-akzent);
	border-radius: var(--pe-r-md);
}
.pe-kasse-kopf .pe-dachzeile {
	margin: 0;
}
.pe-kasse-kopf__titel {
	margin: 0;
	font-size: var(--pe-fs-h3);
	line-height: var(--pe-lh-snug);
	color: var(--pe-ueberschrift);
}
.pe-kasse-kopf__preis {
	margin: var(--pe-space-1) 0 var(--pe-space-2);
}
.pe-kasse-kopf__preis strong {
	font-size: var(--pe-fs-h4);
	color: var(--pe-ueberschrift);
}
.pe-kasse-kopf__preis span,
.pe-b-ueberblick__gesamt span {
	font-size: var(--pe-fs-sm);
	color: var(--pe-text-leise);
}
.pe-kasse-kopf__termine summary {
	min-height: var(--pe-tap);
	display: flex;
	align-items: center;
	gap: var(--pe-space-2);
	font-weight: var(--pe-fw-semibold);
	color: var(--pe-link);
	cursor: pointer;
	list-style: none;
}
.pe-kasse-kopf__termine summary::-webkit-details-marker {
	display: none;
}
.pe-kasse-kopf__termine summary span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.pe-kasse-kopf__termine .pe-icon {
	flex: 0 0 auto;
	width: var(--pe-space-5);
	height: var(--pe-space-5);
	transition: transform var(--pe-dur-fast);
}
.pe-kasse-kopf__termine[open] .pe-icon {
	transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
	.pe-kasse-kopf__termine .pe-icon {
		transition: none;
	}
}

/* Einladung über einen geteilten Link */
.pe-einladung {
	margin: 0 0 var(--pe-space-4);
	padding: var(--pe-space-4) var(--pe-space-5);
	background: var(--pe-flaeche-2);
	border-left: var(--pe-space-1) solid var(--pe-akzent);
	border-radius: var(--pe-r-sm);
}
.pe-einladung p {
	margin: 0;
}
.pe-einladung .pe-einladung__titel {
	margin-bottom: var(--pe-space-1);
	font-size: var(--pe-fs-h4);
	font-weight: var(--pe-fw-bold);
	color: var(--pe-ueberschrift);
}
.pe-kasse-kopf__termine ul {
	margin-bottom: 0;
}
.pe-buchungsformular fieldset {
	margin: 0 0 var(--pe-space-6);
	padding: 0;
	border: 0;
}
.pe-buchungsformular legend {
	margin-bottom: var(--pe-space-4);
	font-size: var(--pe-fs-h4);
	font-weight: var(--pe-fw-bold);
	color: var(--pe-ueberschrift);
}
.pe-b-zeile {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pe-space-4);
}
.pe-b-zeile--plz {
	grid-template-columns: 8rem 1fr;
}
.pe-b-zeile--strasse {
	grid-template-columns: 1fr 6rem;
}
.pe-b-feld {
	display: flex;
	flex-direction: column;
	gap: var(--pe-space-1);
	margin: 0 0 var(--pe-space-4);
}
.pe-b-feld label {
	font-weight: var(--pe-fw-semibold);
	color: var(--pe-ueberschrift);
}
.pe-b-hilfe {
	font-size: var(--pe-fs-sm);
	color: var(--pe-text-leise);
}
.pe-b-fehler {
	font-weight: var(--pe-fw-bold);
}
.pe-buchungsformular input[type="text"],
.pe-buchungsformular input[type="email"],
.pe-buchungsformular input[type="tel"],
.pe-buchungsformular select {
	width: 100%;
	min-height: var(--pe-tap);
	padding: var(--pe-space-3);
	font: inherit;
	color: var(--pe-text);
	background: var(--pe-flaeche);
	border: var(--pe-border-w) solid var(--pe-rand-stark);
	border-radius: var(--pe-r-sm);
	box-sizing: border-box;
}
.pe-buchungsformular [aria-invalid="true"] {
	border: var(--pe-border-w-strong) solid var(--pe-aktion);
}
.pe-b-hinweis {
	margin: 0 0 var(--pe-space-3);
	font-size: var(--pe-fs-sm);
}
.pe-b-haken {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--pe-space-1) var(--pe-space-3);
	align-items: start;
	margin: 0 0 var(--pe-space-4);
}
.pe-b-haken .pe-b-fehler {
	grid-column: 1 / -1;
}
.pe-b-haken input {
	width: var(--pe-space-5);
	height: var(--pe-space-5);
	margin: var(--pe-space-1) 0 0;
	accent-color: var(--pe-akzent);
}
.pe-b-haken--fehler {
	padding-left: var(--pe-space-3);
	border-left: var(--pe-border-w-strong) solid var(--pe-aktion);
}
/* Pflichtangaben direkt über dem Knopf (§ 312j BGB) */
.pe-b-ueberblick {
	margin: 0 0 var(--pe-space-4);
	padding: var(--pe-space-4) var(--pe-space-5);
	border: var(--pe-border-w) solid var(--pe-rand);
	border-radius: var(--pe-r-md);
	font-size: var(--pe-fs-sm);
}
.pe-b-ueberblick__titel {
	margin: 0 0 var(--pe-space-2);
	font-weight: var(--pe-fw-bold);
	color: var(--pe-ueberschrift);
}
.pe-b-ueberblick dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--pe-space-1) var(--pe-space-4);
	margin: 0;
}
.pe-b-ueberblick dt {
	color: var(--pe-text-leise);
}
.pe-b-ueberblick dd {
	margin: 0;
}
.pe-b-ueberblick .pe-b-ueberblick__gesamt {
	padding-top: var(--pe-space-2);
	border-top: var(--pe-border-w) solid var(--pe-rand);
	color: var(--pe-ueberschrift);
	font-weight: var(--pe-fw-bold);
}
.pe-b-ueberblick dd.pe-b-ueberblick__gesamt strong {
	font-size: var(--pe-fs-h4);
}
.pe-b-ueberblick dd.pe-b-ueberblick__gesamt span {
	font-weight: var(--pe-fw-regular);
}

/* Hinweise der Eingabehilfe (Tippfehler in der Mail, unbekannte PLZ) */
.pe-b-vorschlag {
	margin: calc(var(--pe-space-2) * -1) 0 var(--pe-space-4);
	padding: var(--pe-space-2) var(--pe-space-3);
	background: var(--pe-flaeche-2);
	border-left: var(--pe-space-1) solid var(--pe-akzent);
	border-radius: var(--pe-r-sm);
	font-size: var(--pe-fs-sm);
}
.pe-b-vorschlag button {
	min-height: var(--pe-tap);
	padding: 0 var(--pe-space-2);
	background: none;
	border: 0;
	color: var(--pe-link);
	font: inherit;
	font-weight: var(--pe-fw-bold);
	text-decoration: underline;
	cursor: pointer;
}
.pe-b-quelle {
	margin: calc(var(--pe-space-2) * -1) 0 var(--pe-space-4);
	font-size: var(--pe-fs-sm);
	color: var(--pe-text-leise);
}
.pe-fehlerliste,
.pe-danke {
	margin: 0 0 var(--pe-space-5);
	padding: var(--pe-space-4) var(--pe-space-5);
	background: var(--pe-flaeche-2);
	border-left: var(--pe-space-1) solid var(--pe-aktion);
	border-radius: var(--pe-r-sm);
}
.pe-danke {
	border-left-color: var(--pe-akzent);
}
.pe-fehlerliste__titel,
.pe-danke__titel {
	margin: 0 0 var(--pe-space-2);
	font-weight: var(--pe-fw-bold);
	color: var(--pe-ueberschrift);
}
.pe-fehlerliste ul {
	margin: 0;
	padding-left: var(--pe-space-5);
}
.pe-fehlerliste a {
	color: var(--pe-link);
}
.pe-b-honig {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Danke-Seite: Überweisung mit GiroCode */
.pe-ueberweisung {
	padding: var(--pe-space-5);
	border: var(--pe-border-w) solid var(--pe-rand);
	border-radius: var(--pe-r-md);
}
.pe-ueberweisung h2 {
	margin-top: 0;
	font-size: var(--pe-fs-h3);
}
.pe-ueberweisung__inhalt {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pe-space-5);
	align-items: flex-start;
}
.pe-ueberweisung__daten {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--pe-space-2) var(--pe-space-4);
	flex: 1 1 18rem;
	margin: 0;
}
.pe-ueberweisung__daten dt {
	color: var(--pe-text-leise);
}
.pe-ueberweisung__daten dd {
	margin: 0;
	font-weight: var(--pe-fw-semibold);
}
.pe-ueberweisung__iban {
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}
.pe-ueberweisung__qr {
	flex: 0 0 auto;
	width: calc(var(--pe-tap) * 4);
	margin: 0;
	padding: var(--pe-space-2);
	background: var(--pe-weiss);
	border-radius: var(--pe-r-sm);
}
.pe-ueberweisung__qr svg {
	display: block;
	width: 100%;
	height: auto;
}
.pe-ueberweisung__qr figcaption {
	margin-top: var(--pe-space-2);
	font-size: var(--pe-fs-sm);
	color: var(--pe-navy);
}
/* Danke-Seite: Termin teilen */
.pe-teilen {
	margin-top: var(--pe-space-5);
	padding: var(--pe-space-5);
	background: var(--pe-flaeche-2);
	border-radius: var(--pe-r-md);
}
.pe-teilen h2 {
	margin-top: 0;
	font-size: var(--pe-fs-h3);
}
.pe-teilen__knoepfe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pe-space-2) var(--pe-space-4);
	margin-bottom: 0;
}
.pe-teilen__knopf {
	min-height: var(--pe-tap);
}
.pe-teilen__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--pe-tap);
	padding: 0;
	background: none;
	border: 0;
	color: var(--pe-link);
	font: inherit;
	font-weight: var(--pe-fw-semibold);
	text-decoration: underline;
	cursor: pointer;
}
.pe-teilen__status {
	font-size: var(--pe-fs-sm);
}
.pe-buchung [hidden] {
	display: none !important;
}

@media (max-width: 544px) {
	.pe-b-ueberblick dl {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.pe-b-ueberblick dd {
		margin-bottom: var(--pe-space-2);
	}
	.pe-b-ueberblick dd.pe-b-ueberblick__gesamt {
		padding-top: 0;
		border-top: 0;
	}
	.pe-b-zeile {
		grid-template-columns: 1fr;
	}
	.pe-b-zeile--plz {
		grid-template-columns: 7rem 1fr;
	}
	.pe-b-zeile--strasse {
		grid-template-columns: 1fr 5rem;
	}
	.pe-ueberweisung__daten {
		grid-template-columns: 1fr;
	}
	.pe-buchung button.pe-knopf-buchen {
		width: 100%;
	}
}

/* ALTCHA (nur wenn unter Einstellungen → Buchung eingeschaltet): Farben und Maße aus den Tokens. */
.pe-b-altcha {
	margin: var(--pe-space-4) 0;
}
.pe-b-altcha altcha-widget {
	--altcha-color-base: var(--pe-flaeche);
	--altcha-color-base-content: var(--pe-text);
	--altcha-color-primary: var(--pe-navy);
	--altcha-color-primary-content: var(--pe-weiss);
	--altcha-color-success: var(--pe-status-ok);
	--altcha-color-success-content: var(--pe-weiss);
	--altcha-color-error: var(--pe-status-fehler);
	--altcha-color-error-content: var(--pe-weiss);
	--altcha-border-color: var(--pe-rand);
	--altcha-border-width: var(--pe-border-w);
	--altcha-border-radius: var(--pe-r-sm);
	--altcha-checkbox-size: calc(var(--pe-tap) / 2);
	--altcha-checkbox-outline: var(--pe-focus-w) solid var(--pe-fokus);
	--altcha-checkbox-outline-offset: var(--pe-focus-offset);
	--altcha-max-width: var(--pe-narrow);
	--altcha-padding: var(--pe-space-3);
}