/**
 * BTW Terminbuchung – Frontend.
 *
 * Breakpoints beziehen sich auf die Breite des Wizards (@container btw-tb),
 * nicht auf den Bildschirm: der Shortcode landet je nach Theme mal in einer
 * 1200px-Bahn, mal in einer 720px-Contentspalte. Mit @media wuerde dort die
 * Desktop-Aufteilung greifen und Kalender wie Uhrzeiten zusammenquetschen.
 * Fallback fuer Browser ohne Container-Queries: ganz am Ende der Datei.
 *
 * Stufen (Containerbreite): 320 / 360 / 400 / 480 / 620 / 640 / 960 / 980.
 */

.btw_tb {
	--btw-tb-accent: #0d5bd7;
	--btw-tb-accent-dark: #0a49ac;
	--btw-tb-accent-soft: #eaf1fd;
	--btw-tb-accent-softer: #f4f8ff;
	--btw-tb-ink: #16324f;
	--btw-tb-text: #1d2327;
	--btw-tb-muted: #6b7684;
	--btw-tb-line: #e3e8ef;
	--btw-tb-bg: #ffffff;
	--btw-tb-bg-soft: #f7f9fc;
	--btw-tb-error: #b32d2e;
	--btw-tb-success: #1a7f37;
	--btw-tb-radius: 14px;
	--btw-tb-radius-sm: 8px;
	--btw-tb-shadow: 0 1px 2px rgba(22, 50, 79, 0.06), 0 8px 28px rgba(22, 50, 79, 0.08);
	--btw-tb-day: 34px;
	--btw-tb-icon: 1rem;

	container-type: inline-size;
	container-name: btw-tb;
	box-sizing: border-box;
	color: var(--btw-tb-text);
	font-size: 16px;
	line-height: 1.5;
	max-width: 100%;
}

.btw_tb *,
.btw_tb *::before,
.btw_tb *::after {
	box-sizing: inherit;
}

/**
 * Inline-SVGs: die width/height-Attribute im Markup verlieren gegen jede
 * Theme-Regel wie `svg { width: 100% }`. Deshalb hier per Klasse setzen –
 * im Theme ueberschreibbar, z. B. ueber --btw-tb-icon oder `.btw_tb svg`.
 */
.btw_tb svg {
	display: inline-block;
	flex: 0 0 auto;
	width: var(--btw-tb-icon);
	height: var(--btw-tb-icon);
	max-width: 100%;
	vertical-align: middle;
	fill: none;
}

/* Theme-Buttonstyles neutralisieren (Grossbuchstaben, Mindestbreiten, Schatten). */
.btw_tb button {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	min-width: 0;
	box-shadow: none;
	text-decoration: none;
}

/**
 * Hoehen-Vorgaben aus dem Theme (`min-height` fuer Touch-Targets, feste `height`)
 * verzerren sonst Slots, Kalendertage und die Monatspfeile. Zwei Klassen, damit
 * die Regel auch gegen `.entry-content button` gewinnt – im Theme weiterhin
 * ueberschreibbar, z. B. ueber `.btw_tb .btw_tb_slot`.
 */
.btw_tb .btw_tb_slot,
.btw_tb .btw_tb_host,
.btw_tb .btw_tb_type,
.btw_tb .btw_tb_btn {
	height: auto;
	min-height: 0;
}

/**
 * Nicht fix, sondern bis zur Wunschgroesse mitwachsend: bleibt die Spalte
 * schmal, schrumpft der Tag mit – und bleibt ueber aspect-ratio dabei rund,
 * statt zum Oval gequetscht zu werden.
 */
.btw_tb .btw_tb_day {
	width: 100%;
	max-width: var(--btw-tb-day);
	height: auto;
	aspect-ratio: 1;
	min-height: 0;
}

.btw_tb .btw_tb_nav {
	width: 2.25rem;
	height: 2.25rem;
	min-height: 0;
}

.btw_tb .btw_tb_remove {
	width: 2rem;
	height: 2rem;
	min-height: 0;
}

.btw_tb ul,
.btw_tb ol {
	list-style: none;
}

.btw_tb dd {
	margin-left: 0;
}

.btw_tb_nav svg {
	--btw-tb-icon: 1.125rem;
}

.btw_tb_success_icon svg {
	--btw-tb-icon: 1.625rem;
}

.btw_tb_title {
	margin: 0 0 1.25rem;
	font-size: 1.5rem;
}

.btw_tb_step_title {
	margin: 0 0 1.25rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--btw-tb-ink);
}

/* ---------------------------------------- Fortschritt */

.btw_tb_progress {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: var(--btw-tb-muted);
	counter-reset: btw-tb-step;
}

.btw_tb_progress li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	counter-increment: btw-tb-step;
	margin: 0;
}

.btw_tb_progress li::before {
	content: counter(btw-tb-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	border: 1px solid var(--btw-tb-line);
	border-radius: 50%;
	font-size: 0.75rem;
	flex: 0 0 auto;
}

.btw_tb_progress li.is-active {
	color: var(--btw-tb-ink);
	font-weight: 600;
}

.btw_tb_progress li.is-active::before {
	border-color: var(--btw-tb-accent);
	background: var(--btw-tb-accent);
	color: #fff;
}

.btw_tb_progress li.is-done::before {
	content: "\2713";
	border-color: var(--btw-tb-success);
	background: var(--btw-tb-success);
	color: #fff;
}

/* ---------------------------------------- Karte */

.btw_tb_card {
	padding: 1.5rem;
	border: 1px solid var(--btw-tb-line);
	border-radius: var(--btw-tb-radius);
	background: var(--btw-tb-bg);
	box-shadow: var(--btw-tb-shadow);
}

.btw_tb_card--booking {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 0;
	overflow: hidden;
}

.btw_tb_card--booking > * {
	padding: 1.5rem;
	min-width: 0;
}

.btw_tb_side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	border-bottom: 1px solid var(--btw-tb-line);
	background: var(--btw-tb-bg-soft);
}

.btw_tb_side_name {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--btw-tb-ink);
}

.btw_tb_side_role {
	font-size: 0.875rem;
	color: var(--btw-tb-muted);
}

.btw_tb_side_meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--btw-tb-ink);
}

.btw_tb_side_meta svg {
	flex: 0 0 auto;
	color: var(--btw-tb-muted);
}

.btw_tb_slots {
	border-top: 1px solid var(--btw-tb-line);
}

/**
 * Zweispaltig, sobald neben der Seitenleiste eine volle Wochenzeile passt.
 * Die Uhrzeiten liegen hier noch quer darunter – als dritte Spalte blieben
 * dem Kalender sonst keine 300px.
 */
@container btw-tb (min-width: 640px) {
	.btw_tb_card--booking {
		grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
	}

	.btw_tb_card--booking.has-slots {
		grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
	}

	.btw_tb_card--booking.has-slots .btw_tb_slots {
		grid-column: 1 / -1;
	}

	.btw_tb_side {
		border-bottom: 0;
		border-right: 1px solid var(--btw-tb-line);
	}
}

/**
 * Dreispaltig erst hier: Seitenleiste und Uhrzeitenspalte belegen zusammen
 * gut 400px plus Innenabstaende, der Kalender braucht daneben rund 340px.
 */
@container btw-tb (min-width: 960px) {
	.btw_tb_card--booking.has-slots {
		grid-template-columns: minmax(180px, 230px) minmax(320px, 1fr) minmax(190px, 224px);
	}

	.btw_tb_card--booking.has-slots .btw_tb_slots {
		grid-column: auto;
		border-top: 0;
		border-left: 1px solid var(--btw-tb-line);
	}
}

/* ---------------------------------------- Avatar */

.btw_tb_avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	margin-bottom: 0.6rem;
	overflow: hidden;
	border-radius: 50%;
	background: var(--btw-tb-accent-soft);
	color: var(--btw-tb-accent);
}

.btw_tb_avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.btw_tb_avatar_initials {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ---------------------------------------- Ansprechpartner-Auswahl */

.btw_tb_hosts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container btw-tb (min-width: 620px) {
	.btw_tb_hosts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container btw-tb (min-width: 980px) {
	.btw_tb_hosts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.btw_tb_hosts li {
	margin: 0;
}

.btw_tb_host {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid var(--btw-tb-line);
	border-radius: var(--btw-tb-radius-sm);
	background: var(--btw-tb-bg);
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btw_tb_host:hover,
.btw_tb_host:focus-visible {
	border-color: var(--btw-tb-accent);
	background: var(--btw-tb-accent-softer);
	box-shadow: 0 0 0 1px var(--btw-tb-accent);
	outline: none;
}

.btw_tb_host .btw_tb_avatar {
	width: 48px;
	height: 48px;
	flex-basis: 48px;
	margin-bottom: 0;
}

.btw_tb_host_body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.btw_tb_host_name {
	font-weight: 700;
	color: var(--btw-tb-ink);
}

.btw_tb_host_role,
.btw_tb_host_meta {
	font-size: 0.8125rem;
	color: var(--btw-tb-muted);
}

.btw_tb_host_arrow {
	flex: 0 0 auto;
	font-size: 1.375rem;
	line-height: 1;
	color: var(--btw-tb-accent);
}

/* ---------------------------------------- Kalender */

.btw_tb_cal_head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.btw_tb_cal_title {
	margin: 0;
	/* Haelt die Breite konstant, damit der Titel beim Monatswechsel nicht
	   springt – darf aber schrumpfen, statt die Pfeile hinauszudruecken. */
	flex: 0 1 9.5rem;
	min-width: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--btw-tb-ink);
	text-align: center;
}

.btw_tb_nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--btw-tb-accent);
	cursor: pointer;
}

.btw_tb_nav:disabled {
	color: #c4ccd6;
	cursor: not-allowed;
}

.btw_tb_nav:hover:not(:disabled),
.btw_tb_nav:focus-visible {
	background: var(--btw-tb-accent-soft);
	outline: none;
}

.btw_tb_cal_grid {
	max-width: 24rem;
	margin: 0 auto;
}

.btw_tb_cal_row {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.btw_tb_cal_dow {
	padding: 0.5rem 0;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--btw-tb-muted);
}

.btw_tb_cal_cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3px 0;
	min-width: 0;
}

.btw_tb_day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: var(--btw-tb-day);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #a8b1bd;
	font: inherit;
	font-size: 0.9375rem;
	cursor: default;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.btw_tb_day.is-free {
	background: var(--btw-tb-accent-soft);
	color: var(--btw-tb-accent);
	font-weight: 700;
	cursor: pointer;
}

.btw_tb_day.is-free:hover,
.btw_tb_day.is-free:focus-visible {
	background: #d7e5fb;
	outline: none;
}

.btw_tb_day.is-free:focus-visible {
	box-shadow: 0 0 0 2px var(--btw-tb-accent);
}

.btw_tb_day.is-selected,
.btw_tb_day.is-selected:hover {
	background: var(--btw-tb-accent);
	color: #fff;
}

.btw_tb_day.is-today::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: currentColor;
}

.btw_tb_tz {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	color: var(--btw-tb-muted);
}

.btw_tb_tz svg {
	flex: 0 0 auto;
}

/* ---------------------------------------- Uhrzeiten */

.btw_tb_slots_title {
	margin: 0 0 0.875rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--btw-tb-ink);
}

/* min() statt 8rem: unter 128px Platz wuerde die Spur sonst herausragen. */
.btw_tb_slots_list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
	gap: 0.5rem;
}

/* Eigene Spalte: eine Uhrzeit pro Zeile, Liste scrollt statt die Karte zu strecken. */
@container btw-tb (min-width: 960px) {
	.btw_tb_card--booking.has-slots .btw_tb_slots {
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: 34rem;
	}

	.btw_tb_card--booking.has-slots .btw_tb_slots_list {
		grid-template-columns: minmax(0, 1fr);
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		padding-right: 4px;
	}
}

.btw_tb_slot {
	display: flex;
	/**
	 * Zentriert, nicht baseline: bei Baseline-Ausrichtung setzt Flexbox die
	 * Textgruppe an den oberen Rand der Zeile: gibt das Theme dem Button eine
	 * Hoehe, landet der komplette Ueberschuss unten und der Text sitzt zu hoch.
	 */
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	padding: 0.6875rem 0.5rem;
	line-height: 1.2;
	border: 1px solid var(--btw-tb-accent);
	border-radius: var(--btw-tb-radius-sm);
	background: var(--btw-tb-bg);
	color: var(--btw-tb-accent);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.btw_tb_slot_end {
	font-weight: 400;
	font-size: 0.8125rem;
	opacity: 0.75;
}

.btw_tb_slot_end::before {
	content: "\2013\00a0";
}

.btw_tb_slot:hover,
.btw_tb_slot:focus-visible {
	background: var(--btw-tb-accent);
	color: #fff;
	outline: none;
}

/* ---------------------------------------- Formular */

.btw_tb_formwrap {
	min-width: 0;
}

.btw_tb_form {
	max-width: 40rem;
}

.btw_tb_chosen {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--btw-tb-line);
	font-size: 0.9375rem;
}

.btw_tb_chosen svg {
	flex: 0 0 auto;
	margin-top: 0.15rem;
	color: var(--btw-tb-muted);
}

.btw_tb_chosen_text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.btw_tb_chosen_tz {
	font-size: 0.8125rem;
	color: var(--btw-tb-muted);
}

.btw_tb_field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0 0 1rem;
}

.btw_tb_field label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--btw-tb-ink);
}

.btw_tb_field input,
.btw_tb_field textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--btw-tb-line);
	border-radius: var(--btw-tb-radius-sm);
	font: inherit;
	font-size: 1rem;
	background: var(--btw-tb-bg);
	color: var(--btw-tb-text);
}

.btw_tb_field input:focus,
.btw_tb_field textarea:focus {
	border-color: var(--btw-tb-accent);
	box-shadow: 0 0 0 3px var(--btw-tb-accent-soft);
	outline: none;
}

.btw_tb_field input[aria-invalid="true"] {
	border-color: var(--btw-tb-error);
}

.btw_tb_field--guest {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

.btw_tb_fieldset {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.btw_tb_fieldset legend {
	padding: 0;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--btw-tb-ink);
}

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

.btw_tb_radio {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--btw-tb-line);
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.9375rem;
}

.btw_tb_radio:has(input:checked) {
	border-color: var(--btw-tb-accent);
	background: var(--btw-tb-accent-soft);
	color: var(--btw-tb-accent);
	font-weight: 600;
}

.btw_tb_radio:focus-within {
	box-shadow: 0 0 0 3px var(--btw-tb-accent-soft);
}

.btw_tb_check {
	display: block;
	margin: 0 0 1rem;
	font-size: 0.9375rem;
}

.btw_tb_check label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}

.btw_tb_check input {
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

.btw_tb_guests {
	margin: 0 0 1rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--btw-tb-line);
	border-radius: var(--btw-tb-radius-sm);
	background: var(--btw-tb-bg-soft);
}

.btw_tb_guests .btw_tb_check {
	margin-bottom: 0;
}

.btw_tb_guests_fields {
	margin-top: 0.75rem;
}

.btw_tb_hint {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	color: var(--btw-tb-muted);
}

.btw_tb_remove {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--btw-tb-line);
	border-radius: var(--btw-tb-radius-sm);
	background: var(--btw-tb-bg);
	color: var(--btw-tb-muted);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}

.btw_tb_remove:hover,
.btw_tb_remove:focus-visible {
	border-color: var(--btw-tb-error);
	color: var(--btw-tb-error);
	outline: none;
}

.btw_tb_hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.btw_tb_sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.btw_tb_actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 1.5rem 0 0;
}

.btw_tb_btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--btw-tb-accent);
	border-radius: 999px;
	background: var(--btw-tb-accent);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.btw_tb_btn:hover:not(:disabled),
.btw_tb_btn:focus-visible {
	background: var(--btw-tb-accent-dark);
	border-color: var(--btw-tb-accent-dark);
	outline: none;
}

.btw_tb_btn:disabled {
	opacity: 0.6;
	cursor: progress;
}

.btw_tb_btn--danger {
	background: var(--btw-tb-error);
	border-color: var(--btw-tb-error);
}

.btw_tb_btn--danger:hover:not(:disabled),
.btw_tb_btn--danger:focus-visible {
	background: #8f2324;
	border-color: #8f2324;
}

/* Parent-Theme setzt a:visited { color: inherit } – deshalb alle Zustaende explizit. */
.btw_tb_link,
.btw_tb_link:link,
.btw_tb_link:visited,
.btw_tb_link:hover,
.btw_tb_link:focus,
.btw_tb_link:active {
	padding: 0;
	border: 0;
	background: none;
	color: var(--btw-tb-accent);
	font: inherit;
	font-size: 0.9375rem;
	text-decoration: underline;
	cursor: pointer;
}

.btw_tb_link:hover,
.btw_tb_link:focus-visible {
	color: var(--btw-tb-accent-dark);
}

.btw_tb a,
.btw_tb a:link,
.btw_tb a:visited,
.btw_tb a:hover,
.btw_tb a:focus,
.btw_tb a:active {
	color: var(--btw-tb-accent);
}

.btw_tb_back {
	margin: 1rem 0 0;
}

/* ---------------------------------------- Status */

.btw_tb_error,
.btw_tb_field_error {
	color: var(--btw-tb-error);
	font-size: 0.875rem;
}

.btw_tb_error {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid #f0b8ba;
	border-left-width: 3px;
	border-radius: var(--btw-tb-radius-sm);
	background: #fcf0f1;
}

.btw_tb_field_error:empty {
	display: none;
}

.btw_tb_status {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	color: var(--btw-tb-muted);
}

.btw_tb_status.is-success {
	color: var(--btw-tb-success);
	font-weight: 600;
}

.btw_tb_status.is-error {
	color: var(--btw-tb-error);
}

.btw_tb_loading,
.btw_tb_empty {
	margin: 0;
	padding: 0.75rem 0;
	color: var(--btw-tb-muted);
	font-size: 0.9375rem;
}

.btw_tb_notice {
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--btw-tb-accent);
	background: var(--btw-tb-bg-soft);
	font-size: 0.9375rem;
}

/* ---------------------------------------- Bestaetigung / Absage */

.btw_tb_card--success {
	border-color: #bfe3c8;
}

.btw_tb_success_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 0.875rem;
	border-radius: 50%;
	background: #e8f6ec;
	color: var(--btw-tb-success);
}

.btw_tb_success_text {
	margin: 0;
	color: var(--btw-tb-muted);
}

.btw_tb_card:focus-visible {
	outline: 2px solid var(--btw-tb-accent);
	outline-offset: 2px;
}

.btw_tb_summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 1.25rem;
	margin: 0 0 1rem;
	font-size: 0.9375rem;
}

@container btw-tb (min-width: 360px) {
	.btw_tb_summary {
		grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
	}
}

.btw_tb_summary dt {
	color: var(--btw-tb-muted);
}

.btw_tb_summary dd {
	margin: 0 0 0.5rem;
	font-weight: 600;
	color: var(--btw-tb-ink);
}

.btw_tb--cancel .btw_tb_headline {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	color: var(--btw-tb-ink);
}

.btw_tb_panel {
	padding: 1.5rem;
	border: 1px solid var(--btw-tb-line);
	border-radius: var(--btw-tb-radius);
	background: var(--btw-tb-bg);
	box-shadow: var(--btw-tb-shadow);
}

/* ---------------------------------------- Schmale Container */

/**
 * --btw-tb-day und die Grundschrift sitzen auf der Karte, nicht auf .btw_tb:
 * ein Container laesst sich per @container nicht selbst umstylen, seine
 * Kinder schon – und von dort vererben beide Werte wie zuvor weiter.
 */
@container btw-tb (max-width: 480px) {
	.btw_tb_card,
	.btw_tb_card--booking > *,
	.btw_tb_panel {
		padding: 1.125rem;
	}
}

@container btw-tb (max-width: 400px) {
	.btw_tb_cal_title {
		font-size: 0.9375rem;
	}
}

@container btw-tb (max-width: 360px) {
	.btw_tb_card,
	.btw_tb_panel {
		font-size: 15px;
		/* Bei 280px bleiben je Spalte nur ~26px. */
		--btw-tb-day: 24px;
	}

	.btw_tb_card,
	.btw_tb_card--booking > *,
	.btw_tb_panel {
		padding: 0.875rem;
	}

	.btw_tb_day {
		font-size: 0.8125rem;
	}

	.btw_tb_btn {
		width: 100%;
		text-align: center;
	}
}

@container btw-tb (min-width: 560px) {
	.btw_tb_card,
	.btw_tb_panel {
		--btw-tb-day: 44px;
	}
}

/* ---------------------------------------- Terminarten */

.btw_tb_types {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container btw-tb (min-width: 620px) {
	.btw_tb_types {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.btw_tb_types li {
	margin: 0;
}

.btw_tb_type {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	width: 100%;
	height: 100%;
	padding: 1rem;
	border: 1px solid var(--btw-tb-line);
	border-radius: var(--btw-tb-radius-sm);
	background: var(--btw-tb-bg);
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btw_tb_type:hover,
.btw_tb_type:focus-visible {
	border-color: var(--btw-tb-accent);
	background: var(--btw-tb-accent-softer);
	box-shadow: 0 0 0 1px var(--btw-tb-accent);
	outline: none;
}

.btw_tb_type_body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	flex: 1 1 auto;
}

.btw_tb_type_name {
	font-weight: 700;
	color: var(--btw-tb-ink);
}

.btw_tb_type_meta {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8125rem;
	color: var(--btw-tb-muted);
}

.btw_tb_type_note {
	font-size: 0.875rem;
	color: var(--btw-tb-muted);
}

.btw_tb_side_type {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--btw-tb-ink);
}

.btw_tb_side_type svg,
.btw_tb_type_meta svg {
	color: var(--btw-tb-muted);
}

.btw_tb_side_meta {
	margin-top: 0.2rem;
	font-weight: 400;
	color: var(--btw-tb-muted);
}

/* ---------------------------------------- Kein Termin frei */

.btw_tb_waitlist {
	margin: 1rem 0 0;
	padding: 0.875rem 1rem;
	border-radius: var(--btw-tb-radius-sm);
	background: var(--btw-tb-bg-soft);
	text-align: center;
}

.btw_tb_waitlist .btw_tb_empty {
	padding: 0;
	font-weight: 600;
	color: var(--btw-tb-ink);
}

.btw_tb_waitlist_text {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	color: var(--btw-tb-muted);
}

/* ---------------------------------------- Umbuchung */

.btw_tb_summary s {
	color: var(--btw-tb-muted);
	font-weight: 400;
}

/* ---------------------------------------- Gruppentermine */

.btw_tb_slot_seats {
	flex: 0 0 auto;
	margin-left: 0.25rem;
	padding: 0.05rem 0.35rem;
	border-radius: 999px;
	background: var(--btw-tb-accent-soft);
	color: var(--btw-tb-accent);
	font-size: 0.6875rem;
	font-weight: 600;
}

.btw_tb_slot:hover .btw_tb_slot_seats,
.btw_tb_slot:focus-visible .btw_tb_slot_seats {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* ---------------------------------------- Fallback ohne Container-Queries */

/**
 * Chrome 105, Safari 16 und Firefox 110 koennen @container – aeltere Browser
 * bekaemen sonst auf jedem Bildschirm die gestapelte Fassung. Sie ist zwar
 * vollstaendig bedienbar, verschenkt am Desktop aber die halbe Breite.
 * Deshalb hier dieselben Stufen noch einmal ueber den Viewport, mit den
 * urspruenglichen Werten. Moderne Browser ueberspringen den Block komplett.
 */
@supports not (container-type: inline-size) {
	@media (min-width: 375px) {
		.btw_tb_summary {
			grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
		}
	}

	@media (max-width: 575px) {
		.btw_tb_card,
		.btw_tb_card--booking > *,
		.btw_tb_panel {
			padding: 1.125rem;
		}
	}

	@media (max-width: 359px) {
		.btw_tb_card,
		.btw_tb_panel {
			font-size: 15px;
			--btw-tb-day: 24px;
		}

		.btw_tb_card,
		.btw_tb_card--booking > *,
		.btw_tb_panel {
			padding: 0.875rem;
		}

		.btw_tb_day {
			font-size: 0.8125rem;
		}

		.btw_tb_cal_title {
			font-size: 0.9375rem;
		}

		.btw_tb_btn {
			width: 100%;
			text-align: center;
		}
	}

	@media (min-width: 576px) {
		.btw_tb_card,
		.btw_tb_panel {
			--btw-tb-day: 44px;
		}
	}

	@media (min-width: 768px) {
		.btw_tb_hosts,
		.btw_tb_types {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 992px) {
		.btw_tb_card--booking {
			grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
		}

		.btw_tb_card--booking.has-slots {
			grid-template-columns: minmax(180px, 230px) minmax(320px, 1fr) minmax(190px, 224px);
		}

		.btw_tb_side {
			border-bottom: 0;
			border-right: 1px solid var(--btw-tb-line);
		}

		.btw_tb_card--booking.has-slots .btw_tb_slots {
			border-top: 0;
			border-left: 1px solid var(--btw-tb-line);
			display: flex;
			flex-direction: column;
			min-height: 0;
			max-height: 34rem;
		}

		.btw_tb_card--booking.has-slots .btw_tb_slots_list {
			grid-template-columns: minmax(0, 1fr);
			flex: 1 1 auto;
			min-height: 0;
			overflow-y: auto;
			padding-right: 4px;
		}
	}

	@media (min-width: 1200px) {
		.btw_tb_hosts {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}