@import url("tokens.css");

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
body {
	font-family: var(--font-body);
	color: var(--ink-900);
	background: var(--surface-050);
	line-height: 1.55;
	overflow-wrap: anywhere;
	-webkit-font-smoothing: antialiased;
}
img,
svg {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
}
h1,
h2,
h3 {
	font-family: var(--font-display);
	margin: 0;
	line-height: 1.12;
	letter-spacing: -0.01em;
}
p {
	margin: 0;
}
.wrap {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 var(--space-2xl);
}
.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--font-size-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--amber-700);
}
:focus-visible {
	outline: 3px solid var(--amber-600);
	outline-offset: 3px;
}
.skip-link {
	position: absolute;
	top: -60px;
	left: 8px;
	background: var(--petrol-900);
	color: var(--surface-000);
	padding: var(--space-sm) var(--space-l);
	border-radius: var(--radius-s);
	z-index: 100;
	text-decoration: none;
	font-weight: 600;
	transition: top 0.15s ease;
}
.skip-link:focus {
	top: 8px;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-s);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-body);
	padding: var(--space-md) var(--space-2xl);
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition:
		transform 0.15s ease,
		background 0.15s ease,
		opacity 0.15s ease;
}
.btn:hover {
	transform: translateY(-1px);
}
/* display:flex oben schlägt sonst das UA-[hidden] – jeder .btn, der irgendwo
   konditional per hidden-Attribut ein-/ausgeblendet wird (z. B. die
   Filter-zurücksetzen-Buttons im Admin), bliebe sonst sichtbar. Muster wie
   .kontakt-checkbox[hidden] unten / .list-row-action[hidden] in common.css. */
.btn[hidden] {
	display: none;
}
.btn-primary {
	background: var(--amber-600);
	color: var(--surface-000);
}
.btn-primary:hover {
	background: color-mix(in srgb, var(--amber-600) 90%, black);
}
.btn-ghost {
	background: transparent;
	color: var(--surface-000);
	border-color: rgba(255, 255, 255, 0.55);
}
.btn-ghost:hover {
	border-color: var(--surface-000);
	background: rgba(255, 255, 255, 0.08);
}
.btn-outline {
	background: transparent;
	color: var(--petrol-800);
	border-color: var(--petrol-800);
}
.btn-outline:hover {
	background: var(--petrol-800);
	color: var(--surface-000);
}

/* Nav */
header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(245, 243, 238, 0.9);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-l) var(--space-2xl);
}
.brand {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--font-size-lead);
	color: var(--petrol-900);
	text-decoration: none;
}
.brand-mark {
	width: auto;
	height: 68px;
	flex-shrink: 0;
}
.nav-links {
	display: flex;
	align-items: center;
	gap: var(--space-2xl);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-links a {
	text-decoration: none;
	font-weight: 500;
	font-size: var(--font-size-body);
	color: var(--ink-900);
}
.nav-links a:hover {
	color: var(--amber-700);
}
.nav-cta {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}
.nav-cta .btn {
	padding: var(--space-sm) var(--space-xl);
	font-size: var(--font-size-small);
}
.nav-cta .btn-outline {
	border-color: var(--petrol-800);
}
.burger {
	display: none;
	cursor: pointer;
}
.subpage-home-link {
	flex-shrink: 0;
	padding: var(--space-sm) var(--space-l);
}
@media (max-width: 600px) {
	.subpage-nav .brand-mark {
		height: 52px;
	}
	.subpage-brand-text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}
@media (max-width: 1100px) {
	.nav-links {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--surface-000);
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		border-bottom: 1px solid var(--line);
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		transition:
			max-height 0.25s ease,
			visibility 0.25s;
	}
	.nav-links li {
		width: 100%;
	}
	.nav-links a {
		display: block;
		padding: var(--space-l) var(--space-2xl);
		width: 100%;
		border-top: 1px solid var(--line);
	}
	.nav-links.is-open {
		max-height: calc(100vh - 86px);
		max-height: calc(100dvh - 86px);
		overflow-y: auto;
		visibility: visible;
	}
	.burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--space-2xs);
		background: none;
		border: none;
		padding: var(--space-s);
		min-width: 44px;
		min-height: 44px;
	}
	.burger:focus-visible {
		outline: 3px solid var(--amber-600);
		outline-offset: 3px;
	}
	.burger span {
		width: 22px;
		height: 2px;
		background: var(--petrol-900);
		display: block;
		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
	}
	/*
	 * Versatz aus gap + Strichhöhe berechnen statt fest einzutragen. gap ist
	 * fließend (--space-2xs), ein fester px-Wert (vorher 7px) kreuzt die
	 * Striche nur zufällig bei einer Viewport-Breite exakt mittig – in
	 * iOS-Safari sichtbar schief.
	 */
	.burger[aria-expanded="true"] span:first-child {
		transform: translateY(calc(var(--space-2xs) + 2px)) rotate(45deg);
	}
	.burger[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}
	.burger[aria-expanded="true"] span:last-child {
		transform: translateY(calc(-1 * (var(--space-2xs) + 2px))) rotate(-45deg);
	}
	.nav-cta {
		display: none;
	}
}

/* Hero */
.hero {
	background: linear-gradient(155deg, var(--petrol-900), var(--petrol-800) 70%);
	color: var(--surface-000);
	overflow: hidden;
	position: relative;
}
.hero .wrap {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--space-4xl);
	align-items: stretch;
	padding-top: var(--space-4xl);
	padding-bottom: var(--space-4xl);
}
.hero .wrap > *,
.why-grid > *,
.split-grid > *,
.about-grid > *,
.kontakt-form-card > * {
	min-width: 0;
}
.badge.badge-hero {
	display: inline-block;
	background: transparent;
	color: var(--amber-500);
	border: 1.5px solid var(--amber-600);
	padding: var(--space-xs) var(--space-md);
	font-size: var(--font-size-small);
	margin-bottom: var(--space-l);
}
.hero h1 {
	font-size: var(--font-size-hero);
	text-wrap: balance;
	color: var(--surface-000);
}
.hero-sub {
	margin-top: var(--space-xl);
	font-size: var(--font-size-lead);
	color: rgba(255, 255, 255, 0.85);
	max-width: 46ch;
}
.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-3xl);
}
/* Zwischen dem 900px-Stack-Breakpoint und ~1240px ist die Textspalte zu
   schmal, um beide Buttons mit voller Polsterung nebeneinander zu zeigen –
   die seitliche Polsterung schrumpft hier fließend statt umzubrechen. Unter
   900px ist bereits umgebrochen (je Button eine Zeile, reichlich Platz) –
   dort gilt wieder die normale Polsterung von .btn. */
@media (min-width: 901px) {
	.hero .hero-ctas .btn {
		padding-inline: var(--space-hero-cta-inline);
	}
}
.hero-art {
	position: relative;
	display: flex;
	justify-content: flex-end;
}
.about-photo.hero-photo {
	height: 100%;
	padding: 0;
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 0.7);
}

.about-photo.hero-photo picture {
	display: block;
	width: 100%;
	height: 100%;
}

.about-photo.hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}

/* Section basics */
section {
	padding: var(--space-4xl) 0;
	/* Anker-Sprünge (Nav-Links, Hero-CTAs) landen sonst mit der Überschrift
	   unter dem sticky Header. */
	scroll-margin-top: var(--header-offset);
}
.section-head {
	max-width: 640px;
	margin-bottom: var(--space-4xl);
}
.section-head h1,
.section-head h2 {
	font-size: var(--font-size-heading-large);
	color: var(--petrol-900);
	margin-top: var(--space-sm);
}
.section-head p {
	margin-top: var(--space-md);
	color: var(--ink-600);
	font-size: var(--font-size-body);
}

/* Why section */
.why-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2xl);
}
.why-card {
	background: var(--surface-000);
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	padding: var(--space-2xl);
}
.why-card-head {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-l);
}
.why-card h3 {
	font-size: var(--font-size-lead);
	color: var(--petrol-900);
}
.why-card p {
	margin-top: var(--space-sm);
	color: var(--ink-600);
	font-size: var(--font-size-body);
}

.usp-icon {
	width: 38px;
	height: 38px;
	color: var(--amber-600);
	flex-shrink: 0;
}

/* Ablauf - route/floor-plan motif */
.ablauf {
	position: relative;
}
.route {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-top: var(--space-2xl);
}
.route::before {
	content: "";
	position: absolute;
	top: 19px;
	left: 24px;
	right: 24px;
	height: 0;
	border-top: 2px dashed var(--petrol-700);
	opacity: 0.35;
}
.route-step {
	flex: 1;
	text-align: center;
	padding: 0 var(--space-sm);
	position: relative;
}
.route-num {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--petrol-800);
	color: var(--surface-000);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-l);
	font-family: var(--font-mono);
	font-size: var(--font-size-small);
	position: relative;
	z-index: 2;
	box-shadow: 0 0 0 6px var(--surface-050);
}
.route-step h3 {
	font-size: var(--font-size-body);
	color: var(--petrol-900);
}
.route-step p {
	margin-top: var(--space-xs);
	font-size: var(--font-size-small);
	color: var(--ink-600);
}
@media (max-width: 760px) {
	.route {
		flex-direction: column;
		gap: var(--space-2xl);
	}
	.route::before {
		display: none;
	}
}

/* Zielgruppen split */
.split-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2xl);
}
/* Preisvergleichs-Karten. Durchgehend linksbündig: gemischte Ausrichtung
   (zentrierter Titel über linksbündiger Liste) erzeugte einzeln stehende,
   zentrierte Restzeilen. Der Aktionsbereich unten ist per margin-top:auto
   verankert, damit die Buttons beider Karten auf einer Linie liegen – die
   Trennlinie darüber macht den dabei entstehenden Freiraum zu einer
   erkennbaren Zone statt zu einer Lücke. */
.split-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-l);
	padding: var(--space-3xl);
}
.split-card h3 {
	font-size: var(--font-size-heading-small);
}
.split-card h3 + p {
	margin-top: var(--space-sm);
	font-size: var(--font-size-body);
	line-height: 1.5;
}
.split-card.dark {
	background: var(--petrol-800);
	color: var(--surface-000);
}
.split-card.light {
	background: var(--surface-000);
	border: 1px solid var(--line);
}
.split-card.dark h3 {
	color: var(--surface-000);
}
.split-card.light h3 {
	color: var(--petrol-900);
}
.split-card.dark p,
.split-card.dark li {
	color: rgba(255, 255, 255, 0.82);
}
.split-card.light p,
.split-card.light li {
	color: var(--ink-600);
}

/* Preis als visueller Anker – vorher war er nur der erste Listenpunkt und
   ging zwischen den übrigen Merkmalen unter. */
.split-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-sm);
	margin-top: var(--space-xl);
}
.split-price-value {
	font-family: var(--font-display);
	font-size: var(--font-size-heading-large);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.split-card.dark .split-price-value {
	color: var(--surface-000);
}
.split-card.light .split-price-value {
	color: var(--petrol-900);
}
.split-price-meta {
	font-size: var(--font-size-small);
}

.split-card ul {
	display: grid;
	gap: var(--space-m);
	margin: var(--space-xl) 0 auto;
	padding: 0;
	list-style: none;
}
.split-card li {
	display: flex;
	gap: var(--space-sm);
	font-size: var(--font-size-body);
	line-height: 1.45;
}
.check {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: var(--space-3xs);
}
/* Häkchenfarbe über currentColor statt sechs fest eingetragener Hexwerte im SVG. */
.split-card.dark .check {
	color: var(--amber-500);
}
.split-card.light .check {
	color: var(--amber-600);
}

.split-card-action {
	margin-top: var(--space-m);
	padding-top: var(--space-2xl);
}
.split-card.dark .split-card-action {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.split-card.light .split-card-action {
	border-top: 1px solid var(--line);
}
.split-card-action .btn {
	width: 100%;
}
/* Beide Varianten explizit, damit die Regel die Textfarbe aus
   `.split-card.light p` (gleiche Spezifität) sicher schlägt und nicht von der
   Reihenfolge im Stylesheet abhängt. */
.split-card.dark .split-note,
.split-card.light .split-note {
	margin-top: var(--space-m);
	padding: var(--space-m) var(--space-m);
	background: var(--amber-100);
	color: var(--amber-700);
	font-size: var(--font-size-small);
	font-weight: 600;
	line-height: 1.45;
	border-radius: var(--radius-s);
}

/* Termin highlight */
#termine {
	background: var(--petrol-100);
}
.termin-card {
	background: var(--surface-000);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: var(--space-2xl);
}
.termin-row-top {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}
.termin-date {
	font-family: var(--font-mono);
	background: var(--amber-100);
	color: var(--amber-700);
	border-radius: var(--radius-s);
	padding: var(--space-sm) var(--space-md);
	text-align: center;
	min-width: 64px;
	flex-shrink: 0;
}
.termin-date .d {
	display: block;
	font-size: var(--font-size-lead);
	font-weight: 600;
}
.termin-date .m {
	display: block;
	font-size: var(--font-size-micro);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.termin-date .y {
	display: block;
	margin-top: var(--space-3xs);
	font-size: var(--font-size-micro);
	letter-spacing: 0.02em;
}
.termin-title {
	font-family: var(--font-display);
	font-size: var(--font-size-body);
	color: var(--petrol-900);
}
.termin-meta {
	font-size: var(--font-size-label);
	color: var(--ink-600);
	margin-top: var(--space-3xs);
}
.termin-bar-track {
	position: relative;
	height: 8px;
	background: var(--petrol-100);
	border-radius: 999px;
	/* Großzügiger oben, damit das "Mindestteilnahme"-Label (siehe
	   .termin-bar-threshold::after) auch dann nicht an den Ort/Zeit-Text
	   stößt, wenn eine lange Adresse in .termin-title zweizeilig umbricht
	   und dadurch kaum noch vertikaler Puffer über der Meta-Zeile bleibt. */
	margin: var(--space-3xl) 0 var(--space-s);
}
.termin-bar-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: var(--amber-600);
	border-radius: 999px;
}
.termin-bar-threshold {
	position: absolute;
	top: -4px;
	width: 2px;
	height: 16px;
	background: var(--petrol-900);
}
.termin-bar-threshold::after {
	content: "Mindestteilnahme";
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--font-size-micro);
	font-weight: 600;
	color: var(--petrol-900);
	white-space: nowrap;
}
.termin-bar-labels {
	display: flex;
	justify-content: space-between;
	font-size: var(--font-size-label);
	color: var(--ink-600);
	margin-top: var(--space-md);
}
.termin-card .btn {
	width: 100%;
	margin-top: var(--space-l);
}
.termine-liste {
	display: grid;
	/* min(300px, 100%): auf Screens schmaler als 300px schrumpft die Spur auf
	   Containerbreite, sonst laufen die Terminkarten horizontal aus dem
	   Layout (und schieben die ganze Seite nach links). */
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--space-2xl);
}
.termin-item {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-self: start;
}
.termin-card--empty {
	text-align: center;
}
.termin-card--empty p {
	color: var(--ink-600);
	font-size: var(--font-size-body);
}
.termin-card--error {
	text-align: center;
}
.termin-card--error > p:first-child {
	color: var(--danger);
	font-size: var(--font-size-body);
	font-weight: 600;
}
.termin-error-hint {
	margin-top: var(--space-xs);
	color: var(--ink-600);
	font-size: var(--font-size-small);
}
.termin-retry {
	margin-top: var(--space-l);
}
.termin-card--cancelled {
	opacity: 0.6;
}
.termin-cancelled-note {
	margin-top: var(--space-md);
	color: var(--ink-600);
	font-size: var(--font-size-small);
	font-weight: 600;
}

/* "Kürzlich geändert"-Hinweis (renderChangeNotice() in booking-form.js) –
   blendet sich nach 14 Tagen von selbst aus, siehe CHANGE_NOTICE_DAYS. */
.termin-change-notice {
	margin: var(--space-md) 0 0;
	padding: var(--space-sm) var(--space-md);
	background: var(--danger-100);
	border-radius: var(--radius-s);
}
.termin-change-badge {
	display: inline-block;
	color: var(--danger-700);
	font-size: var(--font-size-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.termin-change-line {
	margin: var(--space-xs) 0 0;
	color: var(--ink-600);
	font-size: var(--font-size-small);
	text-decoration: line-through;
}
.termin-change-line:first-of-type {
	margin-top: var(--space-s);
}

/* About teaser */
.about-grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: var(--space-4xl);
	align-items: center;
}
.about-photo {
	aspect-ratio: 4/5;
	border-radius: var(--radius-l);
	background: linear-gradient(145deg, var(--petrol-900), var(--petrol-800));
	border: 1px solid var(--petrol-700);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-xl);
	overflow: hidden;
}
.about-photo img {
	width: min(72%, 220px);
	height: auto;
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22));
}
.about-photo.about-photo-person {
	padding: 0;
}
.about-photo.about-photo-person img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}
.about-photo.hero-photo,
.about-photo.about-photo-person {
	background-color: var(--petrol-900);
	background-image: url("../icons/logo.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: min(40%, 180px) auto;
}
.badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-xl);
}
.badge {
	font-family: var(--font-mono);
	font-size: var(--font-size-label);
	background: var(--petrol-100);
	color: var(--petrol-800);
	padding: var(--space-s) var(--space-md);
	border-radius: 999px;
}
.about-grid h2 {
	margin-top: var(--space-sm);
	color: var(--petrol-900);
}
.about-lead {
	margin-top: var(--space-l);
	color: var(--ink-600);
	font-size: var(--font-size-body);
	max-width: 56ch;
}
.about-grid .btn-outline {
	margin-top: var(--space-2xl);
}

/* FAQ */
.faq-item {
	border-bottom: 1px solid var(--line);
	padding: var(--space-xl) 0;
}
.faq-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--font-size-body);
	color: var(--petrol-900);
}
.faq-item summary::-webkit-details-marker {
	display: none;
}
.faq-item summary::after {
	content: "+";
	font-size: var(--font-size-heading-small);
	color: var(--amber-700);
	flex-shrink: 0;
	margin-left: var(--space-l);
	transition: transform 0.25s ease-out;
}
.faq-item[open] summary::after {
	transform: rotate(45deg);
}
#faq.is-enhanced .faq-item:not(.is-open) summary::after {
	transform: rotate(0);
}
/*
 * grid-template-rows/opacity/visibility-Transition ersetzt: in iOS-Safari
 * hat der geschlossene <details>-Inhalt keinen verlässlichen Vorher-Zustand,
 * die Transition sprang deshalb sofort auf statt zu animieren.
 * faq.js animiert die Höhe stattdessen per Web Animations API.
 */
#faq.is-enhanced .faq-content {
	overflow: hidden;
}
#faq.is-enhanced .faq-content-inner {
	overflow: hidden;
	min-height: 0;
}
.faq-item p {
	margin-top: var(--space-md);
	color: var(--ink-600);
	font-size: var(--font-size-body);
	max-width: 70ch;
}
.faq-item ul {
	margin-top: var(--space-s);
	padding-left: var(--space-xl);
	color: var(--ink-600);
	font-size: var(--font-size-body);
	max-width: 70ch;
}
.faq-item li {
	margin-top: var(--space-2xs);
}
@media (prefers-reduced-motion: reduce) {
	.faq-item summary::after {
		transition: none;
	}
}
#faq {
	background: var(--surface-000);
}
#faq .wrap {
	max-width: 780px;
}

/* Legal pages (Impressum, Datenschutz) */
.legal-page .wrap {
	max-width: 780px;
}
.legal-content h2 {
	font-size: var(--font-size-lead);
	color: var(--petrol-900);
	margin-top: var(--space-3xl);
}
.legal-content h2:first-child {
	margin-top: 0;
}
.legal-content h3 {
	font-family: var(--font-display);
	font-size: var(--font-size-body);
	color: var(--petrol-800);
	margin-top: var(--space-xl);
}
.legal-content p {
	margin-top: var(--space-sm);
	color: var(--ink-600);
	font-size: var(--font-size-body);
	max-width: 70ch;
}
.legal-content ul {
	margin-top: var(--space-sm);
	padding-left: var(--space-xl);
	color: var(--ink-600);
	font-size: var(--font-size-body);
	max-width: 70ch;
}
.legal-content li {
	margin-top: var(--space-2xs);
}
.legal-content a {
	color: var(--amber-700);
}
.legal-content a.btn {
	color: var(--surface-000);
}
.legal-placeholder {
	color: var(--amber-700);
}
.legal-highlight {
	margin-top: var(--space-sm);
	padding: var(--space-l) var(--space-l);
	background: var(--surface-000);
	border-left: 3px solid var(--petrol-800);
	border-radius: var(--radius-s);
	font-weight: 700;
	color: var(--ink-900);
	max-width: 70ch;
}

/* Final CTA band */
.cta-band {
	background: var(--petrol-900);
	color: var(--surface-000);
	text-align: center;
}
.cta-band h2 {
	color: var(--surface-000);
	font-size: var(--font-size-heading-large);
}
.cta-band p {
	margin-top: var(--space-md);
	color: var(--white-78);
	font-size: var(--font-size-body);
}
.cta-band .hero-ctas {
	justify-content: center;
	margin-top: var(--space-2xl);
}
.cta-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-2xl);
}
.contact-link {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	color: var(--white-78);
	font-size: var(--font-size-body);
	text-decoration: underline;
}
.contact-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Kontakt / Inhouse-Anfrage Formular */
#kontakt .wrap {
	max-width: 640px;
}
.kontakt-form-card {
	background: var(--surface-000);
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	padding: var(--space-3xl);
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-2xl);
	row-gap: var(--space-xl);
	align-items: start;
}
.form-row--full {
	grid-column: 1 / -1;
}
.form-row {
	display: grid;
	gap: var(--space-xs);
}
.form-row label,
.form-row .form-label {
	display: block;
	font-size: var(--font-size-small);
	font-weight: 600;
	color: var(--petrol-900);
}
/* Nicht editierbarer Wert im Formular (Seminar in der Inhouse-Anfrage –
   aktuell nur ein Seminar im Angebot, deshalb fest statt Auswahlfeld). */
.form-row .form-static {
	margin: var(--space-xs) 0 0;
	font-size: var(--font-size-body);
	color: var(--ink-900);
}
.optional-tag {
	font-weight: 400;
	color: var(--ink-600);
	font-size: var(--font-size-label);
}
.form-row input,
.form-row textarea {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	color: var(--ink-900);
	background: var(--surface-050);
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	padding: var(--space-m) var(--space-md);
	width: 100%;
}
.form-row textarea {
	min-height: 120px;
	resize: vertical;
}
.form-hint {
	font-size: var(--font-size-small);
	color: var(--ink-600);
}
.kontakt-checkbox {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	font-size: var(--font-size-small);
	color: var(--ink-600);
	line-height: 1.5;
}
/* display:flex oben schlägt das UA-[hidden] – für konditional versteckte
   Häkchen (z. B. die §-356-Zeile bf-early-performance, die nur bei
   Privatperson + Kurs < 14 Tage erscheint) explizit durchsetzen. Muster wie
   .list-row-action[hidden] in common.css. */
.kontakt-checkbox[hidden] {
	display: none;
}
.kontakt-checkbox input[type="checkbox"] {
	margin-top: var(--space-3xs);
	width: 18px;
	height: 18px;
	accent-color: var(--amber-600);
	flex-shrink: 0;
}
.kontakt-checkbox a {
	color: var(--amber-700);
}
.kontakt-form-card .btn {
	grid-column: 1 / -1;
	justify-self: start;
}
/* Netlify honeypot field: hidden from sighted users; aria-hidden +
   tabindex="-1" on the field itself keep AT/keyboard users from
   stumbling into it, only bots that blindly fill every input get caught */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Termine: Benachrichtigungs-Formular für Besucher ohne passenden Termin */
.termin-notify {
	margin-top: var(--space-2xl);
	padding: var(--space-xl) var(--space-2xl);
	background: var(--surface-000);
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--space-md);
	align-self: start;
	height: auto !important;
	max-height: max-content;
	flex: 0 0 auto;
	min-height: 0;
}
/* Primärer Erklärungstext: soll auf den ersten Blick als der eigentliche
   Zweck des Formulars erkennbar sein – deutlich kräftiger als der
   nachgeordnete, rein rechtliche Einwilligungstext (.kontakt-checkbox span,
   siehe #152). */
.termin-notify-text {
	font-size: var(--font-size-body);
	font-weight: 600;
	color: var(--ink-900);
}
.termin-notify-email-field {
	width: 100%;
	min-width: 0;
}
.termin-notify input[type="email"] {
	width: 100%;
	min-width: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	color: var(--ink-900);
	background: var(--surface-050);
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	padding: var(--space-m) var(--space-md);
}
/* Einwilligung ist bewusst kleiner/gedämpfter als .termin-notify-text – klar
   als ergänzender rechtlicher Hinweis, nicht als Haupttext, eingeordnet. */
.termin-notify-consent-field .kontakt-checkbox {
	font-size: var(--font-size-small);
	color: var(--ink-600);
}
.termin-notify-submit {
	align-self: flex-start;
	margin-top: 0;
}
.termin-notify-notice {
	font-size: var(--font-size-small);
	color: var(--ink-600);
}
.termin-notify-notice.is-error {
	color: var(--danger);
}
.termin-notify-notice.is-success {
	color: var(--success, #347a59);
}
.termin-notify-field-error {
	margin: var(--space-2xs) 0 0;
	font-size: var(--font-size-small);
	color: var(--danger);
	overflow-wrap: anywhere;
}
.termin-notify input[aria-invalid="true"] {
	border-color: var(--danger);
	outline: 2px solid var(--danger);
	outline-offset: 2px;
}
@media (max-width: 700px) {
	.termin-notify-submit {
		width: 100%;
	}
}
@media (hover: none) {
	/* Touch-Browser halten :hover nach dem Tippen teils bis zum nächsten Tap
	   fest. Während :active bleibt das blaue Klick-Feedback erhalten. */
	.termin-notify-submit:hover:not(:active),
	a.btn-outline[href="#inhouse-anfrage"]:hover:not(:active) {
		background: transparent;
		color: var(--petrol-800);
		transform: none;
	}
	a.btn-ghost[href="#inhouse-anfrage"]:hover:not(:active) {
		background: transparent;
		color: var(--surface-000);
		border-color: rgba(255, 255, 255, 0.55);
		transform: none;
	}
}

/* Footer: Marke + Kontakt + Rechtliches in Spalten, darunter schmale Leiste
   mit Copyright und Credit. Ab 900px zweispaltig, ab 600px einspaltig. */
footer {
	background: var(--surface-000);
	border-top: 1px solid var(--line);
	padding: var(--space-4xl) 0 var(--space-2xl);
	text-align: left;
}
.foot-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: start;
	gap: var(--space-3xl) var(--space-4xl);
}
.foot-brand {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--petrol-900);
}
.foot-logo {
	height: 40px;
	width: auto;
	flex-shrink: 0;
}
.foot-tagline {
	margin-top: var(--space-m);
	max-width: 40ch;
	font-size: var(--font-size-small);
	line-height: 1.6;
	color: var(--ink-600);
}
.foot-nowrap {
	white-space: nowrap;
}
.foot-heading {
	margin-bottom: var(--space-m);
	font-family: var(--font-mono);
	font-size: var(--font-size-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--amber-700);
}
.foot-contact,
.foot-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-s);
	list-style: none;
	padding: 0;
	margin: 0;
}
.foot-links a,
.foot-contact-link {
	text-decoration: none;
	font-size: var(--font-size-small);
	color: var(--ink-600);
}
.foot-links a:hover,
.foot-contact-link:hover {
	color: var(--amber-700);
}
.foot-contact-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--petrol-900);
	overflow-wrap: anywhere;
}
/* Vorhandene Icons (mail.svg / phone.svg) als Maske, damit sie die
   Textfarbe übernehmen – die SVGs selbst sind weiß für dunkle Flächen. */
.foot-contact-link::before {
	content: "";
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: var(--amber-600);
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.foot-contact-link--mail::before {
	-webkit-mask-image: url("../icons/mail.svg");
	mask-image: url("../icons/mail.svg");
}
.foot-contact-link--phone::before {
	-webkit-mask-image: url("../icons/phone.svg");
	mask-image: url("../icons/phone.svg");
}
.foot-bottom {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-s) var(--space-xl);
	margin-top: var(--space-3xl);
	padding-top: var(--space-xl);
	font-size: var(--font-size-small);
	color: var(--ink-600);
}
/* Trennlinie nur über die Inhaltsbreite (ohne das seitliche .wrap-Padding). */
.foot-bottom::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--space-2xl);
	right: var(--space-2xl);
	border-top: 1px solid var(--line);
}
.foot-credit {
	display: flex;
}
.foot-credit a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--ink-600);
	text-decoration: none;
}
.foot-credit a:hover {
	color: var(--amber-700);
	opacity: 1;
}
.foot-credit img {
	height: 18px;
	width: 18px;
}

@media (max-width: 900px) {
	.foot-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-2xl) var(--space-3xl);
	}
	/* Tablet: Logo + Schriftzug zentriert, ohne Kurzbeschreibung. */
	.foot-about {
		grid-column: 1 / -1;
		display: flex;
		justify-content: center;
	}
	.foot-tagline {
		display: none;
	}
}
@media (max-width: 600px) {
	.foot-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Handy: nur das Logo; der Name bleibt für Screenreader lesbar
	   (gleiche Technik wie .sr-only), weil das Logo-Bild alt="" hat. */
	.foot-logo {
		height: 56px;
	}
	.foot-brand-name {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
	.foot-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}
@media (max-width: 900px) {
	.hero .wrap {
		grid-template-columns: minmax(0, 1fr);
		padding-top: var(--space-3xl);
	}
	.about-photo.hero-photo {
		width: 100%;
		aspect-ratio: 4 / 5;
		height: auto;
	}
	.why-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.split-grid,
	.about-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.kontakt-form-card {
		grid-template-columns: 1fr;
	}

	/* Center headings, text, buttons and images below the tablet breakpoint
	   (the Kontakt/Inhouse-Anfrage form keeps its own left-aligned layout) */
	.hero .wrap,
	.section-head,
	.why-card,
	.about-grid,
	.danke-cta {
		text-align: center;
	}
	.section-head,
	.hero-sub,
	.about-lead {
		margin-left: auto;
		margin-right: auto;
	}
	.about-photo {
		margin-left: auto;
		margin-right: auto;
	}
	.why-card-head {
		justify-content: center;
	}
	.hero-ctas,
	.badge-row {
		justify-content: center;
	}
}
@media (max-width: 600px) {
	.kontakt-form-card .btn {
		justify-self: center;
	}
}

/* Cookie-Einwilligung (assets/js/consent.js) */
/* Mittig auf dem Bildschirm (nicht am unteren Rand) – Position hängt so
   nicht von der Höhe des aktiven Tab-Inhalts ab. */
.consent {
	position: fixed;
	z-index: 200;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 2 * var(--space-m));
	max-width: 46rem;
	max-height: calc(100vh - 2 * var(--space-m));
	overflow-y: auto;
	padding: var(--space-xl);
	background: var(--surface-000);
	color: var(--ink-900);
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	box-shadow: 0 20px 50px rgba(18, 38, 47, 0.25);
}
.consent[hidden] {
	display: none;
}
.consent-title {
	font-family: var(--font-display);
	font-size: var(--font-size-heading-small);
	color: var(--petrol-900);
	margin: 0 0 var(--space-s);
}
.consent-text {
	font-size: var(--font-size-small);
	color: var(--ink-600);
	margin: 0;
}
.consent-text a {
	color: var(--petrol-700);
}

/* Tab-Leiste (WAI-ARIA Tabs-Pattern), Vorbild: Cookiebot-Menüführung */
.consent-tabs {
	display: flex;
	gap: var(--space-m);
	border-bottom: 1px solid var(--line);
	margin: 0 0 var(--space-l);
}
.consent-tab {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: var(--space-s) var(--space-xs) var(--space-sm);
	margin-bottom: -1px;
	font: inherit;
	font-weight: 600;
	font-size: var(--font-size-small);
	color: var(--ink-600);
	cursor: pointer;
}
.consent-tab:hover {
	color: var(--petrol-900);
}
.consent-tab[aria-selected="true"] {
	color: var(--petrol-900);
	border-bottom-color: var(--amber-600);
}

/* Alle drei Panels liegen übereinander in derselben Grid-Zelle, auch das
   inaktive (nur per visibility ausgeblendet statt display:none) – so
   bestimmt immer der höchste Tab-Inhalt (i. d. R. Details) die Höhe der
   ganzen Karte, und die Tab-Leiste springt beim Wechseln nicht. Passt sich
   automatisch an, wenn später Kategorien/Cookies dazukommen. */
.consent-body {
	display: grid;
	grid-template-areas: "panel";
	margin: 0 0 var(--space-l);
}
.consent-panel {
	grid-area: panel;
	min-width: 0;
}
.consent-panel[hidden] {
	display: block;
	visibility: hidden;
	pointer-events: none;
}

/* Kategorien (Details-Tab) */
.consent-category {
	border-top: 1px solid var(--line);
	padding: var(--space-m) 0;
}
.consent-category:first-child {
	border-top: 0;
	padding-top: 0;
}
.consent-category-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
}
.consent-category-expand {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
	color: var(--ink-900);
	text-align: left;
}
.consent-chevron-icon {
	flex-shrink: 0;
	color: var(--ink-600);
	transition: transform 0.15s ease;
}
.consent-category-expand[aria-expanded="true"] .consent-chevron-icon {
	transform: rotate(180deg);
}
.consent-category-title {
	font-weight: 600;
	font-size: var(--font-size-small);
}
.consent-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 var(--space-3xs);
	border-radius: 999px;
	background: var(--petrol-100);
	color: var(--petrol-900);
	font-size: var(--font-size-label);
	font-weight: 600;
}

/* Umschalter (Switch) statt einfacher Checkbox, visuell wie bei Cookiebot */
.consent-switch {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	width: 2.4rem;
	height: 1.4rem;
	cursor: pointer;
}
.consent-switch input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.consent-switch-track {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var(--line);
	transition: background 0.15s ease;
}
.consent-switch-track::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(1.4rem - 4px);
	height: calc(1.4rem - 4px);
	border-radius: 50%;
	background: var(--surface-000);
	box-shadow: 0 1px 3px rgba(18, 38, 47, 0.35);
	transition: transform 0.15s ease;
}
.consent-switch input:checked + .consent-switch-track {
	background: var(--petrol-800);
}
.consent-switch input:checked + .consent-switch-track::before {
	transform: translateX(1rem);
}
.consent-switch input:disabled + .consent-switch-track {
	background: var(--petrol-100);
	opacity: 0.8;
}
.consent-switch input:focus-visible + .consent-switch-track {
	outline: 3px solid var(--amber-600);
	outline-offset: 3px;
}

.consent-category-desc {
	margin: var(--space-xs) 0 0;
	font-size: var(--font-size-label);
	color: var(--ink-600);
}
.consent-cookie-list {
	display: grid;
	gap: var(--space-s);
	margin: var(--space-m) 0 0;
}
.consent-cookie-list[hidden] {
	display: none;
}
.consent-cookie-card {
	background: var(--surface-050);
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	padding: var(--space-m);
}
.consent-cookie-name {
	margin: 0;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: var(--font-size-label);
	color: var(--petrol-900);
}
.consent-cookie-purpose {
	margin: var(--space-3xs) 0 0;
	font-size: var(--font-size-label);
	color: var(--ink-600);
}
.consent-cookie-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-l);
	margin: var(--space-s) 0 0;
}
.consent-cookie-meta div {
	display: grid;
	gap: 0;
}
.consent-cookie-meta dt {
	font-size: var(--font-size-label);
	color: var(--ink-600);
}
.consent-cookie-meta dd {
	margin: 0;
	font-size: var(--font-size-label);
	font-weight: 600;
	color: var(--ink-900);
}

.consent-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s);
}
/* Alle drei Buttons gleich groß (gleiche Klasse, gleiches Padding) – nur die
   Farbe von "Alle akzeptieren" weicht bewusst ab (CTA-Amber statt Petrol,
   s. Kommentar in consent.js bei buildBanner/actions). */
.consent-choice {
	background: var(--petrol-800);
	color: var(--surface-000);
	padding: var(--space-s) var(--space-xl);
	font-size: var(--font-size-small);
	flex: 1 1 auto;
}
.consent-choice:hover {
	background: var(--petrol-900);
}
.consent-choice-primary {
	background: var(--amber-600);
}
.consent-choice-primary:hover {
	background: color-mix(in srgb, var(--amber-600) 90%, black);
}
.foot-consent-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var(--font-size-small);
	color: var(--ink-600);
	cursor: pointer;
}
.foot-consent-link:hover {
	color: var(--amber-700);
}
.foot-consent-link[hidden] {
	display: none;
}
@media (max-width: 600px) {
	.consent-choice {
		flex: 1 1 100%;
	}
}

/* Print: saubere PDF-Ausgabe der Rechtstexte (Impressum, Datenschutz, AGB, Widerruf) */
@media print {
	.skip-link,
	header,
	footer,
	.consent,
	.no-print {
		display: none !important;
	}
	body {
		background: #fff;
	}
	.legal-page {
		padding: 0;
	}
	.legal-content h2 {
		margin-top: var(--space-2xl);
		page-break-after: avoid;
	}
	.legal-content h3 {
		page-break-after: avoid;
	}
	.legal-content p,
	.legal-content li {
		orphans: 3;
		widows: 3;
	}
	.legal-highlight {
		border: 1.5px solid #000;
		background: none;
	}
	a {
		color: inherit;
		text-decoration: underline;
	}
}

/* Buchungsformular: eigenes Buchungssystem (ersetzt Bookwhen) */
.termin-remaining {
	margin-top: var(--space-sm);
	font-size: var(--font-size-small);
	font-weight: 600;
	color: var(--petrol-800);
}
.termin-remaining--full {
	color: var(--ink-600);
	font-weight: 700;
}
.termin-card--full {
	opacity: 0.75;
}
/* Das öffentliche Buchungsformular öffnet als modaler <dialog> (per „Platz
   sichern" auf einer Terminkachel). Schließen: ×, Escape, Klick auf den
   Backdrop. Auf dem Handy Vollbild-Sheet. */
/* Solange der modale Buchungs-Dialog offen ist, das Dokument dahinter nicht
   scrollen lassen – dialog.showModal() sperrt das nicht selbst (auf dem Handy
   scrollt sonst die Seite hinter dem Backdrop). Die :has()-Regel greift auch
   beim nativen Escape sofort, die Body-Klasse ist der breite Fallback. */
body.has-modal-open {
	overflow: hidden;
}
html:has(.buchung-dialog[open]) {
	overflow: hidden;
}
.buchung-dialog {
	width: min(680px, calc(100vw - 32px));
	max-width: 100%;
	max-height: calc(100dvh - 32px);
	box-sizing: border-box;
	margin: auto;
	padding: var(--space-2xl);
	padding-top: var(--space-l);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background: var(--surface-050);
	color: var(--ink-900);
	box-shadow: 0 20px 50px rgba(18, 38, 47, 0.35);
	overflow: hidden auto;
	/* Am oberen/unteren Ende des Dialog-Inhalts die Scroll-Geste nicht an die
	   Seite dahinter weiterreichen (iOS-Rubber-Band). */
	overscroll-behavior: contain;
}
.buchung-dialog[open] {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
}
/* Der Dialog-Container bekommt beim Öffnen den Fokus (tabindex="-1", statt
   showModal() ihn auf den ×-Button zu legen) – kein Fokusring nötig, sonst
   umrahmt der globale amberfarbene :focus-visible-Ring das ganze Fenster.
   Das × selbst behält seinen Stil (grau, Hover petrol). */
.buchung-dialog:focus,
.buchung-dialog:focus-visible {
	outline: none;
}
.buchung-dialog::backdrop {
	background: rgba(18, 38, 47, 0.5);
}
.buchung-dialog-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-m);
	position: sticky;
	top: -24px;
	margin: calc(-1 * var(--space-2xl)) calc(-1 * var(--space-2xl)) 0;
	padding: var(--space-2xl) var(--space-2xl) var(--space-s);
	background: var(--surface-050);
	z-index: 1;
}
.buchung-dialog-header h2 {
	font-size: var(--font-size-heading-small);
	color: var(--petrol-900);
	margin-top: var(--space-xs);
}
.buchung-dialog-close {
	flex: none;
	width: 44px;
	height: 44px;
	display: inline-grid;
	place-items: center;
	border: 0;
	background: none;
	font-size: var(--font-size-heading);
	line-height: 1;
	color: var(--ink-600);
	cursor: pointer;
}
.buchung-dialog-close:hover,
.buchung-dialog-close:focus-visible {
	color: var(--petrol-900);
}
/* Buttons im Buchungsformular tragen denselben 8px-Radius wie Felder, Karten
   und die Icon-Buttons – eine Formfamilie statt der site-weiten Pillenform.
   Gilt bewusst nur im Formular. */
.buchung-dialog .btn {
	border-radius: var(--radius-s);
}
@media (max-width: 640px) {
	.buchung-dialog {
		width: 100%;
		max-width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		border: 0;
		border-radius: 0;
	}
}

/* Das öffentliche Buchungsformular ist ein Stapel aus Abschnitts-Karten
   (#bf-form > .buchung-section, #103). Das <form> selbst hat keinen eigenen
   Rahmen mehr – es hält nur Fehlerbox, Karten-Stapel, Netzwerk-Hinweis und
   Absenden-Button mit gleichmäßigem Abstand zusammen. Feld-/Picker-/
   Teilnehmer-Stil teilt sich common.css mit dem Admin-Formular. */
.buchung-form-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

#bf-form.buchung-sections {
	display: grid;
	gap: var(--space-l);
}

#bf-form .buchung-section {
	padding: var(--space-xl);
	background: var(--surface-000);
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
}

#bf-form .buchung-section > .buchung-section-heading {
	margin: 0 0 var(--space-md);
}

/* Freundlicherer Ton fürs Kundenformular: Feldbeschriftungen und
   Abschnittstitel in Satzschrift statt Mono-Versal (das Admin-Panel behält
   den technischen Look, daher nur auf #bf-form beschränkt). */
#bf-form .admin-field > label,
#bf-form .teilnehmer-field {
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--petrol-900);
}
#bf-form .admin-field > label {
	font-size: var(--font-size-small);
}
#bf-form .teilnehmer-field {
	font-size: var(--font-size-label);
}
#bf-form .buchung-section-heading {
	font-family: var(--font-display);
	font-size: var(--font-size-body);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

/* "Ich nehme selbst teil" gesperrt, wenn ein Wieder-Aktivieren den Kurs
   überbuchen würde (updateCapacityHint in booking-form.js). */
#bf-form .kontakt-checkbox--locked {
	opacity: 0.5;
	cursor: not-allowed;
}
#bf-form .kontakt-checkbox--locked input {
	cursor: not-allowed;
}

/* Einwilligungs-Häkchen (AGB/Widerruf u. a.) außerhalb des Feldrasters: die
   Fehlermeldung von setFieldError() ist ein drittes Flex-Kind der Zeile und
   säße sonst gequetscht neben dem Text – hier auf eine eigene Zeile UNTER dem
   Häkchen umbrechen (auch mobil). Und das Häkchen bei Fehler deutlich rot
   umrahmen, damit klar ist, woran es hängt. */
#bf-form .kontakt-checkbox:has(.admin-field-error) {
	flex-wrap: wrap;
}
/* Der Beschriftungs-Text bleibt neben dem Häkchen (flex:1 + min-width:0), sonst
   drückt seine breite Eigengröße ihn beim Wrap komplett unter die Box. Nur die
   Fehlermeldung nimmt eine volle eigene Zeile. */
#bf-form
	.kontakt-checkbox:has(.admin-field-error)
	> span:not(.admin-field-error) {
	flex: 1;
	min-width: 0;
}
#bf-form .kontakt-checkbox .admin-field-error {
	flex-basis: 100%;
	margin-left: var(--space-2xl);
}
#bf-form .kontakt-checkbox input[aria-invalid="true"] {
	outline: 2px solid var(--danger);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Gleicher Abstand zwischen der "Ich nehme selbst teil"-Karte und dem ersten
   eingetragenen Teilnehmer wie zwischen den Teilnehmerkarten untereinander
   (getrennte Grid-Items ohne row-gap). Die Bucher-Teilnehmerzeile steckt jetzt
   IN der Karte (#bf-self-card), keine eigene Kachel mehr. */
#bf-form #bf-self-card + #bf-participants:not(:empty) {
	margin-top: var(--space-m);
}

/* Entwurfszeile (Vorname/Nachname): Felder oben statt vertikal
   zentriert ausrichten. .teilnehmer-row zentriert seine Kinder standardmäßig
   (align-items: center) – bei einem Feldfehler wachsen die Spalten je nach
   Länge des Fehlertexts unterschiedlich hoch (1 vs. 2 Zeilen), wodurch die
   Eingabefelder sonst auf ungleiche Höhen auseinanderrutschen. */
#bf-form .teilnehmer-row.is-draft {
	align-items: flex-start;
}

/* Fläche/Balken/Padding/Radius kommen aus .info-strip .info-strip--accent
   (common.css); hier nur das Innenlayout der beiden Zeilen. */
.buchung-kurs-summary {
	display: grid;
	gap: var(--space-2xs);
}
.buchung-kurs-summary span {
	font-size: var(--font-size-small);
	color: var(--petrol-900);
}
.buchung-kurs-name {
	font-family: var(--font-display);
	font-size: var(--font-size-body);
	color: var(--petrol-900);
}
/* Gesamtbetrag über dem Absenden-Button – neutraler .info-strip (common.css),
   die große Betragszahl (.buchung-summe-total) bleibt dominant. */
.buchung-summe {
	display: grid;
	gap: var(--space-3xs);
}
.buchung-summe-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-m);
}
.buchung-summe-label {
	font-family: var(--font-mono);
	font-size: var(--font-size-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-600);
}
.buchung-summe-total {
	font-family: var(--font-display);
	font-size: var(--font-size-lead);
	color: var(--petrol-900);
	white-space: nowrap;
}
.buchung-summe-detail {
	font-size: var(--font-size-small);
	color: var(--ink-600);
}
.form-row select {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	color: var(--ink-900);
	background: var(--surface-050);
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	padding: var(--space-m) var(--space-md);
	width: 100%;
}
/* Die früheren .public-course-picker* / .public-salutation-* Custom-Picker
   sind entfernt: der Kurstermin-Picker nutzt jetzt .admin-booking-picker
   (common.css); die frühere Anrede-Auswahl ist ganz entfallen. */

/* Die Teilnehmerkarten-Struktur (.teilnehmer-liste/-row/-field/-actions/
   -name-remove/-entry-summary/-row-heading, Bearbeiten-/Entfernen-Icons, der
   Entwurf/Eintrag-Umschalter und die 640px-Regeln) steht jetzt in common.css
   und wird gemeinsam mit dem Admin-Formular genutzt. Hier bleibt nur der
   öffentlich-spezifische Rest. */
.teilnehmer-add {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: var(--space-m);
	margin-bottom: var(--space-xl);
}
/* Der deaktivierte Entwurfs-Button steht jetzt in common.css (gemeinsam mit
   dem Admin-Formular; deckt beide Add-Button-Varianten ab). */
/* "Bitte mind. eine teilnehmende Person" markiert Checkbox UND diesen Button –
   gleiche rote Hervorhebung wie [aria-invalid]. */
.teilnehmer-add--invalid {
	border-color: var(--danger);
	box-shadow: 0 0 0 1px var(--danger);
}
/* Gruppenüberschriften im Buchungsformular ("Buchungsdaten"/"Teilnehmer") –
   macht sichtbar, welche Felder zur buchenden Person gehören und welche zu
   den Teilnehmenden. */
.buchung-section-heading {
	font-family: var(--font-mono);
	font-size: var(--font-size-body);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--petrol-900);
	margin: var(--space-xl) 0 var(--space-md);
}
/* .buchung-hinweis (Datenschutz), .buchung-notice (Netzwerk-/Serverfehler) und
   .buchung-form-alert (Sammel-Fehlerbox) laufen jetzt über die gemeinsame
   .info-strip-Komponente (common.css). Hier bleibt nur der Rest, der von der
   Basis abweicht. */
.buchung-hinweis {
	font-size: var(--font-size-small);
}
/* Sammel-Fehlerbox: .info-strip .info-strip--danger + kräftigere Schrift. */
.buchung-form-alert {
	font-weight: 600;
}
.buchung-field-error {
	margin: 0;
	font-size: var(--font-size-small);
	font-weight: 600;
	line-height: 1.4;
	color: var(--danger-700);
}
.kontakt-form-card [aria-invalid="true"] {
	border-color: var(--danger);
	box-shadow: 0 0 0 1px var(--danger);
}
.kontakt-checkbox .buchung-field-error {
	flex-basis: 100%;
	margin-left: var(--space-2xl);
}
.kontakt-checkbox:has(.buchung-field-error) {
	flex-wrap: wrap;
}
.kontakt-form-card > .kontakt-checkbox + .buchung-field-error {
	margin: calc(-1 * var(--space-m)) 0 var(--space-m) var(--space-2xl);
}
.kontakt-form-card .btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}
@media (max-width: 640px) {
	.buchung-submit {
		position: sticky;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 2;
		box-shadow: 0 4px 14px rgba(18, 38, 47, 0.18);
	}

	/* Auf dem Handy volle Breite (Text zentriert via .btn) – wie der
	   Benachrichtigen-Button im Termin-Erinnern-Formular. */
	.buchung-submit,
	#bf-add-participant {
		width: 100%;
		flex: 1 1 100%;
		justify-self: stretch;
		margin-left: 0;
		margin-right: 0;
	}
}
.termin-desc {
	margin-top: var(--space-m);
	font-size: var(--font-size-small);
	color: var(--ink-600);
	overflow-wrap: anywhere;
	line-height: 1.5;
	/* Zeilenumbrüche/Absätze aus dem Admin-Textfeld beibehalten, statt sie
	   wie bei normalem Flieftext zu kollabieren. */
	white-space: pre-line;
}
/* Danke-Seite: Buchungsnummer aus der Weiterleitung nach erfolgreicher Buchung */
.danke-buchungsnummer {
	margin-top: var(--space-xl);
	padding: var(--space-l) var(--space-xl);
	background: var(--success-100);
	border: 1px solid var(--success);
	border-radius: var(--radius-m);
	color: var(--success-700);
	font-size: var(--font-size-body);
	line-height: 1.5;
}
.danke-buchungsnummer strong {
	font-family: var(--font-mono);
	font-size: var(--font-size-lead);
}