/**
 * Terminland-Bridge – Frontend-Stylesheet
 *
 * Umsetzung der Vorgaben aus Spezifikation Abschnitt 4 (UI/UX Design-Vorgaben):
 *  - Responsive & Mobile First
 *  - Kachel-Design: abgerundete Ecken, dezente Schatten, klare Kontraste
 *  - Deutliche Hover-/Focus-Effekte für Barrierefreiheit
 *  - Farbschema über CSS-Variablen anpassbar (Hettstedt Live UND Typo3-Embed)
 *
 * Präfix aller Klassen: .tb- (Terminland-Bridge), um Kollisionen mit Theme-
 * oder Typo3-Styles beim External-Embed (Schritt 7) zu vermeiden.
 */

:root {
	--tb-card-bg: #ffffff;
	--tb-card-border: #e2e8f0;
	--tb-card-active: #0056b3;
	--tb-text-color: #1a202c;

	/* Ergänzende, abgeleitete Tokens (nicht in der Spezifikation vorgegeben,
	   aber notwendig für konsistente Zustände wie Hover/Focus/Fehler). Bewusst
	   ebenfalls als Variablen, damit auch sie im Typo3-Embed überschrieben
	   werden können. */
	--tb-card-hover-bg: #f7faff;
	--tb-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
	--tb-card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08);
	--tb-focus-ring: 3px solid #ffb100;
	--tb-focus-ring-offset: 2px;
	--tb-error-color: #b3261e;
	--tb-error-bg: #fdecea;
	--tb-radius: 14px;
	--tb-gap: 1.25rem;
	--tb-font-size-title: 1.15rem;
	--tb-font-size-desc: 0.95rem;
}

/* ------------------------------------------------------------------
   Grundlayout / Wrapper
   ------------------------------------------------------------------ */

.tb-wrapper {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0.5rem 0 2rem;
	color: var(--tb-text-color);
	/* Bewusst KEIN font-family gesetzt: das Widget übernimmt die
	   Schriftart der umgebenden Seite (Hettstedt Live bzw. Typo3-Theme). */
}

.tb-wrapper__heading {
	font-size: 1.5rem;
	line-height: 1.3;
	margin: 0 0 0.5rem;
}

.tb-wrapper__hint {
	font-size: 1rem;
	margin: 0 0 1.5rem;
	color: color-mix(in srgb, var(--tb-text-color) 75%, transparent);
}

/* ------------------------------------------------------------------
   Kachel-Grid (Mobile First: 1 Spalte, wächst automatisch mit auto-fill)
   ------------------------------------------------------------------ */

.tb-kachel-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tb-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Ab Tablet-Breite: mehrspaltiges Grid, das sich automatisch an die
   verfügbare Breite anpasst (keine feste Spaltenzahl -> robust für
   Typo3-Embed in unterschiedlich breiten Content-Bereichen). */
@media (min-width: 560px) {
	.tb-kachel-grid {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	}
}

.tb-kachel-grid__item {
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------
   Einzelne Kachel (Card)
   ------------------------------------------------------------------ */

.tb-kachel {
	/* Reset der nativen Button-Styles. */
	appearance: none;
	background: var(--tb-card-bg);
	border: 1px solid var(--tb-card-border);
	border-radius: var(--tb-radius);
	box-shadow: var(--tb-card-shadow);
	color: var(--tb-text-color);
	cursor: pointer;
	font: inherit;
	text-align: left;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;

	width: 100%;
	/* Große, gut lesbare Kacheln mit generöser Klickfläche (Vorgabe: mind. 60px
	   Höhe, volle Touch-Kompatibilität). */
	min-height: 60px;
	padding: 1.25rem 1.25rem 1.35rem;

	transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.tb-kachel__icon {
	width: 2rem;
	height: 2rem;
	color: var(--tb-card-active);
	flex-shrink: 0;
}

.tb-kachel__title {
	font-size: var(--tb-font-size-title);
	font-weight: 600;
	line-height: 1.35;
}

.tb-kachel__desc {
	font-size: var(--tb-font-size-desc);
	font-weight: 400;
	line-height: 1.4;
	color: color-mix(in srgb, var(--tb-text-color) 70%, transparent);
}

/* Hover: deutliches, aber dezentes visuelles Feedback. */
.tb-kachel:hover {
	background: var(--tb-card-hover-bg);
	border-color: var(--tb-card-active);
	box-shadow: var(--tb-card-shadow-hover);
	transform: translateY(-1px);
}

/* Focus: kräftiger, gut sichtbarer Fokus-Ring für Tastatur-Nutzung
   (Barrierefreiheits-Vorgabe aus Abschnitt 4.2). :focus-visible sorgt dafür,
   dass Maus-Klicks keinen dauerhaften Ring hinterlassen, Tastatur-Fokus aber
   klar erkennbar bleibt. */
.tb-kachel:focus {
	outline: none;
}

.tb-kachel:focus-visible {
	outline: var(--tb-focus-ring);
	outline-offset: var(--tb-focus-ring-offset);
	border-color: var(--tb-card-active);
}

.tb-kachel:active {
	transform: translateY(0);
	box-shadow: var(--tb-card-shadow);
}

/* Ausgewählter Zustand (Mehrfachauswahl per role="checkbox"/aria-checked,
   siehe assets/js/frontend.js: toggleService()). Zusätzlich ein kleines,
   dekoratives Häkchen-Badge oben rechts, analog zum "checkmark" bei der
   echten Terminland-Seite – rein visuell, der eigentliche Status wird für
   Screenreader über aria-checked kommuniziert. */
.tb-kachel[aria-checked="true"] {
	border-color: var(--tb-card-active);
	background: var(--tb-card-hover-bg);
	box-shadow: 0 0 0 2px var(--tb-card-active) inset;
	position: relative;
}

.tb-kachel[aria-checked="true"]::after {
	content: "✓";
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tb-card-active);
	color: #ffffff;
	border-radius: 50%;
	font-size: 0.9rem;
	line-height: 1;
}

.tb-kachel:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.tb-kachel[data-tb-loading="true"] {
	opacity: 0.7;
	cursor: progress;
}

/* ------------------------------------------------------------------
   Auswahl-Status & "Weiter"-Button (Mehrfachauswahl)
   ------------------------------------------------------------------ */

.tb-selection-status {
	min-height: 1.3em;
	margin: 0.75rem 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--tb-card-active);
}

.tb-continue-button {
	appearance: none;
	background: var(--tb-card-active);
	border: 1px solid var(--tb-card-active);
	border-radius: 10px;
	color: #ffffff;
	cursor: pointer;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	min-height: 60px;
	padding: 0.75rem 2rem;
	margin-top: 0.5rem;
}

.tb-continue-button:hover:not(:disabled) {
	background: color-mix(in srgb, var(--tb-card-active) 85%, black);
}

.tb-continue-button:focus-visible {
	outline: var(--tb-focus-ring);
	outline-offset: var(--tb-focus-ring-offset);
}

.tb-continue-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

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

.tb-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: var(--tb-error-bg);
	border: 1px solid color-mix(in srgb, var(--tb-error-color) 35%, transparent);
	border-radius: var(--tb-radius);
	padding: 1rem 1.25rem;
	color: var(--tb-error-color);
}

.tb-notice__icon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.tb-notice__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

/* ------------------------------------------------------------------
   Folge-Schritte (Datum/Uhrzeit, Formular)
   ------------------------------------------------------------------ */

.tb-step {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--tb-card-border);
}

.tb-step[hidden] {
	display: none;
}

.tb-step__heading {
	font-size: 1.2rem;
	margin: 0 0 1rem;
}

/* Diese Überschriften erhalten nach dem Laden eines neuen Schritts
   (Kalender/Uhrzeiten) programmatisch den Fokus (siehe assets/js/frontend.js,
   renderCalendar()/renderTimeslots()), damit Tastatur- und Screenreader-
   Nutzer:innen nicht erst durch alle übrigen Kacheln des vorherigen Schritts
   tabben müssen. Da sie außerhalb der normalen Tab-Reihenfolge liegen
   (tabindex="-1"), zeigen wir hier bewusst IMMER (nicht nur :focus-visible)
   einen deutlichen Fokusring – jeder Fokuswechsel hierhin ist gewollt und
   soll sichtbar signalisieren: "Sie befinden sich jetzt hier". */
.tb-step__heading:focus {
	outline: var(--tb-focus-ring);
	outline-offset: var(--tb-focus-ring-offset);
	border-radius: 4px;
}

.tb-step__loading,
.tb-step__empty {
	font-size: 1rem;
	color: color-mix(in srgb, var(--tb-text-color) 70%, transparent);
}

.tb-notice--inline {
	display: inline-block;
	background: var(--tb-error-bg);
	color: var(--tb-error-color);
	border: 1px solid color-mix(in srgb, var(--tb-error-color) 35%, transparent);
	border-radius: 8px;
	padding: 0.6rem 1rem;
	font-size: 0.95rem;
}

/* ------------------------------------------------------------------
   Monats-Navigation (Kalender, Schritt 2a der Buchung)
   ------------------------------------------------------------------ */

.tb-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.tb-calendar-nav__button {
	appearance: none;
	background: var(--tb-card-bg);
	border: 1px solid var(--tb-card-border);
	border-radius: 8px;
	color: var(--tb-card-active);
	cursor: pointer;
	font-size: 1.3rem;
	line-height: 1;
	min-width: 44px;
	min-height: 44px;
}

.tb-calendar-nav__button:hover {
	background: var(--tb-card-hover-bg);
	border-color: var(--tb-card-active);
}

.tb-calendar-nav__button:focus-visible {
	outline: var(--tb-focus-ring);
	outline-offset: var(--tb-focus-ring-offset);
}

.tb-calendar-nav__label {
	font-weight: 600;
	min-width: 10ch;
	text-align: center;
}

/* ------------------------------------------------------------------
   Kalendertage-Grid (Wochen-/Monats-Grid, Schritt 2a)
   ------------------------------------------------------------------ */

.tb-day-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tb-day {
	appearance: none;
	width: 100%;
	min-height: 60px;
	background: var(--tb-card-bg);
	border: 1px solid var(--tb-card-border);
	border-radius: 10px;
	color: var(--tb-text-color);
	cursor: pointer;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.tb-day:hover:not(:disabled) {
	background: var(--tb-card-hover-bg);
	border-color: var(--tb-card-active);
}

.tb-day:focus-visible {
	outline: var(--tb-focus-ring);
	outline-offset: var(--tb-focus-ring-offset);
}

.tb-day[aria-pressed="true"] {
	background: var(--tb-card-active);
	border-color: var(--tb-card-active);
	color: #ffffff;
}

.tb-day--unavailable,
.tb-day:disabled {
	background: color-mix(in srgb, var(--tb-card-border) 40%, var(--tb-card-bg));
	color: color-mix(in srgb, var(--tb-text-color) 40%, transparent);
	cursor: not-allowed;
	text-decoration: line-through;
}

/* ------------------------------------------------------------------
   Uhrzeit-Kacheln (Zeit-Slots, Schritt 2b)
   ------------------------------------------------------------------ */

.tb-time-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 0.6rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.tb-time {
	appearance: none;
	width: 100%;
	min-height: 60px;
	background: var(--tb-card-bg);
	border: 1px solid var(--tb-card-border);
	border-radius: 10px;
	color: var(--tb-text-color);
	cursor: pointer;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.tb-time:hover:not(:disabled) {
	background: var(--tb-card-hover-bg);
	border-color: var(--tb-card-active);
}

.tb-time:focus-visible {
	outline: var(--tb-focus-ring);
	outline-offset: var(--tb-focus-ring-offset);
}

.tb-time[aria-pressed="true"] {
	background: var(--tb-card-active);
	border-color: var(--tb-card-active);
	color: #ffffff;
}

.tb-time--unavailable,
.tb-time:disabled {
	background: color-mix(in srgb, var(--tb-card-border) 40%, var(--tb-card-bg));
	color: color-mix(in srgb, var(--tb-text-color) 40%, transparent);
	cursor: not-allowed;
	text-decoration: line-through;
}

.tb-timeslot-confirmation {
	font-size: 1rem;
	font-weight: 600;
	color: var(--tb-card-active);
}

/* ------------------------------------------------------------------
   Personendaten-Formular (Schritt 3 der Buchung)
   ------------------------------------------------------------------ */

.tb-booking-summary {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 1.25rem;
}

.tb-booking-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	max-width: 480px;
}

.tb-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.tb-form-field label {
	font-weight: 600;
	font-size: 0.95rem;
}

.tb-form-field input[type="text"],
.tb-form-field input[type="email"],
.tb-form-field input[type="tel"] {
	font: inherit;
	font-size: 1rem;
	padding: 0.75rem 0.9rem;
	min-height: 60px;
	border: 1px solid var(--tb-card-border);
	border-radius: 10px;
	background: var(--tb-card-bg);
	color: var(--tb-text-color);
}

.tb-form-field input:focus-visible {
	outline: var(--tb-focus-ring);
	outline-offset: var(--tb-focus-ring-offset);
	border-color: var(--tb-card-active);
}

.tb-form-field--consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.6rem;
}

.tb-form-field--consent input[type="checkbox"] {
	width: 1.4rem;
	height: 1.4rem;
	flex-shrink: 0;
	margin-top: 0.15rem;
}

.tb-form-field--consent label {
	font-weight: 400;
	font-size: 0.95rem;
	line-height: 1.4;
}

.tb-form-field--consent a {
	color: var(--tb-card-active);
}

/* Honeypot-Feld: für sehende Nutzer:innen und Screenreader gleichermaßen
   unsichtbar (Anti-Spam, siehe assets/js/frontend.js), aber NICHT display:none,
   damit einfache Bots, die display:none-Felder erkennen, nicht gewarnt werden. */
.tb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tb-form-status {
	margin: 0;
	font-size: 0.95rem;
	color: var(--tb-error-color);
	min-height: 1.2em;
}

.tb-submit-button {
	appearance: none;
	align-self: flex-start;
	background: var(--tb-card-active);
	border: 1px solid var(--tb-card-active);
	border-radius: 10px;
	color: #ffffff;
	cursor: pointer;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	min-height: 60px;
	padding: 0.75rem 2rem;
}

.tb-submit-button:hover:not(:disabled) {
	background: color-mix(in srgb, var(--tb-card-active) 85%, black);
}

.tb-submit-button:focus-visible {
	outline: var(--tb-focus-ring);
	outline-offset: var(--tb-focus-ring-offset);
}

.tb-submit-button:disabled {
	opacity: 0.7;
	cursor: progress;
}

/* ------------------------------------------------------------------
   Buchungs-Bestätigung (Ausgabe der Terminland-Rückmeldung im eigenen Design)
   ------------------------------------------------------------------ */

.tb-notice--confirmation {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	max-width: 560px;
}

.tb-notice__heading {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
}

.tb-notice--success {
	background: color-mix(in srgb, #1e7d34 12%, transparent);
	border-color: color-mix(in srgb, #1e7d34 40%, transparent);
	color: #1e7d34;
}

.tb-notice--error {
	background: var(--tb-error-bg);
	border-color: color-mix(in srgb, var(--tb-error-color) 35%, transparent);
	color: var(--tb-error-color);
}

.tb-notice--unknown {
	background: color-mix(in srgb, var(--tb-card-active) 10%, transparent);
	border-color: color-mix(in srgb, var(--tb-card-active) 35%, transparent);
	color: var(--tb-card-active);
}

/* ------------------------------------------------------------------
   Sandbox-/Demo-Modus: bewusst auffällig andersfarbig (Amber/Orange)
   gegenüber echten Erfolgs-/Fehlermeldungen, damit niemand eine simulierte
   Testbuchung mit einer echten Buchung verwechseln kann.
   ------------------------------------------------------------------ */

.tb-notice--demo {
	background: #fcf2df;
	border-color: #dba617;
	color: #6b4e00;
}

.tb-demo-badge {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.3rem 0.8rem;
	background: #dba617;
	color: #ffffff;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.tb-demo-summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1rem;
	margin: 1rem 0 0;
}

.tb-demo-summary dt {
	font-weight: 700;
	white-space: nowrap;
}

.tb-demo-summary dd {
	margin: 0;
}

/* ------------------------------------------------------------------
   Bewegungsreduktion respektieren (Vorgabe: seniorenfreundlich).
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.tb-kachel {
		transition: none;
	}

	.tb-kachel:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------
   Hoher Kontrastmodus: Fokus-Ring und Rahmen zusätzlich absichern.
   ------------------------------------------------------------------ */

@media (prefers-contrast: more) {
	.tb-kachel {
		border-width: 2px;
	}

	.tb-kachel:focus-visible {
		outline-width: 4px;
	}
}