/* ==========================================================
   Landing-Page Template
   Stil: Apple-clean, weiche Schatten, ein-Schrift-Hierarchie
   ----------------------------------------------------------
   ANPASSUNGS-CHEAT-SHEET
   ▸ Farben:     unter ":root" — siehe Abschnitt "THEME"
   ▸ Hero-Foto:  unten im ".hero"-Block — Pfad ändern
   ▸ Schrift:    Standard ist Hanken Grotesk (DSGVO-konform via Bunny Fonts)
                 → bei Bedarf in :root --f-display / --f-body austauschen
   ========================================================== */

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

html, body, h1, h2, h3, h4, p, ul, ol, li, blockquote, figure, fieldset, button {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* Doppel-Tap-Zoom auf iOS unterbinden für Buttons/Links — fühlt sich auf Touch responsiver an */
button, a, [role="button"], summary, .pill {
  touch-action: manipulation;
}

/* Verhindert horizontalen Overflow auf Mobile durch fehlerhafte Inhalte */
html, body { overflow-x: hidden; max-width: 100%; }

/* ==========================================================
   THEME — hier alle Farben, Schriften, Radien anpassen
   ----------------------------------------------------------
   Die Default-Palette ist eine warme, neutrale "Cream + Forest"-
   Kombi (Original: Baumpflege-Branche). Für andere Branchen einfach
   die folgenden Hex-Werte tauschen — der Rest der Datei zieht
   automatisch nach.
   ========================================================== */
:root {
  /* — Farben (Hintergrund / Text) — */
  --c-bg: #FAF8F4;     /* Cream / Off-White */
  --c-bg-alt: #F2EEE5;     /* leicht dunkler */
  --c-card:         #FFFFFF;
  --c-text: #14201A;     /* tiefes Anthrazit-Grün */
  --c-text-muted: #5C6660;
  --c-text-soft: #7A857F;
  --c-border: #E8E2D4;
  --c-border-strong: #D9D2BF;

  /* — Akzent-Farbe (Buttons, Highlights, Links) —
       Auch <meta name="theme-color"> in den HTML-Files anpassen. */
  --c-accent: #3A6B38;       /* Marken-Akzent — build-lp füllt aus ACCENT_HEX */
  --c-accent-hover: #294B27; /* auto: ~30% dunkler */
  --c-accent-soft: #E9EFE9;  /* auto: ~12% Tint */
  --c-accent-tint: #F1F5F1;  /* auto: ~6% Tint */

  /* — Sekundär-Farbe (Sand, Highlights auf dunklen Flächen) — */
  --c-sand:         #E9DFC9;
  --c-sand-soft:    #F1E9D5;

  /* — Funktionsfarben — */
  --c-emergency:    #B8412C;     /* Rot für Notdienst-CTA */
  --c-emergency-bg: #FCEFEA;
  --c-success:      #1F8A4F;

  /* — Typografie — Single-Typeface mit Weight-Hierarchie (Apple-Style) — */
  --f-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --f-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;

  /* — Radien — */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 9999px;

  /* — Schatten — weich, nicht dramatisch — */
  --sh-xs: 0 1px 2px rgba(20, 32, 26, .04);
  --sh-sm: 0 2px 8px rgba(20, 32, 26, .05);
  --sh-md: 0 8px 28px rgba(20, 32, 26, .07);
  --sh-lg: 0 18px 60px rgba(20, 32, 26, .10);
  --sh-form: 0 24px 80px -12px rgba(20, 32, 26, .14), 0 4px 12px rgba(20, 32, 26, .04);

  /* — Layout — */
  --container-max: 1200px;
  --section-py: clamp(56px, 9vw, 128px);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.011em;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "kern";
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.08;
  color: var(--c-text);
}

h1 { font-size: clamp(40px, 5.4vw, 68px); letter-spacing: -.035em; font-weight: 700; line-height: 1.04; }
h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.028em; font-weight: 600; }
h3 { font-size: clamp(20px, 2vw, 24px); letter-spacing: -.018em; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }

.section-eyebrow {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--c-accent);
  margin-bottom: 16px;
}

.section-headline { max-width: 820px; }
.section-sub {
  margin-top: 16px;
  font-size: 18px;
  color: var(--c-text-muted);
  max-width: 640px;
  letter-spacing: -.012em;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--c-accent);
  margin-bottom: 18px;
}

.accent-underline {
  background-image: linear-gradient(transparent 65%, var(--c-sand) 65%);
  padding: 0 .05em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.005em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  min-height: 44px;
}

.btn:active { transform: translateY(1px); }
.btn-lg     { padding: 16px 26px; font-size: 16.5px; border-radius: 14px; }
.btn-block  { width: 100%; }

.btn-primary {
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 6px 20px -8px rgba(31, 58, 46, .55);
}
.btn-primary:hover {
  background: var(--c-accent-hover);
  box-shadow: 0 10px 28px -10px rgba(31, 58, 46, .6);
}

.btn-secondary {
  background: var(--c-card);
  color: var(--c-accent);
  border-color: var(--c-border);
}
.btn-secondary:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
}

.btn-emergency {
  background: var(--c-emergency);
  color: #fff;
  box-shadow: 0 6px 20px -8px rgba(184, 65, 44, .6);
}
.btn-emergency:hover { background: #9B361F; }

.btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
  stroke-dasharray: 56;
  stroke-dashoffset: 32;
}
.btn.is-loading .btn-spinner { display: inline-block; }
.btn.is-loading .btn-arrow,
.btn.is-loading .btn-label   { opacity: .55; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 244, .85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--c-border);
  background: rgba(250, 248, 244, .94);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-accent);
}

.logo-img {
  height: 38px;
  width: auto;
  display: block;
}

@media (max-width: 720px) {
  .logo-img { height: 32px; }
}

.logo-footer .logo-img { height: 36px; }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: background .2s ease;
}
.header-phone:hover { background: var(--c-accent-tint); }
.header-phone svg { color: var(--c-accent); }
.header-phone-text { display: flex; flex-direction: column; line-height: 1.15; }
.header-phone-label  { font-size: 11px; color: var(--c-text-soft); letter-spacing: .05em; text-transform: uppercase; }
.header-phone-number { font-weight: 700; font-family: var(--f-display); font-size: 16px; letter-spacing: -.01em; }

.trust-strip {
  font-size: 13px;
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-border);
  padding: 10px 0;
}
.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
}
.trust-strip-item { display: inline-flex; align-items: center; gap: 6px; }
.trust-strip .check { color: var(--c-accent); font-weight: 700; }
.trust-strip .dot   { color: var(--c-border-strong); }

/* Mobile: Trust-Strip ausblenden — Social-Proof direkt unter Hero zeigt dieselben Punkte */
@media (max-width: 720px) {
  .trust-strip { display: none; }
}

/* ==========================================================
   HERO — Hintergrund-Foto hier setzen
   ----------------------------------------------------------
   Pfad zum Hero-Foto im public/ Ordner. Empfohlen:
     • Format: JPG, optimiert (~120-200 kB)
     • Mindestgröße: 1920 × 1280 px
     • Querformat
   ========================================================== */
.hero {
  padding: clamp(28px, 6vw, 72px) 0 var(--section-py);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--c-bg);
  background-image:
    /* dezente Akzent-Glows oben rechts + unten links */
    radial-gradient(ellipse 900px 700px at 88% 8%, rgba(31, 58, 46, .08), transparent 60%),
    radial-gradient(ellipse 700px 600px at 5% 95%, rgba(233, 223, 201, .35), transparent 55%),
    /* helles Cream-Overlay — Foto schimmert leicht durch */
    linear-gradient(180deg, rgba(250, 248, 244, .80) 0%, rgba(250, 248, 244, .92) 70%, rgba(250, 248, 244, .96) 100%),
    /* >>> HERO-FOTO HIER <<< — Pfad für jede Landingpage anpassen */
    url("public/hero.jpg");
  background-position: center, center, center, center 35%;
  background-size: cover, cover, cover, cover;
  background-repeat: no-repeat;
}

/* Mobile: Foto stärker abdunkeln (Lesbarkeit) und horizontalen Fokus auf Mitte */
@media (max-width: 720px) {
  .hero {
    background-image:
      radial-gradient(ellipse 600px 500px at 88% 8%, rgba(31, 58, 46, .07), transparent 60%),
      radial-gradient(ellipse 500px 400px at 5% 95%, rgba(233, 223, 201, .25), transparent 55%),
      linear-gradient(180deg, rgba(250, 248, 244, .88) 0%, rgba(250, 248, 244, .96) 60%, rgba(250, 248, 244, .98) 100%),
      url("public/hero.jpg");
    background-position: center, center, center, center 30%;
  }
}

/* Sehr feines Grain für Paper-Textur */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.13 0 0 0 0 0.10 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .03;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
  position: relative;
  z-index: 1;
}

@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
  }
}

@media (min-width: 1180px) {
  .hero-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 72px;
  }
}

.hero-text {
  max-width: 640px;
  display: flex;
  flex-direction: column;
}

/* Eyebrow — clean, kein Chip, nur Punkt + Text (Apple-Style) */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text-muted);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.005em;
  margin-bottom: 22px;
  width: fit-content;
}
.hero-eyebrow .eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2EA855;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(46, 168, 85, .15);
}
.hero-eyebrow .eyebrow-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #2EA855;
  opacity: .5;
  animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Headline — Apple-clean: ein Typeface, soft muted Sekundärlinie */
.hero-headline {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -.038em;
  font-weight: 700;
  margin-bottom: 18px;
  text-wrap: balance;
  color: var(--c-text);
}
.hero-headline-soft {
  color: var(--c-text-muted);
  font-weight: 700;
  display: inline;
}

.hero-sub {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--c-text-muted);
  max-width: 520px;
  margin-bottom: 32px;
  line-height: 1.45;
  letter-spacing: -.012em;
  font-weight: 400;
}

/* Stat-Row — Apple-clean: dezente Zahlen, einheitlicher Weight */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 18px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.hero-stat {
  padding: 0 4px;
  min-width: 0;
}
.hero-stat + .hero-stat {
  border-left: 1px solid var(--c-border);
  padding-left: 16px;
}
.hero-stat-num {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--c-text);
}
.hero-stat-num span {
  font-weight: 500;
  font-size: .65em;
  margin-left: 1px;
  color: var(--c-text-muted);
  letter-spacing: -.02em;
}
.hero-stat-label {
  margin-top: 8px;
  font-size: 13px;
  color: var(--c-text-muted);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.3;
}

@media (max-width: 480px) {
  .hero-stat + .hero-stat { padding-left: 10px; }
  .hero-stat-label { font-size: 12px; line-height: 1.25; }
}

/* Entrance-Animation: subtiles Fade-up im Hero */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.hero-text > *,
.hero-grid > .form-card {
  animation: hero-fade-up .7s cubic-bezier(.2, .7, .2, 1) backwards;
}
.hero-text > *:nth-child(1) { animation-delay: .05s; }
.hero-text > *:nth-child(2) { animation-delay: .12s; }
.hero-text > *:nth-child(3) { animation-delay: .19s; }
.hero-text > *:nth-child(4) { animation-delay: .26s; }
.hero-text > *:nth-child(5) { animation-delay: .33s; }
.hero-grid > .form-card     { animation-delay: .25s; }

.check-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-weight: 700;
  font-size: 12px;
}

/* ---------- Form Card ---------- */
.form-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-form);
  padding: clamp(20px, 2.4vw, 28px);
  position: relative;
  z-index: 2;
  scroll-margin-top: 96px;
  transition: box-shadow .35s ease;
}
.form-card.is-highlighted {
  box-shadow: 0 28px 90px -10px rgba(31, 58, 46, .25), 0 4px 12px rgba(20, 32, 26, .04);
}
@media (max-width: 720px) {
  .form-card { scroll-margin-top: 70px; }
}

.form-card-head { margin-bottom: 16px; }
.form-card-head h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.022em;
  margin-bottom: 2px;
}
.form-sub { font-size: 13px; color: var(--c-text-muted); letter-spacing: -.005em; }

/* ---------- Multi-Step Progress ---------- */
.form-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-border);
}
.step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border-strong);
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 700;
  font-feature-settings: "tnum";
  flex-shrink: 0;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.step-dot.is-active,
.step-dot.is-done {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.step-line {
  flex: 0 0 36px;
  height: 2px;
  background: var(--c-border);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.step-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.step-line.is-filled::after { transform: scaleX(1); }

.form-progress-label {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-muted);
  letter-spacing: -.005em;
  font-feature-settings: "tnum";
}

/* ---------- Step Container ---------- */
.form-step { display: none; }
.form-step.is-active {
  display: block;
  animation: stepIn .28s ease both;
}
@keyframes stepIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Disabled-State für Weiter-Button (nicht für Loading-Zustand) */
.btn:disabled:not(.is-loading) {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:not(.is-loading):hover {
  background: var(--c-accent);
  box-shadow: none;
}

/* Step-Error */
.step-error {
  margin-top: 10px;
  font-size: 13px;
  color: var(--c-emergency);
  font-weight: 500;
  text-align: center;
}

/* ---------- Selected-Service-Bar (Step 2) ---------- */
.selected-service-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--c-accent-tint);
  border: 1px solid var(--c-accent-soft);
  border-radius: var(--r-md);
  margin-bottom: 16px;
}
.selected-service-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.selected-service-mini-label {
  font-size: 10.5px;
  color: var(--c-text-muted);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.selected-service-bar strong {
  font-size: 14.5px;
  color: var(--c-text);
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-accent);
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
@media (hover: hover) {
  .link-back:hover { background: rgba(31, 58, 46, .08); color: var(--c-accent-hover); }
}
.link-back svg { stroke-width: 2.2; }

/* Service-Pills */
.service-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 11px;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  font-family: var(--f-body);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  min-height: 36px;
}

@media (hover: hover) {
  .pill:hover { border-color: var(--c-accent); color: var(--c-accent); }
}
.pill:active { transform: scale(.97); }

@media (max-width: 720px) {
  .pill { min-height: 40px; padding: 9px 14px 9px 11px; font-size: 14px; }
}

.pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--c-accent);
}
.pill-icon svg { width: 16px; height: 16px; }

.pill-check {
  display: none;
  margin-left: 2px;
  color: #fff;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-accent);
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.pill.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.pill.is-active .pill-icon { color: #fff; }
.pill.is-active .pill-check { display: inline-flex; background: rgba(255,255,255,.2); }

/* Form Grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.field-full { grid-column: 1 / -1; }

@media (max-width: 520px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; }
.field-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-text-muted);
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: -.005em;
}
.req      { color: var(--c-accent); }
.optional { color: var(--c-text-soft); font-weight: 500; font-size: 11.5px; }

.field input,
.field textarea {
  width: 100%;
  padding: 10px 13px;
  font-size: 14.5px;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* iOS zoom-fix: Input-Schrift muss ≥16px sein, sonst zoomt Safari beim Fokus */
@media (max-width: 720px) {
  .field input,
  .field textarea {
    font-size: 16px;
    padding: 12px 14px;
  }
}
.field input:hover,
.field textarea:hover { border-color: var(--c-border-strong); }

.field input:focus,
.field textarea:focus {
  outline: 0;
  background: var(--c-card);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.field textarea { resize: vertical; min-height: 64px; }

.field-error {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  color: var(--c-emergency);
  font-weight: 500;
}
.field.has-error .field-error { display: block; }
.field.has-error input,
.field.has-error textarea { border-color: var(--c-emergency); background: #FFF8F6; }

/* Checkbox */
.checkbox {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12.5px;
  color: var(--c-text-muted);
  line-height: 1.45;
  margin-bottom: 14px;
  cursor: pointer;
}
.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checkbox-mark {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: 6px;
  background: var(--c-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
  flex-shrink: 0;
  margin-top: 1px;
}
.checkbox input:checked + .checkbox-mark {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.checkbox input:checked + .checkbox-mark::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.checkbox a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }

.checkbox.has-error .checkbox-mark { border-color: var(--c-emergency); }
.checkbox.has-error .field-error {
  display: block;
  grid-column: 1 / -1;
  margin-top: 0;
}

/* Mikro-Trust unter CTA */
.micro-trust {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  color: var(--c-text-muted);
  font-weight: 500;
}
.micro-trust li::before {
  content: none;
}

/* Erfolgs-State */
.form-success {
  text-align: center;
  padding: 16px 8px 8px;
}
.success-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.success-circle svg { width: 32px; height: 32px; }
.form-success h3 { margin-bottom: 10px; font-size: 22px; }
.form-success p { color: var(--c-text-muted); margin-bottom: 22px; }
.form-success .btn { margin-top: 4px; }

/* ---------- Social Proof / Google ---------- */
.social-proof {
  background: var(--c-card);
  padding: 36px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.social-proof-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.google-block {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.google-logo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.02em;
}
.google-stars { display: inline-flex; gap: 2px; }
.google-stars svg { width: 17px; height: 17px; fill: #F5B700; }
.google-text { font-size: 14px; color: var(--c-text-muted); }
.google-text strong { color: var(--c-text); font-family: var(--f-display); }

.proof-points {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 14px;
  font-weight: 500;
}
.proof-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rating-stars { display: inline-flex; gap: 2px; }
.rating-stars svg { width: 18px; height: 18px; fill: #F5B700; }
.rating-stars-sm svg { width: 14px; height: 14px; }

/* ---------- Leistungen ---------- */
.leistungen { padding: var(--section-py) 0; }

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.service-tags li a {
  display: inline-flex;
  padding: 12px 20px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
  transition: all .2s ease;
}
@media (hover: hover) {
  .service-tags li a:hover {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
    transform: translateY(-1px);
    box-shadow: var(--sh-sm);
  }
}
.service-tags li a:active {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

/* ---------- Gallery ---------- */
.gallery {
  padding: var(--section-py) 0;
  background: var(--c-bg-alt);
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 220px;
  gap: 16px;
  margin-top: 48px;
}

@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px;
  }
}

@media (min-width: 980px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
    gap: 20px;
  }
  .gallery-tall { grid-row: span 2; }
  .gallery-wide { grid-column: span 2; }
}

.gallery-item {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  background: var(--c-card);
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: zoom-in;
}
.gallery-item:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
@media (hover: hover) {
  .gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
  }
  .gallery-item:hover img { transform: scale(1.04); }
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 32, 26, .55) 0%, rgba(20, 32, 26, 0) 50%);
  pointer-events: none;
}

.gallery-item figcaption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 1;
  color: #fff;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.005em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 22, 18, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: lightboxFadeIn .2s ease;
}
.lightbox[hidden] { display: none; }

@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox-figure {
  margin: 0;
  max-width: min(1100px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  pointer-events: auto;
  animation: lightboxZoomIn .25s ease;
}
.lightbox-figure figcaption {
  color: rgba(255, 255, 255, .92);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  letter-spacing: -.005em;
  pointer-events: auto;
}

@keyframes lightboxZoomIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255, 255, 255, .22);
}
.lightbox-close:active,
.lightbox-nav:active { transform: scale(.94); }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev  { left: 18px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-prev:active { transform: translateY(-50%) scale(.94); }
.lightbox-next:active { transform: translateY(-50%) scale(.94); }

.lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  font-weight: 500;
  font-feature-settings: "tnum";
  letter-spacing: .02em;
}

@media (max-width: 640px) {
  .lightbox { padding: 12px; }
  .lightbox-prev { left: 8px; width: 42px; height: 42px; }
  .lightbox-next { right: 8px; width: 42px; height: 42px; }
  .lightbox-close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .lightbox-figure img { max-height: 70vh; }
}

body.has-lightbox-open { overflow: hidden; }

/* ---------- Notdienst ---------- */
.emergency {
  padding: 36px 0;
  background: var(--c-emergency-bg);
  border-top: 1px solid #F2DDD3;
  border-bottom: 1px solid #F2DDD3;
}

.emergency-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.emergency-text {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 400px;
}
.emergency-text h3 {
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}
.emergency-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-emergency);
  margin-bottom: 4px;
}

.pulse-dot {
  width: 14px;
  height: 14px;
  background: var(--c-emergency);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 1.6s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(184, 65, 44, .55);
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184, 65, 44, .55); }
  70%  { box-shadow: 0 0 0 12px rgba(184, 65, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 65, 44, 0); }
}

/* ---------- Testimonials ---------- */
.testimonials {
  padding: var(--section-py) 0;
  background: var(--c-bg-alt);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 48px;
}
@media (min-width: 720px)  { .testimonial-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card {
  background: var(--c-card);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .testimonial-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
  }
}

.testimonial-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-accent);
  background: var(--c-accent-soft);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

.testimonial-quote {
  font-size: 15.5px;
  color: var(--c-text);
  line-height: 1.55;
  flex-grow: 1;
}

.testimonial-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
.testimonial-foot strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14.5px;
}
.testimonial-foot span {
  font-size: 13px;
  color: var(--c-text-muted);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-accent);
  flex-shrink: 0;
}

/* ---------- Mid CTA ---------- */
.cta-mid {
  padding: var(--section-py) 0;
  text-align: center;
}
.cta-mid-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.cta-mid h2 { font-size: clamp(28px, 3.4vw, 40px); }
.cta-micro {
  font-size: 13px;
  color: var(--c-text-muted);
  font-weight: 500;
}

/* ---------- Warum ---------- */
.warum {
  padding: var(--section-py) 0;
  background: var(--c-card);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.usp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 56px;
}
@media (min-width: 820px) { .usp-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.usp-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .usp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
  }
}

.usp-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--c-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.usp-icon svg { width: 28px; height: 28px; }

.usp-card h3 { font-size: 22px; }
.usp-card p { color: var(--c-text-muted); line-height: 1.6; }

.warum-cta {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

/* ---------- Versprechen ---------- */
.versprechen {
  padding: var(--section-py) 0;
  background: var(--c-bg-alt);
  position: relative;
  overflow: hidden;
}

.versprechen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 920px) {
  .versprechen-grid { grid-template-columns: 1fr 1.3fr; gap: 80px; }
}

.versprechen-photo {
  position: relative;
  max-width: 420px;
  width: 100%;
}

.photo-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  background: var(--c-sand-soft);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signature-card {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-card);
  padding: 14px 24px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  border: 1px solid var(--c-border);
  text-align: center;
  white-space: nowrap;
  max-width: calc(100% + 32px);
}

@media (max-width: 540px) {
  .signature-card {
    white-space: normal;
    padding: 12px 18px;
    max-width: calc(100% - 16px);
  }
  .signature-name { font-size: 15px; }
  .signature-role { font-size: 11.5px; }
}
.signature-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
}
.signature-role {
  font-size: 12px;
  color: var(--c-text-muted);
  margin-top: 2px;
}

.versprechen-quote {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-text);
  letter-spacing: -.015em;
  margin: 16px 0 24px;
}

.versprechen-attribution {
  font-size: 14px;
  color: var(--c-text-muted);
  font-weight: 500;
  margin-bottom: 32px;
}

/* ---------- FAQ ---------- */
.faq { padding: var(--section-py) 0; }

.faq-inner {
  max-width: 820px;
  margin: 0 auto;
}

.accordion {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accordion-item {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.accordion-item[open] {
  border-color: var(--c-accent);
  box-shadow: var(--sh-sm);
}

.accordion-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--c-text);
  -webkit-tap-highlight-color: transparent;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::marker                 { content: ""; }

.acc-chevron {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--c-accent);
  transition: transform .25s ease;
}
.accordion-item[open] .acc-chevron { transform: rotate(180deg); }

.accordion-body {
  padding: 0 24px 22px;
  color: var(--c-text-muted);
  font-size: 15.5px;
  line-height: 1.65;
}
.accordion-body p { margin-bottom: 8px; }
.accordion-body a { color: var(--c-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Final CTA ---------- */
.final-cta {
  padding: var(--section-py) 0;
  background: var(--c-accent);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.08), transparent 60%),
              radial-gradient(circle at 20% 80%, rgba(255,255,255,.04), transparent 50%);
  pointer-events: none;
}
.final-cta > .container { position: relative; }

.final-cta .section-eyebrow { color: var(--c-sand); }
.final-cta h2,
.final-cta h3 { color: #fff; }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 56px;
}
@media (min-width: 820px) { .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.step-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-xl);
  padding: 32px;
  backdrop-filter: blur(8px);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--c-accent);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.03em;
  margin-bottom: 16px;
}

.step-card h3 { margin-bottom: 8px; font-size: 20px; }
.step-card p  { color: rgba(255,255,255,.78); font-size: 15.5px; line-height: 1.55; }

.final-cta-inner {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.final-cta .btn-primary {
  background: #FFFFFF;
  color: var(--c-accent);
  box-shadow: 0 6px 24px -6px rgba(0,0,0,.25);
}
.final-cta .btn-primary:hover { background: #EAF1EA; }
.final-cta .cta-micro { color: rgba(255,255,255,.7); }

/* ---------- Footer ---------- */
.site-footer {
  padding: 64px 0 100px;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
}
@media (min-width: 720px) { .site-footer { padding-bottom: 32px; } }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 48px;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
}

.logo-footer { color: var(--c-accent); margin-bottom: 12px; }
.footer-claim { font-size: 14px; color: var(--c-text-muted); max-width: 320px; line-height: 1.55; }

.site-footer h4 { margin-bottom: 12px; }
.site-footer p { font-size: 14px; color: var(--c-text-muted); line-height: 1.7; }
.site-footer p a { color: var(--c-text); font-weight: 500; }
.site-footer p a:hover { color: var(--c-accent); }

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.footer-links a { color: var(--c-text-muted); }
.footer-links a:hover { color: var(--c-accent); }

.not-google {
  font-size: 12px;
  color: var(--c-text-soft);
  border-top: 1px solid var(--c-border);
  padding-top: 24px;
  margin-bottom: 12px;
  line-height: 1.55;
}
.copyright { font-size: 12px; color: var(--c-text-soft); }

/* ---------- Mobile Sticky Bar ---------- */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--c-card);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -8px 24px rgba(20, 32, 26, .08);
  gap: 10px;
}

.mobile-bar-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: var(--r-md);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}
.mobile-bar-btn-call {
  background: var(--c-card);
  color: var(--c-accent);
  border: 1.5px solid var(--c-accent);
}
.mobile-bar-btn-cta {
  background: var(--c-accent);
  color: #fff;
}

@media (max-width: 720px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .header-phone-text { display: none; }
  .header-phone { padding: 10px; min-width: 44px; min-height: 44px; }
}

/* ---------- Reduce Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .pulse-dot { animation: none; }
}

/* ---------- Danke-Page ---------- */
.danke-hero {
  padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 56px);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--c-bg);
  background-image:
    radial-gradient(ellipse 700px 500px at 88% 8%, rgba(31, 58, 46, .07), transparent 60%),
    radial-gradient(ellipse 600px 500px at 5% 95%, rgba(233, 223, 201, .35), transparent 55%);
}

.danke-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.danke-hero .hero-eyebrow { margin-bottom: 16px; }

/* Sanftes Fade-Up für Danke-Hero */
.danke-hero-inner > * {
  animation: hero-fade-up .65s cubic-bezier(.2, .7, .2, 1) backwards;
}
.danke-hero-inner > *:nth-child(1) { animation-delay: .05s; }
.danke-hero-inner > *:nth-child(2) { animation-delay: .12s; }
.danke-hero-inner > *:nth-child(3) { animation-delay: .19s; }
.danke-hero-inner > *:nth-child(4) { animation-delay: .26s; }

.danke-headline {
  font-size: clamp(40px, 5.4vw, 68px);
  letter-spacing: -.038em;
  line-height: 1.04;
  font-weight: 700;
  margin-bottom: 18px;
  text-wrap: balance;
  color: var(--c-text);
}

.danke-sub {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--c-text-muted);
  max-width: 540px;
  margin-bottom: 32px;
  line-height: 1.45;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.danke-sub strong { color: var(--c-text); font-weight: 600; }

/* Next-Steps-Section (heller Hintergrund mit hellen Karten) */
.danke-steps {
  padding: var(--section-py) 0;
  background: var(--c-card);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* Light-Variant der step-grid — überschreibt die dunklen final-cta Styles */
.steps-grid-light {
  margin-top: 48px;
}
.steps-grid-light .step-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  backdrop-filter: none;
}
.steps-grid-light .step-card h3 { color: var(--c-text); }
.steps-grid-light .step-card p {
  color: var(--c-text-muted);
  font-size: 15.5px;
  line-height: 1.55;
}

/* Signatur-Sektion */
.danke-signature {
  padding: clamp(48px, 8vw, 80px) 0;
  text-align: center;
}
.danke-signature-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}
.danke-signature-text {
  font-size: 18px;
  color: var(--c-text-muted);
  line-height: 1.45;
}
.danke-signature-text strong {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-text);
  font-size: 19px;
  letter-spacing: -.018em;
  display: inline-block;
  margin-top: 4px;
}

.danke-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-muted);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  transition: background .2s, border-color .2s, color .2s;
}
@media (hover: hover) {
  .danke-back:hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-accent-tint);
  }
}

/* Mobile-Bar mit nur einem Button (nur Anrufen auf Danke-Page) */
.mobile-bar-single .mobile-bar-btn { flex: 1 1 auto; }

/* ---------- Hidden but accessible ---------- */
[hidden] { display: none !important; }

/* Bewertungen: eine echte Stimme plus Auszeichnungen */

    .testimonial-grid-single{grid-template-columns:1.4fr 1fr;align-items:stretch}
    @media(max-width:860px){.testimonial-grid-single{grid-template-columns:1fr}}
    .auszeichnungen{display:flex;flex-direction:column;gap:14px;justify-content:center}
    .auszeichnungen figure{margin:0;display:flex;align-items:center;gap:14px;
      background:#fff;border:1px solid var(--line,#E4DECF);border-radius:14px;padding:12px 14px}
    .auszeichnungen img{width:78px;height:auto;border-radius:8px;flex:none}
    .auszeichnungen figcaption{font-size:14px;font-weight:600;line-height:1.35}
    .quellenhinweis{margin:26px 0 0;max-width:62ch;font-size:13px;line-height:1.55;
      color:var(--ink-muted,#5A5A5A)}

/* Versprechen ohne Inhaberfoto */

    .versprechen-solo{max-width:62ch;margin:0 auto;text-align:center}
    .versprechen-solo .btn{margin-top:6px}
    .versprechen-fakten{list-style:none;margin:26px 0 30px;padding:0;
      display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;
      font-size:15.5px;color:var(--ink-muted,#5A5A5A)}
    .versprechen-fakten strong{color:var(--ink,#1A1A1A)}




/* ═══════════════════════════════════════════════════════════════════════
   HERO-UEBERARBEITUNG 09/2026

   Nur der Hero ist neu: dunkles Foto, Glasformular, Anrufweg.
   Der Rumpf der Seite behaelt bewusst die urspruengliche Gestaltung
   (Mo'sgruen-Formensprache: Creme, weiche Radien, Sandraender,
   Vollton-Akzent im Schluss-CTA).

   Ausserdem enthalten: Behebungen, die keine Stilfragen waren —
   Kontraste bei Hover und Fokus, Tippgroessen, sichtbarer Fokusring.
   Die Begruendung steht jeweils am Block.
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════ 7. HERO ═══════════════════════════════════════════════
   Dunkles Foto mit Glasformular. Die Tokens werden hier ein zweites Mal
   umdefiniert — ab .hero rechnet jede geerbte Regel mit hellem Text auf
   dunklem Grund. --c-accent bleibt stehen und traegt die Marke.

   Einbau am Hero-Tag:
     style="--hero-bild:url('public/hero.jpg'); --hero-ton:#14201A"
   ═════════════════════════════════════════════════════════════════════ */

.hero {
  --hero-ton: #131a17;
  --hero-bild: none;

  --c-text:          #ffffff;
  --c-text-muted:    rgb(255 255 255 / 82%);
  --c-text-soft:     rgb(255 255 255 / 62%);
  --c-border:        rgb(255 255 255 / 20%);
  --c-border-strong: rgb(255 255 255 / 38%);
  --c-card:          rgb(255 255 255 / 10%);
  --c-bg:            rgb(255 255 255 / 8%);
  --c-bg-alt:        rgb(255 255 255 / 12%);

  position: relative;
  isolation: isolate;
  background-color: var(--hero-ton);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--hero-ton) 78%, transparent) 0%,
      color-mix(in srgb, var(--hero-ton) 64%, transparent) 42%,
      color-mix(in srgb, var(--hero-ton) 88%, transparent) 100%
    ),
    var(--hero-bild);
  background-size: cover, cover;
  background-position: center, 62% center;
  background-repeat: no-repeat, no-repeat;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .hero {
    background-image:
      linear-gradient(180deg, rgb(0 0 0 / 62%), rgb(0 0 0 / 48%) 42%, rgb(0 0 0 / 82%)),
      var(--hero-bild);
  }
}

@media (min-width: 900px) {
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--hero-ton) 72%, transparent) 0%,
      color-mix(in srgb, var(--hero-ton) 34%, transparent) 52%,
      transparent 100%
    );
  }
}

.hero .container,
.hero-grid { position: relative; z-index: 1; }

.hero-headline,
.hero-sub,
.hero-eyebrow,
.hero-stat-num,
.hero-stat-label {
  text-shadow: 0 1px 14px rgb(0 0 0 / 35%);
}

.hero-headline-soft { color: rgb(255 255 255 / 76%); }


/* ── Formularkarte als Glasflaeche ── */

.form-card {
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 14px;
  box-shadow:
    0 8px 40px -12px rgb(0 0 0 / 60%),
    inset 0 0 0 1px rgb(255 255 255 / 10%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .form-card { background: color-mix(in srgb, var(--hero-ton) 82%, transparent); }
}

.form-card-head h2,
.form-card-head h3 { color: #fff; }
.form-sub,
.form-progress-label { color: rgb(255 255 255 / 70%); }

.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form input[type="email"],
.lead-form textarea,
.lead-form select {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 25%);
  color: #fff;
  font-size: 16px;          /* darunter zoomt iOS Safari beim Fokus hinein */
}

.lead-form input::placeholder,
.lead-form textarea::placeholder { color: rgb(255 255 255 / 45%); }

.lead-form input:focus,
.lead-form textarea:focus,
.lead-form select:focus {
  background: rgb(255 255 255 / 15%);
  border-color: rgb(255 255 255 / 60%);
  box-shadow: 0 0 0 3px rgb(255 255 255 / 18%);
  outline: none;
}

.field-label,
.checkbox-label { color: rgb(255 255 255 / 88%); }
.field-label .optional { color: rgb(255 255 255 / 52%); }

.lead-form input:-webkit-autofill,
.lead-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--hero-ton) 85%, transparent) inset;
  caret-color: #fff;
}

.pill {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 20%);
  color: rgb(255 255 255 / 92%);
}

.pill:hover {
  background: rgb(255 255 255 / 15%);
  border-color: rgb(255 255 255 / 45%);
}

.pill.is-active,
.pill[aria-pressed="true"] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

.pill-icon { opacity: .85; }

.step-dot {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 35%);
  color: rgb(255 255 255 / 70%);
}

.step-dot.is-active,
.step-dot.is-done {
  background: #fff;
  border-color: #fff;
  color: var(--hero-ton);
}

.step-line { background: rgb(255 255 255 / 25%); }

.micro-trust,
.micro-trust li { color: rgb(255 255 255 / 72%); }

.selected-service-bar {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 18%);
}

.selected-service-mini-label { color: rgb(255 255 255 / 62%); }

.checkbox-mark {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 35%);
}

.link-back { color: rgb(255 255 255 / 78%); }
.link-back:hover { color: #fff; }

.step-error,
.field-error { color: #ffb4ab; }

.form-success h3 { color: #fff; }
.form-success p { color: rgb(255 255 255 / 78%); }

.hero .btn-secondary {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 30%);
  color: #fff;
}

.hero .btn-secondary:hover { background: rgb(255 255 255 / 18%); }

@media (max-width: 899px) {
  .hero {
    background-position: center, 58% center;
    background-image:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--hero-ton) 72%, transparent) 0%,
        color-mix(in srgb, var(--hero-ton) 80%, transparent) 55%,
        color-mix(in srgb, var(--hero-ton) 92%, transparent) 100%
      ),
      var(--hero-bild);
  }

  .form-card {
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   8. FEINSCHLIFF NACH SICHTPRUEFUNG
   Erst mit gerenderten Screenshots beider Seiten nebeneinander sichtbar
   geworden. Sechs Punkte, an denen die Kundenseite noch deutlich anders
   aussah als morgentau-garten.de/baumpflege.
   ═══════════════════════════════════════════════════════════════════════ */

/* (1) Das Foto war viel zu hell. Auf der Vorlageseite ist es fast
       vollstaendig zugedeckt — es traegt nur noch Stimmung, keine Motive. */
.hero {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--hero-ton) 92%, transparent) 0%,
      color-mix(in srgb, var(--hero-ton) 87%, transparent) 45%,
      color-mix(in srgb, var(--hero-ton) 97%, transparent) 100%
    ),
    var(--hero-bild);
}

@media (max-width: 899px) {
  .hero {
    background-image:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--hero-ton) 90%, transparent) 0%,
        color-mix(in srgb, var(--hero-ton) 93%, transparent) 55%,
        color-mix(in srgb, var(--hero-ton) 98%, transparent) 100%
      ),
      var(--hero-bild);
  }
}

/* (2) Der groesste Einzelunterschied: Die Vorlage hat ein zweispaltiges
       Raster grosser Kacheln mit Icon oben und Beschriftung darunter.
       Die Kundenvorlage hatte eine Zeile kleiner Pillen. */
.service-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  min-height: 72px;
  padding: 14px;
  border-radius: 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
}

.pill-icon {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: .8;
}

.pill-check { display: none; }

/* (3) Eyebrow der Vorlage: kleine Versalzeile mit weiter Laufweite,
       ohne Punkt davor. */
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 11px;
  font-weight: 700;
  color: rgb(255 255 255 / 72%);
}

.hero-eyebrow .eyebrow-dot { display: none; }

/* (4) Die Schlagzeile war zu leicht und zu weit gelaufen. */
.hero-headline {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1.03;
}


/* (6) Der gruene Knopf im Glasformular ging auf dem dunklen Grund unter.
       Die Vorlage setzt hier Weiss auf Dunkel — hoher Kontrast an der
       wichtigsten Stelle der Seite. */
.hero .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--hero-ton);
  font-weight: 700;
}

.hero .btn-primary:hover {
  background: rgb(255 255 255 / 90%);
  border-color: rgb(255 255 255 / 90%);
}

/* Die Kachel-Icons sind nur 16 px und dünn gezeichnet — bei .8 Deckkraft
   verschwinden sie auf der Glasfläche fast. */
.pill-icon { opacity: 1; }


/* ── Formular: gewählter Zustand sichtbar machen ────────────────────────
   Gemessen: Das Markengrün #3A6B38 hob sich nur mit 1,65:1 von einer
   ungewählten Kachel ab — auf dem dunklen Glasgrund praktisch unsichtbar.
   Der Rand lag bei 1,88:1, nötig sind 3:1 für Bedienelemente.

   Lösung wie beim Primärknopf und beim aktiven Schrittpunkt: Weiß auf
   Dunkel. Dazu ein Häkchen, damit der Zustand nicht allein an der Farbe
   hängt — wichtig für alle, die Farben schlecht unterscheiden. */

.hero .pill {
  border-color: rgb(255 255 255 / 38%);
}

.hero .pill:hover {
  border-color: rgb(255 255 255 / 65%);
  background: rgb(255 255 255 / 14%);
}

.hero .pill.is-active,
.hero .pill[aria-pressed="true"] {
  background: #fff;
  border-color: #fff;
  color: var(--hero-ton);
  font-weight: 700;
  box-shadow: 0 2px 14px -4px rgb(0 0 0 / 45%);
}

.hero .pill.is-active .pill-icon,
.hero .pill[aria-pressed="true"] .pill-icon {
  color: var(--c-accent);
  opacity: 1;
}

/* Das Häkchen der Vorlage hatte ich ausgeblendet — im gewählten Zustand
   gehört es zurück, als zweites Merkmal neben der Farbe. */
.hero .pill.is-active .pill-check,
.hero .pill[aria-pressed="true"] .pill-check {
  display: inline-flex;
  color: var(--c-accent);
  margin-left: auto;
}


/* ── Icons und deaktivierter Knopf ──────────────────────────────────────
   Gemessen: Die Kachel-Icons standen in #3A6B38 auf dem dunklen Glas —
   1,65:1, also unsichtbar. Das Markengrün trägt nur auf hellem Grund.
   Auf der dunklen Kachel also Weiß, und erst auf der gewählten (weissen)
   Kachel wieder Grün. */

.hero .pill .pill-icon,
.hero .pill .pill-icon svg {
  color: rgb(255 255 255 / 92%);
  stroke: currentColor;
  stroke-width: 1.8px;
  opacity: 1;
}

.hero .pill.is-active .pill-icon,
.hero .pill.is-active .pill-icon svg,
.hero .pill[aria-pressed="true"] .pill-icon,
.hero .pill[aria-pressed="true"] .pill-icon svg {
  color: var(--c-accent);
  stroke: var(--c-accent);
}

/* Der deaktivierte Knopf lag bei 45 % Deckkraft. Man sieht ihn als
   Erstes, noch bevor eine Leistung gewählt ist — so verwaschen wirkt er
   defekt statt wartend. Jetzt als klar lesbarer Umriss: sichtbar, aber
   erkennbar noch nicht auslösbar. */
.hero .btn-primary:disabled,
.hero .btn-primary[disabled],
.hero #nextBtn:disabled {
  opacity: 1;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 45%);
  color: rgb(255 255 255 / 80%);
  box-shadow: none;
  cursor: not-allowed;
}

/* Sobald gewählt wurde, wird daraus der volle weisse Knopf. */
.hero .btn-primary:not(:disabled) {
  background: #fff;
  border-color: #fff;
  color: var(--hero-ton);
}


/* ── Logo im Kopf vergrößern ────────────────────────────────────────────
   Das Logo stand auf 32 px (mobil) bzw. 38 px (Desktop), bei einer
   Kopfhöhe von 80–83 px. Es ist ein gestapeltes Logo — Baum über
   zweizeiligem Schriftzug — da ist der Text bei 38 px kaum lesbar.

   Die Höhen sind am 22.09. nachgezogen worden: logo.png war ein
   Paletten-PNG ohne Alphakanal, der weiße Hintergrund war fest
   eingebrannt und stand als hellerer Kasten auf dem Creme des Kopfes
   (#FFFFFF gegen #FAF8F4). Die Datei ist jetzt freigestellt und auf den
   Inhalt beschnitten — dabei fielen 30 % Leerraum weg (240×180 → 211×126).
   Damit das Logo trotzdem gleich groß bleibt, sind alle Höhen mit
   Faktor 0,7 nachgerechnet: 44→31, 58→41, 48→34. */

.site-header .logo-img {
  height: 31px;
  width: auto;
}

@media (min-width: 900px) {
  .site-header .logo-img {
    height: 41px;
  }
}

/* Im Fuß entsprechend mitziehen, damit die Marke dort nicht verschwindet. */
.logo-footer .logo-img {
  height: 34px;
  width: auto;
}


/* ── Hover und Fokus der Leistungskacheln ───────────────────────────────
   Gemessen: Beim Überfahren färbt die Vorlage den Kacheltext in die
   Markenfarbe #3A6B38. Auf der hellen Kundenvorlage war das richtig —
   im dunklen Glas-Hero ergibt es 1,13:1 und der Text verschwindet.
   Dasselbe galt für den Fokus, also auch bei Tastaturbedienung.

   Regel für diesen Hero: Solange die Kachel nicht gewählt ist, bleibt
   der Text weiß. Dunkles Grün erst auf der gewählten, weißen Kachel. */

.hero .pill:hover,
.hero .pill:focus,
.hero .pill:focus-visible,
.hero .pill:active {
  color: #fff;
}

.hero .pill:hover .pill-icon,
.hero .pill:hover .pill-icon svg,
.hero .pill:focus .pill-icon,
.hero .pill:focus .pill-icon svg {
  color: #fff;
  stroke: #fff;
}

/* Die gewählte Kachel behält Vorrang — sie ist weiß, dort trägt Grün. */
.hero .pill.is-active,
.hero .pill.is-active:hover,
.hero .pill.is-active:focus,
.hero .pill[aria-pressed="true"]:hover,
.hero .pill[aria-pressed="true"]:focus {
  color: var(--hero-ton);
}

.hero .pill.is-active:hover .pill-icon,
.hero .pill.is-active:hover .pill-icon svg,
.hero .pill.is-active:focus .pill-icon,
.hero .pill.is-active:focus .pill-icon svg {
  color: var(--c-accent);
  stroke: var(--c-accent);
}

/* Sichtbarer Fokusring für Tastaturbedienung — vorher gab es nur den
   Farbwechsel, der nach obigem Befund ohnehin nicht zu sehen war. */
.hero .pill:focus-visible,
.hero .btn:focus-visible,
.hero .lead-form input:focus-visible,
.hero .lead-form textarea:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}


/* ── Tippziele im Fuß ───────────────────────────────────────────────────
   Gemessen: Telefonnummer, E-Mail und die drei Rechtslinks waren nur
   18 px hoch. Empfohlen sind 44 px; bei Telefon und E-Mail ist das kein
   Formalismus, sondern ein Conversion-Element auf dem Handy.
   Über padding vergrößert, mit negativem margin ausgeglichen, damit die
   Abstände im Fuß gleich bleiben. */

.site-footer a,
footer a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -8px;
}

/* Telefon und E-Mail stehen zwar in einem <p>, aber jeweils allein in
   ihrer Zeile — sie bekommen die volle Trefferfläche. */
.site-footer a[href^="tel:"],
.site-footer a[href^="mailto:"],
footer a[href^="tel:"],
footer a[href^="mailto:"] {
  display: inline-block;
  padding-block: 12px;
  margin-block: -8px;
}

/* Nur im echten Fließtext (Hinweis, Copyright) inline lassen, sonst
   reißt der Zeilenfluss auf. */
.site-footer .footer-note a,
.site-footer .footer-claim a,
.site-footer .hinweis a,
footer small a {
  display: inline;
  padding-block: 0;
  margin-block: 0;
}

/* Kurze Beschriftungen wie "AGB" sind sonst nur 27 px breit. */
.site-footer .footer-links a,
footer .footer-links a {
  padding-inline: 4px;
  margin-inline: -4px;
  min-width: 44px;
}



/* ── Anrufweg im Hero ───────────────────────────────────────────────────
   Telefonleads schliessen laut Branchenzahlen mit 46 % ab — deutlich
   besser als jede andere Quelle. Trotzdem gab es im ersten Bildschirm
   keinen sichtbaren Anrufweg: Der vorhandene Knopf steckte in der
   versteckten Erfolgsansicht des Formulars und rendert 0x0.

   Bewusst als Umriss, nicht als Vollflaeche: Das Formular bleibt der
   Hauptweg, der Anruf ist die gleichwertige Alternative daneben. */

.hero-anruf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 26px 0 4px;
}

.hero-anruf-btn {
  display: inline-flex;
  align-items: center;
  /* Icon und Nummer standen mit 9 px zu dicht beieinander, waehrend
     links und rechts 23 px Luft waren — die Gruppe klebte dadurch am
     linken Rand. Gleichmaessigere Verhaeltnisse: mehr Abstand zwischen
     Icon und Zahl, etwas mehr Innenabstand ringsum. */
  gap: 13px;
  padding: 15px 26px;
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 45%);
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}

.hero-anruf-btn svg {
  flex: none;
  opacity: .9;
}

.hero-anruf-btn:hover,
.hero-anruf-btn:focus-visible {
  background: rgb(255 255 255 / 20%);
  border-color: rgb(255 255 255 / 75%);
  color: #fff;
}

.hero-anruf-text {
  font-size: .86rem;
  color: rgb(255 255 255 / 72%);
}

@media (max-width: 899px) {
  .hero-anruf { margin: 22px 0 2px; }
  .hero-anruf-btn {
    flex: 1 1 auto;
    justify-content: center;
    font-size: 1.1rem;
    padding: 15px 20px;
  }
  .hero-anruf-text { flex-basis: 100%; }
}

/* ── Leistungskacheln: schlichter ────────────────────────────────────────
   Die Kacheln trugen je ein kleines Icon oben links, darunter die
   Beschriftung. Das kostete zwei Zeilen und 74 px Hoehe pro Kachel,
   ohne etwas zu erklaeren: Die Zeichen waren bei 18 px kaum lesbar und
   inhaltlich beliebig — eine Uhr fuer Pflasterreinigung, ein Fragezeichen
   fuer "Andere Leistung". Wer die Wahl trifft, liest das Wort, nicht das
   Piktogramm.

   Jetzt eine Zeile, groessere Schrift, weniger Hoehe. Das Markup bleibt
   unveraendert — wer Icons will, nimmt die eine Zeile unten wieder raus. */

/* Die Icons sind wieder da — aber in der Zeile statt darueber.
   Vorher standen sie mit 18 px allein ueber der Beschriftung: zwei
   Zeilen, 74 px Kachelhoehe, und bei der Groesse las sich der Tropfen
   wie eine Uhr. Jetzt links neben dem Wort, 20 px, voller Kontrast. */
.hero .pill .pill-icon {
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 11px;
  color: rgb(255 255 255 / 92%);
}

.hero .pill .pill-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.7;
}

.hero .service-pills {
  gap: 8px;
}

.hero .pill {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding: 15px 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* Das Haekchen der gewaehlten Kachel rutscht ans Ende der Zeile. */
.hero .pill.is-active .pill-check,
.hero .pill[aria-pressed="true"] .pill-check {
  margin-left: auto;
  font-size: 15px;
}

/* ── Anrufweg: mehr Luft ─────────────────────────────────────────────────
   Der Knopf sass zwischen Einleitung und Kennzahlenleiste eingeklemmt,
   auf gleicher Hoehe wie die Kacheln daneben. Mehr Abstand nach oben und
   unten loest ihn aus dem Gedraenge. */

.hero-anruf {
  margin: 34px 0 30px;
}

@media (max-width: 899px) {
  .hero-anruf { margin: 26px 0 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RUMPF AN DEN HERO ANGLEICHEN

   Die Creme- und Sandtöne stammen aus der ursprünglichen Vorlage und
   haben mit dem Hero nichts zu tun. Die neue Palette leitet sich
   ausschließlich aus zwei Werten ab, die im Hero schon gesetzt sind:

       --c-accent  #3A6B38   das Markengrün
       --hero-ton  #14201A   der dunkle Grund

   Daraus: ein sehr leicht grünstichiges Weiß als Grundfläche, eine
   hellgrüne Wechselfläche, grünstichige Ränder. Kein neuer Farbton,
   nur Abstufungen der beiden vorhandenen.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Flächen: Beige raus, kühles Grün-Neutral rein */
  --c-bg:            #ffffff;
  --c-bg-alt:        #f3f6f3;
  --c-card:          #ffffff;

  /* Ränder mit demselben Grünstich statt Sandbeige */
  --c-border:        #dde5dd;
  --c-border-strong: #c4d1c5;

  /* Text: der dunkle Hero-Ton führt, die Abstufungen ziehen mit */
  --c-text:          #14201a;
  --c-text-muted:    #4c5c50;
  --c-text-soft:     #74836f;

  /* Die Sandtöne der Vorlage auf Grün umstellen */
  --c-sand:          #e4ece4;
  --c-sand-soft:     #f3f6f3;
  --c-accent-soft:   #e0ebe0;
  --c-accent-tint:   #f0f5f0;

  /* Radien näher an den Hero: dort 14 px an der Formularkarte,
     10 px an den Kacheln. 28 px wirkten daneben weich und unruhig. */
  --r-sm:  6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
}

/* Die Papierkörnung gehörte zur Cremewelt und hat auf Weiß nichts
   verloren — sie legt einen Gelbschleier über die ganze Seite. */
body::before,
.section-paper::before {
  opacity: 0;
}

/* Wechselflächen bekommen eine Haarlinie statt eines Farbsprungs.
   Das trennt ruhiger als zwei unterschiedlich getönte Flächen. */
.gallery,
.testimonials,
.versprechen {
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* ── Schluss-CTA auf den Hero-Ton ────────────────────────────────────────
   Vollton-Grün über die volle Breite ist laut. Der dunkle Hero-Ton
   schließt die Seite dort, wo sie angefangen hat — und der weiße Knopf
   darauf ist der stärkste Kontrast der ganzen Seite, genau an der
   Stelle, an der die Entscheidung fällt. */

.final-cta {
  background: var(--c-text);
}

.final-cta .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--c-text);
}

.final-cta .btn-primary:hover {
  background: rgb(255 255 255 / 90%);
  border-color: rgb(255 255 255 / 90%);
}

/* ── Icon-Chips ruhiger ──────────────────────────────────────────────────
   Vollton-Grün mit weißem Zeichen zieht mehr Aufmerksamkeit auf sich
   als die Überschrift daneben. Als getönte Fläche ordnet es sich unter. */

.usp-icon {
  background: var(--c-accent-soft);
  color: var(--c-accent);
  border-radius: var(--r-md);
}

.usp-icon svg {
  stroke: currentColor;
  color: var(--c-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   VERDICHTUNG

   Gemessen vor dieser Änderung: 7.175 px Seitenhöhe, davon
     Hero                                       12 %
     Galerie + Testimonials + Versprechen       34 %
     cta-mid                                   450 px für eine Zeile

   Drei Abschnitte hintereinander sagen dasselbe — "uns kann man
   vertrauen" — und der einzige Abschnitt, der tatsächlich Anfragen
   erzeugt, ist ein Achtel der Seite. Wer scrollt, verliert zwischen
   Galerie, Bewertungen und Versprechen den Faden.

   Kein Inhalt wird entfernt. Was sich ändert, ist die Dichte: kürzere
   Abstände, kompaktere Blöcke, engerer Rhythmus. Die Seite sagt dasselbe
   auf deutlich weniger Weg.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --section-py: clamp(52px, 5vw, 76px);
}

/* Überschriften rücken näher an ihren Inhalt — vorher stand zwischen
   Titel und erstem Element so viel Luft wie zwischen zwei Abschnitten. */
.section-headline { margin-bottom: 14px; }
.section-sub      { margin-bottom: 0; }

.gallery-grid,
.testimonial-grid,
.steps-grid,
.usp-grid,
.service-tags { margin-top: 32px; }

/* ── Galerie kompakter ───────────────────────────────────────────────── */
.gallery-grid { grid-auto-rows: 200px; gap: 12px; }

@media (min-width: 900px) {
  .gallery-grid { grid-auto-rows: 230px; }
}

/* ── Bewertungen: die Quellenzeile ist Kleingedrucktes ───────────────── */
.testimonial-card { padding: clamp(20px, 1.8vw, 24px); }
.quellenhinweis   { margin-top: 14px; }

/* ── Versprechen: war ein 700-px-Block für ein Zitat ─────────────────── */
.versprechen { padding-block: clamp(44px, 4vw, 60px); }
.versprechen-solo blockquote { margin-bottom: 18px; }
.versprechen-solo ul { margin: 0 0 18px; }

/* ── Mittlerer CTA: eine Zeile, ein Knopf, kein halber Bildschirm ────── */
.cta-mid { padding-block: clamp(44px, 4vw, 60px); }
.cta-mid-inner { gap: 20px; }

/* ── Schluss-CTA ─────────────────────────────────────────────────────── */
.final-cta { padding-block: clamp(56px, 5vw, 80px); }

/* ── FAQ: die Zeilen dürfen enger stehen ─────────────────────────────── */
.accordion { margin-top: 28px; }
.accordion-item + .accordion-item { margin-top: 8px; }

/* ── Karten: einheitlicher Innenabstand statt drei verschiedener ─────── */
.usp-card { padding: clamp(22px, 2vw, 26px); }

/* ── Mobil: Hero-Spalte darf schrumpfen ────────────────────────────────
   Die Grid-Kinder (.hero-text, .form-card) standen auf dem Standardwert
   min-width:auto. Dadurch erzwang der Anruf-Button eine Mindestbreite von
   417 px, obwohl auf einem 393-px-Geraet nur 345 px Platz sind: Headline,
   Fliesstext, Telefonnummer und Kennzahlen liefen rechts aus dem Bild —
   sichtbar abgeschnitten, weil .hero auf overflow:hidden steht.
   Geprueft auf 393 und 360 px. */
.hero-grid > * { min-width: 0; }
.hero-anruf { min-width: 0; }
.hero-anruf-btn { max-width: 100%; min-width: 0; }

/* ── Mobil: Leistungskacheln ───────────────────────────────────────────
   Dieselbe Ursache wie im Hero: min-width:auto liess die beiden Spalten
   nicht unter ihre laengste Beschriftung schrumpfen ("Pflasterreinigung"
   forderte 191 px, verfuegbar waren 303 px fuer zwei Spalten plus Lucke).
   Auf schmalen Geraeten daher eine Spalte — dann steht jede Leistung in
   einer Zeile statt "Pflaster, / Wege & / Einfahrten" ueber drei. */
.service-pills > * { min-width: 0; }
@media (max-width: 520px) {
  .service-pills { grid-template-columns: 1fr; }
}