:root{
  /* vom Gründach im Juni: Moos, Substrat, Sedumblüte, Kalkstein */
  --moos:#5C7346;
  --moos-tief:#2C3823;
  --substrat:#8A7355;
  --bluete:#C4557E;
  --sedum:#D8B23F;
  --stein:#C7C4B6;
  --papier:#F2F4EC;
  --karte:#FCFCF8;

  --s--2:clamp(.72rem,.7rem + .1vw,.79rem);
  --s--1:clamp(.85rem,.82rem + .13vw,.94rem);
  --s-0:clamp(1.02rem,.99rem + .16vw,1.12rem);
  --s-1:clamp(1.16rem,1.07rem + .38vw,1.42rem);
  --s-2:clamp(1.5rem,1.18rem + 1.45vw,2.5rem);
  --s-3:clamp(2.05rem,1.35rem + 3.1vw,4.05rem);
  --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:'Karla',system-ui,sans-serif;
  font-size:var(--s-0);line-height:1.66;font-weight:400;
  color:var(--moos-tief);background:var(--papier);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--moos);outline-offset:3px;}
[id]{scroll-margin-top:3.5rem;}

.n-serif{font-family:'Fraunces',Georgia,serif;font-weight:500;line-height:1.1;letter-spacing:-.012em;
  font-variation-settings:'SOFT' 40,'WONK' 1;}
.n-wrap{width:min(69rem,100%);margin-inline:auto;padding-inline:var(--edge);}
.n-mark{display:block;font-size:var(--s--2);letter-spacing:.2em;text-transform:uppercase;color:var(--moos);font-weight:700;}

/* ── Präsenzo-Leiste ── */
.pz{background:var(--moos-tief);color:var(--papier);font-size:var(--s--1);}
.pz__in{width:min(69rem,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(--sedum);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}

/* ── Kopf ── */
.kopf{border-bottom:1px solid rgba(44,56,35,.16);}
.kopf__in{width:min(69rem,100%);margin-inline:auto;padding:1.1rem var(--edge);
  display:flex;align-items:baseline;gap:var(--space);flex-wrap:wrap;}
.haus{font-family:'Fraunces',serif;font-weight:600;font-size:var(--s-1);text-decoration:none;
  font-variation-settings:'SOFT' 60,'WONK' 1;}
.haus span{color:var(--moos);}
.nav{margin-inline-start:auto;display:flex;gap:1.5rem;flex-wrap:wrap;font-size:var(--s--1);font-weight:500;}
.nav a{text-decoration:none;color:var(--moos);padding-bottom:.15rem;border-bottom:2px solid transparent;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--moos-tief);border-bottom-color:var(--sedum);}

/* ── Hero ── */
.wiese{padding-block:clamp(2.5rem,1.9rem + 3.2vw,4.5rem) clamp(2rem,1.5rem + 2.5vw,3.25rem);}
.wiese h1{font-size:var(--s-3);max-width:17ch;margin-top:1rem;}
.wiese h1 em{font-style:italic;color:var(--moos);}
.wiese__lede{margin-top:1.3rem;max-width:45ch;font-size:var(--s-1);line-height:1.5;color:var(--substrat);}
.wiese__reihe{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.7rem;}

.g-voll{display:inline-block;background:var(--moos-tief);color:var(--papier);text-decoration:none;
  font-size:var(--s--1);font-weight:700;padding:.9rem 1.7rem;border-radius:2rem;border:1px solid var(--moos-tief);}
.g-voll:hover{background:var(--moos);border-color:var(--moos);}
.g-linie{display:inline-block;text-decoration:none;border:1px solid rgba(44,56,35,.32);border-radius:2rem;
  font-size:var(--s--1);font-weight:700;padding:.9rem 1.7rem;color:var(--moos-tief);}
.g-linie:hover{border-color:var(--moos-tief);background:var(--karte);}

/* ── Signatur: der Blühkalender ── */
.kal{margin-top:clamp(2.25rem,1.7rem + 2.5vw,3.5rem);background:var(--karte);
  border:1px solid rgba(44,56,35,.16);border-radius:1.1rem;padding:clamp(1.1rem,.8rem + 1.2vw,1.9rem);}
.kal__kopf{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;align-items:baseline;justify-content:space-between;
  padding-bottom:.9rem;border-bottom:1px solid rgba(44,56,35,.16);}
.kal__kopf h2{font-family:'Fraunces',serif;font-weight:600;font-size:var(--s-1);font-variation-settings:'SOFT' 50;}
.kal__kopf span{font-size:var(--s--2);color:var(--substrat);}

.monate{display:grid;grid-template-columns:repeat(12,1fr);gap:.22rem;margin-top:.9rem;}
.monate span{font-size:var(--s--2);color:var(--substrat);text-align:center;letter-spacing:.02em;}

.pflanze{padding-block:.85rem;border-bottom:1px solid rgba(44,56,35,.1);}
.pflanze:last-of-type{border-bottom:0;}
.pflanze__name{display:block;font-weight:700;font-size:var(--s--1);}
.pflanze__lat{font-weight:400;font-style:italic;color:var(--substrat);margin-inline-start:.4rem;}
.pflanze__band{display:grid;grid-template-columns:repeat(12,1fr);gap:.22rem;margin-top:.4rem;}
.pflanze__band i{display:block;height:.85rem;border-radius:.22rem;background:rgba(44,56,35,.07);}
.pflanze__band i[data-bl]{background:var(--f);box-shadow:inset 0 0 0 1px rgba(44,56,35,.16);}

@media (min-width:52rem){
  .monate{margin-top:0;}
  .kal__monatskopf{display:grid;grid-template-columns:minmax(13rem,17rem) 1fr;gap:0 var(--space);
    margin-top:.9rem;align-items:end;}
  .pflanze{display:grid;grid-template-columns:minmax(13rem,17rem) 1fr;gap:0 var(--space);align-items:center;}
  .pflanze__band{margin-top:0;}
}

.kal__fuss{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(44,56,35,.16);
  font-size:var(--s--1);color:var(--substrat);max-width:58ch;}

/* ── Abschnitte ── */
.beet{padding-block:clamp(3rem,2.2rem + 4vw,5.5rem);border-top:1px solid rgba(44,56,35,.14);}
.beet--karte{background:var(--karte);}
.beet--tief{background:var(--moos-tief);color:var(--papier);border-top-color:var(--moos-tief);}
.beet--tief .n-mark{color:var(--sedum);}
.beet__kopf{max-width:50ch;}
.beet__kopf h2{font-size:var(--s-2);margin-top:.7rem;}
.beet__kopf p{margin-top:.9rem;color:var(--substrat);}
.beet--tief .beet__kopf p{color:rgba(242,244,236,.78);}

/* ── Aufbauhöhen ── */
.hoehen{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
@media (min-width:50rem){.hoehen{grid-template-columns:repeat(3,1fr);}}
.hoehe{background:var(--karte);border:1px solid rgba(44,56,35,.16);border-radius:1.1rem;
  padding:1.5rem;display:flex;flex-direction:column;}
.beet--karte .hoehe{background:var(--papier);}
.hoehe__cm{font-family:'Fraunces',serif;font-weight:600;font-size:var(--s-2);line-height:1;
  font-variation-settings:'SOFT' 60,'WONK' 1;color:var(--moos);}
.hoehe h3{font-family:'Fraunces',serif;font-weight:600;font-size:var(--s-1);margin-top:.5rem;}
.hoehe p{margin-top:.6rem;font-size:var(--s--1);color:var(--substrat);}
.hoehe ul{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.4rem;}
.hoehe li{font-size:var(--s--2);background:rgba(92,115,70,.12);color:var(--moos-tief);
  padding:.25rem .6rem;border-radius:1rem;}
.hoehe__fuss{margin-top:auto;padding-top:1.1rem;font-size:var(--s--2);color:var(--moos);font-weight:700;}

/* ── Werte ── */
.werte{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
@media (min-width:44rem){.werte{grid-template-columns:1fr 1fr;}}
@media (min-width:66rem){.werte{grid-template-columns:repeat(4,1fr);}}
.wert b{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:var(--s-2);line-height:1;
  font-variation-settings:'SOFT' 60,'WONK' 1;}
.wert h3{margin-top:.6rem;font-size:var(--s-0);font-weight:700;}
.wert p{margin-top:.4rem;font-size:var(--s--1);color:var(--substrat);}
.beet--tief .wert p{color:rgba(242,244,236,.78);}

/* ── Liste ── */
.liste{margin-top:clamp(2rem,1.5rem + 2vw,3rem);border-top:1px solid rgba(44,56,35,.28);}
.beet--tief .liste{border-top-color:rgba(242,244,236,.4);}
.zeile{display:grid;gap:.3rem 1.5rem;grid-template-columns:1fr;
  padding-block:1.2rem;border-bottom:1px solid rgba(44,56,35,.14);}
.beet--tief .zeile{border-bottom-color:rgba(242,244,236,.18);}
@media (min-width:50rem){.zeile{grid-template-columns:minmax(11rem,.8fr) minmax(0,1.7fr) auto;align-items:baseline;}}
.zeile__name{font-family:'Fraunces',serif;font-weight:600;font-size:var(--s-1);font-variation-settings:'SOFT' 50;}
.zeile__text{font-size:var(--s--1);color:var(--substrat);}
.beet--tief .zeile__text{color:rgba(242,244,236,.78);}
.zeile__wert{font-size:var(--s--1);color:var(--moos);font-weight:700;white-space:nowrap;}
.beet--tief .zeile__wert{color:var(--sedum);}

/* ── 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.1rem;}
.bild figcaption{margin-top:.65rem;font-size:var(--s--2);letter-spacing:.14em;text-transform:uppercase;color:var(--substrat);}

/* ── 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:.18em;text-transform:uppercase;color:var(--moos);margin-bottom:.85rem;}
.beet--tief .paar h3{color:var(--sedum);}
.paar__zeile{display:flex;justify-content:space-between;gap:1rem;padding-block:.5rem;
  border-bottom:1px solid rgba(44,56,35,.14);font-size:var(--s--1);}
.beet--tief .paar__zeile{border-bottom-color:rgba(242,244,236,.18);}
.paar__zeile span:last-child{font-weight:700;text-align:right;}

/* ── Unterseiten ── */
.oben{padding-block:clamp(2.5rem,1.9rem + 3vw,4.25rem) 0;}
.oben h1{font-size:var(--s-2);max-width:21ch;margin-top:.75rem;}
.oben p{margin-top:.95rem;max-width:50ch;color:var(--substrat);font-size:var(--s-1);line-height:1.5;}

.fuss{border-top:1px solid rgba(44,56,35,.16);padding-block:2.5rem;font-size:var(--s--1);color:var(--substrat);}
.fuss a{color:var(--moos);}
.fuss p + p{margin-top:.45rem;}

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