:root{
  /* aus dem Familiengarten im Sommer: Rasen, Kletterholz, Erdbeere, Sonne, Himmel */
  --rasen:#7FB358;
  --rasen-hell:#DFEDD0;
  --rasen-tief:#2F5226;
  --holz:#C08A4E;
  --erdbeere:#D6453F;
  --sonne:#F0B429;
  --himmel:#6FB3D9;
  --tinte:#2B2A20;
  --papier:#FDFBF2;

  --s--2:clamp(.75rem,.73rem + .1vw,.82rem);
  --s--1:clamp(.87rem,.84rem + .13vw,.96rem);
  --s-0:clamp(1.03rem,1rem + .16vw,1.13rem);
  --s-1:clamp(1.18rem,1.08rem + .4vw,1.44rem);
  --s-2:clamp(1.55rem,1.2rem + 1.6vw,2.65rem);
  --s-3:clamp(2.15rem,1.4rem + 3.3vw,4.3rem);
  --space:clamp(1.4rem,1.1rem + 1.5vw,2.5rem);
  --edge:clamp(1.2rem,.7rem + 2.5vw,3.25rem);
}
*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dt,dd{margin:0;padding:0;}
body{
  font-family:'Rubik',system-ui,sans-serif;
  font-size:var(--s-0);line-height:1.65;font-weight:400;
  color:var(--tinte);background:var(--papier);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--erdbeere);outline-offset:3px;}
[id]{scroll-margin-top:3.5rem;}

.b-rund{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;line-height:1.1;letter-spacing:-.01em;}
.b-wrap{width:min(72rem,100%);margin-inline:auto;padding-inline:var(--edge);}
.b-mark{display:inline-block;font-size:var(--s--2);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--tinte);background:var(--sonne);padding:.3rem .8rem;border-radius:1rem;}

/* ── Präsenzo-Leiste ── */
.pz{background:var(--rasen-tief);color:var(--papier);font-size:var(--s--1);}
.pz__in{width:min(72rem,100%);margin-inline:auto;padding:.65rem var(--edge);
  display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:center;justify-content:center;text-align:center;}
.pz__cta{color:var(--sonne);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}

/* ── Kopf ── */
.kopf{background:var(--rasen-hell);}
.kopf__in{width:min(72rem,100%);margin-inline:auto;padding:1rem var(--edge);
  display:flex;align-items:center;gap:var(--space);flex-wrap:wrap;}
.haus{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:var(--s-1);text-decoration:none;
  display:flex;align-items:center;gap:.55rem;}
.haus i{width:1.2rem;height:1.2rem;border-radius:50%;background:var(--erdbeere);display:block;flex:none;}
.nav{margin-inline-start:auto;display:flex;gap:.35rem;flex-wrap:wrap;font-size:var(--s--1);font-weight:600;}
.nav a{text-decoration:none;color:var(--tinte);padding:.4rem .9rem;border-radius:1.4rem;}
.nav a:hover{background:var(--rasen);color:var(--papier);}
.nav a[aria-current="page"]{background:var(--tinte);color:var(--papier);}

/* ── Hero ── */
.wiese{background:var(--rasen-hell);padding-block:clamp(2.25rem,1.7rem + 3vw,4rem) clamp(2.5rem,1.9rem + 3vw,4.25rem);}
.wiese h1{font-size:var(--s-3);max-width:16ch;margin-top:1rem;}
.wiese h1 span{color:var(--erdbeere);}
.wiese__lede{margin-top:1.3rem;max-width:46ch;font-size:var(--s-1);line-height:1.5;color:#5C5648;}
.wiese__reihe{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.7rem;}

.k-voll{display:inline-block;background:var(--tinte);color:var(--papier);text-decoration:none;
  font-size:var(--s--1);font-weight:700;padding:.95rem 1.8rem;border-radius:2rem;border:3px solid var(--tinte);}
.k-voll:hover{background:var(--erdbeere);border-color:var(--erdbeere);}
.k-linie{display:inline-block;text-decoration:none;border:3px solid var(--tinte);border-radius:2rem;
  font-size:var(--s--1);font-weight:700;padding:.95rem 1.8rem;}
.k-linie:hover{background:var(--sonne);}

/* ── Signatur: der Gartenplan ── */
.plan{padding-block:clamp(3rem,2.2rem + 4vw,5.5rem);}
.plan__kopf{max-width:52ch;}
.plan__kopf h2{font-size:var(--s-2);margin-top:.8rem;}
.plan__kopf p{margin-top:.9rem;color:#5C5648;}

.plan__gitter{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(2rem,1.5rem + 2vw,3rem);align-items:start;}
@media (min-width:62rem){.plan__gitter{grid-template-columns:minmax(0,1.15fr) minmax(19rem,.85fr);}}
.plan__riss{background:var(--papier);border:3px solid var(--tinte);border-radius:1.4rem;padding:.9rem;}
.plan__riss svg{display:block;width:100%;height:auto;border-radius:.8rem;}
.plan__riss svg .nr{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14px;fill:#FDFBF2;}
.plan__mass{margin-top:.8rem;font-size:var(--s--2);letter-spacing:.1em;text-transform:uppercase;
  color:#5C5648;font-weight:700;text-align:center;}

.zonen{border-top:3px solid var(--tinte);}
.zone{display:grid;grid-template-columns:2.2rem 1fr auto;gap:.15rem .8rem;align-items:baseline;
  padding-block:.85rem;border-bottom:2px solid rgba(43,42,32,.14);}
.zone__nr{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:var(--s-1);color:var(--erdbeere);}
.zone__name{font-weight:700;}
.zone__preis{font-weight:700;color:var(--rasen-tief);white-space:nowrap;font-size:var(--s--1);}
.zone__text{grid-column:2 / -1;font-size:var(--s--1);color:#5C5648;}
.plan__fuss{margin-top:clamp(1.5rem,1.2rem + 1vw,2.25rem);font-size:var(--s--1);color:#5C5648;max-width:62ch;}

/* ── Abschnitte ── */
.beet{padding-block:clamp(3rem,2.2rem + 4vw,5.5rem);}
.beet--hell{background:var(--rasen-hell);}
.beet--tief{background:var(--rasen-tief);color:var(--papier);}
.beet--tief .b-mark{background:var(--sonne);color:var(--tinte);}
.beet__kopf{max-width:50ch;}
.beet__kopf h2{font-size:var(--s-2);margin-top:.8rem;}
.beet__kopf p{margin-top:.9rem;color:#5C5648;}
.beet--tief .beet__kopf p{color:rgba(253,251,242,.8);}

/* ── Karten ── */
.karten{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
@media (min-width:44rem){.karten{grid-template-columns:1fr 1fr;}}
@media (min-width:66rem){.karten{grid-template-columns:repeat(3,1fr);}}
.karte{border-top:5px solid var(--sonne);padding-top:1rem;}
.beet--tief .karte{border-top-color:var(--sonne);}
.karte h3{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:var(--s-1);}
.karte p{margin-top:.5rem;font-size:var(--s--1);color:#5C5648;}
.beet--tief .karte p{color:rgba(253,251,242,.8);}

/* ── Listen ── */
.zeilen{margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
.zeile{display:grid;gap:.25rem 1.5rem;grid-template-columns:1fr auto;align-items:baseline;
  padding-block:1.1rem;border-bottom:2px solid rgba(43,42,32,.14);}
.zeile:first-child{border-top:2px solid rgba(43,42,32,.14);}
.beet--tief .zeile{border-bottom-color:rgba(253,251,242,.22);}
.beet--tief .zeile:first-child{border-top-color:rgba(253,251,242,.22);}
.zeile__name{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:var(--s-1);}
.zeile__wert{font-weight:700;color:var(--rasen-tief);white-space:nowrap;}
.beet--tief .zeile__wert{color:var(--sonne);}
.zeile__text{grid-column:1 / -1;font-size:var(--s--1);color:#5C5648;}
.beet--tief .zeile__text{color:rgba(253,251,242,.8);}
.mwst{margin-top:1.4rem;font-size:var(--s--1);color:#5C5648;max-width:58ch;}
.beet--tief .mwst{color:rgba(253,251,242,.8);}

/* ── Bild ── */
.bild{margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
.bild img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:1.4rem;border:3px solid var(--tinte);}
.bild figcaption{margin-top:.7rem;font-size:var(--s--2);letter-spacing:.1em;text-transform:uppercase;color:#5C5648;font-weight:700;}

/* ── Kontakt ── */
.paare{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
@media (min-width:44rem){.paare{grid-template-columns:1fr 1fr;}}
.paar h3{font-size:var(--s--2);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rasen-tief);margin-bottom:.85rem;}
.beet--tief .paar h3{color:var(--sonne);}
.paar__zeile{display:flex;justify-content:space-between;gap:1rem;padding-block:.55rem;
  border-bottom:2px solid rgba(43,42,32,.14);font-size:var(--s--1);}
.beet--tief .paar__zeile{border-bottom-color:rgba(253,251,242,.22);}
.paar__zeile span:last-child{font-weight:700;text-align:right;}

/* ── Unterseiten ── */
.oben{background:var(--rasen-hell);padding-block:clamp(2.5rem,1.9rem + 3vw,4.25rem);}
.oben h1{font-size:var(--s-2);max-width:20ch;margin-top:.8rem;}
.oben h1 span{color:var(--erdbeere);}
.oben p{margin-top:1rem;max-width:50ch;color:#5C5648;font-size:var(--s-1);line-height:1.5;}

.fuss{padding-block:2.5rem;font-size:var(--s--1);color:#5C5648;}
.fuss a{color:var(--rasen-tief);font-weight:700;}
.fuss p + p{margin-top:.45rem;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

.plan__riss svg .haus-txt{font-family:'Rubik',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.06em;fill:#8A8172;text-transform:uppercase;}
