/* Container-Weißraum analog zur Seminar-Detailansicht (siehe detail.css:
   „Größerer Weißraum nach oben"/horizontales Padding), Rückmeldung
   23.09.2026 — betrifft Formular, Zusammenfassung und Bestätigung
   gleichermaßen, da alle drei `.bgg-buchung` als Wrapper nutzen. */
.bgg-buchung {
	max-width: 90rem;
	margin: 0 auto;
	/* Abstand nach unten zum Footer – gleich wie die Detailansicht. */
	padding: var(--bgg-space-2xl) var(--bgg-space-md) var(--bgg-space-2xl);
}

@media (max-width: 767px) {
	.bgg-buchung {
		padding-bottom: var(--bgg-space-xl);
	}
}

.bgg-buchung fieldset {
	border: var(--bgg-border);
	border-radius: var(--bgg-radius);
	/* 48px zwischen den Formularabschnitten — analog zum Abstand vor
	   „Zielgruppe"/„Referierende" auf der Detailseite (05.10.2026). */
	margin-bottom: var(--bgg-space-xl);
	padding: var(--bgg-space-sm);
}

.bgg-buchung legend {
	padding: 0 var(--bgg-space-2xs);
	font-weight: 600;
}

.bgg-buchung .bgg-feld {
	margin-bottom: var(--bgg-space-sm);
}

.bgg-buchung__fehlerliste {
	border: 2px solid var(--bgg-color-error);
	border-radius: var(--bgg-radius);
	margin-bottom: var(--bgg-space-md);
	padding: var(--bgg-space-sm) var(--bgg-space-md);
}

.bgg-buchung__fehlerliste:focus-visible {
	outline: 2px solid var(--bgg-color-error);
	outline-offset: 2px;
}

/* Zimmerbezeichnung und Preis stehen auf zwei Zeilen, das Radio bleibt
   dabei vertikal auf Höhe des gesamten (zweizeiligen) Texts zentriert. */
.bgg-scope .bgg-buchung__zimmeroption {
	display: flex;
	align-items: center;
	gap: var(--bgg-space-2xs);
	margin-bottom: var(--bgg-space-2xs);
	font-weight: normal;
}

.bgg-buchung__zimmeroption input[type="radio"] {
	flex-shrink: 0;
}

.bgg-buchung__zimmertext {
	display: flex;
	flex-direction: column;
}

.bgg-buchung__preis {
	margin: var(--bgg-space-md) 0;
	font-size: var(--bgg-font-size-lg);
	font-weight: 700;
}

/* Kopfbereich des Anmeldeformulars — dieselbe Typografie wie
   `.bgg-seminar-detail__*` auf der Detailseite (Kap. „Richte dich beim
   Styling am Rest der Seite"), hier eigenständig gehalten statt die
   Detail-Stylesheet-Abhängigkeit zu ziehen (Assets.php lädt je Widget nur
   sein eigenes CSS, Kap. 9.3). Abstände ebenfalls 1:1 von der Detailseite
   übernommen (05.10.2026): 32px Nummer→Titel, 48px Titel→Zeitraum, je 32px
   Zeitraum→Trenner→Inhalt. */
.bgg-buchung__kursnummer {
	margin: 0 0 var(--bgg-space-lg); /* 32px */
	color: var(--bgg-color-primary);
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
	font-size: var(--fs-label, 0.875rem);
	font-weight: 500;
}

.bgg-scope h1.bgg-buchung__titel,
.bgg-scope h2.bgg-buchung__titel {
	margin: 0 0 var(--bgg-space-xl); /* 48px */
	color: var(--bgg-color-primary);
	font-family: var(--e-global-typography-secondary-font-family, "Cormorant Garamond"), serif;
	font-size: var(--fs-h2-titel, 3.75rem);
	font-weight: 700;
	line-height: 1.1;
}

.bgg-buchung__zeitraum {
	margin: 0;
	color: var(--bgg-color-primary);
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
	font-size: var(--fs-text, 1.125rem);
	font-weight: 500;
}

/* „.bgg-scope hr." statt nur der Klasse: Formular und Zusammenfassung
   stecken auf Elementor-Seiten, wo ".elementor hr { margin: 0 }" (Elementor
   frontend.min.css, Klasse+Element) sonst den Rand komplett wegnimmt. */
.bgg-scope hr.bgg-buchung__trenner {
	margin: var(--bgg-space-lg) 0; /* 32px zu Zeitraum und Inhalt */
	border: none;
	border-top: var(--bgg-border);
}

.bgg-buchung legend {
	color: var(--bgg-color-primary);
	font-family: var(--e-global-typography-secondary-font-family, "Cormorant Garamond"), serif;
	font-size: var(--fs-h3-klein, 2rem);
	font-weight: 700;
}

/* Zwei Spalten wie im Screenshot — Felder ohne Partner (z. B. eine
   Checkbox-Zeile) nehmen mit `grid-column: 1 / -1` die volle Breite. */
.bgg-buchung__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--bgg-space-lg);
}

@media (max-width: 40rem) {
	.bgg-buchung__grid {
		grid-template-columns: 1fr;
	}
}

.bgg-buchung__anschriftstyp {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bgg-space-lg);
	margin-bottom: var(--bgg-space-sm);
}

.bgg-buchung__anschriftstyp label {
	display: flex;
	align-items: center;
	gap: var(--bgg-space-3xs);
	font-weight: 400;
}

.bgg-feld--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: var(--bgg-space-3xs);
	font-weight: 400;
}

.bgg-buchung__einwilligungen {
	display: flex;
	flex-direction: column;
	gap: var(--bgg-space-2xs);
}

.bgg-buchung__zimmeroptionen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--bgg-space-2xs) var(--bgg-space-lg);
	margin-bottom: var(--bgg-space-sm);
}

.bgg-buchung__preishinweis {
	margin: 0 0 var(--bgg-space-md);
	font-size: var(--bgg-font-size-sm);
}

/* Zusammenfassung: Kartenraster (Screenshot „Zusamenfassung.png", 22.09.2026),
   zwei Spalten wie im Anmeldeformular-Grid, jede Karte fällt auf schmalen
   Viewports auf volle Breite. */
/* Abstands-Schema der Detailseite (05.10.2026): 48px zwischen Abschnitten —
   auf der Bestätigungsseite Einleitungstext → Karten. Die Überschrift dort
   nutzt `.bgg-buchung__titel` (48px nach unten) wie die übrigen Schritte. */
.bgg-zusammenfassung__einleitung {
	margin: 0 0 var(--bgg-space-xl); /* 48px */
}

/* Bestätigung: Überschrift und Dankestext schmaler, beide auf dieselbe
   Kante, damit sie als Block wirken (der 60px-Titel bricht so auf zwei
   Zeilen um, der Text bleibt im lesefreundlichen Bereich). */
.bgg-buchung__bestaetigung .bgg-buchung__titel,
.bgg-buchung__danke-text {
	max-width: 48rem;
}

/* Aktionen am Ende der Bestätigung — 48px Abschnittsabstand wie Preisbox →
   Button in der Zusammenfassung. Block-Container, damit der Rand mit dem
   des Absatzes davor zusammenfällt (sonst 24px + 48px). */
.bgg-buchung__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bgg-space-sm);
	margin-top: var(--bgg-space-xl); /* 48px */
}

.bgg-buchung__aktionen .bgg-button {
	gap: var(--bgg-space-2xs);
}

/* Sekundärer Button (Kontur statt Fläche) für die nachrangige Aktion.
   Selektoren mit einer Klasse mehr als die Basis-/Hover-Regeln in base.css,
   damit Hintergrund und Schriftfarbe dort sicher überschrieben werden. */
.bgg-scope .bgg-button.bgg-button--sekundaer {
	border: 1px solid var(--bgg-color-primary);
	background-color: transparent;
	color: var(--bgg-color-primary);
}

.bgg-scope .bgg-button.bgg-button--sekundaer:hover,
.bgg-scope .bgg-button.bgg-button--sekundaer:focus,
.bgg-scope .bgg-button.bgg-button--sekundaer:focus-visible,
.bgg-scope .bgg-button.bgg-button--sekundaer:active {
	background-color: var(--bgg-color-primary);
	color: #fff;
}

/* Zusammenfassung: Einleitung steht zwischen Zeitraum und Trenner (wie im
   Screenshot) — 32px nach oben wie Zeitraum → Trenner, nach unten
   übernimmt der Trenner seine 32px. */
.bgg-zusammenfassung > .bgg-zusammenfassung__einleitung {
	margin: var(--bgg-space-lg) 0 0; /* 32px */
}

.bgg-zusammenfassung__karten {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--bgg-space-lg);
	margin-bottom: var(--bgg-space-lg);
}

@media (max-width: 40rem) {
	.bgg-zusammenfassung__karten {
		grid-template-columns: 1fr;
	}
}

.bgg-zusammenfassung__karte {
	border: var(--bgg-border);
	border-radius: var(--bgg-radius);
	padding: var(--bgg-space-sm) var(--bgg-space-md);
}

.bgg-zusammenfassung__kopf {
	display: flex;
	align-items: center;
	gap: var(--bgg-space-sm); /* 16px Icon → Überschrift */
	margin-bottom: var(--bgg-space-sm);
}

.bgg-scope .bgg-zusammenfassung__kopf h3 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	/* Anthrazit (#2B2B2B = globale Akzentfarbe) statt Grün und Montserrat
	   24px Medium statt Cormorant (Rückmeldung 05.10.2026). */
	color: var(--bgg-color-accent);
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
	font-size: var(--fs-teaser, 1.5rem);
	font-weight: 500;
}

.bgg-zusammenfassung__bearbeiten {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--bgg-space-3xs);
	font-size: var(--bgg-font-size-sm);
}

/* Stift vor „bearbeiten" wie im Screenshot — als Pseudo-Element, damit die
   fünf Links in summary.php kein zusätzliches Markup brauchen.
   currentColor: folgt der Linkfarbe inkl. Hover. */
.bgg-zusammenfassung__bearbeiten::before {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("../icons/bearbeiten.svg") center / contain no-repeat;
	mask: url("../icons/bearbeiten.svg") center / contain no-repeat;
}

/* Icons aus `assets/icons/` als CSS-Maske, gleiches Muster wie
   `.bgg-seminar-detail__icon` auf der Detailseite (Farbe aus dem Kit). */
.bgg-zusammenfassung__icon {
	flex-shrink: 0;
	width: 1.5rem; /* 24px */
	height: 1.5rem;
	background-color: var(--bgg-color-primary);
	-webkit-mask: var(--bgg-zusammenfassung-icon) center / contain no-repeat;
	mask: var(--bgg-zusammenfassung-icon) center / contain no-repeat;
}

.bgg-zusammenfassung__icon--teilnehmer {
	--bgg-zusammenfassung-icon: url("../icons/teilnehmer.svg");
}

.bgg-zusammenfassung__icon--anschrift {
	--bgg-zusammenfassung-icon: url("../icons/kontakt.svg");
}

.bgg-zusammenfassung__icon--seminar {
	--bgg-zusammenfassung-icon: url("../icons/seminar.svg");
}

.bgg-zusammenfassung__icon--zimmer {
	--bgg-zusammenfassung-icon: url("../icons/bett-klein.svg");
}

.bgg-zusammenfassung__icon--rechnung {
	--bgg-zusammenfassung-icon: url("../icons/rechnung.svg");
}

.bgg-zusammenfassung__icon--anmerkungen {
	--bgg-zusammenfassung-icon: url("../icons/anmerkungen.svg");
}

.bgg-zusammenfassung__zeile {
	display: flex;
	gap: var(--bgg-space-sm);
	margin-bottom: var(--bgg-space-md); /* 24px, Rückmeldung 05.10.2026 */
	font-size: var(--bgg-font-size-sm);
}

/* Letzte Zeile ohne Rand, sonst addieren sich die 24px zum Karten-Padding
   und die Karte wird unten deutlich luftiger als oben. */
.bgg-zusammenfassung__zeile:last-child {
	margin-bottom: 0;
}

.bgg-zusammenfassung__label {
	flex: 0 0 40%;
	color: var(--bgg-color-accent);
	opacity: 0.7;
}

.bgg-zusammenfassung__wert {
	flex: 1 1 auto;
	font-weight: 600;
}

.bgg-zusammenfassung__freitext {
	margin: 0;
	font-size: var(--bgg-font-size-sm);
}

.bgg-zusammenfassung__preisbox {
	border: var(--bgg-border);
	border-radius: var(--bgg-radius);
	padding: var(--bgg-space-sm) var(--bgg-space-md);
	margin-bottom: var(--bgg-space-xl); /* 48px bis zum Button */
}

.bgg-scope .bgg-zusammenfassung__preisbox hr.bgg-buchung__trenner {
	margin: var(--bgg-space-sm) 0;
}

/* Gesamtbetrag rechtsbündig in der Preisbox (Screenshot „zusammenfassung.png"). */
.bgg-zusammenfassung__preisbox .bgg-buchung__preis {
	margin-bottom: 0;
	text-align: right;
}

/* Steuerausweis unter dem Gesamtbetrag (MwSt. je Satz, Hinweis
   Steuerfreiheit Seminargebühr — Vorgabe BGG 20.10.2026). */
.bgg-preisaufstellung__steuer {
	margin: var(--bgg-space-2xs) 0 0;
	font-size: var(--bgg-font-size-sm);
	text-align: right;
}

/* Einzelpositionen über der Summe (seit 16.10.2026, templates/booking/positionen.php). */
.bgg-scope .bgg-preisaufstellung {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--bgg-font-size-sm);
}

.bgg-scope .bgg-preisaufstellung th,
.bgg-scope .bgg-preisaufstellung td {
	padding: var(--bgg-space-3xs) 0;
	border: 0;
	background: none;
	vertical-align: top;
}

.bgg-scope .bgg-preisaufstellung th {
	font-weight: normal;
	text-align: left;
}

.bgg-scope .bgg-preisaufstellung td {
	padding-left: var(--bgg-space-sm);
	text-align: right;
	white-space: nowrap;
}

.bgg-preisaufstellung__detail {
	display: block;
	opacity: 0.8;
}

.bgg-zusammenfassung__hinweis {
	margin-top: var(--bgg-space-sm);
}

/* Debug-Kasten „Übertragung an SEMINAR" auf der Bestätigungsseite
   (Config `debug_versand_feedback`, nur in der Testphase). Bewusst
   Signalfarben statt Site-Kit-Farben — soll als Werkzeug auffallen. */
.bgg-versandstatus {
	margin: var(--bgg-space-md) 0;
	padding: var(--bgg-space-xs) var(--bgg-space-sm);
	border: 2px dashed currentColor;
	border-radius: 0.25rem;
}

.bgg-versandstatus--ok {
	color: #1e6b2e;
	background-color: #eef8f0;
}

.bgg-versandstatus--fehler {
	color: #b3261e;
	background-color: #fff6f6;
}

.bgg-versandstatus--offen {
	color: #7a5a00;
	background-color: #fffaeb;
}

.bgg-versandstatus__titel {
	margin: 0;
}

.bgg-versandstatus__fehler {
	margin: var(--bgg-space-2xs) 0 0;
	white-space: pre-wrap;
	word-break: break-word;
	color: #2b2b2b;
}