/*
 * GORILLA GARAGE — Booking-Section (Calendly Scheduling API)
 *
 * Eigene Buchungsstrecke im Gorilla-Design. Die /termin-Seite ist bewusst NUR
 * dieses Modul: es sitzt direkt unter dem Hero auf hellem Canvas
 * (.section--light + .gg-section-booking--light), ohne separaten Vorspann.
 *
 * Die Service-Cards bleiben bewusst dunkel (dark-on-light) — der Kontrast
 * trägt die Auswahl. Nur die hell/weiß gesetzten Fließtext-/Headline-Farben
 * werden im Light-Kontext (siehe Block „LIGHT-KONTEXT" unten) auf Dunkel
 * gedreht, damit nichts weiß-auf-weiß verschwindet.
 *
 * Regeln (siehe MEMORY.md):
 *   - Box-Look (Gradient+Border+Shadow+Topstripe) ist /aufbereitung vorbehalten
 *     → Service-Cards hier FLACH (Border + Accent-Hover, kein Box-Treatment).
 *   - Hover ausschliesslich über die 4 Hover-Tokens, nichts inline erfinden.
 *   - Keine Border auf Chevron-Clip-Buttons → Slot-/Week-Buttons sind simple
 *     Rounded-Rects mit Border (kein clip-path), State über bg/color.
 *   - Keine Glas-Effekte (Default solid).
 */

.gg-section-booking {
	scroll-margin-top: var(--gg-header-h);
}

/* ────────────────────────────────────────────────────────────
 * LIGHT-KONTEXT (/termin)
 *
 * Das Modul steht auf hellem Canvas. Eyebrow (rot) und Title (erbt Dunkel
 * aus .section--light) passen bereits. Nur die Elemente, die für den alten
 * Dark-Kontext hart auf Weiß/Hellgrau gesetzt waren, würden hier auf Weiß
 * verschwinden → hier auf die Light-Text-Tokens zurückgedreht.
 * Die Service-Cards bleiben absichtlich dunkel (dark-on-light).
 * ──────────────────────────────────────────────────────────── */

.gg-section-booking--light .gg-booking__lead,
.gg-section-booking--light .gg-booking__times-head,
.gg-section-booking--light .gg-booking__success-title {
	color: var(--color-heading);
}

.gg-section-booking--light .gg-booking__back {
	color: var(--color-text-muted);
}

.gg-section-booking--light .gg-booking__status,
.gg-section-booking--light .gg-booking__success-sub {
	color: var(--color-text-muted);
}

.gg-booking {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.gg-booking__eyebrow {
	margin: 0;
}

.gg-booking__title {
	margin: 0 0 var(--space-2);
}

/* ────────────────────────────────────────────────────────────
 * FORTSCHRITTS-ANZEIGE
 * ──────────────────────────────────────────────────────────── */

.gg-booking__steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: gg-step;
}

.gg-booking__step {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--gg-grey-500);
	counter-increment: gg-step;
}

.gg-booking__step::before {
	content: counter(gg-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--gg-grey-700);
	font-size: var(--fs-xs);
	color: var(--gg-grey-500);
	transition: background-color var(--dur-fast) var(--ease-standard),
				border-color var(--dur-fast) var(--ease-standard),
				color var(--dur-fast) var(--ease-standard);
}

.gg-booking__step.is-active {
	color: var(--gg-off-white);
}

.gg-booking__step.is-active::before {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--gg-white);
}

.gg-booking__step.is-done::before {
	content: "\2713";
	background-color: var(--gg-grey-700);
	border-color: var(--gg-grey-700);
	color: var(--gg-off-white);
}

/* ────────────────────────────────────────────────────────────
 * STATUS-/LADE-MELDUNGEN
 * ──────────────────────────────────────────────────────────── */

.gg-booking__status {
	margin: 0;
	min-height: 0;
	font-size: var(--fs-base);
	color: var(--gg-grey-300);
}

/* Form-Labels im Buchungs-Schritt etwas größer als das globale Form-Default. */
.gg-booking__form .gg-form__label {
	font-size: var(--fs-base);
}

.gg-booking__status.is-visible {
	padding: var(--space-3) var(--space-4);
	background-color: var(--gg-black-soft);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-sm);
}

.gg-booking__status.is-error {
	color: var(--gg-red-bright);
	border-left-color: var(--gg-red-bright);
}

.gg-booking__loading {
	margin: 0;
	color: var(--gg-grey-500);
	font-size: var(--fs-base);
	font-style: italic;
}

.gg-booking__hint {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-sm);
	color: var(--gg-grey-500);
}

/* Zahlungs-Platzhalter (Etappe 1) — wird in Etappe 2 durch das Stripe-
 * Bezahlfenster ersetzt. */
.gg-booking__pay-placeholder {
	padding: var(--space-5);
	background-color: var(--gg-black);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-sm);
	color: var(--gg-grey-300);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
}

.gg-booking__pay-placeholder p {
	margin: 0;
}

/* ────────────────────────────────────────────────────────────
 * PANELS
 * ──────────────────────────────────────────────────────────── */

.gg-booking__panel[hidden] {
	display: none;
}

.gg-booking__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	animation: gg-booking-panel-in var(--dur-base) var(--ease-emphasis);
}

@keyframes gg-booking-panel-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.gg-booking__lead {
	margin: 0;
	font-family: var(--font-headline);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--gg-white);
}

.gg-booking__lead:focus-visible {
	outline: none;
}

.gg-booking__panel-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.gg-booking__back {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) 0;
	background: transparent;
	border: 0;
	color: var(--gg-grey-300);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-standard);
}

.gg-booking__back:hover,
.gg-booking__back:focus-visible {
	color: var(--color-accent);
	outline: none;
}

/* ────────────────────────────────────────────────────────────
 * SCHRITT 1 — SERVICE-CARDS (flach, kein Box-Treatment)
 * ──────────────────────────────────────────────────────────── */

.gg-booking__services {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.gg-booking__services {
		grid-template-columns: 1fr 1fr;
	}
}

.gg-booking__service {
	--btn-chevron-cut: 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-5);
	text-align: left;
	background-color: var(--gg-black);
	/* Chevron-Box, rahmenlos: nur Fläche + Tiefe über drop-shadow (folgt der
	 * Cut-Form). Kein Outline im Ruhezustand. */
	border: 0;
	border-radius: 0;
	box-shadow: none;
	clip-path: var(--clip-btn-chevron);
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
	cursor: pointer;
	transition: box-shadow var(--dur-fast) var(--ease-standard),
				background-color var(--dur-fast) var(--ease-standard),
				transform var(--dur-base) var(--ease-emphasis),
				filter var(--dur-base) var(--ease-emphasis);
}

/* Flächen-Hover: die Box füllt sich rot (kein Rahmen-Highlight). */
.gg-booking__service:hover {
	background-color: var(--color-accent);
	box-shadow: none;
	transform: var(--hover-lift-card);
	filter: drop-shadow(0 12px 30px rgba(200, 16, 46, 0.32));
}

.gg-booking__service:hover .gg-booking__service-name,
.gg-booking__service:hover .gg-booking__service-meta {
	color: var(--gg-white);
}

.gg-booking__service:hover .gg-booking__service-desc {
	color: rgba(255, 255, 255, 0.92);
}

.gg-booking__service:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--color-accent);
}

.gg-booking__service-name {
	font-family: var(--font-headline);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--gg-white);
}

.gg-booking__service-meta {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-accent);
}

.gg-booking__service-desc {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--gg-grey-300);
}

/* ────────────────────────────────────────────────────────────
 * SCHRITT 2 — WOCHEN-NAV + TAGE/SLOTS
 * ──────────────────────────────────────────────────────────── */

.gg-booking__weeknav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--gg-grey-700);
}

.gg-booking__weekbtn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	min-height: 44px;
	background-color: var(--gg-black);
	color: var(--gg-off-white);
	border: 1px solid var(--gg-grey-700);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-standard),
				color var(--dur-fast) var(--ease-standard);
}

.gg-booking__weekbtn:hover:not(:disabled) {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.gg-booking__weekbtn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.gg-booking__weekbtn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.gg-booking__weeklabel {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	color: var(--gg-grey-300);
	text-align: center;
}

/* Tagesleiste — horizontale Auswahl, nutzt die volle Breite, bricht bei
 * Bedarf in eine zweite Reihe statt einen Wasserfall zu erzeugen. */
.gg-booking__daybar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.gg-booking__daychip {
	--btn-chevron-cut: 12px;
	flex: 1 1 auto;
	min-width: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--space-3) var(--space-3);
	min-height: 44px;
	background-color: var(--gg-black);
	color: var(--gg-off-white);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	clip-path: var(--clip-btn-chevron);
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
	cursor: pointer;
	transition: filter var(--dur-fast) var(--ease-standard),
				box-shadow var(--dur-fast) var(--ease-standard),
				background-color var(--dur-fast) var(--ease-standard),
				color var(--dur-fast) var(--ease-standard);
}

/* Flächen-Hover: Chip füllt sich rot. */
.gg-booking__daychip:hover {
	background-color: var(--color-accent);
	color: var(--gg-white);
	filter: drop-shadow(0 8px 20px rgba(200, 16, 46, 0.35));
}

.gg-booking__daychip:hover .gg-booking__daychip-count {
	color: rgba(255, 255, 255, 0.85);
}

.gg-booking__daychip:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--color-accent);
}

.gg-booking__daychip.is-selected {
	background-color: var(--color-accent);
	color: var(--gg-white);
	filter: drop-shadow(0 8px 20px rgba(200, 16, 46, 0.4));
}

.gg-booking__daychip-weekday {
	font-family: var(--font-headline);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: 1;
}

.gg-booking__daychip-date {
	font-size: var(--fs-sm);
}

.gg-booking__daychip-count {
	font-size: var(--fs-xs);
	color: var(--gg-grey-500);
}

.gg-booking__daychip.is-selected .gg-booking__daychip-count {
	color: rgba(255, 255, 255, 0.85);
}

/* Zeit-Raster des gewählten Tages — füllt die volle Box-Breite mit so vielen
 * Chips pro Reihe, wie passen. */
.gg-booking__times {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.gg-booking__times-head {
	margin: 0;
	font-family: var(--font-headline);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--gg-white);
}

.gg-booking__times-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: var(--space-2);
}

.gg-booking__slot {
	--btn-chevron-cut: 12px;
	display: block;
	width: 100%;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	background-color: var(--gg-black);
	color: var(--gg-off-white);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	clip-path: var(--clip-btn-chevron);
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
	font-family: var(--font-mono);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-standard),
				box-shadow var(--dur-fast) var(--ease-standard),
				color var(--dur-fast) var(--ease-standard),
				filter var(--dur-fast) var(--ease-standard);
}

.gg-booking__slot:hover {
	background-color: var(--color-accent);
	color: var(--gg-white);
	filter: drop-shadow(0 6px 16px rgba(200, 16, 46, 0.4));
}

.gg-booking__slot:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--color-accent);
}

/* ────────────────────────────────────────────────────────────
 * SCHRITT 3 — ZUSAMMENFASSUNG + FORMULAR
 * ──────────────────────────────────────────────────────────── */

.gg-booking__summary {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	background-color: var(--gg-black);
	border: 1px solid var(--gg-grey-700);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-sm);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	color: var(--gg-off-white);
}

.gg-booking__consent {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--gg-grey-500);
}

.gg-booking__consent a {
	color: var(--gg-grey-300);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gg-booking__submit {
	align-self: flex-start;
	min-width: 240px;
}

.gg-booking__submit.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

@media (max-width: 559.98px) {
	.gg-booking__submit {
		width: 100%;
	}
}

/* Honeypot — für Menschen unsichtbar, im DOM präsent (Bots füllen es). */
.gg-booking__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ────────────────────────────────────────────────────────────
 * SCHRITT 4 — BESTÄTIGUNG
 * ──────────────────────────────────────────────────────────── */

.gg-booking__success[hidden] {
	display: none;
}

.gg-booking__success {
	align-items: center;
	text-align: center;
	gap: var(--space-3);
	padding: var(--space-10) var(--space-6);
	background-color: var(--color-status-open-glow);
	border: 1px solid rgba(46, 204, 113, 0.4);
	border-radius: var(--radius-md);
}

.gg-booking__success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: rgba(46, 204, 113, 0.16);
	color: var(--gg-status-open);
	font-size: var(--fs-xl);
	line-height: 1;
}

.gg-booking__success-title {
	margin: 0;
	font-family: var(--font-headline);
	font-size: var(--fs-xl);
	color: var(--gg-white);
}

.gg-booking__success-text {
	margin: 0;
	max-width: 44ch;
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--gg-off-white);
}

.gg-booking__success-sub {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--gg-grey-300);
}

/* ────────────────────────────────────────────────────────────
 * NOTICE (nicht konfiguriert / noscript)
 * ──────────────────────────────────────────────────────────── */

.gg-booking__notice {
	margin: 0;
	padding: var(--space-4) var(--space-5);
	background-color: var(--gg-black-soft);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-sm);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--gg-grey-300);
}

.gg-booking__notice a {
	color: var(--gg-off-white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.gg-booking__panel,
	.gg-booking__service {
		animation: none;
		transition: none;
	}
}