:root{--braun:#3e2415;--creme:#f7f1e8;--sand:#e9dccb;--akzent:#c8792a;--grau:#6b5b4e;--weiss:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:Georgia,"Times New Roman",serif;color:var(--braun);background:var(--creme);line-height:1.6}
a{color:var(--akzent)}
.wrap{max-width:1040px;margin:0 auto;padding:0 1.25rem}
header.top{background:var(--braun);color:var(--weiss);position:sticky;top:0;z-index:10}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--weiss);text-decoration:none;font-size:1.05rem}
.brand small{display:block;font-size:.65rem;letter-spacing:.2em;opacity:.8;font-weight:400}
nav a{color:var(--weiss);text-decoration:none;margin-left:1.4rem;font-family:system-ui,sans-serif;font-size:.95rem;opacity:.9}
nav a:hover,nav a.aktiv{opacity:1;border-bottom:2px solid var(--akzent)}
.hero{background:linear-gradient(135deg,#3e2415 0%,#6b3f22 60%,#c8792a 140%);color:var(--weiss);padding:5rem 0 4rem}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);margin:0 0 1rem;line-height:1.1}
.hero p{font-size:1.2rem;max-width:36rem;opacity:.95}
.btn{display:inline-block;background:var(--akzent);color:#fff;text-decoration:none;padding:.75rem 1.4rem;border-radius:.4rem;font-family:system-ui,sans-serif;font-weight:600;margin-top:1rem}
.btn.hell{background:var(--weiss);color:var(--braun)}
section{padding:3.5rem 0}
section h2{font-size:2rem;margin:0 0 1.5rem}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.karte{background:var(--weiss);border-radius:.8rem;padding:1.5rem;box-shadow:0 2px 10px rgba(62,36,21,.08)}
.karte .tag{font-family:system-ui,sans-serif;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--akzent)}
.karte h3{margin:.4rem 0 .6rem}
.preis{font-family:system-ui,sans-serif;font-weight:700;margin-top:.8rem}
.streifen{background:var(--sand)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
@media (max-width:760px){.zwei{grid-template-columns:1fr}nav a{margin-left:.8rem;font-size:.85rem}}
.bohne{aspect-ratio:4/3;border-radius:.8rem;background:radial-gradient(circle at 30% 30%,#8a5a3a,#3e2415);display:flex;align-items:center;justify-content:center;font-size:5rem}
dl.oeffnung{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.2rem;font-family:system-ui,sans-serif}
dl.oeffnung dt{font-weight:600}
footer{background:var(--braun);color:#e9dccb;padding:2.5rem 0;font-family:system-ui,sans-serif;font-size:.9rem}
footer a{color:#fff;margin-right:1.2rem}
article.post{max-width:720px}
article.post h1{font-size:2.2rem;line-height:1.15}
.meta{font-family:system-ui,sans-serif;color:var(--grau);font-size:.9rem}
.liste li{margin:.5rem 0}

/* Shop: Warenkorb-Drawer + Checkout */
.cart-badge{display:none;background:var(--akzent);color:#fff;border-radius:1rem;padding:.05rem .45rem;font-size:.75rem;margin-left:.2rem;vertical-align:middle}
#warenkorb{position:fixed;inset:0;z-index:50;background:rgba(62,36,21,.45);display:none}
#warenkorb.offen{display:block}
.korb-box{position:absolute;right:0;top:0;bottom:0;width:min(430px,92vw);background:var(--weiss);padding:1.5rem;overflow:auto;font-family:system-ui,sans-serif;box-shadow:-4px 0 18px rgba(62,36,21,.25)}
.korb-zeile{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid #eee;font-size:.95rem}
.korb-summe{font-weight:700;border-bottom:0}
.korb-del{color:var(--akzent);text-decoration:none;font-weight:700}
#checkout h4{margin:1rem 0 .4rem}
#checkout label{display:block;font-size:.85rem;color:var(--grau);margin-bottom:.55rem}
#checkout input{width:100%;padding:.5rem;border:1px solid #c9b9a3;border-radius:.4rem;font-size:.95rem}
#checkout label.radio{display:flex;align-items:center;gap:.5rem;color:var(--braun)}
#checkout label.radio input{width:auto}
.plz-ort{display:grid;grid-template-columns:1fr 2fr;gap:.6rem}
table.bestellt{width:100%;border-collapse:collapse;font-family:system-ui,sans-serif;font-size:.95rem}
table.bestellt th,table.bestellt td{text-align:left;padding:.45rem .3rem;border-bottom:1px solid #e9dccb}

/* Produktkarten mit Bild, PDP, Ticker, Steps */
.produkt-karte{padding:0;overflow:hidden;display:flex;flex-direction:column}
.produkt-karte>*:not(.prod-img){margin-left:1.3rem;margin-right:1.3rem}
.prod-img{display:block;aspect-ratio:3/2;background:#e9dccb center/cover no-repeat;position:relative}
.prod-img .bestseller,.pdp-bild .bestseller{position:absolute;top:.8rem;left:.8rem;background:var(--akzent);color:#fff;font-family:system-ui,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .7rem;border-radius:1rem}
.produkt-karte .tag{margin-top:1rem}
.produkt-karte h3 a{color:var(--braun);text-decoration:none}
.noten{font-family:system-ui,sans-serif;font-size:.92rem;color:var(--grau)}
.kauf{display:flex;gap:.5rem;margin-top:.6rem}
.kauf select{flex:1;padding:.5rem;border:1px solid #c9b9a3;border-radius:.4rem}
.kauf .btn{margin-top:0;padding:.5rem .9rem;white-space:nowrap}
.karte-fuss{margin:0.9rem 1.3rem 1.1rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.lager{font-family:system-ui,sans-serif;font-size:.8rem}
.lager.ok{color:#2e7d32}.lager.frisch{color:var(--akzent)}
.ticker{font-family:system-ui,sans-serif;font-size:.9rem;color:var(--grau);background:var(--weiss);border:1px solid var(--sand);border-radius:.5rem;padding:.5rem .9rem;min-height:2.4rem}

/* Warenkorb 2.0 */
.korb-zeile{align-items:center}
.korb-img{width:52px;height:40px;object-fit:cover;border-radius:.3rem}
.korb-info{flex:1;line-height:1.3}
.korb-qty{display:flex;align-items:center;gap:.45rem}
.korb-qty a{color:var(--akzent);text-decoration:none;font-weight:700;font-size:1.05rem;padding:.1rem .3rem;border:1px solid var(--sand);border-radius:.3rem}
.korb-preis{min-width:4.2rem;text-align:right}
.versand-progress{margin:.7rem 0;font-size:.85rem}
.versand-progress .balken{height:7px;background:var(--sand);border-radius:4px;margin-top:.3rem}
.versand-progress .balken div{height:100%;background:var(--akzent);border-radius:4px;transition:width .3s}

/* Produktdetailseite */
.pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:start}
.pdp-bild{aspect-ratio:4/3;border-radius:.8rem;background:#e9dccb center/cover no-repeat;position:relative}
.pdp-unten{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2rem}
.noten-gross{margin:.4rem 0 1rem}
.noten-gross span{display:inline-block;background:var(--sand);border-radius:1rem;padding:.2rem .8rem;font-family:system-ui,sans-serif;font-size:.82rem;margin:0 .35rem .35rem 0}
.fakten{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.4rem;margin:1.2rem 0;font-family:system-ui,sans-serif}
.fakten small{display:block;color:var(--grau);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.kaufbox{display:grid;grid-template-columns:1.6fr .8fr;gap:.7rem;background:var(--weiss);border:1px solid var(--sand);border-radius:.8rem;padding:1rem;margin-top:1rem;font-family:system-ui,sans-serif}
.kaufbox label{font-size:.8rem;color:var(--grau)}
.kaufbox select,.kaufbox input{width:100%;padding:.55rem;border:1px solid #c9b9a3;border-radius:.4rem;margin-top:.2rem}
.kaufbox .btn{grid-column:1/-1;margin-top:.2rem;text-align:center}
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.mini{background:var(--weiss);border-radius:.7rem;padding:0 0 .8rem;text-decoration:none;color:var(--braun);font-family:system-ui,sans-serif;box-shadow:0 2px 8px rgba(62,36,21,.07);overflow:hidden}
.mini-img{display:block;aspect-ratio:16/7;background:#e9dccb center/cover;margin-bottom:.6rem}
.mini b{padding:0 .8rem}
.mini:not(.mini-img){padding-left:.8rem;padding-right:.8rem}
@media(max-width:860px){.pdp-grid,.pdp-unten{grid-template-columns:1fr}}

/* Bestell-Steps */
.steps{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-family:system-ui,sans-serif;margin-bottom:1.2rem}
.step{background:var(--sand);color:var(--grau);border-radius:1rem;padding:.25rem .8rem;font-size:.82rem}
.step.aktiv{background:#2e7d32;color:#fff;font-weight:600}
.step-pfeil{color:var(--grau)}

/* Karten als Links (Sortiment/Startseite) */
a.produkt-karte{text-decoration:none;color:inherit;transition:transform .15s ease, box-shadow .15s ease}
a.produkt-karte:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(62,36,21,.14)}

/* ---------------- Mobile ---------------- */
@media (max-width:760px){
  section{padding:2.2rem 0}
  section h2{font-size:1.55rem}
  header.top .wrap{flex-direction:column;align-items:flex-start;height:auto;padding-top:.6rem;padding-bottom:.2rem;gap:.1rem}
  header.top nav{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;padding:.35rem 0;scrollbar-width:none}
  header.top nav::-webkit-scrollbar{display:none}
  header.top nav a{margin-left:0;margin-right:1.05rem;font-size:.9rem;white-space:nowrap;padding:.25rem 0}
  .hero{padding:3rem 0 2.4rem}
  .hero p{font-size:1.05rem}
  .btn{padding:.8rem 1.3rem}
  .karten{grid-template-columns:1fr 1fr;gap:.9rem}
  .produkt-karte h3{font-size:1.02rem;margin:.3rem 0 .4rem}
  .produkt-karte>*:not(.prod-img){margin-left:.9rem;margin-right:.9rem}
  .noten{font-size:.85rem}
  .kauf{flex-direction:column}
  .kauf .btn{width:100%}
  .karte-fuss{margin:.7rem .9rem .9rem}
  .preis{font-size:.9rem}
  .kaufbox{grid-template-columns:1fr}
  .fakten{grid-template-columns:1fr 1fr;gap:.6rem .9rem;font-size:.9rem}
  .pdp-grid{gap:1.2rem}
  .korb-box{width:100vw;padding:1.1rem}
  .steps{gap:.25rem}
  .step{font-size:.72rem;padding:.2rem .55rem}
  dl.oeffnung{grid-template-columns:auto 1fr;font-size:.9rem}
  footer .wrap a{display:inline-block;margin-bottom:.4rem}
}
@media (max-width:480px){
  .karten{grid-template-columns:1fr}
  .fakten{grid-template-columns:1fr}
  .plz-ort{grid-template-columns:1fr}
  .noten-gross span{font-size:.78rem}
}