/*
  FKK Objektservice — Designsystem V2 (Visual/UX-Polish-Pass)

  Typografie: Fraunces (Display/Headlines, Serif mit Charakter — bewusst
  kein generisches SaaS-Sans für Überschriften) + Inter (Fließtext/UI).
  Beide selbst gehostet (assets/fonts/), kein Google-Fonts-Request zur
  Laufzeit — vermeidet den in der Datenschutzerklärung selbst als
  Bereinigungspunkt benannten Drittanbieter-Font-Request.

  Farbwerte: eigener, verfeinerter Entwurf auf Basis der einzigen realen
  Markensignale (Navy/Stahlblau-Beobachtung aus context/design-system.md,
  schwarz/weißes Hoodie-Wordmark aus den echten Arbeitsfotos) — es gibt
  keine dokumentierten Hex-Werte, die Vorrang hätten (siehe
  context/design-system.md: "PRÜFEN", nie ausgelesen).

  Design-Sync 2026-09-14: 1:1 aus design-system-bridge/ (freigegebener
  finaler Designstand, Branch overnight-design-pass) übernommen. Reine
  Visual/UX-Ebene -- keine Formularfelder, keine Preisberechnung, keine
  Tracking-/Lead-Logik geändert (siehe inc/leads.php, inc/tracking.php,
  assets/js/pricing-*.js).
*/

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-variable-latin.woff2") format("woff2-variations"), url("../fonts/inter-variable-latin.woff2") format("woff2");
	font-weight: 380 820;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-variable-latin.woff2") format("woff2-variations"), url("../fonts/fraunces-variable-latin.woff2") format("woff2");
	font-weight: 420 720;
	font-style: normal;
	font-display: swap;
}

:root {
	/* --- Farbe --- */
	--ink: #0d1b24;         /* tiefes Navy-Schwarz, primärer dunkler Grund */
	--ink-2: #16303f;       /* zweite, hellere Navy-Stufe für Verläufe/Kanten */
	--ink-deep: #081119;    /* vertiefte Stufe für Hero-/Dark-Section-Verlauf */
	--ink-text: #1c2b33;    /* Fließtextfarbe auf hellem Grund */
	--muted: #55666f;       /* gedämpfter Sekundärtext */
	--accent: #1f6f78;      /* tiefes Petrol/Teal — verfeinerte "Stahlblau"-Linie */
	--accent-2: #2f8b93;    /* helleres Petrol für Hover/Verläufe */
	--accent-warm: #c1723a; /* warmer Terracotta-Akzent, sparsam eingesetzt */
	--paper: #faf8f4;       /* warmes Off-White statt reinem Weiß */
	--paper-raised: #ffffff;
	--paper-muted: #f1ece3; /* warmer, steinfarbener Ton für Sektionswechsel */
	--line: rgba(13, 27, 36, 0.12);
	--line-soft: rgba(13, 27, 36, 0.07);
	--success: #2e7d4f;
	--error: #b3261e;

	/* --- Typografie --- */
	--font-display: "Fraunces", ui-serif, Georgia, serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* --- Form/Radius/Schatten --- */
	--radius-sm: 8px;
	--radius: 14px;
	--radius-lg: 22px;
	--shadow-sm: 0 2px 8px rgba(13, 27, 36, 0.06);
	--shadow: 0 12px 32px -8px rgba(13, 27, 36, 0.18);
	--shadow-lg: 0 24px 60px -12px rgba(13, 27, 36, 0.28);
	--shadow-photo: 0 30px 70px -24px rgba(8, 17, 25, 0.45);
	--maxw: 1180px;

	/* --- Bewegung --- */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 180ms;
	--dur: 320ms;
	--dur-slow: 560ms;
}

/* ==========================================================================
   Reset / Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-feature-settings: "ss01" 1;
	color: var(--ink-text);
	background: var(--paper);
	line-height: 1.6;
	font-size: 16.5px;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 0.45em;
	color: var(--ink);
}
h1 { font-size: clamp(2.3rem, 3.2vw + 1.4rem, 3.75rem); font-weight: 560; }
h2 { font-size: clamp(1.7rem, 1.6vw + 1.2rem, 2.5rem); }
h3 { font-size: 1.28rem; font-weight: 620; }
p { margin: 0 0 1.1em; }
ul { padding-left: 1.2em; }
strong { font-weight: 650; }

::selection { background: var(--accent); color: #fff; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
	padding: 12px 18px; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; top: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 480px) { .wrap { padding: 0 18px; } }

.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; }

.kicker {
	display: inline-flex; align-items: center; gap: 8px;
	text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.78rem;
	font-weight: 700; color: var(--accent-2);
}
.kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.kicker--center { justify-content: center; }
.section--dark .kicker, .hero .kicker { color: #9fd4d2; }

/* Ueberschriften auf dunklem Grund: .hero setzt Textfarbe nur auf dem
   Container, h1/h2/h3 haben aber weiter oben eine eigene, direkte
   Farbregel (var(--ink)) -- ohne diesen Override waeren Ueberschriften
   auf jeder einzelnen Hero-Sektion (also praktisch jeder Seite)
   unsichtbar (dunkler Text auf dunklem Grund). */
.hero h1, .hero h2, .hero h3 { color: #fff; }

/* ==========================================================================
   Bewegung: Scroll-Reveal + Reduced Motion
   ========================================================================== */
/* Progressive Enhancement: standardmaessig ist [data-reveal]-Inhalt
   VOLL SICHTBAR. Erst wenn main.js die Klasse "js-reveal" erfolgreich
   auf <html> setzt (siehe assets/js/main.js), wird ueberhaupt etwas
   ausgeblendet. Kein JS/JS-Fehler/deaktiviertes JS -> Inhalt bleibt
   immer sichtbar, nie dauerhaft leere Sektionen. */
html.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
html.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-group] > * { transition-delay: calc(var(--reveal-i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	html.js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	--btn-bg: var(--accent);
	--btn-fg: #fff;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 0.85em 1.5em; border-radius: var(--radius-sm);
	font-weight: 650; font-size: 0.98rem; text-decoration: none;
	border: 1.5px solid transparent; cursor: pointer; font-family: var(--font-body);
	background: var(--btn-bg); color: var(--btn-fg);
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
	box-shadow: 0 1px 2px rgba(13,27,36,0.08);
}
.btn .icon { transition: transform var(--dur) var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--accent-2); }
.btn:hover .icon-shift { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(0.97); box-shadow: 0 1px 2px rgba(13,27,36,0.1); }
.btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.btn--accent { --btn-bg: var(--accent); --btn-fg: #fff; }
.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--outline { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,0.55); box-shadow: none; }
.btn--outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); box-shadow: none; }
.btn--ghost:hover { background: var(--paper-muted); border-color: var(--ink); transform: translateY(-1px); box-shadow: none; }
.btn--sm { padding: 0.6em 1.1em; font-size: 0.88rem; }
.btn--block { display: flex; width: 100%; }
.link-button {
	background: none; border: none; padding: 0; color: var(--accent);
	text-decoration: underline; cursor: pointer; font: inherit;
}

/* Link mit wachsendem Pfeil -- zweitrangige Aktion, die trotzdem klar als
   Link erkennbar bleibt (Karten-/Sektionsabschluss statt Button). */
.link-arrow {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
	font-weight: 650; color: var(--ink); text-decoration: none;
}
.link-arrow .icon { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover .icon-shift { transform: translateX(3px); }
.link-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Telefon-CTA -- die Telefonnummer ist der laut Brief priorisierte,
   schnellste Kontaktweg und bekommt deshalb echtes visuelles Gewicht statt
   Parität mit den übrigen, sekundären Links auf derselben Seite. */
.phone-cta {
	display: flex; align-items: center; gap: 14px; margin: 20px 0 22px;
	padding: 16px 20px; border-radius: var(--radius);
	background: rgba(31, 111, 120, 0.08); border: 1.5px solid var(--accent);
	text-decoration: none; color: var(--ink);
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.phone-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.phone-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.phone-cta .icon { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; }
.phone-cta strong { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.phone-cta small { display: block; color: var(--muted); font-size: 0.85rem; font-weight: 500; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 200; background: rgba(250, 248, 244, 0.86);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 4px 24px rgba(13,27,36,0.06); }
.site-header__inner { display: flex; align-items: center; gap: 20px; padding: 16px 24px; }

.site-logo {
	font-family: var(--font-display); font-weight: 640; font-size: 1.3rem;
	color: var(--ink); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap;
}
.site-logo span { color: var(--accent); }

.site-header__cta { margin-left: auto; display: none; white-space: nowrap; }
.site-header__phone {
	display: none; align-items: center; gap: 6px; color: var(--ink); text-decoration: none;
	font-weight: 650; font-size: 0.92rem; margin-left: auto;
}
.site-header__phone .icon { color: var(--accent); }
@media (min-width: 900px) {
	.site-header__phone { display: inline-flex; margin-left: 0; }
}

.site-nav { flex: 1; display: flex; justify-content: center; }
.site-nav__toggle {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; background: none; border: 1.5px solid var(--line);
	border-radius: var(--radius-sm); margin-left: auto; cursor: pointer; color: var(--ink);
	transition: background var(--dur-fast) var(--ease);
}
.site-nav__toggle:hover { background: var(--paper-muted); }
.site-nav__toggle .icon { width: 20px; height: 20px; }
.site-nav__toggle .icon-close { display: none; }
.site-nav__toggle[aria-expanded="true"] .icon-menu { display: none; }
.site-nav__toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav__list {
	list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
	position: absolute; left: 0; right: 0; top: 100%; background: var(--paper);
	border-bottom: 1px solid var(--line); padding: 10px 24px 22px;
	max-height: 0; overflow: hidden; opacity: 0;
	/* visibility ist beim Schliessen verzoegert (und beim Oeffnen sofort),
	   damit die geschlossenen Links den Tab-Fokus verlassen statt bei
	   max-height:0 unsichtbar, aber weiter fokussierbar zu bleiben. */
	visibility: hidden;
	transition: max-height var(--dur-slow) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear var(--dur-slow);
}
.site-nav__list.is-open {
	max-height: 480px; opacity: 1; visibility: visible;
	transition: max-height var(--dur-slow) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear 0s;
}
.site-nav__list li a:not(.btn) {
	display: block; padding: 12px 4px; text-decoration: none; color: var(--ink-text);
	font-weight: 600; border-bottom: 1px solid var(--line-soft); border-radius: var(--radius-sm);
	transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.site-nav__list li a:not(.btn):hover,
.site-nav__list li a:not(.btn):focus-visible {
	color: var(--accent); background: rgba(31,111,120,0.06);
}
.site-nav__list li a:not(.btn):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.site-nav__list li:last-child a { border-bottom: none; }

/* Telefon + CTA innerhalb des aufgeklappten Mobil-Menues -- ohne dies
   fehlt jeder direkte Kontaktweg im Menue, solange die immer sichtbare
   Kopfzeilen-Variante (ab 900px) noch nicht greift. */
.site-nav__mobile-actions {
	display: flex; flex-direction: column; gap: 12px; padding-top: 14px; margin-top: 6px;
	border-top: 1px solid var(--line-soft);
}
.site-nav__mobile-actions .site-nav__mobile-phone {
	display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none;
	font-weight: 650; padding: 4px; border-bottom: none;
}
.site-nav__mobile-phone .icon { color: var(--accent); }
@media (min-width: 900px) {
	/* Die immer sichtbare Kopfzeilen-Telefonnummer (und ab 1300px der
	   CTA-Button) uebernehmen ab hier -- die Menue-eigenen Kopien wuerden
	   sie sonst duplizieren. */
	.site-nav__mobile-actions { display: none; }
}
/* Die vollstaendige Zeile aus Logo + 6 Nav-Links + Telefon + CTA-Button
   braucht real ca. 1300px Kopfzeilenbreite -- darunter ueberlappt oder
   umbricht sie. Bis dahin bleibt die kompakte Hamburger-Kopfzeile
   (ab 900px nur mit sichtbarer Telefonnummer) bestehen. */
@media (min-width: 1300px) {
	.site-header__cta { display: inline-flex; margin-left: 20px; }
	.site-nav__toggle { display: none; }
	.site-nav__list {
		display: flex; flex-direction: row; position: static; border: none; padding: 0; gap: 26px;
		background: none; max-height: none; opacity: 1; visibility: visible;
	}
	.site-nav__list li a {
		padding: 6px 0; border-bottom: none; position: relative; font-weight: 560; font-size: 0.96rem;
	}
	.site-nav__list li a::after {
		content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
		background: var(--accent); border-radius: 2px; transition: right var(--dur) var(--ease);
	}
	.site-nav__list li a:hover::after,
	.site-nav__list li a.is-active::after,
	.site-nav__list li a:focus-visible::after { right: 0; }
	.site-nav__list li a:not(.btn):hover,
	.site-nav__list li a:not(.btn):focus-visible { color: var(--ink-text); background: none; }
	.site-nav__list li a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: clamp(52px, 8vw, 104px) 0; }
.section--tight { padding: clamp(32px, 5vw, 56px) 0; }
.section--dark {
	position: relative;
	background: linear-gradient(165deg, var(--ink), var(--ink-2));
	color: #eef3f4;
}
/* Dunkle Sektionen bekommen dasselbe leise Korn wie der Hero -- macht sie
   zu einer erkennbaren Familie statt eines flachen Verlaufs. */
.section--dark::after {
	content: ""; position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: overlay;
	pointer-events: none; background-image: url("../images/grain.svg"); background-size: 180px 180px;
}
.section--dark > .wrap { position: relative; }
.section--dark h2, .section--dark h1, .section--dark h3 { color: #fff; }
.section--dark p { color: #c9d7d8; }
.section--soft { background: var(--paper-muted); }
.section-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 46px); }
.section-head p.lead { margin-top: 10px; }
p.lead { font-size: 1.14rem; color: var(--muted); }
.section--dark p.lead { color: #c9d7d8; }
.section--center { text-align: center; }
.section--center .section-head { margin-inline: auto; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: linear-gradient(185deg, var(--ink) 0%, var(--ink-deep) 100%); color: #fff; }
/* Feine obere Haarlinie + weiche Vignette statt eines gluehenden
   Verlaufsflecks -- bewusst zurueckhaltend statt "KI-Landingpage-Glow". */
.hero::before {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 14%),
		radial-gradient(1400px 700px at 50% 120%, rgba(0,0,0,0.35), transparent 60%);
	pointer-events: none;
}
.hero::after {
	content: ""; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay;
	pointer-events: none; background-image: url("../images/grain.svg"); background-size: 180px 180px;
}
.hero__inner {
	position: relative; display: grid; gap: 40px; align-items: center; padding: clamp(56px, 10vw, 108px) 0;
	grid-template-columns: 1fr;
}
@media (min-width: 960px) { .hero__inner { grid-template-columns: 1.08fr 0.92fr; gap: 64px; } }

.hero p.lead { max-width: 46ch; color: #d7e6e5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.trust-strip { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.14); list-style: none; }
.trust-strip li { display: flex; gap: 8px; align-items: center; font-size: 0.92rem; color: #cfe3e2; }
.trust-strip li .icon { color: var(--accent-2); flex-shrink: 0; }

.hero__media { position: relative; }
.hero__media-frame {
	position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-photo);
	aspect-ratio: 4/5; outline: 1px solid rgba(255,255,255,0.08); outline-offset: -1px;
}
.hero__media-frame::after {
	/* leiser, von unten laufender Duoton-Verlauf bindet das Foto optisch an
	   den Ink-Hintergrund, statt frei zu "schweben". */
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(8,17,25,0.55) 0%, transparent 42%);
	pointer-events: none;
}
.hero__media-frame img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 900ms var(--ease);
}
.hero__media:hover .hero__media-frame img { transform: scale(1.045); }
.hero__media::before {
	content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1;
	background: var(--accent-warm); border-radius: var(--radius-lg); opacity: 0.9;
}
.hero__badge {
	position: absolute; left: -18px; bottom: -18px; background: var(--paper-raised); color: var(--ink);
	padding: 16px 20px; border-radius: var(--radius); box-shadow: var(--shadow);
	display: flex; align-items: center; gap: 12px; max-width: 260px; z-index: 2;
}
.hero__badge .icon { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; }
.hero__badge strong { display: block; font-size: 0.95rem; color: var(--ink); }
.hero__badge span { font-size: 0.8rem; color: var(--muted); }
@media (max-width: 600px) { .hero__badge { left: 8px; bottom: -14px; padding: 12px 14px; gap: 10px; } }

.hero--page { padding: clamp(44px, 7vw, 76px) 0; }
.hero--page p.lead { max-width: 62ch; color: #d7e6e5; }
.hero--page .hero__inner { grid-template-columns: 1fr; padding: clamp(44px,7vw,76px) 0; }

/* ==========================================================================
   Stat band
   ========================================================================== */
.stat-band { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 28px; }
@media (min-width: 700px) {
	.stat-band { grid-template-columns: repeat(4, 1fr); }
	/* Leise vertikale Trenner zwischen den Werten lesen sich als eine
	   editorielle "auf einen Blick"-Leiste statt vier frei schwebender
	   Zahlen -- nur auf der einzeiligen 4-Spalten-Stufe, damit ein
	   2-Spalten-Umbruch nie einen verirrten Trenner in seiner zweiten
	   Zeile bekommt. */
	.stat-band__item { padding-left: 28px; border-left: 1px solid var(--line); }
	.stat-band__item:first-child { padding-left: 0; border-left: none; }
}
.stat-band__item strong {
	display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 2.4vw, 2.4rem);
	color: var(--ink); font-weight: 600;
}
.stat-band__item span { color: var(--muted); font-size: 0.92rem; }

/* ==========================================================================
   Karten / Leistungs-Teaser
   ========================================================================== */
/* Bildgefuehrter, nummerierter Teaser mit Text-Link-Abschluss -- bewusst
   keine Karten-Box mit Rahmen/Schatten/Hintergrund und kein Icon-Badge im
   abgerundeten Quadrat (das "generische AI-Landingpage-Kartenraster"-
   Muster, das der freigegebene finale Designstand ersetzt hat). */
.service-teaser-grid { display: grid; gap: 36px 32px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 620px) {
	/* Tablet-Stufe zuerst 2 Spalten -- 3 gleich breite Spalten quetschen
	   die deutschen Leistungsbeschreibungen unter ~960px zu schmal. */
	.service-teaser-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 620px) and (max-width: 959px) {
	/* Bei genau drei Teasern strandet diese Stufe den letzten immer
	   alleine in seiner Zeile -- Zentrieren (in derselben Breite wie die
	   Geschwister) liest sich als bewusster Abschluss statt als halbleere
	   Zeile. */
	.service-teaser-grid > :last-child:nth-child(3) {
		grid-column: 1 / -1; width: calc(50% - 16px); margin-inline: auto;
	}
}
@media (min-width: 960px) { .service-teaser-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.service-teaser { display: flex; flex-direction: column; }
.service-teaser__media {
	aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-lg); background: var(--paper-muted);
	outline: 1px solid var(--line-soft); outline-offset: -1px;
}
.service-teaser__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.service-teaser:hover .service-teaser__media img { transform: scale(1.05); }
.service-teaser__body { padding-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.service-teaser__index { font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; }
.service-teaser__body h3 { margin: 2px 0 0; }
.service-teaser__body p { color: var(--muted); margin: 0; }

.two-col { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .two-col { grid-template-columns: 1fr 1fr; gap: 60px; } }
.two-col--reverse .two-col-media { order: -1; }

.image-frame {
	border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3;
	outline: 1px solid var(--line-soft); outline-offset: -1px;
}
.image-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.image-frame:hover img { transform: scale(1.04); }
.image-frame--tall { aspect-ratio: 3/4; }

/* Beispiel-/Story-Reihe: unabhaengig beschriftete, reale Fotos -- bewusst
   KEIN Vorher/Nachher-Anspruch (siehe figcaption je Foto). */
.story-row { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 34px; }
@media (max-width: 780px) {
	.story-row { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: -18px; padding-inline: 18px; grid-template-columns: unset; }
	.story-row figure { scroll-snap-align: start; }
}
.story-row figure { margin: 0; position: relative; height: 100%; }
.story-row .image-frame {
	/* Quadratisch als Standard -- die Galerie mischt echte Quer- und
	   Hochformat-Fotos, ein quadratischer Ausschnitt ist der
	   nachsichtigste Kompromiss fuer beide. (Die Mosaic-Variante unten
	   ueberschreibt das.) */
	aspect-ratio: 1/1;
}
@media (min-width: 781px) {
	/* Mosaic-Variante: das letzte Foto laeuft gross und hoch neben den
	   ersten beiden, kleiner gestapelt -- bricht das "jede Galerie-Sektion
	   ist ein identisches 3-Quadrate-Raster"-Muster auf. Nur oberhalb der
	   mobilen Scroll-Leiste, auf die diese Row-Span-Logik nicht zutrifft. */
	.story-row--featured { grid-template-columns: 1fr 1.3fr; grid-template-rows: repeat(2, 1fr); }
	.story-row--featured > figure:nth-child(3) { grid-column: 2; grid-row: 1 / 3; height: 100%; }
	.story-row--featured > figure:nth-child(3) .image-frame { aspect-ratio: auto; height: 100%; }
	.story-row--featured > figure:nth-child(1) .image-frame,
	.story-row--featured > figure:nth-child(2) .image-frame { aspect-ratio: 4/3; }
}
.story-row figcaption {
	position: absolute; left: 12px; bottom: 12px; background: rgba(13,27,36,0.72); color: #fff;
	padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 650; backdrop-filter: blur(4px);
}

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; }
.checklist li .icon { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
@media (min-width: 700px) {
	/* Volle Checklisten (nicht in einer schmalen Zwei-Spalten-Textspalte
	   verschachtelt, z. B. "Fünf Gründe" auf Über uns oder "Ablauf" auf
	   einer Leistungsseite) sitzen sonst einspaltig mit grosser Luecke
	   daneben. */
	.checklist--wide { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
}

/* Bereichs-Chips fuer das Einsatzgebiet -- reale Ortsnamen statt eines
   langen Kommasatzes, gleichzeitig traegt der Abschluss dadurch etwas
   visuelle Textur statt eines nackten Fliesstext-Absatzes. */
.area-chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
.section--center .area-chips { justify-content: center; }
.area-chips li {
	display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px;
	border: 1.5px solid var(--line); border-radius: 999px; font-size: 0.88rem; font-weight: 600;
	color: var(--ink-text); background: var(--paper-raised);
}
.area-chips li .icon { color: var(--muted); width: 15px; height: 15px; }
.area-chips li.is-base { border-color: var(--accent); background: rgba(31,111,120,0.08); color: var(--accent); }
.area-chips li.is-base .icon { color: var(--accent); }

/* ==========================================================================
   Formulare
   ========================================================================== */
.form-shell {
	background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow); max-width: 780px; margin: 0 auto;
}
.field { margin-bottom: 20px; }
.field > label { display: block; font-weight: 650; margin-bottom: 8px; font-size: 0.95rem; }
.field .hint { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
	width: 100%; padding: 0.8em 0.95em; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
	font: inherit; background: var(--paper-raised); color: var(--ink-text);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(31,111,120,0.14);
}
.field textarea { min-height: 120px; resize: vertical; }
.field-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .field-grid.cols-2 { grid-template-columns: 1fr 1fr; } }

/* Flexbox statt Grid: Grids `auto-fill` haelt jede Zeile auf dieselbe
   Spaltenzahl fest, so dass eine letzte Zeile mit weniger Karten als
   dieser Zahl Leerraum uebrig laesst statt ihn zu nutzen. Flex-grow
   verteilt den Restplatz jeder Zeile nur auf die Karten, die tatsaechlich
   darin stehen. */
.choice-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.choice-card { position: relative; flex: 1 1 150px; min-width: 0; }
.choice-card input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice-card input + span {
	display: flex; align-items: center; justify-content: center; text-align: center;
	min-height: 48px; height: auto; padding: 12px 18px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
	cursor: pointer; font-weight: 600; font-size: 0.94rem; background: var(--paper-raised); color: var(--ink-text);
	/* Lange deutsche Komposita (z. B. "Dachbodenräume") haben keine
	   natuerliche Trennstelle -- ohne dies laufen sie ueber die Karte
	   hinaus statt umzubrechen. */
	overflow-wrap: anywhere; word-break: normal; hyphens: auto; position: relative;
	transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.choice-card:hover input + span { border-color: rgba(31,111,120,0.45); background: rgba(31,111,120,0.05); transform: translateY(-1px); }
.choice-card input:checked + span { border-color: var(--accent); background: rgba(31,111,120,0.13); color: var(--accent); }
.choice-card input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Kleines, eingerueckte Haekchen als leise Zweitbestaetigung der Auswahl
   (Hauptsignal bleibt Rahmen/Hintergrund oben) -- reines CSS, kein
   zusaetzliches Markup, kein Bild-Asset. */
.choice-card input:checked + span::after {
	content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 11px;
	border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0.6);
	opacity: 0; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.choice-card input:checked + span::after { opacity: 1; transform: rotate(45deg) scale(1); }

.honeypot-field { position: absolute; left: -9999px; top: -9999px; }

/* Preisspannen-Box -- Icon + Label + grosser Wert + Genauigkeits-Badge +
   Hinweistext. Struktur wird von assets/js/pricing-*.js befuellt (siehe
   dort); hier ausschliesslich das Aussehen. */
.price-estimate {
	display: flex; align-items: flex-start; gap: 16px;
	background: linear-gradient(135deg, rgba(31,111,120,0.08), rgba(193,114,58,0.06));
	border: 1px solid rgba(31,111,120,0.28); border-radius: var(--radius); padding: 18px 20px; margin: 24px 0;
	font-size: 1.05rem; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.price-estimate__icon {
	width: 40px; height: 40px; border-radius: 10px; background: var(--paper-raised); color: var(--accent);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.price-estimate__body { flex: 1; min-width: 0; }
.price-estimate__label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 2px; }
.price-estimate strong { color: var(--ink); font-size: 1.5rem; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.price-estimate .confidence { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.price-estimate__confidence {
	display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 10px; border-radius: 999px;
	font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle;
	background: var(--paper-raised); color: var(--muted);
}
.price-estimate__confidence--hoch { color: var(--success); }
.price-estimate__confidence--mittel { color: var(--accent-warm); }
.price-estimate__confidence--niedrig { color: var(--muted); }
.price-estimate.is-updated { animation: price-pop var(--dur) var(--ease); }
@keyframes price-pop { 0% { transform: scale(0.985); } 60% { transform: scale(1.008); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .price-estimate.is-updated { animation: none; } }

.form-message { padding: 15px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-weight: 650; }
.form-message--success { background: #e6f4ea; color: var(--success); }
.form-message--error { background: #fbeceb; color: var(--error); }
.form-message[hidden] { display: none; }

.btn.is-loading { opacity: 0.75; cursor: wait; }

.form-success-panel {
	text-align: center; padding: 20px 4px 4px; opacity: 0; transform: translateY(8px);
	transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.form-success-panel.is-visible { opacity: 1; transform: none; }
.form-success-panel .icon-circle {
	width: 56px; height: 56px; border-radius: 50%; background: rgba(46,125,79,0.12); color: var(--success);
	display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.form-success-panel .icon-circle .icon { width: 28px; height: 28px; }

/* ==========================================================================
   Mobile sticky CTA bar (nur Leistungsseiten)
   ========================================================================== */
.mobile-cta-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: var(--paper-raised);
	border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(13,27,36,0.1);
	display: flex; gap: 10px; padding: 10px 14px; padding-bottom: max(10px, env(safe-area-inset-bottom));
	transform: translateY(120%); transition: transform var(--dur-slow) var(--ease);
}
.mobile-cta-bar.is-visible { transform: translateY(0); }
.mobile-cta-bar .btn { flex: 1; padding: 0.75em 1em; font-size: 0.92rem; }
@media (min-width: 900px) { .mobile-cta-bar { display: none; } }

/* ==========================================================================
   Consent banner
   ========================================================================== */
.consent-banner {
	position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 500; background: var(--ink); color: #fff;
	border-radius: var(--radius); box-shadow: var(--shadow-lg);
	max-width: 360px; margin-left: auto;
	transform: translateY(140%); opacity: 0;
	transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.consent-banner:not([hidden]) { transform: translateY(0); opacity: 1; }
.consent-banner__inner { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.consent-banner p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: #d7e6e5; }
.consent-banner a { color: #bfe3f0; }
.consent-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.consent-banner__actions .btn { flex: 1; white-space: nowrap; }
.consent-banner .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,0.4); }
.consent-banner .btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
@media (min-width: 481px) and (max-width: 899px) {
	/* Breiter, aber flacher: auf tablet-aehnlichen Breiten kann eine
	   schwebende, 360px breite, spaltengestapelte Karte hoch genug werden,
	   um ueber einer tief sitzenden Hero-CTA zu liegen. Eine breitere,
	   dichtere Box laesst Text und Aktionen sich eine Zeile teilen und
	   senkt die Kartenhoehe genug, um eine darunterliegende Hero-CTA
	   freizugeben. */
	.consent-banner { max-width: min(560px, calc(100vw - 32px)); }
	.consent-banner__inner { flex-direction: row; align-items: center; flex-wrap: nowrap; padding: 14px 16px; gap: 16px; }
	.consent-banner p { flex: 1 1 auto; font-size: 0.82rem; }
	.consent-banner__actions { flex: 0 0 auto; }
	.consent-banner__actions .btn { padding: 0.6em 1em; font-size: 0.85rem; }
}
@media (max-width: 480px) {
	.consent-banner { left: 12px; right: 12px; bottom: 76px; max-width: none; }
	.consent-banner__inner { padding: 12px 14px; gap: 8px; }
	.consent-banner p { font-size: 0.78rem; line-height: 1.35; }
	.consent-banner__actions .btn { padding: 0.55em 1em; font-size: 0.85rem; }
}

/* ==========================================================================
   Legal
   ========================================================================== */
.legal-content { max-width: 74ch; }
.legal-content h2 { margin-top: 1.7em; font-size: 1.25rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: #b9cbcb; padding: 60px 0 0; border-top: 3px solid var(--accent-warm); }
.site-footer__inner { display: grid; gap: 34px; grid-template-columns: 1fr; padding-bottom: 34px; }
@media (min-width: 700px) { .site-footer__inner { grid-template-columns: 1.2fr 0.8fr 1fr; } }
@media (min-width: 700px) and (max-width: 959px) {
	/* Noch kein Platz fuer eine 4. Spalte -- die CTA schliesst die Zeile
	   stattdessen vollbreit unter den drei Link-Spalten ab. */
	.site-footer__cta { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
	/* Die 4. (CTA-)Spalte kommt erst ab Desktop-Breite dazu -- auf Tablet
	   wuerde sie die beiden Link-Spalten zu schmal quetschen. */
	.site-footer__inner { grid-template-columns: 1.1fr 0.7fr 0.9fr 1fr; }
}
.site-footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.site-footer__cta p { margin: 0; font-size: 0.92rem; }
.site-footer a { color: #cfe0e0; text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus-visible { color: #fff; text-decoration: underline; }
.site-footer a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 2px; }
.site-footer__brand { font-family: var(--font-display); font-weight: 620; font-size: 1.2rem; color: #fff; }
.site-footer__brand span { color: var(--accent-2); }
.site-footer__heading { font-weight: 700; color: #fff; margin-bottom: 12px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,0.1); padding: 18px 24px; font-size: 0.85rem; color: #8fa5a5; }

/* ==========================================================================
   Sonstiges
   ========================================================================== */
.divider-accent { height: 3px; width: 64px; background: var(--accent-warm); border-radius: 2px; margin: 0 0 18px; }