/* ---------- Hausschrift Montserrat, selbst gehostet ----------
   Sechs Schnitte, auf den tatsächlich verwendeten Zeichenvorrat verkleinert
   (Latein, Latin Extended-A, Satzzeichen, Währung, Pfeile) — zusammen 89 KB
   statt gut 300 KB. Kein Drittanbieter, keine Einwilligung, ein
   Verbindungsaufbau weniger vor dem ersten Text.
   font-display:swap — lieber sofort Systemschrift als leere Fläche. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/montserrat-400-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/montserrat-600-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/montserrat-700-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/montserrat-800-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/montserrat-900-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:300;font-display:swap;
  src:url('../fonts/montserrat-300-italic.woff2') format('woff2')}

/* ==========================================================================
   My Car Service — Corporate Design "Clean Service"
   Eura Media e.U. · 2026
   ========================================================================== */

:root{
  /* Farben */
  --green:#2E8B34;
  --green-dark:#1E5F23;
  --green-soft:#F1F5F1;
  --green-tint:rgba(46,139,52,.10);
  --ink:#1C1F1D;
  --ink-soft:#3C443F;
  --grey:#67716C;
  --line:#E3E9E4;
  --bg-grey:#F6F8F6;
  --white:#fff;
  --warn:#B45309;

  /* Typografie */
  --f-head:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Laufweite: -30 (= -0.03em) auf Überschriften, -20 im Fließtext */
  --track-head:-.03em;
  --track-body:-.02em;

  /* Raster */
  --w:1180px;
  --pad:24px;
  --r-s:8px;
  --r-m:14px;
  --r-l:20px;
  --shadow:0 1px 2px rgba(28,31,29,.05),0 8px 24px -12px rgba(28,31,29,.14);
  --shadow-lg:0 2px 4px rgba(28,31,29,.05),0 22px 48px -18px rgba(28,31,29,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;font-family:var(--f-body);font-size:17px;line-height:1.68;
  letter-spacing:var(--track-body);
  color:var(--ink-soft);background:var(--white);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}   /* Browser-Standard 1em 40px zuruecksetzen */
a{color:var(--green-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--ink);margin:0 0 .5em;line-height:1.14;letter-spacing:var(--track-head);font-weight:900}
h1{font-size:clamp(30px,4.6vw,50px)}
h2{font-size:clamp(25px,3.2vw,36px)}
h3{font-size:clamp(19px,2vw,23px);font-weight:700}
h4{font-size:17px;font-weight:700}
/* Auszeichnungen innerhalb von Überschriften:
   .hl  = Schlüsselbegriff in Werkstattgrün
   .lt  = nachgestellte Angabe in Light Italic — schafft Kontrast zur Black-Schrift */
h1 .hl,h2 .hl,h3 .hl{color:var(--green)}
h1 .lt,h2 .lt,h3 .lt{font-weight:300;font-style:italic;letter-spacing:-.02em;color:var(--ink)}
h1 .lt-sm,h2 .lt-sm{font-size:.66em;line-height:1.2;display:inline-block;margin-top:.14em}
.section-dark h1 .hl,.section-dark h2 .hl{color:#6FC074}
.section-dark h1 .lt,.section-dark h2 .lt{color:#fff}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.25em}
li{margin-bottom:.45em}
strong,b{color:var(--ink);font-weight:700}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-body);font-weight:700;font-size:15.5px;line-height:1;
  padding:16px 26px;border-radius:var(--r-s);border:2px solid transparent;
  cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .16s;
  text-decoration:none!important;
}
.btn-primary{background:var(--green);color:#fff;border-color:var(--green)}
.btn-primary:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green);color:var(--green-dark)}
.btn-white{background:#fff;color:var(--ink);border-color:#fff}
.btn-white:hover{background:var(--green-soft);border-color:var(--green-soft)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-outline-white:hover{border-color:#fff;color:#fff}
.btn-sm{padding:12px 19px;font-size:14.5px}
.btn svg{width:18px;height:18px;flex:0 0 auto}

/* ---------- Topbar ---------- */
.topbar{background:var(--ink);color:#c3cbc6;font-size:13.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:42px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.topbar a{color:#e7ecea;font-weight:600}
.topbar .tb-items{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.topbar .tb-item{display:inline-flex;align-items:center;gap:7px}
.topbar svg{width:15px;height:15px;stroke:var(--green);flex:0 0 auto}
.topbar .tb-open{color:#8fce93;font-weight:600}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:76px}
.logo{display:inline-flex;align-items:center;text-decoration:none!important;flex:0 0 auto}
.logo picture{display:block}
.logo img{height:52px;width:auto;display:block}
@media(max-width:860px){.logo img{height:42px}}
@media(max-width:420px){.logo img{height:38px}}
.f-logo img{height:60px}

.nav{display:flex;align-items:center;gap:2px}
.nav a{
  font-size:15px;font-weight:600;color:var(--ink);padding:10px 10px;border-radius:var(--r-s);
  text-decoration:none!important;white-space:nowrap;transition:background .15s,color .15s;
}
.nav a:hover{background:var(--green-soft);color:var(--green-dark)}
.nav a[aria-current="page"]{color:var(--green-dark);background:var(--green-soft)}
.has-sub{position:relative}
.has-sub>button{
  font-family:var(--f-body);font-size:15px;font-weight:600;color:var(--ink);background:none;border:0;
  padding:10px 10px;border-radius:var(--r-s);cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.has-sub>button:hover{background:var(--green-soft);color:var(--green-dark)}
.has-sub>button svg{width:13px;height:13px;transition:transform .18s}
.has-sub[data-open="true"]>button svg{transform:rotate(180deg)}
.submenu{
  position:absolute;top:100%;left:0;min-width:600px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);box-shadow:var(--shadow-lg);padding:14px;display:none;
  grid-template-columns:1fr 1fr;gap:2px;
  /* Der Abstand zum Button wird als Innenabstand gesetzt, nicht als Lücke:
     so bleibt der Weg von der Schaltfläche zum Menü lückenlos überfahrbar.
     Mit einer echten Lücke verlässt der Zeiger .has-sub und das Menü klappt zu. */
  margin-top:0;padding-top:22px;
  background-clip:padding-box;
}
/* unsichtbare Brücke über die volle Breite der Schaltfläche */
.has-sub::after{
  content:"";position:absolute;left:0;top:100%;width:100%;height:12px;display:none;
}
.has-sub[data-open="true"]::after{display:block}
.has-sub[data-open="true"] .submenu{display:grid}
.submenu a{display:block;padding:10px 12px;font-size:14.5px;font-weight:600;border-radius:var(--r-s)}
.submenu a span{display:block;font-weight:400;font-size:12.5px;color:var(--grey);margin-top:2px;line-height:1.45}

.nav-cta{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-s);padding:10px;cursor:pointer}
.burger svg{width:22px;height:22px;stroke:var(--ink)}
/* Anrufen-Button im Kopfbereich nur als Icon: die vollständige Nummer steht
   direkt darüber in der Topbar, so bleibt die Navigation innerhalb des Rasters */
.nav-cta .btn-phone .lbl{display:none}
.nav-cta .btn-phone{padding:12px 13px;gap:0}

@media(max-width:1080px){
  /* Wichtig: Der Weichzeichner im Kopfbereich erzeugt einen eigenen Bezugsrahmen
     für position:fixed. Die Navigation richtete sich dadurch am 67 px hohen Kopf
     aus statt am Bildschirm und war nur als schmaler Streifen sichtbar, über den
     der Hero drüberlief. Auf Mobilgeräten deshalb ohne Weichzeichner. */
  .site-header{backdrop-filter:none;background:#fff}
  .nav{
    position:fixed;inset:0 0 0 auto;z-index:120;width:min(360px,88vw);background:#fff;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:calc(env(safe-area-inset-top,0px) + 22px) 20px calc(env(safe-area-inset-bottom,0px) + 32px);
    overflow-y:auto;overscroll-behavior:contain;border-left:1px solid var(--line);
    transform:translateX(100%);transition:transform .25s ease;box-shadow:var(--shadow-lg);
    visibility:hidden;
  }
  body[data-nav="open"] .nav{transform:translateX(0);visibility:visible}
  /* Abdunklung dahinter. Sie liegt bewusst INNERHALB des Kopfbereichs, weil
     dessen z-index:100 einen eigenen Stapelkontext aufspannt: nur von dort
     aus kann sie über der Seite und zugleich unter dem Menü liegen. */
  .nav-schleier{
    position:fixed;inset:0;z-index:110;
    background:rgba(12,18,14,.45);backdrop-filter:blur(2px);
    animation:nav-ein .2s ease-out;
  }
  body[data-nav="open"]{overflow:hidden}
  html.nav-offen{overflow:hidden}
  /* Schließen-Schaltfläche oben rechts im Panel */
  .nav-schliessen{
    display:flex;align-items:center;justify-content:center;align-self:flex-end;
    width:42px;height:42px;margin-bottom:10px;background:none;cursor:pointer;
    border:1px solid var(--line);border-radius:var(--r-s);
  }
  .nav-schliessen svg{width:20px;height:20px;stroke:var(--ink)}
  .nav a{padding:13px 14px;font-size:16.5px}
  .has-sub>button{width:100%;justify-content:space-between;padding:13px 14px;font-size:16.5px}
  .submenu{position:static;min-width:0;grid-template-columns:1fr;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;padding:2px 0 8px 12px;margin-left:14px}
  .submenu a span{display:none}
  .burger{display:inline-flex}
  .nav-cta .btn-phone{display:none}
}
@keyframes nav-ein{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .nav{transition:none}
  .nav-schleier{animation:none}
}
@media(min-width:1081px){.nav-schleier{display:none !important}}
@media(min-width:1081px){.nav-schliessen{display:none}}

/* ---------- Hero (vollbreit, helles Bild über die gesamte Fläche) ---------- */
.hero{
  position:relative;overflow:hidden;background:#F4F6F4;color:var(--ink);
  min-height:clamp(560px,80vh,780px);display:flex;align-items:center;
  border-bottom:3px solid var(--green);
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg picture{display:block;width:100%;height:100%}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:58% center}
/* Weicher weißer Verlauf nach links: hält den Text lesbar und lässt das
   Fahrzeug auf der rechten Seite unangetastet. */
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(95deg,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.82) 24%,
      rgba(255,255,255,.52) 42%,
      rgba(255,255,255,.16) 57%,
      rgba(255,255,255,0) 72%),
    radial-gradient(52% 70% at 96% 2%,rgba(46,139,52,.12) 0%,rgba(46,139,52,0) 70%);
}
.hero .wrap{position:relative;z-index:2;padding-top:80px;padding-bottom:80px;width:100%}
.hero-inner{max-width:560px}
/* Etwas leichter als die übrigen H1: Black wirkt in dieser Größe zu massiv */
.hero h1{color:var(--ink);margin-bottom:20px;font-weight:800}
.hero .lead{font-size:19px;color:var(--ink-soft);max-width:46ch;margin-bottom:30px}
.badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:8px 15px;border-radius:999px;margin-bottom:24px;
  box-shadow:0 8px 20px -10px rgba(46,139,52,.75);
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:0 0 auto}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.hero .btn-ghost{background:rgba(255,255,255,.82);border-color:#c8d4ca;color:var(--ink);backdrop-filter:blur(4px)}
.hero .btn-ghost:hover{border-color:var(--green);color:var(--green-dark);background:#fff}
.hero .stats{padding-top:28px;border-top:1px solid rgba(28,31,29,.14);gap:34px}
/* Die kleinen Versallabels laufen über farbige Bildbereiche — eine Stufe dunkler
   als sonst, damit sie überall die 4,5:1 der Barrierefreiheit erreichen */
.hero .stat span{color:var(--ink-soft)}
@media(max-width:1180px){
  .hero-inner{max-width:520px}
  .hero-veil{background:
    linear-gradient(95deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.86) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.18) 66%,rgba(255,255,255,0) 80%),
    radial-gradient(52% 70% at 96% 2%,rgba(46,139,52,.12) 0%,rgba(46,139,52,0) 70%)}
}
@media(max-width:980px) and (min-width:761px){
  .hero{min-height:clamp(520px,74vh,660px)}
  .hero .wrap{padding-top:56px;padding-bottom:56px}
  .hero-inner{max-width:none}
  .hero-bg img{object-position:64% center}
  .hero-veil{background:
    linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.90) 40%,rgba(255,255,255,.70) 74%,rgba(255,255,255,.40) 100%),
    radial-gradient(90% 46% at 84% 2%,rgba(46,139,52,.14) 0%,rgba(46,139,52,0) 72%)}
  .hero .lead{font-size:17.5px;max-width:none}
}
/* Auf schmalen Bildschirmen liegt das Foto hinter dem Text, aber nur mit
   30 % Deckkraft auf Weiß — der Text wirkt dadurch wie auf weißem Grund,
   das Bild bleibt als Andeutung erhalten. */
@media(max-width:760px){
  .hero{
    position:relative;display:flex;align-items:center;flex-direction:row;
    min-height:clamp(500px,74vh,640px);padding:0;background:#fff;
  }
  .hero-bg{position:absolute;inset:0;width:auto;opacity:.30}
  .hero-bg picture{height:100%}
  .hero-bg img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:82% center}
  .hero-veil{display:none}
  .hero .wrap{padding-top:48px;padding-bottom:48px}
  .hero-inner{max-width:none}
  .hero .lead{font-size:17.5px;max-width:none;color:#333B36}
  .hero .stats{padding-top:26px;gap:28px}
  .hero-actions{margin-bottom:32px}
  .hero-sub{min-height:clamp(380px,52vh,460px)}
}

/* ---------- Einwilligung (DSGVO) ---------- */
/* Das hidden-Attribut muss die Anzeige-Regel schlagen — sonst liegt die
   unsichtbare Überlagerung weiter über der Seite und fängt alle Klicks ab. */
[hidden]{display:none !important}
.consent{
  position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(12,18,14,.55);backdrop-filter:blur(3px);padding:var(--pad);
  animation:consent-ein .28s ease-out;
}
@keyframes consent-ein{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.consent{animation:none}}
body[data-consent="offen"],html.consent-offen{overflow:hidden}
.consent-box{
  background:#fff;border-radius:var(--r-l);width:100%;max-width:660px;
  padding:clamp(26px,3.4vw,40px);max-height:calc(100vh - var(--pad) * 2);overflow-y:auto;
  box-shadow:0 -4px 60px -12px rgba(8,18,10,.5);
}
.consent-box h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:14px}
.consent-text{font-size:15.5px;line-height:1.66;color:var(--ink-soft);margin-bottom:22px}
.consent-opts{border-top:1px solid var(--line);margin-bottom:22px}
.consent-opt{border-bottom:1px solid var(--line);padding:18px 0}
.consent-opt-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.consent-name{font-family:var(--f-head);font-weight:700;font-size:16px;color:var(--ink);
  letter-spacing:var(--track-head);cursor:pointer}
.consent-fix{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green-dark);background:var(--green-soft);border-radius:999px;padding:5px 11px}
/* Bei nur einer einwilligungspflichtigen Kategorie ersetzen die beiden
   Schaltflaechen den Schalter — deshalb hier nur eine neutrale Markierung. */
.consent-wahl{color:var(--grey);background:var(--bg-grey)}
.consent-opt p{font-size:14.5px;line-height:1.62;color:var(--grey);margin:0}
/* Schalter */
.schalter{position:relative;display:inline-block;width:50px;height:28px;flex:0 0 auto;cursor:pointer}
.schalter input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.schalter span{
  position:absolute;inset:0;background:#CFD8D1;border-radius:999px;transition:background .2s;
  pointer-events:none;
}
.schalter span::after{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.28);
}
.schalter input:checked + span{background:var(--green)}
.schalter input:checked + span::after{transform:translateX(22px)}
.schalter input:focus-visible + span{outline:3px solid var(--green-dark);outline-offset:2px}
/* Schaltflächen — Ablehnen ist bewusst genauso groß wie Akzeptieren */
.consent-acts{display:flex;gap:12px;flex-wrap:wrap}
.consent-acts .btn{flex:1 1 200px;justify-content:center}
.consent-mehr{
  display:block;margin:16px auto 0;background:none;border:0;padding:6px;cursor:pointer;
  font-family:var(--f-body);font-size:14.5px;color:var(--grey);text-decoration:underline;
  text-underline-offset:3px;
}
.consent-mehr:hover{color:var(--green-dark)}
.consent-fuss{margin:18px 0 0;text-align:center;font-size:13.5px;color:var(--grey)}
.consent-fuss a{color:var(--grey);text-decoration:underline;text-underline-offset:3px}
.consent-fuss a:hover{color:var(--green-dark)}
@media(max-width:560px){
  .consent{align-items:stretch;padding:0}
  .consent-box{max-width:none;border-radius:var(--r-l) var(--r-l) 0 0;max-height:92vh;margin-top:auto;
    padding-bottom:0}
  .consent-acts .btn{flex:1 1 100%}
  /* Die Schaltflaechen bleiben am unteren Rand stehen, auch wenn die
     Beschreibungstexte den Dialog laenger machen als der Bildschirm ist. */
  .consent-boden{
    position:sticky;bottom:0;background:#fff;padding:14px 0 clamp(20px,4vw,26px);
    box-shadow:0 -14px 20px -14px rgba(8,18,10,.22);
  }
  .consent-opts{margin-bottom:0}
}
/* Schalter in der Fußzeile */
.f-consent{
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--f-body);
  font-size:inherit;color:inherit;text-decoration:none;
}
.f-consent:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- Kontaktformular ---------- */
/* Bewusst kurz gehalten: vier Felder. Alles Weitere (Kennzeichen, Uhrzeit)
   klaert der Rueckruf schneller, als es jemand hier eintippt. */
.contact-form{max-width:520px}
.f-feld{margin-bottom:18px}
.f-feld label{display:block;margin-bottom:7px;font-size:15px;font-weight:600;color:var(--ink)}
.f-feld label span{color:var(--green);margin-left:2px}
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea{
  width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:10px;
  font:inherit;color:var(--ink);background:#fff;
  transition:border-color .16s,box-shadow .16s;
}
.contact-form textarea{resize:vertical;min-height:130px;line-height:1.6}
.contact-form select{appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2367716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(46,139,52,.16);
}
.contact-form ::placeholder{color:#9AA49E}
.f-recht{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:22px 0 20px}
.f-recht label{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.f-recht input{flex:0 0 auto;width:19px;height:19px;margin-top:2px;accent-color:var(--green)}
.f-hinweis{font-size:13.5px;color:var(--grey);margin-top:16px;margin-bottom:0}
.f-falle{position:absolute;left:-9999px}
.contact-form .btn{width:100%;justify-content:center}
@media(min-width:601px){.contact-form .btn{width:auto}}

/* ---------- Ratgeber: Kartenraster ---------- */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.art-karte{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;
  box-shadow:0 1px 2px rgba(28,31,29,.05);transition:box-shadow .22s,border-color .22s,transform .22s;
}
.art-karte:hover{border-color:rgba(46,139,52,.4);transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(28,31,29,.05),0 20px 38px -26px rgba(28,31,29,.45)}
.art-bild{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--green-soft)}
.art-bild picture{display:contents}
.art-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.art-karte:hover .art-bild img{transform:scale(1.04)}
.art-body{display:flex;flex-direction:column;flex:1;padding:24px}
.art-kat{
  display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--green-dark);
  background:var(--green-soft);border-radius:999px;padding:5px 11px;margin-bottom:14px;
}
.art-karte h3{font-size:20px;line-height:1.24;margin-bottom:10px}
.art-karte h3 a{color:var(--ink)}
.art-karte h3 a:hover{color:var(--green-dark)}
.art-karte p{font-size:15px;line-height:1.62;color:var(--ink-soft);margin-bottom:16px}
.art-meta{display:block;margin-top:auto;font-size:13px;color:var(--grey)}
.page-head .art-meta{margin-top:18px}
.art-grid-eng{grid-template-columns:repeat(var(--n),minmax(0,1fr));
  max-width:calc(var(--n) * 400px);margin-inline:auto}
@media(max-width:1000px){.art-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.art-grid{grid-template-columns:1fr}}

/* ---------- Ratgeber: Artikel ---------- */
.artikel .antwort{
  background:var(--green-soft);border-left:4px solid var(--green);
  padding:22px 26px;border-radius:0 var(--r-m) var(--r-m) 0;
  font-size:17.5px;line-height:1.65;margin-bottom:34px;
}
.toc{
  background:var(--bg-grey);border:1px solid var(--line);border-radius:var(--r-m);
  padding:22px 26px;margin:0 0 38px;
}
.toc-titel{
  display:block;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green);margin-bottom:12px;
}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0;padding:4px 0;font-size:15.5px}
.toc a{color:var(--ink-soft);text-decoration:none}
.toc a:hover{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
.artikel h2{scroll-margin-top:96px}
.artikel a:not(.btn){color:var(--green-dark);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(46,139,52,.35)}
.artikel a:not(.btn):hover{text-decoration-color:var(--green)}

/* ---------- Bild im Fließtext ---------- */
.inline-bild{margin:34px 0 38px}
.inline-bild picture{display:contents}
.inline-bild img{
  width:100%;height:auto;display:block;border-radius:var(--r-m);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(28,31,29,.05),0 20px 40px -30px rgba(28,31,29,.42);
}
.inline-bild figcaption{
  margin-top:13px;font-size:14.5px;line-height:1.55;color:var(--grey);
  padding-left:14px;border-left:3px solid var(--green);
}

/* ---------- Hero der Unterseiten ---------- */
/* Gleiche Bildsprache wie die Startseite, nur flacher — die Inhalte
   sollen frueher sichtbar sein als auf der Startseite. */
.hero-sub{min-height:clamp(420px,54vh,540px)}
/* Kräftigerer Schleier als auf der Startseite: die Motive der Unterseiten
   sind detailreicher und stellenweise dunkel. Gemessen gegen den dunkelsten
   Bildbereich unter der Schrift — Fließtext bleibt über 4,5:1, die Überschrift
   als Großtext über 3:1. */
.hero-sub .hero-veil{
  background:
    linear-gradient(95deg,
      rgba(255,255,255,.985) 0%,
      rgba(255,255,255,.975) 34%,
      rgba(255,255,255,.945) 50%,
      rgba(255,255,255,.72)  62%,
      rgba(255,255,255,.24)  74%,
      rgba(255,255,255,0)    86%),
    radial-gradient(52% 70% at 96% 2%,rgba(46,139,52,.12) 0%,rgba(46,139,52,0) 70%);
}
/* Textspalte etwas schmaler als auf der Startseite: die Zeilen enden früher
   und reichen nicht in den Bildbereich hinein. */
.hero-sub .hero-inner{max-width:520px}
.hero-sub .wrap{padding-top:56px;padding-bottom:56px}
.hero-sub h1{font-size:clamp(34px,4.4vw,60px)}
.hero-sub .lead{margin-bottom:28px}
.hero-sub .gbadge{margin-top:2px}
@media(max-width:1080px){.hero-sub{min-height:clamp(400px,50vh,500px)}}


/* ---------- Google-Bewertungsbadge ---------- */
.gbadge{
  display:inline-flex;align-items:center;gap:11px;
  background:#fff;border:1px solid #DADCE0;border-radius:999px;
  padding:9px 20px 9px 15px;margin-bottom:34px;
  text-decoration:none!important;letter-spacing:normal;
  box-shadow:0 1px 2px rgba(28,31,29,.06),0 12px 26px -16px rgba(28,31,29,.35);
  transition:box-shadow .18s,transform .18s,border-color .18s;
}
.gbadge:hover{
  border-color:#c6cbd1;transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(28,31,29,.07),0 16px 30px -16px rgba(28,31,29,.42);
}
.gbadge svg.g{width:20px;height:20px;flex:0 0 auto}
.gbadge .g-num{
  font-family:var(--f-head);font-weight:700;font-size:18px;color:#3C4043;
  letter-spacing:-.01em;line-height:1;
}
.gbadge .g-stars{display:inline-flex;gap:1.5px;align-items:center}
.gbadge .g-stars svg{width:15px;height:15px;display:block}
.gbadge .g-sep{width:1px;height:18px;background:#DADCE0;flex:0 0 auto}
.gbadge .g-cnt{font-size:13.5px;color:#5F6368;white-space:nowrap;line-height:1}
@media(max-width:440px){
  .gbadge{gap:8px;padding:9px 15px 9px 12px;margin-bottom:28px}
  .gbadge .g-sep{display:none}
  .gbadge .g-cnt{font-size:12.5px}
  .gbadge .g-stars svg{width:13px;height:13px}
}


/* ---------- Leistungs-Auswähler im Hero ---------- */
.quickpick{margin:0 0 26px}
.qp-inner{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 7px 7px 18px;max-width:100%;
  box-shadow:0 1px 2px rgba(28,31,29,.06),0 14px 30px -18px rgba(28,31,29,.4);
  transition:border-color .18s,box-shadow .18s;
}
.qp-inner:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(46,139,52,.16)}
.qp-ic{display:inline-flex;flex:0 0 auto}
.qp-ic svg{width:19px;height:19px;stroke:var(--green);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.quickpick select{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  font-family:var(--f-body);font-size:15.5px;font-weight:600;color:var(--ink);
  letter-spacing:var(--track-body);padding:10px 26px 10px 2px;min-width:200px;max-width:46vw;
  cursor:pointer;outline:none;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367716C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;background-size:15px;
}
.quickpick select option{color:var(--ink)}
.quickpick .btn{flex:0 0 auto;border-radius:999px;padding:13px 20px}
@media(max-width:620px){
  .quickpick{width:100%}
  .qp-inner{display:flex;width:100%;border-radius:14px;padding:8px 8px 8px 14px}
  .quickpick select{flex:1 1 auto;min-width:0;max-width:none;font-size:15px}
  .quickpick .btn{border-radius:10px;padding:12px 15px}
  .quickpick .btn svg{margin:0}
}
/* zwei Felder nebeneinander im Kontaktformular */
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:520px){.f-row{grid-template-columns:1fr}}

/* Kennzahlen */
.stats{display:flex;gap:40px;flex-wrap:wrap}
.stat b{display:block;font-family:var(--f-head);font-size:32px;font-weight:900;color:var(--green);line-height:1;letter-spacing:var(--track-head)}
.stat span{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);font-weight:600;margin-top:7px}

/* Header transparent über dem Hero, bis gescrollt wird */
body[data-hero="1"] .site-header{
  background:rgba(255,255,255,.97);
}

/* ---------- Sections ---------- */
.section{padding:80px 0}
.section-sm{padding:56px 0}
.section-grey{background:var(--bg-grey)}
.section-soft{background:var(--green-soft)}
.section-dark{background:var(--ink);color:#c3cbc6}
.section-dark h2,.section-dark h3{color:#fff}
.section-head{max-width:720px;margin-bottom:46px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green);margin-bottom:13px;
}
/* Versalsatz braucht positive Laufweite — die eigenen Werte der Elemente
   (.badge .11em, .kicker .15em, .logo-sub .26em …) gelten unverändert weiter.
   Nur Fließtext und Überschriften laufen negativ. */
.section-head p{font-size:18px;margin-bottom:0}
@media(max-width:760px){.section{padding:56px 0}}

/* ---------- Karten / Raster ---------- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:28px;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.card h3{margin-bottom:10px}
.card p{font-size:15.5px;margin-bottom:0;color:var(--grey)}
.card-link{
  display:block;text-decoration:none!important;color:inherit;
  position:relative;overflow:hidden;isolation:isolate;
}
/* grüner Balken, der beim Überfahren von links einläuft */
.card-link::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--green);
  transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.card-link:hover::after,.card-link:focus-visible::after{transform:scaleX(1)}
.card-link h3{transition:color .18s}
.card-link .icon-box{transition:background .2s,transform .2s}
.card-link .icon-box svg{transition:stroke .2s}
.card-link:hover,.card-link:focus-visible{
  border-color:var(--green);transform:translateY(-4px);
  background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--green-soft) 100%);
  box-shadow:0 2px 4px rgba(28,31,29,.05),0 20px 38px -22px rgba(46,139,52,.55);
}
.card-link:hover .icon-box,.card-link:focus-visible .icon-box{background:var(--green);transform:scale(1.06)}
.card-link:hover .icon-box svg,.card-link:focus-visible .icon-box svg{stroke:#fff}
.card-link:hover h3,.card-link:focus-visible h3{color:var(--green-dark)}
.card-link .more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:14.5px;font-weight:700;color:var(--green-dark);transition:gap .18s;
}
.card-link .more svg{width:15px;height:15px;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.card-link:hover .more svg,.card-link:focus-visible .more svg{transform:translateX(5px)}
/* Auf dunklem Grund den Verlauf weglassen */
.section-dark .card-link:hover{background:#232725}
.icon-box{
  width:50px;height:50px;border-radius:12px;background:var(--green-soft);
  display:grid;place-items:center;margin-bottom:18px;
}
.icon-box svg{width:25px;height:25px;stroke:var(--green);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.section-dark .card{background:#232725;border-color:#333935}
.section-dark .card p{color:#a3aca7}
.section-dark .icon-box{background:rgba(46,139,52,.16)}
.section-dark .icon-box svg{stroke:#6fc074}

/* ---------- Leistungsliste ---------- */
.tick-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 30px}
.tick-list li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);font-size:15.5px;margin:0}
.tick-list svg{width:19px;height:19px;flex:0 0 auto;margin-top:3px;stroke:var(--green);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){.tick-list{grid-template-columns:1fr}}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.step{position:relative;padding-top:8px}
.step-n{
  width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-family:var(--f-head);font-weight:800;font-size:18px;margin-bottom:16px;letter-spacing:0;
}
.step h3{font-size:18.5px;margin-bottom:8px}
.step p{font-size:15px;color:var(--grey);margin:0}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}


/* ---------- Ablauf-Abschnitt, weiße Fläche ---------- */
.flow{background:#fff;color:var(--ink-soft);padding:clamp(66px,7vw,110px) 0;border-top:1px solid var(--line)}
.flow-head{text-align:center;margin-bottom:clamp(46px,5.4vw,78px)}
.flow-head .k{
  display:block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);margin-bottom:clamp(18px,2vw,26px);
}
.flow-head h2{
  color:var(--ink);font-weight:900;letter-spacing:-.035em;line-height:1.0;
  font-size:clamp(38px,7.2vw,94px);margin:0 auto 22px;max-width:14ch;
}
.flow-head h2 .lt{font-weight:300;font-style:italic;letter-spacing:-.02em;color:var(--grey)}
.flow-head h2 .hl{color:var(--green)}
.flow-head .sub{
  color:var(--ink-soft);font-size:clamp(15.5px,1.4vw,17.5px);
  max-width:60ch;margin:0 auto;
}
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.flow-item{padding:0 clamp(18px,2vw,30px)}
.flow-item+.flow-item{border-left:1px solid var(--line)}
.flow-item:first-child{padding-left:0}
.flow-item:last-child{padding-right:0}
.flow-n{
  display:block;font-family:var(--f-head);font-weight:800;font-size:15px;
  color:var(--green-dark);margin-bottom:clamp(20px,2.4vw,34px);letter-spacing:.02em;
}
.flow-k{
  display:block;font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--grey);margin-bottom:10px;
}
.flow-item h3{color:var(--ink);font-weight:800;font-size:clamp(19px,1.7vw,24px);margin-bottom:11px}
.flow-item p{font-size:14.5px;line-height:1.62;color:var(--grey);margin:0}
@media(max-width:900px){
  .flow-grid{grid-template-columns:1fr 1fr;gap:36px 0}
  .flow-item{padding:0 20px}
  .flow-item:nth-child(odd){padding-left:0;border-left:0}
  .flow-item:nth-child(even){border-left:1px solid var(--line)}
}
@media(max-width:560px){
  .flow-grid{grid-template-columns:1fr;gap:0}
  .flow-item,.flow-item:nth-child(odd),.flow-item:nth-child(even){
    padding:0 0 26px 20px;border-left:1px solid var(--line);
  }
  .flow-item:last-child{padding-bottom:0}
  .flow-n{margin-bottom:12px}
}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* Zwei Textspalten nebeneinander: oben buendig statt mittig, sonst haengt
   die kuerzere Spalte in der Luft. Trennlinie nur auf breiten Schirmen. */
.split-text{align-items:start;gap:clamp(40px,4.4vw,64px)}
/* Formular oben auf der Kontaktseite: oben buendig, damit Ueberschrift
   und Anfahrt auf derselben Linie beginnen. */
.split-oben{align-items:start}
@media(min-width:901px){
  .split-text>*+*{padding-left:clamp(40px,4.4vw,64px);border-left:1px solid var(--line);
    margin-left:calc(clamp(40px,4.4vw,64px) * -1)}
}
.split-text .prose>h2:first-child{margin-top:0}
.split-media{border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;background:var(--bg-grey);box-shadow:var(--shadow)}
.split-media img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}}


/* ---------- Halbseitiger Bildabschnitt (Bild randlos, Text daneben) ---------- */
.split-full{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  background:var(--bg-grey);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.split-full .sf-media{position:relative;min-height:540px;overflow:hidden;background:var(--green-soft);margin:0}
.split-full .sf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;object-position:center 34%}
.split-full .sf-media picture{display:contents}
.split-full .sf-body{
  display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(52px,6vw,92px);padding-bottom:clamp(52px,6vw,92px);
  /* links Abstand zum Bild, rechts bündig mit dem Inhaltsraster der Seite */
  padding-left:clamp(28px,4.4vw,64px);
  padding-right:max(var(--pad),calc((100vw - var(--w)) / 2 + var(--pad)));
}
.split-full .sf-body>*:last-child{margin-bottom:0}
.split-full .sf-body .tick-list{margin-bottom:0}

/* Bildunterschrift links unten im halbseitigen Bild */
.sf-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(26px,3.2vw,46px);
  /* Bis zur Oberkante der Kicker-Zeile mindestens 0,72 Deckung: darunter
     faellt der helle Grünton auf hellen Bildstellen unter 4,5:1. */
  background:linear-gradient(0deg,
    rgba(8,18,10,.93) 0%,rgba(8,18,10,.86) 46%,rgba(8,18,10,.72) 74%,
    rgba(8,18,10,.34) 90%,rgba(8,18,10,0) 100%);
  color:#fff;pointer-events:none;letter-spacing:normal;
}
.sf-caption .k{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:12px;
  font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:#C9F5CE;
}
.sf-caption .k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}
.sf-caption .t{
  display:block;font-family:var(--f-head);font-weight:800;
  font-size:clamp(22px,2.3vw,30px);line-height:1.12;letter-spacing:-.03em;
  color:#fff;margin-bottom:7px;
}
.sf-caption .t em{font-style:normal;color:#6FC074}
.sf-caption .s{display:block;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.84)}
@media(max-width:900px){
  .sf-caption{padding:22px var(--pad)}
  .sf-caption .t{font-size:21px}
  .sf-caption .s{font-size:13.5px}
}


/* Aufgesetzte Plakette im halbseitigen Bild */
/* Höhere Spezifität als die Regel für das Hintergrundbild darüber */
.split-full .sf-media img.sf-seal{
  position:absolute;z-index:3;
  inset:auto clamp(22px,2.6vw,40px) auto auto;
  top:clamp(30px,3.2vw,48px);
  width:clamp(94px,10.5vw,148px);height:auto;
  object-fit:contain;
  filter:drop-shadow(0 12px 26px rgba(8,18,10,.45));
  transform:rotate(-4deg);pointer-events:none;
}
@media(max-width:900px){
  .split-full .sf-media img.sf-seal{width:84px;inset:auto 18px auto auto;top:24px}
}
/* grüne Tönung als Abwechslung zum grauen Abschnitt darüber */
.split-full.soft{background:var(--green-soft)}

/* Bild rechts statt links */
.split-full.reverse .sf-media{order:2}
.split-full.reverse .sf-body{
  order:1;
  padding-right:clamp(28px,4.4vw,64px);
  padding-left:max(var(--pad),calc((100vw - var(--w)) / 2 + var(--pad)));
}
@media(max-width:1200px){
  .split-full .sf-body .tick-list{grid-template-columns:1fr}
}
@media(max-width:900px){
  .split-full{grid-template-columns:1fr}
  .split-full .sf-media{min-height:0;aspect-ratio:16/10}
  .split-full.reverse .sf-media{order:0}
  .split-full.reverse .sf-body{order:0}
  .split-full .sf-body,.split-full.reverse .sf-body{padding:48px var(--pad)}
}



/* ---------- Breiter Zweispalter im Raster (Bild + Text in einer Karte) ---------- */
.feature{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 1px 2px rgba(28,31,29,.05),0 22px 44px -30px rgba(28,31,29,.4);
}
.feature-media{position:relative;margin:0;overflow:hidden;background:var(--green-soft);min-height:420px}
.feature-media picture{display:contents}
.feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.feature-media img.duo-seal{
  position:absolute;z-index:3;inset:auto 20px auto auto;top:20px;
  width:clamp(74px,7vw,104px);height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(8,18,10,.45));transform:rotate(-4deg);pointer-events:none;
}
.feature-body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,3.2vw,52px);
}
.feature-body>*:last-child{margin-bottom:0}
.feature-body .tick-list:last-child{margin-bottom:0}
.feature.reverse .feature-media{order:2}
.feature.reverse .feature-body{order:1}
@media(max-width:1100px){.feature-body .tick-list{grid-template-columns:1fr}}
@media(max-width:900px){
  .feature{grid-template-columns:1fr}
  .feature-media{min-height:0;aspect-ratio:16/10}
  .feature.reverse .feature-media,.feature.reverse .feature-body{order:0}
  .feature-body{padding:28px 24px}
}

/* ---------- Zwei Karten nebeneinander im Raster ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.duo-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(28,31,29,.05),0 18px 36px -26px rgba(28,31,29,.35);
}
.duo-media{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--green-soft)}
.duo-media picture{display:contents}
.duo-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.duo-media img.duo-seal{
  position:absolute;z-index:3;inset:auto 18px auto auto;top:18px;
  width:clamp(66px,6vw,86px);height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(8,18,10,.45));transform:rotate(-4deg);pointer-events:none;
}
.duo-media .sf-caption{padding:clamp(18px,2vw,26px)}
.duo-media .sf-caption .t{font-size:clamp(19px,1.7vw,23px);margin-bottom:5px}
.duo-media .sf-caption .s{font-size:13.5px}
.duo-media .sf-caption .k{margin-bottom:9px}
.duo-body{padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;flex:1 1 auto}
.duo-body h2{font-size:clamp(23px,2.3vw,30px);margin-bottom:12px}
.duo-body p{font-size:16px;margin-bottom:18px}
.duo-body .tick-list{grid-template-columns:1fr;margin-bottom:24px}
.duo-body .tick-list li{font-size:15px;padding:8px 0}
.duo-body .btn{margin-top:auto;align-self:flex-start}
@media(max-width:900px){
  .duo{grid-template-columns:1fr;gap:22px}
  .duo-media{aspect-ratio:16/10}
}

/* ---------- CTA-Streifen, randlos über die volle Breite ---------- */
/* Dunkleres Grün: Fließtext in Weiß erreicht darauf 7,7:1 statt 4,3:1 */
.cta-full{background:var(--green-dark);color:#fff}
/* Das grüne Akzentwort wäre auf grünem Grund unsichtbar */
.cta-full .hl{color:#D9FADD}
.cta-full .lt{color:rgba(255,255,255,.92)}
.cta-full .cta-inner{
  display:grid;grid-template-columns:1.4fr auto;gap:38px;align-items:center;
  padding-top:clamp(56px,5.2vw,78px);padding-bottom:clamp(56px,5.2vw,78px);
}
.cta-full h2{color:#fff;margin-bottom:12px}
.cta-full p{color:#fff;font-size:17.5px;margin:0;max-width:56ch}
.cta-full .acts{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:860px){
  .cta-full .cta-inner{grid-template-columns:1fr;gap:26px;padding-top:44px;padding-bottom:44px}
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--f-head);font-weight:700;font-size:17.5px;color:var(--ink);letter-spacing:var(--track-head);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:26px;width:11px;height:11px;
  border-right:2.5px solid var(--green);border-bottom:2.5px solid var(--green);
  transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq .answer{padding:0 40px 22px 0;font-size:16px;color:var(--ink-soft)}
.faq .answer p:last-child{margin-bottom:0}

/* <picture> darf das Layout des <figure> nicht beeinflussen */
figure picture{display:contents}

/* ---------- Einleitungstext Startseite ---------- */
.intro{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.intro-head h2{margin-bottom:0}
.intro-text p{font-size:17.5px;line-height:1.72;color:var(--ink-soft)}
.intro-text p:last-child{margin-bottom:0}
.intro-text a{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(46,139,52,.35)}
.intro-text a:hover{text-decoration-color:var(--green)}
@media(max-width:900px){.intro{grid-template-columns:1fr;gap:22px}}
/* trennt den Einleitungstext vom Standortblock darunter */
.intro-trenner{height:1px;background:var(--line);margin:clamp(38px,4.4vw,60px) 0}

/* ---------- Anfahrt ---------- */
.anfahrt{list-style:none;margin:20px 0 0;padding:0}
.anfahrt li{position:relative;padding:0 0 12px 22px;font-size:16px;color:var(--ink-soft);line-height:1.62}
.anfahrt li:last-child{padding-bottom:0}
.anfahrt li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--green)}
.anfahrt strong{color:var(--ink)}

/* ---------- Kundenstimmen ---------- */
.voices{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.voice{
  margin:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);padding:26px 24px 24px;
  box-shadow:0 1px 2px rgba(28,31,29,.05);transition:box-shadow .22s,border-color .22s,transform .22s;
}
.voice:hover{border-color:rgba(46,139,52,.4);transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(28,31,29,.05),0 18px 34px -24px rgba(28,31,29,.42)}
.v-stars{display:flex;gap:2px;color:#F5A623;margin-bottom:15px}
.v-stars svg{width:16px;height:16px;display:block}
.voice blockquote{margin:0 0 20px;font-size:15.5px;line-height:1.66;color:var(--ink-soft);
  letter-spacing:var(--track-body)}
.voice blockquote::before{content:"„"}
.voice blockquote::after{content:"“"}
.voice figcaption{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px}
.v-name{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--ink);
  letter-spacing:var(--track-head)}
.v-role{font-size:12.5px;color:var(--grey)}
.voices-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.voices{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.voices{grid-template-columns:1fr}}

/* ---------- Breadcrumb ---------- */
.crumbs{background:var(--bg-grey);border-bottom:1px solid var(--line);font-size:13.5px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:13px 0;margin:0}
.crumbs li{margin:0;color:var(--grey);display:flex;gap:8px;align-items:center}
.crumbs li+li::before{content:"›";color:var(--line);font-size:16px}
.crumbs a{color:var(--grey);font-weight:600}
.crumbs a:hover{color:var(--green-dark)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ---------- Seitenkopf ---------- */
.page-head{background:linear-gradient(165deg,var(--green-soft) 0%,#fff 70%);padding:52px 0 46px;border-bottom:1px solid var(--line)}
.page-head p.lead{font-size:18.5px;max-width:62ch;margin-bottom:0;color:var(--ink-soft)}
.page-head .hero-actions{margin-top:26px;margin-bottom:0}
/* Kopf mit Bild daneben: Text links, Bild rechts. Etwas mehr Luft nach oben
   und unten, weil das Bild hoeher baut als der reine Textkopf. */
.page-head-duo{padding:60px 0 56px}
.ph-duo{display:grid;grid-template-columns:1fr .82fr;gap:clamp(32px,4vw,56px);align-items:center}
.ph-duo .ph-text>*:last-child{margin-bottom:0}
.ph-duo h1{margin-bottom:18px}
.ph-duo p.lead{max-width:46ch}
.ph-bild{box-shadow:0 24px 48px -26px rgba(8,18,10,.42)}
@media(max-width:900px){
  .page-head-duo{padding:44px 0 40px}
  .ph-duo{grid-template-columns:1fr;gap:28px}
  .ph-duo .ph-bild{order:-1}
}

/* ---------- Inhalt (Prosa) ---------- */
.prose{font-size:17px}
.prose h2{margin-top:2em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.7em}
.prose>*:first-child{margin-top:0}
.prose ul li::marker{color:var(--green)}
.note{
  border-left:4px solid var(--green);background:var(--green-soft);
  padding:20px 24px;border-radius:0 var(--r-m) var(--r-m) 0;margin:28px 0;font-size:16px;
}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--green-dark)}
.price-table{width:100%;border-collapse:collapse;margin:26px 0;font-size:16px}
.price-table th,.price-table td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line)}
.price-table th{font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:14.5px;letter-spacing:.03em;text-transform:uppercase}
.price-table td:last-child{text-align:right;font-weight:700;color:var(--ink);white-space:nowrap}

/* ---------- Sidebar-Layout ---------- */
.with-aside{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start}
.aside-card{background:var(--bg-grey);border:1px solid var(--line);border-radius:var(--r-m);padding:26px;position:sticky;top:100px}
.aside-card h3{font-size:19px;margin-bottom:14px}
.aside-card .btn{width:100%;margin-bottom:10px}
.aside-list{list-style:none;padding:0;margin:0}
.aside-list li{border-bottom:1px solid var(--line);margin:0}
.aside-list li:last-child{border-bottom:0}
.aside-list a{display:block;padding:11px 0;font-size:15px;font-weight:600;color:var(--ink)}
.aside-list a:hover{color:var(--green-dark)}
.aside-list a[aria-current="page"]{color:var(--green-dark)}
@media(max-width:1000px){
  .with-aside{grid-template-columns:1fr;gap:40px}
  .aside-card{position:static}
}

/* ---------- Kontaktblöcke ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.info-grid{grid-template-columns:1fr}}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:26px}
.info-card h3{font-size:18px;margin-bottom:12px}
.info-card p,.info-card a{font-size:16px}
.hours{list-style:none;padding:0;margin:0}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15.5px;margin:0}
.hours li:last-child{border-bottom:0}
.hours .d{color:var(--grey)}
.hours .t{font-weight:600;color:var(--ink);text-align:right;white-space:nowrap}
.map-embed{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);background:var(--bg-grey);min-height:340px;display:grid;place-items:center;text-align:center;padding:30px}
.map-embed iframe{width:100%;height:420px;border:0;display:block}

/* ---------- Marken ---------- */
.brands{display:flex;flex-wrap:wrap;gap:10px}
.brand{
  border:1px solid var(--line);border-radius:999px;padding:9px 17px;font-size:14.5px;font-weight:600;
  color:var(--ink);background:#fff;
}

/* ---------- Bezirke ---------- */
.areas{display:flex;flex-wrap:wrap;gap:9px}
.areas span{background:var(--green-soft);border-radius:var(--r-s);padding:8px 14px;font-size:14.5px;font-weight:600;color:var(--green-dark)}

/* ---------- Bewertungen ---------- */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:26px}
.quote .stars{color:#F0A202;font-size:16px;letter-spacing:2px;margin-bottom:12px}
.quote p{font-size:16px;color:var(--ink-soft);font-style:italic;margin-bottom:16px}
.quote .who{font-size:14px;font-weight:700;color:var(--ink);font-style:normal}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#98a29d;padding:64px 0 0;font-size:15px}
.site-footer h4{color:#fff;font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;font-family:var(--f-body);font-weight:700}
.site-footer a{color:#c3cbc6}
.site-footer a:hover{color:#fff}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:52px}
@media(max-width:980px){.f-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:600px){.f-grid{grid-template-columns:1fr}}
.f-list{list-style:none;padding:0;margin:0}
.f-list li{margin-bottom:10px}
/* Öffnungszeiten im dunklen Footer: Werte und Trennlinien umfärben */
.site-footer .hours li{border-bottom-color:#2c322e}
.site-footer .hours .d{color:#98a29d}
.site-footer .hours .t{color:#fff}
.f-bottom{border-top:1px solid #2c322e;padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px}
.f-bottom a,.f-bottom .f-consent{margin-right:18px}
.f-agentur{display:inline-block;margin-top:6px;font-size:13px;color:#868f88}  /* 4,99:1 auf dem Anthrazit der Fußzeile */
.f-agentur a{margin-right:0;color:#98a29d;text-decoration:underline;text-underline-offset:3px}
.f-agentur a:hover{color:#fff}
.f-contact li{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px}
.f-contact svg{width:17px;height:17px;stroke:var(--green);fill:none;stroke-width:1.8;flex:0 0 auto;margin-top:4px}

/* ---------- Sticky Mobile-CTA ---------- */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);
  padding:10px 14px;gap:10px;box-shadow:0 -6px 22px -14px rgba(28,31,29,.5);
}
.mobile-cta .btn{flex:1;padding:14px 12px;font-size:15px}
@media(max-width:760px){.mobile-cta{display:flex}body{padding-bottom:74px}}

/* ---------- Mobile-Feinschliff ---------- */
@media(max-width:860px){
  .topbar .tb-items:last-child{display:none}      /* Öffnungszeiten stehen im Footer */
  .topbar{font-size:12.5px}
  .topbar .wrap{gap:10px}
  .site-header .wrap{min-height:66px;gap:12px}
  .logo svg{width:34px;height:21px}
  .logo-txt{font-size:18.5px}
  .logo-sub{font-size:7.5px;letter-spacing:.2em}
  .nav-cta .btn-primary{display:none}             /* CTA liegt fix am unteren Rand */
  .stats{gap:26px}
  .stat b{font-size:27px}
  .hero .lead{font-size:17.5px}
  .cta-band{text-align:left}
}
@media(max-width:420px){
  body{font-size:16px}
  .topbar .tb-item:nth-child(2){display:none}
  .logo-sub{display:none}
  .btn{padding:14px 20px;font-size:15px}
}

@media print{.site-header,.topbar,.mobile-cta,.site-footer,.cta-band{display:none!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}