/* Einblick für den Hof (Online-Demo Biohof Schlake, Prompt 189): Rechner, Diagramme, Zeitleisten, Kistenplaner, Mini-Dashboard.
   Farben nur aus dem Siegel (Grün, Gold, Creme, Lila) und dem Bio-Grün. Ohne Skript bleiben Tabellen und Text sichtbar. */
.ds-ebkopf{position:relative;background:var(--h-tief);color:#fff;padding:2.6rem 0 3.2rem;overflow:hidden}
.ds-ebkopf::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(246,175,47,.22),transparent 45%),repeating-linear-gradient(135deg,rgba(246,175,47,.06) 0 16px,transparent 16px 32px)}
.ds-ebkopf .ds-wrap{position:relative;display:grid;gap:.9rem;justify-items:start}
.ds-ebkopf .ds-ueberschrift{color:var(--h-gold);display:inline-flex;align-items:center;gap:.5rem}
.ds-ebkopf h1{font:700 clamp(2.2rem,6.5vw,4rem)/1.02 "Alegreya",Georgia,serif;color:#fff;max-width:20ch}
.ds-eb-satz{margin:0;max-width:60ch;color:var(--h-creme);font-size:1.08rem}
.ds-eb-nav{list-style:none;margin:.2rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.ds-eb-nav a{display:inline-flex;align-items:center;min-height:38px;padding:.2rem .9rem;border-radius:999px;border:1px solid rgba(249,239,220,.4);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;transition:background .2s}
.ds-eb-nav a:hover{background:rgba(249,239,220,.16)}
.ds-eb-nav a:focus-visible{outline:3px solid var(--h-gold);outline-offset:2px}
.ds-ebkopf .ds-zacken{position:absolute;left:0;right:0;bottom:-1px}
.ds-eb>*,.ds-jahr{min-width:0}
.ds-eb{display:grid;gap:1.4rem;padding:1.6rem 0 2rem}
.ds-box{background:#fff;border:1px solid var(--h-linie);border-radius:24px;padding:1.6rem 1.6rem 1.4rem;box-shadow:0 10px 26px -20px rgba(11,37,25,.7);scroll-margin-top:16px}
.ds-box h2{font:700 clamp(1.7rem,4vw,2.3rem)/1.1 "Alegreya",Georgia,serif;color:var(--h-tief);margin-bottom:.4rem}
.ds-box h3{font:700 1.35rem/1.2 "Alegreya",Georgia,serif;color:var(--h-tief);margin:1.4rem 0 .3rem}
.ds-box h2+h3{margin-top:1rem}
.ds-beispiel{margin:0 0 1rem;padding:.5rem .8rem;border-left:4px solid var(--h-gold);background:var(--h-creme);border-radius:0 12px 12px 0;font-size:.92rem;color:#4a3a14}
@media (max-width:520px){.ds-box{padding:1.1rem .9rem 1rem;border-radius:20px}}

/* ---------- Regler ---------- */
.ds-regler-gruppe{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem 1.6rem;margin-bottom:1.4rem}
.ds-regler{display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;align-items:baseline}
.ds-regler label{font-weight:700;font-size:.92rem;color:var(--h-tief)}
.ds-regler output{font:700 1.5rem/1 "Alegreya",Georgia,serif;color:var(--h-gruen);min-width:3ch;text-align:right}
.ds-regler input[type=range]{grid-column:1/-1;width:100%;height:36px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;--fuell:50%}
.ds-regler input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--h-gruen) var(--fuell),#E4DCC6 var(--fuell))}
.ds-regler input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--h-gruen) var(--fuell),#E4DCC6 var(--fuell))}
.ds-regler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:var(--h-gold);border:3px solid var(--h-tief);box-shadow:0 4px 10px -3px rgba(0,0,0,.5);transition:transform .15s}
.ds-regler input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--h-gold);border:3px solid var(--h-tief);box-shadow:0 4px 10px -3px rgba(0,0,0,.5)}
.ds-regler input[type=range]:hover::-webkit-slider-thumb,.ds-regler input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.ds-regler input[type=range]:focus-visible{outline:3px solid var(--h-gold);outline-offset:3px;border-radius:8px}
@media (max-width:760px){.ds-regler-gruppe{grid-template-columns:1fr}}

.ds-zaehler-reihe{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:.8rem}
.ds-zaehler,.ds-kz{padding:1rem 1.1rem;border-radius:18px;background:var(--h-gruen-zart);display:grid;gap:.2rem;align-content:start}
.ds-zaehler-gross{background:var(--h-tief);color:#fff}
.ds-zahl{font:700 clamp(1.9rem,5vw,3rem)/1 "Alegreya",Georgia,serif;color:var(--h-gruen);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ds-zaehler-gross .ds-zahl{color:var(--h-gold);font-size:clamp(2.4rem,7vw,4rem)}
.ds-zaehler-text{font-size:.88rem;color:var(--h-leise)}
.ds-zaehler-gross .ds-zaehler-text{color:var(--h-creme)}
@media (max-width:760px){.ds-zaehler-reihe{grid-template-columns:1fr}}

.ds-vergleich{margin-top:1.2rem}
.ds-vergleich h3{margin-top:0}
.ds-vergleich-reihe{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.ds-vergleich-spalte{padding:1rem 1.1rem;border-radius:18px;border:2px solid var(--h-linie);display:grid;gap:.4rem;align-content:start}
.ds-plattform{background:#fff}
.ds-wir{border-color:var(--h-gruen);background:var(--h-gruen-zart)}
.ds-vergleich-name{margin:0;font-weight:700;font-size:.92rem}
.ds-vergleich-wert{margin:0;font:700 clamp(1.2rem,3.4vw,1.7rem)/1.15 "Alegreya",Georgia,serif;overflow-wrap:anywhere}
.ds-plattform .ds-vergleich-wert{color:var(--h-lila)}
.ds-wir .ds-vergleich-wert{color:var(--h-gruen)}
.ds-wir .ds-vergleich-wert span{font-size:1.4em}
.ds-balken-leer{height:12px;border-radius:6px;background:rgba(11,37,25,.08);overflow:hidden}
.ds-balken-leer i{display:block;height:100%;width:0;border-radius:6px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.ds-balken-rot{background:var(--h-lila)}
.ds-balken-gruen{background:var(--h-gruen)}
@media (max-width:620px){.ds-vergleich-reihe{grid-template-columns:1fr}}

/* ---------- Diagramme ---------- */
.ds-fig{margin:0;display:grid;gap:.8rem}
.ds-diagramm{display:grid;gap:.8rem;justify-items:center}
.ds-donut{width:min(100%,360px);height:auto;overflow:visible}
.ds-donut-bahn{stroke:#F1EAD8}
.ds-seg{cursor:pointer;transition:stroke-width .25s,opacity .25s;outline:none}
.ds-seg:hover,.ds-seg:focus-visible,.ds-seg.ist-wahl{stroke-width:42}
.ds-seg:focus-visible{stroke:var(--h-tief)}
.ds-diagramm:has(.ds-seg:hover) .ds-seg:not(:hover):not(.ist-wahl),.ds-diagramm:has(.ds-seg.ist-wahl) .ds-seg:not(.ist-wahl):not(:hover){opacity:.45}
.ds-c0{stroke:#2F6B3A;background:#2F6B3A}.ds-c1{stroke:#F6AF2F;background:#F6AF2F}.ds-c2{stroke:#380544;background:#380544}.ds-c3{stroke:#7DAE86;background:#7DAE86}.ds-c4{stroke:#0B2519;background:#0B2519}
svg .ds-c0,svg .ds-c1,svg .ds-c2,svg .ds-c3,svg .ds-c4{background:none}
.ds-donut-name{font:700 11px "Archivo",sans-serif;fill:var(--h-leise);letter-spacing:.04em}
.ds-donut-wert{font:700 21px "Alegreya",Georgia,serif;fill:var(--h-tief)}
.ds-donut-proz{font:600 9.5px "Archivo",sans-serif;fill:var(--h-leise)}
.ds-legende-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.ds-leg-knopf{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.25rem .8rem;border-radius:999px;border:1px solid var(--h-linie);background:#fff;font:600 .85rem "Archivo",sans-serif;color:var(--h-text);cursor:pointer;transition:background .15s,border-color .15s}
.ds-leg-knopf:hover,.ds-leg-knopf[aria-pressed=true]{background:var(--h-gruen-zart);border-color:var(--h-gruen)}
.ds-leg-knopf:focus-visible{outline:3px solid var(--h-gold);outline-offset:2px}
.ds-punkt{display:inline-block;width:14px;height:14px;border-radius:50%;flex:none}

.ds-umschalter{display:inline-flex;justify-self:start;padding:4px;border-radius:999px;background:#F1EAD8}
.ds-umschalter button{min-height:40px;padding:.2rem 1.2rem;border:0;border-radius:999px;background:transparent;font:700 .92rem "Archivo",sans-serif;color:var(--h-tief);cursor:pointer;transition:background .2s,color .2s}
.ds-umschalter button[aria-pressed=true]{background:var(--h-gruen);color:#fff}
.ds-umschalter button:focus-visible{outline:3px solid var(--h-gold);outline-offset:2px}
.ds-balkenbild{width:100%;height:auto;max-height:340px}
.ds-gitter line{stroke:#E4DCC6;stroke-width:1}
.ds-gitter text,.ds-achse{font:600 11px "Archivo",sans-serif;fill:var(--h-leise)}
.ds-achse{font-size:12px}
.ds-stange{fill:var(--h-gruen);cursor:pointer;transition:fill .2s;outline:none}
.ds-stange.ist-spitze{fill:#245530}
.ds-stange:hover,.ds-stange.ist-heiss,.ds-stange:focus-visible{fill:var(--h-gold);stroke:var(--h-tief);stroke-width:2}
.ds-stange-wert{font:700 13px "Archivo",sans-serif;fill:var(--h-tief)}
.ds-tooltip{margin:0;min-height:2.6em;padding:.45rem .8rem;border-radius:12px;background:var(--h-gruen-zart);color:var(--h-tief);font-weight:600;font-size:.92rem;width:100%}

.ds-daten{margin-top:.4rem;font-size:.88rem}
.ds-daten summary{cursor:pointer;font-weight:700;color:var(--p-text);padding:.3rem 0}
.ds-daten table{width:100%;border-collapse:collapse;margin:.4rem 0 .8rem}
.ds-daten caption{text-align:left;font-weight:700;padding:.3rem 0;color:var(--h-leise)}
.ds-daten th,.ds-daten td{text-align:left;padding:.35rem .5rem;border-bottom:1px solid var(--h-linie)}
.ds-daten thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--h-leise)}
.js-eb .ds-fig[data-hof-diagramm=balken] table[data-satz]{display:table}
.ds-fig[data-hof-diagramm=balken] table[data-satz=monat]{margin-top:0}

/* ---------- Zeitleiste „Abholungen heute“ ---------- */
.ds-regler-zeit{max-width:520px;margin-bottom:.4rem}
.ds-leiste-zeit{padding:0 .4rem}
.ds-spur{position:relative;height:150px;margin:1rem .6rem 1.4rem}
.ds-spur-linie,.ds-spur-fuell{position:absolute;left:0;top:76px;height:8px;border-radius:4px}
.ds-spur-linie{right:0;background:#E4DCC6}
.ds-spur-fuell{width:0;background:var(--h-gruen);transition:width .2s}
.ds-tick{position:absolute;top:70px;width:2px;height:20px;margin-left:-1px;background:#cdbf98}
.ds-tick.ist-stark{height:28px;top:66px;background:var(--h-tief)}
.ds-tick-text{position:absolute;top:34px;left:50%;transform:translateX(-50%);font:700 .8rem "Archivo",sans-serif;color:var(--h-leise)}
.ds-jetzt{position:absolute;top:56px;width:4px;height:48px;margin-left:-2px;background:var(--h-lila);border-radius:2px;transition:left .2s}
.ds-jetzt::before{content:"";position:absolute;left:50%;top:-5px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--h-lila)}
.ds-punkt-abholung{position:absolute;top:65px;width:30px;height:30px;margin-left:-15px;padding:0;border-radius:50%;border:3px solid var(--h-tief);background:var(--h-gold);cursor:pointer;opacity:1;transition:background .25s,transform .2s,border-color .25s}
.ds-punkt-abholung.ist-weg{background:var(--h-gruen);border-color:var(--h-gruen)}
.ds-punkt-abholung.ist-weg::after{content:"";position:absolute;left:8px;top:5px;width:6px;height:11px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.ds-punkt-abholung:hover,.ds-punkt-abholung:focus-visible,.ds-punkt-abholung.ist-gewaehlt{transform:scale(1.25);z-index:3}
.ds-punkt-abholung:focus-visible{outline:3px solid var(--h-tief);outline-offset:3px}
.ds-abholung.ist-bereit:not(.ist-da) .ds-punkt-abholung{opacity:0;transform:scale(0)}
.ds-abholung.ist-da .ds-punkt-abholung{animation:ds-erscheint .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes ds-erscheint{from{opacity:0;transform:scale(0) translateY(-20px)}to{opacity:1;transform:none}}
.ds-blase{position:absolute;bottom:42px;left:50%;transform:translateX(-50%) scale(.9);min-width:170px;max-width:230px;padding:.5rem .7rem;border-radius:12px;background:var(--h-tief);color:#fff;font-size:.78rem;line-height:1.3;text-align:left;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s;display:grid;gap:.1rem;z-index:5;font-family:"Archivo",sans-serif;font-weight:400}
.ds-blase strong{color:var(--h-gold)}
.ds-punkt-abholung:hover .ds-blase,.ds-punkt-abholung:focus-visible .ds-blase{opacity:1;visibility:visible;transform:translateX(-50%) scale(1)}
.ds-abholung-stand{font-weight:700}
@media (max-width:620px){.ds-spur{margin-inline:.9rem}.ds-blase{min-width:150px}}

/* ---------- Jahreslauf ---------- */
.ds-jahr{margin-top:.4rem}
.ds-jahr-monate{list-style:none;margin:0;padding:.3rem 0 1rem;display:grid;grid-template-columns:repeat(12,minmax(78px,1fr));gap:0;overflow-x:auto;border-bottom:4px solid var(--h-tief);position:relative;scrollbar-width:thin}
.ds-jahr-monate li{position:relative;padding:.3rem .2rem 0;min-height:120px;display:flex;flex-direction:column;align-items:center;gap:.4rem;border-left:1px dashed #d8cfb3}
.ds-jahr-monate li:first-child{border-left:0}
.ds-monat{font:700 .85rem "Archivo",sans-serif;color:var(--h-leise);text-transform:uppercase;letter-spacing:.06em}
.ds-jahr-monate li.ist-heute{background:linear-gradient(180deg,rgba(246,175,47,.22),transparent)}
.ds-jahr-monate li.ist-heute .ds-monat{color:var(--h-tief)}
.ds-jahr-monate li.ist-heute .ds-monat::after{content:" · heute";text-transform:none;letter-spacing:0;color:var(--h-gold-dunkel)}
.ds-jmarke{display:grid;justify-items:center;gap:.25rem;max-width:90px;padding:.2rem;border:0;background:transparent;cursor:pointer;font:600 .75rem/1.15 "Archivo",sans-serif;color:var(--h-text);text-align:center;hyphens:auto;overflow-wrap:anywhere}
.ds-jmarke::before{content:"";width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--h-tief);transition:transform .2s}
.ds-jmarke-saison::before{background:var(--h-gruen)}
.ds-jmarke-aktion::before{background:var(--h-gold)}
.ds-jmarke-feiertag::before{background:var(--h-lila)}
.ds-jmarke:hover::before,.ds-jmarke:focus-visible::before,.ds-jmarke.ist-gewaehlt::before{transform:scale(1.3)}
.ds-jmarke:focus-visible{outline:3px solid var(--h-gold);outline-offset:2px;border-radius:8px}
.ds-jahr.ist-bereit:not(.ist-da) .ds-jmarke{opacity:0;transform:translateY(14px)}
.ds-jahr.ist-da .ds-jmarke{animation:ds-erscheint .55s cubic-bezier(.3,1.4,.5,1) both}
.ds-jahr.ist-da li:nth-child(3n) .ds-jmarke{animation-delay:.1s}.ds-jahr.ist-da li:nth-child(3n+1) .ds-jmarke{animation-delay:.25s}.ds-jahr.ist-da li:nth-child(3n+2) .ds-jmarke{animation-delay:.4s}
.ds-jahr-info{margin:.8rem 0 .4rem;padding:.7rem 1rem;border-radius:14px;background:var(--h-gruen-zart);font-weight:600;min-height:3.2em;border-left:6px solid var(--h-gruen)}
.ds-jahr-info[data-art=aktion]{background:var(--h-creme);border-color:var(--h-gold)}
.ds-jahr-info[data-art=feiertag]{background:#f1e6f3;border-color:var(--h-lila)}
.ds-legende{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.85rem}
.ds-legende li::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:.4rem;vertical-align:-1px}
.ds-leg-saison::before{background:var(--h-gruen)}.ds-leg-aktion::before{background:var(--h-gold)}.ds-leg-feiertag::before{background:var(--h-lila)}

/* ---------- Kistenplaner ---------- */
.ds-kiste{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:center}
.ds-kiste-wahl{display:grid;gap:1.1rem}
.ds-auswahl{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.ds-auswahl legend{font-weight:700;font-size:.92rem;margin-bottom:.4rem;padding:0;color:var(--h-tief)}
.ds-auswahl button{min-height:46px;padding:.3rem 1.2rem;border-radius:999px;border:2px solid var(--h-gruen);background:#fff;color:var(--h-gruen);font:700 .95rem "Archivo",sans-serif;cursor:pointer;transition:background .2s,color .2s,transform .15s}
.ds-auswahl button:hover{transform:translateY(-2px)}
.ds-auswahl button[aria-pressed=true]{background:var(--h-gruen);color:#fff}
.ds-auswahl button:focus-visible{outline:3px solid var(--h-gold);outline-offset:2px}
.ds-empfehlung{margin:0;padding:.8rem 1rem;border-radius:14px;background:var(--h-creme);border-left:6px solid var(--h-gold);font-weight:700;color:var(--h-tief)}
.ds-kiste-bild{background:radial-gradient(circle at 50% 30%,var(--h-gruen-zart),transparent 70%)}
.ds-kistenbild{width:100%;height:auto;max-height:320px;overflow:visible}
.ds-kiste-koerper{fill:var(--h-tief)}
.ds-kiste-latte{stroke:var(--h-gold);stroke-width:2;opacity:.7}
.ds-kiste-rand{fill:#245530;stroke:var(--h-gold);stroke-width:2}
.ds-kiste-schrift{font:700 15px "Alegreya",Georgia,serif;fill:var(--h-gold);letter-spacing:.2em}
.ds-item-in{animation:ds-plumps .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes ds-plumps{from{opacity:0;transform:translateY(-70px) rotate(-30deg)}to{opacity:1;transform:none}}
.ds-f-gold{fill:var(--h-gold);stroke:#8A5A08;stroke-width:1}
.ds-f-gruen{fill:var(--h-gruen);stroke:#0B2519;stroke-width:1}
.ds-f-lila{fill:var(--h-lila);stroke:#0B2519;stroke-width:1}
.ds-f-creme{fill:var(--h-creme);stroke:#8A5A08;stroke-width:1}
.ds-strich-gruen{fill:none;stroke:#7DAE86;stroke-width:3;stroke-linecap:round}
.ds-strich-hell{fill:none;stroke:#7DAE86;stroke-width:2;stroke-linecap:round}
@media (max-width:760px){.ds-kiste{grid-template-columns:1fr}}

/* ---------- Mini-Dashboard ---------- */
.ds-dash{background:linear-gradient(180deg,#fff,var(--h-papier))}
.ds-kennzahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1rem}
.ds-kz .ds-zahl{font-size:clamp(1.8rem,4.6vw,2.6rem)}
.ds-sparkbild{width:100%;height:48px;overflow:visible}
.ds-spark-flaeche{fill:rgba(47,107,58,.14)}
.ds-spark-linie{stroke:var(--h-gruen);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ds-spark-punkt{fill:var(--h-gold);stroke:var(--h-tief);stroke-width:1.5}
.ds-kz-ring{grid-template-columns:auto 1fr;align-items:center;gap:.8rem}
.ds-ringbild{width:104px;height:104px}
.ds-ring-bahn{stroke:#fff}
.ds-ring-bogen{stroke:var(--h-gruen)}
.ds-ring-text{font:700 22px "Alegreya",Georgia,serif;fill:var(--h-tief)}
.ds-top figcaption{font-weight:700;color:var(--h-tief)}
.ds-top-liste{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ds-top-liste li{display:grid;grid-template-columns:minmax(110px,170px) 1fr 2.5rem;gap:.7rem;align-items:center;font-size:.9rem}
.ds-top-balken{height:16px;border-radius:8px;background:#F1EAD8;overflow:hidden}
.ds-top-balken i{display:block;height:100%;width:100%;border-radius:8px;background:linear-gradient(90deg,var(--h-gruen),#7DAE86);transition:width 1s cubic-bezier(.2,.7,.2,1)}
.ds-top-liste.ist-bereit .ds-top-balken i{width:0}
.ds-top-zahl{font-weight:700;text-align:right}
@media (max-width:760px){.ds-kennzahlen{grid-template-columns:1fr}.ds-top-liste li{grid-template-columns:1fr 2.2rem;gap:.2rem .5rem}.ds-top-name{grid-column:1/-1}}
.ds-eb-fuss{display:flex;flex-wrap:wrap;gap:.6rem;margin:.4rem 0 0}

@media (prefers-reduced-motion:reduce){
  .ds-item-in,.ds-abholung.ist-da .ds-punkt-abholung,.ds-jahr.ist-da .ds-jmarke{animation:none!important}
  .ds-abholung.ist-bereit:not(.ist-da) .ds-punkt-abholung,.ds-jahr.ist-bereit:not(.ist-da) .ds-jmarke{opacity:1;transform:none}
  .ds-balken-leer i,.ds-top-balken i,.ds-seg,.ds-spur-fuell,.ds-jetzt{transition:none!important}
}