/* =====================================================================
   Hofladen Bergerhof — gemeinsame styles.css (Demo "Profi-Paket + Shop-Modul")
   Beispiel-Website von Vor Ort Online · fiktiver Musterbetrieb.
   Farbwelt: Erntepalette Terrakotta / Senfgelb / Hafer. Offline lauffähig
   (Doppelklick auf index.html), keine CDNs, keine Tracker.
   Umsetzung nach _design-konzept.md (@ui-ux-designer Mira).
   Ausgangsbasis: musterbetrieb-profi-gasthaus/styles.css (Struktur über-
   nommen, Farb-/Font-Tokens komplett ersetzt, Shop-Komponenten neu).
   ===================================================================== */

/* --- 1. Design-Tokens ------------------------------------------------ */
:root{
  --terrakotta:#b5541f;
  --terrakotta-dunkel:#7c3714;
  --senfgelb:#d9a53e;
  --hafer:#f6efe2;
  --erde:#2b211a;
  --weiss:#fffcf7;
  --text:#2b211a;
  --text-leicht:#6b5d4f;
  --linie:#e6d9c2;
  --schatten:0 14px 38px rgba(124,55,20,.15);
  --schatten-soft:0 6px 18px rgba(124,55,20,.10);
  --radius:14px;
  --radius-lg:22px;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem;
  --slab:Rockwell,"Bookman Old Style",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* --- 2. Reset & Basis ------------------------------------------------ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:17px;
  color:var(--text);
  background:var(--weiss);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--slab);line-height:1.15;font-weight:700;letter-spacing:-.01em;color:var(--erde)}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--terrakotta);margin-bottom:.6rem}
h3{font-size:1.24rem}
p{color:var(--text-leicht);font-size:clamp(1rem,1rem + .2vw,1.06rem)}
a{color:var(--terrakotta);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:var(--s6) 0}
.hafer-bg{background:var(--hafer)}

/* Sichtbar nur für Screenreader (Skip-Link) */
.skip{position:absolute;left:-9999px;top:0;background:var(--terrakotta);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- 3. Signature: Getreide-Ähre -------------------------------------- */
.aehre{width:1em;height:1em;display:inline-block;vertical-align:-.12em;flex:none}

.label{
  display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--terrakotta);margin-bottom:.7rem;
}
.label .aehre{color:var(--senfgelb);font-size:1.05rem}
.intro{max-width:620px}

/* --- 4. Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  background:var(--terrakotta);color:#fff;padding:13px 30px;border-radius:50px;
  font-weight:600;font-family:var(--sans);font-size:1rem;cursor:pointer;border:0;
  transition:transform .15s ease,background .2s ease,box-shadow .2s ease;box-shadow:var(--schatten-soft);
}
.btn:hover{background:var(--terrakotta-dunkel);transform:translateY(-2px);box-shadow:var(--schatten);text-decoration:none}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.78);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
.btn.dunkel{background:var(--terrakotta-dunkel)}
.btn.dunkel:hover{background:var(--terrakotta)}
.btn.voll{width:100%}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.btn-sekundaer{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;
  background:transparent;color:var(--terrakotta);border:2px solid var(--terrakotta);
  padding:10px 22px;border-radius:50px;font-weight:600;cursor:pointer;
}
.btn-sekundaer:hover{background:var(--hafer);text-decoration:none}

/* --- 5. Demo-Balken ----------------------------------------------------- */
.demo-bar{
  background:var(--terrakotta-dunkel);color:var(--hafer);font-size:.8rem;text-align:center;
  padding:7px 16px;line-height:1.4;
}
.demo-bar a{color:#fff;text-decoration:underline;font-weight:600}

/* --- 6. Header / Navigation ---------------------------------------------- */
header{
  position:sticky;top:0;z-index:100;background:rgba(255,252,247,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linie);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--slab);font-weight:700;
  font-size:1.2rem;color:var(--terrakotta);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .aehre{color:var(--senfgelb);font-size:1.7rem}
.brand small{display:block;font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-leicht);margin-top:-2px}
.menu{display:flex;gap:26px;align-items:center}
.menu a{color:var(--text);font-weight:500;font-size:.98rem;padding:6px 2px;position:relative}
.menu a:hover{color:var(--terrakotta);text-decoration:none}
.menu a.aktiv{color:var(--terrakotta);font-weight:700}
.menu a.aktiv::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  border-radius:3px;background:var(--senfgelb)}
.nav-rechts{display:flex;align-items:center;gap:14px}

/* Warenkorb-Icon-Button im Header */
.warenkorb-button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--linie);background:var(--weiss);
  color:var(--terrakotta);cursor:pointer;flex:none;
}
.warenkorb-button:hover{background:var(--hafer)}
.warenkorb-button svg{width:22px;height:22px}
.warenkorb-badge{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:50%;
  background:var(--terrakotta);color:#fff;font-size:.7rem;font-weight:700;display:flex;
  align-items:center;justify-content:center;line-height:1;
}
.warenkorb-badge[data-anzahl="0"]{display:none}

.burger{display:none;background:none;border:0;cursor:pointer;color:var(--terrakotta);
  width:46px;height:46px;align-items:center;justify-content:center;flex:none}
.burger svg{width:26px;height:26px}

/* --- 7. Hero (Hintergrundfoto + Terrakotta-Gradient als Kontrast-Overlay) ---
   Stapel-Reihenfolge (z-index): 0 Foto -> 1 Gradient-Overlay -> 2 Wasserzeichen
   + Text. Der Gradient liegt halbtransparent ÜBER dem Foto, damit der weiße
   Text (h1, Fließtext, Buttons) trotz wechselndem Fotohintergrund lesbar
   bleibt (WCAG-Kontrast) — reines Foto ohne Overlay wäre an hellen Stellen
   (Himmel) zu kontrastarm für weiße Schrift. */
.hero{
  position:relative;color:#fff;overflow:hidden;
}
.hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(181,84,31,.82) 0%,rgba(124,55,20,.85) 55%,rgba(43,33,26,.9) 100%);
}
.hero .wrap{padding-top:clamp(78px,12vw,140px);padding-bottom:clamp(78px,12vw,140px);max-width:760px;margin-left:0;position:relative;z-index:2}
.hero .label{color:var(--hafer)}
.hero .label .aehre{color:var(--senfgelb)}
.hero h1{color:#fff;margin-bottom:1rem;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero p{color:rgba(255,255,255,.94);font-size:1.18rem;max-width:560px;margin-bottom:2rem}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-watermark{position:absolute;right:-40px;bottom:-70px;color:rgba(217,165,62,.16);font-size:340px;
  line-height:1;pointer-events:none;z-index:2}

/* Schmaler Seiten-Header (Unterseiten) */
.pagehead{
  position:relative;color:#fff;text-align:center;
  background:linear-gradient(120deg,var(--terrakotta) 0%,var(--terrakotta-dunkel) 100%);
}
.pagehead .wrap{padding:clamp(50px,9vw,88px) 24px}
.pagehead h1{color:#fff;margin-bottom:.5rem}
.pagehead p{color:rgba(255,255,255,.92);max-width:620px;margin:0 auto}
.pagehead .label{color:var(--hafer);justify-content:center}
.pagehead .label .aehre{color:var(--senfgelb)}

/* Content-Fotos (echte Bilder aus bilder/, siehe BILDNACHWEIS.md).
   Klasse heißt weiterhin ".bild-platzhalter" (historisch gewachsen aus der
   Platzhalter-Phase) — sie sitzt jetzt direkt auf dem <img>-Tag. Die
   Positionierungs-Regeln je Einsatzort (Aspect-Ratio, Rundung, absolute
   Position) stehen unverändert bei den jeweiligen Containern weiter unten
   (.card, .kategorie-kachel, .split, .produkt-bild, .mc-bild, .wk-bild). */
.bild-platzhalter{
  display:block;width:100%;height:100%;object-fit:cover;background:var(--hafer);
}

/* --- 8. Trust-Leiste ----------------------------------------------------- */
.trust{background:var(--terrakotta-dunkel);color:#fff}
.trust .wrap{display:flex;flex-wrap:wrap;justify-content:space-around;gap:18px;padding:26px 24px;text-align:center}
.trust b{display:block;font-family:var(--slab);font-size:1.5rem}
.trust span{font-size:.84rem;color:rgba(255,255,255,.8)}

/* --- 9. Karten / Grids ---------------------------------------------- */
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:var(--s5)}
.card{
  background:var(--weiss);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--schatten-soft);border:1px solid var(--linie);
  transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--schatten)}
.card .bild-platzhalter{aspect-ratio:4/3;width:100%}
.card .card-body{padding:22px 24px 26px}
.card h3{color:var(--terrakotta);margin-bottom:.4rem;font-size:1.15rem}
.card p{font-size:.97rem}
.card .mehr{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;color:var(--terrakotta)}

/* Kategorie-Kacheln (Startseite) */
.kategorie-kachel{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--schatten-soft);transition:transform .2s ease,box-shadow .2s ease;color:#fff}
.kategorie-kachel:hover{transform:translateY(-6px);box-shadow:var(--schatten);text-decoration:none}
.kategorie-kachel .bild-platzhalter{aspect-ratio:4/3}
.kategorie-kachel .kachel-titel{
  position:absolute;left:0;right:0;bottom:0;padding:18px 18px 14px;
  background:linear-gradient(transparent,rgba(43,33,26,.82));font-family:var(--slab);font-weight:700;font-size:1.1rem;
}

/* Listen mit Ähren-Marker */
.aehren-liste li{position:relative;padding-left:32px;margin-bottom:12px;color:var(--text-leicht)}
.aehren-liste li .aehre{position:absolute;left:0;top:.2em;color:var(--senfgelb);font-size:1.15rem}
.aehren-liste li b{color:var(--text)}

/* --- 10. Bewertungen ------------------------------------------------- */
.rezensionen{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:var(--s5)}
.rezi{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--schatten-soft)}
.sterne{color:var(--senfgelb);font-size:1.1rem;letter-spacing:2px;margin-bottom:12px}
.rezi blockquote{font-family:var(--slab);font-style:italic;font-size:1.05rem;color:var(--text);
  line-height:1.5;margin-bottom:14px}
.rezi .wer{font-size:.86rem;color:var(--text-leicht)}
.rezi .wer b{color:var(--text);font-style:normal}
.rezi .quelle{display:block;font-size:.78rem;color:var(--senfgelb);margin-top:2px}

/* --- 11. CTA-Band ------------------------------------------------------- */
.cta-band{background:var(--terrakotta);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.92);max-width:560px;margin:0 auto 1.6rem}
.cta-band .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* --- 12. Split-Layout ---------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split .bild-platzhalter{aspect-ratio:4/3;width:100%;border-radius:var(--radius-lg)}

/* --- 13. Sortiment / Produktgrid ------------------------------------- */
.kategorie-filter{
  position:sticky;top:74px;z-index:60;background:rgba(255,252,247,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linie);padding:14px 0;
}
.chip-leiste{display:flex;gap:10px;flex-wrap:wrap;overflow-x:auto;padding-bottom:2px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:50px;
  border:1px solid var(--linie);background:var(--weiss);color:var(--text);font-size:.88rem;font-weight:600;
  cursor:pointer;white-space:nowrap;min-height:38px;
}
.chip:hover{border-color:var(--terrakotta)}
.chip[aria-pressed="true"]{background:var(--terrakotta);color:#fff;border-color:var(--terrakotta)}

.produkt-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:var(--s4)}
.produkt-karte{
  background:var(--weiss);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--linie);
  box-shadow:var(--schatten-soft);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;
}
.produkt-karte:hover{transform:translateY(-5px);box-shadow:var(--schatten)}
.produkt-bild{position:relative;aspect-ratio:4/3;width:100%}
.produkt-bild .bild-platzhalter{position:absolute;inset:0}
.produkt-badge{
  position:absolute;top:10px;left:10px;z-index:1;display:inline-flex;align-items:center;gap:5px;
  background:var(--senfgelb);color:var(--erde);font-size:.72rem;font-weight:700;padding:5px 12px;border-radius:50px;
}
.produkt-badge .aehre{font-size:.85rem}
.produkt-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.produkt-body h3{font-family:var(--sans);font-weight:700;font-size:1.02rem;color:var(--text)}
.produkt-body .produkt-beschreibung{font-size:.88rem;color:var(--text-leicht);flex:1}
.produkt-preis{font-family:var(--sans);font-weight:700;font-size:1.15rem;color:var(--terrakotta);text-align:right}
.produkt-karte .btn{width:100%;border-radius:0;margin-top:6px}
.produkt-karte .btn.erledigt{background:var(--erde)}
.kein-treffer{color:var(--text-leicht);margin-top:var(--s4)}

/* --- 14. Mengen-Stepper -------------------------------------------------- */
.stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--terrakotta);border-radius:50px;overflow:hidden}
.stepper button{
  width:38px;height:38px;min-height:0;border:0;background:var(--weiss);color:var(--terrakotta);font-size:1.15rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;
}
.stepper button:hover{background:var(--hafer)}
.stepper button:focus-visible{outline:2px solid var(--terrakotta);outline-offset:-2px}
.stepper .stepper-zahl{min-width:34px;text-align:center;font-weight:700;font-size:.98rem}

/* --- 15. Mini-Cart (Slide-in) --------------------------------------- */
.mini-cart-overlay{
  position:fixed;inset:0;background:rgba(43,33,26,.5);z-index:190;display:none;
}
.mini-cart-overlay.offen{display:block}
.mini-cart{
  position:fixed;top:0;right:0;bottom:0;width:100%;max-width:420px;background:var(--weiss);
  box-shadow:var(--schatten);z-index:200;transform:translateX(100%);transition:transform .28s ease;
  display:flex;flex-direction:column;
}
.mini-cart.offen{transform:translateX(0)}
.mini-cart-kopf{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
  border-bottom:1px solid var(--linie)}
.mini-cart-kopf h2{font-size:1.15rem;margin:0;display:flex;align-items:center;gap:8px}
.mini-cart-kopf h2 .aehre{color:var(--senfgelb)}
.mini-cart-schliessen{background:none;border:0;cursor:pointer;color:var(--text);width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1}
.mini-cart-liste{flex:1;overflow-y:auto;padding:14px 20px;display:flex;flex-direction:column;gap:16px}
.mini-cart-leer{color:var(--text-leicht);text-align:center;padding:40px 10px}
.mini-cart-leer .aehre{width:44px;height:44px;color:var(--senfgelb);margin:0 auto 14px;opacity:.6}
.mc-position{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center}
.mc-position .mc-bild{width:56px;height:56px;border-radius:var(--radius);overflow:hidden}
.mc-position .mc-bild .bild-platzhalter{width:100%;height:100%}
.mc-position .mc-name{font-weight:700;font-size:.92rem}
.mc-position .mc-preis{font-size:.82rem;color:var(--text-leicht)}
.mc-position .mc-entfernen{background:none;border:0;color:var(--text-leicht);cursor:pointer;font-size:1rem;
  width:32px;height:32px;justify-self:end}
.mc-position .mc-entfernen:hover{color:var(--terrakotta)}
.mini-cart-fuss{border-top:1px solid var(--linie);padding:16px 20px 20px;display:grid;gap:12px}
.mini-cart-summe{display:flex;justify-content:space-between;font-weight:700;font-size:1.05rem}
.mini-cart-fuss .btn-sekundaer{width:100%}

/* --- 16. Warenkorb-Seite ---------------------------------------------- */
.warenkorb-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:start;margin-top:var(--s4)}
.wk-positionen{display:grid;gap:16px}
.wk-position{
  display:grid;grid-template-columns:76px 1fr auto auto;gap:16px;align-items:center;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:14px 16px;
}
.wk-position .wk-bild{width:76px;height:76px;border-radius:var(--radius);overflow:hidden}
.wk-position .wk-bild .bild-platzhalter{width:100%;height:100%}
.wk-position .wk-name{font-weight:700}
.wk-position .wk-preis-einzeln{font-size:.85rem;color:var(--text-leicht)}
.wk-position .wk-zeilensumme{font-weight:700;color:var(--terrakotta);text-align:right;min-width:70px}
.wk-position .mc-entfernen{background:none;border:0;color:var(--text-leicht);cursor:pointer;font-size:1.1rem;width:38px;height:38px}
.wk-position .mc-entfernen:hover{color:var(--terrakotta)}

.wk-leer{text-align:center;padding:60px 20px;color:var(--text-leicht)}
.wk-leer .aehre{width:56px;height:56px;color:var(--senfgelb);margin:0 auto 16px;opacity:.6}

.wk-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--schatten-soft);display:grid;gap:18px}
.wk-karte h3{font-size:1.05rem;margin-bottom:2px}

.erfuellung-option{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--linie);
  border-radius:var(--radius);cursor:pointer}
.erfuellung-option:has(input:checked){border-color:var(--terrakotta);background:var(--hafer)}
.erfuellung-option input{margin-top:3px;accent-color:var(--terrakotta);flex:none}
.erfuellung-option b{display:block;color:var(--text)}
.erfuellung-option span.hinweis{display:block;font-size:.84rem;color:var(--text-leicht);margin-top:2px}
.frisch-warnung{
  display:flex;gap:10px;background:#fbf1de;border:1px solid var(--senfgelb);border-radius:var(--radius);
  padding:12px 14px;font-size:.86rem;color:var(--erde);margin-top:4px;
}

.summen-zeile{display:flex;justify-content:space-between;font-size:.96rem;color:var(--text-leicht)}
.summen-zeile.gesamt{font-weight:700;color:var(--text);font-size:1.15rem;border-top:1px solid var(--linie);
  padding-top:12px}
.summen-zeile.gesamt .betrag{color:var(--terrakotta)}

.kurzformular{display:grid;gap:12px}
.kurzformular label{font-size:.85rem;font-weight:600;color:var(--text)}
.kurzformular input{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--linie);background:#fff;
  font-size:1rem;font-family:inherit;color:var(--text);min-height:46px;margin-top:4px;
}
.kurzformular input:focus{outline:2px solid var(--terrakotta);outline-offset:1px;border-color:var(--terrakotta)}
.versand-felder{
  display:none;gap:10px;border-top:1px dashed var(--linie);padding-top:12px;margin-top:2px;
  font-size:.86rem;color:var(--text-leicht);
}
.versand-felder.sichtbar{display:flex}

.vertrauens-leiste{display:grid;gap:8px;padding:14px;background:var(--hafer);border-radius:var(--radius);
  font-size:.85rem;color:var(--text-leicht)}
.vertrauens-leiste .zahlarten{display:flex;gap:8px;font-size:1.3rem}
.vertrauens-leiste b{color:var(--text)}

#kasse-status{min-height:1.4em;font-size:.9rem;color:var(--terrakotta-dunkel)}
#bestell-status-banner.abbruch{background:#fbeee6;border-color:var(--terrakotta)}

/* --- 17. Kontakt / Öffnungszeiten / Anfahrt ------------------------- */
.kontakt-split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.info{display:grid;gap:15px;margin-top:var(--s2)}
.info .row{display:flex;gap:13px;align-items:flex-start}
.info .row .i{font-size:1.2rem;line-height:1.4;color:var(--terrakotta)}
.info a{color:var(--terrakotta);font-weight:600}

.zeiten{width:100%;border-collapse:collapse;margin-top:var(--s2);background:var(--weiss);
  border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.zeiten th,.zeiten td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--linie);font-size:.96rem}
.zeiten th{font-family:var(--sans);font-weight:600;color:var(--text);width:46%}
.zeiten td{color:var(--text-leicht)}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:0}

.karte{margin-top:var(--s3);height:220px;border-radius:var(--radius);overflow:hidden;position:relative;
  border:1px solid var(--linie);
  background:
    repeating-linear-gradient(0deg,var(--hafer) 0 40px,#ecdfc4 40px 41px),
    repeating-linear-gradient(90deg,var(--hafer) 0 40px,#ecdfc4 40px 41px);}
.karte .strasse{position:absolute;background:#d8cbb0}
.karte .s1{top:48%;left:0;right:0;height:16px;transform:rotate(-3deg)}
.karte .s2{top:0;bottom:0;left:36%;width:13px;transform:rotate(5deg)}
.karte .pin{position:absolute;top:44%;left:38%;transform:translate(-50%,-100%);font-size:2rem;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.karte .cap{position:absolute;bottom:8px;right:10px;background:rgba(124,55,20,.9);color:#fff;
  font-size:.72rem;padding:4px 10px;border-radius:20px}

/* --- 18. Formular (Kontaktseite) -------------------------------------- */
form.kontakt-formular{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--schatten-soft);display:grid;gap:16px}
form.kontakt-formular label{font-size:.85rem;font-weight:600;color:var(--text)}
form.kontakt-formular label .pflicht{color:var(--terrakotta)}
form.kontakt-formular input,form.kontakt-formular select,form.kontakt-formular textarea{
  width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--linie);
  background:#fff;font-size:1rem;font-family:inherit;color:var(--text);min-height:48px;
}
form.kontakt-formular textarea{min-height:120px;resize:vertical}
form.kontakt-formular input:focus,form.kontakt-formular select:focus,form.kontakt-formular textarea:focus{
  outline:2px solid var(--terrakotta);outline-offset:1px;border-color:var(--terrakotta)}
.einwilligung{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--text-leicht);line-height:1.5}
form.kontakt-formular .einwilligung input{flex:none;width:18px;height:18px;min-height:0;padding:0;margin:2px 0 0;accent-color:var(--terrakotta)}
.einwilligung a{color:var(--terrakotta);font-weight:600}
/* Honeypot: für Menschen unsichtbar, aber nicht per display:none (manche Bots umgehen das gezielt) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#formular-status{min-height:1.4em;font-size:.92rem;color:var(--terrakotta-dunkel)}

/* --- 19. Footer -------------------------------------------------------- */
footer{background:var(--terrakotta-dunkel);color:rgba(255,255,255,.8);font-size:.92rem;position:relative;overflow:hidden}
footer .wrap{padding:var(--s6) 24px var(--s4)}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
footer h4{color:#fff;font-family:var(--slab);font-size:1.1rem;margin-bottom:14px}
footer a{color:rgba(255,255,255,.88)}
footer a:hover{color:#fff}
footer .f-brand{display:flex;align-items:center;gap:9px;font-family:var(--slab);font-weight:700;
  font-size:1.2rem;color:#fff;margin-bottom:10px}
footer .f-brand .aehre{color:var(--senfgelb);font-size:1.5rem}
footer li{margin-bottom:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:var(--s5);padding-top:var(--s3);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.84rem;color:rgba(255,255,255,.62)}
.fiktiv{display:block;margin-top:14px;font-size:.82rem;color:rgba(255,255,255,.58);max-width:720px}
.footer-watermark{position:absolute;left:-30px;bottom:-70px;color:rgba(217,165,62,.12);font-size:300px;
  line-height:1;pointer-events:none}

/* --- 20. Sticky Mobile-Leiste ------------------------------------------ */
.mobil-leiste{display:none}

/* --- 21. Responsive ----------------------------------------------------- */
@media(max-width:960px){
  .warenkorb-layout{grid-template-columns:1fr}
}
@media(max-width:860px){
  .split,.kontakt-split{grid-template-columns:1fr;gap:32px}
}
@media(max-width:760px){
  section{padding:var(--s5) 0}
  .menu{display:none}
  .burger{display:flex}
  .menu.offen{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--weiss);border-bottom:1px solid var(--linie);box-shadow:var(--schatten);padding:8px 24px 18px;z-index:150}
  .menu.offen a{padding:13px 0;border-bottom:1px solid var(--hafer);font-size:1.05rem}
  .menu.offen a.aktiv::after{display:none}
  .kategorie-filter{top:74px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .wk-position{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
  .wk-position .wk-bild{order:1}
  .wk-position > span:nth-child(2){order:2;flex:1 1 140px}
  .wk-position .mc-entfernen{order:3}
  .wk-position .stepper{order:4}
  .wk-position .wk-zeilensumme{order:5;text-align:left}
}
@media(max-width:639px){
  body{padding-bottom:64px}
  .mobil-leiste{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:90;
    background:var(--weiss);border-top:1px solid var(--linie);box-shadow:0 -6px 18px rgba(124,55,20,.12);
    padding:8px 12px;gap:10px}
  .mobil-leiste a{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;gap:7px;
    border-radius:50px;font-weight:600;font-size:.95rem;position:relative}
  .mobil-leiste .anruf{background:var(--hafer);color:var(--terrakotta);border:1px solid var(--linie)}
  .mobil-leiste .warenkorb-mobil{background:var(--terrakotta);color:#fff;border:0;cursor:pointer}
  .mobil-leiste a:hover{text-decoration:none}
  .hero-watermark,.footer-watermark{font-size:200px}
  .mini-cart{max-width:100%}
}

/* Reduzierte Bewegung respektieren */
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}