/* ==========================================================================
   123-SERVICE COMPONENT-LAYER (02.07.2026)
   Geteilte Bausteine nach Startseiten-Referenz, gegen Text-Wuesten auf
   Subpages. Nur Brand-Tokens, keine Hardcodings. Aenderungen hier wirken
   auf allen Seiten, die die Komponente nutzen.

   Quellen der Optik (Home bleibt unangetastet):
   - vn-cmp-statrow      <- Intro-Kennzahlenreihe
   - vn-cmp-split        <- Warum-wir Foto/Content-Row (60/40, Notch-Bild)
   - vn-cmp-checks       <- Warum-wir Check-Liste (gefuellter Orange-Kreis)
   - vn-cmp-photocards   <- Leistungsuebersicht-Karten (Orange-Gradient)
   - vn-cmp-articlecards <- Wissen-Teaser-Karten (Cover oben + Gradient)

   Partials: template-parts/components/{stat-row,media-split,check-list,
   photo-cards,article-cards}.php
   ========================================================================== */

/* --- Kennzahlen-Reihe ---------------------------------------------------- */
.vn-cmp-statrow {
	display: grid;
	grid-template-columns: repeat(var(--cmp-statrow-cols, 3), minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid color-mix(in srgb, var(--brand-on-dark) 14%, transparent);
	max-width: 46rem;
}
.vn-cmp-statrow__stat {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.vn-cmp-statrow__num {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--brand-on-dark-strong);
}
.vn-cmp-statrow__label {
	font-size: var(--type-body-sm, 0.9rem);
	line-height: 1.4;
	color: color-mix(in srgb, var(--brand-on-dark) 70%, transparent);
}
@media (max-width: 560px) {
	.vn-cmp-statrow { grid-template-columns: 1fr; gap: 1.25rem; max-width: none; }
}

/* --- Foto/Content-Split (60/40, Bild mit Notch) --------------------------- */
.vn-cmp-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}
.vn-cmp-split--reverse {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.vn-cmp-split--reverse .vn-cmp-split__fig { order: 2; }
.vn-cmp-split__fig {
	margin: 0;
	border-radius: var(--radius-card);
	overflow: hidden;
}
.vn-cmp-split__fig img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--cmp-split-ratio, 4 / 3);
	object-fit: cover;
}
.vn-cmp-split__content { min-width: 0; }
.vn-cmp-split__title {
	font-family: var(--font-display);
	font-size: var(--type-h3, 1.35rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: var(--brand-on-dark-strong);
	margin: 0 0 0.75rem;
}
.vn-cmp-split__lead {
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	line-height: 1.6;
	color: var(--brand-on-dark-muted);
	margin: 0;
	max-width: 52ch;
}
.vn-cmp-split__lead + .vn-cmp-checks { margin-top: 1.5rem; }
.vn-cmp-split .vn-inline-link { margin-top: 1.5rem; display: inline-flex; }
@media (max-width: 820px) {
	.vn-cmp-split,
	.vn-cmp-split--reverse { grid-template-columns: 1fr; gap: 1.75rem; }
	.vn-cmp-split--reverse .vn-cmp-split__fig { order: 0; }
}

/* --- Check-Liste (gefuellter Orange-Kreis, weisses Haekchen) -------------- */
.vn-cmp-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--cmp-checks-cols, 1), minmax(0, 1fr));
	gap: clamp(0.85rem, 1.6vw, 1.15rem) clamp(1.5rem, 3vw, 2.5rem);
}
.vn-cmp-checks__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.8rem;
	align-items: start;
}
.vn-cmp-checks__ico {
	width: 1.3rem;
	height: 1.3rem;
	margin-top: 0.1rem;
	border-radius: 999px;
	background: var(--brand-orange);
	color: var(--brand-on-dark-strong);
	display: grid;
	place-items: center;
	flex: none;
}
.vn-cmp-checks__ico svg { width: 12px; height: 12px; }
.vn-cmp-checks__title {
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--brand-on-dark-strong);
}
.vn-cmp-checks__text {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--brand-on-dark-muted);
	margin: 0.2rem 0 0;
}
@media (min-width: 640px) {
	.vn-cmp-checks--2col { --cmp-checks-cols: 2; }
}

/* Variante --rows: Zeilen mit Hairline-Trenner + Hover (Optik: Home Warum-wir) */
.vn-cmp-checks--rows { gap: 0; }
.vn-cmp-checks--rows .vn-cmp-checks__item {
	column-gap: 0.9rem;
	padding: clamp(0.8rem, 1.5vw, 1.15rem) 0;
	border-bottom: 1px solid var(--brand-hairline);
	transition: background-color var(--d-snap) var(--ease-out);
}
.vn-cmp-checks--rows .vn-cmp-checks__item:last-child { border-bottom: 0; }
.vn-cmp-checks--rows .vn-cmp-checks__ico {
	margin-top: 0.2rem;
	transition: transform var(--d-snap) var(--ease-out);
}
.vn-cmp-checks--rows .vn-cmp-checks__title {
	display: block;
	font-size: 1.02rem;
	line-height: 1.22;
	margin: 0 0 0.25rem;
}
.vn-cmp-checks--rows .vn-cmp-checks__text {
	font-size: 0.88rem;
	line-height: 1.45;
	margin: 0;
	text-wrap: pretty;
}
@media (hover: hover) and (pointer: fine) {
	.vn-cmp-checks--rows .vn-cmp-checks__item:hover { background-color: color-mix(in srgb, var(--brand-navy-soft) 45%, transparent); }
	.vn-cmp-checks--rows .vn-cmp-checks__item:hover .vn-cmp-checks__ico { transform: translateX(2px); }
}

/* Scroll-Pop der Check-Icons (CSS-only, uebernommen aus Home Warum-wir) */
@keyframes vn-cmp-pop {
	from { opacity: 0; scale: 0.5; }
	65% { opacity: 1; scale: 1.08; }
	to { opacity: 1; scale: 1; }
}
@keyframes vn-cmp-draw {
	from { stroke-dashoffset: 22; }
	to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.vn-cmp-checks__ico {
			animation-name: vn-cmp-pop;
			animation-fill-mode: both;
			animation-timing-function: var(--ease-out);
			animation-timeline: view();
			animation-range: entry 0% cover 12%;
		}
		.vn-cmp-checks__ico svg path {
			stroke-dasharray: 22;
			animation-name: vn-cmp-draw;
			animation-fill-mode: both;
			animation-timing-function: var(--ease-out);
			animation-timeline: view();
			animation-range: entry 8% cover 18%;
		}
	}
}

/* --- Foto-Karten (Bild-Karte, Orange-Gradient unten links) ---------------- */
.vn-cmp-photocards {
	list-style: none;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--cmp-photocards-cols, 3), minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}
.vn-cmp-photocard {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-card);
	text-decoration: none;
}
.vn-cmp-photocard img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease-out);
}
.vn-cmp-photocard:hover img,
.vn-cmp-photocard:focus-visible img { transform: scale(1.04); }
.vn-cmp-photocard__ov {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(1.1rem, 2.2vw, 1.75rem);
	background:
		radial-gradient(125% 105% at -6% 112%,
			color-mix(in srgb, var(--brand-orange) 95%, transparent) 0%,
			color-mix(in srgb, var(--brand-orange) 70%, transparent) 26%,
			color-mix(in srgb, var(--brand-orange) 32%, transparent) 46%,
			transparent 70%),
		linear-gradient(to top,
			color-mix(in srgb, var(--brand-navy) 60%, transparent) 0%,
			color-mix(in srgb, var(--brand-navy) 14%, transparent) 32%,
			transparent 50%);
}
.vn-cmp-photocard__name {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.12;
	font-size: clamp(1.2rem, 1.8vw, 1.6rem);
	color: var(--brand-on-dark-strong);
}
.vn-cmp-photocard__text {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--brand-on-dark);
	margin: 0.4rem 0 0.75rem;
	max-width: 42ch;
}
.vn-cmp-photocard__more {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--brand-on-dark-strong);
	font-weight: 600;
	font-size: 0.9rem;
}
.vn-cmp-photocard__name + .vn-cmp-photocard__more { margin-top: 0.6rem; }
.vn-cmp-photocard__more svg { transition: transform 0.25s var(--ease-out); }
.vn-cmp-photocard:hover .vn-cmp-photocard__more svg,
.vn-cmp-photocard:focus-visible .vn-cmp-photocard__more svg { transform: translate(3px, -3px); }
.vn-cmp-photocard:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px var(--brand-navy), inset 0 0 0 5px var(--brand-on-dark-strong);
}

/* Variante --lg: grosse Karten (Optik: Home Leistungsuebersicht) */
.vn-cmp-photocards--lg .vn-cmp-photocard__ov { padding: clamp(1.25rem, 2.6vw, 2rem); }
.vn-cmp-photocards--lg .vn-cmp-photocard__name {
	font-weight: 800;
	font-size: clamp(1.45rem, 2.3vw, 2rem);
	line-height: 1.1;
}
.vn-cmp-photocards--lg .vn-cmp-photocard__text {
	font-size: 1rem;
	margin: 0.5rem 0 0.9rem;
	max-width: 46ch;
}
.vn-cmp-photocards--lg .vn-cmp-photocard__more { font-size: 0.95rem; }
@media (max-width: 920px) {
	.vn-cmp-photocards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.vn-cmp-photocards { grid-template-columns: 1fr; }
}

/* --- Artikel-Karten (Cover oben, Orange-Gradient, Body unten) ------------- */
.vn-cmp-articlecards {
	list-style: none;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--cmp-articlecards-cols, 3), minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}
.vn-cmp-articlecard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--brand-navy-soft);
	border-radius: var(--radius-card);
}
.vn-section--navy-soft .vn-cmp-articlecard,
.vn-section--cream .vn-cmp-articlecard {
	background: color-mix(in srgb, var(--brand-navy) 55%, var(--brand-navy-soft));
}
.vn-cmp-articlecard__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--brand-navy-deep);
}
.vn-cmp-articlecard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--ease-out);
}
.vn-cmp-articlecard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(125% 105% at -6% 112%,
			color-mix(in srgb, var(--brand-orange) 92%, transparent) 0%,
			color-mix(in srgb, var(--brand-orange) 55%, transparent) 26%,
			color-mix(in srgb, var(--brand-orange) 22%, transparent) 46%,
			transparent 68%),
		linear-gradient(to top,
			color-mix(in srgb, var(--brand-navy) 42%, transparent) 0%,
			transparent 46%);
}
.vn-cmp-articlecard:hover .vn-cmp-articlecard__media img { transform: scale(1.05); }
.vn-cmp-articlecard__body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	flex: 1 1 auto;
}
.vn-cmp-articlecard__tag {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--brand-orange);
}
.vn-cmp-articlecard__title {
	font-family: var(--font-display);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.28;
	margin: 0;
	color: var(--brand-on-dark-strong);
}
.vn-cmp-articlecard__title a {
	color: inherit;
	text-decoration: none;
}
.vn-cmp-articlecard__title a:hover { color: var(--brand-orange); }
.vn-cmp-articlecard__excerpt {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--brand-on-dark-muted);
	margin: 0 0 auto;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.vn-cmp-articlecard .vn-inline-link { margin-top: 0.55rem; }
.vn-cmp-articlecard.is-hidden { display: none; }
.vn-wissenteaser .vn-cmp-articlecard__excerpt { -webkit-line-clamp: 2; }
@media (max-width: 640px) {
	.vn-cmp-articlecard__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 920px) {
	.vn-cmp-articlecards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.vn-cmp-articlecards { grid-template-columns: 1fr; }
}

/* --- FAQ-Liste (Optik: Home-FAQ V11 — Hairline-Rows, +/- Marker) ----------- */
.vn-cmp-faq {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: clamp(2.5rem, 5vw, 6rem);
	align-items: start;
}
.vn-cmp-faq__aside {
	position: sticky;
	top: calc(var(--header-h, 4.5rem) + 4rem);
}
.vn-cmp-faq__lead {
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	line-height: 1.55;
	color: var(--brand-on-dark-muted);
	margin: 1rem 0 0;
	max-width: 34ch;
}
.vn-cmp-faq__list {
	display: flex;
	flex-direction: column;
}
.vn-cmp-faq__item { border-top: 1px solid var(--brand-hairline); }
.vn-cmp-faq__item:last-child { border-bottom: 1px solid var(--brand-hairline); }
.vn-cmp-faq__q {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.5rem;
	padding-block: clamp(1.15rem, 2vw, 1.5rem);
}
.vn-cmp-faq__q::-webkit-details-marker { display: none; }
.vn-cmp-faq__q:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }
.vn-cmp-faq__q-text {
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 1.5vw, 1.22rem);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--brand-on-dark);
	transition: color 0.25s var(--ease-out);
}
.vn-cmp-faq__q:hover .vn-cmp-faq__q-text { color: var(--brand-on-dark-strong); }
.vn-cmp-faq__item[open] .vn-cmp-faq__q-text { color: var(--brand-orange); }
.vn-cmp-faq__marker {
	display: inline-flex;
	color: var(--brand-on-dark-faint);
	transition: color 0.25s var(--ease-out);
}
.vn-cmp-faq__item[open] .vn-cmp-faq__marker { color: var(--brand-orange); }
.vn-cmp-faq__marker-v {
	transform-origin: center;
	transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.vn-cmp-faq__item[open] .vn-cmp-faq__marker-v { opacity: 0; transform: scaleY(0); }
.vn-cmp-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s var(--ease-out);
}
.vn-cmp-faq__item[open] .vn-cmp-faq__a { grid-template-rows: 1fr; }
.vn-cmp-faq__a-clip { overflow: hidden; min-height: 0; }
.vn-cmp-faq__a-text {
	margin: 0;
	padding: 0 0 clamp(1.15rem, 2vw, 1.5rem);
	font-size: clamp(0.98rem, 1.1vw, 1.05rem);
	line-height: 1.62;
	color: var(--brand-on-dark-muted);
	max-width: 62ch;
}
@media (max-width: 820px) {
	.vn-cmp-faq { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); }
	.vn-cmp-faq__aside { position: static; }
	.vn-cmp-faq__lead { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	.vn-cmp-faq__q-text,
	.vn-cmp-faq__marker,
	.vn-cmp-faq__marker-v,
	.vn-cmp-faq__a { transition: none !important; }
}

/* --- Kleinteile ------------------------------------------------------------ */
.vn-region-area__outro {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	max-width: 62ch;
	color: var(--brand-on-dark-muted);
	line-height: 1.6;
}

/* --- Motion-Disziplin ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.vn-cmp-photocard img,
	.vn-cmp-photocard__more svg,
	.vn-cmp-articlecard__media img { transition: none; }
}