/*
 * FB Terminbuchung – Frontend
 * Gestaltet wie das Website-Mockup („Termin buchen“). Nutzt die Variablen
 * des Themes (--clr-*, --font-size-base); die Werte nach dem Komma greifen
 * nur, falls eine Variable im Theme fehlt. Buttons (data-button, .button)
 * gestaltet das Theme, ebenso Schriftfamilien und Grundschriftgröße.
 * Anpassbar über die --fbt-* Variablen, z. B.:
 * .fbt { --fbt-accent: #6b8f71; }
 */
.fbt {
	--fbt-base: var(--font-size-base, 1rem);
	--fbt-text: var(--clr-body-text, hsl(22 13% 13%));
	--fbt-heading: var(--clr-headline-text, var(--fbt-text));
	--fbt-muted: var(--clr-clay-brown-dark, hsl(25 24% 38%));
	--fbt-accent: var(--clr-clay-brown-dark, hsl(25 24% 38%));
	--fbt-accent-hover: var(--clr-deep-taube, hsl(24 17% 32%));
	--fbt-accent-contrast: var(--clr-white-smoke-2, hsl(36 45% 98%));
	--fbt-surface: var(--clr-white-smoke-2, hsl(36 45% 98%));
	--fbt-soft: var(--clr-warm-sand-light, hsl(30 45% 95%));
	--fbt-sand: var(--clr-warm-sand, hsl(42 45% 85%));
	--fbt-border: var(--clr-sage-green-deep-2, hsl(60 15% 50%));
	--fbt-input-bg: #fff;
	--fbt-error: hsl(8 60% 34%);
	--fbt-radius-s: .5rem;
	--fbt-measure: 36rem;

	container-type: inline-size;
	max-inline-size: 52rem;
	line-height: 1.6;

	& *,
	& *::before,
	& *::after { box-sizing: border-box; }

	& [hidden] { display: none !important; }
	& p { margin: 0; }

	/* Fokus: dunkler Ring mit hellem Innenring – wie im Mockup */
	& :focus-visible {
		outline: 3px solid var(--fbt-text);
		outline-offset: 3px;
		box-shadow: 0 0 0 6px var(--fbt-surface);
	}
	& [tabindex="-1"]:focus { outline: none; box-shadow: none; }

	& a:not(.button) {
		color: var(--fbt-accent);
		text-underline-offset: .18em;

		&:hover { color: var(--fbt-accent-hover); }
	}
}

/* Nur für Screenreader (auch Spamschutz-Feld) */
.fbt-sr,
.fbt-hp {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Fortschritt ---------- */
.fbt-progress {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}
.fbt-progress__step {
	flex: 1;
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0;
	padding-block-end: .75rem;
	border-block-end: 2px solid var(--fbt-sand);
	color: var(--fbt-muted);
	transition: border-color .2s, color .2s;

	&.is-current {
		color: var(--fbt-text);
		border-color: var(--fbt-accent);
		font-weight: 600;

		& .fbt-progress__num {
			background: var(--fbt-accent);
			border-color: var(--fbt-accent);
			color: var(--fbt-accent-contrast);
		}
	}

	&.is-done {
		color: var(--fbt-accent);
		border-color: var(--fbt-accent);

		& .fbt-progress__num {
			position: relative;
			color: transparent;
			border-color: var(--fbt-accent);

			/* Häkchen */
			&::after {
				content: "";
				position: absolute;
				inset-inline-start: 50%;
				inset-block-start: 45%;
				inline-size: .3rem;
				block-size: .55rem;
				border: solid var(--fbt-accent);
				border-width: 0 2px 2px 0;
				translate: -50% -50%;
				rotate: 45deg;
			}
		}
	}
}
.fbt-progress__num {
	flex: none;
	display: inline-grid;
	place-items: center;
	inline-size: 2.25rem;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	font-weight: 600;
	line-height: 1;
}

/* ---------- Schritte ---------- */
.fbt-step {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	animation: fbt-in .25s ease-out;

	&[data-fbt-step="form"] { gap: 1.5rem; }
}

.fbt-step__title,
.fbt-group__title,
.fbt-done h2,
.fbt-cancel h2 {
	margin: 0;
	padding: 0;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fbt-text);
	text-wrap: balance;
}

/* Fragen in Schritt 1 */
.fbt-group {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.fbt-group__title { margin-block-end: .75rem; }

/* Auswahl-Kacheln mit sichtbarem Radio-Button: Auswahl ist nicht nur an der Farbe erkennbar */
.fbt-choices {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}
.fbt-choices--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
}
.fbt-choice {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	min-block-size: 2.75rem;
	margin: 0;
	padding: .875rem 1rem;
	border: 1.5px solid var(--fbt-border);
	border-radius: var(--fbt-radius-s);
	background: var(--fbt-surface);
	color: var(--fbt-text);
	cursor: pointer;
	transition: border-color .15s, background-color .15s;

	&:hover { border-color: var(--fbt-accent); }

	&:has(input:checked) {
		border-color: var(--fbt-accent);
		box-shadow: inset 0 0 0 1px var(--fbt-accent);
		background: var(--fbt-soft);
	}

	& input {
		flex: none;
		inline-size: 1.25rem;
		block-size: 1.25rem;
		margin: .2rem 0 0;
		accent-color: var(--fbt-accent);
		cursor: pointer;
	}
}
.fbt-choice__text {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.fbt-choice__title {
	font-size: var(--fbt-base);
	color: var(--fbt-heading);
	font-weight: 600;
	line-height: 1.4;
}
.fbt-choice__info {
	font-size: calc(var(--fbt-base) * .825);
	line-height: 1.45;
}

.fbt-choice--short,
.fbt-choice--slot {
	align-items: center;

	& input { margin: 0; }
	& .fbt-choice__title { font-weight: 400; }
}
.fbt-choice--slot {
	gap: .625rem;
	padding: .75rem .875rem;
	white-space: nowrap;

	&:has(input:checked) .fbt-choice__title { font-weight: 600; }
}

/* ---------- Kalender + Uhrzeiten ---------- */
.fbt-when {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

.fbt-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-block-end: 1rem;
}
.fbt-cal__month { font-weight: 600; }

.fbt-cal__nav {
	appearance: none;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--fbt-border);
	border-radius: 50%;
	background: var(--fbt-surface);
	color: var(--fbt-text);
	font: inherit;
	line-height: 1;
	cursor: pointer;

	&:hover:not(:disabled) {
		border-color: var(--fbt-accent);
		background: var(--fbt-soft);
	}
	&:disabled { opacity: .35; cursor: default; }
}

.fbt-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: calc(var(--fbt-base) / 2);
	text-align: center;
}
.fbt-cal__wd {
	padding-block: .25rem;
	font-weight: 600;
	color: var(--fbt-muted);
}
.fbt-cal__day {
	appearance: none;
	display: grid;
	place-items: center;
	justify-self: center;
	inline-size: 100%;
	max-inline-size: 2.75rem;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 1.5px solid transparent;
	border-radius: 50%;
	background: none;
	color: var(--fbt-muted);
	font: inherit;
	font-variant-numeric: tabular-nums;
	cursor: default;
	opacity: .55;

	/* Freie Tage: Sandfläche + fette Ziffer; gewählt: volle Akzentfarbe */
	&.is-available {
		background: var(--fbt-sand);
		color: var(--fbt-text);
		font-weight: 600;
		opacity: 1;
		cursor: pointer;

		&:hover { border-color: var(--fbt-accent); }
	}
	&.is-selected {
		background: var(--fbt-accent);
		border-color: var(--fbt-accent);
		color: var(--fbt-accent-contrast);
	}
}

.fbt-times__hint {
	padding: 1rem 1.25rem;
	border: 1.5px dashed var(--fbt-sand);
	border-radius: var(--fbt-radius-s);
	color: var(--fbt-muted);
}
.fbt-times__date {
	margin-block-end: .75rem;
	font-weight: 600;
}
.fbt-slots {
	margin-block-start: var(--fbt-base);
	display: grid;
	grid-template-columns: 1fr;
	gap: .5rem;
	font-variant-numeric: tabular-nums;
}

/* Uhrzeiten gleiten ein: von unten (schmal) bzw. von rechts (breit) */
.fbt-times__panel.is-in { animation: fbt-slide-up .3s ease-out; }

@container (width >= 40rem) {
	.fbt-when {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: 2rem;
	}
	.fbt-times {
		padding-inline-start: 2rem;
		border-inline-start: 1px solid var(--fbt-sand);
	}
	.fbt-times__panel.is-in { animation-name: fbt-slide-left; }
}

/* ---------- Navigation ---------- */
.fbt-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--fbt-sand);
}
.fbt-nav--end {
	justify-content: flex-end;

	& .fbt-missing { margin-inline-end: auto; text-align: start; }
}

.fbt-missing,
.fbt-hint#fbt-message-hint {
	max-inline-size: 100%;
	color: var(--fbt-muted);
	font-size: calc(var(--fbt-base) * .75);
	font-style: italic;
	line-height: 1.4;
}
.fbt-missing:empty { display: none; }

/* ---------- Schritt 2 ---------- */
.fbt-summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--fbt-base) * 1.5);
	max-inline-size: var(--fbt-measure);
	padding: 1.25rem 1.5rem;
	border-radius: 1.25rem;
	background: var(--fbt-soft);
}
.fbt-summary__list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .25rem 2rem;
	margin: 0;

	& > div { display: contents; }
	& dt { color: var(--fbt-muted); }
	& dd { margin: 0; font-weight: 600; }
}
@container (width < 26rem) {
	.fbt-summary__list {
		grid-template-columns: 1fr;
		gap: 0;

		& dd { margin-block-end: .5rem; }
	}
}

.fbt-form { margin: 0; }

.fbt-field {
	display: flex;
	flex-direction: column;
	gap: calc(var(--fbt-base) * .25);
	margin: 0;
	padding: 0;
	border: 0;

	& > label { font-weight: 500; }

	& :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
		display: block;
		inline-size: 100%;
		max-inline-size: var(--fbt-measure);
		margin: 0;
		padding: .75rem 1rem;
		border: 1.5px solid var(--fbt-border);
		border-radius: .75rem;
		background: var(--fbt-input-bg);
		color: var(--fbt-text);
		font: inherit;

		&:hover { border-color: var(--fbt-accent); }
		&:focus-visible { outline-offset: 2px; border-color: var(--fbt-accent); }
	}
	& textarea {
		resize: vertical;
		field-sizing: content;
		min-block-size: calc(4lh + 1.5rem);
	}

	& [aria-invalid="true"] {
		border-color: var(--fbt-error);
		box-shadow: inset 0 0 0 1px var(--fbt-error);
	}

	& > .fbt-check {
		display: flex;
		gap: .75rem;
		align-items: flex-start;
		margin: 0;
		font-weight: 400;
		cursor: pointer;

		& span { max-inline-size: var(--fbt-measure); }
	}
}
.fbt-check input {
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: .2rem 0 0;
	accent-color: var(--fbt-accent);
}

.fbt-hint {
	margin-block-start: calc(var(--fbt-base) / 1.25);
	color: var(--fbt-muted);
}
.fbt-hint--binding { margin: 0; font-weight: 600; }
.fbt-error {
	margin-block-start: calc(var(--fbt-base) / 2);
	font-weight: 600;
	color: var(--fbt-error);
}

/* ---------- Hinweise & Abschluss ---------- */
.fbt-notice {
	padding: .875rem 1.125rem;
	border-radius: var(--fbt-radius-s);
	background: var(--fbt-soft);
	color: var(--fbt-text);
}
.fbt > .fbt-notice { margin-block-end: 1.5rem; }
.fbt-notice--error {
	border-inline-start: 4px solid var(--fbt-error);
	color: var(--fbt-error);
	font-weight: 600;
}
.fbt-loading { color: var(--fbt-muted); }

.fbt-done,
.fbt-cancel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .75rem;
	outline: none;
}
.fbt-done__summary {
	padding: .875rem 1.125rem;
	border-radius: var(--fbt-radius-s);
	background: var(--fbt-sand);
}

/* Auf schmalen Bildschirmen nur die Bezeichnung des aktuellen Schritts zeigen */
@container (width < 30rem) {
	.fbt-progress__step:not(.is-current) .fbt-progress__label {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ---------- Animationen ---------- */
@keyframes fbt-in { from { opacity: 0; translate: 0 6px; } }
@keyframes fbt-slide-up { from { opacity: 0; translate: 0 8px; } }
@keyframes fbt-slide-left { from { opacity: 0; translate: 12px 0; } }

@media (prefers-reduced-motion: reduce) {
	.fbt * {
		scroll-behavior: auto !important;
		animation: none !important;
		transition: none !important;
	}
}

/* Windows-Kontrastmodus: Auswahl und Fokus bleiben sichtbar */
@media (forced-colors: active) {
	.fbt-choice:has(input:checked),
	.fbt-cal__day.is-selected { outline: 2px solid Highlight; }
	.fbt-cal__day.is-available { border-color: CanvasText; }
	.fbt :focus-visible { outline-color: Highlight; }
}