/* Giona - Warenkorb-Panel.
   Bewusst eine eigene Datei: style.css bleibt unangetastet, die Ergaenzung
   laesst sich rueckstandslos entfernen. Nutzt ausschliesslich die bestehenden
   Variablen aus style.css, damit Farben und Schrift zusammenpassen. */

.korb-schicht {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 12, 14, 0.66);
  display: flex; justify-content: flex-end;
  opacity: 0; transition: opacity var(--t);
}
.korb-schicht[hidden] { display: none; }
.korb-schicht[data-offen] { opacity: 1; }

.korb-panel {
  width: min(430px, 100%);
  height: 100%;
  background: var(--karbon);
  border-left: 1px solid var(--granit);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t);
}
.korb-schicht[data-offen] .korb-panel { transform: none; }

.korb-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px var(--gutter) 18px;
  border-bottom: 1px solid var(--granit);
}
.korb-kopf h2 {
  margin: 0; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--firn);
}
.korb-zu {
  background: none; border: 1px solid var(--granit); color: var(--nebel);
  width: 32px; height: 32px; line-height: 1; font-size: 1.125rem;
  cursor: pointer; transition: color var(--t), border-color var(--t);
}
.korb-zu:hover { color: var(--karbid); border-color: var(--karbid); }

.korb-liste {
  list-style: none; margin: 0; padding: 0;
  flex: 1; overflow-y: auto;
}
.korb-leer {
  padding: 40px var(--gutter); color: var(--nebel); font-size: 0.9375rem;
}

.korb-zeile {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--granit);
}
.korb-bild {
  width: 64px; height: 80px; object-fit: cover;
  background: var(--schiefer); border: 1px solid var(--granit);
}
.korb-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.korb-name {
  font-size: 0.9375rem; color: var(--firn); line-height: 1.35;
  overflow-wrap: anywhere;
}
.korb-variante { font-family: var(--mono); font-size: 0.75rem; color: var(--nebel); }
.korb-preis { font-family: var(--mono); font-size: 0.8125rem; color: var(--nebel); }

.korb-steuer { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.korb-menge { display: flex; align-items: center; border: 1px solid var(--granit); }
.korb-menge button {
  background: none; border: 0; color: var(--nebel);
  width: 28px; height: 28px; line-height: 1; font-size: 0.9375rem;
  cursor: pointer; transition: color var(--t);
}
.korb-menge button:hover:not(:disabled) { color: var(--karbid); }
.korb-menge button:disabled { opacity: 0.35; cursor: default; }
.korb-menge span {
  min-width: 30px; text-align: center;
  font-family: var(--mono); font-size: 0.8125rem; color: var(--firn);
  font-variant-numeric: tabular-nums;
}
.korb-weg {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 0.8125rem; color: var(--nebel);
  border-bottom: 1px solid transparent; transition: color var(--t), border-color var(--t);
}
.korb-weg:hover { color: var(--karbid); border-bottom-color: var(--karbid); }

.korb-fuss { padding: 18px var(--gutter) 24px; border-top: 1px solid var(--granit); }
.korb-summe {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 8px;
}
.korb-summe span:first-child { font-size: 0.9375rem; color: var(--firn); }
.korb-summe .mono {
  font-family: var(--mono); font-size: 1rem; color: var(--firn);
  font-variant-numeric: tabular-nums;
}
.korb-hinweis { font-size: 0.8125rem; color: var(--nebel); margin: 0 0 16px; }
.korb-kasse { width: 100%; text-align: center; cursor: pointer; }
.korb-kasse[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .korb-schicht, .korb-panel { transition: none; }
}

@media (max-width: 460px) {
  .korb-zeile { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .korb-bild { width: 52px; height: 66px; }
}