/* Heckenheld Designsystem — Design V2, Entwurf B „Werkbank"
   Entwurf B gewählt 09.10.2026 13:52, Rollout freigegeben 09.10.2026 14:32 (Alex).
   Vorlage: design/entwuerfe-2026-10-09/muster-startseite-b.html
   Schriften liegen selbst gehostet unter schrift/ — kein Abruf bei Dritten. */
@font-face{font-family:"Manrope";src:url(../schrift/manrope-var.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../schrift/barlow-condensed-700.ttf) format("truetype");font-weight:700;font-display:swap}

:root{
  /* Grün für Flächen mit weißer Schrift: #4A8014 (Kontrast 4,8:1 statt 4,2:1 beim Entwurfswert) */
  --gruen:#4A8014; --gruen-tief:#3A6410; --gruen-hell:#8CC63F; --gruen-hauch:#EAF2DF;
  --navy:#16324F; --navy-tief:#0E2338; --grund:#F4F6F0; --karte:#fff; --text:#17232D;
  --grau:#56636D; --linie:#D9DFD2;
  --breit:1600px; --mittel:1280px; --prosa:880px; --rand:48px;
  --radius:14px; --kopf:96px;
  --schmal:"Barlow Condensed","Arial Narrow",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:calc(var(--kopf) + 16px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
/* overflow-x:clip statt hidden: position:sticky bleibt funktionsfähig (Frontend-QS 22.07.2026) */
body{margin:0;overflow-x:clip;background:var(--grund);color:var(--text);
  font-family:Manrope,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--gruen-tief)}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px}
[hidden]{display:none !important}

/* Sprungmarke: nur für Tastatur-/Screenreader-Nutzer sichtbar */
.sprungmarke{position:absolute;left:-9999px;top:0;z-index:99;background:var(--navy);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 var(--radius) 0;font-weight:700;text-decoration:none}
.sprungmarke:focus{left:0}

/* Grundbausteine */
.huelle{max-width:var(--mittel);margin:0 auto;padding:0 var(--rand)}
.huelle.breit{max-width:var(--breit)}
.huelle.prosa{max-width:var(--prosa)}
.d{font-family:var(--schmal);font-weight:700;text-transform:uppercase;letter-spacing:-.005em;line-height:.95;color:var(--navy)}
.etikett,.eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gruen-tief);margin:0 0 18px}
.etikett::before,.eyebrow::before{content:"";flex:0 0 36px;height:3px;background:var(--gruen)}
.abschnitt{padding:112px 0}
.knopf,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--gruen);color:#fff;
  border:0;border-radius:10px;padding:15px 24px;font:inherit;font-weight:800;font-size:16px;line-height:1.3;
  text-decoration:none;cursor:pointer;transition:background .15s}
.knopf:hover,.btn:hover,.knopf:focus-visible,.btn:focus-visible{background:var(--gruen-tief);color:#fff}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--linie);color:#3F4A46;cursor:progress;transform:none}
.knopf.hell{background:var(--gruen-hell);color:#0E1E0A}
.knopf.hell:hover,.knopf.hell:focus-visible{background:#A3D65C;color:#0E1E0A}
.btn-neben{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn-neben:hover,.btn-neben:focus-visible{background:var(--navy);color:#fff}
.cta-zeile{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------------- Kopf ---------------- */
header.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
header.top .huelle{display:flex;align-items:center;gap:28px;height:var(--kopf);max-width:none}
.logo{flex:0 0 auto}
.logo img{height:64px;width:auto}
nav.haupt{display:flex;align-items:center;gap:20px;flex:1;font-weight:600;font-size:15px}
nav.haupt a{color:var(--navy);text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent}
nav.haupt a:hover,nav.haupt a:focus-visible{border-bottom-color:var(--gruen)}
nav.haupt a[aria-current="page"]{border-bottom-color:var(--gruen);color:var(--gruen-tief)}
nav.haupt a.nav-tel{margin-left:auto;font-weight:800;font-size:17px;line-height:1.2;text-align:right;border:0;
  font-variant-numeric:tabular-nums;white-space:nowrap}
nav.haupt a.nav-tel small{display:block;font-weight:600;font-size:12px;color:var(--grau)}
nav.haupt a.nav-cta{background:var(--gruen);color:#fff;border-radius:10px;padding:12px 18px;font-weight:800;border:0;white-space:nowrap}
nav.haupt a.nav-cta:hover,nav.haupt a.nav-cta:focus-visible{background:var(--gruen-tief);color:#fff}
.menue-knopf{display:none}
.mobil-leiste{display:none}

/* Menü klappt unterhalb von 1280 px ein (sieben Menüpunkte + Telefon + Knopf) */
@media (max-width:1280px){
  .menue-knopf{display:inline-flex;align-items:center;gap:8px;margin-left:auto;background:#fff;
    border:1.5px solid var(--linie);border-radius:10px;padding:10px 14px;font:inherit;font-weight:800;
    font-size:15px;color:var(--navy);cursor:pointer}
  nav.haupt{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--linie);padding:8px var(--rand) 18px;box-shadow:0 18px 30px rgba(22,50,79,.12)}
  nav.haupt.offen{display:flex}
  nav.haupt a{padding:13px 0;border-bottom:1px solid var(--linie);font-size:17px}
  nav.haupt a.nav-tel{margin:8px 0 0;text-align:left;border-bottom:0}
  nav.haupt a.nav-cta{margin-top:10px;text-align:center;padding:15px}
}

/* ---------------- Startseite: Bühne ---------------- */
.buehne{display:grid;grid-template-columns:1.08fr .92fr;height:calc(100svh - var(--kopf) - 104px);min-height:600px}
.buehne .links{padding:48px var(--rand) 40px;display:flex;flex-direction:column;justify-content:center}
.saison-hinweis{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;background:#fff;border:1px solid var(--linie);
  border-radius:999px;padding:7px 14px 7px 9px;font-size:14px;font-weight:700;color:var(--navy);margin:0 0 26px}
.saison-hinweis i{flex:0 0 10px;height:10px;border-radius:50%;background:var(--gruen-hell);box-shadow:0 0 0 4px rgba(140,198,63,.25)}
.buehne h1{font-size:clamp(52px,6vw,96px);margin:0}
.buehne h1 small{display:block;font-family:Manrope,sans-serif;text-transform:none;letter-spacing:.01em;
  font-size:clamp(17px,1.5vw,22px);font-weight:800;color:var(--gruen-tief);line-height:1.3;margin-bottom:14px}
.buehne h1 span{color:var(--gruen)}
.strich{height:4px;width:120px;background:var(--gruen);margin:26px 0 20px}
.unter{font-size:20px;line-height:1.5;max-width:540px;color:var(--grau);margin:0}
.zahlen{display:flex;gap:44px;margin-top:28px}
.zahlen div{font-size:14px;color:var(--grau);line-height:1.4}
.zahlen b{display:block;font-family:var(--schmal);font-size:46px;line-height:1;color:var(--navy);font-weight:700}
.buehne .rechts{position:relative;overflow:hidden;background:#1d2a1f}
.buehne video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.bildtext{position:absolute;left:24px;bottom:52px;background:#fff;border-radius:10px;padding:12px 16px;font-size:14px;
  line-height:1.4;max-width:300px;box-shadow:0 8px 24px rgba(0,0,0,.15);margin:0}
.bildtext b{display:block;color:var(--navy)}

/* Formulareinstieg */
.einstieg{position:relative;z-index:2;max-width:calc(var(--breit) - 2*var(--rand));margin:-28px auto 0;width:calc(100% - 2*var(--rand));
  background:var(--navy);color:#fff;border-radius:16px;padding:22px 26px;display:grid;grid-template-columns:auto 1fr;gap:30px;
  align-items:center;box-shadow:0 18px 40px rgba(22,50,79,.25)}
.einstieg h2{font-family:var(--schmal);text-transform:uppercase;font-size:30px;line-height:1;font-weight:700;margin:0}
.einstieg h2 small{display:block;font-family:Manrope,sans-serif;text-transform:none;font-size:14px;font-weight:600;opacity:.8;margin-top:6px}
.einstieg-wege{display:grid;grid-template-columns:1fr auto;gap:10px}
.einstieg ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.einstieg li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 14px;font-size:15px}
.einstieg li small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.8;font-weight:700}
.einstieg .knopf{white-space:nowrap}

/* Belegband */
.beleg{padding:54px 0 0}
.beleg ul{list-style:none;margin:0;display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;gap:14px 24px;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:20px 0;font-weight:700;color:var(--navy);font-size:15px}
.beleg li{display:flex;align-items:center;gap:10px}
.beleg li::before{content:"";flex:0 0 8px;height:8px;background:var(--gruen);transform:rotate(45deg)}

/* Kopfzeile von Abschnitten */
.kopfzeile{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:56px}
.kopfzeile h2,.abschnitt h2.d{font-size:clamp(44px,4.6vw,72px);margin:0}
.kopfzeile p{color:var(--grau);font-size:18px;max-width:520px;margin:0}

/* Leistungen als nummerierte Zeilen (Nummer per CSS, damit sie nicht vorgelesen wird) */
.zeilen{counter-reset:z}
.zeile{counter-increment:z;display:grid;grid-template-columns:120px 1.1fr 1.4fr auto;gap:36px;align-items:center;padding:34px 0;
  border-top:1px solid var(--linie);color:var(--text);text-decoration:none;transition:background .25s}
.zeile:last-child{border-bottom:1px solid var(--linie)}
.zeile:hover{background:#fff}
.zeile::before{content:"0" counter(z);font-family:var(--schmal);font-weight:700;font-size:64px;line-height:1;color:var(--gruen-hell)}
.zeile h3{font-family:var(--schmal);text-transform:uppercase;font-size:40px;line-height:1;color:var(--navy);margin:0}
.zeile .marke{display:inline-block;margin-top:10px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gruen-tief);background:var(--gruen-hauch);border-radius:999px;padding:4px 10px}
.zeile p{color:var(--grau);margin:0}
.zeile .preis{text-align:right;font-weight:800;color:var(--navy);white-space:nowrap}
.zeile .preis b{display:block;font-family:var(--schmal);font-size:34px;line-height:1}
.zeile .preis span{font-size:13px;font-weight:600;color:var(--grau)}
.zeile .pfeil{display:inline-block;margin-top:8px;color:var(--gruen-tief);font-size:14px}

/* Rodung — dunkle Bühne */
.rodung{background:var(--navy-tief);color:#fff;position:relative;overflow:hidden}
.rodung::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--gruen-hell)}
.rodung .huelle{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px}
.rodung .etikett{color:var(--gruen-hell)}
.rodung .etikett::before{background:var(--gruen-hell)}
.rodung h2.d{color:#fff;font-size:clamp(48px,5.4vw,88px)}
.rodung h2 span{color:var(--gruen-hell)}
.rodung .einleitung{margin:24px 0 0;font-size:18px;opacity:.88;max-width:460px}
.rodung .haft{position:sticky;top:calc(var(--kopf) + 24px);align-self:start}
.rodung ol{list-style:none;counter-reset:s;margin:0;padding:0}
.rodung li{counter-increment:s;padding:34px 0;border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:90px 1fr;gap:20px}
.rodung li::before{content:"0" counter(s);font-family:var(--schmal);font-weight:700;font-size:54px;line-height:1;color:var(--gruen-hell)}
.rodung li h3{font-family:var(--schmal);text-transform:uppercase;font-size:30px;line-height:1.05;margin:0 0 8px}
.rodung li p{opacity:.85;margin:0}
.rodung .ehrlich{margin-top:34px;padding:22px 24px;border:1px solid rgba(140,198,63,.4);border-radius:12px;font-size:16px}
.rodung .ehrlich b{color:var(--gruen-hell)}
.rodung .knopf{margin-top:30px}

/* Qualität, Entsorgung: Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;background:#fff}
.kacheln.zwei{grid-template-columns:repeat(2,1fr)}
.kacheln > div{padding:30px 28px;border-right:1px solid var(--linie)}
.kacheln > div:last-child{border-right:0}
.kacheln h3{font-family:var(--schmal);text-transform:uppercase;font-size:30px;line-height:1;color:var(--navy);margin:0 0 12px}
.kacheln p{margin:0;color:var(--grau)}
.zusatz{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.zusatz div{border-left:4px solid var(--gruen);background:#fff;border-radius:0 12px 12px 0;padding:20px 24px}
.zusatz h3{margin:0 0 6px;color:var(--navy);font-size:19px}
.zusatz p{margin:0;color:var(--grau)}

/* Sortenband — wischbar; die Seite selbst scrollt nie seitlich */
.sorten{padding:112px 0 96px;overflow:hidden}
.band{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--rand) 22px;
  scrollbar-width:thin;scrollbar-color:var(--gruen) transparent}
.band a{flex:0 0 auto;scroll-snap-align:start;position:relative;border-radius:14px;overflow:hidden;height:440px;background:#cfd8c4;color:#fff;text-decoration:none}
.band a:nth-child(odd){width:340px}.band a:nth-child(even){width:290px}
.band img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.band a:hover img{transform:scale(1.04)}
.band a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(14,35,56,.9) 100%)}
.band .name{position:absolute;z-index:2;left:20px;right:20px;bottom:18px}
.band .name b{display:block;font-family:var(--schmal);text-transform:uppercase;font-size:32px;line-height:1}
.band .name span{font-size:14px;line-height:1.4;display:block;margin-top:6px}
.sorten .unten{display:flex;gap:24px;margin-top:18px;font-weight:700}

/* Preise */
.preise{background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.raster,.preisstreifen{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:44px 0 34px;border:1px solid var(--linie);border-radius:14px;overflow:hidden;background:#fff}
.raster > div,.preisstreifen > div{padding:24px 22px;border-right:1px solid var(--linie)}
.raster > div:last-of-type,.preisstreifen > div:last-of-type{border-right:0}
.raster b,.preisstreifen strong{display:block;font-family:var(--schmal);font-size:42px;line-height:1;color:var(--navy);font-weight:700}
.raster span,.preisstreifen span{font-size:14px;color:var(--grau);display:block;margin-top:8px;line-height:1.45}
.preisstreifen .beispiel{grid-column:1/-1;margin:0;border-radius:0;border-top:1px solid var(--linie)}
.beispiel{background:var(--gruen-hauch);border-left:4px solid var(--gruen);border-radius:0 12px 12px 0;padding:20px 24px;font-size:17px;margin:0}
.beispiel b,.beispiel strong{color:var(--navy)}
.klein{margin-top:18px;color:var(--grau);font-size:15px}
.klein a{font-weight:700}

/* Ablauf */
.ablauf h2.d{margin-bottom:48px}
.ablauf ol,ol.schritte{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;counter-reset:a;margin:0;padding:0}
.ablauf li,ol.schritte li{counter-increment:a;border-top:4px solid var(--navy);padding-top:22px}
.ablauf li::before,ol.schritte li::before{content:"Schritt " counter(a);display:block;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gruen-tief);margin-bottom:10px}
.ablauf h3,ol.schritte h3{font-family:var(--schmal);text-transform:uppercase;font-size:32px;line-height:1;color:var(--navy);margin:0 0 10px}
.ablauf p,ol.schritte p{color:var(--grau);margin:0}

/* Jahrespflege-Band */
.pflege{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;background:var(--gruen-hauch);border-radius:16px;padding:48px}
.pflege h2{font-family:var(--schmal);text-transform:uppercase;font-size:clamp(40px,4vw,60px);line-height:.95;color:var(--navy);margin:0 0 16px}
.pflege p{margin:0 0 16px}
.pflege img{border-radius:12px;width:100%;aspect-ratio:4/3;object-fit:cover}

/* Fragen */
.fragen{padding-top:0}
.fragen h2.d{font-size:clamp(40px,4vw,60px);margin-bottom:28px}
details.faq,.fragen details{border-top:1px solid var(--linie);padding:20px 0;max-width:var(--prosa)}
details.faq:last-of-type,.fragen details:last-of-type{border-bottom:1px solid var(--linie)}
details.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-weight:800;font-size:19px;color:var(--navy)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--gruen-tief)}
details.faq[open] summary::after{content:"–"}
details.faq p{margin:12px 0 0;color:var(--grau);max-width:760px}

/* Abschluss */
.abschluss{background:var(--navy);color:#fff;padding:96px 0}
.abschluss .huelle{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.abschluss h2.d{color:#fff;font-size:clamp(48px,5.4vw,88px);margin:0}
.abschluss h2 span{color:var(--gruen-hell)}
.abschluss p{margin:18px 0 0;opacity:.88;font-size:18px;max-width:520px}
.abschluss .wege{display:grid;gap:12px}
.abschluss .knopf{padding:18px}
.abschluss .tel-gross{text-align:center;font-family:var(--schmal);font-size:34px;font-weight:700;color:#fff;text-decoration:none}
.abschluss .tel-gross small{display:block;font-family:Manrope,sans-serif;font-size:13px;font-weight:600;opacity:.8}

/* ---------------- Unterseiten ---------------- */
main.unterseite{padding-bottom:96px}
.seitenkopf{padding:72px 0 8px;max-width:980px}
.seitenkopf h1{font-family:var(--schmal);font-weight:700;text-transform:uppercase;letter-spacing:-.005em;line-height:.95;
  color:var(--navy);font-size:clamp(44px,5.2vw,80px);margin:0;text-wrap:balance}
.seitenkopf h1 em{font-style:normal;color:var(--gruen)}
.seitenkopf h1::after{content:"";display:block;height:4px;width:120px;background:var(--gruen);margin:28px 0 22px}
.seitenkopf p.einleitung,.sub{font-size:20px;line-height:1.5;color:var(--grau);max-width:680px;margin:0}
main.unterseite section{padding:40px 0}
.sektkopf{max-width:760px;margin-bottom:28px}
.sektkopf h2,.prose h2,main.unterseite section > h2{font-family:var(--schmal);font-weight:700;text-transform:uppercase;line-height:1;
  color:var(--navy);font-size:clamp(32px,3vw,44px);margin:0 0 12px;text-wrap:balance}
.sektkopf p{color:var(--grau);margin:0;font-size:18px}
.prose{max-width:var(--prosa)}
.prose h2{margin-top:56px}
.prose > h2:first-child{margin-top:0}
.prose h3{color:var(--navy);font-size:21px;margin:32px 0 8px}
.prose ul,.prose ol{padding-left:1.2rem}
.prose li{margin-bottom:6px}
.prose table{border-collapse:collapse;width:100%;font-size:16px;background:#fff}
.prose th,.prose td{border:1px solid var(--linie);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--navy);color:#fff}
.tab-scroll{overflow-x:auto}

/* Karten */
.karten3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.karten2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.lkarte{background:#fff;border:1px solid var(--linie);border-top:4px solid var(--navy);border-radius:0 0 12px 12px;padding:24px;display:flex;flex-direction:column;gap:8px}
.lkarte .saison{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gruen-tief)}
.lkarte h3{margin:0;font-family:var(--schmal);text-transform:uppercase;font-size:28px;line-height:1.05;color:var(--navy)}
.lkarte h3 a{color:inherit;text-decoration:none}
.lkarte h3 a:hover{color:var(--gruen-tief)}
.lkarte p{margin:0;color:var(--grau);flex:1}
.lkarte .preis{font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.lkarte img{border-radius:8px;margin-bottom:8px;aspect-ratio:16/10;object-fit:cover;width:100%}
.foto-slot{background:repeating-linear-gradient(45deg,var(--gruen-hauch),var(--gruen-hauch) 12px,#fff 12px,#fff 24px);
  border:2px dashed var(--linie);border-radius:10px;padding:1.1rem;text-align:center;font-size:.8rem;color:var(--grau);margin-bottom:.5rem}
ul.vertrauen{display:flex;flex-wrap:wrap;gap:8px 24px;margin:24px 0 0;padding:0;list-style:none;color:var(--navy);font-weight:700;font-size:15px}
ul.vertrauen li{display:flex;align-items:center;gap:10px}
ul.vertrauen li::before{content:"";flex:0 0 8px;height:8px;background:var(--gruen);transform:rotate(45deg)}

/* Arten-Chips */
ul.arten{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
ul.arten li a{display:inline-block;background:#fff;border:1.5px solid var(--linie);border-radius:999px;
  padding:8px 16px;font-size:15px;color:var(--navy);text-decoration:none;font-weight:700}
ul.arten li a:hover,ul.arten li a:focus-visible{border-color:var(--gruen);background:var(--gruen-hauch)}

/* Formular */
form.anfrage{background:#fff;border:1px solid var(--linie);border-top:4px solid var(--navy);border-radius:0 0 14px 14px;
  box-shadow:0 18px 40px rgba(22,50,79,.08);padding:32px;max-width:680px}
.freiwillig{display:inline-block;margin-left:.5rem;background:var(--gruen-hauch);color:var(--gruen-tief);font-size:.72rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:.15rem .55rem;border-radius:999px;vertical-align:middle}
.schrittzeile{font-size:12px;font-weight:800;color:var(--gruen-tief);letter-spacing:.12em;text-transform:uppercase}
.balken{height:6px;background:var(--linie);border-radius:99px;margin:12px 0 22px;overflow:hidden}
.balken i{display:block;height:100%;background:var(--gruen);border-radius:99px;transition:width .25s}
fieldset{border:none;padding:0;margin:0}
legend{font-family:var(--schmal);text-transform:uppercase;font-size:30px;line-height:1;font-weight:700;color:var(--navy);margin-bottom:18px;padding:0}
.feld{margin-bottom:18px}
.feld label{display:block;font-weight:700;font-size:15px;margin-bottom:6px;color:var(--navy)}
.feld .hilfe{font-size:14px;color:var(--grau);margin:6px 0 0}
.feld input[type=text],.feld input[type=tel],.feld input[type=email],.feld input[type=number],.feld select,.feld textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--linie);border-radius:10px;font:inherit;background:var(--grund);color:var(--text)}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--gruen);outline:none;background:#fff}
.masse{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
label.chip{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1.5px solid var(--linie);
  border-radius:10px;padding:12px 14px;font-weight:700;cursor:pointer;margin-bottom:10px;background:#fff}
label.chip small{font-weight:500;color:var(--grau)}
label.chip:has(input:checked){border-color:var(--gruen);background:var(--gruen-hauch)}
label.chip input,label.kaestchen input{accent-color:var(--gruen)}
label.kaestchen{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
label.kaestchen input{margin-top:5px}
.form-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.form-nav .btn[data-zurueck]{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.form-nav .btn[data-zurueck]:hover{background:var(--navy);color:#fff}
.fehler{color:#B3261E;font-size:14px;margin-top:6px;font-weight:700}
.sendefehler{background:#FDECEA;border:2px solid #B3261E;border-radius:var(--radius);padding:24px;max-width:680px;margin-top:24px}
.sendefehler h2{color:#8C1D18;margin:0 0 8px;font-size:22px}
.sendefehler p{margin:0 0 12px}
.erfolg{background:var(--gruen-hauch);border:2px solid var(--gruen);border-radius:var(--radius);padding:24px;max-width:680px}
.erfolg h2{color:var(--gruen-tief);margin:0 0 8px}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.galerie figure{margin:0;background:#fff;border:1px solid var(--linie);border-radius:12px;overflow:hidden}
.galerie img{aspect-ratio:4/3;object-fit:cover;width:100%}
.galerie figcaption{padding:12px 14px;font-size:14px;color:var(--grau)}

/* ---------------- Fuß ---------------- */
footer.fuss{background:var(--navy-tief);color:rgba(255,255,255,.8);font-size:15px;padding:56px 0 30px}
.fuss .huelle{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px}
.fuss strong{display:block;color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.fuss a{color:rgba(255,255,255,.88);text-decoration:none}
.fuss a:hover,.fuss a:focus-visible{color:#fff;text-decoration:underline}
.fuss nav a{display:block;padding:3px 0}
.fuss .fusslogo{height:46px;width:auto;background:#fff;border-radius:8px;padding:6px 10px;margin-bottom:14px}
.fuss .zeile-unten{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;margin:10px 0 0;font-size:13px}

/* Spam-Falle: für Menschen unsichtbar, Bots füllen es aus */
.hp-feld{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------- Breiten ---------------- */
@media (max-width:1100px){
  :root{--rand:32px}
  .beleg ul{grid-template-columns:repeat(2,auto)}
  .zeile{grid-template-columns:80px 1fr auto}
  .zeile p{grid-column:2/-1}
  .zeile .preis{grid-row:1;grid-column:3}
  .raster,.preisstreifen{grid-template-columns:1fr 1fr}
  .raster > div:nth-child(2),.preisstreifen > div:nth-child(2){border-right:0}
  .raster > div:nth-child(-n+2),.preisstreifen > div:nth-child(-n+2){border-bottom:1px solid var(--linie)}
  .kacheln{grid-template-columns:1fr}
  .kacheln > div{border-right:0;border-bottom:1px solid var(--linie)}
  .kacheln > div:last-child{border-bottom:0}
  .karten3{grid-template-columns:1fr 1fr}
}
@media (max-width:840px){
  .karten3,.karten2,.zusatz,.kacheln.zwei{grid-template-columns:1fr}
  .kacheln.zwei > div{border-right:0;border-bottom:1px solid var(--linie)}
  .kacheln.zwei > div:last-child{border-bottom:0}
  .pflege{grid-template-columns:1fr;padding:28px;gap:24px}
  .fuss .huelle{grid-template-columns:1fr 1fr}
  .fuss .huelle > div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--rand:16px;--kopf:72px}
  body{font-size:16px;padding-bottom:74px}
  .abschnitt{padding:72px 0}
  header.top .huelle{gap:10px}
  .logo img{height:46px}
  .menue-knopf{padding:9px 12px}
  .buehne{grid-template-columns:1fr;height:auto;min-height:0}
  .buehne .rechts{order:-1;height:56svh;min-height:360px}
  .bildtext{left:12px;bottom:12px;max-width:250px;font-size:13px;padding:9px 12px}
  .buehne .links{padding:26px 16px 24px}
  .saison-hinweis{font-size:12px;margin-bottom:16px}
  .buehne h1{font-size:48px}
  .buehne h1 small{font-size:16px;margin-bottom:10px}
  .strich{margin:18px 0 14px;width:80px}
  .unter{font-size:17px}
  .zahlen{gap:14px;margin-top:20px;justify-content:space-between}
  .zahlen b{font-size:30px;white-space:nowrap}
  .einstieg{margin:0 auto;width:calc(100% - 2*var(--rand));grid-template-columns:1fr;gap:14px;padding:18px}
  .einstieg-wege{grid-template-columns:1fr}
  .einstieg ol{grid-template-columns:1fr 1fr}
  .einstieg li:last-child{grid-column:1/-1}
  .beleg{padding-top:36px}
  .beleg ul{grid-template-columns:1fr;gap:10px}
  .kopfzeile{grid-template-columns:1fr;gap:16px;margin-bottom:30px}
  .zeile{grid-template-columns:56px 1fr;gap:6px 14px;padding:26px 0}
  .zeile::before{font-size:44px;grid-row:span 2}
  .zeile h3{font-size:32px}
  .zeile p{grid-column:2}
  .zeile .preis{grid-row:auto;grid-column:2;text-align:left;margin-top:8px;white-space:normal}
  .rodung .huelle{grid-template-columns:1fr;gap:20px}
  .rodung .haft{position:static}
  .rodung li{grid-template-columns:60px 1fr;padding:24px 0}
  .rodung li::before{font-size:40px}
  .kacheln > div{padding:22px 20px}
  .kacheln h3{font-size:26px}
  .sorten{padding:72px 0 64px}
  .band a{height:360px}
  .band a:nth-child(odd),.band a:nth-child(even){width:78vw}
  .sorten .unten{flex-direction:column;gap:8px}
  .raster,.preisstreifen{grid-template-columns:1fr 1fr}
  .raster b,.preisstreifen strong{font-size:30px}
  .raster > div,.preisstreifen > div{padding:18px 16px}
  .ablauf ol,ol.schritte{grid-template-columns:1fr;gap:28px}
  .abschluss{padding:64px 0}
  .abschluss .huelle{grid-template-columns:1fr;gap:28px}
  .abschluss .tel-gross{font-size:30px}
  .seitenkopf{padding-top:44px}
  .seitenkopf h1{font-size:40px}
  .seitenkopf h1::after{margin:20px 0 16px;width:80px}
  .seitenkopf p.einleitung,.sub{font-size:17px}
  main.unterseite section{padding:28px 0}
  .prose h2{margin-top:40px}
  .prose table{font-size:14px}
  .prose th,.prose td{padding:8px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .masse{grid-template-columns:1fr}
  form.anfrage{padding:22px 18px}
  .fuss .zeile-unten{display:block}
  .mobil-leiste{display:grid;grid-template-columns:1fr 1.4fr;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;
    border-top:1px solid var(--linie);padding:10px 12px;gap:10px}
  .mobil-leiste a{border-radius:10px;padding:13px;text-align:center;font-weight:800;font-size:15px;text-decoration:none}
  .mobil-leiste a:first-child{border:1.5px solid var(--navy);color:var(--navy)}
  .mobil-leiste a:last-child{background:var(--gruen);color:#fff}
}