/* oekohof-cms site.css — Fassung 2026-07-29.6 */
/* ═══ OEKOHOF — Website ═════════════════════════════════════════════
   Vier Designvarianten über body[data-thema="a|b|c|d"].
   Umschaltbar im Adminbereich unter Einstellungen → Design.
   ═════════════════════════════════════════════════════════════════ */

/* ─── Variante A: Heidekraut, ruhig ─── */
body[data-thema=a]{
  --hg:#141A16; --hg2:#1C241D; --grau:#20291F; --papier:#E7E8E2;
  --text:#E7E8E2; --matt:#9AA396; --akzent:#7A5A83; --akzent2:#5F7047;
  --auf-akzent:#fff; --linie:rgba(231,232,226,.16);
  --display:"Bricolage Grotesque",Georgia,serif; --body:system-ui,sans-serif; --mono:ui-monospace,monospace;
  --radius:2px;
}
/* ─── Variante B: Orange und Flaschengrün (Vorgabe) ─── */
body,body[data-thema=b]{
  --orange:#F5883E; --orange-dk:#DE7328; --orange-lt:#FBBE8C;
  --gruen:#1E3A2B; --gruen-md:#2C5340; --gruen-lt:#4A7A5E;
  --creme:#FDF8F2; --taupe:#DFD2C6; --taupe-dk:#C9B8A8;

  --hg:#FDF8F2; --hg2:#DFD2C6; --grau:#DFD2C6; --papier:#1E3A2B;
  --text:#22332A; --matt:#6B7A6F; --akzent:#F5883E; --akzent2:#1E3A2B;
  --auf-akzent:#fff; --linie:rgba(34,51,42,.18);
  --display:"Quicksand","Trebuchet MS",sans-serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;
  --mono:"Quicksand",ui-monospace,monospace;
  --radius:8px; --leiste:52px;
}
/* ─── Variante C: hell und luftig ─── */
body[data-thema=c]{
  --hg:#FCFCFA; --hg2:#F2F3EE; --grau:#F2F3EE; --papier:#46603F;
  --text:#2A3327; --matt:#77806F; --akzent:#46603F; --akzent2:#8DA37E;
  --auf-akzent:#fff; --linie:#E0E2D9;
  --display:Jost,system-ui,sans-serif; --body:system-ui,sans-serif; --mono:ui-monospace,monospace;
  --radius:0;
}
/* ─── Variante D: Limette, technisch ─── */
body[data-thema=d]{
  --hg:#FFFFFF; --hg2:#F1F1EF; --grau:#F1F1EF; --papier:#0E2116;
  --text:#0E2116; --matt:#6B7A6F; --akzent:#E8F59B; --akzent2:#0E2116;
  --auf-akzent:#0E2116; --linie:#DEDDD6;
  --display:"DM Mono",ui-monospace,monospace; --body:Inter,system-ui,sans-serif; --mono:"DM Mono",ui-monospace,monospace;
  --radius:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--hg);color:var(--text);font:400 17px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  -webkit-tap-highlight-color:rgba(95,112,71,.18)}
/* Lange Wörter und Adressen dürfen die Seite nicht aufreissen */
p,li,h1,h2,h3,h4,td,dd{overflow-wrap:break-word}
body[data-thema=b]{font-weight:300;font-size:clamp(1rem,.4vw + .92rem,1.09rem)}
body[data-thema=b] h1,body[data-thema=b] h2,body[data-thema=b] h3{font-weight:700;letter-spacing:-.005em}
body[data-thema=b] h2{color:var(--gruen)}
body[data-thema=b] .bg-dunkel h2,body[data-thema=b] .bg-dunkel h3{color:var(--creme)}
img,picture,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,6vw,4.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.9rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--akzent2);outline-offset:3px}
.sprung{position:absolute;left:-9999px}
.sprung:focus{left:1rem;top:1rem;z-index:99;background:var(--hg);padding:.7rem 1.2rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.6rem)}
.band{padding:clamp(3.5rem,8vw,7rem) 0}
.bg-grau{background:var(--grau)}
.bg-dunkel{background:var(--papier);color:var(--hg)}
.bg-dunkel h2,.bg-dunkel h3{color:var(--hg)}
.bg-akzent{background:var(--akzent);color:var(--auf-akzent)}
.kicker{font:500 .72rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:.65;margin-bottom:1rem}
.lead{font-size:1.16rem;opacity:.85;max-width:56ch}
.klein{font-size:.84rem;opacity:.62}
.mitte{max-width:66ch;margin-inline:auto;text-align:center}
.zwei{display:grid;gap:clamp(1.6rem,4vw,3.4rem);grid-template-columns:1fr 1fr;align-items:center}
.zwei.kehren > .bild{order:2}
@media(max-width:860px){.zwei{grid-template-columns:1fr}.zwei.kehren > .bild{order:0}}
.bild{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--grau)}
.bild img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.bild.breit img{aspect-ratio:21/9}

/* ─── Knöpfe ─── */
.btn{display:inline-flex;align-items:center;gap:.5em;font:500 .92rem/1 var(--body);
  padding:.95em 1.6em;border-radius:99px;border:1.6px solid currentColor;text-decoration:none;
  cursor:pointer;background:none;transition:background .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-voll{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
.btn-hell{background:none;border-color:currentColor}
/* Beim Überfahren wird die Schrift zur Fläche — die Schriftfarbe muss
   deshalb der Hintergrund des Bereichs sein, nicht --papier. Auf dunklem
   Grund war --papier ebenfalls dunkel: dunkel auf dunkel, unlesbar. */
.btn-hell:hover,.btn-hell:focus-visible{background:currentColor;color:var(--hg)}
.bg-dunkel .btn-hell:hover,.bg-dunkel .btn-hell:focus-visible{
  background:var(--hg);border-color:var(--hg);color:var(--papier)}
.bg-akzent .btn-hell:hover,.bg-akzent .btn-hell:focus-visible{
  background:var(--papier);border-color:var(--papier);color:var(--hg)}
/* Variante B: im dunklen Kontaktbereich der orange Akzent */
body[data-thema=b] .bg-dunkel .btn-hell:hover,
body[data-thema=b] .bg-dunkel .btn-hell:focus-visible{
  background:var(--orange);border-color:var(--orange);color:#fff}

/* ─── Kopfzeile ─── */
.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:1.5rem;
  padding:.85rem clamp(1.1rem,4vw,2.6rem);background:color-mix(in srgb,var(--hg) 90%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linie)}
.marke{text-decoration:none;line-height:1.15}
.marke b{display:block;font-family:var(--display);font-size:1.02rem}
.marke span{font-size:.72rem;opacity:.6}
.top nav{margin-left:auto;display:flex;gap:1.3rem;flex-wrap:wrap}
.top nav a{text-decoration:none;font-size:.9rem;opacity:.78;padding:.2rem 0;border-bottom:1.5px solid transparent}
.top nav a:hover{opacity:1;border-bottom-color:var(--akzent)}
.burger{display:none;margin-left:auto;background:none;border:0;color:inherit;cursor:pointer;padding:.4rem}
@media(max-width:980px){
  .burger{display:block}
  .top nav{position:fixed;inset:60px 0 auto;flex-direction:column;gap:0;background:var(--hg);
    border-bottom:1px solid var(--linie);padding:.5rem 0;display:none}
  .top nav.auf{display:flex}
  .top nav a{padding:.8rem clamp(1.1rem,4vw,2.6rem);font-size:1rem;border-bottom:1px solid var(--linie)}
}

/* ─── Hero ─── */
.hero{position:relative;min-height:min(88vh,760px);min-height:min(88svh,760px);display:grid}
.slide{grid-area:1/1;position:relative;display:grid;align-items:end;opacity:0;
  visibility:hidden;transition:opacity .8s}
.slide.on{opacity:1;visibility:visible}
.slide-bg{position:absolute;inset:0;overflow:hidden;background:var(--papier)}
.slide-bg img{width:100%;height:100%;object-fit:cover}
.slide-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,18,12,calc(var(--dunkel)*.5)) 0%,rgba(10,18,12,var(--dunkel)) 100%)}
.slide-txt{position:relative;padding:clamp(2rem,7vw,5rem) clamp(1.1rem,4vw,2.6rem);
  max-width:1180px;margin:0 auto;width:100%;color:#fff}
.slide-txt .lead{color:rgba(255,255,255,.9)}
.cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.punkte{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);display:flex;gap:.7rem;z-index:5}
.punkte button{position:relative;width:34px;height:4px;border:0;border-radius:99px;
  background:rgba(255,255,255,.4);cursor:pointer;padding:0}
/* Unsichtbare Antippfläche von 44px — der Strich bleibt schmal */
.punkte button::before{content:"";position:absolute;left:0;right:0;top:-20px;bottom:-20px}
.punkte button[aria-selected=true]{background:#fff}

/* ─── Kennzahlen ─── */
.kpi{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));text-align:center}
.kpi b{display:block;font-family:var(--display);font-size:clamp(2.2rem,5vw,3.4rem);line-height:1}
.kpi span{display:block;font-size:.84rem;opacity:.65;margin-top:.35rem}

/* ─── Kulturen ─── */
.kulturen{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.1rem}
.kulturen li{display:grid;grid-template-columns:2.6rem 1fr;gap:.2rem 1rem;
  padding:.9rem 0;border-top:1px solid var(--linie);align-items:baseline}
.kulturen i{font:400 .78rem/1 var(--mono);opacity:.45;font-style:normal}
.kulturen strong{font-family:var(--display);font-weight:600;font-size:1.05rem}
.kulturen em{grid-column:2;font-style:normal;font-size:.86rem;opacity:.6}

/* ─── Hofjahr ─── */
.jahr-rollen{overflow-x:auto;padding-bottom:.5rem}
.jahr{min-width:660px}
.monate,.spur{display:grid;grid-template-columns:9rem repeat(12,1fr);gap:2px;align-items:center}
.monate{margin-bottom:.7rem;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.monate span{text-align:center}
.monate .jetzt{opacity:1;font-weight:700}
.spur{margin-bottom:.35rem}
.spur-titel{font-size:.84rem;padding-right:.9rem;opacity:.8}
.balken{grid-row:1;height:36px;border:0;border-radius:calc(var(--radius) / 2);cursor:pointer;
  font:500 .72rem/1 var(--body);color:var(--papier);padding:0 .7rem;text-align:left;
  overflow:hidden;white-space:nowrap;transition:filter .2s,transform .2s}
.balken:hover{filter:brightness(1.12);transform:scale(1.015)}
.jahr-detail{margin-top:1.8rem;padding:1.4rem;border-radius:var(--radius);
  background:color-mix(in srgb,var(--hg) 12%,transparent);border:1px solid var(--linie);max-width:70ch}
.jahr-detail h3{margin-bottom:.4rem}
.jahr-detail p{margin:0;opacity:.85}

/* ─── Galerie ─── */
.filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.chip{font:500 .8rem/1 var(--body);padding:.55em 1.1em;border-radius:99px;
  border:1.4px solid var(--linie);background:none;color:inherit;cursor:pointer;transition:all .2s}
.chip[aria-pressed=true]{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
.galerie{display:grid;gap:var(--luecke,12px);
  grid-template-columns:repeat(auto-fill,minmax(var(--thumb,180px),1fr))}
.gal{padding:0;border:0;background:var(--grau);cursor:zoom-in;border-radius:calc(var(--radius) / 2);
  overflow:hidden;aspect-ratio:1;transition:transform .25s}
.gal:hover{transform:scale(1.03)}
.gal img{width:100%;height:100%;object-fit:cover}
.gal.weg{display:none}
.lupe{position:fixed;inset:0;z-index:200;background:rgba(8,14,10,.94);display:grid;
  place-items:center;padding:1.5rem;animation:lupeAuf .2s ease}
@keyframes lupeAuf{from{opacity:0}to{opacity:1}}
.lupe-inhalt{display:grid;place-items:center;max-width:100%}
.lupe-bild{max-width:min(94vw,1400px);max-height:82vh;max-height:82svh;
  object-fit:contain;border-radius:var(--radius);transition:opacity .18s}
.lupe-bild.laedt{opacity:.25}
.lupe-text{color:#fff;margin:1rem 0 0;font-size:.9rem;text-align:center;opacity:.85;max-width:70ch}
.lupe-text[hidden]{display:none}
.lupe-zaehler{color:#fff;margin:.5rem 0 0;font:400 .78rem/1 var(--mono);
  letter-spacing:.08em;opacity:.55}
.lupe-zaehler[hidden]{display:none}
.lupe-fehler{color:#fff;opacity:.8;font-size:.95rem}

.lupe-zu{position:absolute;top:1.2rem;right:1.2rem;background:none;
  border:1.5px solid rgba(255,255,255,.5);color:#fff;border-radius:99px;
  padding:.55em 1.1em;cursor:pointer;font:500 .85rem/1 var(--body);z-index:2}
.lupe-zu:hover{background:#fff;color:var(--hg)}

/* Blätterpfeile — gross genug zum Treffen, aber zurückhaltend */
.lupe-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);
  color:#fff;border-radius:50%;cursor:pointer;
  font:300 1.9rem/1 var(--body);padding:0 0 .12em;
  transition:background .18s,border-color .18s}
.lupe-pfeil:hover{background:#fff;border-color:#fff;color:var(--hg)}
.lupe-vor{left:1.2rem}
.lupe-nach{right:1.2rem}
.lupe-pfeil:focus-visible{outline:2.5px solid #fff;outline-offset:3px}

@media (max-width: 700px){
  .lupe{padding:.8rem}
  .lupe-bild{max-height:70svh}
  .lupe-pfeil{width:46px;height:46px;top:auto;bottom:1.2rem;transform:none}
  .lupe-vor{left:1rem}
  .lupe-nach{right:1rem}
  .lupe-zu{top:.9rem;right:.9rem;padding:.5em .9em;font-size:.8rem}
  .lupe-zaehler{margin-bottom:3.4rem}
}
@media (hover: none){
  .lupe-pfeil:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
}

/* ─── Presse ─── */
.presse{list-style:none;padding:0;margin:1.4rem 0 0}
.presse a{display:grid;grid-template-columns:9rem 1fr auto;gap:1.2rem;align-items:baseline;
  padding:1.1rem 0;border-top:1px solid var(--linie);text-decoration:none;transition:padding .25s,opacity .2s}
.presse a:hover{padding-left:.6rem}
.presse li:last-child a{border-bottom:1px solid var(--linie)}
.datum{font:400 .78rem/1 var(--mono);opacity:.5}
.ttl{display:block;font-family:var(--display);font-size:1.06rem;font-weight:600}
.quelle{display:block;font-size:.84rem;opacity:.6;margin-top:.15rem}
.datei{font:400 .72rem/1 var(--mono);opacity:.5;white-space:nowrap}
@media(max-width:700px){.presse a{grid-template-columns:1fr;gap:.3rem}}

/* ─── Partner ─── */
.gruppe{font:500 .7rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  opacity:.55;margin:2.4rem 0 1.1rem}
.gruppe:first-of-type{margin-top:1.6rem}
.partner{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.pt{display:flex;flex-direction:column;gap:.7rem;padding:1.5rem;text-decoration:none;
  border:1px solid var(--linie);border-radius:var(--radius);transition:border-color .25s,transform .25s}
.pt:hover{transform:translateY(-3px);border-color:var(--akzent2)}
.pt-logo{display:flex;align-items:center;gap:.7rem;min-height:2.2rem}
.pt-logo img{max-height:2.2rem;width:auto}
.pt-logo b{font-family:var(--display);font-size:1.05rem;line-height:1.15}
.pt-txt{font-size:.9rem;opacity:.72;flex:1}
.pt-go{font:400 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.pt:hover .pt-go{opacity:1}

/* ─── Hofladen ─── */
.produkte{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin:1.8rem 0}
.karte{border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;background:var(--hg)}
.karte-bild{position:relative;background:var(--grau);aspect-ratio:4/3}
.karte-bild img{width:100%;height:100%;object-fit:cover}
.produkt-badge{position:absolute;top:.8rem;left:.8rem;z-index:2;background:var(--akzent);
  color:var(--auf-akzent);font:500 .68rem/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;padding:.45em .8em;border-radius:99px}
.karte-txt{padding:1.2rem}
.karte-txt p{font-size:.9rem;opacity:.75}
.preis{font-family:var(--display);font-size:1.25rem;font-weight:600;opacity:1!important}
.preis small{font-family:var(--body);font-size:.8rem;font-weight:400;opacity:.6}

/* ─── Formular ─── */
.zeiten{list-style:none;padding:0;margin:1.4rem 0 0}
.zeiten li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid var(--linie)}
.zeiten b{font-weight:500;opacity:.7;font-size:.9rem}
.feld{margin-bottom:1rem}
.feld label{display:block;font:500 .74rem/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;opacity:.6;margin-bottom:.4rem}
.feld input,.feld textarea{width:100%;padding:.85em 1em;font:inherit;font-size:.96rem;
  border:1.5px solid var(--linie);border-radius:calc(var(--radius) / 2);
  background:color-mix(in srgb,var(--hg) 8%,transparent);color:inherit}
.feld textarea{min-height:7rem;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--akzent)}
.honig{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.meldung{padding:.9rem 1.2rem;border-radius:calc(var(--radius) / 2);margin-bottom:1.2rem;
  border:1px solid var(--linie);background:color-mix(in srgb,var(--hg) 10%,transparent);font-size:.92rem}
.meldung-warn{border-color:#C08A3E}

/* ─── Fusszeile ─── */
.foot{background:var(--papier);color:var(--hg);padding:clamp(2.5rem,6vw,4.5rem) 0 2rem}
.foot-raster{display:grid;gap:1.6rem 2rem;grid-template-columns:1.4fr 1fr 1fr 1fr}
@media(max-width:860px){.foot-raster{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-raster{grid-template-columns:1fr}}
.foot-hof p{margin-bottom:1rem}
.foot-nl{display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;font-weight:600;
  text-decoration:none;padding:.5em 0}
.foot-nl:hover{text-decoration:underline}
.foot h4{font-size:.72rem;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
  opacity:.55;margin-bottom:.9rem;font-weight:500}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.45rem}
.foot a{text-decoration:none;opacity:.8;font-size:.92rem}
.foot a:hover{opacity:1;text-decoration:underline}
.foot p{font-size:.92rem;opacity:.8}
.foot-ende{margin:2.6rem 0 0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.15);
  font-size:.8rem;opacity:.55}

/* ─── Einblenden beim Scrollen ─── */
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.rise.da{opacity:1;transform:none}

/* ═══ HOFLADEN ══════════════════════════════════════════════════════ */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.korb-form{display:flex;gap:.5rem;margin-top:1rem;align-items:stretch}
.korb-form input[type=number]{width:4.2rem;padding:.5em;text-align:center;font:inherit;font-size:.92rem;
  border:1.5px solid var(--linie);border-radius:calc(var(--radius) / 2);background:var(--hg);color:inherit}
.korb-form .btn{flex:1;padding:.7em 1em;font-size:.86rem}
.ausverkauft{margin-top:1rem;font:500 .84rem/1 var(--mono);opacity:.55;padding:.8em 0}

.korb-knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:99px;text-decoration:none;color:inherit;
  border:1.4px solid transparent;transition:border-color .2s,background .2s}
.korb-knopf:hover{border-color:var(--linie)}
.korb-knopf.voll{border-color:var(--akzent);background:var(--akzent);color:var(--auf-akzent)}
.korb-knopf b{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;border-radius:99px;
  background:var(--papier);color:var(--hg);font:600 .68rem/19px var(--body);text-align:center;padding:0 4px}
@media(max-width:980px){.top nav{inset-inline:0}.korb-knopf{margin-left:auto}}

.leer-korb{text-align:center;padding:3.5rem 1rem;border:1px dashed var(--linie);border-radius:var(--radius)}
.leer-korb p{opacity:.6;margin-bottom:1.4rem}
.korb{width:100%;border-collapse:collapse;margin:1.6rem 0}
.korb th{text-align:left;font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  opacity:.5;padding:0 .8rem .8rem 0;border-bottom:1px solid var(--linie)}
.korb th:last-child,.korb td:last-child{width:2.5rem}
.korb td{padding:1.1rem .8rem 1.1rem 0;border-bottom:1px solid var(--linie);vertical-align:top}
.korb strong{display:block;font-family:var(--display);font-size:1.02rem}
.korb small{display:block;font-size:.8rem;opacity:.6;margin-top:.2rem}
.korb .zahl{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.korb input[type=number]{width:4.2rem;padding:.5em;text-align:center;font:inherit;font-size:.92rem;
  border:1.5px solid var(--linie);border-radius:calc(var(--radius) / 2);background:var(--hg);color:inherit}
.weg{background:none;border:0;color:inherit;opacity:.4;cursor:pointer;font-size:1.1rem;padding:.3rem}
.weg:hover{opacity:1;color:#A33B2E}
@media(max-width:700px){
  .korb thead{display:none}
  .korb tr{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;padding:1rem 0;border-bottom:1px solid var(--linie)}
  .korb td{border:0;padding:0}
  .korb td:first-child{grid-column:1 / -1}
}
.korb-fuss{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-end}
.summe{margin-left:auto;text-align:right}
.summe .total{font-size:1.1rem;margin-bottom:1rem}
.summe .total strong{font-family:var(--display);font-size:1.7rem;display:block;margin-top:.2rem}

.kasse{display:grid;gap:2.5rem;grid-template-columns:1fr 320px;align-items:start;margin-top:1.8rem}
@media(max-width:900px){.kasse{grid-template-columns:1fr}}
.kasse fieldset{border:0;padding:0;margin:0 0 2.2rem}
.kasse legend{font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  opacity:.55;padding:0;margin-bottom:1rem}
.paar{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media(max-width:560px){.paar{grid-template-columns:1fr}}
.wahl-gross{display:grid;gap:.8rem;grid-template-columns:1fr 1fr}
@media(max-width:560px){.wahl-gross{grid-template-columns:1fr}}
.wahl-karte{display:flex;gap:.8rem;padding:1.1rem;border:1.6px solid var(--linie);
  border-radius:calc(var(--radius) / 1.5);cursor:pointer;transition:border-color .2s,background .2s}
.wahl-karte:hover{border-color:var(--akzent2)}
.wahl-karte:has(input:checked){border-color:var(--akzent2);background:color-mix(in srgb,var(--akzent) 22%,transparent)}
.wahl-karte input{margin-top:.25rem;flex:0 0 auto}
.wahl-karte b{display:block;font-size:.98rem}
.wahl-karte small{display:block;font-size:.82rem;opacity:.65;margin-top:.2rem}
.zustimmung{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;margin-bottom:1.6rem;cursor:pointer}
.zustimmung input{margin-top:.25rem;flex:0 0 auto}
.btn.gross{width:100%;justify-content:center;padding:1.1em 1.6em;font-size:1rem}
.uebersicht{padding:1.4rem;border:1px solid var(--linie);border-radius:var(--radius);
  background:color-mix(in srgb,var(--hg) 60%,var(--grau));position:sticky;top:80px}
.uebersicht h3{font-size:.72rem;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
  opacity:.55;font-weight:500;margin-bottom:1rem}
.uebersicht .zeile{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;
  padding:.5rem 0;border-bottom:1px solid var(--linie)}
.uebersicht .zeile.total{font-weight:600;font-size:1.02rem;border-bottom:0;padding-top:.9rem}
.uebersicht a{display:inline-block;margin-top:.9rem}


/* ═══════════════════════════════════════════════════════════════════
   VARIANTE B — Eigenheiten aus dem Entwurf
   Dreigeteilte Kopfleiste, Akzentstriche, Produktkarussell,
   Strichzeichnungen. Alles nur wirksam bei data-thema="b".
   ═════════════════════════════════════════════════════════════════ */

/* ─── Akzentstrich unter den Titeln ─── */
.rule{display:block;width:54px;height:2px;background:var(--akzent2);
  margin:1.15rem 0 1.4rem;border:0;padding:0}
.rule-o{background:var(--akzent)}
.bg-dunkel .rule{background:var(--akzent)}
body:not([data-thema=b]) .rule{display:none}

/* ─── Dreigeteilte Kopfleiste ─── */
body[data-thema=b] .top{padding:0;gap:0;background:none;backdrop-filter:none;border:0;
  height:var(--leiste);align-items:stretch}
body[data-thema=b] .marke{background:var(--orange);color:var(--gruen);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 1.3rem;flex:0 0 auto;line-height:1}
body[data-thema=b] .marke b{font-size:1.4rem;font-weight:700}
body[data-thema=b] .marke span{font-size:.62rem;letter-spacing:.1em;opacity:.72;
  text-transform:uppercase;margin-top:.18rem}
body[data-thema=b] .top nav{background:var(--gruen);color:#EFE9E0;flex:1;
  margin:0;display:flex;align-items:center;gap:1.5rem;padding:0 1.6rem;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none}
body[data-thema=b] .top nav::-webkit-scrollbar{display:none}
body[data-thema=b] .top nav a{font-family:var(--display);font-weight:500;font-size:.95rem;
  opacity:1;color:#EFE9E0;border:0;white-space:nowrap;padding:0}
body[data-thema=b] .top nav a:hover{color:var(--orange)}
body[data-thema=b] .korb-knopf{background:var(--orange);color:var(--gruen);
  border-radius:0;width:var(--leiste);height:auto;border:0;flex:0 0 var(--leiste)}
body[data-thema=b] .korb-knopf:hover{background:var(--orange-dk)}
body[data-thema=b] .korb-knopf.voll{background:var(--orange-dk)}
body[data-thema=b] .korb-knopf b{background:var(--gruen);color:var(--creme)}
body[data-thema=b] .burger{background:var(--orange);color:var(--gruen);
  width:var(--leiste);flex:0 0 var(--leiste);margin:0;padding:0}
@media(max-width:980px){
  body[data-thema=b] .top nav{position:fixed;inset:var(--leiste) 0 auto;flex-direction:column;
    align-items:stretch;gap:0;padding:.4rem 0;background:var(--gruen);overflow:visible}
  body[data-thema=b] .top nav a{padding:.85rem 1.6rem;border-bottom:1px solid rgba(255,255,255,.1)}
}

/* ─── Hero mit Pfeilen ─── */
body[data-thema=b] .kicker{color:var(--orange-lt);font-family:var(--display);
  font-weight:600;font-size:.78rem;letter-spacing:.24em}
body[data-thema=b] .punkte button[aria-selected=true]{background:var(--orange);transform:scale(1.25)}
.hero-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(253,248,242,.88);color:var(--gruen);display:none;
  align-items:center;justify-content:center;transition:background .2s}
.hero-pfeil:hover{background:var(--orange);color:#fff}
.hero-pfeil.l{left:1.2rem}
.hero-pfeil.r{right:1.2rem}
body[data-thema=b] .hero-pfeil{display:flex}
@media(max-width:640px){.hero-pfeil{display:none!important}}

/* ─── Kennzahlen und Kulturen ─── */
body[data-thema=b] .kpi b{color:var(--orange);font-weight:700}
body[data-thema=b] .kulturen i{color:var(--orange);font-family:var(--display);font-weight:700}
body[data-thema=b] .kulturen strong{color:var(--gruen);font-weight:700;
  font-size:clamp(1.25rem,2.5vw,1.7rem)}

/* ─── Hofjahr ─── */
body[data-thema=b] .monate span.jetzt{color:var(--orange);opacity:1}
body[data-thema=b] .jahr-detail{background:rgba(245,136,62,.09);
  border:0;border-left:3px solid var(--orange);border-radius:0}

/* ─── Produktkarussell ─── */
.rail-wrap{position:relative}
.rail-btn{position:absolute;top:38%;z-index:4;width:42px;height:42px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(253,248,242,.94);color:var(--gruen);
  display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 16px -6px rgba(30,58,43,.4);transition:background .2s,color .2s}
.rail-btn:hover{background:var(--orange);color:#fff}
.rail-btn.l{left:-14px}
.rail-btn.r{right:-14px}
.rail-btn[disabled]{opacity:.3;cursor:default}
.rail-btn[disabled]:hover{background:rgba(253,248,242,.94);color:var(--gruen)}
body[data-thema=b] .rail-btn{display:flex}
@media(max-width:700px){.rail-btn{display:none!important}}

body[data-thema=b] .produkte{display:flex;gap:1.4rem;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:.5rem;
  scrollbar-width:none;grid-template-columns:none}
body[data-thema=b] .produkte::-webkit-scrollbar{display:none}
body[data-thema=b] .produkte > .karte{flex:0 0 clamp(230px,28vw,300px);scroll-snap-align:start}
body[data-thema=b] .karte{border:0;background:none;border-radius:0}
body[data-thema=b] .karte-bild{border-radius:8px;overflow:hidden;background:var(--taupe-dk)}
body[data-thema=b] .karte-txt{padding:1rem 0 0}
body[data-thema=b] .karte-txt h3{color:var(--gruen);margin-bottom:.25rem}
body[data-thema=b] .preis{color:var(--gruen);font-weight:700}
body[data-thema=b] .produkt-badge{background:var(--orange);color:#fff;
  font-family:var(--display);font-weight:600;padding:.35em .8em;font-size:.68rem}

/* ─── Galerie und Presse ─── */
body[data-thema=b] .chip{font-family:var(--display);font-weight:600;
  border:2px solid rgba(34,51,42,.18);border-radius:99px}
body[data-thema=b] .chip:hover{border-color:var(--orange)}
body[data-thema=b] .chip[aria-pressed=true]{background:var(--orange);
  border-color:var(--orange);color:#fff}
body[data-thema=b] .gal{border-radius:8px}
body[data-thema=b] .ttl{font-weight:700;color:var(--gruen)}
body[data-thema=b] .bg-dunkel .ttl{color:var(--creme)}
body[data-thema=b] .datei{display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--display);font-weight:600;border:1.5px solid var(--linie);
  border-radius:99px;padding:.35em .9em;opacity:1;transition:all .2s}
body[data-thema=b] .presse a:hover .datei{background:var(--orange);
  border-color:var(--orange);color:#fff}

/* ─── Knöpfe ─── */
body[data-thema=b] .btn{font-family:var(--display);font-weight:600;border-width:2px}
body[data-thema=b] .btn-voll{background:var(--orange);border-color:var(--orange);color:#fff}
body[data-thema=b] .btn-voll:hover{background:var(--orange-dk);border-color:var(--orange-dk)}

/* ─── Formularbeschriftungen ─── */
body[data-thema=b] .feld label,body[data-thema=b] .uebersicht h3,
body[data-thema=b] .kasse legend,body[data-thema=b] .foot h4{
  font-family:var(--display);font-weight:600}

/* ─── Strichzeichnungen ─── */
.art{width:100%;height:auto;color:var(--akzent);overflow:visible;display:block}
body:not([data-thema=b]) .art{display:none}

/* ─── Rückmeldung nach dem Hinzufügen ─── */
.korb-meldung{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;
  margin-bottom:1.8rem;border-left-width:4px;border-left-style:solid;border-left-color:var(--akzent)}
.korb-meldung span{flex:1;min-width:14ch;font-weight:500}
.korb-meldung .btn{padding:.6em 1.2em;font-size:.86rem;white-space:nowrap}
.korb-links{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ═══════════════════════════════════════════════════════════════════
   SMARTPHONE
   Alles, was auf kleinen Geräten anders sein muss.
   ═════════════════════════════════════════════════════════════════ */

/* Randbereiche bei Geräten mit Aussparung */
@supports (padding: max(0px)) {
  .wrap{padding-left:max(clamp(1.1rem,4vw,2.6rem), env(safe-area-inset-left));
        padding-right:max(clamp(1.1rem,4vw,2.6rem), env(safe-area-inset-right))}
  .foot{padding-bottom:max(2rem, env(safe-area-inset-bottom))}
}

@media (max-width: 780px) {
  /* Eingabefelder mit 16px — sonst zoomt iOS beim Antippen hinein und
     die Seite bleibt danach verschoben. */
  input, select, textarea, .feld input, .feld textarea,
  .korb input[type=number], .korb-form input[type=number]{font-size:16px}

  /* Knöpfe gross genug zum Antippen */
  .btn{min-height:46px;padding:.85em 1.4em}
  .korb-form{flex-wrap:wrap}
  .korb-form input[type=number]{width:5rem;min-height:46px}
  .korb-form .btn{flex:1 1 100%}

  /* Galeriefilter: eine Reihe zum Wischen statt Umbruch über vier Zeilen */
  .filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(-1 * clamp(1.1rem,4vw,2.6rem));
    padding-inline:clamp(1.1rem,4vw,2.6rem);scroll-snap-type:x proximity}
  .filter::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;min-height:44px;scroll-snap-align:start}

  /* Galeriebilder etwas grösser, sonst trifft man sie kaum */
  .galerie{grid-template-columns:repeat(auto-fill,minmax(min(140px,44vw),1fr))}

  /* Hofjahr: Hinweis, dass sich der Balken schieben lässt */
  .jahr-rollen{position:relative}
  .jahr-rollen::after{content:"→ seitwärts schieben";position:sticky;left:0;
    display:block;font-size:.72rem;opacity:.5;padding-top:.4rem}
  .monate,.spur{grid-template-columns:6.5rem repeat(12,1fr)}
  .jahr{min-width:560px}

  /* Kopfzeile: Menü darf nicht länger werden als der Bildschirm */
  .top nav{max-height:calc(100svh - 60px);overflow-y:auto;overscroll-behavior:contain}

  /* Hero etwas niedriger, damit der erste Abschnitt anschneidet */
  .hero{min-height:min(78svh,640px)}
  .slide-txt{padding-bottom:4rem}

  /* Presse und Partner */
  .pt{padding:1.2rem}
  .presse a:hover{padding-left:0}

  /* Formulare */
  .zwei{gap:2rem}
  .uebersicht{position:static}
}

@media (max-width: 420px) {
  .btn{width:100%;justify-content:center}
  .cta .btn{width:auto;flex:1 1 auto}
  .korb-fuss{flex-direction:column;align-items:stretch}
  .korb-links{flex-direction:column}
  .summe{margin-left:0;text-align:left}
  .galerie{grid-template-columns:repeat(2,1fr)}
}

/* Zeigegeräte ohne Schwebezustand: keine Effekte, die hängen bleiben */
@media (hover: none) {
  .btn:hover,.gal:hover,.pt:hover,.kachel:hover{transform:none}
  .presse a:hover{padding-left:0}
}

/* ═══ ZUSTIMMUNG ZUR MESSUNG ════════════════════════════════════════ */
.zustimmung-feld{position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--papier);color:var(--hg);
  box-shadow:0 -8px 32px -12px rgba(0,0,0,.45);
  transform:translateY(100%);transition:transform .35s ease}
.zustimmung-feld.da{transform:none}
.zustimmung-feld[hidden]{display:none}
.zustimmung-inhalt{max-width:1180px;margin:0 auto;
  padding:1.3rem clamp(1.1rem,4vw,2.6rem);
  display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
.zustimmung-titel{font-family:var(--display);font-weight:600;font-size:1.02rem;margin:0 0 .3rem}
.zustimmung-text{font-size:.88rem;opacity:.85;margin:0;max-width:70ch}
.zustimmung-text a{color:inherit}
.zustimmung-knoepfe{display:flex;gap:.6rem;flex-wrap:wrap;flex:0 0 auto}
.zustimmung-knoepfe .btn{padding:.75em 1.4em;font-size:.9rem;white-space:nowrap}
.zustimmung-feld .btn:not(.btn-voll){border-color:currentColor;color:inherit}
.zustimmung-feld .btn:not(.btn-voll):hover{background:currentColor;color:var(--papier)}

@supports (padding: max(0px)) {
  .zustimmung-inhalt{padding-bottom:max(1.3rem, env(safe-area-inset-bottom))}
}
@media (max-width: 700px) {
  .zustimmung-inhalt{flex-direction:column;align-items:stretch;gap:1rem}
  .zustimmung-knoepfe{width:100%}
  .zustimmung-knoepfe .btn{flex:1;min-height:46px;justify-content:center}
}

/* ─── Warenkorb: Mengenwahl und Zustandsanzeige ─── */
.menge-feld{display:inline-flex;align-items:stretch;border:1.5px solid var(--linie);
  border-radius:calc(var(--radius) / 2);overflow:hidden;background:var(--hg)}
.menge-feld input[type=number]{width:3.2rem;border:0;text-align:center;background:none;
  -moz-appearance:textfield;appearance:textfield;padding:.5em .2em}
.menge-feld input[type=number]::-webkit-outer-spin-button,
.menge-feld input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.menge-feld input:focus{outline:none;background:color-mix(in srgb,var(--akzent) 14%,transparent)}
.menge-knopf{width:2.3rem;border:0;background:none;color:inherit;cursor:pointer;
  font:400 1.15rem/1 var(--body);padding:0;transition:background .15s}
.menge-knopf:hover{background:var(--akzent);color:var(--auf-akzent)}
.menge-knopf:first-child{border-right:1px solid var(--linie)}
.menge-knopf:last-child{border-left:1px solid var(--linie)}

tr.wird-entfernt{opacity:.45}
tr.wird-entfernt [data-betrag]{text-decoration:line-through}

.korb-zustand{font-size:.82rem;opacity:0;transition:opacity .2s;color:var(--matt);
  align-self:center;white-space:nowrap}
.korb-zustand.da{opacity:1}

@media (max-width: 780px) {
  .menge-feld input[type=number]{font-size:16px;width:3.6rem}
  .menge-knopf{width:2.8rem;min-height:46px}
}

/* ─── Hofladen: Rückmeldung beim Hinzufügen ─── */
.korb-form .btn.erledigt{background:var(--akzent2);border-color:var(--akzent2);color:var(--hg)}
.korb-hinweis{margin:.5rem 0 0;font-size:.82rem;line-height:1.4;opacity:0;max-height:0;
  overflow:hidden;transition:opacity .25s,max-height .25s}
.korb-hinweis.da{opacity:.75;max-height:4rem}
.korb-hinweis.warnung{color:#A33B2E;opacity:1}

.korb-knopf.puls{animation:korbPuls .5s ease}
@keyframes korbPuls{
  0%{transform:scale(1)}
  40%{transform:scale(1.16)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .korb-knopf.puls{animation:none}
}

/* ─── Newsletter-Anmeldung ─── */
.nl-form{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;
  max-width:44rem;margin:1.8rem auto 0}
.nl-form input{flex:1 1 14rem;padding:.9em 1.1em;font:inherit;font-size:.96rem;
  border:1.5px solid var(--linie);border-radius:calc(var(--radius) / 2);
  background:var(--hg);color:var(--text)}
.nl-form input:focus{outline:none;border-color:var(--akzent2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent2) 22%,transparent)}
.nl-form .btn{flex:0 0 auto;padding:.9em 1.8em}
body[data-thema=b] .bg-akzent .nl-form .btn{background:var(--gruen);border-color:var(--gruen);color:#fff}
body[data-thema=b] .bg-akzent .nl-form .btn:hover{background:var(--gruen-md);border-color:var(--gruen-md)}
body[data-thema=b] .bg-akzent .rule{background:var(--gruen)}
@media (max-width: 700px) {
  .nl-form{flex-direction:column}
  .nl-form input{flex:1 1 auto;font-size:16px}
  .nl-form .btn{width:100%;justify-content:center;min-height:46px}
}

/* Newsletter-Anmeldung: Anredefeld */
.nl-form .nl-anrede{flex:0 0 7rem;padding:.9em 1.1em;font:inherit;font-size:.96rem;
  border:1.5px solid var(--linie);border-radius:calc(var(--radius) / 2);
  background:var(--hg);color:var(--text)}
.nl-form input[name=vorname],.nl-form input[name=nachname]{flex:1 1 9rem}
@media (max-width: 700px){.nl-form .nl-anrede{flex:1 1 auto;font-size:16px}}

/* Newsletter: Rückmeldung ohne Neuladen */
.nl-hinweis{margin:1.2rem auto 0;max-width:52ch;font-size:.95rem;font-weight:500;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .3s,max-height .3s}
.nl-hinweis.da{opacity:1;max-height:8rem}
.nl-hinweis.warnung{color:#8C3B2C}
body[data-thema=b] .bg-akzent .nl-hinweis{color:var(--gruen)}
body[data-thema=b] .bg-akzent .nl-hinweis.warnung{color:#7A2D20}

/* Kontaktformular: Rückmeldung ohne Neuladen */
.kontakt-hinweis{margin:1rem 0 0;font-size:.95rem;font-weight:500;line-height:1.5;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .3s,max-height .3s}
.kontakt-hinweis.da{opacity:1;max-height:9rem}
.bg-dunkel .kontakt-hinweis{color:var(--hg)}
.kontakt-hinweis.warnung{color:#F0A896}
body[data-thema=b] .bg-dunkel .kontakt-hinweis{color:var(--orange-lt)}
body[data-thema=b] .bg-dunkel .kontakt-hinweis.warnung{color:#F3B4A4}