/*
Theme Name: velocultour
Theme URI: https://velocultour.de
GitHub Theme URI: martin2025x/velocultour-theme
Update URI: https://github.com/martin2025x/velocultour-theme
Primary Branch: main
Author: Martin Günther
Author URI: https://velocultour.de
Description: Cinematic Bikestore-Theme für velocultour Bikestore in Neuhof. Designed für Premium-Marken-Storytelling, integriert mit dem velocultour-booking-Plugin für Werkstatt- und Beratungstermine.
Version: 1.9.16
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: velocultour
Tags: bike, premium, custom-menu, custom-logo
*/

/* ========================================================================
   Inline-CSS aus dem v13-Mockup
   ======================================================================== */

:root {
	--orange: #E77C05;
	--orange-deep: #C66700;
	--orange-glow: rgba(231, 124, 5, 0.45);
	--ink: #0A0A0B;
	--ink-soft: #15151A;
	--paper: #F5F1EA;
	--paper-warm: #ECE5D7;
	--line: rgba(10, 10, 11, 0.1);
	--muted: #6B6660;
	--white: #FFFFFF;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Familjen Grotesk', sans-serif;
	background:
		linear-gradient(180deg, rgba(70, 70, 75, 0.65) 0%, rgba(140, 140, 145, 0.4) 80px, rgba(220, 220, 225, 0.22) 160px, transparent 220px) no-repeat,
		var(--ink);
	color: var(--paper);
	overflow-x: hidden;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	cursor: none;
}

.display {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 0.85;
	text-transform: uppercase;
}

.mono {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ============= CUSTOM CURSOR ============= */
.cursor {
	position: fixed;
	width: 8px;
	height: 8px;
	background: var(--orange);
	border-radius: 50%;
	pointer-events: none;
	z-index: 10000;
	mix-blend-mode: difference;
	transition: transform 0.15s ease, width 0.3s ease, height 0.3s ease;
	will-change: transform;
	transform: translate(-100px, -100px);
}

.cursor-ring {
	position: fixed;
	width: 36px;
	height: 36px;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	transition: transform 0.4s cubic-bezier(0.2, 0, 0.1, 1), width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
	will-change: transform;
	transform: translate(-100px, -100px);
}

.cursor.hover {
	transform: translate(-100px, -100px) scale(0);
}

.cursor-ring.hover {
	width: 64px;
	height: 64px;
	border-color: var(--orange);
}

@media (max-width: 900px),
(pointer: coarse) {
	body {
		cursor: auto;
	}

	.cursor,
	.cursor-ring {
		display: none;
	}
}

/* ============= LOADER ============= */
.loader {
	/* v1.7.1: BG-Bild entfernt — reines Dunkelschwarz, fokus aufs Logo */
	position: fixed;
	inset: 0;
	background: var(--ink);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s ease 0.15s, visibility 0.5s ease 0.15s;
}

/* v1.7.8: Zwei-Phasen-Fadeout für Reveal-Effekt — erst fällt der
     schwarze BG auf 70 % Opacity (Hero-Video schimmert leicht durch),
     dann blendet er vollständig in die Videosequenz aus. */
.loader.done {
	/* v1.7.28: linearer Fade ohne Zwischenstop (sauberer Übergang) */
	animation: loaderFadeOut 0.8s ease-out forwards;
}

@keyframes loaderFadeOut {
	0% {
		opacity: 1;
		visibility: visible;
	}

	100% {
		opacity: 0;
		visibility: hidden;
	}
}

.loader-mark {
	/* v1.2.0: Logo deutlich vergroessert (vorher 220-340 px) */
	width: clamp(320px, 42vw, 520px);
	display: block;
	position: relative;
}

.loader-logo {
	/* v1.7.4: clip-path-Reveal zurück mit lokalem PNG (zuverlässig). Schneller (0.9s).
       v1.7.28: GPU-Hint gegen Ruckler. */
	width: 100%;
	height: auto;
	display: block;
	clip-path: inset(0 0 100% 0);
	-webkit-clip-path: inset(0 0 100% 0);
	opacity: 0;
	animation: logoStaged 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s forwards;
	filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.4));
	will-change: clip-path, opacity;
	transform: translateZ(0);
}

@keyframes logoStaged {

	/* v1.7.28: scale-Animation entfernt (verursachte Ruckler).
                Nur clip-path-Reveal + Opacity. */
	0% {
		clip-path: inset(0 0 100% 0);
		-webkit-clip-path: inset(0 0 100% 0);
		opacity: 0;
	}

	18% {
		opacity: 1;
	}

	55% {
		clip-path: inset(0 0 38% 0);
		-webkit-clip-path: inset(0 0 38% 0);
	}

	100% {
		clip-path: inset(0 0 0 0);
		-webkit-clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}

.loader-bar {
	/* v1.7.1: schneller (vorher 1.7s) */
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--orange);
	width: 0;
	animation: loaderBar 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes loaderBar {
	to {
		width: 100%;
	}
}

/* ============= TOP MARQUEE ============= */
.marquee {
	background: var(--orange);
	color: var(--ink);
	overflow: hidden;
	padding: 12px 0;
	position: relative;
	z-index: 50;
	box-shadow:
		0 -38px 78px rgba(230, 230, 235, 0.22),
		0 -14px 32px rgba(210, 210, 215, 0.15),
		0 -4px 12px rgba(190, 190, 195, 0.1);
}

.marquee-track {
	display: flex;
	gap: 56px;
	white-space: nowrap;
	animation: scroll 28s linear infinite;
	width: max-content;
}

.marquee-track span {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 56px;
}

.marquee-track span::after {
	content: '◆';
	font-size: 0.6rem;
	transform: translateY(-2px);
}

@keyframes scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* ============= NAV ============= */
nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 18px 40px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 40px;
	background: linear-gradient(180deg, rgba(10, 10, 11, 0.85) 0%, rgba(10, 10, 11, 0.45) 55%, rgba(10, 10, 11, 0) 100%);
	/* v1.9.15: backdrop-filter aus dem Uebergang genommen — es zu animieren
	   erzwingt waehrend der gesamten Dauer ein Neu-Weichzeichnen. */
	transition: background 0.3s, padding 0.3s;
}

nav.scrolled {
	/* v1.9.15: backdrop-filter: blur(20px) entfernt. Die Leiste ist
	   position:fixed — der Browser musste den Bereich dahinter bei JEDEM
	   Scroll-Frame neu weichzeichnen. Genau daher kam das Ruckeln ab etwa
	   50px Scrollhoehe, wo diese Klasse gesetzt wird.
	   Sichtbar verloren geht dabei fast nichts: Der Hintergrund war schon
	   zu 95% deckend, vom Weichzeichner war kaum etwas zu erkennen. Zum
	   Ausgleich jetzt 97%. */
	background: rgba(10, 10, 11, 0.97);
	padding: 12px 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 1.7rem;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--paper);
	text-transform: uppercase;
}

.logo-mark {
	width: 36px;
	height: 36px;
	position: relative;
}

.logo-mark svg {
	width: 100%;
	height: 100%;
}

/* v1.3.2: Nav — Big Shoulders Display als Echo der Hero-Typografie.
     Größer, sportlich-präzise, rhymt mit den Section-Headlines. */
.nav-links {
	display: flex;
	gap: 38px;
	list-style: none;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
}

.nav-links li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-links a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: rgba(245, 241, 234, 0.78);
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: 1.18rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	padding: 10px 0 12px;
	transition: color 0.22s ease, transform 0.22s ease;
}

.nav-links a::before {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 2px;
	height: 2px;
	background: var(--orange);
	transition: left 0.34s cubic-bezier(0.2, 0, 0.1, 1), right 0.34s cubic-bezier(0.2, 0, 0.1, 1);
	pointer-events: none;
}

.nav-links a:hover {
	color: var(--paper);
	transform: translateY(-1px);
}

.nav-links a:hover::before {
	left: 0;
	right: 0;
}

.nav-links a.active {
	color: var(--orange);
	font-weight: 800;
}

.nav-links a.active::before {
	left: 0;
	right: 0;
	height: 2.5px;
}

/* Auf gescrolltem Nav: kompakter, aber immer noch BS */
nav.scrolled .nav-links {
	gap: 32px;
}

nav.scrolled .nav-links a {
	font-size: 1.05rem;
	padding: 6px 0 8px;
}

nav.scrolled .nav-links a::before {
	bottom: 0;
}

@media (max-width: 1100px) {
	.nav-links {
		gap: 28px;
	}

	.nav-links a {
		font-size: 1.05rem;
	}
}

.nav-cta {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	align-items: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
	transition: transform 0.15s, background 0.2s, color 0.2s;
	border: 1.5px solid transparent;
	cursor: none;
	font-family: 'Familjen Grotesk', sans-serif;
	position: relative;
	overflow: hidden;
}

.btn-primary {
	background: var(--orange);
	color: var(--white);
}

.btn-primary:hover {
	background: var(--orange-deep);
}

/* .btn-ghost ist für DUNKLE Flächen: heller Text + heller Rahmen. */
.btn-ghost {
	background: transparent;
	color: var(--paper);
	border-color: rgba(255, 255, 255, 0.3);
}

.btn-ghost:hover {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}

/* v1.7.83: Pendant für HELLE Flächen (paper / paper-warm). Fehlte bisher —
   deshalb stand .btn-ghost mehrfach auf hellem Grund und war praktisch
   unsichtbar (heller Text auf hellem BG), was per Inline-Style bzw.
   Einzelfall-Klasse nachgepatcht wurde. Für neue Buttons auf hellem
   Hintergrund immer .btn-outline statt .btn-ghost verwenden. */
.btn-outline {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

.btn-outline:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

.btn-light {
	background: var(--paper);
	color: var(--ink);
}

.btn-light:hover {
	background: var(--orange);
	color: var(--white);
}

/* ============= HERO VIDEO ============= */
.hero {
	position: relative;
	height: 100vh;
	min-height: 720px;
	overflow: hidden;
	background: var(--ink);
}

.hero-video-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.hero-video {
	position: absolute;
	inset: -5%;
	width: 110%;
	height: 110%;
	object-fit: cover;
	filter: contrast(1.1) saturate(1.1) brightness(0.6);
	transition: transform 0.8s cubic-bezier(0.2, 0, 0.1, 1);
}

.hero-poster {
	position: absolute;
	inset: 0;
	/* v1.9.1: eigenes Standbild — hero-loader.jpg bleibt fuer die
	   Parallax-Hintergruende weiter unveraendert in Gebrauch. */
	background: url('img/hero-standbild.jpg') center/cover;
	filter: contrast(1.1) saturate(1.1) brightness(0.5);
	z-index: 0;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(10, 10, 11, 0.4) 0%, transparent 30%, rgba(10, 10, 11, 0.85) 100%),
		linear-gradient(90deg, rgba(10, 10, 11, 0.5) 0%, transparent 50%);
	z-index: 1;
}

.hero-noise {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	opacity: 0.06;
	pointer-events: none;
	z-index: 2;
	mix-blend-mode: overlay;
}

.hero-content {
	position: relative;
	z-index: 3;
	height: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: 80px;
}

.hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--paper);
	margin-bottom: 24px;
	opacity: 0;
	animation: fadeUp 0.8s cubic-bezier(0.2, 0, 0.1, 1) 1.2s forwards;
}

.hero-eyebrow .live-dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--orange);
}

/* v1.9.16: Der Ring lief vorher ueber eine box-shadow-Animation. box-shadow
   kann der Browser nicht auf der GPU zusammensetzen — er musste den Punkt
   also dauerhaft neu zeichnen, auch waehrend des Scrollens. Jetzt eine
   eigene Ebene, die nur skaliert und ausblendet; beides erledigt die GPU. */
.hero-eyebrow .live-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--orange-glow);
	animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {

	0%,
	100% {
		transform: scale(1);
		opacity: 0.9;
	}

	50% {
		/* 8px Punkt + 12px Rand ringsum = 32px, also Faktor 4 wie zuvor */
		transform: scale(4);
		opacity: 0;
	}
}

.hero-headline {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(4.5rem, 16vw, 17rem);
	line-height: 0.82;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--paper);
	margin-bottom: 32px;
	/* v1.7.29: overflow:hidden entfernt — vertikale Reveal-Animation
       wird auf .line begrenzt (mit overflow-clip-margin). Safari hatte
       hier ein Italic-Glyph-Clipping. */
	overflow: visible;
}

.hero-headline .line {
	display: block;
	/* v1.7.29: clip-path statt overflow:hidden → schneidet nur OBEN/UNTEN
       für die Translate-Animation ab, aber NICHT rechts. So bleibt das
       italic-Glyph "R" von YOUR sichtbar. */
	overflow: hidden;
	overflow-clip-margin: 0.15em;
	/* Reserve für italic-Slant am rechten Rand */
	padding-right: 0.2em;
}

.hero-headline .line span {
	display: inline-block;
	transform: translateY(105%);
	animation: lineUp 1s cubic-bezier(0.2, 0, 0.1, 1) forwards;
}

.hero-headline .line:nth-child(1) span {
	animation-delay: 0.5s;
}

.hero-headline .line:nth-child(2) span {
	animation-delay: 0.7s;
}

.hero-headline .line:nth-child(3) span {
	animation-delay: 0.9s;
}

@keyframes lineUp {
	to {
		transform: translateY(0);
	}
}

.hero-headline .accent {
	color: var(--orange);
}

.hero-headline .italic {
	font-style: italic;
	font-weight: 700;
	/* v1.7.8: Italic-Slant kompensieren — sonst wird das letzte
       Zeichen (z. B. das R von „your") bei overflow: hidden / engen
       Viewports rechts abgeschnitten.
       v1.7.29: padding erhöht von 0.1em auf 0.18em für Safari. */
	padding-right: 0.18em;
}

.hero-bottom {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: end;
	border-top: 1px solid rgba(245, 241, 234, 0.15);
	padding-top: 32px;
	opacity: 0;
	animation: fadeUp 0.8s cubic-bezier(0.2, 0, 0.1, 1) 1.4s forwards;
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-tagline {
	font-size: 1.05rem;
	color: var(--paper);
	line-height: 1.5;
	max-width: 360px;
}

.hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.hero-meta-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-end;
	text-align: right;
}

.hero-meta-num {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 3rem;
	line-height: 1;
	color: var(--orange);
}

.hero-meta-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: rgba(245, 241, 234, 0.7);
	text-transform: uppercase;
}

/* Sound toggle */
.sound-toggle {
	position: absolute;
	top: 50%;
	right: 32px;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(10, 10, 11, 0.5);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: none;
	transition: all 0.3s;
}

.sound-toggle:hover {
	background: var(--orange);
	border-color: var(--orange);
}

.sound-toggle svg {
	stroke: var(--paper);
}

/* Scroll indicator */
.scroll-indicator {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: rgba(245, 241, 234, 0.7);
	z-index: 4;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.65rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0;
	animation: fadeIn 1s ease 1.8s forwards;
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

.scroll-line {
	width: 1px;
	height: 40px;
	background: linear-gradient(180deg, var(--orange) 0%, transparent 100%);
	transform-origin: top;
	animation: scrollLine 1.6s ease-in-out infinite;
}

/* v1.9.16: transform-origin wurde mitanimiert (oben -> unten bei 51%).
   Damit kann die Animation nicht auf dem Compositor laufen und belegt den
   Hauptthread — dauerhaft, denn sie wiederholt sich endlos. Jetzt bleibt
   der Ursprung fest oben; das Einfahren von unten uebernimmt eine
   Verschiebung. Optisch identisch: Die Linie waechst von oben herein und
   zieht sich anschliessend nach unten zusammen. */
@keyframes scrollLine {
	0% {
		transform: translateY(0) scaleY(0);
	}

	50% {
		transform: translateY(0) scaleY(1);
	}

	100% {
		transform: translateY(100%) scaleY(0);
	}
}

/* Ticker side */
.hero-side {
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
	transform-origin: left center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.3em;
	color: rgba(245, 241, 234, 0.5);
	text-transform: uppercase;
	z-index: 4;
}

/* ============= REVEAL UTILITY ============= */
.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.9s cubic-bezier(0.2, 0, 0.1, 1), transform 0.9s cubic-bezier(0.2, 0, 0.1, 1);
}

.reveal.in {
	opacity: 1;
	transform: translateY(0);
}

.reveal.delay-1 {
	transition-delay: 0.1s;
}

.reveal.delay-2 {
	transition-delay: 0.2s;
}

.reveal.delay-3 {
	transition-delay: 0.3s;
}

/* ============= SECTIONS ============= */
section.s-light {
	background: var(--paper);
	color: var(--ink);
}

.container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 120px 40px;
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 60px;
	gap: 40px;
}

.section-eyebrow {
	color: var(--orange);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.section-eyebrow::before {
	content: '';
	width: 24px;
	height: 1px;
	background: var(--orange);
}

.section-head h2 {
	/* v1.7.5: vereinheitlicht & leicht verkleinert (vorher max 6rem) */
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.6rem, 5.8vw, 4.6rem);
	letter-spacing: -0.02em;
	line-height: 0.9;
	text-transform: uppercase;
}

.section-head h2 .accent {
	color: var(--orange);
}

.section-head h2 .italic {
	font-style: italic;
	font-weight: 600;
}

.section-head .link {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	border-bottom: 2px solid var(--orange);
	padding-bottom: 4px;
	white-space: nowrap;
	transition: color 0.2s;
}

.section-head .link:hover {
	color: var(--orange);
}

/* ============= BRAND MARQUEE ============= */
.brand-marquee {
	background: var(--paper);
	overflow: hidden;
	padding: 32px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.brand-track {
	display: flex;
	align-items: center;
	gap: 80px;
	white-space: nowrap;
	animation: scroll 40s linear infinite;
	width: max-content;
}

/* Kategorie-Label in der Marken-Leiste ([ Bikes ] / [ Zubehör ]) */
.brand-cat {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--orange);
	flex-shrink: 0;
}

.brand-item {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 2.4rem;
	letter-spacing: -0.02em;
	color: var(--ink);
	transition: color 0.2s, opacity 0.2s;
	opacity: 0.4;
	text-transform: uppercase;
}

.brand-item:hover {
	color: var(--orange);
	opacity: 1;
}

.brand-item .arrow {
	color: var(--orange);
	margin-left: 12px;
}

/* ============= CATEGORIES ============= */
.cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.cat-card {
	aspect-ratio: 3/4;
	background: var(--paper-warm);
	overflow: hidden;
	position: relative;
	cursor: none;
	transition: transform 0.5s cubic-bezier(0.2, 0, 0.1, 1);
}

.cat-card:hover {
	transform: translateY(-8px);
}

.cat-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.8s cubic-bezier(0.2, 0, 0.1, 1), filter 0.5s ease;
	filter: grayscale(0.4) contrast(1.1);
	display: block;
}

.cat-card:hover .cat-card-img {
	transform: scale(1.08);
	filter: grayscale(0) contrast(1.1) saturate(1.2);
}

.cat-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 11, 0.92) 100%);
}

.cat-card-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 28px;
	color: var(--paper);
	z-index: 2;
}

.cat-card-num {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	opacity: 0.6;
	margin-bottom: 8px;
	letter-spacing: 0.1em;
}

.cat-card-title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 2.2rem;
	line-height: 0.9;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.cat-card:hover .cat-card-title {
	color: var(--orange);
	transition: color 0.3s;
}

.cat-card-count {
	font-size: 0.82rem;
	opacity: 0.7;
}

.cat-card-arrow {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	background: var(--paper);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s, transform 0.4s cubic-bezier(0.2, 0, 0.1, 1);
	z-index: 2;
}

.cat-card:hover .cat-card-arrow {
	background: var(--orange);
	transform: rotate(-45deg) scale(1.1);
}

.cat-card:hover .cat-card-arrow svg {
	stroke: var(--paper);
}

/* "weiterlesen"-Affordance in den Kategorie-Cards (Fragebogen #5) */
.cat-card-more {
	display: inline-block;
	margin-top: 14px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--orange);
}

/* Horizontale 5. Kategorie-Card (Kinder) unter dem 4er-Grid */
.cat-card-wide {
	display: grid;
	grid-template-columns: 42% 1fr;
	align-items: stretch;
	margin-top: 16px;
	background: var(--paper-warm);
	overflow: hidden;
	position: relative;
	cursor: none;
	text-decoration: none;
	color: inherit;
	transition: transform 0.5s cubic-bezier(0.2, 0, 0.1, 1);
}

.cat-card-wide:hover {
	transform: translateY(-6px);
}

.cat-card-wide__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9; /* Bildfeld 16:9 — bessere Bildausschnitte (gibt der Card mehr Höhe) */
}

.cat-card-wide__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: grayscale(0.4) contrast(1.1);
	transition: transform 0.8s cubic-bezier(0.2, 0, 0.1, 1), filter 0.5s ease;
	display: block;
}

.cat-card-wide:hover .cat-card-wide__media img {
	transform: scale(1.06);
	filter: grayscale(0) contrast(1.1) saturate(1.2);
}

.cat-card-wide__body {
	padding: 32px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--ink);
}

.cat-card-wide__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 2.2rem;
	line-height: 0.9;
	text-transform: uppercase;
	margin: 6px 0 10px;
}

.cat-card-wide:hover .cat-card-wide__title {
	color: var(--orange);
	transition: color 0.3s;
}

.cat-card-wide__text {
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--ink);
	opacity: 0.8;
	max-width: 520px;
	margin: 0;
}

.cat-card-wide .cat-card-num {
	color: var(--ink);
	opacity: 0.5;
}

.cat-card-wide:hover .cat-card-arrow {
	background: var(--orange);
	transform: rotate(-45deg) scale(1.1);
}

.cat-card-wide:hover .cat-card-arrow svg {
	stroke: var(--paper);
}

@media (max-width: 700px) {
	.cat-card-wide {
		grid-template-columns: 1fr;
	}
	.cat-card-wide__media {
		aspect-ratio: 16 / 9;
	}
}

/* ============= SERVICE TICKER ============= */
.service-section {
	background: var(--ink);
	color: var(--paper);
	overflow: hidden;
	position: relative;
}

.service-ticker {
	padding: 40px 0;
	overflow: hidden;
	border-top: 1px solid rgba(245, 241, 234, 0.08);
	border-bottom: 1px solid rgba(245, 241, 234, 0.08);
}

.service-ticker-track {
	display: flex;
	gap: 60px;
	white-space: nowrap;
	animation: scroll 35s linear infinite reverse;
	width: max-content;
	align-items: center;
}

.service-ticker-item {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(3rem, 7vw, 6rem);
	letter-spacing: -0.02em;
	color: var(--paper);
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 60px;
}

.service-ticker-item.outline {
	/* v1.7.30d: Outline → gefüllt mit niedriger Opazität (wie BG-Labels) */
	color: rgba(245, 241, 234, 0.18);
	-webkit-text-stroke: 0;
}

.service-ticker-item .star {
	color: var(--orange);
	font-size: 0.7em;
}

/* SERVICE CARDS dark */
.service-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.service-card {
	background: var(--ink-soft);
	padding: 56px;
	position: relative;
	min-height: 480px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	border: 1px solid rgba(245, 241, 234, 0.08);
	transition: background 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
	cursor: none;
}

/* Hover: dezente Aufhellung statt voller Orange-Flip,
     damit die Card sich vom dunklen Hintergrund klar abhebt. */
.service-card:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(245, 241, 234, 0.18);
}

.service-card:hover .service-eyebrow::before {
	background: var(--orange);
}

.service-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--orange);
	color: var(--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32px;
	transition: background 0.3s;
}

/* .service-card:hover .service-icon — entfernt: Icon bleibt orange. */
.service-eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.92);
	font-weight: 600;
	margin-bottom: 22px;
	transition: color 0.3s;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.service-eyebrow::before {
	content: '';
	width: 24px;
	height: 2px;
	background: var(--orange);
	transition: background 0.3s;
}

/* .service-card:hover .service-eyebrow::before — bleibt orange (s.o.). */
.service-card h3 {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 2.8rem;
	line-height: 0.9;
	margin-bottom: 16px;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	transition: color 0.3s;
}

.service-card p {
	font-size: 1rem;
	color: rgba(245, 241, 234, 0.7);
	margin-bottom: 28px;
	max-width: 380px;
	transition: color 0.3s;
}

.service-list {
	list-style: none;
	margin-bottom: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.service-list li {
	background: rgba(245, 241, 234, 0.06);
	color: rgba(245, 241, 234, 0.9);
	padding: 7px 14px;
	border-radius: 4px;
	font-size: 0.82rem;
	font-weight: 500;
	transition: all 0.3s;
}

.service-bg-num {
	position: absolute;
	top: -40px;
	right: -10px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 18rem;
	line-height: 0.8;
	color: rgba(245, 241, 234, 0.04);
	pointer-events: none;
	transition: color 0.3s;
}

/* ============= PRODUCT GRID ============= */
.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.product-card {
	background: var(--paper);
	border: 1px solid var(--line);
	overflow: hidden;
	cursor: none;
	transition: transform 0.4s cubic-bezier(0.2, 0, 0.1, 1), box-shadow 0.4s;
	display: flex;
	flex-direction: column;
	position: relative;
}

.product-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px rgba(10, 10, 11, 0.15);
}

.product-image {
	aspect-ratio: 5/4;
	background: var(--paper-warm);
	position: relative;
	overflow: hidden;
}

.product-image-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.2, 0, 0.1, 1);
}

/* v1.7.8: <img>-Tag innerhalb von .product-image-bg (Fallback-Demo-Bilder)
     auf Card-Format zwingen — object-fit ist auf dem inneren <img>, nicht
     auf dem Wrapper-div nötig. */
.product-image-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.product-card:hover .product-image-bg {
	transform: scale(1.06);
}

.product-badges {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	gap: 6px;
	z-index: 2;
}

.badge-tag {
	background: var(--ink);
	color: var(--paper);
	padding: 6px 12px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.badge-tag.new {
	background: var(--orange);
}

.badge-tag.sale {
	background: #1a4d2e;
	color: var(--paper);
}

.product-quick {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--ink);
	color: var(--paper);
	padding: 14px;
	display: flex;
	justify-content: center;
	gap: 24px;
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.2, 0, 0.1, 1);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.product-card:hover .product-quick {
	transform: translateY(0);
}

.product-quick a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.product-quick a:hover {
	color: var(--orange);
}

.product-info {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.product-meta-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--muted);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

.product-rating {
	color: var(--orange);
}

.product-name {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 1.8rem;
	letter-spacing: -0.01em;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--ink);
}

.product-spec {
	font-size: 0.85rem;
	color: var(--muted);
}

.product-footer {
	margin-top: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	align-items: end;
}

.product-price-block .price-now {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 1.8rem;
	line-height: 1;
	color: var(--ink);
}

.product-price-block .price-leasing {
	font-size: 0.78rem;
	color: var(--orange);
	font-weight: 600;
	margin-top: 4px;
}

.product-cta {
	background: var(--ink);
	color: var(--paper);
	border: none;
	padding: 12px 18px;
	border-radius: 6px;
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: none;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background 0.2s, padding 0.3s;
}

.product-cta:hover {
	background: var(--orange);
	padding-right: 22px;
}

/* ============= FOOTER ============= */
footer {
	color: var(--paper);
	padding: 100px 40px 32px;
	border-top: 1px solid rgba(245, 241, 234, 0.08);
	position: relative;
	background: transparent;
}

.footer-inner {
	position: relative;
	z-index: 2;
}

/* ============= DARK ZONE: Contact + Footer mit gemeinsamem BG ============= */
.dark-zone {
	position: relative;
	background: var(--ink);
	overflow: hidden;
}

.dark-zone::before {
	/* Wald-BG verschoben in <img class="dark-zone-bg"> für Klartext-Tausch (v1.6.7) */
	display: none;
}

.dark-zone::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(10, 10, 11, 0.55) 0%, rgba(10, 10, 11, 0.25) 35%, rgba(10, 10, 11, 0.45) 65%, rgba(10, 10, 11, 0.85) 100%),
		radial-gradient(circle at 30% 30%, rgba(231, 124, 5, 0.1) 0%, transparent 50%);
	pointer-events: none;
	z-index: 1;
}

.dark-zone>* {
	position: relative;
	z-index: 2;
}

.footer-inner {
	max-width: 1600px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.footer-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 64px;
	padding-bottom: 60px;
	border-bottom: 1px solid rgba(245, 241, 234, 0.08);
}

.footer-cta h3 {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 3.2rem;
	line-height: 0.9;
	letter-spacing: -0.02em;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.footer-cta h3 .accent {
	color: var(--orange);
	font-style: italic;
	font-weight: 700;
}

.footer-cta p {
	color: rgba(245, 241, 234, 0.6);
	margin-bottom: 24px;
	max-width: 360px;
}

.newsletter {
	display: flex;
	background: rgba(245, 241, 234, 0.05);
	border: 1px solid rgba(245, 241, 234, 0.1);
	border-radius: 6px;
	padding: 4px 4px 4px 22px;
	max-width: 380px;
}

.newsletter input {
	flex: 1;
	background: transparent;
	border: none;
	color: var(--paper);
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.9rem;
	outline: none;
}

.newsletter input::placeholder {
	color: rgba(245, 241, 234, 0.4);
}

.newsletter button {
	background: var(--orange);
	color: var(--paper);
	border: none;
	padding: 11px 22px;
	border-radius: 4px;
	font-family: 'Familjen Grotesk', sans-serif;
	font-weight: 600;
	cursor: none;
	transition: background 0.2s;
}

.newsletter button:hover {
	background: var(--orange-deep);
}

.footer-col h4 {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 20px;
}

.footer-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-col li {
	color: var(--paper);
	font-size: 0.92rem;
	opacity: 0.65;
}

.footer-col a {
	color: var(--paper);
	text-decoration: none;
	font-size: 0.92rem;
	opacity: 0.65;
	transition: opacity 0.2s, color 0.2s;
}

.footer-col a:hover {
	opacity: 1;
	color: var(--orange);
}

.footer-bottom {
	margin-top: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.82rem;
	color: rgba(245, 241, 234, 0.5);
	flex-wrap: wrap;
	gap: 16px;
}

.footer-bottom-links {
	display: flex;
	gap: 20px;
}

.footer-bottom-links a {
	color: rgba(245, 241, 234, 0.7);
	text-decoration: none;
	transition: color 0.2s;
}

.footer-bottom-links a:hover {
	color: var(--orange);
}

.footer-mark {
	/* v1.7.30d: Outline → gefüllt mit niedriger Opazität */
	font-family: 'Cabin', sans-serif;
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.035em;
	margin: 60px 0 -20px;
	color: rgba(245, 241, 234, 0.06);
	-webkit-text-stroke: 0;
	text-transform: lowercase;
	white-space: nowrap;
	width: 100%;
	text-align: left;
	font-size: 18vw;
}


.logo-img {
	height: 72px;
	width: auto;
	display: block;
	transition: transform 0.3s ease, height 0.3s ease;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
}

.logo:hover .logo-img {
	transform: scale(1.04);
}

nav.scrolled .logo-img {
	height: 52px;
}

@media (max-width: 640px) {
	.logo-img {
		height: 48px;
	}

	nav.scrolled .logo-img {
		height: 38px;
	}
}


/* ============= CONTACT SECTION ============= */
.contact-section {
	background: transparent;
	color: var(--paper);
	padding: 120px 40px;
	position: relative;
}

.contact-inner {
	max-width: 1600px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 80px;
	align-items: start;
	position: relative;
}

.contact-left h2 {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(3rem, 6vw, 5.5rem);
	line-height: 0.9;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	margin-bottom: 28px;
}

.contact-left h2 .accent {
	color: var(--orange);
	font-style: italic;
	font-weight: 700;
}

.contact-left p {
	color: rgba(245, 241, 234, 0.7);
	margin-bottom: 40px;
	font-size: 1.04rem;
	line-height: 1.6;
	max-width: 460px;
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 40px;
}

.contact-info-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.contact-info-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(245, 241, 234, 0.06);
	border: 1px solid rgba(245, 241, 234, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--orange);
}

.contact-info-text {
	flex: 1;
}

.contact-info-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.65rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.5);
	margin-bottom: 4px;
}

.contact-info-value {
	font-size: 1rem;
	color: var(--paper);
	line-height: 1.4;
}

.contact-info-value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	transition: border-color 0.2s, color 0.2s;
}

.contact-info-value a:hover {
	color: var(--orange);
	border-color: var(--orange);
}

/* === FORM === */
.contact-form {
	background: rgba(245, 241, 234, 0.06);
	border: 1px solid rgba(245, 241, 234, 0.14);
	padding: 0;
	backdrop-filter: blur(20px);
	position: relative;
	overflow: hidden;
}

.contact-form::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--orange);
}

.contact-form-header {
	padding: 28px 40px 24px;
	border-bottom: 1px solid rgba(245, 241, 234, 0.08);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.contact-form-header-title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 1.6rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -0.015em;
}

.contact-form-header-time {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.6);
	display: flex;
	align-items: center;
	gap: 8px;
}

.contact-form-header-time::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #6bcb77;
	box-shadow: 0 0 8px #6bcb77;
}

.contact-form-body {
	padding: 32px 40px 36px;
}

.contact-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.contact-form-group {
	margin-bottom: 16px;
}

.contact-form label {
	display: block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.65rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.6);
	margin-bottom: 8px;
}

.contact-form label .req {
	color: var(--orange);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(245, 241, 234, 0.12);
	border-radius: 4px;
	padding: 12px 14px;
	color: var(--paper);
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.95rem;
	transition: border-color 0.2s, background 0.2s;
	outline: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	border-color: var(--orange);
	background: rgba(0, 0, 0, 0.5);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: rgba(245, 241, 234, 0.3);
}

.contact-form textarea {
	resize: vertical;
	min-height: 120px;
	font-family: 'Familjen Grotesk', sans-serif;
}

.contact-form select option {
	background: var(--ink);
	color: var(--paper);
}

/* Honeypot field — versteckt für echte User, sichtbar für Bots */
.hp-field {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.contact-form-captcha {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(245, 241, 234, 0.1);
	border-radius: 4px;
	margin-bottom: 16px;
}

.contact-form-captcha-q {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.85rem;
	color: rgba(245, 241, 234, 0.7);
	letter-spacing: 0.05em;
}

.contact-form-captcha input {
	width: 80px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(245, 241, 234, 0.15);
	border-radius: 3px;
	padding: 6px 10px;
	color: var(--paper);
	font-size: 0.9rem;
	text-align: center;
	font-family: 'JetBrains Mono', monospace;
}

.contact-form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 24px;
	font-size: 0.84rem;
	line-height: 1.5;
	color: rgba(245, 241, 234, 0.7);
}

.contact-form-checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: var(--orange);
	flex-shrink: 0;
}

.contact-form-checkbox a {
	color: var(--orange);
	text-decoration: underline;
	text-decoration-color: rgba(231, 124, 5, 0.4);
}

.contact-form-submit {
	width: 100%;
	background: var(--orange);
	color: white;
	border: none;
	padding: 16px;
	border-radius: 6px;
	font-family: 'Familjen Grotesk', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: none;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.contact-form-submit:hover {
	background: var(--orange-deep);
}

.contact-form-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.contact-form-status {
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 0.9rem;
	display: none;
}

.contact-form-status.show {
	display: block;
}

.contact-form-status.success {
	background: rgba(34, 139, 34, 0.15);
	color: #6bcb77;
	border: 1px solid rgba(34, 139, 34, 0.3);
}

.contact-form-status.error {
	background: rgba(220, 53, 69, 0.15);
	color: #ff8088;
	border: 1px solid rgba(220, 53, 69, 0.3);
}

.contact-form-meta {
	margin-top: 14px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.4);
	text-align: center;
}

.contact-form-meta::before {
	content: '🛡 ';
	color: var(--orange);
}

@media (max-width: 1100px) {
	.contact-inner {
		grid-template-columns: 1fr;
		gap: 60px;
	}

	.contact-section {
		padding: 80px 40px;
	}
}

@media (max-width: 640px) {
	.contact-section {
		padding: 60px 20px;
	}

	.contact-form-header {
		padding: 22px 24px 20px;
	}

	.contact-form-body {
		padding: 24px 24px 28px;
	}

	.contact-form-row {
		grid-template-columns: 1fr;
	}
}

/* ============= RADREISEN ============= */
.tour-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 16px;
	margin-top: 60px;
}

.tour-card {
	background: var(--paper);
	overflow: hidden;
	cursor: none;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	transition: transform 0.4s cubic-bezier(0.2, 0, 0.1, 1), box-shadow 0.4s;
	position: relative;
}

.tour-card.featured {
	grid-row: span 1;
}

.tour-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px rgba(10, 10, 11, 0.12);
}

.tour-card-img {
	aspect-ratio: 16/11;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
}

.tour-card.featured .tour-card-img {
	aspect-ratio: 16/13;
}

.tour-card-img-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.7s cubic-bezier(0.2, 0, 0.1, 1);
	display: block;
}

.tour-card:hover .tour-card-img-bg {
	transform: scale(1.06);
}

.tour-card-img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 11, 0.4) 0%, transparent 30%, rgba(10, 10, 11, 0.7) 100%);
	z-index: 1;
}

.tour-card-region {
	position: absolute;
	top: 18px;
	left: 18px;
	background: rgba(10, 10, 11, 0.7);
	backdrop-filter: blur(10px);
	color: var(--paper);
	padding: 7px 12px;
	border-radius: 4px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
}

.tour-card-flag {
	font-size: 1.1rem;
	line-height: 1;
}

.tour-card-overlay-title {
	position: absolute;
	bottom: 18px;
	left: 18px;
	right: 18px;
	z-index: 2;
	color: var(--paper);
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 2.4rem;
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: -0.02em;
}

.tour-card.featured .tour-card-overlay-title {
	font-size: 3.4rem;
}

.tour-card-content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.tour-card-meta {
	display: flex;
	gap: 14px;
	margin-bottom: 14px;
	color: var(--muted);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tour-card-meta span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.tour-card-meta span+span::before {
	content: '·';
	margin-right: 8px;
	opacity: 0.5;
}

.tour-card-desc {
	color: var(--ink);
	font-size: 0.95rem;
	line-height: 1.55;
	margin-bottom: 22px;
	opacity: 0.8;
	flex: 1;
}

.tour-card-foot {
	display: flex;
	justify-content: space-between;
	align-items: end;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.tour-card-price {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--ink);
}

.tour-card-price small {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--muted);
	margin-bottom: 4px;
	font-family: 'Familjen Grotesk', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.tour-card-cta {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
	border-bottom: 2px solid var(--orange);
	padding-bottom: 3px;
	transition: color 0.2s;
}

.tour-card:hover .tour-card-cta {
	color: var(--orange);
}

.reisewelt-partnership {
	margin-top: 60px;
	padding: 32px 40px;
	background: var(--ink);
	color: var(--paper);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.reisewelt-partnership-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.6);
}

.reisewelt-partnership-name {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 2.4rem;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1;
}

.reisewelt-partnership-name .accent {
	color: var(--orange);
}

.reisewelt-partnership-cta {
	font-size: 0.9rem;
	color: var(--paper);
	text-decoration: none;
	border-bottom: 2px solid var(--orange);
	padding-bottom: 3px;
	font-weight: 600;
}

/* ============= B2B LEASING ============= */
.b2b-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 60px;
}

.b2b-feature {
	background: var(--paper);
	padding: 40px 36px;
	border: 1px solid rgba(10, 10, 11, 0.1);
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
	transition: transform 0.3s, border-color 0.3s;
}

.b2b-feature:hover {
	transform: translateY(-4px);
	border-color: var(--orange);
}

.b2b-feature-num {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 4.5rem;
	line-height: 0.85;
	color: var(--orange);
	letter-spacing: -0.03em;
	margin-bottom: 12px;
}

.b2b-feature h3 {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 1.6rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -0.015em;
}

.b2b-feature p {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--ink);
	opacity: 0.75;
}

.leasing-partners {
	margin-top: 60px;
	padding: 32px 40px;
	background: var(--paper);
	border: 1px solid rgba(10, 10, 11, 0.1);
}

.leasing-partners-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 12px;
}

.leasing-partners-list {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: -0.015em;
}

.leasing-partners-list .sep {
	color: var(--orange);
	margin: 0 12px;
	font-weight: 400;
}

.leasing-partners-list .primary {
	color: var(--orange);
}

.b2b-cta {
	margin-top: 48px;
	text-align: center;
}

.b2b-cta .btn {
	font-size: 1rem;
	padding: 16px 32px;
}

@media (max-width: 1100px) {
	.tour-grid {
		grid-template-columns: 1fr 1fr;
	}

	.tour-card.featured {
		grid-column: 1 / -1;
	}

	.b2b-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.tour-grid {
		grid-template-columns: 1fr;
	}

	.tour-card.featured {
		grid-column: auto;
	}

	.reisewelt-partnership {
		padding: 24px;
		flex-direction: column;
		align-items: flex-start;
	}

	.leasing-partners {
		padding: 24px;
	}

	.leasing-partners-list {
		font-size: 1rem;
	}
}

/* ============= BRAND STORIES ============= */
.s-warm {
	background: var(--paper-warm);
	color: var(--ink);
}

.section-sub {
	color: var(--muted);
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 360px;
	margin-bottom: 8px;
}

.brand-stories {
	margin-top: 60px;
}

.brand-story {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	padding: 80px 0;
	border-top: 1px solid rgba(10, 10, 11, 0.12);
	position: relative;
}

.brand-story:first-child {
	border-top: 2px solid var(--ink);
}

.brand-story:last-child {
	border-bottom: 2px solid var(--ink);
}

.brand-story.reverse .brand-story-img {
	order: 2;
}

.brand-story-img {
	aspect-ratio: 4/3; /* Querformat: 4:3-Bike-Fotos passen ohne Anschnitt (Fragebogen #4) */
	align-self: start; /* niedrigeres Bild oben bündig zum Text statt vertikal zentriert */
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	transition: transform 0.6s cubic-bezier(0.2, 0, 0.1, 1);
}

.brand-story:hover .brand-story-img-bg {
	transform: scale(1.04);
}

.brand-story-img-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.8s cubic-bezier(0.2, 0, 0.1, 1);
	filter: contrast(1.05);
	display: block;
}

.brand-story-img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 11, 0.15) 0%, transparent 40%, rgba(10, 10, 11, 0.65) 100%);
	z-index: 1;
}

.brand-story-num {
	position: absolute;
	top: 24px;
	left: 24px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: 5rem;
	font-weight: 900;
	color: var(--paper);
	line-height: 0.85;
	letter-spacing: -0.04em;
	z-index: 2;
	mix-blend-mode: difference;
}

.brand-story-tag {
	position: absolute;
	bottom: 24px;
	left: 24px;
	background: var(--orange);
	color: var(--paper);
	padding: 8px 14px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	z-index: 2;
}

/* "Empfehlung von Kai"-Badge (Fragebogen #4, 05.1 = Ja) */
.brand-story-kai {
	position: absolute;
	top: 24px;
	right: 24px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--paper);
	color: var(--ink);
	padding: 8px 13px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(10, 10, 11, 0.18);
	z-index: 3;
}

.brand-story-kai svg {
	color: var(--orange);
	flex-shrink: 0;
}

/* Top-Modell (Fragebogen #4, Frage X.2) */
.brand-story-model {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: -14px 0 24px;
}

.brand-story-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 28px;
	color: var(--muted);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.brand-story-meta span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.brand-story-meta span::before {
	content: '◆';
	color: var(--orange);
	font-size: 0.6em;
}

.brand-story-name {
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: clamp(3rem, 6.5vw, 6rem);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.brand-story-tagline {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 500;
	color: var(--orange);
	margin-bottom: 28px;
	letter-spacing: -0.01em;
}

.brand-story-text {
	color: var(--ink);
	font-size: 1.04rem;
	line-height: 1.7;
	max-width: 520px;
	margin-bottom: 28px;
	opacity: 0.85;
}

.brand-story-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 36px;
}

.brand-story-facts .fact {
	background: rgba(10, 10, 11, 0.06);
	color: var(--ink);
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 0.84rem;
	font-weight: 500;
}

/* Technische Daten — on-site dargestellt (Fragebogen #4, kein Hersteller-Link) */
.brand-story-specs {
	margin: 0 0 36px;
	max-width: 520px;
	border-top: 1px solid rgba(10, 10, 11, 0.12);
}

.brand-story-specs .spec-row {
	display: grid;
	grid-template-columns: 38% 1fr;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid rgba(10, 10, 11, 0.1);
}

.brand-story-specs dt {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	padding-top: 2px;
}

.brand-story-specs dd {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.45;
	color: var(--ink);
	font-weight: 500;
}

@media (max-width: 560px) {
	.brand-story-specs .spec-row {
		grid-template-columns: 1fr;
		gap: 3px;
	}
}

@media (max-width: 1100px) {
	.brand-story {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 60px 0;
	}

	.brand-story.reverse .brand-story-img {
		order: 0;
	}

	.brand-story-img {
		aspect-ratio: 4/3;
	}
}

.footer-logo-top {
	height: 80px;
	width: auto;
	display: block;
	margin-bottom: 28px;
}

@media (max-width: 640px) {
	.footer-logo-top {
		height: 60px;
	}
}

/* ============= RESPONSIVE ============= */
@media (max-width: 1100px) {
	.nav-links {
		display: none;
	}

	.cat-grid,
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.service-grid {
		grid-template-columns: 1fr;
	}

	.footer-top {
		grid-template-columns: 1fr 1fr;
	}

	.hero-bottom {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.hero-meta-block {
		align-items: flex-start;
		text-align: left;
	}
}

@media (max-width: 640px) {
	nav {
		padding: 16px 20px;
		gap: 16px;
	}

	.container {
		padding: 80px 20px;
	}

	footer {
		padding: 80px 20px 24px;
	}

	.hero-content {
		padding: 0 24px 60px;
	}

	.hero-side {
		display: none;
	}

	.sound-toggle {
		right: 16px;
		width: 48px;
		height: 48px;
	}

	.cat-grid,
	.product-grid {
		grid-template-columns: 1fr;
	}

	.footer-top {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.service-card {
		padding: 36px;
	}

	.footer-mark {
		/* v1.9.8: war 32vw und damit rund 555px breit — der Footer bietet bei
		   390px Viewport aber nur 310px (2x40px Innenabstand) und schneidet mit
		   overflow:hidden ab. Gemessen: 18vw = 312px, 16vw = 277px. Zusammen mit
		   dem reduzierten Innenabstand unten passt es jetzt mit Reserve. */
		font-size: 18vw;
	}

	footer {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* v1.7.8: Header-CTA auf Mobile kompakter, max 2-zeilig. */
	.nav-cta .btn {
		padding: 10px 14px;
		font-size: 0.78rem;
		line-height: 1.25;
		gap: 6px;
		letter-spacing: 0.005em;
		text-align: left;
	}

	.nav-cta .btn svg {
		width: 11px;
		height: 11px;
		flex-shrink: 0;
	}
}

@media (max-width: 420px) {
	.nav-cta .btn svg {
		display: none;
	}

	.nav-cta .btn {
		padding: 10px 12px;
	}
}

/* ========================================================================
   v1.0.1 — Cursor-Override: kein Custom-Cursor, klassischer Browser-Pointer.
   Überschreibt die `cursor: none`-Regeln aus dem v13-Mockup gezielt.
   ======================================================================== */

.cursor,
.cursor-ring {
	display: none !important;
}

html,
body {
	cursor: auto !important;
}

a,
button,
[data-hover],
label,
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
select,
.btn,
.btn-cta,
.nav-cta,
.btn-light,
.btn-ghost,
.btn-primary,
.product-cta,
.product-quick a,
.service-card,
.brand-story-img,
.cat-card,
.tour-card,
.vc-booking__btn,
.vc-booking__cal-day,
.vc-booking__slot,
.vc-booking__type,
.vc-booking__radio,
.vc-booking__step {
	cursor: pointer !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
[contenteditable="true"] {
	cursor: text !important;
}

input:disabled,
button:disabled,
.is-disabled,
[disabled] {
	cursor: not-allowed !important;
}

/* ========================================================================
   v1.1.0 — Lesbare Typografie für Sub-Pages (Impressum, Datenschutz, AGB).
   Alles unter .vc-page__content gescoped.
   ======================================================================== */

.vc-page__content {
	max-width: 760px;
	color: rgba(245, 241, 234, 0.92);
	font-family: 'Familjen Grotesk', system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.65;
}

.vc-page__content p {
	margin: 0 0 1.1em;
	color: rgba(245, 241, 234, 0.84);
}

.vc-page__content h2 {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: clamp(1.4rem, 2.2vw, 1.85rem);
	line-height: 1.05;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--paper);
	margin: 2.4em 0 0.6em;
	padding-top: 1em;
	border-top: 1px solid rgba(245, 241, 234, 0.12);
}

.vc-page__content h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.vc-page__content h3 {
	font-family: 'Familjen Grotesk', sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--paper);
	margin: 1.6em 0 0.5em;
}

.vc-page__content ul,
.vc-page__content ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.vc-page__content li {
	margin-bottom: 0.4em;
	color: rgba(245, 241, 234, 0.84);
}

.vc-page__content li::marker {
	color: var(--orange);
}

.vc-page__content a {
	color: var(--orange);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.vc-page__content a:hover {
	color: var(--paper);
}

.vc-page__content em {
	color: rgba(245, 241, 234, 0.65);
	font-style: italic;
}

.vc-page__content strong {
	color: var(--paper);
}

/* Hinweis-Boxen für „Vorlage prüfen lassen"-Texte (em am Anfang) */
.vc-page__content>p:first-child em {
	display: block;
	background: rgba(231, 124, 5, 0.08);
	border-left: 3px solid var(--orange);
	padding: 12px 16px;
	font-size: 0.9rem;
	color: rgba(245, 241, 234, 0.78);
	font-style: normal;
}

/* Mobile: Container-Padding */
@media (max-width: 700px) {
	.vc-page__content {
		font-size: 0.95rem;
	}

	.vc-page__content h2 {
		font-size: 1.4rem;
	}
}

/* ========================================================================
   v1.3.0 — Smooth-Scroll für Anker-Sprünge + Section-Padding für #service.
   ======================================================================== */

html {
	scroll-behavior: smooth;
}

/* Section-Anker: Nav-Höhe einplanen, damit der Headline nicht hinter der
   fixed Nav verschwindet. Nav ist gescrollt ca. 60–80 px hoch. */
section[id] {
	scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ========================================================================
   v1.3.1 — Page-Template-Klassen statt Inline-Styles, Back-Button prominent.
   ======================================================================== */

.vc-page {
	background: var(--ink);
	min-height: 100vh;
	padding: 140px 0 80px;
}

.vc-page__container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.vc-page__header {
	margin-bottom: 48px;
}

/* Zur-Startseite-Button: orangener Ghost mit Hover-Fill */
.vc-page__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px 11px 16px;
	border: 1.5px solid var(--orange);
	border-radius: 4px;
	color: var(--orange);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	background: transparent;
	transition: background 0.22s ease, color 0.22s ease, transform 0.18s ease, border-color 0.22s ease;
}

.vc-page__back:hover,
.vc-page__back:focus-visible {
	background: var(--orange);
	color: var(--paper);
	border-color: var(--orange);
	transform: translateX(-3px);
}

.vc-page__back-arrow {
	flex-shrink: 0;
	transition: transform 0.18s ease;
}

.vc-page__back:hover .vc-page__back-arrow {
	transform: translateX(-2px);
}

/* Page-Headline */
.vc-page__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.4rem, 5vw, 4rem);
	line-height: 0.9;
	color: var(--paper);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 28px 0 0;
}

@media (max-width: 600px) {
	.vc-page {
		padding: 110px 0 60px;
	}

	.vc-page__back {
		padding: 9px 16px 9px 14px;
		font-size: 0.72rem;
	}
}

/* ========================================================================
   v1.3.4 — Back-to-Top-Button unten links.
   Erscheint nach ~500 px Scroll, smooth-scroll zum Anfang.
   ======================================================================== */

.vc-totop {
	position: fixed;
	bottom: 28px;
	left: 28px;
	z-index: 90;
	width: 52px;
	height: 52px;
	background: var(--orange);
	color: #fff;
	border: 0;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.25s ease, background 0.2s ease;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(231, 124, 5, 0.25);
	font-family: inherit;
	padding: 0;
}

.vc-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.vc-totop:hover {
	background: var(--orange-deep);
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32), 0 4px 10px rgba(231, 124, 5, 0.35);
}

.vc-totop:focus-visible {
	outline: 2px solid var(--paper);
	outline-offset: 3px;
}

.vc-totop svg {
	display: block;
	transition: transform 0.2s ease;
}

.vc-totop:hover svg {
	transform: translateY(-2px);
}

@media (max-width: 600px) {
	.vc-totop {
		width: 44px;
		height: 44px;
		bottom: 18px;
		left: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vc-totop {
		transition: opacity 0.2s, visibility 0.2s !important;
		transform: none !important;
	}
}

/* ========================================================================
   v1.4.0 — Leasing-Page Spezifika.
   Lead-Paragraph, Partner-Block, Callout, PDF-Download, CTA-Button.
   ======================================================================== */

/* Lead-Paragraph: groß, italic, Akzent */
.vc-page__content .vc-leasing-lead {
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: clamp(1.4rem, 2.4vw, 1.95rem);
	line-height: 1.15;
	font-weight: 700;
	font-style: italic;
	color: var(--orange);
	letter-spacing: 0;
	text-transform: none;
	margin: -8px 0 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(245, 241, 234, 0.15);
}

.vc-page__content .vc-leasing-lead em {
	font-style: italic;
	color: var(--orange);
	background: none;
	border: 0;
	padding: 0;
	display: inline;
	font-size: inherit;
}

/* Partner-Block: velolease-Logo + Tagline, prominent */
.vc-leasing-partner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 28px 0 16px;
	padding: 36px 24px;
	background: rgba(245, 241, 234, 0.04);
	border: 1px solid rgba(245, 241, 234, 0.1);
	border-radius: 6px;
}

.vc-leasing-partner-logo {
	max-width: 260px;
	width: 100%;
	height: auto;
	display: block;
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

.vc-leasing-partner-tagline {
	margin: 0;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--paper);
	text-align: center;
}

/* Callout: orange Card mit zentralem CTA */
.vc-leasing-callout {
	margin: 36px 0 32px;
	padding: 36px 32px;
	background: rgba(231, 124, 5, 0.08);
	border: 1.5px solid var(--orange);
	border-radius: 6px;
	text-align: center;
}

.vc-leasing-callout-title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: clamp(1.25rem, 2vw, 1.65rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 14px;
}

.vc-leasing-callout-text {
	color: rgba(245, 241, 234, 0.92) !important;
	margin: 0 0 22px !important;
	max-width: 580px;
	margin-left: auto !important;
	margin-right: auto !important;
}

a.vc-leasing-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	background: var(--orange);
	color: var(--paper);
	border: 0;
	border-radius: 4px;
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.98rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: background 0.2s, transform 0.18s, box-shadow 0.2s;
	box-shadow: 0 6px 18px rgba(231, 124, 5, 0.28);
}

a.vc-leasing-cta:hover {
	background: var(--orange-deep);
	color: var(--paper) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(231, 124, 5, 0.35);
}

/* PDF-Download: prominenter Button mit Icon und Meta */
a.vc-leasing-pdf {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 24px 0 8px;
	padding: 16px 22px;
	background: rgba(245, 241, 234, 0.04);
	border: 1px solid var(--orange);
	border-radius: 4px;
	color: var(--paper);
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.95rem;
	text-decoration: none !important;
	transition: background 0.2s, border-color 0.2s, transform 0.18s;
}

a.vc-leasing-pdf:hover {
	background: var(--orange);
	color: var(--paper) !important;
	transform: translateY(-1px);
}

a.vc-leasing-pdf svg {
	flex-shrink: 0;
	color: var(--orange);
	transition: color 0.2s;
}

a.vc-leasing-pdf:hover svg {
	color: var(--paper);
}

.vc-leasing-pdf-meta {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
	margin-top: 2px;
}

/* Mobile-Anpassungen */
@media (max-width: 600px) {
	.vc-leasing-callout {
		padding: 24px 18px;
	}

	.vc-leasing-partner {
		padding: 24px 16px;
	}

	.vc-leasing-partner-logo {
		max-width: 200px;
	}

	a.vc-leasing-pdf {
		padding: 14px 16px;
		gap: 12px;
	}
}

/* ========================================================================
   v1.4.1 — Leasing-Partner-Grid (12 Cards) + Print-CSS für Flyer-Druck.
   ======================================================================== */

.vc-leasing-partners-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 28px 0 36px;
}

.vc-leasing-partner-card {
	position: relative;
	background: var(--paper);
	border: 1px solid rgba(245, 241, 234, 0.1);
	border-radius: 4px;
	padding: 22px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 110px;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.vc-leasing-partner-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.vc-leasing-partner-card img {
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Text-Platzhalter für Partner ohne Logo */
.vc-leasing-partner-card--text .vc-leasing-partner-name {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	color: var(--ink);
	text-align: center;
	line-height: 1.15;
	text-transform: none;
}

.vc-leasing-partner-card--text {
	background: var(--paper-warm);
}

.vc-leasing-partner-card--text::before {
	content: "";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(10, 10, 11, 0.18);
}

/* Hauspartner: orangefarbene Hervorhebung */
.vc-leasing-partner-card--featured {
	border: 2px solid var(--orange);
	box-shadow: 0 6px 20px rgba(231, 124, 5, 0.18);
}

.vc-leasing-partner-card--featured:hover {
	box-shadow: 0 10px 26px rgba(231, 124, 5, 0.28);
}

.vc-leasing-partner-badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--orange);
	color: var(--paper);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 3px;
	white-space: nowrap;
}

/* Mobile-Anpassungen */
@media (max-width: 900px) {
	.vc-leasing-partners-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.vc-leasing-partners-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.vc-leasing-partner-card {
		min-height: 90px;
		padding: 16px 10px;
	}

	.vc-leasing-partner-card img {
		max-height: 44px;
	}

	.vc-leasing-partner-card--text .vc-leasing-partner-name {
		font-size: 0.95rem;
	}
}

/* ========================================================================
   PRINT-CSS — Wer die Leasing-Page druckt oder als PDF speichert,
   bekommt einen sauberen Flyer im velocultour-Look.
   ======================================================================== */

@media print {
	@page {
		size: A4;
		margin: 18mm 16mm;
	}

	html,
	body {
		background: #fff !important;
		color: #111 !important;
		font-size: 10.5pt;
		line-height: 1.42;
	}

	/* Theme-Chrome ausblenden */
	nav,
	footer,
	.marquee,
	.loader,
	.cursor,
	.cursor-ring,
	.vc-totop,
	.vc-page__back,
	.brand-strip,
	.service-ticker,
	.service-section,
	.section-eyebrow {
		display: none !important;
	}

	.vc-page,
	.vc-page__container,
	.vc-page__article,
	.vc-page__content {
		background: #fff !important;
		color: #111 !important;
		padding: 0 !important;
		margin: 0 !important;
		max-width: 100% !important;
	}

	.vc-page__title {
		color: #111 !important;
		font-size: 26pt !important;
		line-height: 1 !important;
		margin: 0 0 6mm 0 !important;
		page-break-after: avoid;
	}

	.vc-page__content h2 {
		color: #111 !important;
		font-size: 14pt !important;
		margin: 8mm 0 3mm !important;
		padding: 3mm 0 0 !important;
		border-top: 0.5pt solid #ccc !important;
		page-break-after: avoid;
	}

	.vc-page__content h3 {
		color: #111 !important;
		font-size: 12pt !important;
		margin: 5mm 0 2mm !important;
	}

	.vc-page__content p,
	.vc-page__content li {
		color: #222 !important;
	}

	.vc-page__content a {
		color: #111 !important;
		text-decoration: underline;
	}

	.vc-page__content ul,
	.vc-page__content ol {
		page-break-inside: avoid;
	}

	/* Lead-Paragraph: dezent in print */
	.vc-page__content .vc-leasing-lead {
		color: #C66700 !important;
		border-bottom: 0.5pt solid #ccc !important;
		font-size: 14pt !important;
		padding-bottom: 4mm !important;
	}

	/* Partner-Block */
	.vc-leasing-partner {
		background: #f5f1ea !important;
		border: 0.5pt solid #ddd !important;
		padding: 6mm !important;
		page-break-inside: avoid;
	}

	.vc-leasing-partner-logo {
		filter: none !important;
		opacity: 1 !important;
		max-width: 50mm !important;
	}

	.vc-leasing-partner-tagline {
		color: #111 !important;
	}

	/* Partner-Grid */
	.vc-leasing-partners-grid {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 4mm !important;
		page-break-inside: avoid;
	}

	.vc-leasing-partner-card {
		background: #fff !important;
		border: 0.5pt solid #ccc !important;
		min-height: 22mm !important;
		padding: 4mm !important;
		box-shadow: none !important;
	}

	.vc-leasing-partner-card--featured {
		border: 1pt solid #C66700 !important;
		box-shadow: none !important;
	}

	.vc-leasing-partner-card--text {
		background: #fafafa !important;
	}

	.vc-leasing-partner-card--text .vc-leasing-partner-name {
		color: #111 !important;
		font-size: 9pt !important;
	}

	.vc-leasing-partner-badge {
		background: #C66700 !important;
		color: #fff !important;
	}

	/* Callout */
	.vc-leasing-callout {
		background: #fff5e8 !important;
		border: 1pt solid #C66700 !important;
		padding: 6mm !important;
		page-break-inside: avoid;
	}

	.vc-leasing-callout-title {
		color: #C66700 !important;
	}

	.vc-leasing-callout-text {
		color: #222 !important;
	}

	a.vc-leasing-cta {
		background: #C66700 !important;
		color: #fff !important;
		box-shadow: none !important;
		display: inline-block !important;
	}

	/* PDF-Download-Button: in der Print-Version irrelevant — ausblenden */
	a.vc-leasing-pdf {
		display: none !important;
	}

	/* Standardmäßiger Print-Footer mit URL der Page */
	.vc-page__article::after {
		content: "velocultour.de/leasing  ·  Stand: " attr(data-print-date);
		display: block;
		margin-top: 8mm;
		padding-top: 3mm;
		border-top: 0.5pt solid #ccc;
		font-size: 8pt;
		color: #666;
		text-align: center;
	}

	/* Links: URLs in Klammern hinter dem Linktext anzeigen — nur bei externen Links */
	.vc-page__content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 8pt;
		color: #666;
	}
}

.footer-bottom-left {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.footer-bottom-text {
	font-size: inherit;
	color: inherit;
}

@media (max-width: 600px) {
	.footer-bottom-left {
		gap: 12px;
	}
}

/* ========================================================================
   v1.5.0 — Bike-Showcase: /angebote/-Archive + /angebote/{slug}/-Single.
   ======================================================================== */

/* ============= BIKE-ARCHIVE-PAGE ============= */
.vc-bikes-archive .vc-page__header {
	margin-bottom: 56px;
}

.vc-page__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 6px 0 12px;
}

.vc-page__subtitle {
	font-size: 1.05rem;
	color: rgba(245, 241, 234, 0.75);
	max-width: 640px;
	margin: 18px 0 0;
	line-height: 1.55;
}

/* ============= BIKE-GRID ============= */
.vc-bike-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0 0 48px;
}

@media (max-width: 960px) {
	.vc-bike-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.vc-bike-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

.vc-bike-card {
	position: relative;
	background: var(--ink-soft);
	border: 1px solid rgba(245, 241, 234, 0.08);
	border-radius: 6px;
	overflow: hidden;
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.vc-bike-card:hover {
	transform: translateY(-3px);
	border-color: rgba(231, 124, 5, 0.4);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

.vc-bike-card__link {
	display: block;
	color: var(--paper);
	text-decoration: none;
}

.vc-bike-card__link:hover {
	color: var(--paper);
}

.vc-bike-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--ink);
	overflow: hidden;
}

.vc-bike-card__image img,
.vc-bike-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.vc-bike-card:hover .vc-bike-card__img {
	transform: scale(1.04);
}

.vc-bike-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--ink-soft) 0%, var(--ink) 100%);
	color: rgba(245, 241, 234, 0.18);
}

.vc-bike-card__status {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 5px 10px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.85);
	color: var(--paper);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
}

.vc-bike-card--reserviert .vc-bike-card__status {
	background: #b06a00;
	color: #fff;
}

.vc-bike-card--verkauft .vc-bike-card__status {
	background: #555;
	color: #fff;
}

.vc-bike-card--verkauft .vc-bike-card__img {
	opacity: 0.55;
	filter: grayscale(0.5);
}

.vc-bike-card__featured {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--orange);
	color: var(--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
	box-shadow: 0 4px 14px rgba(231, 124, 5, 0.4);
}

.vc-bike-card__body {
	padding: 22px 22px 24px;
}

.vc-bike-card__meta-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.55);
}

.vc-bike-card__brand {
	color: var(--orange);
	font-weight: 600;
}

.vc-bike-card__rating {
	color: rgba(245, 241, 234, 0.65);
}

.vc-bike-card__name {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.05;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--paper);
	margin: 0 0 6px;
}

.vc-bike-card__tagline {
	font-size: 0.88rem;
	color: rgba(245, 241, 234, 0.62);
	margin: 0 0 16px;
	line-height: 1.4;
}

.vc-bike-card__footer {
	margin: 18px 0 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(245, 241, 234, 0.08);
}

.vc-bike-card__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.vc-bike-card__price-label {
	font-size: 0.78rem;
	color: rgba(245, 241, 234, 0.55);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vc-bike-card__price-value {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--paper);
}

.vc-bike-card__leasing {
	font-size: 0.78rem;
	color: rgba(245, 241, 234, 0.5);
	margin-top: 4px;
}

.vc-bike-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--orange);
	font-weight: 600;
	transition: gap 0.2s ease;
}

.vc-bike-card:hover .vc-bike-card__cta {
	gap: 10px;
}

/* ============= ARCHIVE-FOOTER ============= */
.vc-bikes-archive__footer {
	margin: 40px 0 0;
	padding: 36px 32px;
	background: rgba(231, 124, 5, 0.06);
	border: 1px solid rgba(231, 124, 5, 0.3);
	border-radius: 6px;
	text-align: center;
}

.vc-bikes-archive__footer p {
	color: rgba(245, 241, 234, 0.85) !important;
	margin: 0 0 18px !important;
}

.vc-bikes-archive__empty {
	padding: 80px 20px;
	text-align: center;
	color: rgba(245, 241, 234, 0.6);
}

/* ============= BIKE-SINGLE ============= */
.vc-bike-single__container {
	max-width: 1280px;
}

.vc-bike-single__header {
	margin-bottom: 32px;
}

.vc-bike-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

@media (max-width: 960px) {
	.vc-bike-single__layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

/* Linke Spalte: Visual */
.vc-bike-single__image {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--ink-soft);
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid rgba(245, 241, 234, 0.08);
}

.vc-bike-single__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vc-bike-single__status {
	position: absolute;
	top: 18px;
	left: 18px;
	padding: 7px 14px;
	background: rgba(0, 0, 0, 0.85);
	color: var(--paper);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 3px;
}

.vc-bike-single__status--reserviert {
	background: #b06a00;
}

.vc-bike-single__status--verkauft {
	background: #555;
}

.vc-bike-single__description {
	margin-top: 28px;
	color: rgba(245, 241, 234, 0.82);
	line-height: 1.65;
}

.vc-bike-single__description p {
	margin: 0 0 1em;
	color: inherit;
}

/* Rechte Spalte: Info */
.vc-bike-single__meta-top {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.6);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.vc-bike-single__brand {
	color: var(--orange);
	font-weight: 700;
}

.vc-bike-single__rating {
	margin-left: auto;
	color: rgba(245, 241, 234, 0.7);
}

.vc-bike-single__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 0.95;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--paper);
	margin: 0 0 12px;
}

.vc-bike-single__tagline {
	font-size: 1.05rem;
	color: rgba(245, 241, 234, 0.7) !important;
	margin: 0 0 28px !important;
}

.vc-bike-single__price-block {
	margin: 0 0 28px;
	padding: 22px 24px;
	background: rgba(245, 241, 234, 0.04);
	border-left: 3px solid var(--orange);
	border-radius: 0 4px 4px 0;
}

.vc-bike-single__price-label {
	display: inline-block;
	margin-right: 6px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.55);
	vertical-align: middle;
}

.vc-bike-single__price-value {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 2.2rem;
	color: var(--paper);
	letter-spacing: -0.005em;
}

.vc-bike-single__leasing {
	margin-top: 10px;
	font-size: 0.85rem;
	color: rgba(245, 241, 234, 0.65) !important;
}

.vc-bike-single__leasing a {
	color: var(--orange);
}

.vc-bike-single__section-title {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(245, 241, 234, 0.1);
}

.vc-bike-single__highlights {
	margin: 0 0 28px;
}

.vc-bike-single__highlights ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vc-bike-single__highlights li {
	padding: 8px 0 8px 24px;
	position: relative;
	color: rgba(245, 241, 234, 0.85);
	border-bottom: 1px solid rgba(245, 241, 234, 0.06);
}

.vc-bike-single__highlights li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--orange);
	font-weight: 700;
}

.vc-bike-single__cta-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 32px;
}

.vc-bike-single__cta-block .btn {
	justify-content: center;
}

.vc-bike-single__specs dl {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 10px 18px;
	margin: 0;
}

.vc-bike-single__specs dt {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.55);
	padding: 6px 0;
}

.vc-bike-single__specs dd {
	margin: 0;
	padding: 6px 0;
	color: rgba(245, 241, 234, 0.92);
	border-bottom: 1px solid rgba(245, 241, 234, 0.06);
}

.vc-bike-single__specs dt {
	border-bottom: 1px solid rgba(245, 241, 234, 0.06);
}

/* Print für Bike-Single */
@media print {
	.vc-bike-single__layout {
		grid-template-columns: 1fr 1fr;
	}

	.vc-bike-single,
	.vc-bike-single * {
		color: #111 !important;
		background: transparent !important;
	}

	.vc-bike-single__image {
		border: 0.5pt solid #ccc !important;
	}

	.vc-bike-single__price-block {
		background: #fff5e8 !important;
		border-left: 2pt solid #C66700 !important;
	}

	.vc-bike-single__cta-block {
		display: none !important;
	}
}

/* ========================================================================
   v1.5.1 — Topic-Pre-Select-Highlight im Kontaktformular.
   Wenn das Thema via ?topic=… vorausgefüllt wurde, kurz orange aufblitzen.
   ======================================================================== */

@keyframes vcCfTopicGlow {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(231, 124, 5, 0);
	}

	30% {
		box-shadow: 0 0 0 4px rgba(231, 124, 5, 0.45);
	}
}

#cf-topic.cf-topic-prefilled {
	animation: vcCfTopicGlow 2.2s ease;
	border-color: var(--orange) !important;
}

/* ========================================================================
   v1.5.2 — Angebote-CTA-Banner direkt nach dem Brand-Strip.
   Cream-BG mit oranger Border-Accent, Editorial-Look.
   ======================================================================== */

.angebote-banner {
	background: var(--paper);
	border-top: 1px solid rgba(10, 10, 11, 0.06);
	border-bottom: 1px solid rgba(10, 10, 11, 0.06);
	padding: 72px 0;
	position: relative;
}

/* Subtiler Orange-Akzent links als Editorial-Touch */
.angebote-banner::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--orange);
	opacity: 0.7;
}

.angebote-banner__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.angebote-banner__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 14px;
}

.angebote-banner__title {
	/* v1.7.5: vereinheitlicht auf .section-head h2 (vorher max 3.4rem) */
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.6rem, 5.8vw, 4.6rem);
	line-height: 0.9;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 18px;
}

.angebote-banner__title .italic {
	font-style: italic;
	font-weight: 600;
	/* v1.7.7: einheitlich mit .section-head h2 .italic */
}

.angebote-banner__title .accent {
	color: var(--orange);
}

.angebote-banner__sub {
	font-size: 1.05rem;
	line-height: 1.55;
	color: rgba(10, 10, 11, 0.7);
	margin: 0;
	max-width: 480px;
}

.angebote-banner__actions {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}

.angebote-banner__cta {
	font-size: 1rem;
	padding: 15px 28px;
}

/* Live-Counter daneben */
.angebote-banner__meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-left: 4px;
}

.angebote-banner__meta-num {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--orange);
	font-variant-numeric: tabular-nums;
}

.angebote-banner__meta-label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(10, 10, 11, 0.6);
}

/* Mobile */
@media (max-width: 900px) {
	.angebote-banner {
		padding: 56px 0;
	}

	.angebote-banner__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.angebote-banner__sub {
		max-width: 100%;
	}
}

/* ========================================================================
   v1.6.0 — CO2-Rechner: Page-Calculator + Homepage-Teaser-Card.
   Grüner Akzent (eco) parallel zum bestehenden Orange-System.
   ======================================================================== */

:root {
	--eco: #2E8B57;
	--eco-deep: #246E45;
	--eco-soft: rgba(46, 139, 87, 0.12);
}

/* Marquee-Link klickbar machen */
.marquee a.marquee-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.marquee a.marquee-link:hover {
	text-decoration-thickness: 2px;
}

/* ============= HOMEPAGE-TEASER-CARD ============= */
.co2-teaser {
	background: var(--paper);
	padding: 40px 0;
	border-top: 1px solid rgba(10, 10, 11, 0.06);
	border-bottom: 1px solid rgba(10, 10, 11, 0.06);
}

.co2-teaser__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 32px;
	background: linear-gradient(135deg, var(--eco) 0%, var(--eco-deep) 100%);
	color: var(--paper);
	padding: 28px 32px;
	border-radius: 6px;
	text-decoration: none !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	box-shadow: 0 12px 32px rgba(46, 139, 87, 0.22);
}

.co2-teaser__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 42px rgba(46, 139, 87, 0.32);
}

.co2-teaser__icon {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	border: 2px solid rgba(255, 255, 255, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.co2-teaser__icon-text {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 1.5rem;
	color: var(--paper);
	letter-spacing: -0.01em;
}

.co2-teaser__icon-text sub {
	font-size: 0.85em;
	vertical-align: baseline;
}

.co2-teaser__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 6px;
}

.co2-teaser__headline {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: clamp(1.3rem, 2.4vw, 1.85rem);
	line-height: 1.05;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.co2-teaser__headline strong {
	color: var(--paper);
}

.co2-teaser__sub {
	font-size: 0.95rem;
	line-height: 1.45;
	opacity: 0.92;
}

.co2-teaser__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	background: var(--paper);
	color: var(--eco-deep);
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	border-radius: 4px;
	white-space: nowrap;
	flex-shrink: 0;
	transition: gap 0.2s ease;
}

.co2-teaser__card:hover .co2-teaser__cta {
	gap: 12px;
}

@media (max-width: 800px) {
	.co2-teaser__card {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 28px 22px;
		gap: 18px;
	}

	.co2-teaser__icon {
		margin: 0 auto;
	}

	.co2-teaser__cta {
		justify-content: center;
	}
}

/* ============= CO2-RECHNER (Page-Widget) ============= */
.vc-co2-rechner {
	margin: 32px 0 24px;
	background: var(--ink-soft);
	border: 1px solid rgba(245, 241, 234, 0.1);
	border-radius: 6px;
	padding: 36px;
}

.vc-co2-controls {
	margin-bottom: 28px;
}

.vc-co2-vs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(245, 241, 234, 0.1);
}

.vc-co2-vs__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.vc-co2-vs__item--auto {
	color: #d65a5a;
}

.vc-co2-vs__item--bike {
	color: var(--eco);
}

.vc-co2-vs__item span {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.85);
}

.vc-co2-vs__sep {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 1.6rem;
	color: var(--orange);
	font-style: italic;
}

.vc-co2-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-bottom: 22px;
}

.vc-co2-row--types {
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 700px) {

	.vc-co2-row,
	.vc-co2-row--types {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

.vc-co2-field label {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.7);
	margin-bottom: 10px;
}

.vc-co2-field label strong {
	color: var(--orange);
	font-weight: 700;
	margin-left: 4px;
}

.vc-co2-field input[type="range"] {
	width: 100%;
	accent-color: var(--orange);
	cursor: pointer;
}

.vc-co2-types {
	border: 1px solid rgba(245, 241, 234, 0.1);
	border-radius: 4px;
	padding: 16px 18px;
	margin: 0;
	background: rgba(245, 241, 234, 0.03);
}

.vc-co2-types legend {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--orange);
	padding: 0 8px;
}

.vc-co2-types label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	cursor: pointer;
	color: rgba(245, 241, 234, 0.85);
	font-size: 0.92rem;
}

.vc-co2-types label input {
	accent-color: var(--orange);
}

.vc-co2-types label em {
	margin-left: auto;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: rgba(245, 241, 234, 0.55);
	font-style: normal;
}

.vc-co2-types label span {
	display: flex;
	align-items: center;
	flex: 1;
	gap: 8px;
}

.vc-co2-types label:hover {
	color: var(--paper);
}

/* Result-Block */
.vc-co2-result {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 28px;
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid rgba(245, 241, 234, 0.1);
}

@media (max-width: 800px) {
	.vc-co2-result {
		grid-template-columns: 1fr;
	}
}

.vc-co2-bars {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.vc-co2-bar__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 6px;
}

.vc-co2-bar__label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.65);
}

.vc-co2-bar__value {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--paper);
}

.vc-co2-bar__track {
	height: 14px;
	background: rgba(245, 241, 234, 0.08);
	border-radius: 3px;
	overflow: hidden;
}

.vc-co2-bar__fill {
	height: 100%;
	transition: width 0.4s ease;
	border-radius: 3px;
}

.vc-co2-bar--auto .vc-co2-bar__fill {
	background: linear-gradient(90deg, #d65a5a 0%, #b34141 100%);
}

.vc-co2-bar--bike .vc-co2-bar__fill {
	background: linear-gradient(90deg, var(--eco) 0%, var(--eco-deep) 100%);
}

.vc-co2-savings {
	background: linear-gradient(135deg, var(--eco) 0%, var(--eco-deep) 100%);
	color: var(--paper);
	padding: 24px 26px;
	border-radius: 6px;
	box-shadow: 0 10px 28px rgba(46, 139, 87, 0.28);
}

.vc-co2-savings__label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.92;
}

.vc-co2-savings__big {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.2rem, 4vw, 3rem);
	line-height: 1;
	margin: 8px 0 12px;
	letter-spacing: -0.01em;
}

.vc-co2-savings__sub {
	font-size: 0.9rem;
	line-height: 1.5;
	opacity: 0.95;
	color: var(--paper) !important;
}

.vc-co2-savings__sub strong {
	color: var(--paper);
}

.vc-co2-source {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px dashed rgba(245, 241, 234, 0.15);
	font-size: 0.78rem;
	color: rgba(245, 241, 234, 0.55);
	line-height: 1.5;
}

.vc-co2-source strong {
	color: rgba(245, 241, 234, 0.75);
}

/* CO2-Lead-Paragraph (intro) */
.vc-page__content .vc-co2-lead {
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: clamp(1.4rem, 2.4vw, 1.95rem);
	line-height: 1.15;
	font-weight: 700;
	font-style: italic;
	color: var(--eco);
	letter-spacing: 0;
	text-transform: none;
	margin: -8px 0 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(245, 241, 234, 0.15);
}

.vc-page__content .vc-co2-lead em {
	font-style: italic;
	background: none;
	border: 0;
	padding: 0;
	display: inline;
	color: inherit;
	font-size: inherit;
}

/* Mobile-Polish */
@media (max-width: 600px) {
	.vc-co2-rechner {
		padding: 24px 20px;
	}

	.vc-co2-vs {
		gap: 22px;
	}
}

/* ========================================================================
   v1.6.1 — Background-Fotos für Banner + Angebote-Page, mehr Row-Gap.
   ======================================================================== */

/* Angebote-Banner: weiches Bike-Foto im Hintergrund, Cream-Tint drüber */
.angebote-banner {
	position: relative;
	overflow: hidden;
}

.angebote-banner::after {
	/* Cream-Tint-Overlay über dem <img class="angebote-banner__bg"> (v1.6.7) */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(245, 241, 234, 0.86), rgba(245, 241, 234, 0.94));
	z-index: 1;
	pointer-events: none;
}

.angebote-banner>.container {
	position: relative;
	z-index: 2;
}

/* Angebote-Archive: cinematisches Trail-Bild im Background, dunkel überlagert */
.vc-bikes-archive::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		linear-gradient(rgba(10, 10, 11, 0.88), rgba(10, 10, 11, 0.94)),
		url('img/hero-loader.jpg') center/cover no-repeat fixed;
	z-index: 0;
	pointer-events: none;
}

.vc-bikes-archive>.vc-page__container {
	position: relative;
	z-index: 1;
}

/* Auch für Single-Bike-Page: dasselbe Background-Treatment */
.vc-bike-single::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		linear-gradient(rgba(10, 10, 11, 0.9), rgba(10, 10, 11, 0.96)),
		url('img/hero-loader.jpg') center/cover no-repeat fixed;
	z-index: 0;
	pointer-events: none;
}

.vc-bike-single>.vc-page__container {
	position: relative;
	z-index: 1;
}

/* Bike-Grid: mehr Luft zwischen den Reihen */
.vc-bike-grid {
	row-gap: 48px;
}

@media (max-width: 600px) {
	.vc-bike-grid {
		row-gap: 24px;
	}
}

/* ========================================================================
 * v1.6.6 — Klartext-Klick-Durchgriff auf Card-Bilder
 * ------------------------------------------------------------------------
 * Bei den Cat-Cards, Brand-Stories und Tour-Cards liegen dekorative
 * Overlay-Layer ganzflächig (inset:0) über den <img>-Tags. Sie fangen
 * den Klick ab, bevor er das Bild erreicht — Klartext-Extension kann
 * das Bild dadurch nicht selektieren.
 *
 * Lösung: Alle nicht-interaktiven Overlay-Layer auf pointer-events:none.
 * Klickbare Elemente (Tour-CTA, Brand-Story-Button) liegen unterhalb
 * des Bildes im Content-Block und sind nicht betroffen.
 * ======================================================================== */

/* Cat-Cards: Gradient-Overlay, Pfeil-Badge, Text-Content über dem Bild */
.cat-card-overlay,
.cat-card-arrow,
.cat-card-content {
	pointer-events: none;
}

/* Tour-Cards: Bild-Overlay-Gradient, Region-Badge, Overlay-Titel */
.tour-card-img-overlay,
.tour-card-region,
.tour-card-overlay-title {
	pointer-events: none;
}

/* Brand-Stories: Bild-Overlay-Gradient, Nummer-Badge, Tag-Label */
.brand-story-img-overlay,
.brand-story-num,
.brand-story-tag {
	pointer-events: none;
}

/* Sicherheitsnetz: Bilder selbst dürfen Klicks empfangen */
.cat-card-img,
.tour-card-img-bg,
.brand-story-img-bg {
	pointer-events: auto;
}

/* ========================================================================
 * v1.6.7 — Footer- & Angebote-Banner-BGs als <img> (Klartext-tauglich)
 * ------------------------------------------------------------------------
 * .dark-zone-bg ersetzt die alte ::before-Pseudo-Schicht mit base64-data-URL
 * .angebote-banner__bg ersetzt die url(...) im ::after
 * Beide liegen jetzt als echte <img> im DOM und können von Klartext
 * angeklickt werden.
 * ======================================================================== */

.dark-zone .dark-zone-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.18;
	filter: grayscale(0.5) contrast(1.05) brightness(0.85);
	z-index: 0 !important;
	/* überschreibt .dark-zone > * { z-index: 2 } */
	display: block;
}

.angebote-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	display: block;
}

/* ========================================================================
 * v1.6.10 — Reisewelt-Partnership: Schriftzug durch Logo ersetzt
 * ======================================================================== */
.reisewelt-partnership-logo {
	display: block;
	height: 88px;
	width: auto;
	max-width: 100%;
	margin-top: 8px;
}

@media (max-width: 600px) {
	.reisewelt-partnership-logo {
		height: 64px;
	}
}

/* ========================================================================
 * v1.7.0 — Banner + Featured-Bikes verschmolzen
 * ------------------------------------------------------------------------
 * Der angebote-banner trägt jetzt zusätzlich das 3-Card-Featured-Grid.
 * Header oben (text + actions), darunter die 3 Featured-Cards aus CPT.
 * ======================================================================== */

.angebote-banner--featured .angebote-banner__featured-wrap {
	margin-top: 56px;
	position: relative;
	z-index: 2;
}

.angebote-banner--featured .angebote-banner__featured-wrap .product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

/* Card-Optik im hellen Banner-BG: leichter Shadow + Cream-Background */
.angebote-banner--featured .product-card {
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(10, 10, 11, 0.06);
	transition: transform 0.4s cubic-bezier(0.2, 0, 0.1, 1), box-shadow 0.4s ease;
}

.angebote-banner--featured .product-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 48px rgba(10, 10, 11, 0.12);
}

@media (max-width: 900px) {
	.angebote-banner--featured .angebote-banner__featured-wrap {
		margin-top: 40px;
	}

	.angebote-banner--featured .angebote-banner__featured-wrap .product-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ========================================================================
 * v1.7.2 — Parallax-Trenner + Veranstaltungs-Banner (Dummy)
 * ======================================================================== */

/* -------- Parallax-Divider (500px, CSS-only) — v1.7.8 -------- */
.parallax-divider {
	position: relative;
	height: 500px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.parallax-divider__bg {
	position: absolute;
	inset: -10% 0;
	background-size: cover;
	background-position: center;
	/* v1.9.7: background-attachment: fixed ist raus. Damit kann der Browser
	   den Hintergrund nicht auf einer GPU-Ebene halten und muss ihn bei jedem
	   Scroll-Frame neu zeichnen — das war die Hauptursache fuer das Ruckeln.
	   Den Parallax-Effekt uebernimmt jetzt eine transform-Verschiebung, die
	   die GPU zusammensetzt (siehe assets/js/nav.js). */
	transform: translate3d(0, 0, 0);
	z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
	.parallax-divider__bg { transform: none !important; }
}

.parallax-divider__tint {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 11, 0.55) 0%, rgba(10, 10, 11, 0.78) 100%);
	z-index: 1;
}

.parallax-divider__content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 24px;
}

.parallax-divider__eyebrow {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.65);
	margin-bottom: 18px;
}

.parallax-divider__quote {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--paper);
	text-transform: uppercase;
	margin: 0;
}

.parallax-divider__quote .italic {
	font-style: italic;
}

.parallax-divider__quote .accent {
	color: var(--orange);
}

/* Mobile: Parallax-Fixed ist auf iOS/Android effektlos, daher kleinere Höhe + scroll-Fallback */
@media (max-width: 900px) {
	.parallax-divider {
		height: 340px;
	}

	.parallax-divider__bg {
		background-attachment: scroll;
		inset: 0;
	}
}

/* -------- Veranstaltungs-Banner -------- */
.events-banner .events-banner__sub {
	font-size: 1.02rem;
	line-height: 1.55;
	color: rgba(10, 10, 11, 0.72);
	max-width: 540px;
	margin: 18px 0 0;
}

.events-grid {
	display: grid;
	/* v1.9.9: vier statt drei nebeneinander */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 56px;
}
@media (max-width: 1340px) { .events-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .events-grid { grid-template-columns: 1fr; } }

.event-card {
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(10, 10, 11, 0.06);
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.2, 0, 0.1, 1), box-shadow 0.4s ease;
	display: flex;
	flex-direction: column;
}

.event-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 48px rgba(10, 10, 11, 0.12);
}

.event-card__media {
	position: relative;
	/* v1.9.9: hochkant statt 16/10. Auf 1/1 stellen, wenn quadratisch
	   gewuenscht ist — es haengt nur an diesem einen Wert. */
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.event-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0, 0.1, 1);
	display: block;
}

.event-card:hover .event-card__media img {
	transform: scale(1.05);
}

.event-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: var(--ink);
	color: var(--paper);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 12px;
	font-weight: 500;
}

.event-card__badge--reise {
	background: var(--orange);
}

.event-card__badge--training {
	background: #1a4d2e;
}

.event-card__badge--vortrag {
	background: var(--ink);
}

.event-card__body {
	/* v1.9.9: etwas knapper, weil bei vier Spalten pro Card nur rund 300px
	   bleiben und der Datumsblock links davon schon 70px belegt. */
	padding: 20px 18px 16px;
	display: flex;
	gap: 14px;
	flex: 1;
}

.event-card__date {
	flex-shrink: 0;
	/* v1.9.9: Der Monat stand als "SEPTEMBER 26" in einer Zeile und brauchte
	   rund 96px — die Spalte war 64px breit, also lief er rechts heraus.
	   Jetzt Monat abgekuerzt und Jahr auf eigener Zeile. */
	width: 58px;
	border-right: 1px solid rgba(10, 10, 11, 0.1);
	padding-right: 12px;
	text-align: center;
	overflow: hidden;
}

.event-card__day {
	display: block;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--orange);
	font-variant-numeric: tabular-nums;
}

.event-card__month {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	/* v1.9.14: groesser, fett und deutlich dunkler — die Abkuerzungen waren
	   in Grau bei 0,66rem schlecht zu lesen. Der 700er-Schnitt liegt seit
	   dieser Version lokal vor, es wird also nicht kuenstlich gefettet. */
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(10, 10, 11, 0.88);
	margin-top: 6px;
	white-space: nowrap;
}

.event-card__year {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	/* v1.9.10: groesser und im Akzentton, damit das Jahr zur Tageszahl passt */
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--orange);
	margin-top: 3px;
	white-space: nowrap;
}

/* Weitere Termine, wenn eine Veranstaltung mehrfach stattfindet */
.event-card__weitere {
	font-family: 'Familjen Grotesk', sans-serif;
	/* v1.9.11: Datumszeile von 0,82 auf 1rem (+22%), dazu mehr Kontrast —
	   sie war zu unscheinbar. */
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(10, 10, 11, 0.75);
	margin: 12px 0 0;
}
.event-card__weitere span {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	/* v1.9.11: von 0,6 auf 0,74rem (+23%) und im Akzentton */
	font-size: 0.74rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 3px;
}

.event-card__main {
	flex: 1;
	min-width: 0;
	/* v1.9.12: Flex-Spalte, damit der Button per margin-top:auto nach unten
	   rutscht und alle Cards ihn auf derselben Linie zeigen. */
	display: flex;
	flex-direction: column;
}

/* Mindestabstand zum Block darueber. margin-top:auto allein waere bei voller
   Card null — dieser Abstand steht immer. */
.event-card__main > *:has(+ .event-card__anmeldung) {
	margin-bottom: 14px;
}

.event-card__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 1.32rem;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 8px;
}

.event-card__meta {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(10, 10, 11, 0.55);
	margin: 0 0 12px;
}

.event-card__desc {
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(10, 10, 11, 0.72);
	margin: 0;
}
/* v1.7.96 — Infotext kommt jetzt aus dem Editor und kann Listen/Absaetze enthalten */
.event-card__desc > *:first-child { margin-top: 0; }
.event-card__desc > *:last-child  { margin-bottom: 0; }
.event-card__desc p { margin: 0 0 0.7em; }
.event-card__desc ul,
.event-card__desc ol {
	margin: 0 0 0.7em;
	padding-left: 1.15em;
}
.event-card__desc li { margin-bottom: 0.25em; }
.event-card__desc ul { list-style: none; padding-left: 0; }
.event-card__desc ul li {
	position: relative;
	padding-left: 1em;
}
.event-card__desc ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--orange);
}
.event-card__desc a { color: var(--orange); text-decoration: underline; }

/* v1.9.5 — Anmelde-Button auf der Event-Card. Erscheint nur, wenn im Backend
   eine Anmelde-URL hinterlegt ist; die Formulare liegen bei reisewelt. */
.event-card__anmeldung {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* v1.9.12: an den unteren Rand. align-self verhindert, dass der Button in
	   der Flex-Spalte auf die volle Breite gezogen wird. */
	margin-top: auto;
	align-self: flex-start;
	padding: 10px 20px;
	background: var(--orange);
	color: #fff !important;
	border-radius: 4px;
	font-family: 'Familjen Grotesk', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none !important;
	transition: background 0.2s, transform 0.15s;
}
.event-card__anmeldung:hover {
	background: var(--orange-deep);
	transform: translateX(2px);
}
.event-card__anmeldung:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.event-card__desc strong { color: rgba(10, 10, 11, 0.88); }

@media (max-width: 900px) {
	.events-grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 36px;
	}

	.event-card__day {
		font-size: 2.2rem;
	}
}

/* ========================================================================
 * v1.7.11 — Unser Bikestore: Hero + Filter + Galerie + Lightbox
 * ======================================================================== */

.vc-bikestore-hero {
	background: var(--paper);
	padding: 120px 40px 60px;
	position: relative;
}

.vc-bikestore-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.vc-bikestore-hero__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 18px;
}

.vc-bikestore-hero__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.6rem, 5.8vw, 4.6rem);
	line-height: 0.9;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 28px;
}

.vc-bikestore-hero__title .italic {
	font-style: italic;
	font-weight: 600;
}

.vc-bikestore-hero__title .accent {
	color: var(--orange);
}

.vc-bikestore-hero__sub {
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 640px;
	color: rgba(10, 10, 11, 0.72);
	margin: 0;
}

.vc-bikestore-section {
	background: var(--paper);
	padding: 40px 40px 100px;
}

.vc-bikestore-section__inner {
	max-width: 1400px;
	margin: 0 auto;
}

.vc-impressions-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 36px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(10, 10, 11, 0.08);
}

.vc-impressions-filter__pill {
	background: transparent;
	border: 1px solid rgba(10, 10, 11, 0.15);
	color: var(--ink);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 10px 18px;
	cursor: pointer;
	transition: all 0.25s ease;
}

.vc-impressions-filter__pill:hover {
	border-color: var(--orange);
	color: var(--orange);
}

.vc-impressions-filter__pill.is-active {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

/* v1.7.37: alte 3-Spalten-Regel deaktiviert — die 4-Spalten-Regel
   weiter unten (Zeile ~4338) ist jetzt die einzig aktive. */

.vc-impression {
	break-inside: avoid;
	margin: 0 0 16px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(10, 10, 11, 0.06);
	transition: transform 0.4s cubic-bezier(0.2, 0, 0.1, 1), box-shadow 0.4s ease;
}

.vc-impression:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(10, 10, 11, 0.12);
}

.vc-impression__link {
	display: block;
	overflow: hidden;
	cursor: zoom-in;
}

.vc-impression__link img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s cubic-bezier(0.2, 0, 0.1, 1);
}

.vc-impression:hover .vc-impression__link img {
	transform: scale(1.03);
}

.vc-impression__caption {
	padding: 12px 16px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(10, 10, 11, 0.6);
	border-top: 1px solid rgba(10, 10, 11, 0.06);
}

.vc-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 11, 0.96);
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vc-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.vc-lightbox__figure {
	margin: 0;
	max-width: 92vw;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.vc-lightbox__img {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	display: block;
}

.vc-lightbox__caption {
	color: var(--paper);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	margin-top: 18px;
	text-align: center;
	max-width: 720px;
	display: none;
}

.vc-lightbox__close,
.vc-lightbox__prev,
.vc-lightbox__next {
	position: absolute;
	background: rgba(245, 241, 234, 0.1);
	border: 1px solid rgba(245, 241, 234, 0.25);
	color: var(--paper);
	width: 48px;
	height: 48px;
	border-radius: 0;
	font-size: 1.4rem;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vc-lightbox__close:hover,
.vc-lightbox__prev:hover,
.vc-lightbox__next:hover {
	background: var(--orange);
	border-color: var(--orange);
}

.vc-lightbox__close {
	top: 24px;
	right: 24px;
	font-size: 1.8rem;
}

.vc-lightbox__prev {
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
}

.vc-lightbox__next {
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 600px) {
	.vc-lightbox__close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
	}

	.vc-lightbox__prev {
		left: 8px;
		width: 40px;
		height: 40px;
	}

	.vc-lightbox__next {
		right: 8px;
		width: 40px;
		height: 40px;
	}
}

/* ========================================================================
 * v1.7.12 — Unser Bikestore: Full-Width + Backend-Refinements
 * Überschreibt die v1.7.11-Layout-Settings für volle Breite.
 * ======================================================================== */

/* Page-Wrapper (Template) */
.vc-bikestore-page {
	background: var(--paper);
	min-height: 100vh;
}

/* Hero — full-width, mehr Luft */
.vc-bikestore-hero {
	background: var(--paper);
	padding: 96px 6vw 60px;
	position: relative;
	overflow: hidden;
}

.vc-bikestore-hero__inner {
	max-width: none;
	/* full width */
	margin: 0;
}

.vc-bikestore-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--orange);
	text-decoration: none;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 6px 14px;
	border: 1px solid var(--orange);
	margin-bottom: 36px;
	transition: all 0.2s ease;
}

.vc-bikestore-hero__back:hover {
	background: var(--orange);
	color: var(--paper);
}

.vc-bikestore-hero__title--solo {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 24px;
}

.vc-bikestore-hero__statement {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.6rem, 5.6vw, 4.4rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 22px;
}

.vc-bikestore-hero__statement .italic {
	font-style: italic;
	font-weight: 600;
}

.vc-bikestore-hero__statement .accent {
	color: var(--orange);
}

/* Section: full-width */
.vc-bikestore-section {
	background: var(--paper);
	padding: 40px 4vw 100px;
}

.vc-bikestore-section__inner {
	max-width: none;
	/* full width */
	margin: 0;
}

/* Galerie — column-Layout für Masonry-Optik (v1.7.37: 4 Spalten ab Desktop) */
.vc-impressions-grid {
	column-count: 4;
	column-gap: 14px;
}

@media (max-width: 1100px) {
	.vc-impressions-grid {
		column-count: 3;
	}
}

@media (max-width: 800px) {
	.vc-impressions-grid {
		column-count: 2;
	}
}

@media (max-width: 540px) {
	.vc-impressions-grid {
		column-count: 1;
	}
}

.vc-impression {
	margin: 0 0 14px;
}

/* Empty-State */
.vc-impressions-empty {
	padding: 60px 40px;
	background: #fff;
	text-align: center;
	color: var(--muted);
	border: 1px dashed rgba(10, 10, 11, 0.15);
}

.vc-impressions-empty p {
	margin: 0 0 8px;
	font-size: 1rem;
	line-height: 1.5;
}

/* ========================================================================
 * v1.7.17 — Nav-Dropdown refined + Mobile-Burger-Menü
 * ======================================================================== */

/* ---------- Nav-Dropdown ---------- */
.vc-nav-has-dropdown {
	position: relative;
	/* WICHTIG: padding-bottom statt margin-top im Dropdown — das schließt die
	   Hover-Lücke zwischen Trigger und Dropdown. Maus kann gefahrlos rüber. */
	padding-bottom: 14px;
	margin-bottom: -14px;
}

.vc-nav-dropdown-trigger {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}

.vc-nav-dropdown-caret {
	transition: transform 0.25s ease;
	opacity: 0.7;
}

.vc-nav-has-dropdown:hover .vc-nav-dropdown-caret,
.vc-nav-has-dropdown:focus-within .vc-nav-dropdown-caret {
	transform: rotate(180deg);
	opacity: 1;
}

.vc-nav-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 240px;
	background: rgba(18, 18, 22, 0.82);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(245, 241, 234, 0.08);
	padding: 6px 0;
	margin: 0;
	list-style: none;
	box-shadow:
		0 20px 60px rgba(10, 10, 11, 0.45),
		0 0 0 1px rgba(231, 124, 5, 0.06) inset;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
	z-index: 1000;
}

/* (v1.7.21: kleines Orange-Strich-Designer-Detail oben links entfernt) */

.vc-nav-has-dropdown:hover .vc-nav-dropdown,
.vc-nav-has-dropdown:focus-within .vc-nav-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.vc-nav-dropdown li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-nav-dropdown li a {
	display: block;
	position: relative;
	padding: 14px 26px;
	color: rgba(245, 241, 234, 0.85);
	text-decoration: none;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease;
}

/* v1.7.22: kein eigener Underline mehr — die globale ::before-Linie reicht,
   bei den Dropdown-Items sogar dünner (1px statt 2px). */
.vc-nav-dropdown li a::after {
	display: none;
}

.vc-nav-dropdown li a::before {
	height: 1px !important;
	bottom: 8px !important;
}

.vc-nav-dropdown li a:hover {
	background: rgba(231, 124, 5, 0.10);
	color: var(--paper);
}

/* ====== MOBILE-BURGER-MENÜ ====== */

/* Burger-Button (versteckt auf Desktop, sichtbar auf Mobile) */
.vc-nav-burger {
	display: none;
	background: transparent;
	border: 1px solid rgba(245, 241, 234, 0.15);
	color: var(--paper);
	width: 44px;
	height: 44px;
	cursor: pointer;
	padding: 0;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	z-index: 1001;
	flex-shrink: 0;
}

.vc-nav-burger:hover {
	border-color: var(--orange);
	color: var(--orange);
}

.vc-nav-burger svg {
	width: 22px;
	height: 22px;
}

.vc-nav-burger .vc-nav-burger__close {
	display: none;
}

.vc-nav-burger.is-open .vc-nav-burger__open {
	display: none;
}

.vc-nav-burger.is-open .vc-nav-burger__close {
	display: block;
}

/* ---- Mobile-Breakpoint: Burger zeigen, Nav-Links verstecken ---- */
@media (max-width: 980px) {
	.vc-nav-burger {
		display: inline-flex;
	}

	/* Mobile-Layout: Burger LINKS, Logo MITTE (größer), CTA RECHTS (kompakter) */
	#nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding-left: max(16px, env(safe-area-inset-left));
		padding-right: max(16px, env(safe-area-inset-right));
		/* v1.9.8: Auf Geräten mit Notch bzw. bei ausgefahrener Safari-URL-Leiste
		   saß der Burger sonst im Bereich der Statusleiste und war verdeckt. */
		padding-top: env(safe-area-inset-top);
	}

	#nav .logo {
		order: 2;
		flex: 1;
		display: flex;
		justify-content: center;
		margin: 0;
	}

	#nav .logo .logo-img {
		height: 56px !important;
		width: auto;
	}

	.vc-nav-burger {
		order: 1;
	}

	#nav .nav-cta {
		order: 3;
		display: flex;
	}

	#nav .nav-cta .btn {
		font-size: 0.7rem !important;
		padding: 9px 14px !important;
		letter-spacing: 0.04em !important;
		white-space: nowrap;
	}

	/* "Service & Beratung buchen" auf Mobile zu "Termin buchen" verkürzen */
	#nav .nav-cta .btn .vc-cta-fulltext {
		display: none;
	}

	#nav .nav-cta .btn::before {
		content: "Termin buchen";
	}

	#nav .nav-cta .btn .vc-cta-arrow {
		display: none;
	}

	#nav .nav-cta .btn svg {
		display: none;
	}

	/* Wenn Menü offen: nav selbst auf höheren z-index, damit das Fullscreen-
	   Overlay nicht von Sound-Toggle / Hero-Elementen überdeckt wird. */
	#nav {
		z-index: 9000 !important;
	}

	/* Nav-Links zum Vollbild-Overlay umbauen
	   v1.7.30c: display: flex !important — sonst überschreibt die
	   "display: none"-Regel von Zeile 1958 (max-width: 1100px) und
	   das Menü kann nie sichtbar werden. */
	.nav-links {
		display: flex !important;
		position: fixed !important;
		inset: 0;
		background: rgba(10, 10, 11, 0.96);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 28px !important;
		padding: 80px 32px !important;
		margin: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		z-index: 9500 !important;
		overflow-y: auto;
	}

	.vc-nav-burger {
		z-index: 9600 !important;
		position: relative;
	}

	.nav-links.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.nav-links a {
		font-size: 1.4rem !important;
		letter-spacing: 0.04em !important;
		color: var(--paper) !important;
	}

	.nav-links a::before {
		display: none;
	}

	/* Dropdown auf Mobile: ausgeklappt unter dem Trigger */
	.vc-nav-has-dropdown {
		padding-bottom: 0;
		margin-bottom: 0;
		text-align: center;
	}

	.vc-nav-dropdown {
		position: static;
		transform: none;
		min-width: 0;
		margin: 12px 0 0;
		padding: 0;
		background: transparent !important;
		backdrop-filter: none !important;
		border: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.vc-nav-dropdown::before {
		display: none;
	}

	.vc-nav-dropdown li a {
		font-size: 0.95rem !important;
		padding: 8px 14px !important;
		color: rgba(245, 241, 234, 0.7) !important;
		border-left: none;
		text-align: center;
	}

	.vc-nav-dropdown li a:hover {
		padding-left: 14px !important;
		color: var(--orange) !important;
		background: transparent;
	}

	.vc-nav-dropdown-caret {
		display: none;
	}

	/* Body-Scroll-Lock wenn Menü offen */
	body.vc-nav-locked {
		overflow: hidden;
	}
}


/* ---------- Bidex-Termin-Page (gemeinsam für Werkstatt + Beratung) ---------- */
.vc-bidex-termin-page {
	background: var(--paper);
	min-height: 100vh;
}

/* Hero */
.vc-bidex-termin-hero {
	background: var(--paper);
	padding: 96px 6vw 36px;
}

.vc-bidex-termin-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--orange);
	text-decoration: none;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 6px 14px;
	border: 1px solid var(--orange);
	margin-bottom: 28px;
	transition: all 0.2s ease;
}

.vc-bidex-termin-hero__back:hover {
	background: var(--orange);
	color: var(--paper);
}

.vc-bidex-termin-hero__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 16px;
}

.vc-bidex-termin-hero__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.4rem, 5.4vw, 4.2rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 20px;
}

.vc-bidex-termin-hero__title .italic {
	font-style: italic;
	font-weight: 600;
}

.vc-bidex-termin-hero__title .accent {
	color: var(--orange);
}

.vc-bidex-termin-hero__sub {
	font-size: 1.04rem;
	line-height: 1.65;
	max-width: 720px;
	color: rgba(10, 10, 11, 0.72);
	margin: 0;
}

/* USP-Bar */
.vc-bidex-termin-usps {
	background: var(--paper);
	padding: 36px 6vw;
}

.vc-bidex-termin-usps__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	max-width: 1600px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.vc-bidex-termin-usps__inner {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

.vc-bidex-termin-usp {
	background: #fff;
	padding: 28px 30px;
	border-top: 3px solid var(--orange);
}

.vc-bidex-termin-usp__num {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: var(--muted);
	margin-bottom: 14px;
}

.vc-bidex-termin-usp__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 1.4rem;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 10px;
	line-height: 1.1;
}

.vc-bidex-termin-usp__text {
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(10, 10, 11, 0.7);
}

/* Iframe-Embed */
.vc-bidex-termin-embed {
	background: var(--paper);
	padding: 20px 4vw 60px;
}

.vc-bidex-termin-embed__sticky-info {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 14px;
}

.vc-bidex-termin-embed__label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 4px 10px;
	background: rgba(10, 10, 11, 0.04);
}

.vc-bidex-iframe-wrap {
	position: relative;
	background: #fff;
	border: 1px solid rgba(10, 10, 11, 0.08);
	/* v1.7.35: min-height an iframe-Höhe abzgl. Clipping angepasst
	   damit der iframe nicht intern scrollen muss (Werkstatt:
	   3400 iframe - 120 header - 250 footer = 3030px sichtbar) */
	min-height: 3030px;
	/* Bidex-Header + -Footer wegclippen */
	overflow: hidden;
}

.vc-bidex-iframe-wrap iframe {
	/* Header oben wegschneiden: Iframe negativ verschieben.
	   Bidex hat einen Header ~120px hoch + Footer ~250px. */
	margin-top: -120px;
	margin-bottom: -250px;
}

.vc-bidex-iframe-skeleton {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(90deg, #f0ece5 0%, #e6e1d8 50%, #f0ece5 100%);
	background-size: 200% 100%;
	animation: vcBidexShimmer 1.6s ease-in-out infinite;
	z-index: 1;
}

.vc-bidex-iframe-skeleton__hint {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	background: rgba(245, 241, 234, 0.92);
	padding: 14px 24px;
	border: 1px solid rgba(10, 10, 11, 0.1);
}

/* Bottom-CTA */
.vc-bidex-termin-bottom-cta {
	background: var(--paper-warm);
	padding: 80px 6vw;
}

.vc-bidex-termin-bottom-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	max-width: 1600px;
	margin: 0 auto;
}

.vc-bidex-termin-bottom-cta__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 14px;
}

.vc-bidex-termin-bottom-cta__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2rem, 4.2vw, 3.2rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.vc-bidex-termin-bottom-cta__title .italic {
	font-style: italic;
	font-weight: 600;
}

.vc-bidex-termin-bottom-cta__title .accent {
	color: var(--orange);
}

.vc-bidex-termin-bottom-cta__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ========================================================================
 * v1.7.19 — velolease-Spotlight (Startseite) + Leasing-Rechner (Subseite)
 * ======================================================================== */

/* ============== STARTSEITEN-SPOTLIGHT ============== */
.velolease-spotlight {
	background: var(--paper);
	padding: 90px 6vw;
	position: relative;
	overflow: hidden;
}

.velolease-spotlight::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 6px;
	height: 100%;
	background: linear-gradient(to bottom, var(--orange), rgba(231, 124, 5, 0.2));
}

.velolease-spotlight__inner {
	max-width: 1500px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 60px;
	align-items: center;
}

@media (max-width: 900px) {
	.velolease-spotlight__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.velolease-spotlight__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 18px;
}

.velolease-spotlight__logo {
	display: block;
	height: 42px;
	width: auto;
	margin-bottom: 22px;
}

.velolease-spotlight__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.2rem, 4.8vw, 3.6rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 22px;
}

.velolease-spotlight__title .italic {
	font-style: italic;
	font-weight: 600;
}

.velolease-spotlight__title .accent {
	color: var(--orange);
}

.velolease-spotlight__sub {
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(10, 10, 11, 0.72);
	margin: 0 0 26px;
	max-width: 600px;
}

.velolease-spotlight__sub strong {
	color: var(--ink);
	font-weight: 700;
}

.velolease-spotlight__usps {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.velolease-spotlight__usps li {
	font-size: 0.98rem;
	color: var(--ink);
	display: flex;
	align-items: center;
	gap: 12px;
}

.velolease-usp-icon {
	color: var(--orange);
	font-size: 1.1rem;
	flex-shrink: 0;
}

.velolease-spotlight__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Zitat-Block rechts */
.velolease-spotlight__quote {
	background: var(--ink);
	color: var(--paper);
	padding: 44px 38px;
	position: relative;
}

.velolease-spotlight__quote-mark {
	position: absolute;
	top: -10px;
	left: 22px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: 6rem;
	line-height: 1;
	color: var(--orange);
	font-weight: 900;
}

.velolease-spotlight__quote-text {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 600;
	font-style: italic;
	font-size: 1.55rem;
	line-height: 1.25;
	margin: 0 0 22px;
	color: var(--paper);
}

.velolease-spotlight__quote-author {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--orange);
}

/* ============== LEASING-RECHNER auf /leasing/ ============== */
.vc-velolease-hub {
	background: #fff;
	border: 1px solid rgba(10, 10, 11, 0.08);
	margin: 40px 0 30px;
	padding: 48px 40px;
	position: relative;
	overflow: hidden;
}

.vc-velolease-hub::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--orange);
}

.vc-velolease-hub__header {
	text-align: center;
	margin-bottom: 36px;
}

.vc-velolease-hub__logo {
	display: block;
	height: 48px;
	width: auto;
	margin: 0 auto 14px;
}

.vc-velolease-hub__badge {
	display: inline-block;
	background: rgba(231, 124, 5, 0.12);
	color: var(--orange);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 14px;
	margin-bottom: 18px;
	font-weight: 600;
}

.vc-velolease-hub__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0 0 14px;
	color: var(--ink);
}

.vc-velolease-hub__title .italic {
	font-style: italic;
	font-weight: 600;
}

.vc-velolease-hub__title .accent {
	color: var(--orange);
}

.vc-velolease-hub__sub {
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(10, 10, 11, 0.7);
	max-width: 600px;
	margin: 0 auto;
}

/* Rechner-Grid */
.vc-velolease-calc {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	max-width: 1100px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.vc-velolease-calc {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.vc-velolease-calc__form {
	background: var(--paper);
	padding: 32px 30px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.vc-velolease-field label {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	font-weight: 600;
	margin-bottom: 8px;
}

.vc-velolease-field__hint {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.78rem;
	color: var(--muted);
	margin: 6px 0 0;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 400 !important;
}

.vc-velolease-input-wrap {
	position: relative;
}

.vc-velolease-input-wrap input,
.vc-velolease-field select {
	width: 100%;
	padding: 14px 16px;
	font-size: 1.1rem;
	font-family: 'Familjen Grotesk', sans-serif;
	background: #fff;
	border: 1px solid rgba(10, 10, 11, 0.12);
	color: var(--ink);
	transition: border-color 0.2s ease;
}

.vc-velolease-input-wrap input:focus,
.vc-velolease-field select:focus {
	outline: none;
	border-color: var(--orange);
}

.vc-velolease-input-suffix {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted);
	font-size: 1.05rem;
	pointer-events: none;
}

/* Toggle-Switch */
.vc-velolease-toggle {
	display: flex !important;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-family: 'Familjen Grotesk', sans-serif !important;
	font-size: 0.95rem !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 500 !important;
	color: var(--ink) !important;
}

.vc-velolease-toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.vc-velolease-toggle__slider {
	display: inline-block;
	width: 44px;
	height: 24px;
	background: rgba(10, 10, 11, 0.2);
	position: relative;
	transition: background 0.25s ease;
	flex-shrink: 0;
}

.vc-velolease-toggle__slider::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	transition: transform 0.25s ease;
}

.vc-velolease-toggle input:checked+.vc-velolease-toggle__slider {
	background: var(--orange);
}

.vc-velolease-toggle input:checked+.vc-velolease-toggle__slider::after {
	transform: translateX(20px);
}

/* Ergebnis-Block */
.vc-velolease-calc__result {
	background: var(--ink);
	color: var(--paper);
	padding: 0;
	position: relative;
}

.vc-velolease-result__inner {
	padding: 32px 30px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.vc-velolease-result__label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.55);
	margin-bottom: 8px;
}

.vc-velolease-result__value {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: 4.2rem;
	line-height: 1;
	color: var(--orange);
	margin-bottom: 28px;
	font-variant-numeric: tabular-nums;
}

.vc-velolease-result__value #vlc-monthly {
	letter-spacing: -0.02em;
}

.vc-velolease-result__currency {
	font-size: 0.55em;
	font-weight: 700;
	color: rgba(231, 124, 5, 0.7);
	margin-left: 6px;
}

.vc-velolease-result__compare {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(245, 241, 234, 0.12);
}

.vc-velolease-compare-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.92rem;
	color: rgba(245, 241, 234, 0.75);
}

.vc-velolease-compare-row span:last-child {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-weight: 600;
	color: var(--paper);
}

.vc-velolease-compare-row--save span:last-child {
	color: var(--orange);
}

.vc-velolease-compare-row--total {
	font-weight: 700;
	color: var(--paper);
	padding-top: 8px;
	border-top: 1px dashed rgba(245, 241, 234, 0.15);
}

.vc-velolease-compare-row--total span:last-child {
	color: var(--orange);
	font-size: 1.05rem;
}

.vc-velolease-result__disclaimer {
	font-size: 0.78rem;
	line-height: 1.5;
	color: rgba(245, 241, 234, 0.55);
	margin-bottom: 18px;
}

.vc-velolease-result__disclaimer a {
	color: var(--orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vc-velolease-result__cta {
	display: block;
	background: var(--orange);
	color: var(--paper);
	text-decoration: none;
	text-align: center;
	padding: 14px 22px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: auto;
	transition: all 0.2s ease;
}

.vc-velolease-result__cta:hover {
	background: #C66700;
	transform: translateY(-2px);
}

/* Trenner zwischen Hub und Partner-Grid */
.vc-velolease-divider {
	display: flex;
	align-items: center;
	margin: 56px 0 32px;
	gap: 20px;
}

.vc-velolease-divider::before,
.vc-velolease-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(10, 10, 11, 0.1);
}

.vc-velolease-divider span {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ========================================================================
 * v1.7.20 — Light-Modus für Subpages (z.B. Leasing-Page)
 * Überschreibt die dunklen vc-page-Defaults für ausgewählte Slugs.
 * ======================================================================== */

.vc-page--light {
	background: var(--paper) !important;
	color: var(--ink);
}

/* Back-Link bleibt orange wie auf Dark — passt auch auf Cream */
.vc-page--light .vc-page__back {
	color: var(--orange);
	border-color: var(--orange);
}

.vc-page--light .vc-page__back:hover {
	background: var(--orange);
	color: var(--paper);
}

/* Page-Title in Ink statt Paper */
.vc-page--light .vc-page__title {
	color: var(--ink);
}

/* Content-Bereich: Light-Mode-Anpassungen */
.vc-page--light .vc-page__content {
	color: var(--ink);
}

.vc-page--light .vc-page__content p,
.vc-page--light .vc-page__content li {
	color: rgba(10, 10, 11, 0.78);
}

.vc-page--light .vc-page__content h2,
.vc-page--light .vc-page__content h3,
.vc-page--light .vc-page__content h4,
.vc-page--light .vc-page__content strong {
	color: var(--ink);
}

.vc-page--light .vc-page__content em {
	color: var(--orange);
}

.vc-page--light .vc-page__content a {
	color: var(--orange);
}

.vc-page--light .vc-page__content a:hover {
	color: var(--orange-deep, #C66700);
}

.vc-page--light .vc-page__content li::marker {
	color: var(--orange);
}

/* Hintergrund der Dark-Zone unter der Leasing-Page: wir wollen, dass der Footer
   trotzdem den dark-zone-Look behält. Daher hier nur die vc-page selbst light,
   der ::before-Trail-BG verschwindet aber. */
.vc-page--light::before {
	display: none !important;
}

/* Partner-Karten auf Light-BG: leichter Border statt Cream-on-Cream-Verlust */
.vc-page--light .vc-leasing-partner-card {
	background: #fff;
	border: 1px solid rgba(10, 10, 11, 0.08);
}

.vc-page--light .vc-leasing-partner-card--text .vc-leasing-partner-name {
	color: var(--muted);
}

.vc-page--light .vc-leasing-partner-card:hover {
	border-color: var(--orange);
}

.vc-page--light .vc-leasing-partner-card--featured {
	background: rgba(231, 124, 5, 0.06);
	border-color: var(--orange);
}

/* Callout-Box: Ink-on-Cream invertieren — schwarzer Block mit Paper-Text */
.vc-page--light .vc-leasing-callout {
	background: var(--ink);
	color: var(--paper);
	border-left: 4px solid var(--orange);
}

.vc-page--light .vc-leasing-callout-title,
.vc-page--light .vc-leasing-callout-text {
	color: var(--paper);
}

/* PDF-Link auf Light-BG */
.vc-page--light a.vc-leasing-pdf {
	background: #fff;
	border: 1px solid rgba(10, 10, 11, 0.1);
	color: var(--ink);
}

.vc-page--light a.vc-leasing-pdf:hover {
	border-color: var(--orange);
	background: rgba(231, 124, 5, 0.04);
}

.vc-page--light .vc-leasing-pdf-meta {
	color: var(--muted);
}

/* velolease-Spotlight im Page-Hub: Header-Logo soll dunkel-passend wirken */
.vc-page--light .vc-velolease-hub {
	background: #fff;
	border: 1px solid rgba(10, 10, 11, 0.08);
}

/* ========================================================================
 * v1.7.23 — Leasing-Page-Light-Mode-Fixes (Lesbarkeit + warmer BG)
 * ======================================================================== */

/* Light-BG etwas wärmer als reines Cream, weniger steril */
.vc-page--light {
	background: var(--paper-warm, #ECE5D7) !important;
}

/* Die Hinweis-Box `vc-page__content > p:first-child em` (im Dark-Mode hell auf Orange-Tint)
   war auf Light-Mode weiß auf Cream → unlesbar. Im Light-Mode invertieren. */
.vc-page--light .vc-page__content>p:first-child em {
	display: block;
	background: rgba(231, 124, 5, 0.10);
	border-left: 3px solid var(--orange);
	padding: 12px 16px;
	font-size: 0.92rem;
	color: var(--ink) !important;
	font-style: normal;
	font-weight: 500;
}

/* Generelles em im Light-Mode-Body: Orange-Akzent statt heller Paper-Ton */
.vc-page--light .vc-page__content em {
	color: var(--orange) !important;
}

/* Lead-Paragraph: Orange auf Cream — Border-Bottom anpassen, vorher war Cream-on-Cream */
.vc-page--light .vc-leasing-lead {
	border-bottom-color: rgba(10, 10, 11, 0.1) !important;
}

/* Strong im Light-Mode → Ink statt Paper */
.vc-page--light .vc-page__content strong {
	color: var(--ink) !important;
}

/* ========================================================================
 * v1.7.24 — Cross-Promo-Stripe auf den Bidex-Termin-Pages
 * ======================================================================== */
.vc-bidex-termin-crosspromo {
	background: var(--paper-warm, #ECE5D7);
	border-top: 1px solid rgba(10, 10, 11, 0.08);
	border-bottom: 1px solid rgba(10, 10, 11, 0.08);
	padding: 32px 6vw;
}

.vc-bidex-termin-crosspromo__inner {
	max-width: 1600px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.vc-bidex-termin-crosspromo__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 8px;
}

.vc-bidex-termin-crosspromo__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(1.4rem, 2.6vw, 1.95rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.vc-bidex-termin-crosspromo__title .italic {
	font-style: italic;
	font-weight: 600;
}

.vc-bidex-termin-crosspromo__title .accent {
	color: var(--orange);
}

.vc-bidex-termin-crosspromo__cta {
	white-space: nowrap;
}

/* ========================================================================
 * v1.7.26 — Service-Cards: BG-Label statt "01/02" + invertiertes Hover-Schema
 * (Default = Orange, Hover = Schwarz)
 * ======================================================================== */

/* === Default-State: Orange (statt vorher Ink-Soft) === */
.service-card {
	background: var(--orange) !important;
	border: 1px solid rgba(10, 10, 11, 0.08) !important;
	transition: background 0.4s, border-color 0.4s !important;
}

.service-card .service-eyebrow,
.service-card h3,
.service-card p,
.service-card .service-list li {
	color: var(--ink) !important;
}

.service-card .service-list li {
	background: rgba(10, 10, 11, 0.12) !important;
	color: var(--ink) !important;
}

.service-card .service-eyebrow::before {
	background: var(--ink) !important;
}

.service-card .service-icon {
	background: var(--ink) !important;
	color: var(--orange) !important;
}

.service-card .btn-light {
	background: var(--ink) !important;
	color: var(--paper) !important;
}

/* === Hover-State: Ink + 30% Orange-Tint (weicher als hartes Schwarz) === */
.service-card:hover {
	background: linear-gradient(0deg, rgba(231, 124, 5, 0.30), rgba(231, 124, 5, 0.30)), var(--ink) !important;
}

.service-card:hover .service-eyebrow,
.service-card:hover h3,
.service-card:hover p {
	color: var(--paper) !important;
}

.service-card:hover .service-list li {
	background: rgba(245, 241, 234, 0.1) !important;
	color: var(--paper) !important;
}

.service-card:hover .service-eyebrow::before {
	background: var(--orange) !important;
}

.service-card:hover .service-icon {
	background: var(--orange) !important;
	color: var(--paper) !important;
}

.service-card:hover .btn-light {
	background: var(--orange) !important;
	color: var(--paper) !important;
}

/* === BG-Label (groß, gefüllt, oben rechts — wie die alten 01/02)
   v1.7.29b: etwas weiter runter (vorher -40px stand zu weit über
   die Karte raus) === */
.service-bg-label {
	position: absolute;
	top: -10px;
	right: -10px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	/* Etwas kleiner als die alten 18rem-Zahlen, weil SERVICE/BERATUNG länger sind */
	font-size: clamp(5rem, 12vw, 11rem);
	line-height: 0.8;
	letter-spacing: -0.02em;
	/* Default (Orange-Karte): dunkles Ink-Tint, ganz dezent */
	color: rgba(10, 10, 11, 0.08);
	-webkit-text-stroke: 0;
	pointer-events: none;
	white-space: nowrap;
	transition: color 0.35s ease;
	z-index: 0;
}

.service-card:hover .service-bg-label {
	/* Hover (schwarze Karte): heller Paper-Tint */
	color: rgba(245, 241, 234, 0.05);
}

/* Content über das BG-Label legen */
.service-card>div:not(.service-bg-label) {
	position: relative;
	z-index: 1;
}

.service-card>a {
	position: relative;
	z-index: 1;
}

/* Alte .service-bg-num-Regel deaktivieren (Markup nutzt sie nicht mehr) */
.service-bg-num {
	display: none !important;
}

/* ============================================================
   v1.7.27 — Startsequenz: Kai-Standbild + Logo-Reveal
   ============================================================ */

/* Cinematic-Loader mit Kai rechts, Logo links, Gradient-Overlay
   v1.7.28: Ken-Burns entfernt (ruckelte), nur sauberer Fade-in.
            GPU-Hint für glatte Performance.                       */
.loader.loader--cinematic {
	overflow: hidden;
}

.loader-kai {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bild ist 1920x1080 mit Kai rechts — Anker rechts, damit auf engen
	   Viewports Kais Gesicht im Bild bleibt */
	object-position: right center;
	opacity: 0;
	animation: kaiHeroFade 1.0s ease-out 0.15s forwards;
	z-index: 1;
	/* Bild leicht andunkeln, damit Welcome+Logo kontrastet */
	filter: brightness(0.94) saturate(1.05);
	/* GPU-Hint, vermeidet Rasterung in jedem Frame */
	will-change: opacity;
	transform: translateZ(0);
	backface-visibility: hidden;
}

@keyframes kaiHeroFade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.loader-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(90deg,
			var(--ink) 0%,
			rgba(10, 10, 11, 0.92) 22%,
			rgba(10, 10, 11, 0.78) 38%,
			rgba(10, 10, 11, 0.42) 58%,
			rgba(10, 10, 11, 0.10) 78%,
			rgba(10, 10, 11, 0.00) 92%);
}

/* Logo-Block links — etwas mehr Abstand zur Kante
   v1.7.28b: Welcome zentriert über Logo, größerer Gap */
.loader.loader--cinematic .loader-mark {
	position: relative;
	z-index: 3;
	margin-left: clamp(7vw, 13vw, 180px);
	margin-right: auto;
	width: clamp(280px, 40vw, 520px);
	display: flex;
	flex-direction: column;
	align-items: center;
	/* zentriert über Logo */
	gap: 28px;
	/* mehr Luft zwischen Welcome und Logo */
}

/* Welcome-Eyebrow im Headline-Stil (italic + orange-Akzent) */
.loader-welcome {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 600;
	font-size: clamp(1.4rem, 2.6vw, 2.1rem);
	color: var(--paper);
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	animation: welcomeFadeIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards;
	will-change: opacity, transform;
	/* Italic-Cutoff-Fix: minimaler Reserve-Space rechts */
	padding-right: 0.06em;
}

.loader-welcome em {
	font-style: italic;
	color: var(--orange);
	font-weight: 700;
	/* Italic-Glyphen lehnen nach rechts — minimaler Reserve */
	padding-right: 0.04em;
	margin-right: 0.02em;
}

@keyframes welcomeFadeIn {
	0% {
		opacity: 0;
		transform: translateY(8px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Bar bleibt sichtbar, etwas länger laufend für die 2.4s Phase */
.loader.loader--cinematic .loader-bar {
	z-index: 4;
	animation: loaderBarSlow 2.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	will-change: width;
}

@keyframes loaderBarSlow {
	to {
		width: 100%;
	}
}

/* Mobile: Bild zentriert, Logo zentriert obendrauf — Overlay kreisförmig */
@media (max-width: 720px) {
	.loader-kai {
		object-position: 65% center;
	}

	.loader-overlay {
		background:
			radial-gradient(ellipse 80% 60% at center,
				rgba(10, 10, 11, 0.45) 0%,
				rgba(10, 10, 11, 0.85) 75%,
				var(--ink) 100%);
	}

	.loader.loader--cinematic .loader-mark {
		margin: 0 auto;
		width: min(72vw, 360px);
		align-items: center;
		text-align: center;
	}

	.loader.loader--cinematic {
		justify-content: center;
	}
}

/* Reduced-motion: keine Animation */
@media (prefers-reduced-motion: reduce) {

	.loader-kai,
	.loader-welcome {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ============================================================
   v1.7.27 — Kai-Zitat-Block (Phase A.2)
   Direkt unter dem Hero-Video, auf paper-warm-BG
   ============================================================ */

.kai-quote {
	background: var(--paper-warm);
	color: var(--ink);
	padding: clamp(56px, 9vw, 120px) 0;
	position: relative;
	overflow: hidden;
}

/* Dezente Orange-Akzentlinie oben */
.kai-quote::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg,
			transparent 0%,
			var(--orange) 35%,
			var(--orange) 65%,
			transparent 100%);
	opacity: 0.55;
}

.kai-quote__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 64px);
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(0, 1.5fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

/* Medien-Spalte */
.kai-quote__media {
	position: relative;
}

.kai-quote__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	box-shadow:
		0 24px 56px rgba(10, 10, 11, 0.16),
		0 8px 18px rgba(10, 10, 11, 0.08);
	/* v1.7.29: schmaleres Aspect-Ratio (3:4 statt 2:3) + tieferer Crop,
	   damit Holzdecke oben weniger und Kai/Tresen mehr gezeigt werden */
	aspect-ratio: 3/4;
	object-fit: cover;
	object-position: center 55%;
}

.kai-quote__caption {
	margin: 20px 0 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 14px;
	border-left: 3px solid var(--orange);
}

.kai-quote__caption strong {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
}

.kai-quote__caption span {
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(10, 10, 11, 0.65);
}

/* Body-Spalte */
.kai-quote__body {
	max-width: 720px;
}

.kai-quote__body .section-eyebrow {
	margin: 0 0 20px;
	color: var(--orange);
}

.kai-quote__text {
	margin: 0 0 32px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 3.4vw, 2.7rem);
	line-height: 1.18;
	letter-spacing: -0.005em;
	position: relative;
}

.kai-quote__text em {
	font-style: italic;
	color: var(--orange);
	font-weight: 700;
}

.kai-quote__mark {
	/* v1.7.29: beide Anführungszeichen "oben" (englischer Stil),
	   typografisch korrekte curly Quotes U+201C / U+201D */
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	color: var(--orange);
	font-size: 1.1em;
	line-height: 0.8;
	display: inline-block;
	vertical-align: 0.12em;
	/* oben statt unten */
	margin-right: 0.1em;
	opacity: 0.85;
}

.kai-quote__mark--end {
	margin-left: 0.06em;
	margin-right: 0;
}

/* Letztes Wort + End-Anführungszeichen zusammenhalten, damit das Zeichen nie
   allein auf eine neue Zeile umbricht (v1.7.77). */
.kai-quote__nowrap {
	white-space: nowrap;
}

.kai-quote__sig {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.kai-quote__sig-name {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
}

.kai-quote__sig-role {
	font-size: 0.85rem;
	color: rgba(10, 10, 11, 0.6);
	letter-spacing: 0.02em;
}

/* Mobile: Stacked */
@media (max-width: 880px) {
	.kai-quote__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.kai-quote__media {
		max-width: 360px;
		margin: 0 auto;
	}

	.kai-quote__img {
		aspect-ratio: 4/5;
	}
}

/* ============================================================
   v1.7.28b — Safari / iOS Italic-Glyph-Cutoff Fix
   ============================================================
   Bekanntes Problem: italic-Schriften lehnen nach rechts.
   Safari (Desktop + iOS) berechnet die Box-Breite nach der
   upright-Variante des letzten Glyphs → rechte Ausläufer (z.B.
   "R" von YOUR, "n" von willkommen) werden geclippt.

   Fix: minimaler padding-right + display:inline-block stellt
   sicher, dass der Glyph nicht im umliegenden Layout abgeschnitten
   wird. Wirkt nur auf italic-Inline-Elemente in großen Headlines. */

.italic,
em.italic,
span.italic,
em.accent,
.section-head h2 em,
.section-head h2 .italic,
.hero-title em,
.hero-title .italic,
.footer-cta h3 .accent,
.contact-left h2 .accent,
.parallax-divider__quote .italic,
.vc-bikestore-hero__title .italic,
.vc-bikestore-hero__statement .italic,
.vc-katalog-hero__title .italic,
.vc-katalog-bottom-cta__title .italic,
.vc-bidex-termin-hero__title .italic,
.vc-bidex-termin-bottom-cta__title .italic,
.velolease-spotlight__title .italic,
.kai-quote__text em,
.loader-welcome em {
	display: inline-block;
	/* Reserve-Space für die nach rechts geneigten Glyphen */
	padding-right: 0.08em;
	/* Negativer Margin gleicht den optischen Mehrabstand aus
	   wenn nach dem italic-Block noch Text folgt */
	margin-right: -0.04em;
}

/* ============================================================
   v1.7.29 — Onlinekatalog-Polish
   - Bidex-eigener ToTop-Button verbergen (wir haben einen eigenen)
   - Content-Bereich auf max-width begrenzen (wirkt weniger protzig)
   ============================================================ */

/* Container schmäler — Katalog wirkt wie Bühne statt Full-Width-Brett */
.vc-katalog-embed {
	padding: 20px clamp(20px, 6vw, 64px) 80px;
}

.vc-katalog-embed__sticky-info,
.vc-bidex-mount {
	max-width: 1480px;
	margin-left: auto;
	margin-right: auto;
}

/* Bidex-eigene ToTop-Buttons / Scroll-Helper ausblenden.
   Bidex injiziert diverse Selectors je nach Build — wir killen alles
   was aussieht wie "scroll-to-top" innerhalb des Katalog-Hosts. */
.vc-bidex-host .scroll-to-top,
.vc-bidex-host .scrollToTop,
.vc-bidex-host .scroll-top,
.vc-bidex-host .ScrollTop,
.vc-bidex-host #scrollToTop,
.vc-bidex-host #ScrollTopBtn,
.vc-bidex-host .back-to-top,
.vc-bidex-host .btn-scroll-top,
.vc-bidex-host [class*="scroll-top"],
.vc-bidex-host [class*="ScrollTop"],
.vc-bidex-host [id*="scrollToTop" i],
.vc-bidex-host [id*="ScrollTop" i] {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Falls Bidex den ToTop-Button direkt ans body hängt: nur auf der
   Onlinekatalog-Page (body.page-onlinekatalog) blockieren */
body.page-template-page-onlinekatalog>.scroll-to-top,
body.page-template-page-onlinekatalog>.scrollToTop,
body.page-template-page-onlinekatalog>#scrollToTop,
body.page-template-page-onlinekatalog>#ScrollTopBtn,
body.page-template-page-onlinekatalog>.back-to-top,
body.page-template-page-onlinekatalog>[class*="scroll-top" i],
body.page-template-page-onlinekatalog>[class*="ScrollTop" i],
body.page-template-page-onlinekatalog>.btn-top,
body.page-template-page-onlinekatalog>.btnTop,
body.page-template-page-onlinekatalog>#btnTop,
body.page-template-page-onlinekatalog>.toTop,
body.page-template-page-onlinekatalog>.to-top,
body.page-template-page-onlinekatalog>#toTop,
body.page-template-page-onlinekatalog>.bidex-top,
body.page-template-page-onlinekatalog>[class*="btn-top" i],
body.page-template-page-onlinekatalog>[id*="btnTop" i],
body.page-template-page-onlinekatalog>[class*="toTop" i],
body.page-template-page-onlinekatalog>[id*="toTop" i] {
	display: none !important;
}

/* Catch-All v2: Bidex injiziert manchmal über jQuery direkt ins body
   einen fixed positionierten Button. Auf /onlinekatalog/ wird alles,
   was floating bottom-right sitzt und nicht zu unseren bekannten
   Komponenten gehört, ausgeblendet.
   ACHTUNG: bewusst eng gefasst — nur a/button-Elemente direkt unter body */
body.page-template-page-onlinekatalog>a[style*="position: fixed"],
body.page-template-page-onlinekatalog>a[style*="position:fixed"],
body.page-template-page-onlinekatalog>button[style*="position: fixed"],
body.page-template-page-onlinekatalog>button[style*="position:fixed"],
body.page-template-page-onlinekatalog>div[style*="position: fixed"][style*="bottom"],
body.page-template-page-onlinekatalog>div[style*="position:fixed"][style*="bottom"] {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ============================================================
   v1.7.29c — Beratungstermin-Iframe: Footer stärker clippen
   ============================================================
   Der Bidex-Beratungstermin hat kürzeren Inhalt (3 Sections) +
   denselben Bidex-Footer. -250px margin-bottom reicht nicht — der
   Footer rutscht in den sichtbaren Bereich. Stärkerer Clip +
   kleinere min-height für die Beratungs-Variante.                */

.vc-bidex-iframe-wrap--beratung {
	/* v1.7.35: an iframe-Höhe 2800 - 120 header - 380 footer = 2300 */
	min-height: 2300px;
}

.vc-bidex-iframe-wrap--beratung iframe {
	margin-top: -120px;
	margin-bottom: -380px;
	/* vorher -250px, jetzt 130px mehr Footer-Clip */
}

/* ============================================================
   v1.7.30 — Zur-Startseite-Buttons aufwerten
   ============================================================
   Vorher: Orange-Outline (Ghost), heller Hover-Fill — auf hellem
   BG der Subpages schlecht erkennbar.
   Jetzt: Orange-Fill mit hellem Text als Default, Outline-Variante
   beim Hover. Etwas größer für bessere Klick-Affordance. */

.vc-bikestore-hero__back,
.vc-katalog-hero__back,
.vc-bidex-termin-hero__back {
	background: var(--orange) !important;
	color: var(--paper) !important;
	border: 1px solid var(--orange) !important;
	padding: 10px 20px !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.14em !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 10px rgba(231, 124, 5, 0.18);
}

.vc-bikestore-hero__back:hover,
.vc-katalog-hero__back:hover,
.vc-bidex-termin-hero__back:hover {
	background: var(--paper) !important;
	color: var(--orange) !important;
	border-color: var(--orange) !important;
	box-shadow: 0 2px 16px rgba(231, 124, 5, 0.28);
}

/* ============================================================
   v1.7.30 — velolease-Spotlight: Team-Bild + Sektions-Abgrenzung
   ============================================================ */

/* Velolease-Section auf paper-warm (gleiche BG wie reisewelt +
   "Bike-Leasing. Bike-Days." darunter — einheitlicher Ton)
   v1.7.30b: paper → paper-warm zurück, Separator-Linien bleiben
   als sanfte Trennung statt BG-Wechsel. */
.velolease-spotlight {
	background: var(--paper-warm) !important;
	padding-top: clamp(64px, 9vw, 120px) !important;
	padding-bottom: clamp(64px, 9vw, 120px) !important;
	position: relative;
}

.velolease-spotlight::before,
.velolease-spotlight::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: min(90%, 1200px);
	height: 1px;
	background: linear-gradient(90deg,
			transparent 0%,
			rgba(10, 10, 11, 0.12) 30%,
			rgba(231, 124, 5, 0.55) 50%,
			rgba(10, 10, 11, 0.12) 70%,
			transparent 100%);
}

.velolease-spotlight::before {
	top: 0;
}

.velolease-spotlight::after {
	bottom: 0;
}

/* Team-Bild im Quote-Block */
.velolease-spotlight__teamimg {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	margin-bottom: 24px;
	aspect-ratio: 16/10;
	object-fit: cover;
	object-position: center 35%;
	box-shadow:
		0 24px 56px rgba(10, 10, 11, 0.18),
		0 8px 18px rgba(10, 10, 11, 0.10);
}

/* Quote-Block darunter etwas kompakter */
.velolease-spotlight__quote {
	margin-top: 0;
}

/* ============================================================
   v1.7.30 — velolease-Mini-Rechner (Startseite) + Embed-Hub (Leasing)
   ============================================================ */

/* === Mini-Rechner auf Startseite === */
.velolease-spotlight__mini {
	margin-top: 24px;
	background: var(--ink);
	border-radius: 4px;
	padding: 24px;
	box-shadow:
		0 24px 56px rgba(10, 10, 11, 0.22),
		0 8px 18px rgba(10, 10, 11, 0.12);
	position: relative;
}

.velolease-spotlight__mini-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}

.velolease-spotlight__mini-eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
}

.velolease-spotlight__mini-title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--paper);
	letter-spacing: 0.01em;
}

.velolease-spotlight__mini-skeleton {
	background: rgba(245, 241, 234, 0.04);
	border: 1px dashed rgba(245, 241, 234, 0.15);
	border-radius: 4px;
	padding: 40px 20px;
	text-align: center;
	color: rgba(245, 241, 234, 0.6);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
}

.velolease-spotlight__mini iframe {
	width: 100%;
	min-height: 380px;
	border: 0;
	display: block;
	background: transparent;
}

.velolease-spotlight__mini-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--orange);
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid rgba(231, 124, 5, 0.4);
	border-radius: 4px;
	transition: all 0.2s ease;
}

.velolease-spotlight__mini-cta:hover {
	background: var(--orange);
	color: var(--ink);
	border-color: var(--orange);
}

/* === Voller Rechner-Embed auf /leasing/ === */
.vc-velolease-calc-embed {
	margin: 40px auto 24px;
	background: #fff;
	border-radius: 4px;
	padding: 20px;
	box-shadow:
		0 16px 40px rgba(10, 10, 11, 0.10),
		0 4px 10px rgba(10, 10, 11, 0.06);
	position: relative;
	max-width: 760px;
}

.vc-velolease-calc-embed__skeleton {
	text-align: center;
	padding: 60px 20px;
	color: #999;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
}

.vc-velolease-calc-embed__hint {
	margin-top: 12px;
	font-size: 0.75rem;
	color: rgba(10, 10, 11, 0.55);
	text-align: center;
}

.vc-velolease-calc-embed__hint a {
	color: var(--orange);
	text-decoration: none;
}

.vc-velolease-calc-embed__hint a:hover {
	text-decoration: underline;
}

/* ============================================================
   v1.7.30c — Burger-Button Klickbarkeit absolut absichern
   ============================================================ */
@media (max-width: 980px) {

	/* Burger immer ganz oben + pointer-events explizit aktiv */
	.vc-nav-burger {
		position: relative !important;
		z-index: 99999 !important;
		pointer-events: auto !important;
	}

	/* Nav-Container: Position relative damit Stacking-Context greift */
	#nav {
		position: fixed !important;
		z-index: 9990 !important;
	}

	/* Hero-Content darf NICHT über dem Burger liegen */
	.hero,
	.hero-video-wrap,
	.vc-bikestore-hero,
	.vc-katalog-hero,
	.vc-bidex-termin-hero {
		z-index: 1 !important;
	}
}

/* ============================================================
   v1.7.30e — Mobile-Menü vollständig neu: alle Links sichtbar,
   Main-Links fett, Footer-Links (Impressum/Datenschutz/AGB)
   dünner mit Trennstrich getrennt
   ============================================================ */

@media (max-width: 980px) {

	/* Overlay: Vollbild von oben bis unten, Slide-in von rechts,
	   80% deckend mit Blur. v1.7.30f. */
	#vcNavLinks.nav-links {
		display: flex !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		height: 100dvh !important;
		/* dynamic viewport — iOS Safari korrekt */
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: 0 !important;
		padding: calc(100px + env(safe-area-inset-top)) 32px calc(60px + env(safe-area-inset-bottom)) !important;
		margin: 0 !important;
		background: rgba(10, 10, 11, 0.82) !important;
		backdrop-filter: blur(28px) saturate(140%) !important;
		-webkit-backdrop-filter: blur(28px) saturate(140%) !important;
		/* Slide-in von rechts */
		transform: translateX(100%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
			opacity 0.32s ease,
			visibility 0.42s;
		z-index: 9500 !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		list-style: none !important;
	}

	#vcNavLinks.nav-links.is-open {
		transform: translateX(0) !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	/* Body-Scroll-Lock härter — kein Wackeln/Mitscrollen mehr */
	body.vc-nav-locked {
		position: fixed !important;
		width: 100% !important;
		overflow: hidden !important;
	}

	/* Alle direkten Kinder (li) sichtbar */
	#vcNavLinks.nav-links>li {
		display: block !important;
		width: 100%;
		text-align: center;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	/* Main-Links: fett, groß */
	#vcNavLinks.nav-links>li>a {
		display: block !important;
		font-family: 'Big Shoulders Display', sans-serif !important;
		font-size: 1.65rem !important;
		font-weight: 800 !important;
		letter-spacing: 0.04em !important;
		color: var(--paper) !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
		padding: 16px 8px !important;
		line-height: 1.1 !important;
	}

	#vcNavLinks.nav-links>li>a::before {
		display: none !important;
	}

	#vcNavLinks.nav-links>li>a:hover {
		color: var(--orange) !important;
	}

	/* Dropdown-Trigger und Dropdown-Items */
	#vcNavLinks .vc-nav-dropdown-trigger {
		justify-content: center;
	}

	#vcNavLinks .vc-nav-dropdown {
		position: static !important;
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		background: transparent !important;
		backdrop-filter: none !important;
		border: none !important;
		box-shadow: none !important;
		margin: 0 0 8px !important;
		padding: 0 !important;
		min-width: 0 !important;
		transform: none !important;
		list-style: none !important;
	}

	#vcNavLinks .vc-nav-dropdown li {
		display: block !important;
		list-style: none !important;
	}

	#vcNavLinks .vc-nav-dropdown li a {
		display: block !important;
		font-family: 'Big Shoulders Display', sans-serif !important;
		font-size: 1.0rem !important;
		font-weight: 600 !important;
		letter-spacing: 0.08em !important;
		color: rgba(245, 241, 234, 0.65) !important;
		text-transform: uppercase !important;
		padding: 8px 8px !important;
		text-decoration: none !important;
		border-left: none !important;
		text-align: center !important;
	}

	#vcNavLinks .vc-nav-dropdown li a:hover {
		color: var(--orange) !important;
	}

	#vcNavLinks .vc-nav-dropdown-caret {
		display: none !important;
	}

	/* Footer-Links (Impressum, Datenschutz, AGB) — als <li> mit
	   Inline-Children. Höhere Spezifität, damit globale a-Regeln
	   nicht durchschlagen. v1.7.30f. */
	#vcNavLinks.nav-links>li.vc-nav-footer-links {
		display: flex !important;
		flex-wrap: wrap !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 12px !important;
		margin: 28px auto 0 !important;
		padding: 22px 0 0 !important;
		border-top: 1px solid rgba(245, 241, 234, 0.14) !important;
		width: 100% !important;
		max-width: 340px !important;
		text-align: center;
	}

	#vcNavLinks.nav-links>li.vc-nav-footer-links>a,
	#vcNavLinks .vc-nav-footer-links a {
		display: inline-block !important;
		font-family: 'Familjen Grotesk', sans-serif !important;
		font-size: 0.76rem !important;
		font-weight: 400 !important;
		/* dünn */
		letter-spacing: 0.08em !important;
		color: rgba(245, 241, 234, 0.55) !important;
		text-decoration: none !important;
		text-transform: uppercase !important;
		padding: 4px 2px !important;
		line-height: 1 !important;
	}

	#vcNavLinks .vc-nav-footer-links a:hover {
		color: var(--orange) !important;
	}

	#vcNavLinks .vc-nav-footer-links .sep {
		color: rgba(245, 241, 234, 0.28) !important;
		font-size: 0.7rem !important;
		font-weight: 400 !important;
	}
}

/* Footer-Links auf Desktop verstecken — gehören nur ins Mobile-Overlay */
@media (min-width: 981px) {
	.vc-nav-footer-links {
		display: none !important;
	}
}

/* ============================================================
   v1.7.30e — Leasing-Page Pep: H2-Headlines im Theme-Style
   ============================================================ */

/* Wenn .vc-page--light aktiv: H2 + H3 im großen Big-Shoulders-Style */
.vc-page--light .vc-page__content h2 {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--ink);
	margin: 56px 0 20px;
}

.vc-page--light .vc-page__content h3 {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.1;
	letter-spacing: 0.005em;
	color: var(--ink);
	margin: 40px 0 16px;
}

.vc-page--light .vc-page__content p {
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(10, 10, 11, 0.78);
}

.vc-page--light .vc-page__content ul {
	margin: 16px 0 32px;
	padding: 0;
	list-style: none;
}

.vc-page--light .vc-page__content ul li {
	position: relative;
	padding: 6px 0 6px 26px;
	font-size: 1.02rem;
	line-height: 1.55;
	color: rgba(10, 10, 11, 0.82);
}

.vc-page--light .vc-page__content ul li::before {
	content: "✦";
	position: absolute;
	left: 0;
	color: var(--orange);
	font-size: 0.9em;
}

.vc-page--light .vc-leasing-lead em {
	font-style: italic;
	color: var(--orange);
	font-weight: 600;
}

.vc-page--light .vc-leasing-lead {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	line-height: 1.2;
	margin: 40px 0 32px;
}

/* velolease-Hub auf Leasing-Page polish */
.vc-velolease-hub .section-eyebrow {
	margin: 16px 0 8px;
	color: var(--orange);
}

.vc-velolease-hub__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.4rem, 5.2vw, 4.2rem);
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 8px 0 16px;
}

.vc-velolease-hub__title .italic {
	font-style: italic;
	font-weight: 700;
}

.vc-velolease-hub__title .accent {
	color: var(--orange);
}

/* ============================================================
   v1.7.30g — Mobile-Nav: Logo absolut zentriert, CTA kleiner
   ============================================================
   Vorher: Logo zentriert im Flex-Container zwischen Burger und
   CTA, aber Burger 44px ≠ CTA-Breite → Logo war optisch nach
   links versetzt. Lösung: Logo absolut auf 50% positioniert. */

@media (max-width: 980px) {
	#nav {
		position: fixed !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	#nav .logo {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		order: initial !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		z-index: 1;
		/* Pointer-Events durchlassen außerhalb des Logos */
		pointer-events: auto;
	}

	#nav .logo .logo-img {
		height: 48px !important;
		/* etwas kleiner damit Logo nicht über Buttons hängt */
		width: auto;
		display: block;
	}

	.vc-nav-burger {
		order: initial !important;
		width: 40px !important;
		height: 40px !important;
		flex-shrink: 0 !important;
	}

	.vc-nav-burger svg {
		width: 20px !important;
		height: 20px !important;
	}

	#nav .nav-cta {
		order: initial !important;
		flex-shrink: 0 !important;
	}

	#nav .nav-cta .btn {
		font-size: 0.62rem !important;
		padding: 7px 11px !important;
		letter-spacing: 0.05em !important;
		font-weight: 700 !important;
		text-transform: uppercase;
		white-space: nowrap;
	}

	#nav .nav-cta .btn::before {
		content: "Termin" !important;
		/* noch kürzer auf Smartphone */
	}
}

/* Auf Mini-Phones (< 380px) Termin-Button als reines Icon */
@media (max-width: 379px) {
	#nav .nav-cta .btn::before {
		content: "✦" !important;
		/* Icon statt Text */
		font-size: 0.95rem;
		letter-spacing: 0;
	}

	#nav .nav-cta .btn {
		width: 40px !important;
		height: 40px !important;
		padding: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
}

/* ============================================================
   v1.7.30h — Termin-CTA: Kalender-SVG für Mobile
   ============================================================ */

/* Desktop: Kalender-Icon ausgeblendet, normaler Text mit Pfeil */
.vc-cta-cal {
	display: none;
}

@media (max-width: 980px) {

	/* Mobile: Kalender-Icon zeigen */
	#nav .nav-cta .btn .vc-cta-cal {
		display: inline-block;
		vertical-align: middle;
		flex-shrink: 0;
	}

	/* Text-Hint nach Icon - Tablet/Mid-Mobile (520-980px) zeigt "Termin" */
	#nav .nav-cta .btn::before {
		content: " Termin" !important;
		font-size: 0.6rem !important;
		letter-spacing: 0.06em !important;
	}

	#nav .nav-cta .btn {
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
		padding: 8px 12px !important;
	}
}

/* Smartphone <520px: nur Icon, kein Text */
@media (max-width: 520px) {
	#nav .nav-cta .btn::before {
		content: "" !important;
		display: none !important;
	}

	#nav .nav-cta .btn {
		width: 42px !important;
		height: 42px !important;
		padding: 0 !important;
		justify-content: center !important;
		gap: 0 !important;
	}

	#nav .nav-cta .btn .vc-cta-cal {
		width: 20px !important;
		height: 20px !important;
	}
}

/* Mini-Phone <380px: gleich wie Smartphone (Icon-Button) — alte ✦-Regel killen */
@media (max-width: 379px) {
	#nav .nav-cta .btn::before {
		content: "" !important;
	}
}

/* ============================================================
   v1.7.32 — reisewelt-Partnership-Streifen: Orange-BG,
   größere Schrift, Label so breit wie Logo, größerer CTA
   ============================================================ */

.reisewelt-partnership {
	background: var(--orange) !important;
	color: var(--ink) !important;
	padding: clamp(36px, 5vw, 56px) clamp(28px, 5vw, 64px) !important;
	margin-top: clamp(40px, 6vw, 72px) !important;
	gap: clamp(32px, 5vw, 80px) !important;
	align-items: center;
}

/* Linke Spalte: Label + Logo zusammen, Label breite des Logos */
.reisewelt-partnership>div:first-child {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	/* damit Label sich an Logo-Breite ausrichten kann */
	gap: 4px;
}

.reisewelt-partnership-label {
	color: rgba(10, 10, 11, 0.72) !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.18em !important;
	text-align: left;
	font-weight: 600 !important;
	margin-bottom: 4px;
}

/* Logo größer */
.reisewelt-partnership-logo {
	height: clamp(72px, 9vw, 120px) !important;
	margin-top: 0 !important;
}

/* Rechter Link größer + besser sichtbar auf orange */
.reisewelt-partnership-cta {
	font-family: 'Big Shoulders Display', sans-serif !important;
	font-size: clamp(1rem, 1.6vw, 1.4rem) !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	color: var(--ink) !important;
	border-bottom: 2px solid var(--ink) !important;
	padding-bottom: 4px !important;
	transition: opacity 0.22s ease, transform 0.22s ease;
	text-transform: uppercase;
}

.reisewelt-partnership-cta:hover {
	opacity: 0.7;
	transform: translateX(4px);
}

@media (max-width: 720px) {
	.reisewelt-partnership {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 24px !important;
	}
}

/* ============================================================
   v1.7.32 — reisewelt-CI: "reise" bold, "welt" regular
   Wrap: <span class="rw"><strong>reise</strong>welt</span>
   ============================================================ */
.rw {
	font-style: normal;
	white-space: nowrap;
}

.rw strong {
	font-weight: 700;
	/* "reise" bold */
}

/* Wenn Container schon bold ist (Headlines), trotzdem Kontrast:
   "welt" wird leichter dargestellt, "reise" bleibt fett. */
h1 .rw,
h2 .rw,
h3 .rw,
.section-sub .rw,
.vc-radreisen-hero__sub .rw {
	font-weight: 400;
	/* welt = regular */
}

h1 .rw strong,
h2 .rw strong,
h3 .rw strong,
.section-sub .rw strong,
.vc-radreisen-hero__sub .rw strong {
	font-weight: 700;
	/* reise = bold */
}

/* ============================================================
   v1.7.33 — Team-Page mit Hover-Gimmick
   ============================================================ */

.vc-team-page {
	background: var(--paper-warm);
	min-height: 100vh;
}

/* Hero (Wiederverwendung der Radreisen-Hero-Struktur) */
.vc-team-hero {
	padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 80px);
	max-width: 1400px;
	margin: 0 auto;
}

.vc-team-hero__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 16px;
}

.vc-team-hero__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.4rem, 6vw, 5rem);
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 24px;
}

.vc-team-hero__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--orange);
}

.vc-team-hero__sub {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.5;
	color: rgba(10, 10, 11, 0.7);
	max-width: 680px;
	margin: 0;
}

/* Bühne mit dem Team-Foto */
.vc-team-stage {
	padding: 0 clamp(20px, 5vw, 64px) clamp(60px, 8vw, 120px);
	max-width: 1400px;
	margin: 0 auto;
}

.vc-team-stage__inner {
	position: relative;
}

.vc-team-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ink);
	border-radius: 4px;
	box-shadow:
		0 24px 56px rgba(10, 10, 11, 0.16),
		0 8px 18px rgba(10, 10, 11, 0.08);
}

.vc-team-photo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter 0.3s ease;
}

/* Hotspots — unsichtbare Klickflächen über jeder Person */
.vc-team-spot {
	position: absolute;
	cursor: pointer;
	z-index: 3;
	/* Sichtbar nur beim Debug — produktiv komplett transparent */
	background: transparent;
}

/* Unterstrich unter den Füßen */
.vc-team-line {
	position: absolute;
	height: 3px;
	background: var(--orange);
	z-index: 4;
	transform: scaleX(0);
	transform-origin: center;
	opacity: 0;
	transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.2s ease;
	pointer-events: none;
	box-shadow: 0 2px 14px rgba(231, 124, 5, 0.6);
}

/* Label links neben dem Kopf */
.vc-team-label {
	position: absolute;
	z-index: 5;
	transform: translate(-100%, -50%) translateX(-8px);
	opacity: 0;
	transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
	white-space: nowrap;
}

.vc-team-label__name {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: clamp(0.95rem, 1.4vw, 1.4rem);
	color: var(--paper);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.05;
	background: var(--ink);
	padding: 8px 12px 6px;
	box-shadow: 0 4px 18px rgba(10, 10, 11, 0.45);
}

.vc-team-label__role {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: clamp(0.65rem, 0.85vw, 0.78rem);
	color: var(--paper);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--orange);
	padding: 4px 12px 5px;
	font-weight: 600;
}

/* Hover-Zustand: Bild leicht abdunkeln, Linie + Label einblenden */
.vc-team-photo:hover .vc-team-photo__img {
	filter: brightness(0.78) saturate(0.85);
}

.vc-team-spot:hover~.vc-team-line[data-person="0"],
.vc-team-spot[data-person="0"]:hover~.vc-team-line[data-person="0"],
.vc-team-line.is-active {
	transform: scaleX(1);
	opacity: 1;
}

.vc-team-label.is-active {
	opacity: 1;
	transform: translate(-100%, -50%) translateX(-14px);
}

/* Cursor-Hint auf Bühne */
.vc-team-photo {
	cursor: default;
}

/* Mobile-Fallback: statische Liste unter dem Bild */
.vc-team-list {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px 24px;
	counter-reset: vc-team;
}

.vc-team-list__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	background: rgba(10, 10, 11, 0.04);
	border-left: 2px solid var(--orange);
	counter-increment: vc-team;
}

.vc-team-list__item::before {
	content: counter(vc-team, decimal-leading-zero);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	color: var(--orange);
	letter-spacing: 0.14em;
	margin-bottom: 4px;
}

.vc-team-list__name {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.vc-team-list__role {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.75rem;
	color: rgba(10, 10, 11, 0.6);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.vc-team-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.vc-team-list {
		grid-template-columns: 1fr;
	}
}

/* Auf Touch-Geräten Hover-Label ausblenden (würde sonst stuck bleiben),
   stattdessen wirkt die Liste als Hauptinfo */
@media (hover: none) {

	.vc-team-label,
	.vc-team-line {
		display: none !important;
	}

	.vc-team-photo:hover .vc-team-photo__img {
		filter: none;
	}
}

/* CTA-Streifen unten */
.vc-team-cta {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 64px);
	text-align: center;
}

.vc-team-cta__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: clamp(1.8rem, 4vw, 3rem);
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.vc-team-cta__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--orange);
}

.vc-team-cta__sub {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1rem;
	color: rgba(245, 241, 234, 0.75);
	margin: 0 auto 24px;
	max-width: 560px;
}

.vc-team-cta__btns {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.vc-team-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 14px 24px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.22s ease;
	border: 1px solid var(--orange);
}

.vc-team-cta__btn--primary {
	background: var(--orange);
	color: var(--ink);
}

.vc-team-cta__btn--primary:hover {
	background: var(--paper);
	color: var(--orange);
}

.vc-team-cta__btn--ghost {
	background: transparent;
	color: var(--orange);
}

.vc-team-cta__btn--ghost:hover {
	background: var(--orange);
	color: var(--ink);
}

/* ============================================================
   v1.7.34 — Team-Labels kompakter, direkt am Unterstrich,
   horizontal zentriert. Hotspots auf 7 Personen.
   ============================================================ */

/* Label-Override: kleiner, kompakter, zentriert unter dem Unterstrich */
.vc-team-label {
	transform: translateX(-50%) translateY(8px) !important;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.vc-team-label.is-active {
	transform: translateX(-50%) translateY(0) !important;
}

.vc-team-label__name {
	font-size: clamp(0.75rem, 1.05vw, 1.05rem) !important;
	padding: 5px 10px 4px !important;
	white-space: nowrap;
}

.vc-team-label__role {
	font-size: clamp(0.55rem, 0.7vw, 0.7rem) !important;
	padding: 3px 9px 4px !important;
	letter-spacing: 0.1em !important;
	white-space: nowrap;
}

/* Unterstrich dünner + dezenter Glow */
.vc-team-line {
	height: 2px !important;
}

/* ============================================================
   v1.7.35 — Termin-Iframes Mobile-Fix
   ============================================================
   Problem: Auf Mobile-Geräten hat der iframe eine feste Höhe
   (z.B. 2200px). Wenn der iframe-Inhalt + die äußere Page beide
   scrollbar sind, muss der User doppelt scrollen — ärgerlich.

   Lösung: Auf Mobile wird der iframe auf 100dvh (volles Display)
   gesetzt. Der User scrollt nur noch INNERHALB des iframes — also
   nur einmal. Header/Footer-Clip wird mobil deaktiviert, weil
   das auf dem schmalen Display eh selten passt.                  */

@media (max-width: 720px) {

	.vc-bidex-iframe-wrap,
	.vc-bidex-iframe-wrap--beratung {
		/* Container füllt das ganze Display + etwas Reserve */
		min-height: 100dvh !important;
		min-height: 100vh;
		/* Fallback für ältere Browser */
		overflow: visible !important;
		/* Clipping aufheben */
	}

	.vc-bidex-iframe-wrap iframe,
	.vc-bidex-iframe-wrap--beratung iframe {
		/* iframe = volle Display-Höhe, kein margin-Clip mehr */
		height: 100dvh !important;
		height: 100vh;
		/* Fallback */
		min-height: 100vh;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* Sticky-Info-Label oberhalb des iframes auf Mobile abschalten —
	   nimmt nur Platz weg */
	.vc-bidex-termin-embed__sticky-info {
		display: none !important;
	}
}

/* ============================================================
   v1.7.36 — Leasing-Page komplettes Re-Design im Velo-Style
   Eigene .vc-leasing-* Klassen, kein Erbe von Light-Mode-Defaults
   ============================================================ */

.vc-leasing-page {
	background: var(--paper-warm);
	color: var(--ink);
}

/* === HERO === */
.vc-leasing-hero {
	padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 80px);
	max-width: 1400px;
	margin: 0 auto;
}

.vc-leasing-hero__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 16px;
}

.vc-leasing-hero__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.4rem, 6vw, 5rem);
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 24px;
}

.vc-leasing-hero__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--orange);
}

.vc-leasing-hero__lead {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.55;
	color: rgba(10, 10, 11, 0.78);
	max-width: 760px;
	margin: 0;
}

.vc-leasing-hero__lead strong {
	color: var(--ink);
	font-weight: 700;
}

/* === USP-STRIP === */
.vc-leasing-usps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2vw, 28px);
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 64px) clamp(40px, 6vw, 80px);
}

.vc-leasing-usp {
	background: #fff;
	padding: clamp(24px, 3vw, 40px);
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(10, 10, 11, 0.06);
	border-top: 3px solid var(--orange);
}

.vc-leasing-usp__num {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	color: var(--orange);
	font-weight: 600;
	margin: 0 0 14px;
}

.vc-leasing-usp__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0 0 12px;
	color: var(--ink);
}

.vc-leasing-usp__title .accent {
	color: var(--orange);
	font-style: italic;
	font-weight: 700;
}

.vc-leasing-usp__text {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(10, 10, 11, 0.72);
	margin: 0;
}

@media (max-width: 900px) {
	.vc-leasing-usps {
		grid-template-columns: 1fr;
	}
}

/* === HUB (velolease-Block mit Rechner) === */
.vc-leasing-hub {
	background: #fff;
	padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
	border-top: 1px solid rgba(10, 10, 11, 0.06);
	border-bottom: 1px solid rgba(10, 10, 11, 0.06);
}

.vc-leasing-hub__head {
	max-width: 760px;
	margin: 0 auto clamp(32px, 4vw, 56px);
	text-align: center;
}

.vc-leasing-hub__logo {
	height: clamp(56px, 6vw, 80px);
	width: auto;
	max-width: 100%;
	margin: 0 auto 14px;
	display: block;
}
@media (max-width: 560px) {
	/* v1.9.8: Das Logo ist 6,7:1 breit — bei 56px Hoehe waeren das 375px und
	   damit mehr, als ein Handy hergibt. Auf schmalen Schirmen deshalb ueber
	   die Breite begrenzen und die Hoehe mitlaufen lassen. */
	.vc-leasing-hub__logo {
		height: auto;
		width: min(100%, 300px);
	}
}

.vc-leasing-hub__badge {
	display: inline-block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--orange);
	background: rgba(231, 124, 5, 0.08);
	padding: 5px 12px;
	border-radius: 2px;
	margin: 0 0 24px;
	font-weight: 600;
}

.vc-leasing-hub__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(10, 10, 11, 0.55);
	margin: 0 0 12px;
}

.vc-leasing-hub__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2rem, 4.5vw, 3.6rem);
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 18px;
}

.vc-leasing-hub__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--orange);
}

.vc-leasing-hub__sub {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(10, 10, 11, 0.72);
	margin: 0;
}

.vc-leasing-hub__calc {
	max-width: 720px;
	margin: 0 auto;
	background: var(--paper-warm);
	border-radius: 4px;
	padding: clamp(20px, 3vw, 32px);
	box-shadow: 0 8px 24px rgba(10, 10, 11, 0.08);
}

.vc-leasing-hub__calc-skeleton {
	text-align: center;
	padding: 60px 20px;
	color: rgba(10, 10, 11, 0.5);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
}

.vc-leasing-hub__hint {
	margin: 16px 0 0;
	font-size: 0.78rem;
	color: rgba(10, 10, 11, 0.55);
	text-align: center;
	font-family: 'Familjen Grotesk', sans-serif;
}

.vc-leasing-hub__hint a {
	color: var(--orange);
	text-decoration: none;
}

.vc-leasing-hub__hint a:hover {
	text-decoration: underline;
}

/* === BENEFITS-GRID === */
.vc-leasing-benefits {
	padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
	max-width: 1400px;
	margin: 0 auto;
}

.vc-leasing-benefits__head {
	max-width: 720px;
	margin: 0 0 clamp(32px, 4vw, 56px);
}

.vc-leasing-benefits__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 12px;
}

.vc-leasing-benefits__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(1.9rem, 4vw, 3.2rem);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	color: var(--ink);
	margin: 0;
}

.vc-leasing-benefits__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--orange);
}

.vc-leasing-benefits__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 3vw, 48px);
}

.vc-leasing-benefit {
	background: #fff;
	border-radius: 4px;
	padding: clamp(28px, 3vw, 40px);
	box-shadow: 0 4px 16px rgba(10, 10, 11, 0.06);
	border-left: 4px solid var(--orange);
}

.vc-leasing-benefit__num {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	color: var(--orange);
	font-weight: 600;
	margin: 0 0 20px;
}

.vc-leasing-benefit ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vc-leasing-benefit ul li {
	position: relative;
	padding: 8px 0 8px 24px;
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(10, 10, 11, 0.82);
}

.vc-leasing-benefit ul li::before {
	content: "✦";
	position: absolute;
	left: 0;
	top: 8px;
	color: var(--orange);
	font-size: 0.9em;
}

@media (max-width: 800px) {
	.vc-leasing-benefits__grid {
		grid-template-columns: 1fr;
	}
}

/* === BIKE-DAYS BANNER === */
.vc-leasing-bikedays {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
}

.vc-leasing-bikedays__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.vc-leasing-bikedays__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 12px;
}

.vc-leasing-bikedays__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2rem, 4.5vw, 3.6rem);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0 0 16px;
}

.vc-leasing-bikedays__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--orange);
}

.vc-leasing-bikedays__sub {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1.05rem;
	line-height: 1.55;
	color: rgba(245, 241, 234, 0.78);
	margin: 0;
}

.vc-leasing-bikedays__sub strong {
	color: var(--paper);
	font-weight: 700;
}

.vc-leasing-bikedays__cta {
	text-align: right;
}

.vc-leasing-bikedays__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--orange);
	color: var(--ink);
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 16px 28px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.22s ease;
}

.vc-leasing-bikedays__btn:hover {
	background: var(--paper);
}

@media (max-width: 800px) {
	.vc-leasing-bikedays__inner {
		grid-template-columns: 1fr;
	}

	.vc-leasing-bikedays__cta {
		text-align: left;
	}
}

/* === PARTNERS === */
.vc-leasing-partners {
	padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
	max-width: 1400px;
	margin: 0 auto;
}

.vc-leasing-partners__head {
	max-width: 760px;
	margin: 0 0 clamp(32px, 4vw, 56px);
}

.vc-leasing-partners__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 12px;
}

.vc-leasing-partners__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(1.9rem, 4vw, 3.2rem);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	color: var(--ink);
	margin: 0 0 18px;
}

.vc-leasing-partners__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--orange);
}

.vc-leasing-partners__sub {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(10, 10, 11, 0.72);
	margin: 0;
}

.vc-leasing-partners__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}

.vc-leasing-partner {
	background: #fff;
	padding: 24px 18px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 110px;
	position: relative;
	box-shadow: 0 2px 8px rgba(10, 10, 11, 0.04);
	border: 1px solid rgba(10, 10, 11, 0.04);
}

.vc-leasing-partner img {
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.vc-leasing-partner__name {
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: rgba(10, 10, 11, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
}

.vc-leasing-partner--featured {
	border: 2px solid var(--orange);
	box-shadow: 0 6px 18px rgba(231, 124, 5, 0.2);
}

.vc-leasing-partner__badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--orange);
	color: #fff;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 2px;
	font-weight: 600;
	white-space: nowrap;
}

/* === CTA-STREIFEN === */
.vc-leasing-cta {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
	text-align: center;
}

.vc-leasing-cta__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2rem, 4.5vw, 3.6rem);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0 0 14px;
}

.vc-leasing-cta__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--orange);
}

.vc-leasing-cta__sub {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1.05rem;
	line-height: 1.55;
	color: rgba(245, 241, 234, 0.78);
	max-width: 620px;
	margin: 0 auto 28px;
}

.vc-leasing-cta__btns {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.vc-leasing-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 14px 24px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.22s ease;
	border: 1px solid var(--orange);
}

.vc-leasing-cta__btn--primary {
	background: var(--orange);
	color: var(--ink);
}

.vc-leasing-cta__btn--primary:hover {
	background: var(--paper);
	color: var(--orange);
}

.vc-leasing-cta__btn--ghost {
	background: transparent;
	color: var(--orange);
}

.vc-leasing-cta__btn--ghost:hover {
	background: var(--orange);
	color: var(--ink);
}

/* ============================================================
   v1.7.38 — /bike-kategorien/-Page mit 6 Cards + Modal-Reveal
   ============================================================ */

.vc-bikecat-page {
	background: var(--paper-warm);
	color: var(--ink);
}

/* === HERO === */
.vc-bikecat-hero {
	padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 80px);
	max-width: 1400px;
	margin: 0 auto;
}

.vc-bikecat-hero__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 16px;
}

.vc-bikecat-hero__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2.4rem, 6vw, 5rem);
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 24px;
}

.vc-bikecat-hero__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--orange);
}

.vc-bikecat-hero__lead {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.55;
	color: rgba(10, 10, 11, 0.78);
	max-width: 760px;
	margin: 0 0 12px;
}

.vc-bikecat-hero__lead strong {
	color: var(--ink);
	font-weight: 700;
}

.vc-bikecat-hero__hint {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.95rem;
	color: rgba(10, 10, 11, 0.65);
	max-width: 760px;
	margin: 0;
}

.vc-bikecat-hero__hint a {
	color: var(--orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vc-bikecat-hero__hint a:hover {
	text-decoration: none;
}

/* === GRID === */
.vc-bikecat-grid-wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 64px) clamp(60px, 8vw, 120px);
}

.vc-bikecat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.5vw, 32px);
}

@media (max-width: 1000px) {
	.vc-bikecat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* === CARD === */
.vc-bikecat-card {
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(10, 10, 11, 0.08);
	transition: transform 0.32s cubic-bezier(0.2, 0, 0.1, 1),
		box-shadow 0.32s cubic-bezier(0.2, 0, 0.1, 1);
}

.vc-bikecat-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 44px rgba(10, 10, 11, 0.14);
}

.vc-bikecat-card__btn {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.vc-bikecat-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--paper-warm);
}

.vc-bikecat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0, 0.1, 1);
}

.vc-bikecat-card:hover .vc-bikecat-card__media img {
	transform: scale(1.05);
}

.vc-bikecat-card__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: rgba(10, 10, 11, 0.85);
	backdrop-filter: blur(6px);
	color: var(--paper);
	padding: 5px 12px;
	border-radius: 2px;
	font-weight: 500;
}

.vc-bikecat-card__body {
	padding: 24px 22px 22px;
}

.vc-bikecat-card__num {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.75rem;
	color: var(--orange);
	letter-spacing: 0.14em;
	margin: 0 0 8px;
	font-weight: 600;
}

.vc-bikecat-card__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 12px;
}

.vc-bikecat-card__teaser {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(10, 10, 11, 0.7);
	margin: 0 0 14px;
}

.vc-bikecat-card__more {
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--orange);
	transition: transform 0.22s ease;
	display: inline-block;
}

.vc-bikecat-card:hover .vc-bikecat-card__more {
	transform: translateX(4px);
}

/* === BERATUNGS-CTA-STREIFEN === */
.vc-bikecat-cta {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
	text-align: center;
}

.vc-bikecat-cta__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2rem, 4.5vw, 3.6rem);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0 0 14px;
}

.vc-bikecat-cta__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--orange);
}

.vc-bikecat-cta__sub {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1.05rem;
	line-height: 1.55;
	color: rgba(245, 241, 234, 0.78);
	max-width: 640px;
	margin: 0 auto 28px;
}

.vc-bikecat-cta__btns {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.vc-bikecat-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 14px 24px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.22s ease;
	border: 1px solid var(--orange);
}

.vc-bikecat-cta__btn--primary {
	background: var(--orange);
	color: var(--ink);
}

.vc-bikecat-cta__btn--primary:hover {
	background: var(--paper);
	color: var(--orange);
}

.vc-bikecat-cta__btn--ghost {
	background: transparent;
	color: var(--orange);
}

.vc-bikecat-cta__btn--ghost:hover {
	background: var(--orange);
	color: var(--ink);
}

/* ============================================================
   MODAL für Kategorie-Details
   ============================================================ */
.vc-bikecat-modal {
	position: fixed;
	inset: 0;
	z-index: 9800;
	display: none;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	padding: clamp(20px, 4vw, 60px);
}

.vc-bikecat-modal.is-open {
	display: flex;
}

.vc-bikecat-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 11, 0.78);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
	z-index: 1;
}

.vc-bikecat-modal__card {
	position: relative;
	z-index: 2;
	background: var(--paper);
	max-width: 760px;
	width: 100%;
	border-radius: 4px;
	padding: clamp(32px, 4vw, 56px);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
	margin: auto;
	animation: vcBikecatModalIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes vcBikecatModalIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.vc-bikecat-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.22s ease;
}

.vc-bikecat-modal__close:hover {
	background: rgba(10, 10, 11, 0.06);
	color: var(--orange);
}

.vc-bikecat-modal__head {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(10, 10, 11, 0.08);
}

.vc-bikecat-modal__num {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	color: var(--orange);
	letter-spacing: 0.16em;
	font-weight: 600;
	margin: 0 0 6px;
}

.vc-bikecat-modal__tag {
	display: inline-block;
	background: var(--orange);
	color: var(--ink);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 2px;
	font-weight: 700;
	margin: 0 0 16px;
}

.vc-bikecat-modal__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 16px;
}

.vc-bikecat-modal__lead {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(10, 10, 11, 0.78);
	margin: 0;
}

.vc-bikecat-modal__section {
	margin: 24px 0;
}

.vc-bikecat-modal__sec-label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	font-weight: 600;
	margin: 0 0 12px;
}

.vc-bikecat-modal__subgroups {
	margin: 0;
	padding: 0;
}

.vc-bikecat-modal__subgroups dt {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 14px 0 4px;
}

.vc-bikecat-modal__subgroups dt:first-child {
	margin-top: 0;
}

.vc-bikecat-modal__subgroups dd {
	margin: 0 0 0 0;
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.94rem;
	line-height: 1.5;
	color: rgba(10, 10, 11, 0.72);
}

.vc-bikecat-modal__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vc-bikecat-modal__list li {
	position: relative;
	padding: 6px 0 6px 22px;
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(10, 10, 11, 0.78);
}

.vc-bikecat-modal__list li::before {
	content: "✦";
	position: absolute;
	left: 0;
	top: 6px;
	color: var(--orange);
	font-size: 0.9em;
}

.vc-bikecat-modal__warn {
	background: rgba(231, 124, 5, 0.08);
	border-left: 3px solid var(--orange);
	padding: 12px 16px;
	margin: 20px 0;
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(10, 10, 11, 0.82);
}

.vc-bikecat-modal__warn strong {
	color: var(--orange);
	font-weight: 700;
}

.vc-bikecat-modal__kai {
	background: var(--ink);
	color: var(--paper);
	padding: 20px 22px;
	border-radius: 4px;
	margin: 28px 0 0;
}

.vc-bikecat-modal__kai-label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 8px;
	font-weight: 600;
}

.vc-bikecat-modal__kai p {
	margin: 0;
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(245, 241, 234, 0.85);
}

.vc-bikecat-modal__ctas {
	margin: 28px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.vc-bikecat-modal__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 12px 20px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.22s ease;
	border: 1px solid var(--orange);
}

.vc-bikecat-modal__cta--primary {
	background: var(--orange);
	color: var(--ink);
}

.vc-bikecat-modal__cta--primary:hover {
	background: var(--ink);
	color: var(--orange);
}

.vc-bikecat-modal__cta--ghost {
	background: transparent;
	color: var(--orange);
}

.vc-bikecat-modal__cta--ghost:hover {
	background: var(--orange);
	color: var(--ink);
}

/* Body-Scroll-Lock wenn Modal offen */
body.vc-bikecat-modal-locked {
	overflow: hidden;
}

/* v1.7.38: cat-card als <a> — Default-Link-Styling resetten */
a.cat-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

a.cat-card:hover {
	text-decoration: none;
}

/* =================================================================
 * Light-Pages: Nav-Header voll deckend schwarz (statt Gradient)
 * Übernimmt den scrolled-State permanent.
 * Aktiv auf: /leasing/, /werkstatt-termin/, /beratungstermin/,
 *            /mein-konto/, /login/, /registrierung/, /passwort-vergessen/
 * ================================================================= */
body.is-light-page nav {
	/* v1.9.15: siehe nav.scrolled. Hier wog es noch schwerer, weil diese
	   Regel dauerhaft gilt und der Hintergrund mit 98% ohnehin praktisch
	   undurchsichtig ist. */
	background: rgba(10, 10, 11, 0.98) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* =================================================================
 * Service-Passion-Section (Split-Screen Werkstatt-Fokus)
 * Seit v1.7.51
 * ================================================================= */
.vc-service-passion {
	background: var(--paper-warm);
	padding: 0;
	overflow: hidden;
}

.vc-service-passion__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 540px;
}

.vc-service-passion__media {
	position: relative;
	overflow: hidden;
	background: var(--ink);
}

.vc-service-passion__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.2s cubic-bezier(0.2, 0, 0.1, 1);
}

.vc-service-passion:hover .vc-service-passion__media img {
	transform: scale(1.04);
}

.vc-service-passion__body {
	padding: 64px 56px 64px 64px;
	max-width: 640px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vc-service-passion__eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	color: var(--orange);
	text-transform: uppercase;
	margin-bottom: 18px;
}

.vc-service-passion__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 0.96;
	letter-spacing: -0.01em;
	margin: 0 0 26px;
	color: var(--ink);
	text-transform: uppercase;
}

.vc-service-passion__title .italic {
	font-style: italic;
	font-weight: 800;
	display: inline-block;
	padding-right: 0.18em;
}

.vc-service-passion__title .accent {
	color: var(--orange);
}

.vc-service-passion__lead {
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink);
	margin: 0 0 28px;
	max-width: 56ch;
}

.vc-service-passion__usps {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vc-service-passion__usps li {
	font-size: 15px;
	line-height: 1.5;
	padding-left: 22px;
	position: relative;
	color: #2c2c29;
}

.vc-service-passion__usps li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 12px;
	height: 12px;
	background: var(--orange);
	border-radius: 2px;
}

.vc-service-passion__usps strong {
	color: var(--ink);
	font-weight: 700;
	margin-right: 4px;
}

.vc-service-passion__cta {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

/* v1.7.83: .vc-service-passion__beratung entfernt — war eine Einzelfall-Klasse
   für genau das Problem, das jetzt .btn-outline global löst. Der Button nutzt
   nun .btn.btn-outline. */

@media (max-width: 900px) {
	.vc-service-passion__inner {
		grid-template-columns: 1fr;
	}

	.vc-service-passion__media {
		min-height: 320px;
		aspect-ratio: 16/9;
	}

	.vc-service-passion__body {
		padding: 44px 24px;
		max-width: none;
	}

	.vc-service-passion__title {
		font-size: clamp(36px, 9vw, 52px);
	}
}

/* =========================================================================
   MARKEN-UNTERSEITEN (Fragebogen #4) — /marke-{slug}/
   ========================================================================= */
.vc-brand-page {
	background: var(--paper);
	color: var(--ink);
}

.vc-brand-hero {
	max-width: 1100px;
	margin: 0 auto;
	padding: 140px 24px 60px;
}

.vc-brand-hero__back {
	display: inline-block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	color: var(--muted);
	text-decoration: none;
	margin-bottom: 48px;
	transition: color 0.2s ease;
}

.vc-brand-hero__back:hover {
	color: var(--orange);
}

.vc-brand-hero__eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 24px;
}

.vc-brand-hero__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: clamp(3.5rem, 10vw, 8rem);
	font-weight: 900;
	line-height: 0.82;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	margin: 0 0 28px;
}

.vc-brand-hero__tagline {
	display: block;
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: clamp(1.3rem, 3vw, 2rem);
	font-weight: 500;
	font-style: italic;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--orange);
	margin-top: 16px;
}

.vc-brand-hero__intro {
	font-size: 1.18rem;
	line-height: 1.6;
	max-width: 640px;
	color: var(--ink);
	opacity: 0.85;
	margin: 0 0 36px;
}

.vc-brand-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.vc-brand-hero__meta span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vc-brand-hero__meta span::before {
	content: '◆';
	color: var(--orange);
	font-size: 0.6em;
}

.vc-brand-page__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

.vc-brand-block {
	padding: 60px 0;
	border-top: 1px solid rgba(10, 10, 11, 0.1);
}

.vc-brand-block__eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 16px;
}

.vc-brand-block__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: 0 0 28px;
}

.vc-brand-block__text {
	font-size: 1.06rem;
	line-height: 1.75;
	max-width: 680px;
	color: var(--ink);
	opacity: 0.85;
	margin: 0 0 20px;
}

.vc-brand-range {
	list-style: none;
	padding: 0;
	margin: 8px 0 32px;
	max-width: 680px;
	display: grid;
	gap: 0;
}

.vc-brand-range li {
	padding: 14px 0 14px 30px;
	position: relative;
	border-bottom: 1px solid rgba(10, 10, 11, 0.1);
	font-size: 1rem;
	font-weight: 500;
}

.vc-brand-range li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--orange);
	font-weight: 700;
}

.vc-brand-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vc-brand-chip {
	background: rgba(10, 10, 11, 0.06);
	color: var(--ink);
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 0.84rem;
	font-weight: 500;
}

.vc-brand-models {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.vc-brand-model-card {
	border: 1px solid rgba(10, 10, 11, 0.14);
	border-radius: 8px;
	padding: 28px;
	background: rgba(10, 10, 11, 0.015);
}

.vc-brand-model-card__tag {
	display: inline-block;
	background: var(--orange);
	color: var(--paper);
	padding: 6px 12px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.vc-brand-model-card__name {
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
}

.vc-brand-model-card__note {
	font-size: 0.96rem;
	line-height: 1.5;
	color: var(--ink);
	opacity: 0.8;
	margin: 0;
}

.vc-brand-cta {
	max-width: 1100px;
	margin: 40px auto 0;
	padding: 80px 24px 100px;
	text-align: center;
}

.vc-brand-cta__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-size: clamp(2.4rem, 6vw, 4rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
}

.vc-brand-cta__title em {
	font-family: 'Familjen Grotesk', sans-serif;
	font-style: italic;
	font-weight: 500;
	color: var(--orange);
}

.vc-brand-cta__sub {
	font-size: 1.1rem;
	line-height: 1.6;
	max-width: 540px;
	margin: 0 auto 36px;
	color: var(--ink);
	opacity: 0.85;
}

.vc-brand-cta__btn {
	display: inline-block;
	background: var(--orange);
	color: var(--paper);
	padding: 18px 36px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.86rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	transition: transform 0.2s ease, background 0.2s ease;
}

.vc-brand-cta__btn:hover {
	transform: translateY(-2px);
	background: var(--ink);
}

@media (max-width: 700px) {
	.vc-brand-hero {
		padding: 110px 20px 40px;
	}
	.vc-brand-hero__back {
		margin-bottom: 32px;
	}
}
/* ========================================================================
   v1.7.95 — Sortiment / "Im Laden": Bestandszahlen als hochzaehlende
   Kacheln + kleiner Bilder-Slider darunter. Loest den frueheren
   Bidex-Angebots-Slider ab (Bidex komplett entfernt).
   ======================================================================== */
.vc-sortiment {
	background: #241C12; /* warmes Espresso statt hartem Schwarz (v1.7.88) */
	color: var(--paper);
	padding: clamp(56px, 8vw, 100px) 0;
}

/* v1.8.0 — Hintergrundfoto, scharf und im unteren Bereich deutlich sichtbar.
   Die Werte sind durchgerechnet, nicht geschaetzt:
   - Papierweisser Text bleibt bis zu einem Grund von 110 lesbar (4,5:1),
     das orange #E77C05 nur bis 62 — es ist ein Mittelton und verliert beim
     Aufhellen sofort. Deshalb laufen die kleinen Eyebrows hier hell statt
     orange; die grossen Zahlen bleiben orange, sitzen aber auf deckenden
     Kacheln.
   - Das Motiv hat oben oft leeren Himmel und unten das Detail, darum
     "center bottom" und ein Verlauf, der oben stark deckt (Headline mit
     orangem Akzent) und nach unten aufmacht.
   Nachjustieren: --vc-foto-oben (Kopfbereich) und --vc-foto-unten (Rest). */
.vc-sortiment.has-foto {
	/* Zum Anpassen: --vc-foto-braun ist die Overlay-Farbe, --vc-foto-oben/-unten
	   die Deckkraft oben (Kopfbereich) und unten. Hoeher = Foto zurueckhaltender. */
	--vc-foto-braun: 36, 28, 18;   /* #241C12 als RGB-Tripel */
	--vc-foto-oben:  0.90;
	--vc-foto-unten: 0.62;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.vc-sortiment.has-foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--vc-sortiment-foto);
	background-size: cover;
	background-position: center bottom;
	filter: saturate(0.92) contrast(1.02);
	pointer-events: none;
}
.vc-sortiment.has-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		to bottom,
		rgba(var(--vc-foto-braun), var(--vc-foto-oben))  0%,
		rgba(var(--vc-foto-braun), var(--vc-foto-oben))  24%,
		rgba(var(--vc-foto-braun), var(--vc-foto-unten)) 62%,
		rgba(var(--vc-foto-braun), calc(var(--vc-foto-unten) + 0.06)) 100%
	);
	pointer-events: none;
}
.vc-sortiment.has-foto > .container { position: relative; z-index: 1; }

/* Kacheln decken, damit die orangen Zahlen ihren Kontrast behalten */
.vc-sortiment.has-foto .vc-bestand__item {
	background: rgba(20, 15, 9, 0.78);
	border-color: rgba(245, 241, 234, 0.16);
}
.vc-sortiment.has-foto .vc-bestand__item:hover {
	background: rgba(231, 124, 5, 0.2);
}

/* Kleine Eyebrows hell statt orange — sie stehen frei auf dem Foto.
   Das Orange bleibt im Bereich ueber die Zahlen und den Headline-Akzent. */
.vc-sortiment.has-foto .section-eyebrow,
.vc-sortiment.has-foto .vc-galerie__eyebrow {
	color: rgba(245, 241, 234, 0.92);
	text-shadow: 0 1px 4px rgba(10, 8, 5, 0.9);
}
.vc-sortiment.has-foto .section-head h2,
.vc-sortiment.has-foto .section-sub {
	text-shadow: 0 2px 14px rgba(10, 8, 5, 0.6);
}

@media (max-width: 900px) {
	/* schmal: Text steht dichter, Foto weiter zurueck */
	.vc-sortiment.has-foto { --vc-foto-unten: 0.74; }
}

.vc-sortiment .section-head h2 { color: var(--paper); }
.vc-sortiment .section-sub {
	color: rgba(245, 241, 234, 0.78);
	font-size: 1.22rem;
	line-height: 1.55;
	max-width: 560px;
}

/* ---------- Bestandszahlen ---------- */
.vc-bestand {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 12px;
}
.vc-bestand__item {
	background: rgba(245, 241, 234, 0.04);
	border: 1px solid rgba(245, 241, 234, 0.1);
	border-radius: 6px;
	padding: 30px 24px 26px;
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.vc-bestand__item:hover {
	transform: translateY(-3px);
	border-color: var(--orange);
	background: rgba(231, 124, 5, 0.06);
}
.vc-bestand__num {
	display: flex;
	align-items: flex-end;   /* Zahl und Textkachel auf gleicher Unterkante */
	gap: 6px;
	color: var(--orange);
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	line-height: 0.92;
	margin-bottom: 14px;
	min-height: clamp(2.4rem, 4vw, 3.3rem);
}
.vc-bestand__count {
	font-size: clamp(2.6rem, 4.4vw, 3.6rem);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
.vc-bestand__prefix {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(231, 124, 5, 0.75);
	padding-bottom: 0.35em;
}
.vc-bestand__dash {
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	opacity: 0.7;
}
/* Textkachel (Zubehoer) — kleiner gesetzt, damit sie neben den Zahlen nicht kippt */
.vc-bestand__word {
	font-size: clamp(1.15rem, 1.7vw, 1.55rem);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	padding-bottom: 0.12em;
}
.vc-bestand__label {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 1.35rem;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--paper);
	margin-bottom: 6px;
}
.vc-bestand__sub {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.92rem;
	line-height: 1.45;
	color: rgba(245, 241, 234, 0.66);
}
@media (max-width: 900px) {
	.vc-bestand { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.vc-bestand { grid-template-columns: 1fr; }
	.vc-bestand__num { min-height: 0; }
}

/* ---------- Bilder-Slider (16:9, max. 150px hoch) ---------- */
.vc-galerie {
	--vc-gal-h: 300px;                              /* Obergrenze; JS rechnet exakt */
	--vc-gal-w: calc(var(--vc-gal-h) * 16 / 9);     /* 16:9 */
	--vc-gal-gap: 12px;
	/* v1.7.97 — Slider bricht aus dem Container aus, volle Viewport-Breite.
	   Funktioniert, weil .container zentriert ist; body hat overflow-x: hidden,
	   daher erzeugt 100vw keinen horizontalen Scrollbalken. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: 118px;  /* v1.9.9: nochmals 35px tiefer (vorher 83px, davor 48px) */
}
.vc-galerie__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
	/* Leiste bleibt auf der Container-Kante stehen, nur die Bilder gehen bis zum Rand */
	padding: 0 max(40px, calc((100vw - 1600px) / 2 + 40px));
}
.vc-galerie__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	/* v1.9.9: etwas groesser. Die Leiste ist flex mit align-items:center,
	   die Grundlinie bleibt also mit den Pfeil-Buttons ausgerichtet. */
	font-size: 0.86rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(245, 241, 234, 0.62);
}
.vc-galerie__navs { display: flex; gap: 8px; }
.vc-galerie__nav {
	width: 50px;
	height: 40px;
	border: 0;
	border-radius: 4px;
	background: var(--orange);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(231, 124, 5, 0.28);
	transition: background 0.2s, opacity 0.2s;
}
.vc-galerie__nav:hover { background: var(--orange-deep); }
.vc-galerie__nav:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
/* Passen alle Bilder ohne Scrollen, brauchen wir die Pfeile nicht */
.vc-galerie.is-static .vc-galerie__navs { display: none; }

.vc-galerie__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.vc-galerie__viewport::-webkit-scrollbar { display: none; }
.vc-galerie__track {
	display: flex;
	gap: var(--vc-gal-gap);
}
.vc-galerie__item {
	flex: 0 0 var(--vc-gal-w);
	width: var(--vc-gal-w);
	height: var(--vc-gal-h);
	margin: 0;
	border-radius: 4px;
	overflow: hidden;
	background: rgba(245, 241, 234, 0.05);
	scroll-snap-align: start;
}
.vc-galerie__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Platzhalter: leicht abgesetzter Rahmen, damit sie als Platzhalter lesbar sind */
.vc-galerie__item.is-dummy { outline: 1px solid rgba(245, 241, 234, 0.08); outline-offset: -1px; }

@media (max-width: 900px) {
	.vc-galerie { --vc-gal-h: 220px; }
}
@media (max-width: 640px) {
	.vc-galerie { --vc-gal-h: 170px; }
	.vc-galerie__bar { padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.vc-galerie__viewport { scroll-behavior: auto; }
	.vc-bestand__item { transition: none; }
	.vc-bestand__item:hover { transform: none; }
}

/* ========================================================================
   v1.8.8 — Datenschutz-Hinweis (schlanke Leiste unten).
   Bewusst kein Overlay und keine Sperre: der Hinweis informiert, er holt
   keine Einwilligung ein (siehe inc/hinweis-banner.php).
   ======================================================================== */
.vc-hinweis {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	background: rgba(20, 15, 9, 0.97);
	border-top: 1px solid rgba(231, 124, 5, 0.45);
	color: var(--paper);
	padding: 14px max(16px, env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom));
	transform: translateY(100%);
	transition: transform 0.26s ease;
}
.vc-hinweis.is-sichtbar { transform: translateY(0); }
.vc-hinweis__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.vc-hinweis__text {
	flex: 1 1 320px;
	margin: 0;
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.86rem;
	line-height: 1.5;
	color: rgba(245, 241, 234, 0.86);
}
.vc-hinweis__text a {
	color: var(--orange);
	text-decoration: underline;
}
.vc-hinweis__btn {
	flex: 0 0 auto;
	border: 0;
	border-radius: 4px;
	background: var(--orange);
	color: #fff;
	font-family: 'Familjen Grotesk', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	padding: 11px 26px;
	cursor: pointer;
	transition: background 0.2s;
}
.vc-hinweis__btn:hover { background: var(--orange-deep); }
.vc-hinweis__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

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

/* ========================================================================
   v1.9.4 — Karriereseite mit Bewerbungs-Funnel (page-karriere.php).
   Stellen kommen aus dem Backend (CPT vc_job), nicht aus dem Code.
   ======================================================================== */
.vc-karriere { background: var(--paper); }

.vc-karriere-hero {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(70px, 10vw, 130px) 6vw clamp(50px, 7vw, 90px);
}
.vc-karriere-hero__inner { max-width: 1000px; margin: 0 auto; }
.vc-karriere-hero__back {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.74rem;
	color: rgba(245, 241, 234, 0.6);
	text-decoration: none;
}
.vc-karriere-hero__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 22px 0 10px;
}
.vc-karriere-hero__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: clamp(2.6rem, 7vw, 5rem);
	line-height: 0.92;
	text-transform: uppercase;
	margin: 0 0 18px;
}
.vc-karriere-hero__sub {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1.1rem;
	line-height: 1.6;
	color: rgba(245, 241, 234, 0.78);
	max-width: 620px;
	margin: 0;
}

/* Rueckmeldung nach dem Absenden */
.vc-karriere-meldung { padding: 22px 6vw; }
.vc-karriere-meldung__inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 18px 22px;
	border-radius: 6px;
	font-family: 'Familjen Grotesk', sans-serif;
}
.vc-karriere-meldung__inner p { margin: 6px 0 0; }
.vc-karriere-meldung--ok .vc-karriere-meldung__inner {
	background: rgba(46, 139, 87, 0.12);
	border-left: 4px solid var(--eco);
}
.vc-karriere-meldung--fehler .vc-karriere-meldung__inner {
	background: rgba(185, 28, 28, 0.08);
	border-left: 4px solid #B91C1C;
}

/* Kein Angebot offen */
.vc-karriere-leer { padding: clamp(50px, 8vw, 100px) 6vw; }
.vc-karriere-leer__inner { max-width: 700px; margin: 0 auto; text-align: center; }
.vc-karriere-leer__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 16px;
}
.vc-karriere-leer__text {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1.15rem;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0 0 30px;
}
.vc-karriere-leer__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Stellenliste */
.vc-karriere-liste { padding: clamp(50px, 8vw, 100px) 6vw; }
.vc-karriere-liste__inner { max-width: 1000px; margin: 0 auto; }
.vc-karriere-liste__title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: clamp(2rem, 4.5vw, 3rem);
	text-transform: uppercase;
	line-height: 1;
	margin: 8px 0 34px;
}
.vc-jobs { display: flex; flex-direction: column; gap: 22px; }

.vc-job {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: clamp(24px, 3vw, 34px);
	scroll-margin-top: 90px;
}
.vc-job__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.vc-job__titel {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 1.7rem;
	text-transform: uppercase;
	line-height: 1.05;
	margin: 0;
}
.vc-job__mwd { font-weight: 400; color: var(--muted); font-size: 0.85em; }
.vc-job__sub {
	font-family: 'Familjen Grotesk', sans-serif;
	color: var(--muted);
	margin-top: 4px;
}
.vc-job__badge {
	flex: 0 0 auto;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--orange);
	color: #fff;
	padding: 5px 11px;
	border-radius: 3px;
}
.vc-job__fakten {
	list-style: none;
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	margin: 20px 0 0;
	padding: 0;
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.95rem;
}
.vc-job__fakten span {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.64rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 2px;
}
.vc-job__intro {
	font-family: 'Familjen Grotesk', sans-serif;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 18px 0 22px;
}
.vc-job__start { margin-top: 6px; }

/* Funnel */
.vc-funnel { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 24px; }
.vc-funnel__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vc-funnel__fortschritt {
	height: 3px;
	background: rgba(10, 10, 11, 0.08);
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 26px;
}
.vc-funnel__balken {
	display: block;
	height: 100%;
	width: 0;
	background: var(--orange);
	transition: width 0.3s ease;
}
.vc-funnel__schritt { border: 0; margin: 0; padding: 0; }
.vc-funnel__frage {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 1.35rem;
	text-transform: uppercase;
	line-height: 1.15;
	padding: 0;
	margin-bottom: 8px;
}
.vc-funnel__hinweis {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.9rem;
	color: var(--muted);
	margin: 0 0 18px;
}
.vc-funnel__optionen { display: flex; flex-direction: column; gap: 10px; }
.vc-funnel__option {
	text-align: left;
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1rem;
	padding: 15px 18px;
	background: var(--paper-warm);
	border: 2px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.vc-funnel__option:hover { border-color: var(--orange); transform: translateX(3px); }
.vc-funnel__option:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.vc-funnel__option.is-gewaehlt {
	border-color: var(--orange);
	background: rgba(231, 124, 5, 0.1);
	font-weight: 600;
}
.vc-funnel__option.is-gewaehlt::after { content: " ✓"; color: var(--orange); }

.vc-funnel__nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.vc-funnel__zurueck {
	background: none;
	border: 0;
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.9rem;
	color: var(--muted);
	cursor: pointer;
	padding: 8px 0;
}
.vc-funnel__zurueck:hover { color: var(--ink); }

.vc-funnel__felder { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.vc-funnel__felder label {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.vc-funnel__felder input {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #fff;
}
.vc-funnel__felder input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.vc-funnel__felder .pflicht { color: var(--orange); }
.vc-funnel__felder .optional { color: var(--muted); font-weight: 400; }
.vc-funnel__datenschutz {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--muted);
	margin: 18px 0 0;
	max-width: 460px;
}
.vc-funnel__datenschutz a { color: var(--orange); }

.vc-karriere-hinweis {
	font-family: 'Familjen Grotesk', sans-serif;
	text-align: center;
	color: var(--muted);
	margin-top: 40px;
}
.vc-karriere-hinweis a { color: var(--orange); }

@media (max-width: 600px) {
	.vc-job__fakten { gap: 18px; }
	.vc-funnel__nav { flex-direction: column-reverse; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
	.vc-funnel__balken { transition: none; }
	.vc-funnel__option:hover { transform: none; }
}

/* v1.9.6 — Ruhetag im Kontaktblock leicht zurueckgenommen, damit die
   Oeffnungszeiten die Hauptaussage bleiben. */
.contact-info-ruhetag {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.88em;
	color: var(--muted);
}


/* ========================================================================
   v1.9.8 — Zweiter Schließen-Knopf, direkt im Menü-Overlay.
   Der Burger in der Kopfleiste bleibt bestehen; dieser hier ist die
   Absicherung für den Fall, dass die Kopfleiste von der Statusleiste
   oder Safaris URL-Leiste überdeckt wird. Er liegt im Overlay selbst,
   kann also nicht von der Kopfleiste verdeckt werden.
   ======================================================================== */
.vc-nav-schliessen { display: none; }

@media (max-width: 980px) {
	.vc-nav-schliessen {
		display: flex;
		position: fixed;
		top: calc(14px + env(safe-area-inset-top));
		right: calc(14px + env(safe-area-inset-right));
		width: 48px;
		height: 48px;
		align-items: center;
		justify-content: center;
		background: rgba(245, 241, 234, 0.1);
		border: 1px solid rgba(245, 241, 234, 0.28);
		border-radius: 50%;
		color: var(--paper);
		cursor: pointer;
		z-index: 9600;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s;
	}
	#vcNavLinks.nav-links.is-open ~ .vc-nav-schliessen,
	.vc-nav-schliessen.is-sichtbar {
		opacity: 1;
		visibility: visible;
	}
	.vc-nav-schliessen svg { width: 22px; height: 22px; }
	.vc-nav-schliessen:hover { border-color: var(--orange); color: var(--orange); }
	.vc-nav-schliessen:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
}


/* ========================================================================
   v1.9.8 — Fusszeile: auf schmalen Schirmen dreizeilig statt einer langen
   Zeile mit Trennpunkten (Firma / Inhaber / USt-ID).
   ======================================================================== */
.footer-bottom-text__teil + .footer-bottom-text__teil::before {
	content: " · ";
	opacity: 0.5;
}

@media (max-width: 640px) {
	.footer-bottom-text__teil {
		display: block;
	}
	.footer-bottom-text__teil + .footer-bottom-text__teil::before {
		content: none;
	}
}