:root{
  /* Akzentfarbe des Shops - hier eine Stelle aendern faerbt Menue, Knoepfe,
     Preise, Links und Hervorhebungen um.                                    */
  --akz:#c8102e; --akz-d:#a30c24; --akz-l:#fdeef1;
  --kopf:#22242a; --kopf2:#191b20;
  --tx:#43454b; --tx2:#6d6f77; --tx3:#9a9ca3;
  --li:#e2e2e7; --li2:#d3d3da; --bg:#ffffff; --bg2:#f7f7f9;
  --rot:#e2401c; --gruen:#0f834d; --gelb:#ffb900;
  --r:3px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--tx);
  font:15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--akz);text-decoration:none}
a:hover{color:var(--akz-d)}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:600;color:#2f3033;line-height:1.3}
.mitte{max-width:1400px;margin:0 auto;padding:0 24px}

/* ============ Kopfbereich ============ */
.site-header{background:var(--kopf);color:#fff;padding:22px 0}
.site-header .mitte{display:flex;align-items:center;gap:30px}
/* Logo und Aktionen bekommen dieselbe Grundbreite, dadurch sitzt die Suche
   genau in der Mitte der Kopfzeile - unabhaengig davon, wie breit sie sind. */
/* "1 0 auto" statt "1 1 0": das Zeichen darf mitwachsen, aber nicht schrumpfen.
   Der Textschriftzug von frueher konnte enger werden, ein Bild nicht - bei
   schmalen Fenstern blieben sonst 19 px uebrig und es wurde plattgedrueckt.
   Eng wird stattdessen die Suchleiste, die kann das ab.                     */
.marke{flex:1 0 auto;display:flex;align-items:center;background:none;border:0;padding:0}
/* Das Zeichen ist ein Abzeichen, kein breiter Schriftzug - die Hoehe bestimmt
   die Groesse. max-width hebt die allgemeine Bildregel auf, die es sonst auf
   die Breite des Knopfes zusammenstaucht.
   Die weisse Karte darunter ist Absicht: das Zeichen hat selbst eine helle
   Flaeche und stuende sonst schmutzig auf dem dunklen Grund. */
.marke img{height:64px;width:auto;max-width:none;display:block;flex:0 0 auto;
  background:#fff;border-radius:8px;padding:5px 8px}

.suchbox{flex:0 1 620px;max-width:100%;display:flex;background:#fff;border-radius:var(--r);overflow:hidden}
.suchbox input{flex:1;border:0;padding:13px 16px;font:inherit;color:var(--tx);min-width:0}
.suchbox input:focus{outline:none}
.suchbox button{background:var(--akz);border:0;color:#fff;padding:0 20px;display:flex;align-items:center}
.suchbox button:hover{background:var(--akz-d)}

/* "0 0 auto": der rechte Bereich behaelt seine natuerliche Breite. Mit
   "1 1 0" wurde er zusammengedrueckt und sein Inhalt brach um. Eng wird
   stattdessen die Suchleiste, die vertraegt das. */
.kopf-aktionen{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:24px}
.kopf-aktion{
  background:none;border:0;color:#fff;display:flex;align-items:center;gap:10px;padding:0;
}
.kopf-aktion .ikon{position:relative;display:flex}
.kopf-aktion .zahl{
  position:absolute;top:-7px;right:-9px;background:var(--akz);color:#fff;
  min-width:19px;height:19px;border-radius:10px;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.kopf-aktion .txt{text-align:left;line-height:1.25}
.kopf-aktion .t1{font-size:11px;color:#9a9ca3;display:block}
.kopf-aktion .t2{font-size:13.5px;font-weight:600;display:block}

/* Kundenservice links neben Merkzettel und Warenkorb. Kein Knopf, sondern
   reine Auskunft - die Adresse ist anklickbar, der Rest ist Text. */
.kopf-service{display:flex;align-items:center;gap:11px;color:#fff;flex:0 0 auto;
  padding-right:24px;border-right:1px solid #3a3b42}
.kopf-service .ikon{display:flex;color:#9a9ca3;flex:0 0 auto}
.kopf-service .txt{line-height:1.35;white-space:nowrap;display:block}
/* Nicht mehr in Grossbuchstaben und deutlich heller: kleine graue
   Versalien auf dunklem Grund sind das Schlechteste, was man lesen kann. */
.kopf-service .t1{font-size:12.5px;color:#c3c5cc;display:block}
.kopf-service .t2{font-size:14px;font-weight:600;display:block;color:#fff;text-decoration:none;white-space:nowrap}
.kopf-service .t2:hover{color:#ff6b7f}
/* Heller und groesser als die Beschriftung darueber - auf dunklem Grund war
   das vorher kaum zu entziffern. */
.kopf-service .t3{font-size:12.5px;color:#c3c5cc;display:block;margin-top:1px}

/* Ab hier wird der Platz knapp - dann verschwindet zuerst die Auskunft */
@media(max-width:1150px){ .kopf-service{display:none} }

/* ============ Hauptmenü ============ */
.hauptmenu{background:var(--akz);position:sticky;top:0;z-index:50;box-shadow:0 1px 5px rgba(0,0,0,.12)}
.hauptmenu .mitte{display:flex;align-items:stretch;flex-wrap:wrap}
.hauptmenu button{
  background:none;border:0;color:#fff;padding:14px 17px;font-size:14px;font-weight:600;
  border-bottom:3px solid transparent;letter-spacing:.1px;
}
.hauptmenu button:hover{background:rgba(0,0,0,.13)}
.hauptmenu button.an{background:rgba(0,0,0,.2);border-bottom-color:#ffb900}

/* ============ Brotkrumen ============ */
.brotkrumen{background:var(--bg2);border-bottom:1px solid var(--li);padding:13px 0;font-size:13.5px;color:var(--tx2)}
.brotkrumen span{margin:0 8px;color:var(--tx3)}
.brotkrumen a{cursor:pointer}

/* ============ Banner-Slider ============ */
.slider{position:relative;overflow:hidden;background:#1c1d22}
.slider-spur{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.folie{
  min-width:100%;position:relative;overflow:hidden;padding:0;border:0;
  background:none;display:block;cursor:pointer;line-height:0;
}
/* Die Banner tragen Text und Abzeichen bereits im Bild - hier wird nichts
   darübergelegt, sonst stünde alles doppelt da. */
.folie img{width:100%;height:100%;object-fit:cover;object-position:center}
.folie-mobil{display:none}
.pfeil{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:64px;background:rgba(255,255,255,.16);border:0;color:#fff;
  font-size:25px;line-height:1;backdrop-filter:blur(2px);
}
.pfeil:hover{background:rgba(255,255,255,.32)}
.pfeil.links{left:0}
.pfeil.rechts{right:0}
.punkte{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:9px;z-index:5}
.punkte button{width:34px;height:4px;border:0;background:rgba(255,255,255,.42);padding:0}
.punkte button.an{background:#fff}

/* Bildseitenverhältnis der Banner: 1024 zu 210 */
.slider-spur{align-items:stretch}
.folie{aspect-ratio:1024/210}

/* ============ Karussell ============ */
.karussell{position:relative;margin-top:46px}
.karussell h2{
  font-size:38px;text-align:center;text-transform:uppercase;letter-spacing:-.8px;
  color:#1c1d22;margin-bottom:26px;font-weight:800;line-height:1.1;
}
.k-spur{
  display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;padding:6px 2px 10px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.k-spur::-webkit-scrollbar{display:none}
.k-pfeil{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--li2);
  color:var(--tx);font-size:19px;line-height:1;box-shadow:0 2px 10px rgba(0,0,0,.14);
  display:flex;align-items:center;justify-content:center;
}
.k-pfeil:hover{background:var(--akz);color:#fff;border-color:var(--akz)}
.k-pfeil.l{left:-14px}
.k-pfeil.r{right:-14px}
.k-pfeil[disabled]{opacity:.3;pointer-events:none}

.tk{
  min-width:232px;max-width:232px;scroll-snap-align:start;background:#fff;
  border:1px solid var(--li);border-radius:6px;padding:14px 14px 16px;
  display:flex;flex-direction:column;position:relative;transition:box-shadow .18s;
}
.tk:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.tk-herz{
  position:absolute;top:9px;right:9px;background:none;border:0;padding:3px;
  color:var(--tx3);z-index:2;line-height:0;
}
.tk-herz:hover{color:var(--akz)}
.tk-herz.an{color:var(--akz)}
.tk-bild{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:12px}
.tk-bild img{max-width:100%;max-height:100%;object-fit:contain}
.tk-marke{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.9px;margin-bottom:4px}
.tk-titel{
  font-size:13.5px;line-height:1.4;color:#2f3033;cursor:pointer;margin-bottom:9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;
}
.tk-titel:hover{color:var(--akz)}
.tk-preis{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.tk-preis .jetzt{font-size:16.5px;font-weight:700;color:#2f3033}
.tk-preis.reduziert .jetzt{color:var(--akz)}
.tk-preis del{font-size:12.5px;color:var(--tx3)}
.tk-preis .minus{background:var(--akz);color:#fff;font-size:11px;font-weight:700;padding:2px 6px;border-radius:3px}
.tk-info{font-size:12px;color:var(--tx2);display:flex;align-items:center;gap:7px;line-height:1.7}
.tk-info .punkt{width:7px;height:7px;border-radius:50%;background:var(--gruen);flex:none}
.tk-info .punkt.grau{background:var(--tx3)}

/* ============ Markenreihe ============ */
.markenband{border-bottom:1px solid var(--li);background:var(--bg)}
.markenband .mitte{
  display:flex;align-items:center;justify-content:center;
  gap:24px;flex-wrap:wrap;padding:24px;
}
.markenband button{
  background:none;border:0;padding:4px 2px;color:#1c1d22;white-space:nowrap;
  font-size:17px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  opacity:.62;transition:opacity .16s,color .16s;font-family:"Arial Narrow",Impact,sans-serif;
}
.markenband button:hover{opacity:1;color:var(--akz)}
.markenband .mlogo{
  height:30px;width:auto;max-width:132px;object-fit:contain;
  filter:grayscale(1) contrast(1.15);
}
.markenband button:hover .mlogo{filter:none}
.markenband button.alle{
  font-size:13.5px;font-weight:700;letter-spacing:.7px;opacity:1;
  text-decoration:underline;text-underline-offset:4px;
}
.markenband button.alle:hover{color:var(--akz)}

/* Markenübersicht */
.markenliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1px;background:var(--li)}
.markenliste button{
  background:#fff;border:0;padding:17px 18px;text-align:left;
  display:flex;align-items:baseline;gap:9px;color:var(--tx);
}
.markenliste button:hover{background:var(--akz-l);color:var(--akz-d)}
.markenliste .mn{font-weight:600;font-size:15px;color:#2f3033}
.markenliste button:hover .mn{color:var(--akz-d)}
.markenliste .mc{margin-left:auto;font-size:12.5px;color:var(--tx3)}

/* ============ Kategorie-Reihe ============ */
.kat-band{background:#fff;border-bottom:1px solid var(--li);padding:34px 0 30px}
.kat-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px}
.kat-kachel{background:none;border:0;padding:8px 6px 4px;display:flex;flex-direction:column;gap:6px}
.kb-bild{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.kb-bild img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .28s ease}
.kat-kachel:hover .kb-bild img{transform:scale(1.06)}
.kb-name{
  font-weight:700;font-size:16.5px;color:#2f3033;text-align:center;
  letter-spacing:-.2px;transition:color .18s;
}
.kat-kachel:hover .kb-name{color:var(--akz)}
.kb-name .pf{
  display:inline-block;color:var(--akz);opacity:0;transform:translateX(-5px);
  transition:opacity .18s,transform .18s;margin-left:5px;
}
.kat-kachel:hover .kb-name .pf{opacity:1;transform:none}
.kat-kachel.an .kb-name{color:var(--akz)}
.kat-kachel.an .kb-name .pf{opacity:1;transform:none}

/* ============ Vorteilsleiste ============ */
.vorteile{border-top:1px solid var(--li);border-bottom:1px solid var(--li);background:var(--bg)}
.vorteile .mitte{
  display:flex;align-items:center;justify-content:center;
  gap:74px;flex-wrap:wrap;padding:24px;
}
.vorteil{display:flex;align-items:center;gap:13px}
.vorteil svg{flex:none;color:#1c1d22}
.vorteil span{font-size:15px;color:#2f3033;white-space:nowrap}

/* ============ Grundgerüst ============ */
.huelle{display:flex;gap:40px;align-items:flex-start;padding:34px 0 60px}
.seitenleiste{width:270px;flex:none}
.inhalt{flex:1;min-width:0}

/* ============ Widgets ============ */
.widget{margin-bottom:32px}
.widget-titel{
  font-size:15px;font-weight:700;color:#2f3033;padding-bottom:11px;margin-bottom:14px;
  border-bottom:2px solid var(--li);text-transform:uppercase;letter-spacing:.5px;
}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{border-bottom:1px solid var(--li)}
.widget li:last-child{border-bottom:0}
.kasten{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13.5px;cursor:pointer;color:var(--tx)}
.kasten:hover{color:var(--akz)}
.kasten input{accent-color:var(--akz);width:15px;height:15px;flex:none;cursor:pointer}
.kasten .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kasten .ct{margin-left:auto;color:var(--tx3);font-size:12px;flex:none}
.mehrzeigen{background:none;border:0;color:var(--akz);font-weight:600;font-size:13px;padding:9px 0}
.preisfeld{display:flex;gap:8px;margin:12px 0 10px}
.preisfeld input{width:100%;padding:9px 10px;border:1px solid var(--li2);border-radius:var(--r);font:inherit;font-size:13.5px}
.preisfeld input:focus{outline:none;border-color:var(--akz)}
.leeren{
  width:100%;padding:11px;background:var(--kopf);color:#fff;border:0;
  border-radius:var(--r);font-weight:600;font-size:13.5px;
}
.leeren:hover{background:var(--kopf2)}

/* ============ Shop-Kopf ============ */
.shop-kopf{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.shop-kopf h1{font-size:28px;letter-spacing:-.6px}
.result-count{font-size:13.5px;color:var(--tx2);margin:0 0 22px}
.ordering{margin-left:auto}
.ordering select{
  padding:10px 13px;border:1px solid var(--li2);border-radius:var(--r);
  font:inherit;font-size:13.5px;background:#fff;color:var(--tx);max-width:100%;
}
.aktivfilter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.aktivfilter .chip{
  background:var(--akz-l);color:var(--akz-d);border:1px solid #ddd0f0;
  padding:5px 10px;border-radius:var(--r);font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
}
.aktivfilter .chip button{background:none;border:0;color:inherit;font-size:15px;line-height:1;padding:0}

/* ============ Produktraster ============ */
.produkte{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:1px;background:var(--li)}
.produkt{background:#fff;padding:18px 16px 20px;display:flex;flex-direction:column;position:relative;transition:box-shadow .18s}
.produkt:hover{box-shadow:0 3px 18px rgba(0,0,0,.11);z-index:2}
.p-bild{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:14px}
.p-bild img{max-width:100%;max-height:100%;object-fit:contain}
.angebot{
  position:absolute;top:0;left:0;background:var(--akz);color:#fff;
  min-width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;z-index:2;
}
.p-kat{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.9px;margin-bottom:5px}
.p-titel{font-size:14.5px;font-weight:600;line-height:1.4;cursor:pointer;color:#2f3033;margin-bottom:7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:41px}
.p-titel:hover{color:var(--akz)}
.p-attr{font-size:12px;color:var(--tx2);line-height:1.5;margin-bottom:9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.p-aus{font-size:11.5px;color:var(--akz-d);background:var(--akz-l);border-radius:2px;
  padding:3px 7px;align-self:flex-start;margin-bottom:10px;font-weight:600;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-preis{margin-top:auto;font-size:19px;font-weight:700;color:#2f3033;letter-spacing:-.4px}
.p-preis .ab{font-size:12px;font-weight:500;color:var(--tx2)}
.p-preis del{font-size:13px;color:var(--tx3);font-weight:400;margin-left:7px}
.p-knopf{
  margin-top:12px;width:100%;background:var(--akz);color:#fff;border:0;
  padding:11px;border-radius:var(--r);font-weight:600;font-size:13.5px;
}
.p-knopf:hover{background:var(--akz-d)}
.p-knopf.ok{background:var(--gruen)}

.mehr-laden{
  display:block;margin:34px auto 0;padding:14px 44px;background:#fff;
  border:2px solid var(--akz);color:var(--akz);border-radius:var(--r);font-weight:700;font-size:14px;
}
.mehr-laden:hover{background:var(--akz);color:#fff}
.nix{text-align:center;padding:70px 20px;color:var(--tx2);background:var(--bg2);border:1px solid var(--li)}
.nix h2{margin-bottom:8px}

/* ============ Produktseite ============ */
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.78fr);gap:46px;align-items:start}
.pd-galerie .haupt{border:1px solid var(--li);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:18px;position:relative}
.pd-galerie .haupt img{max-width:100%;max-height:100%;object-fit:contain}
.pd-mini{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pd-mini button{width:76px;height:76px;border:1px solid var(--li);background:#fff;padding:4px;overflow:hidden}
.pd-mini button.an{border-color:var(--akz);border-width:2px}
.pd-mini img{width:100%;height:100%;object-fit:contain}
.pd-info h1{font-size:29px;letter-spacing:-.7px;margin-bottom:12px}
.pd-preis{font-size:31px;font-weight:700;color:var(--akz);letter-spacing:-.9px;margin-bottom:4px}
.pd-preis del{font-size:19px;color:var(--tx3);font-weight:400;margin-left:10px}
.pd-mwst{font-size:12.5px;color:var(--tx2);margin-bottom:20px}
.pd-mwst a{text-decoration:underline;cursor:pointer}
/* Pflichtangabe an jedem Preis - klein, aber ueberall */
.p-mwst{font-size:11.5px;color:var(--tx3);margin:-6px 0 12px;line-height:1.4}
.pd-kurz{font-size:14px;color:var(--tx2);line-height:1.75;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--li)}
.pd-feld{margin-bottom:18px}
.pd-feld label{display:block;font-size:13px;font-weight:700;color:#2f3033;margin-bottom:7px}
.pd-feld select{
  width:100%;padding:11px 13px;border:1px solid var(--li2);border-radius:var(--r);
  font:inherit;font-size:14px;background:#fff;color:var(--tx);
}
.pd-feld select:focus{outline:none;border-color:var(--akz)}

/* Farbknoepfe: einfarbige Kreise, Farbe aus dem Farbnamen abgeleitet */
.farbkreise{display:flex;gap:12px;flex-wrap:wrap}
.fk{
  width:38px;height:38px;border-radius:50%;padding:0;
  border:1px solid rgba(0,0,0,.18);position:relative;
  transition:transform .15s,box-shadow .15s;
}
.fk:hover{transform:scale(1.1)}
.fk.an{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--akz)}
.farbname{font-size:13px;color:var(--tx2);margin-top:9px}
.farbname b{color:#2f3033;font-weight:600}
.pd-kauf{display:flex;gap:11px;margin:22px 0 18px}
.menge{display:flex;border:1px solid var(--li2);border-radius:var(--r);overflow:hidden}
.menge button{background:var(--bg2);border:0;width:40px;font-size:17px;color:var(--tx)}
.menge button:hover{background:var(--li)}
.menge input{width:52px;border:0;text-align:center;font:inherit;font-weight:600;-moz-appearance:textfield}
.menge input::-webkit-outer-spin-button,.menge input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pd-inkorb{
  flex:1;background:var(--akz);color:#fff;border:0;padding:14px;
  border-radius:var(--r);font-weight:700;font-size:15px;
}
.pd-inkorb:hover{background:var(--akz-d)}
.pd-meta{font-size:13px;color:var(--tx2);border-top:1px solid var(--li);padding-top:16px}
.pd-meta div{margin-bottom:5px}
.pd-meta b{color:#2f3033;font-weight:600}
.pd-notiz{margin-top:16px;background:var(--bg2);border-left:3px solid var(--akz);padding:13px 15px;font-size:13px;color:var(--tx2)}
.pd-notiz.akku{display:flex;gap:12px;align-items:flex-start;line-height:1.6}
.pd-notiz.akku svg{flex:0 0 auto;margin-top:1px;color:var(--tx2)}
.pd-notiz.akku a{text-decoration:underline;cursor:pointer}

/* Tabs */
.tabs{margin-top:56px}
.tab-leiste{display:flex;gap:2px;border-bottom:1px solid var(--li);flex-wrap:wrap}
.tab-leiste button{
  background:var(--bg2);border:1px solid var(--li);border-bottom:0;color:var(--tx2);
  padding:12px 22px;font-weight:600;font-size:14px;border-radius:var(--r) var(--r) 0 0;margin-bottom:-1px;
}
.tab-leiste button.an{background:#fff;color:#2f3033;border-bottom:1px solid #fff}
.tab-inhalt{border:1px solid var(--li);border-top:0;padding:28px 30px}
.tab-inhalt h3{font-size:16px;margin:26px 0 12px}
.tab-inhalt h3:first-child{margin-top:0}
table.daten{width:100%;border-collapse:collapse;font-size:14px}
table.daten th,table.daten td{padding:11px 14px;border:1px solid var(--li);text-align:left;vertical-align:top}
table.daten th{background:var(--bg2);font-weight:600;color:#2f3033;width:34%}
table.daten thead th{width:auto}
.tabellenroller{overflow-x:auto}

.aehnlich{margin-top:58px}
.aehnlich h2{font-size:21px;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--li)}

/* ============ Warenkorb ============ */
.dunkel{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s}
.dunkel.an{opacity:1;pointer-events:auto}
.korb{
  position:fixed;top:0;right:0;bottom:0;width:410px;max-width:93vw;background:#fff;z-index:100;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;
  box-shadow:-6px 0 26px rgba(0,0,0,.16);
}
.korb.an{transform:none}
.korb-kopf{background:var(--kopf);color:#fff;padding:17px 20px;display:flex;align-items:center}
.korb-kopf h2{font-size:16px;color:#fff;text-transform:uppercase;letter-spacing:.6px}
.korb-kopf button{margin-left:auto;background:none;border:0;color:#fff;font-size:24px;line-height:1}
.korb-liste{flex:1;overflow-y:auto;padding:0 20px}
.korb-zeile{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--li)}
.korb-zeile img{width:70px;height:70px;object-fit:contain;border:1px solid var(--li);flex:none}
.kz-info{flex:1;min-width:0}
.kz-info strong{display:block;font-size:13.5px;font-weight:600;color:#2f3033;line-height:1.4}
.kz-var{font-size:11.5px;color:var(--tx3);margin:3px 0 8px}
.kz-menge{display:flex;align-items:center;gap:8px}
.kz-menge button{width:25px;height:25px;border:1px solid var(--li2);background:#fff;font-size:14px;line-height:1;color:var(--tx)}
.kz-menge span{min-width:18px;text-align:center;font-weight:600;font-size:13.5px}
.kz-menge .raus{margin-left:auto;border:0;background:none;color:var(--tx3);font-size:12px;width:auto}
.kz-menge .raus:hover{color:var(--rot)}
.kz-preis{font-weight:700;font-size:14px;white-space:nowrap;color:#2f3033}
.korb-fuss{border-top:1px solid var(--li);padding:20px;background:var(--bg2)}
.zeile{display:flex;justify-content:space-between;font-size:13.5px;color:var(--tx2);margin-bottom:7px}
.zeile.gesamt{font-size:18px;font-weight:700;color:#2f3033;margin:13px 0 16px;padding-top:13px;border-top:1px solid var(--li2)}
.korb-fuss .kasse-knopf{width:100%;padding:14px;background:var(--akz);color:#fff;border:0;border-radius:var(--r);font-weight:700;font-size:14.5px}
.korb-fuss .kasse-knopf:hover{background:var(--akz-d)}
.korb-leer{text-align:center;padding:60px 20px;color:var(--tx2)}

/* ============ Kasse ============ */
.kasse-raster{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:start;margin-top:26px}
.block{border:1px solid var(--li);padding:26px;margin-bottom:22px}
.block h3{font-size:17px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--li)}
.formreihe{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.ff{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.ff.voll{grid-column:1/-1}
.ff label{font-size:13px;font-weight:600;color:#2f3033}
.ff input,.ff textarea{padding:11px 13px;border:1px solid var(--li2);border-radius:var(--r);font:inherit;font-size:14px;width:100%}
.ff input:focus,.ff textarea:focus{outline:none;border-color:var(--akz)}
.ff textarea{min-height:92px;resize:vertical}
.ff .pf{color:var(--akz)}                       /* Sternchen bei Pflichtfeldern */
.ff .fehler{font-size:12px;color:var(--rot);display:none}
.ff.fehlt input,.ff.fehlt textarea{border-color:var(--rot);background:#fff7f5}
.ff.fehlt .fehler{display:block}
.feldnotiz{font-size:12.5px;color:var(--tx3);margin:2px 0 0}
/* Koederfeld: unsichtbar, aber nicht display:none - manche Automaten erkennen
   das und lassen solche Felder dann aus. */
.koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zahlweise{border:1px solid var(--li2);margin-bottom:10px}
.zahlweise label{display:flex;align-items:center;gap:11px;padding:14px;cursor:pointer;font-weight:600;font-size:14px;color:#2f3033}
.zahlweise input{accent-color:var(--akz);width:16px;height:16px}
.zahlweise .erklaerung{display:none;padding:0 14px 14px 41px;font-size:13px;color:var(--tx2)}
.zahlweise.an{border-color:var(--akz)}
.zahlweise.an .erklaerung{display:block}
.bestellbox{border:1px solid var(--li);padding:26px;background:var(--bg2);position:sticky;top:80px}
.bestellbox h3{font-size:17px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--li2)}
.bz{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--li);font-size:13px}
.bz img{width:48px;height:48px;object-fit:contain;background:#fff;border:1px solid var(--li);flex:none}
.bz .n{flex:1;min-width:0}
.bestellen{width:100%;padding:16px;background:var(--akz);color:#fff;border:0;border-radius:var(--r);font-size:16px;font-weight:700;margin-top:18px}
.bestellen:hover{background:var(--akz-d)}
.kassenotiz{margin-top:14px;font-size:12.5px;color:var(--tx2);text-align:center;line-height:1.6}

/* ============ Footer ============ */
.site-footer{background:var(--kopf);color:#a9abb3;margin-top:20px;font-size:13.5px}
.footer-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:38px;padding:50px 0 40px}
.fw h4{color:#fff;font-size:14px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.8px}
.fw ul{list-style:none;margin:0;padding:0}
.fw li{padding:5px 0}
.fw a,.fw span{color:#a9abb3;cursor:default}
.fw p{margin:0 0 12px;line-height:1.7}
.copy{border-top:1px solid #3a3b42;padding:20px 0;font-size:12.5px;color:#83858d}
.copy .mitte{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ============ Meldung / Dialog ============ */
.toast{
  position:fixed;right:24px;bottom:24px;background:var(--kopf);color:#fff;
  padding:14px 20px;border-radius:var(--r);font-size:13.5px;font-weight:600;z-index:200;
  opacity:0;transform:translateY(20px);transition:all .25s;box-shadow:0 5px 22px rgba(0,0,0,.24);
  border-left:4px solid var(--gruen);max-width:340px;
}
.toast.an{opacity:1;transform:none}
.dlg-huelle{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.dlg-huelle.an{display:flex}
.dlg{background:#fff;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.35);border-top:5px solid var(--akz)}
.dlg .inn{padding:36px 34px;text-align:center}
.dlg .kr{width:62px;height:62px;border-radius:50%;background:var(--akz-l);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:28px}
.dlg h2{font-size:21px;margin-bottom:13px}
.dlg p{margin:0 0 11px;color:var(--tx2);font-size:14px;line-height:1.7}
.dlg button{margin-top:20px;padding:13px 34px;background:var(--akz);color:#fff;border:0;border-radius:var(--r);font-weight:700;font-size:14.5px}

.laden{padding:80px 20px;text-align:center;color:var(--tx2)}

@media(max-width:1150px){
  .pd{grid-template-columns:1fr;gap:30px}
  .kasse-raster{grid-template-columns:1fr}
  .bestellbox{position:static}
}

/* ---------- Tablet ---------- */
@media(max-width:900px){
  .mitte{padding:0 16px}
  /* In der Spaltenanordnung muessen die Kinder die volle Breite nehmen -
     mit dem geerbten align-items:flex-start schrumpfen sie auf ihren Inhalt
     und das Produktraster ragt aus dem Fenster. */
  .huelle{flex-direction:column;gap:24px;padding:22px 0 44px;align-items:stretch}
  .seitenleiste{width:100%}
  .inhalt{width:100%}
  .site-header .mitte{flex-wrap:wrap;gap:14px}
  .marke{flex:0 0 auto}
  .kopf-aktionen{flex:0 0 auto;margin-left:auto;gap:18px}
  .suchbox{order:3;flex:1 1 100%}
  .formreihe{grid-template-columns:1fr}
  .produkte{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
  .produkt{min-width:0}
}

/* ---------- Handy ---------- */
@media(max-width:640px){
  body{font-size:14.5px}
  .mitte{padding:0 13px}

  /* Kopfzeile: Logo und Symbole in einer Reihe, Suche darunter */
  .site-header{padding:13px 0}
  .marke img{height:44px}
  .kopf-aktion .txt{display:none}          /* nur die Symbole, spart Platz */
  .kopf-aktionen{gap:20px}
  .suchbox input{padding:11px 12px;font-size:16px}  /* 16px verhindert Zoom beim Tippen */
  .suchbox button{padding:0 15px}

  /* Menü waagerecht scrollbar statt umbrechend */
  .hauptmenu .mitte{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  }
  .hauptmenu .mitte::-webkit-scrollbar{display:none}
  .hauptmenu button{padding:12px 13px;font-size:13.5px;white-space:nowrap}

  .brotkrumen{padding:10px 0;font-size:12.5px}
  .brotkrumen .mitte{white-space:nowrap;overflow-x:auto;scrollbar-width:none}
  .brotkrumen .mitte::-webkit-scrollbar{display:none}

  /* Banner */
  /* Auf dem Handy waere das Banner in voller Breite nur ~77 px hoch - die
     eingebrannte Schrift waere unlesbar. Der Ausschnitt zeigt deshalb das Rad,
     der Text liegt als echte Schrift darueber. */
  .folie{aspect-ratio:auto;height:250px}
  .folie img{object-position:14% center}
  .folie-mobil{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
    position:absolute;inset:0;padding:16px 18px;text-align:left;line-height:1.25;
    background:linear-gradient(to top,rgba(8,8,10,.93) 0%,rgba(8,8,10,.82) 32%,rgba(8,8,10,.30) 62%,transparent 88%);
  }
  .fm-oben{
    font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
    color:#d9c9a8;font-weight:700;margin-bottom:5px;
  }
  .fm-titel{
    font-size:24px;font-weight:800;color:#fff;text-transform:uppercase;
    letter-spacing:-.6px;line-height:1.08;margin-bottom:6px;
  }
  .fm-marke{font-size:12.5px;color:#e6d9be;margin-bottom:11px;font-weight:600}
  .fm-knopf{
    display:inline-block;background:#fff;color:#1c1d22;
    padding:9px 18px;border-radius:2px;font-size:13px;font-weight:700;
  }
  .pfeil{width:34px;height:50px;font-size:20px}
  .punkte{bottom:12px}
  .punkte button{width:24px}

  /* Kategoriereihe: waagerecht wischen */
  .kat-band{padding:20px 0 16px}
  .kat-reihe{
    display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x proximity;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .kat-reihe::-webkit-scrollbar{display:none}
  .kat-kachel{min-width:118px;scroll-snap-align:start}
  .kb-name{font-size:14px}

  .vorteile .mitte{gap:14px;padding:16px 13px;flex-direction:column;align-items:flex-start}
  .vorteil span{font-size:13.5px;white-space:normal}

  .markenband .mitte{gap:20px;padding:18px 13px}
  .markenband button{font-size:15px}
  .markenband .mlogo{height:24px;max-width:96px}

  /* Karussell */
  .karussell{margin-top:34px}
  .karussell h2{font-size:25px;margin-bottom:18px}
  .k-pfeil{width:32px;height:32px;font-size:17px}
  .k-pfeil.l{left:-6px}
  .k-pfeil.r{right:-6px}
  .tk{min-width:172px;max-width:172px;padding:11px 11px 13px}
  .tk-titel{font-size:12.5px;min-height:35px}
  .tk-preis .jetzt{font-size:15px}

  /* Produktraster: zwei Spalten. minmax(0,...) ist noetig, damit die Spalten
     unter die Inhaltsbreite schrumpfen duerfen - sonst sprengt der
     Ausfuehrungs-Hinweis mit white-space:nowrap das Raster. */
  .produkte{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px}
  .produkt{padding:12px 10px 14px}
  .p-titel{font-size:13px;min-height:36px}
  .p-attr{font-size:11.5px;min-height:32px;-webkit-line-clamp:2}
  .p-preis{font-size:16.5px}
  .p-knopf{padding:10px;font-size:12.5px}
  .angebot{min-width:42px;height:42px;font-size:11px}

  .shop-kopf h1{font-size:22px}
  .ordering{margin-left:0;width:100%}
  .ordering select{width:100%}

  /* Filter zusammenklappbar, sonst schiebt er die Ware weit nach unten */
  .filter-schalter{
    display:block;width:100%;padding:12px;background:var(--kopf);color:#fff;
    border:0;border-radius:var(--r);font-weight:700;font-size:14px;margin-bottom:14px;
  }
  .seitenleiste{display:none}
  .seitenleiste.offen{display:block}

  /* Produktseite */
  .pd{gap:22px}
  .pd-info h1{font-size:22px}
  .pd-preis{font-size:26px}
  .pd-mini button{width:58px;height:58px}
  .fk{width:44px;height:44px}
  .tab-leiste{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tab-leiste::-webkit-scrollbar{display:none}
  .tab-leiste button{padding:11px 15px;font-size:13px;white-space:nowrap}
  .tab-inhalt{padding:18px 14px}
  table.daten th,table.daten td{padding:9px 10px;font-size:13px}
  table.daten th{width:44%}

  /* Warenkorb über die volle Breite */
  .korb{width:100%;max-width:100%}
  .block{padding:18px 15px}
  .bestellbox{padding:18px 15px}

  .footer-widgets{grid-template-columns:1fr 1fr;gap:24px;padding:32px 0 26px}
  .copy .mitte{flex-direction:column;gap:6px}
  .toast{left:13px;right:13px;bottom:13px;max-width:none}
}

/* Erst unterhalb gaengiger Handybreiten auf eine Spalte gehen */
@media(max-width:339px){
  .produkte{grid-template-columns:1fr}
  .footer-widgets{grid-template-columns:1fr}
}

/* Auf großen Schirmen bleibt der Filter immer sichtbar */
@media(min-width:641px){
  .filter-schalter{display:none}
  .seitenleiste{display:block}
}

/* ============ Rechtstexte ============
   Inhalt kommt fertig ausgezeichnet aus rechtliches.js, hier steht nur, wie
   er aussieht. Schmale Spalte, damit die langen Absätze lesbar bleiben.   */
.rechtstext{max-width:860px}
.rechtstext h1{font-size:28px;letter-spacing:-.6px;margin-bottom:6px}
.rechtstext h2{font-size:19px;margin:34px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--li)}
.rechtstext h3{font-size:15.5px;margin:24px 0 8px}
.rechtstext h4{font-size:14.5px;margin:20px 0 6px}
.rechtstext p{margin:0 0 13px}
.rechtstext ul{margin:0 0 13px;padding-left:22px}
/* Jeder nummerierte Punkt der AGB ist eine eigene Liste - deshalb unten eng */
.rechtstext ol{margin:0 0 6px;padding-left:26px}
.rechtstext li{margin-bottom:6px}
.rechtstext hr{border:0;border-top:1px solid var(--li);margin:24px 0}
.rechtstext strong{color:#2f3033;font-weight:600}
.rechtstext a{text-decoration:underline}
.rechtsstand{color:var(--tx3);font-size:13px;margin:0 0 26px}
.zurueck{background:none;border:0;color:var(--akz);padding:0;margin-bottom:18px;font-size:14px}
.zurueck:hover{color:var(--akz-d)}

/* ============ Danke-Seite ============
   Zwei gleich breite Karten nebeneinander, darunter die Zahlungsmeldung und
   die Bestellübersicht über die volle Breite.                              */
.danke-kopf{text-align:center;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--li)}
.danke-kopf h1{font-size:29px;letter-spacing:-.6px;margin-bottom:10px}
.danke-nr{font-size:15px;color:var(--tx2)}
.danke-nr b{color:#2f3033;letter-spacing:.3px}

.karte{border:1px solid var(--li);border-radius:6px;padding:26px 28px;background:var(--bg)}
.karte h3{font-size:17px;margin-bottom:16px}
.danke-raster{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.danke-text p{margin:0 0 13px;line-height:1.75}
.danke-text p.leise{color:var(--tx3);font-size:14px}
.danke-anrede{margin:0 0 18px;font-size:15px}

/* Kontodaten als gestreifte Tabelle: Bezeichnung links, Wert rechts */
.zahltabelle{width:100%;border-collapse:collapse;margin-top:4px}
.zahltabelle tr:nth-child(odd){background:var(--bg2)}
.zahltabelle td{padding:11px 14px;font-size:14px;vertical-align:top}
.zahltabelle td.n{color:var(--tx2);white-space:nowrap;width:44%}
.zahltabelle td.w{font-weight:700;color:#2f3033;word-break:break-word}
/* IBAN, BIC und Verwendungszweck: keine Schreibmaschinenschrift, sondern die
   Hausschrift mit gleich breiten Ziffern. Bleibt beim Abtippen gut lesbar,
   wirkt aber nicht klobig. */
.zahltabelle td.w.mono{font-variant-numeric:tabular-nums;letter-spacing:.7px;font-weight:700;font-size:14.5px}

.zahlhinweis{background:var(--akz-l);border:1px solid #f3c9d1;border-left:3px solid var(--akz);
  padding:14px 16px;margin-top:18px;font-size:13.5px;line-height:1.7;color:var(--tx)}
.zahlhinweis b{color:#2f3033}
.zahllieferung{margin-top:12px;font-size:13px;color:var(--tx3)}

.bezahlt-block{margin-top:26px}
.bezahlt-block p{margin:0 0 18px;font-size:14.5px;color:var(--tx2);line-height:1.7}
.bezahlt-knopf{width:100%;padding:15px;background:var(--gruen);color:#fff;border:0;border-radius:var(--r);
  font-size:15.5px;font-weight:700}
.bezahlt-knopf:hover{background:#0b6b3e}
.bezahlt-knopf:disabled{background:var(--li2);cursor:default}

.danke-uebersicht{margin-top:26px;border:1px solid var(--li);border-radius:6px;padding:26px 28px}
.danke-uebersicht h3{font-size:17px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--li)}
.du-spalten{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:22px;padding-top:20px;border-top:1px solid var(--li)}
.du-spalten h4{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx3);margin-bottom:8px}
.du-spalten div{font-size:14px;line-height:1.7}

@media(max-width:900px){
  .danke-raster{grid-template-columns:1fr;gap:28px}
  .du-spalten{grid-template-columns:1fr;gap:20px}
}

/* ============ Kasse: Schritte und Zahlungsart ============ */
.block h3.schritt{display:flex;align-items:center;gap:11px}
.schritt .nr{width:26px;height:26px;border-radius:50%;background:var(--akz);color:#fff;
  font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}

/* Die gewaehlte Zahlungsart. Nur eine zur Auswahl, deshalb dauerhaft aktiv
   dargestellt statt als leere Auswahlliste. */
.zahlwahl{border:2px solid var(--akz);background:var(--akz-l);border-radius:var(--r);
  padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.zahlwahl .punkt{width:18px;height:18px;border-radius:50%;border:2px solid var(--akz);
  flex:0 0 auto;margin-top:2px;display:flex;align-items:center;justify-content:center}
.zahlwahl .punkt::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--akz)}
.zahlwahl .txt{flex:1;min-width:0}
.zahlwahl .titel{font-weight:700;color:#2f3033;font-size:15px}
.zahlwahl .info{font-size:13.5px;color:var(--tx2);margin-top:6px;line-height:1.65}
.zahlwahl .ikon{flex:0 0 auto;color:var(--akz);opacity:.85}

.zahltipp{margin-top:14px;background:var(--bg2);border:1px solid var(--li);
  border-left:3px solid var(--akz);padding:14px 16px;font-size:13.5px;line-height:1.65;color:var(--tx2)}
.zahltipp b{color:#2f3033}
.zahlnotiz{font-size:12.5px;color:var(--tx3);margin:12px 0 0}
.zahlnotiz a{text-decoration:underline;cursor:pointer}

@media(max-width:640px){
  .zahlwahl{padding:14px}
  .zahlwahl .ikon{display:none}
}

/* Zustimmung in der Kasse */
.agbfeld{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--tx);cursor:pointer}
.agbfeld input{accent-color:var(--akz);width:16px;height:16px;margin:3px 0 0;flex:0 0 auto}
.agbfeld a{cursor:pointer;text-decoration:underline}
.bestellen:disabled{background:var(--li2);cursor:not-allowed}