/* Blumenstadl Shop — aus design/shop-entwurf/shop.css, auf body.bs-shop
   gescoped. Ungescoped faerbt das Kit Kopf 197 und Fuss 199 mit.
   Nie hier editieren, sondern im Entwurf und neu scopen. */
/* =========================================================================
   Blumenstadl — Shop-System, Entwurf (jahreszeitlich neutral)
   Eine Datei für Shop-Übersicht UND Kategorieseite. Tokens aus
   design/tokens.css + der Advent-Fassung, auf zwei Schriften reduziert.
   Jede Textfarbe ist gegen ihre echte Fläche gerechnet (WCAG AA).
   ========================================================================= */
body.bs-shop{
  /* Flächen */
  --g950:#102209; --g900:#1B3712; --g800:#284F1C;
  --papier:#F3EADC; --creme:#F9F3EB; --weiss:#fff;
  /* Schrift */
  --text:#2A2622;            /* 12,6:1 auf Papier */
  --text-leise:#55504A;      /*  7,3:1 auf Papier */
  --hell:rgba(249,243,235,.86);
  --gold:#C9A86A;            /*  7,4:1 auf g950 — nur auf dunkel */
  --gold-700:#7A5C2F;        /*  5,2:1 auf Papier — nur auf hell */
  --linie:rgba(40,79,28,.16);
  --linie-dunkel:rgba(249,243,235,.18);
  /* Raster */
  --serif:"Young Serif",Georgia,serif;
  --sans:"Outfit",system-ui,-apple-system,sans-serif;
  --rand:clamp(20px,5vw,72px);
  --breit:1440px;
  --breit-regal:1760px;   /* Produktraster darf breiter laufen als Lesetext */
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:4px;
  --kopfhoehe:75px;   /* wird beim Laden gemessen und überschrieben */
}
body.bs-shop *{box-sizing:border-box;margin:0}
body.bs-shop{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopfhoehe) + var(--schienenhoehe,70px) + 16px)}
body.bs-shop{background:var(--papier);color:var(--text);font:300 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.bs-shop img{display:block;max-width:100%}
body.bs-shop a{color:inherit}
body.bs-shop :focus-visible{outline:2px solid var(--gold-700);outline-offset:3px;border-radius:2px}
body.bs-shop .dunkel :focus-visible{outline-color:var(--gold)}

body.bs-shop h1, body.bs-shop h2, body.bs-shop h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.08}
body.bs-shop h1{font-size:clamp(34px,4.4vw,58px)}
body.bs-shop h2{font-size:clamp(27px,3vw,42px)}
body.bs-shop h3{font-size:clamp(18px,1.5vw,21px);line-height:1.25}
body.bs-shop .lead{font-size:clamp(17px,1.25vw,19.5px);color:var(--text-leise);max-width:46ch}
body.bs-shop .dunkel .lead{color:var(--hell)}
body.bs-shop .eyebrow{font:500 12.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-700);display:flex;align-items:center;gap:13px}
body.bs-shop .eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.75;flex:none}
body.bs-shop .dunkel .eyebrow{color:var(--gold)}
body.bs-shop .klein{font-size:13.5px;line-height:1.5;color:var(--text-leise)}
body.bs-shop .dunkel .klein{color:var(--hell)}

/* ---------- Flächen: Muster + Lichtfall, nie flacher Vollton ------------- */
body.bs-shop .flaeche{position:relative;isolation:isolate}
body.bs-shop .flaeche>*{position:relative;z-index:2}
body.bs-shop .flaeche::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(web/muster-gruen.webp) 0 0/var(--kachel,420px) auto repeat;opacity:var(--muster,.1)}
body.bs-shop .flaeche::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(72% 58% at 14% -10%,rgba(255,255,255,.75),transparent 72%),
             radial-gradient(56% 48% at 100% 108%,rgba(122,92,47,.10),transparent 72%)}
body.bs-shop .dunkel{background:var(--g950);color:var(--creme)}
body.bs-shop .dunkel::before{background-image:url(web/muster-gold.webp);opacity:.075}
body.bs-shop .dunkel::after{background:radial-gradient(58% 48% at 16% 12%,rgba(201,168,106,.14),transparent 70%),
             radial-gradient(52% 56% at 92% 104%,rgba(0,0,0,.45),transparent 72%)}
body.bs-shop .innen{max-width:var(--breit);margin:0 auto;padding:0 var(--rand)}
/* Auf breiten Schirmen standen bisher 37 % leere Fläche am Rand (gemessen bei
   2276 px). Regal und Filterschiene laufen deshalb weiter als der Lesetext. */
body.bs-shop .schiene .innen, body.bs-shop .regal .innen, body.bs-shop .shopkopf .innen{max-width:var(--breit-regal)}

/* ---------- Knöpfe ------------------------------------------------------- */
body.bs-shop .btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:50px;padding:0 26px;
  border-radius:999px;border:1px solid transparent;font:500 13.5px/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;background:none;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
body.bs-shop .btn-voll{background:var(--g800);color:var(--creme)}
body.bs-shop .btn-voll:hover{background:var(--g900)}
body.bs-shop .btn-linie{border-color:rgba(40,79,28,.4);color:var(--g800)}
body.bs-shop .btn-linie:hover{background:rgba(40,79,28,.07);border-color:var(--g800)}
body.bs-shop .dunkel .btn-voll{background:var(--creme);color:var(--g950)}
body.bs-shop .dunkel .btn-voll:hover{background:var(--gold)}
body.bs-shop .dunkel .btn-linie{border-color:var(--linie-dunkel);color:var(--creme)}
body.bs-shop .dunkel .btn-linie:hover{background:rgba(249,243,235,.09);border-color:var(--creme)}
body.bs-shop .pfeil{transition:transform .3s var(--ease)}
body.bs-shop a:hover .pfeil, body.bs-shop button:hover .pfeil{transform:translateX(4px)}

/* ---------- Kopf (Bestand, hier nur angedeutet) -------------------------- */
body.bs-shop .zeitleiste{background:var(--g900);color:var(--hell);font-size:13px}
body.bs-shop .zeitleiste .innen{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:6px var(--rand);flex-wrap:wrap}
body.bs-shop .zeitleiste a{display:inline-flex;align-items:center;min-height:44px}
body.bs-shop .zeitleiste b{color:var(--creme);font-weight:500}
/* Kopf klebt; die Filterschiene hängt an der GEMESSENEN Kopfhöhe (--kopfhoehe).
   Messen muss nach dem Ende der Höhen-Transition passieren, sonst klafft
   während der Animation eine Lücke, durch die die Seite durchläuft. */
body.bs-shop .kopf{position:sticky;top:0;z-index:40;background:rgba(249,243,235,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
body.bs-shop .kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px;
  transition:min-height .3s var(--ease)}
/* Kopf und Filterschiene zusammen fraßen beim Scrollen 200 px von 900 —
   fast ein Viertel des Fensters. Im gescrollten Zustand wird beides flacher. */
body.bs-shop[data-gescrollt] .kopf .innen{min-height:58px}
body.bs-shop[data-gescrollt] .marke span{opacity:0;height:0;margin:0;overflow:hidden;transition:opacity .2s}
body.bs-shop .marke{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;
  font:400 24px/1 var(--serif);text-decoration:none;color:var(--g900)}
body.bs-shop .marke span{display:block;font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-700);margin-top:7px;transition:opacity .2s var(--ease)}
body.bs-shop .kopf nav{display:flex;gap:26px;font:400 13.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
body.bs-shop .kopf nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;color:var(--text)}
body.bs-shop .kopf nav a[aria-current]{box-shadow:inset 0 -1px 0 var(--gold-700)}
body.bs-shop .kopf-rechts{display:flex;align-items:center;gap:14px}
body.bs-shop .korb{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border:1px solid var(--linie);border-radius:999px;font-size:13.5px;text-decoration:none}
@media (max-width:1000px){body.bs-shop .kopf nav{display:none}}

/* ---------- 1 Shopkopf (Explore, kein Hero) ----------------------------- */
body.bs-shop .shopkopf{padding:clamp(44px,5.5vw,78px) 0 clamp(30px,3.4vw,46px);--kachel:480px}
body.bs-shop .shopkopf .innen{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:clamp(28px,5vw,80px);align-items:end}
body.bs-shop .shopkopf h1{margin:18px 0 18px;max-width:22ch}
body.bs-shop .fakten{border:1px solid var(--linie);border-radius:var(--r);background:rgba(255,255,255,.62);padding:clamp(20px,2vw,28px)}
body.bs-shop .fakten dl{display:grid;gap:14px;margin:0}
body.bs-shop .fakten div{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
body.bs-shop .fakten dt{font:500 13.5px/1.45 var(--sans);letter-spacing:.02em;color:var(--g800);grid-column:2}
body.bs-shop .fakten dd{margin:0;font-size:14px;line-height:1.5;color:var(--text-leise);grid-column:2}
body.bs-shop .fakten i{grid-column:1;grid-row:1 / span 2;width:22px;height:22px;color:var(--gold-700)}
body.bs-shop .fakten svg{width:22px;height:22px;display:block}
@media (max-width:860px){body.bs-shop .shopkopf .innen{grid-template-columns:1fr}}

/* ---------- 1b Kategoriekopf (nur Kategorieseite) ----------------------- */
/* Deutlich flacher als der Shopkopf: wer hier landet, hat die Entscheidung
   „was für eine Art Sache" schon getroffen und will zu den Produkten. */
body.bs-shop .katkopf{padding:clamp(22px,2.4vw,34px) 0 clamp(22px,2.4vw,32px);--kachel:480px}
body.bs-shop .katkopf .innen{max-width:var(--breit-regal)}
body.bs-shop .katkopf-text{max-width:62ch}
body.bs-shop .katkopf h1{margin:14px 0 12px;font-size:clamp(30px,3.6vw,50px)}
body.bs-shop .katkopf .lead{max-width:52ch}
/* Ein Text, der noch nicht in der Datenbank steht, ist im Entwurf als solcher
   erkennbar — sonst geht er in der Reviewrunde als Bestand durch. */
body.bs-shop .katkopf .lead[data-entwurf]{border-left:2px solid rgba(122,92,47,.4);padding-left:14px}
body.bs-shop .katkopf .lead[data-entwurf]::after{content:"Textentwurf";display:inline-block;margin-left:10px;
  font:500 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-700);
  vertical-align:middle;border:1px solid rgba(122,92,47,.4);border-radius:999px;padding:5px 9px}
body.bs-shop .katzahlen{margin-top:18px;font-size:14.5px;color:var(--text-leise);display:flex;align-items:baseline;
  gap:9px;flex-wrap:wrap}
body.bs-shop .katzahlen strong{font:400 19px/1 var(--serif);color:var(--text);font-variant-numeric:tabular-nums}
body.bs-shop .katzahlen [data-spanne]{font-variant-numeric:tabular-nums}
body.bs-shop .katzahlen .punkt{color:var(--gold-700)}
body.bs-shop .katzahlen a{position:relative;color:inherit;text-underline-offset:2px}
/* Tastfeld auf 44 px dehnen, ohne die Zeile zu verschieben. */
body.bs-shop .katzahlen a::after{content:"";position:absolute;left:-6px;right:-6px;top:-13px;bottom:-13px}

body.bs-shop .krume{font-size:13px;color:var(--text-leise)}
body.bs-shop .krume ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body.bs-shop .krume li+li::before{content:"/";margin-right:8px;color:var(--gold-700);opacity:.7}
body.bs-shop .krume a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:3px}
body.bs-shop .krume a:hover{color:var(--g800)}
body.bs-shop .krume [aria-current]{color:var(--text)}

/* ---------- 2b Geschwisterkategorien ------------------------------------ */
/* Eine Kategorieseite ohne Ausgang ist eine Sackgasse. Die Reihe steht VOR
   dem Raster, nicht darunter: wer in der falschen Kategorie gelandet ist,
   soll das nicht erst nach zehn Kacheln merken. */
body.bs-shop .geschwister{padding:0 0 clamp(16px,1.8vw,24px)}
body.bs-shop .geschwister .innen{max-width:var(--breit-regal);display:flex;align-items:center;gap:14px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
body.bs-shop .geschwister .innen::-webkit-scrollbar{display:none}
body.bs-shop .gtitel{flex:none;font:500 11.5px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--text-leise)}
body.bs-shop .geschwister ul{flex:1;display:flex;align-items:baseline;list-style:none;padding:0;margin:0}
body.bs-shop .geschwister li{flex:none}
/* ⛔ Bewusst KEINE Pillen. Die Filterschiene direkt darunter benutzt Pillen;
   zwei optisch gleiche Reihen übereinander, von denen die eine die Seite
   wechselt und die andere nur filtert, sind nicht unterscheidbar.
   Navigation = Textlinks mit Unterstrich, Filter = Pillen. */
body.bs-shop .geschwister a{display:inline-flex;align-items:baseline;gap:7px;min-height:44px;
  font-size:15.5px;text-decoration:none;color:var(--text);
  box-shadow:inset 0 -1px 0 var(--linie);transition:box-shadow .25s var(--ease),color .25s var(--ease)}
body.bs-shop .geschwister a:hover{color:var(--g800);box-shadow:inset 0 -1px 0 var(--g800)}
body.bs-shop .geschwister li+li{margin-left:clamp(14px,1.4vw,24px)}
body.bs-shop .geschwister a b{font-weight:400;font-size:12px;color:var(--text-leise);font-variant-numeric:tabular-nums}
body.bs-shop .geschwister .achswechsel{margin-left:auto;padding-left:clamp(16px,2vw,32px)}
body.bs-shop .geschwister .achswechsel a{color:var(--gold-700);box-shadow:none;
  font:500 12.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;align-items:center}
body.bs-shop .geschwister .achswechsel a:hover{color:var(--g800);box-shadow:none}
@media (max-width:900px){
  body.bs-shop .geschwister{padding-bottom:clamp(14px,2vw,20px)}
  body.bs-shop .geschwister .innen{flex-direction:column;align-items:stretch;overflow:visible;gap:10px}
  /* ⛔ Kein margin-left für den Abstand: beim Umbruch wandert er in die neue
     Zeile und rückt deren erstes Element ein (gemessen 390 px, „Trockenblumen"
     stand 18 px eingezogen). column-gap wirkt nur zwischen Nachbarn in
     derselben Zeile. */
  body.bs-shop .geschwister ul{flex-wrap:wrap;column-gap:20px;row-gap:2px}
  body.bs-shop .geschwister li+li{margin-left:0}
  body.bs-shop .geschwister .achswechsel{margin-left:0;padding-left:0;width:100%;margin-top:6px}
}

/* ---------- 5 Lieferfakten als Reihe (Kategorieseite) ------------------- */
/* Dieselben drei Fakten wie im Shopkopf, aber unten und waagrecht: hier sind
   sie Nachsatz, dort Einordnung. */
body.bs-shop .liefern{padding:clamp(48px,5.5vw,84px) 0;background:var(--creme);
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
body.bs-shop .liefern::after{background:radial-gradient(62% 52% at 86% -6%,rgba(255,255,255,.85),transparent 70%),
             radial-gradient(54% 46% at 4% 106%,rgba(122,92,47,.09),transparent 72%)}
body.bs-shop .liefern .innen{max-width:var(--breit-regal)}
body.bs-shop .liefern h2{font-size:clamp(23px,2vw,30px);margin-bottom:clamp(22px,2.4vw,34px)}
body.bs-shop .fakten-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,46px);margin:0}
body.bs-shop .fakten-reihe div{display:grid;grid-template-columns:22px 1fr;gap:12px 12px;align-items:start;
  border-top:1px solid var(--linie);padding-top:16px}
body.bs-shop .fakten-reihe i{grid-column:1;grid-row:1 / span 2;color:var(--gold-700)}
body.bs-shop .fakten-reihe svg{width:22px;height:22px;display:block}
body.bs-shop .fakten-reihe dt{grid-column:2;font:500 14.5px/1.45 var(--sans);color:var(--g800)}
body.bs-shop .fakten-reihe dd{grid-column:2;margin:0;font-size:14px;line-height:1.5;color:var(--text-leise)}
body.bs-shop .zurueck{margin-top:clamp(26px,3vw,42px)}
@media (max-width:860px){body.bs-shop .fakten-reihe{grid-template-columns:1fr}}

/* ---------- 2 Filterschiene --------------------------------------------- */
body.bs-shop .schiene{position:sticky;top:var(--kopfhoehe);z-index:30;background:rgba(243,234,220,.95);backdrop-filter:blur(8px);
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
body.bs-shop .schiene .innen{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);padding:11px var(--rand);transition:padding .3s var(--ease)}
@media (min-width:901px){
  body.bs-shop[data-gescrollt] .schiene .innen{padding:7px var(--rand)}
  body.bs-shop[data-gescrollt] .schiene .gruppe>span{opacity:0;width:0;overflow:hidden;white-space:nowrap}
  body.bs-shop[data-gescrollt] .schiene .scroller{row-gap:6px}
  body.bs-shop[data-gescrollt] .pille{min-height:38px;padding:0 13px}
  body.bs-shop[data-gescrollt] .sortier select, body.bs-shop[data-gescrollt] .zuruecksetzen{min-height:38px}
}
body.bs-shop .schiene .felder{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);flex:1;min-width:0}
body.bs-shop .schiene .scroller{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0}
body.bs-shop .schiene .scroller::-webkit-scrollbar{display:none}
/* Am Desktop wird umgebrochen statt gewischt: eine angeschnittene Pille sieht
   aus wie ein Fehler, und seitwärts wischen geht mit der Maus schlecht.
   Die beiden Filtergruppen stehen dann als zwei Zeilen mit ausgerichteter
   Beschriftungsspalte — der senkrechte Trenner wäre dort sinnlos. */
@media (min-width:901px){
  body.bs-shop .schiene .scroller{display:grid;grid-template-columns:auto 1fr;align-items:start;row-gap:9px;column-gap:14px;overflow:visible}
  body.bs-shop .schiene .gruppe{display:contents}
  body.bs-shop .schiene .gruppe>span{align-self:center;padding-top:0}
  body.bs-shop .schiene .gruppe>:not(span){grid-column:2}
  body.bs-shop .trenner{display:none}
  body.bs-shop .schiene .rechts{align-self:center}
}
/* Pillen einer Gruppe in eine eigene Flex-Reihe */
@media (min-width:901px){
  body.bs-shop .schiene .gruppe{display:contents}
  body.bs-shop .schiene .pillen{display:flex;flex-wrap:wrap;gap:9px;grid-column:2}
}
body.bs-shop .trenner{flex:none;width:1px;align-self:stretch;min-height:28px;background:var(--linie);margin:0 2px}
body.bs-shop .filterknopf{display:none}
body.bs-shop .gruppe{display:flex;align-items:center;gap:9px;flex:none}
body.bs-shop .pillen{display:flex;align-items:center;gap:9px}
body.bs-shop .gruppe>span{font:500 11.5px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--text-leise);margin-right:3px}
body.bs-shop .pille{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--linie);background:rgba(255,255,255,.6);font:400 14px/1 var(--sans);color:var(--text);
  cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
body.bs-shop .pille b{font-weight:400;font-size:12px;color:var(--text-leise);font-variant-numeric:tabular-nums}
body.bs-shop .pille:hover{border-color:rgba(40,79,28,.4)}
body.bs-shop .pille[aria-pressed="true"]{background:var(--g800);border-color:var(--g800);color:var(--creme)}
body.bs-shop .pille[aria-pressed="true"] b{color:rgba(249,243,235,.7)}
body.bs-shop .pille[disabled]{opacity:.38;cursor:not-allowed}
body.bs-shop .schiene .rechts{flex:none;display:flex;align-items:center;gap:10px}
@media (max-width:1180px){body.bs-shop .schiene .rechts .sortier span{display:none}}

/* Mobil: eine Zeile bleibt stehen, die Filter klappen darunter auf.
   Grund: zwei Auswahlfelder plus neun Pillen passen bei 390 px in keine
   Zeile — der Wischbereich schrumpfte auf unlesbare Reste. */
@media (max-width:900px){
  /* Aufgeklappt wird die Schiene hoch — dann darf sie nicht kleben,
     sonst steht das halbe Fenster voll Filter. */
  body.bs-shop .schiene:has(.felder[data-offen]){position:static}
  body.bs-shop .schiene .innen{flex-direction:column;align-items:stretch;gap:0;padding:10px var(--rand)}
  body.bs-shop .filterknopf{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    min-height:46px;padding:0 16px;border:1px solid var(--linie);border-radius:999px;background:rgba(255,255,255,.65);
    font:500 14px/1 var(--sans);letter-spacing:.04em;color:var(--text);cursor:pointer}
  body.bs-shop .filterknopf .zahl{font-variant-numeric:tabular-nums;color:var(--gold-700)}
  body.bs-shop .filterknopf .chev{transition:transform .3s var(--ease)}
  body.bs-shop .filterknopf[aria-expanded="true"] .chev{transform:rotate(180deg)}
  body.bs-shop .schiene .felder{display:none;flex-direction:column;align-items:stretch;gap:12px;padding-top:12px}
  body.bs-shop .schiene .felder[data-offen]{display:flex}
  /* Im aufgeklappten Feld ist Platz: alles zeigen statt seitwärts wischen. */
  body.bs-shop .schiene .scroller{flex:none;overflow:visible;flex-direction:column;align-items:stretch;gap:12px}
  body.bs-shop .schiene .gruppe{flex-direction:column;align-items:stretch;gap:6px}
  body.bs-shop .schiene .pillen{flex-wrap:wrap}
  body.bs-shop .schiene .gruppe>span{margin:0}
  body.bs-shop .trenner{display:none}
  body.bs-shop .schiene .rechts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  body.bs-shop .schiene .rechts .sortier{width:100%}
  body.bs-shop .schiene .rechts .sortier{flex-direction:column;align-items:stretch;gap:5px}
  body.bs-shop .schiene .rechts .sortier span{display:block;font:500 11.5px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--text-leise)}
  body.bs-shop .sortier select{width:100%}
  body.bs-shop .zuruecksetzen{grid-column:1/-1;justify-self:start}
}
body.bs-shop .sortier{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-leise)}
body.bs-shop .sortier select{min-height:44px;padding:0 34px 0 13px;border:1px solid var(--linie);border-radius:999px;background:rgba(255,255,255,.6) no-repeat right 14px center;
  font:400 14px/1 var(--sans);color:var(--text);-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2355504A' stroke-width='1.3'/%3E%3C/svg%3E")}
body.bs-shop .zuruecksetzen{min-height:44px;padding:0 14px;border:0;background:none;font:400 13.5px/1 var(--sans);color:var(--gold-700);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:999px}
body.bs-shop .zuruecksetzen[hidden]{display:none}

/* ---------- 3 Raster ---------------------------------------------------- */
body.bs-shop .regal{padding:clamp(28px,3.4vw,46px) 0 clamp(48px,5vw,80px);--kachel:340px;--muster:.115}
body.bs-shop .treffer{font-size:14px;color:var(--text-leise);margin-bottom:clamp(16px,2vw,26px)}
body.bs-shop .treffer strong{font-weight:500;color:var(--text)}
body.bs-shop .raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,30px) clamp(14px,1.6vw,26px);list-style:none;padding:0;margin:0}
@media (min-width:1700px){body.bs-shop .raster{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:1180px){body.bs-shop .raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){body.bs-shop .raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Keine einspaltige Kachelliste. Die Altseite war mobil 16.025 px hoch, weil
   alle Produkte untereinander hingen; einspaltig misst dieser Entwurf 17.866 px,
   zweispaltig rund die Hälfte. Zwei Spalten bleiben auch bei 320 px lesbar. */
@media (max-width:560px){
  body.bs-shop .raster{gap:14px 10px}
  body.bs-shop .karte h3{font-size:16px}
  body.bs-shop .karte .form{font-size:12px}
  body.bs-shop .preis strong{font-size:19px}
  body.bs-shop .karte .zum{font-size:12px;letter-spacing:.07em;padding-top:11px;margin-top:10px}
  body.bs-shop .marker span{font-size:10px;padding:6px 8px}
}

body.bs-shop .karte{position:relative;display:flex;flex-direction:column;height:100%}
/* Die ganze Kachel ist klickbar, ohne den Versandkosten-Link zu verschachteln:
   der Titel-Link legt eine unsichtbare Fläche über die Karte. */
body.bs-shop .karte h3 a{text-decoration:none;color:inherit}
body.bs-shop .karte h3 a::after{content:"";position:absolute;inset:0;z-index:1}
body.bs-shop .karte .pflicht a{position:relative;z-index:2}
/* Der Pflichtlink ist nur 16 px hoch; sein Tastfeld wird auf 44 px gedehnt,
   ohne die Zeile optisch zu verschieben. */
body.bs-shop .karte .pflicht a::after{content:"";position:absolute;left:-6px;right:-6px;top:-14px;bottom:-14px}
body.bs-shop .bild{position:relative;overflow:hidden;border-radius:var(--r);background:#E7DCCB;aspect-ratio:4/5}
body.bs-shop .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),opacity .5s var(--ease)}
body.bs-shop .bild img.zweit{opacity:0}
@media (hover:hover) and (pointer:fine){
  body.bs-shop .karte:hover .bild img.erst{transform:scale(1.045)}
  body.bs-shop .karte:hover .bild img.zweit{opacity:1;transform:scale(1.045)}
}
body.bs-shop .karte:focus-within .bild{outline:2px solid var(--gold-700);outline-offset:3px;border-radius:var(--r)}
body.bs-shop .marker{position:absolute;left:10px;top:10px;z-index:2;display:flex;gap:6px;flex-wrap:wrap}
body.bs-shop .marker span{font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:999px;
  background:rgba(243,234,220,.93);color:var(--g800)}
body.bs-shop .karte-text{padding:14px 2px 0;display:flex;flex-direction:column;gap:6px;flex:1}
body.bs-shop .karte:hover h3{color:var(--g800)}
body.bs-shop .karte h3{color:var(--g900)}
body.bs-shop .karte .form{font-size:13px;letter-spacing:.04em;color:var(--text-leise)}
body.bs-shop .preis{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
body.bs-shop .preis strong{font:400 21px/1 var(--serif);color:var(--text);font-variant-numeric:tabular-nums}
body.bs-shop .preis .ab{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-700)}
body.bs-shop .pflicht{font-size:12.5px;line-height:1.45;color:var(--text-leise)}
body.bs-shop .pflicht a{color:inherit;text-underline-offset:2px}
body.bs-shop .karte .zum{margin-top:12px;display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 13px/1 var(--sans);
  letter-spacing:.09em;text-transform:uppercase;color:var(--g800);border-top:1px solid var(--linie);padding-top:14px}
body.bs-shop .karte:hover .zum{color:var(--g900)}

/* leer */
body.bs-shop .leer{grid-column:1/-1;border:1px dashed rgba(40,79,28,.3);border-radius:var(--r);padding:clamp(34px,4vw,56px);
  text-align:center;background:rgba(255,255,255,.5)}
body.bs-shop .leer h3{color:var(--g900);margin-bottom:10px}
body.bs-shop .leer p{color:var(--text-leise);max-width:44ch;margin:0 auto 22px}

/* ---------- Unterbrechung im Raster ------------------------------------- */
body.bs-shop .band{grid-column:1/-1;margin:clamp(14px,1.8vw,26px) 0;min-height:clamp(300px,24vw,420px);border-radius:var(--r);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
body.bs-shop .band .foto{position:relative;min-height:300px;background:#20300f}
body.bs-shop .band .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.bs-shop .band .inhalt{padding:clamp(28px,3vw,52px);display:flex;flex-direction:column;justify-content:center;gap:16px}
body.bs-shop .band h2{font-size:clamp(24px,2.2vw,34px);max-width:24ch}
body.bs-shop .band ul{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:2px}
body.bs-shop .band li a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;
  padding:6px 0;border-bottom:1px solid var(--linie-dunkel);text-decoration:none;font-size:16px}
body.bs-shop .band li:first-child a{border-top:1px solid var(--linie-dunkel)}
body.bs-shop .band li a:hover{color:var(--gold)}
@media (max-width:820px){body.bs-shop .band{grid-template-columns:1fr}body.bs-shop .band .foto{min-height:220px}}
/* Bleiben nach dem Filtern weniger Kacheln als Spalten übrig, rückt das Band
   in dieselbe Reihe statt darunter — sonst steht eine halbe Bildschirmbreite
   leer und sieht aus wie ein Ladefehler. */
body.bs-shop .band.schmal{grid-template-columns:1fr;min-height:0}
body.bs-shop .band.schmal .foto{min-height:clamp(200px,16vw,280px)}
body.bs-shop .band.schmal h2{font-size:clamp(21px,1.7vw,26px)}

/* ---------- 4 Abholen --------------------------------------------------- */
body.bs-shop .abholen{padding:clamp(52px,6vw,92px) 0;background:var(--creme);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
body.bs-shop .abholen::after{background:radial-gradient(62% 52% at 86% -6%,rgba(255,255,255,.85),transparent 70%),
             radial-gradient(54% 46% at 4% 106%,rgba(122,92,47,.09),transparent 72%)}
body.bs-shop .abholen .innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
body.bs-shop .abholen .foto{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
body.bs-shop .abholen .foto img{width:100%;height:100%;object-fit:cover}
body.bs-shop .abholen h2{margin:18px 0 18px;max-width:20ch}
body.bs-shop .zeiten{margin:26px 0 28px;border-top:1px solid var(--linie);font-variant-numeric:tabular-nums}
body.bs-shop .zeiten div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--linie);font-size:15px}
body.bs-shop .zeiten dt{color:var(--text)}
body.bs-shop .zeiten dd{margin:0;color:var(--text-leise)}
body.bs-shop .knoepfe{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:860px){body.bs-shop .abholen .innen{grid-template-columns:1fr}}

/* ---------- 5 Fuß-CTA --------------------------------------------------- */
body.bs-shop .ruf{padding:clamp(56px,6.5vw,96px) 0}
body.bs-shop .ruf .innen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
body.bs-shop .ruf h2{margin:18px 0 16px;max-width:22ch}
body.bs-shop .ruf .knoepfe{margin-top:26px}
@media (max-width:860px){body.bs-shop .ruf .innen{grid-template-columns:1fr}}

/* ---------- Entwurfsnotiz ----------------------------------------------- */
body.bs-shop .notiz{border-top:1px solid var(--linie-dunkel);background:#0a1506;color:rgba(249,243,235,.7);font-size:13px;line-height:1.6}
body.bs-shop .notiz .innen{padding:22px var(--rand)}
body.bs-shop .notiz b{color:var(--creme);font-weight:500}

@media (prefers-reduced-motion:reduce){
  body.bs-shop{scroll-behavior:auto}
  body.bs-shop *{animation:none!important;transition:none!important}
  body.bs-shop .bild img{transform:none!important}
}