/* ==========================================================================
   SHOP – Raster, Produktkacheln und die Warenkorb-Schublade
   Ergaenzt style.css und produktseite.css, ersetzt sie nicht.

   Der Shop laeuft auf hellem Grund: Man soll Preise und Gebinde vergleichen
   koennen, nicht durch eine Inszenierung scrollen. Der dunkle Auftakt oben
   stellt nur die Verbindung zu den Markenseiten her.
   ========================================================================== */

/* ---------------------------------------------------------------- Kopfknopf
   Der Warenkorb sitzt fest oben rechts und bleibt beim Scrollen stehen.
   z-index 60, damit er ueber der klebenden Kopfzeile (50) liegt. */
.wk-knopf{position:fixed;top:12px;right:16px;z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--kopf);font-weight:600;font-size:.92rem;
  background:var(--accent);color:#fff;border:0;cursor:pointer;
  padding:11px 16px;border-radius:999px;
  box-shadow:0 4px 16px -4px rgba(43,40,32,.35);
  transition:transform .18s ease,background .18s ease}
.wk-knopf:hover{background:var(--accent-dark);transform:translateY(-1px)}
.wk-knopf__zahl{display:inline-grid;place-items:center;min-width:22px;height:22px;
  padding:0 6px;border-radius:999px;background:#fff;color:var(--accent-dark);
  font-size:.8rem;font-weight:700}
.wk-knopf__zahl[hidden]{display:none}
@media(max-width:820px){
  .wk-knopf{top:auto;bottom:16px;right:16px;padding:13px 18px}
  .wk-knopf__wort{display:none}
}

/* ------------------------------------------------------------- Herstellerteil */
.shop-hersteller{padding:clamp(44px,6vw,78px) 0;border-top:1px solid var(--line)}
.shop-hersteller:first-of-type{border-top:0}
.shop-hersteller__kopf{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:18px;margin-bottom:8px}
.shop-hersteller__kopf h2{margin:0;font-size:clamp(1.5rem,3vw,2.1rem)}
.shop-hersteller__ort{font-size:.86rem;color:var(--muted);margin:2px 0 0}
.shop-hersteller__text{max-width:64ch;color:var(--muted);margin:10px 0 0}
.shop-hersteller__fracht{margin-top:14px;font-size:.88rem;color:var(--muted);
  border-left:2px solid var(--accent);padding:4px 0 4px 12px}

/* ------------------------------------------------------------------- Raster
   Vier Kacheln nebeneinander statt drei: Bei 41 Artikeln ist Uebersicht
   wichtiger als Groesse, und die Bilder sind hochkant - die vertragen
   schmalere Spalten gut. 236 px ist der Wert, bei dem im 1080er-Container
   vier Spalten samt Abstaenden aufgehen (4x236 + 3x18 = 998).
   Darunter greift auto-fill von selbst auf drei, zwei und eine Spalte. */
.shop-raster{display:grid;gap:18px;margin-top:30px;
  grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}
@media(max-width:560px){
  .shop-raster{grid-template-columns:1fr;gap:16px}
}

.shop-karte{background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease}
.shop-karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-hover)}

.shop-karte__bild{position:relative;margin:0;background:#f6f5f0;aspect-ratio:4/5;
  display:grid;place-items:center;overflow:hidden}
.shop-karte__bild img{width:100%;height:100%;object-fit:cover}
.shop-karte__hinweis{position:absolute;left:10px;bottom:10px;
  background:rgba(43,40,32,.72);color:#fff;font-size:.72rem;
  padding:4px 9px;border-radius:999px}

/* Platzhalter, solange kein Foto da ist. Sagt genau das - eine erfundene
   Produktabbildung waere schlimmer als gar keine. */
.shop-karte__leer{display:grid;place-items:center;gap:8px;text-align:center;
  color:#b3ac9a;padding:20px}
.shop-karte__leer svg{width:54px;height:54px;opacity:.55}
.shop-karte__leer span{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}

.shop-karte__inhalt{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.shop-karte__inhalt h3{margin:0 0 3px;font-size:1.1rem}
.shop-karte__kurz{margin:0 0 10px;font-size:.88rem;color:var(--muted)}
.shop-karte__text{margin:0 0 14px;font-size:.88rem;color:var(--muted);line-height:1.55}

.shop-feld{margin-bottom:10px}
.shop-feld label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:3px}
.shop-feld select{width:100%;padding:9px 10px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:.92rem}
.shop-feld select:focus{outline:2px solid var(--accent);outline-offset:1px}

/* Preis über dem Knopf statt daneben. Nebeneinander ging aus, solange drei
   Kacheln in der Reihe standen - bei vier wird die Spalte zu schmal, der
   Preis brach mitten im Betrag um und der Knopf wurde gequetscht. */
.shop-karte__fuss{margin-top:auto;padding-top:12px;
  display:flex;flex-direction:column;align-items:stretch;gap:10px}
.shop-preis{font-family:var(--kopf);font-weight:700;font-size:1.25rem;line-height:1.2;
  white-space:nowrap}
.shop-preis small{display:block;font-family:inherit;font-weight:400;
  font-size:.74rem;color:var(--muted);letter-spacing:0}
.shop-preis.anfrage{font-size:1rem;color:var(--muted);font-weight:600}

.shop-dazu{border:0;cursor:pointer;background:var(--accent);color:#fff;
  font-family:var(--kopf);font-weight:600;font-size:.92rem;
  padding:11px 16px;border-radius:10px;white-space:nowrap;width:100%;
  transition:background .18s ease}
.shop-dazu:hover{background:var(--accent-dark)}
.shop-dazu.getan{background:var(--accent-dark)}
.shop-dazu[disabled]{background:#ddd7c7;color:#8b8574;cursor:not-allowed}

.shop-karte.wartet{border-style:dashed}
.shop-karte__bald{font-size:.82rem;color:var(--warn);background:var(--warnbg);
  border-radius:9px;padding:9px 11px;margin-top:auto}

/* --------------------------------------------------------------- Schublade */
.wk-schleier{position:fixed;inset:0;background:rgba(28,26,20,.5);
  opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:70}
.wk-schleier.auf{opacity:1;pointer-events:auto}

.wk{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:71;
  background:var(--bg);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-16px 0 40px -20px rgba(43,40,32,.5)}
.wk.auf{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){
  .wk{transition:none}.wk-schleier{transition:none}
}

.wk__kopf{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);background:var(--card)}
.wk__kopf h2{margin:0;font-size:1.15rem}
.wk__zu{border:0;background:none;cursor:pointer;font-size:1.5rem;line-height:1;
  color:var(--muted);padding:4px 8px;border-radius:8px}
.wk__zu:hover{background:#eee9dc;color:var(--ink)}

.wk__rumpf{flex:1;overflow-y:auto;padding:16px 18px}
.wk__leer{text-align:center;color:var(--muted);padding:40px 10px}

.wk-zeile{display:grid;grid-template-columns:1fr auto;gap:4px 12px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.wk-zeile:first-child{padding-top:0}
.wk-zeile__name{font-weight:600;font-size:.95rem}
.wk-zeile__was{font-size:.82rem;color:var(--muted)}
.wk-zeile__preis{font-family:var(--kopf);font-weight:600;white-space:nowrap;text-align:right}
.wk-zeile__stell{display:flex;align-items:center;gap:8px;margin-top:6px}
.wk-zeile__stell button{width:28px;height:28px;border:1px solid var(--line);
  background:#fff;border-radius:8px;cursor:pointer;font-size:1rem;line-height:1;
  color:var(--ink)}
.wk-zeile__stell button:hover{border-color:var(--accent);color:var(--accent-dark)}
.wk-zeile__stell input{width:52px;padding:5px 6px;text-align:center;
  border:1px solid var(--line);border-radius:8px;font:inherit}
.wk-zeile__weg{border:0;background:none;color:var(--muted);cursor:pointer;
  font-size:.8rem;text-decoration:underline;padding:0;margin-left:4px}

.wk-block{margin-top:18px;padding-top:14px;border-top:2px solid var(--line)}
.wk-block h3{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.wk-summe{display:flex;justify-content:space-between;gap:12px;
  font-size:.9rem;padding:3px 0}
.wk-summe.gross{font-family:var(--kopf);font-weight:700;font-size:1.15rem;
  border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
.wk-fracht-hinweis{font-size:.8rem;color:var(--muted);margin-top:8px;line-height:1.5}

.wk__fuss{padding:14px 18px;border-top:1px solid var(--line);background:var(--card)}
.wk__fuss .btn{width:100%}

/* -------------------------------------------------------------- Kassenformular */
.kasse-raster{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.kasse-raster .voll{grid-column:1/-1}
.kasse-feld label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:3px}
.kasse-feld input,.kasse-feld textarea,.kasse-feld select{width:100%;
  padding:10px 11px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink);font:inherit;font-size:.94rem}
.kasse-feld input:focus,.kasse-feld textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.kasse-feld.fehlt input,.kasse-feld.fehlt textarea{border-color:#b4674a;background:#fdf3f0}
.kasse-fehler{color:#8f4a30;font-size:.85rem;margin-top:10px}
.kasse-ok{background:#eef3e6;border:1px solid #cfe0bd;border-radius:12px;
  padding:18px;margin-top:12px}
.kasse-ok h3{margin:0 0 6px}
@media(max-width:520px){.kasse-raster{grid-template-columns:1fr}}

/* Pflichtangaben-Zeile unter der Kasse */
.kasse-rechtlich{font-size:.8rem;color:var(--muted);line-height:1.55;margin-top:12px}

/* ---------------------------------------------------------------- Auftakt
   Kein grosses Bild: Wer in den Shop geht, will Ware sehen, nicht eine
   Inszenierung durchscrollen. Der dunkle Block stellt nur die Verbindung
   zu den Markenseiten her und traegt die Sprungmarken. */
.shop-auftakt{background:#171a13;color:#eceadf;padding:clamp(52px,7vw,84px) 0 clamp(30px,4vw,44px)}
.shop-auftakt h1{color:#eceadf;font-size:clamp(2rem,4.6vw,3.1rem);margin-bottom:.35em}
.shop-auftakt p{color:#a3a695;max-width:62ch}
.shop-auftakt strong{color:#eceadf}
.shop-sprung{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.shop-sprung a{text-decoration:none;font-family:var(--kopf);font-size:.88rem;font-weight:600;
  color:#eceadf;border:1px solid rgba(236,234,223,.28);border-radius:999px;padding:8px 15px;
  transition:border-color .18s ease,background .18s ease}
.shop-sprung a:hover{border-color:#9dbd6a;background:rgba(157,189,106,.12);color:#c3d9a4}

/* Wegweiser für alles, was nicht ins Paket passt */
.shop-wegweiser{background:#fff;border-top:1px solid var(--line);padding:clamp(40px,5vw,64px) 0}
.shop-wegweiser .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:20px}

/* Das hidden-Attribut allein reicht hier nicht: .btn setzt display:inline-block,
   und eine ausdrueckliche display-Regel schlaegt [hidden]. Ohne diese Zeile
   stand "Zurueck zum Warenkorb" auch dann da, wenn es nichts zurueckzugehen gab. */
.wk__fuss .btn[hidden]{display:none}

/* Der erste Block in der Schublade braucht oben keinen Abstand - sonst
   entsteht unter der Kopfzeile eine Luecke, die aussieht wie ein Fehler. */
.wk__rumpf .wk-block:first-child{margin-top:0;padding-top:0;border-top:0}

/* Am Handy klebte "entfernen" direkt am Plus-Knopf - zwei Ziele, die man
   mit dem Daumen kaum auseinanderhalten kann. Jetzt sitzt es am rechten Rand. */
.wk-zeile__weg{margin-left:auto}