/* ==========================================================================
   SHOP 2 (12.09.2026) – kleine Produktkarten, Filter, Produktseite, Warenkorb.
   Baut auf shop.css auf (Warenkorb-Schublade, Kasse, Kopfknopf bleiben gleich).
   Wird von shop-neu.html und shop/<id>.html geladen.
   ========================================================================== */
@import url("shop.css");

/* ------------------------------------------------------------ Filterleiste
   Klebt unter der Kopfzeile. Chips statt Auswahlfelder: ein Klick, sichtbar,
   was gerade gilt. Ohne JavaScript ist die Leiste leer und alle Karten stehen da. */
.shop-filter{position:relative;z-index:40;background:var(--bg);
  border-bottom:1px solid var(--line);padding:12px 0}
.shop-filter .container{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.shop-filter__gruppe{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.shop-filter__gruppe>span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-right:2px}
.chip{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;
  padding:5px 12px;font:inherit;font-size:.82rem;cursor:pointer;line-height:1.3;
  transition:background .15s ease,border-color .15s ease}
.chip:hover{border-color:var(--accent)}
.chip.an{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.leer{opacity:.4;pointer-events:none}
.shop-filter__suche{margin-left:auto;display:flex;align-items:center;gap:6px}
.shop-filter__suche input{padding:7px 11px;border:1px solid var(--line);border-radius:999px;
  font:inherit;font-size:.86rem;width:170px;background:#fff}
.shop-filter__stand{font-size:.8rem;color:var(--muted);width:100%}
@media(max-width:820px){
  .shop-filter{top:0;position:static}
  .shop-filter__suche{margin-left:0;width:100%}
  .shop-filter__suche input{flex:1}
}

/* -------------------------------------------------------------- Kleine Karten
   Sechs bis sieben nebeneinander im 1080er-Container. Bild quadratisch, Name,
   ein Satz, "ab"-Preis. Die Karte IST der Link – alles Weitere auf der
   Produktseite. Keine Auswahlfelder mehr in der Karte. */
.shop-raster.klein{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
@media(max-width:560px){.shop-raster.klein{grid-template-columns:repeat(2,1fr);gap:10px}}
.karte{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
.karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-hover)}
.karte__bild{aspect-ratio:1/1;background:#fff;overflow:hidden;display:grid;place-items:center}
.karte__bild img{width:100%;height:100%;object-fit:cover;display:block}
.karte__bild .fotoplatz{width:100%;height:100%;border:0;border-radius:0;
  display:grid;place-items:center;color:#b3ac9a;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.karte__text{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.karte__text h3{margin:0;font-size:.98rem;line-height:1.25}
.karte__kurz{font-size:.78rem;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.karte__preis{margin-top:auto;padding-top:6px;font-family:var(--kopf);font-weight:700;font-size:.95rem}
.karte__preis small{display:block;font-weight:400;font-size:.7rem;color:var(--muted);font-family:inherit}
.karte__preis.anfrage{font-weight:600;color:var(--muted);font-size:.86rem}
.karte.wartet{border-style:dashed}
.karte__marke{position:absolute;left:8px;top:8px;background:rgba(43,40,32,.72);color:#fff;
  font-size:.66rem;padding:3px 8px;border-radius:999px;letter-spacing:.04em}
.karte{position:relative}
.karte[hidden]{display:none}
.shop-hersteller[hidden]{display:none}
.shop-nichts{padding:40px 0;color:var(--muted);text-align:center}

/* ---------------------------------------------------------------- Produktseite */
.pp{padding:24px 0 60px}
.pp-pfad{font-size:.82rem;color:var(--muted);margin-bottom:18px}
.pp-pfad a{color:var(--muted)}
.pp-kopf{display:grid;gap:34px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
@media(max-width:820px){.pp-kopf{grid-template-columns:1fr;gap:22px}}
.pp-hersteller{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.pp-kauf h1{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:0 0 8px}
.pp-kurz{color:var(--muted);font-size:1.05rem;margin:0 0 18px}

/* Galerie: Bühne + Daumen. Ohne JavaScript stehen alle Bilder untereinander. */
.pp-buehne{position:relative;border-radius:16px;overflow:hidden;background:#fff;aspect-ratio:1/1}
.pp-bild{margin:0;position:absolute;inset:0;opacity:0;transition:opacity .25s ease}
.pp-bild.ist-aktiv{opacity:1;position:relative}
.pp-bild img{width:100%;height:100%;object-fit:cover;display:block}
.pp-bild .fotoplatz{height:100%;display:grid;place-items:center}
.js-aus .pp-buehne{aspect-ratio:auto}
.js-aus .pp-bild{position:relative;opacity:1;margin-bottom:8px}
.pp-daumen{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pp-daumen button{width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:10px;
  overflow:hidden;background:#fff;cursor:pointer}
.pp-daumen button.ist-aktiv{border-color:var(--accent)}
.pp-daumen img{width:100%;height:100%;object-fit:cover;display:block}
.pp-daumen .fotoplatz{display:none}

/* Kaufkasten */
.pp-widget{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.pp-groessen{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.pp-groesse{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;
  font:inherit;font-size:.9rem;cursor:pointer;text-align:left;line-height:1.3}
.pp-groesse small{display:block;font-size:.72rem;color:var(--muted)}
.pp-groesse.an{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#f3f7ee}
.pp-groesse.zu{opacity:.55}
.pp-preis{font-family:var(--kopf);font-weight:700;font-size:1.75rem;line-height:1.1;margin:4px 0 2px}
.pp-preis small{display:block;font-family:inherit;font-weight:400;font-size:.8rem;color:var(--muted)}
.pp-preis.anfrage{font-size:1.2rem;color:var(--muted)}
.pp-weg{font-size:.86rem;color:var(--muted);margin:10px 0 0;padding:10px 12px;
  border-left:2px solid var(--accent);background:#f9f8f3;border-radius:0 8px 8px 0;line-height:1.5}
.pp-weg strong{color:var(--ink)}
.pp-plz{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.pp-plz input{width:110px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font:inherit}
.pp-plz .mini{flex-basis:100%}
.pp-staffel{font-size:.82rem;color:var(--muted);margin:8px 0 0}
.pp-staffel table{border-collapse:collapse;font-size:.82rem}
.pp-staffel td{padding:2px 10px 2px 0}
.pp-menge{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.pp-menge label{font-size:.82rem;color:var(--muted)}
.pp-menge input{width:70px;padding:8px;border:1px solid var(--line);border-radius:9px;font:inherit;text-align:center}
.pp-menge select{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff}
.pp-dazu{margin-top:14px;width:100%}
.pp-summe{font-size:.86rem;color:var(--muted);margin-top:8px}
.pp-bald{font-size:.86rem;color:var(--warn);background:var(--warnbg);border-radius:9px;padding:10px 12px;margin-top:10px}
.pp-telefon{font-size:.82rem;color:var(--muted);margin:14px 0 0}

/* Bedarfsrechner */
.pp-bedarf{margin:28px 0 0;background:#f3f7ee;border:1px solid #d9e6c8;border-radius:16px;padding:18px 20px}
.pp-bedarf h2{font-size:1.2rem;margin:0 0 6px}
.pp-bedarf p{margin:0 0 10px;color:var(--muted);font-size:.9rem}
.pp-bedarf__felder{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end}
.pp-bedarf__felder label{font-size:.8rem;color:var(--muted);display:block}
.pp-bedarf__felder input,.pp-bedarf__felder select{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;width:120px}
.pp-bedarf__aus{margin-top:12px;font-family:var(--kopf);font-weight:600}
.pp-bedarf__aus small{display:block;font-family:inherit;font-weight:400;color:var(--muted);font-size:.82rem}

/* Inhalt */
.pp-inhalt{max-width:820px;margin-top:36px}
.pp-abschnitt{padding:26px 0;border-top:1px solid var(--line)}
.pp-abschnitt h2{font-size:1.35rem;margin:0 0 12px}
.pp-abschnitt h3{font-size:1.05rem;margin:18px 0 6px}
.pp-abschnitt p{margin:0 0 12px}
.pp-abschnitt ul{margin:0 0 12px 18px}
.pp-abschnitt li{margin-bottom:4px}
.pp-abschnitt .ps-tabellenrahmen{overflow-x:auto;margin:0 0 12px}
.pp-abschnitt table.anwendung{width:100%;border-collapse:collapse;font-size:.9rem}
.pp-abschnitt table.anwendung th{text-align:left;font-family:var(--kopf);font-weight:600;
  border-bottom:2px solid var(--line);padding:8px 10px;color:var(--ink)}
.pp-abschnitt table.anwendung td{border-bottom:1px solid var(--line);padding:8px 10px;vertical-align:top;color:var(--ink)}
.pp-abschnitt details.ausklapp{border:1px solid var(--line);border-radius:10px;padding:0 14px;margin-bottom:8px;background:#fff}
.pp-abschnitt details.ausklapp summary{cursor:pointer;padding:12px 0;font-weight:600;font-family:var(--kopf)}
.pp-abschnitt details.ausklapp p{padding-bottom:8px}
.pp-quellen{font-size:.84rem;color:var(--muted)}
.pp-herstellerkasten{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;border-top:1px solid var(--line)}
.pp-mehr{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pp-mehr__karte{display:block;text-decoration:none;color:var(--ink);font-size:.86rem;font-weight:600}
.pp-mehr__karte img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;margin-bottom:6px;display:block}
.pp-mehr__karte .fotoplatz{aspect-ratio:1/1;border-radius:10px;display:grid;place-items:center;color:#b3ac9a;font-size:.7rem;margin-bottom:6px}

/* Warenkorb: Lieferort-Feld oben in der Schublade */
.wk-plz{display:flex;gap:8px;align-items:center;font-size:.86rem;margin-bottom:12px;flex-wrap:wrap}
.wk-plz input{width:96px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit}
.wk-brutto{font-size:.78rem;color:var(--muted);font-weight:400}