/* ============================================================
   DER WARENKORB
   ============================================================

   Der Knopf im Balken, die Schublade rechts, die Kassenseite.

   **Aufbau nach Vorlagen**, nachgesehen bei Hers, Hims und Etsy: Bild
   auf getönter Fläche, daneben Name, Farbe, Stückpreis und Mengenregler,
   das Entfernen als kleines Kreuz. Unten ein abgesetzter Fuss mit
   Rechnung und einem Knopf über die volle Breite. Die Kassenseite folgt
   Squarespace und Perplexity: Formular links, Zusammenfassung rechts als
   eigene Karte, die beim Scrollen stehen bleibt.
   ============================================================ */

/* ---------- Der Knopf im Balken ---------- */
.korb-knopf {
  position: relative;
  /* Rund statt Pille: Er trägt ein Zeichen, keinen Text. */
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* **`.btn` schneidet ab.** Dort steht `overflow: hidden` — für die
     Pillenknöpfe richtig, hier falsch: Das Abzeichen sitzt über dem Rand
     des Kreises und wurde davon zu einem Viertelkreis beschnitten. */
  overflow: visible;
}
.korb-knopf svg { display: block; }

/* **Die Zahl sitzt auf dem Knopf, nicht daneben.** Daneben wandert sie
   mit jeder Stelle und schiebt den Balken; darauf bleibt alles ruhig. */
.korb-knopf__zahl {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--petrol);
  color: var(--on-petrol);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  /* Der Balken kann durchsichtig über allem liegen — ein schmaler Rand in
     der Seitenfarbe trennt die Zahl vom Knopfrand darunter. */
  box-shadow: 0 0 0 2px var(--bg);
}
.korb-knopf__zahl[hidden] { display: none; }


/* ---------- Die Schublade ---------- */
.korb {
  /* **`margin: 0 0 0 auto` und nicht `margin: auto`.** Ein `<dialog>`
     zentriert sich von Haus aus über `margin: auto`; hier soll er rechts
     andocken. Der globale Reset (`* { margin: 0 }`) setzt beides ohnehin
     zurück, also steht es hier ausdrücklich. */
  margin: 0 0 0 auto;
  width: min(430px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--hairline);
  background: var(--surface-1);
  color: var(--ink);
  overflow: hidden;
}
/* **Nur im offenen Zustand ein Raster.** Ein `<dialog>` ist über die
   Vorgabe des Browsers `display: none`, solange er zu ist — eine
   Autorenregel schlägt diese Vorgabe und liesse die Schublade dauerhaft
   im Bild stehen. */
.korb[open] {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
/* **Kein Abdunkeln, eine Unschärfe.**

   Hier lag ein schwarzer Schleier auf halber Deckkraft. Der macht die Seite
   nur dunkler und flacher — und im dunklen Satz ist er kaum zu sehen, weil
   dort ohnehin schon alles dunkel ist.

   Die Unschärfe schiebt den Inhalt stattdessen nach hinten, ohne ihm Farbe
   zu nehmen: Man sieht noch, wo man war, kann es aber nicht mehr lesen.
   Sie wirkt dadurch in beiden Sätzen gleich.

   `backdrop-filter` und nicht `filter`: unscharf wird, was **hinter** der
   Fläche liegt, nicht sie selbst. Die Schublade steht davor und mit
   deckendem Grund — sie bleibt scharf. */
.korb::backdrop {
  background: none;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  animation: korbGrund 0.44s var(--ease-out) both;
}
/* Beim Zugehen läuft der Grund mit der Schublade zurück. */
.korb.geht-zu::backdrop { animation: korbGrund 0.3s var(--ease-out) reverse both; }
/* Aufziehen, nicht aufblenden: Der Wert läuft von null auf zwanzig, die
   Unschärfe wird also allmählich stärker statt in einem Schnitt da zu sein.
   Beide Schreibweisen in jedem Schritt, sonst überspringt Safari die
   Zwischenwerte. */
@keyframes korbGrund {
  from { -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); }
  to   { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}

@media (prefers-reduced-motion: reduce) {
  .korb::backdrop, .korb.geht-zu::backdrop { animation: none; }
}

.korb__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--hairline);
}
.korb__titel {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.korb__zu {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.korb__zu:hover { color: var(--ink); border-color: var(--ink-faint); }

.korb__inhalt {
  overflow-y: auto;
  overscroll-behavior: contain;   /* nicht die Seite dahinter mitscrollen */
  padding: 8px 24px;
}

.korb__liste { list-style: none; }

.korb__zeile {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}
.korb__zeile:last-child { border-bottom: 0; }

.korb__bild {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  /* Die Aufnahmen sind freigestellt; ohne Fläche dahinter schwebt das
     Gerät im Nichts und die Zeile fällt auseinander. */
  background: rgb(var(--ink-rgb) / 0.05);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.korb__foto { display: block; width: 100%; height: 100%; }
.korb__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }

.korb__text { display: grid; gap: 3px; padding-right: 28px; }
.korb__name {
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
}
.korb__name:hover { color: var(--petrol-text); }
.korb__farbe { color: var(--ink-dim); }
.korb__stueck {
  font-family: var(--font-label);
  font-size: 13px;
  color: var(--ink);
  margin-top: 2px;
}

.korb__menge {
  margin-top: 10px;
  display: inline-grid;
  grid-template-columns: 28px 34px 28px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  justify-self: start;
}
.korb__menge button {
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.2s var(--ease-out);
}
.korb__menge button:hover { color: var(--ink); }
.korb__zahl {
  text-align: center;
  font-family: var(--font-label);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.korb__weg {
  position: absolute;
  top: 18px;
  right: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}
.korb__weg:hover { color: var(--ink); }

/* ---------- Leer ---------- */
.korb__leer {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 44px 0;
}
.korb__leer-titel { font-family: var(--font-display); font-size: 22px; }
.korb__leer-text { color: var(--ink-dim); max-width: 30ch; }
.korb__leer .btn { margin-top: 8px; }

/* ---------- Der Fuss ---------- */
.korb__fuss {
  padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 14px;
  background: var(--surface-1);
}
.korb__rechnung { display: grid; gap: 8px; }
.korb__rechnung > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.korb__rechnung dt { color: var(--ink-dim); }
.korb__rechnung dd { font-family: var(--font-label); }
.korb__rechnung > div:first-child dd { font-size: 17px; color: var(--ink); }
.korb__rechnung > div:last-child dd { color: var(--ink-dim); }

.korb__kasse { width: 100%; justify-content: center; }
.korb__weiter {
  border: 0;
  background: none;
  color: var(--ink-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  justify-self: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-faint);
  transition: color 0.2s var(--ease-out);
}
.korb__weiter:hover { color: var(--ink); }


/* ---------- Der Knopf an der Kachel ---------- */
.kachel__rein {
  margin-top: 2px;
  width: 100%;
  justify-content: center;
}


/* ---------- Die Kassenseite ---------- */
.kasse {
  padding-top: clamp(96px, 14vh, 150px);
  padding-bottom: clamp(60px, 12vh, 130px);
}
/* **`[hidden]` schlägt sonst fehl.** Das Attribut wirkt über die Vorgabe
   des Browsers (`display: none`), und jede Autorenregel mit `display`
   setzt sie ausser Kraft. Beide Blöcke hier werden umgeschaltet, also
   müssen sie es ausdrücklich zurücknehmen. Dieselbe Falle wie bei der
   Schublade weiter oben. */
.kasse__raster[hidden], .kasse__leer[hidden] { display: none; }

.kasse__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(24px, 4vh, 44px);
}
@media (max-width: 900px) {
  .kasse__raster { grid-template-columns: minmax(0, 1fr); }
}

.kasse__block { display: grid; gap: 16px; }
.kasse__block + .kasse__block { margin-top: clamp(28px, 4vh, 44px); }
.kasse__rubrik {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.kasse__feld { display: grid; gap: 6px; }
.kasse__feld > span { color: var(--ink-dim); font-size: 13px; }
.kasse__feld input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgb(var(--ink-rgb) / 0.03);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.2s var(--ease-out);
}
.kasse__feld input:focus-visible {
  outline: none;
  border-color: var(--petrol);
}
.kasse__zwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 520px) { .kasse__zwei { grid-template-columns: 1fr; } }

/* Die Zusammenfassung bleibt beim Scrollen stehen — wie bei Squarespace
   und Perplexity. */
.kasse__karte {
  position: sticky;
  top: 96px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl, 18px);
  padding: 22px;
  background: rgb(var(--ink-rgb) / 0.03);
  display: grid;
  gap: 16px;
}
.kasse__posten { list-style: none; display: grid; gap: 14px; }
.kasse__posten li {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 12px;
  align-items: center;
}
.kasse__posten .korb__bild { width: 54px; height: 54px; border-radius: 10px; }
.kasse__posten-name { line-height: 1.3; }
.kasse__posten-detail { color: var(--ink-dim); }
.kasse__posten-preis { font-family: var(--font-label); }

.kasse__rechnung {
  display: grid;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.kasse__rechnung > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.kasse__rechnung dt { color: var(--ink-dim); }
.kasse__rechnung dd { font-family: var(--font-label); }
.kasse__gesamt {
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.kasse__gesamt dd { font-size: 20px; color: var(--ink); }

.kasse__absenden { width: 100%; justify-content: center; }
.kasse__klein { color: var(--ink-faint); font-size: 12px; line-height: 1.5; }

/* Was passiert, wenn nichts drin ist. */
.kasse__leer {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: clamp(30px, 6vh, 60px) 0;
}