/* =============================================================
   Malermeisterbetrieb Steinberg – globales Stylesheet
   Tokens: docs/design/DESIGN_TOKENS.md (1:1 übernommen)
   Motion: docs/design/MOTION_SYSTEM.md
   Mobile First, ausschließlich transform/opacity für Bewegung.
   ============================================================= */

/* ---------- 1. Design Tokens ---------- */
:root {
	/* Flächen */
	--color-bg-primary: #1C1B19;
	--color-bg-elevated: #272521;

	/* Text */
	--color-text-primary: #F2EFE9;
	--color-text-secondary: #C8C2B9;

	/* Akzent */
	--color-accent: #D2CCC2;
	--color-accent-hover: #BEB5A8;

	/* Rahmen */
	--color-border: #5A5249;

	/* abgeleitet */
	--color-border-subtle: rgb(90 82 73 / 40%);
	--color-overlay-scrim: rgb(28 27 25 / 72%);
	--color-nav-surface: rgb(39 37 33 / 68%);
	--color-focus-ring: #D2CCC2;

	/* Typografie – Poppins-basiert (modern, markennah).
	   Fontdateien noch nicht im Projekt → Fallback-Stacks greifen,
	   siehe assets/fonts/README.md. Serife nur noch als optionaler
	   punktueller Akzent (--font-accent), nicht als Grundsystem. */
	--font-sans: "Poppins", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-accent: "Fraunces", Georgia, serif;

	--fs-display: clamp(2.125rem, 1.4rem + 3vw, 3.75rem);
	--fs-h1: clamp(2rem, 1.6rem + 1.9vw, 2.75rem);
	--fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	--fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--fs-body-lg: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-eyebrow: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
	--fs-button: 0.9375rem;

	/* Abstände */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* Container */
	--container-max: 1280px;
	--container-wide: 1440px;
	--container-padding: 20px;

	/* Radien */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-full: 999px;

	/* Rahmen */
	--border-width: 1px;
	--border-default: var(--border-width) solid var(--color-border);
	--border-subtle: var(--border-width) solid var(--color-border-subtle);

	/* Schatten */
	--shadow-float: 0 12px 32px -8px rgb(0 0 0 / 45%);
	--shadow-card-hover: 0 8px 20px -6px rgb(0 0 0 / 35%);

	/* Fokus */
	--focus-ring-width: 2px;
	--focus-ring-offset: 2px;
	--focus-ring: var(--focus-ring-width) solid var(--color-focus-ring);

	/* Motion (zentrale Tokens, siehe docs/design/MOTION_SYSTEM.md):
	   instant/fast = Interaktionen, base = Standard-Übergänge,
	   reveal/slow = große Sektions-Reveals beim Viewport-Eintritt */
	--duration-instant: 120ms;
	--duration-fast: 220ms;
	--duration-base: 400ms;
	--duration-slow: 650ms;
	--duration-reveal: 750ms;
	--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--stagger-step: 90ms;

	/* Z-Index */
	--z-base: 0;
	--z-card-hover: 1;
	--z-nav: 100;
	--z-mobile-menu: 200;
	--z-overlay: 300;
	--z-skip-link: 400;
}

@media (min-width: 768px) {
	:root { --container-padding: 32px; }
}

@media (min-width: 1280px) {
	:root { --container-padding: 64px; }
}

/* ---------- 2. Basis ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-bg-primary);
	color: var(--color-text-primary);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: 1.6;
	overflow-x: clip;
	overflow-wrap: break-word;
}

/* Marken-Cursor: der stilisierte Pinsel aus dem offiziellen Logo (aus der
   Logo-Datei extrahiert), diagonal um 45° gedreht wie ein klassischer
   Mauszeiger – Spitze nach links oben, Stiel nach rechts unten
   (PNG 25×29 bzw. 50×58 für HiDPI). Hotspot (2 0) liegt exakt auf der
   sichtbaren vorderen Pinselspitze. Nur für präzise Maus-Zeiger aktiv –
   Touchgeräte und grobe Zeiger behalten die Systemcursor; Systemfallback
   (auto/pointer) ist immer angegeben. Die image-set-Deklaration überschreibt
   die einfache url()-Zeile nur in Browsern, die sie im cursor unterstützen. */
@media (hover: hover) and (pointer: fine) {
	body {
		cursor: url("../img/cursor-brush.png") 2 0, auto;
		cursor: image-set(url("../img/cursor-brush.png") 1x, url("../img/cursor-brush-2x.png") 2x) 2 0, auto;
	}

	a, button, [role="button"], summary, label, select,
	input[type="checkbox"], input[type="radio"],
	input[type="submit"], input[type="button"] {
		cursor: url("../img/cursor-brush.png") 2 0, pointer;
		cursor: image-set(url("../img/cursor-brush.png") 1x, url("../img/cursor-brush-2x.png") 2x) 2 0, pointer;
	}

	/* Texteingaben behalten den System-Textcursor (klare Editier-Affordanz) */
	textarea,
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]) {
		cursor: text;
	}
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
	font-family: var(--font-sans);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-4);
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }

p { margin: 0 0 var(--space-4); }

a { color: inherit; }

ul[class], ol[class],
.nav-menu ul, .nav-panel ul,
.service-strip ul, .footer-col ul, .footer-legal ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
	border-radius: var(--radius-sm);
}

::selection {
	background: var(--color-accent);
	color: var(--color-bg-primary);
}

/* Anker-Sektionen unter der fixen Nav freistellen */
[id] { scroll-margin-top: 112px; }

/* ---------- 3. Layout-Utilities ---------- */
.container {
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--container-padding));
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.container--wide {
	max-width: calc(var(--container-wide) + 2 * var(--container-padding));
}

.section {
	padding-block: var(--space-8);
}

@media (min-width: 768px) {
	.section { padding-block: var(--space-9); }
}

@media (min-width: 1280px) {
	.section { padding-block: var(--space-10); }
}

.section--flush-top { padding-block-start: 0; }

/* ---------- 3b. Globales Hintergrund-/Lichtsystem ----------
   Zusammenhängende räumliche Tiefe statt einer durchgehend einfarbigen
   Fläche: pro Sektion maximal zwei sehr weiche Verläufe (radial/linear)
   als nicht-interaktive Hintergrundebene. Die Lichtfarben leiten sich aus
   dem Hero-Video ab (mineralischer Wandton = Greige, architektonischer
   Schatten = Taupe/Anthrazit). Keine Fremdfarben, keine harten Kanten,
   keine Animation, keine externen Texturen. */
#leistungen,
#projekte,
#arbeitsweise,
.region-section,
.reviews-section,
#kontakt,
.page-hero {
	position: relative;
}

#leistungen::before,
#projekte::before,
#arbeitsweise::before,
.region-section::before,
.reviews-section::before,
#kontakt::before,
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Leistungen: großflächige Aufhellung hinter der Kartenlandschaft,
   Taupe-Wärme im unteren Gegenpol */
#leistungen::before {
	background:
		radial-gradient(70rem 44rem at 22% 8%, rgb(210 204 194 / 6%), transparent 70%),
		radial-gradient(52rem 36rem at 86% 84%, rgb(90 82 73 / 14%), transparent 72%);
}

/* Projekte: ruhiger als der Leistungsbereich – die echten Projektbilder
   dominieren, außen eine leichte Vignette */
#projekte::before {
	background:
		radial-gradient(60rem 30rem at 50% 0%, rgb(210 204 194 / 3.5%), transparent 70%),
		radial-gradient(140% 130% at 50% 42%, transparent 60%, rgb(19 18 17 / 45%) 100%);
}

/* Arbeitsweise: breiter, sehr dezenter Lichtverlauf entlang der Prozessachse */
#arbeitsweise::before {
	background: radial-gradient(96rem 26rem at 50% 58%, rgb(210 204 194 / 4.5%), transparent 72%);
}

/* Region: dezente radiale Aufhellung im Kartenbereich rund um Arnsberg */
.region-section::before {
	background: radial-gradient(48rem 34rem at 52% 62%, rgb(210 204 194 / 5%), transparent 70%);
}

/* Region als EIN zusammenhängendes Feld: dieselbe Kartengrafik läuft als
   weich maskierte, rein dekorative Hintergrundebene hinter Intro und
   Ortsliste weiter und geht nahtlos in die interaktive Kartenbühne über.
   Wichtig: Die klickbaren Hotspots leben ausschließlich auf dem
   maßhaltigen 1600/900-Canvas (region-stage) – diese Ebene hier ist
   nicht interaktiv und trägt keine Koordinaten. */
.region-section {
	overflow: clip;
}

.region-section::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url("../img/region-map-dark-1600.jpg");
	background-size: cover;
	background-position: 50% 24%;
	opacity: 0.32;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 46%, transparent 72%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 46%, transparent 72%);
}

/* Bewertungen: subtil erhöhte Ebene mit ruhiger Lichtführung von oben */
.reviews-section::before {
	background:
		linear-gradient(180deg, rgb(39 37 33 / 45%), rgb(39 37 33 / 0%) 30%),
		radial-gradient(60rem 32rem at 50% 10%, rgb(210 204 194 / 4%), transparent 70%);
}

/* Abschluss-CTA: dunklere Außenbereiche rahmen den Lichtkern des Panels */
#kontakt::before {
	background: radial-gradient(130% 110% at 50% 50%, transparent 55%, rgb(19 18 17 / 40%) 100%);
}

/* Unterseiten-Hero: gleiche mineralische Lichtbühne wie der Homepage-Hero,
   ohne Medienpanel – reine Titelzone oberhalb des Fließtexts */
.page-hero::before {
	background:
		radial-gradient(56rem 32rem at 14% -4%, rgb(210 204 194 / 7%), transparent 68%),
		radial-gradient(44rem 26rem at 92% 36%, rgb(90 82 73 / 18%), transparent 72%);
}

.page-hero {
	padding-block: 118px var(--space-7);
}

@media (min-width: 768px) {
	.page-hero { padding-block-start: 132px; }
}

.page-hero__intro {
	margin-top: var(--space-3);
	max-width: 60ch;
}

/* Unterseiten-Hero: eigene Ladeinszenierung in der Sprache des
   Homepage-Heros (Zeilen-Reveal mit Versatz, einmalig beim Laden) */
.js .page-hero .breadcrumbs,
.js .page-hero .eyebrow,
.js .page-hero .page-hero__title,
.js .page-hero .page-hero__intro {
	animation: hero-line var(--duration-slow) var(--ease-standard) both;
}

.js .page-hero .eyebrow { animation-delay: 100ms; }
.js .page-hero .page-hero__title { animation-delay: 200ms; }
.js .page-hero .page-hero__intro { animation-delay: 300ms; }

.page-body :where(h2, h3) { margin-top: var(--space-7); }
.page-body :where(p, ul, ol) { max-width: 72ch; }

/* Kontaktkarte (Kontaktseite): vier Angaben in einem ruhigen Raster,
   gleiche Kartensprache wie die Qualitätskacheln (Radius/Rahmen/Schatten) */
.contact-details__grid {
	display: grid;
	gap: 1px;
	background: var(--color-border);
	border: var(--border-subtle);
	border-radius: var(--radius-md);
	overflow: hidden;
}

@media (min-width: 640px) {
	.contact-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* bei ungerader Kartenzahl füllt die letzte Karte die volle Breite */
	.contact-details__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.contact-details__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-6);
	background: var(--color-bg-elevated);
}

.contact-details__label {
	font-size: var(--fs-small);
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.contact-details__value {
	font-size: var(--fs-body-lg);
	color: var(--color-text-primary);
}

a.contact-details__value:hover,
a.contact-details__value:focus-visible { color: var(--color-accent); }

.contact-details__link {
	color: var(--color-text-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
	width: fit-content;
}

.contact-details__link:hover,
.contact-details__link:focus-visible { color: var(--color-accent); }

/* Breadcrumbs (Leistungs-/Ortsseiten): rein textuell, gleiche
   Sekundärfarbe wie Eyebrow/Meta-Text, kein zusätzliches Icon-Set. */
.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	font-size: var(--fs-small);
	color: var(--color-text-secondary);
}

.breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--color-text-secondary);
	text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible { color: var(--color-accent); }

.breadcrumbs__sep { color: var(--color-border); }

.breadcrumbs [aria-current="page"] { color: var(--color-text-primary); }

/* Leistungsdetail: Leistungsumfang/Kundennutzen als zwei ruhige Karten,
   gleiche Fläche/Radius/Rahmen wie Kontaktkarte (contact-details__item). */
.detail-grid {
	display: grid;
	gap: var(--space-5);
	margin: var(--space-6) 0;
}

@media (min-width: 768px) {
	.detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

.detail-card {
	padding: var(--space-6);
	background: var(--color-bg-elevated);
	border: var(--border-subtle);
	border-radius: var(--radius-md);
}

.detail-card h2,
.detail-card h3 { margin-top: 0; }

.detail-card ul {
	display: grid;
	gap: var(--space-3);
}

.detail-card li {
	position: relative;
	padding-left: var(--space-6);
	color: var(--color-text-secondary);
}

.detail-card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 7px;
	height: 7px;
	border-radius: var(--radius-full);
	background: var(--color-accent);
}

/* Leistungs-/Ortsbild im Fließtext: gleiche Bildsprache wie
   trust-panel__media (Radius, Rahmen, Bildunterschrift-Verlauf). */
.service-detail__media-grid {
	display: grid;
	gap: var(--space-4);
	margin: var(--space-7) 0;
}

@media (min-width: 640px) {
	.service-detail__media-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.service-detail__media {
	position: relative;
	border-radius: var(--radius-md);
	border: var(--border-subtle);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.service-detail__media img { width: 100%; height: 100%; object-fit: cover; }

.service-detail__media figcaption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--space-3) var(--space-4);
	background: linear-gradient(transparent, rgb(28 27 25 / 88%));
	color: var(--color-text-secondary);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
}

/* FAQ: native <details>/<summary> – funktioniert ohne JavaScript,
   kein zusätzliches Skript nötig. */
.faq {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-6) 0;
}

.faq details {
	padding: var(--space-5) var(--space-6);
	background: var(--color-bg-elevated);
	border: var(--border-subtle);
	border-radius: var(--radius-md);
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	cursor: pointer;
	font-weight: 600;
	font-family: var(--font-sans);
	color: var(--color-text-primary);
	list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--color-accent);
	border-bottom: 2px solid var(--color-accent);
	transform: rotate(45deg);
	transition: transform var(--duration-fast) var(--ease-standard);
}

.faq details[open] summary::after { transform: rotate(-135deg); }

.faq p:last-child { margin: var(--space-4) 0 0; color: var(--color-text-secondary); }

/* kontrollierte FAQ-Interaktion: Antwort blendet weich ein (nur
   opacity/transform, kein Layout-Trick, native <details>-Funktion bleibt) */
.faq details[open] p {
	animation: faq-answer var(--duration-fast) var(--ease-standard) both;
}

@keyframes faq-answer {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Ortsprioritäten (Ortsseiten): gleiche Listensprache wie Leistungsumfang */
.priority-list {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-6) 0;
}

@media (min-width: 640px) {
	.priority-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.priority-list li {
	position: relative;
	padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6);
	background: var(--color-bg-elevated);
	border: var(--border-subtle);
	border-radius: var(--radius-sm);
	color: var(--color-text-secondary);
}

.priority-list li::before {
	content: "";
	position: absolute;
	left: var(--space-4);
	top: 1.15em;
	width: 7px;
	height: 7px;
	border-radius: var(--radius-full);
	background: var(--color-accent);
}

.priority-list strong { color: var(--color-text-primary); }

/* Ablauf (Leistungsseiten): schlanke nummerierte Schrittliste – bewusst
   ein eigenes, spaltenflexibles Muster statt der homepage-eigenen
   process-steps-Komponente (dort fest auf fünf Schritte ausgelegt). */
.step-list {
	display: grid;
	gap: var(--space-5);
	margin: var(--space-6) 0;
	counter-reset: ablauf;
}

@media (min-width: 768px) {
	.step-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

.step-list li {
	counter-increment: ablauf;
	position: relative;
	padding-left: 56px;
}

.step-list li::before {
	content: counter(ablauf, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: var(--border-default);
	border-radius: var(--radius-full);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--color-accent);
}

.step-list h3 { margin: 0 0 var(--space-1); font-size: var(--fs-body-lg); }

.step-list p { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-small); }

/* Screenreader-only */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip-Link */
.skip-link {
	position: fixed;
	top: var(--space-3);
	left: var(--space-3);
	z-index: var(--z-skip-link);
	padding: var(--space-3) var(--space-5);
	background: var(--color-accent);
	color: var(--color-bg-primary);
	border-radius: var(--radius-full);
	font-weight: 600;
	font-size: var(--fs-small);
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus-visible {
	transform: none;
	outline-offset: 4px;
}

/* ---------- 4. Typo-Bausteine ---------- */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--color-border);
}

.accent-word {
	font-style: normal; /* em-Default unterdrücken – Akzent nur über Farbe */
	color: var(--color-accent);
}

.lead {
	font-size: var(--fs-body-lg);
	line-height: 1.55;
	color: var(--color-text-secondary);
	max-width: 56ch;
}

.section-head {
	margin-bottom: var(--space-7);
}

.section-head h2 { margin-bottom: 0; }

.section-head__intro {
	margin-top: var(--space-4);
	color: var(--color-text-secondary);
	max-width: 48ch;
}

@media (min-width: 1024px) {
	.section-head--split {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-8);
	}

	.section-head--split .section-head__intro {
		margin-top: 0;
		text-align: left;
		flex: 0 1 38ch;
	}

	.section-head { margin-bottom: var(--space-8); }
}

/* ---------- 5. Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 48px;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-full);
	border: var(--border-width) solid transparent;
	font-family: var(--font-sans);
	font-size: var(--fs-button);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		color var(--duration-instant) var(--ease-standard),
		background-color var(--duration-instant) var(--ease-standard),
		border-color var(--duration-instant) var(--ease-standard),
		transform var(--duration-instant) var(--ease-standard);
}

.btn:focus-visible { border-radius: var(--radius-full); }

.btn .btn__arrow {
	display: inline-flex;
	transition: transform var(--duration-instant) var(--ease-standard);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(4px); }

.btn:hover,
.btn:focus-visible { transform: translateY(-2px); }

.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--color-accent);
	color: var(--color-bg-primary);
	font-weight: 600;
}

.btn--primary:hover,
.btn--primary:focus-visible { background: var(--color-accent-hover); }

.btn--secondary {
	background: transparent;
	border-color: var(--color-border);
	color: var(--color-text-primary);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* WhatsApp-Kontakt: ergänzender, ruhiger Sekundär-Button – als WhatsApp
   erkennbar über die Glyphe in zurückgenommenem Grün, ohne das
   Farbsystem zu dominieren. Immer externer Link mit rel="noopener". */
.btn--whatsapp {
	background: transparent;
	border-color: var(--color-border);
	color: var(--color-text-primary);
}

.btn--whatsapp svg {
	flex: none;
	color: #63B27F;
}

.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
	border-color: #63B27F;
	color: var(--color-text-primary);
}

/* Runder Icon-/Pfeil-Button (Karten, Mobile-Trigger) */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	border: var(--border-default);
	background: transparent;
	color: var(--color-text-primary);
	cursor: pointer;
	transition:
		color var(--duration-instant) var(--ease-standard),
		border-color var(--duration-instant) var(--ease-standard),
		background-color var(--duration-instant) var(--ease-standard);
}

.icon-btn:hover,
.icon-btn:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-bg-primary);
	background: var(--color-accent);
}

/* ---------- 6. Karten-Grundsystem ---------- */
.card {
	background: var(--color-bg-elevated);
	border: var(--border-subtle);
	border-radius: var(--radius-md);
}

/* Echte Bilder in Medienrahmen: volle Fläche, cover-Crop,
   Seitenverhältnis kommt vom Container (kein CLS). */
.media-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Platzhalter-Medienfläche (Entwicklung): bewusst als Platzhalter erkennbar,
   bis freigegebene Projektbilder eingepflegt sind. */
.ph-media {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(45deg,
			rgb(90 82 73 / 10%) 0 14px,
			transparent 14px 28px),
		var(--color-bg-elevated);
}

/* In Karten mit unten liegendem Text-Overlay das Label nach oben setzen,
   damit Platzhalter-Kennzeichnung und Karteninhalt nicht kollidieren. */
.project-card .ph-media {
	place-items: start center;
	padding-top: var(--space-5);
}

/* Flache Leistungskarten: Label als kompaktes Badge oben rechts */
.service-card .ph-media {
	place-items: start end;
	padding: var(--space-3);
}

.service-card .ph-media__label {
	font-size: 0.6875rem;
	padding: var(--space-1) var(--space-3);
}

.ph-media__label {
	max-width: 85%;
	padding: var(--space-2) var(--space-4);
	border: var(--border-subtle);
	border-radius: var(--radius-full);
	background: var(--color-overlay-scrim);
	color: var(--color-text-secondary);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	text-align: center;
}

/* ---------- 7. Navigation (Pillen-Nav) ----------
   position: fixed statt sticky: die Kopfzeile nimmt keinen eigenen
   Platz im Dokumentfluss ein, sondern schwebt als Overlay direkt auf
   der Hero-Bühne – Hero-Medium und Seitenhintergrund laufen bis an die
   Viewport-Oberkante durch (kein abgesetzter dunkler Balken). */
.site-nav {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: var(--z-nav);
	padding: var(--space-4) var(--container-padding) 0;
	pointer-events: none; /* nur die Pille selbst ist interaktiv */
}

.nav-pill {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
	background: var(--color-nav-surface);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: var(--border-subtle);
	border-radius: var(--radius-full);
	/* feine obere Lichtkante löst die Pille optisch vom Video */
	box-shadow: var(--shadow-float), inset 0 1px 0 rgb(210 204 194 / 8%);
	transform-origin: top center;
	transition:
		transform var(--duration-fast) var(--ease-in-out),
		background-color var(--duration-fast) var(--ease-in-out);
}

/* beim Scrollen elegant komprimieren: transform-basiert (kein Layout-Sprung),
   Fläche wird minimal dichter, damit sie vor wechselnden Frames stabil bleibt */
.site-nav.is-compact .nav-pill {
	transform: translateY(-4px) scale(0.96);
	background: rgb(39 37 33 / 80%);
}

/* Offizielles Firmenlogo (SVG, helle Wortmarke – funktioniert auf dunklem
   Grund). Feste Höhe + width:auto halten das Seitenverhältnis bei jeder
   Containergröße; die Pillen-Kompaktierung skaliert per transform, das
   Logo wird dadurch nie verzerrt oder beschnitten. */
.nav-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
}

.nav-brand img {
	display: block;
	height: 46px;
	width: auto;
}

.nav-menu { display: none; }

.nav-cta { display: none; }

.nav-toggle {
	margin-left: auto;
	flex: none;
}

.nav-toggle .nav-toggle__bars {
	display: block;
	position: relative;
	width: 16px;
	height: 10px;
}

.nav-toggle .nav-toggle__bars::before,
.nav-toggle .nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--duration-fast) var(--ease-in-out);
}

.nav-toggle .nav-toggle__bars::before { top: 0; }
.nav-toggle .nav-toggle__bars::after { bottom: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	transform: translateY(4.25px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	transform: translateY(-4.25px) rotate(-45deg);
}

/* Mobiles Menü-Panel */
.nav-panel {
	position: fixed;
	inset-inline: var(--container-padding);
	top: 88px;
	z-index: var(--z-mobile-menu);
	display: none;
	padding: var(--space-5);
	background: var(--color-bg-elevated);
	border: var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-float);
}

.nav-panel.is-open { display: block; }

.nav-panel ul {
	display: grid;
	gap: var(--space-1);
}

.nav-panel a:not(.btn) {
	display: block;
	padding: var(--space-3) var(--space-3);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body-lg);
	font-family: var(--font-sans);
	font-weight: 500;
	text-decoration: none;
	color: var(--color-text-primary);
	transition: color var(--duration-instant) var(--ease-standard);
}

.nav-panel a:not(.btn):hover,
.nav-panel a:not(.btn):focus-visible { color: var(--color-accent); }

.nav-panel a[aria-current="page"] { color: var(--color-accent); }

.nav-panel .nav-panel__cta {
	margin-top: var(--space-4);
	width: 100%;
}

/* Mobiles Menü: Gruppenüberschriften ordnen Leistungen/Unternehmen/Service,
   ohne zusätzliche Accordion-Logik – alle Links bleiben jederzeit sichtbar
   und fokussierbar (keine versteckten Zustände auf kleinen Bildschirmen). */
.nav-panel__heading {
	margin: var(--space-5) var(--space-3) var(--space-1);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.nav-panel__heading:first-child { margin-top: 0; }

@media (min-width: 1024px) {
	.site-nav { padding-top: var(--space-5); }

	.nav-menu {
		display: block;
		margin-inline: auto;
	}

	.nav-menu > ul {
		display: flex;
		gap: var(--space-2);
	}

	.nav-menu a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 var(--space-4);
		font-size: var(--fs-button);
		font-weight: 500;
		text-decoration: none;
		color: var(--color-text-secondary);
		background: transparent;
		border-radius: var(--radius-full);
		transition:
			color var(--duration-instant) var(--ease-standard),
			background-color var(--duration-fast) var(--ease-standard),
			transform var(--duration-fast) var(--ease-standard);
	}

	/* dezentes Abheben statt reiner Farbänderung – ohne Layout-Sprung
	   (translateY, kein margin/height-Wechsel) */
	.nav-menu a:hover,
	.nav-menu a:focus-visible {
		color: var(--color-text-primary);
		background: rgb(210 204 194 / 6%);
		transform: translateY(-3px);
	}

	/* aktive Seite: heller Text auf dezenter Lichtfläche, bleibt vom
	   Hover-Zustand der übrigen Links klar unterscheidbar */
	.nav-menu a[aria-current="page"] {
		color: var(--color-text-primary);
		background: rgb(210 204 194 / 8%);
	}

	.nav-menu a[aria-current="page"]:hover,
	.nav-menu a[aria-current="page"]:focus-visible {
		background: rgb(210 204 194 / 12%);
	}

	.nav-cta { display: inline-flex; flex: none; }

	.nav-toggle { display: none; }

	.nav-panel { display: none !important; }
}

/* ---------- 8. Hero (KI-Markenvisualisierung: Logo-Wand rechts) ----------
   Komposition folgt dem realen Video (1928x1072):
   - Logo-Safe-Area in der Quelle: x ~ 62-99 %, y ~ 13-61 % (Spachtelwand rechts)
   - Textzone: linkes Drittel (dunkle Architektur), Sonnenfenster mittig-links
   Regeln: Logo nie beschneiden (object-position rechts verankert) und nie
   überdecken (Text und Navigation bleiben links bzw. außerhalb der
   Logo-Zone). Unter 1280px gestapelte Komposition: Text, dann Medienpanel im
   Original-Seitenverhältnis (kein Beschnitt); unter 768px zeigt
   das <picture> ausschließlich den Portrait-Zuschnitt mit vollständigem Logo. */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Abstände zwischen Copy und Medienpanel ausschließlich
	   über gap/padding – keine negativen Margins, keine Überlagerung */
	gap: clamp(24px, 5vw, 44px);
	padding-block: 118px var(--space-6);
	overflow: clip;
	isolation: isolate;
	/* warme mineralische Lichtbühne hinter der gestapelten Textzone –
	   nimmt Wandton und Lichtführung des Videos auf */
	background:
		radial-gradient(56rem 32rem at 14% -4%, rgb(210 204 194 / 7%), transparent 68%),
		radial-gradient(44rem 26rem at 92% 36%, rgb(90 82 73 / 18%), transparent 72%),
		var(--color-bg-primary);
}

/* Gestapelte Ansicht: Copy und Medienpanel ordnen sich direkt im
   Hero-Flex an; der Container wird erst im vollflächigen Hero wieder Box */
.hero__inner { display: contents; }

.hero__copy {
	order: 1;
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--container-padding));
	margin-inline: auto;
	padding-inline: var(--container-padding);
	/* feines Sicherheitsnetz für Lesbarkeit auf hellen Motivpartien */
	text-shadow: 0 1px 2px rgb(28 27 25 / 45%), 0 4px 24px rgb(28 27 25 / 35%);
}

/* Medienpanel (gestapelt): Seitenverhältnis = Zuschnitt der Quelle,
   dadurch kein Beschnitt des Motivs und kein CLS. Poster ist LCP-Element;
   hero-media.js hängt das Video nach dem Initial-Render darüber. */
.hero__backdrop {
	order: 2;
	position: relative;
	width: 100%;
	aspect-ratio: 858 / 1072;
	overflow: hidden;
	background: var(--color-bg-elevated);
}

.hero__backdrop img,
.hero__backdrop video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Video rechts verankert: im Portrait-Panel (<768px) zeigt der Ausschnitt
   dieselbe Logo-Wand wie der Portrait-Poster-Crop; in den Landscape-Stufen
   entspricht das Panel-Seitenverhältnis der Quelle (kein Beschnitt). */
.hero__backdrop video { object-position: 100% 30%; }

.hero__backdrop video {
	opacity: 0;
	transition: opacity 600ms var(--ease-standard);
}

.hero__backdrop video.is-playing { opacity: 1; }

/* weiche Anbindung des Panels an die dunkle Umgebung – bewusst so flach
   gehalten, dass die Logo-Zone (oberes Drittel bis Bildmitte) frei bleibt */
.hero__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgb(28 27 25 / 26%), transparent 12%),
		linear-gradient(0deg, rgb(28 27 25 / 34%), transparent 14%);
}

/* sehr geringe, einmalige Tiefenbewegung; transform-origin rechts hält die
   Logo-Wand exakt im Bild (rechte Kante wird nie beschnitten) */
.js .hero__backdrop img,
.js .hero__backdrop video {
	transform-origin: 100% 40%;
	animation: hero-push 7s var(--ease-standard) both;
}

@keyframes hero-push {
	from { transform: scale(1.015); }
	to { transform: scale(1); }
}

/* Scrim nur im vollflächigen Desktop-Hero aktiv */
.hero__scrim { display: none; }

.hero__eyebrow { margin-bottom: var(--space-5); }

.hero__eyebrow,
.hero .lead { color: var(--color-text-secondary); }

.hero h1 {
	font-size: var(--fs-display);
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-5);
	max-width: 16ch;
}

.hero__headline-line { display: block; }

.hero .lead {
	margin-bottom: var(--space-6);
	max-width: 44ch;
}

.hero__cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Tablet (768-1279px): volles Filmbild ohne Beschnitt, Logo komplett */
@media (min-width: 768px) {
	.hero { padding-block-start: 132px; }

	.hero__backdrop { aspect-ratio: 1928 / 1072; }
}

/* Vollflächiger Kino-Hero ab 1280px: Motiv hinter der linken Textzone,
   object-position rechts verankert die Logo-Wand (1366px und 1440px
   verifiziert: Logo vollständig, Nav-Pille endet oberhalb des Logo-Bogens) */
@media (min-width: 1280px) {
	/* Höhe ausschließlich inhaltsgetrieben (Padding + Copy):
	   keine vh-Kopplung, dadurch stabil bei Browser-Zoom 80–150 % */
	.hero {
		gap: 0;
		padding-block: 152px var(--space-9);
		background: var(--color-bg-primary);
	}

	.hero__inner {
		display: block;
		position: relative;
		width: 100%;
		max-width: calc(var(--container-wide) + 2 * var(--container-padding));
		margin-inline: auto;
		padding-inline: var(--container-padding);
	}

	.hero__copy {
		max-width: 560px;
		margin-inline: 0;
		padding-inline: 0;
		margin-bottom: 0;
	}

	.hero__backdrop {
		position: absolute;
		inset: 0;
		z-index: -2;
		aspect-ratio: auto;
	}

	.hero__backdrop::after { display: none; }

	.hero__backdrop img,
	.hero__backdrop video { object-position: 100% 30%; }

	/* Lesbarkeits-Scrim: kräftig, aber weich hinter der linken Textzone
	   (deckt auch das Sonnenfenster ab), ab der Bildmitte auslaufend –
	   die Logo-Wand rechts bleibt unangetastet; unten weicher Übergang
	   in die Kompetenzleiste, keine flächige Abdunklung */
	.hero__scrim {
		display: block;
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background:
			linear-gradient(0deg, var(--color-bg-primary) 0%, rgb(28 27 25 / 55%) 10%, transparent 30%),
			linear-gradient(90deg, rgb(28 27 25 / 92%) 0%, rgb(28 27 25 / 80%) 24%, rgb(28 27 25 / 46%) 42%, rgb(28 27 25 / 12%) 56%, transparent 66%);
	}
}

@media (min-width: 1440px) {
	.hero__copy { max-width: 600px; }
}

/* Hero-Text-Reveal (nur mit JS aktiv; einmalig beim Laden) */
.js .hero [data-hero-reveal] {
	animation: hero-line var(--duration-slow) var(--ease-standard) both;
	animation-delay: calc(var(--reveal-index, 0) * 120ms);
}

@keyframes hero-line {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- 9. Kompetenzleiste (Vertrauensstreifen) ----------
   Transparente Tiefenebene zwischen Hero und Inhalt: leicht angehobene
   Fläche mit feiner Lichtkante statt harter Rahmenlinien. */
.service-strip {
	position: relative;
	padding-block: var(--space-6);
	background: linear-gradient(180deg, rgb(39 37 33 / 55%), rgb(39 37 33 / 0%) 92%);
}

.service-strip::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent 4%, rgb(210 204 194 / 20%) 50%, transparent 96%);
}

.service-strip ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5) var(--space-4);
}

.service-strip li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	text-align: center;
	font-size: var(--fs-small);
	color: var(--color-text-secondary);
}

.service-strip .strip-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: var(--border-default);
	border-radius: var(--radius-full);
	color: var(--color-accent);
}

@media (min-width: 768px) {
	.service-strip ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.service-strip ul { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ---------- 10. Leistungskarten (bildgestützt) ---------- */
.service-grid {
	display: grid;
	gap: var(--space-5);
}

.service-card {
	position: relative;
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: var(--border-subtle);
	text-decoration: none;
	color: var(--color-text-primary);
	transition:
		border-color var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard);
}

/* Licht und Schatten verschieben sich bei Hover/Fokus subtil */
.service-card:hover,
.service-card:focus-visible {
	border-color: rgb(210 204 194 / 30%);
	box-shadow: 0 18px 40px -20px rgb(0 0 0 / 55%);
}

.service-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.service-card__media > * {
	transition: transform var(--duration-base) var(--ease-standard);
}

.service-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--space-5);
	/* kräftigerer Verlauf für Textkontrast auf echten Fotos (WCAG AA) */
	background: linear-gradient(transparent, rgb(28 27 25 / 55%) 30%, rgb(28 27 25 / 92%) 78%);
}

.service-card h3 { margin-bottom: var(--space-1); }

.service-card__text {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: var(--fs-small);
	max-width: 42ch;
}

.service-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--color-text-primary);
	transition: color var(--duration-instant) var(--ease-standard);
}

.service-card:hover .service-card__cta,
.service-card:focus-visible .service-card__cta { color: var(--color-accent); }

.service-card:hover .service-card__media > *,
.service-card:focus-visible .service-card__media > * { transform: scale(1.04); }

/* Masken-Reveal beim Viewport-Eintritt: Bild deckt sich von oben auf,
   Karteninhalt (Icon/Titel/Pfeil) kommt synchron über [data-reveal]. */
.js .service-card[data-reveal] .service-card__media {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 700ms var(--ease-standard);
	transition-delay: calc(var(--reveal-index, 0) * var(--stagger-step) + 100ms);
}

.js .service-card[data-reveal].is-revealed .service-card__media {
	clip-path: inset(0 0 0% 0);
}

@media (min-width: 768px) {
	.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.service-card__media { aspect-ratio: 16 / 9; }
}

@media (min-width: 1280px) {
	.service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}

/* ---------- 11. Projektkarten ---------- */
.project-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(78%, 320px);
	gap: var(--space-4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--space-3);
	/* Karten dürfen bis an den Viewportrand laufen */
	margin-inline: calc(-1 * var(--container-padding));
	padding-inline: var(--container-padding);
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}

.project-card {
	scroll-snap-align: start;
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: var(--border-subtle);
	background: var(--color-bg-elevated);
	transition:
		transform var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard);
}

.project-card__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.project-card__media > * {
	transition: transform var(--duration-base) var(--ease-standard);
}

.project-card:hover,
.project-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
	z-index: var(--z-card-hover);
}

/* Bild und Overlay bewegen sich minimal unterschiedlich (dezente Tiefe) */
.project-card:hover .project-card__media > *,
.project-card:focus-within .project-card__media > * { transform: scale(1.04); }

.project-card__body {
	transition: transform var(--duration-base) var(--ease-standard);
}

.project-card:hover .project-card__body,
.project-card:focus-within .project-card__body { transform: translateY(-3px); }

.project-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4);
	/* kräftigerer Verlauf für Textkontrast auf echten Fotos (WCAG AA) */
	background: linear-gradient(transparent, rgb(28 27 25 / 55%) 35%, rgb(28 27 25 / 92%) 82%);
}

.project-card h3 {
	margin: 0;
	font-size: var(--fs-h3);
}

.project-card__meta {
	margin: var(--space-1) 0 0;
	color: var(--color-text-secondary);
	font-size: var(--fs-small);
}

/* Sichtbares Regionslabel (Chip oben links): grobe, datenschutzfreundliche
   Gebietsangabe, kein bestätigter exakter Projektort; Alt-Texte und
   strukturierte Daten bleiben neutral. */
.project-card__place {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: rgb(28 27 25 / 72%);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgb(210 204 194 / 22%);
	color: var(--color-text-secondary);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.project-card__place::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: var(--radius-full);
	background: var(--color-accent);
}

@media (min-width: 768px) {
	.project-rail {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-columns: unset;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
		gap: var(--space-5);
	}
}

@media (min-width: 1280px) {
	.project-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 12. Arbeitsweise (5 Schritte) ---------- */
.process-steps {
	display: grid;
	gap: var(--space-6);
	counter-reset: step;
}

.process-step {
	position: relative;
	padding-left: 72px;
}

.process-step__icon {
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: var(--border-default);
	border-radius: var(--radius-full);
	color: var(--color-accent);
	background: var(--color-bg-primary);
	transition: border-color var(--duration-instant) var(--ease-standard);
}

.process-step:hover .process-step__icon { border-color: var(--color-accent); }

/* vertikale gepunktete Verbindungslinie (mobil) */
.process-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 25px;
	top: 60px;
	bottom: calc(-1 * var(--space-6) + 8px);
	border-left: 1px dotted var(--color-border);
}

/* Verbindungslinie baut sich beim Scroll-Eintritt sichtbar auf
   (einmalig, keine Dauerschleife) */
.js .process-step[data-reveal]:not(:last-child)::before {
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 600ms var(--ease-standard);
	transition-delay: calc(var(--reveal-index, 0) * var(--stagger-step) + 250ms);
}

.js .process-step[data-reveal].is-revealed:not(:last-child)::before {
	transform: scaleY(1);
}

.process-step__num {
	display: block;
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--color-accent);
	margin-bottom: var(--space-1);
}

.process-step h3 { margin-bottom: var(--space-2); }

.process-step p {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: var(--fs-small);
	max-width: 36ch;
}

@media (min-width: 1024px) {
	.process-steps {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--space-5);
	}

	.process-step { padding-left: 0; padding-top: 76px; }

	.process-step__icon { top: 0; left: 0; }

	/* horizontale gepunktete Verbindungslinie */
	.process-step:not(:last-child)::before {
		left: 64px;
		right: calc(-1 * var(--space-5) + 8px);
		top: 26px;
		bottom: auto;
		border-left: 0;
		border-top: 1px dotted var(--color-border);
	}

	.js .process-step[data-reveal]:not(:last-child)::before {
		transform: scaleX(0);
		transform-origin: left;
	}

	.js .process-step[data-reveal].is-revealed:not(:last-child)::before {
		transform: scaleX(1);
	}
}

/* ---------- 13. Qualitäts-/Vertrauenspanel ---------- */
.trust-panel {
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	/* mineralische Tiefe: ruhiger radialer Lichtkern über leicht
	   verlaufender Elevated-Fläche */
	background:
		radial-gradient(64rem 40rem at 26% 0%, rgb(210 204 194 / 7%), transparent 62%),
		linear-gradient(165deg, #2A2823 0%, #221F1B 100%);
	border: var(--border-subtle);
	box-shadow: inset 0 1px 0 rgb(210 204 194 / 6%);
}

.trust-panel .section-head { margin-bottom: var(--space-5); }

.trust-panel__copy {
	color: var(--color-text-secondary);
	max-width: 52ch;
}

.stat-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
	margin-top: var(--space-6);
}

/* Qualitätskacheln: ruhige, rechteckige Reihen untereinander –
   Materialbild als sichtbare Hintergrundebene (25 % Deckkraft) mit
   horizontalem Lesbarkeits-Verlauf hinter Icon und Text. */
.stat-tile {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-5);
	min-height: 108px;
	padding: var(--space-5) var(--space-6);
	border-radius: var(--radius-md);
	background: linear-gradient(180deg, rgb(28 27 25 / 78%), rgb(28 27 25 / 92%));
	border: var(--border-subtle);
	box-shadow: inset 0 1px 0 rgb(210 204 194 / 5%), 0 10px 24px -16px rgb(0 0 0 / 45%);
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

/* Materialbild als sichtbare Struktur-/Atmosphärenebene (Deckkraft 25 %) */
.stat-tile__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.25;
	pointer-events: none;
}

/* Lesbarkeits-Verlauf über dem Materialbild: links (Icon/Text) dicht,
   nach rechts weich auslaufend – ::after liegt über dem Bild-Element */
.stat-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgb(28 27 25 / 82%) 0%,
		rgb(28 27 25 / 58%) 52%,
		rgb(28 27 25 / 28%) 100%);
}

.stat-tile__icon,
.stat-tile__value,
.stat-tile__arrow {
	position: relative;
	z-index: 1;
}

/* ruhige Hover-Reaktion für alle Kacheln (nur Lichtkante, kein Effektfeuer) */
.stat-tile:hover {
	border-color: rgb(210 204 194 / 28%);
	box-shadow: inset 0 1px 0 rgb(210 204 194 / 10%), 0 12px 28px -16px rgb(0 0 0 / 55%);
}

/* Projektkachel als Link: klar erkennbar, vollständig tastaturbedienbar */
a.stat-tile {
	color: var(--color-text-primary);
	text-decoration: none;
	cursor: pointer;
}

a.stat-tile .stat-tile__arrow {
	margin-left: auto;
	display: inline-flex;
	flex: none;
	color: var(--color-text-secondary);
	transition:
		transform var(--duration-instant) var(--ease-standard),
		color var(--duration-instant) var(--ease-standard);
}

a.stat-tile:hover,
a.stat-tile:focus-visible {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}

a.stat-tile:hover .stat-tile__arrow,
a.stat-tile:focus-visible .stat-tile__arrow {
	color: var(--color-accent);
	transform: translateX(4px);
}

a.stat-tile:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
	border-radius: var(--radius-md);
}

/* Material-/Musterbild im Qualitätspanel: bewusst inszeniertes
   Oberflächen-Feature statt eingefügtem Foto – gerahmte Fläche mit
   innenliegender Lichtlinie, weichem Oberlicht und tiefem Schattenwurf. */
.trust-panel__media {
	position: relative;
	margin: var(--space-7) 0 0;
	border-radius: var(--radius-lg);
	border: 1px solid rgb(210 204 194 / 20%);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow:
		0 28px 56px -28px rgb(0 0 0 / 65%),
		inset 0 1px 0 rgb(210 204 194 / 12%);
}

/* innenliegender Passepartout-Rahmen als feine Lichtlinie */
.trust-panel__media::before {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: 2;
	border: 1px solid rgb(210 204 194 / 24%);
	border-radius: calc(var(--radius-lg) - 10px);
	pointer-events: none;
}

/* weiches Oberlicht + dunkler Sockel für die Bildunterschrift */
.trust-panel__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgb(210 204 194 / 12%) 0%,
		transparent 26%,
		transparent 55%,
		rgb(28 27 25 / 72%) 100%);
}

/* sehr dunkle Musterplatte: dezente lichttechnische Anhebung, damit die
   Spachtelstruktur auf dunklen Displays sichtbar bleibt (keine inhaltliche
   Bildveränderung, nur Helligkeit/Kontrast der Präsentation) */
.trust-panel__media img {
	filter: brightness(1.35) contrast(1.04);
}

.trust-panel__media figcaption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	color: var(--color-text-secondary);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.trust-panel__media figcaption::before {
	content: "";
	flex: none;
	width: 24px;
	height: 1px;
	background: var(--color-accent);
}

/* Icons: präsente runde Lichtfassung in der Formensprache der
   Kompetenzleiste (strip-icon), aber größer und ruhiger */
.stat-tile__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border: 1px solid rgb(210 204 194 / 35%);
	border-radius: var(--radius-full);
	background: rgb(28 27 25 / 52%);
	color: var(--color-accent);
}

.stat-tile__icon svg {
	width: 30px;
	height: 30px;
}

.stat-tile__value {
	display: block;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: clamp(1.125rem, 1.02rem + 0.55vw, 1.375rem);
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-wrap: balance;
}

@media (min-width: 1024px) {
	.trust-panel {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-8);
		align-items: center;
		padding: var(--space-8);
	}

	.stat-grid { margin-top: 0; }
}

/* ---------- 14. Einsatzgebietskarte (Karte als breite Bühne) ----------
   Neue Anordnung: Textblock und Ortsliste bilden die obere Zeile, die
   Karte entfaltet sich darunter über die gesamte Abschnittsbreite und
   läuft per Maske weich in den Seitenhintergrund aus. Wichtig: Der
   Kartencontainer behält exakt das Seitenverhältnis des Exportbilds
   (1600/900) – nur so bleiben die prozentualen Hotspot-Koordinaten bei
   jeder Breite präzise auf den Lichtpunkten verankert. */
.region-layout {
	display: grid;
	gap: var(--space-6);
	align-items: start;
}

.region-intro .section-head { margin-bottom: var(--space-6); }

/* Karte als Bitmap-Exportkopie der freigegebenen Referenz
   (docs/design/reference/region-map-reference.png). Kein Rahmenkasten:
   die CSS-Mask lässt das dunkle Kartenmotiv weich in den
   Seitenhintergrund auslaufen. */
.region-stage {
	position: relative;
	/* Karte bis an den Viewport-/Containerrand ausdehnen: der negative
	   Rand hebt exakt das Container-Padding auf – kein Overflow, die
	   Maskenkanten übernehmen den weichen Übergang in den Hintergrund */
	margin-inline: calc(-1 * var(--container-padding));
}

/* Kartencontainer: festes Seitenverhältnis = Exportbild (1600x900).
   Bild und Hotspot-Ebene teilen exakt dieselbe Fläche – alle
   Ortskoordinaten sind Prozentwerte dieser Fläche und bleiben dadurch
   bei jeder Breite, jedem Breakpoint und jedem Browser-Zoom auf den
   Lichtpunkten verankert. */
.region-stage__canvas {
	position: relative;
	width: 100%;
	aspect-ratio: 1600 / 900;
}

.region-stage__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Seitenverhältnis von Container und Bild ist identisch → kein Beschnitt,
	   keine Koordinatenverschiebung */
	object-fit: cover;
	/* weiche Vignette in den Seitenhintergrund (keine rechteckige Kartenbox) */
	-webkit-mask-image: radial-gradient(118% 108% at 50% 50%, #000 55%, transparent 98%);
	mask-image: radial-gradient(118% 108% at 50% 50%, #000 55%, transparent 98%);
}

/* Kartenbild an ALLEN Seiten weich auslaufen lassen: lineare Kantenfades
   (horizontal + vertikal) werden mit der radialen Vignette geschnitten
   (mask-composite: intersect). Die Maske verändert nur die Deckkraft –
   Bildgeometrie, Seitenverhältnis und Hotspot-Koordinaten bleiben exakt
   unverändert. Browser ohne mask-composite behalten die radiale Vignette. */
@supports (mask-composite: intersect) {
	.region-stage__img {
		mask-image:
			linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
			linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
			radial-gradient(150% 140% at 50% 50%, #000 58%, transparent 100%);
		mask-composite: intersect;
	}
}

@supports (-webkit-mask-composite: source-in) and (not (mask-composite: intersect)) {
	.region-stage__img {
		-webkit-mask-image:
			linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
			linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
			radial-gradient(150% 140% at 50% 50%, #000 58%, transparent 100%);
		-webkit-mask-composite: source-in, source-in;
	}
}

/* Hotspot-Ebene liegt deckungsgleich über dem Kartenbild */
.region-points {
	position: absolute;
	inset: 0;
}

/* Ortslink: transparente runde Interaktionsfläche exakt über dem
   Lichtpunkt des Bildes. Ortsnamen stehen bereits im Kartenmotiv –
   der zugängliche Linkname liegt unsichtbar im Link (visually-hidden),
   es entsteht keine doppelte sichtbare Beschriftung. */
.map-point {
	position: absolute;
	left: var(--x);
	top: var(--y);
	/* Touchfläche: nie unter 44px, wächst moderat mit der Kartenbreite */
	width: clamp(44px, 11%, 68px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: transform var(--duration-fast) var(--ease-standard);
}

/* sanfter Glow als Interaktionsfeedback (kein Dauerpulsieren) */
.map-point::before {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: inherit;
	background: radial-gradient(circle,
		rgb(242 233 216 / 30%) 0%,
		rgb(242 233 216 / 12%) 42%,
		transparent 72%);
	opacity: 0;
	transition: opacity var(--duration-fast) var(--ease-standard);
}

.map-point:hover,
.map-point:focus-visible,
.map-point.is-active {
	transform: translate(-50%, -50%) scale(1.06);
}

.map-point:hover::before,
.map-point:focus-visible::before,
.map-point.is-active::before {
	opacity: 1;
}

.map-point:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-full);
}

/* Firmensitz Arnsberg: feiner permanenter Lichtring als Hervorhebung */
.map-point--home::after {
	content: "";
	position: absolute;
	inset: 16%;
	border: 1px solid rgb(210 204 194 / 38%);
	border-radius: inherit;
	transition: border-color var(--duration-fast) var(--ease-standard);
}

.map-point--home:hover::after,
.map-point--home:focus-visible::after,
.map-point--home.is-active::after {
	border-color: rgb(210 204 194 / 75%);
}

/* Ortsliste */
.region-aside__title {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-4);
}

.region-list {
	display: grid;
	gap: var(--space-1);
}

.region-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 48px;
	padding: var(--space-2) var(--space-3);
	border-bottom: var(--border-subtle);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--color-text-primary);
	font-size: var(--fs-body);
	transition:
		color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard);
}

.region-list a .btn__arrow {
	color: var(--color-text-secondary);
	transition: transform var(--duration-instant) var(--ease-standard);
}

.region-list a:hover,
.region-list a:focus-visible,
.region-list a.is-active {
	color: var(--color-accent);
	background: var(--color-bg-elevated);
}

.region-list a:hover .btn__arrow,
.region-list a:focus-visible .btn__arrow,
.region-list a.is-active .btn__arrow { transform: translateX(4px); }

.region-list__meta {
	font-size: var(--fs-small);
	color: var(--color-text-secondary);
}

.region-list__more {
	min-height: 48px;
	display: flex;
	align-items: center;
	padding: var(--space-2) var(--space-3);
	color: var(--color-text-secondary);
	font-size: var(--fs-small);
}

/* Kartenbühne erscheint kontrolliert beim Sektionseintritt (Opacity auf
   dem Canvas-Container, nicht auf dem Bild selbst – Deckkraft am
   Bild-Element kann das native Lazy-Loading ausbremsen) */
.js .region-stage[data-reveal] .region-stage__canvas {
	opacity: 0;
	transition: opacity 900ms var(--ease-standard) 150ms;
}

.js .region-stage[data-reveal].is-revealed .region-stage__canvas {
	opacity: 1;
}

@media (min-width: 1024px) {
	.region-layout {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
		grid-template-areas:
			"intro aside"
			"stage stage";
		gap: var(--space-5) var(--space-9);
	}

	.region-intro { grid-area: intro; }

	.region-aside {
		grid-area: aside;
		align-self: center;
	}

	.region-stage { grid-area: stage; }

	/* Ortsliste in der Kopfzeile: zweispaltig, damit sie neben dem
	   Introtext ruhig und kompakt bleibt */
	.region-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-5);
	}
}

/* ---------- 15. Google-Bewertungen ----------
   Eigenständige, ruhige Sektion: Introspalte mit Gesamtwertung und
   Google-Quellenkennzeichnung, daneben die Bewertungskarten. Erscheint
   produktiv nur mit echten, gespeicherten Google-Daten (reviews.php). */
.reviews-layout {
	display: grid;
	gap: var(--space-6);
}

.reviews-intro .section-head__intro {
	margin-top: var(--space-4);
}

.reviews-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-block: var(--space-5);
	color: var(--color-text-secondary);
	font-size: var(--fs-small);
}

.reviews-summary__count { color: var(--color-text-secondary); }

.reviews-summary__stars {
	color: var(--color-accent);
	font-size: var(--fs-h3);
	letter-spacing: 0.05em;
}

.reviews-summary__value {
	font-family: var(--font-sans);
	font-weight: 600;
	color: var(--color-text-primary);
	font-size: var(--fs-h3);
}

.reviews-source {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border: var(--border-subtle);
	border-radius: var(--radius-full);
	color: var(--color-text-secondary);
	font-size: var(--fs-small);
}

.review-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(85%, 340px);
	gap: var(--space-4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--space-3);
	margin-inline: calc(-1 * var(--container-padding));
	padding-inline: var(--container-padding);
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}

.review-card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
	background: var(--color-bg-elevated);
	border: var(--border-subtle);
	border-radius: var(--radius-md);
	color: inherit;
	text-decoration: none;
	transition:
		transform var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
}

a.review-card:hover,
a.review-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
	border-color: var(--color-accent);
}

.review-card__quote {
	font-family: var(--font-accent, var(--font-sans));
	font-size: 2.5rem;
	line-height: 1;
	color: var(--color-accent);
	opacity: 0.6;
}

.review-card__stars {
	display: block;
	margin-top: var(--space-2);
	color: var(--color-accent);
	letter-spacing: 0.05em;
}

.review-card__text {
	margin: var(--space-4) 0 0;
	color: var(--color-text-secondary);
	/* Visuelle Begrenzung für ein ruhiges Kartenraster; der vollständige,
	   unveränderte Text bleibt im DOM und für Screenreader erhalten. */
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.review-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: var(--border-subtle);
}

.review-card__author {
	font-weight: 600;
	color: var(--color-text-primary);
}

.review-card__time {
	font-size: var(--fs-small);
	color: var(--color-text-secondary);
	white-space: nowrap;
}

.reviews-cta {
	margin-top: var(--space-6);
}

@media (min-width: 768px) {
	.review-rail {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-columns: unset;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
}

@media (min-width: 1024px) {
	.reviews-layout {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: var(--space-9);
		align-items: center;
	}

	.review-rail { gap: var(--space-5); }
}

/* ---------- 15b. Partner & starke Verbindungen ----------
   Drei ruhige Partnerkarten zwischen Bewertungen und Abschluss-CTA.
   Die Original-Logos der Partner sind dunkle Zeichnungen für helle
   Untergründe – sie liegen deshalb unverfälscht auf einer hellen,
   neutralen Logofläche (keine Abdunklung, kein Sponsorenbanner-Look). */
.partners-grid {
	display: grid;
	gap: var(--space-4);
	margin: var(--space-7) 0 0;
	padding: 0;
	list-style: none;
}

.partner-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-bg-elevated);
	border: var(--border-subtle);
	border-radius: var(--radius-md);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition:
		transform var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
}

.partner-card:hover,
.partner-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
	border-color: var(--color-accent);
}

/* helle, neutrale Fläche: dunkle Partnerlogos bleiben voll lesbar */
.partner-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 128px;
	padding: var(--space-5) var(--space-6);
	background: #ECE9E3;
	transition: background var(--duration-base) var(--ease-standard);
}

.partner-card:hover .partner-card__logo,
.partner-card:focus-visible .partner-card__logo {
	background: #F4F2ED;
}

.partner-card__logo img {
	width: auto;
	height: auto;
	max-width: min(75%, 224px);
	max-height: 64px;
	object-fit: contain;
}

/* Fothen: kompaktere Wort-/Bildmarke mit größerer Eigenhöhe –
   leicht höher zulassen, damit die optische Größe der drei Logos
   ausgeglichen bleibt (Seitenverhältnis unangetastet) */
.partner-card__logo--tall img { max-height: 78px; }

.partner-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex-grow: 1;
	padding: var(--space-5) var(--space-6) var(--space-6);
}

.partner-card__name {
	font-weight: 600;
	color: var(--color-text-primary);
}

.partner-card__role {
	color: var(--color-text-secondary);
	font-size: var(--fs-small);
}

.partner-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-4);
	color: var(--color-accent);
	font-size: var(--fs-small);
	font-weight: 600;
}

.partner-card__link svg {
	transition: transform var(--duration-base) var(--ease-standard);
}

.partner-card:hover .partner-card__link svg,
.partner-card:focus-visible .partner-card__link svg {
	transform: translateX(4px);
}

@media (min-width: 768px) {
	.partners-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-5);
	}
}

/* ---------- 16. Abschluss-CTA (vollflächiges Beratungsbild) ----------
   Reales Beratungsmotiv (Kundenberatung, media-source/00-unsortiert)
   liegt vollflächig unter der gesamten Sektion – ca. 30 % wirksame
   Deckkraft, darüber ein dunkler Lesbarkeits-Scrim und weiche Masken,
   damit keine harte Bildkante entsteht. */
.closing-cta {
	position: relative;
	overflow: hidden;
	padding: var(--space-8) var(--space-5);
	border-radius: var(--radius-lg);
	/* zweitstärkste Materialtiefe nach dem Hero: radialer Greige-Lichtkern,
	   dunklere Außenbereiche – weiche Lichtfläche, keine Spotlight-Optik */
	background:
		radial-gradient(52rem 30rem at 50% 6%, rgb(210 204 194 / 9%), transparent 62%),
		radial-gradient(130% 130% at 50% 62%, rgb(39 37 33 / 0%) 42%, rgb(24 23 21 / 60%) 100%),
		var(--color-bg-elevated);
	border: var(--border-subtle);
	box-shadow: inset 0 1px 0 rgb(210 204 194 / 7%);
	text-align: center;
}

.closing-cta__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.closing-cta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 28%;
	opacity: 0.3;
	/* weiches Auslaufen zu den Panelrändern – keine Box-im-Panel-Optik */
	-webkit-mask-image: radial-gradient(135% 120% at 50% 42%, #000 55%, transparent 100%);
	mask-image: radial-gradient(135% 120% at 50% 42%, #000 55%, transparent 100%);
}

/* Lesbarkeits-Scrim über dem Bild: oben und unten dichter, Kernzone offen */
.closing-cta__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgb(28 27 25 / 62%) 0%,
		rgb(28 27 25 / 34%) 34%,
		rgb(28 27 25 / 40%) 62%,
		rgb(28 27 25 / 74%) 100%);
}

.closing-cta__content {
	position: relative;
	z-index: 1;
}

.closing-cta h2 {
	font-size: var(--fs-h1);
	max-width: 22ch;
	margin-inline: auto;
}

.closing-cta p {
	color: var(--color-text-secondary);
	max-width: 48ch;
	margin-inline: auto;
}

.closing-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

@media (min-width: 1024px) {
	.closing-cta { padding: calc(var(--space-10) + var(--space-5)) var(--space-8); }
}

/* ---------- 17. Footer ----------
   Wieder deutlich ruhiger und dunkler; weicher Übergang aus der
   CTA-Sektion über eine auslaufende Lichtlinie statt harter Trennung. */
.site-footer {
	position: relative;
	margin-top: var(--space-8);
	padding-block: var(--space-8) var(--space-5);
	color: var(--color-text-secondary);
	font-size: var(--fs-small);
	background: linear-gradient(180deg, rgb(39 37 33 / 25%), transparent 42%);
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent 6%, rgb(90 82 73 / 55%) 50%, transparent 94%);
}

.footer-grid {
	display: grid;
	gap: var(--space-6);
	margin-bottom: var(--space-7);
}

.footer-brand .nav-brand { margin-bottom: var(--space-3); }

.footer-brand p { max-width: 34ch; }

.footer-col h2 {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-primary);
	margin-bottom: var(--space-4);
}

.footer-col ul { display: grid; gap: var(--space-1); }

.footer-col a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	text-decoration: none;
	color: var(--color-text-secondary);
	transition: color var(--duration-instant) var(--ease-standard);
}

.footer-col a:hover,
.footer-col a:focus-visible { color: var(--color-accent); }

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-5);
	border-top: var(--border-subtle);
}

.footer-legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

.footer-legal a,
.footer-legal__consent-link {
	color: var(--color-text-secondary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.footer-legal__consent-link {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
}

.footer-legal a:hover,
.footer-legal a:focus-visible,
.footer-legal__consent-link:hover,
.footer-legal__consent-link:focus-visible { color: var(--color-accent); }

@media (min-width: 768px) {
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
}

/* ---------- 17b. Team (Unternehmensseite) ----------
   Persönlicher Hauptbestandteil der Unternehmensseite: Benjamin Steinberg
   als große einleitende Inhaberpräsentation, danach die vier Kolleginnen/
   Kollegen als ruhiges Porträtraster. Bilder bewusst nicht abgedunkelt. */
.team-section { position: relative; }

.team-owner {
	display: grid;
	gap: var(--space-6);
	margin-bottom: var(--space-8);
	align-items: center;
}

.team-owner__media {
	position: relative;
	border-radius: var(--radius-lg);
	border: 1px solid rgb(210 204 194 / 20%);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 28px 56px -28px rgb(0 0 0 / 60%), inset 0 1px 0 rgb(210 204 194 / 10%);
}

.team-owner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-owner__role,
.team-card__role {
	display: block;
	margin: 0 0 var(--space-2);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.team-owner h3 { font-size: var(--fs-h2); margin-bottom: var(--space-2); }

.team-owner__text {
	color: var(--color-text-secondary);
	max-width: 52ch;
}

.team-grid {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 640px) {
	.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.team-owner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: var(--space-8);
	}
}

@media (min-width: 1280px) {
	.team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
}

.team-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg-elevated);
	border: var(--border-subtle);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition:
		transform var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

.team-card:hover {
	transform: translateY(-4px);
	border-color: rgb(210 204 194 / 30%);
	box-shadow: var(--shadow-card-hover);
}

.team-card__media {
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.team-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
	transition: transform var(--duration-base) var(--ease-standard);
}

.team-card:hover .team-card__media img { transform: scale(1.03); }

.team-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-5);
}

.team-card h3 {
	margin-bottom: var(--space-1);
	font-size: var(--fs-body-lg);
}

.team-card__text {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: var(--fs-small);
}

/* Team-Motion: Inhaberbild mit ruhiger Tiefenbewegung, Kartenbilder mit
   Masken-Reveal (wie Leistungskarten), Texte über [data-reveal]-Stagger */
.js .team-owner[data-reveal] .team-owner__media img {
	transform: scale(1.06);
	transition: transform 1100ms var(--ease-standard) 150ms;
}

.js .team-owner[data-reveal].is-revealed .team-owner__media img {
	transform: scale(1);
}

.js .team-card[data-reveal] .team-card__media {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 700ms var(--ease-standard);
	transition-delay: calc(var(--reveal-index, 0) * var(--stagger-step) + 120ms);
}

.js .team-card[data-reveal].is-revealed .team-card__media {
	clip-path: inset(0 0 0% 0);
}

/* ---------- 17c. Social-Links (Footer, Kontakt, Unternehmen) ----------
   Ruhige, dunkle Buttonflächen statt Plattformfarben; gleicher
   Bewegungs-/Fokus-Vokabular wie .btn (translateY, keine Skalierung). */
.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.social-links--footer { margin-top: var(--space-5); }

.social-links--section { margin-top: var(--space-6); }

.social-links__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-2) var(--space-4);
	border: var(--border-subtle);
	border-radius: var(--radius-full);
	background: rgb(39 37 33 / 50%);
	color: var(--color-text-secondary);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition:
		color var(--duration-instant) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.social-links--section .social-links__item {
	min-height: 48px;
	padding: var(--space-3) var(--space-5);
	font-size: var(--fs-body);
}

.social-links__icon { flex: none; }

.social-links__label { display: inline-block; }

.social-links__arrow {
	flex: none;
	margin-inline-start: var(--space-1);
	color: var(--color-text-secondary);
	opacity: 0.6;
	font-size: 0.85em;
}

.social-links__item:hover,
.social-links__item:focus-visible {
	color: var(--color-text-primary);
	background: rgb(210 204 194 / 8%);
	border-color: var(--color-accent);
	transform: translateY(-2px);
}

.social-links__item:hover .social-links__arrow,
.social-links__item:focus-visible .social-links__arrow { opacity: 0.9; }

.social-links__item:focus-visible { border-radius: var(--radius-full); }

/* ---------- 17d. Consent-Banner ----------
   Nicht-modale Leiste unten (blockiert kein Scrollen/Klicken der
   restlichen Seite); Einstellungen-Dialog ist ein echter fokussierter
   Dialog im Stil von .nav-panel. Steuerung: assets/js/consent.js. */
/* Standardmäßig verborgen ("fail closed"): das Banner erscheint nur, wenn
   das hidden-Attribut aktiv per JavaScript entfernt wird. So bleibt der
   sichere Ausgangszustand auch dann erhalten, wenn eine [hidden]-Override-
   Regel durch Cache-/Ladereihenfolgeprobleme nicht greift. */
.consent-banner {
	display: none;
	position: fixed;
	inset-inline: var(--space-4);
	bottom: var(--space-4);
	z-index: var(--z-overlay);
	max-width: 640px;
	margin-inline: auto;
	padding: var(--space-5);
	background: var(--color-bg-elevated);
	border: var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-float);
}

.consent-banner:not([hidden]) { display: block; }

.consent-banner__text {
	margin: 0 0 var(--space-4);
	font-size: var(--fs-small);
	color: var(--color-text-secondary);
}

.consent-banner__text a { text-decoration: underline; }

.consent-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Gleiches Fail-closed-Prinzip wie beim Banner: erst mit entferntem
   hidden-Attribut wird der Dialog überhaupt zu einem Flex-Container. */
.consent-dialog {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	background: var(--color-overlay-scrim);
}

.consent-dialog:not([hidden]) { display: flex; }

.consent-dialog__panel {
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - var(--space-8));
	overflow-y: auto;
	padding: var(--space-6);
	background: var(--color-bg-elevated);
	border: var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-float);
}

.consent-dialog__option {
	padding: var(--space-3) 0;
	border-top: var(--border-subtle);
}

.consent-dialog__option label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--fs-small);
}

.consent-dialog__option input { margin-top: 3px; flex: none; }

.consent-dialog__hint { color: var(--color-text-secondary); }

.consent-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-5);
}

@media (min-width: 768px) {
	.consent-banner {
		inset-inline: auto;
		right: var(--space-6);
		left: auto;
		bottom: var(--space-6);
	}

	.consent-banner__actions { flex-wrap: nowrap; }
}

/* ---------- 18. Scroll-Reveals (IntersectionObserver) ----------
   Wahrnehmbare, ruhige Premium-Motion: größere Distanz und längere
   Dauer als reine Standard-Fades, einmalig beim Viewport-Eintritt. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
}

.js [data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity var(--duration-reveal) var(--ease-standard),
		transform var(--duration-reveal) var(--ease-standard);
	transition-delay: calc(var(--reveal-index, 0) * var(--stagger-step));
}

/* Ortslinks auf der Karte: erscheinen zeitlich leicht versetzt,
   nachdem sich das Kartenbild aufgebaut hat (kein Dauerpulsieren) */
.js .region-stage[data-reveal] .map-point {
	opacity: 0;
	transition: opacity 500ms var(--ease-standard);
	transition-delay: calc(500ms + var(--point-index, 0) * 90ms);
}

.js .region-stage[data-reveal].is-revealed .map-point { opacity: 1; }

.region-points .map-point:nth-child(1) { --point-index: 0; }
.region-points .map-point:nth-child(2) { --point-index: 1; }
.region-points .map-point:nth-child(3) { --point-index: 2; }
.region-points .map-point:nth-child(4) { --point-index: 3; }
.region-points .map-point:nth-child(5) { --point-index: 4; }
.region-points .map-point:nth-child(6) { --point-index: 5; }
.region-points .map-point:nth-child(7) { --point-index: 6; }

/* Qualitätsreihen: Icon-Fassung wird bewusst eingeführt (kleiner
   Scale-Einsatz nach dem Reihen-Reveal) */
.js .stat-tile[data-reveal] .stat-tile__icon {
	opacity: 0;
	transform: scale(0.72);
	transition:
		opacity 450ms var(--ease-standard),
		transform 450ms var(--ease-standard);
	transition-delay: calc(var(--reveal-index, 0) * var(--stagger-step) + 220ms);
}

.js .stat-tile[data-reveal].is-revealed .stat-tile__icon {
	opacity: 1;
	transform: scale(1);
}

/* Abschluss-CTA: Bild und Text als gemeinsame Bühne – das Beratungsbild
   setzt mit sanfter Tiefenbewegung ein, die Inhalte folgen gestaffelt */
.js .closing-cta[data-reveal] .closing-cta__bg img {
	transform: scale(1.06);
	transition: transform 1200ms var(--ease-standard) 100ms;
}

.js .closing-cta[data-reveal].is-revealed .closing-cta__bg img {
	transform: scale(1);
}

.js .closing-cta[data-reveal] .closing-cta__content > * {
	opacity: 0;
	transform: translateY(18px);
}

.js .closing-cta[data-reveal].is-revealed .closing-cta__content > * {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 600ms var(--ease-standard),
		transform 600ms var(--ease-standard);
	transition-delay: calc(var(--content-index, 0) * 110ms + 150ms);
}

.closing-cta__content > *:nth-child(1) { --content-index: 0; }
.closing-cta__content > *:nth-child(2) { --content-index: 1; }
.closing-cta__content > *:nth-child(3) { --content-index: 2; }
.closing-cta__content > *:nth-child(4) { --content-index: 3; }

/* Mobile: kürzere Distanzen und Dauer */
@media (max-width: 767px) {
	.js [data-reveal] { transform: translateY(16px); }
	.js [data-reveal].is-revealed { transition-duration: 420ms; }
	.js .hero [data-hero-reveal] { animation-duration: 450ms; }
}

/* ---------- 19. Reduced Motion (zentral) ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	/* Reveals: nur Opacity, keine Verschiebung/Skalierung */
	.js [data-reveal] { transform: none; }

	/* Kartenpunkte: Zentrierung auf dem Lichtpunkt bleibt erhalten,
	   nur der Scale-Effekt entfällt */
	.map-point,
	.map-point:hover,
	.map-point:focus-visible,
	.map-point.is-active {
		transform: translate(-50%, -50%);
	}

	/* Interaktionen: keine Positions-/Scale-Effekte, Farbfeedback bleibt */
	.btn:hover,
	.btn:focus-visible,
	.btn:hover .btn__arrow,
	.btn:focus-visible .btn__arrow,
	.nav-menu a:hover,
	.nav-menu a:focus-visible,
	a.stat-tile:hover,
	a.stat-tile:focus-visible,
	a.stat-tile:hover .stat-tile__arrow,
	a.stat-tile:focus-visible .stat-tile__arrow,
	.service-card:hover .service-card__media > *,
	.service-card:focus-visible .service-card__media > *,
	.project-card:hover,
	.project-card:focus-within,
	.project-card:hover .project-card__media > *,
	.project-card:focus-within .project-card__media > *,
	.project-card:hover .project-card__body,
	.project-card:focus-within .project-card__body,
	a.review-card:hover,
	a.review-card:focus-visible,
	.team-card:hover,
	.team-card:hover .team-card__media img,
	.js .process-step[data-reveal]:not(:last-child)::before {
		transform: none;
	}

	/* Masken-Reveal entfällt: Bild sofort vollständig sichtbar */
	.js .service-card[data-reveal] .service-card__media { clip-path: none; }

	/* neue Reveal-Bausteine: keine Scale-/Verschiebungseffekte,
	   Inhalte erscheinen ohne Bewegung */
	.js .stat-tile[data-reveal] .stat-tile__icon,
	.js .closing-cta[data-reveal] .closing-cta__bg img,
	.js .closing-cta[data-reveal] .closing-cta__content > *,
	.js .team-card[data-reveal] .team-card__media,
	.js .team-owner[data-reveal] .team-owner__media img {
		transform: none;
		clip-path: none;
	}

	.site-nav.is-compact .nav-pill { transition: none; }
}