/* =============================================================
   VVDM — Haupt-Stylesheet
   Version: 0.9.0 (11.05.2026)
   ============================================================= */


/* =============================================================
   1. CONTAINER & HELFER
   ============================================================= */

.container {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
}

/* Eyebrow — kleines Label über Headlines */
.section-eyebrow {
	display: inline-block;
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-orange);
	margin-bottom: 14px;
}

.hero-eyebrow {
	display: inline-block;
	background: linear-gradient(135deg, var(--vvdm-orange), var(--vvdm-orange-dark));
	color: var(--vvdm-white);
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(224, 112, 16, 0.30);
}

/* Highlight-Span — orange Akzentwort innerhalb von Headlines */
.orange {
	display: inline-block;
	background: linear-gradient(135deg, var(--vvdm-orange-warm) 0%, var(--vvdm-orange) 60%, var(--vvdm-orange-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}


/* =============================================================
   2. BUTTONS & SCHWUNG-ELEMENT
   ============================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	font-family: var(--vvdm-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 4px;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	border: none;
	cursor: pointer;
	text-decoration: none;
}

.btn-primary {
	background: linear-gradient(135deg, var(--vvdm-orange) 0%, var(--vvdm-orange-dark) 100%);
	color: var(--vvdm-white);
	box-shadow: 0 8px 24px rgba(224, 112, 16, 0.30);
}

.btn-primary:hover {
	background: linear-gradient(135deg, var(--vvdm-orange-warm) 0%, var(--vvdm-orange) 100%);
	color: var(--vvdm-white);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(224, 112, 16, 0.40);
}

.btn-outline {
	background: transparent;
	color: var(--vvdm-white);
	border: 2px solid var(--vvdm-white);
}

.btn-outline:hover {
	background: var(--vvdm-white);
	color: var(--vvdm-navy-deep);
}

.btn .arrow {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	display: inline-block;
}

.btn:hover .arrow { transform: translateX(5px); }

/* Schwung-Linie — wiederkehrendes Designelement aus Logo-DNA
   (orange-silberner Bogen über dem VVDM im Logo) */
.swoosh {
	display: block;
	height: 4px;
	width: 72px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--vvdm-orange) 18%,
		var(--vvdm-orange-warm) 45%,
		var(--vvdm-silver-light) 75%,
		transparent 100%);
	border-radius: 2px;
	margin: 14px 0 22px;
	transform: skewX(-18deg);
	box-shadow: 0 2px 8px rgba(224, 112, 16, 0.25);
	border: none;
}

.swoosh--center { margin-left: auto; margin-right: auto; }

.swoosh--white {
	background: linear-gradient(90deg,
		transparent 0%,
		var(--vvdm-orange-warm) 18%,
		var(--vvdm-white) 50%,
		var(--vvdm-silver) 80%,
		transparent 100%);
}


/* =============================================================
   3. HEADER (Variante A)

   ============================================================= */

.site-header {
	background: linear-gradient(180deg, var(--vvdm-navy-deep) 0%, #050B14 100%);
	color: var(--vvdm-white);
	padding: 0;
	position: sticky;
	top: 0;
	z-index: 100;
	/* Untere Begrenzung */
	border-bottom: 1px solid rgba(224, 112, 16, 0.45);
}

/* Chrom-/Orange-Highlight direkt unter dem Header */
.site-header::after {
	content: '';
	position: absolute;
	bottom: -1px; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(224, 112, 16, 0.5) 25%,
		rgba(224, 224, 224, 0.6) 50%,
		rgba(224, 112, 16, 0.5) 75%,
		transparent 100%);
	pointer-events: none;
}

.nav-wrap {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
}

/* ----- LOGO ----- */

.logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo:hover { transform: scale(1.02); }

.logo a {
	display: inline-flex;
	align-items: center;
	color: var(--vvdm-white);
}

.logo .site-logo,
.logo .custom-logo {
	display: block;
	height: 56px;
	width: auto;
	max-width: 240px;
	filter: drop-shadow(0 2px 8px rgba(224, 112, 16, 0.25));
}

/* ----- HAUPTNAVIGATION (Desktop)
   Flex: 1 lässt die Navi den verbleibenden Platz füllen */

.site-navigation {
	flex: 1;
	display: flex;
	justify-content: center;
}

.site-navigation .primary-menu {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.site-navigation .primary-menu a {
	display: block;
	padding: 10px 14px;
	color: var(--vvdm-silver-light);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 3px;
	position: relative;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	text-decoration: none;
}

.site-navigation .primary-menu a:hover {
	color: var(--vvdm-orange-warm);
}

/* Aktiver Menüpunkt: zarter Orange-Wash + dezente Unterstreichung */
.site-navigation .primary-menu .current-menu-item > a,
.site-navigation .primary-menu .current_page_item > a,
.site-navigation .primary-menu .current-menu-ancestor > a {
	color: var(--vvdm-orange-warm);
	background: rgba(224, 112, 16, 0.08);
}

.site-navigation .primary-menu .current-menu-item > a::after,
.site-navigation .primary-menu .current_page_item > a::after {
	content: '';
	position: absolute;
	left: 14px; right: 14px;
	bottom: 4px;
	height: 2px;
	background: var(--vvdm-orange);
	border-radius: 1px;
}

/* ----- MOTORSPORT-POD */

.motorsport-pod {
	--jrm-pod-red: #E11017;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-left: 22px;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	text-decoration: none;
}

.motorsport-pod:focus-visible {
	outline: 2px solid var(--jrm-pod-red);
	outline-offset: 4px;
}

.motorsport-pod-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.motorsport-pod-pre {
	font-family: var(--vvdm-font-body);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 2px;
	transition: color 0.25s ease;
}
.motorsport-pod-brand {
	font-family: var(--vvdm-font-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
}
.motorsport-pod-brand b {
	color: var(--jrm-pod-red);
	font-weight: 700;
}
.motorsport-pod-arrow {
	color: var(--jrm-pod-red);
	font-size: 15px;
	line-height: 1;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.motorsport-pod:hover .motorsport-pod-arrow { transform: translateX(4px); }
.motorsport-pod:hover .motorsport-pod-pre   { color: rgba(255, 255, 255, 0.7); }

/* ----- BURGER (nur Mobile sichtbar) */

.nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 3px;
	width: 40px;
	height: 40px;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
	flex-shrink: 0;
}

.nav-toggle:hover {
	border-color: var(--vvdm-orange-warm);
	background: rgba(255, 255, 255, 0.04);
}

.nav-toggle-bar {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--vvdm-silver-light);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* "X"-Animation, sobald das Menü offen ist */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ----- BACKDROP für Mobile-Drawer ----- */

.nav-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(5, 11, 20, 0.6);
	backdrop-filter: blur(2px);
	z-index: 90;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.nav-backdrop.is-active {
	display: block;
	opacity: 1;
}


/* =============================================================
   4. HERO — Startseiten-Vollbild (Mockup v4)
   ============================================================= */

.hero {
	position: relative;
	min-height: 720px;
	background: var(--vvdm-navy-deep);
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 100px 0 120px;
	color: var(--vvdm-white);
}

/* Bild-Layer */
.hero-bg-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	/* Fallback-Muster */
	background-image:
		linear-gradient(135deg, rgba(16, 32, 64, 0.85) 0%, rgba(10, 22, 40, 0.6) 100%),
		repeating-linear-gradient(45deg,
			rgba(255, 255, 255, 0.02) 0px,
			rgba(255, 255, 255, 0.02) 1px,
			transparent 1px,
			transparent 60px);
	background-color: #15243c;
}

/* Dunkler Verlauf links -> schützt die Lesbarkeit der Headline,
   auch wenn das Hero-Foto auf der linken Seite sehr hell ist. */
.hero-stripe {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
		var(--vvdm-navy-deep)        0%,
		rgba(10, 22, 40, 0.95)      30%,
		rgba(10, 22, 40, 0.60)      60%,
		rgba(10, 22, 40, 0.15)     100%);
	z-index: 1;
}

/* Sanftes orange Glow hinter der Headline — pulsiert dezent. */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 600px 400px at 20% 35%,
		rgba(224, 112, 16, 0.10), transparent 70%);
	pointer-events: none;
	z-index: 1;
	animation: vvdm-glow-pulse 8s ease-in-out infinite;
}

/* Animierter Logo-Swoosh rechts oben. Das SVG selbst sitzt im
   Markup; hier nur Position, Größe und die Stroke-Animation. */
.hero-logo-swoosh {
	position: absolute;
	top: 50%;
	right: -100px;
	width: 700px;
	height: 300px;
	transform: translateY(-50%) rotate(-8deg);
	z-index: 2;
	pointer-events: none;
	opacity: 0.4;
}
.hero-logo-swoosh path {
	fill: none;
	stroke: url(#vvdm-swoosh-gradient);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 1200;
	stroke-dashoffset: 1200;
	animation: vvdm-draw-swoosh 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

/* Anker oben rechts: "Seit 2009 · Brunsbüttel".
   Kleiner Glas-Block — markiert das Standort-/Gründungsversprechen. */
.hero-anchor {
	position: absolute;
	right: 32px;
	top: 32px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	font-family: var(--vvdm-font-display);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(4px);
	animation: vvdm-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1.4s both;
}

.hero-anchor-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--vvdm-orange);
	box-shadow: 0 0 6px var(--vvdm-orange);
}

.hero-content {
	position: relative;
	z-index: 3;
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}

.hero-content > * { max-width: 720px; }

/* Eyebrow über der Headline — kleines orange Schild mit Glow. */
.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, var(--vvdm-orange), var(--vvdm-orange-dark));
	color: var(--vvdm-white);
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(224, 112, 16, 0.30);
	animation: vvdm-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.hero h1 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(32px, 4.5vw, 58px);
	font-weight: 600;
	line-height: 0.95;
	margin: 18px 0 28px;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	/* Chrom-Glanz auf der weißen Headline — Logo-Anlehnung. */
	background: linear-gradient(180deg,
		var(--vvdm-white) 0%, var(--vvdm-white) 50%, #DCE2EA 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: vvdm-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

/* Zweite Zeile der Headline — orange Verlaufs-Variante. */
.hero h1 .orange-headline {
	display: block;
	background: linear-gradient(135deg,
		var(--vvdm-orange-warm) 0%, var(--vvdm-orange) 55%, var(--vvdm-orange-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-top: 6px;
}

.hero-content p {
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--vvdm-font-body);
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.6;
	margin: 0 0 40px;
	max-width: 580px;
	font-weight: 400;
	animation: vvdm-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

.hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	animation: vvdm-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both;
}


/* =============================================================
   6. ÜBER VVDM + 3 GESCHÄFTSFELD-CARDS
   ============================================================= */

.content-section {
	padding: clamp(70px, 10vw, 120px) 0;
	background: var(--vvdm-white);
	position: relative;
}

.about-row {
	display: grid;
	grid-template-columns: 1fr 2.2fr;
	gap: 56px;
	align-items: center;
}

/* Schutzregel: verhindert, dass Grid-Items durch lange Wörter
   (z. B. "GESCHÄFTSFÜHRUNG") die Spalte sprengen. */
.about-cards > * { min-width: 0; }

.about-text h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(34px, 4.5vw, 56px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--vvdm-navy);
	margin-bottom: 8px;
}

.about-text p {
	color: var(--vvdm-text);
	font-size: 16px;
	line-height: 1.75;
	margin-bottom: 18px;
}

.about-text p strong { color: var(--vvdm-navy); font-weight: 600; }

/* Cards-Grid */
.about-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.geschaeft-card {
	background: var(--vvdm-white);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--vvdm-shadow);
	border: 1px solid var(--vvdm-border);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.geschaeft-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--vvdm-shadow-strong);
	border-color: rgba(224, 112, 16, 0.30);
}

.card-image {
	aspect-ratio: 4/3;
	background-size: cover;
	background-position: center;
	background-color: var(--vvdm-navy-soft);
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 14px;
}

.card-image .badge {
	background: var(--vvdm-orange);
	color: var(--vvdm-white);
	font-family: var(--vvdm-font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(224, 112, 16, 0.40);
}

.card-body {
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.card-body h3 {
	font-family: var(--vvdm-font-display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--vvdm-navy);
	margin: 0 0 10px;
}

.card-body p {
	color: var(--vvdm-text);
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 18px;
	flex-grow: 1;
}

.card-link {
	font-family: var(--vvdm-font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--vvdm-orange);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	text-decoration: none;
}

.card-link span { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; }
.geschaeft-card:hover .card-link { gap: 12px; }
.geschaeft-card:hover .card-link span { transform: translateX(4px); }


/* =============================================================
   7. SECTION-HEADER (generischer Block-Titel)

   Frühere "Sponsoring-Teaser"-Sektion ist auf der Startseite
   durch den Bridge-Block aus Mockup v4 ersetzt worden. Die
   `.section-header`-/`.section-intro`-Klasse bleibt erhalten,
   weil sie auf vier Unterseiten als zentrierter Sektionstitel
   in Gebrauch ist.
   ============================================================= */

.section-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 50px;
}

.section-header h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(32px, 4.2vw, 48px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--vvdm-navy);
	margin: 0 0 8px;
}

.section-intro {
	color: var(--vvdm-text);
	font-size: 17px;
	line-height: 1.65;
	margin-top: 12px;
}


/* =============================================================
   8. CTA-STRIPE
   ============================================================= */

.cta-stripe {
	background: linear-gradient(135deg, var(--vvdm-navy) 0%, var(--vvdm-navy-soft) 100%);
	padding: 56px 0;
	position: relative;
	overflow: hidden;
}

.cta-stripe::before {
	content: '';
	position: absolute;
	top: 50%; left: -100px;
	width: 600px; height: 80px;
	background: linear-gradient(90deg,
		transparent, rgba(224, 112, 16, 0.15), rgba(255, 255, 255, 0.05), transparent);
	transform: translateY(-50%) rotate(-6deg);
	filter: blur(20px);
	pointer-events: none;
}

.cta-stripe .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}

.cta-stripe h2 {
	font-family: var(--vvdm-font-display);
	color: var(--vvdm-white);
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	margin: 0 0 6px;
}

.cta-stripe p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	font-weight: 400;
	margin: 0;
}


/* =============================================================
   9. FOOTER
   v0.9.1 — Rework: weicher Glow-Übergang, Kontakt-Spalte mit Icons,
            Bauherren-Hinweis entfernt.
   ============================================================= */

.site-footer {
	background: linear-gradient(180deg, #060D17 0%, #050B14 100%);
	color: rgba(255, 255, 255, 0.75);
	padding: 0;
	position: relative;
}

/* Weicher Übergang nach oben — Glow statt harter Linie.
   Reine Dekoration, daher aria-hidden im Markup. */
.footer-top {
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--vvdm-orange) 28%,
		var(--vvdm-orange-warm) 50%,
		var(--vvdm-orange) 72%,
		transparent 100%);
	position: relative;
	opacity: 0.55;
}

.footer-top::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -22px;
	transform: translateX(-50%);
	width: min(480px, 80%);
	height: 44px;
	background: radial-gradient(ellipse at center,
		rgba(224, 112, 16, 0.35) 0%,
		rgba(224, 112, 16, 0.08) 40%,
		transparent 70%);
	pointer-events: none;
	filter: blur(8px);
}

/* 5-Spalten-Layout: Brand · Vermietung · Verwaltung · Dienstleistungen · Kontakt
   (entspricht der Header-Navigation. Motorsport ist absichtlich NICHT
   im Footer als Spalte vertreten — die Untermarke hat ihren eigenen
   Pod im Header und eigene Page, gehört nicht in die Hauptnav-Logik). */
.footer-grid {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 72px 24px 44px;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
	gap: 40px;
}

.footer-brand .footer-logo-img {
	height: 64px;
	width: auto;
	margin-bottom: 20px;
	filter: drop-shadow(0 2px 8px rgba(224, 112, 16, 0.30));
}

.footer-about {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.7;
	margin: 0;
}

.footer-col h4 {
	color: var(--vvdm-white);
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 20px;
	position: relative;
	padding-bottom: 12px;
}

.footer-col h4::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background: var(--vvdm-orange);
	border-radius: 2px;
	transform: skewX(-18deg);
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-col li {
	margin-bottom: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.5;
}

.footer-col a {
	color: rgba(255, 255, 255, 0.72);
	transition: color 0.2s ease;
	text-decoration: none;
}

.footer-col a:hover { color: var(--vvdm-orange-warm); }

/* Kontakt-Spalte: Adresse oben, Icon-Links unten.
   Pattern angelehnt an .cta-contacts auf der Startseite,
   aber kompakter und auf den Footer-Maßstab angepasst. */
.footer-contact-address {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.55;
	margin-bottom: 18px;
}

.footer-contact-company {
	color: var(--vvdm-white);
	font-weight: 600;
}

.footer-contact-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer-contact-links li { margin: 0; }

.footer-contact-links a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	transition: color 0.2s ease;
}

.footer-contact-links a:hover { color: var(--vvdm-orange-warm); }

.footer-contact-links a svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--vvdm-orange);
	transition: color 0.2s ease;
}

.footer-contact-links a:hover svg { color: var(--vvdm-orange-warm); }

.footer-bottom {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 22px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	flex-wrap: wrap;
	gap: 16px;
}

.footer-legal .legal {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-legal a {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-legal a:hover { color: var(--vvdm-orange-warm); }


/* =============================================================
   9b. UNTERSEITEN — GEMEINSAME BAUSTEINE
   ============================================================= */

/* ---------- Page-Hero ---------- */
.page-hero {
	position: relative;
	background: var(--vvdm-navy-deep);
	padding: 110px 0 90px;
	overflow: hidden;
	color: var(--vvdm-white);
	border-bottom: 2px solid var(--vvdm-orange);
}

/* Sanfter Verlauf — Tiefe ohne Bild-Overhead */
.page-hero-stripe {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 700px 380px at 15% 30%, rgba(224, 112, 16, 0.12), transparent 70%),
		linear-gradient(135deg, var(--vvdm-navy-deep) 0%, var(--vvdm-navy) 60%, var(--vvdm-navy-soft) 100%);
}

/* Dezenter Schwung-Strich rechts unten — Logo-Anlehnung, statisch */
.page-hero-swoosh {
	position: absolute;
	bottom: 22px;
	right: 32px;
	width: 140px;
	height: 22px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--vvdm-orange) 35%,
		var(--vvdm-orange-warm) 60%,
		transparent 100%);
	transform: skewX(-22deg);
	filter: blur(2px);
	opacity: 0.55;
}

.page-hero-content {
	position: relative;
	z-index: 2;
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}

/* Eyebrow im Hero etwas kräftiger als auf Hellgrund */
.page-hero-eyebrow {
	color: var(--vvdm-orange-warm);
	margin-bottom: 18px;
}

.page-hero h1 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 600;
	line-height: 1.05;
	margin: 0 0 22px;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	max-width: 820px;
	background: linear-gradient(180deg, var(--vvdm-white) 0%, var(--vvdm-white) 55%, #DCE2EA 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.page-hero-lead {
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.65;
	max-width: 640px;
	margin: 0;
}

/* ---------- Page-Hero · Bild-Variante (Modifier) ----------
   Modifier `.page-hero--image` für Subheros mit Foto.
   Bild-Ebene liegt UNTER .page-hero-stripe, dunkler Verlauf
   garantiert Lesbarkeit. Fehlt die Datei, greift Pattern-Fallback. */
.page-hero--image .page-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-image:
		linear-gradient(135deg, rgba(16, 32, 64, 0.80) 0%, rgba(10, 22, 40, 0.55) 100%),
		repeating-linear-gradient(45deg,
			rgba(255, 255, 255, 0.02) 0px,
			rgba(255, 255, 255, 0.02) 1px,
			transparent 1px,
			transparent 60px);
	background-color: #15243c;
	z-index: 0;
}

/* Stripe stärker, damit Text auch über hellem Foto lesbar bleibt. */
.page-hero--image .page-hero-stripe {
	background:
		radial-gradient(ellipse 700px 380px at 15% 30%, rgba(224, 112, 16, 0.18), transparent 70%),
		linear-gradient(105deg,
			var(--vvdm-navy-deep)       0%,
			rgba(10, 22, 40, 0.92)     35%,
			rgba(10, 22, 40, 0.55)     70%,
			rgba(10, 22, 40, 0.20)    100%);
	z-index: 1;
}

/* Anker oben rechts — wie Startseite, aber kleiner & ohne Animation,
   damit der Unterseiten-Rang sichtbar bleibt. */
.page-hero-anchor {
	position: absolute;
	right: 32px;
	top: 28px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 4px;
	font-family: var(--vvdm-font-display);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(4px);
}

.page-hero-anchor-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--vvdm-orange);
	box-shadow: 0 0 6px var(--vvdm-orange);
}

@media (max-width: 600px) {
	.page-hero-anchor { right: 18px; top: 18px; padding: 7px 11px; font-size: 9.5px; }
}


/* ---------- Intro-Row (Text links, Visual rechts) ----------
   Pattern analog zu .about-row auf der Startseite, aber lesefreundlicher
   gewichtet: Text-Spalte etwas breiter als das visuelle Element. */
.intro-row-section {
	background: var(--vvdm-white);
	padding: clamp(70px, 9vw, 110px) 0;
}

.intro-row {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 64px;
	align-items: center;
}

.intro-row > * { min-width: 0; } /* Schutz gegen Grid-Sprenger */

.intro-row-text h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--vvdm-navy);
	margin: 8px 0 0;
}

.intro-row-text .swoosh { margin: 22px 0 24px; }

.intro-row-text p {
	color: var(--vvdm-text);
	font-size: 16px;
	line-height: 1.75;
	margin: 0 0 18px;
}

.intro-row-text p:last-child { margin-bottom: 0; }

.intro-row-text p strong {
	color: var(--vvdm-navy);
	font-weight: 600;
}

.intro-row-visual {
	background-size: cover;
	background-position: center;
	border-radius: var(--vvdm-radius);
	min-height: 380px;
	box-shadow: var(--vvdm-shadow-strong);
	position: relative;
	overflow: hidden;
}

/* Dezente Rand-Akzentlinie unten — Logo-Anlehnung, knüpft an Cards der Startseite an */
.intro-row-visual::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--vvdm-orange) 0%,
		var(--vvdm-orange-warm) 50%,
		var(--vvdm-orange) 100%);
}


/* ---------- Section-Header (auch generisch nutzbar) ---------- */
.section-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 56px;
}

.section-header h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 8px 0 12px;
	color: var(--vvdm-text);
}

.section-header .section-intro {
	color: var(--vvdm-text-muted);
	font-size: 16px;
	line-height: 1.7;
	margin: 14px 0 0;
}


/* ---------- Leistungs-Grid mit höhensynchronisierten Karten ----------
   Karten haben zwei klar abgegrenzte Zonen — Header und Body.
   Jede Zone synchronisiert sich automatisch über alle Karten in einer
   Reihe: Alle Header-Boxen gleich hoch, alle Body-Boxen gleich hoch.
   Falls eine Karte weniger Listen-Inhalt hat, bleibt sie unten leer.
*/
.leistungen-section {
	background: var(--vvdm-light);
	padding: clamp(70px, 9vw, 110px) 0;
}

.leistungen-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto 1fr;
	gap: 32px;
	align-items: stretch;
}

.leistungen-grid > * { min-width: 0; }

.leistung-card {
	background: var(--vvdm-white);
	border-radius: var(--vvdm-radius);
	box-shadow: var(--vvdm-shadow);
	border-left: 3px solid var(--vvdm-orange);
	transition: transform var(--vvdm-transition), box-shadow var(--vvdm-transition);
	overflow: hidden;

	/* Karte erbt beide Zeilen-Tracks vom Parent — Header/Body bleiben synchron */
	grid-row: span 2;
	display: grid;
	grid-template-rows: subgrid;
}

.leistung-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--vvdm-shadow-strong);
}

/* Header-Zone — Nummer + Titel.
   Wird automatisch so hoch wie der größte Header in der Reihe. */
.leistung-card-header {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 30px 38px 22px;
	border-bottom: 1px solid var(--vvdm-border);
}

.leistung-num {
	font-family: var(--vvdm-font-display);
	font-size: 48px;
	font-weight: 700;
	line-height: 0.9;
	color: var(--vvdm-orange);
	letter-spacing: 0.02em;
	flex-shrink: 0;
}

.leistung-card h3 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--vvdm-navy);
	margin: 0;
	min-width: 0; /* Schutz im Flex-Layout: lange Wörter dürfen nicht
	                 die Header-Breite über das Card-Maß sprengen */
}

/* Body-Zone — Lead + Liste.
   Wird automatisch so hoch wie der größte Body in der Reihe.
   Karten mit weniger Inhalt haben unten Whitespace. */
.leistung-card-body {
	padding: 22px 38px 36px;
	display: flex;
	flex-direction: column;
}

.leistung-card-lead {
	font-size: 16px;
	line-height: 1.65;
	color: var(--vvdm-text);
	margin: 0 0 22px;
}

.leistung-card-lead strong {
	color: var(--vvdm-navy);
	font-weight: 600;
}

.leistung-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.leistung-list li {
	position: relative;
	padding: 10px 0 10px 28px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--vvdm-text);
	border-top: 1px solid var(--vvdm-border);
}

.leistung-list li:first-child { border-top: none; padding-top: 6px; }

/* Orange-Tick als Bullet — passt zur Logo-Sprache */
.leistung-list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 19px;
	width: 12px;
	height: 6px;
	border-left: 2px solid var(--vvdm-orange);
	border-bottom: 2px solid var(--vvdm-orange);
	transform: rotate(-45deg);
}

.leistung-list li:first-child::before { top: 15px; }


/* ---------- Quote-Block ---------- */
.quote-block {
	background: var(--vvdm-white);
	padding: 100px 0;
	position: relative;
}

.quote-inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding: 0 20px;
}

.quote-mark {
	display: block;
	font-family: var(--vvdm-font-display);
	font-size: 72px;
	line-height: 1;
	color: var(--vvdm-orange);
	margin: 0 0 12px;
	user-select: none;
}

.quote-text {
	font-family: var(--vvdm-font-display);
	font-weight: 500;
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.35;
	color: var(--vvdm-text);
	margin: 0 0 28px;
	font-style: normal;
	letter-spacing: 0.005em;
}

.quote-tagline {
	font-family: var(--vvdm-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vvdm-text-muted);
	margin: 0;
}


/* Tablet-Anpassungen für Unterseiten */
@media (max-width: 900px) {
	.intro-row { grid-template-columns: 1fr; gap: 40px; }
	.intro-row-visual { min-height: 280px; order: 2; }
	.leistungen-grid { grid-template-columns: 1fr; gap: 24px; }
	.leistung-card-header { padding: 28px 32px; }
	.leistung-card-body { padding: 28px 32px 32px; }
	.page-hero { padding: 90px 0 70px; }
}


/* =============================================================
   10. RESPONSIVE BREAKPOINTS
   ============================================================= */

@media (max-width: 1100px) {
	/* Bei mittleren Screens: Text oben, Karten 3-spaltig darunter
	   (volle Breite) — bleibt lesbar und nichts wird gequetscht. */
	.about-row { grid-template-columns: 1fr; gap: 48px; }

	/* Footer auf Tablet: Brand spannt volle Breite oben,
	   darunter die drei Säulen nebeneinander + Kontakt.
	   Mit auto-fill für sanftes Umbrechen. */
	.footer-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 32px;
	}
	.footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
	/* Engerer Tablet-Bereich: 2x2 für die Säulen+Kontakt unter dem Brand. */
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   HEADER — Mobile-Breakpoint
   Ab 1024px: Burger sichtbar, Navi wird zum Drawer von rechts.
   Reihenfolge im Flex: Logo | Pod | Burger (rechts).
   ============================================================ */
@media (max-width: 1024px) {
	.nav-wrap {
		gap: 12px;
		padding: 12px 18px;
		justify-content: space-between;
	}

	/* Burger sichtbar, ganz rechts */
	.nav-toggle {
		display: flex;
		order: 3;
	}

	/* Logo links — bleibt am Anfang */
	.logo { order: 1; }

	/* Motorsport-Pod zwischen Logo und Burger, schrumpft etwas */
	.motorsport-pod {
		order: 2;
		gap: 9px;
		padding-left: 16px;
	}
	.motorsport-pod-brand { font-size: 15px; }

	/* Navi wird zum Drawer von rechts */
	.site-navigation {
		position: fixed;
		top: 0; right: 0;
		height: 100vh;
		width: min(86vw, 340px);
		background: linear-gradient(180deg, var(--vvdm-navy-deep) 0%, #050B14 100%);
		border-left: 1px solid rgba(224, 112, 16, 0.35);
		padding: 84px 24px 32px;
		flex-direction: column;
		justify-content: flex-start;
		z-index: 95;
		transform: translateX(100%);
		transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
		overflow-y: auto;
	}

	.site-navigation.is-open { transform: translateX(0); }

	.site-navigation .primary-menu {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 4px;
	}

	.site-navigation .primary-menu a {
		font-size: 14px;
		padding: 14px 16px;
		letter-spacing: 0.10em;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		border-radius: 0;
	}

	.site-navigation .primary-menu .current-menu-item > a::after,
	.site-navigation .primary-menu .current_page_item > a::after {
		display: none;
	}

	/* Body-Scroll sperren, wenn Drawer offen */
	body.nav-is-open { overflow: hidden; }
}

@media (max-width: 480px) {
	.nav-wrap { padding: 10px 14px; gap: 10px; }
	.logo .site-logo,
	.logo .custom-logo { height: 40px; }

	/* Auf sehr schmalen Geräten: "VVDM presents" ausblenden, Marke bleibt */
	.motorsport-pod {
		gap: 8px;
		padding-left: 14px;
	}
	.motorsport-pod-pre { display: none; }
	.motorsport-pod-brand { font-size: 14px; }
}

@media (max-width: 900px) {
	.about-cards { grid-template-columns: 1fr; }
	.cta-stripe .container { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
	.hero { padding: 60px 0 80px; min-height: 540px; }
	.hero h1 { font-size: clamp(28px, 8vw, 40px); }
	.hero-buttons { flex-direction: column; align-items: stretch; }
	.hero-buttons .btn { justify-content: center; }
	.footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.footer-brand { grid-column: span 1; }
	.footer-bottom { flex-direction: column; text-align: center; }

	/* Unterseiten — kompakte Mobile-Varianten */
	.page-hero { padding: 70px 0 56px; min-height: 0; }
	.page-hero h1 { font-size: clamp(30px, 8vw, 44px); }
	.intro-row-section { padding: 56px 0; }
	.intro-row { gap: 32px; }
	.intro-row-visual { min-height: 220px; }
	.leistungen-section { padding: 56px 0 72px; }
	.leistungen-grid { grid-template-columns: 1fr; gap: 24px; }
	.leistung-card-header { padding: 24px 26px; gap: 16px; }
	.leistung-num { font-size: 38px; }
	.leistung-card-body { padding: 24px 26px 28px; }
	.quote-block { padding: 64px 0; }
	.quote-text { font-size: clamp(20px, 5.5vw, 26px); }
	.quote-mark { font-size: 56px; margin-bottom: 10px; }
}


/* =============================================================
   11. ANIMATIONEN
   Swoosh-Effekte für Hero und Cards.
   Respektieren prefers-reduced-motion.
   ============================================================= */

/* ---------- Hero: animierter Swoosh-Layer ---------- */
.hero-swoosh-anim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

.hero-swoosh-anim::before,
.hero-swoosh-anim::after {
	content: '';
	position: absolute;
	height: 2px;
	width: 60%;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(224, 112, 16, 0.55) 35%,
		rgba(255, 165, 80, 0.85) 50%,
		rgba(224, 112, 16, 0.55) 65%,
		transparent 100%);
	filter: blur(0.5px);
	transform: skewY(-8deg);
}

.hero-swoosh-anim::before {
	top: 38%;
	animation: vvdm-swoosh-fly 11s ease-in-out infinite;
}

.hero-swoosh-anim::after {
	top: 62%;
	width: 45%;
	opacity: 0.45;
	animation: vvdm-swoosh-fly 14s ease-in-out infinite;
	animation-delay: -5s;
}

@keyframes vvdm-swoosh-fly {
	0%   { left: -65%; opacity: 0; }
	15%  { opacity: 1; }
	85%  { opacity: 1; }
	100% { left: 105%; opacity: 0; }
}

/* Sanfter Glow-Pulse hinter dem Hero-Text */
.hero::before {
	animation: vvdm-glow-pulse 8s ease-in-out infinite;
}

@keyframes vvdm-glow-pulse {
	0%, 100% { opacity: 0.7; }
	50%      { opacity: 1; }
}


/* ---------- Card-Hover: Swoosh läuft drüber ---------- */
.geschaeft-card { position: relative; }

.geschaeft-card .card-image {
	position: relative;
	overflow: hidden;
}

.geschaeft-card .card-image::after {
	content: '';
	position: absolute;
	top: -20%;
	left: -120%;
	width: 90%;
	height: 140%;
	background: linear-gradient(105deg,
		transparent 0%,
		rgba(255, 165, 80, 0.12) 40%,
		rgba(255, 200, 130, 0.35) 50%,
		rgba(255, 165, 80, 0.12) 60%,
		transparent 100%);
	transform: skewX(-18deg);
	transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.geschaeft-card:hover .card-image::after {
	left: 130%;
}

/* Akzent-Linie unter dem Card-Bild — pulst dezent */
.geschaeft-card .card-image::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg,
		var(--vvdm-orange) 0%,
		var(--vvdm-orange-warm) 50%,
		var(--vvdm-orange) 100%);
	transform: scaleX(0.3);
	transform-origin: left center;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.geschaeft-card:hover .card-image::before {
	transform: scaleX(1);
}


/* ---------- Reduzierte Bewegung respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
	.hero-swoosh-anim::before,
	.hero-swoosh-anim::after,
	.hero::before,
	.geschaeft-card .card-image::after {
		animation: none !important;
		transition: none !important;
	}
}


/* =============================================================
   12. LEISTUNGS-GRID — VARIANTE MIT 3 KARTEN (Vermietung)
   Modifier `--three`. Standard-Grid bleibt 2-spaltig (Verwaltung).
   Drei Karten brauchen mehr horizontale Atemluft:
     ≥ 1100px : 3 Spalten
     900–1099 : 2 Spalten + dritte Karte volle Breite
     ≤ 900px  : 1 Spalte (Fallback aus Standard-Media-Query)
   ============================================================= */

@media (min-width: 901px) {
	.leistungen-grid--two {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Bei zwei Karten gönnen wir den Innenpaddings etwas mehr Luft —
   die Karten sind breiter als bei drei und tragen den Raum gut. */
.leistungen-grid--two .leistung-card-header { padding: 32px 38px 22px; }
.leistungen-grid--two .leistung-card-body   { padding: 24px 38px 36px; }

/* Schutz vor langen zusammengesetzten Wörtern wie
   "VAKANZÜBERBRÜCKUNG" oder "NACHFOLGEMANAGEMENT" — bei
   uppercase + letter-spacing können die sonst über die Karte
   hinaus laufen. Gleiches Pattern wie bei --three. */
.leistungen-grid--two .leistung-card h3 {
	font-size: clamp(19px, 1.7vw, 23px);
	letter-spacing: 0;
	word-break: break-word;
	hyphens: auto;
}


@media (min-width: 901px) {
	.leistungen-grid--three {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 901px) and (max-width: 1099px) {
	.leistungen-grid--three {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Dritte Karte: volle Breite, damit nichts allein bleibt. */
	.leistungen-grid--three > .leistung-card:nth-child(3) {
		grid-column: 1 / -1;
	}
}

/* Bei drei Karten reduzieren wir die Innenpaddings minimal,
   damit die Listen-Items nicht umbrechen. */
.leistungen-grid--three .leistung-card-header { padding: 28px 32px 20px; }
.leistungen-grid--three .leistung-card-body   { padding: 22px 32px 32px; }
.leistungen-grid--three .leistung-num          { font-size: 42px; }

/* Lange Karten-Titel ("Geldspielgeräte" o.ä.) brauchen in der
   3-Karten-Variante etwas weniger Letter-Spacing und eine
   word-wrap-Möglichkeit, damit sie nicht abgeschnitten werden. */
.leistungen-grid--three .leistung-card h3 {
	font-size: clamp(18px, 1.6vw, 22px);
	letter-spacing: 0;
	word-break: break-word;
	hyphens: auto;
}


/* =============================================================
   13. STATUS-BADGE FÜR LEISTUNGS-CARDS
   Verfügbarkeits-Hinweis pro Karte. Zwei Varianten:
     - Standard (orange): limitiert / ausgereizt
     - --available (grün): aktiv verfügbar / aufnahmebereit
   Wird auf allen Karten in einer Reihe verwendet, damit die
   Body-Baseline (subgrid) sauber ausgerichtet bleibt.
   ============================================================= */

.leistung-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 6px 12px 6px 10px;
	font-family: var(--vvdm-font-display, inherit);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vvdm-navy);
	background: rgba(224, 112, 16, 0.08);
	border: 1px solid rgba(224, 112, 16, 0.25);
	border-radius: 999px;
	line-height: 1;
}

.leistung-status-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vvdm-orange);
	box-shadow: 0 0 0 3px rgba(224, 112, 16, 0.18);
	flex-shrink: 0;
}

/* Variante: aktiv verfügbar — gedämpftes Grün, das sich harmonisch
   in die Navy/Orange-Palette einfügt (kein Knall-Grün). */
.leistung-status--available {
	background: rgba(46, 138, 96, 0.08);
	border-color: rgba(46, 138, 96, 0.25);
}

.leistung-status--available .leistung-status-dot {
	background: #2E8A60;
	box-shadow: 0 0 0 3px rgba(46, 138, 96, 0.18);
}

/* Karte mit limitierter Verfügbarkeit: linker Akzent-Balken etwas
   gedämpfter, damit das Auge zu den verfügbaren Bereichen wandert. */
.leistung-card--limited {
	border-left-color: rgba(224, 112, 16, 0.55);
}


/* =============================================================
   14. ↳ entfernt (frühere .hub-section)
       Diente der Hub-/Verteilerseite /dienstleistungen/, die mit
       v0.9.1 ersatzlos gestrichen wurde. Die zugehörigen
       Card-Komponenten (.geschaeft-card) bleiben weiterhin auf
       der Verwaltungs-Seite in Gebrauch.
   ============================================================= */


/* =============================================================
   15. ↳ entfernt (frühere .badge--new)
       Markierte die Motorsport-Card auf der Hub-Seite als jüngste
       Säule. Wird ohne Hub-Seite nicht mehr gebraucht — die
       Motorsport-Untermarke hat im Bridge-Block auf der Startseite
       ihren eigenen "Live"-Anker.
   ============================================================= */


/* =============================================================
   16. STARTSEITE — Mockup v4

   Alle Sektionen der neu aufgebauten Startseite in einem
   gekapselten Block. Reihenfolge entspricht dem Markup
   in front-page.php:

     16.1  Section-Eyebrow + orange-Span (Helfer)
     16.2  Swoosh-Element (Logo-DNA als Designelement)
     16.3  Reveal-Basis (IntersectionObserver-Animation)
     16.4  Trust-Bar  (4 Kennzahlen mit Counter)
     16.5  Story      ("Vier Buchstaben. Eine Mission.")
     16.6  Timeline   (4 Knoten mit animierter Linie)
     16.7  Pillars    (3 Geschäftsfeld-Cards, editorial)
     16.8  Quote      (Editorial-Zitat-Pause)
     16.9  Bridge     (Setup-Tail + Motorsport-Anbahner)
     16.10 Cool-Down  (kurze Übergangs-Sektion)
     16.11 CTA-Stripe-Home (heller Abschluss + Kontaktkarte)
     16.12 Animations-Keyframes
     16.13 Responsive (für alle Sektionen oben)

   Eigene Keyframes liegen in 16.12, damit sie bei einem
   späteren Refactoring der globalen Animations-Sektion (11)
   nicht versehentlich entfernt werden.
   ============================================================= */


/* ----- 16.1  Section-Eyebrow + orange-Span ----------------- */

/* Wir überschreiben den globalen .section-eyebrow nicht — die
   Werte hier sind identisch und dienen nur der Sicherheit, falls
   die Reihenfolge der Stylesheets sich später ändert. */

.story-section .section-eyebrow,
.timeline-header .section-eyebrow,
.pillars-header .section-eyebrow,
.cta-stripe-home .section-eyebrow {
	display: inline-block;
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-orange);
	margin-bottom: 14px;
}

/* Orange Verlauf für Highlight-Spans in Headlines.
   Das globale .orange wird verwendet — hier nur die Variante
   für die zweite Hero-Zeile, die etwas anders verlaufen soll. */


/* ----- 16.3  Reveal-Basis ----------------------------------- */

/* Alle .reveal-Elemente starten unsichtbar und kommen sanft nach
   oben rein, sobald der IntersectionObserver in main.js sie als
   sichtbar markiert. Der dezente Skew (-1.5°) referenziert die
   Schräglage des Logo-Swooshs. */
.reveal {
	opacity: 0;
	transform: translateY(24px) skewY(-1.5deg);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0) skewY(0);
}
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }


/* ============================================================
   16.4  TRUST-BAR
   Direkt unter dem Hero, gleiche dunkle Welt — vier Kennzahlen
   nebeneinander. Die Zahlen werden per JS hochgezählt.
   ============================================================ */

.trust-bar {
	background: linear-gradient(180deg, var(--vvdm-navy-deep) 0%, var(--vvdm-navy) 100%);
	padding: 48px 0;
	border-top:    1px solid rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	position: relative;
	overflow: hidden;
}

/* Dezenter Highlight-Strich oben — Chrom-/Logo-Echo. */
.trust-bar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(800px, 80%);
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(224, 112, 16, 0.4) 30%,
		rgba(255, 255, 255, 0.6) 50%,
		rgba(224, 112, 16, 0.4) 70%,
		transparent 100%);
}

.trust-grid {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.trust-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-right: 20px;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.trust-item:last-child { border-right: none; }

.trust-num {
	font-family: var(--vvdm-font-display);
	font-size: clamp(36px, 4vw, 48px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #C0C8D2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.trust-num-suffix {
	color: var(--vvdm-orange-warm);
	font-size: 0.55em;
	margin-left: 4px;
	-webkit-text-fill-color: var(--vvdm-orange-warm);
}

.trust-label {
	color: rgba(255, 255, 255, 0.65);
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
}


/* ============================================================
   16.5  STORY-SECTION  "Vier Buchstaben. Eine Mission."
   2-spaltig: links das V·V·D·M-Raster, rechts der Erzähltext.
   ============================================================ */

.story-section {
	background: var(--vvdm-white);
	padding: clamp(90px, 12vw, 140px) 0;
	position: relative;
	overflow: hidden;
}

/* Sehr dezenter Hintergrund-Glow oben rechts — Logo-Echo. */
.story-section::before {
	content: '';
	position: absolute;
	top: -100px;
	right: -200px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(224, 112, 16, 0.05) 0%, transparent 60%);
	pointer-events: none;
}

.story-row {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 80px;
	align-items: center;
	position: relative;
}

.story-letters {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	max-width: 480px;
}

/* Einzelne Buchstaben-Kachel. Quadratisch (aspect-ratio 1)
   damit das Raster gleichmäßig wird, auch wenn der Buchstabe
   variiert (V hat eine andere Form als M). */
.letter-box {
	position: relative;
	aspect-ratio: 1;
	background: var(--vvdm-light);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	border: 1px solid var(--vvdm-border);
}

.letter-box::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		rgba(16, 32, 64, 0.02) 0%,
		rgba(224, 112, 16, 0.04) 100%);
}

.letter-box .letter {
	font-family: var(--vvdm-font-display);
	font-size: clamp(80px, 11vw, 140px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	position: relative;
	z-index: 2;
	background: linear-gradient(180deg, var(--vvdm-navy) 0%, var(--vvdm-navy-soft) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bedeutungstext — sitzt unsichtbar unter dem Buchstaben und
   wird beim Hover sichtbar. */
.letter-box .letter-meaning {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--vvdm-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-text-muted);
	z-index: 2;
	opacity: 0;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.letter-box:hover {
	background: var(--vvdm-navy-deep);
	border-color: var(--vvdm-orange);
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(16, 32, 64, 0.25);
}

.letter-box:hover .letter {
	background: linear-gradient(135deg, var(--vvdm-orange-warm) 0%, var(--vvdm-orange) 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.letter-box:hover .letter-meaning {
	opacity: 1;
	color: var(--vvdm-silver-light);
}

/* Highlight-Schwung läuft beim Hover über die Buchstaben. */
.letter-box::after {
	content: '';
	position: absolute;
	top: -20%;
	left: -120%;
	width: 90%;
	height: 140%;
	background: linear-gradient(105deg,
		transparent 0%,
		rgba(255, 165, 80, 0.15) 50%,
		transparent 100%);
	transform: skewX(-18deg);
	transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}
.letter-box:hover::after { left: 130%; }

.story-text h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(36px, 4.5vw, 56px);
	font-weight: 600;
	line-height: 1.0;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--vvdm-navy);
	margin: 0 0 12px;
}

.story-text p {
	color: var(--vvdm-text);
	font-size: 16px;
	line-height: 1.75;
	margin: 0 0 20px;
}

.story-text .lead {
	font-size: 18px;
	color: var(--vvdm-text);
}

.story-text strong {
	color: var(--vvdm-navy);
	font-weight: 600;
}


/* ============================================================
   16.6  TIMELINE  (4 Knoten: 2009 / 2018 / 2025 / 2026)
   Hintergrund-Linie + animierte Fortschritts-Linie + Knoten.
   Die Animation wird von main.js getriggert.
   ============================================================ */

.timeline-section {
	background: linear-gradient(180deg, var(--vvdm-navy-deep) 0%, var(--vvdm-navy) 100%);
	padding: clamp(90px, 12vw, 130px) 0 clamp(110px, 14vw, 150px);
	color: var(--vvdm-white);
	position: relative;
	overflow: hidden;
}

/* Diagonale Glow-Spots als Hintergrundsignatur — referenzieren
   das radiale Glow im Hero, halten so die optische Klammer. */
.timeline-section::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 100%;
	background:
		radial-gradient(ellipse 800px 200px at 20% 10%, rgba(224, 112, 16, 0.08), transparent 70%),
		radial-gradient(ellipse 600px 200px at 80% 90%, rgba(224, 112, 16, 0.05), transparent 70%);
	pointer-events: none;
}

.timeline-header {
	max-width: 720px;
	margin: 0 auto 80px;
	padding: 0 24px;
	text-align: center;
	position: relative;
}

.timeline-header .section-eyebrow { color: var(--vvdm-orange-warm); }

.timeline-header h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(34px, 4.2vw, 50px);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--vvdm-white);
	margin: 0 0 16px;
	line-height: 1.05;
	letter-spacing: 0.005em;
}

.timeline-header p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 17px;
	line-height: 1.65;
	margin-top: 18px;
}

.timeline-wrap {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
}

/* Hintergrund-Linie — immer sichtbar, blass. */
.timeline-line {
	position: absolute;
	top: 32px;
	left: 8%;
	right: 8%;
	height: 2px;
	background: rgba(255, 255, 255, 0.10);
	z-index: 1;
}

/* Animierte Fortschritts-Linie — Breite wird per JS gesetzt,
   die Transition hier sorgt für die smoothe Animation. */
.timeline-progress {
	position: absolute;
	top: 32px;
	left: 8%;
	height: 2px;
	width: 0;
	background: linear-gradient(90deg,
		var(--vvdm-orange-warm) 0%,
		var(--vvdm-orange)     50%,
		var(--vvdm-orange-warm) 100%);
	box-shadow: 0 0 12px rgba(224, 112, 16, 0.6);
	z-index: 2;
	transition: width 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	position: relative;
	z-index: 3;
}

.timeline-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Outer-Dot — Hülse, in der der innere Punkt sitzt. */
.timeline-dot {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--vvdm-navy-deep);
	border: 2px solid rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	position: relative;
	transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Glow-Aura — wird beim Aktivieren sichtbar. */
.timeline-dot::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 112, 16, 0.3) 0%, transparent 60%);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.timeline-node.is-active .timeline-dot {
	border-color: var(--vvdm-orange);
	background: linear-gradient(135deg, var(--vvdm-navy) 0%, var(--vvdm-navy-soft) 100%);
}

.timeline-node.is-active .timeline-dot::before { opacity: 1; }

.timeline-dot-inner {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--vvdm-orange);
	box-shadow: 0 0 12px rgba(224, 112, 16, 0.8);
	transform: scale(0);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-node.is-active .timeline-dot-inner { transform: scale(1); }

.timeline-year {
	font-family: var(--vvdm-font-display);
	font-size: clamp(32px, 3.5vw, 42px);
	font-weight: 600;
	line-height: 1;
	color: var(--vvdm-white);
	letter-spacing: 0.005em;
	margin-bottom: 10px;
}

.timeline-label {
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vvdm-orange-warm);
	margin-bottom: 8px;
}

.timeline-desc {
	color: rgba(255, 255, 255, 0.70);
	font-size: 14px;
	line-height: 1.55;
	max-width: 220px;
}


/* ============================================================
   16.7  PILLARS  (Drei Säulen, editorial)
   Drei Karten mit Bild oben, Body unten — Bild als
   Hintergrundbild gesetzt; wenn nicht da, Karomuster-Fallback.
   ============================================================ */

.pillars-section {
	background: var(--vvdm-white);
	padding: clamp(90px, 12vw, 130px) 0;
	position: relative;
	overflow: hidden;
}

.pillars-header {
	max-width: 720px;
	margin: 0 auto 70px;
	padding: 0 24px;
	text-align: center;
}

.pillars-header h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(34px, 4.2vw, 50px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--vvdm-navy);
	margin: 0 0 16px;
}

.pillars-header p {
	color: var(--vvdm-text);
	font-size: 17px;
	line-height: 1.65;
	margin-top: 18px;
}

.pillars-grid {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.pillar-card {
	background: var(--vvdm-white);
	border: 1px solid var(--vvdm-border);
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(16, 32, 64, 0.15);
	border-color: rgba(224, 112, 16, 0.30);
}

/* Bild-Bereich. Wenn front-page.php ein Hintergrundbild setzt,
   überdeckt es den Karomuster-Fallback automatisch. */
.pillar-image {
	aspect-ratio: 4/3;
	background-size: cover;
	background-position: center;
	/* Fallback-Muster (greift nur, wenn front-page.php kein Bild liefert). */
	background-image:
		linear-gradient(135deg, rgba(16, 32, 64, 0.08) 0%, rgba(224, 112, 16, 0.05) 100%),
		repeating-linear-gradient(45deg,
			rgba(16, 32, 64, 0.03) 0px,
			rgba(16, 32, 64, 0.03) 1px,
			transparent 1px,
			transparent 30px);
	background-color: var(--vvdm-light);
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 18px;
	overflow: hidden;
}

/* Akzentlinie unten am Bild — fährt beim Hover auf 100% Breite. */
.pillar-image::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--vvdm-orange) 0%,
		var(--vvdm-orange-warm) 50%,
		var(--vvdm-orange) 100%);
	transform: scaleX(0.25);
	transform-origin: left center;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar-card:hover .pillar-image::after { transform: scaleX(1); }

.pillar-num {
	font-family: var(--vvdm-font-display);
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	background: linear-gradient(135deg, var(--vvdm-navy) 0%, var(--vvdm-navy-soft) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: -0.02em;
	/* Lesbarkeits-Schutz, falls hinter dem Badge ein helles Foto liegt. */
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

.pillar-badge {
	background: var(--vvdm-orange);
	color: var(--vvdm-white);
	font-family: var(--vvdm-font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 3px;
	align-self: flex-start;
	box-shadow: 0 2px 8px rgba(224, 112, 16, 0.40);
}

.pillar-body {
	padding: 28px 28px 32px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.pillar-body h3 {
	font-family: var(--vvdm-font-display);
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--vvdm-navy);
	margin: 0 0 6px;
	letter-spacing: 0.01em;
}

.pillar-tagline {
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--vvdm-orange);
	margin-bottom: 16px;
}

.pillar-body p {
	color: var(--vvdm-text);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0 0 22px;
	flex-grow: 1;
}

.pillar-link {
	font-family: var(--vvdm-font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--vvdm-orange);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: gap 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.pillar-link span { transition: transform 0.25s ease; display: inline-block; }
.pillar-card:hover .pillar-link      { gap: 14px; }
.pillar-card:hover .pillar-link span { transform: translateX(4px); }


/* ============================================================
   16.8  QUOTE-SECTION  (Editorial-Pause)
   Ruhige Sektion auf hellem Grund — bewusste Atempause vor
   dem Stilbruch in den Bridge-Block.
   ============================================================ */

.quote-section {
	background: var(--vvdm-light);
	padding: clamp(90px, 12vw, 130px) 0;
	position: relative;
	overflow: hidden;
}

.quote-section::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(224, 112, 16, 0.04) 0%, transparent 60%);
	pointer-events: none;
}

.quote-wrap {
	max-width: 920px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
	position: relative;
}

.quote-mark {
	font-family: var(--vvdm-font-display);
	font-size: 96px;
	font-weight: 600;
	color: var(--vvdm-orange);
	line-height: 0.5;
	margin-bottom: 24px;
	opacity: 0.6;
}

.quote-text {
	font-family: var(--vvdm-font-display);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 500;
	color: var(--vvdm-navy);
	line-height: 1.3;
	letter-spacing: 0.005em;
	margin: 0 0 32px;
	font-style: normal;
}

.quote-text .orange { font-weight: 600; }

.quote-cite {
	font-family: var(--vvdm-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.quote-cite::before {
	content: '';
	width: 36px;
	height: 1px;
	background: var(--vvdm-orange);
}


/* ============================================================
   16.9  BRIDGE-BLOCK  (Motorsport-Anbahner)
   Setup-Tail (Verlauf hell → schwarz) + dunkler Bridge-Section
   mit rotem Glow. Bewusster Stilbruch zum Motorsport-Look.
   ============================================================ */

/* Setup-Tail: weicher Verlauf vom hellen Quote-Block in den
   schwarzen Bridge-Block. Macht den Übergang visuell weich
   und kündigt den Stilwechsel an. */
.setup-tail {
	height: 140px;
	background: linear-gradient(180deg,
		var(--vvdm-light) 0%,
		#eaeaee         50%,
		#cacacf         85%,
		#1a1a22        100%);
	position: relative;
}

/* Kleine senkrechte rote Strichmarke — wie ein "Startsignal". */
.setup-tail::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 1px;
	height: 60px;
	background: linear-gradient(180deg, transparent 0%, rgba(220, 30, 30, 0.5) 100%);
}

.bridge-section {
	position: relative;
	background: var(--ms-black, #0B0C12);
	color: var(--vvdm-white);
	padding: clamp(120px, 16vw, 180px) 0 clamp(110px, 14vw, 160px);
	overflow: hidden;
	isolation: isolate;
}

/* Soft-Edge oben — verzahnt sich mit dem Setup-Tail darüber. */
.bridge-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0; right: 0;
	height: 100px;
	background: linear-gradient(180deg,
		rgba(11, 12, 18, 0.4) 0%,
		var(--ms-black, #0B0C12) 100%);
	pointer-events: none;
	z-index: 5;
}

/* Chrom-Highlight ganz oben — kleines Echo des Logo-Vokabulars,
   übersetzt in die Motorsport-Welt (rote statt orange Akzente). */
.bridge-section::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(680px, 70%);
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(220, 30, 30, 0.3) 30%,
		rgba(255, 255, 255, 0.5) 50%,
		rgba(220, 30, 30, 0.3) 70%,
		transparent 100%);
	z-index: 6;
}

/* Roter Glow oben links + unten rechts — der dezente, eilige
   Charakter der Sub-Marke ohne marktschreierisch zu sein. */
.bridge-glow {
	position: absolute;
	top: -60px;
	left: -100px;
	width: 720px;
	height: 540px;
	background: radial-gradient(ellipse,
		rgba(220, 30, 30, 0.18) 0%,
		rgba(220, 30, 30, 0.06) 35%,
		transparent 70%);
	pointer-events: none;
	z-index: 0;
	filter: blur(40px);
}

.bridge-glow-2 {
	position: absolute;
	bottom: -40px;
	right: -120px;
	width: 500px;
	height: 380px;
	background: radial-gradient(ellipse,
		rgba(220, 30, 30, 0.10) 0%,
		transparent 65%);
	pointer-events: none;
	z-index: 0;
	filter: blur(30px);
}

/* Animierte Lichtspuren — von links nach rechts durchziehend. */
.bridge-lines {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	opacity: 0.5;
}
.bridge-lines::before,
.bridge-lines::after {
	content: '';
	position: absolute;
	height: 1px;
	width: 35%;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(220, 30, 30, 0.55) 50%,
		transparent 100%);
	filter: blur(0.4px);
	animation: bridge-line-fly 12s ease-in-out infinite;
}
.bridge-lines::before { top: 32%; animation-delay: 0s; }
.bridge-lines::after  { top: 68%; width: 25%; opacity: 0.5; animation-delay: -6s; }

.bridge-container {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 80px;
	align-items: center;
}

.bridge-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--vvdm-font-motorsport);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 28px;
}

.bridge-eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ms-red, #DC1E1E);
	box-shadow: 0 0 8px var(--ms-red, #DC1E1E);
	animation: bridge-pulse 2.4s ease-in-out infinite;
}

.bridge-headline {
	font-family: var(--vvdm-font-motorsport);
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 600;
	line-height: 1.0;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	margin: 0 0 28px;
	color: var(--vvdm-white);
}
.bridge-headline .red {
	background: linear-gradient(135deg, #ff5959 0%, var(--ms-red, #DC1E1E) 55%, #8a0f0f 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bridge-text {
	color: rgba(255, 255, 255, 0.72);
	font-size: 16px;
	line-height: 1.75;
	margin: 0 0 32px;
	max-width: 480px;
}

.bridge-targets-label {
	font-family: var(--vvdm-font-motorsport);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin: 0 0 14px;
}

.bridge-targets {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bridge-targets li {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(220, 30, 30, 0.3);
	border-radius: 100px;
	font-family: var(--vvdm-font-motorsport);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
	transition: all 0.25s ease;
}

.bridge-targets li:hover {
	background: rgba(220, 30, 30, 0.12);
	border-color: var(--ms-red, #DC1E1E);
	color: #fff;
}

.bridge-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 28px;
	background: var(--ms-black-soft, #16161F);
	color: var(--vvdm-white);
	font-family: var(--vvdm-font-motorsport);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	border: 1px solid rgba(220, 30, 30, 0.4);
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.bridge-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 0% 50%, rgba(220, 30, 30, 0.22) 0%, transparent 60%);
}

.bridge-cta:hover {
	border-color: rgba(220, 30, 30, 0.7);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(220, 30, 30, 0.22);
}

.bridge-cta span.arrow {
	color: var(--ms-red, #DC1E1E);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.bridge-cta:hover span.arrow { transform: translateX(6px); }

/* Visual-Plate rechts — bewusst grafisch, kein Foto. */
.bridge-visual {
	position: relative;
	aspect-ratio: 4/3;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background:
		linear-gradient(135deg, rgba(220, 30, 30, 0.10) 0%, transparent 60%),
		linear-gradient(180deg, #18181f 0%, #0a0a0e 100%);
}

.bridge-visual-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 16px;
	padding: 30px;
}

.bridge-mark {
	font-family: var(--vvdm-font-motorsport);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

.bridge-presents {
	font-family: var(--vvdm-font-motorsport);
	font-size: clamp(38px, 6vw, 60px);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vvdm-white);
	line-height: 1;
	text-align: center;
}

.bridge-presents-sub {
	font-family: var(--vvdm-font-motorsport);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ms-red, #DC1E1E);
}

.bridge-corner {
	position: absolute;
	bottom: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--vvdm-font-motorsport);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);
}

.bridge-corner-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ms-red, #DC1E1E);
	box-shadow: 0 0 5px var(--ms-red, #DC1E1E);
	animation: bridge-pulse 2.4s ease-in-out infinite;
}


/* ============================================================
   16.10  COOL-DOWN
   Kurze Übergangs-Sektion zwischen Bridge (schwarz) und
   CTA-Stripe-Home (hell). "Atempause" optisch zur Hauptwelt.
   ============================================================ */

.cooldown-section {
	background: linear-gradient(180deg,
		var(--ms-black, #0B0C12) 0%,
		#080A12                 40%,
		var(--vvdm-navy-deep)  100%);
	padding: 50px 0;
	position: relative;
	text-align: center;
}

.cooldown-section::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(680px, 70%);
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(224, 112, 16, 0.3) 30%,
		rgba(224, 128, 32, 0.6) 50%,
		rgba(224, 112, 16, 0.3) 70%,
		transparent 100%);
}

.cooldown-back {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--vvdm-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.cooldown-back .vvdm-mark {
	color: var(--vvdm-orange-warm);
	font-weight: 700;
}


/* ============================================================
   16.11  CTA-STRIPE-HOME  (Startseiten-Variante, hell)

   Eigene Variante mit 2-spaltigem Layout: Text + CTA links,
   Kontakt-Karte rechts. Bewusst hell — der Motorsport-Block
   davor bleibt so der einzige dunkle Akzent nach dem Hero.
   Die klassische .cta-stripe-Klasse bleibt für Unterseiten.
   ============================================================ */

.cta-stripe-home {
	background: var(--vvdm-white);
	padding: clamp(90px, 12vw, 130px) 0;
	position: relative;
	overflow: hidden;
}

/* Sehr dezenter Hintergrund-Glow — Wärme, nicht Lautstärke. */
.cta-stripe-home::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 900px;
	height: 600px;
	background: radial-gradient(ellipse, rgba(224, 112, 16, 0.05) 0%, transparent 65%);
	pointer-events: none;
}

/* Zarte Trenn-Linie oben — referenziert die Logo-Swoosh-DNA. */
.cta-stripe-home::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(680px, 70%);
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(224, 112, 16, 0.3) 30%,
		rgba(224, 128, 32, 0.6) 50%,
		rgba(224, 112, 16, 0.3) 70%,
		transparent 100%);
}

.cta-stripe-inner {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 64px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.cta-stripe-home h2 {
	font-family: var(--vvdm-font-display);
	color: var(--vvdm-navy);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.cta-stripe-home p {
	color: var(--vvdm-text);
	font-size: 17px;
	line-height: 1.65;
	margin: 0 0 28px;
	max-width: 480px;
}

/* Kontakt-Karte rechts — hebt sich elegant durch dezenten
   Rahmen und linke Akzentlinie ab. */
.cta-contacts {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 32px;
	background: var(--vvdm-light);
	border: 1px solid var(--vvdm-border);
	border-radius: 10px;
	position: relative;
	overflow: hidden;
}

.cta-contacts::before {
	content: '';
	position: absolute;
	left: 0;
	top: 24px;
	bottom: 24px;
	width: 3px;
	background: linear-gradient(180deg,
		var(--vvdm-orange) 0%,
		var(--vvdm-orange-warm) 50%,
		var(--vvdm-orange) 100%);
	border-radius: 0 2px 2px 0;
}

.cta-contacts-label {
	font-family: var(--vvdm-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-orange);
	margin: 0 0 16px;
}

.cta-contacts a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	color: var(--vvdm-navy);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	transition: color 0.2s ease, transform 0.2s ease;
	border-bottom: 1px solid var(--vvdm-border);
}

.cta-contacts a:last-child { border-bottom: none; }

.cta-contacts a:hover {
	color: var(--vvdm-orange-dark);
	transform: translateX(3px);
}

.cta-contacts a svg {
	width: 18px;
	height: 18px;
	color: var(--vvdm-orange);
	flex-shrink: 0;
}


/* ============================================================
   16.12  ANIMATIONS-KEYFRAMES (gekapselt)

   Diese Keyframes gehören thematisch zur Startseite und liegen
   deshalb hier — nicht in der globalen Sektion 11 — damit sie
   bei einem späteren Refactoring nicht verloren gehen.
   ============================================================ */

@keyframes vvdm-draw-swoosh {
	to { stroke-dashoffset: 0; }
}

@keyframes vvdm-glow-pulse {
	0%, 100% { opacity: 0.7; }
	50%      { opacity: 1; }
}

@keyframes vvdm-fade-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes bridge-pulse {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.8); }
}

@keyframes bridge-line-fly {
	0%   { left: -40%; opacity: 0; }
	18%  { opacity: 1; }
	82%  { opacity: 1; }
	100% { left: 105%; opacity: 0; }
}


/* ============================================================
   16.13  RESPONSIVE für alle Startseiten-Sektionen
   ============================================================ */

@media (max-width: 1024px) {
	.story-row        { grid-template-columns: 1fr; gap: 56px; }
	.story-letters    { max-width: 400px; margin: 0 auto; }
	.timeline-grid    { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
	.timeline-line,
	.timeline-progress { display: none; }
	.pillars-grid     { grid-template-columns: 1fr; max-width: 500px; }
	.bridge-container { grid-template-columns: 1fr; gap: 56px; }
	.cta-stripe-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
	.hero-anchor { right: 16px; top: 16px; }
	.trust-grid  { grid-template-columns: 1fr 1fr; gap: 24px; }
	.trust-item:nth-child(2) { border-right: none; }
	.trust-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 20px; }
	.trust-item:nth-last-child(-n+2) { border-bottom: none; }
	.timeline-grid  { grid-template-columns: 1fr; }
	.story-letters  { max-width: 280px; }
}

/* Bewegung minimieren für Nutzer, die das in den OS-Einstellungen
   so gewählt haben. Pflicht für gute Barrierefreiheit. */
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; }
	.hero-logo-swoosh path {
		stroke-dashoffset: 0;
		animation: none;
	}
}
.vm-facts-bar {
	background: linear-gradient(180deg, var(--vvdm-navy-deep) 0%, var(--vvdm-navy) 100%);
	padding: 56px 0;
	border-top:    1px solid rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	position: relative;
	overflow: hidden;
}

/* Dezenter Highlight-Strich oben — Chrom-/Logo-Echo. */
.vm-facts-bar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(800px, 80%);
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(224, 112, 16, 0.4) 30%,
		rgba(255, 255, 255, 0.6) 50%,
		rgba(224, 112, 16, 0.4) 70%,
		transparent 100%);
}

.vm-facts-grid {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.vm-fact-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-right: 20px;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.vm-fact-item:last-child { border-right: none; }

.vm-fact-num {
	font-family: var(--vvdm-font-display);
	font-size: clamp(36px, 4vw, 48px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #C0C8D2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.vm-fact-num-suffix {
	color: var(--vvdm-orange-warm);
	font-size: 0.55em;
	margin-left: 4px;
	-webkit-text-fill-color: var(--vvdm-orange-warm);
}

.vm-fact-label {
	color: rgba(255, 255, 255, 0.65);
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
}


/* =============================================================
   17.3  INTRO-ROW  —  Visual links, Text rechts
   Inspiriert von .story-section, aber 2-spaltig schlanker.
   ============================================================= */

.vm-intro-section {
	background: var(--vvdm-white);
	padding: clamp(90px, 12vw, 130px) 0;
	position: relative;
	overflow: hidden;
}

/* Sehr dezenter Hintergrund-Glow oben rechts — Logo-Echo. */
.vm-intro-section::before {
	content: '';
	position: absolute;
	top: -100px;
	right: -200px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(224, 112, 16, 0.05) 0%, transparent 60%);
	pointer-events: none;
}

.vm-intro-row {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 80px;
	align-items: center;
	position: relative;
}

.vm-intro-visual {
	position: relative;
	aspect-ratio: 4/5;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--vvdm-navy-soft);
	background-size: cover;
	background-position: center;
	box-shadow: var(--vvdm-shadow-strong);
}

/* Sanfter Verlauf von oben links nach unten rechts —
   sorgt dafür, dass der Badge auch auf hellen Fotos lesbar bleibt. */
.vm-intro-visual::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		rgba(16, 32, 64, 0.0) 0%,
		rgba(16, 32, 64, 0.35) 100%);
}

.vm-intro-visual-badge {
	position: absolute;
	bottom: 24px;
	left: 24px;
	z-index: 2;
	padding: 10px 18px;
	background: rgba(10, 22, 40, 0.85);
	border: 1px solid rgba(224, 112, 16, 0.5);
	border-radius: 4px;
	color: var(--vvdm-white);
	font-family: var(--vvdm-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
}

.vm-intro-text h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0 0 20px;
	color: var(--vvdm-navy);
}

.vm-intro-text p {
	margin: 0 0 16px;
	color: var(--vvdm-text);
}

.vm-intro-text p.lead {
	font-size: 19px;
	line-height: 1.6;
}

.vm-intro-text strong {
	color: var(--vvdm-navy);
	font-weight: 700;
}


/* =============================================================
   17.4  PILLARS-GRID  —  drei Bereichs-Karten gleichberechtigt
   Echo der .pillars-grid von der Startseite, eigene Klassen
   damit Status-Badge & Hover-Verhalten unabhängig anpassbar bleiben.
   ============================================================= */

.vm-pillars-section {
	background: var(--vvdm-light);
	padding: clamp(90px, 12vw, 130px) 0;
	position: relative;
}

.vm-pillars-header {
	max-width: 720px;
	margin: 0 auto 64px;
	padding: 0 24px;
	text-align: center;
}

.vm-pillars-header h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(32px, 4.2vw, 48px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: var(--vvdm-navy);
}

.vm-pillars-header p {
	font-size: 17px;
	color: var(--vvdm-text-muted);
	margin: 0;
}

.vm-pillars-grid {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.vm-pillar-card {
	background: var(--vvdm-white);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--vvdm-shadow);
	display: flex;
	flex-direction: column;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	border: 1px solid var(--vvdm-border);
	position: relative;
}

.vm-pillar-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--vvdm-shadow-strong);
}

.vm-pillar-card:hover .vm-pillar-image-inner {
	transform: scale(1.06);
}

.vm-pillar-image {
	position: relative;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--vvdm-navy-soft);
}

.vm-pillar-image-inner {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sanfter Verlauf unten — schützt Lesbarkeit der Nummer
   und des Status-Badges über echten Fotos. */
.vm-pillar-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(10, 22, 40, 0.0) 0%,
		rgba(10, 22, 40, 0.0) 50%,
		rgba(10, 22, 40, 0.5) 100%);
	pointer-events: none;
}

.vm-pillar-num {
	position: absolute;
	top: 20px;
	left: 24px;
	z-index: 2;
	font-family: var(--vvdm-font-display);
	font-size: 36px;
	font-weight: 700;
	color: var(--vvdm-white);
	line-height: 1;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.vm-pillar-status {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: rgba(10, 22, 40, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	font-family: var(--vvdm-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vvdm-white);
	backdrop-filter: blur(8px);
}

.vm-pillar-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #5cb85c;
	box-shadow: 0 0 8px rgba(92, 184, 92, 0.7);
}

/* Modifier für die Fahrzeug-Karte: "Kapazitäten ausgereizt" —
   orange statt grün, signalisiert Sonderstatus dezent. */
.vm-pillar-status--limited {
	border-color: rgba(224, 112, 16, 0.5);
}
.vm-pillar-status--limited .vm-pillar-status-dot {
	background: var(--vvdm-orange-warm);
	box-shadow: 0 0 8px rgba(224, 128, 32, 0.7);
}

.vm-pillar-body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.vm-pillar-body h3 {
	font-family: var(--vvdm-font-display);
	font-size: 26px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0 0 6px;
	color: var(--vvdm-navy);
}

.vm-pillar-tagline {
	font-family: var(--vvdm-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-orange);
	margin-bottom: 16px;
}

.vm-pillar-body p {
	margin: 0 0 20px;
	color: var(--vvdm-text);
	font-size: 15px;
}

.vm-pillar-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.vm-pillar-list li {
	padding: 8px 0;
	padding-left: 22px;
	position: relative;
	font-size: 14px;
	color: var(--vvdm-text);
	border-top: 1px solid var(--vvdm-border);
}
.vm-pillar-list li:first-child { border-top: none; }

/* Akzent-Strich vor jedem Listenpunkt — Echo des Swoosh-Skews. */
.vm-pillar-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 16px;
	width: 12px;
	height: 2px;
	background: var(--vvdm-orange);
	transform: skewX(-18deg);
}

.vm-pillar-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--vvdm-navy);
	font-family: var(--vvdm-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding-top: 16px;
	border-top: 1px solid var(--vvdm-border);
	transition: color 0.25s ease, gap 0.25s ease;
}

.vm-pillar-cta:hover {
	color: var(--vvdm-orange);
	gap: 14px;
}

.vm-pillar-cta .arrow {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.vm-pillar-cta:hover .arrow {
	transform: translateX(4px);
}


/* =============================================================
   17.5  WHY-GRID  —  vier Vorteils-Items, ruhig & textorientiert
   ============================================================= */

.vm-why-section {
	background: var(--vvdm-white);
	padding: clamp(90px, 12vw, 130px) 0;
}

.vm-why-header {
	max-width: 720px;
	margin: 0 auto 56px;
	padding: 0 24px;
	text-align: center;
}

.vm-why-header h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0;
	color: var(--vvdm-navy);
}

.vm-why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.vm-why-item {
	padding: 28px 24px;
	border-top: 2px solid var(--vvdm-navy);
	background: var(--vvdm-white);
	transition: border-color 0.3s ease;
}

.vm-why-item:hover {
	border-top-color: var(--vvdm-orange);
}

.vm-why-num {
	font-family: var(--vvdm-font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--vvdm-orange);
	letter-spacing: 0.18em;
	margin-bottom: 12px;
}

.vm-why-item h3 {
	font-family: var(--vvdm-font-display);
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: var(--vvdm-navy);
}

.vm-why-item p {
	font-size: 14px;
	color: var(--vvdm-text-muted);
	margin: 0;
	line-height: 1.6;
}


/* =============================================================
   17.6  QUOTE-SECTION  —  Philosophie-Zitat auf Navy
   Eigene Klassen, weil .quote-section auf der Startseite leicht
   anders aufgebaut ist und wir hier nichts überschreiben wollen.
   ============================================================= */

.vm-quote-section {
	background: linear-gradient(180deg, var(--vvdm-navy-deep) 0%, var(--vvdm-navy) 100%);
	padding: clamp(90px, 11vw, 130px) 0;
	color: var(--vvdm-white);
	position: relative;
	overflow: hidden;
}

.vm-quote-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background:
		radial-gradient(ellipse 800px 200px at 20% 10%, rgba(224, 112, 16, 0.08), transparent 70%),
		radial-gradient(ellipse 600px 200px at 80% 90%, rgba(224, 112, 16, 0.05), transparent 70%);
	pointer-events: none;
}

.vm-quote-wrap {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
	position: relative;
	z-index: 2;
}

.vm-quote-mark {
	font-family: var(--vvdm-font-display);
	font-size: 120px;
	line-height: 1;
	color: var(--vvdm-orange);
	opacity: 0.4;
	margin-bottom: -30px;
}

.vm-quote-text {
	font-family: var(--vvdm-font-display);
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
	margin: 0 0 28px;
	color: var(--vvdm-white);
}

.vm-quote-cite {
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vvdm-orange-warm);
}


/* =============================================================
   17.7  CTA-STRIPE  —  Anfrage + Direkt-Kontakte
   Echo der .cta-stripe-home, eigene Klassen für saubere Trennung.
   ============================================================= */

.vm-cta-stripe {
	background: var(--vvdm-light);
	padding: clamp(70px, 9vw, 100px) 0;
	border-top: 1px solid var(--vvdm-border);
}

.vm-cta-inner {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 64px;
	align-items: center;
}

.vm-cta-inner h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(28px, 3.8vw, 42px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 14px;
	color: var(--vvdm-navy);
}

.vm-cta-inner > div > p {
	font-size: 16px;
	color: var(--vvdm-text-muted);
	margin: 0 0 24px;
	max-width: 540px;
}

.vm-cta-contacts {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	background: var(--vvdm-white);
	border: 1px solid var(--vvdm-border);
	border-radius: 8px;
	box-shadow: var(--vvdm-shadow);
}

.vm-cta-contacts-label {
	font-family: var(--vvdm-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-orange);
	margin: 0 0 8px;
}

.vm-cta-contacts a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--vvdm-navy);
	font-family: var(--vvdm-font-body);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: 6px 0;
	transition: color 0.25s ease;
}

.vm-cta-contacts a:hover {
	color: var(--vvdm-orange);
}

.vm-cta-contacts svg {
	width: 18px;
	height: 18px;
	color: var(--vvdm-orange);
	flex-shrink: 0;
}


/* =============================================================
   17.8  RESPONSIVE BREAKPOINTS  —  Vermietungs-Seite
   ============================================================= */

@media (max-width: 960px) {

	/* Facts-Bar: 4 → 2 Spalten */
	.vm-facts-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 32px;
	}
	.vm-fact-item:nth-child(2) { border-right: none; }

	/* Intro-Row: nebeneinander → untereinander */
	.vm-intro-row {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.vm-intro-visual {
		aspect-ratio: 16/10;
		max-height: 380px;
	}

	/* Pillars: 3 → 1 Spalte */
	.vm-pillars-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Why: 4 → 2 Spalten */
	.vm-why-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	/* CTA: nebeneinander → untereinander */
	.vm-cta-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 560px) {

	/* Facts-Bar: 2 → 1 Spalte, Trennlinien wandern nach unten */
	.vm-facts-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.vm-fact-item {
		border-right: none;
		padding-right: 0;
		padding-bottom: 24px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	.vm-fact-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	/* Why: 2 → 1 Spalte */
	.vm-why-grid {
		grid-template-columns: 1fr;
	}

	/* Pillar-Body etwas enger packen */
	.vm-pillar-body { padding: 24px; }
}

/* =============================================================
   18.1  INTRO-ROW  —  Visual links, Text rechts
   Identische Logik wie .vm-intro-row auf der Vermietungsseite,
   eigene Klassen damit Anpassungen entkoppelt bleiben.
   ============================================================= */

.vw-intro-section {
	background: var(--vvdm-white);
	padding: clamp(90px, 12vw, 130px) 0;
	position: relative;
	overflow: hidden;
}

/* Sehr dezenter Hintergrund-Glow oben rechts — Logo-Echo. */
.vw-intro-section::before {
	content: '';
	position: absolute;
	top: -100px;
	right: -200px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(224, 112, 16, 0.05) 0%, transparent 60%);
	pointer-events: none;
}

.vw-intro-row {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 80px;
	align-items: center;
	position: relative;
}

.vw-intro-visual {
	position: relative;
	aspect-ratio: 4/5;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--vvdm-navy-soft);
	background-size: cover;
	background-position: center;
	box-shadow: var(--vvdm-shadow-strong);
}

/* Sanfter Verlauf — sorgt für lesbaren Badge auf hellen Fotos. */
.vw-intro-visual::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		rgba(16, 32, 64, 0.0) 0%,
		rgba(16, 32, 64, 0.35) 100%);
}

.vw-intro-visual-badge {
	position: absolute;
	bottom: 24px;
	left: 24px;
	z-index: 2;
	padding: 10px 18px;
	background: rgba(10, 22, 40, 0.85);
	border: 1px solid rgba(224, 112, 16, 0.5);
	border-radius: 4px;
	color: var(--vvdm-white);
	font-family: var(--vvdm-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
}

.vw-intro-text h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0 0 20px;
	color: var(--vvdm-navy);
}

.vw-intro-text p {
	margin: 0 0 16px;
	color: var(--vvdm-text);
}

.vw-intro-text p.lead {
	font-size: 19px;
	line-height: 1.6;
}

.vw-intro-text strong {
	color: var(--vvdm-navy);
	font-weight: 700;
}


/* =============================================================
   18.2  LEISTUNGS-GRID  —  zwei breite Karten gleichberechtigt
   Bewusst zwei statt drei Spalten: lässt die Sektion ruhiger
   atmen als die dreispaltige Pillar-Grid auf der Vermietung.
   ============================================================= */

.vw-leistungen-section {
	background: var(--vvdm-light);
	padding: clamp(90px, 12vw, 130px) 0;
	position: relative;
}

.vw-leistungen-header {
	max-width: 720px;
	margin: 0 auto 64px;
	padding: 0 24px;
	text-align: center;
}

.vw-leistungen-header h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(32px, 4.2vw, 48px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: var(--vvdm-navy);
}

.vw-leistungen-header p {
	font-size: 17px;
	color: var(--vvdm-text-muted);
	margin: 0;
}

.vw-leistungen-grid {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.vw-leistung-card {
	background: var(--vvdm-white);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--vvdm-shadow);
	display: flex;
	flex-direction: column;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	border: 1px solid var(--vvdm-border);
	position: relative;
}

.vw-leistung-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--vvdm-shadow-strong);
}

.vw-leistung-card:hover .vw-leistung-image-inner {
	transform: scale(1.06);
}

.vw-leistung-image {
	position: relative;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--vvdm-navy-soft);
}

.vw-leistung-image-inner {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sanfter Verlauf unten — schützt Lesbarkeit der Nummer
   über echten Fotos. */
.vw-leistung-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(10, 22, 40, 0.0) 0%,
		rgba(10, 22, 40, 0.0) 50%,
		rgba(10, 22, 40, 0.5) 100%);
	pointer-events: none;
}

.vw-leistung-num {
	position: absolute;
	top: 20px;
	left: 24px;
	z-index: 2;
	font-family: var(--vvdm-font-display);
	font-size: 36px;
	font-weight: 700;
	color: var(--vvdm-white);
	line-height: 1;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.vw-leistung-body {
	padding: 36px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.vw-leistung-body h3 {
	font-family: var(--vvdm-font-display);
	font-size: 28px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0 0 6px;
	color: var(--vvdm-navy);
	line-height: 1.15;
}

.vw-leistung-tagline {
	font-family: var(--vvdm-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-orange);
	margin-bottom: 18px;
}

.vw-leistung-body p {
	margin: 0 0 22px;
	color: var(--vvdm-text);
	font-size: 15px;
	line-height: 1.65;
}

.vw-leistung-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.vw-leistung-list li {
	padding: 10px 0;
	padding-left: 22px;
	position: relative;
	font-size: 14px;
	color: var(--vvdm-text);
	border-top: 1px solid var(--vvdm-border);
}
.vw-leistung-list li:first-child { border-top: none; }

/* Akzent-Strich vor jedem Listenpunkt — Echo des Swoosh-Skews. */
.vw-leistung-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 18px;
	width: 12px;
	height: 2px;
	background: var(--vvdm-orange);
	transform: skewX(-18deg);
}

.vw-leistung-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--vvdm-navy);
	font-family: var(--vvdm-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding-top: 18px;
	border-top: 1px solid var(--vvdm-border);
	transition: color 0.25s ease, gap 0.25s ease;
}

.vw-leistung-cta:hover {
	color: var(--vvdm-orange);
	gap: 14px;
}

.vw-leistung-cta .arrow {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.vw-leistung-cta:hover .arrow {
	transform: translateX(4px);
}


/* =============================================================
   18.3  QUOTE-SECTION  —  Philosophie-Zitat auf Navy
   Klanggleich zur .vm-quote-section, eigene Klassen für saubere
   Entkopplung. Die Glow-Spots sind hier minimal anders verteilt.
   ============================================================= */

.vw-quote-section {
	background: linear-gradient(180deg, var(--vvdm-navy-deep) 0%, var(--vvdm-navy) 100%);
	padding: clamp(90px, 11vw, 130px) 0;
	color: var(--vvdm-white);
	position: relative;
	overflow: hidden;
}

.vw-quote-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background:
		radial-gradient(ellipse 800px 200px at 80% 10%, rgba(224, 112, 16, 0.08), transparent 70%),
		radial-gradient(ellipse 600px 200px at 20% 90%, rgba(224, 112, 16, 0.05), transparent 70%);
	pointer-events: none;
}

.vw-quote-wrap {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
	position: relative;
	z-index: 2;
}

.vw-quote-mark {
	font-family: var(--vvdm-font-display);
	font-size: 120px;
	line-height: 1;
	color: var(--vvdm-orange);
	opacity: 0.4;
	margin-bottom: -30px;
}

.vw-quote-text {
	font-family: var(--vvdm-font-display);
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
	margin: 0 0 28px;
	color: var(--vvdm-white);
}

.vw-quote-cite {
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vvdm-orange-warm);
}


/* =============================================================
   18.4  CTA-STRIPE  —  Anfrage + Direkt-Kontakte
   Klangidentisch zu .vm-cta-stripe.
   ============================================================= */

.vw-cta-stripe {
	background: var(--vvdm-light);
	padding: clamp(70px, 9vw, 100px) 0;
	border-top: 1px solid var(--vvdm-border);
}

.vw-cta-inner {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 64px;
	align-items: center;
}

.vw-cta-inner h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(28px, 3.8vw, 42px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 14px;
	color: var(--vvdm-navy);
}

.vw-cta-inner > div > p {
	font-size: 16px;
	color: var(--vvdm-text-muted);
	margin: 0 0 24px;
	max-width: 540px;
}

.vw-cta-contacts {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	background: var(--vvdm-white);
	border: 1px solid var(--vvdm-border);
	border-radius: 8px;
	box-shadow: var(--vvdm-shadow);
}

.vw-cta-contacts-label {
	font-family: var(--vvdm-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-orange);
	margin: 0 0 8px;
}

.vw-cta-contacts a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--vvdm-navy);
	font-family: var(--vvdm-font-body);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: 6px 0;
	transition: color 0.25s ease;
}

.vw-cta-contacts a:hover {
	color: var(--vvdm-orange);
}

.vw-cta-contacts svg {
	width: 18px;
	height: 18px;
	color: var(--vvdm-orange);
	flex-shrink: 0;
}


/* =============================================================
   18.5  RESPONSIVE BREAKPOINTS  —  Verwaltungs-Seite
   ============================================================= */

@media (max-width: 960px) {

	/* Intro-Row: nebeneinander → untereinander */
	.vw-intro-row {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.vw-intro-visual {
		aspect-ratio: 16/10;
		max-height: 380px;
	}

	/* Leistungs-Grid: 2 → 1 Spalte */
	.vw-leistungen-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* CTA: nebeneinander → untereinander */
	.vw-cta-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 560px) {
	/* Leistung-Body etwas enger packen */
	.vw-leistung-body { padding: 24px; }
	.vw-leistung-body h3 { font-size: 24px; }
}


/* =============================================================
   19.  DienstleistungenS-SEITE  (Säule 03 — externe Geschäftsführung)
   Eigene "dr-" Klassen-Familie. Strukturell an die Verwaltungs-
   Seite angelehnt, ergänzt um eine kompakte Rechtsfaktoren-
   Sektion mit drei Hinweis-Karten (A/B/C). Bewusst KEIN Klon
   der vw-Klassen, damit Anpassungen entkoppelt bleiben.
   ============================================================= */

/* ---- 19.1  INTRO-ROW  ---- Visual links, Text rechts -------- */

.dr-intro-section {
	background: var(--vvdm-white);
	padding: clamp(90px, 12vw, 130px) 0;
	position: relative;
	overflow: hidden;
}

/* Dezenter Hintergrund-Glow oben rechts — Logo-Echo. */
.dr-intro-section::before {
	content: '';
	position: absolute;
	top: -100px;
	right: -200px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(224, 112, 16, 0.05) 0%, transparent 60%);
	pointer-events: none;
}

.dr-intro-row {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 80px;
	align-items: center;
	position: relative;
}

.dr-intro-visual {
	position: relative;
	aspect-ratio: 4/5;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--vvdm-navy-soft);
	background-size: cover;
	background-position: center;
	box-shadow: var(--vvdm-shadow-strong);
}

/* Sanfter Verlauf — sorgt für lesbaren Badge auf hellen Fotos. */
.dr-intro-visual::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		rgba(16, 32, 64, 0.0) 0%,
		rgba(16, 32, 64, 0.35) 100%);
}

.dr-intro-visual-badge {
	position: absolute;
	bottom: 24px;
	left: 24px;
	z-index: 2;
	padding: 10px 18px;
	background: rgba(10, 22, 40, 0.85);
	border: 1px solid rgba(224, 112, 16, 0.5);
	border-radius: 4px;
	color: var(--vvdm-white);
	font-family: var(--vvdm-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
}

.dr-intro-text h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0 0 20px;
	color: var(--vvdm-navy);
}

.dr-intro-text p {
	margin: 0 0 16px;
	color: var(--vvdm-text);
}

.dr-intro-text p.lead {
	font-size: 19px;
	line-height: 1.6;
}

.dr-intro-text strong {
	color: var(--vvdm-navy);
	font-weight: 700;
}


/* ---- 19.2  LEISTUNGS-GRID  ---- Zwei Karten mit Bild -------- */

.dr-leistungen-section {
	background: var(--vvdm-light);
	padding: clamp(90px, 12vw, 130px) 0;
	position: relative;
}

.dr-leistungen-header {
	max-width: 720px;
	margin: 0 auto 64px;
	padding: 0 24px;
	text-align: center;
}

.dr-leistungen-header h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(32px, 4.2vw, 48px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: var(--vvdm-navy);
}

.dr-leistungen-header p {
	font-size: 17px;
	color: var(--vvdm-text-muted);
	margin: 0;
}

.dr-leistungen-grid {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.dr-leistung-card {
	background: var(--vvdm-white);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--vvdm-shadow);
	display: flex;
	flex-direction: column;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	border: 1px solid var(--vvdm-border);
	position: relative;
}

.dr-leistung-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--vvdm-shadow-strong);
}

.dr-leistung-card:hover .dr-leistung-image-inner {
	transform: scale(1.06);
}

.dr-leistung-image {
	position: relative;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--vvdm-navy-soft);
}

.dr-leistung-image-inner {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sanfter Verlauf unten — schützt Lesbarkeit der Nummer
   über echten Fotos. */
.dr-leistung-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(10, 22, 40, 0.0) 0%,
		rgba(10, 22, 40, 0.0) 50%,
		rgba(10, 22, 40, 0.5) 100%);
	pointer-events: none;
}

.dr-leistung-num {
	position: absolute;
	top: 20px;
	left: 24px;
	z-index: 2;
	font-family: var(--vvdm-font-display);
	font-size: 36px;
	font-weight: 700;
	color: var(--vvdm-white);
	line-height: 1;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.dr-leistung-body {
	padding: 36px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.dr-leistung-body h3 {
	font-family: var(--vvdm-font-display);
	font-size: 28px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0 0 6px;
	color: var(--vvdm-navy);
	line-height: 1.15;
}

.dr-leistung-tagline {
	font-family: var(--vvdm-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-orange);
	margin-bottom: 18px;
}

.dr-leistung-body p {
	margin: 0 0 22px;
	color: var(--vvdm-text);
	font-size: 15px;
	line-height: 1.65;
}

.dr-leistung-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.dr-leistung-list li {
	padding: 10px 0;
	padding-left: 22px;
	position: relative;
	font-size: 14px;
	color: var(--vvdm-text);
	border-top: 1px solid var(--vvdm-border);
}
.dr-leistung-list li:first-child { border-top: none; }

/* Akzent-Strich vor jedem Listenpunkt — Echo des Swoosh-Skews. */
.dr-leistung-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 18px;
	width: 12px;
	height: 2px;
	background: var(--vvdm-orange);
	transform: skewX(-18deg);
}

.dr-leistung-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--vvdm-navy);
	font-family: var(--vvdm-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding-top: 18px;
	border-top: 1px solid var(--vvdm-border);
	transition: color 0.25s ease, gap 0.25s ease;
}

.dr-leistung-cta:hover {
	color: var(--vvdm-orange);
	gap: 14px;
}

.dr-leistung-cta .arrow {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dr-leistung-cta:hover .arrow {
	transform: translateX(4px);
}


/* ---- 19.3  RECHT-SECTION  ---- Drei kompakte Hinweis-Karten -

   Bewusst OHNE Bilder: Das Thema "rechtliche Voraussetzungen"
   soll als sachlicher Hinweis-Block wirken, nicht als zweites
   Leistungs-Angebot. Hellerer Hintergrund + dezentere Karten
   als das Leistungs-Grid darüber.
   ------------------------------------------------------------ */

.dr-recht-section {
	background: var(--vvdm-white);
	padding: clamp(90px, 12vw, 130px) 0;
	position: relative;
	overflow: hidden;
}

/* Dezenter, vertikaler Streifen links als Echo des Page-Hero-
   Stripes — verbindet die Sektion mit der Seiten-DNA. */
.dr-recht-section::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -200px;
	width: 500px;
	background: radial-gradient(circle at 60% 50%, rgba(224, 112, 16, 0.04) 0%, transparent 60%);
	pointer-events: none;
}

.dr-recht-header {
	max-width: 760px;
	margin: 0 auto 56px;
	padding: 0 24px;
	text-align: center;
	position: relative;
	z-index: 2;
}

.dr-recht-header h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 14px;
	color: var(--vvdm-navy);
}

.dr-recht-header p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--vvdm-text-muted);
	margin: 0;
}

.dr-recht-grid {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	position: relative;
	z-index: 2;
}

.dr-recht-item {
	background: var(--vvdm-light);
	border: 1px solid var(--vvdm-border);
	border-radius: 8px;
	padding: 36px 32px;
	position: relative;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.4s ease;
}

.dr-recht-item:hover {
	transform: translateY(-4px);
	border-color: rgba(224, 112, 16, 0.5);
}

.dr-recht-marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vvdm-navy);
	color: var(--vvdm-white);
	font-family: var(--vvdm-font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0;
	margin-bottom: 20px;
	position: relative;
}

/* Orange-Ring um den Marker — Echo des Anker-Dots im Hero. */
.dr-recht-marker::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid rgba(224, 112, 16, 0.4);
}

.dr-recht-item h3 {
	font-family: var(--vvdm-font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0 0 12px;
	color: var(--vvdm-navy);
}

.dr-recht-item p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--vvdm-text);
	margin: 0;
}


/* ---- 19.4  QUOTE-SECTION  ---- Markenzitat auf Navy --------- */

.dr-quote-section {
	background: linear-gradient(180deg, var(--vvdm-navy-deep) 0%, var(--vvdm-navy) 100%);
	padding: clamp(90px, 11vw, 130px) 0;
	color: var(--vvdm-white);
	position: relative;
	overflow: hidden;
}

.dr-quote-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background:
		radial-gradient(ellipse 800px 200px at 20% 10%, rgba(224, 112, 16, 0.08), transparent 70%),
		radial-gradient(ellipse 600px 200px at 80% 90%, rgba(224, 112, 16, 0.05), transparent 70%);
	pointer-events: none;
}

.dr-quote-wrap {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
	position: relative;
	z-index: 2;
}

.dr-quote-mark {
	font-family: var(--vvdm-font-display);
	font-size: 120px;
	line-height: 1;
	color: var(--vvdm-orange);
	opacity: 0.4;
	margin-bottom: -30px;
}

.dr-quote-text {
	font-family: var(--vvdm-font-display);
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
	margin: 0 0 28px;
	color: var(--vvdm-white);
}

.dr-quote-cite {
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vvdm-orange-warm);
}


/* ---- 19.5  CTA-STRIPE  ---- Anfrage + Direkt-Kontakte ------- */

.dr-cta-stripe {
	background: var(--vvdm-light);
	padding: clamp(70px, 9vw, 100px) 0;
	border-top: 1px solid var(--vvdm-border);
}

.dr-cta-inner {
	max-width: var(--vvdm-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 64px;
	align-items: center;
}

.dr-cta-inner h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(28px, 3.8vw, 42px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 14px;
	color: var(--vvdm-navy);
}

.dr-cta-inner > div > p {
	font-size: 16px;
	color: var(--vvdm-text-muted);
	margin: 0 0 24px;
	max-width: 540px;
}

.dr-cta-contacts {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	background: var(--vvdm-white);
	border: 1px solid var(--vvdm-border);
	border-radius: 8px;
	box-shadow: var(--vvdm-shadow);
}

.dr-cta-contacts-label {
	font-family: var(--vvdm-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-orange);
	margin: 0 0 8px;
}

.dr-cta-contacts a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--vvdm-navy);
	font-family: var(--vvdm-font-body);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: 6px 0;
	transition: color 0.25s ease;
}

.dr-cta-contacts a:hover {
	color: var(--vvdm-orange);
}

.dr-cta-contacts svg {
	width: 18px;
	height: 18px;
	color: var(--vvdm-orange);
	flex-shrink: 0;
}


/* ---- 19.6  RESPONSIVE BREAKPOINTS  ---- Dienstleistungens-Seite ---- */

@media (max-width: 960px) {

	/* Intro-Row: nebeneinander → untereinander */
	.dr-intro-row {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.dr-intro-visual {
		aspect-ratio: 16/10;
		max-height: 380px;
	}

	/* Leistungs-Grid: 2 → 1 Spalte */
	.dr-leistungen-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Recht-Grid: 3 → 1 Spalte. Auf Tablets könnten zwei
	   Spalten gehen, aber die Karten sind kurz — eine Spalte
	   liest sich angenehmer und Scroll-Tiefe ist unkritisch. */
	.dr-recht-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.dr-recht-item {
		padding: 28px 26px;
	}

	/* CTA: nebeneinander → untereinander */
	.dr-cta-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 560px) {
	/* Leistung-Body etwas enger packen */
	.dr-leistung-body { padding: 24px; }
	.dr-leistung-body h3 { font-size: 24px; }

	/* Recht-Marker minimal verkleinern */
	.dr-recht-marker {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}
}



/* =============================================================
   20.  KONTAKT-SEITE  (page-kontakt.php)
   Eigene "kt-" Klassen-Familie. Das Layout ist asymmetrisch:
   Formular bekommt ~1.4fr, Direktkontakt-Aside ~1fr. Die Form
   selbst wirkt ruhig und reduziert — keine spielerischen Effekte,
   weil ein Kontaktformular Vertrauen vermitteln muss.
   ============================================================= */

/* ---- 20.1  FORM-SECTION  ---- Layout-Grundgerüst ------------ */

.kt-form-section {
	background: var(--vvdm-white);
	padding: clamp(80px, 11vw, 120px) 0;
	position: relative;
	overflow: hidden;
}

.kt-form-section::before {
	content: '';
	position: absolute;
	top: -80px;
	right: -180px;
	width: 540px;
	height: 540px;
	background: radial-gradient(circle, rgba(224, 112, 16, 0.05) 0%, transparent 60%);
	pointer-events: none;
}

.kt-form-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 64px;
	align-items: start;
	position: relative;
	z-index: 2;
}


/* ---- 20.2  STATUS-BANNER  ---- Erfolg / Fehler oben --------- */

.kt-banner {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px 24px;
	border-radius: 8px;
	margin-bottom: 40px;
	border: 1px solid transparent;
	position: relative;
	z-index: 2;
}

.kt-banner svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	margin-top: 2px;
}

.kt-banner strong {
	display: block;
	font-family: var(--vvdm-font-display);
	font-size: 18px;
	letter-spacing: -0.005em;
	margin-bottom: 4px;
}

.kt-banner p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

.kt-banner--success {
	background: #ecf7ee;
	border-color: #b7dec0;
	color: #1f5b32;
}
.kt-banner--success svg { color: #2f8a4d; }

.kt-banner--error {
	background: #fbeceb;
	border-color: #e8b9b4;
	color: #7a2620;
}
.kt-banner--error svg { color: #b13a2f; }


/* ---- 20.3  FORMULAR  ---- Felder, Layout, Fokus-Stil -------- */

.kt-form-wrap h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: 0 0 20px;
	color: var(--vvdm-navy);
}

.kt-form {
	margin-top: 32px;
}

.kt-row {
	display: grid;
	gap: 20px;
	margin-bottom: 20px;
}

.kt-row--2 {
	grid-template-columns: auto 1fr;
}

/* Anrede ist eng, der Rest atmet. */
.kt-field--narrow {
	min-width: 130px;
}

.kt-field {
	margin-bottom: 20px;
	position: relative;
	display: flex;
	flex-direction: column;
}

.kt-row .kt-field {
	margin-bottom: 0;
}

.kt-field label {
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vvdm-navy);
	margin-bottom: 8px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.kt-optional {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--vvdm-text-muted);
	text-transform: none;
}

.kt-required {
	color: var(--vvdm-orange);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* Eingabefelder — einheitliche Optik für input / select / textarea. */
.kt-field input[type="text"],
.kt-field input[type="email"],
.kt-field input[type="tel"],
.kt-field select,
.kt-field textarea {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--vvdm-font-body);
	font-size: 15px;
	color: var(--vvdm-navy);
	background: var(--vvdm-white);
	border: 1px solid var(--vvdm-border);
	border-radius: 6px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

.kt-field textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.55;
}

.kt-field input:hover,
.kt-field select:hover,
.kt-field textarea:hover {
	border-color: var(--vvdm-navy-soft);
}

/* Fokus-Stil — Skew-freier, knapper Orange-Ring, dezent aber sichtbar. */
.kt-field input:focus,
.kt-field select:focus,
.kt-field textarea:focus {
	outline: none;
	border-color: var(--vvdm-orange);
	box-shadow: 0 0 0 3px rgba(224, 112, 16, 0.18);
}

/* Select braucht einen eigenen Pfeil, weil appearance:none ihn nimmt. */
.kt-select-wrap {
	position: relative;
}
.kt-select-wrap::after {
	content: '';
	position: absolute;
	right: 18px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--vvdm-navy);
	border-bottom: 2px solid var(--vvdm-navy);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
.kt-field select {
	padding-right: 44px;
	cursor: pointer;
}

/* Fehler-Markierung — roter Rand, dezenter Hintergrund-Hauch. */
.kt-field input[aria-invalid="true"],
.kt-field select[aria-invalid="true"],
.kt-field textarea[aria-invalid="true"] {
	border-color: #b13a2f;
	background: #fdf6f5;
}

.kt-error {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: #b13a2f;
	font-weight: 500;
}


/* ---- 20.4  DATENSCHUTZ-CHECKBOX  ---- Eigene Optik ---------- */

.kt-field--checkbox {
	margin-top: 8px;
}

.kt-checkbox-label {
	display: grid !important;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: flex-start;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--vvdm-text) !important;
}

/* Native Checkbox verstecken, aber zugänglich lassen. */
.kt-checkbox-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.kt-checkbox-box {
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--vvdm-border);
	border-radius: 4px;
	background: var(--vvdm-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s ease, background 0.2s ease;
	margin-top: 1px;
	flex-shrink: 0;
}

.kt-checkbox-label input:focus-visible + .kt-checkbox-box {
	border-color: var(--vvdm-orange);
	box-shadow: 0 0 0 3px rgba(224, 112, 16, 0.18);
}

.kt-checkbox-label input:checked + .kt-checkbox-box {
	background: var(--vvdm-orange);
	border-color: var(--vvdm-orange);
}

/* Hakenicon als Pseudo-Element, wenn checked. */
.kt-checkbox-label input:checked + .kt-checkbox-box::after {
	content: '';
	width: 6px;
	height: 11px;
	border-right: 2px solid var(--vvdm-white);
	border-bottom: 2px solid var(--vvdm-white);
	transform: rotate(45deg) translate(-1px, -1px);
}

.kt-checkbox-label input[aria-invalid="true"] + .kt-checkbox-box {
	border-color: #b13a2f;
}

.kt-checkbox-text a {
	color: var(--vvdm-navy);
	text-decoration: underline;
	text-decoration-color: var(--vvdm-orange);
	text-underline-offset: 3px;
	font-weight: 600;
}
.kt-checkbox-text a:hover {
	color: var(--vvdm-orange);
}


/* ---- 20.5  HONEYPOT  ---- Bot-Falle, für Menschen unsichtbar  */

.kt-honeypot {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ---- 20.6  SUBMIT  ---- Button + Hinweis -------------------- */

.kt-submit-row {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding-top: 24px;
	border-top: 1px solid var(--vvdm-border);
}

.kt-submit {
	cursor: pointer;
	border: none;
	font-family: var(--vvdm-font-body);
}

.kt-submit-note {
	margin: 0;
	font-size: 13px;
	color: var(--vvdm-text-muted);
	font-style: italic;
}


/* ---- 20.7  ASIDE  ---- Direktkontakt + Vertrauenshinweis ---- */

.kt-aside {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.kt-direct {
	background: var(--vvdm-light);
	border: 1px solid var(--vvdm-border);
	border-radius: 8px;
	padding: 36px 32px;
}

.kt-direct h3 {
	font-family: var(--vvdm-font-display);
	font-size: 24px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	color: var(--vvdm-navy);
	margin: 8px 0 24px;
}

.kt-direct-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 0;
	border-top: 1px solid var(--vvdm-border);
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease;
}

.kt-direct-item:first-of-type {
	border-top: 1px solid var(--vvdm-border);
}

a.kt-direct-item:hover {
	transform: translateX(2px);
}

a.kt-direct-item:hover .kt-direct-value {
	color: var(--vvdm-orange);
}

.kt-direct-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--vvdm-white);
	border: 1px solid var(--vvdm-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--vvdm-orange);
}

.kt-direct-icon svg {
	width: 16px;
	height: 16px;
}

.kt-direct-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 6px;
}

.kt-direct-label {
	font-family: var(--vvdm-font-body);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-text-muted);
}

.kt-direct-value {
	font-family: var(--vvdm-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--vvdm-navy);
	line-height: 1.4;
	transition: color 0.2s ease;
}


.kt-trust {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 22px 24px;
	background: var(--vvdm-navy);
	color: var(--vvdm-white);
	border-radius: 8px;
}

.kt-trust-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--vvdm-orange);
	margin-top: 2px;
}

.kt-trust strong {
	display: block;
	font-family: var(--vvdm-font-display);
	font-size: 15px;
	letter-spacing: 0;
	margin-bottom: 4px;
	color: var(--vvdm-white);
}

.kt-trust p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}


/* ---- 20.8  MOTORSPORT-HINWEIS  ---- eigene Sektion ---------- */

.kt-motorsport-hint {
	background: linear-gradient(180deg, var(--vvdm-navy-deep) 0%, var(--vvdm-navy) 100%);
	color: var(--vvdm-white);
	padding: clamp(60px, 8vw, 90px) 0;
	position: relative;
	overflow: hidden;
}

.kt-motorsport-hint::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(ellipse 600px 200px at 90% 50%, rgba(224, 112, 16, 0.10), transparent 65%);
	pointer-events: none;
}

.kt-motorsport-hint-inner {
	display: grid;
	grid-template-columns: 1.5fr auto;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.kt-motorsport-hint-text h2 {
	font-family: var(--vvdm-font-display);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 600;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	color: var(--vvdm-white);
	margin: 8px 0 14px;
}

.kt-motorsport-hint-text p {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
	max-width: 640px;
}

/* Outline-Variante des Buttons heller, weil Navy-Hintergrund. */
.kt-motorsport-hint .btn-outline {
	color: var(--vvdm-white);
	border-color: rgba(255, 255, 255, 0.3);
}
.kt-motorsport-hint .btn-outline:hover {
	background: var(--vvdm-orange);
	border-color: var(--vvdm-orange);
	color: var(--vvdm-white);
}


/* ---- 20.9  RESPONSIVE  ---- Kontakt-Seite ------------------- */

@media (max-width: 960px) {

	/* Form-Grid: nebeneinander → untereinander */
	.kt-form-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	/* Aside-Sticky entfällt auf Mobile */
	.kt-aside {
		position: static;
		top: auto;
	}

	/* Motorsport-Hinweis: Button unter Text */
	.kt-motorsport-hint-inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.kt-motorsport-hint-cta {
		justify-self: start;
	}
}

@media (max-width: 560px) {

	/* Anrede + Name: untereinander */
	.kt-row--2 {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.kt-row .kt-field {
		margin-bottom: 0;
	}

	/* Eingabefelder: etwas kompakter */
	.kt-field input[type="text"],
	.kt-field input[type="email"],
	.kt-field input[type="tel"],
	.kt-field select,
	.kt-field textarea {
		padding: 12px 14px;
		font-size: 15px;
	}

	/* Direktkontakt-Karte: enger packen */
	.kt-direct {
		padding: 28px 22px;
	}

	/* Submit-Button-Zeile: Hinweis unter Button */
	.kt-submit-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}


/* =============================================================
   17. 404-SEITE
   v0.9.1 — Rework: eigene Klassen statt Inline-Styles, Oswald-Display
            über Font-Variable, Swoosh-Element analog zum Site-Pattern,
            Quick-Links zu den Hauptbereichen.
   ============================================================= */

.error-404 {
	position: relative;
	background: var(--vvdm-light);
	padding: 96px 0 80px;
	overflow: hidden;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Dezenter diagonaler Streifen — Anspielung an den page-hero-Look,
   damit die 404 visuell zur Familie der Subseiten gehört. */
.error-404-stripe {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 0%,
			rgba(224, 112, 16, 0.08) 0%,
			transparent 55%),
		linear-gradient(135deg,
			rgba(16, 32, 64, 0.03) 0%,
			transparent 40%,
			rgba(224, 112, 16, 0.04) 100%);
	pointer-events: none;
}

.error-404-content {
	position: relative;
	z-index: 1;
	max-width: 620px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}

/* Großer 404-Schriftzug — Oswald, orange Gradient.
   Reine Dekoration; aria-hidden im Markup, die echte
   Headline ist die <h1> darunter. */
.error-404-code {
	font-family: var(--vvdm-font-display);
	font-size: clamp(110px, 18vw, 180px);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg,
		var(--vvdm-orange-warm) 0%,
		var(--vvdm-orange) 55%,
		var(--vvdm-orange-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 8px;
	text-shadow: 0 8px 32px rgba(224, 112, 16, 0.15);
}

.error-404 .section-eyebrow {
	color: var(--vvdm-orange);
	margin-bottom: 12px;
}

.error-404-heading {
	font-family: var(--vvdm-font-display);
	font-size: clamp(28px, 4.2vw, 40px);
	font-weight: 600;
	line-height: 1.15;
	color: var(--vvdm-navy);
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}

.error-404 .swoosh {
	margin-top: 18px;
	margin-bottom: 24px;
}

.error-404-lead {
	font-size: 17px;
	line-height: 1.6;
	color: var(--vvdm-text-muted);
	max-width: 520px;
	margin: 0 auto 32px;
}

.error-404-actions {
	display: flex;
	justify-content: center;
	margin-bottom: 56px;
}

/* Quick-Links unter dem Hauptbutton — damit die 404 keine
   Sackgasse ist, sondern der Besucher direkt weiter kann. */
.error-404-quicklinks {
	border-top: 1px solid var(--vvdm-border);
	padding-top: 28px;
}

.error-404-quicklinks-label {
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vvdm-text-muted);
	margin: 0 0 18px;
}

.error-404-quicklinks ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
}

.error-404-quicklinks li { margin: 0; }

.error-404-quicklinks a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--vvdm-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--vvdm-navy);
	padding: 8px 4px;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
	text-decoration: none;
}

.error-404-quicklinks a:hover {
	color: var(--vvdm-orange);
	border-bottom-color: var(--vvdm-orange);
}

.error-404-quicklinks a .arrow {
	transition: transform 0.2s ease;
	display: inline-block;
}

.error-404-quicklinks a:hover .arrow {
	transform: translateX(3px);
}

/* Mobile — kompaktere Maße */
@media (max-width: 600px) {
	.error-404 {
		padding: 64px 0 56px;
		min-height: 50vh;
	}
	.error-404-code {
		font-size: clamp(90px, 28vw, 130px);
	}
	.error-404-quicklinks ul {
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}
}


/* =============================================================
   22.  BESTÄTIGUNGSSEITE  (page-verschickt.php)
   Eigenständiger Block — keine Hero-/Form-Komponenten,
   nur eine ruhige, mittig zentrierte Bestätigung. Wird per
   303-Redirect nach erfolgreichem Form-Submit angesprungen
   (POST-Redirect-GET Pattern).
   ============================================================= */

.kt-thanks {
	background: var(--vvdm-light);
	min-height: calc(100vh - 200px);  /* füllt Viewport bis zum Footer */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(60px, 10vw, 120px) 24px;
	position: relative;
	overflow: hidden;
}

/* Dezentes Hintergrund-Echo des Hero-Stripes — orangener Glow
   diagonal, fast unsichtbar. Sorgt dafür, dass die Seite nicht
   leer wirkt, ohne abzulenken. */
.kt-thanks-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 700px 400px at 80% 20%, rgba(224, 112, 16, 0.07), transparent 60%),
		radial-gradient(ellipse 600px 300px at 20% 90%, rgba(16, 32, 64, 0.04), transparent 60%);
	pointer-events: none;
}

.kt-thanks-inner {
	position: relative;
	z-index: 2;
	max-width: 640px;
	text-align: center;
	background: var(--vvdm-white);
	border: 1px solid var(--vvdm-border);
	border-radius: 12px;
	padding: clamp(40px, 6vw, 64px) clamp(32px, 5vw, 56px);
	box-shadow: var(--vvdm-shadow);
}

.kt-thanks-icon {
	width: 96px;
	height: 96px;
	margin: 0 auto 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Sanfte Pop-Animation beim ersten Erscheinen — subtil,
	   nicht aufdringlich. Setzt sich nach einmaligem Lauf still. */
	animation: kt-thanks-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.kt-thanks-icon svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 8px 20px rgba(16, 32, 64, 0.15));
}

@keyframes kt-thanks-pop {
	0%   { opacity: 0; transform: scale(0.6); }
	60%  { opacity: 1; transform: scale(1.08); }
	100% { opacity: 1; transform: scale(1); }
}

.kt-thanks-eyebrow {
	display: inline-block;
	margin-bottom: 16px;
	color: var(--vvdm-orange);
}

.kt-thanks-heading {
	font-family: var(--vvdm-font-display);
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 600;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--vvdm-navy);
	margin: 0 0 24px;
}

.kt-thanks .swoosh--center {
	margin: 0 auto 28px;
}

.kt-thanks-lead {
	font-family: var(--vvdm-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--vvdm-text);
	margin: 0 0 18px;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.kt-thanks-sub {
	font-size: 14px;
	line-height: 1.6;
	color: var(--vvdm-text-muted);
	margin: 0 0 36px;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.kt-thanks-cta {
	margin-top: 8px;
}

@media (max-width: 560px) {
	.kt-thanks-inner {
		padding: 36px 24px;
	}
	.kt-thanks-icon {
		width: 80px;
		height: 80px;
		margin-bottom: 20px;
	}
}


/* ============================================================
   16.14  JUREMO-SHOWCASE  (Untermarke auf der Startseite)

   Zweispaltig: links helle VVDM-Spalte (Text + CTA), rechts
   Foto-Panel mit dunkler Überlagerung, Logo + Feature-Punkten.
   Diagonale Kante trennt beide Welten. Ersetzt den früheren
   abstrakten Bridge-Block (Logbuch E-017).

   Eigenes Farbvokabular: Motorsport-Rot als Akzent, sonst
   bewusst in der VVDM-Welt verankert (heller Grund links).
   ============================================================ */

/* Äußere Sektion: volle Breite, weißer Grund wie die Nachbarn.
   Abgrenzung erfolgt über feine Linien + dezenten Schatten am
   .jrm-showcase selbst (siehe unten), nicht über einen Karten-Look. */
.jrm-showcase-section {
	background: var(--vvdm-white);
	position: relative;
	z-index: 2;
}

.jrm-showcase {
	--jrm-show-red: #E11017;          /* Juremo-Rot (aus jueremo.css) */
	--jrm-show-ink: #14161A;          /* Juremo-Ink für Button */
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	min-height: 540px;
	background: var(--vvdm-white);
	overflow: hidden;
	isolation: isolate;
	/* Feine Trennlinie oben (gegen weißes Storytelling sichtbar). */
	border-top: 1px solid rgba(16, 32, 64, 0.10);
	/* Schatten: oben dezent (heller Nachbar), unten kräftiger und
	   dunkler, damit die helle Sektion sichtbar über der dunklen
	   Timeline "schwebt" — weicher Übergang statt harter Kante. */
	box-shadow:
		0 -8px 24px -16px rgba(16, 32, 64, 0.25),
		0 16px 30px -10px rgba(8, 16, 32, 0.55);
}

/* ---------- LINKS: helle Textspalte ---------- */
.jrm-showcase-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(56px, 7vw, 96px) clamp(32px, 6vw, 90px);
	max-width: 620px;
	margin-left: auto;
	width: 100%;
}

.jrm-showcase-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--vvdm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--jrm-show-red);
	margin-bottom: 22px;
}
.jrm-showcase-eyebrow-line {
	width: 34px;
	height: 2px;
	background: var(--jrm-show-red);
	display: inline-block;
}

.jrm-showcase-headline {
	font-family: var(--vvdm-font-display);
	font-size: clamp(38px, 4.6vw, 60px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--vvdm-navy);
	margin: 0 0 26px;
}
.jrm-showcase-headline .jrm-accent {
	color: var(--jrm-show-red);
	font-style: italic;
}

.jrm-showcase-desc {
	font-family: var(--vvdm-font-body);
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--vvdm-text);
	margin: 0 0 36px;
	max-width: 440px;
}

.jrm-showcase-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	padding: 15px 30px;
	background: var(--jrm-show-ink);
	color: var(--vvdm-white);
	font-family: var(--vvdm-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.jrm-showcase-btn:hover {
	background: var(--jrm-show-red);
	color: var(--vvdm-white);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(225, 16, 23, 0.28);
}
.jrm-showcase-btn .arrow {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.jrm-showcase-btn:hover .arrow { transform: translateX(5px); }

/* ---------- RECHTS: Foto-Panel mit diagonaler Kante ---------- */
.jrm-showcase-panel {
	position: relative;
	overflow: hidden;
	/* Diagonale Kante: schneidet links oben ein, sodass die helle
	   Spalte unter das Panel läuft. */
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
	margin-left: -6%;
}

.jrm-showcase-photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

/* Dunkle Überlagerung + roter Akzent, damit Logo/Text lesbar bleiben. */
.jrm-showcase-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(135deg, rgba(225, 16, 23, 0.20) 0%, transparent 42%),
		linear-gradient(90deg,  rgba(11, 12, 18, 0.92) 0%, rgba(11, 12, 18, 0.70) 45%, rgba(11, 12, 18, 0.45) 100%),
		linear-gradient(180deg, rgba(11, 12, 18, 0.55) 0%, rgba(11, 12, 18, 0.40) 55%, rgba(11, 12, 18, 0.65) 100%);
}

/* Schmale rote Linie auf der Diagonalen-Kante (Akzent). */
.jrm-showcase-panel::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: linear-gradient(135deg, var(--jrm-show-red) 0%, var(--jrm-show-red) 0.4%, transparent 0.9%);
	pointer-events: none;
	opacity: 0.9;
}

.jrm-showcase-panel-inner {
	position: relative;
	z-index: 3;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
	padding: clamp(48px, 5vw, 72px) clamp(40px, 5vw, 70px) clamp(48px, 5vw, 72px) clamp(70px, 9vw, 130px);
}

.jrm-showcase-logo {
	max-width: min(320px, 70%);
	height: auto;
	margin: 0;
}

.jrm-showcase-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.jrm-showcase-features li {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--vvdm-white);
	font-family: var(--vvdm-font-body);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
}
.jrm-feature-icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(225, 16, 23, 0.5);
	border-radius: 8px;
	background: rgba(225, 16, 23, 0.10);
	color: var(--jrm-show-red);
}
.jrm-feature-icon svg { width: 20px; height: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.jrm-showcase {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.jrm-showcase-text {
		max-width: 100%;
		margin-left: 0;
		padding: clamp(48px, 9vw, 64px) clamp(24px, 7vw, 48px) clamp(36px, 6vw, 48px);
		order: 1;
	}
	.jrm-showcase-panel {
		order: 2;
		clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
		margin-left: 0;
		min-height: 460px;
	}
	.jrm-showcase-panel::before {
		background: linear-gradient(170deg, var(--jrm-show-red) 0%, var(--jrm-show-red) 0.5%, transparent 1.1%);
	}
	.jrm-showcase-overlay {
		background:
			linear-gradient(135deg, rgba(225, 16, 23, 0.18) 0%, transparent 40%),
			linear-gradient(180deg, rgba(11, 12, 18, 0.88) 0%, rgba(11, 12, 18, 0.60) 50%, rgba(11, 12, 18, 0.78) 100%);
	}
	.jrm-showcase-panel-inner {
		padding: clamp(56px, 10vw, 80px) clamp(28px, 7vw, 48px) clamp(40px, 8vw, 56px);
		justify-content: flex-start;
	}
}

@media (max-width: 480px) {
	.jrm-showcase-features li { font-size: 12px; letter-spacing: 0.08em; }
	.jrm-feature-icon { width: 38px; height: 38px; }
}