/* ---------- 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')}

/* ==========================================================================
   Carparatur — Corporate Design "Gelb/Anthrazit"
   Eura Media e.U. · 2026
   ========================================================================== */

:root{
  /* Farben */
  /* Carparatur: Gelb ist eine helle Farbe. Deshalb gilt durchgehend
     schwarze Schrift auf Gelb und weisse Schrift auf Anthrazit.
     --green* behalten ihre Namen, damit das Stylesheet unveraendert bleibt. */
  --green:#FDCD33;            /* Markengelb, immer mit dunkler Schrift */
  --green-dark:#343434;       /* Anthrazit, immer mit heller Schrift */
  --green-soft:#FFF7DE;       /* heller Gelbton fuer Flaechen */
  --green-tint:rgba(253,205,51,.16);
  --brand-mark:#FDCD33;       /* Gelb als Auszeichnung im Text */
  --on-brand:#1C1F1D;         /* Schrift auf Gelb */
  --ink:#1C1F1D;
  --ink-soft:#3C443F;
  --grey:#6E6E6E;
  --line:#E6E4DF;
  --bg-grey:#F7F6F3;
  --white:#fff;
  --warn:#B45309;

  /* Typografie */
  --f-head:'Montserrat','Montserrat Ersatz',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Montserrat','Montserrat Ersatz',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:clip}
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:clip;
}
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:#FDCD33}
.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:var(--on-brand);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:var(--on-brand);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:var(--on-brand);
  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(52,52,52,.45);
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--on-brand);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-dark)}
.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(52,52,52,.45);
}
.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:var(--on-brand)}
.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(253,205,51,.18)}
.section-dark .icon-box svg{stroke:#FDCD33}

/* ---------- 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:var(--on-brand);
  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:#FDCD33}
.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:#FDCD33}
.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}}

/* ==========================================================================
   Carparatur — Anpassungen an das gelbe Markenbild
   Gelb #FDCD33 hat auf Weiß nur 1,6:1 Kontrast und taugt deshalb nicht als
   Textfarbe. Die Hausregel "Farbwechsel plus Schriftwechsel" in Überschriften
   bleibt trotzdem erhalten: das Akzentwort steht schwarz auf einer gelben
   Auszeichnung, das nachgestellte Wort weiterhin in Light Italic.
   ========================================================================== */

/* Akzentwort in Überschriften: schwarz mit gelber Unterlegung */
h1 .hl, h2 .hl, h3 .hl{
  color:var(--ink);
  background-image:linear-gradient(var(--brand-mark),var(--brand-mark));
  background-repeat:no-repeat;
  background-size:100% .30em;
  background-position:0 88%;
  padding:0 .06em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
/* Auf dunklem Grund und im CTA-Band steht das Akzentwort gelb, ohne Unterlegung */
.section-dark h1 .hl,.section-dark h2 .hl,.section-dark h3 .hl,
.cta-full .hl{ background-image:none; padding:0; color:#FDCD33 }

/* Textfarben, die vorher Dunkelgrün waren: auf Weiß jetzt Anthrazit */
.nav a:hover,.nav a[aria-current="page"],.has-sub>button:hover,
.card-link:hover h3,.card-link:focus-visible h3,.card-link .more,
.hero .btn-ghost:hover,.areas span{ color:var(--ink) }

/* Icons und Haken: Anthrazit auf hellem Grund liest sich besser als Gelb */
.icon-box svg,.tick-list svg{ stroke:var(--ink) }
.icon-box{ background:var(--green-soft) }

/* Aufzählungspunkte und Zierlinien bleiben gelb — dort trägt die Farbe */
.anfahrt li::before,.sf-caption .k::before{ background:var(--brand-mark) }

/* Dunkles Band: Anthrazit statt Dunkelgrün, Fließtext weiß */
.cta-full{ background:var(--green-dark); color:#fff }
.cta-full .lt{ color:rgba(255,255,255,.92) }

/* Primärbutton auf dunklem Grund: gelb mit schwarzer Schrift, das ist der
   stärkste Kontrast, den die Marke hergibt */
.cta-full .btn-primary,.section-dark .btn-primary{
  background:var(--brand-mark); color:var(--on-brand); border-color:var(--brand-mark)
}
.cta-full .btn-primary:hover,.section-dark .btn-primary:hover{
  background:#fff; border-color:#fff; color:var(--ink)
}

/* Notizkästen: gelber Balken, heller Grund */
.note{ border-left-color:var(--brand-mark); background:var(--green-soft) }

/* Rundes Emblem statt Wortmarke: etwas größer, damit die Schrift darin lesbar bleibt */
/* --------------------------------------------------------------------------
   Logo ueberragt die Kopfzeile.
   Das Bild ist absolut positioniert und liegt damit ausserhalb des Flusses —
   die Kopfzeile bleibt exakt 77 px hoch, egal wie gross das Emblem wird.
   .logo reserviert nur die Breite, damit die Navigation nicht darunterrutscht.
   Ueberstand nach unten = --hoehe minus Kopfzeilenhoehe.
   Alles steuert --hoehe: eine Zahl aendern genuegt.
   -------------------------------------------------------------------------- */
.logo{
  --hoehe:120px;
  position:relative;z-index:3;
  align-self:stretch;                 /* volle Kopfzeilenhoehe als Bezug */
  width:var(--hoehe);
  display:block;
}
.logo picture{
  position:absolute;left:0;top:2px;   /* buendig unter der schwarzen Topleiste */
  width:var(--hoehe);height:var(--hoehe);
  filter:drop-shadow(0 12px 26px rgba(28,31,29,.26));
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.logo img{ height:100%;width:100% }
.logo:hover picture{ transform:translateY(-2px) }

/* Beim Scrollen zieht sich das Emblem in die Kopfzeile zurueck, damit es
   keinen Fliesstext verdeckt. Der Uebergang laeuft auf Breite, Hoehe und
   Position — deshalb sind sie einzeln aufgefuehrt. */
.logo,.logo picture{
  transition:width .28s cubic-bezier(.2,.7,.3,1),height .28s cubic-bezier(.2,.7,.3,1),
             top .28s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1),
             filter .28s ease;
}
html.kopf-klein .logo{ --hoehe:64px }
html.kopf-klein .logo picture{ top:7px;filter:drop-shadow(0 4px 10px rgba(28,31,29,.14)) }
@media(prefers-reduced-motion:reduce){ .logo,.logo picture{ transition:none } }
.site-header{ overflow:visible }
.f-logo img{ height:76px }

/* Die Brotkruemel liegen direkt unter der Kopfzeile — dort haengt das Logo
   hinein. Der Text rueckt deshalb um die Logobreite nach rechts und beginnt
   damit buendig unter der Navigation. */
.crumbs ol{ padding-left:calc(var(--logo-breite, 120px) + 22px) }
.crumbs{ --logo-breite:120px }

@media(max-width:1000px){ .logo{ --hoehe:104px } .crumbs{ --logo-breite:104px } }
@media(max-width:860px){  .logo{ --hoehe:88px }  .crumbs{ --logo-breite:88px } }
@media(max-width:560px){
  /* Auf dem Handy ist die Zeile zu schmal fuer den Einzug — die Brotkruemel
     ruecken stattdessen unter das Logo. */
  .logo{ --hoehe:76px }
  .crumbs ol{ padding-left:0;padding-top:20px }
}
@media(max-width:420px){  .logo{ --hoehe:68px } }

/* --------------------------------------------------------------------------
   "So läuft es ab": Akzentwort bleibt gelb, darunter ein schwarzer Unterstrich.
   Nicht ueber background-image, sondern als echter Textunterstrich — der folgt
   der Grundlinie der Schrift und sitzt damit dort, wo er hingehoert.
   -------------------------------------------------------------------------- */
.flow-head h2 .hl{
  color:var(--brand-mark);
  background-image:none;
  padding:0;
  text-decoration:underline;
  text-decoration-color:var(--green-dark);
  text-decoration-thickness:.30em;
  text-underline-offset:-.18em;
  text-decoration-skip-ink:none;
}

/* --------------------------------------------------------------------------
   "So läuft es ab": vier Schritte als Karten mit dünnem Rahmen.
   Vorher trennten nur senkrechte Linien die Spalten. Jetzt steht jeder
   Schritt in einem eigenen Rahmen, die Schrittzahl in einer Marke daneben.
   Beim Überfahren läuft oben ein gelber Strich ein, die Karte hebt sich
   leicht an und die Zahl wechselt auf Markengelb.
   -------------------------------------------------------------------------- */
.flow-grid{ gap:clamp(14px,1.5vw,20px) }

.flow-item,
.flow-item:first-child,
.flow-item:last-child{
  position:relative;
  padding:clamp(24px,2.3vw,32px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),
             border-color .3s ease,
             box-shadow .3s ease;
}
.flow-item+.flow-item{ border-left:1px solid var(--line) }

/* Der gelbe Strich, der beim Überfahren oben einläuft */
.flow-item::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--brand-mark);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .38s cubic-bezier(.2,.7,.3,1);
}
.flow-item:hover::before,
.flow-item:focus-within::before{ transform:scaleX(1) }

.flow-item:hover,
.flow-item:focus-within{
  transform:translateY(-5px);
  border-color:var(--green-dark);
  box-shadow:0 16px 38px rgba(28,31,29,.11);
}

/* Schrittzahl als Marke statt als lose Ziffer */
.flow-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:var(--green-soft); color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(253,205,51,.55);
  font-size:15px; font-weight:800; letter-spacing:.02em;
  margin-bottom:clamp(18px,2vw,26px);
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.flow-item:hover .flow-n{
  background:var(--brand-mark); color:var(--on-brand); transform:rotate(-4deg);
}

.flow-k{ color:var(--grey) }
.flow-item h3{ margin-bottom:9px }

@media(max-width:900px){
  .flow-grid{ grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,18px) }
  .flow-item,
  .flow-item:nth-child(odd),
  .flow-item:nth-child(even){
    padding:clamp(22px,3vw,28px);
    border:1px solid var(--line);
    border-radius:16px;
  }
}
@media(max-width:560px){
  .flow-grid{ grid-template-columns:1fr; gap:14px }
  .flow-item,
  .flow-item:nth-child(odd),
  .flow-item:nth-child(even),
  .flow-item:last-child{
    padding:24px; border:1px solid var(--line); border-radius:16px;
  }
  .flow-n{ margin-bottom:16px }
}

/* Ohne Zeigegeraet (Touch) gibt es kein Hover — dort zeigt jede Karte den
   gelben Strich dauerhaft, damit die Gestaltung nicht verlorengeht. */
@media (hover:none){
  .flow-item::before{ transform:scaleX(1) }
}

/* --------------------------------------------------------------------------
   Kundenstimmen als Schiene statt Raster.
   Sechs Karten in einem Vierer-Raster ergaben eine halbleere zweite Reihe.
   Jetzt laufen alle Karten in einer Zeile und lassen sich seitlich schieben —
   per Wischen, Mausrad, Tastatur oder über die beiden Pfeile.
   -------------------------------------------------------------------------- */
.voices-slider{ position:relative }

.voices,
.voices-3{
  display:flex;
  grid-template-columns:none;
  gap:clamp(14px,1.5vw,20px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:6px 2px 18px;
  scrollbar-width:thin;
  scrollbar-color:var(--green-dark) var(--line);
  overscroll-behavior-x:contain;
}
.voices::-webkit-scrollbar{ height:6px }
.voices::-webkit-scrollbar-track{ background:var(--line); border-radius:99px }
.voices::-webkit-scrollbar-thumb{ background:var(--green-dark); border-radius:99px }
.voices::-webkit-scrollbar-thumb:hover{ background:var(--ink) }

.voice{
  flex:1 0 clamp(262px,24vw,320px);
  scroll-snap-align:start;
}
/* Hover-Rahmen war noch im alten Werkstattgrün */
.voice:hover{
  border-color:var(--brand-mark);
  box-shadow:0 1px 2px rgba(28,31,29,.05),0 18px 34px -22px rgba(28,31,29,.45);
}

/* Pfeile — werden per JavaScript eingehängt und nur gezeigt, wenn es etwas
   zu schieben gibt. Ohne JavaScript bleibt die Schiene trotzdem bedienbar. */
.v-nav{
  position:absolute; top:calc(50% - 9px); translate:0 -50%; z-index:3;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--ink);
  border:1px solid var(--line); cursor:pointer;
  box-shadow:0 8px 24px rgba(28,31,29,.14);
  transition:background .22s ease, border-color .22s ease, opacity .25s ease, transform .22s ease;
}
.v-nav svg{ width:20px; height:20px; stroke:currentColor; fill:none;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round }
.v-nav:hover{ background:var(--brand-mark); border-color:var(--brand-mark); transform:scale(1.06) }
.v-nav:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.v-prev{ left:-16px }
.v-next{ right:-16px }
.v-nav[disabled]{ opacity:0; pointer-events:none }
@media(max-width:1240px){ .v-prev{ left:4px } .v-next{ right:4px } }
@media(max-width:700px){ .v-nav{ display:none } }

/* --------------------------------------------------------------------------
   Nachzügler aus der grünen Vorlage und Lesbarkeit im Hero.
   -------------------------------------------------------------------------- */

/* Kennzahlen im Hero standen in Markengelb — auf hellem Grund und erst recht
   über dem gelben Hero-Foto praktisch unlesbar. Jetzt Anthrazit. */
.stat b{ color:var(--ink) }

/* Handy: Der Bildausschnitt lag auf der Reifenflanke, dort war kein Motiv zu
   erkennen. 62 % rückt die Felge ins Bild. */
@media(max-width:760px){
  .hero-bg img{ object-position:75% center }
}

/* Restliche Grünwerte aus der Vorlage: Fokusringe, Hover-Rahmen und
   Unterstreichungen tragen jetzt den Markenton. */
.qp-inner:focus-within,
input:focus,textarea:focus,select:focus{
  border-color:var(--brand-mark);
  box-shadow:0 0 0 3px rgba(253,205,51,.34);
}
.art-karte:hover{ border-color:var(--brand-mark) }
.artikel a:not(.btn),
.intro-text a,
.prose a:not(.btn){ text-decoration-color:rgba(52,52,52,.35) }

/* ---------------------------------------------------------------- Kicker
   12,5 px in #FDCD33 auf Weiss erreichen nur 1,6:1 Kontrast und sind damit
   praktisch unlesbar (WCAG verlangt 4,5:1 fuer Text dieser Groesse).
   Loesung: Der Text steht in Anthrazit, die Markenfarbe bleibt als kurzer
   Balken davor sichtbar. Auf dunklem Grund bleibt der Kicker gelb, dort
   stimmt der Kontrast.
   Zurueck zum alten Zustand: diesen Block loeschen.                        */
.kicker{
  color:var(--ink);
  display:inline-flex;align-items:center;gap:.62em;
}
.kicker::before{
  content:"";flex:none;
  width:1.55em;height:3px;border-radius:2px;
  background:var(--brand-mark);
}
.section-head.center .kicker{ justify-content:center }
/* Auf dunklen Flaechen bleibt es beim gelben Text ohne Balken */
.section-dark .kicker, .cta-band .kicker, .footer .kicker, footer .kicker,
.hero-dark .kicker{
  color:var(--brand-mark);
}
.section-dark .kicker::before, .cta-band .kicker::before, .footer .kicker::before,
footer .kicker::before, .hero-dark .kicker::before{ display:none }

/* ------------------------------------------------------- Social in der Fußzeile */
.f-sozial-leiste{ display:flex; gap:10px; margin-top:22px }
.f-sozial{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;
  border:1px solid rgba(255,255,255,.16);
  color:#D8D6D1;background:rgba(255,255,255,.04);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.f-sozial svg{ width:19px;height:19px }
.f-sozial:hover,.f-sozial:focus-visible{
  background:var(--brand-mark);color:var(--on-brand);
  border-color:var(--brand-mark);transform:translateY(-2px);
}

/* --------------------------------------------- Buttons auf dunklen Flächen
   Die Fußzeile faerbt alle Links hellgrau ein. Das hat auch den Text des
   gelben Termin-Buttons erwischt: hellgrau auf Markengelb sind rund 1,7:1
   Kontrast — unlesbar. Der Button behaelt seine eigene Textfarbe.          */
.site-footer .btn-primary,
.section-dark .btn-primary,
.cta-band .btn-primary{ color:var(--on-brand) }
.site-footer .btn-primary:hover,
.section-dark .btn-primary:hover,
.cta-band .btn-primary:hover{ color:var(--on-brand) }
.site-footer .btn-ghost,
.section-dark .btn-ghost{ color:#fff;border-color:rgba(255,255,255,.34) }


/* --------------------------------------------------------------------------
   Warum overflow-x:clip und nicht hidden
   „hidden“ macht html und body zu Scrollcontainern. Damit verliert jedes
   position:sticky seinen Bezug zum Sichtfenster — die Kopfzeile stand zwar
   auf sticky, blieb beim Scrollen aber nicht stehen. „clip“ schneidet
   ebenso ab, erzeugt aber keinen Scrollcontainer, und sticky funktioniert.
   Aeltere Safari-Fassungen kennen clip noch nicht; dort greift die
   hidden-Zeile darunter — dann ist die Kopfzeile wie bisher nicht klebend,
   sonst aendert sich nichts.
   -------------------------------------------------------------------------- */
@supports not (overflow-x: clip){
  html,body{ overflow-x:hidden }
}


/* --------------------------------------------------------------------------
   Umbruch in der schwarzen Topleiste verhindern
   Zwischen rund 860 und 1050 px passten Kontaktdaten und Oeffnungszeiten
   nebeneinander nur knapp. Solange die Ersatzschrift angezeigt wurde, brach
   die Zeile zweizeilig um und sprang beim Laden von Montserrat wieder
   zusammen — ein Layoutsprung von 0,54 (Google wertet ab 0,1 als schlecht).
   Die Oeffnungszeiten weichen deshalb frueher, sie stehen ohnehin in der
   Fusszeile. Zusaetzlich darf keine Zeile mehr umbrechen.
   -------------------------------------------------------------------------- */
@media(max-width:1050px){
  .topbar .tb-items:last-child{ display:none }
}
.topbar .wrap{ flex-wrap:nowrap }
.topbar .tb-item{ white-space:nowrap }
.topbar .tb-items{ flex-wrap:nowrap;min-width:0 }

/* --------------------------------------------------------------------------
   Einwilligungsdialog: beide Schaltflächen gleichwertig
   Die oesterreichische Datenschutzbehoerde verlangt, dass der Button fuer die
   Einwilligung nicht prominenter oder attraktiver gestaltet ist als jener fuer
   die Ablehnung — ausdruecklich auch mit Blick auf die Farbwahl. „Alle
   akzeptieren“ war gelb gefuellt, „Alle ablehnen“ nur umrandet. Das kann die
   Einwilligung unwirksam machen. Jetzt sind alle Auswahl-Schaltflaechen im
   Dialog identisch: gleiche Farbe, gleiche Groesse, gleiches Gewicht.
   -------------------------------------------------------------------------- */
.consent .btn[data-consent="alle"],
.consent .btn[data-consent="keine"],
.consent .btn[data-consent="auswahl"]{
  background:var(--ink);
  color:#fff;
  border:2px solid var(--ink);
  font-weight:700;
  flex:1 1 0;
  min-width:0;
  box-shadow:none;
}
.consent .btn[data-consent="alle"]:hover,
.consent .btn[data-consent="keine"]:hover,
.consent .btn[data-consent="auswahl"]:hover,
.consent .btn[data-consent="alle"]:focus-visible,
.consent .btn[data-consent="keine"]:focus-visible,
.consent .btn[data-consent="auswahl"]:focus-visible{
  background:#000;
  border-color:#000;
  color:#fff;
}
/* Der Dialogtitel bekommt beim Oeffnen programmgesteuert den Fokus, damit
   Screenreader ihn vorlesen und nicht „Alle akzeptieren“ bevorzugt wird.
   Ein sichtbarer Fokusrahmen ist dabei nicht gemeint — bei echter
   Tastaturbedienung erscheint er weiterhin. */
.consent h2[tabindex="-1"]:focus,
.consent h2[tabindex="-1"]:focus-visible{ outline:none;box-shadow:none }

/* --------------------------------------------------------------------------
   Daten-Tabelle (Schlüssel/Wert mit langen Werten)
   .price-table setzt die letzte Spalte auf nowrap — richtig fuer Preise,
   falsch fuer Saetze wie den Firmenwortlaut. Diese Variante laesst umbrechen
   und laeuft linksbuendig mit.
   -------------------------------------------------------------------------- */
.daten-tabelle td:last-child{ white-space:normal;text-align:left }
.daten-tabelle td:first-child{ width:34%;font-weight:600;color:var(--grey);vertical-align:top }
@media(max-width:620px){
  .daten-tabelle,.daten-tabelle tbody,.daten-tabelle tr,.daten-tabelle td{ display:block;width:auto }
  .daten-tabelle tr{ padding:12px 0;border-bottom:1px solid var(--line) }
  .daten-tabelle td{ border:0;padding:2px 0 }
  .daten-tabelle td:first-child{ width:auto;font-size:13.5px;text-transform:uppercase;letter-spacing:.06em }
}

/* --------------------------------------------------------------------------
   Scrollbalken-Platz dauerhaft reservieren
   Solange der Einwilligungsdialog offen ist, steht html auf overflow:hidden —
   der Scrollbalken verschwindet, die Seite wird rund 15 px breiter. Beim
   Schliessen kommt er zurueck und alles rutscht wieder. Auf der
   Leistungsuebersicht ergab das einen sichtbaren Sprung (CLS 0,18).
   scrollbar-gutter haelt den Platz frei, egal ob der Balken da ist.
   -------------------------------------------------------------------------- */
html{ scrollbar-gutter:stable }

/* --------------------------------------------------------------------------
   Topleiste auf feste Höhe
   Beim Wechsel von der Ersatzschrift auf Montserrat aendert sich die
   Zeilenhoehe der Leiste um ein Pixel. Das klingt nach nichts, verschiebt
   aber die gesamte Seite darunter — auf der Leistungsuebersicht ergab das
   CLS 0,098, also knapp am Grenzwert. Eine feste Hoehe nimmt dem
   Schriftwechsel diese Wirkung.
   -------------------------------------------------------------------------- */
.topbar .wrap{ height:42px;min-height:42px;padding-top:0;padding-bottom:0 }
@media(max-width:860px){ .topbar .wrap{ height:40px;min-height:40px } }
/* Aus demselben Grund bekommt auch die Kopfzeile eine feste Höhe: Beim
   Schriftwechsel aendert sich sonst ihre Zeilenhoehe um ein Pixel und die
   ganze Seite darunter rutscht mit. */
.site-header .wrap{ height:76px;min-height:76px }
@media(max-width:860px){ .site-header .wrap{ height:66px;min-height:66px } }


/* --------------------------------------------------------------------------
   Passgenaue Ersatzschrift („font metric override“)
   Bis Montserrat geladen ist, zeigt der Browser eine Systemschrift. Die ist
   schmaler — beim Umschalten aendern Textbloecke ihre Breite und die Seite
   springt. Gemessen: Montserrat braucht 108,6 % der Breite von Arial und
   6,1 % mehr Zeilenhoehe.

   Diese Ersatzschrift ist Arial, per size-adjust auf Montserrats Breite
   gestreckt und mit angeglichenen vertikalen Metriken. Damit belegt der Text
   vor und nach dem Laden denselben Platz — der Sprung entfaellt.
   Die Werte stammen aus einer Messung im Browser, nicht aus einer Schaetzung.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Montserrat Ersatz";
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:108.6%;
  ascent-override:88%;
  descent-override:23%;
  line-gap-override:0%;
}

/* ----------------------------------------------------------------
   Handy: Der Hero-Text stand ueber dem dunklen Motorraum und war
   schlecht lesbar (Ferhat, 28.08.2026). Das Foto laeuft jetzt
   schwaecher und bekommt einen weissen Schleier, der oben am
   dichtesten ist — genau dort, wo Kicker, Ueberschrift und Fliesstext
   sitzen. Nach unten wird er durchsichtig, das Motiv bleibt sichtbar.
   Nur die Startseite: .hero-sub bringt auf den Unterseiten einen
   eigenen Schleier mit.
   ---------------------------------------------------------------- */
@media(max-width:760px){
  .hero:not(.hero-sub) .hero-bg{ opacity:.22 }
  .hero:not(.hero-sub) .hero-veil{
    display:block;position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,
      rgba(255,255,255,.86)   0%,
      rgba(255,255,255,.74)  46%,
      rgba(255,255,255,.42)  78%,
      rgba(255,255,255,.18) 100%);
  }
}