/* ============================================================================
   CPC Hannover — heller Zubehoershop (Shopstart, Katalog, Produkt, Warenkorb,
   Kasse). Setzt basis.css voraus.
   ========================================================================= */

/* ------------------------------------------------------------- Banner ----- */
.bannerblock {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  margin-top: 1.5rem;
}
.banner-neben { display: grid; gap: 1rem; grid-template-rows: 1fr 1fr; }

.banner {
  position: relative; overflow: hidden;
  border-radius: var(--r);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 180px;
  text-decoration: none;
}
.banner-gross {
  background: radial-gradient(120% 140% at 12% 20%, #e2231a 0%, #a30f14 62%, #7d0b10 100%);
  min-height: 380px;
}
.banner-blau { background: linear-gradient(135deg, #1f4f9c 0%, #16386e 100%); }
.banner-nacht { background: linear-gradient(135deg, #23262e 0%, #14161b 100%); }

.banner-freisteller {
  position: absolute; right: -2%; bottom: -6%;
  width: 52%; max-width: 460px;
  pointer-events: none;
}
.banner-gross .banner-freisteller { width: 46%; right: 2%; bottom: 4%; }
.banner-neben .banner-freisteller { width: 42%; right: -2%; bottom: 0; }

.banner-inhalt { position: relative; max-width: 58%; }
.banner-neben .banner-inhalt { max-width: 62%; }
.banner-vorzeile { font-size: .8125rem; letter-spacing: .16em;
  text-transform: uppercase; opacity: .9; }
.banner h2 { font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 700;
  margin: .5rem 0 .75rem; line-height: 1.1; }
.banner-neben h3 { font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 700;
  line-height: 1.2; }
.banner-punkte { display: grid; gap: .3rem; font-size: .875rem; margin-bottom: 1.25rem; }
.banner-punkte li { position: relative; padding-left: 1rem; }
.banner-punkte li::before { content: ""; position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 999px; background: #fff; }
.banner-fuss { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.banner-preis {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .5rem 1.1rem; border-radius: var(--r-klein);
  background: #1f4f9c; font-weight: 700; font-variant-numeric: tabular-nums;
}
.banner-mehr { display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; }
.banner-mehr svg { width: 20px; height: 12px; }
.banner-neben .banner-mehr { margin-top: .75rem; }

@media (max-width: 900px) {
  .bannerblock { grid-template-columns: 1fr; }
  .banner-gross { min-height: 300px; }
  .banner-freisteller, .banner-gross .banner-freisteller { width: 46%; }
}
@media (max-width: 560px) {
  .banner-inhalt, .banner-neben .banner-inhalt { max-width: 100%; }
  .banner-freisteller, .banner-gross .banner-freisteller { width: 60%; opacity: .35;
    right: -10%; }
}

/* -------------------------------------------------------- Teilefinder ----- */
.finder {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  overflow: hidden;
}
.finder-reiter { display: flex; gap: .25rem; padding: .75rem .75rem 0;
  border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.finder-reiter button {
  border: 0; background: transparent; color: var(--text-leise);
  padding: .7rem 1.1rem; border-radius: var(--r-klein) var(--r-klein) 0 0;
  font-weight: 600; font-size: .9375rem; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.finder-reiter button[aria-selected="true"] { color: var(--text);
  border-bottom-color: var(--rot); background: var(--grund); }
.finder-tafel { padding: 1.25rem; }
.finder-tafel[hidden] { display: none; }
.finder-felder {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.finder-felder .feldgruppe { margin: 0; }
.finder-felder .knopf { align-self: end; }
.finder-fuss { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  margin-top: 1rem; font-size: .875rem; }
.finder-fuss a { color: var(--text-leise); text-decoration: none; }
.finder-fuss a:hover { color: var(--rot); }
.finder-suche { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; }

@media (max-width: 1023px) { .finder-felder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .finder-felder { grid-template-columns: 1fr; }
  .finder-suche { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- Kategorien --- */
.kat-raster {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.75rem;
}
.kat {
  display: flex; gap: 1.25rem; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.25rem;
  transition: border-color var(--zeit), box-shadow var(--zeit);
}
.kat:hover { border-color: var(--linie-stark); box-shadow: var(--schatten); }
.kat-bild { flex: none; width: 96px; height: 96px; }
.kat-bild img { width: 100%; height: 100%; object-fit: contain; }
.kat h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.kat h3 a { text-decoration: none; }
.kat h3 a:hover { color: var(--rot); }
.kat li { font-size: .875rem; }
.kat li a { color: var(--text-leise); text-decoration: none; }
.kat li a:hover { color: var(--rot); }

@media (max-width: 980px) { .kat-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .kat-raster { grid-template-columns: 1fr; }
  /* 1fr faellt sonst auf min-content zurueck: Bild plus nicht schrumpfender
     Text ist breiter als der Container (siehe buglog bug-010). */
  .kat { gap: 1rem; }
  .kat-bild { width: 72px; height: 72px; }
  .kat > div { min-width: 0; }
}

/* ----------------------------------------------------------- Produkte ----- */
.reihe-kopf { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.5rem; }
.reihe-kopf h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 700; }
.reihe-kopf .rechts { margin-left: auto; display: flex; gap: .75rem;
  align-items: center; }
.reihe-kopf .weiterlink { text-decoration: none; color: var(--text-leise);
  font-size: .9375rem; }
.reihe-kopf .weiterlink:hover { color: var(--rot); }

.produkt-schieber {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3rem) / 4);
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: .25rem;
}
.produkt-schieber::-webkit-scrollbar { display: none; }
.produkt-schieber > * { scroll-snap-align: start; }

.produkt-raster {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pkarte {
  position: relative; display: flex; flex-direction: column;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1rem;
  transition: border-color var(--zeit), box-shadow var(--zeit);
}
.pkarte:hover { border-color: var(--linie-stark); box-shadow: var(--schatten); }
.pkarte-marke {
  align-self: flex-start;
  background: #1f4f9c; color: #fff;
  font-size: .75rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: var(--r-klein);
}
.pkarte-marke[data-art="bestellung"] { background: #5c6068; }
.pkarte-werkzeuge { position: absolute; top: .9rem; right: .9rem;
  display: flex; gap: .25rem; }
.pkarte-werkzeuge button {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--text-leise);
  border-radius: var(--r-klein); cursor: pointer;
}
.pkarte-werkzeuge button:hover { color: var(--rot); background: var(--grund); }
.pkarte-werkzeuge button[aria-pressed="true"] { color: var(--rot); }
.pkarte-werkzeuge svg { width: 18px; height: 18px; }
.pkarte-bild { aspect-ratio: 1; margin: .5rem 0 .75rem; }
.pkarte-bild img { width: 100%; height: 100%; object-fit: contain; }
.pkarte-preise { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.pkarte-preis { font-size: 1.15rem; font-weight: 700; color: var(--rot);
  font-variant-numeric: tabular-nums; }
.pkarte-alt { font-size: .875rem; color: var(--text-leise);
  text-decoration: line-through; font-variant-numeric: tabular-nums; }
.pkarte-name { margin: .5rem 0 1rem; font-size: .9375rem; line-height: 1.45; flex: 1; }
.pkarte-name a { text-decoration: none; }
.pkarte-name a:hover { color: var(--rot); }
.pkarte-fuss { display: flex; gap: .5rem; align-items: center; }

.menge { display: flex; align-items: center; border: 1px solid var(--linie);
  border-radius: var(--r-klein); overflow: hidden; flex: none; }
.menge button { width: 36px; height: 40px; border: 0; background: var(--grund);
  color: var(--text); cursor: pointer; font-size: 1.05rem; line-height: 1; }
.menge button:hover { background: var(--grund-tief); }
.menge input { width: 44px; height: 40px; border: 0; text-align: center;
  background: var(--flaeche); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; }
.menge input::-webkit-outer-spin-button,
.menge input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.korbknopf {
  width: 44px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--linie); border-radius: var(--r-klein);
  background: var(--grund); color: var(--text); cursor: pointer;
  transition: background var(--zeit), color var(--zeit), border-color var(--zeit);
}
.korbknopf:hover { background: var(--rot); border-color: var(--rot); color: #fff; }
.korbknopf svg { width: 19px; height: 19px; }
.korbknopf[data-drin="ja"] { background: var(--rot); border-color: var(--rot); color: #fff; }

@media (max-width: 1100px) {
  .produkt-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .produkt-schieber { grid-auto-columns: calc((100% - 2rem) / 3); }
}
@media (max-width: 820px) {
  .produkt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .produkt-schieber { grid-auto-columns: calc((100% - 1rem) / 2); }
}
@media (max-width: 480px) {
  .produkt-raster { grid-template-columns: 1fr; }
  .produkt-schieber { grid-auto-columns: 78%; }
}

/* ------------------------------------------------------------ Kataloge ---- */
.kataloge {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 150px;
  margin-top: 1.75rem;
}
.katalog {
  position: relative; overflow: hidden; border-radius: var(--r);
  display: flex; align-items: flex-end; padding: 1.25rem;
  text-decoration: none; color: #fff;
}
.katalog img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.katalog::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 14, .2), rgba(8, 10, 14, .82)); }
.katalog:hover img { transform: scale(1.05); }
.katalog span { position: relative; font-size: 1.1rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .6rem; }
.katalog svg { width: 20px; height: 12px; }
.katalog-gross { grid-column: span 2; grid-row: span 2; }
.katalog-breit { grid-column: span 2; }

@media (max-width: 820px) {
  .kataloge { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; }
}
@media (max-width: 480px) {
  .kataloge { grid-template-columns: 1fr; }
  .katalog-gross, .katalog-breit { grid-column: span 1; }
  .katalog-gross { grid-row: span 2; }
}

/* ------------------------------------------------------------ Vertrauen --- */
.vertrauen { display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; }
.vertrauen-karten { display: grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vkarte { background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.5rem; }
.vkarte-mal { width: 40px; height: 40px; color: var(--rot); margin-bottom: 1rem; }
.vkarte h3 { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.vkarte p { font-size: .875rem; color: var(--text-leise); }
.kennzahlen { display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kennzahl b { display: block; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700;
  color: var(--rot); line-height: 1; font-variant-numeric: tabular-nums; }
.kennzahl span { display: block; font-size: .875rem; color: var(--text-leise);
  margin-top: .5rem; }

@media (max-width: 980px) {
  .vertrauen { grid-template-columns: 1fr; }
  .vertrauen-karten { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- Katalogseite ---- */
.katalogseite { display: grid; gap: 1.5rem;
  grid-template-columns: 280px minmax(0, 1fr); align-items: start; }

.filterkarte { background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.25rem; position: sticky; top: 96px; }
.filterkarte > h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem;
  display: flex; align-items: center; }
.filterkarte > h2 button { margin-left: auto; border: 0; background: transparent;
  color: var(--text-leise); font-size: .8125rem; cursor: pointer;
  text-decoration: underline; }
.filtergruppe + .filtergruppe { border-top: 1px solid var(--linie);
  margin-top: 1rem; padding-top: 1rem; }
.filtergruppe > summary { font-weight: 600; font-size: .9375rem; cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: .5rem; }
.filtergruppe > summary::-webkit-details-marker { display: none; }
.filtergruppe > summary::after { content: ""; margin-left: auto;
  width: 9px; height: 9px; border-right: 1.5px solid var(--text-leise);
  border-bottom: 1.5px solid var(--text-leise); transform: rotate(45deg) translateY(-2px);
  transition: transform var(--zeit); }
.filtergruppe[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.filtergruppe .haken { margin-top: .75rem; color: var(--text); }
.filtergruppe .haken span { font-size: .9375rem; }
.filtergruppe .haken em { color: var(--text-leise); font-style: normal;
  font-variant-numeric: tabular-nums; }

.sortierleiste { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: .75rem 1rem; margin-bottom: 1rem; }
.sortierleiste h1 { font-size: 1.25rem; font-weight: 700; }
.sortierleiste .rechts { margin-left: auto; display: flex; gap: .75rem;
  align-items: center; font-size: .875rem; color: var(--text-leise); }
.sortierleiste select.feld { min-height: 40px; padding-block: .35rem; }

.marken { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.marken:empty { display: none; }
.marken button { display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--linie-stark); background: var(--flaeche);
  border-radius: 999px; padding: .35rem .8rem; font-size: .875rem; cursor: pointer; }
.marken button::after { content: "\00d7"; font-size: 1.05rem; line-height: 1; }

.filter-auf { display: none; }

@media (max-width: 980px) {
  .katalogseite { grid-template-columns: 1fr; }
  .filterkarte { position: static; display: none; }
  .filterkarte[data-offen="ja"] { display: block; }
  .filter-auf { display: inline-flex; }
}

.blaettern { display: flex; gap: .5rem; justify-content: center; margin-top: 2rem;
  flex-wrap: wrap; }
.blaettern button { min-width: 44px; height: 44px; padding: 0 .75rem;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
  border-radius: var(--r-klein); cursor: pointer; font-variant-numeric: tabular-nums; }
.blaettern button[aria-current="page"] { background: var(--rot); border-color: var(--rot);
  color: #fff; font-weight: 700; }
.blaettern button:disabled { opacity: .4; cursor: default; }

/* --------------------------------------------------------- Produktseite --- */
.produktkopf { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 88px minmax(0, 1fr) 320px; align-items: start;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: clamp(1.25rem, 3vw, 2rem); }
/* Ohne Miniaturenspalte: Bild und Text teilen sich die Breite. Jeder Artikel
   hat genau ein Foto, eine Galerie mit einer Kachel waere eine Attrappe. */
.produktkopf[data-galerie="nein"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 320px;
}
.thumbs { display: grid; gap: .5rem; }
.thumbs button { border: 1px solid var(--linie); border-radius: var(--r-klein);
  background: var(--flaeche); padding: .35rem; cursor: pointer; aspect-ratio: 1; }
.thumbs button[aria-current="true"] { border-color: var(--rot); }
.thumbs img { width: 100%; height: 100%; object-fit: contain; }
.grossbild { aspect-ratio: 1; display: grid; place-items: center; }
.grossbild img { max-height: 100%; object-fit: contain; }

.produkt-info h1 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 700;
  margin-bottom: .75rem; }
.merkmale { margin-top: 1rem; }
.merkmale > div { display: flex; gap: 1rem; padding: .5rem 0; font-size: .9375rem;
  border-bottom: 1px dashed var(--linie); }
.merkmale dt { color: var(--text-leise); flex: 0 0 45%; }
.merkmale dd { margin: 0; }
.kaufkarte { border: 1px solid var(--linie); border-radius: var(--r); padding: 1.25rem; }
.kaufkarte .pkarte-preis { font-size: 1.6rem; }
.kaufkarte .knopf { margin-top: 1rem; }
.lagerzeile { display: flex; align-items: center; gap: .5rem; font-size: .875rem;
  color: var(--text-leise); margin-top: 1rem; }

.reiterband { display: flex; gap: .25rem; border-bottom: 1px solid var(--linie);
  margin-top: 2.5rem; overflow-x: auto; }
.reiterband button { border: 0; background: transparent; color: var(--text-leise);
  padding: .85rem 1.25rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiterband button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--rot); }
.reitertafel { background: var(--flaeche); border: 1px solid var(--linie);
  border-top: 0; border-radius: 0 0 var(--r) var(--r);
  padding: clamp(1.25rem, 3vw, 2rem); }
.reitertafel[hidden] { display: none; }
.reitertafel h3 { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.reitertafel h3:first-child { margin-top: 0; }
.reitertafel p { color: var(--text-leise); }
.reitertafel p + p { margin-top: .75rem; }

.bewertung { display: flex; gap: 1rem; padding: 1.25rem 0; }
.bewertung + .bewertung { border-top: 1px solid var(--linie); }
.sterne { display: inline-flex; gap: 2px; color: var(--rot); }
.sterne svg { width: 15px; height: 15px; }
.bewertung-kopf { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  margin-bottom: .5rem; }
.bewertung-name { font-weight: 700; }
.bewertung-datum { font-size: .8125rem; color: var(--text-leise); }

/* Die Varianten muessen gleich spezifisch geschrieben werden wie die Regel
   oben, sonst gewinnt [data-galerie] und der Umbruch greift nie. */
@media (max-width: 1023px) {
  .produktkopf { grid-template-columns: 72px minmax(0, 1fr); }
  .produktkopf[data-galerie="nein"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .kaufkarte { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .produktkopf, .produktkopf[data-galerie="nein"] { grid-template-columns: 1fr; }
  .thumbs { grid-auto-flow: column; grid-auto-columns: 64px; overflow-x: auto; }
  .merkmale dt { flex-basis: 55%; }
}

/* ----------------------------------------------------------- Warenkorb ---- */
.korbseite { display: grid; gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.korbliste { background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); }
.korbkopf { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--linie); font-size: .9375rem; }
.korbkopf .rechts { margin-left: auto; }
.korbkopf a { color: var(--text-leise); text-decoration: none; }
.korbkopf a:hover { color: var(--rot); }

.korbzeile { display: grid; gap: 1rem; align-items: center;
  grid-template-columns: 24px 84px minmax(0, 1fr) auto auto 40px;
  padding: 1.25rem; }
.korbzeile + .korbzeile { border-top: 1px solid var(--linie); }
.korbzeile img { width: 84px; height: 84px; object-fit: contain; }
.korbzeile-name { font-size: .9375rem; }
.korbzeile-name a { text-decoration: none; }
.korbzeile-name a:hover { color: var(--rot); }
.korbzeile-nummer { font-size: .8125rem; color: var(--text-leise); margin-top: .25rem; }
.korbzeile-preis { text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.korbzeile-alt { display: block; font-size: .8125rem; font-weight: 400;
  color: var(--text-leise); text-decoration: line-through; }
.weg { width: 40px; height: 40px; border: 0; background: transparent;
  color: var(--text-leise); cursor: pointer; border-radius: var(--r-klein); }
.weg:hover { color: var(--rot); background: var(--grund); }
.weg svg { width: 18px; height: 18px; margin-inline: auto; }

.summe { background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.5rem; position: sticky; top: 96px; }
.summe h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }
.summe-zeile { display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; font-size: .9375rem; }
.summe-zeile span:last-child { font-variant-numeric: tabular-nums; }
.summe-gesamt { border-top: 1px solid var(--linie); margin-top: .75rem;
  padding-top: 1rem; font-size: 1.25rem; font-weight: 700; }
.summe .knopf { margin-top: 1.25rem; }
.summe-gutschein { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem; margin-top: 1.25rem; }
.summe-gutschein .feld { min-height: 44px; }

@media (max-width: 980px) {
  .korbseite { grid-template-columns: 1fr; }
  .summe { position: static; }
}
@media (max-width: 640px) {
  .korbzeile { grid-template-columns: 24px 64px minmax(0, 1fr) 40px;
    grid-template-areas: "wahl bild name weg" ". . menge preis"; }
  .korbzeile > :nth-child(1) { grid-area: wahl; }
  .korbzeile > :nth-child(2) { grid-area: bild; }
  .korbzeile > :nth-child(3) { grid-area: name; }
  .korbzeile > :nth-child(4) { grid-area: menge; justify-self: start; }
  .korbzeile > :nth-child(5) { grid-area: preis; justify-self: end; }
  .korbzeile > :nth-child(6) { grid-area: weg; }
  .korbzeile img { width: 64px; height: 64px; }
}

.korb-leer { text-align: center; padding: clamp(3rem, 8vw, 5rem) 1.5rem; }
.korb-leer[hidden] { display: none; }
.korb-leer svg { width: 56px; height: 56px; color: var(--linie-stark);
  margin: 0 auto 1.25rem; }
.korb-leer p { color: var(--text-leise); margin-bottom: 1.5rem; }

/* --------------------------------------------------------------- Kasse ---- */
.kasse { display: grid; gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.kassenblock { background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: clamp(1.25rem, 3vw, 2rem); }
.kassenblock + .kassenblock { margin-top: 1rem; }
.kassenblock h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1.25rem; }
.paar { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.wahlliste { display: grid; gap: .75rem; }
.wahl { display: flex; gap: .75rem; align-items: flex-start;
  border: 1px solid var(--linie); border-radius: var(--r-klein);
  padding: 1rem; cursor: pointer; }
.wahl:has(input:checked) { border-color: var(--rot); }
.wahl input { margin-top: .2rem; accent-color: var(--rot); width: 20px; height: 20px;
  flex: none; }
.wahl b { display: block; font-size: .9375rem; }
.wahl span { font-size: .875rem; color: var(--text-leise); }
.wahl .preis { margin-left: auto; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; }

.bestellliste { display: grid; gap: .75rem; margin-bottom: 1rem; }
.bestellzeile { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: .75rem; align-items: center; }
.bestellzeile img { width: 56px; height: 56px; object-fit: contain; }
.bestellzeile-name { font-size: .875rem; }
.bestellzeile-preis { font-weight: 700; font-size: .875rem;
  font-variant-numeric: tabular-nums; }
.bestellzeile-anzahl { display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 .35rem;
  background: var(--rot); color: #fff; border-radius: var(--r-klein);
  font-size: .75rem; font-weight: 700; }

@media (max-width: 980px) { .kasse { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .paar { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Sonstiges -- */
.shop-textseite { max-width: 760px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r);
  padding: clamp(1.5rem, 4vw, 2.5rem); }
.shop-hinweis { background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 4px solid var(--rot); border-radius: var(--r);
  padding: 1.25rem 1.5rem; font-size: .9375rem; color: var(--text-leise); }
.shop-hinweis b { color: var(--text); }