/* ==========================================================================
   Autoankauf Itzehoe - main.css
   Umsetzung von DESIGN.md. Token-Namen sind identisch zur Dokumentation.
   ========================================================================== */

/* --- Fonts (selbst gehostet, DSGVO) ------------------------------------- */
@font-face {
  font-family: "Lexend";
  src: url("/assets/fonts/lexend-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  --c-navy-900: #071a2f;
  --c-navy-800: #0a2540;
  --c-navy-700: #103a63;
  --c-blue-600: #1668d6;
  --c-blue-50: #eef5ff;
  --c-green-700: #047857;
  --c-green-600: #059669;
  --c-green-500: #10b981;
  --c-green-50: #ecfdf5;
  --c-ink: #0b1b2b;
  --c-muted: #52657a;
  --c-line: #dde5ee;
  --c-surface: #ffffff;
  --c-bg: #f6f9fc;

  --r-nav: 0;
  --r-card: 14px;
  --r-input: 10px;
  --r-btn: 999px;
  --r-img: 0;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --sh-sm: 0 1px 2px rgba(7, 26, 47, 0.06);
  --sh-md: 0 8px 24px -8px rgba(7, 26, 47, 0.14);
  --sh-lg: 0 24px 56px -20px rgba(7, 26, 47, 0.24);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(56px, 8vw, 112px);
  --nav-h: 72px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --z-nav: 50;
  --z-menu: 60;
  --z-callbar: 40;
}

/* --- Reset -------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Natives Smooth-Scrolling wie auf der Referenzseite des Kunden. Der Browser
     macht das ausserhalb des JS-Threads und damit fluessiger als jede eigene
     Animation. */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden: hidden macht den Body zum Scrollcontainer und bricht
     position: sticky bei den gestapelten Karten. hidden bleibt als Fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  font-family: "Lexend", system-ui, sans-serif;
  color: var(--c-ink);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

/* Groessen und Gewichte an die vom Kunden benannte Referenzseite angeglichen.
   Gemessen dort: h1 78px Desktop und 31px mobil, h2 46 und 26, h3 23 und 20,
   Zeilenhoehe rund 1.12, Laufweite -0.035em, sehr fette Schnitte. */
h1 { font-size: clamp(1.95rem, 5.42vw, 4.875rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.625rem, 3.19vw, 2.875rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.4375rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-blue-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-navy-800); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--c-blue-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  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: var(--s-4); top: -100px;
  z-index: 100; background: #fff; color: var(--c-navy-800);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-btn);
  font-weight: 600; box-shadow: var(--sh-md);
}
.skip-link:focus { top: var(--s-3); }

/* --- Layout-Bausteine --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section--dark { background: var(--c-navy-800); color: #fff; }
.section--dark h2,
.section--dark h3 { color: #fff; }
.section--surface { background: var(--c-surface); }

.section-head { max-width: 62ch; margin-bottom: var(--s-7); }
.section-head--center { margin-inline: auto; text-align: center; }

.kicker {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-green-700);
  margin: 0 0 var(--s-3);
}
.section--dark .kicker { color: var(--c-green-500); }
.kicker::before {
  content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
}

.lead {
  /* Referenz: 19px am Desktop, 16px mobil */
  font-size: clamp(1rem, 1.32vw, 1.1875rem);
  line-height: 1.65;
  color: var(--c-muted);
  max-width: 62ch;
}
.section--dark .lead { color: rgba(255, 255, 255, 0.78); }

.prose { max-width: 68ch; }
.prose h3 { margin-top: var(--s-6); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: "Lexend", sans-serif;
  font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn svg { flex: none; }

.btn-primary {
  background: var(--c-green-700);
  color: #fff;
  box-shadow: var(--sh-md);
}
.btn-primary:hover { background: var(--c-green-600); color: #fff; box-shadow: var(--sh-lg); }

.btn-secondary {
  background: #fff;
  color: var(--c-navy-800);
  border-color: var(--c-line);
  box-shadow: var(--sh-sm);
}
.btn-secondary:hover { background: var(--c-blue-50); color: var(--c-navy-800); border-color: #c7d8ec; }

/* ohne blur, dafuer etwas kraeftigere Fuellung: gleicher Kontrast, aber
   Safari muss beim Scrollen nichts neu weichzeichnen */
.btn-ghost {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: #fff; }

.btn-block { width: 100%; }
.btn-lg { min-height: 56px; padding: 16px 34px; font-size: 1.0625rem; }

/* --- Header / Navbar ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--c-navy-800);
  border-radius: var(--r-nav);       /* Vorgabe: kantig, keine Ausnahme */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Kein backdrop-filter: der Header liegt beim Scrollen dauerhaft im Bild und
   Safari muesste den durchlaufenden Inhalt dahinter in jedem Frame neu
   weichzeichnen. Bei 96 % Deckkraft war davon ohnehin nichts zu sehen. */
.site-header.is-scrolled {
  background: var(--c-navy-800);
  box-shadow: 0 8px 24px -12px rgba(7, 26, 47, 0.6);
}

.nav {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: var(--nav-h);
}

.brand {
  display: inline-flex; align-items: center; gap: 0.6ch;
  font-family: "Lexend", sans-serif; font-weight: 700;
  font-size: 1.25rem; letter-spacing: -0.02em;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.brand-text { display: inline-flex; align-items: baseline; gap: 0.4ch; color: #fff; }
.brand-signet { flex: none; display: block; }
/* nur der Ortsname ist gruen, nicht der ganze Schriftzug */
.brand-text span { color: var(--c-green-500); }
/* mobil nur das Signet vergroessern, der Schriftzug wird ohnehin knapp */
@media (max-width: 420px) {
  .brand { font-size: 1.1rem; gap: 0.45ch; }
}
.brand:hover { color: #fff; }

.nav-links {
  display: flex; align-items: center; gap: var(--s-5);
  margin: 0 auto; padding: 0; list-style: none;
}
.nav-links a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem; font-weight: 600; text-decoration: none;
  padding: var(--s-2) 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-links a:hover { color: #fff; border-bottom-color: var(--c-green-500); }

.nav-actions { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }

.nav-phone {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  color: #fff; text-decoration: none; line-height: 1.15;
}
.nav-phone strong { font-family: "Lexend", sans-serif; font-size: 1.0625rem; font-weight: 600; }
.nav-phone small { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }
.nav-phone:hover { color: #fff; }
.nav-phone:hover strong { color: var(--c-green-500); }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px; color: #fff;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.18); }

@media (max-width: 1020px) {
  .nav-links, .nav-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-actions { gap: var(--s-3); }
}
@media (max-width: 560px) {
  .nav-phone { display: none; }
}

/* Mobile-Menü */
.nav-drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0;
  z-index: var(--z-menu);
  background: var(--c-navy-800);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--s-5) var(--gutter) var(--s-7);
  display: none;
}
.nav-drawer[data-open="true"] { display: block; }
.nav-drawer ul { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.nav-drawer li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
/* Nur die Links in der Liste, NICHT die beiden Buttons darunter. Ohne das
   ul erbten die Buttons display:block (Text linksbuendig statt mittig),
   padding var(--s-4) 0 und color #fff. Der weisse Telefonbutton war dadurch
   weisser Text auf weissem Grund, also ein leerer Balken. */
.nav-drawer ul a {
  display: block; padding: var(--s-4) 0;
  color: #fff; font-family: "Lexend", sans-serif; font-weight: 600;
  font-size: 1.0625rem; text-decoration: none;
}
.nav-drawer .btn { width: 100%; }
.nav-drawer .drawer-phone { margin-top: var(--s-3); }

/* --- Hero --------------------------------------------------------------- */
/* Der Text steht im Fluss, das Bild liegt absolut dahinter. So kann die
   Ueberschrift nie aus dem Hero laufen, egal wie niedrig das Fenster ist
   (Browser-Zoom 100% auf Laptops). min() haelt die 16:9-Optik als Ziel. */
.hero {
  position: relative; background: var(--c-navy-900);
  display: flex; align-items: flex-end;
  min-height: min(56.25vw, 78vh);
}

.hero-media {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: var(--r-img);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 26, 47, 0.55) 0%,
    rgba(7, 26, 47, 0.35) 40%,
    rgba(7, 26, 47, 0.88) 100%
  );
}

.hero-inner {
  position: relative;
  width: 100%;
  padding-top: var(--s-6);
  padding-bottom: clamp(28px, min(6vw, 5vh), 72px);
  z-index: 2;
}
/* Zusaetzlich an die Fensterhoehe gekoppelt: bei niedrigen Fenstern
   (100% Zoom am Laptop) schrumpft die Zeile, statt abgeschnitten zu werden */
.hero h1 { color: #fff; max-width: 18ch; font-size: clamp(1.95rem, min(5.42vw, 9vh), 4.875rem); }
.hero-lead {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.32vw, 1.1875rem);
  line-height: 1.65;
  max-width: 54ch;
  margin-bottom: var(--s-6);
}
/* align-items: center, sonst zieht das Siegel die Buttons auf seine Hoehe */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

.hero-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  /* dunkle Fuellung statt heller Transparenz: der Kontrast haengt sonst davon
     ab, wie hell das Hero-Bild an dieser Stelle gerade ist */
  background: rgba(7, 26, 47, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; border-radius: var(--r-btn);
  padding: 6px 14px; font-size: 0.85rem; font-weight: 600;
  margin-bottom: var(--s-4);
}
.hero-badge svg { color: var(--c-green-500); }

/* Ab 801px steht das Badge im Textblock, die obere Variante entfaellt */
@media (max-width: 800px) {
  /* Kundenwunsch: Text oben auf dem ruhigen Bildbereich (Gebaeude/Himmel),
     Buttons bleiben unten, nichts liegt ueber den Autos in der Bildmitte. */
  .hero {
    display: flex;
    align-items: stretch;
    min-height: 660px;
  }
  .hero-media {
    position: absolute; inset: 0;
    aspect-ratio: auto; max-height: none;
  }
  .hero-media img { height: 100%; }
  /* oben kraeftig abdunkeln fuer den Text, Mitte frei fuer die Autos,
     unten abdunkeln fuer die Buttons */
  .hero-media::after {
    background: linear-gradient(
      180deg,
      rgba(7, 26, 47, 0.86) 0%,
      rgba(7, 26, 47, 0.62) 30%,
      rgba(7, 26, 47, 0.16) 52%,
      rgba(7, 26, 47, 0.5) 74%,
      rgba(7, 26, 47, 0.9) 100%
    );
  }
  .hero-inner {
    position: relative; inset: auto;
    z-index: 2; width: 100%;
    display: flex;
    padding-top: var(--s-5);
  }
  .hero-inner > .container {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  /* Badge faellt mobil weg, damit die Beschreibung Platz hat (Kundenwunsch) */
  .hero-badge { display: none; }
  .hero h1 { max-width: 100%; }
  .hero-lead { margin-bottom: 0; }
  /* Buttons rutschen ans untere Ende, der freie Raum liegt ueber ihnen */
  .hero-actions { margin-top: auto; padding-top: var(--s-6); }
  .hero-actions > .btn { flex: 1 1 100%; }
  .hero-tel { flex: 1 1 100%; }
  .hero-tel .btn { flex: 1 1 100%; }
}

/* Trust-Zeile */
.trustbar { background: var(--c-navy-900); color: #fff; }
.trustbar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  /* unten zusaetzlicher Raum, in den die Formularkarte hineinragt */
  padding-block: var(--s-5) calc(var(--s-5) + 88px);
}
.trust-item { display: flex; align-items: center; gap: var(--s-3); font-size: 0.95rem; }
.trust-item svg { flex: none; color: var(--c-green-500); }
.trust-item strong {
  display: block;
  font-family: "Lexend", sans-serif; font-weight: 600;
  font-size: 1.05rem; line-height: 1.2;
}
.trust-item .count {
  font-size: 1.5rem; font-weight: 700;
  color: var(--c-green-500);
  /* tabellarische Ziffern, damit beim Hochzaehlen nichts springt */
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.trust-item span { color: rgba(255, 255, 255, 0.62); font-size: 0.85rem; }
.stars { display: inline-flex; gap: 2px; color: #f5b301; }

@media (max-width: 900px) { .trustbar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trustbar-grid { grid-template-columns: 1fr; gap: var(--s-4); } }

/* --- Formular ----------------------------------------------------------- */
.form-section { background: var(--c-bg); padding-block: clamp(32px, 4vw, 56px) var(--section-y); }
.form-shell {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  position: relative; z-index: 3;
}
@media (max-width: 980px) {
  .form-shell { grid-template-columns: 1fr; }
  .form-aside { order: 2; padding-top: var(--s-7); }
}

.lead-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-lg);
  padding: clamp(20px, 3vw, 36px);
}
.lead-card-head { margin-bottom: var(--s-5); }
.lead-card-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.125rem); margin-bottom: var(--s-2); }
.lead-card-head p { color: var(--c-muted); margin: 0; }

/* Schrittanzeige und Fortschritt */
.form-steps { margin-bottom: var(--s-5); }
.form-steps-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); margin-bottom: var(--s-2);
  font-size: 0.875rem; color: var(--c-muted);
}
.form-steps-head strong { color: var(--c-green-700); }
.form-steps-head span:last-child {
  font-family: "Lexend", sans-serif; font-weight: 600; color: var(--c-ink);
}
.form-progress {
  height: 4px; border-radius: 999px;
  background: var(--c-line); overflow: hidden;
}
.form-progress > span {
  display: block; height: 100%; width: 50%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-green-700), var(--c-green-500));
  transition: width 0.4s var(--ease);
}

/* Zusammenfassung aus Schritt 1, oben in Schritt 2 */
.form-summary {
  background: var(--c-blue-50);
  border: 1px solid #cfe0f6;
  border-radius: var(--r-input);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
  font-size: 0.9rem; font-weight: 600; color: var(--c-navy-800);
}
.form-summary:empty { display: none; }

.btn-back {
  display: inline-flex; align-items: center; gap: var(--s-2);
  width: 100%; justify-content: center;
  min-height: 44px; margin-top: var(--s-3);
  background: none; border: 0;
  color: var(--c-muted); font-size: 0.9rem; font-weight: 600;
  transition: color 0.2s var(--ease);
}
.btn-back:hover { color: var(--c-navy-800); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-4); }
.form-row-1 { grid-template-columns: 1fr; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-field label {
  font-size: 0.875rem; font-weight: 600; color: var(--c-ink); letter-spacing: 0.01em;
}
.field-optional { color: var(--c-muted); font-weight: 400; }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font: inherit;
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-input);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  appearance: none;
}
.form-field textarea { min-height: 96px; resize: vertical; }
.form-field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352657a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--c-blue-600);
  box-shadow: 0 0 0 3px rgba(22, 104, 214, 0.18);
}
.form-field input:user-invalid,
.form-field select:user-invalid { border-color: #dc2626; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: #93a3b5; }

.form-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* Foto-Upload */
.upload-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; min-height: 52px;
  padding: 12px 14px;
  background: var(--c-blue-50);
  border: 1.5px dashed #b7cdea;
  border-radius: var(--r-input);
  color: var(--c-navy-800);
  font-weight: 600; font-size: 0.95rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.upload-btn:hover:not(:disabled) { border-color: var(--c-blue-600); background: #e2eefc; }
.upload-btn:disabled { opacity: 0.55; cursor: default; }
.upload-btn svg { color: var(--c-green-700); }

.upload-previews { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.upload-previews:empty { display: none; }
.upload-thumb {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--c-line);
}
.upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(7, 26, 47, 0.78);
  color: #fff; border: 0; border-radius: 50%;
  font-size: 15px; line-height: 1;
}
.upload-remove:hover { background: var(--c-navy-800); }

.form-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  border-radius: var(--r-input); padding: var(--s-3) var(--s-4);
  font-size: 0.9rem; margin: 0 0 var(--s-4);
}
.form-note { font-size: 0.85rem; color: var(--c-muted); margin: var(--s-3) 0 0; text-align: center; }

.lead-success {
  text-align: center;
  background: var(--c-green-50);
  border: 1px solid #a7f3d0;
  border-radius: var(--r-card);
  padding: clamp(24px, 4vw, 44px);
}
.lead-success svg { margin: 0 auto var(--s-4); color: var(--c-green-700); }
.lead-success h3 { margin-bottom: var(--s-2); }
.lead-success p { color: #065f46; }

/* Formular-Nebenspalte */
.form-aside { padding-top: var(--s-6); }
.aside-list { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-4); }
.aside-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.aside-list svg { flex: none; margin-top: 3px; color: var(--c-green-700); }
.aside-list strong { display: block; font-family: "Lexend", sans-serif; font-weight: 600; }
.aside-list span { color: var(--c-muted); font-size: 0.95rem; }

.contact-card {
  background: var(--c-navy-800); color: #fff;
  border-radius: var(--r-card); padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--sh-md);
}
.contact-card h3 { color: #fff; font-size: 1.25rem; }
.contact-card p { color: rgba(255, 255, 255, 0.76); font-size: 0.95rem; }
.contact-card .contact-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.contact-card .contact-row svg { color: var(--c-green-500); flex: none; }
.contact-card a { color: #fff; font-weight: 600; text-decoration: none; }
.contact-card a:hover { color: var(--c-green-500); }

/* --- Karten-Raster ------------------------------------------------------ */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }
/* grid-2 traegt im Abholgebiet Text und Bild nebeneinander. Bricht es erst bei
   640px um, bleibt das Bild dazwischen nur rund 310 bis 410px breit, waehrend
   die Spalte daneben mit Ueberschrift, zwei Absaetzen und zehn Ortsnamen gut
   doppelt so hoch wird. Durch align-items:center steht das Bild dann mittig
   und ober- wie unterhalb klafft eine grosse leere Flaeche. Deshalb frueher
   umbrechen. */
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--sh-sm);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.card::after {
  content: ""; position: absolute; inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: calc(var(--r-card) - 1px);
  pointer-events: none;
}
.card:hover { box-shadow: var(--sh-md); border-color: #c7d8ec; }
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--c-muted); font-size: 0.97rem; margin: 0; }

.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: var(--s-4);
  background: var(--c-green-50); color: var(--c-green-700);
  border-radius: 12px;
}

/* Karten mit flacher Illustration statt kleinem Icon */
.card--illu { padding-top: 0; overflow: hidden; }
.illu-wrap {
  display: block;
  margin: 0 calc(-1 * clamp(20px, 2.4vw, 28px)) var(--s-5);
  padding: var(--s-5) var(--s-4) var(--s-3);
  background: linear-gradient(180deg, var(--c-blue-50), rgba(238, 245, 255, 0));
}
.illu { display: block; width: 100%; height: auto; }

/* Ablauf-Schritte mit mitwachsender Linie */
.steps {
  position: relative;
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(4, 1fr);
  --steps-progress: 0;
}
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

.steps-line { display: none; }
@media (min-width: 981px) {
  /* Die Linie laeuft von Ziffernmitte zu Ziffernmitte, nicht bis zum Rand.
     Bei 4 Spalten ist eine Spalte (100% - 3 Luecken) / 4 breit, die Ziffer
     ist 44px breit und sitzt am Spaltenanfang. */
  .steps::before,
  .steps-line {
    position: absolute;
    top: 21px;
    left: 22px;
    right: calc((100% - 3 * var(--s-5)) / 4 - 22px);
    height: 2px;
  }
  .steps::before { content: ""; background: var(--c-line); }
  .steps-line {
    display: block;
    background: linear-gradient(90deg, var(--c-green-700), var(--c-green-500));
    transform-origin: left center;
    transform: scaleX(var(--steps-progress));
  }
}

.step { position: relative; padding-top: var(--s-6); }
.step-num {
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--c-muted);
  border: 2px solid var(--c-line);
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 1.05rem;
  border-radius: var(--r-btn);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.step.is-reached .step-num {
  background: var(--c-green-700);
  border-color: var(--c-green-700);
  color: #fff;
  box-shadow: 0 0 0 6px var(--c-green-50);
}
.step h3 { margin-top: var(--s-5); }
.step p { color: var(--c-muted); font-size: 0.97rem; margin: 0; }

/* Ohne JS oder bei reduzierter Bewegung sind alle Schritte aktiv */
.no-js .step .step-num,
.steps--static .step .step-num {
  background: var(--c-green-700); border-color: var(--c-green-700); color: #fff;
  box-shadow: 0 0 0 6px var(--c-green-50);
}
.steps--static .steps-line { transform: scaleX(1); }

/* Fahrzeugarten als gestapelte Karten */
.stack { display: grid; }

.stack-card {
  display: grid;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.stack-card img { width: 100%; height: 100%; object-fit: cover; }
.stack-card-body {
  padding: clamp(20px, 2.6vw, 40px);
  display: flex; flex-direction: column; justify-content: center;
}
.stack-num {
  font-family: "Lexend", sans-serif;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--c-green-700);
  margin-bottom: var(--s-2);
}
.stack-card-body h3 { margin-bottom: var(--s-3); }
.stack-card-body p { color: var(--c-muted); margin: 0; max-width: 52ch; }

/* Mobil und Tablet: normales Raster, kein Stapeleffekt */
@media (max-width: 980px) {
  .stack { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .stack-card { grid-template-columns: 1fr; height: 100%; }
  .stack-card img { aspect-ratio: 4 / 3; height: auto; }
}
@media (max-width: 640px) { .stack { grid-template-columns: 1fr; } }

@media (min-width: 981px) {
  .stack-item {
    position: sticky;
    /* jede Karte klebt 14px tiefer, dadurch bleiben die Kanten sichtbar */
    top: calc(var(--nav-h) + 32px + var(--i) * 14px);
  }
  .stack-item + .stack-item { margin-top: var(--s-6); }
  .stack-card {
    grid-template-columns: 42% 1fr;
    min-height: 320px;
    /* zusaetzlicher Schatten nach oben, damit der Stapel Tiefe bekommt */
    box-shadow: 0 -10px 26px -14px rgba(7, 26, 47, 0.28), var(--sh-md);
  }
  /* letzte Karte loest sich, damit die Sektion sauber endet */
  .stack-item:last-child { position: relative; top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .stack-item { position: relative; top: auto; }
}

/* Abholgebiet-Chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); padding: 0; list-style: none; }
.chips li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-btn);
  padding: 8px 16px; font-size: 0.92rem; color: #fff;
}

/* --- Ablauf als Grafik (Pills + Siegel) --------------------------------- */
.ablauf-visual-section { background: var(--c-bg); }
.ablauf-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 860px) { .ablauf-visual { grid-template-columns: 1fr; } }

.pills { display: flex; flex-direction: column; margin-top: var(--s-6); }
.pill {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--c-navy-800);
  color: #fff;
  border-radius: var(--r-btn);
  padding: 16px 28px;
  box-shadow: var(--sh-md);
}
.pill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-btn);
  background: rgba(16, 185, 129, 0.16);
  color: var(--c-green-500);
}
.pill-text {
  font-family: "Lexend", sans-serif; font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: -0.01em;
}
/* gepunkteter Verbinder zwischen den Stufen */
.pill-link {
  width: 4px; height: 26px;
  margin-left: 46px;
  background-image: radial-gradient(circle, var(--c-green-500) 1.8px, transparent 2px);
  background-size: 4px 8px;
  background-repeat: repeat-y;
}

.ablauf-visual-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }

/* Rundes Siegel */
.siegel {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 158px; height: 158px; flex: none;
  border-radius: 50%;
  background: var(--c-green-500);
  color: var(--c-navy-900);
  text-align: center;
  box-shadow: 0 14px 32px -14px rgba(4, 120, 87, 0.6);
}
.siegel-zahl {
  font-family: "Lexend", sans-serif; font-weight: 700;
  font-size: 2.1rem; line-height: 1; letter-spacing: -0.03em;
}
.siegel-zahl span { font-size: 1.2rem; }
.siegel-text {
  font-size: 0.78rem; font-weight: 600; line-height: 1.25;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 4px;
}
.siegel-flagge {
  position: absolute; bottom: 14px;
  display: inline-flex;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(7, 26, 47, 0.35);
}
.siegel-flagge svg { display: block; }

/* Telefon plus Siegel als Einheit */
.hero-tel { display: inline-flex; align-items: center; }

/* Siegel im Hero: ueberlappt den Button-Rahmen. Der Ueberlappungswert liegt
   unter dem rechten Innenabstand des Buttons (34px), damit die Nummer frei
   bleibt. Das Siegel liegt im Dokumentfluss darueber. */
.siegel--hero {
  width: 124px; height: 124px;
  margin-left: -18px;
  position: relative;
  z-index: 2;
  flex: none;
  transform: rotate(-8deg);
  box-shadow: 0 16px 34px -14px rgba(7, 26, 47, 0.55);
}
.siegel--hero .siegel-zahl { font-size: 1.7rem; }
.siegel--hero .siegel-zahl span { font-size: 1rem; }
.siegel--hero .siegel-text { font-size: 0.66rem; margin-top: 3px; }
.siegel--hero .siegel-flagge { bottom: 11px; }
.siegel--hero .siegel-flagge svg { width: 22px; height: 13px; }

@media (max-width: 800px) {
  /* Mobil steht das Siegel wieder in einer eigenen Zeile unter den Buttons,
     die beide die volle Breite behalten. Am Desktop bleibt es am Rahmen. */
  .hero-tel { flex-wrap: wrap; }
  .siegel--hero {
    width: 96px; height: 96px;
    margin: var(--s-3) 0 0;
    order: 2;
  }
  .siegel--hero .siegel-zahl { font-size: 1.35rem; }
  .siegel--hero .siegel-zahl span { font-size: 0.85rem; }
  .siegel--hero .siegel-text { font-size: 0.55rem; margin-top: 2px; }
  .siegel--hero .siegel-flagge { bottom: 9px; }
  .siegel--hero .siegel-flagge svg { width: 18px; height: 11px; }
}

/* --- Marken-Logoband ---------------------------------------------------- */
.logos { background: var(--c-bg); }
.logos-title {
  text-align: center;
  font-size: 0.95rem;
  color: var(--c-muted);
  margin: 0 0 var(--s-5);
}
.marquee--logos { --marquee-gap: clamp(40px, 5vw, 72px); cursor: default; padding-block: 0; }
.logo-item {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px;
}
.logo-item img {
  height: 100%; width: auto;
  opacity: 0.42;
  transition: opacity 0.25s var(--ease);
}
.marquee--logos:hover .logo-item img { opacity: 0.6; }

/* --- Google-Bewertungskarte --------------------------------------------- */
/* Zwischenstreifen nach den Zaehlern: Badge plus Typen-Karussell */
.social-strip { background: var(--c-bg); }

.gbadge {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 28px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-md);
  padding: clamp(18px, 2.6vw, 26px) clamp(18px, 3vw, 32px);
  margin-top: var(--s-6);
}
/* ragt in die dunkle Zaehler-Zeile hinein, wie in der SK-Vorlage */
.gbadge--overlap {
  margin-top: -88px;
  position: relative; z-index: 3;
  box-shadow: var(--sh-lg);
}
.gbadge-g { flex: none; display: inline-flex; }
.gbadge-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gbadge-body strong {
  font-family: "Lexend", sans-serif; font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--c-navy-800);
}
.gbadge-body > span:last-child { color: var(--c-muted); font-size: 0.92rem; }
.gbadge-check {
  display: flex; align-items: center; gap: var(--s-3);
  margin-left: auto; flex: none;
  color: var(--c-navy-800);
  font-size: 0.92rem; line-height: 1.3;
}
.gbadge-check svg { color: var(--c-green-700); }
.gbadge-check strong { font-family: "Lexend", sans-serif; }
@media (max-width: 640px) {
  .gbadge { flex-wrap: wrap; }
  .gbadge-check { margin-left: 58px; }
}

/* --- Fahrzeugtypen-Karussell -------------------------------------------- */
.marquee--autos {
  --marquee-gap: clamp(36px, 4.5vw, 64px);
  cursor: default;
  padding-block: var(--s-6) var(--s-4);
}
.auto-item {
  flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--c-navy-700);
  opacity: 0.55;
  transition: opacity 0.25s var(--ease);
}
.marquee--autos:hover .auto-item { opacity: 0.8; }
.auto-illu { width: clamp(96px, 12vw, 132px); height: auto; display: block; }
.auto-label {
  font-family: "Lexend", sans-serif; font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c-muted);
}

/* --- Standort-Karte ------------------------------------------------------ */
.map-wrap {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-blue-50);
  min-height: 380px;
  display: flex; align-items: center; justify-content: center;
}
.map-consent {
  text-align: center;
  padding: clamp(24px, 5vw, 48px);
  max-width: 46ch;
}
.map-consent .card-icon { margin-inline: auto; }
.map-consent h3 { margin-bottom: var(--s-2); }
.map-consent p { color: var(--c-muted); font-size: 0.95rem; }
.map-consent .btn { margin-top: var(--s-3); }
.map-open {
  display: block; margin-top: var(--s-4);
  font-size: 0.9rem; font-weight: 600;
}
.map-wrap iframe { width: 100%; height: 440px; border: 0; display: block; }
.map-wrap.map-loaded { min-height: 0; background: none; }

/* Sofort geladene Karte: kein Platzhalter noetig, die Karte fuellt den
   Rahmen selbst aus. Der Link darunter bleibt, damit man die Route auch
   in der Google-App oeffnen kann. */
.map-wrap--direkt { min-height: 0; background: none; display: block; }
.map-hinweis { text-align: center; margin-top: var(--s-3); }
.map-hinweis .map-open { margin-top: 0; }

/* --- Bewertungs-Laufband ------------------------------------------------ */
.marquee {
  --marquee-gap: var(--s-5);
  position: relative;
  overflow: hidden;
  padding-block: var(--s-2) var(--s-4);
  cursor: grab;
  /* weicher Rand-Verlauf links und rechts */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  touch-action: pan-y;
}
.marquee.is-dragging { cursor: grabbing; user-select: none; }

.marquee-track {
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  will-change: transform;
}
.marquee-group { display: flex; gap: var(--marquee-gap); }

.review-card {
  flex: none;
  width: clamp(280px, 78vw, 372px);
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.review-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* nicht anfassbar, damit das Ziehen im Laufband nicht zum Bild-Drag wird */
  pointer-events: none;
  user-select: none;
}
.review-body {
  display: flex; flex-direction: column; gap: var(--s-4);
  flex: 1;
  padding: clamp(18px, 2.2vw, 24px);
}
.marquee:hover .review-card { box-shadow: var(--sh-md); border-color: #c7d8ec; }

.review-text {
  flex: 1;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--c-ink);
}

.review-person {
  display: flex; align-items: center; gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}
.review-avatar {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-btn);
  background: linear-gradient(140deg, var(--c-navy-800), var(--c-navy-700));
  color: #fff;
  font-family: "Lexend", sans-serif; font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.review-ident { display: flex; flex-direction: column; min-width: 0; }
.review-ident strong {
  font-family: "Lexend", sans-serif; font-weight: 600; font-size: 0.98rem;
  color: var(--c-ink); line-height: 1.3;
}
.review-ident small {
  font-size: 0.85rem; color: var(--c-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ohne JS oder bei reduzierter Bewegung: normal horizontal scrollbar */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; cursor: default; }
  .marquee-track { animation: none; }
}

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); align-items: start; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

.faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 1.0625rem;
  cursor: pointer; list-style: none;
  transition: background-color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--c-blue-50); }
.faq-item summary::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.24s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 var(--s-5) var(--s-5); color: var(--c-muted); }
.faq-item .faq-body p { margin: 0; }

/* Abschluss-CTA */
.cta-final { text-align: center; }
.cta-final .btn { min-width: 220px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }
.cta-phone {
  display: inline-block;
  font-family: "Lexend", sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700; color: #fff; text-decoration: none;
  letter-spacing: -0.01em;
}
.cta-phone:hover { color: var(--c-green-500); }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--c-navy-900); color: rgba(255, 255, 255, 0.72); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-7); padding-block: var(--s-8) var(--s-6);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.site-footer h3 {
  color: #fff; font-family: "Lexend", sans-serif; font-size: 0.9rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s-4);
}
.site-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.site-footer a:hover { color: var(--c-green-500); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer-brand { font-size: 1.3rem; margin-bottom: var(--s-3); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--s-5);
  font-size: 0.875rem;
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
}

/* --- Sticky Call-Bar (mobil) -------------------------------------------- */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-callbar);
  display: none; gap: var(--s-2);
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
  /* deckend statt blur: liegt mobil dauerhaft ueber dem scrollenden Inhalt */
  background: #fff;
  border-top: 1px solid var(--c-line);
}
.callbar .btn { flex: 1; min-height: 46px; padding: 10px 16px; font-size: 0.95rem; }
@media (max-width: 767px) {
  .callbar { display: flex; }
  body { padding-bottom: 74px; }
}

/* --- Rechtsseiten ------------------------------------------------------- */
.page-head { background: var(--c-navy-800); color: #fff; padding-block: clamp(40px, 6vw, 80px); }
.page-head h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.legal { background: var(--c-surface); }
.legal .prose h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: var(--s-7); }
.legal .prose h3 { font-size: 1.1rem; margin-top: var(--s-5); }
.legal .prose p, .legal .prose li { color: var(--c-muted); }

/* Scroll-Reveal auf Kundenwunsch entfernt (01.08.): Sektionen stehen sofort,
   die data-reveal-Attribute im Markup sind bewusst wirkungslos. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Google-Siegel ueber dem Bewertungs-Karussell (Variante, aktuell nur Kerpen).
   Ohne den ueberlappenden Rand des Standardplatzes, dafuer zentriert und mit
   Abstand zur Ueberschrift. */
.gbadge-slot { display: flex; justify-content: center; margin: var(--s-5) 0 var(--s-2); }
.gbadge-slot .gbadge { margin: 0; }