/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --color-bg: #ffffff;
  --color-surface: #f4f6f9;
  --color-ink: #1d1d1f;
  --color-ink-muted: rgba(29, 29, 31, 0.68);

  /* Brand blue — sampled directly from the real logo artwork (#1668B0).
     Unlike a vivid orange, this blue is dark enough to carry WHITE text at
     ~5.8:1, so buttons/tiles built on it use white ink rather than dark.
     --color-accent-700 is a deeper shade reserved for blue USED AS TEXT on
     light backgrounds (links, h6), where it has to carry its own contrast
     instead of relying on a light surface underneath.
     --color-accent-ice is the counterpart for DARK navy sections (hero,
     quote card, CTA banner): the deep brand blue disappears against navy,
     so every accent there switches to this light winter blue (~7:1 on navy). */
  --color-accent: #1668b0;
  --color-accent-100: #e9f1f9;
  --color-accent-200: #c3dcf0;
  --color-accent-600: #12558f;
  --color-accent-700: #0f4a7c;
  --color-accent-ice: #7fbfee;
  --color-divider: rgba(29, 29, 31, 0.1);
  --color-warning-bg: #fff4e5;
  --color-warning-border: #f0b429;
  --color-warning-ink: #7a4a00;

  /* Secondary tints for icon tiles / bento tiles: logo navy (mint slot) and
     neutral slate-gray (violet slot) — kept alongside --color-accent so
     every tile rotates through the three official brand colors (blau /
     dunkelblau / hellgrau) instead of introducing unrelated hues. */
  --color-mint: #1e2b3c;
  --color-mint-100: #e9eef4;
  --color-mint-700: #16222f;
  --color-amber: var(--color-accent);
  --color-amber-100: var(--color-accent-100);
  --color-amber-700: var(--color-accent-700);
  --color-violet: #64748b;
  --color-violet-100: #eef1f4;
  --color-violet-700: #3c4653;

  /* Navy for high-impact sections (hero, final CTA, quote card) — the same
     hue as the logo navy, but noticeably lighter than the logo's near-black
     rendering: at full logo-navy darkness these sections read as heavy,
     oversaturated blocks rather than a premium accent. This is the lightest
     shade that still reads unambiguously as "dark navy section". */
  --color-ink-900: #16222f;
  --color-ink-800: #26394f;
  --on-dark: rgba(255, 255, 255, 0.94);
  --on-dark-muted: rgba(255, 255, 255, 0.74);
  --on-dark-divider: rgba(255, 255, 255, 0.16);

  --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 980px;

  /* Navy-tinted rather than pure black — subtle, but reads more deliberate
     and cohesive with the brand than a generic gray drop-shadow. */
  --shadow-sm: 0 1px 3px rgba(11, 25, 40, 0.1);
  --shadow-md: 0 8px 24px rgba(11, 25, 40, 0.1);
  --shadow-lg: 0 20px 48px rgba(11, 25, 40, 0.14);

  --max-width: 1180px;
  --nav-height: 64px;
  --touch-target: 44px;

  --transition-fast: 0.2s ease;
  --transition-standard: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  /* German compounds (e.g. "Verkehrssicherungspflicht") are long, unbreakable
     single words — without this they overflow narrow columns/cards on
     small phones instead of wrapping. */
  overflow-wrap: break-word;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  /* Long German compounds ("Datenschutzerklärung") can exceed a phone's line
     width. body's overflow-wrap would then break them mid-word with no
     hyphen; this lets the browser split them at proper syllable boundaries
     instead (the pages declare lang="de", so the rules are the German ones). */
  hyphens: auto;
  -webkit-hyphens: auto;
}
h1 { font-size: clamp(34px, 8vw, 58px); font-weight: 700; }
h2 { font-size: clamp(27px, 5.5vw, 42px); font-weight: 700; }
h3 { font-size: 21px; }
h4 { font-size: 18px; }
h5 { font-size: 15px; }
h6 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* accent-700, not the vivid accent: this sits directly on white as text,
     where the vivid brand blue is a touch light for body-size text. */
  color: var(--color-accent-700);
  font-weight: 600;
  font-family: var(--font-body);
}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

@media (hover: hover) and (pointer: fine) {
  a:hover { color: color-mix(in srgb, var(--color-accent-700) 82%, black); }
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }

.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;
}

.icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Anchors targeted from the sticky nav must not end up hidden underneath it. */
#leistungen, #warum-wir, #angebot, #bewertungen, #faq {
  scroll-margin-top: calc(var(--nav-height) + var(--space-3));
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}
.section { padding: var(--space-6) 0; }
.section-tight { padding: var(--space-5) 0; }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
/* Why-us tiles: capped at 2 columns even on desktop (unlike .grid-4, which
   goes to 4-across) — 4 narrow columns squeezed each card's short heading
   + copy into an uncomfortably tight, uneven-looking box. 2 columns give
   each tile roughly double the width. */
.why-grid { grid-template-columns: 1fr; }
/* Grid items default to min-width:auto, which floors them at their content's
   intrinsic width (e.g. a long unbroken German compound word like
   "Vollversicherung") — that can force a track wider than its 1fr share and
   push the whole grid past the viewport on narrow phones. min-width:0 lets
   items actually shrink to their track and wrap normally instead. */
.grid > * { min-width: 0; }

.eyebrow { color: var(--color-accent-700); margin-bottom: var(--space-2); }
.lede { color: var(--color-ink-muted); max-width: 56ch; }
.text-center { text-align: center; }

/* Progressive-enhancement scroll reveal: visible by default (no-JS / reduced
   motion / crawlers all see full content immediately). Only animates once
   main.js opts the page in via html.js-reveal, and only for users who don't
   ask for reduced motion. Animates per DIRECT CHILD (not the container
   itself) with a small stagger, so a row of cards cascades in one after
   another instead of popping in as one flat block — the main lever for
   making the page read as more alive without any single element moving
   far or fast. */
.reveal { opacity: 1; transform: none; }
html.js-reveal .reveal > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
html.js-reveal .reveal.is-visible > * { opacity: 1; transform: none; }
html.js-reveal .reveal.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
html.js-reveal .reveal.is-visible > *:nth-child(2) { transition-delay: 0.09s; }
html.js-reveal .reveal.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
html.js-reveal .reveal.is-visible > *:nth-child(4) { transition-delay: 0.23s; }
html.js-reveal .reveal.is-visible > *:nth-child(5) { transition-delay: 0.3s; }
html.js-reveal .reveal.is-visible > *:nth-child(n+6) { transition-delay: 0.36s; }

/* ==========================================================================
   4. Components
   ========================================================================== */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  /* Grounded corners rather than a full pill — reads more like a
     professional service brand than a consumer/DTC app. */
  border-radius: var(--radius-md);
  touch-action: manipulation;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn-primary {
  background: var(--color-accent);
  /* White ink, not dark: the brand blue is dark enough to carry white text
     at ~5.8:1, while dark navy on it would fall well short — the opposite
     trade-off from a vivid orange brand. */
  color: #fff;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--color-accent) 60%, transparent);
}
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-divider);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled) { background: var(--color-accent-600); transform: translateY(-1px); }
  .btn-secondary:hover { background: color-mix(in srgb, var(--color-ink) 6%, var(--color-surface)); }
  .btn .icon-arrow { transition: transform var(--transition-fast); }
  .btn:hover .icon-arrow { transform: translateX(3px); }
}
/* Stays at accent-600 rather than darkening to accent-700: that shade is
   reserved for blue-as-text and is dark enough that the button would read
   as near-black on press. The scale(0.97) press-feedback above carries the
   "active" feel instead. */
.btn-primary:active:not(:disabled) { background: var(--color-accent-600); }
.btn-block { width: 100%; }
.btn-sm { padding: 0 var(--space-4); font-size: 14px; min-height: var(--touch-target); }

/* --- Cards --- */
.card {
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
}
.card-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

@media (hover: hover) and (pointer: fine) {
  .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}

/* --- Tags --- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.tag-outline { border: 1px solid var(--color-divider); color: var(--color-ink-muted); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-700); }
.tag-neutral { background: var(--color-surface); color: var(--color-ink-muted); }
.tag-gold { background: var(--color-amber-100); color: var(--color-amber-700); font-weight: 600; border: 1px solid color-mix(in srgb, var(--color-amber) 35%, transparent); }

/* --- Forms --- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-muted);
}
.input {
  width: 100%;
  min-height: var(--touch-target);
  padding: 10px 14px;
  font: inherit;
  font-size: 16px; /* keep >=16px: iOS Safari auto-zooms on focus below this */
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  touch-action: manipulation;
}
.input:focus-visible { border-color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .input:hover { border-color: color-mix(in srgb, var(--color-ink) 35%, transparent); }
}

/* Icon-prefixed input (address fields) */
.input-icon-wrap { position: relative; }
.input-icon-wrap .icon-pin {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent);
  pointer-events: none;
}
.input-icon-wrap .input { padding-left: 40px; }

.radio-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: var(--space-4);
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-md);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
@media (hover: hover) and (pointer: fine) {
  .radio-card:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-divider)); }
}
.radio-card input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.radio-card .dot {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio-card input:checked ~ .dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 4px #fff;
}
.radio-card:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
}
.radio-card input:focus-visible ~ .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.radio-card .label-text { font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }

.field-full { grid-column: 1 / -1; }

/* Compact Ja/Nein segmented toggle (e.g. Aufzug vorhanden?) */
.seg-toggle {
  display: inline-flex;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  overflow: hidden;
  width: fit-content;
}
.seg-toggle label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  min-width: 72px;
  padding: 0 var(--space-4);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.seg-toggle input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.seg-toggle label:has(input:checked) { background: var(--color-accent); color: #fff; }
.seg-toggle label:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* Wide variant: equal-width segments spanning the full field (e.g. Anrede)
   instead of the compact fit-content Ja/Nein toggle. */
.seg-toggle-wide { display: flex; width: 100%; }
.seg-toggle-wide label { flex: 1; min-width: 0; }

/* Same clip technique as .sr-only. Deliberately NOT positioned off-canvas
   (e.g. left:-9999px) — that pattern can widen the page's scrollable area
   in some browsers and was the actual cause of a stray horizontal-scroll
   sliver on narrow phones. Screen readers still skip it via aria-hidden on
   the wrapper and tabindex="-1" on the input (set in the HTML). */
.honeypot-field {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* The input's own natural width (~170-200px, from the UA stylesheet) is
   wider than its 1px clipping box — constrain it directly too, since a
   child that only relies on an ancestor's overflow:hidden can still end up
   counted in the viewport's scrollable area in some browsers. */
.honeypot-field input { width: 1px; }

.form-error {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: 14px;
  margin-top: var(--space-3);
}
.form-error[hidden] { display: none; }

/* ==========================================================================
   5. Site chrome: topbar + nav + mobile menu + footer
   ========================================================================== */
.topbar { background: var(--color-ink-900); }
.topbar-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: 8px max(var(--space-4), env(safe-area-inset-left)) 8px max(var(--space-4), env(safe-area-inset-right));
  font-size: 13px;
}
.topbar-inner a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--on-dark-muted);
}
@media (hover: hover) and (pointer: fine) {
  .topbar-inner a:hover { color: var(--on-dark); }
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  padding: var(--space-3) 0;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(255, 255, 255, 0.97); }
}
.nav.is-scrolled { border-color: var(--color-divider); box-shadow: var(--shadow-sm); }
.nav .container { display: flex; align-items: center; gap: var(--space-5); width: 100%; }
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-right: auto;
}
.brand-icon { width: 32px; height: 32px; object-fit: contain; flex: none; }
.brand-accent { color: var(--color-amber-700); }
/* Header wordmark image (the real "WINTERDIENST24H" lettering). It is a very
   wide one-line lockup (~10:1), so at any legible height it would eat the
   whole phone header next to the icon, the CTA and the menu toggle — it is
   therefore hidden below 641px and the icon carries the brand there (the
   full name appears immediately in the hero anyway). Sized by height from
   641px up so it lines up with the icon; width auto keeps its ratio. */
.brand-wordmark { display: none; height: 20px; width: auto; flex: none; }
/* Text wordmark, used in the footer next to the icon. */
.brand-text { display: inline; }
.nav-links { display: none; gap: var(--space-5); }
.nav-links a { color: var(--color-ink); font-size: 15px; font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--color-accent); }
}
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
/* Compact header CTA on narrow screens: at the default .btn-sm size it took
   ~168px of a 335px header and left no room for the icon + wordmark beside
   it. min-height stays at the 44px touch target — only the horizontal bulk
   and label size shrink. Restored to full size from 641px up. */
.nav-actions .btn-gold { font-size: 13px; padding: 0 var(--space-3); }
.nav-phone { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: manipulation;
  color: var(--color-ink);
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) max(var(--space-4), env(safe-area-inset-left)) calc(var(--space-5) + env(safe-area-inset-bottom));
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-links { display: flex; flex-direction: column; }
.mobile-menu-links a {
  display: flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1px solid var(--color-divider);
}
.mobile-menu-links a:last-child { border-bottom: none; }
.mobile-menu .btn-secondary { width: 100%; margin-top: var(--space-4); }

footer {
  padding: var(--space-7) 0 var(--space-5);
  border-top: 1px solid var(--color-divider);
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-6);
}
.footer-grid h5 { margin-bottom: var(--space-3); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-1); font-size: 14px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-ink-muted); }
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover { color: var(--color-accent); }
}
.footer-cta { text-align: center; margin-bottom: var(--space-6); }
.footer-bottom { font-size: 13px; color: var(--color-ink-muted); }
.hr { height: 1px; background: var(--color-divider); border: 0; margin: 0 0 var(--space-5); }

/* ==========================================================================
   6. Page sections
   ========================================================================== */

/* Hero — the quote form now lives directly in the hero (not scrolled to
   separately), so this is a two-column layout: pitch + trust signals on
   the left, the live 5-step form on the right. The section itself is a
   plain navy gradient; the Einsatzfoto covers only the upper band
   (see .hero-photo-band below). Deliberately NOT a background on .hero as
   a whole — this hero is very tall on mobile, and a full-height `cover`
   crop reduced the photo to an unrecognizable sliver. */
.hero {
  position: relative;
  padding: 0 0 var(--space-6);
  background: linear-gradient(160deg, var(--color-ink-900) 0%, var(--color-ink-800) 100%);
  color: var(--on-dark);
  overflow: hidden;
}
/* Glow is a separate layer (not part of .hero's background shorthand) so its
   opacity alone can breathe slowly — barely perceptible as motion, but it
   keeps the hero from feeling like a static, flat-printed backdrop. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(1100px circle at 88% -8%, color-mix(in srgb, var(--color-accent-ice) 22%, transparent), transparent 60%);
  animation: hero-glow-breathe 7s ease-in-out infinite alternate;
}
@keyframes hero-glow-breathe {
  from { opacity: 0.75; }
  to { opacity: 1; }
}
.hero > .container { position: relative; z-index: 1; }
/* No top padding: the photo band above already ends in generous space of its
   own, and the trust badges bring their own top margin. */
.hero-grid { display: grid; gap: var(--space-6); align-items: start; }
/* The eyebrow above the headline sits in .hero-photo-band-inner, NOT inside
   .hero-content — without naming it here it falls back to the global h6 rule
   (deep accent-700 blue, meant for light backgrounds) and all but vanishes
   against the photo. */
.hero-content h6,
.hero-photo-band-inner h6 { color: var(--color-accent-ice); }
.hero h1 { color: var(--on-dark); margin-bottom: var(--space-4); }
.hero-accent { color: var(--color-accent-ice); }
.hero-lede { font-size: 18px; color: var(--on-dark-muted); max-width: 46ch; }

/* Photo band — the photo as a real background again (not a boxed-in image),
   but only behind the headline, not the whole (very tall, on mobile) hero.
   Band height comes from its text content (padding + eyebrow/h1/lede),
   never from a fixed px/vh number, so the `cover` crop stays close to the
   photo's own proportions — no more "only see a quarter of it". Below the
   band the section fades into the plain navy gradient for the rest of the
   hero (badges, checklist, form). */
.hero-photo-band { position: relative; z-index: 1; overflow: hidden; }
.hero-photo-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  z-index: 0;
  /* Photo and its darkening overlay both FADE OUT at the bottom rather than
     ending on a solid color. Fading to a solid would need that color to match
     .hero's own gradient at exactly that height — which shifts with content —
     and any mismatch shows as a hard seam. Fading to transparent instead just
     reveals .hero's real background underneath, so the join is seamless at
     any height. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 98%);
}
.hero-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Strongest where the headline sits (the white van body sits right
     behind it and would otherwise leave white-on-white text), easing off
     lower down where there is no text over the photo. Kept as light as the
     headline's legibility allows so the photo stays clearly visible. */
  background: linear-gradient(180deg, rgba(11, 22, 34, 0.72) 0%, rgba(11, 22, 34, 0.62) 45%, rgba(11, 22, 34, 0.42) 76%, rgba(11, 22, 34, 0) 98%);
}
/* padding-top/bottom only — the `padding` shorthand would reset .container's
   own horizontal padding to 0 and push the headline flush to the screen edge. */
.hero-photo-band-inner {
  position: relative;
  z-index: 2;
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
  /* The photo behind this text is snow and lit shop windows — bright, high
     contrast and uneven. The overlay alone carries the large headline, but
     the small 13px eyebrow sat right over the glass facade and washed out;
     a soft shadow anchors every line of the band regardless of what is
     directly behind it. */
  text-shadow: 0 1px 12px rgba(11, 22, 34, 0.55);
}

.hero-trust-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0; }
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--on-dark-divider);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-dark);
}
.trust-pill .stars { display: inline-flex; gap: 1px; color: var(--color-accent-ice); }
.trust-pill svg:not(.stars svg) { color: var(--color-accent-ice); flex: none; }

.hero-checklist { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); }
.hero-checklist li { display: flex; align-items: center; gap: var(--space-2); color: var(--on-dark-muted); }
.hero-checklist .icon { color: var(--color-accent-ice); flex: none; }
.hero-checklist strong { color: var(--on-dark); font-weight: 800; }

.hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-ctas .btn { flex: 1 1 auto; }
.btn-outline-hero {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--color-accent-ice);
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline-hero:hover { background: color-mix(in srgb, var(--color-accent-ice) 16%, transparent); }
}
.hero-stats-note { color: var(--on-dark-muted); font-size: 12px; margin-top: var(--space-2); }

@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1.05fr; gap: var(--space-7); }
}

/* Stats — glass tiles instead of opaque white cards, so they read as part
   of the dark photo hero rather than a separate white block bolted below
   it. Value color matches the ice-blue CTA/badges for one cohesive accent. */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
}
.stat-tile {
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-md);
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--on-dark-divider);
}
.stat-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 26px;
  color: var(--color-accent-ice);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 13px; color: var(--on-dark-muted); }

/* Services / Why-us grids reuse .grid-2/.grid-3/.grid-4 + .card */
.service-card p, .why-item p { color: var(--color-ink-muted); font-size: 14px; }
.why-item { background: #fff; border: 1px solid var(--color-divider); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); padding: var(--space-5); transition: transform var(--transition-standard), box-shadow var(--transition-standard); }
.why-item .card-icon { width: 40px; height: 40px; border-radius: 12px; }

/* Quote form section */
.quote-section { background: var(--color-surface); }
.quote-grid { display: grid; gap: var(--space-6); }
.quote-note { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--color-ink-muted); margin-top: var(--space-4); }

.quote-whatsapp { text-align: center; margin-top: var(--space-7); }
.quote-whatsapp-heading { margin-bottom: var(--space-3); }
.quote-whatsapp p { margin: var(--space-2) 0 0; font-size: 14px; color: var(--color-ink-muted); }
.btn-whatsapp { background: #25D366; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn-whatsapp:hover { background: #1ebe5a; }
}
.btn-whatsapp:active:not(:disabled) { background: #1aa851; }

/* Quick-contact — callback card + direct-call bar, offered as faster
   alternatives to the full 5-step form for visitors in a hurry. Stacked
   (not side by side) at every width, and width-capped + centered so the
   compact 2-field card doesn't stretch edge to edge on desktop. Both stay
   on the light card/white register (not dark navy) so this doesn't add a
   third heavy dark block to the page right below the quote card. */
.quick-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 560px;
  margin: var(--space-7) auto 0;
}
.quick-contact-card { text-align: left; }
.quick-contact-heading { margin-bottom: var(--space-4); }
.text-accent { color: var(--color-accent-700); }
.quick-contact-success {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent-700);
  font-weight: 600;
  font-size: 15px;
}
.quick-contact-success[hidden] { display: none; }
.quick-contact-success .icon { flex: none; }

.quick-contact-call {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}
.call-now-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--color-accent) 55%, transparent);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
@media (hover: hover) and (pointer: fine) {
  .call-now-bar:hover { transform: translateY(-1px); }
}
.call-now-bar:active { transform: scale(0.98); }
.call-now-icon {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.call-now-text { display: flex; flex-direction: column; }
.call-now-label { font-size: 13px; font-weight: 600; opacity: 0.75; }
.call-now-number { font-family: var(--font-heading); font-weight: 800; font-size: 20px; }
.call-now-whatsapp-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-muted);
}
@media (hover: hover) and (pointer: fine) {
  .call-now-whatsapp-link:hover { color: var(--color-accent-700); }
}

/* Quote card — now lives directly on the equally-dark hero gradient, so a
   plain navy-on-navy fill would flatten into the background. A faint white
   wash + a bright top edge (echoing the reference's colored card border)
   is what actually reads as "a card sitting on the hero", not the navy
   tone itself. Ice blue stays the one interactive accent throughout
   (progress, focus, checked states, primary buttons). */
.quote-card {
  background:
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
    linear-gradient(160deg, var(--color-ink-900) 0%, var(--color-ink-800) 100%);
  color: var(--on-dark);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border-color: var(--on-dark-divider);
  border-top: 3px solid var(--color-accent-ice);
}
.quote-progress { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.quote-progress .seg { flex: 1; height: 4px; border-radius: 2px; background: var(--on-dark-divider); transition: background var(--transition-fast); }
.quote-progress .seg.is-filled { background: var(--color-accent-ice); }

.quote-step[hidden] { display: none; }
.quote-step h4 { margin-bottom: var(--space-3); color: var(--on-dark); }
.step-icon-heading { display: flex; align-items: center; gap: var(--space-2); }
.step-icon-heading svg { color: var(--color-accent-ice); flex: none; }
.radio-group { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
.field-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-4) 0; }
.step-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.step-actions .btn-primary { flex: 1; }

.quote-card .field label, .quote-card .field > span { color: var(--on-dark-muted); }
.quote-card .input {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--on-dark-divider);
  color: var(--on-dark);
}
.quote-card .input::placeholder { color: rgba(255, 255, 255, 0.4); }
/* The native <option> popup ignores the dark closed-state styling in most
   browsers, so its text color must be set back explicitly — otherwise it
   inherits var(--on-dark) and renders white-on-white. */
.quote-card select.input option { color: var(--color-ink); background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .quote-card .input:hover { border-color: rgba(255, 255, 255, 0.32); }
}
.quote-card .radio-card { border-color: var(--on-dark-divider); }
.quote-card .radio-card .dot { border-color: var(--on-dark-divider); }
.quote-card .radio-card input:checked ~ .dot { box-shadow: inset 0 0 0 4px var(--color-ink-900); }
/* Every interactive accent inside the card switches from the deep brand
   blue to the ice blue: on this navy panel the deep blue is nearly
   invisible, so checked dots, the address pin, the checked segment and the
   focus ring all need the lighter shade to stay legible. */
.quote-card .radio-card input:checked ~ .dot { border-color: var(--color-accent-ice); background: var(--color-accent-ice); }
.quote-card .input-icon-wrap .icon-pin { color: var(--color-accent-ice); }
.quote-card .input:focus-visible { border-color: var(--color-accent-ice); }
.quote-card .seg-toggle label:has(input:checked) { background: var(--color-accent-ice); color: var(--color-ink-900); }
.quote-card :focus-visible { outline-color: var(--color-accent-ice); }
.quote-card .radio-card:has(input:checked) { background: color-mix(in srgb, var(--color-accent-ice) 20%, transparent); }
.quote-card .seg-toggle { border-color: var(--on-dark-divider); }
.quote-card .seg-toggle label { color: var(--on-dark-muted); }
.quote-card .btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--on-dark); border-color: var(--on-dark-divider); }
@media (hover: hover) and (pointer: fine) {
  .quote-card .btn-secondary:hover { background: rgba(255, 255, 255, 0.16); }
}
.quote-card .quote-note { color: var(--on-dark-muted); }
.quote-card .form-error { border-color: var(--color-warning-border); }

.quote-success { text-align: center; padding: var(--space-5) 0; }
.quote-success .checkmark { color: var(--color-accent-ice); margin: 0 auto var(--space-3); }
.quote-success h3 { color: var(--on-dark); }
.quote-success p { color: var(--on-dark-muted); }

/* Process steps */
.process-step .step-num {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: var(--space-3);
}

/* Service area */
.city-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Testimonials */
.testimonial .stars { display: inline-flex; gap: 2px; color: var(--color-amber); margin-bottom: var(--space-2); }
.testimonial blockquote { margin: 0 0 var(--space-3); font-style: italic; }
.testimonial-meta { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--color-ink-muted); }
.testimonial-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex: none;
}

/* FAQ (shared: homepage teaser + faq.html) */
.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--touch-target);
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-4) 0;
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-ink);
}
.faq-question .icon { color: var(--color-accent-700); flex: none; transition: transform var(--transition-standard); }
.faq-question[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* Grid-rows 0fr→1fr trick: animates to/from "auto" height smoothly, which a
   plain height/max-height transition can't do without a fixed target. The
   inner wrapper clips content during the transition; aria-hidden (set by
   faq-accordion.js) keeps the collapsed answer out of the a11y tree even
   though it's still technically in the DOM. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  color: var(--color-ink-muted);
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
}
.faq-answer > div { overflow: hidden; padding-bottom: var(--space-4); }
.faq-question[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; opacity: 1; }

/* Brand moment — a brief, quiet pause between Leistungen and Warum-wir to
   reinforce the logo once outside the nav/footer, not a full section. */
.brand-moment { padding: var(--space-6) 0; text-align: center; }
.brand-moment-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.brand-moment-logo img:first-child { width: 72px; height: auto; }
.brand-moment-logo img:last-child { width: min(420px, 84vw); height: auto; }
.brand-moment-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 720px;
  margin: 0 auto;
}
.brand-moment-gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (min-width: 641px) {
  .brand-moment-gallery { grid-template-columns: 1fr 1fr; }
}

/* WhatsApp floating contact button — fixed on every page, common pattern
   for German local-service sites. Sits above page content by design. */
.whatsapp-fab {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  z-index: 60;
  touch-action: manipulation;
  transition: transform var(--transition-fast);
}
.whatsapp-fab:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .whatsapp-fab:hover { transform: scale(1.08); }
}
/* Soft attention ping behind the button on page load — a few pulses, then
   settles, so it draws the eye once without nagging for the whole visit. */
.whatsapp-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  animation: whatsapp-ping 2.6s ease-out 1s 3;
}
@keyframes whatsapp-ping {
  0% { transform: scale(1); opacity: 0.55; }
  75%, 100% { transform: scale(1.9); opacity: 0; }
}

/* CTA banner — same rich dark navy as the hero, so the two "high-impact"
   moments of the page bookend it deliberately rather than reading as
   two unrelated color choices. */
.cta-banner {
  background: linear-gradient(160deg, var(--color-ink-900) 0%, var(--color-ink-800) 100%);
  color: var(--on-dark);
}
.cta-banner h2, .cta-banner h6 { color: var(--on-dark); }
.cta-banner h6 { opacity: 0.85; }
.cta-banner-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.cta-banner p { color: var(--on-dark-muted); max-width: 44ch; }
.cta-banner-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cta-banner .btn-secondary { background: rgba(255, 255, 255, 0.1); border-color: var(--on-dark-divider); color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) {
  .cta-banner .btn-secondary:hover { background: rgba(255, 255, 255, 0.18); }
}

/* Emphasis CTA — same solid brand blue as btn-primary on light chrome (nav,
   footer), but swapped to the light ice blue inside the two dark navy
   sections (hero + CTA banner), where a deep blue button would sink into
   the navy behind it instead of standing out. */
.btn-gold {
  background: var(--color-amber);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(11, 25, 40, 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover { background: var(--color-amber-700); color: #fff; transform: translateY(-1px); }
}
.btn-gold:active:not(:disabled) { background: var(--color-amber-700); color: #fff; }

/* On navy: ice blue with dark navy ink (~9:1) reads as the unmistakable
   primary action; the deep brand blue would not. */
.hero .btn-gold,
.cta-banner .btn-gold {
  background: var(--color-accent-ice);
  color: var(--color-ink-900);
}
@media (hover: hover) and (pointer: fine) {
  .hero .btn-gold:hover,
  .cta-banner .btn-gold:hover { background: #a3d3f4; color: var(--color-ink-900); }
}
.hero .btn-gold:active:not(:disabled),
.cta-banner .btn-gold:active:not(:disabled) { background: #a3d3f4; color: var(--color-ink-900); }

/* Legal pages (Impressum / Datenschutz) */
.page-header { padding: var(--space-5) 0 var(--space-4); }
/* Smaller than the global h1 scale: these are document titles, not marketing
   headlines, and at the global minimum of 34px the single long word
   "Datenschutzerklärung" no longer fits one line on a 375px phone and broke
   mid-word. */
.legal-content h1 { font-size: clamp(26px, 6.5vw, 40px); }
.legal-content h2 { margin-top: var(--space-6); font-size: clamp(20px, 4.5vw, 30px); }
.legal-content p, .legal-content li { color: var(--color-ink-muted); }
.legal-content ul { list-style: disc; padding-left: 1.4em; margin-bottom: var(--space-3); }

/* ==========================================================================
   7. Utilities
   ========================================================================== */
.hide-mobile { display: none; }
.mt-0 { margin-top: 0; }

/* ==========================================================================
   8. Media queries (mobile-first, 3 tiers)
   ========================================================================== */
@media (min-width: 641px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .stats-row { grid-template-columns: repeat(4, 1fr); }
  .hero-ctas .btn { flex: 0 1 auto; }
  .brand-wordmark { display: block; height: 22px; }
  .nav-actions .btn-gold { font-size: 14px; padding: 0 var(--space-4); }
}

@media (min-width: 1024px) {
  .hide-mobile { display: initial; }
  .nav-links { display: flex; }
  .nav-phone { display: inline-flex; }
  .nav-toggle { display: none; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .quote-grid { grid-template-columns: 1fr 1.2fr; }
  .brand-wordmark { height: 24px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }

  /* Center the primary CTA in the header bar itself, independent of the
     logo/nav-links on the left and the phone number on the right — pulled
     out of the flex flow so it stays centered no matter how wide either
     side group is. Only at desktop widths: on mobile/tablet it stays
     inline before the menu toggle (already verified not to overflow). */
  .nav .container { position: relative; }
  .nav-actions .btn-gold {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ==========================================================================
   9. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  .btn-primary:hover:not(:disabled),
  .btn:active:not(:disabled),
  .card-hover:hover {
    transform: none;
  }
}