/* =============================================================================
 * SD6 — Service-Detail Master (Hero-B Filmplakat + System-Sektionen).
 * Konstante-Pass 02.07.2026: Sections laufen ueber das vn-section-System
 * (BG-Rhythmus + Padding), Inhalte ueber den Komponenten-Layer
 * (components.css: checks, split, photocards, faq). Eigen bleibt nur:
 * Hero, Definition-Statement, Ablauf-Timeline.
 * =========================================================================== */

/* Fullbleed: Bild laeuft bis oben, Floating-Dock schwebt darueber (kein Body-Header-Padding). */
body:has(.vn-sd6-hero) { padding-top: 0; }

.vn-sd6-h2 {
	font-family: var(--font-display);
	font-size: var(--type-h2);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--brand-on-dark-strong);
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	text-wrap: balance;
}

/* 1 — HERO (Filmplakat) */
.vn-sd6-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 86vh, 940px);
	padding-top: 130px;
	background: var(--brand-navy);
}
.vn-sd6-hero__media { position: absolute; inset: 0; z-index: -2; }
.vn-sd6-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; }
.vn-sd6-hero__scrim {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(to bottom, color-mix(in srgb, var(--brand-navy) 38%, transparent), transparent 20%),
		linear-gradient(to top, color-mix(in srgb, var(--brand-navy) 88%, transparent) 0%, color-mix(in srgb, var(--brand-navy) 62%, transparent) 30%, color-mix(in srgb, var(--brand-navy) 24%, transparent) 46%, transparent 60%),
		radial-gradient(130% 115% at 0% 100%, color-mix(in srgb, var(--brand-navy) 92%, transparent) 0%, color-mix(in srgb, var(--brand-navy) 80%, transparent) 26%, color-mix(in srgb, var(--brand-navy) 42%, transparent) 44%, transparent 58%);
}
.vn-sd6-hero__inner {
	width: 100%; max-width: var(--page-max); margin-inline: auto;
	padding-inline: var(--gutter); padding-bottom: clamp(2.75rem, 6vh, 4.5rem);
}
.vn-sd6-hero__block { max-width: 760px; }
.vn-sd6-hero__crumb { margin: 0 0 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-on-dark-faint); }
.vn-sd6-hero__crumb a { color: inherit; text-decoration: none; }
.vn-sd6-hero__crumb a:hover { color: var(--brand-on-dark); }
.vn-sd6-hero__crumb-sep { margin-inline: 0.4em; }
.vn-sd6-hero__crumb-current { color: var(--brand-on-dark-muted); }
.vn-sd6-hero__title { margin: 0 0 1rem; font-family: var(--font-display); font-size: var(--type-h1); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; color: var(--brand-on-dark-strong); max-width: 20ch; text-wrap: balance; }
.vn-sd6-hero__sub { margin: 0 0 clamp(1.75rem, 3.5vh, 2.5rem); font-size: clamp(1rem, 0.5vw + 0.9rem, 1.15rem); line-height: 1.65; color: var(--brand-on-dark); max-width: 54ch; }
.vn-sd6-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.vn-sd6-hero__divider { width: 1px; height: 48px; background: var(--brand-on-dark-line); }
.vn-sd6-hero__chip { display: flex; align-items: center; gap: 0.8rem; }
.vn-sd6-hero__chip-img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 1px solid var(--brand-on-dark-line); }
.vn-sd6-hero__chip-text { display: flex; flex-direction: column; gap: 2px; }
.vn-sd6-hero__chip-name { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; line-height: 1.25; color: var(--brand-on-dark-strong); }
.vn-sd6-hero__chip-role { font-size: 0.75rem; line-height: 1.3; color: var(--brand-on-dark-muted); }
.vn-sd6-hero__chip-tel { align-self: flex-start; font-size: 0.85rem; line-height: 1.4; color: var(--brand-on-dark); text-decoration: none; border-bottom: 1px solid var(--brand-on-dark-line); }
.vn-sd6-hero__chip-tel:hover { border-color: var(--brand-on-dark); }
@media (max-width: 800px) {
	.vn-sd6-hero { min-height: clamp(480px, 74vh, 760px); padding-top: 120px; }
	.vn-sd6-hero__media img { object-position: 55% 40%; }
	.vn-sd6-hero__scrim { background:
		linear-gradient(to bottom, color-mix(in srgb, var(--brand-navy) 45%, transparent), transparent 18%),
		linear-gradient(to top, color-mix(in srgb, var(--brand-navy) 96%, transparent) 0%, color-mix(in srgb, var(--brand-navy) 88%, transparent) 32%, color-mix(in srgb, var(--brand-navy) 46%, transparent) 58%, transparent 78%); }
	.vn-sd6-hero__title { max-width: none; }
	.vn-sd6-hero__divider { display: none; }
	.vn-sd6-hero__chip { width: 100%; margin-top: 0.5rem; }
}

/* 2 — DEFINITION (Statement) */
.vn-sd6-def__text {
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	line-height: 1.65;
	color: var(--brand-on-dark);
	margin: 0;
	max-width: 44rem;
}

/* 3 — ABLAUF: nutzt die geteilte Home-Process-Timeline (.vn-process-*). */

/* 4 — TRUST: Warum-wir-Optik (weiß, Bild + Tile-Grid). Home-Version hat
   Extra-Padding unten wegen der ueberlappenden Notfall-Box — hier Standard. */
.vn-warum.vn-sd6-trust { padding-bottom: clamp(4.5rem, 9vw, 9rem); }

/* =============================================================================
 * V6-Sektionen (Konzept-V5-Master, 06.07.2026): Kern-USP-Duo + 3-Zahlen-Band.
 * =========================================================================== */

/* 5 — KERN-USP-DUO: dunkle Karte + Foto, B&W-Duo-Pattern */
.vn-sd6-duo__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}
.vn-sd6-duo__card {
	background: var(--brand-navy-soft);
	border-radius: var(--radius-card-lg);
	padding: clamp(1.75rem, 3.5vw, 3rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
.vn-sd6-duo__title { margin: 0; }
.vn-sd6-duo__text {
	margin: 0;
	font-size: clamp(1rem, 0.5vw + 0.9rem, 1.1rem);
	line-height: 1.65;
	color: var(--brand-on-dark);
	max-width: 46ch;
}
.vn-sd6-duo__action { margin-top: 0.35rem; }
.vn-sd6-duo__fig {
	position: relative;
	isolation: isolate;
	margin: 0;
	border-radius: var(--radius-card-lg);
	overflow: hidden;
	min-height: clamp(260px, 32vw, 420px);
}
.vn-sd6-duo__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Oranger Eck-Glow rechts unten ueber dem Bild (wie Notfall-CTA-Box) */
.vn-sd6-duo__fig::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		52% 58% at 96% 100%,
		color-mix(in srgb, var(--brand-orange) 62%, transparent) 0%,
		color-mix(in srgb, var(--brand-orange) 26%, transparent) 38%,
		transparent 68%
	);
	pointer-events: none;
}
@media (max-width: 800px) {
	.vn-sd6-duo__grid { grid-template-columns: 1fr; }
	.vn-sd6-duo__fig { min-height: 0; aspect-ratio: 16 / 10; }
}

/* 5b — WARUM & WANN: Head-Split (H2 links, Erklaerung rechts) + 4 Bild-Karten */
.vn-sd6-warum__head {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(1.25rem, 4vw, 3.5rem);
	align-items: start;
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.vn-sd6-warum__lead {
	margin: 0;
	font-size: clamp(0.98rem, 1.1vw, 1.1rem);
	line-height: 1.65;
	color: var(--brand-on-dark-muted);
}
.vn-sd6-warum__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
.vn-sd6-trigger {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: color-mix(in srgb, var(--brand-white) 4%, transparent);
}
.vn-sd6-trigger__fig {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.vn-sd6-trigger__fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--vn-ease-out, ease-out);
}
.vn-sd6-trigger:hover .vn-sd6-trigger__fig img { transform: scale(1.03); }
.vn-sd6-trigger__body { padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1rem, 1.8vw, 1.4rem) clamp(1.25rem, 2vw, 1.6rem); }
.vn-sd6-trigger__title {
	margin: 0 0 0.5rem;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--brand-on-dark-strong);
}
.vn-sd6-trigger__desc {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--brand-on-dark-muted);
}
@media (max-width: 1100px) {
	.vn-sd6-warum__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
	.vn-sd6-warum__head { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 560px) {
	.vn-sd6-warum__grid { grid-template-columns: 1fr; }
}

/* 5c — Kosten & Umfang: Sektion + Leistungsumfang-Liste komplett entfernt
   (User 06.07.2026: zu komplex bzw. redundant zum Ablauf). Preis-Story läuft
   über Zusagen + FAQ, der Ablauf zeigt die einzelnen Schritte. */

/* 6 — 3-ZAHLEN-BAND: nutzt vn-cmp-statrow (orange, Count-up wie Home-Intro) */
.vn-sd6-zahlen .vn-cmp-statrow { max-width: none; }
.vn-sd6-zahlen .vn-cmp-statrow__num { color: var(--brand-orange); }
.vn-sd6-zahlen__note {
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--brand-on-dark-muted);
}
@media (max-width: 700px) {
	.vn-sd6-zahlen .vn-cmp-statrow { grid-template-columns: 1fr; }
}