/**
 * velocultour Service-Funnel – mobil-first, button-getrieben.
 * Nutzt dieselben Velo-Design-Tokens wie das Booking-Formular.
 */

.vc-fn {
	--fn-orange: var(--orange, #E77C05);
	--fn-orange-deep: var(--orange-deep, #C66700);
	--fn-ink: var(--ink, #0A0A0B);
	--fn-paper: var(--paper, #F5F1EA);
	--fn-warm: var(--paper-warm, #ECE5D7);

	max-width: 560px;
	margin: 0 auto;
	padding: clamp(18px, 5vw, 32px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(10, 10, 11, 0.10);
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	color: var(--fn-ink);
}

/* Brand / Logo — v2.3.1: schwarze Wortmarke direkt auf hellem Grund,
   ohne dunklen Kasten, etwas größer. */
.vc-fn__brand { display: flex; justify-content: center; margin-bottom: 22px; }
.vc-fn__brand-inner { display: inline-flex; }
.vc-fn__brand img {
	height: 44px;
	width: auto;
	max-width: 100%;
	display: block;
}

/* Step-Dots */
.vc-fn__dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 24px;
}
.vc-fn__dots span {
	width: 36px;
	height: 5px;
	border-radius: 99px;
	background: rgba(10, 10, 11, 0.10);
	transition: background .25s ease;
}
.vc-fn__dots span.is-active { background: var(--fn-orange); }

/* Panels */
.vc-fn__panel { display: none; animation: vcfnIn .3s ease; }
.vc-fn__panel.is-active { display: block; }
@keyframes vcfnIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Hero / Begrüßung */
.vc-fn__hero { text-align: center; margin-bottom: 28px; }
.vc-fn__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fn-orange);
	margin-bottom: 10px;
}
.vc-fn__title {
	font-family: 'Big Shoulders Display', system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(1.8rem, 7vw, 2.6rem);
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 12px;
}
.vc-fn__bike {
	display: inline-block;
	background: var(--fn-warm);
	border-radius: 99px;
	padding: 6px 16px;
	font-size: .95rem;
	margin: 0 0 14px;
}
.vc-fn__lead { font-size: 1rem; line-height: 1.5; color: rgba(10, 10, 11, .7); margin: 0; }

.vc-fn__step-title {
	font-family: 'Big Shoulders Display', system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(1.4rem, 5vw, 1.9rem);
	text-transform: uppercase;
	margin: 0 0 6px;
}
.vc-fn__hint { font-size: .9rem; color: rgba(10, 10, 11, .6); margin: 0 0 18px; }

/* Buttons */
.vc-fn__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 12px;
	padding: 14px 22px;
	font-family: 'Big Shoulders Display', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
	transition: transform .1s ease, background .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.vc-fn__btn:active { transform: scale(.97); }
.vc-fn__btn--primary { background: var(--fn-orange); color: #fff; }
.vc-fn__btn--primary:hover { background: var(--fn-orange-deep); }
.vc-fn__btn--ghost { background: transparent; color: var(--fn-ink); border: 2px solid rgba(10, 10, 11, .14); }
.vc-fn__btn--big { width: 100%; padding: 18px; font-size: 1.2rem; }

.vc-fn__nav {
	display: flex;
	gap: 12px;
	margin-top: 26px;
}
.vc-fn__nav .vc-fn__btn--primary { flex: 1; }

/* Service-Kacheln */
.vc-fn__svc-group { margin-bottom: 18px; }
.vc-fn__svc-bereich {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(10, 10, 11, .5);
	margin-bottom: 8px;
}
.vc-fn__svc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.vc-fn__svc {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 14px 16px;
	border: 2px solid rgba(10, 10, 11, .12);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.vc-fn__svc input { position: absolute; opacity: 0; pointer-events: none; }
.vc-fn__svc-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vc-fn__svc-tick { flex: 0 0 auto; }
.vc-fn__svc-title { font-weight: 600; font-size: 1rem; }
.vc-fn__svc-desc { font-size: .82rem; color: rgba(10, 10, 11, .55); }
.vc-fn__svc-tick {
	width: 26px; height: 26px;
	border-radius: 50%;
	border: 2px solid rgba(10, 10, 11, .18);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: .8rem; font-weight: 700;
	transition: all .15s ease;
}
.vc-fn__svc:has(input:checked) { border-color: var(--fn-orange); background: rgba(231, 124, 5, .06); }
.vc-fn__svc:has(input:checked) .vc-fn__svc-tick { background: var(--fn-orange); border-color: var(--fn-orange); }
.vc-fn__svc input:focus-visible + .vc-fn__svc-body { outline: 2px solid var(--fn-orange); }

/* Datum + Slots */
.vc-fn__label {
	display: block;
	font-weight: 600;
	font-size: .85rem;
	margin: 14px 0 6px;
}
.vc-fn input[type="date"],
.vc-fn input[type="text"],
.vc-fn input[type="email"],
.vc-fn input[type="tel"],
.vc-fn select,
.vc-fn textarea {
	width: 100%;
	padding: 12px 14px;
	border: 2px solid rgba(10, 10, 11, .14);
	border-radius: 10px;
	font: inherit;
	background: #fff;
	box-sizing: border-box;
}
.vc-fn input:focus, .vc-fn select:focus, .vc-fn textarea:focus {
	outline: none;
	border-color: var(--fn-orange);
}

.vc-fn__slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 8px;
	margin-top: 6px;
}
.vc-fn__slots-empty {
	grid-column: 1 / -1;
	color: rgba(10, 10, 11, .5);
	font-size: .9rem;
	margin: 4px 0;
}
.vc-fn__slot {
	padding: 12px 6px;
	border: 2px solid rgba(10, 10, 11, .12);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: all .12s ease;
}
.vc-fn__slot--gruen { border-color: rgba(6, 125, 23, .35); }
.vc-fn__slot--gelb { border-color: rgba(231, 124, 5, .45); }
.vc-fn__slot--rot,
.vc-fn__slot--vergangen { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.vc-fn__slot.is-active { background: var(--fn-orange); color: #fff; border-color: var(--fn-orange); }

/* Confirm-Grid */
.vc-fn__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.vc-fn__field { display: block; }
.vc-fn__field--anrede, .vc-fn__field--full { grid-column: 1 / -1; }
.vc-fn__field .vc-fn__label { margin-top: 6px; }
.vc-fn__prefill-note {
	background: #e7f5ea;
	border-left: 4px solid #067D17;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: .9rem;
	margin: 0 0 16px;
}
.vc-fn__check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 18px 0 4px;
	font-size: .9rem;
	line-height: 1.45;
}
.vc-fn__check input { margin-top: 3px; }
.vc-fn__check a { color: var(--fn-ink); text-decoration: underline; text-decoration-color: var(--fn-orange); }

.vc-fn__status { margin-top: 14px; font-size: .9rem; min-height: 1em; }
.vc-fn__status.is-error { color: #B91C1C; font-weight: 600; }

/* Success */
.vc-fn--success { text-align: center; }
.vc-fn__check-badge {
	width: 64px; height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #067D17;
	color: #fff;
	font-size: 2rem;
	display: flex; align-items: center; justify-content: center;
}
.vc-fn__nummer {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	color: var(--fn-orange);
}

/* Sanfter Hinweis (z. B. „keine Leistung gewählt") — nicht alarmierend wie ein Fehler */
.vc-fn__note {
	margin: 16px 0 0;
	padding: 12px 14px;
	background: rgba(231, 124, 5, .09);
	border-left: 4px solid var(--fn-orange);
	border-radius: 6px;
	font-size: .9rem;
	line-height: 1.4;
	color: var(--fn-ink);
}
.vc-fn__note[hidden] { display: none; }

@media (max-width: 380px) {
	.vc-fn__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
 * App-Route (Vollbild): jeder Schritt füllt den Screen, „Weiter"/„Zurück"
 * bleiben unten sichtbar — kein Seiten-Scroll nötig. Nur Mobile; ab 600px
 * bleibt der Funnel eine zentrierte Karte (siehe Inline-Style der App-Seite).
 * ------------------------------------------------------------------ */
@media (max-width: 599px) {
	body.vc-fn-app .vc-fn {
		/* svh statt dvh (v2.2.3): auf iOS Safari ändert dvh seine Höhe, sobald die
		   Adressleiste ein-/ausfährt — der Container „atmet", Inhalt läuft über und
		   der Nav rutscht weg. svh = kleinster (stabiler) Viewport. */
		height: 100vh;
		height: 100svh;
		/* Ohne border-box addierte sich das Padding auf die 100svh → Seite war
		   immer ~48px zu hoch und musste scrollen. */
		box-sizing: border-box;
		min-height: 0;
		display: flex;
		flex-direction: column;
		/* .vc-fn ist auf der App-Route ein Flex-Item (body: flex) — ohne min-width:0
		   schrumpft es nicht unter seinen Inhalt und läuft rechts über. */
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}
	body.vc-fn-app .vc-fn__brand,
	body.vc-fn-app .vc-fn__dots { flex: 0 0 auto; }
	body.vc-fn-app .vc-fn__form {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	/* Panel selbst scrollt NICHT mehr — es teilt nur in Scrollfläche + Nav. */
	body.vc-fn-app .vc-fn__panel.is-active {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	/* Nur der Inhalt scrollt. Nav liegt außerhalb → immer sichtbar, kein sticky
	   (sticky-bottom in einer Scrollfläche ist auf iOS Safari unzuverlässig). */
	body.vc-fn-app .vc-fn__panel-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	/* Begrüßung vertikal zentrieren (wenig Inhalt) */
	body.vc-fn-app .vc-fn__panel[data-fn-panel="0"] .vc-fn__panel-body {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	/* Hinweis + Status liegen außerhalb der Scrollfläche → immer sichtbar. */
	body.vc-fn-app .vc-fn__status,
	body.vc-fn-app .vc-fn__note { flex: 0 0 auto; }
	body.vc-fn-app .vc-fn__note { margin-top: 10px; }
	body.vc-fn-app .vc-fn__nav {
		flex: 0 0 auto;
		position: static;
		margin-top: 0;
		background: #fff;
		padding-top: 12px;
	}
	/* Etwas kompakter, damit mehr auf einen Screen passt */
	body.vc-fn-app .vc-fn__svc { padding: 12px 14px; }
	body.vc-fn-app .vc-fn__svc-group { margin-bottom: 14px; }
	body.vc-fn-app .vc-fn__hint { margin-bottom: 12px; }
}