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

  /* Brand orange — sampled directly from the real logo artwork (#FF6203),
     used at full vividness for surfaces (buttons, tags, tiles, progress).
     Text sitting ON TOP of it is dark navy, not white: white-on-#FF6203
     falls short of AA, but navy-on-#FF6203 clears ~6:1 — and it reads more
     confident/editorial than a washed-out "AA-safe" orange ever could.
     --color-accent-700 is a deliberately deeper shade reserved for orange
     USED AS TEXT on light backgrounds (links, h6), where it needs to carry
     its own contrast rather than relying on a light surface underneath. */
  --color-accent: #ff6203;
  --color-accent-100: #fff1e6;
  --color-accent-200: #ffd9b3;
  --color-accent-600: #e85800;
  --color-accent-700: #c24a00;
  --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: navy (mint slot) and
     neutral slate-gray (violet slot) — kept alongside --color-accent so
     every tile rotates through the three official brand colors (orange /
     dunkelblau / hellgrau) instead of introducing unrelated hues. */
  --color-mint: #1f3e68;
  --color-mint-100: #eaeff6;
  --color-mint-700: #14284a;
  --color-amber: var(--color-accent);
  --color-amber-100: var(--color-accent-100);
  --color-amber-700: var(--color-accent-700);
  --color-violet: #6b7280;
  --color-violet-100: #eef0f2;
  --color-violet-700: #3f4550;

  /* 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: #14284a;
  --color-ink-800: #1f3e68;
  --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, 31, 58, 0.1);
  --shadow-md: 0 8px 24px rgba(11, 31, 58, 0.1);
  --shadow-lg: 0 20px 48px rgba(11, 31, 58, 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. "Vollkaskoversicherung") 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 full-vividness orange falls short of AA. */
  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);
  /* Dark ink, not white: at full brand-orange vividness, dark text clears
     AA comfortably while white text falls short — and it reads more
     confident/editorial than a washed-out "AA-safe" orange ever could. */
  color: var(--color-ink);
  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 further to accent-700: that
   shade is reserved for orange-as-text and is too dark to keep dark button
   text readable. 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: var(--color-ink); }
.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 "FairUmzug.de" lettering + tagline). Sized
   by height so it lines up with the icon; width auto keeps its aspect ratio. */
.brand-wordmark { display: block; height: 24px; width: auto; flex: none; }
/* The old text wordmark is still used in the footer, where it stays hidden
   on narrow screens exactly as before. */
.brand-text { display: none; }
.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 team/truck photo 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) 25%, 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; }
.hero-content h6 { color: var(--color-accent); }
.hero h1 { color: var(--on-dark); margin-bottom: var(--space-4); }
.hero-accent { color: var(--color-accent); }
.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 30%;
  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 truck's white 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, 25, 48, 0.64) 0%, rgba(11, 25, 48, 0.6) 45%, rgba(11, 25, 48, 0.42) 76%, rgba(11, 25, 48, 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);
}

.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); }
.trust-pill svg:not(.stars svg) { color: var(--color-accent); 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); 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);
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline-hero:hover { background: color-mix(in srgb, var(--color-accent) 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 gold 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-amber);
  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: var(--color-ink);
  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: color-mix(in srgb, var(--color-ink) 12%, transparent);
  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. Orange 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);
}
.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); }

.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); 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); }
.quote-card .radio-card:has(input:checked) { background: color-mix(in srgb, var(--color-accent) 22%, 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); 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: var(--color-ink);
  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(320px, 80vw); 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); }
}

/* Gold/amber CTA — reserved for the two dark sections (hero + cta-banner)
   where it reads as the premium, unmissable action against the dark
   backdrop; everywhere else on light backgrounds the blue btn-primary
   already carries that job, so this isn't a second competing brand color. */
.btn-gold {
  background: var(--color-amber);
  /* Dark text at the vivid default shade (matches btn-primary's logic);
     hover/active drop to the deep amber-700, which flips the pairing back
     to white text since amber-700 is dark enough on its own. */
  color: var(--color-ink);
  box-shadow: 0 10px 24px -8px rgba(11, 31, 58, 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; }

/* 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-text { display: inline; }
  .brand-wordmark { height: 30px; }
  .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; }
  .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;
  }
}