/* Weingut Graßmück · Shop-Vorschau (Übersicht, Produkt, Warenkorb). Tokens aus site.css, keine eigenen Farben. */

/* ---------------------------------------------------------------- Kopfbereich (hell) */
.shopkopf { padding-block: calc(var(--kopf-h) * .2 + 28px) 8px; background: var(--papier); }
.brotkrumen--hell { color: var(--text-3); }
.brotkrumen--hell a:hover { color: var(--gold-text); }
.shopkopf__zeile { display: grid; gap: 18px 40px; align-items: end; margin-top: 6px; }
@media (min-width: 1024px) { .shopkopf__zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); } }
.shopkopf h1 { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }
.shopkopf .lead { margin-top: var(--s3); }
.vorschau-hinweis { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: var(--s3) 14px; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--weiss); font-size: var(--t-mini); color: var(--text-2); line-height: 1.5; }
.vorschau-hinweis .i { color: var(--gold-tief); width: 18px; height: 18px; margin-top: 1px; }
.vorschau-hinweis a { color: var(--gold-text); font-weight: 600; }

/* ---------------------------------------------------------------- Raster: Filter + Ergebnisse */
.shop { padding-top: 28px; }
.shop__raster { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .shop__raster { grid-template-columns: 260px minmax(0, 1fr); } }
.shop__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) 20px; justify-content: space-between; padding-bottom: var(--s4); border-bottom: 1px solid var(--linie); }
.shop__zahl { margin: 0; font-size: var(--t-klein); color: var(--text-2); }
.shop__zahl b { font-size: 1.15rem; color: var(--tinte); font-variant-numeric: tabular-nums; }
.shop__sort { display: flex; align-items: center; gap: 10px; font-size: var(--t-klein); color: var(--text-3); }
.shop__sort select { min-height: 44px; padding: var(--s2) 36px var(--s2) var(--s3); border: 1px solid #B9B7B1; border-radius: var(--r-knopf); background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%239B8158' stroke-width='1.8'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; color: var(--tinte); appearance: none; }
.shop__aktiv { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding-top: var(--s4); }
.shop__aktiv .chip .i { width: 14px; height: 14px; }
.filter__auf { display: none; }
.filter__punktzahl { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-rund); background: var(--anthrazit); color: var(--gold-hell); font-size: 12px; font-weight: 700; margin-left: 6px; }
.pk-raster { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); padding-top: var(--s5); }
.pk-raster--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); padding-top: 0; }
.shop__leer { margin-top: var(--s5); }

/* Filterspalte */
.filter__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.filter__kopf h2 { font-size: 1.5rem; }
.filter__zu { display: none; color: var(--tinte); }
.filter__zu:hover { background: var(--flaeche); color: var(--tinte); }
.filter__praemiert { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: var(--s2) var(--s3); margin: var(--s2) 0 var(--s3); border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--weiss); cursor: pointer; font-weight: 600; font-size: var(--t-klein); }
.filter__praemiert > span:nth-of-type(1) { display: inline-flex; align-items: center; gap: var(--s2); flex: 1; }
.filter__praemiert .i { color: var(--gold-tief); }
.filter input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--anthrazit); flex: none; }
.filter__gruppe { border-top: 1px solid var(--linie); }
.filter__gruppe summary { display: flex; align-items: center; gap: 6px; min-height: 52px; list-style: none; cursor: pointer; font-weight: 600; font-size: 1rem; }
.filter__gruppe summary::-webkit-details-marker { display: none; }
.filter__gruppe summary .faq__zeichen { margin-left: auto; width: 16px; height: 16px; }
.filter__gruppe summary .faq__zeichen::before, .filter__gruppe summary .faq__zeichen::after { top: 7px; }
.filter__gruppe[open] .faq__zeichen::after { transform: rotate(0); }
.filter__gruppe fieldset { border: 0; margin: 0; padding: 0 0 14px; display: grid; gap: 2px; }
.filter__wert { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 2px 6px; margin: 0 -6px; border-radius: var(--r-knopf); cursor: pointer; font-size: var(--t-klein); transition: background-color var(--d1) var(--aus); }
.filter__wert:hover { background: var(--flaeche); }
.filter__wert > span:first-of-type { flex: 1; }
.filter__zahl { font-size: var(--t-mini); color: var(--text-3); font-variant-numeric: tabular-nums; }
.filter__wert.ist-leer { color: #66645E; }
.filter__wert.ist-leer .filter__zahl { color: #66645E; }
.filter__fuss { display: none; }
@media (min-width: 1024px) { .filter { position: sticky; top: calc(var(--kopf-h) + 20px); max-height: calc(100vh - var(--kopf-h) - 40px); overflow-y: auto; scrollbar-width: thin; padding-right: 6px; } }
@media (max-width: 1023px) {
  .filter__auf { display: inline-flex; }
  .filter { position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; flex-direction: column; background: var(--papier); padding: 0; visibility: hidden; opacity: 0; transform: translateY(16px);
    transition: opacity var(--d3) var(--aus), transform var(--d3) var(--aus), visibility 0s linear var(--d3); }
  .filter.is-offen { visibility: visible; opacity: 1; transform: none; transition: opacity var(--d3) var(--aus), transform var(--d3) var(--aus), visibility 0s; }
  .filter * { visibility: inherit; }
  .filter__kopf { flex: none; height: var(--kopf-h); margin: 0; padding: 0 var(--rand); border-bottom: 1px solid var(--linie); background: var(--weiss); }
  .filter__zu { display: inline-grid; }
  .filter__form { flex: 1; overflow-y: auto; padding: 8px var(--rand) 0; }
  .filter__fuss { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; position: sticky; bottom: 0; margin: 16px calc(var(--rand) * -1) 0; padding: 12px var(--rand) calc(12px + env(safe-area-inset-bottom)); background: var(--weiss); border-top: 1px solid var(--linie); }
  .filter__fuss .knopf { width: 100%; }
  html.filter-offen { overflow: hidden; }
}
@media (max-width: 640px) {
  .shop__leiste { gap: 10px; }
  .shop__sort span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .shop__sort { flex: 1; justify-content: flex-end; }
  .pk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .pk-raster .pk__buehne { height: 230px; padding: 20px var(--s2) 14px; }
  .pk-raster .pk__text { padding: 14px var(--s3) 14px; }
  .pk-raster .pk__name { font-size: 1.08rem; }
  .pk-raster .pk__grundpreis { font-size: 11px; }
  .pk-raster .pk__preiszeile { flex-direction: column; align-items: stretch; gap: 10px; }
  .pk-raster .pk__korb { width: 100%; }
  .pk-raster .marke { font-size: 11px; padding: 3px var(--s2); }
}

/* ---------------------------------------------------------------- Weinpaket */
.paket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: center; padding: clamp(24px, 3vw, 48px); background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-karte); }
@media (min-width: 900px) { .paket { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.paket__marke { position: absolute; left: 20px; top: -13px; padding: var(--s1) 14px; border-radius: var(--r-rund); background: var(--anthrazit); color: var(--gold-hell); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.paket__flaschen { display: flex; justify-content: center; align-items: flex-end; height: 300px; }
.paket__flasche { display: flex; align-items: flex-end; height: 100%; margin-left: -4%; }
.paket__flasche:first-child { margin-left: 0; }
.paket__flasche img { height: 100%; width: auto; max-width: 90px; object-fit: contain; filter: drop-shadow(0 14px 12px rgb(34 30 22 / .2)); }
.paket__flasche:nth-child(odd) img { height: 92%; }
.paket h3 { font-size: 1.8rem; margin-bottom: 14px; }
.paket__liste { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--linie); }
.paket__liste li { display: flex; justify-content: space-between; gap: var(--s4); padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: var(--t-klein); }
.paket__liste a { text-decoration: none; font-weight: 600; }
.paket__liste a:hover { color: var(--gold-text); }
.paket__liste span { color: var(--text-3); white-space: nowrap; }
.paket__summe { margin-bottom: 18px; }
@media (max-width: 640px) { .paket__flaschen { height: 200px; } .paket__liste li { flex-direction: column; gap: 2px; } .paket__liste span { white-space: normal; } }

/* ---------------------------------------------------------------- Produktseite */
.produkt { padding-block: calc(var(--kopf-h) * .2 + 28px) clamp(48px, 6vw, 96px); }
.produkt__raster { display: grid; gap: clamp(28px, 4vw, 72px); margin-top: 14px; align-items: start; }
@media (min-width: 900px) { .produkt__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.produkt__buehne { position: relative; display: flex; align-items: flex-end; justify-content: center; height: clamp(440px, 60vh, 640px); padding: 40px 20px 34px; border-radius: var(--r-karte); overflow: hidden;
  background: radial-gradient(60% 55% at 50% 85%, #fff 0%, var(--flaeche) 72%); isolation: isolate; }
@media (min-width: 900px) { .produkt__buehne { position: sticky; top: calc(var(--kopf-h) + 20px); } }
.produkt__buehne::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 30px; height: 18px; background: radial-gradient(closest-side, rgb(34 30 22 / .25), transparent); z-index: -1; }
.produkt__wappen { position: absolute; top: 8%; left: 50%; width: 70%; max-width: 300px; transform: translateX(-50%); opacity: .14; z-index: -1; pointer-events: none; }
.produkt__flasche { height: 100%; width: auto; max-width: 70%; object-fit: contain; filter: drop-shadow(0 22px 18px rgb(34 30 22 / .22)); }
.produkt__meta { font-size: var(--t-klein); color: var(--text-3); margin-bottom: 10px; letter-spacing: .01em; }
.produkt__info h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3.1rem); line-height: 1.06; }
.produkt__preise { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--t-klein); color: var(--text-2); }
.produkt__preise li { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.produkt__text { margin-top: 22px; }
.produkt__lang { margin-top: 14px; }
.kaufbox { margin-top: 28px; padding: var(--s5); background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); display: grid; gap: 18px; }
.kaufbox__preis { display: grid; gap: 2px; }
.kaufbox__betrag { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kaufbox__grund { font-size: var(--t-klein); color: var(--text-3); }
.kaufbox__grund a { color: var(--gold-text); }
.kaufbox__aktion { display: flex; gap: var(--s3); flex-wrap: wrap; }
.kaufbox__knopf { flex: 1; min-width: 200px; min-height: 52px; font-size: 1.05rem; }
.kaufbox__hinweise { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--t-klein); color: var(--text-2); }
.kaufbox__hinweise li { display: flex; gap: 10px; align-items: flex-start; }
.kaufbox__hinweise .i { color: var(--gold-tief); width: 18px; height: 18px; margin-top: 2px; }
.groessen { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.groessen legend { font-size: var(--t-klein); font-weight: 600; margin-bottom: var(--s2); }
.groesse input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.groesse span { display: grid; gap: 2px; min-width: 96px; padding: 10px var(--s4); border: 1px solid var(--linie); border-radius: var(--r-knopf); cursor: pointer; font-weight: 600; }
.groesse small { font-weight: 400; color: var(--text-3); }
.groesse input:checked + span { border-color: var(--anthrazit); box-shadow: inset 0 0 0 1px var(--anthrazit); }
.groesse input:focus-visible + span { outline: 2px solid var(--gold-tief); outline-offset: 2px; }
.menge { display: inline-flex; align-items: stretch; border: 1px solid #B9B7B1; border-radius: var(--r-knopf); overflow: hidden; background: var(--weiss); height: 52px; }
.menge__knopf { width: 48px; border: 0; background: transparent; display: grid; place-items: center; color: var(--tinte); }
.menge__knopf:hover { background: var(--flaeche); }
.menge__knopf .i { width: 18px; height: 18px; }
.menge__zahl { width: 56px; border: 0; border-inline: 1px solid var(--linie); text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; background: transparent; }
.menge__zahl::-webkit-inner-spin-button, .menge__zahl::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.menge--klein { height: 44px; }
.menge--klein .menge__knopf { width: 40px; }
.menge--klein .menge__zahl { width: 46px; }
@media (max-width: 640px) { .kaufbox__aktion { flex-direction: column; } .kaufbox__aktion .menge { align-self: stretch; } .menge__zahl { flex: 1; } .kaufbox__knopf { width: 100%; } }

/* Datenblatt in Gruppen (keine Tabelle mit Linie unter jeder Zeile) */
.produktdaten h2 { margin-bottom: 28px; }
.daten { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.daten__block { padding: 22px 22px 18px; background: var(--papier); border-radius: var(--r-karte); }
.daten__block h3 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; margin-bottom: 14px; }
.daten__block h3 .i { color: var(--gold-tief); width: 22px; height: 22px; }
.daten__block dl { margin: 0; display: grid; gap: 10px; }
.daten__zeile { display: grid; gap: 1px; }
.daten__zeile dt { font-size: var(--t-mini); color: var(--text-3); }
.daten__zeile dd { margin: 0; font-weight: 600; font-size: var(--t-klein); }
.daten__block p { margin: 14px 0 0; font-size: var(--t-klein); }
.daten__block--skala { grid-column: span 1; }
.skala { margin-bottom: 18px; }
.skala__kopf { display: flex; justify-content: space-between; font-size: var(--t-klein); margin-bottom: var(--s2); }
.skala__kopf span { color: var(--text-3); }
.skala__spur { position: relative; height: 8px; border-radius: var(--r-rund); }
.skala__spur--zucker { background: linear-gradient(90deg, #E5E1D6 0 25%, #D9CCAE 25% 50%, #C9B084 50% 75%, #A7874F 75%); }
.skala__spur--saeure { background: linear-gradient(90deg, #EAE7DF, #B9C6A4); }
.skala__marke { position: absolute; top: 50%; left: var(--pos); width: 18px; height: 18px; border-radius: 50%; background: var(--anthrazit); border: 3px solid var(--weiss); box-shadow: 0 1px 4px rgb(0 0 0 / .3); transform: translate(-50%, -50%); }
.skala__zonen { position: relative; height: 18px; margin-top: 6px; font-size: 11px; color: var(--text-3); }
.skala__zonen span { position: absolute; left: var(--von); width: calc(var(--bis) - var(--von)); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.skala__enden { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 6px; }
.skala__hinweis { font-size: 12px !important; }
.produkt__urkunden { margin-top: 40px; }
.produkt__urkunden h3 { margin-bottom: var(--s4); }
.produkt__urkundenliste { display: flex; gap: 20px; flex-wrap: wrap; }
.produkt__urkundenliste .urkunde { width: 160px; }

/* ---------------------------------------------------------------- Warenkorb und Vorschau-Kasse */
.schritte { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: var(--s2); flex-wrap: wrap; counter-reset: s; }
.schritte li { display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s3) 6px 6px; border-radius: var(--r-rund); background: var(--flaeche); font-size: var(--t-klein); color: var(--text-3); }
.schritte li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--weiss); color: var(--text-3); font-weight: 700; font-size: 12px; }
.schritte li.is-aktiv { background: var(--anthrazit); color: var(--weiss); }
.schritte li.is-aktiv span { background: var(--gold); color: var(--anthrazit); }
.schritte li.is-fertig span { background: var(--gold-tief); color: var(--weiss); }
@media (max-width: 640px) { .schritte li { font-size: 0; gap: 0; padding: var(--s1); } .schritte li.is-aktiv { font-size: var(--t-klein); gap: var(--s2); padding-right: var(--s3); } }
.korb__raster { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 1024px) { .korb__raster { grid-template-columns: minmax(0, 1fr) 360px; } .korb__summe { position: sticky; top: calc(var(--kopf-h) + 20px); } }
.versandleiste { padding: 20px 22px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); margin-bottom: 18px; }
.versandleiste__text { margin: 0 0 14px; }
.versandleiste__spur { position: relative; height: 6px; border-radius: var(--r-rund); background: var(--flaeche-2); margin: 0 6px 22px; }
.versandleiste__fuellung { position: absolute; inset: 0; border-radius: inherit; background: var(--verlauf-gold); transform-origin: 0 50%; transform: scaleX(0); transition: transform 600ms var(--aus); }
.versandleiste__marke { position: absolute; top: 12px; transform: translateX(-50%); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.versandleiste__marke::before { content: ""; position: absolute; left: 50%; top: -12px; width: 1px; height: 6px; background: var(--weiss); }
.versandleiste__karton { margin: 0; font-size: var(--t-klein); color: var(--text-2); }
.korb__liste { list-style: none; margin: 0; padding: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); }
.korb__zeile { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto 44px; gap: 14px 18px; align-items: center; padding: var(--s4) 18px; }
.korb__zeile + .korb__zeile { border-top: 1px solid var(--linie); }
.korb__bild img { height: 88px; width: 56px; object-fit: contain; }
.korb__text { display: grid; gap: 2px; min-width: 0; }
.korb__text a { text-decoration: none; }
.korb__text b { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; line-height: 1.2; }
.korb__betrag { font-variant-numeric: tabular-nums; text-align: right; min-width: 76px; }
.papierkorb { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #B42318; }
.papierkorb:hover { background: rgb(180 35 24 / .08); }
.papierkorb .i { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .korb__zeile { grid-template-columns: 48px minmax(0, 1fr) 44px; grid-template-areas: "bild text weg" "bild menge betrag"; gap: 10px var(--s3); }
  .korb__bild { grid-area: bild; } .korb__text { grid-area: text; } .korb__zeile .menge { grid-area: menge; justify-self: start; } .korb__betrag { grid-area: betrag; grid-column: 2 / 4; justify-self: end; } .papierkorb { grid-area: weg; }
  .korb__zeile .korb__betrag { grid-area: auto; grid-column: 3; grid-row: 2; }
  .korb__zeile .menge { grid-column: 2; grid-row: 2; }
}
.korb__summe { padding: var(--s5); background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); display: grid; gap: var(--s4); }
.summe { margin: 0; display: grid; gap: 10px; }
.summe > div { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-klein); }
.summe dt { color: var(--text-2); }
.summe dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.summe__gesamt { padding-top: var(--s3); border-top: 1px solid var(--linie); font-size: 1.15rem !important; }
.summe__gesamt dd { font-size: 1.3rem; }
.korb__knoepfe { display: grid; gap: 10px; }
.korb__knoepfe .knopf { width: 100%; }
.kasse { padding: clamp(20px, 2.5vw, 32px); background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); }
.kasse h2, .kasse legend { margin-bottom: 18px; }
.kasse__raster { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kasse__breit { grid-column: 1 / -1; }
@media (max-width: 640px) { .kasse__raster { grid-template-columns: minmax(0, 1fr); } }
.wahl { border: 0; margin: 0 0 var(--s5); padding: 0; display: grid; gap: 10px; }
.wahl__option { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px var(--s4); border: 1px solid var(--linie); border-radius: var(--r-knopf); cursor: pointer; transition: border-color var(--d2) var(--aus), box-shadow var(--d2) var(--aus); }
.wahl__option:hover { border-color: var(--gold-tief); }
.wahl__option:has(input:checked) { border-color: var(--anthrazit); box-shadow: inset 0 0 0 1px var(--anthrazit); }
.wahl__option input { width: 20px; height: 20px; accent-color: var(--anthrazit); margin: 0; }
.wahl__option span { display: grid; gap: 2px; }
.wahl__option small { color: var(--text-3); font-size: var(--t-mini); }
.wahl__option em { font-style: normal; font-size: var(--t-klein); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.wahl__option em .i { width: 26px; height: 26px; }
.pruefen { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pruefen__block { padding: var(--s4) 18px; background: var(--papier); border-radius: var(--r-karte); font-size: var(--t-klein); }
.pruefen__block h3 { font-family: var(--sans); font-size: var(--t-mini); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--s2); }
.pruefen__block--breit { grid-column: 1 / -1; }
.pruefen__block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pruefen__block li { display: flex; justify-content: space-between; gap: var(--s3); }
@media (max-width: 640px) { .pruefen { grid-template-columns: minmax(0, 1fr); } }
.vorschau-dialog { width: min(100% - 32px, 520px); padding: 36px var(--s6) 30px; border: 0; border-radius: var(--r-karte); background: var(--anthrazit); color: var(--auf-dunkel); box-shadow: var(--schatten-dunkel); }
.vorschau-dialog::backdrop { background: rgb(22 22 21 / .7); }
.vorschau-dialog img { width: 56px; margin-bottom: var(--s4); }
.vorschau-dialog h2 { font-size: 1.7rem; margin-bottom: 14px; }
.vorschau-dialog p { color: var(--auf-dunkel-2); }
.vorschau-dialog a:not(.knopf) { color: var(--gold-hell); }
.vorschau-dialog .knopfreihe { margin-top: var(--s5); }
.vorschau-dialog .knopf--hell { --k-text: var(--auf-dunkel); --k-rand: var(--auf-dunkel-2); }
/* Der Korb lebt im Browser und erscheint erst mit dem Skript: Der Bereich hält von Anfang an eine Bildschirmhöhe frei,
   damit der Footer nie ins Bild springt (CLS 0, gemessen in qa/abnahme.cjs #22) */
.korb { min-height: calc(100svh - var(--kopf-h)); }
.korb__leer { justify-items: center; text-align: center; }
.korb__leer .knopfreihe { justify-content: center; }
.korb__alter { margin-top: 18px; }
.korb__alter + .formmeldung { margin-top: 10px; }