/* Hochbeet & Gemüsegarten — "Rote Bete" */
@font-face{font-family:"Keim";src:url(/schrift/keim.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Blatt";src:url(/schrift/blatt.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}

:root{
  --bete:#5B1033; --tief:#3A0A21; --rettich:#FBEFE6; --erbse:#9ED98E; --moehre:#FF8A5B; --ader:#8C4466;
  --rettich-70:rgba(251,239,230,.74);
  --erde:#24170F; --kompost:#3D2A1C; --laub:#6E4E26; --zweig:#4A3322; --sand:#B79C78; --ton:#9C6B4A;
  --rand:clamp(16px,4.5vw,56px);
  --kopf:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf) + 12px)}
body{margin:0;background:var(--bete);color:var(--rettich);font:400 1.0625rem/1.6 "Blatt",system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--erbse);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--moehre);outline-offset:3px}
.vh{position:absolute;left:-9999px;top:0}
.vh:focus{left:12px;top:12px;z-index:99;background:var(--rettich);color:var(--bete);padding:10px 14px}
h1,h2,h3{font-family:"Keim",Georgia,serif;font-weight:620;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 96;line-height:1.02;letter-spacing:-.01em;margin:0 0 .4em}
h2{font-size:clamp(1.9rem,5.4vw,3.4rem);font-weight:560}
h3{font-size:1.45rem;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 36;line-height:1.15}
p{margin:0 0 1em;max-width:68ch}
em{font-style:italic}
.weit{padding-inline:var(--rand);max-width:1320px;margin-inline:auto}
.knopf{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:.6em 1.15em;border:1.5px solid var(--erbse);color:var(--erbse);text-decoration:none;font-weight:600;border-radius:999px}
.knopf:hover{background:var(--erbse);color:var(--tief)}
.klein{font-size:1rem;color:var(--rettich-70)}
.marke{font:600 1rem/1.2 "Blatt",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--erbse)}

/* ---------- Kopf: Saatband ---------- */
.kopf{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--tief) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--ader)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--kopf)}
.wortmarke{display:flex;align-items:center;gap:10px;color:var(--rettich);text-decoration:none;font:600 1.12rem/1.05 "Keim",serif;font-variation-settings:"SOFT" 100,"opsz" 24;min-height:48px}
.wortmarke svg{flex:none}
.wortmarke small{display:block;font:500 1rem/1.2 "Blatt",sans-serif;letter-spacing:.08em;color:var(--rettich-70);text-transform:uppercase}
.saatband{display:none}
.band-knopf{display:inline-flex;align-items:center;gap:10px;min-height:48px;min-width:48px;padding:0 14px;background:none;border:1.5px solid var(--ader);border-radius:999px;color:var(--rettich);font:600 1rem "Blatt",sans-serif;cursor:pointer}
.band-knopf i{display:block;width:22px;height:2px;background:var(--erbse);position:relative}
.band-knopf i::before,.band-knopf i::after{content:"";position:absolute;top:-3px;width:6px;height:8px;border-radius:50%;background:var(--erbse)}
.band-knopf i::before{left:2px}.band-knopf i::after{right:2px}
.band-lage{position:fixed;inset:0;z-index:60;background:var(--tief);padding:24px var(--rand);display:none;flex-direction:column;overflow:auto}
.band-lage.offen{display:flex}
.band-lage .zu{align-self:flex-end;min-height:48px;min-width:48px;background:none;border:1.5px solid var(--ader);border-radius:999px;color:var(--rettich);font:600 1rem "Blatt";padding:0 16px;cursor:pointer}
.band-senk{list-style:none;margin:28px 0 0;padding:0 0 0 30px;position:relative}
.band-senk::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:repeating-linear-gradient(var(--erbse) 0 10px,transparent 10px 16px)}
.band-senk li{position:relative;margin:0 0 6px}
.band-senk li::before{content:"";position:absolute;left:-27px;top:50%;width:12px;height:16px;margin-top:-8px;border-radius:50%;background:var(--sand)}
.band-senk a{display:block;padding:14px 0;color:var(--rettich);text-decoration:none;font:560 2rem/1.05 "Keim",serif;font-variation-settings:"SOFT" 100,"WONK" 1}
.band-senk a span{display:block;font:500 1rem "Blatt";color:var(--rettich-70);margin-top:4px}
.band-senk a[aria-current]{color:var(--erbse)}
.band-senk a[aria-current]::after{content:" ↑ keimt";font:600 1rem "Blatt";letter-spacing:.1em;text-transform:uppercase;color:var(--erbse);vertical-align:middle}
@media (min-width:980px){
  .band-knopf{display:none}
  .saatband{display:flex;align-items:flex-end;position:relative;gap:0;flex:1;max-width:720px;height:var(--kopf)}
  .saatband::before{content:"";position:absolute;left:0;right:0;bottom:22px;height:2px;background:repeating-linear-gradient(90deg,var(--ader) 0 14px,transparent 14px 20px)}
  .saatband a{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;padding-bottom:30px;color:var(--rettich);text-decoration:none;font-weight:600;font-size:1rem}
  .saatband a::after{content:"";position:absolute;bottom:17px;left:50%;width:9px;height:12px;margin-left:-4.5px;border-radius:50%;background:var(--sand);transition:transform .25s}
  .saatband a:hover::after{transform:scale(1.25)}
  .saatband a svg{position:absolute;bottom:26px;left:50%;margin-left:-9px;opacity:0;transform:scaleY(.2);transform-origin:bottom;transition:.35s}
  .saatband a[aria-current]{color:var(--erbse)}
  .saatband a[aria-current] svg{opacity:1;transform:none}
  .saatband a[aria-current]{padding-bottom:44px}
}

/* ---------- Querschnitt (Start) ---------- */
.schnitt{position:relative;padding-top:clamp(28px,6vw,72px)}
.luft{position:relative}
.schnitt h1{font-size:clamp(2.75rem,10.6vw,8.6rem);font-weight:640;letter-spacing:-.025em;line-height:.9;margin:0;max-width:12ch}
.schnitt h1 .amp{color:var(--erbse);font-style:italic;font-weight:400}
.schnitt h1 .dt{display:block;font-size:.42em;font-weight:420;letter-spacing:0;margin-top:.22em;color:var(--rettich-70);font-style:italic}
.keimreihe{display:block;width:100%;height:clamp(64px,11vw,120px);margin-top:4px}
.keimreihe path{fill:none;stroke:var(--erbse);stroke-width:2.2;stroke-linecap:round}
.keimreihe .blatt{fill:var(--erbse);stroke:none;transform-box:fill-box;transform-origin:50% 100%}
.keimreihe .saat{fill:var(--sand)}
@media (prefers-reduced-motion:no-preference){
  .keimreihe .stiel{stroke-dasharray:140;stroke-dashoffset:140;animation:wachs 1.6s cubic-bezier(.3,.7,.3,1) forwards}
  .keimreihe .blatt{transform:scale(0);animation:blatt .7s cubic-bezier(.3,1.6,.5,1) forwards}
  @keyframes wachs{to{stroke-dashoffset:0}}
  @keyframes blatt{to{transform:scale(1)}}
}
.kiste{position:relative;display:grid;grid-template-columns:14px 1fr 14px;border-top:3px solid var(--sand)}
@media (min-width:700px){.kiste{grid-template-columns:28px 1fr 64px}}
.brett{background:repeating-linear-gradient(180deg,#8B5E3C 0 2px,#A87650 2px 9px,#93653F 9px 11px,#B07F57 11px 26px)}
.brett.rechts{position:relative}
@media (min-width:700px){
  .brett.rechts{background:linear-gradient(90deg,#A87650 0 16px,transparent 16px),repeating-linear-gradient(180deg,var(--rettich-70) 0 1px,transparent 1px 10px) 16px 0/14px 100% no-repeat,var(--tief)}
}
.lagen{display:flex;flex-direction:column}
.lage{position:relative;padding:22px clamp(14px,3vw,36px) 22px;min-height:var(--h);transition:min-height .6s ease}
.lage .tief{position:absolute;top:10px;right:clamp(10px,2vw,20px);font:600 1rem/1 "Blatt";letter-spacing:.06em;color:var(--rettich);background:rgba(0,0,0,.28);padding:6px 8px;border-radius:3px}
.lage h3{margin:0 0 .3em;font-size:1.25rem;padding-right:96px}
.lage p{margin:0;max-width:56ch;font-size:1rem}
.lage.erde{background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.05) 1px,transparent 1.5px) 0 0/9px 11px,var(--erde)}
.lage.kompost{background:radial-gradient(circle at 50% 50%,#6a4a33 1.4px,transparent 2px) 0 0/13px 10px,var(--kompost)}
.lage.laub{background:radial-gradient(ellipse 7px 3px at 50% 50%,#8b6630 98%,transparent) 0 0/26px 14px,radial-gradient(ellipse 6px 3px at 50% 50%,#5c4020 98%,transparent) 13px 7px/26px 14px,var(--laub)}
.lage.zweig{background:repeating-linear-gradient(28deg,transparent 0 13px,#6b4a31 13px 16px,transparent 16px 30px),repeating-linear-gradient(-34deg,transparent 0 21px,#2f2015 21px 24px,transparent 24px 40px),var(--zweig)}
.lage.sand{background:radial-gradient(circle,#d8c3a2 1px,transparent 1.4px) 0 0/6px 6px,var(--sand);color:var(--tief)}
.lage.sand p,.lage.sand h3{color:var(--tief)}
.lage.gitter{min-height:0;padding-block:12px;background:repeating-linear-gradient(60deg,transparent 0 9px,#9aa0a0 9px 10.5px),repeating-linear-gradient(-60deg,transparent 0 9px,#9aa0a0 9px 10.5px),#1b120c;font-weight:600;font-size:1rem}
.lage.gitter span{background:var(--erde);padding:2px 8px}
.lage[hidden]{display:none}
.schnitt-wahl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 14px}
.schnitt-wahl button{min-height:48px;padding:0 16px;border-radius:999px;border:1.5px solid var(--ader);background:none;color:var(--rettich);font:600 1rem "Blatt";cursor:pointer}
.schnitt-wahl button[aria-pressed=true]{background:var(--erbse);border-color:var(--erbse);color:var(--tief)}
.schnitt-quelle{font-size:1rem;color:var(--rettich-70);margin:12px 0 0}
.einstieg{font-size:clamp(1.15rem,2.4vw,1.4rem);line-height:1.5;max-width:44ch;margin:28px 0 0}
.einstieg strong{color:var(--erbse);font-weight:600}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-block:clamp(56px,9vw,120px)}
.abschnitt.dunkel{background:var(--tief)}
.zwei{display:grid;gap:clamp(28px,5vw,72px)}
@media (min-width:900px){.zwei{grid-template-columns:5fr 7fr;align-items:start}}
.reihen{list-style:none;margin:0;padding:0;border-top:1px solid var(--ader)}
.reihen li{border-bottom:1px solid var(--ader)}
.reihen a{display:grid;grid-template-columns:3.2em 1fr;gap:6px 16px;padding:20px 0;text-decoration:none;color:var(--rettich)}
.reihen b{grid-row:span 2;font:500 2.2rem/1 "Keim",serif;font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--erbse)}
.reihen strong{font:600 1.3rem/1.2 "Keim",serif;font-variation-settings:"SOFT" 100}
.reihen span{color:var(--rettich-70)}
.reihen a:hover strong{color:var(--erbse)}

/* Höhenlinie 1,80 m */
.linie{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.linie li{display:grid;grid-template-columns:minmax(0,9.5em) 1fr 4.2em;align-items:center;gap:10px;min-height:36px;font-size:1rem}
.linie .bar{height:12px;background:linear-gradient(90deg,var(--erbse) var(--w),rgba(255,255,255,.07) var(--w));border-radius:0 6px 6px 0}
.linie .bar.ohne{background:repeating-linear-gradient(90deg,var(--ader) 0 6px,transparent 6px 11px);height:2px}
.linie .bar.null{background:none;border-left:3px solid var(--moehre)}
.linie b{text-align:right;font-variant-numeric:tabular-nums}
.linie-achse{display:grid;grid-template-columns:minmax(0,9.5em) 1fr 4.2em;gap:10px;font-size:1rem;color:var(--rettich-70);margin-top:8px}
.linie-achse span:nth-child(2){display:flex;justify-content:space-between}

/* Foto */
.foto{margin:0}
.foto figcaption{font-size:1rem;color:var(--rettich-70);margin-top:8px;line-height:1.4}
.foto figcaption a{color:inherit}
.foto-band{display:grid;gap:14px}
@media (min-width:760px){.foto-band{grid-template-columns:7fr 4fr;align-items:end}}
.foto img{border-radius:2px}

/* Monat jetzt */
.jetzt{display:grid;gap:22px}
@media (min-width:860px){.jetzt{grid-template-columns:auto 1fr;align-items:center}}
.jetzt-monat{font:500 clamp(4rem,16vw,11rem)/.85 "Keim",serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;color:var(--erbse);font-style:italic}
.jetzt ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.jetzt li{border:1.5px solid var(--ader);border-radius:999px;padding:8px 14px;font-size:1rem}
.jetzt li i{font-style:normal;color:var(--moehre);font-weight:600;margin-right:6px}

/* ---------- Samentüte (Unterseiten-Kopf) ---------- */
.tuete{position:relative;margin-top:clamp(24px,5vw,56px);background:var(--rettich);color:var(--tief);padding:44px clamp(18px,4vw,48px) 30px;
  clip-path:polygon(0 14px,2% 0,4% 14px,6% 0,8% 14px,10% 0,12% 14px,14% 0,16% 14px,18% 0,20% 14px,22% 0,24% 14px,26% 0,28% 14px,30% 0,32% 14px,34% 0,36% 14px,38% 0,40% 14px,42% 0,44% 14px,46% 0,48% 14px,50% 0,52% 14px,54% 0,56% 14px,58% 0,60% 14px,62% 0,64% 14px,66% 0,68% 14px,70% 0,72% 14px,74% 0,76% 14px,78% 0,80% 14px,82% 0,84% 14px,86% 0,88% 14px,90% 0,92% 14px,94% 0,96% 14px,98% 0,100% 14px,100% 100%,0 100%)}
.tuete-grid{display:grid;gap:24px}
@media (min-width:880px){.tuete-grid{grid-template-columns:1.5fr 1fr;align-items:end}}
.tuete .marke{color:var(--bete)}
.tuete h1{font-size:clamp(2.3rem,7vw,5.2rem);font-weight:650;line-height:.95;margin:.25em 0 .3em;color:var(--bete)}
.tuete .lead{font-size:1.15rem;max-width:52ch;color:var(--tief)}
.tuete a{color:var(--bete)}
.rueck{border:1.5px solid var(--bete);font-size:1rem}
.rueck caption{caption-side:top;text-align:left;font:600 1rem/1 "Blatt";letter-spacing:.14em;text-transform:uppercase;padding:10px 12px;background:var(--bete);color:var(--rettich)}
.rueck{border-collapse:collapse;width:100%}
.rueck th,.rueck td{padding:9px 12px;border-top:1px solid rgba(91,16,51,.35);text-align:left;vertical-align:top}
.rueck th{font-weight:600;width:44%}
.krumen{font-size:1rem;margin:0 0 6px}
.krumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.krumen li+li::before{content:"/";margin:0 8px;opacity:.55}
.krumen a{color:var(--bete);display:inline-block;padding:10px 0}

/* ---------- Fließtext ---------- */
.text{padding-block:clamp(40px,7vw,88px)}
.text h2{margin-top:1.4em}
.text h2:first-child{margin-top:0}
.text ul,.text ol{padding-left:1.2em;max-width:66ch}
.text li{margin-bottom:.45em}
.spalten{display:grid;gap:clamp(24px,4vw,56px)}
@media (min-width:960px){.spalten{grid-template-columns:minmax(0,1fr) 340px}}
.rand-notiz{border-left:3px solid var(--moehre);padding:6px 0 6px 18px;font-size:1rem}
.rand-notiz strong{color:var(--moehre)}
.quellen{font-size:1rem;color:var(--rettich-70);border-top:1px solid var(--ader);padding-top:18px;margin-top:40px}
.quellen a{color:var(--rettich)}
.quellen ul{padding-left:1.1em}

/* Tabellen */
.tab-huelle{overflow-x:auto;margin:20px 0}
table.liste{border-collapse:collapse;width:100%;font-size:1rem}
table.liste th,table.liste td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--ader);vertical-align:top}
table.liste thead th{font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--erbse);font-weight:600}
@media (max-width:719px){
  table.karten thead{display:none}
  table.karten,table.karten tbody,table.karten tr,table.karten td,table.karten th{display:block;width:100%}
  table.karten tr{border-top:2px solid var(--ader);padding:10px 0}
  table.karten td,table.karten th{border:0;padding:4px 0}
  table.karten td[data-k]::before{content:attr(data-k) ": ";color:var(--erbse);font-weight:600}
}

/* ---------- Pflanzkalender ---------- */
.kal{width:100%;border-collapse:collapse;table-layout:fixed;font-size:1rem}
.kal th.n{width:clamp(96px,26vw,220px);text-align:left;padding:8px 8px 8px 0;font-weight:600;vertical-align:middle}
.kal th.n small{display:block;font-weight:400;color:var(--rettich-70);font-size:1rem;line-height:1.2}
.kal thead th{font:600 1rem/1 "Blatt";color:var(--rettich-70);padding:8px 0;text-align:center}
.kal thead th.akt{color:var(--tief);background:var(--erbse)}
.kal td{padding:6px 1px;vertical-align:middle;border-top:1px solid rgba(140,68,102,.45)}
.kal td.akt{background:rgba(158,217,142,.12)}
.kal td i{display:block;height:6px;margin:3px 0;border-radius:3px}
.kal i.v{background:var(--sand)}
.kal i.s{background:var(--erbse)}
.kal i.e{background:var(--moehre)}
.kal i.x{background:transparent}
.legende{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:14px 0 6px;font-size:1rem}
.legende i{display:inline-block;width:26px;height:8px;border-radius:4px;margin-right:8px;vertical-align:middle}

/* ---------- Grenzabstand-Werkzeug ---------- */
.werk{background:var(--tief);border-top:3px solid var(--erbse);padding:clamp(18px,3.5vw,40px);margin:28px 0}
.werk-grid{display:grid;gap:28px}
@media (min-width:980px){.werk-grid{grid-template-columns:360px 1fr}}
.werk fieldset{border:0;margin:0 0 20px;padding:0}
.werk legend{font:600 1rem "Blatt";letter-spacing:.12em;text-transform:uppercase;color:var(--erbse);margin-bottom:10px}
.laender{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.laender button{min-height:48px;border:1.5px solid var(--ader);background:none;color:var(--rettich);font:600 1rem "Blatt";border-radius:6px;cursor:pointer}
.laender button[aria-pressed=true]{background:var(--erbse);color:var(--tief);border-color:var(--erbse)}
.laender button.ohne{border-style:dashed}
.hoehe-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hoehe-zeile output{font:600 2rem "Keim",serif;color:var(--rettich)}
input[type=range]{width:100%;height:48px;accent-color:var(--erbse);margin:0}
.ergebnis{font:600 clamp(3rem,9vw,5.6rem)/.9 "Keim",serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;color:var(--erbse);margin:6px 0 8px}
.ergebnis.keine{font-size:clamp(1.8rem,5vw,2.6rem);color:var(--moehre)}
.regel{font-size:1rem;margin:0 0 6px}
.regel-quelle{font-size:1rem;color:var(--rettich-70)}
.seitenansicht{width:100%;height:auto;display:block;background:linear-gradient(var(--bete),var(--bete)) ;border-radius:2px}
.treppe{width:100%;height:auto;display:block;margin-top:14px}
.werk-hinweis{font-size:1rem;color:var(--rettich-70);margin-top:16px}

/* ---------- FAQ ---------- */
.fragen details{border-bottom:1px solid var(--ader)}
.fragen summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font:560 1.3rem/1.25 "Keim",serif;font-variation-settings:"SOFT" 100;min-height:48px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";position:absolute;right:8px;top:26px;width:12px;height:16px;border-radius:50%;background:var(--sand);transition:.3s}
.fragen details[open] summary::after{background:var(--erbse);border-radius:50% 0;transform:rotate(45deg)}
.fragen details>div{padding:0 0 22px}

/* ---------- Fuß ---------- */
.fuss{background:var(--tief);margin-top:0;position:relative;padding-top:80px}
.fuss::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.05) 1px,transparent 1.5px) 0 0/9px 11px,var(--erde)}
.fuss-motto{font:500 clamp(2.6rem,9vw,6.4rem)/.92 "Keim",serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-style:italic;margin:0 0 28px;color:var(--rettich)}
.fuss-motto span{color:var(--erbse)}
.fuss-reihe{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding-bottom:36px;border-bottom:1px solid var(--ader)}
.fuss nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.fuss nav a{color:var(--rettich);display:inline-flex;align-items:center;min-height:48px}
.fuss-unten{padding:20px 0 36px;font-size:1rem;color:var(--rettich-70)}

/* 404 */
.leer{padding-block:clamp(48px,9vw,120px)}
.leer svg{width:min(560px,100%);height:auto;margin:18px 0 26px}
.leer h1{font-size:clamp(2.6rem,9vw,6rem)}
.leer ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}

/* Querschnitt: zweispaltig ab Desktop */
.schnitt-grid{display:grid;gap:8px}
@media (min-width:1100px){
  .schnitt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px);align-items:end}
  .schnitt h1{font-size:clamp(4rem,6.6vw,7rem)}
  .schnitt .lage{--hmax:1}
  .beet .lage{min-height:calc(var(--h) * .55)}
}