/**
 * Express Zulassung – Buchungsformular (Frontend).
 *
 * Mobile first: das Grundlayout ist einspaltig, ab 861px wird die Terminauswahl
 * zweispaltig (Kalender links, Uhrzeiten rechts).
 *
 * Farben kommen über die CSS-Variablen --ezb-primary / --ezb-text aus den
 * Plugin-Einstellungen und lassen sich im Backend ändern.
 */

.ezb-form {
	--ezb-primary: #4caf66;
	--ezb-primary-dark: #3d9455;
	--ezb-primary-soft: rgba( 76, 175, 102, 0.12 );
	--ezb-primary-softer: rgba( 76, 175, 102, 0.06 );
	--ezb-text: #3a4a4f;
	--ezb-muted: #7d888d;
	--ezb-line: rgba( 58, 74, 79, 0.12 );
	--ezb-surface: #fff;
	--ezb-bg: #f6f7f8;
	--ezb-danger: #c0392b;
	--ezb-danger-bg: #fdecea;
	--ezb-radius: 16px;
	--ezb-radius-sm: 10px;
	--ezb-tap: 48px;

	color: var( --ezb-text );
	font-size: 16px;
	line-height: 1.5;
	max-width: 100%;
	-webkit-text-size-adjust: 100%;
}

.ezb-form *,
.ezb-form *::before,
.ezb-form *::after {
	box-sizing: border-box;
}

.ezb-notice-source[hidden] {
	display: none !important;
}

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

.ezb-card {
	background: var( --ezb-bg );
	border-radius: var( --ezb-radius );
	padding: 20px 16px 16px;
	position: relative;
}

.ezb-heading {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 20px;
	text-align: center;
	text-wrap: balance;
}

.ezb-loading {
	color: var( --ezb-muted );
	padding: 48px 0;
	text-align: center;
}

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

.ezb-progress {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 20px;
}

.ezb-progress-dots {
	align-items: center;
	display: flex;
	gap: 6px;
}

.ezb-progress-dot {
	background: var( --ezb-line );
	border: 0;
	border-radius: 999px;
	height: 4px;
	padding: 0;
	transition: background 0.2s ease, width 0.2s ease;
	width: 22px;
}

button.ezb-progress-dot {
	cursor: pointer;
}

.ezb-progress-dot.is-done {
	background: var( --ezb-primary );
}

.ezb-progress-dot.is-current {
	background: var( --ezb-primary );
	width: 40px;
}

.ezb-progress-label {
	color: var( --ezb-muted );
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---------------------------------------------------------- Meldungen */

.ezb-message {
	align-items: flex-start;
	border-radius: var( --ezb-radius-sm );
	display: flex;
	font-size: 0.93rem;
	gap: 10px;
	margin-bottom: 18px;
	padding: 12px 14px;
}

.ezb-message--error {
	background: var( --ezb-danger-bg );
	color: var( --ezb-danger );
}

.ezb-message-icon {
	align-items: center;
	background: var( --ezb-danger );
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: 0 0 18px;
	font-size: 0.75rem;
	font-weight: 700;
	height: 18px;
	justify-content: center;
	margin-top: 2px;
}

/* ------------------------------------------------------ Optionsauswahl */

.ezb-services {
	display: grid;
	gap: 14px;
}

.ezb-service {
	background: var( --ezb-surface );
	border: 2px solid transparent;
	border-radius: var( --ezb-radius );
	cursor: pointer;
	display: flex;
	flex-direction: column;
	padding: 20px 18px;
	position: relative;
	text-align: center;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ezb-service:hover {
	border-color: rgba( 76, 175, 102, 0.4 );
}

.ezb-service:focus-visible {
	outline: 2px solid var( --ezb-primary );
	outline-offset: 2px;
}

.ezb-service.is-selected {
	border-color: var( --ezb-primary );
	box-shadow: 0 6px 20px rgba( 76, 175, 102, 0.16 );
}

/* Auswahlhaken oben rechts */
.ezb-service-mark {
	align-items: center;
	border: 2px solid var( --ezb-line );
	border-radius: 50%;
	color: #fff;
	display: flex;
	font-size: 0.8rem;
	font-weight: 700;
	height: 22px;
	justify-content: center;
	position: absolute;
	right: 14px;
	top: 14px;
	transition: background 0.18s ease, border-color 0.18s ease;
	width: 22px;
}

.ezb-service.is-selected .ezb-service-mark {
	background: var( --ezb-primary );
	border-color: var( --ezb-primary );
}

.ezb-service-eyebrow,
.ezb-service-eyebrow-sub {
	color: var( --ezb-primary );
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	padding: 0 26px;
}

.ezb-service-eyebrow-sub {
	font-size: 0.82rem;
	font-weight: 500;
}

.ezb-service-title {
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 10px 0 0;
}

.ezb-service-subtitle {
	color: var( --ezb-muted );
	font-size: 1rem;
	margin: 2px 0 14px;
}

.ezb-service-bullets {
	display: grid;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	text-align: left;
}

.ezb-service-bullets li {
	display: flex;
	font-size: 0.9rem;
	gap: 8px;
	line-height: 1.45;
	list-style: none;
}

.ezb-service-check {
	color: var( --ezb-primary );
	flex: 0 0 auto;
	font-weight: 700;
}

.ezb-service-foot {
	margin-top: auto;
}

.ezb-service-price {
	font-size: 1.55rem;
	font-weight: 700;
	margin: 0;
}

.ezb-service-price-prefix {
	font-size: 1rem;
	font-weight: 400;
}

.ezb-service-note {
	color: var( --ezb-muted );
	font-size: 0.8rem;
	line-height: 1.4;
	margin: 4px 0 14px;
}

.ezb-service-btn {
	display: block;
	width: 100%;
}

/* -------------------------------------------------- Terminauswahl-Layout */

.ezb-booking {
	display: grid;
	gap: 20px;
}

.ezb-booking-cal,
.ezb-booking-times {
	background: var( --ezb-surface );
	border-radius: var( --ezb-radius );
	padding: 16px;
}

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

.ezb-calendar-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.ezb-calendar-month {
	font-size: 1.02rem;
	font-weight: 700;
}

.ezb-calendar-nav {
	align-items: center;
	background: var( --ezb-bg );
	border: 0;
	border-radius: 50%;
	color: var( --ezb-text );
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	font-size: 1.5rem;
	height: 40px;
	justify-content: center;
	line-height: 1;
	padding: 0 0 3px;
	transition: background 0.15s ease;
	width: 40px;
}

.ezb-calendar-nav:hover:not( [disabled] ) {
	background: var( --ezb-primary-soft );
}

.ezb-calendar-nav[disabled] {
	cursor: default;
	opacity: 0.3;
}

.ezb-calendar-grid {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat( 7, 1fr );
}

.ezb-calendar-weekday {
	color: var( --ezb-muted );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 4px 0 8px;
	text-align: center;
	text-transform: uppercase;
}

.ezb-calendar-loading {
	align-items: center;
	color: var( --ezb-muted );
	display: flex;
	gap: 10px;
	grid-column: 1 / -1;
	justify-content: center;
	padding: 48px 0;
}

.ezb-spinner {
	animation: ezb-spin 0.8s linear infinite;
	border: 2px solid var( --ezb-line );
	border-radius: 50%;
	border-top-color: var( --ezb-primary );
	display: block;
	height: 16px;
	width: 16px;
}

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

/*
 * Tageszellen: quadratisch, aber nach oben begrenzt. Ohne die Höhenbegrenzung
 * wird der Kalender auf breiten Bildschirmen unangenehm groß.
 */
.ezb-calendar-day {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: none;
	border: 0;
	border-radius: var( --ezb-radius-sm );
	color: var( --ezb-muted );
	display: flex;
	font: inherit;
	font-size: 0.95rem;
	justify-content: center;
	margin: 0 auto;
	max-height: 46px;
	max-width: 46px;
	padding: 0;
	position: relative;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.ezb-calendar-day.is-empty {
	visibility: hidden;
}

/* Verfügbar */
button.ezb-calendar-day.is-available {
	background: var( --ezb-primary-softer );
	color: var( --ezb-primary-dark );
	cursor: pointer;
	font-weight: 600;
}

button.ezb-calendar-day.is-available:hover {
	background: var( --ezb-primary-soft );
}

button.ezb-calendar-day.is-available:focus-visible {
	outline: 2px solid var( --ezb-primary );
	outline-offset: 1px;
}

/* Nicht verfügbar – bewusst ohne Durchstreichen, das wirkt wie „storniert". */
.ezb-calendar-day.is-disabled {
	color: rgba( 125, 136, 141, 0.5 );
	cursor: default;
}

.ezb-calendar-day.is-holiday,
.ezb-calendar-day.is-full {
	cursor: help;
}

/* Feiertag / ausgebucht: dezenter Punkt als Hinweis */
.ezb-calendar-day.is-holiday::after,
.ezb-calendar-day.is-full::after {
	background: rgba( 125, 136, 141, 0.55 );
	border-radius: 50%;
	bottom: 6px;
	content: "";
	height: 3px;
	position: absolute;
	width: 3px;
}

/* Heute */
.ezb-calendar-day.is-today {
	box-shadow: inset 0 0 0 1.5px var( --ezb-line );
}

/* Ausgewählt */
.ezb-calendar-day.is-selected,
button.ezb-calendar-day.is-available.is-selected {
	background: var( --ezb-primary );
	box-shadow: 0 4px 12px rgba( 76, 175, 102, 0.35 );
	color: #fff;
	font-weight: 700;
}

.ezb-legend {
	color: var( --ezb-muted );
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75rem;
	gap: 14px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var( --ezb-line );
}

.ezb-legend-item {
	align-items: center;
	display: flex;
	gap: 6px;
}

.ezb-legend-swatch {
	border-radius: 4px;
	height: 12px;
	width: 12px;
}

.ezb-legend-swatch.is-free {
	background: var( --ezb-primary-soft );
	box-shadow: inset 0 0 0 1px rgba( 76, 175, 102, 0.35 );
}

.ezb-legend-swatch.is-off {
	background: rgba( 125, 136, 141, 0.15 );
}

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

.ezb-times {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ezb-times-head {
	border-bottom: 1px solid var( --ezb-line );
	margin-bottom: 14px;
	padding-bottom: 12px;
}

.ezb-times-title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	margin: 0;
	text-transform: uppercase;
	color: var( --ezb-muted );
}

.ezb-times-date {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 4px 0 0;
}

.ezb-times-empty {
	align-items: center;
	color: var( --ezb-muted );
	display: flex;
	flex: 1;
	font-size: 0.92rem;
	justify-content: center;
	margin: 0;
	min-height: 120px;
	padding: 20px 8px;
	text-align: center;
}

/* Zeitfenster-Raster */

.ezb-slotgroups {
	display: grid;
	gap: 16px;
}

.ezb-slotgroup-title {
	color: var( --ezb-muted );
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

/*
 * Hervorhebungen absichern: Einige Themes setzen strong/b auf normale Staerke
 * zurueck, wodurch die Betonungen in den Hinweistexten verloren gingen.
 */
.ezb-form strong,
.ezb-form b {
	font-weight: 700;
}

/*
 * Bilder im Hinweistext (z. B. die Siegel auf den Fahrzeugdokumenten).
 * Zwei nebeneinander, ab schmalen Bildschirmen untereinander.
 */
.ezb-notice-figs {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat( auto-fit, minmax( 175px, 1fr ) );
	margin: 14px 0 4px;
}

.ezb-notice-figs figure {
	background: #fff;
	border: 1px solid var( --ezb-line );
	border-radius: var( --ezb-radius-sm );
	margin: 0;
	overflow: hidden;
}

.ezb-notice-figs img {
	display: block;
	height: auto;
	width: 100%;
}

.ezb-notice-figs figcaption {
	color: var( --ezb-text );
	font-size: 0.8rem;
	line-height: 1.35;
	opacity: 0.75;
	padding: 7px 10px 9px;
}

/*
 * Feste Felder wie der Ort: gleiche Form wie die übrigen Felder, damit die
 * Zeile ruhig bleibt – aber gedämpft und ohne Eingabemöglichkeit.
 */
.ezb-input.is-readonly {
	background: var( --ezb-bg );
	border-color: var( --ezb-line );
	border-style: dashed;
	color: var( --ezb-text );
	cursor: default;
	pointer-events: none;
}

.ezb-slots {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat( auto-fill, minmax( 88px, 1fr ) );
}

.ezb-slot {
	align-items: center;
	background: #fff;
	border: 1.5px solid var( --ezb-line );
	border-radius: var( --ezb-radius-sm );
	color: var( --ezb-text );
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 1px;
	justify-content: center;
	min-height: var( --ezb-tap );
	padding: 8px 6px;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ezb-slot:hover {
	background: var( --ezb-primary-soft );
	border-color: rgba( 76, 175, 102, 0.4 );
}

.ezb-slot:focus-visible {
	outline: 2px solid var( --ezb-primary );
	outline-offset: 1px;
}

.ezb-slot-time {
	font-size: 0.98rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.2;
}

/* Der vollständige Zeitraum steht klein darunter – auf engen Rastern reicht die Startzeit. */
.ezb-slot-range {
	color: var( --ezb-text );
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	line-height: 1.2;
	opacity: 0.75;
}

.ezb-slot-scarce {
	color: #b26a00;
	font-size: 0.66rem;
	line-height: 1.2;
}

.ezb-slot.is-active {
	background: var( --ezb-primary );
	border-color: var( --ezb-primary );
	color: #fff;
}

.ezb-slot.is-active {
	box-shadow: 0 1px 3px rgba( 61, 148, 85, 0.35 );
}

/*
 * Im ausgewählten Zustand muss auch die Zeitspanne klar lesbar bleiben –
 * abgeblendetes Weiß auf Grün verschwindet sonst.
 */
.ezb-slot.is-active .ezb-slot-range,
.ezb-slot.is-active .ezb-slot-scarce {
	color: #fff;
	opacity: 1;
}

/* Zeitwünsche (Modus "preference") */

.ezb-prefs {
	display: grid;
	gap: 8px;
}

.ezb-pref {
	align-items: flex-start;
	background: #fff;
	border: 1.5px solid var( --ezb-line );
	border-radius: var( --ezb-radius-sm );
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 12px;
	min-height: var( --ezb-tap );
	padding: 13px 14px;
	text-align: left;
	transition: background 0.15s ease, border-color 0.15s ease;
	width: 100%;
}

.ezb-pref:hover {
	background: var( --ezb-primary-soft );
	border-color: rgba( 76, 175, 102, 0.4 );
}

.ezb-pref:focus-visible {
	outline: 2px solid var( --ezb-primary );
	outline-offset: 1px;
}

.ezb-pref.is-active {
	background: var( --ezb-primary-soft );
	border-color: var( --ezb-primary );
}

.ezb-pref-radio {
	border: 2px solid var( --ezb-line );
	border-radius: 50%;
	flex: 0 0 20px;
	height: 20px;
	margin-top: 2px;
	position: relative;
	transition: border-color 0.15s ease;
}

.ezb-pref.is-active .ezb-pref-radio {
	border-color: var( --ezb-primary );
}

.ezb-pref.is-active .ezb-pref-radio::after {
	background: var( --ezb-primary );
	border-radius: 50%;
	content: "";
	inset: 3px;
	position: absolute;
}

.ezb-pref-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ezb-pref-label {
	font-weight: 600;
}

.ezb-pref-range {
	color: var( --ezb-text );
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	opacity: 0.75;
}

.ezb-pref-hint {
	color: var( --ezb-text );
	font-size: 0.82rem;
	line-height: 1.35;
	opacity: 0.7;
}

.ezb-pref.is-flexible .ezb-pref-label::after {
	background: var( --ezb-primary-soft );
	border-radius: 999px;
	color: var( --ezb-primary-dark );
	content: "flexibel";
	font-size: 0.68rem;
	font-weight: 700;
	margin-left: 8px;
	padding: 2px 8px;
	white-space: nowrap;
}

/* Zusammenfassung der Auswahl */

.ezb-selection {
	align-items: center;
	background: var( --ezb-primary-soft );
	border-radius: var( --ezb-radius-sm );
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-top: 16px;
	padding: 12px 14px;
}

.ezb-selection-icon {
	align-items: center;
	background: var( --ezb-primary );
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: 0 0 20px;
	font-size: 0.7rem;
	font-weight: 700;
	height: 20px;
	justify-content: center;
}

.ezb-selection-text {
	flex: 1 1 auto;
	font-size: 0.92rem;
	min-width: 0;
}

.ezb-selection-reset {
	background: none;
	border: 0;
	color: var( --ezb-primary-dark );
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
	padding: 4px 0;
	text-decoration: underline;
}

/* --------------------------------------------------------------- Felder */

.ezb-fields {
	display: grid;
	gap: 16px 18px;
	grid-template-columns: repeat( 6, 1fr );
}

.ezb-fields--lead {
	margin-bottom: 20px;
}

.ezb-field {
	grid-column: span 6;
	min-width: 0;
}

.ezb-label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 7px;
}

.ezb-required {
	color: var( --ezb-primary-dark );
}

/*
 * 16px Schriftgröße ist Pflicht: darunter zoomt iOS Safari beim Fokussieren
 * ungefragt in das Feld hinein.
 */
.ezb-input {
	background: var( --ezb-surface );
	border: 1.5px solid transparent;
	border-radius: var( --ezb-radius-sm );
	color: var( --ezb-text );
	display: block;
	font: inherit;
	font-size: 16px;
	min-height: var( --ezb-tap );
	padding: 12px 16px;
	width: 100%;
}

.ezb-select {
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, currentColor 50% ), linear-gradient( 135deg, currentColor 50%, transparent 50% );
	background-position: calc( 100% - 20px ) calc( 50% + 1px ), calc( 100% - 14px ) calc( 50% + 1px );
	background-repeat: no-repeat;
	background-size: 6px 6px, 6px 6px;
	cursor: pointer;
	padding-right: 42px;
	text-overflow: ellipsis;
}

.ezb-input:focus {
	border-color: var( --ezb-primary );
	outline: none;
	box-shadow: 0 0 0 3px var( --ezb-primary-soft );
}

.ezb-field.has-error .ezb-input {
	border-color: var( --ezb-danger );
}

.ezb-field-error {
	color: var( --ezb-danger );
	display: block;
	font-size: 0.83rem;
	margin-top: 6px;
}

/* Ja/Nein-Auswahl als antippbare Karten */

.ezb-choices {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
}

.ezb-choice {
	align-items: center;
	background: var( --ezb-surface );
	border: 1.5px solid transparent;
	border-radius: var( --ezb-radius-sm );
	cursor: pointer;
	display: flex;
	gap: 10px;
	min-height: var( --ezb-tap );
	padding: 12px 14px;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.ezb-choice:hover {
	border-color: rgba( 76, 175, 102, 0.4 );
}

.ezb-choice.is-active {
	background: var( --ezb-primary-soft );
	border-color: var( --ezb-primary );
}

/* Der echte Radio bleibt bedienbar, ist aber visuell ersetzt. */
.ezb-choice-input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.ezb-choice-radio {
	border: 2px solid var( --ezb-line );
	border-radius: 50%;
	flex: 0 0 20px;
	height: 20px;
	position: relative;
}

.ezb-choice.is-active .ezb-choice-radio {
	border-color: var( --ezb-primary );
}

.ezb-choice.is-active .ezb-choice-radio::after {
	background: var( --ezb-primary );
	border-radius: 50%;
	content: "";
	inset: 3px;
	position: absolute;
}

.ezb-choice-input:focus-visible + .ezb-choice-radio {
	outline: 2px solid var( --ezb-primary );
	outline-offset: 2px;
}

.ezb-choice-label {
	font-size: 0.95rem;
}

/* -------------------------------------------------------------- Hinweis */

.ezb-notice {
	background: var( --ezb-surface );
	border-radius: var( --ezb-radius );
	font-size: 0.95rem;
	padding: 18px 16px 4px;
}

.ezb-notice p {
	margin: 0 0 14px;
}

.ezb-notice img {
	border-radius: 8px;
	height: auto;
	max-width: min( 100%, 300px );
}

.ezb-notice ul.ezb-checklist {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.ezb-notice ul.ezb-checklist li {
	padding-left: 26px;
	position: relative;
}

.ezb-notice ul.ezb-checklist li::before {
	color: var( --ezb-primary );
	content: "✓";
	font-weight: 700;
	left: 4px;
	position: absolute;
}

/* ---------------------------------------------------------- Preis & Nav */

.ezb-footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-top: 22px;
}

.ezb-price {
	align-items: baseline;
	display: flex;
	font-size: 1.15rem;
	gap: 8px;
}

.ezb-price-label {
	color: var( --ezb-muted );
	font-size: 0.9rem;
}

.ezb-price-value {
	color: var( --ezb-primary-dark );
	font-size: 1.3rem;
	font-variant-numeric: tabular-nums;
}

.ezb-nav {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.ezb-btn {
	background: var( --ezb-primary );
	border: 1.5px solid var( --ezb-primary );
	border-radius: var( --ezb-radius-sm );
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	min-height: var( --ezb-tap );
	padding: 12px 22px;
	text-align: center;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.ezb-btn:hover:not( [disabled] ) {
	background: var( --ezb-primary-dark );
	border-color: var( --ezb-primary-dark );
}

.ezb-btn:focus-visible {
	outline: 2px solid var( --ezb-primary-dark );
	outline-offset: 2px;
}

.ezb-btn--secondary {
	background: transparent;
	border-color: var( --ezb-line );
	color: var( --ezb-text );
}

.ezb-btn--secondary:hover:not( [disabled] ) {
	background: transparent;
	border-color: var( --ezb-text );
	color: var( --ezb-text );
}

.ezb-btn--ghost {
	background: var( --ezb-primary-soft );
	border-color: transparent;
	color: var( --ezb-primary-dark );
}

.ezb-service.is-selected .ezb-btn--ghost {
	background: var( --ezb-primary );
	color: #fff;
}

.ezb-btn--wide {
	flex: 1;
}

.ezb-btn[disabled] {
	cursor: default;
	opacity: 0.65;
}

/* ----------------------------------------------------------------- Hero */

.ezb-hero {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: 720px;
}

.ezb-hero-card {
	background: #f6f7f8;
	border-radius: var( --ezb-radius, 16px );
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 18px;
	text-align: center;
}

.ezb-hero-label {
	font-size: 1rem;
	font-weight: 600;
}

.ezb-hero-brand {
	display: block;
	line-height: 1.05;
}

.ezb-hero-brand-1 {
	color: #4caf66;
	display: block;
	font-size: 1.65rem;
	letter-spacing: 0.02em;
}

.ezb-hero-brand-2 {
	display: block;
	font-size: 1.4rem;
}

.ezb-hero-brand-3 {
	display: block;
	font-size: 0.9rem;
	letter-spacing: 0.32em;
}

.ezb-hero-authority {
	font-size: 1.5rem;
	line-height: 1.15;
}

.ezb-hero-date {
	color: #4caf66;
	font-size: 1.45rem;
	font-weight: 700;
}

/* ------------------------------------------------- Bestellbestätigung */

.ezb-thankyou-date {
	font-size: 1.15rem;
	font-weight: 700;
}

/* ============================================================ Breakpoints */

/* Ab hier ist genug Platz für zweispaltige Felder. */
@media ( min-width: 560px ) {
	.ezb-card {
		padding: 26px 24px 20px;
	}

	.ezb-field--half {
		grid-column: span 3;
	}

	.ezb-field--third {
		grid-column: span 2;
	}

	.ezb-field--two-thirds {
		grid-column: span 4;
	}

	.ezb-hero {
		grid-template-columns: 1fr 1fr;
	}
}

/* Kalender und Uhrzeiten nebeneinander – kein Scrollen mehr zwischen beiden. */
@media ( min-width: 861px ) {
	.ezb-card {
		padding: 30px 32px 24px;
	}

	.ezb-heading {
		font-size: 1.25rem;
		margin-bottom: 24px;
	}

	/* stretch, damit die Uhrzeiten-Spalte die Höhe des Kalenders mitgeht. */
	.ezb-booking {
		align-items: stretch;
		grid-template-columns: minmax( 320px, 400px ) 1fr;
	}

	.ezb-booking-cal,
	.ezb-booking-times {
		padding: 20px;
	}

	.ezb-services {
		grid-template-columns: repeat( 3, 1fr );
	}

	.ezb-service {
		text-align: left;
	}

	.ezb-service-eyebrow,
	.ezb-service-eyebrow-sub {
		padding: 0 28px 0 0;
	}

	.ezb-service-price {
		font-size: 1.7rem;
	}

	/* Platz für zwei Zeilen reservieren, damit die Preise der Karten auf einer Linie liegen. */
	.ezb-service-note {
		min-height: 2.8em;
	}

	.ezb-slots {
		grid-template-columns: repeat( auto-fill, minmax( 96px, 1fr ) );
	}
}

/*
 * Mobil: Aktionsleiste klebt am unteren Rand, damit „Weiter" bei langen
 * Schritten immer erreichbar ist.
 */
@media ( max-width: 860px ) {
	.ezb-footer {
		background: var( --ezb-bg );
		border-top: 1px solid var( --ezb-line );
		bottom: 0;
		margin: 22px -16px 0;
		padding: 12px 16px;
		position: sticky;
		z-index: 5;
	}

	.ezb-nav {
		flex: 1 1 100%;
		margin-left: 0;
	}

	.ezb-nav .ezb-btn--primary {
		flex: 1;
	}

	.ezb-price {
		flex: 1 1 100%;
	}
}

@media ( max-width: 400px ) {
	.ezb-calendar-grid {
		gap: 1px;
	}

	.ezb-calendar-day {
		font-size: 0.88rem;
	}

	.ezb-slots {
		grid-template-columns: repeat( auto-fill, minmax( 78px, 1fr ) );
	}

	.ezb-slot-range {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ezb-form *,
	.ezb-form *::before,
	.ezb-form *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}