/* MARTHA AND SONS, Entwurf v6 nach Stefans Design und Text vom 18.10.2026. Mobile-first (375). */
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/jost-latin-600-normal.woff2) format("woff2")}

:root{
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --h-bg:#f3f0eb;--h-ink:#1d1a17;--h-mute:#5a534b;--h-acc:#85501b;--h-line:#d8d0c5;--h-card:#ebe6df;
  --d-bg:#151412;--d-ink:#efe8dc;--d-mute:#b7ad9f;--d-acc:#dba964;--d-line:#38332d;--d-card:#1e1c19;
  --knopf:#6a4a2d;--knopf-h:#553a22;
  --gutter:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.6;background:var(--h-bg);color:var(--h-ink);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:12px;min-height:44px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--d-acc);outline-offset:2px}
.klein{font-size:14px}

/* Farbzonen: Comp = Hero/Zukunft/Besuch/Fuss dunkel, Rest hell */
.hero,.kopf,.zukunft,.besuch,.fuss,.reviewbar{--bg:var(--d-bg);--ink:var(--d-ink);--mute:var(--d-mute);--acc:var(--d-acc);--line:var(--d-line);--card:var(--d-card)}
.icons,.abschnitt,.bewertung,.geschichte,.kakao,.handwerk,.partner,.auszeichnung{--bg:var(--h-bg);--ink:var(--h-ink);--mute:var(--h-mute);--acc:var(--h-acc);--line:var(--h-line);--card:var(--h-card)}
.icons,.abschnitt,.bewertung,.geschichte,.kakao,.handwerk,.zukunft,.partner,.auszeichnung,.besuch,.fuss,.hero{background:var(--bg);color:var(--ink)}
/* Wechsel hell/hell: feine Linie statt Block */
.abschnitt,.geschichte,.partner,.auszeichnung,.bewertung{border-top:1px solid var(--line)}

/* Entwurfsleiste und Markierungen */
.reviewbar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:8px var(--gutter);background:#2a2118;color:#f0d9a8;font-size:13px}
.reviewbar button{font:inherit;color:#f0d9a8;background:transparent;border:1px solid #6e5836;border-radius:4px;padding:0 12px;min-height:44px;min-width:44px;cursor:pointer}
.reviewbar button[aria-pressed="true"]{background:#f0d9a8;color:#2a2118}
.rb-gruppe{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
body:not(.review) .reviewbar{display:none}
.chip{display:none;font:500 11px/1.3 var(--sans);letter-spacing:.02em;background:#fff3cf;color:#6a4a00;border:1px dashed #b88a14;border-radius:3px;padding:1px 6px;margin-left:4px;vertical-align:baseline}
.review .chip{display:inline-block}
.chip.block{display:none;margin:20px 0 0;padding:6px 10px;white-space:normal}
.review .chip.block{display:block}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;height:64px;padding-inline:8px;background:var(--bg);color:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
.kopf .nav{display:none}
.logo{justify-self:center;display:flex;align-items:center;height:48px;min-width:48px}
.logo img{height:40px;width:auto}
.burger,.korb{width:48px;height:48px;border:0;background:transparent;color:var(--d-ink);cursor:pointer;display:grid;place-items:center;padding:0}
.korb{position:relative}
.kopf-rechts{justify-self:end;display:flex;align-items:center;gap:8px}
.burger{gap:5px;align-content:center}
.burger span{display:block;width:22px;height:2px;background:currentColor}
.menue{position:fixed;inset:64px 0 0 0;z-index:49;background:var(--d-bg);padding:12px var(--gutter) 40px;overflow:auto}
.menue[hidden]{display:none}
.menue a{display:flex;align-items:center;min-height:52px;color:var(--d-ink);text-decoration:none;font:500 18px var(--sans);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--d-line)}

/* Hero */
.hero{position:relative;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;max-width:2000px;left:0;right:0;margin-inline:auto}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,20,18,.94) 0%,rgba(21,20,18,.55) 50%,rgba(21,20,18,.2) 100%);pointer-events:none}
.hero-text{z-index:1}
.hero-text{position:relative;padding-block:0 44px}
.vorzeile{font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px;color:var(--d-ink)}
.vorzeile.dunkeltext{color:var(--mute)}
.hero h1{font:500 clamp(40px,11vw,76px)/1.05 var(--serif);margin:0 0 16px;color:#fff;max-width:11ch;letter-spacing:-.005em}
.hero-sub{font-size:18px;max-width:30ch;margin:0 0 24px;color:var(--d-ink)}
.hero-cta{margin:0}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;background:var(--knopf);color:#fff;border:1px solid transparent;font:500 14px var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-radius:2px;cursor:pointer;transition:background .2s}
.knopf:hover{background:var(--knopf-h)}

/* Icon-Band */
.icons{padding:20px 0 24px}
.icon-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:4px 0}
.icon-knopf{width:100%;min-height:84px;padding:8px 2px;background:transparent;border:0;border-radius:6px;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font:500 12px/1.2 var(--sans);text-align:center}
.icon-knopf .ico{height:44px;width:auto;max-width:64px;object-fit:contain}
.icon-knopf:hover,.icon-knopf[aria-expanded="true"]{background:var(--card);color:var(--acc)}
.icon-knopf[aria-expanded="true"] .ico{opacity:1}
.icon-panel{margin-top:12px;padding:16px 18px;background:var(--card);border-left:3px solid var(--acc);border-radius:2px}
.icon-panel .ip-kopf{margin:0 0 4px;font:600 13px var(--sans);letter-spacing:.14em;color:var(--acc)}
.icon-panel .ip-text{margin:0;font-size:17px}
.icon-hinweis.chip{margin:10px 0 0}

/* Abschnitte */
.abschnitt,.geschichte,.bewertung{padding:56px 0}
h2{font:500 clamp(30px,8vw,46px)/1.12 var(--serif);margin:0 0 20px;letter-spacing:-.003em}
h3{font:600 14px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin:12px 0 4px}
.kopfzeile{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.kopfzeile h2{margin-bottom:8px}
.alle,.textlink{font:600 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--acc);display:inline-flex;align-items:center;min-height:44px}
.alle:hover,.textlink:hover{text-decoration:underline;text-underline-offset:4px}
.textlink.hell{color:var(--d-acc)}
.sparten{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.sparten a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font:500 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.sparten a[aria-current="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sparte-intro{max-width:56ch;color:var(--mute)}

/* Kacheln */
.kacheln{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:20px 14px}
.kachel{display:flex;flex-direction:column}
.kachel-bild{background:#0d0c0b;border-radius:10px;overflow:hidden;aspect-ratio:4/5}
.kachel-bild img{width:100%;height:100%;object-fit:cover}
.kachel .zeile{font-size:14px;line-height:1.4;color:var(--mute);margin:0 0 10px;flex:1}
.kachel .kauf{margin:0;display:flex;flex-direction:column;gap:8px}
.preis{font:600 15px var(--sans)}
.mini{min-height:44px;padding:0 14px;background:var(--knopf);color:#fff;border:0;border-radius:2px;font:500 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.mini:hover{background:var(--knopf-h)}
.kachel-bild.platz{display:grid;place-items:center;background:var(--card);border:1px dashed var(--mute);color:var(--mute);font:500 13px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.preis em{font-style:normal}

/* Bewertung */
.bew-zeile{display:flex;flex-direction:column;gap:6px;padding-block:0}
.bew-zeile p{margin:0}
.bew-zeile a{margin-right:16px;display:inline-flex;align-items:center;min-height:44px;color:var(--acc)}
.bewertung{padding:16px 0}

/* Rezepte */
.rezepte{display:grid;gap:32px;margin-top:20px}
.rezept img{border-radius:4px;width:100%;aspect-ratio:4/3;object-fit:cover}
.rezept h3{font:500 26px/1.2 var(--serif);text-transform:none;letter-spacing:0;margin:16px 0 8px}
.rezept p{margin:0 0 6px;color:var(--mute)}
.rezept-aktion{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}

/* Geschichte */
.geschichte-gitter{display:grid;gap:28px}
.martha-bild{margin:0;max-width:320px}
.martha-bild img{width:100%;height:auto;mix-blend-mode:multiply}
.martha-bild figcaption{font-size:13px;color:var(--mute);margin-top:6px}
.geschichte-text{max-width:56ch}
.geschichte-text p{color:var(--mute)}
.story{margin:12px 0}
.story summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:600 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.story-text{padding:8px 0 8px 16px;border-left:2px solid var(--line)}
.story-text p{margin:0 0 14px;color:var(--ink)}

/* Bleed-Abschnitte (Bild laeuft bis zum Rand) */
.kakao,.handwerk,.zukunft,.partner{position:relative;overflow:hidden}
.kakao-bild,.partner-bild{margin:0}
.kakao-bild img,.partner-bild img{width:100%;aspect-ratio:3/2;object-fit:cover}
.kakao-gitter,.partner-gitter,.handwerk-gitter,.zukunft-gitter{padding-block:0;padding-inline:0;max-width:none;display:grid}
.kakao-text,.partner-text,.handwerk-text,.zukunft-text{padding:40px var(--gutter)}
.handwerk-bild,.zukunft-bild{height:260px;overflow:hidden}
.handwerk-bild img,.zukunft-bild img{width:100%;height:100%;object-fit:cover}
.handwerk-gitter,.zukunft-gitter{grid-template-rows:auto auto}
.zukunft-text p{color:var(--d-ink)}
.handwerk-text p,.kakao-text p,.partner-text p{color:var(--mute)}

/* Geschenke */
.geschenke-gitter{display:grid;gap:24px}
.geschenke-bild{max-width:300px}
.geschenke-bild img{border-radius:10px;width:100%;aspect-ratio:4/5;object-fit:cover}
.geschenke-text p{color:var(--mute);max-width:44ch}
.telefon{font:600 20px var(--sans);color:var(--acc);display:inline-flex;align-items:center;min-height:44px}

/* Auszeichnungen */
.auszeichnung{padding:56px 0}
.auszeichnung-gitter{display:grid;gap:32px}
.aus-text p{color:var(--mute);max-width:52ch}
.nominiert{list-style:none;margin:0;padding:0;display:flex;gap:12px;justify-content:space-between}
.nominiert li{position:relative;flex:1;max-width:190px;aspect-ratio:1;text-align:center;padding:0 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.laurel{position:absolute;inset:0;margin:auto;width:100%;height:100%;color:var(--acc);opacity:.6;z-index:0}
.nominiert li>*:not(.laurel){position:relative;z-index:1}
.nom-kopf{font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.nominiert strong{font:600 14px/1.25 var(--sans);letter-spacing:.04em;max-width:11ch}
.nom-sub{font-size:12px;color:var(--mute);max-width:12ch;line-height:1.3}

/* Besuch und Fuss */
.besuch{padding:48px 0}
.besuch-gitter{display:grid;gap:16px}
.besuch h2{font-size:30px}
.besuch p{margin:0 0 8px}
.besuch a{display:inline-flex;align-items:center;min-height:44px;color:var(--acc)}
.fuss{padding:40px 0 24px;border-top:1px solid var(--d-line)}
.fuss-gitter{display:grid;gap:24px;justify-items:start}
.fuss nav{display:flex;flex-wrap:wrap;gap:0 4px}
.fuss nav a,.fuss nav span{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 7px;font:500 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--d-ink)}
.fuss-logo img{height:64px;width:auto}
.social{display:flex;gap:8px;margin:8px 0 0}
.social span{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--d-line);border-radius:50%;font:600 13px var(--sans);color:var(--d-mute)}
.fuss-klein{font-size:12px;color:var(--d-mute);margin:24px auto 0}

/* Dialog */
.korb-dialog{border:0;border-radius:6px;padding:24px;max-width:min(92vw,420px);background:var(--h-bg);color:var(--h-ink)}
.korb-dialog::backdrop{background:rgba(0,0,0,.6)}
.korb-dialog h2{font-size:30px;margin-bottom:8px}
.kd-artikel{font-weight:600}

/* Mobil: alle Tafeln auf einen Blick (Leo 07.10.: mehr als die Hälfte sichtbar), 3 Spalten */
@media (max-width:959px){
  .kacheln-tafeln{grid-template-columns:repeat(3,1fr);gap:16px 10px}
  .kacheln-tafeln .kachel-bild{aspect-ratio:3/4;border-radius:8px}
  .kacheln-tafeln h3{font-size:11px;margin-top:8px;letter-spacing:.03em}
  .kacheln-tafeln .zeile{font-size:12px;line-height:1.3;margin-bottom:8px}
  .kacheln-tafeln .preis{font-size:13px}
  .kacheln-tafeln .mini{padding:0 4px;font-size:11px;letter-spacing:.04em}
}
/* Desktop */
@media (min-width:960px){
  :root{--gutter:32px}
  .kopf{grid-template-columns:1fr auto 1fr;height:84px;padding-inline:var(--gutter)}
  .burger{display:none}
  .kopf .nav{display:flex;gap:28px}
  .nav-l{justify-self:start}.nav-r{margin-right:0}.kopf-rechts{gap:28px}
  .kopf .nav a{min-width:44px;font:500 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--d-ink);display:inline-flex;align-items:center;min-height:44px}
  .kopf .nav a:hover{color:var(--d-acc)}
  .kopf{position:sticky}
  .korb{position:relative;right:auto;top:auto}
  .logo,.logo img{height:64px}
  .menue{display:none!important}
  html{scroll-padding-top:101px}
  .hero,  .hero-text{padding-block:80px}
  .hero h1{max-width:12ch}
  .hero::after{background:linear-gradient(90deg,rgba(21,20,18,.92) 0%,rgba(21,20,18,.6) 42%,rgba(21,20,18,.05) 100%)}
  .hero-bild{object-position:center 35%}
  .icons{padding:28px 0 32px}
  .icon-liste{grid-template-columns:repeat(10,1fr)}
  .icon-knopf .ico{height:52px;max-width:72px}
  .abschnitt,.geschichte{padding:88px 0}
  h2{font-size:clamp(38px,3.6vw,52px)}
  .kopfzeile{flex-direction:row;justify-content:space-between;align-items:flex-end}
  .kacheln-tafeln{grid-template-columns:repeat(5,1fr);gap:24px}
  .kacheln-smashed{grid-template-columns:repeat(4,1fr);gap:24px}
  .kachel .kauf{flex-direction:row;justify-content:space-between;align-items:center}
  .rezepte{grid-template-columns:1fr 1fr;gap:48px}
  .bew-zeile{flex-direction:row;align-items:center;justify-content:space-between}
  .geschichte-gitter{grid-template-columns:5fr 7fr;gap:72px;align-items:center}
  .martha-bild{max-width:420px}
  .kakao,.partner,.handwerk,.zukunft{min-height:400px}
  .kakao-gitter,.partner-gitter,.handwerk-gitter,.zukunft-gitter{grid-template-columns:1fr 1fr;grid-template-rows:none;min-height:400px;align-items:stretch}
  .kakao-bild,.partner-bild{position:relative;min-height:400px}
  .kakao-bild img,.partner-bild img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .kakao-text,.partner-text,.handwerk-text,.zukunft-text{display:flex;flex-direction:column;justify-content:center;padding:56px max(var(--gutter),calc((100vw - 1160px)/2 + var(--gutter))) 56px 72px}
  .handwerk-text,.zukunft-text{padding:56px 72px 56px max(var(--gutter),calc((100vw - 1160px)/2 + var(--gutter)))}
  .handwerk-bild img,.zukunft-bild img{position:absolute;inset:0}
  .handwerk-bild,.zukunft-bild{height:auto;min-height:400px;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
  .geschenke-gitter{grid-template-columns:auto 1fr;column-gap:56px;align-items:center}
  .geschenke-gitter .sparten{grid-column:1/-1;margin:0}
  .geschenke-bild{max-width:260px}
  .auszeichnung-gitter{grid-template-columns:1.1fr 1fr;align-items:center;gap:64px}
  .nominiert{justify-content:flex-end;gap:24px}
  .nominiert li{max-width:220px;padding:0 30px}
  .besuch-gitter{grid-template-columns:1fr 1fr 1fr;align-items:start}
  .fuss-gitter{grid-template-columns:1fr auto 1fr;align-items:center;justify-items:stretch}
  .fuss-l{justify-self:start;max-width:380px}
  .fuss-logo{justify-self:center}
  .fuss-r{justify-self:end;display:flex;flex-direction:column;align-items:flex-end}
  .fuss-r nav{justify-content:flex-end}
  .fuss-klein{text-align:center}
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.einleitung{background:var(--bg);color:var(--ink);padding:40px 0 8px;--bg:var(--h-bg);--ink:var(--h-ink);--mute:var(--h-mute)}
.einl-text{font:500 clamp(22px,4.6vw,30px)/1.4 var(--serif);max-width:44ch;margin:0}
.generationen{background:var(--bg);color:var(--ink);--bg:var(--h-bg);--ink:var(--h-ink);--mute:var(--h-mute);--line:var(--h-line);padding:48px 0;border-top:1px solid var(--line)}
.platzhalter{color:var(--mute);margin:0}
.hgz{margin:0}
.hgz img{border-radius:4px;width:100%;max-width:420px;aspect-ratio:3/2;object-fit:cover}
.hgz figcaption{font-size:13px;color:var(--mute);margin-top:6px}
@media (min-width:960px){.einleitung{padding:56px 0 16px}.auszeichnung-gitter{grid-template-columns:1.1fr 1fr}.hgz{grid-column:1/-1;order:3}}

.linkknopf{background:none;border:0;padding:0;cursor:pointer}
.kachel-bild.platz span{padding:8px;text-align:center}

/* ===== v6 Ergaenzungen ===== */
/* Kopf-Icons: Suche, Konto, Korb (Comp) */
.kopf{grid-template-columns:48px 1fr auto}
.kopf-icons{display:flex;gap:0;justify-self:end}
.ki{width:44px;height:48px;border:0;background:transparent;color:var(--d-ink);cursor:pointer;display:grid;place-items:center;padding:0;text-decoration:none}
.ki:hover{color:var(--d-acc)}
.kopf-icons .ki:not(.korb){display:none}
@media (min-width:960px){
  .kopf{grid-template-columns:1fr auto 1fr}
  .kopf-icons{position:absolute;right:var(--gutter);top:18px}
  .kopf-icons .ki:not(.korb){display:grid}
  .nav-r{margin-right:0}
  .korb{position:static}
}
/* Hero: helles Bild (Stefans 1. Wahl), Text links lesbar */
.hero{min-height:560px}
.hero::after{background:linear-gradient(0deg,rgba(21,20,18,.9) 0%,rgba(21,20,18,.45) 55%,rgba(21,20,18,.1) 100%)}
.hero-claim{font:500 italic 18px/1.4 var(--serif);color:var(--d-ink);margin:0 0 24px;max-width:34ch}
.hero-claim em{font-style:italic;opacity:.85}
.hero h1{font-size:clamp(36px,9vw,64px);max-width:14ch}
@media (min-width:960px){
  .hero{min-height:640px}
  .hero::after{background:linear-gradient(90deg,rgba(21,20,18,.9) 0%,rgba(21,20,18,.55) 40%,rgba(21,20,18,0) 75%)}
  .hero-bild{object-position:70% 50%}
}
/* Tafeln: zwei Fotos (Stefan: «ideal mit zwei Fotos wie auf martha-sons.com») */
.kachel-bild.zweifach{position:relative}
.kachel-bild.zweifach img{position:absolute;inset:0;transition:opacity .35s}
.kachel-bild.zweifach .zwei{opacity:0}
.kachel-bild.zweifach:hover .zwei,.kachel-bild.zweifach.an .zwei{opacity:1}
.hinweis{color:var(--mute);margin:14px 0 0}
.kacheln-drei{grid-template-columns:repeat(3,1fr);gap:16px 10px}
.kacheln-drei .kachel-bild{aspect-ratio:3/4}
.preis.offen{color:var(--mute);font-weight:500}
@media (min-width:960px){.kacheln-drei{grid-template-columns:repeat(3,1fr);gap:24px;max-width:860px}.kacheln-tafeln{grid-template-columns:repeat(6,1fr);gap:18px}}
.firmen{margin:28px 0 0;max-width:60ch;color:var(--mute)}
/* Details «Mehr …» (Comp-Links fuehren in aufklappbaren Inhalt) */
.mehr{margin:8px 0 0}
.mehr summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:6px;font:600 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.mehr summary::-webkit-details-marker{display:none}
.mehr summary:hover{text-decoration:underline;text-underline-offset:4px}
.mehr[open] summary span{display:inline-block;transform:rotate(90deg)}
.mehr-text{padding:8px 0 8px 16px;border-left:2px solid var(--line);margin-top:8px}
.mehr-text p{margin:0 0 14px;color:var(--mute)}
.mehr.hell summary{color:var(--d-acc)}
.mehr.hell .mehr-text{border-color:var(--d-line)}
.mehr.hell .mehr-text li{color:var(--d-ink)}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:0;text-transform:none}
h3.serif{font-size:24px;margin:16px 0 8px}
.gross{font-size:22px;line-height:1.3}
.lead{font:500 20px/1.4 var(--serif);margin:0 0 10px}
.farmen{margin:0 0 14px}
.farmen div{margin:0 0 12px}
.farmen dt{font:600 13px var(--sans);letter-spacing:.08em;text-transform:uppercase}
.farmen dd{margin:2px 0 0;color:var(--mute);font-size:15px}
.hundert{list-style:none;margin:0;padding:0}
.hundert li{margin:0 0 12px}
.hundert strong{display:block;font:600 13px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.story-text p{color:var(--ink)}
/* Manufaktur-Schritte als Akkordeon */
.akkordeon{max-width:760px;border-top:1px solid var(--line)}
.akkordeon details{border-bottom:1px solid var(--line)}
.akkordeon summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;font:500 20px var(--serif);padding:8px 0}
.akkordeon summary::-webkit-details-marker{display:none}
.akkordeon summary::after{content:"+";font:400 24px var(--sans);color:var(--acc)}
.akkordeon details[open] summary::after{content:"–"}
.akkordeon details>div{padding:0 0 16px}
.akkordeon p{margin:0 0 12px;color:var(--mute)}
/* Auszeichnungen: links ICA, rechts LUXlife (Stefan 18.10.) */
.auszeichnung-gitter{grid-template-columns:1fr;gap:40px}
.aus-ica p,.aus-lux p{color:var(--mute);max-width:56ch}
.aus-lux p.lead,.aus-lux p.gross{color:var(--ink)}
.caps{text-transform:uppercase;font-size:clamp(26px,6vw,36px);letter-spacing:.02em}
.punkte{margin:0 0 20px;padding-left:18px;color:var(--mute)}
.punkte li{margin:0 0 8px}
.aus-ica .nominiert{justify-content:flex-start;gap:16px;margin-top:12px}
@media (min-width:960px){
  .auszeichnung-gitter{grid-template-columns:1fr 1fr;gap:72px;align-items:start}
  .aus-ica .nominiert{justify-content:flex-start}
  .aus-ica .nominiert li{max-width:200px}
  .hgz{grid-column:1/-1;order:3;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
  .hgz figcaption{margin:0}
}
.hgz img{max-width:360px}
.besuch-gitter{gap:20px}
.social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--d-line);border-radius:50%;font:600 13px var(--sans);color:var(--d-ink);text-decoration:none}

/* ===== v6b: Hero ohne Beschnitt/Hochskalierung; Icons als SVG ===== */
.hero{display:grid;grid-template-rows:auto auto;min-height:0;align-items:stretch}
.hero-bild{position:static;width:100%;height:auto;max-width:none;object-fit:unset;aspect-ratio:3/2;margin:0}
.hero::after{display:none}
.hero-text{padding:28px var(--gutter) 40px}
.hero h1{font-size:clamp(34px,8.6vw,56px)}
@media (min-width:960px){
  .hero{display:block;position:relative;height:640px;min-height:0;padding:0}
  .hero-bild{position:absolute;right:0;top:0;height:100%;width:auto;max-width:none;aspect-ratio:auto}
  .hero::after{display:block;content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,20,18,1) 0%,rgba(21,20,18,.96) 28%,rgba(21,20,18,.55) 46%,rgba(21,20,18,0) 62%);pointer-events:none}
  .hero-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-block:0;z-index:1;max-width:1160px;margin-inline:auto;left:0;right:0}
  .hero h1{max-width:12ch;font-size:clamp(48px,4.6vw,64px)}
}
@media (min-width:1700px){.hero{height:720px}}
.icon-knopf .ico{width:48px;height:48px;color:var(--ink)}
.icon-knopf .ico svg{width:100%;height:100%}
@media (min-width:960px){
  .hero-bild{left:auto;right:0;margin:0}
  .hero::after{background:linear-gradient(90deg,rgba(21,20,18,1) 0%,rgba(21,20,18,.92) 24%,rgba(21,20,18,.45) 42%,rgba(21,20,18,0) 58%)}
}
@media (min-width:960px){.hero::after{z-index:1}.hero-text{z-index:2}}
@media (min-width:960px){.hero::after{background:linear-gradient(90deg,#151412 0%,#151412 22%,rgba(21,20,18,.85) 32%,rgba(21,20,18,.35) 44%,rgba(21,20,18,0) 56%)}}
.hgz a:has(img){display:block;max-width:360px}.hgz a:has(img) img{transition:opacity .2s}.hgz a:has(img):hover img{opacity:.85}

.kacheln .zutaten{display:block;margin-top:6px;font-size:12px;color:var(--mute);line-height:1.4}
.lux-award{margin:16px 0 0}
.lux-award img{width:100%;max-width:520px;border-radius:8px}

/* ===== v6c: Stefans Feedback 23.10.2026 (Freisteller-Hero, Logo +50 %, Shop zentriert, Schokoladenkuchen) ===== */
/* Heller Hero: Farbe = Stefans NCS-Ton. Vorlaeufig #e8e5df (ca. NCS S 0500-N), exakten Code hier eintragen */
:root{--hero-bg:#e8e5df}
.hero{background:var(--hero-bg);--ink:var(--h-ink);--mute:var(--h-mute);--acc:var(--h-acc);color:var(--h-ink)}
.hero::after,.hero::after{display:none!important}
.hero h1{color:var(--h-ink)}
.hero-sub,.hero-claim{color:var(--h-ink)}
.hero-claim em{opacity:1}
@media (min-width:960px){.hero::after{display:none!important}}
/* Logo +50 % (40 -> 60 px mobil, 64 -> 96 px Desktop) */
html{scroll-padding-top:101px}
.kopf{height:85px;padding-bottom:5px}   /* Querstrich 5 px tiefer (Stefan 26.10.), Logo bleibt an Ort */
.logo,.logo img{height:60px}
@media (min-width:960px){
  html{scroll-padding-top:133px}
  .kopf{height:117px;padding-bottom:5px}
  .logo,.logo img{height:96px}
  .kopf-icons{top:34px}
}
/* Shop: je drei Produkte und der Text darunter zentriert */
.kacheln-drei{margin-inline:auto;text-align:center}
.kacheln-drei .kauf,.kacheln-tafeln .kauf{align-items:center}
.kacheln-tafeln,.kacheln-tafeln .kachel{text-align:center}
.kacheln-tafeln .kachel-bild,.kacheln-drei .kachel-bild{margin-inline:auto;width:100%}
.firmen{margin-inline:auto;text-align:center}
.kuchen{margin:36px auto 0;max-width:60ch;text-align:center}
.kuchen h3{font:500 26px/1.2 var(--serif);text-transform:none;letter-spacing:0;margin:0 0 4px}
.kuchen-mass{margin:0 0 10px;color:var(--mute);font-size:15px}
.kuchen p{margin-inline:auto}
.hero .vorzeile{color:var(--h-acc)}
@media (min-width:960px){
  .hero-bild{height:auto;width:min(58vw,900px);top:50%;transform:translateY(-50%);right:2vw}
}
.kacheln .kachel .kauf{flex-direction:column;align-items:center;justify-content:center;gap:8px}
.kacheln .kachel .kauf .mini{width:100%;max-width:200px}
#shop .kopfzeile,#geschenke .kopfzeile,#bags .kopfzeile{display:flex;flex-direction:column;align-items:center;text-align:center}
#geschenke .kopfzeile h2,#bags .kopfzeile h2,#shop .kopfzeile h2{text-align:center}
#bags .sparte-intro,#shop .hinweis{margin-inline:auto;text-align:center}

/* ===== v6d: Stefans Feedback 23.10.2026, Runde 2 ===== */
/* Überschriften-Skala: h1 Hero, h2 Sektion, h3 Block, h4 Unterpunkt */
h3{font:500 24px/1.25 var(--serif);margin:0 0 8px}
h4{font:600 13px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin:0 0 4px}
.kachel h3{font:600 14px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin:12px 0 6px}
.vorzeile{margin-bottom:10px}
/* Handwerk wie Zukunft: dunkler Grund, Foto läuft in den Text */
.handwerk{--bg:var(--d-bg);--ink:var(--d-ink);--mute:var(--d-mute);--acc:var(--d-acc);--line:var(--d-line);--card:var(--d-card)}
.handwerk-text p{color:var(--d-ink)}
.handwerk h2{color:var(--d-ink)}
.handwerk .textlink{color:var(--d-acc)}
/* Mobil: Foto läuft nach oben in den Text (rechteckiger Zuschnitt) */
@media (max-width:959px){
  .handwerk-bild,.zukunft-bild{height:300px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%);mask-image:linear-gradient(180deg,transparent 0,#000 38%);margin-top:-40px}
}
.zukunft-bild img{object-position:72% 55%}
/* Martha: Gliederung wie Originalseite */
.story-text{border-left:0;padding:8px 0 0}
.story-titel{font:500 30px/1.15 var(--serif);margin:0 0 14px}
.story-text .story-lead{font:500 italic 20px/1.4 var(--serif);color:var(--ink)}
.story-text p{line-height:1.6;margin:0 0 18px}
.story-zitat-kopf{margin-bottom:6px!important}
.story-text .story-zitat{font:500 24px/1.35 var(--serif);border-left:2px solid var(--acc);padding-left:16px;margin:0 0 22px}
.story-gruss span{font:500 italic 20px var(--serif)}
.story-schluss{margin:26px 0 0;color:var(--acc)}
/* Von der Bohne zur Tafel: Martha-Muster, Schritte nummeriert */
.schritte .lead{max-width:56ch}
.schritte-intro{max-width:60ch;color:var(--mute);margin:0 0 6px}
.schritt-liste{list-style:none;counter-reset:schritt;margin:0;padding:0;max-width:760px}
.schritt-liste li{counter-increment:schritt;position:relative;padding:0 0 18px 48px;margin:0 0 18px;border-bottom:1px solid var(--line)}
.schritt-liste li:last-child{border-bottom:0}
.schritt-liste li::before{content:counter(schritt,decimal-leading-zero);position:absolute;left:0;top:2px;font:600 13px var(--sans);letter-spacing:.08em;color:var(--acc)}
.schritt-liste h3{font-size:22px;margin:0 0 6px}
.schritt-liste p{margin:0 0 10px;color:var(--mute)}
/* Farmen */
.farm{margin:0 0 14px}
.farm p{margin:2px 0 0;color:var(--mute);font-size:15px}
/* Sommer-Hinweis in jedem Shop-Teil */
.hinweis-sommer{max-width:62ch;margin:22px auto 0;padding:12px 16px;border:1px solid var(--line);border-radius:4px;font-size:14px;line-height:1.5;color:var(--mute);text-align:center}
.hinweis-sommer strong{color:var(--ink)}
.hinweis-sommer a{color:var(--acc)}
/* Fuss: Rechtslinks */
.fuss-r nav a{color:inherit}
/* Rechtliches */
.kopf-einfach{grid-template-columns:1fr;justify-items:center}
.recht{background:var(--h-bg);color:var(--h-ink)}
.recht-text{max-width:760px;padding-block:48px 64px;--ink:var(--h-ink);--mute:var(--h-mute);--acc:var(--h-acc);--line:var(--h-line)}
.recht-text h1{font:500 clamp(34px,7vw,48px)/1.1 var(--serif);margin:0 0 16px}
.recht-nav{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0 0 32px}
.recht-nav a{min-height:44px;display:inline-flex;align-items:center;color:var(--acc);font:600 13px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.recht-teil{border-top:1px solid var(--line);padding-top:28px;margin-top:28px}
.recht-teil h3{font-size:22px;margin:24px 0 6px}
.recht-teil h4{margin:16px 0 4px}
.recht-teil p,.recht-teil li{color:var(--mute);font-size:16px}
.recht-teil .stand{font-size:14px}
.zurueck{margin-top:40px}
#shop>.wrap>.vorzeile,#geschenke>.wrap>.vorzeile,#bags>.wrap>.vorzeile{text-align:center}
.story-titel,.schritt-liste h3,.recht-teil h3,.kuchen h3,.rezept h3{text-transform:none;letter-spacing:0}
.story-titel{font-size:30px}
@media (max-width:959px){
  #schritte-mehr .mehr-text{padding-left:0;border-left:0}
  .schritt-liste li{padding-left:0}
  .schritt-liste li::before{position:static;display:block;margin-bottom:4px}
  .schritt-liste h3{font-size:21px}
  .story-titel{font-size:26px}
}
.kacheln-drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.kacheln-tafeln{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:960px){.kacheln-tafeln{grid-template-columns:repeat(6,minmax(0,1fr))}}
.kachel h3{overflow-wrap:break-word;hyphens:auto}
@media (max-width:959px){.kachel h3{font-size:11px;letter-spacing:.03em}.kacheln .kachel .kauf .mini{padding:0 4px;font-size:11px}}

/* ===== v6e: Schrift 1:1 wie martha-sons.com (Leo 23.10.2026): Halyard Display überall, 300 + 700, Laufweite wie Original ===== */
@font-face{font-family:"Halyard";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/halyard-300.woff2) format("woff2")}
@font-face{font-family:"Halyard";font-weight:300;font-style:italic;font-display:swap;src:url(fonts/halyard-300-italic.woff2) format("woff2")}
@font-face{font-family:"Halyard";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/halyard-700.woff2) format("woff2")}
:root{--serif:"Halyard","Helvetica Neue",Arial,sans-serif;--sans:"Halyard","Helvetica Neue",Arial,sans-serif}
body{font-weight:300;letter-spacing:.05em}
h1,h2,h3,.lead,.story-titel,.serif,.gross,.kuchen h3,.rezept h3,.schritt-liste h3{font-weight:300;letter-spacing:.02em}
strong,b{font-weight:700}
/* Kakao wie Handwerk/Zukunft: dunkler Grund, Foto läuft in den Text (Bild links, Verlauf nach rechts) */
.kakao{--bg:var(--d-bg);--ink:var(--d-ink);--mute:var(--d-mute);--acc:var(--d-acc);--line:var(--d-line);--card:var(--d-card)}
.kakao-text p,.kakao h2{color:var(--d-ink)}
.kakao .vorzeile.dunkeltext{color:var(--d-ink)}
.kakao .mehr summary{color:var(--d-acc)}
.kakao .mehr-text p,.kakao .farm p{color:var(--d-mute)}
.kakao-bild{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 38%);mask-image:linear-gradient(0deg,transparent 0,#000 38%);margin-bottom:-40px}
@media (min-width:960px){
  .kakao-bild{margin-bottom:0;-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 30%);mask-image:linear-gradient(270deg,transparent 0,#000 30%)}
}

/* ===== v6f: Grundfarbe Stefan = NCS S 1000-N ≈ #DEDBD4 (Leo 23.10.2026, color.codes.in-Umrechnung), überall ausser dunklen Sektionen ===== */
:root{--h-bg:#DEDBD4;--hero-bg:#DEDBD4;--h-card:#d3cfc6;--h-line:#c6c0b5}
/* LUXlife-Banner randlos über die ganze Breite (Stefan 22.10.) */
.lux-banner{margin:0 0 48px;width:100%}
.lux-banner img{width:100%;height:auto;display:block}
.auszeichnung{padding-top:0}
/* LUXlife-Banner zurück unter die Texte, volle Spaltenbreite (Leo 23.10. 15:59) */
.auszeichnung{padding-top:revert}
.lux-award{margin:24px 0 0;width:100%}
.lux-award img{width:100%;max-width:none;height:auto;border-radius:4px}
/* LUXlife-Banner gross: unter den Texten über die ganze Inhaltsbreite (Leo 23.10. 16:01) */
.lux-breit{grid-column:1/-1;margin:8px 0 0}
@media (min-width:960px){.lux-breit{order:3}.hgz{order:4}}
/* Auszeichnungen: gleiche Überschriften-Schreibweise, Lorbeer-Namen ohne Umbruch, ruhigere Abstände */
.auszeichnung h2.caps{text-transform:none}
.nominiert strong{white-space:nowrap}
.auszeichnung-gitter{row-gap:48px}
@media (min-width:960px){.aus-ica,.aus-lux{align-self:start}.aus-lux h2{margin-top:0}}
.hgz{align-items:center}
/* Lücken-Durchgang 23.10. 16:05 */
.auszeichnung{padding-top:72px;padding-bottom:72px}
@media (max-width:959px){.auszeichnung{padding-top:48px;padding-bottom:48px}}
.kacheln .kachel .kauf{justify-content:flex-start}
.preis.offen{min-height:21px;display:block}
/* Von der Bohne zur Tafel + Rezepte: zentrierter Kopf wie die Shop-Sektionen */
#schritte>.wrap{max-width:820px;text-align:center}
#schritte .lead,#schritte .schritte-intro{margin-inline:auto}
#schritte .mehr-text{text-align:left;margin-top:20px}
#rezepte .vorzeile,#rezepte .kopfzeile{text-align:center;justify-content:center}
.nominiert strong{white-space:normal}
.auszeichnung h2,.auszeichnung h2.caps{font-size:clamp(30px,3.4vw,46px);line-height:1.12}
.preis.offen{margin-bottom:52px}
/* Entzerren 23.10. 16:05: Zukunft, Partner, Auszeichnungen */
.zukunft-text p,.partner-text p,.aus-ica>p,.aus-lux>p{max-width:46ch;line-height:1.7}
.partner-text p{margin:0 0 20px}
.zukunft-text h2,.partner-text h2{margin-bottom:24px}
.aus-ica,.aus-lux{max-width:520px}
.aus-titel{font:700 13px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin:0 0 12px}
.aus-lux .lead{font-weight:300;font-size:22px;color:var(--ink);margin:0 0 14px}
.aus-ica .mehr,.aus-lux .mehr{margin-top:4px}
.aus-ica .nominiert{margin-top:28px}
@media (min-width:960px){.auszeichnung-gitter{column-gap:96px}}

/* ===== v6g: Review-Fixes 23.10.2026 (nur Technik/Layout, keine Inhalte) ===== */
/* Shop mobil: Tafeln 2-spaltig, Geschenke/Bags 1-spaltig, lesbare Grössen */
@media (max-width:600px){
  .kacheln-tafeln{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .kacheln-drei{grid-template-columns:minmax(0,1fr);gap:36px;max-width:360px}
  .kacheln-drei .kachel-bild{aspect-ratio:3/4}
  .kachel h3{font-size:13px;letter-spacing:.05em}
  .kachel .zeile{font-size:14px}
  .kacheln .zutaten{font-size:12px}
  .kacheln .kachel .kauf .mini{font-size:12px;padding:0 10px;max-width:none;width:100%}
  .preis{font-size:15px}
}
/* Tap-Ziele >= 44px für Textlinks im Fliesstext */
.hinweis-sommer a,.rezept-aktion a,.fuss-r nav a{display:inline-flex;align-items:center;min-height:44px}
/* Fokus: je Farbzone ausreichend Kontrast */
:focus-visible{outline:2px solid var(--h-ink);outline-offset:3px}
.kopf :focus-visible,.hero :focus-visible{outline-color:var(--h-acc)}
.kakao :focus-visible,.handwerk :focus-visible,.zukunft :focus-visible,.besuch :focus-visible,.fuss :focus-visible,.kopf :focus-visible,.menue :focus-visible{outline-color:var(--d-acc)}
/* Pfeile überall mit gleichem Abstand */
.alle span[aria-hidden],.textlink span[aria-hidden],.mehr summary span[aria-hidden]{margin-left:.45em}
/* Hover-Hinweis nur auf Geräten mit Hover */
@media (hover:none){.kacheln-tafeln~.hinweis{display:none}}
/* Rechtliches: Rückweg oben */
.zurueck-oben{margin:0 0 8px}
/* Stefan 22.10.: «Abschnittslinie ist sichtbar» → keine Trennlinien zwischen Sektionen */
.abschnitt,.geschichte,.partner,.auszeichnung,.bewertung,.generationen,.icons,.schritte{border-top:0!important;border-bottom:0!important}
/* Schokoladenkuchen als freistehendes Produkt + Firmen-Block (Leo 23.10. 17:44) */
.kuchen-produkt{display:grid;gap:24px;margin:56px auto 0;max-width:960px;align-items:center}
.kp-bild{margin:0}
.kp-bild img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:10px}
.kp-text h3{font-size:clamp(28px,3vw,36px);margin:0 0 12px}
.kp-text p{color:var(--mute);margin:0 0 14px;max-width:40ch}
.kp-detail{font:700 13px var(--sans)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)!important}
@media (min-width:760px){.kuchen-produkt{grid-template-columns:1.1fr 1fr;gap:56px}}
.firmen-block{margin:64px auto 0;max-width:60ch;text-align:center}
.firmen-block h3{font-size:clamp(24px,2.6vw,30px);margin:0 0 10px}
.firmen-block p{color:var(--mute);margin:0 auto 8px}
.kp-text h3,.firmen-block h3{text-transform:none;letter-spacing:.02em}
/* Sommer-Popup */
.sd-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.knopf-hell{background:transparent;color:var(--h-ink);border:1px solid var(--h-line)}
.korb-dialog a{color:var(--h-acc)}

/* ===== v6h: Warenkorb + Kasse (Medusa) 23.10.2026 ===== */
.korb{position:relative}
.korb-zahl{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--d-acc);color:#151412;font:700 11px/18px var(--sans);text-align:center}
.wk{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px}
.wk-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.wk-kopf h2{margin:0}
.wk-zu{width:44px;height:44px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:inherit}
.wk-zeile{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--h-line)}
.wk-name{font-weight:700;font-size:14px;letter-spacing:.04em}
.wk-menge{display:inline-flex;align-items:center;gap:6px}
.wk-menge button{width:36px;height:36px;border:1px solid var(--h-line);background:transparent;border-radius:4px;font-size:18px;cursor:pointer}
.wk-menge b{min-width:20px;text-align:center}
.wk-preis{font-weight:700;white-space:nowrap}
.wk-summe{margin:14px 0;text-align:right}
.wk-leer{color:var(--h-mute)}
.wk-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 0}
.wk-felder{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wk-felder label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--h-mute)}
.wk-felder .wk-voll{grid-column:1/-1}
.wk-felder input,.wk-felder select{min-height:44px;padding:8px 10px;border:1px solid var(--h-line);border-radius:4px;background:#fff;font:inherit;color:var(--h-ink)}
.wk-agb{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-top:8px}
.wk-agb input{width:22px;height:22px;margin-top:2px}
.wk-msg{min-height:1.2em;margin:12px 0 0;font-size:14px}
.wk-fehler{color:#9b2c1f}
@media (max-width:480px){.wk-felder{grid-template-columns:1fr}}
.danke{text-align:center}
.wk-agb span{display:block}.wk-agb a{color:var(--h-acc)}

/* ===== v7: Stefans Punkte 24.10.2026 ===== */
/* Header hell wie Costa: Grundfarbe, dunkles Logo und Navigation, feine Linie */
.kopf{--bg:var(--hero-bg);--ink:var(--h-ink);background:var(--hero-bg);color:var(--h-ink);border-bottom:1px solid var(--h-line)}
@media (min-width:960px){.kopf .nav a{color:var(--h-ink)}.kopf .nav a:hover{color:var(--h-acc)}}
.burger span{background:var(--h-ink)}
.kopf .ki{color:var(--h-ink)}
.menue{--bg:var(--hero-bg);background:var(--hero-bg)}
.menue a{color:var(--h-ink)!important;border-color:var(--h-line)!important}
.kopf :focus-visible{outline-color:var(--h-ink)}
/* «crafted for generations» auf einer Zeile */
.hero-claim .eine-zeile{white-space:nowrap}
/* Kuchen-Bestellung im Rezept */
.kuchen-bestellen{margin-top:20px;padding:18px 20px;border:1px solid var(--h-line);border-radius:8px}
.kuchen-bestellen .vorzeile{margin:0 0 6px}
.kb-preis{font:700 15px var(--sans);letter-spacing:.06em;color:var(--h-ink)!important;margin:0 0 6px}
.kuchen-bestellen p{margin:0 0 10px}
/* Firmengeschenke: Stefans Text, ruhig gesetzt */
.firmen-block{max-width:68ch;text-align:left}
.firmen-block h3{font-size:clamp(24px,2.6vw,32px);line-height:1.2;margin-bottom:16px;text-align:center}
.firmen-block p{margin:0 0 14px;line-height:1.7}
.firmen-frage{text-align:center;margin-top:22px!important;color:var(--h-ink)!important}
.firmen-frage .telefon{margin-left:6px}
/* Zukunft: mehr Platz für den Text */
@media (min-width:960px){.zukunft-text{padding-top:96px;padding-bottom:96px}.zukunft{min-height:560px}}
.zukunft-text p{max-width:48ch;line-height:1.8}
/* Partner: Foto läuft in den Text (Bild links) */
.partner-bild{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 38%);mask-image:linear-gradient(0deg,transparent 0,#000 38%)}
@media (min-width:960px){.partner-bild{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 30%);mask-image:linear-gradient(270deg,transparent 0,#000 30%)}}
/* Fuss: Fon und Mail */
.fuss-kontakt{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0}
.fuss-kontakt a{color:var(--d-ink);display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:14px}
.fuss-kontakt a:hover{color:var(--d-acc)}
#rezepte .kuchen-bestellen .vorzeile{text-align:left}

/* ===== v8: Stefans Punkte 26.10.2026 (13:10) ===== */
/* Titelbild mit Schatten: weicher Bodenschatten + Kontaktschatten unter den Tafeln */
.hero-bild{filter:drop-shadow(0 30px 26px rgba(48,30,12,.34)) drop-shadow(0 8px 8px rgba(48,30,12,.28))}
/* Titel «Gradlinig. Kompromisslos. Eigensinnig.» als gesetzte Zeile wie das Schluss-Motto bei Martha, nicht als Fliesstext */
.hero-triade{display:flex;flex-wrap:wrap;gap:4px 14px;margin:26px 0 10px;padding-top:18px;border-top:2px solid var(--h-acc);max-width:30rem;font:600 12px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--h-acc)}
.hero-crafted{margin:0 0 24px;font:300 italic 20px/1.3 var(--serif);letter-spacing:.04em;color:var(--h-ink);white-space:nowrap}
@media (min-width:960px){.hero-triade{font-size:13px;letter-spacing:.16em;flex-wrap:nowrap;gap:0 18px}.hero-crafted{font-size:24px}}
/* Zutaten je Tafel/Bag */
.zutaten-zeile{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--mute)}
.zutaten-zeile .zl{display:block;font:600 11px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.zutaten-zeile strong{font-weight:700;color:var(--ink)}
.kachel .zutaten-zeile{max-width:34ch;margin-inline:auto}
/* Firmengeschenke im Muster von Martha/Kakao: Kicker, Titel, Einleitung, Haupttext, «Mehr» */
.firmen-block{max-width:62ch;margin:72px auto 0;text-align:left}
.firmen-block .vorzeile{text-align:left}
.firmen-block h3{text-align:left;font-size:clamp(26px,3vw,36px);margin-bottom:18px}
.firmen-block .lead{font-weight:300;font-size:21px;line-height:1.45;color:var(--ink);margin:0 0 14px}
.firmen-block p{color:var(--mute)}
.firmen-block .lead,.firmen-block .firmen-frage{color:var(--ink)}
.firmen-frage{text-align:left!important;margin-top:20px!important}
.firmen-frage .telefon{margin-left:6px}
/* Handwerk: Einleitung als Lead (wie Martha) */
.handwerk-text .lead{font-weight:300;font-size:21px;line-height:1.45;color:var(--d-ink);margin:0 0 14px}
/* Von der Bohne zur Tafel: linksbündig im Muster von Martha */
#schritte>.wrap{max-width:1160px;text-align:left}
#schritte .lead,#schritte .schritte-intro{margin-inline:0;max-width:56ch}
#schritte .lead{font-weight:300;font-size:21px;line-height:1.45;color:var(--ink);margin-bottom:12px}
#schritte h2{margin-bottom:16px}
#schritte .mehr-text{margin-top:20px}
/* Zukunft: mehr Luft */
.zukunft-text{padding-top:72px;padding-bottom:72px}
.zukunft-text .vorzeile{margin-bottom:18px}
.zukunft-text h2{margin-bottom:30px}
.zukunft-text .lead{font-weight:300;font-size:21px;line-height:1.5;color:var(--d-ink);margin:0 0 22px;max-width:44ch}
.zukunft-text p{margin-bottom:22px}
.zukunft-text .mehr{margin-top:14px}
@media (min-width:960px){.zukunft-text{padding-top:128px;padding-bottom:128px}.zukunft{min-height:640px}}
.hero-triade{width:fit-content;max-width:100%}
@media (max-width:480px){.hero-triade{flex-wrap:nowrap;gap:0 10px;font-size:11px;letter-spacing:.1em}}
.kachel .zutaten-zeile{margin-bottom:16px}

/* ===== v9: UI-Audit 26.10.2026 (Layout/Technik, keine Inhalte) ===== */
/* Von der Bohne zur Tafel: Block zentriert wie «Unsere Bags» (rechte Hälfte war leer), Aufklapptext bleibt linksbündig */
#schritte>.wrap{max-width:820px;text-align:center}
#schritte .lead,#schritte .schritte-intro{margin-inline:auto}
#schritte .mehr{text-align:center}
#schritte .mehr-text{text-align:left}
/* Rezepte: gleiche Abstände in beiden Spalten (Details, Bestell-Links) */
.rezept>p:not(.rezept-aktion){margin:0 0 10px}
.rezept .mehr{margin:0 0 4px}
.rezept .rezept-aktion{margin:0;min-height:44px}
/* Mobil: Zukunft-Bild (unten) und Händler-Bild (oben) stossen nicht mehr aneinander */
@media (max-width:959px){
  .partner{padding-top:48px}
  .partner-bild{margin-inline:var(--gutter)}
  .partner-bild img{border-radius:6px}
}
/* Footer: Links bündig (kein Einzug), Tap-Fläche 44 px bleibt, Gruppen oben ausgerichtet */
.fuss nav{gap:0 22px}
/* Tap-Fläche seitlich vergrössert, aber optisch bündig (negativer Rand gleicht den Innenabstand aus) */
.fuss nav a,.fuss nav span{min-width:0;padding-inline:11px;margin-inline:-11px}
.fuss-kontakt{gap:0 22px}
.fuss-r nav{margin-bottom:4px}
.fuss-r .social{margin:4px 0 0}
@media (min-width:960px){.fuss-gitter{align-items:start}.fuss-logo{align-self:start}}
/* Tafel-/Bag-Kacheln: Bild, Titel, Zeile, Zutaten, Preis/Button laufen als Zeilen über alle Kacheln einer Reihe (Subgrid) */
.kacheln{row-gap:0}
.kacheln .kachel{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;margin-bottom:28px}
.kacheln .kachel:has(.zutaten-zeile){grid-row:span 5}
.kacheln .kachel .zeile{flex:none;margin-bottom:10px}
.kacheln .kachel .zutaten-zeile{margin-bottom:12px}
.kacheln .kachel .kauf{align-self:end}
@media (min-width:960px){.kacheln .kachel{margin-bottom:0}.kacheln{row-gap:24px}}
@media (max-width:600px){.kacheln-drei{gap:0 14px}.kacheln-drei .kachel{margin-bottom:40px}}
/* Nominiert-Siegel kleiner, Spalten oben ausgerichtet */
.auszeichnung-gitter{align-items:start}
.aus-ica h2,.aus-lux h2{margin-top:0}
.nominiert li,.aus-ica .nominiert li{max-width:140px;padding:0 12px}
.nominiert .nom-kopf{font-size:10px;letter-spacing:.1em}
.nominiert strong{font-size:12px;line-height:1.25;max-width:10ch}
.nominiert .nom-sub{font-size:11px;max-width:11ch;line-height:1.25}
@media (min-width:960px){.nominiert li,.aus-ica .nominiert li{max-width:140px;padding:0 12px}}
/* HGZ-Artikel: Kicker + Überschrift über dem Text, Fliesstextgrösse */
.hgz figcaption{font-size:17px;line-height:1.6;color:var(--mute);margin-top:14px}
.hgz figcaption h3{margin:0 0 8px;font-size:clamp(22px,2.4vw,28px);color:var(--ink);text-transform:none;letter-spacing:.02em}
.hgz figcaption p{margin:0 0 6px;color:var(--mute)}
.hgz figcaption .vorzeile{display:block;margin-bottom:8px}
@media (min-width:960px){.hgz figcaption{margin:0}}
/* Warenkorb-Badge etwas nach unten/links */
.korb-zahl{top:6px;right:4px}
/* Kasse: Vorname/Nachname und PLZ/Ort zweispaltig auch mobil (PLZ schmal) */
.wk-felder{grid-template-columns:repeat(6,minmax(0,1fr))}
.wk-felder label{grid-column:span 3}
.wk-felder .wk-voll{grid-column:1/-1}
.wk-felder .wk-plz{grid-column:span 2}
.wk-felder .wk-ort{grid-column:span 4}
.wk-msg a,.wk-fehler a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Rechtliches: Teil-Überschriften etwas kleiner */
.recht-teil h2{font-size:clamp(26px,4.6vw,34px);margin-bottom:12px}
/* Danke-/Rechtliches-Seiten: Footer unten, nie leer wirkend */
body.recht{min-height:100vh;display:flex;flex-direction:column}
body.recht>main{flex:1 0 auto;width:100%}
body.recht .fuss{flex:none}
.danke #p a{display:inline-block;padding-block:9px;color:var(--h-acc)}
.wk-msg a{display:inline-block;padding-block:4px;color:var(--h-acc)}
.wk-fehler a{color:inherit}
.fuss-schmal{padding-top:24px}
.fuss-schmal .fuss-gitter{display:flex;flex-wrap:wrap;gap:0 22px;justify-content:center;align-items:center}
.fuss-schmal .fuss-kontakt{margin:0}
.firmen-frage .telefon{margin-left:0}
@media (max-width:959px){.firmen-frage .telefon{display:flex}}
@media (min-width:960px){.firmen-frage .telefon{margin-left:6px}}

/* Lagerbestand: ausverkaufte Artikel (c31) */
.mini[disabled],.mini.aus{background:#d9d4cc;color:#5c564d;cursor:not-allowed}
.mini[disabled]:hover{background:#d9d4cc}

/* FAQ (27.10.2026): aufklappbar im Look des «Mehr erfahren»-Musters, hell, vor Kontakt */
.faq{--bg:var(--h-bg);--ink:var(--h-ink);--mute:var(--h-mute);--acc:var(--h-acc);--line:var(--h-line);--card:var(--h-card);background:var(--bg);color:var(--ink);border-top:1px solid var(--line);padding:56px 0}
.faq-wrap{max-width:820px}
.faq .faq-frage{margin:0;border-bottom:1px solid var(--line)}
.faq .faq-frage summary{display:flex;justify-content:space-between;gap:16px;width:100%;padding:10px 0;text-transform:none;letter-spacing:0;font:500 clamp(19px,4.6vw,24px)/1.3 var(--serif);color:var(--ink)}
.faq .faq-frage summary span{flex:none;color:var(--acc)}
.faq .faq-frage:last-of-type{border-bottom:1px solid var(--line)}
.faq .mehr-text{margin:0 0 14px}
.faq .mehr-text p{margin:0 0 12px}
.faq .faq-zwischen strong{font-weight:600;color:var(--ink)}
.faq :focus-visible{outline-color:var(--h-acc)}
@media (min-width:960px){.faq{padding:72px 0}}
.besuch .oeffnung{margin-top:12px}

/* 27.10.2026 Leo: Produktbilder mobil ganz zeigen (Geschenke/Bags 3:4 = Bildformat; Tafeln bleiben 3:4 = Hauptbild) */
.knopf:disabled{opacity:.45;cursor:not-allowed}