/* -----------------------------------------------------------------------------
 * MotionMatters — Kaufstrecke (Buchungsmodul)
 *
 * Das Buchungsmodul bringt eigenes Markup aus seiner Legacy-Zeit mit
 * (id-getragene Bereiche, Aufraeum-Divs, Klassennamen wie .product_item).
 * Die Gestaltung dazu lag frueher im abgeloesten Fremdtheme; hier steht sie
 * eigen. Das Markup selbst wird nur dort angefasst, wo es sachlich falsch war.
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * 1. Auswahlmaske (Gutschein, Kurs)
 * -------------------------------------------------------------------------- */

/* Die Maske nutzt die volle Inhaltsbreite. Frueher stand hier eine feste
   Schranke von 860 px: auf breiten Bildschirmen blieb damit rechts ein Drittel
   der Seite leer, waehrend Kopfbild und Ueberschrift darueber bis an den Rand
   reichten — die Maske sah aus wie an den linken Rand gerutscht. */
.booking-select { max-width: none; }

.booking-select #details_container,
.booking-select .form { width: 100%; }

/* Die Kursbeschreibung kommt als eingeschobener Beitrag herein und bringt
   dessen Standard-Innenabstand mit. Direkt unter der Ueberschrift und direkt
   ueber der Maske ist der zu gross. */
.booking-select > .mod_article {
	padding-top: 0;
	padding-bottom: var(--mm-abstand-4);
}

.booking-select > .mod_article > .container { padding-inline: 0; }

/* Die Aufraeum-Divs des Moduls sind in einer Spalte gegenstandslos. */
.booking-select .form_details,
.booking-select .mm-auswahlspalte {
	display: flex;
	flex-direction: column;
	gap: var(--mm-abstand-4);
}

.booking-select .form_details > div[style*="clear"] { display: none; }

/* Ab hier ist Platz fuer zwei Spalten: links die Auswahl (Wert, Anzahl,
   Personalisierung, Einverstaendnis), rechts die Kaufkarte mit Preis und
   Knopf. Die Karte bleibt beim Blaettern stehen, damit der Preis auch neben
   einer langen Kontraindikationsliste sichtbar ist.
   Bewusst Flex und nicht Raster: im Raster haetten die Kaesten der linken
   Spalte die Zeilenhoehe der Karte geerbt und waeren mit einer Luecke
   auseinandergefallen. */
@media (min-width: 1000px) {
	.booking-select .form_details {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--mm-abstand-7);
	}

	.booking-select .form_details > .mm-auswahlspalte { flex: 1 1 420px; }

	.booking-select .form_details > .mm-kaufkarte {
		flex: 0 0 360px;
		position: sticky;
		top: calc(var(--mm-kopfhoehe, 88px) + var(--mm-luft));
	}
}

/* Eine Auswahlzeile: Symbol mit Beschriftung links, Feld rechts. */
.booking_widget.with_icon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px var(--mm-abstand-3);
	padding: var(--mm-abstand-3);
	background: var(--mm-akzent-blass);
	border-radius: var(--mm-radius-gross);
}

.booking_widget .widget_icon {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	min-width: 190px;
}

.booking_widget .widget_icon .mm-symbol {
	width: 22px;
	height: 22px;
	color: var(--mm-akzent);
}

.booking_widget .widget_icon label {
	margin: 0;
	font-size: var(--mm-schrift);
	color: var(--mm-text-kraeftig);
}

.booking_widget .widget_fields { flex: 1 1 240px; }
.booking_widget .widget_fields select { max-width: 260px; }

/* -----------------------------------------------------------------------------
 * 2. Personalisierung
 * -------------------------------------------------------------------------- */

#personalize {
	padding: var(--mm-abstand-4);
	background: var(--mm-flaeche);
	border: 1px solid var(--mm-linie);
	border-radius: var(--mm-radius-gross);
}

/* Zeichen links, daneben Ueberschrift und darunter der Hinweis — deshalb ein
   Raster statt einer Reihe. */
#personalize #icon_label {
	display: grid;
	grid-template-columns: 22px 1fr;
	align-items: center;
	gap: 4px 10px;
	margin-bottom: var(--mm-abstand-3);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mm-linie);
}

#personalize #icon_label .mm-symbol {
	width: 22px;
	height: 22px;
	color: var(--mm-akzent);
}

#personalize #icon_label p {
	grid-column: 2;
	margin: 0;
	font-weight: var(--mm-fett);
	color: var(--mm-text-kraeftig);
}

#personalize #icon_label .hinweis {
	font-size: var(--mm-schrift-klein);
	font-weight: normal;
	color: var(--mm-text-leise);
}

#personalize #text_box {
	display: grid;
	gap: var(--mm-abstand-3);
}

/* Die drei Zeilen sind kurze Grussformeln — ein Feld ueber die ganze
   Kastenbreite laedt zu Romanen ein und sieht auf breiten Bildschirmen leer
   aus. */
#personalize #text_box input { max-width: 620px; }

#personalize .widget_fields label {
	display: block;
	margin-bottom: 6px;
}

/* -----------------------------------------------------------------------------
 * 3. Einverstaendnis (Kursauswahl)
 *
 * Der Kurs verlangt eine Bestaetigung, keine Kontraindikation zu haben; die
 * Liste dazu haengt als eingeschobener Beitrag mit Klappe darunter. Die
 * Gestaltung lag bis 2026-08-20 in files/assets-mm/scss/4_booking.scss und
 * damit ausserhalb des Themes.
 * -------------------------------------------------------------------------- */

#consent {
	padding: var(--mm-abstand-4);
	background: var(--mm-akzent-blass);
	border: 1px solid var(--mm-akzent-hell);
	border-radius: var(--mm-radius-gross);
}

/* Kaestchen und Beschriftung stehen nebeneinander; die Beschriftung ist oft
   zweizeilig, deshalb oben ausgerichtet und nicht mittig. */
#consent .formcontainer {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

#consent .formcontainer input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	flex: 0 0 auto;
	accent-color: var(--mm-akzent);
}

#consent .formcontainer label {
	margin: 0;
	font-weight: var(--mm-fett);
	color: var(--mm-text-kraeftig);
	cursor: pointer;
}

/* Fehlt die Bestaetigung, faerbt sich der ganze Block. */
#consent.error {
	background: #fff3f2;
	border-color: var(--mm-warnung);
}

#consent.error .formcontainer label { color: var(--mm-warnung); }

/* Der eingeschobene Beitrag mit der Klappe bringt Innenabstaende eines
   Seitenabschnitts mit — hier steckt er in einem Kasten. */
#consent .mod_article {
	padding: 0;
	margin-top: var(--mm-abstand-3);
}

#consent .mod_article > .container { padding-inline: 0; }

#consent .ce_accordion {
	background: var(--mm-flaeche);
	border: 1px solid var(--mm-linie);
	border-radius: var(--mm-radius-gross);
}

/* Die Klappe steht hier in einem Kasten und braucht darin eigenen Rand —
   die Grundform des Akkordeons hat keinen, weil sie sonst im Fliesstext
   eingerueckt wirkte. */
#consent .ce_accordion .toggler {
	padding: var(--mm-abstand-3) 44px var(--mm-abstand-3) var(--mm-abstand-4);
	border-top: 0;
}

#consent .ce_accordion .toggler::after { right: var(--mm-abstand-4); }

#consent .ce_accordion .accordion {
	padding: 0 var(--mm-abstand-4) var(--mm-abstand-4);
	border-top: 1px solid var(--mm-linie);
}

#consent .ce_accordion .accordion > div { padding-top: var(--mm-abstand-3); }

#consent .ce_accordion .ce_text + .mm-raster { margin-top: var(--mm-abstand-3); }

/* Aufzaehlung wie im Fliesstext: eigenes Zeichen, eingerueckt, in Lesegroesse.
   Die Liste erbte vorher die Merkmalsliste der Startseite (blau, ohne
   Zeichen) und war danach auf 13 px heruntergesetzt — beides falsch. */
#consent .ce_accordion .rte ul {
	margin: 0;
	padding-left: 22px;
	list-style: disc;
}

#consent .ce_accordion .rte li {
	margin-bottom: 8px;
	font-size: var(--mm-schrift);
	line-height: var(--mm-zeile);
	color: var(--mm-text);
}

#consent .ce_accordion .rte li::marker { color: var(--mm-akzent); }

/* -----------------------------------------------------------------------------
 * 4. Produktzeile (Auswahl, Warenkorb, Kasse)
 * -------------------------------------------------------------------------- */

.product_item { margin: 0; }

.product_item .content_container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mm-abstand-3);
	padding: var(--mm-abstand-4);
	background: var(--mm-flaeche-leise);
	border-radius: var(--mm-radius-gross);
}

.product_item .content_container > div[style*="clear"] { display: none; }

.product_item .title { flex: 1 1 260px; }

/* Die Warengruppe steht als Vorzeile ueber dem Titel. */
.product_item .title > span {
	display: block;
	margin-bottom: 4px;
	font-size: var(--mm-schrift-klein);
	font-weight: var(--mm-fett);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-akzent-dunkel);
}

.product_item .title p {
	margin: 0;
	font-size: var(--mm-sg-4);
	font-weight: var(--mm-fett);
	line-height: var(--mm-zeile-eng);
	color: var(--mm-text-kraeftig);
}

.product_item .title p br { display: none; }

.product_item .content:empty { display: none; }

.product_item .price {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
}

.product_item .price .gesamt {
	margin: 0;
	font-size: var(--mm-sg-4);
	font-weight: var(--mm-fett);
	line-height: var(--mm-zeile-eng);
	color: var(--mm-text-kraeftig);
}

.product_item .price .gesamtpreis {
	margin: 2px 0 0;
	font-size: var(--mm-schrift-klein);
	color: var(--mm-text-leise);
}

.product_item .image { flex: 0 0 120px; }
.product_item .image img { display: block; width: 100%; height: auto; border-radius: var(--mm-radius); }

/* Beschreibung, Einzelpreiszeile und Entfernen-Knopf der Warenkorbansicht */
.product_item .content .description {
	margin: 0;
	font-size: var(--mm-schrift-klein);
	color: var(--mm-text-leise);
}

.product_item .price_details {
	flex-basis: 100%;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--mm-linie);
	font-size: var(--mm-schrift-klein);
	color: var(--mm-text-leise);
	text-align: right;
}

.product_item .price_details p { margin: 0; }

.product_item .remove { flex: 0 0 auto; }

.product_item .information {
	margin: var(--mm-luft) 0 0;
	font-size: var(--mm-schrift-klein);
	color: var(--mm-text-leise);
}

/* -----------------------------------------------------------------------------
 * 5. Kaufkarte
 *
 * Produktzeile und Kaufknopf als ein Block. Auf breiten Bildschirmen steht er
 * als Karte rechts neben der Auswahl (siehe Abschnitt 1), auf schmalen
 * darunter. In der Karte ist die Produktzeile keine Zeile mehr, sondern eine
 * Spalte — deshalb werden die Zeilenregeln hier zurueckgenommen.
 * -------------------------------------------------------------------------- */

.mm-kaufkarte {
	display: flex;
	flex-direction: column;
	gap: var(--mm-abstand-3);
	padding: var(--mm-abstand-4);
	background: var(--mm-flaeche);
	border: 1px solid var(--mm-linie);
	border-radius: var(--mm-radius-gross);
	box-shadow: var(--mm-schatten);
}

.mm-kaufkarte .product_item .content_container {
	display: block;
	padding: 0;
	background: none;
	border-radius: 0;
}

.mm-kaufkarte .product_item .content { margin-top: var(--mm-luft-klein); }

/* Preis und Preisbezeichnung als Zeile ueber die ganze Kartenbreite:
   Bezeichnung links, Betrag rechts. Die Reihenfolge im Markup ist umgekehrt,
   deshalb row-reverse statt einer Umsortierung der Vorlage. */
.mm-kaufkarte .product_item .price {
	display: flex;
	flex-direction: row-reverse;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mm-luft);
	margin: var(--mm-abstand-3) 0 0;
	padding-top: var(--mm-abstand-3);
	border-top: 1px solid var(--mm-linie);
	text-align: left;
}

.mm-kaufkarte .product_item .price .gesamt { font-size: var(--mm-sg-5); }
.mm-kaufkarte .product_item .price .gesamtpreis { margin: 0; }

.mm-kaufkarte .submit_container { justify-content: stretch; }

.mm-kaufkarte .submit_container .submit {
	width: 100%;
	min-width: 0;
}

/* -----------------------------------------------------------------------------
 * 6. Knopfzeile
 * -------------------------------------------------------------------------- */

/* Die Klasse "green" stammt aus dem Fremdtheme und traegt hier keine Farbe
   mehr — der Knopf folgt der Akzentfarbe wie alle anderen. */
/* Die Knopfzeile traegt im Warenkorb neben dem Knopf auch den
   Schnellkauf-Block der Zahlungsanbieter — deshalb mittig ausgerichtet und
   umbruchfaehig, sonst zieht sich der Knopf auf dessen Hoehe. */
.submit_container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--mm-luft);
}

.submit_container .submit { min-width: 260px; }

.submit_container.minimal,
.submit_container.remove-item { display: inline-flex; }

.submit_container.minimal .submit,
.submit_container.remove-item .submit {
	min-width: 0;
	padding: 6px 12px;
	background: transparent;
	color: var(--mm-text-leise);
}

.submit_container.minimal .submit:hover,
.submit_container.remove-item .submit:hover {
	background: transparent;
	color: var(--mm-warnung);
}

/* Der Abbruchverweis steht als stiller Verweis links unter der Maske. */
#button_cancel_booking {
	margin-top: var(--mm-abstand-3);
}

#button_cancel_booking a {
	font-size: var(--mm-schrift-klein);
	color: var(--mm-text-leise);
	text-decoration: underline;
}

#button_cancel_booking a:hover { color: var(--mm-akzent-dunkel); }

/* -----------------------------------------------------------------------------
 * 7. Kasse
 *
 * Fortschrittsleiste, Schrittkasten und Warenkorb-Zusammenfassung der
 * Bestellstrecke. Bis 2026-08-21 stand das in files/booking/5_booking_checkout.scss
 * mit fremden Festwerten (Gruen, graue Pillen, Gleitsatz) und lud nach dem Theme.
 * -------------------------------------------------------------------------- */

/* Zweispaltig wie die Auswahlmasken: Schritt links, Warenkorb rechts. Die
   leeren clear-Zwischenstuecke des Templates duerfen keine Rasterzellen werden. */
.mod_booking_checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mm-abstand-4);
	align-items: start;
}

.mod_booking_checkout > div[style*="clear"] { display: none; }

@media (min-width: 1000px) {
	.mod_booking_checkout {
		grid-template-columns: minmax(0, 1fr) 360px;
		column-gap: var(--mm-abstand-7);
	}

	.mod_booking_checkout > #progress_container { grid-column: 1 / -1; }

	.mod_booking_checkout > #cart_checkout {
		position: sticky;
		top: calc(var(--mm-kopfhoehe, 88px) + var(--mm-luft));
	}
}

/* Fortschrittsleiste: fuenf gleich breite Stationen. */
#progress_container {
	display: flex;
	gap: var(--mm-luft-klein);
}

#progress_container .progress { flex: 1 1 0; min-width: 0; }

#progress_container .progress h2 {
	margin: 0;
	padding: 10px 12px;
	border-radius: 999px;
	background: var(--mm-flaeche-leise);
	font-size: var(--mm-schrift-klein);
	font-weight: var(--mm-fett);
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	color: var(--mm-text-leise);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#progress_container .progress.active h2 {
	background: var(--mm-akzent);
	color: var(--mm-flaeche);
}

#progress_container .progress.done h2 {
	background: var(--mm-akzent-blass);
	color: var(--mm-akzent-dunkel);
}

/* Schrittkasten */
#step_container {
	padding: var(--mm-abstand-5);
	background: var(--mm-flaeche);
	border: 1px solid var(--mm-linie);
	border-radius: var(--mm-radius-gross);
	box-shadow: var(--mm-schatten);
}

#step_container > h2 {
	margin: 0 0 var(--mm-abstand-4);
	font-size: var(--mm-sg-5);
}

/* Kontowahl: die beiden Moeglichkeiten als anklickbare Kaesten. */
#step_container .radio_container {
	margin: 0;
	padding: 0;
	border: 0;
}

#step_container .radio_container legend {
	margin-bottom: var(--mm-abstand-3);
	padding: 0;
	font-weight: var(--mm-fett);
	color: var(--mm-text-kraeftig);
}

.hasteform_CheckoutLogin .radio_container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-luft-klein);
}

.hasteform_CheckoutLogin .radio_container legend { flex-basis: 100%; }

.hasteform_CheckoutLogin .radio_container > span {
	flex: 1 1 260px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var(--mm-abstand-3);
	border: 1px solid var(--mm-linie);
	border-radius: var(--mm-radius);
	cursor: pointer;
}

.hasteform_CheckoutLogin .radio_container > span:has(input:checked) {
	border-color: var(--mm-akzent);
	background: var(--mm-akzent-blass);
}

.hasteform_CheckoutLogin .radio_container input[type="radio"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--mm-akzent);
	cursor: pointer;
}

.hasteform_CheckoutLogin .radio_container label {
	margin: 0;
	font-size: var(--mm-schrift);
	font-weight: var(--mm-fett-normal, 400);
	cursor: pointer;
}

.hasteform_CheckoutLogin .widget-submit { margin-top: var(--mm-abstand-4); }

/* Anmeldeformular fuer Bestandskunden: eingeklappt, bis die zweite
   Moeglichkeit gewaehlt ist (Klasse setzt theme.js). Frueher oeffnete hier
   ein Colorbox-Popup, dessen Bibliothek es nicht mehr gibt. */
#step_container .header-login { display: none; }

#step_container.mm-konto-anmeldung .header-login {
	display: block;
	margin-top: var(--mm-abstand-4);
	padding: var(--mm-abstand-4);
	background: var(--mm-akzent-blass);
	border: 1px solid var(--mm-akzent-hell);
	border-radius: var(--mm-radius);
}

/* Solange die Anmeldung offen ist, ist sie der naechste Schritt — der
   Weiter-Knopf der Kontowahl wuerde nur in eine Fehlermeldung laufen. */
#step_container.mm-konto-anmeldung .hasteform_CheckoutLogin .widget-submit { display: none; }

#step_container .header-login h3 { margin: 0 0 var(--mm-abstand-3); }

#step_container .header-login .widget { margin-bottom: var(--mm-abstand-3); }

#step_container .header-login .widget label {
	display: block;
	margin-bottom: 6px;
	font-weight: var(--mm-fett);
}

#step_container .header-login input.text { width: 100%; max-width: 420px; }

#step_container .header-login p a {
	font-size: var(--mm-schrift-klein);
	color: var(--mm-text-leise);
	text-decoration: underline;
}

#step_container .header-login p a:hover { color: var(--mm-akzent-dunkel); }

/* Adressformular (zweiter Schritt): auf grossen Schirmen stehen die Felder
   paarweise nebeneinander, Kontrollkasten und Knopfzeile laufen ueber die
   volle Breite. Auf kleinen Schirmen bleibt alles untereinander. */
.hasteform_CheckoutAdress .widget { margin: 0 0 var(--mm-abstand-3); }

.hasteform_CheckoutAdress input.text,
.hasteform_CheckoutAdress select {
	width: 100%;
}

/* Leergut aus der Float-Zeit: die clear-Trenner wuerden im Raster als
   eigene Zellen zaehlen und die Paare verschieben. */
.hasteform_CheckoutAdress div[style*="clear"] { display: none; }

/* "Abweichende Rechnungsadresse": anklickbarer Kasten wie die Kontowahl. */
.hasteform_CheckoutAdress .widget-checkbox .checkbox_container,
.hasteform_CheckoutConfirmation .widget-checkbox .checkbox_container {
	margin: 0;
	padding: 0;
	border: 0;
}

.hasteform_CheckoutAdress .widget-checkbox .checkbox_container > span,
.hasteform_CheckoutConfirmation .widget-checkbox .checkbox_container > span {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var(--mm-abstand-3);
	border: 1px solid var(--mm-linie);
	border-radius: var(--mm-radius);
	cursor: pointer;
}

.hasteform_CheckoutAdress .widget-checkbox .checkbox_container > span:has(input:checked),
.hasteform_CheckoutConfirmation .widget-checkbox .checkbox_container > span:has(input:checked) {
	border-color: var(--mm-akzent);
	background: var(--mm-akzent-blass);
}

.hasteform_CheckoutAdress .widget-checkbox input[type="checkbox"],
.hasteform_CheckoutConfirmation .widget-checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--mm-akzent);
	cursor: pointer;
}

.hasteform_CheckoutAdress .widget-checkbox label,
.hasteform_CheckoutConfirmation .widget-checkbox label {
	margin: 0;
	font-size: var(--mm-schrift);
	font-weight: var(--mm-fett-normal, 400);
	cursor: pointer;
}

/* Aufgeklappte Rechnungsadresse: das alte Booking-CSS (laedt NACH dem
   Theme) schaltet sie per .showFormBlock auf display:inline, und beim
   Wiederaufbau nach einem Fehler nimmt das Modul-JS nur .hideFormBlock
   weg — deshalb greift die Regel immer, wenn nicht versteckt ist; die
   Kennung in der Kette gewinnt gegen .showFormBlock. */
#checkout_form_billing:not(.hideFormBlock) { display: block; margin-top: var(--mm-abstand-3); }

@media (min-width: 1000px) {
	.hasteform_CheckoutAdress .formbody,
	#checkout_form_billing:not(.hideFormBlock) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--mm-abstand-4);
		align-items: start;
	}

	/* Die Rechnungsadresse steckt in einer eigenen Schachtel: sie laeuft
	   ueber die volle Breite und rastert ihre Felder selbst. */
	.hasteform_CheckoutAdress .widget-checkbox,
	.hasteform_CheckoutAdress #checkout_form_billing,
	.hasteform_CheckoutAdress .widget-submit {
		grid-column: 1 / -1;
	}
}

/* Der Kasten bringt unten schon seinen eigenen Innenabstand mit — der
   Absenden-Knopf braucht darunter keinen zweiten. */
#step_container .widget-submit { margin-bottom: 0; }

/* Schnellzahlwege (Stripe) unter Kontowahl und Anmeldung; das
   Anmeldeformular haengt theme-seitiges JS direkt unter die Kontowahl. */
.fast-checkout-methods { margin-top: var(--mm-abstand-4); }

/* Zahlwege (Schritt Bezahlung): Auswahlkaesten wie die Kontowahl — Radio,
   Name links, Logo rechts; die Beschreibung klappt im gewaehlten Kasten auf
   (das Modul-JS schaltet die Sichtbarkeit). */
.payment_description {
	margin: 0 0 var(--mm-abstand-3);
	font-weight: var(--mm-fett);
	color: var(--mm-text-kraeftig);
}

.payment-methods {
	display: flex;
	flex-direction: column;
	gap: var(--mm-luft-klein);
}

.payment-method {
	border: 1px solid var(--mm-linie);
	border-radius: var(--mm-radius);
	background: var(--mm-flaeche);
	overflow: hidden;
}

.payment-method:has(input:checked) { border-color: var(--mm-akzent); }

.payment-method__name {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var(--mm-abstand-3);
}

.payment-method:has(input:checked) .payment-method__name {
	background: var(--mm-akzent-blass);
}

.payment-method__name input[type="radio"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--mm-akzent);
	cursor: pointer;
}

.payment-method__name label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: var(--mm-schrift);
	font-weight: var(--mm-fett);
	color: var(--mm-text-kraeftig);
	cursor: pointer;
}

.payment-method__name img {
	height: 26px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
}

.payment-method__content {
	padding: var(--mm-abstand-3) var(--mm-abstand-4);
	border-top: 1px solid var(--mm-linie);
}

.payment-method__content p { margin: 0 0 var(--mm-abstand-3); }

/* Kreditkartenfelder: Stripe haengt seine iframes in diese Rahmen. */
#stripe-card-number-element,
#stripe-card-expiry-element,
#stripe-card-cvc-element {
	margin-bottom: 10px;
	padding: 10px 12px;
	background: var(--mm-flaeche);
	border: 1px solid var(--mm-linie);
	border-radius: var(--mm-radius);
}

#stripe-card-number-element { max-width: 420px; }

#stripe-card-expiry-element,
#stripe-card-cvc-element {
	display: inline-block;
	width: 130px;
	margin-right: 10px;
}

#stripe-card-errors:not(:empty),
#stripe-apple-pay-errors:not(:empty) {
	margin-bottom: var(--mm-abstand-3);
	padding: var(--mm-abstand-3);
	border: 1px solid var(--mm-warnung);
	border-radius: var(--mm-radius);
	color: var(--mm-warnung);
	font-weight: var(--mm-fett);
}

.mod_booking_checkout_payment form > button,
.mod_booking_checkout_payment .submit { margin-top: var(--mm-abstand-4); }

/* Pruefen (letzter Schritt): Hinweiskasten, Datenspalten, AGB-Kasten. */
/* Der Hinweis ist eine Warnung ("noch nicht abgeschlossen") — deshalb Gelb
   mit Warnzeichen, nicht das Akzentblau der neutralen Kaesten. */
.mod_booking_checkout_confirmation .information {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 var(--mm-abstand-4);
	padding: var(--mm-abstand-3) var(--mm-abstand-4);
	background: #fff7de;
	border: 1px solid #ecd28e;
	border-radius: var(--mm-radius);
	color: #6b5718;
	font-weight: var(--mm-fett);
}

.mod_booking_checkout_confirmation .information .mm-symbol {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: #c19017;
}

#checkout_container {
	display: grid;
	gap: var(--mm-abstand-4);
	margin-bottom: var(--mm-abstand-4);
	padding-bottom: var(--mm-abstand-4);
	border-bottom: 1px solid var(--mm-linie);
}

@media (min-width: 1000px) {
	#checkout_container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#checkout_container .text_box--zahlung { grid-column: 1 / -1; }
}

#checkout_container h3,
#checkout_container h4 {
	margin: 0 0 var(--mm-abstand-3);
	font-size: var(--mm-sg-4);
}

#checkout_container .text {
	color: var(--mm-text);
	margin-bottom: var(--mm-abstand-3);
}

/* Bezahlung und Anmerkungen stehen im selben Kasten untereinander —
   die Zwischenueberschrift braucht Luft nach oben. */
#checkout_container .text_box--zahlung h4 { margin-top: var(--mm-abstand-4); }

#kontaktdaten,
#rechnungsdaten { line-height: 1.8; }

/* Beschriftung als stille Spalte vor dem Wert. */
#kontaktdaten span,
#rechnungsdaten span {
	display: inline-block;
	min-width: 110px;
	color: var(--mm-text-leise);
}

#date_container { margin-bottom: var(--mm-abstand-4); }

.hasteform_CheckoutConfirmation .widget-submit { margin: var(--mm-abstand-4) 0 0; }

/* Meldungen der Bestellstrecke */
.mod_booking_status p.error,
.mod_booking_status p.confirmation {
	margin: 0 0 var(--mm-abstand-4);
	padding: var(--mm-abstand-3) var(--mm-abstand-4);
	border-radius: var(--mm-radius);
	border: 1px solid var(--mm-linie);
	background: var(--mm-flaeche);
}

.mod_booking_status p.error {
	border-color: #ae1c42;
	color: #ae1c42;
}

.mod_booking_status p.confirmation {
	border-color: var(--mm-akzent-hell);
	background: var(--mm-akzent-blass);
	color: var(--mm-text-kraeftig);
}

/* Warenkorb-Zusammenfassung rechts. Die Preisliste teilt sich Kennung und
   Grundregeln mit der Warenkorbseite (files/booking/4_booking_elements.scss,
   laedt NACH dem Theme) — deshalb hier durchgehend mit #price_container in der
   Kette, damit die Karte gewinnt, ohne die Warenkorbseite anzufassen. */
#cart_checkout {
	padding: var(--mm-abstand-4);
	background: var(--mm-flaeche);
	border: 1px solid var(--mm-linie);
	border-radius: var(--mm-radius-gross);
	box-shadow: var(--mm-schatten);
}

#cart_checkout > br { display: none; }

#cart_checkout h3 {
	margin: 0 0 var(--mm-abstand-3);
	font-size: var(--mm-sg-4);
}

#cart_checkout #products_container {
	margin-bottom: var(--mm-abstand-3);
	padding-bottom: var(--mm-abstand-3);
	border-bottom: 1px solid var(--mm-linie);
	font-weight: var(--mm-fett);
	color: var(--mm-text-kraeftig);
	line-height: 1.5;
}

#cart_checkout #price_container {
	border: 0;
	border-radius: 0;
	padding: 0;
	color: var(--mm-text-leise);
	font-size: var(--mm-schrift);
}

#cart_checkout #price_container #infos { float: none; width: auto; }

#cart_checkout #price_container div[style*="clear"] { display: none; }

#cart_checkout #price_container .ohne_mwst,
#cart_checkout #price_container .mwst { border: 0; }

/* label und value stehen als Geschwister-Absaetze — je zwei bilden eine Zeile. */
#cart_checkout #price_container .ohne_mwst,
#cart_checkout #price_container .mwst,
#cart_checkout #price_container #gesamtbetrag {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--mm-luft);
	row-gap: 6px;
	align-items: baseline;
}

#cart_checkout #price_container .label,
#cart_checkout #price_container .value {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	text-transform: none;
	text-decoration: none;
	line-height: 1.4;
}

#cart_checkout #price_container .value { text-align: right; }

#cart_checkout #price_container #gesamtbetrag {
	float: none;
	width: auto;
	margin-top: var(--mm-abstand-3);
	padding: var(--mm-abstand-3) 0 0;
	border-top: 1px solid var(--mm-linie);
	font-size: var(--mm-schrift);
	font-weight: var(--mm-fett-normal, 400);
	color: var(--mm-text-kraeftig);
}

#cart_checkout #price_container #gesamtbetrag .value {
	font-size: var(--mm-sg-5);
	font-weight: var(--mm-fett);
}

#cart_checkout #price_container #gesamtbetrag .label {
	font-size: var(--mm-schrift);
	font-weight: var(--mm-fett-normal, 400);
	text-transform: none;
	padding: 0;
	color: var(--mm-text-leise);
}

/* -----------------------------------------------------------------------------
 * 8. Schmale Bildschirme
 * -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.booking_widget.with_icon { gap: 10px; }
	.booking_widget .widget_icon { min-width: 0; flex-basis: 100%; }
	.booking_widget .widget_fields select { max-width: none; }

	#personalize { padding: var(--mm-abstand-3); }

	#consent { padding: var(--mm-abstand-3); }
	#consent .ce_accordion .toggler { padding: var(--mm-abstand-3) 36px var(--mm-abstand-3) var(--mm-abstand-3); }
	#consent .ce_accordion .toggler::after { right: var(--mm-abstand-3); }
	#consent .ce_accordion .accordion { padding: 0 var(--mm-abstand-3) var(--mm-abstand-3); }
	#consent .ce_accordion .rte li { font-size: var(--mm-sg-2); }

	.mm-kaufkarte { padding: var(--mm-abstand-3); }

	.booking-select > .mod_article { padding-bottom: var(--mm-abstand-5); }

	.product_item .content_container { padding: var(--mm-abstand-3); }
	.product_item .price { margin-left: 0; text-align: left; }

	.submit_container { justify-content: stretch; }
	.submit_container .submit { width: 100%; min-width: 0; }

	/* Kasse: Stationen umbrechen, Kaesten mit weniger Innenabstand. */
	#progress_container { flex-wrap: wrap; }
	#progress_container .progress { flex: 1 1 auto; }
	#progress_container .progress h2 { padding: 7px 10px; font-size: 11px; }

	#step_container { padding: var(--mm-abstand-3); }
	#step_container.mm-konto-anmeldung .header-login { padding: var(--mm-abstand-3); }
	#cart_checkout { padding: var(--mm-abstand-3); }
}