:root {
	--bt-color-primary: #33b1cb;
	--bt-color-error: #e15242;
	--bt-color-border: rgba( 255, 255, 255, 0.25 );
	--bt-color-muted: #b1bac2;
	--bt-color-text: #ffffff;
	--bt-color-card-bg: rgba( 255, 255, 255, 0.06 );
	/* Ring palette - the theme's --color-dunkelblau/--color-hell/--color-grau,
	   restated here so the wizard's CSS stands alone outside the theme. */
	--bt-color-dark: #00334c;
	--bt-color-light: #f3f3f3;
	--bt-color-gray: #383a41;
}

.bt-signup {
	--bt-color-primary: #33b1cb;
	--bt-color-error: #e15242;
	--bt-color-border: rgba( 255, 255, 255, 0.25 );
	--bt-color-muted: #b1bac2;
	--bt-color-text: #ffffff;
	--bt-color-card-bg: rgba( 255, 255, 255, 0.06 );
	--bt-color-dark: #00334c;
	--bt-color-light: #f3f3f3;
	--bt-color-gray: #383a41;
	font-family: inherit;
	color: var( --bt-color-text );
}

@property --bt-gradient-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@keyframes bt-border-rotation {
	0% {
		--bt-gradient-angle: 0deg;
	}

	100% {
		--bt-gradient-angle: 360deg;
	}
}

.bt-signup h2,
.bt-signup h3,
.bt-signup h4
.wp-block-group .wp-block-group__inner-container h2,
.wp-block-group .wp-block-group__inner-container h3,
.wp-block-group .wp-block-group__inner-container h4
{
	color: var( --bt-color-text );
	font-weight: 700;
}

.bt-signup .bt-field {
	margin-bottom: 1rem;
}

.bt-signup label {
	display: block;
	margin-bottom: 0.25rem;
	color: var( --bt-color-text );
}

.bt-signup .bt-field:not( .bt-field-consent ):not( :has( textarea ) ) {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.75rem;
	align-items: end
}

.bt-signup .bt-field:not( .bt-field-consent ):not( :has( textarea ) ) label {
	display: inline;
	white-space: nowrap;
	margin-bottom: 0;
}

.bt-signup input[type="text"],
.bt-signup input[type="email"],
.bt-signup input[type="number"],
.bt-signup select,
.bt-signup textarea {
	width: 100%;
	padding: 0.4rem 0.1rem;
	border: none;
	border-bottom: 1px solid var( --bt-color-border );
	border-radius: 0;
	box-sizing: border-box;
	background: transparent;
	color: var( --bt-color-text );
	font-family: inherit;
	font-size: 1rem;
}

.bt-signup select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.1rem center;
	background-size: 1rem;
	padding-right: 1.5rem;
}

.bt-signup select option {
	color: #00334c;
	background: #ffffff;
}

.bt-signup input::placeholder,
.bt-signup textarea::placeholder {
	color: var( --bt-color-muted );
}

.bt-signup input:focus,
.bt-signup textarea:focus,
.bt-signup select:focus {
	outline: none;
	border-color: var( --bt-color-primary );
}

.bt-signup .bt-field-invalid {
	/* !important: wins over the more specific input[type="…"]/textarea/select border
	   rules and the checkbox's own border rule further down, which otherwise beat this
	   on selector specificity and silently swallow the invalid-state border color. */
	border-color: var( --bt-color-error ) !important;
}

.bt-signup input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.15rem;
	height: 1.15rem;
	min-width: 1.15rem;
	margin: 0.15rem 0 0;
	border: 1.5px solid var( --bt-color-primary );
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
}

.bt-signup input[type="checkbox"]:checked {
	background-color: var( --bt-color-primary );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 75%;
}

.bt-signup .bt-field-consent a {
	color: var( --bt-color-primary );
}

.bt-signup .bt-field-consent label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.bt-signup .bt-field-consent input[type="checkbox"] {
	margin: 0;
	flex-shrink: 0;
}

.bt-signup .bt-media-consent-heading {
	font-size: 1.1rem !important;
}

.bt-signup .bt-field-media-consent label {
	align-items: flex-start;
}

.bt-signup .bt-field-media-consent input[type="checkbox"] {
	margin-top: 0.2rem;
}

.bt-signup .bt-required-note {
	font-size: 0.85rem;
	line-height: 1.7rem;
	color: var( --bt-color-text );
	border-bottom: 1px solid var( --bt-color-primary );
	margin-bottom: 1.5rem;
}

.bt-signup .bt-contact-card {
	background: var( --bt-color-card-bg );
	border-radius: 8px;
	padding: 1.5rem;
}

.bt-signup .bt-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2rem;
}

.bt-signup .bt-contact-col textarea {
	min-height: 4rem;
}

.bt-signup .bt-contact-col > h3 {
	margin-top: 0;
}

.bt-signup .bt-contact-grid > .bt-contact-col label,
.bt-signup .bt-contact-grid > .bt-contact-col input,
.bt-signup .bt-contact-grid > .bt-contact-col select,
.bt-signup .bt-field-consent label,
.bt-signup .bt-privacy-note {
	font-size: 1rem;
	color: #fff;
}

.bt-signup .bt-sonstiges {
	background: #8fb1bd;
	border-radius: 8px;
	padding: 3px;
}

.entry-content .bt-panel .wp-block-heading.bt-sonstiges-header {
	margin-bottom: 0;
}

.bt-signup .bt-sonstiges .bt-field:last-child {
	margin-bottom: 0;
}

.bt-signup .bt-field-notes textarea {
	border-bottom: none;
	overflow: hidden;
	resize: none;
}

.bt-signup .bt-field-notes label {
	margin-top: 0;
	margin-bottom: 0;
}

@media ( max-width: 40rem ) {
	.bt-signup .bt-contact-grid {
		grid-template-columns: 1fr;
	}
}

.bt-signup .bt-form-error {
	background: rgba( 225, 82, 66, 0.15 );
	border: 1px solid var( --bt-color-error );
	color: #fff;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.bt-signup .bt-ticket-limit-notice {
	background: rgba( 51, 177, 203, 0.12 );
	border: 1px solid var( --bt-color-primary );
	border-radius: 4px;
	padding: 0.75rem 1rem;
	margin-top: 1rem;
}

.bt-signup .bt-ticket-limit-notice p {
	margin: 0;
	font-size: 1rem;
}


/* Stepper */
.entry-content .bt-wizard .bt-stepper {
	display: flex;
	list-style: none;
	width: 100%;
	margin: 0;
	margin-bottom: 3rem;
	padding: 0.6rem;
	gap: 0.5rem;
	border-top: 1px solid var( --bt-color-primary );
	border-bottom: 1px solid var( --bt-color-primary );
}

.bt-wizard {
	overflow: hidden;
}

.bt-panel > .wp-block-heading.wp-block-heading {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.bt-panel-viewport {
	position: relative;
	overflow: hidden;
	padding: 0 0.5rem 1.75rem 0.15rem;
	margin: 0 -0.5rem -1.75rem -0.15rem;
}

.bt-step-clickable {
	cursor: pointer;
}

.bt-step-clickable .bt-step-num {
	cursor: pointer;
}

.bt-step {
	display: flex;
	flex: 1 1 0;
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: 0.75rem;
	font-size: 1.1rem;
	color: var( --bt-color-text );
	min-width: 0;
}

.bt-step-label {
	min-width: 0;
	overflow-wrap: break-word;
	font-size: 1.45rem;
}

.bt-step:not( :last-child )::after {
	content: "";
	flex: 1 1 auto;
	height: 3px;
	background: #33b1cb;
}

.bt-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.75rem;
	background: #00334c;
	background: linear-gradient( to bottom right, #00334c, #6b8897 );
	border: 1px solid #96aab5;
	outline: 2px solid #00334c;
	cursor: pointer;
	color: #33b1cb;
	font-weight: 700;
	font-size: 2.6rem;
}

.bt-step-current,
.bt-step-done {
	color: var( --bt-color-primary );
}

.bt-step-current {
	font-weight: 700;
}

.bt-step-check-icon {
	width: 60%;
	height: 60%;
	object-fit: contain;
}

.bt-intro {
	margin:1rem 0 2.7rem 0;
}

.bt-panel {
	padding-inline-start: 1.55em;
}

/* Static "contact us" CTA panel embedded in page content (e.g. below the wizard) */
.entry-content .bt-panel .wp-block-heading {
	margin-bottom: 1rem;
}

.entry-content .bt-panel .bt-venue-map .wp-block-heading {
	border-top: 1px solid var(--bt-color-primary);
	padding: 1rem 0;
	margin: 0;
}


.entry-content .bt-panel > p {
	margin-bottom: 2rem;
}

.bt-contact-row.is-layout-flex {
	align-items: center !important;
	row-gap: 1rem;
	column-gap: 4rem;
}

.bt-contact-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
}

.bt-panel .bt-contact-item a {
	color: inherit;
	text-decoration: none;
}

.bt-contact-item [class^="icon-"] {
	font-size: 1.4rem;
}

.bt-contact-item .bt-contact-icon {
	width: 1.4rem;
	height: 1.4rem;
	flex-shrink: 0;
}

/* Let the wrapping .bt-btn.bt-btn-primary div (styled above) show through, so this
   button matches the wizard's own "Weiter >>" nav button exactly. */
.entry-content .bt-panel .wp-block-button__link {
	display: block;
	background: transparent;
	color: #fff;
	text-decoration: none;
	padding: 0;
	border-radius: inherit;
}

/* Summary card shown on steps 2-5 */
.bt-summary-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.5rem;
}

.bt-summary-card .bt-event-thumb {
	width: 140px;
	height: 140px;
}

.bt-summary-card .bt-event-info {
	gap: 0.5rem;
	font-size: 1.5rem;
}

.bt-summary-card .bt-summary-meta {
	font-size: 1.35rem;
	color: var( --bt-color-primary );
}

/* Step 1: event cards */
.bt-event-list {
	display: grid;
	grid-template-columns: 120px minmax( 0, 1fr ) minmax( auto, max-content ) minmax( auto, max-content );
	margin-bottom: 1.5rem;
	border-top: 1px solid var( --bt-color-border );
}

.bt-event-card {
	position: relative;
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	gap: 1.5rem;
	margin: 1rem 0;
	cursor: pointer;
}

.bt-event-card::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1rem;
	height: 1px;
	background: var( --bt-color-primary );
	z-index: 2;
}

.bt-event-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 1rem;
	border: 0.6rem solid transparent;
	background:
		linear-gradient( rgba( 51, 177, 203, 0.25 ), rgba( 51, 177, 203, 0.25 ) ) padding-box,
		linear-gradient( to left, var(--wp--preset--color--dunkel-blau), rgba( 51, 177, 203, 0.25 ) ) border-box;
	opacity: 0;
	transform: scale( 0.98 );
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
	z-index: 0;
}

.bt-event-card > * {
	position: relative;
	z-index: 1;
}

.bt-event-card:hover::after,
.bt-event-card-selected::after {
	opacity: 1;
	transform: scale( 1 );
}

.bt-event-card-disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.bt-event-thumb {
	width: 120px;
	height: 120px;
	border-radius: 20px;
	object-fit: cover;
	flex-shrink: 0;
}

.bt-event-thumb-empty {
	background: rgba( 255, 255, 255, 0.08 );
}

.bt-event-info {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 1;
	min-width: 0;
	font-size: 1.15rem;
}

.bt-event-location {
	font-size: 1rem;
	font-weight: normal;
	color: var( --bt-color-primary );
}

.bt-event-date {
	align-self: stretch;
	display: flex;
	align-items: center;
	font-size: 1.15rem;
	font-weight: 700;
	padding: 0 1.5rem;
	border-left: 1px solid #fff;
}

.bt-badge {
	justify-self: center;
	padding: 1rem 1.4rem;
	margin-right:1.5rem;
	border-radius: 1rem;
	font-size: 1rem;
	font-weight: 600;
	white-space: nowrap;
	background: #fff;
}

.bt-badge-available {
	color: var( --bt-color-primary );
}

.bt-badge-few_left {
	color: #d9822b;
}

.bt-badge-fully_booked {
	color: var( --bt-color-muted );
}

.bt-badge-registration_closed {
	color: var( --bt-color-muted );
}

.bt-event-deadline {
	font-size: 1rem;
	font-weight: 600;
}

/* Overlays its own card (hover on desktop, tap on touch) instead of taking a
   row in the list - a closed event must not push the other cards apart. */
.bt-event-deadline-notice {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	padding: 1rem 1.5rem;
	border-radius: 1rem;
	background: var( --bt-color-dark );
	box-shadow: inset 0 0 0 1px rgba( 51, 177, 203, 0.35 );
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

/* Single child, so the note's text and its mailto link stay one inline flow -
   as direct flex items the whitespace between them would collapse. */
.bt-event-deadline-notice-text {
	font-size: 1rem;
}

.bt-event-card-closed:hover .bt-event-deadline-notice,
.bt-event-card-notice-open .bt-event-deadline-notice {
	opacity: 1;
	pointer-events: auto;
}

.bt-event-card-closed {
	cursor: pointer;
}

.bt-event-deadline-notice-text p {
	margin: 0;
}

.bt-event-deadline-notice-text a {
	color: var( --bt-color-primary );
}

/* Step 2: slot tiles */
.bt-slot-tiles-box {
	background: rgba( 255, 255, 255, 0.08 );
	border-radius: 16px;
	padding: 1.5rem 2.5rem;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.bt-slot-days {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.bt-slot-day-heading {
	margin: 0 0 1rem;
	color: #fff;
	font-weight: 600;
	font-size: 1.1rem;
	text-align: center;
}

.bt-slot-tiles {
	display: grid;
	grid-template-columns: repeat( 4, 11rem );
	justify-content: center;
	gap: 1.75rem 2.5rem;
}

.bt-slot-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	margin-top: 1rem;
	color: #fff;
	font-size: 0.85rem;
}

.bt-slot-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* The swatches mirror the three tile states (.bt-slot-tile,
   .bt-slot-tile-selected, .bt-slot-tile-disabled) - keep them in sync. */
.bt-slot-legend-swatch {
	position: relative;
	display: inline-block;
	width: 1.5rem;
	height: 0.75rem;
	border-radius: 0.375rem;
}

.bt-slot-legend-swatch-available {
	background: #fff;
}

.bt-slot-legend-swatch-selected {
	background: var( --bt-color-primary );
}

.bt-slot-legend-swatch-booked {
	background: #b1bac2;
}

/* The strike-through inside the swatch mirrors the line-through on a
   booked-out tile's label. */
.bt-slot-legend-swatch-booked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.3rem;
	right: 0.3rem;
	height: 2px;
	background: #8f8f8f;
	transform: translateY( -50% );
}

/* Deliberately plain: the slot tiles stay on a flat border and do NOT get the
   electric ring that .bt-btn carries - a grid of a dozen tiles is a picker,
   not a set of calls to action, and ringing all of them turns the step into
   noise. Keep new tile states flat too. */
.bt-slot-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 0.5rem;
	border: 1px solid var( --bt-color-border );
	border-radius: 0.75rem;
	background: #fff;
	color: #00334c;
	cursor: pointer;
	font-weight: 600;
	font-size: 1.05rem;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 );
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.bt-slot-tile:hover:not( :disabled ) {
	border-color: var( --bt-color-primary );
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.14 );
	transform: translateY( -2px );
}

.bt-slot-tile-selected {
	border-color: var( --bt-color-primary );
	background: var( --bt-color-primary );
	color: #fff;
}

.bt-slot-tile-disabled {
	color: #8f8f8f;
	text-decoration: line-through;
	cursor: not-allowed;
	background: #b1bac2;
	box-shadow: none;
	transform: none;
}

/* Step 3: tickets */
.bt-ticket-list {
	border-top: 1px solid var( --bt-color-border );
	margin-bottom: 1.5rem;
}

.bt-ticket-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	margin: 2rem 0;
	padding-bottom: 2rem;
	border-bottom: 1px solid var( --bt-color-primary );
}

.bt-ticket-info {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 1rem;
}

.bt-ticket-info strong {
	font-size: 1.6rem;
}

.bt-ticket-desc {
	margin: 0;
	font-weight: normal;
	color: var( --bt-color-primary );
	font-size: 1rem;
}

.bt-ticket-controls {
	align-self: stretch;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1.5rem;
	border-left: 1px solid #fff;
}

.bt-ticket-btn {
	position: relative;
	z-index: 1;
	width: 2.5rem;
	height: calc( 2.5rem - 2px );
	border-radius: 0.5rem;
	border: none;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 1.4rem;
	line-height: 1;
	transition: opacity 0.15s ease;
}

.bt-ticket-btn:hover {
	opacity: 0.9;
}

.bt-ticket-btn::before {
	content: "";
	position: absolute;
	inset: -0.15rem;
	z-index: -2;
	border-radius: inherit;
	background: linear-gradient(
		to left,
		var(--wp--preset--color--dunkel-blau),
		var(--bt-color-primary)
	);
}

.bt-ticket-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var( --bt-color-primary );
}

.bt-ticket-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.bt-ticket-count {
	width: 4.5rem;
	height: 3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 700;
	font-size: 1.3rem;
	background: #fff;
	color: #14324a;
	border-radius: 0.5rem;
}

.bt-selected-tickets {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	background: var( --bt-color-card-bg );
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
}

.bt-selected-tickets-labels {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.bt-selected-tickets-divider {
	border: none;
	border-bottom: 1px solid var( --bt-color-primary );
	margin: 2rem 0;
}

.bt-privacy-note {
	font-size: 0.85rem;
	color: var( --bt-color-muted );
}

/* Confirmation page (?bt_booking=...) - same dark wizard chrome as steps 1-4,
   but without their stepper (the journey is over, so it only pushed the
   message down) and server-rendered from a GET instead of client state (see
   bt.js renderConfirmation()). */
/* Specificity has to beat `.entry-content .bt-panel > p`'s 2rem bottom margin,
   which would otherwise split the intro from the booking-no. line below it. */
.entry-content .bt-panel > .bt-confirmation-intro {
	margin-bottom: 0.35rem;
}

.entry-content .bt-panel > .bt-confirmation-refline {
	color: var( --bt-color-text );
	margin: 0 0 1.5rem;
	padding: 1rem 0 1.5rem 0;
	border-bottom: 1px solid var( --bt-color-primary );
}

.bt-confirmation-refline-value {
	font-weight: 700;
}

/* Step 5's "Buchungsübersicht": reuses the same pill-field grid as bt-summary-field. */
.bt-summary-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 0.75rem;
}

.bt-summary-field {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.6rem 0.85rem;
	background: #fff;
	color: #00334c;
	border-radius: 6px;
	min-width: 0;
}

.bt-summary-field-label {
	font-weight: bold;
	color: var(--bt-color-primary);
}

.bt-summary-field-value {
	overflow-wrap: break-word;
	word-break: break-word;
}

.bt-panel-viewport .bt-venue-map {
	margin-top: 2rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--bt-color-primary);
}

.bt-contact-card .bt-venue-map {
	margin-top: 1.5rem;
}

.bt-venue-map > .wp-block-heading {
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.bt-venue-map-frame {
	border-radius: 12px;
	overflow: hidden;
}

.bt-venue-map-canvas {
	width: 100%;
	height: 320px;
	border-radius: 12px;
	background: var( --bt-color-card-bg, #eee );
}

/* "Route planen" - see routeLinks() in bt.js. Plain text links to external
   route planners: the map sits on a light-blue card, where a filled button
   reads as a second primary action competing with "Weiter"/"Ticket
   herunterladen". */
.bt-venue-map-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-top: 1rem;
}

/* Both planners are equal alternatives, so they share one look. The theme
   re-colors every <a> inside .entry-content, hence the explicit color on all
   three states. */
.bt-venue-map-actions a.bt-venue-map-route,
.bt-venue-map-actions a.bt-venue-map-route:hover,
.bt-venue-map-actions a.bt-venue-map-route:focus,
.bt-venue-map-actions a.bt-venue-map-route-alt,
.bt-venue-map-actions a.bt-venue-map-route-alt:hover,
.bt-venue-map-actions a.bt-venue-map-route-alt:focus {
	color: var( --bt-color-primary );
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: underline;
}

/* Print/PDF centering - the counterpart of setMapPrintLayout() in bt.js,
   which adds .bt-print-map to <html> on "beforeprint" and re-fits every map
   while these rules apply. The map is pinned to one fixed width instead of
   the paper's (unknowable, margin-dependent) printable width, so Leaflet
   re-centers against a box whose size it actually knows; the frame then
   centers that fixed-width map inside whatever the real printable width turns
   out to be and clips it symmetrically if it doesn't fit. Deliberately not
   scoped to @media print: the map has to be laid out at this width *before*
   the print dialog opens, or Leaflet re-fits against the screen width again. */
.bt-print-map .bt-venue-map-frame {
	display: flex;
	justify-content: center;
}

.bt-print-map .bt-venue-map-canvas {
	flex: 0 0 auto;
	/* Measured: the map's slot on A4 portrait at Chrome's default margins is
	   ~695px wide once the print rules below have stripped the on-screen side
	   padding. Kept a few px under that so the common case prints edge to edge
	   without clipping; wider paper/no margins just adds symmetric white space,
	   narrower margins crop symmetrically - either way it stays centered. */
	width: 690px;
}

/* The page's block-editor text-color utilities (e.g. "White text" on a dark
   section, .has-weiss-color { color: #fff !important }) cascade into
   Leaflet's own UI chrome and win over leaflet.css's #333/#000, turning the
   attribution strip and zoom buttons white-on-white. Leaflet's controls need
   to keep their own contrast regardless of surrounding page styling. */
.bt-venue-map-canvas.leaflet-container,
.bt-venue-map-canvas .leaflet-control-attribution,
.bt-venue-map-canvas .leaflet-control-attribution a {
	color: #333 !important;
}

.bt-venue-map-canvas .leaflet-bar a,
.bt-venue-map-canvas .leaflet-control-attribution a {
	text-decoration: none !important;
}

.bt-venue-map-canvas .leaflet-bar a {
	color: #000 !important;
}

/* Nav buttons */
.bt-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
	padding-right: 5px;
}

.bt-btn {
	position: relative;
	z-index: 1;
	padding: 0.7rem 1.75rem;
	border-radius: 0.75rem;
	cursor: pointer;
	margin-bottom:5px;
	font-weight: 700;
	font-size: 1.125rem;
	border: none;
	color: #fff;
	background: transparent;
	transition: opacity 0.15s ease;
}

.bt-btn:hover {
	opacity: 0.9;
}

/* The ring is inset past the button edge and ::after paints the button's own
   fill back over the middle, so only the rim shows the gradient. It needs
   real width - at 2px the travelling highlight is too thin to register as
   motion.

   The theme's .cool_button reads well because its fill is dark navy against a
   light gradient; .bt-btn is cyan, so the palette's own cyan stop would
   disappear into the fill. Dropped it here and let dark navy carry that part
   of the sweep instead - the light stop is what the eye actually follows. */
.bt-btn::before {
	content: "";
	position: absolute;
	inset: -0.15rem;
	z-index: -2;
	/* .bt-btn's 0.75rem plus the inset - `inherit` would leave the ring's
	   outer corners visibly squarer than the button's. */
	border-radius: 1rem;
	background: conic-gradient(
		from var( --bt-gradient-angle ),
		var( --bt-color-dark ),
		var( --bt-color-light ),
		var( --bt-color-dark ),
		var( --bt-color-gray ),
		var( --bt-color-dark )
	);
	animation: bt-border-rotation 2.5s linear infinite;
	animation-play-state: paused;
}

.bt-btn:hover::before {
	animation-play-state: running;
}

.bt-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var( --bt-color-primary );
}

.bt-btn-primary {
	background: var( --bt-color-primary );
	color: #fff;
	margin-left: auto;
}

.bt-btn-primary:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.bt-btn-primary:disabled::before {
	animation-play-state: paused;
}

.bt-btn-loading {
	color: transparent !important;
}

.bt-btn-spinner {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.1rem;
	height: 1.1rem;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: bt-spin 0.6s linear infinite;
}

@keyframes bt-spin {
	to {
		transform: rotate( 360deg );
	}
}

.bt-btn-back {
	background: var( --bt-color-primary );
	color: #fff;
}

.bt-signup .bt-message-success {
	color: var( --bt-color-primary );
}

.bt-signup .bt-message-error,
.bt-signup .bt-error {
	color: #ffb4a9;
}

/* Tablet: stepper labels drop below the number, steps stay in a row */
@media ( max-width: 1024px ) {

	.bt-slot-tiles {
		grid-template-columns: repeat( auto-fit, minmax( 8rem, 1fr ) );
		gap: 1.5rem;
	}

	.bt-stepper {
		gap: 0.25rem;
	}

	.bt-step {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.35rem;
		font-size: 0.8rem;
	}

	.bt-step-label {
		font-size: 1.2rem;
	}

	.bt-step::after {
		display: none;
	}

	.bt-step-num {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.6rem;
	}

	.bt-summary-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Tablet: the event row stays 4 columns, so cap the date column and let it wrap */
@media ( min-width: 641px ) and ( max-width: 1024px ) {

	.bt-event-list {
		grid-template-columns: 96px minmax( 0, 1fr ) minmax( 0, 13rem ) minmax( auto, max-content );
	}

	.bt-event-date {
		white-space: normal;
		text-wrap: balance;
		font-size: 1rem;
		padding: 0 1rem;
	}

	.bt-event-card {
		gap: 1rem;
	}

	.bt-event-thumb {
		width: 96px;
		height: 96px;
	}

	.bt-badge {
		margin-right: 0.5rem;
		padding: 0.75rem 1rem;
		font-size: 0.9rem;
	}
}

/* Mobile */
@media ( max-width: 640px ) {

	.bt-panel {
		padding: 0;
	}
	.bt-signup .bt-contact-card {
		padding: 0.5rem;
	}

	.bt-event-list {
		grid-template-columns: 80px 1fr;
	}

	.bt-event-card {
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
		grid-template-areas:
			"thumb info"
			"date  date"
			"badge badge";
		gap: 0.5rem 1rem;
		padding: 1rem;
	}

	/* Simple flat tint instead of the desktop gradient-border glow, which reads as messy on the stacked mobile layout */
	.bt-event-card::after {
		border: none;
		border-radius: 0.75rem;
		background: rgba( 51, 177, 203, 0.18 );
	}

	/* Square it to the track, otherwise the 120px thumb gets squeezed flat */
	.bt-event-thumb {
		grid-area: thumb;
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		border-radius: 14px;
	}

	.bt-event-info {
		grid-area: info;
		font-size: 1rem;
	}

	.bt-event-date {
		grid-area: date;
		border-left: none;
		border-top: 1px solid #fff;
		padding: 0.5rem 0 0;
	}

	.bt-badge {
		grid-area: badge;
		justify-self: start;
	}

	.bt-slot-tiles {
		grid-template-columns: repeat( auto-fill, minmax( 6rem, 1fr ) );
	}

	.bt-ticket-row {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.bt-nav {
		flex-direction: column-reverse;
		gap: 0.75rem;
	}

	.bt-nav .bt-btn {
		width: 100%;
	}

	.bt-btn-primary {
		margin-left: 0;
	}
}

/* Small mobile: stepper becomes a vertical list, icon + label side by side per step */
@media ( max-width: 480px ) {
	.bt-stepper {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
	}

	.bt-step {
		flex-direction: row;
		align-items: center;
		text-align: left;
		justify-content: flex-start;
	}

	.bt-summary-card .bt-event-thumb {
		width: 90px;
		height: 90px;
	}

	.bt-summary-card .bt-event-info {
		font-size: 1.1rem;
	}

	.bt-summary-card .bt-summary-meta {
		font-size: 0.95rem;
	}

	.bt-summary-grid {
		grid-template-columns: 1fr;
	}
}

/* Between small and mobile breakpoints: step label alone is oversized here */
@media ( min-width: 480px ) and ( max-width: 640px ) {
	.bt-step-label {
		font-size: 1rem;
	}
}

/* Step 5: print / save-as-PDF - only the confirmation panel is printed */
.bt-nav-print {
	justify-content: flex-end;
}

/* Step 5: contact-options section below the print button - own copy
   (step5.contact_*) so it can carry confirmation-specific wording instead
   of reusing the site's footer contact box text. */
.bt-confirmation-contact {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var( --bt-color-border );
}

.bt-confirmation-contact-heading {
	/* Matches the "Kein passender Termin..." h2 on the same page (theme's
	   default heading size), so the confirmation-page contact prompt reads
	   at the same weight even though it's a <p>, not a heading. */
	font-size: 30px;
	line-height: 40px;
	font-weight: 700;
	margin-bottom: 1rem;
}

.bt-confirmation-contact-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}

.bt-confirmation-contact-item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var( --bt-color-text );
	text-decoration: none;
}

.bt-confirmation-contact-icon {
	color: var( --bt-color-primary );
	font-size: 1.25rem;
}

.bt-confirmation-contact-form {
	margin-left: auto;
}

@media print {
	body *:not(.bt-panel-confirmation):not(.bt-panel-confirmation *):not(:has(.bt-panel-confirmation)) {
		display: none !important;
	}

	.bt-stepper,
	.bt-nav-print,
	.bt-venue-map-actions,
	.bt-confirmation-contact {
		display: none !important;
	}

	html,
	body,
	.has-dunkel-blau-background-color,
	.bt-panel-confirmation {
		background: #fff !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	.bt-panel-confirmation {
		--bt-color-text: #000;
		--bt-color-muted: #0e7490;
		--bt-color-border: rgba( 0, 0, 0, 0.2 );
		color: #000 !important;
	}

	.bt-signup .bt-panel-confirmation .wp-block-heading {
		color: #00334c !important;
	}

	.bt-panel-confirmation strong,
	.bt-panel-confirmation b {
		color: #000 !important;
	}

	.entry-content .wp-block-group:has( .bt-panel-confirmation ) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.bt-panel-confirmation.bt-panel {
		padding-inline-start: 0 !important;
	}

	.bt-panel-confirmation .bt-contact-card {
		padding: 0.6rem !important;
	}

	.bt-panel-confirmation .bt-venue-map > .wp-block-heading {
		border-top-color: #fff !important;
		color: #fff !important;
	}

	.entry-content .wp-block-group:has( .bt-panel-confirmation ) {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}

	.bt-panel-confirmation .bt-summary-card {
		gap: 0.6rem;
	}

	.bt-panel-confirmation .bt-summary-card .bt-event-thumb {
		width: 60px;
		height: 60px;
	}

	.bt-panel-confirmation .bt-summary-card .bt-event-info {
		font-size: 1.05rem;
	}

	.bt-panel-confirmation .bt-summary-card .bt-summary-meta {
		font-size: 0.85rem;
	}

	.bt-panel-confirmation > .wp-block-heading {
		margin: 0.3rem 0 !important;
		font-size: 1.3rem !important;
	}

	.bt-panel-confirmation .bt-confirmation-refline {
		margin: 0 0 0.4rem !important;
		padding: 0.4rem 0 !important;
	}

	.bt-panel-confirmation > p {
		margin: 0 0 0.5rem !important;
	}

	.bt-panel-confirmation .bt-summary-grid {
		grid-template-columns: repeat( 4, 1fr ) !important;
		gap: 0.4rem;
	}

	.bt-summary-field {
		padding: 0.3rem 0.4rem !important;
		font-size: 0.78rem;
	}

	.bt-venue-map {
		margin-top: 1rem;
	}

	.bt-venue-map-canvas .leaflet-control-zoom {
		display: none !important;
	}

	.entry-content .bt-panel .bt-venue-map .wp-block-heading {
		padding: 0.3rem 0 !important;
		margin-bottom: 0.3rem !important;
	}

	.bt-summary-card,
	.bt-venue-map {
		break-inside: avoid;
	}
}