/* ============================================================
   DeWo Technik & Handel  ·  gemeinsames Stil-Fundament
   Tokens und Rezepte aus ENTSCHEIDUNG.md, herausgeloest aus der
   Vorschau vom 08.09.2026. Gilt fuer index.html, shop.html,
   produkt-*.html und kasse.html. Karte, Raster, Filter, Schublade,
   Produktseite und Kasse stehen in shop.css.
   Nur ein Startbild (Fassung 1), kein Fassungs-Umschalter.
   ============================================================ */
:root{
  /* Farben: Hex, damit die Kontrastmessung in pruefen.py greift */
  --grund:        #F3F6F8;   /* Off-White im Kundenton */
  --flaeche:      #E6EAED;   /* 3 bis 4 % dunkler */
  --text:         #0E1518;   /* Fast-Schwarz im Kundenton */
  --leise:        #5B686F;   /* Sekundaertext, 4,5:1 auf --grund */
  --linie:        #CFD5D8;   /* Haarlinien */
  --akzent:       #4A6B80;   /* Herkunft: Logo-Blaugrau, eine Stufe dunkler */
  --akzent-dunkel:#37576B;   /* Hover */
  --akzent-text:  #FFFFFF;   /* 5,67:1 auf --akzent */
  --dunkel:       #1F2327;   /* Typenschild, Ankuendigungsleiste */
  --gruen:        #1E9E4A;   /* nur der Punkt bei "sofort lieferbar" */

  /* Form */
  --radius: 4px;
  --radius-knopf: var(--radius);
  --portal: 8px;             /* obere Kante des Versandetiketts */

  /* Schrift */
  --schrift:      "Hanken Grotesk", system-ui, sans-serif;
  --schrift-text: "Hanken Grotesk", system-ui, sans-serif;
  --gewicht-display: 500;
  --gewicht-text: 400;
  --gewicht-stark: 500;
  --lauf-display: -0.022em;

  /* Groessen, Verhaeltnis 1,333 */
  --t-display: clamp(2.6rem, 1.7rem + 4vw, 5.5rem);
  --t-h2: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --t-h3: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  --t-text: clamp(1.0625rem, 1.02rem + .2vw, 1.125rem);
  --t-klein: .9375rem;
  --t-mikro: .8125rem;
  --t-zahl: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);

  /* Raum */
  --inhalt: 1360px;
  --rand: clamp(20px, 4vw, 64px);
  --spalt: clamp(16px, 2vw, 32px);
  --luft: clamp(4rem, 9vw, 9rem);
  --luft-eng: clamp(2.5rem, 5vw, 5rem);
  --kopf-h: 68px;

  /* Bewegung */
  --dauer: .55s;
  --kurve: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:clamp(96px,13vh,150px)}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift-text);font-weight:var(--gewicht-text);font-size:var(--t-text);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.16em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--akzent)}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:2px}
h1,h2,h3,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
strong{font-weight:var(--gewicht-stark)}
button{font-family:inherit}
.nur-lesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.inhalt{width:min(100% - 2*var(--rand), var(--inhalt));margin-inline:auto}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt)}

.abschnitt{padding-block:var(--luft)}
.abschnitt--eng{padding-block:var(--luft-eng)}
.abschnitt--flaeche{background:var(--flaeche)}
.abschnitt--ohne-oben{padding-top:0}
.abschnitt--ohne-unten{padding-bottom:0}

/* Typo */
.t-display{font-family:var(--schrift);font-weight:var(--gewicht-display);font-size:var(--t-display);line-height:1.02;letter-spacing:var(--lauf-display);text-wrap:balance}
.t-h2{font-family:var(--schrift);font-weight:var(--gewicht-display);font-size:var(--t-h2);line-height:1.08;letter-spacing:-0.015em;text-wrap:balance}
.t-h3{font-family:var(--schrift);font-weight:var(--gewicht-stark);font-size:var(--t-h3);line-height:1.2;letter-spacing:-0.008em}
.t-lauf{max-width:62ch}
.t-leise{color:var(--leise)}
.t-klein{font-size:var(--t-klein)}
.t-mikro{font-size:var(--t-mikro);line-height:1.45}
.t-label{font-size:var(--t-klein);font-weight:var(--gewicht-stark);letter-spacing:.04em;text-transform:uppercase}
.t-zahl{font-family:var(--schrift);font-weight:var(--gewicht-display);font-size:var(--t-zahl);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums lining-nums}
.t-tab{font-variant-numeric:tabular-nums lining-nums}

/* Sektionskopf: H2 links, Einleitung oder Link rechts */
.kopfzeile{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:1.25rem;align-items:end;margin-bottom:clamp(2rem,5vw,4rem)}
.kopfzeile > h2{grid-column:1 / span 6}
.kopfzeile > p{grid-column:8 / -1;max-width:44ch}
.kopfzeile--einfach > h2{grid-column:1 / span 8}
.kopfzeile--einfach > p{grid-column:1 / span 7}
.kopfzeile--link{align-items:baseline}
.kopfzeile--link > h2{grid-column:1 / span 7}
.kopfzeile--link > .kopfzeile__link{grid-column:9 / -1;justify-self:end;text-align:right}
@media (max-width:799px){.kopfzeile > h2,.kopfzeile > p,.kopfzeile--link > .kopfzeile__link{grid-column:1 / -1;justify-self:start;text-align:left}}
.kopfzeile__link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-size:var(--t-klein);font-weight:var(--gewicht-stark);text-decoration:none;border-bottom:1px solid var(--linie)}
.kopfzeile__link:hover{border-bottom-color:var(--akzent)}
.kopfzeile__link svg{width:16px;height:16px;transition:transform .35s var(--kurve)}
.kopfzeile__link:hover svg{transform:translateX(4px)}

/* Knoepfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3rem;padding:.75rem 1.45rem;background:var(--akzent);color:var(--akzent-text);border:1px solid var(--akzent);border-radius:var(--radius-knopf);font-family:var(--schrift-text);font-weight:var(--gewicht-stark);font-size:1rem;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer) var(--kurve)}
.knopf:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel);text-decoration:none}
.knopf:active{transform:translateY(1px)}
.knopf--leise{background:transparent;color:var(--text);border-color:var(--text)}
.knopf--leise:hover{background:var(--text);color:var(--grund);border-color:var(--text)}
.knopf--klein{min-height:2.75rem;padding:.5rem 1.05rem;font-size:var(--t-klein)}
.knopf--gross{min-height:3.5rem;padding:1rem 1.9rem;font-size:1.0625rem}
.knopf--pfeil svg{width:18px;height:18px;transition:transform .35s var(--kurve)}
.knopf--pfeil:hover svg{transform:translateX(4px)}
.tel{display:inline-flex;align-items:center;min-height:3rem;padding-block:.5rem;font-weight:var(--gewicht-stark);text-decoration:none;font-variant-numeric:tabular-nums;border-bottom:1px solid transparent}
.tel:hover{border-bottom-color:currentColor}

.linie{border:0;border-top:1px solid var(--linie);margin:0}

/* ---------- Ankuendigungsleiste ---------- */
.ansage{background:var(--dunkel);color:#fff;font-size:var(--t-mikro)}
.ansage__zeile{display:flex;align-items:center;justify-content:center;gap:clamp(1.25rem,4vw,3rem);min-height:36px;padding-block:.4rem}
.ansage__zeile span{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.ansage__zeile span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--akzent);flex:none}
@media (max-width:779px){.ansage__zeile span:nth-child(n+2){display:none}}

/* ---------- Kopfzeile, Shop-Modus ---------- */
.kopf{position:sticky;top:0;z-index:40;background:var(--grund);border-bottom:1px solid var(--linie)}
.kopf__zeile{position:relative;display:flex;align-items:center;gap:clamp(.65rem,1.6vw,1.5rem);min-height:var(--kopf-h)}
.kopf__marke{display:inline-flex;align-items:center;text-decoration:none;font-family:var(--schrift);font-weight:var(--gewicht-stark);font-size:1.125rem;letter-spacing:-0.01em;min-height:44px;flex:none}
.kopf__logo{height:26px;width:auto}
.kopf__wort{display:none;align-items:baseline;gap:.2rem;font-weight:600;letter-spacing:.01em}
.kopf__wort small{font-family:var(--schrift-text);font-weight:400;font-size:var(--t-mikro);color:var(--leise);margin-left:.35rem}

.kopf__suche{position:relative;display:flex;align-items:center;gap:.55rem;flex:1 1 240px;max-width:520px;min-height:44px;padding-inline:.85rem;background:var(--grund);border:1px solid var(--linie);border-radius:var(--radius)}
.kopf__suche:focus-within{border-color:var(--akzent)}
.kopf__lupe{width:17px;height:17px;flex:none;color:var(--leise)}
.kopf__feld{flex:1;min-width:0;min-height:42px;border:0;background:none;font:inherit;font-size:var(--t-klein);color:var(--text)}
.kopf__feld::placeholder{color:var(--leise)}
.kopf__feld:focus{outline:none}
.kopf__liste{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);z-index:50;max-height:min(60vh,460px);overflow:auto;background:var(--grund);border:1px solid var(--linie);border-radius:var(--radius)}
.kopf__liste:not([hidden]){animation:vorschlag .16s var(--kurve) both}
.kopf__liste a,.kopf__liste button{display:flex;align-items:center;gap:.75rem;width:100%;min-height:56px;padding:.55rem .8rem;border:0;border-bottom:1px solid var(--linie);background:none;font:inherit;font-size:var(--t-klein);text-align:left;text-decoration:none;color:inherit;cursor:pointer}
.kopf__liste a:last-child,.kopf__liste button:last-child{border-bottom:0}
.kopf__liste a:hover,.kopf__liste button:hover,.kopf__liste [aria-selected="true"]{background:var(--flaeche)}
.kopf__liste img{width:40px;height:40px;flex:none;object-fit:contain;background:#fff;border:1px solid var(--linie);border-radius:2px}
@keyframes vorschlag{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.kopf__aktion{display:flex;align-items:center;gap:.6rem;margin-left:auto;flex:none}
.kopf__preis{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .9rem;background:transparent;color:var(--text);border:1px solid var(--linie);border-radius:var(--radius-knopf);font-size:var(--t-mikro);font-weight:var(--gewicht-stark);white-space:nowrap;cursor:pointer;transition:background .3s var(--kurve),color .3s var(--kurve),border-color .3s var(--kurve)}
.kopf__preis:hover{border-color:var(--text)}
.kopf__preis[aria-pressed="true"]{background:var(--akzent);color:var(--akzent-text);border-color:var(--akzent)}
.kopf__tel{font-size:var(--t-klein)}
.kopf__korb{position:relative;display:grid;place-items:center;width:44px;height:44px;background:transparent;color:var(--text);border:1px solid var(--linie);border-radius:var(--radius-knopf);cursor:pointer;transition:border-color .3s var(--kurve)}
.kopf__korb:hover{border-color:var(--text)}
.kopf__korb svg{width:21px;height:21px}
.kopf__zahl{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding-inline:5px;display:grid;place-items:center;background:var(--akzent);color:var(--akzent-text);border-radius:999px;font-size:12px;line-height:1;font-weight:var(--gewicht-stark);font-variant-numeric:tabular-nums}
/* Der Sprung des Zaehlers beim Hinzufuegen kommt als .is-sprung aus shop.css. */

.kopf__gruppen{border-top:1px solid var(--linie)}
.kopf__gruppen-zeile{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);min-height:46px;overflow:hidden}
.kopf__gruppen a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-klein);text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent}
.kopf__gruppen a:hover{border-bottom-color:var(--akzent)}

.kopf__menue{display:none;flex:none}
.kopf__menue > summary{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--linie);border-radius:var(--radius-knopf);cursor:pointer;list-style:none}
.kopf__menue > summary::-webkit-details-marker{display:none}
.kopf__menue > summary svg{width:20px;height:20px}
.kopf__blatt{position:absolute;left:0;right:0;top:calc(100% + 1px);z-index:50;display:flex;flex-direction:column;background:var(--grund);border:1px solid var(--linie);border-radius:0 0 var(--radius) var(--radius)}
.kopf__menue[open] .kopf__blatt{animation:vorschlag .16s var(--kurve) both}
.kopf__blatt a{display:flex;align-items:center;min-height:48px;padding:.5rem 1rem;font-size:var(--t-klein);text-decoration:none;border-bottom:1px solid var(--linie)}
.kopf__blatt a:last-child{border-bottom:0}
.kopf__blatt-tel{font-weight:var(--gewicht-stark);font-variant-numeric:tabular-nums}

@media (max-width:899px){
  :root{--kopf-h:56px}
  .kopf__zeile{flex-wrap:wrap;row-gap:.55rem;padding-bottom:.6rem}
  .kopf__menue{display:block;order:0}
  .kopf__marke{order:1}
  .kopf__aktion{order:2}
  .kopf__suche{order:3;flex-basis:100%;max-width:none}
  .kopf__logo,.kopf__tel,.kopf__gruppen{display:none}
  .kopf__wort{display:inline-flex}
  .kopf__wort small{display:none}
  .kopf__preis{padding-inline:.7rem}
}
@media (max-width:389px){.kopf__preis{padding-inline:.55rem;font-size:12px}}

/* ---------- Hero: Foto vollflaechig, Text auf heller Platte ---------- */
.hero{position:relative;overflow:clip;display:grid;grid-template-columns:1fr;min-height:clamp(600px,88vh,940px);align-items:end}
.hero__bild{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden}
.hero__bild img{width:100%;height:100%;object-fit:cover}
.hero__inhalt{position:relative;z-index:1;grid-column:1;grid-row:1;justify-self:start;width:auto;max-width:min(100% - 2*var(--rand),600px);margin:0 0 clamp(2.5rem,6vw,5rem) max(var(--rand),calc((100% - var(--inhalt))/2));padding:clamp(1.75rem,3vw,2.5rem) clamp(1.75rem,3vw,2.5rem) clamp(1.5rem,2.5vw,2rem);background:rgb(255 255 255/.88);-webkit-backdrop-filter:blur(16px) saturate(1.05);backdrop-filter:blur(16px) saturate(1.05);color:var(--text);border-radius:var(--radius)}
.hero__titel{margin:0;font-size:clamp(2.3rem,1.4rem + 3vw,4.2rem);letter-spacing:-0.02em;line-height:.98}
.hero__text{margin-top:1.25rem;max-width:46ch;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.5}
.hero__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.25rem;margin-top:1.75rem}
.hero__unterzeile{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.hero__portal{position:relative;z-index:1;grid-column:1;grid-row:1;justify-self:end;align-self:end;margin:0 max(var(--rand),calc((100% - var(--inhalt))/2)) clamp(2.5rem,6vw,5rem) 0;max-width:300px}
.hero .w{display:inline-block}
.w--stark{font-weight:700}
.offen{display:inline-flex;align-items:center;gap:.45rem}
.offen::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--leise);flex:none}
.offen.is-offen::before{background:var(--gruen)}
@media (max-width:599px){.hero__aktion{display:grid;grid-template-columns:1fr;gap:.75rem}}
@media (max-width:899px){
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero__inhalt{order:1;max-width:none;margin:0;padding:1.75rem var(--rand) 1.5rem;background:var(--grund);-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero__bild{order:2;position:static;aspect-ratio:4/3;width:100%}
  .hero__portal{order:3;align-self:stretch;justify-self:stretch;max-width:none;margin:-3rem var(--rand) 2.5rem}
}

/* ---------- Rezept: zahlen, als Typenschild ---------- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--spalt)}
.zahlen__eintrag{position:relative;padding:1.6rem 1.5rem 1.5rem;background:var(--dunkel);color:#F4F6F8;border-radius:var(--radius)}
.zahlen__eintrag::before{content:"";position:absolute;left:1.5rem;right:1.5rem;top:0;height:3px;background:var(--akzent)}
.zahlen__eintrag dt{margin:0}
.zahlen__eintrag dd{margin:.65rem 0 0;color:rgb(255 255 255/.72);max-width:26ch;font-size:var(--t-klein);line-height:1.45}
.zahlen .t-zahl{color:#fff;margin-top:.4rem;display:block}
.zahlen__quelle{margin-top:1rem}
@media (max-width:699px){.zahlen{gap:.75rem}.zahlen__eintrag{padding:1.25rem 1.1rem 1.2rem}.zahlen__eintrag::before{left:1.1rem;right:1.1rem}}
@media (max-width:599px){.zahlen{grid-template-columns:1fr 1fr}}

/* ---------- Rezept: index (Warengruppen) ---------- */
.index{border-top:1px solid var(--linie)}
.index__zeile{border-bottom:1px solid var(--linie)}
.index__link{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;column-gap:var(--spalt);align-items:center;padding:clamp(1.15rem,2.2vw,1.75rem) 0;text-decoration:none;color:inherit}
.index__link h3{margin:0;transition:color .3s var(--kurve)}
.index__link p{margin:.2rem 0 0;color:var(--leise);max-width:52ch;font-size:var(--t-klein)}
.index__link:hover h3{color:var(--akzent)}
.index__bild{width:clamp(72px,9vw,116px);aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--flaeche)}
.index__bild img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--kurve)}
.index__bild--objekt{background:#fff;border:1px solid var(--linie)}
.index__bild--objekt img{object-fit:contain;padding:8%}
.index__link:hover .index__bild img{transform:scale(1.03)}
@media (max-width:699px){
  .index__link{grid-template-columns:1fr auto;row-gap:.35rem;align-items:start}
  .index__link h3{grid-column:1;grid-row:1}
  .index__bild{grid-column:2;grid-row:1}
  .index__link p{grid-column:1 / -1;grid-row:2}
}

/* ---------- Rezept: split ---------- */
.split{display:grid;grid-template-columns:minmax(var(--rand),1fr) repeat(12,minmax(0,calc((var(--inhalt) - 11*var(--spalt))/12))) minmax(var(--rand),1fr);column-gap:var(--spalt);align-items:center}
.split__text{grid-column:2 / span 5;padding-block:clamp(1rem,3vw,2rem)}
.split__text p{margin-top:1.25rem;max-width:46ch}
.split__bild{grid-column:8 / -1;margin:0;overflow:hidden;border-radius:var(--radius) 0 0 var(--radius);aspect-ratio:5/4}
.split__bild--quadrat{aspect-ratio:1/1}
.split__bild img{width:100%;height:100%;object-fit:cover}
.split__etikett{margin-top:1.75rem;max-width:46ch}
.split__aktion{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}
@media (max-width:899px){
  .split{display:block}
  .split__bild{border-radius:0;aspect-ratio:4/3}
  .split__text{width:min(100% - 2*var(--rand),var(--inhalt));margin-inline:auto;padding-block:2rem 0}
}

/* ---------- Rezept: ablauf ---------- */
.ablauf{counter-reset:schritt;border-top:1px solid var(--linie)}
.ablauf__schritt{counter-increment:schritt;display:grid;grid-template-columns:minmax(72px,1fr) minmax(0,5fr) minmax(0,6fr);column-gap:var(--spalt);padding:clamp(1.25rem,2.5vw,2rem) 0;border-bottom:1px solid var(--linie)}
.ablauf__schritt::before{content:counter(schritt,decimal-leading-zero);font-family:var(--schrift);font-weight:var(--gewicht-display);font-size:var(--t-h2);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:var(--akzent)}
.ablauf__schritt h3{margin:0}
.ablauf__schritt p{margin:0;color:var(--leise);max-width:48ch}
@media (max-width:699px){
  .ablauf__schritt{grid-template-columns:56px 1fr;row-gap:.5rem}
  .ablauf__schritt p{grid-column:2}
}

/* ---------- Rezept: schluss ---------- */
.schluss{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:2.5rem;align-items:end}
.schluss__gesicht{grid-column:1 / span 4}
.schluss__gesicht figure{margin:0;width:min(100%,300px);aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--flaeche)}
.schluss__gesicht img{width:100%;height:100%;object-fit:cover}
.schluss__gesicht figcaption{margin-top:.8rem;font-size:var(--t-klein);color:var(--leise)}
.schluss__gesicht figcaption strong{display:block;color:var(--text)}
.schluss__text{grid-column:5 / -1}
.schluss__text .t-h2{max-width:16ch}
.schluss__tel{display:inline-block;margin-top:1.5rem;padding-block:.35rem;font-family:var(--schrift);font-weight:var(--gewicht-display);font-size:clamp(1.8rem,1.3rem + 2.4vw,3.4rem);line-height:1.1;letter-spacing:-0.02em;text-decoration:none;font-variant-numeric:tabular-nums;border-bottom:2px solid var(--akzent)}
.schluss__tel:hover{color:var(--akzent)}
.schluss__daten{margin-top:2.25rem}
.schluss__daten.etikett{gap:.55rem 1.4rem;grid-template-columns:auto 1fr;padding:1.2rem 1.4rem 1.3rem}
.schluss__daten p{margin:0}
.schluss__aktion{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}
@media (max-width:799px){.schluss__gesicht,.schluss__text{grid-column:1 / -1}}

/* ---------- Eigenheit: das Versandetikett ---------- */
.etikett{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;margin:0;padding:1rem 1.2rem 1.1rem;background:var(--grund);border:1px solid var(--linie);border-top:var(--portal) solid var(--akzent);border-radius:var(--radius);font-variant-numeric:tabular-nums}
.etikett dt{margin:0;font-size:var(--t-mikro);font-weight:var(--gewicht-stark);letter-spacing:.08em;text-transform:uppercase;color:var(--leise);padding-top:.15em}
.etikett dd{margin:0;font-size:var(--t-klein);line-height:1.45}
.etikett dd strong{display:block;font-weight:var(--gewicht-stark)}
.abschnitt--flaeche .etikett{background:var(--grund)}
.etikett--block{grid-template-columns:1fr;gap:.45rem;padding:1.25rem 1.4rem 1.4rem}
.etikett--block dd strong{font-family:var(--schrift);font-size:var(--t-h3);font-weight:var(--gewicht-stark);letter-spacing:-0.008em;margin-bottom:.35rem}
.etikett--block dd{color:var(--leise)}
.versprechen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spalt)}
.versprechen__satz{margin-top:1.5rem;color:var(--leise);max-width:60ch}
@media (max-width:899px){.versprechen{grid-template-columns:1fr}}

/* ---------- Marken: das eine Raster ---------- */
.marken-raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--spalt)}
/* Die Kachel selbst (.sh-marke) und die Verfuegbarkeitszeile (.sh-lager)
   stehen in shop.css, damit Startseite und Shop dieselbe Kachel zeigen. */
@media (max-width:1023px){.marken-raster{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:639px){.marken-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}

/* ---------- Rezept: karussell ---------- */
.karussell{position:relative}
.karussell__spur{display:flex;gap:var(--spalt);margin:0;padding:2px 0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.karussell__spur::-webkit-scrollbar{display:none}
.karussell__spur.is-zieht{cursor:grabbing;scroll-snap-type:none;user-select:none}
.karussell__spur:focus-visible{outline:2px solid var(--text);outline-offset:4px}
.karussell__kachel{flex:0 0 calc((100% - 4*var(--spalt))/5);scroll-snap-align:start;aspect-ratio:5/3;display:grid;place-items:center;padding:clamp(1.25rem,2.5vw,2rem);background:var(--flaeche);border-radius:var(--radius)}
.karussell--ware .karussell__kachel{flex:0 0 calc((100% - 3*var(--spalt))/4);aspect-ratio:auto;display:block;padding:0;background:none;border-radius:0}
.karussell--ware .sh-karte{height:100%}
.karussell__steuer{display:flex;align-items:center;gap:1.25rem;margin-top:1.5rem}
.karussell__lauf{position:relative;flex:1;height:2px;background:var(--linie);overflow:hidden}
.karussell__stand{position:absolute;top:0;left:0;height:100%;width:20%;background:var(--text);transition:transform .25s linear}
.karussell__zaehler{font-variant-numeric:tabular-nums;min-width:4.5ch;text-align:right}
.karussell__pfeile{display:flex;gap:.5rem}
.karussell__pfeil{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--text);border-radius:var(--radius-knopf);background:transparent;color:var(--text);cursor:pointer;transition:background var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
.karussell__pfeil:hover{background:var(--text);color:var(--grund)}
.karussell__pfeil:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.karussell__pfeil svg{width:18px;height:18px;display:block}
@media (max-width:1023px){.karussell--ware .karussell__kachel{flex-basis:calc((100% - 2*var(--spalt))/3)}}
@media (max-width:699px){.karussell--ware .karussell__kachel{flex-basis:calc((100% - var(--spalt))/2.1)}.karussell__steuer{gap:1rem}}
@media (prefers-reduced-motion:reduce){.karussell__stand{transition:none}}

/* ---------- Fuss ---------- */
.fuss{border-top:1px solid var(--linie);padding-top:clamp(2.5rem,5vw,4rem)}
.fuss__raster{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem var(--spalt)}
.fuss__marke{font-family:var(--schrift);font-weight:var(--gewicht-stark);font-size:1.0625rem;margin-bottom:.6rem}
.fuss__block p{margin-bottom:.6rem}
.fuss__kontakt a{text-decoration:none;border-bottom:1px solid var(--linie)}
.fuss__kontakt a:hover{border-bottom-color:var(--akzent)}
.fuss__titel{font-size:var(--t-mikro);font-weight:var(--gewicht-stark);letter-spacing:.08em;text-transform:uppercase;color:var(--leise);margin-bottom:.6rem}
.fuss__liste a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:var(--t-klein);text-decoration:none;border-bottom:1px solid transparent}
.fuss__liste a:hover{border-bottom-color:var(--akzent)}
.fuss__zeile{display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;margin-top:clamp(2rem,4vw,3rem);padding:1.4rem 0 calc(1.4rem + env(safe-area-inset-bottom));border-top:1px solid var(--linie);color:var(--leise);font-size:var(--t-mikro)}
.fuss__zeile p{margin:0}
@media (max-width:899px){.fuss__raster{grid-template-columns:1fr 1fr}}
@media (max-width:479px){.fuss__raster{grid-template-columns:1fr}}

/* ---------- Platzhalterflaeche fuer fehlende Fotos ---------- */
.platz{position:relative;background:var(--grund);border:1px solid var(--linie);width:100%;height:100%;min-height:200px}
.abschnitt--flaeche .platz{background:var(--grund)}
.platz__hinweis{position:absolute;left:1rem;bottom:.8rem;color:var(--leise);font-size:var(--t-mikro)}

/* ---------- Mobile Leiste unten ---------- */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:35;display:none;gap:.75rem;padding:.7rem var(--rand) calc(.7rem + env(safe-area-inset-bottom));background:var(--grund);border-top:1px solid var(--linie);transform:translateY(110%);transition:transform var(--dauer) var(--kurve)}
.leiste > *{flex:1;min-height:3rem}
.leiste.is-da{transform:none}
@media (max-width:899px){.leiste{display:flex}}

/* ---------- Bewegung: wenige Einblendungen ---------- */
html.js .hero__titel .w{opacity:0;transform:translateY(.32em);animation:wort .75s var(--kurve) forwards;animation-delay:calc(var(--i) * 65ms + 160ms)}
@keyframes wort{to{opacity:1;transform:none}}
html.js .hero__text,html.js .hero__aktion,html.js .hero__unterzeile,html.js .hero__portal{opacity:0;transform:translateY(12px);animation:einblenden .8s var(--kurve) .35s forwards}
html.js .hero__aktion{animation-delay:.45s}
html.js .hero__unterzeile{animation-delay:.55s}
html.js .hero__portal{animation-delay:.65s}
html.js .hero__bild{opacity:0;animation:einblenden 1.1s var(--kurve) .1s forwards}
html.js .auf{opacity:0;transform:translateY(12px);transition:opacity .4s var(--kurve),transform .4s var(--kurve)}
html.js .auf.is-da{opacity:1;transform:none}
@keyframes einblenden{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .hero__titel .w,html.js .hero__text,html.js .hero__aktion,html.js .hero__unterzeile,html.js .hero__portal,html.js .hero__bild,html.js .auf,.kopf__liste:not([hidden]),.kopf__menue[open] .kopf__blatt{opacity:1;transform:none;animation:none;transition:none}
  .index__bild img,.knopf,.knopf--pfeil svg,.kopf__zahl{transition:none;animation:none}
}