/* ZS Gartenservice — Stylesheet
   Mobile zuerst. Farben und Schriften nach brand/README.md. */

@font-face{font-family:Cormorant;src:url(/schriften/cormorant-garamond-latin-500-normal.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(/schriften/cormorant-garamond-latin-600-normal.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(/schriften/montserrat-latin-400-normal.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(/schriften/montserrat-latin-500-normal.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(/schriften/montserrat-latin-600-normal.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  --wald:#152A20;
  --tanne:#1F3D2E;
  --salbei:#5F6E5A;
  --salbei-hell:#A9B5A2;
  --leinen:#F2EEE4;
  --papier:#FBFAF6;
  --tinte:#14201A;
  --linie:#DFD9CA;
  --linie-dunkel:rgba(242,238,228,.16);

  --serif:Cormorant,Georgia,'Times New Roman',serif;
  --grotesk:Montserrat,'Segoe UI',system-ui,-apple-system,sans-serif;
  --mass:64ch;
  --bahn:1120px;
  --luft:clamp(48px,6.5vw,76px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--leinen);color:var(--tinte);
  font-family:var(--grotesk);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* Platz für die feste Kontaktleiste am unteren Rand */
  padding-bottom:72px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--tanne);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--wald)}
:focus-visible{outline:2px solid var(--tanne);outline-offset:3px}

.bahn{max-width:var(--bahn);margin:0 auto;padding:0 clamp(20px,5vw,40px)}

.skip{position:absolute;left:-9999px;top:0;background:var(--tanne);color:var(--leinen);
  padding:12px 20px;z-index:100}
.skip:focus{left:0}

/* ---------- Kopf ---------- */
.kopf{background:var(--leinen);border-bottom:1px solid var(--linie);
  position:sticky;top:0;z-index:40}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:74px;flex-wrap:wrap}
.marke{display:block;line-height:0;padding:14px 0}
.marke img{width:clamp(196px,44vw,262px)}
.menue-schalter{
  display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid var(--linie);
  color:var(--tanne);font:600 12px/1 var(--grotesk);letter-spacing:.14em;text-transform:uppercase;
  padding:13px 16px;cursor:pointer;min-height:46px}
.menue-schalter .balken{width:18px;height:9px;border-top:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor}
.menue-schalter[aria-expanded=true]{background:var(--tanne);color:var(--leinen);border-color:var(--tanne)}

.nav{display:none;width:100%;flex-direction:column;padding-bottom:14px}
.nav.offen{display:flex}
.nav a{font-size:16px;font-weight:500;text-decoration:none;color:var(--tanne);
  padding:13px 0;border-bottom:1px solid var(--linie)}
.nav a[aria-current=page]{color:var(--salbei)}
.nav-tel{font-weight:600 !important;letter-spacing:.02em}

@media (min-width:900px){
  .menue-schalter{display:none}
  .nav{display:flex;flex-direction:row;align-items:center;gap:26px;width:auto;padding:0}
  .nav a{border:0;padding:6px 0;font-size:14.5px}
  .nav a[aria-current=page]{border-bottom:1.5px solid var(--tanne);color:var(--tanne)}
  .nav-tel{border-left:1px solid var(--linie) !important;padding-left:26px !important}
}

/* ---------- Hero ---------- */
.hero{background:var(--wald);color:var(--leinen);
  padding:clamp(52px,10vw,104px) 0 clamp(44px,8vw,88px)}
.ueberzeile{font:600 11px/1.4 var(--grotesk);letter-spacing:.26em;text-transform:uppercase;
  color:var(--salbei-hell);margin:0 0 20px}
.hero h1{font-family:var(--serif);font-weight:500;letter-spacing:.005em;
  font-size:clamp(38px,7.6vw,72px);line-height:1.08;margin:0;max-width:17ch;
  text-wrap:balance}
.hero-text{font-family:var(--serif);font-size:clamp(20px,3vw,26px);line-height:1.5;
  color:#CFD8C9;max-width:52ch;margin:22px 0 0}

.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0;align-items:center}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  padding:15px 28px;background:var(--leinen);color:var(--wald);
  font:600 15px/1 var(--grotesk);letter-spacing:.02em;text-decoration:none;border:0;
  cursor:pointer;transition:background .15s ease}
.knopf:hover{background:#fff;color:var(--wald)}
.knopf-still{display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  padding:15px 26px;border:1px solid var(--linie-dunkel);color:var(--leinen);
  font:600 15px/1 var(--grotesk);text-decoration:none;transition:border-color .15s ease}
.knopf-still:hover{border-color:var(--leinen);color:var(--leinen)}

/* Helle Sektionen verwenden die dunkle Schaltfläche */
.cta .knopf{background:var(--tanne);color:var(--leinen)}
.cta .knopf:hover{background:var(--wald);color:var(--leinen)}
.cta .knopf-still{border-color:var(--linie);color:var(--tanne)}
.cta .knopf-still:hover{border-color:var(--tanne)}
.formular .knopf{background:var(--tanne);color:var(--leinen)}
.formular .knopf:hover{background:var(--wald)}

/* ---------- Abschnitte ---------- */
section{padding:var(--luft) 0}
.label{font:600 11px/1.4 var(--grotesk);letter-spacing:.26em;text-transform:uppercase;
  color:var(--salbei);margin:0 0 14px}
h2{font-family:var(--serif);font-weight:500;letter-spacing:.005em;
  font-size:clamp(29px,4.6vw,44px);line-height:1.16;margin:0 0 20px;color:var(--tanne);
  max-width:20ch;text-wrap:balance}
h3{font-family:var(--grotesk);font-size:18px;font-weight:600;letter-spacing:.005em;
  margin:0 0 8px;color:var(--tanne)}
p{margin:0 0 16px;max-width:var(--mass)}
p:last-child{margin-bottom:0}
.fliess{font-size:17.5px}
.nachsatz{color:var(--salbei);font-size:16px;margin-top:24px}

/* ---------- Karten ---------- */
.karten{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);
  grid-template-columns:1fr}
@media (min-width:680px){.karten{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.karten{grid-template-columns:repeat(4,1fr)}}
.karte{background:var(--papier);padding:32px 28px 28px;min-height:210px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:8px;transition:background .15s ease}
.karte:hover{background:#fff}
.karte p{color:var(--salbei);font-size:15.5px;line-height:1.6;flex:1;margin:0}
.karte-mehr{font:600 12px/1 var(--grotesk);letter-spacing:.14em;text-transform:uppercase;
  color:var(--salbei);margin-top:14px}
.karte:hover .karte-mehr{color:var(--tanne)}

/* ---------- Begriffspaare ---------- */
.paare{margin:0;display:grid;gap:0;border-top:1px solid var(--linie)}
.paare>div{padding:26px 0;border-bottom:1px solid var(--linie)}
.paare dt{font-family:var(--grotesk);font-size:17px;font-weight:600;color:var(--tanne);
  margin:0 0 6px}
.paare dd{margin:0;color:var(--salbei);max-width:var(--mass);font-size:16.5px}
@media (min-width:820px){
  .paare>div{display:grid;grid-template-columns:minmax(200px,264px) 1fr;gap:36px;
    align-items:start}
  .paare dt{margin:0}
  .paare.gross dt{font-family:var(--serif);font-size:27px;font-weight:500;line-height:1.25}
}

/* ---------- Ablauf ---------- */
.schritte{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:1px;
  background:var(--linie);border:1px solid var(--linie)}
@media (min-width:760px){.schritte{grid-template-columns:repeat(4,1fr)}}
.schritte li{counter-increment:s;background:var(--papier);padding:28px 24px}
.schritte li::before{content:counter(s,decimal-leading-zero);display:block;
  font:600 12px/1 var(--grotesk);letter-spacing:.14em;color:var(--salbei-hell);margin-bottom:16px}
.schritte p{color:var(--salbei);font-size:15.5px;margin:0}

/* ---------- Steuerhinweis ---------- */
.steuer{background:var(--tanne);color:var(--leinen)}
.steuer h2{color:var(--leinen)}
.steuer p{color:#CFD8C9;font-family:var(--serif);font-size:20px;line-height:1.55;
  max-width:60ch}

/* ---------- Orte ---------- */
.ortliste{color:var(--salbei);font-size:16px;line-height:2;max-width:none}
.ortgitter{list-style:none;margin:0;padding:0;display:grid;gap:0 28px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.ortgitter li{padding:11px 0;border-bottom:1px solid var(--linie);font-size:16px;
  color:var(--tanne)}

/* ---------- FAQ ---------- */
.faq{background:var(--papier);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.faq-liste{display:grid;gap:0;border-top:1px solid var(--linie)}
.faq-eintrag{padding:30px 0;border-bottom:1px solid var(--linie)}
.faq-eintrag h2{font-family:var(--serif);font-size:clamp(22px,3.2vw,29px);margin:0 0 12px;
  max-width:34ch}
.faq-eintrag p{color:var(--salbei);max-width:var(--mass);margin:0}

/* ---------- CTA ---------- */
.cta{background:var(--papier);border-top:1px solid var(--linie)}
.cta p{color:var(--salbei);font-size:18px}

/* ---------- Kontaktwege ---------- */
.wegliste{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie)}
@media (min-width:760px){.wegliste{grid-template-columns:repeat(3,1fr)}}
.weg{background:var(--papier);padding:28px 26px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:5px;transition:background .15s ease}
.weg:hover{background:#fff}
.weg-art{font:600 11px/1 var(--grotesk);letter-spacing:.24em;text-transform:uppercase;
  color:var(--salbei)}
.weg-wert{font-family:var(--serif);font-size:25px;color:var(--tanne);line-height:1.25}
.weg-hinweis{font-size:14.5px;color:var(--salbei);line-height:1.5}

/* ---------- Fuß ---------- */
.fuss{background:var(--wald);color:var(--leinen);padding:var(--luft) 0 0;margin-top:0}
.fuss-innen{display:grid;gap:40px}
@media (min-width:760px){.fuss-innen{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}}
.fuss-marke img{width:220px;margin-bottom:18px}
.fuss-satz{color:var(--salbei-hell);font-size:15.5px;max-width:34ch}
.fuss-block h2{font:600 11px/1 var(--grotesk);letter-spacing:.24em;text-transform:uppercase;
  color:var(--salbei-hell);margin:0 0 16px;max-width:none}
.fuss-block p{margin:0 0 9px;font-size:15.5px;color:#CFD8C9}
.fuss-block a{color:#CFD8C9;text-decoration:none}
.fuss-block a:hover{color:var(--leinen);text-decoration:underline}
.zeiten{color:var(--salbei-hell) !important;font-size:14.5px !important;margin-top:14px !important}
.fuss-zeile{border-top:1px solid var(--linie-dunkel);margin-top:var(--luft);padding-top:24px;
  padding-bottom:28px}
.fuss-zeile p{color:var(--salbei-hell);font-size:14px;margin:0;max-width:none}

/* ---------- Feste Kontaktleiste ---------- */
.ruf{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;
  grid-template-columns:1fr 1fr 1.2fr;background:var(--wald);
  border-top:1px solid var(--linie-dunkel)}
.ruf a{display:flex;align-items:center;justify-content:center;min-height:64px;
  font:600 14px/1 var(--grotesk);letter-spacing:.04em;text-decoration:none;
  color:var(--leinen);padding:0 8px}
.ruf a.ruf-wa{border-left:1px solid var(--linie-dunkel);border-right:1px solid var(--linie-dunkel)}
.ruf a.ruf-cta{background:var(--leinen);color:var(--wald)}
@media (min-width:900px){
  .ruf{display:none}
  body{padding-bottom:0}
}

/* ---------- Noch zu ergänzende Angaben ---------- */
.offen{border-left:2px solid var(--salbei-hell);padding-left:16px;color:var(--salbei)}

.recht h2{font-size:clamp(21px,3vw,27px);margin-top:44px}
.recht h2:first-child{margin-top:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}