/* ============================================================
   NEXTBUY MINI-WARENKORB im Shop-Kopf (Spur mini-korb, 17.10.2026)

   Markup snippets/nb-mini-korb.tpl, Verhalten js/nb-mini-korb.js. Funktionen nach rebuy, Werte aus design/tokens.json
   (design-auditor Modus A, .claude/progress/mini-korb/baukasten/). Schwebende weiße Karte ohne Rand mit sh-schwebt wie das
   Kontomenü C (G4, G28), Gerätefoto als Quadrat geraetebild-l auf grauer Bühne (G60, G63, Liste in nb-basis.css), Pillen Ton in
   Ton wie im Warenkorb (G46, G1), Zeichen ohne Fläche bei Hover und Druck (G59), Hover nur mit Maus.

   Sichtbar nur mit Maus ab 861 px (dort beginnt der Rechner-Kopf, nb-kopf.css). Darunter und ohne Maus ist das Korb-Zeichen
   ein Link auf den Warenkorb. Das Panel ruht mit visibility hidden, nie nur mit opacity 0 (Safari-Kante).
   Bewegung wie das Kontomenü C: auf mit motion-liste, zu schneller mit motion-liste-aus, 4 px von oben, bei reduzierter
   Bewegung nur Deckkraft.
   ============================================================ */

.nb-mk { position: relative; display: inline-flex; }
.nb-mk__panel { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .nb-mk__panel {
    display: block; position: absolute; right: 0; top: 100%; z-index: 60;
    /* Brücke: der Zeiger fällt zwischen Zeichen und Karte durch keine Lücke (wie rebuy, Mega-Menü) */
    padding-top: var(--nb-space-2xs);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transform-origin: top right;
    transition: opacity var(--nb-motion-liste-aus) var(--nb-motion-kurve), transform var(--nb-motion-liste-aus) var(--nb-motion-kurve),
      visibility 0s linear var(--nb-motion-liste-aus);
  }
  .nb-mk.is-open .nb-mk__panel {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--nb-motion-liste) var(--nb-motion-kurve), transform var(--nb-motion-liste) var(--nb-motion-kurve), visibility 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nb-mk__panel, .nb-mk.is-open .nb-mk__panel { transform: none; }
}

.nb-mk__karte {
  width: 420px; max-width: calc(100vw - 32px); padding: var(--nb-space-m); box-sizing: border-box; overflow: hidden;
  background: var(--nb-surface-page); border: 0; border-radius: var(--nb-radius-card); box-shadow: var(--nb-sh-schwebt);
  font-family: var(--nb-font-sans); color: var(--nb-text-body); text-align: left;
}
:where(.nb-mk) :where(p, dl, dd, ul) { margin: 0; }

/* Kopf: Night-Band oben in der Karte (G50, Werkstatt 18.10.2026), „Dein“ und das Wort Warenkorb auf Lime
   (komponenten-global.md §7), die Anzahl rechts (Daniel 18.10.2026: „links ist Dein Warenkorb und rechts ist die Geräteanzahl“) */
.nb-mk__kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--nb-space-s);
  margin: calc(var(--nb-space-m) * -1) calc(var(--nb-space-m) * -1) var(--nb-space-m); padding: var(--nb-space-m);
  background: var(--nb-surface-dark); color: var(--nb-text-on-dark);
}
.nb-mk__titel { font-size: var(--nb-t-heading-02); line-height: 1.4; }
.nb-mk__titel b { font-weight: var(--nb-weight-semibold); }
.nb-mk__wort { margin-inline: 2px -4px; padding: 0 6px; border-radius: var(--nb-radius-badge); background: var(--nb-lime); color: var(--nb-text-on-lime); white-space: nowrap; }
.nb-mk__anzahl { flex: none; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-on-dark); }

.nb-mk__liste { display: grid; gap: var(--nb-space-s); padding: 0; list-style: none; }

/* Zeile: Foto 72 | Name und Pillen, darunter Preis | Herz und Entfernen übereinander (Ordnung rebuy) */
.nb-mk__posten {
  display: grid; grid-template-columns: var(--nb-geraetebild-l) minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: var(--nb-space-s); align-items: start; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-mk__posten[aria-busy="true"] { opacity: .4; }
.nb-mk__bild { grid-row: 1 / 3; width: var(--nb-geraetebild-l); }
.nb-mk__text { grid-column: 2; display: grid; gap: var(--nb-space-2xs); min-width: 0; }
.nb-mk__preis { grid-column: 2; grid-row: 2; margin-top: var(--nb-space-2xs); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold);
  color: var(--nb-text-heading); font-variant-numeric: tabular-nums lining-nums; }
.nb-mk__aktionen { grid-column: 3; grid-row: 1 / 3; display: grid; gap: var(--nb-space-2xs); justify-items: end; margin: -10px -10px 0 0; }

.nb-header-root .nb-mk__name, .nb-mk__name {
  font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading);
  text-decoration: none; overflow-wrap: anywhere;
}
/* Gerätename ohne Unterstrich, in Ruhe und beim Hover. Beim Zeigen wird die Schrift heller (Daniel 18.10.2026: „diese Linie
   sowohl beim Hovern und nicht Hovern weg … einfach leichter Schrift hover“) */
.nb-header-root .nb-mk a.nb-mk__name, .nb-mk a.nb-mk__name { text-decoration: none; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) {
  .nb-header-root .nb-mk a.nb-mk__name:hover, .nb-mk a.nb-mk__name:hover { color: var(--nb-text-muted); text-decoration: none; }
}
/* Druck an Links: nur die Farbe (G59, Regel DRUCK, Werkstatt mini-korb 17.10.2026) */
.nb-mk a.nb-mk__name:active { color: var(--nb-ink-700); transition-duration: var(--nb-motion-druck); }
a.nb-mk__name:focus-visible, .nb-mk__zk:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; border-radius: 4px; }

/* Beträge brechen nie um (Werkstatt mini-korb 17.10.2026) */
.nb-mk__preis, .nb-mk__summe dd, .nb-mk__bekommst b { white-space: nowrap; }

.nb-mk__pillen { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); }
.nb-mk__pille {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--nb-space-2xs); border-radius: var(--nb-radius-pill);
  background: var(--nb-surface-stage); color: var(--nb-text-on-stage); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold);
  line-height: 1; white-space: nowrap;
}

/* Zeichen ohne Fläche, auch bei Hover und Druck nur die Farbe (G59). Trefferfläche 44 px */
.nb-mk__zk {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--nb-text-heading); font: inherit; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve);
  -webkit-tap-highlight-color: transparent;
}
.nb-mk__zk svg { width: 22px; height: 22px; }
.nb-mk__zk svg path { transition: fill var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-mk__zk:active { color: var(--nb-ink-700); transition-duration: var(--nb-motion-druck); }
@media (hover: hover) and (pointer: fine) {
  .nb-mk__zk:hover { color: var(--nb-text-link); }
}
/* Gemerkt: gefülltes Herz in Blau wie auf der Produktseite und in den Favoriten (Daniel 17.10.2026, text-on-stage) */
.nb-mk__herz[aria-pressed="true"] { color: var(--nb-text-on-stage); }
.nb-mk__herz[aria-pressed="true"] svg path { fill: currentColor; }

/* Mehr als drei: die übrigen als Fotoreihe, Foto geraetebild-s auf grauer Bühne (G60, G63), letzte Kachel mit der Zahl,
   rechts der Link auf alle (Werkstatt 18.10.2026, Menge c) */
.nb-header-root .nb-mk__reihe, .nb-mk__reihe {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); min-height: 44px; margin-top: var(--nb-space-s);
  color: var(--nb-text-heading); text-decoration: none; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-mk__reihe-bilder { display: flex; gap: var(--nb-space-3xs); }
.nb-mk__mini { display: grid; place-items: center; flex: none; width: var(--nb-geraetebild-s); }
.nb-mk__mini--zahl { aspect-ratio: 1; border-radius: var(--nb-geraetebild-radius, 22%); background: var(--nb-surface-component); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-mk__reihe-wort { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); white-space: nowrap; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nb-mk__reihe-wort svg { width: 18px; height: 18px; transition: transform var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-mk__reihe:active { color: var(--nb-ink-700); transition-duration: var(--nb-motion-druck); }
.nb-mk__reihe:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .nb-mk__reihe:hover .nb-mk__reihe-wort { text-decoration-thickness: 2px; }
  .nb-mk__reihe:hover .nb-mk__reihe-wort svg { transform: translateX(2px); }
}

/* Eintausch: Kopf mit Tausch-Zeichen, darunter dieselbe Zeile wie ein Gerät, Betrag als „Du bekommst“ (§11.17) */
.nb-mk__tausch { display: grid; gap: var(--nb-space-xs); margin-top: var(--nb-space-m); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }
/* Umkehr (G29): in der grauen Kachel steht das Foto auf weißer Bühne */
html .nb-mk__tausch .nb-mk__bild:has(> img.nb-produktbild) { background: var(--nb-surface-page); }
.nb-mk__tausch-kopf { display: flex; align-items: center; gap: var(--nb-space-2xs); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-mk__tausch-kopf svg { width: 20px; height: 20px; }
.nb-mk__bekommst { display: flex; align-items: baseline; gap: var(--nb-space-2xs); font-weight: var(--nb-weight-regular); }
.nb-mk__bekommst span { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-body); }
.nb-mk__bekommst b { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* Fuß: Summe und Knopf. Gesamt ist der einzige Anker, Nach Eintausch als Zweitzeile (PAngV, §11.17) */
.nb-mk__fuss { display: grid; gap: var(--nb-space-xs); margin-top: var(--nb-space-m); }
.nb-mk__summe { display: grid; gap: var(--nb-space-2xs); }
.nb-mk__summe > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--nb-space-s); }
.nb-mk__summe dd { font-variant-numeric: tabular-nums lining-nums; }
.nb-mk__gesamt dt { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-mk__gesamt dd { font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-mk__nach { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-mk__recht { font-size: var(--nb-t-legal-01); color: var(--nb-text-body); }

.nb-header-root .nb-mk__knopf, .nb-mk__knopf {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--nb-space-m); box-sizing: border-box;
  border-radius: var(--nb-radius-pill); background: var(--nb-action-primary); color: var(--nb-action-primary-label);
  font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); text-decoration: none; white-space: nowrap;
  transition: background var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-mk__knopf:active { background: var(--nb-action-primary-active); transition-duration: var(--nb-motion-druck); }
.nb-mk__knopf:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .nb-mk__knopf:hover { background: var(--nb-action-primary-hover); }
}

/* Fuß (Werkstatt 18.10.2026, Summe b): Gesamt und Nach Eintausch als Zeilen mit Betrag rechts, darunter der Rechtssatz, der Knopf
   über die ganze Breite und Garantie und Rückgabe mit Haken (Zusagen c, Wortlaut wie snippets/nb-warenkorb.tpl) */
.nb-mk__recht { margin-top: calc(var(--nb-space-2xs) * -1); }
.nb-mk__haken { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--nb-space-s); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-mk__haken > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nb-mk__haken svg { width: 16px; height: 16px; color: var(--nb-text-on-stage); }