/* ═══════════════════════════════════════════════════════════════
   Schädlingsbekämpfung Käfer — Freiburg
   Brand: Lime-Grün #10B981 (Logo) · Anthrazit (Arbeitskleidung) · clean white
   Engine: React + GSAP + Tailwind (CDN). Reveal via IntersectionObserver → .active
   ═══════════════════════════════════════════════════════════════ */

/* Lokale Fonts (selbst gehostet, DSGVO-konform, font-display:swap) */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 900;font-display:swap;src:url('fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  --accent: #10B981;          /* Marken-Lime aus dem Logo */
  --accent-rgb: 16, 185, 129;
  --accent-deep: #047857;     /* Hover / Grün auf Hell */
  --accent-ink: #064E3B;      /* Grüner Text auf hellem Grund (AA) */
  --accent-text: #FFFFFF;     /* Text auf grünen Buttons (dunkel = hoher Kontrast) */
  --brand: #10B981;
  --brand-text: #052e1f;

  --ink: #14171C;             /* Headlines */
  --body: #525A64;            /* Fließtext */
  --muted: #8A929C;           /* Captions */
  --border: rgba(20, 23, 28, 0.09);

  --bg: #FFFFFF;
  --bg-alt: #F1F7F3;          /* warm-grün getöntes Off-White */
  --bg-card: #FFFFFF;

  --dark: #15181D;            /* dunkle Sections — wie die Arbeitskleidung */
  --dark-2: #1D222A;
  --dark-card: rgba(255, 255, 255, 0.045);
  --dark-border: rgba(255, 255, 255, 0.10);

  --text: var(--ink);
}

/* ─── Base ─────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--ink);
}
::selection { background: rgba(var(--accent-rgb), 0.28); color: var(--ink); }
img { transition: opacity .4s ease; }

.font-heading { font-family: 'Archivo', system-ui, sans-serif; }
.font-body { font-family: 'Inter', system-ui, sans-serif; }

/* Anchor offset for fixed navbar */
section[id] { scroll-margin-top: 96px; }

/* ─── Buttons ──────────────────────────────────────────── */
.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease;
  box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), 0.55);
}
.btn-primary:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(var(--accent-rgb), 0.7);
}
.btn-dark {
  background: var(--dark);
  color: #fff;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease;
}
.btn-dark:hover { background: #000; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
.btn-ghost {
  background: #fff; color: var(--ink); border: 1px solid var(--border);
  transition: all .3s ease;
}
.btn-ghost:hover { border-color: rgba(var(--accent-rgb), .6); background: var(--bg-alt); transform: translateY(-2px); }

/* WhatsApp tint */
.btn-wa { background: #25D366; color: #0a2e16; font-weight: 700; transition: all .3s ease; }
.btn-wa:hover { background: #1eb858; transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(37,211,102,.6); }

/* ─── CTA pulse ────────────────────────────────────────── */
@keyframes pulse-cta {
  0%   { box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), .55), 0 0 0 0 rgba(var(--accent-rgb), .45); }
  70%  { box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), .55), 0 0 0 16px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), .55), 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
.cta-pulse { animation: pulse-cta 3s infinite; }
.cta-pulse:hover { animation: none; }

/* ─── Ambient animations ───────────────────────────────── */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.animate-float { animation: float 5s ease-in-out infinite; }
.animate-float-slow { animation: float 7s ease-in-out infinite; }
.animate-float-delay { animation: float 5s ease-in-out 1.2s infinite; }

@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.animate-breathe { animation: breathe 4.5s ease-in-out infinite; }

@keyframes dot-pulse-anim {
  0%   { transform: scale(.8); opacity: .5; }
  50%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(.8); opacity: .5; }
}
.dot-pulse { animation: dot-pulse-anim 2s ease-in-out infinite; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 26s linear infinite; }

/* ─── Reveal system (IntersectionObserver adds .active) ── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal.active { opacity: 1; transform: none; }
.reveal-left  { opacity: 0; transform: translate3d(-16px,0,0); transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.reveal-right { opacity: 0; transform: translate3d(16px,0,0);  transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.reveal-left.active, .reveal-right.active { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.985); transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.reveal-scale.active { opacity: 1; transform: scale(1); }

/* Schnelles Scrollen: per JS gesetztes .kf-rev-instant -> Element erscheint sofort
   ohne Hochfahren (verhindert das harte gleichzeitige Hochpoppen nach Scroll-Stopp). */
.reveal.kf-rev-instant, .reveal-left.kf-rev-instant, .reveal-right.kf-rev-instant,
.reveal-scale.kf-rev-instant, .sec-rev.kf-rev-instant { transition: none !important; }

/* Reload mit Scroll-Restore: alle Reveals sofort zeigen (keine leeren/weissen Sektionen) */
html.kf-no-reveal .reveal,
html.kf-no-reveal .reveal-left,
html.kf-no-reveal .reveal-right,
html.kf-no-reveal .reveal-scale,
html.kf-no-reveal .sec-rev {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Mobile: Scroll-Reveals KOMPLETT aus -> alles sofort sichtbar.
   Verhindert weisse Luecken/unsichtbare Sektionen beim Reload & schnellen Scrollen. */
@media (max-width: 767px) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .sec-rev {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Keine Bewegung UND keine Transition -> Inhalte erscheinen sofort */
  .reveal, .reveal-left, .reveal-right, .reveal-scale { transform: none !important; transition: none !important; }
  .animate-float, .animate-float-slow, .animate-float-delay, .animate-breathe, .dot-pulse, .cta-pulse, .marquee-track { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Platz fuer die spaet (per partials.js) gemountete Formular-Section reservieren -> kein Layout-Sprung */
section[data-kaefer="form"] { min-height: 589px; }

/* ─── Cards ────────────────────────────────────────────── */
.card-lift { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(20,23,28,.28); }

/* Pest service card (image background) */
.pest-card { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; position: relative; overflow: hidden; }
.pest-bg { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.pest-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(20,23,28,.28); }
.pest-card:hover .pest-bg { transform: scale(1.07); }
/* iOS/WebKit: 1px-Naht ("grauer Rand" unten) beim Hover-Zoom verhindern.
   Das skalierte Bild rendert auf eigener GPU-Ebene, der overflow:hidden-Clip greift getrennt
   -> Sub-Pixel-Saum. Loesung: Bild deckt den Clip-Rand um 1px ueber (kein Blur, kein Layoutshift). */
.pest-bg, img[class*="group-hover:scale"] {
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
  max-width: none !important;
  margin: -1px !important;
}

/* Case study card (Problem → Lösung) */
.case-card { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
.case-card:hover { transform: translateY(-5px); box-shadow: 0 24px 46px -26px rgba(20,23,28,.30); }

/* ─── Marquee (trust strip) ────────────────────────────── */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; white-space: nowrap; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── Form fields ──────────────────────────────────────── */
.field {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--dark-border);
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.field::placeholder { color: rgba(255,255,255,.45); }
.field:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.10); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }
.field-light {
  width: 100%; background: #fff; border: 1px solid var(--border); color: var(--ink);
  border-radius: 14px; padding: 14px 16px; font-size: 15px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field-light::placeholder { color: var(--muted); }
.field-light:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }

/* ─── Step form (lead generator) ─────────────────────── */
@keyframes stepIn {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
.step-in { animation: stepIn .45s cubic-bezier(.16,1,.3,1); }
@keyframes popIn { 0% { opacity:0; transform: scale(.8); } 60% { transform: scale(1.08); } 100% { opacity:1; transform: scale(1); } }
.pop-in { animation: popIn .5s cubic-bezier(.34,1.56,.64,1); }

.choice-tile { background: #fff; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease, background .25s ease; cursor: pointer; }
.choice-tile:hover { border-color: rgba(var(--accent-rgb), .55); transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(20,23,28,.3); }
.choice-tile:active { transform: translateY(-1px) scale(.99); }
.choice-active { border-color: var(--accent) !important; background: rgba(var(--accent-rgb), .08) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); }
.choice-tile img { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.choice-tile:hover img { transform: scale(1.12) rotate(-5deg); }
@media (prefers-reduced-motion: reduce) { .step-in, .pop-in { animation: none !important; } }

/* ─── Success / Danke-Animation ───────────────────────────── */
.sx-success { animation: sxFade .4s ease both; }
@keyframes sxFade { from { opacity: 0; } to { opacity: 1; } }

.sx-badge-wrap { position: relative; width: 64px; height: 64px; margin: 0 auto 1.25rem; }

.sx-badge {
  position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 9999px;
  box-shadow: 0 12px 32px -8px rgba(var(--accent-rgb), .6);
  animation: sxPop .62s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sxPop {
  0%   { opacity: 0; transform: scale(.3) rotate(-28deg); }
  55%  { opacity: 1; transform: scale(1.14) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Häkchen zeichnet sich selbst */
.sx-badge svg path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: sxDraw .5s .36s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes sxDraw { to { stroke-dashoffset: 0; } }

/* Schockwellen-Ringe */
.sx-ring {
  position: absolute; inset: 0; z-index: 1; border-radius: 9999px;
  border: 2px solid rgba(var(--accent-rgb), .55); opacity: 0;
  animation: sxRing 1.1s .22s cubic-bezier(.16,1,.3,1) forwards;
}
.sx-ring-2 { animation-delay: .46s; border-color: rgba(var(--accent-rgb), .32); }
@keyframes sxRing { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(2.5); } }

/* Konfetti-Funken */
.sx-sparks { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sx-spark {
  position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 2px; background: var(--c, var(--accent)); opacity: 0;
  animation: sxSpark .8s var(--delay, .32s) cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes sxSpark {
  0%   { opacity: 0; transform: rotate(var(--a)) translateX(6px) scale(.4); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(58px) scale(1) rotate(160deg); }
}

/* Text + Button gestaffelt */
.sx-line { opacity: 0; animation: sxLine .55s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(.46s + var(--i, 0) * .12s); }
@keyframes sxLine { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* Button-Glow-Puls */
.sx-cta { animation: sxBtnGlow 2.6s 1.5s ease-in-out infinite; }
@keyframes sxBtnGlow {
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), .55); }
  50%      { box-shadow: 0 10px 30px -6px rgba(var(--accent-rgb), .85), 0 0 0 4px rgba(var(--accent-rgb), .14); }
}

@media (prefers-reduced-motion: reduce) {
  .sx-success, .sx-badge, .sx-badge svg path, .sx-ring, .sx-spark, .sx-line, .sx-cta { animation: none !important; opacity: 1 !important; }
  .sx-badge svg path { stroke-dashoffset: 0 !important; }
  .sx-ring, .sx-spark { display: none !important; }
}

/* ─── FAQ accordion ────────────────────────────────────── */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .faq-icon { transform: rotate(45deg); color: var(--accent-deep); }
.faq-icon { transition: transform .35s cubic-bezier(.16,1,.3,1), color .35s ease; }
.faq-item { transition: border-color .3s ease, background .3s ease; }
.faq-item[open] { border-color: rgba(var(--accent-rgb), .45); }
details > div.faq-body { animation: faqOpen .4s cubic-bezier(.16,1,.3,1); }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Decorative backgrounds ───────────────────────────── */
.bg-glow-tl { position: relative; }
.bg-glow-tl::before {
  content: ''; position: absolute; top: -15%; left: -8%; width: 46%; height: 60%;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb), .06) 0%, transparent 72%);
  pointer-events: none; z-index: 0;
}
.bg-glow-br { position: relative; }
.bg-glow-br::before {
  content: ''; position: absolute; bottom: -18%; right: -8%; width: 48%; height: 62%;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb), .05) 0%, transparent 72%);
  pointer-events: none; z-index: 0;
}
/* Grid/Dot-Texturen entfernt — Sections nur noch in der Farbe */
.bg-dots { background-image: none; }
.bg-dots-light { background-image: none; }
.bg-grid-dark { background-image: none; }
.accent-line-top { position: relative; }
.accent-line-top::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 96px; height: 4px; background: var(--accent); border-radius: 0 0 6px 6px;
}
.watermark { position: relative; overflow: hidden; }
.watermark::before {
  content: attr(data-watermark);
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-8deg);
  font-family: 'Archivo', sans-serif; font-size: clamp(5rem, 14vw, 13rem); font-weight: 700;
  color: rgba(20,23,28,.028); white-space: nowrap; pointer-events: none; z-index: 0; line-height: 1;
}

/* gradient text + animated underline */
.text-gradient { background: linear-gradient(100deg, var(--accent-deep), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: var(--accent);
  transition: width .3s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after { width: 100%; }

/* highlight swoosh under hero word — bulletproof gradient (no z-index tricks) */
.swoosh {
  background-image: linear-gradient(180deg, transparent 60%, rgba(var(--accent-rgb), .85) 60%);
  padding: 0 .08em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* scroll progress bar */
#scroll-progress {
  position: fixed; top: var(--nav-h, 64px); left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent)); z-index: 60;
  transition: width .1s linear, top .25s ease;
}

/* sticky mobile call bar */
.mobile-callbar { box-shadow: 0 -8px 30px -10px rgba(0,0,0,.25); padding-bottom: calc(0.625rem + env(safe-area-inset-bottom)); }
@media (max-width: 1023px) { body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } }

/* Navbar condense beim Runterscrollen (nur Mobile, dezent) */
.nav-bar { transition: height .3s ease; }
.nav-logo { transition: height .3s ease; }
@media (max-width: 1023px) {
  .nav-scrolled .nav-bar { height: 60px; }
  .nav-scrolled .nav-logo { height: 2.75rem; }
}

/* Hero groesser, oben-buendig mit Abstand zur Nav (kein vertikales Zentrieren -> keine Nav-Ueberlappung) */
.hero-lg { padding-top: 7rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) {
  .hero-lg {
    min-height: 90vh;
    padding-top: 11rem;
    padding-bottom: 6rem;
  }
  .hero-lg .hero-visual img { height: 560px; }
}

/* ═══ "Warum Sie vertrauen" — editoriale Trust-Section (4. Section) ═══ */
.why {
  position: relative; overflow: hidden;
  --g: #55B685;       /* weiches Sage-Emerald (vom Screenshot) */
  --g-deep: #2F855A;  /* tiefer — Icons/Akzente */
  --g-text: #2A7A52;  /* AA-Text auf Hell */
  --g-rgb: 85, 182, 133;
}
.why-mesh {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 48% at 90% 4%, rgba(var(--accent-rgb), .07), transparent 72%),
    radial-gradient(40% 42% at 4% 102%, rgba(var(--accent-rgb), .04), transparent 72%);
}
.why-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
@media (min-width: 1024px) { .why-grid { grid-template-columns: 0.82fr 1.18fr; gap: 3rem; } }

/* ── Linkes Anker-Panel (dunkles Emerald) ── */
.why-panel {
  position: relative; overflow: hidden; border-radius: 28px;
  padding: 2.85rem; min-height: 420px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(125% 90% at 100% 0%, #2f7a54 0%, transparent 55%),
    linear-gradient(158deg, #1c4d37 0%, #143a2a 58%, #0f2e21 100%);
  box-shadow: 0 30px 60px -28px rgba(15, 46, 33, .55);
}
.why-panel > * { position: relative; z-index: 1; }
.why-panel::after {
  content: ""; position: absolute; right: -50px; top: -50px; width: 230px; height: 230px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(174, 220, 196, .16) 0%, transparent 66%);
}
.why-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-repeat: no-repeat;
  background-position: top -14px right -10px;
  background-size: 210px 210px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20220'%20fill='none'%20stroke='white'%20stroke-width='2.6'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M110%2030%20L186%2072%20L110%20114%20L34%2072%20Z'%20stroke-opacity='0.22'/%3E%3Cpath%20d='M34%2072%20L34%20150%20L110%20192%20L110%20114%20Z'%20stroke-opacity='0.11'/%3E%3Cpath%20d='M186%2072%20L186%20150%20L110%20192%20L110%20114%20Z'%20stroke-opacity='0.16'/%3E%3Cpath%20d='M110%2030%20L110%20114'%20stroke-opacity='0.13'/%3E%3C/svg%3E");
}
.why-eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: 'Archivo', sans-serif; font-weight: 600;
  text-transform: none; letter-spacing: 0; font-size: .98rem; color: #aedcc4;
}
.why-eyebrow i {
  width: 26px; height: 2px; border-radius: 2px; background: var(--g); box-shadow: none;
}
.why-panel h2 {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -.01em;
  margin: 1.4rem 0 0; color: #fff;
}
.why-panel > div:first-child p {
  color: rgba(255, 255, 255, .66); margin-top: 1.1rem; line-height: 1.62;
  max-width: 36ch; font-size: 1rem;
}
.why-proof {
  position: relative; display: flex; align-items: center; gap: 1.6rem;
  margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .12);
}
.why-stat .n {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1;
  color: #fff; display: flex; align-items: center; gap: .5rem;
}
.why-stars { color: #fbbf24; letter-spacing: .04em; font-size: .9rem; }
.why-stat .l { color: rgba(255, 255, 255, .55); font-size: .8rem; margin-top: .35rem; }
.why-div { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .12); }

/* ── Rechte Pillar-Liste (nummeriert, editorial) ── */
.why-list { display: flex; flex-direction: column; }
.why-row {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.4rem;
  padding: 1.9rem 0 1.9rem 1.5rem; border-top: 1px solid var(--border);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.why-row:first-child { border-top: 0; }
.why-row::before {
  content: ""; position: absolute; left: 0; top: 1.9rem; bottom: 1.9rem; width: 3px;
  border-radius: 3px; background: linear-gradient(var(--g), var(--g-deep));
  transform: scaleY(0); transform-origin: top;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.why-row:hover { transform: translateX(6px); }
.why-row:hover::before { transform: scaleY(1); }
.why-num {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.3rem); line-height: .82;
  color: rgba(20, 23, 28, .11); font-variant-numeric: tabular-nums;
  transition: color .35s ease;
}
.why-row:hover .why-num { color: var(--g); }
.why-head { display: flex; align-items: center; gap: .85rem; }
.why-ico {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  background: var(--bg-alt); border: 1px solid var(--border); color: var(--g-deep);
  display: flex; align-items: center; justify-content: center; transition: all .35s ease;
}
.why-row:hover .why-ico {
  background: var(--g); color: #fff; border-color: var(--g);
  box-shadow: 0 10px 22px -8px rgba(var(--g-rgb), .6);
}
.why-row h3 {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.2rem;
  color: var(--ink); transition: color .3s ease;
}
.why-row:hover h3 { color: var(--g-text); }
.why-row > div:last-child p {
  color: var(--body); line-height: 1.65; font-size: .95rem; margin-top: .6rem; max-width: 48ch;
}
@media (max-width: 640px) {
  .why-panel { padding: 2rem; min-height: 0; }
  /* Mobil: kein schmaler Zahlen-Spalt mehr, alles linksbuendig stapeln */
  .why-row {
    grid-template-columns: 1fr;
    gap: .5rem;
    padding: 1.6rem 0 1.6rem 1.1rem;
    text-align: left;
  }
  .why-num { display: none; }   /* 01/02/03 nur auf Handy weg, PC bleibt */
  .why-row > div:last-child p { max-width: none; }
  .step-num { display: none; }   /* Ablauf 01-04 Riesenzahlen nur auf Handy weg, PC bleibt */
}


/* ─── Trust-Widgets im Hero (Google + IHK) ─── */
.trust-widget { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; }
.trust-widget:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(20,23,28,.28); border-color: rgba(20,23,28,.12); }

/* ═══ Ratgeber (editorial rework) ═══ */
.rg { position: relative; overflow: hidden; padding: 2.5rem 1.25rem; background: var(--dark); color: #fff; }
@media (min-width: 768px) { .rg { padding: 3.25rem 2rem; } }
.rg::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 26px 26px; }
.rg-glow { position: absolute; top: -22%; right: -8%; width: 46%; height: 64%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb), .08) 0%, transparent 72%); }
.rg-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }

.rg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2.5rem;
  flex-wrap: wrap; margin-bottom: 1.45rem; }
.rg-head-text { flex: 1 1 auto; min-width: 0; }
.rg-head .rg-all { flex: 0 0 auto; align-self: flex-end; margin-bottom: .15rem; }
.rg-eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-family: 'Archivo', sans-serif;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; color: var(--accent); }
.rg-eyebrow i { width: 24px; height: 2px; border-radius: 2px; background: var(--accent); }
.rg-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 2.9vw, 2.35rem);
  line-height: 1.12; letter-spacing: -.02em; margin: .8rem 0 0; max-width: 30ch; }
.rg-sub { color: rgba(255,255,255,.62); margin: .8rem 0 0; line-height: 1.6; font-size: .98rem; max-width: 70ch; }
.rg-all { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding: .72rem 1.25rem;
  border: 1px solid rgba(255,255,255,.16); border-radius: 100px; color: #fff; font-family: 'Archivo', sans-serif;
  font-weight: 600; font-size: .92rem; transition: background .3s, border-color .3s, transform .3s, color .3s; }
.rg-all:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-text); transform: translateY(-2px); }
.rg-all svg { transition: transform .3s ease; }
.rg-all:hover svg { transform: translateX(3px); }

.rg-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 1024px) { .rg-grid { grid-template-columns: 1.45fr 1fr; gap: 1.2rem; align-items: stretch; } }

/* Feature card */
.rg-feat { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; color: #fff;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .45s, box-shadow .45s; }
.rg-feat:hover { transform: translateY(-5px); border-color: rgba(var(--accent-rgb), .5);
  box-shadow: 0 38px 72px -38px rgba(0,0,0,.75); }
.rg-feat-media { position: relative; height: clamp(150px, 16vw, 188px); overflow: hidden; }
.rg-feat-media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.16,1,.3,1); }
.rg-feat:hover .rg-feat-media img { transform: scale(1.06); }
.rg-cat { position: absolute; top: 1rem; left: 1rem; padding: .4rem .85rem; border-radius: 100px;
  background: var(--accent); color: var(--accent-text); font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.rg-feat-body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 768px) { .rg-feat-body { padding: 1.6rem 1.7rem; } }
.rg-feat-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.18; letter-spacing: -.01em; }
.rg-feat-ex { color: rgba(255,255,255,.62); line-height: 1.55; margin-top: .6rem; font-size: .9rem; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rg-foot { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.1); }
.rg-foot-meta { font-size: .82rem; color: rgba(255,255,255,.5); }
.rg-dot { margin: 0 .45rem; opacity: .5; }
.rg-readmore { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; color: var(--accent);
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .92rem; white-space: nowrap; }
.rg-readmore svg { transition: transform .3s ease; }
.rg-feat:hover .rg-readmore svg { transform: translateX(4px); }

/* Side rows */
.rg-side { display: flex; flex-direction: column; gap: 1.1rem; }
.rg-row { display: flex; gap: .95rem; align-items: stretch; padding: .85rem; border-radius: 16px; color: #fff; flex: 1;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .45s, background .45s; }
.rg-row:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .5); background: rgba(255,255,255,.07); }
.rg-row-media { flex: 0 0 92px; align-self: stretch; min-height: 92px; border-radius: 12px; overflow: hidden; }
.rg-row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.rg-row:hover .rg-row-media img { transform: scale(1.07); }
.rg-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.rg-cat-sm { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); }
.rg-row-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .98rem; line-height: 1.24;
  margin: .3rem 0 .35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rg-row-ex { color: rgba(255,255,255,.55); font-size: .82rem; line-height: 1.5; margin: 0 0 .45rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rg-row-meta { font-size: .76rem; color: rgba(255,255,255,.48); }
.rg-row-arrow { flex: 0 0 auto; align-self: center; color: rgba(255,255,255,.4);
  transition: transform .3s, color .3s; }
.rg-row:hover .rg-row-arrow { color: var(--accent); transform: translateX(3px) rotate(-45deg); }

@media (max-width: 520px) {
  .rg-row { flex-direction: column; align-items: flex-start; }
  .rg-row-media { max-width: none; width: 100%; aspect-ratio: 16 / 9; flex-basis: auto; }
  .rg-row-arrow { display: none; }
}

/* ─── Standort-Cards (Homepage-Section "In Ihrer Nähe") ─── */
.loc-card { display: flex; flex-direction: column; gap: .55rem; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 1.3rem 1.4rem; box-shadow: 0 1px 2px rgba(20,23,28,.04); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease; }
.loc-card:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -22px rgba(20,23,28,.3); border-color: rgba(85,182,133,.55); }
.loc-card__top { display: inline-flex; align-items: center; gap: .45rem; font-family: 'Archivo', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.loc-card__ico { color: #55B685; display: inline-flex; }
.loc-card__city { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--ink); line-height: 1.08; }
.loc-card__sub { font-size: .86rem; color: var(--body); }
.loc-card--main { background: linear-gradient(155deg, #1c4d37 0%, #0f2e21 100%); border-color: transparent; }
.loc-card--main:hover { border-color: transparent; box-shadow: 0 26px 46px -22px rgba(15,46,33,.6); }
.loc-card--main .loc-card__top { color: #aedcc4; }
.loc-card--main .loc-card__ico { color: #6FC79A; }
.loc-card--main .loc-card__city { color: #fff; }
.loc-card--main .loc-card__sub { color: rgba(255,255,255,.7); }

/* Header Hover-Dropdowns (Unterseiten-Menues, reines CSS, kein JS) */
.nav-item { position: relative; }
.nav-dd { position: absolute; top: 100%; left: 0; transform: translateY(12px) scale(.97); transform-origin: top left; padding-top: 14px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1), visibility .28s; z-index: 70; }
.nav-item:hover .nav-dd, .nav-item:focus-within .nav-dd { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.nav-dd-inner { background: #fff; border: 1px solid rgba(20,23,28,.07); border-radius: 20px; box-shadow: 0 30px 60px -24px rgba(20,23,28,.32); padding: 10px; min-width: 322px; }
/* Premium: Dropdown-Eintraege gestaffelt reinfaden (wie Handy-Menue) */
.nav-dd-inner a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; color: var(--ink); white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .28s ease, transform .32s cubic-bezier(.16,1,.3,1), background .15s ease; }
.nav-item:hover .nav-dd-inner a, .nav-item:focus-within .nav-dd-inner a { opacity: 1; transform: translateY(0); }
.nav-item:hover .nav-dd-inner a:nth-child(1), .nav-item:focus-within .nav-dd-inner a:nth-child(1) { transition-delay: .02s; }
.nav-item:hover .nav-dd-inner a:nth-child(2), .nav-item:focus-within .nav-dd-inner a:nth-child(2) { transition-delay: .04s; }
.nav-item:hover .nav-dd-inner a:nth-child(3), .nav-item:focus-within .nav-dd-inner a:nth-child(3) { transition-delay: .06s; }
.nav-item:hover .nav-dd-inner a:nth-child(4), .nav-item:focus-within .nav-dd-inner a:nth-child(4) { transition-delay: .08s; }
.nav-item:hover .nav-dd-inner a:nth-child(5), .nav-item:focus-within .nav-dd-inner a:nth-child(5) { transition-delay: .10s; }
.nav-item:hover .nav-dd-inner a:nth-child(6), .nav-item:focus-within .nav-dd-inner a:nth-child(6) { transition-delay: .12s; }
.nav-item:hover .nav-dd-inner a:nth-child(7), .nav-item:focus-within .nav-dd-inner a:nth-child(7) { transition-delay: .14s; }
.nav-item:hover .nav-dd-inner a:nth-child(8), .nav-item:focus-within .nav-dd-inner a:nth-child(8) { transition-delay: .16s; }
.nav-item:hover .nav-dd-inner a:nth-child(n+9), .nav-item:focus-within .nav-dd-inner a:nth-child(n+9) { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .nav-dd, .nav-dd-inner a { transition: opacity .12s linear; transform: none; }
  .nav-dd-inner a { opacity: 1; }
}
.nav-dd-inner a:hover { background: rgba(var(--accent-rgb), .07); }
.nav-dd-box { width: 38px; height: 38px; border-radius: 11px; background: rgba(var(--accent-rgb), .10); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; flex: none; transition: background .15s ease, color .15s ease; }
.nav-dd-inner a:hover .nav-dd-box { background: var(--accent); color: #fff; }
.nav-dd-t { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.nav-dd-s { display: block; font-size: 12px; line-height: 1.25; margin-top: 1px; color: var(--muted); }
.nav-dd-all { justify-content: center; margin-top: 6px; border-top: 1px solid rgba(20,23,28,.07); padding-top: 12px; font-weight: 700; font-size: 13.5px; color: var(--accent-deep); }
.nav-dd-all:hover { background: transparent; color: var(--accent); }
.nav-caret { transition: transform .2s ease; opacity: .55; }
.nav-item:hover .nav-caret { transform: rotate(180deg); }

/* Standort-Cards: weicher Brand-Glow + konzentrische "Umkreis"-Ringe (kein Karo) */
.loc-wrap { position: relative; }
.loc-card { position: relative; z-index: 0; overflow: hidden; }
.loc-card > * { position: relative; z-index: 1; }
/* weicher Schimmer aus der Icon-Ecke */
.loc-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 0%, rgba(16,185,129,.10) 0%, transparent 54%);
  transition: opacity .4s ease;
}
.loc-card:hover::before { background: radial-gradient(130% 100% at 0% 0%, rgba(16,185,129,.17) 0%, transparent 60%); }
/* konzentrische Radius-Ringe in der unteren Ecke (Einzugsgebiet) */
.loc-card::after {
  content: ""; position: absolute; right: -46px; bottom: -46px; width: 168px; height: 168px; z-index: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 100%, transparent 0 21px, rgba(16,185,129,.14) 21px 22.5px);
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 70%);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.loc-card:hover::after { transform: scale(1.14); }
/* dunkle Zentrale-Card: helle Toene */
.loc-card--main::before { background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.10) 0%, transparent 54%); }
.loc-card--main:hover::before { background: radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,.16) 0%, transparent 60%); }
.loc-card--main::after { background: repeating-radial-gradient(circle at 100% 100%, transparent 0 21px, rgba(255,255,255,.12) 21px 22.5px); }

/* ─── Hero-Portrait: Apple-Liquid-Glass-Rahmen ─── */
.hero-frame {
  position: relative;
  width: min(100%, 440px);
  margin-inline: auto;
  padding: 14px;
  border-radius: 34px;
  background: linear-gradient(155deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.22) 45%, rgba(255,255,255,.4) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -10px 24px rgba(255,255,255,.25),
    0 30px 64px -26px rgba(15,46,33,.42),
    0 12px 32px -18px rgba(0,0,0,.28);
}
.hero-frame::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 44%;
  border-radius: 22px 22px 60px 60px / 22px 22px 40px 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none; z-index: 2;
}
.hero-frame__inner {
  position: relative; border-radius: 22px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(20,23,28,.07), 0 4px 14px rgba(0,0,0,.16);
}
.hero-frame__img {
  display: block; width: 100%; height: 500px; object-fit: cover; object-position: center 20%;
}
@media (min-width: 768px) { .hero-frame__img { height: 560px; } }
@media (max-width: 480px) { .hero-frame__img { height: 420px; } }

/* ─── Hero-Portrait: Freisteller + Glass-Profilkarte ─── */
.hero-stage { position: relative; width: min(100%, 420px); margin-inline: auto; height: 580px; }
@media (max-width: 480px) { .hero-stage { height: 500px; } }
.hero-stage__bg {
  position: absolute; inset: 0; z-index: 0; border-radius: 32px; overflow: hidden;
  background:
    radial-gradient(58% 50% at 88% 4%, rgba(90,217,131,.55) 0%, transparent 58%),
    linear-gradient(160deg, rgba(46,96,66,.42) 0%, rgba(21,24,29,.60) 62%, rgba(17,20,25,.78) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  backdrop-filter: blur(10px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 34px 70px -30px rgba(0,0,0,.6);
}
.hero-stage__bg::after {
  content: ""; position: absolute; inset: 0; border-radius: 32px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 32%);
}
.hero-stage__fig {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 100%; width: auto; max-width: none; object-fit: contain; object-position: bottom;
  z-index: 1; filter: drop-shadow(0 18px 26px rgba(0,0,0,.5));
}
.hero-card {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
  border-radius: 24px; padding: 17px 20px 19px;
  background: linear-gradient(160deg, rgba(26,46,36,.52) 0%, rgba(15,18,22,.58) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 28px rgba(122,236,170,.06), 0 24px 50px -22px rgba(0,0,0,.65);
}
.hero-card__name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.35rem; color: #fff; line-height: 1.1; }
.hero-card__role { font-size: .85rem; color: rgba(255,255,255,.72); margin-top: .2rem; }
.hero-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); }
.hero-card__num { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.15rem; color: #5AD983; line-height: 1; }
.hero-card__lbl { font-family: 'Archivo', sans-serif; font-size: .61rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.5); margin-top: .35rem; }
.hero-card__rating { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.12); }
.hero-card__g { width: 18px; height: 18px; flex: none; }
.hero-card__score { font-family: 'Archivo', sans-serif; font-weight: 800; color: #fff; font-size: .95rem; }
.hero-card__reviews { font-size: .72rem; color: rgba(255,255,255,.55); margin-left: auto; }


/* ═══ Design-System v2: mehr Farbe, Tiefe, polierte Buttons (Unterseiten) ═══ */
.tx-dots { background-image: radial-gradient(rgba(20,23,28,.05) 1px, transparent 1px); background-size: 22px 22px; }

.sec-tint { background: var(--bg-alt); position: relative; }
.sec-tint::before { content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(rgba(16,185,129,.07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(120% 95% at 50% 0%, #000 28%, transparent 78%); mask-image: radial-gradient(120% 95% at 50% 0%, #000 28%, transparent 78%); }
.sec-tint > * { position: relative; z-index: 1; }

.sec-green { position: relative; overflow: hidden; background: linear-gradient(150deg, #0f6e4e 0%, #064e3b 100%); color: #eafff5; }
.sec-green::before { content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(130% 120% at 85% 0%, #000 18%, transparent 78%); mask-image: radial-gradient(130% 120% at 85% 0%, #000 18%, transparent 78%); }
.sec-green > * { position: relative; z-index: 1; }
.sec-green .eyebrow { color: #8ef0c4; }

.sec-dark { position: relative; overflow: hidden; background: radial-gradient(125% 125% at 80% 0%, #15402f 0%, #15181D 55%); color: #fff; }
.sec-dark::before { content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 24px 24px; opacity:.7; }
.sec-dark > * { position: relative; z-index: 1; }
.sec-dark .eyebrow { color: #6fe0aa; }

.eyebrow { display:inline-block; font-family:'Archivo',system-ui,sans-serif; font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color: var(--accent-deep); }

.u-card { background:#fff; border:1px solid rgba(20,23,28,.07); border-radius:20px; box-shadow:0 1px 2px rgba(20,23,28,.04); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease; }
.u-card:hover { transform: translateY(-5px); box-shadow:0 28px 50px -28px rgba(20,23,28,.28); border-color: rgba(16,185,129,.35); }
.u-ico { width:50px; height:50px; border-radius:14px; background: rgba(16,185,129,.10); color: var(--accent-deep); display:flex; align-items:center; justify-content:center; flex:none; transition: background .3s ease, color .3s ease; }
.u-card:hover .u-ico { background: var(--accent); color:#fff; }

.btn-light { background:#fff; color: var(--ink); font-weight:700; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.btn-light:hover { transform: translateY(-2px); box-shadow:0 16px 34px -12px rgba(0,0,0,.45); }
.btn-outline-light { background: rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.28); font-weight:600; transition: all .3s ease; }
.btn-outline-light:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }

.stat-row { display:flex; flex-wrap:wrap; }
.stat-row > * { padding: 2px 22px; border-left:1px solid rgba(20,23,28,.12); }
.stat-row > *:first-child { padding-left:0; border-left:0; }
.sec-dark .stat-row > *, .sec-green .stat-row > *, .svc-hero .stat-row > * { border-color: rgba(20,23,28,.12); }

/* ─── Leistungen-Seite: waermerer Hero + "Warum" (weniger tech) ─── */
.svc-hero { position: relative; overflow: hidden; background: radial-gradient(125% 95% at 86% -12%, #E2F2E9 0%, #F1F7F3 44%, #FBFEFC 100%); }
.svc-hero::before { content:""; position:absolute; width:560px; height:560px; right:-160px; top:-190px; border-radius:50%; background: radial-gradient(circle, rgba(16,185,129,.16), transparent 68%); pointer-events:none; }
.svc-hero::after { content:""; position:absolute; width:400px; height:400px; left:-150px; bottom:-220px; border-radius:50%; background: radial-gradient(circle, rgba(4,120,87,.10), transparent 70%); pointer-events:none; }
.svc-hero > * { position: relative; z-index: 1; }
.svc-hero-grid { display: grid; gap: 2.25rem; align-items: center; }
@media (min-width: 768px) { .svc-hero-grid { grid-template-columns: 1.05fr .9fr; gap: 2.75rem; } }
@media (min-width: 1024px) { .svc-hero-grid { gap: 4rem; } }
.svc-hero h1 { font-size: clamp(2.25rem, 1.1rem + 3vw, 3.25rem); }
.svc-hero-media { position: relative; }
.svc-hero-media > img { width:100%; height: 340px; object-fit: cover; border-radius: 26px; box-shadow: 0 44px 84px -34px rgba(6,49,40,.5); }
@media (min-width:1024px){ .svc-hero-media > img { height: 440px; } }
.svc-hero-media::after { content:""; position:absolute; inset:0; border-radius:26px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 -70px 80px -40px rgba(6,49,40,.45); pointer-events:none; }
.svc-hero-chip { position:absolute; left:-12px; bottom:-20px; z-index:2; background:#fff; border-radius:18px; padding: 13px 17px; box-shadow: 0 26px 48px -22px rgba(6,49,40,.45); display:flex; align-items:center; gap:11px; }
.svc-hero-chip .stars { display:flex; gap:2px; color:#FBBF24; }
@media (max-width:1023px){ .svc-hero-chip { left:auto; right:14px; } }

.svc-why { position: relative; overflow: hidden; background: linear-gradient(158deg, #0F5F44 0%, #0A3B2B 100%); color:#eafff5; }
.svc-why::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(78% 60% at 12% -5%, rgba(255,255,255,.10), transparent 58%); }
.svc-why::after { content:""; position:absolute; width:520px; height:520px; right:-180px; bottom:-220px; border-radius:50%; background: radial-gradient(circle, rgba(141,240,196,.16), transparent 70%); pointer-events:none; }
.svc-why > * { position: relative; z-index: 1; }
.svc-why .eyebrow { color:#8ef0c4; }
.svc-card { background:#FBFAF5; border-radius:22px; padding: 1.85rem; box-shadow: 0 26px 46px -30px rgba(0,0,0,.55); transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 38px 64px -32px rgba(0,0,0,.6); }
.svc-card-ico { width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; background: linear-gradient(140deg, #10B981, #047857); color:#fff; box-shadow: 0 12px 22px -8px rgba(4,120,87,.6); margin-bottom: 1.15rem; }
.svc-card h3 { color:#13261E; font-family:'Archivo',sans-serif; }
.svc-card p { color:#4A5A52; }


/* ═══ Hero Live-Glass Trust-Widgets ═══ */
@property --hwp { syntax: "<number>"; inherits: false; initial-value: 0; }
.hw-row { display: flex; flex-wrap: wrap; gap: 9px; }
.hw {
  position: relative; display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 9px 13px 9px 10px; border-radius: 16px; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 44px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.18);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
}
.hw:hover {
  transform: translateY(-3px);
  border-color: rgba(16,185,129,.5);
  box-shadow: 0 28px 60px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(16,185,129,.28), inset 0 1px 0 rgba(255,255,255,.24);
}
.hw::after {
  content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.hw:nth-child(2)::after { animation-delay: .9s; }
.hw:nth-child(3)::after { animation-delay: 1.8s; }
@keyframes hw-sheen { 0%, 100% { transform: translateX(-110%); } 55% { transform: translateX(110%); } }

.hw__txt { display: flex; flex-direction: column; line-height: 1.15; }
.hw__txt b { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .8rem; color: #fff; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.hw__txt i { font-style: normal; font-size: .67rem; color: rgba(255,255,255,.62); margin-top: 3px; white-space: nowrap; }

/* signature: conic fill ring */
.hw-ring {
  position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
}
.hw-ring::after { display: none; }
.hw-ring > * { position: relative; z-index: 1; color: #10B981; }
@keyframes hw-fill { to { --hwp: 100; } }

/* signature: equalizer */
.hw-eq { width: 34px; height: 34px; flex: none; border-radius: 12px; background: rgba(16,185,129,.16); display: flex; align-items: center; justify-content: center; gap: 3px; }
.hw-eq i { width: 3px; height: 9px; border-radius: 2px; background: #10B981; }
.hw-eq i:nth-child(2) { height: 15px; }
.hw-eq i:nth-child(3) { height: 20px; }
.hw-eq i:nth-child(4) { height: 12px; }
@keyframes hw-eq { 0%, 100% { height: 7px; opacity: .6; } 50% { height: 20px; opacity: 1; } }

/* signature: live pulse dot */
.hw-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 7px rgba(16,185,129,.6); flex: none; }
@keyframes hw-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

/* IHK badge tile */
.hw-ico { width: 34px; height: 34px; flex: none; border-radius: 12px; background: rgba(16,185,129,.16); color: #10B981; display: grid; place-items: center; }
/* CTA-Telefon: gruene Box/Umriss weg, nur das gruene Icon bleibt */
.hw-cta .hw-ico { background: transparent; }
.hw-badge { flex: none; display: grid; place-items: center; }
.hw-badge img { height: 32px; width: auto; max-width: none; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

@media (prefers-reduced-motion: reduce) {
  .hw::after, .hw-eq i, .hw-dot { animation: none; }
  .hw-ring { animation: none; --hwp: 100; }
}

/* Unterseiten-Hero: mehr Luft zum Sticky-Header */
.hero-pad { padding-top: 4.5rem; }
@media (min-width: 768px) { .hero-pad { padding-top: 7rem; } }

/* CTA-Band: volle Breite + grosszuegige Abstaende */
.cta-sec { padding: 5rem 1.25rem; }
@media (min-width: 768px) { .cta-sec { padding: 7rem 2rem; } }
.cta-sec .cta-eyebrow { margin-bottom: 1.25rem; }
.cta-sec h2 { margin-bottom: 1.5rem; }
.cta-sec .cta-sub { margin-bottom: 2.75rem; }
.cta-sec .cta-trust { margin-top: 3rem; }

/* Section-Bild Hover-Zoom */
.img-zoom img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.img-zoom:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce){ .img-zoom:hover img { transform: none; } }


/* ── Widget-Karten: einzeln gestaffelt einblenden ── */
@keyframes hw-in { from { opacity: 0; } to { opacity: 1; } }
.hw { animation: hw-in .72s cubic-bezier(.16,1,.3,1) backwards; }
.hw:nth-child(1) { animation-delay: .60s; }
.hw:nth-child(2) { animation-delay: .72s; }
.hw:nth-child(3) { animation-delay: .84s; }
@media (prefers-reduced-motion: reduce) { .hw { animation: none; } }


/* ─── Mobile distill: verdichtete Section-Abstaende (<=640px) ───
   Wirkt nur auf die obersten Seiten-Sections, damit verschachtelte
   Karten/Panels mit eigenem py-* unberuehrt bleiben. */
@media (max-width: 640px) {
  /* Formular-Section auf Mobile an Inhaltshoehe anpassen (kein weisser Leerraum bei kurzen Schritten) */
  section[data-kaefer="form"] { min-height: 0; }
  /* py-20 / py-16 Sections auf Mobile straffen (5rem -> 2.75rem) */
  main > section.py-20 { padding-top: 2.75rem; padding-bottom: 2.75rem; }
  main > section[class*="py-16"] { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  /* Ratgeber-Section (eigenes Padding) */
  .rg { padding-top: 2.5rem; padding-bottom: 2.5rem; }

  /* Heading-Bloecke der Sections etwas dichter an den Inhalt ruecken */
  main > section .mb-14 { margin-bottom: 2rem; }
  main > section .mt-14 { margin-top: 2rem; }
  main > section .mb-12 { margin-bottom: 1.75rem; }
  main > section .mt-10 { margin-top: 1.6rem; }

  /* Card-Grids und gestapelte Bloecke dezent straffen */
  main > section .gap-6 { gap: 1rem; }
  main > section .gap-5 { gap: 0.9rem; }
  main > section .gap-12 { gap: 2rem; }
}

/* ─── About: Metric-Row mit editorialerem Charakter ─── */
.about-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.75rem;
  border: 1px solid rgba(20,23,28,.08); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); }
.about-metric { position: relative; padding: 1.1rem 1.15rem; text-align: left; }
.about-metric + .about-metric::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px; background: linear-gradient(180deg, transparent, rgba(20,23,28,.12), transparent); }
.about-metric__num { font-family: 'Archivo', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: 1.85rem; line-height: 1; color: var(--content, #14171c); }
.about-metric__num span { color: var(--accent, #047857); }
.about-metric__label { margin-top: .4rem; font-size: 12px; line-height: 1.3; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 600; color: rgb(82 90 100); }
@media (min-width: 768px) { .about-metric__num { font-size: 2.15rem; } .about-metric { padding: 1.25rem 1.35rem; } }

/* ─── Service-/Case-Cards: feinere Hierarchie + staerkeres Foto-Verhalten ─── */
.pest-card, .case-card { border-color: rgba(20,23,28,.07);
  box-shadow: 0 1px 2px rgba(20,23,28,.04), 0 10px 28px -22px rgba(20,23,28,.20); }
/* will-change nur auf Hover-Geraeten (Desktop) -> spart auf Mobile permanente Compositor-Layer */
@media (hover: hover) { .pest-card .pest-bg, .case-card img { will-change: transform; } }
.pest-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12rem;
  background: linear-gradient(180deg, rgba(20,23,28,0) 55%, rgba(20,23,28,.16)); pointer-events: none; opacity: 0;
  transition: opacity .4s ease; z-index: 1; }
.pest-card:hover::after { opacity: 1; }
.case-card .h-48 { position: relative; }
.case-card .h-48 img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.case-card:hover .h-48 img { transform: scale(1.06); }

/* ═══ Layout-Rhythmus: Split-Sektionen (Leistungen, Ablauf, FAQ) ═══ */
/* Leistungen: Sticky-Header links, Cards rechts */
.lst-split { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .lst-split { grid-template-columns: 0.8fr 1.2fr; gap: 3rem; align-items: start; } }
.lst-head { align-self: start; }
@media (min-width: 1024px) { .lst-head { position: sticky; top: calc((100vh - 25rem) / 2); } }

/* Ablauf: 2-spaltiger Header (Text links, Stat-Karten rechts) */
.ablauf-head { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .ablauf-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2.5rem; } }
.ablauf-head__text { max-width: 38rem; }
.ablauf-head__stats { display: flex; gap: 1rem; flex-shrink: 0; }
.ablauf-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 18px; padding: 1.1rem 1.3rem; min-width: 0; }
.ablauf-stat b { display: block; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.55rem; line-height: 1; color: #fff; }
.ablauf-stat span { display: block; margin-top: .35rem; font-size: .8rem; color: rgba(255,255,255,.6); white-space: nowrap; }

/* FAQ: Sticky-Header + CTA links, Akkordeons rechts */
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: 0.78fr 1.22fr; gap: 3.5rem; align-items: start; } }
.faq-head { align-self: start; }
@media (min-width: 1024px) { .faq-head { position: sticky; top: 104px; } }

/* Lead-Formular: konstante Kartenhöhe (kein Springen zwischen Schritten) */
.kf-card-stable { min-height: 540px; }
@media (max-width: 767px){ .kf-card-stable { min-height: 0; } }
/* Nach dem Absenden: Karte schrumpft auf den Danke-Inhalt, kein weisser Leerraum */
.kf-card-stable.kf-sent { min-height: 0 !important; }

/* Mobile: zu grosser Abstand zwischen Formular-Section und "Warum Sie"-Section weg */
@media (max-width: 767px) {
  [data-kaefer="form"] > section { padding-bottom: 1.25rem; }
  .why { padding-top: 2rem; }
}

/* Mobile: Vom Formular-Intro nur die Headline behalten,
   Eyebrow / Text / Häkchen-Liste / Google-Badge ausblenden. Desktop unverändert. */
@media (max-width: 767px) {
  .kf-intro > span,
  .kf-intro > p,
  .kf-intro > ul,
  .kf-intro > div { display: none; }
  .kf-intro { text-align: center; }
  .kf-intro > h2 { margin-bottom: 0; }
}

/* Mobile: Leistungen-Kopf (Eyebrow, Headline, Text, Buttons) zentriert */
@media (max-width: 767px) {
  .lst-head { text-align: center; }
  .lst-head > div { justify-content: center; }
}


/* ── Section-Reveal: ganze Section fadet beim Reinscrollen ein ── */
.sec-rev { opacity: 0; transform: translate3d(0,14px,0); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.sec-rev.active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sec-rev { opacity: 1 !important; transition: none !important; } }
/* Mobile: schnelleres Section-Fade, smoother Eindruck */
@media (max-width: 767px) { .sec-rev { transform: none; transition: opacity .6s ease; } }
/* Mobile: schwere Backdrop-Blurs im Hero reduzieren -> deutlich weniger Paint-Last beim Scrollen */
@media (max-width: 767px) {
  .hero-frame { -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
  .hero-card  { -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); }
}

/* Mobile: Hero-Benefit-Badges unter die Subheadline (vor die Buttons) */
@media (max-width: 1023px) {
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy > .hero-badge { align-self: flex-start; margin-left: .9rem; }   /* Glas-Badge huggt Text, buendig mit Headline */
  .hero-copy > p { margin-bottom: 1rem; }            /* Absatz dichter -> Benefit-Punkte hoeher */
  .hero-copy > .hw-row { order: 4; margin-top: .2rem; }
  .hero-copy > .hero-cta { order: 5; margin-top: 1.5rem; }   /* Space zwischen Punkten und Buttons */
}

/* ─── Mobile: Hero-Trust-Widgets als Benefit-Punkte (Check + Text) — NUR Handy ─── */
@media (max-width: 640px) {
  .hw-row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .8rem; }
  .hw {
    background: none !important; border: 0 !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    padding: 0 !important; border-radius: 0; gap: .65rem; align-items: flex-start; overflow: visible;
  }
  .hw:hover { transform: none; box-shadow: none; }
  .hw::after { display: none; }
  .hw-ring, .hw-ico, .hw-badge { display: none !important; }
  .hw::before {
    content: ""; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
    background-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2013l4%204L19%207'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 13px;
  }
  .hw__txt { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; }
  .hw__txt b { font-size: .95rem; white-space: normal; }
  .hw__txt i { font-size: .9rem; color: rgba(255,255,255,.7); margin-top: 0; white-space: normal; }
}

/* Mobile/Tablet (gestapelt, < lg): ganze Ueber-uns-Section zentriert, PC bleibt */
@media (max-width: 1023px) {
  /* Text (Eyebrow, Headline, Absaetze) mittig */
  #ueber-uns .reveal-right { text-align: center; }
  /* Schwebendes Festpreis-Garantie-Widget mittig unter dem Bild (statt rechts ueberstehend) */
  #ueber-uns .reveal-left .animate-float { left: 0; right: 0; margin-inline: auto; }
  .about-card { justify-content: center; text-align: left; }
  .about-metrics { justify-items: center; }
  .about-metric { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE-FEINSCHLIFF UNTERSEITEN (greift fuer alle .html-Subpages)
   Nur Handy, Desktop bleibt unangetastet.
   ═══════════════════════════════════════════════════════════════ */

/* Stat-/Zahlen-Block: sauberes 2-spaltiges Raster mit gleichmaessigen
   Trennlinien statt krumm umbrechendem Flexbox. */
@media (max-width: 640px) {
  .stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 1.75rem;
    border: 1px solid rgba(20,23,28,.12);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(20,23,28,.015);
  }
  .stat-row > * {
    padding: 0.85rem 1rem !important;
    border-left: 1px solid rgba(20,23,28,.12) !important;
    border-top: 1px solid rgba(20,23,28,.12);
    min-width: 0;
  }
  /* erste Spalte: keine linke Linie */
  .stat-row > *:nth-child(odd) { border-left: 0 !important; }
  /* erste Reihe: keine obere Linie */
  .stat-row > *:nth-child(1),
  .stat-row > *:nth-child(2) { border-top: 0; }
  .stat-row > *:first-child { padding-left: 1rem !important; }
  /* 3-Stat-Block: letztes Element ueber beide Spalten, mittig */
  .stat-row > *:last-child:nth-child(3) {
    grid-column: 1 / -1;
    border-left: 0 !important;
    text-align: center;
  }
  /* Zahlen etwas kompakter, Label umbrechbar */
  .stat-row .text-2xl { font-size: 1.4rem; line-height: 1.15; }
  .stat-row .text-sm { line-height: 1.25; }
  /* dunkle/gruene Sektionen: Rahmen heller */
  .sec-dark .stat-row, .sec-green .stat-row {
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
  }
  .sec-dark .stat-row > *, .sec-green .stat-row > * {
    border-left-color: rgba(255,255,255,.18) !important;
    border-top-color: rgba(255,255,255,.18);
  }
}

/* Lange Einzelwoerter in Headlines (z.B. "Datenschutzerklaerung") duerfen
   auf schmalen Screens umbrechen statt die Seite breit zu schieben. */
@media (max-width: 640px) {
  h1, h2, h3 { overflow-wrap: anywhere; }
}

/* Sicherheits-Netz: keine Desktop-Hover-Dropdowns auf Mobile.
   (Header-Markup versteckt .nav-item bereits via lg:flex, das hier
   verhindert nur, dass ein versehentlich sichtbares .nav-dd aufklappt.) */
@media (max-width: 1023px) {
  .nav-dd { display: none !important; }
}

/* Vollbild-Mobile-Menü (Premium: bleibt im DOM, .open togglet smooth auf UND zu) */
.mob-menu {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 100;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(22px) saturate(120%); backdrop-filter: blur(22px) saturate(120%);
  overflow-y: auto; padding: 1.25rem 1.5rem 2.5rem;
  display: flex; flex-direction: column; gap: .15rem;
  margin: 0; border: 0; border-radius: 0; max-width: none; max-height: none; box-shadow: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px) scale(.985); transform-origin: top right;
  transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1), visibility .4s;
}
.mob-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
/* Items gestaffelt rein (laeuft rueckwaerts beim Schliessen) */
.mob-nav > *, .mob-menu > .mob-menu-cta { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .5s cubic-bezier(.16, 1, .3, 1); }
.mob-menu.open .mob-nav > *, .mob-menu.open > .mob-menu-cta { opacity: 1; transform: translateY(0); }
.mob-menu.open .mob-nav > *:nth-child(1) { transition-delay: .08s; }
.mob-menu.open .mob-nav > *:nth-child(2) { transition-delay: .13s; }
.mob-menu.open .mob-nav > *:nth-child(3) { transition-delay: .18s; }
.mob-menu.open .mob-nav > *:nth-child(4) { transition-delay: .23s; }
.mob-menu.open .mob-nav > *:nth-child(5) { transition-delay: .28s; }
.mob-menu.open .mob-nav > *:nth-child(6) { transition-delay: .33s; }
.mob-menu.open .mob-nav > *:nth-child(7) { transition-delay: .38s; }
.mob-menu.open > .mob-menu-cta { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
  .mob-menu, .mob-nav > *, .mob-menu > .mob-menu-cta { transition: opacity .15s linear; transform: none; }
}
.mob-menu-head { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-bottom: 1.1rem; }
.mob-menu-head img { height: 3rem; width: auto; }
.mob-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink); border-radius: 12px; background: none; border: 0; cursor: pointer; transition: background .2s ease, color .2s ease; }
.mob-close:hover { background: rgba(20,23,28,.05); }
.mob-toggle { transition: color .2s ease; }
.mob-toggle.active { color: var(--accent-deep); }
/* Mobile-Menue: Sektionen einklappbar (Accordion) statt alles offen */
.mob-sec { padding: 0; border-top: 1px solid rgba(20, 23, 28, .08); }
.mob-sec > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: .9rem .15rem; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.22rem;
  color: var(--ink); text-transform: none; letter-spacing: normal; margin: 0;
}
.mob-sec > summary::-webkit-details-marker { display: none; }
.mob-sec > summary::after {
  content: ''; width: 10px; height: 10px; flex: 0 0 auto; margin-right: .25rem;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease; opacity: .4;
}
.mob-sec[open] > summary { color: var(--accent-deep); }
.mob-sec[open] > summary::after { transform: rotate(-135deg); }
.mob-sec > .mob-item:first-of-type { margin-top: .1rem; }
.mob-sec > .mob-item-all { margin-bottom: .55rem; }
/* Smooth Auf- UND Zuklappen: Hoehe der Akkordeon-Inhalte animieren (beide Richtungen).
   Nutzt ::details-content + interpolate-size; Browser ohne Support klappen instant (Fallback). */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}
.mob-sec::details-content {
  height: 0; overflow: hidden; opacity: 0;
  transition: height .38s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, content-visibility .38s allow-discrete;
  content-visibility: hidden;
}
.mob-sec[open]::details-content { height: auto; opacity: 1; content-visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .mob-sec::details-content { transition: none; }
}
.mob-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .72rem .15rem; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--ink); line-height: 1.25; }
.mob-item-s { font-family: 'Inter', sans-serif; font-weight: 400; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.mob-item-all { color: var(--accent-deep); font-weight: 700; font-size: .98rem; }
.mob-link { display: block; padding: .9rem .15rem; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.22rem; color: var(--ink); border-top: 1px solid rgba(20, 23, 28, .08); }
.mob-link.is-active, .mob-item.is-active { color: var(--accent-deep); }
.mob-menu-cta { margin-top: 1.6rem; align-self: stretch; justify-content: center; display: inline-flex; align-items: center; gap: .5rem; padding: 1rem 1.5rem; font-family: 'Archivo', sans-serif; font-weight: 700; }


/* Kontakt-Karten: zentriert, untere Reihe mittig statt linksbuendig */
.kontakt-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.kontakt-cards > * { flex: 1 1 360px; max-width: 420px; }

/* Tailwind aspect-Arbitraries nachruesten (precompiled tailwind.css enthaelt sie nicht -> Card-Bilder bliesen sonst auf) */
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
.aspect-\[16\/8\]  { aspect-ratio: 16 / 8; }


/* Fehlende Tailwind-Spacing-Klassen (in vorgebauter CSS nicht enthalten) */
.pb-14 { padding-bottom: 3.5rem; }
@media (min-width: 768px) {
  .md\:pt-14 { padding-top: 3.5rem; }
  .md\:pb-16 { padding-bottom: 4rem; }
  .md\:pb-20 { padding-bottom: 5rem; }
  .md\:py-18 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
}

/* Mobile-Hero: Widgets aus, Benefit-Liste rein (wie Referenz) */
@media (max-width: 1023px) { .hw-row { display: none; } }

/* Hero-Badge: cleanes Hairline-Pill statt milchigem Glas */
.hero-badge {
  padding: 6px 14px 6px 12px;
  gap: 9px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.hero-badge__label {
  font-size: 10.5px;
  letter-spacing: .15em;
  color: rgba(255, 255, 255, .78);
  line-height: 1;
  white-space: nowrap;
}
.hero-badge .dot-pulse {
  width: 6px; height: 6px; flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(90, 217, 131, .14), 0 0 7px rgba(90, 217, 131, .55);
  animation: none;   /* Punkt im Badge nicht animiert */
}

/* ─── Mobile-Hero Feinausrichtung (nur Handy) ─── */
@media (max-width: 640px) {
  /* Headline + Subheadline etwas weniger weit rechts als die Benefits */
  .hero-copy > h1,
  .hero-copy > p { margin-left: .9rem; }
  /* Subheadline näher an die Headline */
  .hero-copy > h1 { margin-bottom: .9rem; }
  .hero-copy > .hero-benefits { margin-left: 1.1rem; }
  /* CTA "Festpreis berechnen lassen" linksbündig, 1.2rem von links */
  .hero-copy > .hero-cta { justify-content: flex-start; margin-left: 1.2rem; }
  /* Mehr Luft zwischen CTA und Inhaber-Glaskarte darunter */
  .hero-copy + div { margin-top: 1.6rem; }
  /* Badge auf Handy minimal groesser, sonst gleicher cleaner Look */
  .hero-badge { padding: 7px 15px 7px 13px; gap: 9px; }
  .hero-badge__label { font-size: 11px; letter-spacing: .14em; }
}

/* ─── FAQ-Accordion (Service- + Standort-Seiten, aufklappbar) ─── */
.faq-acc { border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; }
.faq-acc + .faq-acc { margin-top: .75rem; }
.faq-acc > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.3rem; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.02rem;
  color: var(--ink); line-height: 1.35;
}
.faq-acc > summary::-webkit-details-marker { display: none; }
.faq-acc > summary::after {
  content: ''; width: 9px; height: 9px; flex: 0 0 auto; margin-top: .15rem;
  border-right: 2.5px solid var(--accent-deep); border-bottom: 2.5px solid var(--accent-deep);
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq-acc[open] > summary { color: var(--accent-deep); }
.faq-acc[open] > summary::after { transform: rotate(-135deg); }
.faq-acc__body { padding: 0 1.3rem 1.2rem; color: var(--body); line-height: 1.65; }
.faq-acc__body p + p { margin-top: .7rem; }

/* ─── Section-Reveal beim Scrollen in den Viewport (Handy + PC, wie kaefer) ─────
   Jede Sektion startet versteckt und faded sanft von unten rein, sobald sie in den
   Viewport scrollt (.in via IntersectionObserver in partials.js).
   .js-Gate = ohne JS ist alles sofort sichtbar (SEO/A11y). */
html.js body > section { opacity: 0; transform: translateY(28px); transition: opacity 1.15s cubic-bezier(.16, 1, .3, 1), transform 1.15s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; }
html.js body > section.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js body > section { opacity: 1; transform: none; transition: none; }
}

/* ─── Leistungsseiten-Hero: Tiefe, Glow & Glas ("Swag") ─── */
.lp-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 80%, #fff 100%),
    radial-gradient(120% 85% at 100% -15%, rgba(16,185,129,0.20), transparent 55%),
    radial-gradient(95% 80% at -12% 115%, rgba(90,217,131,0.13), transparent 60%),
    linear-gradient(180deg, #E7F4EC 0%, #F1F8F3 52%, #FBFDFB 100%);
}
.lp-hero::before {            /* feine Punkt-Textur, weich ausmaskiert */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(17,46,32,0.07) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(72% 62% at 80% 8%, #000 0%, transparent 72%);
          mask-image: radial-gradient(72% 62% at 80% 8%, #000 0%, transparent 72%);
}
.lp-hero::after {            /* weicher Glow-Blob oben rechts */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -150px; right: -130px; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90,217,131,0.30), transparent 62%);
  filter: blur(12px);
}
.lp-hero > * { position: relative; z-index: 1; }

/* Verlaufs-Akzent in der Headline */
.lp-grad {
  background: linear-gradient(108deg, #0E9E6E 0%, #16C98D 55%, #5AD983 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Hero-Benefit-Karten (Ratgeber) auf dem Handy: Icon oben, Text volle Breite -> kein Quetschen */
@media (max-width: 640px) {
  .hero-benefit { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .9rem; border-radius: 1rem; }
  .hero-benefit > span:first-child { width: 2.1rem; height: 2.1rem; border-radius: .7rem; }
  .hero-benefit .text-\[15px\] { font-size: 14.5px; }
}
/* Gleichmaessige Zeilenumbrueche im Artikel-Text (kein ausgefranstes Bild) */
article h2, article h3 { text-wrap: balance; }
article p, article li { text-wrap: pretty; }

/* Standort-Service-Karten: Pfeil gleitet beim Hover nach rechts + wird gruen */
.svc-card .svc-arrow { transition: transform .3s cubic-bezier(.16,1,.3,1), color .3s ease; }
.svc-card:hover .svc-arrow { transform: translateX(3px); color: var(--accent-deep); }

/* Kontakt-Karten: kraeftiges Gradient-Icon-Badge mit Glow + Hover */
.kontakt-ico {
  width: 3rem; height: 3rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px; color: #fff;
  background: linear-gradient(135deg, #10B981, #34D399);
  box-shadow: 0 10px 22px -8px rgba(16,185,129,.6);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.kontakt-card:hover .kontakt-ico { transform: scale(1.06) rotate(-3deg); }
.kontakt-val { transition: color .25s ease; }
.svc-card:hover .kontakt-val { color: var(--accent-deep); }

/* ─── Standort-Seiten: Headlines, Subheadlines & Hero-Widgets zentriert ─── */
/* Hero (immer zentriert) */
.standort-page .lp-hero > .max-w-7xl { text-align: center; }
.standort-page .lp-hero nav { justify-content: center; }
.standort-page .lp-hero > .max-w-7xl > p { margin-left: auto; margin-right: auto; }
.standort-page .lp-hero .hero-cta-row { justify-content: center; }
.standort-page .lp-hero > .max-w-7xl > .grid { margin-left: auto; margin-right: auto; }
/* Body-Sections: Headlines + Subheadlines auf Mobile/Tablet zentriert (dort einspaltig) */
@media (max-width: 1023px) {
  .standort-page section h2 { text-align: center; }
  .standort-page section h2 + p { text-align: center; max-width: 34rem; margin-left: auto; margin-right: auto; }
  .standort-page section .eyebrow { display: block; text-align: center; }
}

/* Standort-Seiten: auch die Icons/Symbole in den zentrierten Sektionen mittig
   (Tailwind setzt svg{display:block} -> text-align greift nicht, daher margin:auto) */
.standort-page .lp-hero > .max-w-7xl > .grid svg { margin-left: auto; margin-right: auto; }
@media (max-width: 1023px) {
  .standort-page .sec-green .flex { align-items: center; }
}

/* Homepage About-Section: komplett mittig auf Mobile/Tablet (Karte + Metriken inkl.) */
@media (max-width: 1023px) {
  #ueber-uns .reveal-right,
  #ueber-uns .reveal-right p,
  #ueber-uns .reveal-right .space-y-4 p,
  #ueber-uns .about-metric { text-align: center !important; }
  #ueber-uns .about-card { flex-direction: column; text-align: center; }
  #ueber-uns .about-metrics { justify-items: center; }
}

/* About-Section: Textspalte schmaler & mittig (sauber zentriert statt volle Breite) */
@media (max-width: 1023px) {
  #ueber-uns .reveal-right > h2,
  #ueber-uns .reveal-right .space-y-4 { max-width: 30rem; margin-left: auto; margin-right: auto; }
}

/* Leistungsseiten Desktop: Intro-Bild raus (steckt jetzt oben im Hero), Text volle Breite.
   Nur >=1024px -> Handy/Tablet unveraendert. */
@media (min-width: 1024px) {
  .lp-intro { grid-template-columns: 1fr !important; }
  .lp-intro > div:nth-child(2) { display: none; }
}

/* ─── Leistungsseiten-Hero auf Desktop: 2-Spalter (Text links, Bild rechts) ─── */
.lp-hero-media { display: none; }   /* Bild nur Desktop (Handy/Tablet: Bild bleibt unten in der Intro-Section) */
@media (min-width: 1024px) {
  .lp-hero-2col { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center; }
  .lp-hero-media { display: block; }
  .lp-hero-2col h1 { font-size: 3.8rem; }
  .lp-hero-2col > div:first-child > p { font-size: 1.25rem; }
  .lp-hero-2col .lp-badge { padding: 0.5rem 1rem; }
  .lp-hero-2col .lp-badge > span:last-child { font-size: 14px; }
  .lp-hero-2col .lp-badge .dot-pulse { width: 0.6rem; height: 0.6rem; }
}

/* Desktop-Hero: Buttons als kompakte Reihe (content-width statt voll gestapelt) */
@media (min-width: 1024px) {
  .lp-hero-2col .hero-cta-row { flex-direction: row; flex-wrap: wrap; }
}

/* ─── Leistungsseiten Desktop: FAQ-Fenster groesser (linksbuendig, nur >=1024) ─── */
@media (min-width: 1024px) {
  .lp-page .faq-acc summary { font-size: 1.2rem; padding-top: 1.45rem; padding-bottom: 1.45rem; }
  .lp-page .faq-acc__body p { font-size: 1.08rem; }
}

/* ─── Ratgeber-Seiten: Inhalt auf Desktop mittig zentriert (Handy unveraendert) ─── */
@media (min-width: 1024px) {
  .rg-center .lp-hero .max-w-3xl { text-align: center; }
  .rg-center .lp-hero nav { justify-content: center; }
  .rg-center .lp-hero .max-w-3xl > .grid { margin-left: auto; margin-right: auto; }
  .rg-center .lp-hero p.max-w-2xl { margin-left: auto; margin-right: auto; }

  .rg-center article .max-w-3xl,
  .rg-center .sec-green .max-w-3xl,
  .rg-center .sec-tint .max-w-3xl { text-align: center; }
  .rg-center .sec-green .max-w-2xl,
  .rg-center .sec-tint .max-w-2xl { margin-left: auto; margin-right: auto; }

  /* Karten-Inhalt links lassen (Icon+Text-Layout nicht zerschiessen) */
  /* Hero-Benefit-Karten + Wertanrechnung-Highlight: Inhalt mittig */
  .rg-center .hero-benefit { justify-content: center; text-align: center; }
  .rg-center .sec-green .grid > .sm\:col-span-2 { grid-column: 1 / -1; flex-direction: column; align-items: center; text-align: center; }
  /* normale 2-spaltige Faktor-Karten bleiben linksbuendig */
  .rg-center .sec-green .grid > div:not(.sm\:col-span-2) { text-align: left; }
}

/* Intro-Benefits: nur Desktop (Handy unveraendert), 3 Karten nebeneinander */
.lp-intro-benefits { display: none; }
@media (min-width: 1024px) {
  .lp-intro-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.75rem; }
}

/* ─── Kontakt-Karten: auf Desktop volle Breite fuellen (kein Leerraum bei 5 Karten), Handy unveraendert ─── */
@media (min-width: 1024px) {
  .kontakt-cards { display: grid; grid-template-columns: repeat(6, 1fr); align-items: stretch; }
  .kontakt-cards > * { max-width: none; }
  .kontakt-cards > *:nth-child(-n+3) { grid-column: span 2; }  /* erste 3 Karten: je ein Drittel */
  .kontakt-cards > *:nth-child(n+4) { grid-column: span 3; }   /* letzte 2 Karten: je eine Haelfte */
}

/* ─── Standort-Hero im 2-Spalter (z.B. wolfenbuettel): Mobile zentriert, Desktop links + Bild ─── */
/* Mobile: p + Stat-Grid + Stat-Icons wieder mittig */
.standort-page .lp-hero-2col > div:first-child > p { margin-left: auto; margin-right: auto; }
.standort-page .lp-hero-2col > div:first-child > .grid { margin-left: auto; margin-right: auto; }
.standort-page .lp-hero-2col > div:first-child > .grid svg { margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) {
  .standort-page .lp-hero > .lp-hero-2col { text-align: left; }
  .standort-page .lp-hero > .lp-hero-2col nav { justify-content: flex-start; }
  .standort-page .lp-hero > .lp-hero-2col .hero-cta-row { justify-content: flex-start; }
  .standort-page .lp-hero > .lp-hero-2col > div:first-child > p { margin-left: 0; margin-right: 0; }
  .standort-page .lp-hero > .lp-hero-2col > div:first-child > .grid { margin-left: 0; margin-right: 0; }
  .standort-page .lp-hero > .lp-hero-2col > div:first-child > .grid svg { margin-left: 0; margin-right: 0; }
  .lp-stadtwidget { display: none; }
}

/* ─── Ueber-uns Stats-Widget: auf Desktop volle Hero-Breite + 4 Spalten in einer Reihe (Handy unveraendert) ─── */
@media (min-width: 1024px) {
  .about-stats { max-width: none; }
  .about-stats-grid { grid-template-columns: repeat(4, 1fr); column-gap: 2rem !important; }
  .about-stats-grid > div { padding-left: 1.5rem; border-left: 1px solid rgba(255,255,255,.14); }
  .about-stats-grid > div:first-child { padding-left: 0; border-left: 0; }
}

/* ─── 4er-Stat-Row auf Desktop in EINE Reihe (kein 3+1-Umbruch), Handy unveraendert ─── */
@media (min-width: 1024px) {
  .st-4 { display: grid; grid-auto-flow: column; justify-content: center; align-items: start; }
  .st-4 > * { white-space: nowrap; }
}

/* Header: auf Desktop mehr Hoehe -> Logo + Button sitzen tiefer/luftiger (nur PC, Handy bleibt 72px) */
@media (min-width:1024px){
  .kf-headbar{ height:96px; }
}

/* Standort: Subheadline ("Alle Raeumungen in ...") etwas groesser */
.standort-page .loc-lead{ font-size:17px; line-height:1.72; }

/* Ratgeber-Artikel: Headlines + Fliesstext groesser, damit auch aeltere Leser gut lesen koennen.
   Scope per direkten Kindern von .max-w-3xl -> nur Prosa, nicht Karten-Texte oder Hero. */
.rg-center .max-w-3xl > p{ font-size:18px; line-height:1.78; }
.rg-center .max-w-3xl > h2{ font-size:1.7rem; line-height:1.3; }
@media (min-width:768px){
  .rg-center .max-w-3xl > p{ font-size:18.5px; }
  .rg-center .max-w-3xl > h2{ font-size:2rem; }
}

/* ─── Service-Seiten: Lead-Absatz (Subheadline) auf Desktop groesser + fett + kraeftig (Handy unveraendert) ─── */
@media (min-width: 1024px) {
  .lp-intro > div:first-child > p:first-of-type {
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--ink);
  }
}

/* ─── Anfrage-Form: Desktop-Auswahlkacheln dicker + frischer, weniger Leerraum ─── */
@media (min-width:1024px){
  /* dickere Kacheln, die die Karte fuellen (kein leerer Raum unten) */
  .kf-tiles{ grid-auto-rows:120px !important; gap:0.85rem; }
  .kf-tiles .choice-tile{ padding:0.7rem 0.6rem; gap:0.45rem; border-radius:18px; }
  /* frischer getoenter Chip hinter dem Icon */
  .kf-tiles .kf-tico{ width:48px; height:48px; border-radius:15px; background:rgba(var(--accent-rgb),.10); margin-bottom:.1rem; transition:background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
  .kf-tiles .kf-tico svg{ width:27px; height:27px; }
  .kf-tiles .choice-tile:hover .kf-tico{ background:rgba(var(--accent-rgb),.16); transform:translateY(-1px) scale(1.05); }
  .kf-tiles .choice-active .kf-tico{ background:var(--accent); color:#fff; }
  .kf-tiles .choice-tile > span:last-child{ font-size:13.5px; }
  /* Sonstiges-Button etwas kraeftiger, passend zu den dickeren Kacheln */
  #anfrage .choice-tile.w-full{ padding:0.9rem; font-size:13.5px; border-radius:16px; }
  /* Karte enger an den Inhalt -> deutlich weniger weisser Raum */
  .kf-card-stable{ min-height:498px; }
}

/* ─── Vorbereiten-Checkliste: 6 gleich grosse Karten (3x2) statt einsamer Karte + Vollbreite-Highlight; nur Desktop, nur diese Seite ─── */
@media (min-width: 1024px) {
  .chk-even > .sm\:col-span-2 { grid-column: auto; flex-direction: row; align-items: flex-start; text-align: left; }
}

/* ─── Footer-Grid: 4 Spalten in einer Reihe wie auf der Home. !important, weil auf den Unterseiten CDN-Tailwind sein md:grid-cols-2 spaeter injiziert und sonst gewinnt (2x2 statt 4er-Reihe). ─── */
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.25fr 0.9fr 0.9fr 1.55fr !important; }
}

/* ─── Hero-Trust-Pills (.hw) auf Desktop etwas groesser ─── */
@media (min-width: 1024px) {
  .hw-row { gap: 12px; }
  .hw { gap: 11px; padding: 12px 18px 12px 13px; border-radius: 18px; }
  .hw-ring, .hw-ico { width: 40px; height: 40px; }
  .hw__txt b { font-size: .92rem; }
  .hw__txt i { font-size: .78rem; margin-top: 3px; }
}

/* ─── Hero-Eyebrow-Badge auf Desktop groesser (nur PC) ─── */
@media (min-width: 1024px) {
  .hero-badge { padding: 9px 20px 9px 16px; gap: 11px; }
  .hero-badge__label { font-size: 13px; letter-spacing: .16em; }
  .hero-badge .dot-pulse { width: 8px; height: 8px; }
}

/* ─── Telefon-Widget als zweiter Hero-Button (.hw-cta) ─── */
/* volle Pillenform wie der gruene Primaer-Button (ueberschreibt .hw 18px auf Desktop) */
.hw-cta { padding: 11px 22px 11px 12px; border-radius: 9999px; }
@media (max-width: 640px) {
  .hw-cta {
    background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045)) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 20px 44px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.18) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    padding: 9px 18px 9px 12px !important; border-radius: 9999px; align-items: center; gap: 9px;
  }
  .hw-cta::before { display: none !important; }
  .hw-cta .hw-ico { display: grid !important; }
  .hw-cta .hw__txt { flex-direction: column; }
  .hw-cta .hw__txt b { font-size: .9rem; white-space: nowrap; }
  .hw-cta .hw__txt i { font-size: .72rem; color: rgba(255,255,255,.62); margin-top: 2px; white-space: nowrap; }
}

/* ─── Claude-Design Unterseiten: Breadcrumb + immersiver Artikel-Hero + TOC (aus dem Design uebernommen) ─── */
.crumb { display: inline-flex; align-items: center; gap: .5rem; font-size: 13px; color: var(--muted); }
.crumb a { color: var(--muted); transition: color .2s ease; }
.crumb a:hover { color: var(--accent-deep); }
.crumb svg { opacity: .5; }
.imm-hero { position: relative; min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; }
/* Hero-Inhalt exakt wie der Body zentrieren (max-w-7xl), nicht volle Breite */
.imm-hero > .relative { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; }
/* Badge-Pill (fehlte als Basis-Stil -> Eyebrows sahen wie kaputte Marker aus) */
.lp-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: 9999px; border: 1px solid rgba(16,185,129,.30); background: rgba(16,185,129,.10); font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); line-height: 1; }
.lp-badge .dot-pulse { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 9999px; background: var(--accent); }
.imm-hero > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imm-hero .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,17,15,0.94) 0%, rgba(13,17,15,0.5) 45%, rgba(13,17,15,0.28) 100%); }
@media (max-width: 768px) { .imm-hero { min-height: 520px; } }
.side-sticky { position: sticky; top: 96px; }
.toc a { display: block; padding: .4rem .85rem; border-left: 2px solid rgba(20,23,28,.10); color: var(--muted); font-size: 14px; line-height: 1.45; transition: all .2s ease; }
.toc a:hover { color: var(--accent-deep); border-color: rgba(16,185,129,.45); }
.toc a.is-active { color: var(--accent-deep); border-color: var(--accent); font-weight: 600; background: rgba(16,185,129,.06); }

/* Headline-Groesse fuer lp-hero Heros (war ohne Regel zu klein) */
.lp-hero h1 { font-size: clamp(2.15rem, 1.1rem + 3.6vw, 3.4rem); line-height: 1.06; }
/* CTA sec-green: Gitter-/Vier-Ecken-Hintergrund raus (passt nicht ins Konzept), nur sauberer Grün-Verlauf bleibt */
.sec-green::before { background-image: none !important; -webkit-mask-image: none !important; mask-image: none !important; }

/* Header-Logo stabil: keine Hoehen-Animation (verhinderte 'Logo riesig, schrumpft dann'-Sprung beim Seitenwechsel) + keine Verkleinerung beim Scrollen */
.nav-logo, .nav-bar { transition: none !important; }
.nav-scrolled .nav-logo { height: 3.5rem !important; }
.nav-scrolled .nav-bar { height: 72px !important; }
/* FAQ-Schrift auf Unterseiten an die Home angleichen (war zu gross) */
.lp-page .faq-acc summary, .lp-page .faq-acc > summary { font-size: 1.05rem !important; padding-top: 1.15rem !important; padding-bottom: 1.15rem !important; }
.lp-page .faq-acc__body p { font-size: 1rem !important; }

/* ── Blog/Ratgeber Editorial-Typografie (eb-prose) ── */
.eb-prose{max-width:720px;color:#3a424c;font-size:1.0625rem;line-height:1.78;}
.eb-prose > p{margin:0 0 1.35rem;}
.eb-prose .lead{font-size:1.28rem;line-height:1.6;color:#14171C;font-weight:500;margin:0 0 1.6rem;}
.eb-prose > h2{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:clamp(1.5rem,1.2rem + 1vw,1.85rem);color:#14171C;line-height:1.25;margin:2.6rem 0 1rem;letter-spacing:-0.01em;}
.eb-prose > h3{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:1.2rem;color:#14171C;margin:2rem 0 .7rem;}
.eb-prose > ul:not(.not-prose),.eb-prose > ol:not(.not-prose){margin:0 0 1.35rem;padding-left:1.3rem;}
.eb-prose > ul:not(.not-prose){list-style:disc;}
.eb-prose > ol:not(.not-prose){list-style:decimal;}
.eb-prose > ul:not(.not-prose) li,.eb-prose > ol:not(.not-prose) li{margin:0 0 .55rem;padding-left:.25rem;}
.eb-prose strong{color:#14171C;font-weight:600;}
.eb-prose a{color:#047857;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(16,185,129,.4);}
.eb-prose a:hover{text-decoration-color:#047857;}
.eb-quote{margin:1.9rem 0;padding:1.1rem 0 1.1rem 1.5rem;border-left:3px solid #10B981;font-family:'Archivo',system-ui,sans-serif;font-size:1.22rem;line-height:1.5;color:#14171C;font-weight:500;}
.toc a{display:block;padding:.34rem 0 .34rem .8rem;border-left:2px solid #e7ebe6;color:#6b727b;font-size:.92rem;line-height:1.35;text-decoration:none;transition:color .15s,border-color .15s;}
.toc a:hover{color:#14171C;}
.toc a.is-active{color:#047857;border-color:#10B981;font-weight:600;}
@media(max-width:1024px){.eb-prose{max-width:none;}}

.hero-card__stat{text-align:center;}
.hero-card__lbl{letter-spacing:.04em;}