/* PrintDeal — wiederverwendbare Bausteine: Buttons, Chips, Karten, Sheets,
   Badges, Ladeoverlay, Kennwert-Balken und Sterne. */

/* ---------- Buttons (M3: gefüllt / umrandet / Text) ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-s);
  min-height: 40px;
  padding: 0 var(--abstand-l);
  border-radius: var(--radius-pille);
  border: 0;
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--label-large);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: filter 120ms ease, background-color 120ms ease;
}
.knopf:hover { filter: brightness(1.08); }
.knopf:disabled { opacity: 0.38; cursor: default; filter: none; }

.knopf--umrandet {
  background: none;
  color: var(--primary);
  border: 1px solid var(--outline);
}
.knopf--umrandet:hover { background: var(--surface-container-high); filter: none; }

.knopf--text {
  background: none;
  color: var(--primary);
  padding: 0 var(--abstand-m);
}
.knopf--text:hover { background: var(--surface-container-high); filter: none; }

.knopf--voll { width: 100%; }

/* ---------- Filter-Chips (M3 FilterChip) ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  min-height: 32px;
  padding: 0 var(--abstand-m);
  border-radius: var(--radius-s);
  border: 1px solid var(--outline);
  background: none;
  color: var(--on-surface-variant);
  font-size: var(--label-large);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.chip:hover { background: var(--surface-container-high); }
.chip[aria-pressed="true"] {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-color: transparent;
}
.chip[aria-pressed="true"]::before { content: "✓"; font-size: var(--label-medium); }

.chip-reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-s); }

/* ---------- Angebots-Kachel (FilamentCard.kt + Website-Vorgaben) ---------- */

/* Das Raster passt sich der Breite an, statt eine feste Spaltenzahl zu haben.
   auto-fill (nicht auto-fit): leere Spuren bleiben erhalten, dadurch behält
   ein einzelner Treffer seine natürliche Spaltenbreite und steht linksbündig,
   statt sich über die ganze Fläche zu strecken. */
.kachel-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-m);
}
/* Tablet: bewusst genau zwei Spalten. */
@media (min-width: 640px) and (max-width: 1023px) {
  .kachel-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .kachel-liste { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

.filament-kachel {
  position: relative;              /* Bezug für die Klickfläche der Kachel */
  display: flex;
  flex-direction: column;
  background: var(--surface-container-lowest);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-karte);
  border: 2px solid transparent;
  overflow: hidden;
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.filament-kachel:hover {
  box-shadow: var(--schatten-schwebend);
  transform: translateY(-2px);
  border-color: var(--outline-variant);
}
.filament-kachel--im-vergleich { border-color: var(--primary); }
.filament-kachel--im-vergleich:hover { border-color: var(--primary); }

.kachel-kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
}

/* Bild + Titel sind ein echter Link zur Detailseite. Sein ::after legt sich
   über die ganze Kachel, sodass ein Klick irgendwo auf der Kachel das Detail
   öffnet — Symbole und Shop-Button liegen darüber und behalten ihre eigene
   Wirkung. Nur EIN Link, also auch nur ein Tab-Stopp. */
.kachel-hauptbereich {
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.kachel-hauptbereich::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Feste Bildgröße, schrumpft nie mit. */
.kachel-bild {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-top-left-radius: var(--radius-m);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kachel-bild img { width: 100%; height: 100%; object-fit: cover; }
.kachel-bild img.platzhalter { object-fit: contain; padding: var(--abstand-s); }

.kachel-titelspalte {
  flex: 1;
  min-width: 0;
  padding: var(--abstand-m) 0 var(--abstand-xs) var(--abstand-m);
}

/* Höchstens zwei Zeilen — vorher brach der Name in der engen Kachel auf
   vier Zeilen um. */
.kachel-produktname {
  font-size: var(--title-medium);
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kachel-farbe { font-size: var(--body-medium); color: var(--on-surface-variant); }

/* Oben rechts in einer Reihe; schrumpft nicht und rutscht nie in den
   Textfluss. Über der Klickfläche, damit die Symbole eigenständig wirken. */
.kachel-symbole {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: var(--abstand-s) var(--abstand-s) 0 0;
}

/* Info-Symbol: kleiner grauer Kreis mit „i" (FilamentCard.MaterialInfoSymbol). */
.info-symbol {
  width: 36px; height: 36px;
  border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.info-symbol span {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface-variant);
  color: var(--on-surface-variant);
  font-size: var(--label-small);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Warnsymbol der Kachel (Website-Vorgabe): orange = erhöhte Anforderungen,
   rot = Hardware-Anforderungen. Farbe nie allein: aria-label + title tragen
   den Klartext der Warnstufe. */
.warn-symbol {
  width: 36px; height: 36px;
  border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.warn-symbol svg { width: 20px; height: 20px; }
/* Orange über Token (theme.css); Hardware nutzt die theme-abhängige Fehlerrolle,
   deshalb kein eigener Dunkelmodus-Wert nötig. */
.warn-symbol--erhoeht { color: var(--warnung-erhoeht); }
.warn-symbol--hardware { color: var(--error); }

/* Merken-Herz */
.herz-knopf {
  width: 36px; height: 36px;
  border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-surface-variant);
}
.herz-knopf svg { width: 20px; height: 20px; }
.herz-knopf[aria-pressed="true"] { color: var(--primary); }

/* Vergleichs-Schalter */
.vergleich-knopf {
  width: 36px; height: 36px;
  border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-surface-variant);
}
.vergleich-knopf svg { width: 20px; height: 20px; }
.vergleich-knopf[aria-pressed="true"] { color: var(--primary); }

/* Badges stehen jetzt in der Titelspalte unter Name und Farbe, nicht mehr
   als eigene Zeile über die ganze Kachelbreite. */
.kachel-badges {
  display: flex; flex-wrap: wrap; gap: var(--abstand-xs);
  margin-top: var(--abstand-s);
}

/* Inkompatible Filamente bleiben sichtbar, treten aber zurück. Die Deckkraft
   sinkt gezielt auf Bild, Name, Farbe und Preis — NICHT auf die Badges: das
   Badge ist der Grund für die Abstufung und muss voll lesbar bleiben.
   Deshalb einzeln aufgeführt statt auf dem gemeinsamen Elternelement (die
   Badges liegen seit dem Kachel-Umbau innerhalb des Hauptbereichs). */
.filament-kachel--inkompatibel .kachel-bild,
.filament-kachel--inkompatibel .kachel-produktname,
.filament-kachel--inkompatibel .kachel-farbe,
.filament-kachel--inkompatibel .kachel-fuss {
  opacity: 0.62;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  padding: var(--abstand-xs) var(--abstand-s);
  border-radius: var(--radius-s);
  font-size: var(--label-medium);
  font-weight: 500;
}
.badge--fehler { background: var(--error-container); color: var(--on-error-container); }
/* Offener Punkt — noch nicht befüllter Inhalt (Rechtstexte auf #/ueber). */
.badge--offen { background: var(--tertiary-container); color: var(--on-tertiary-container); }

/* Kompatibilitätsstufen. Jede Stufe trägt zusätzlich ein eigenes Symbol und
   ihren Text — die Unterscheidung hängt nie allein an der Farbe. */
.badge svg { width: 16px; height: 16px; flex-shrink: 0; }
.badge--kompatibel { background: var(--gruen-container); color: var(--gruen-inhalt); }
.badge--inkompatibel { background: var(--error-container); color: var(--on-error-container); }
/* Für „eingeschränkt" gibt es keine Container-Rolle im Theme; die
   Warnfarbe trägt hier Text und Rand auf ruhiger Fläche. */
.badge--eingeschraenkt {
  background: var(--surface-container-high);
  color: var(--warnung-erhoeht);
  box-shadow: inset 0 0 0 1px var(--warnung-erhoeht);
}
.badge--ungeprueft {
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}

.kachel-trenner {
  border: 0;
  border-top: 1px solid var(--outline-variant);
  margin: var(--abstand-s) var(--abstand-l);
}

/* Preisbereich unten rechts; Shopname und Grundangabe klein daneben links.
   margin-top:auto drückt den Fuß an den unteren Rand, damit die Preise
   benachbarter Kacheln trotz unterschiedlich langer Namen auf einer Linie
   liegen. */
.kachel-fuss {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-s);
  padding: 0 var(--abstand-l);
  margin-top: auto;
}
.kachel-fuss-links { min-width: 0; }
.kachel-anbieter {
  font-size: var(--label-medium);
  font-weight: 500;
  color: var(--primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kachel-rollendaten {
  font-size: var(--body-small);
  color: var(--on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* preisProKg — das dominante Element der Kachel (headlineSmall, fett, primary).
   Fettdruck ist in der App exakt dieser Rolle vorbehalten. */
.preis-pro-kg {
  font-size: var(--headline-small);
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

/* Über der Klickfläche der Kachel: der Shop-Button behält seine eigene
   Wirkung und öffnet nicht die Detailansicht. */
.kachel-shop {
  position: relative;
  z-index: 1;
  padding: var(--abstand-s) var(--abstand-l) var(--abstand-m);
}

/* ---------- Lieferbar-Chip (Detailseite) ---------- */

.lieferbar-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-s);
  padding: var(--abstand-xs) var(--abstand-m);
  border-radius: var(--radius-pille);
  font-size: var(--label-large);
  font-weight: 500;
}
.lieferbar-chip::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.lieferbar-chip--ja { background: var(--gruen-container); color: var(--gruen-inhalt); }
.lieferbar-chip--nein { background: var(--error-container); color: var(--on-error-container); }

/* ---------- Bottom-Sheet / Dialog ---------- */

.schleier-flaeche {
  position: fixed; inset: 0;
  z-index: 60;
  background: var(--schleier);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: schleier-ein 180ms ease-out;
}
@keyframes schleier-ein { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--surface-container-low);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  padding: var(--abstand-s) var(--abstand-l) var(--abstand-l);
  animation: sheet-hoch 220ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes sheet-hoch { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }

.sheet-griff {
  width: 32px; height: 4px;
  border-radius: var(--radius-pille);
  background: var(--outline-variant);
  margin: 0 auto var(--abstand-m);
}

.sheet h2 { font-size: var(--title-medium); font-weight: 500; margin-bottom: var(--abstand-s); }
.sheet-abschnitt { margin-bottom: var(--abstand-m); }
.sheet-abschnitt h3 { font-size: var(--title-medium); font-weight: 500; margin-bottom: var(--abstand-s); }
.sheet-hinweis { font-size: var(--body-small); color: var(--on-surface-variant); margin-top: var(--abstand-xs); }
.sheet-hinweis--akzent { color: var(--primary); }
.sheet-hinweis--block { margin-bottom: var(--abstand-m); }
.sheet-trenner { border: 0; border-top: 1px solid var(--outline-variant); margin: var(--abstand-m) 0; }
.sheet-fuss {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-s);
  margin-top: var(--abstand-l);
}

/* Am Desktop werden Sheets mittig als Dialog gezeigt. */
@media (min-width: 1024px) {
  .schleier-flaeche { align-items: center; }
  .sheet { border-radius: var(--radius-l); max-height: 80vh; }
}

.dialog {
  background: var(--surface-container-high);
  border-radius: var(--radius-l);
  max-width: min(92vw, 400px);
  padding: var(--abstand-l);
  box-shadow: var(--schatten-schwebend);
}
.dialog h2 { font-size: var(--title-large); margin-bottom: var(--abstand-s); }
.dialog p { font-size: var(--body-medium); color: var(--on-surface-variant); }
.dialog-aktionen {
  display: flex;
  justify-content: flex-end;
  gap: var(--abstand-s);
  margin-top: var(--abstand-l);
}
.schleier-flaeche--mittig { align-items: center; }

/* ---------- Schalter (M3 Switch, vereinfacht) ---------- */

.schalter-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  width: 100%;
  border: 0; background: none; cursor: pointer;
  padding: var(--abstand-xs) 0;
  text-align: left;
  font-size: var(--title-medium);
  font-weight: 500;
}
.schalter-optik {
  flex: 0 0 auto;
  width: 44px; height: 24px;
  border-radius: var(--radius-pille);
  background: var(--surface-variant);
  border: 1px solid var(--outline);
  position: relative;
  transition: background-color 150ms ease;
}
.schalter-optik::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--outline);
  transition: transform 150ms ease, background-color 150ms ease;
}
.schalter-zeile[aria-checked="true"] .schalter-optik { background: var(--primary); border-color: var(--primary); }
.schalter-zeile[aria-checked="true"] .schalter-optik::after { background: var(--on-primary); transform: translateX(20px); }

/* ---------- Schieberegler (Temperatur-Filter) ---------- */

input[type="range"] { width: 100%; accent-color: var(--primary); }

/* ---------- Ladeoverlay (LadeOverlay.kt) ----------
   Halbtransparenter schwarzer Schleier, rotierender Dreiviertelkreis.
   Farbe des Kreises: Website-Vorgabe Orange (siehe theme.css --ladekreis). */

.lade-overlay {
  position: fixed; inset: 0;
  z-index: 80;
  background: var(--schleier);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.lade-overlay--sichtbar { opacity: 1; pointer-events: auto; }

.ladekreis {
  width: 48px; height: 48px;
  border-radius: 50%;
  /* Dreiviertelkreis: eine Seite bleibt transparent. */
  border: 2px solid var(--ladekreis);
  border-top-color: transparent;
  animation: ladekreis-drehung 1s linear infinite;
}
@keyframes ladekreis-drehung { to { transform: rotate(360deg); } }

/* ---------- Kennwert-Balken (MaterialInfoScreen.BalkenZeile) ---------- */

.balken-zeile, .werte-zeile, .sterne-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  font-size: var(--body-medium);
}
.balken-zeile dt, .werte-zeile dt, .sterne-zeile dt { color: var(--on-surface-variant); }
.balken-zeile dd, .werte-zeile dd, .sterne-zeile dd { margin: 0; display: flex; align-items: center; gap: var(--abstand-s); }

.balken {
  /* Ausdrücklich block: Als Flex-Element von dd wäre der <span> zwar ohnehin
     blockifiziert, aber diese Rettung hängt am display:flex des Elternteils.
     Explizit gesetzt überlebt die Schiene auch eine Umstellung der Zeile. */
  display: block;
  width: 104px; height: 10px;
  border-radius: var(--radius-pille);
  /* Schiene bewusst surface-container-highest statt outline-variant: das hebt
     den Kontrast jeder Ampelstufe in beiden Modi an.
     Gemessen gegen diese Schiene (WCAG 1.4.11, Ziel 3:1), Stufe 1→5:
       hell   4,5 · 4,2 · 3,6 · 4,5 · 4,9
       dunkel 5,5 · 7,1 · 9,4 · 5,8 · 3,8
     Niedrigster Wert 3,6 (hell, Stufe 3) bzw. 3,8 (dunkel, Stufe 5).
     Die Werte gelten für das abgedunkelte --balken-gelb-fuellung weiter
     unten; mit dem reinen --balken-gelb lag Stufe 3 hell bei 2,8. */
  background: var(--surface-container-highest);
  overflow: hidden;
  flex: 0 0 auto;
}
/* display:block ist hier Pflicht, nicht Kosmetik. Die Füllung ist ein <span>
   und damit inline; auf nicht ersetzten Inline-Elementen wirken width und
   height nicht. Ohne diese Zeile blieb die Füllung ein leerer Inline-Kasten
   ohne Ausdehnung — kein Balken, keine Farbe, ganz gleich welche Breite
   JavaScript setzte. Das war die Ursache der leeren Balken. */
.balken-fuellung {
  display: block;
  height: 100%;
  border-radius: var(--radius-pille);
  /* Die Zielbreite steht als Inline-Stil im Markup: Der Balken ist schon
     ohne JavaScript korrekt gefüllt. Die Animation ist nur Verfeinerung —
     das from-Keyframe startet bei 0, das fehlende to-Keyframe ergänzt der
     Browser aus der tatsächlichen Breite. Fällt die Animation aus, bleibt
     die volle Breite stehen; leere Balken kann es dadurch nicht mehr geben. */
  animation: balken-wachsen 600ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes balken-wachsen { from { width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .balken-fuellung { animation: none; }
}

/* Eigenes Gelb NUR für die Balkenfüllung.
   Das reine --balken-gelb erreichte auf der hellen Schiene nur 2,8:1 und
   verfehlte damit die 3:1 aus WCAG 1.4.11. Die Mischung mit --on-surface
   verschiebt den Ton in beiden Themes VOM Untergrund weg: im Hellmodus ist
   --on-surface fast schwarz (dunkler), im Dunkelmodus fast weiß (heller).
   Ein Anteil von 85 % hält den Farbton klar gelb und bringt die Stufen 2–4
   überall über 3:1.
   --stern-gelb bleibt unberührt: Sterne sind Auszeichnung, Balken tragen
   Bedeutung — sie dürfen sich unterscheiden. */
.balken-fuellung { --balken-gelb-fuellung: var(--balken-gelb); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .balken-fuellung {
    --balken-gelb-fuellung: color-mix(in srgb, var(--balken-gelb) 85%, var(--on-surface));
  }
}

/* Ampelstufen 1–5 aus den vorhandenen Tokens.
   Für die Zwischenstufen 2 und 4 gibt es KEIN eigenes Token — statt neue
   Hexwerte einzuführen, werden sie mit color-mix aus den vorhandenen
   abgeleitet. Die erste background-Zeile ist der Rückfall für Browser ohne
   color-mix: dort erscheint der jeweils benachbarte Tonwert statt der
   Mischung, nie eine fehlende Farbe. */
.balken-fuellung--stufe-1 { background: var(--balken-gruen); }
.balken-fuellung--stufe-2 {
  background: var(--balken-gruen);
  background: color-mix(in srgb, var(--balken-gruen) 50%, var(--balken-gelb-fuellung));
}
.balken-fuellung--stufe-3 { background: var(--balken-gelb-fuellung); }
.balken-fuellung--stufe-4 {
  background: var(--balken-rot);
  background: color-mix(in srgb, var(--balken-gelb-fuellung) 50%, var(--balken-rot));
}
.balken-fuellung--stufe-5 { background: var(--balken-rot); }

.balken-wert {
  font-weight: 700;
  white-space: nowrap;
}

/* Höchstwert: abgesetzte Zeile plus Klartext-Pille — auffällig auch ohne
   Farbwahrnehmung. Gegenstück zur „Stärke"-Pille der Sternezeilen, hier
   aber in der Fehlerrolle, weil ein hoher Wert auf dieser Skala ungünstig
   ist. */
.balken-zeile--hoechstwert {
  background: var(--surface-container-highest);
  border-radius: var(--radius-s);
  padding: var(--abstand-xs) var(--abstand-s);
}
.balken-pille {
  padding: 2px var(--abstand-s);
  border-radius: var(--radius-s);
  background: var(--error-container);
  color: var(--on-error-container);
  font-size: var(--label-small);
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Sterne (MaterialInfoScreen.BewertungsZeile) ---------- */

.sterne { display: inline-flex; gap: 1px; }
.stern { width: 18px; height: 18px; color: var(--outline-variant); }
.stern--voll { color: var(--stern-gelb); }

.sterne-zeile--staerke {
  background: var(--surface-container-highest);
  border-radius: var(--radius-s);
  padding: var(--abstand-xs) var(--abstand-s);
}
.staerke-pille {
  padding: 2px var(--abstand-s);
  border-radius: var(--radius-s);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: var(--label-small);
  font-weight: 700;
}

/* ---------- Snackbar (dezenter Hinweis am unteren Rand) ---------- */

.snackbar {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 70;
  max-width: min(92vw, 480px);
  padding: var(--abstand-m) var(--abstand-l);
  border-radius: var(--radius-s);
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  font-size: var(--body-medium);
  box-shadow: var(--schatten-schwebend);
  animation: seite-einblenden 200ms ease-out;
}

/* ---------- Vergleichsleiste ----------
   Zeigt eine Vorschau je Auswahl (Obergrenze steht in PD.zustand). Die Reihe
   darf umbrechen, damit die volle Auswahl auf schmalen Fenstern nicht aus dem
   Layout läuft; deshalb auch kein Pillenradius mehr, sondern eine Karte. */

.vergleichsleiste {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 84px;
  z-index: 50;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-s) var(--abstand-m);
  padding: var(--abstand-s) var(--abstand-m);
  border-radius: var(--radius-l);
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  box-shadow: var(--schatten-schwebend);
  font-size: var(--body-medium);
  animation: seite-einblenden 200ms ease-out;
}
.vergleichsleiste .knopf { min-height: 34px; }
.vergleichsleiste .knopf--text { color: var(--inverse-on-surface); }
/* Nie breiter als das Fenster — mit fünf Vorschauen ist das die Grenze,
   an der die Leiste sonst ausbrechen würde. */
.vergleichsleiste { max-width: calc(100vw - var(--abstand-l) * 2); }
@media (min-width: 640px) { .vergleichsleiste { bottom: var(--abstand-l); } }

.vl-auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.vl-eintrag {
  display: flex;
  align-items: center;
  gap: var(--abstand-xs);
  padding: 2px 2px 2px var(--abstand-xs);
  border-radius: var(--radius-pille);
  background: color-mix(in srgb, var(--inverse-on-surface) 16%, transparent);
  max-width: 190px;
}

.vl-bild {
  width: 24px; height: 24px;
  flex: 0 0 auto;
  border-radius: var(--radius-pille);
  overflow: hidden;
  background: var(--surface-container-lowest);
}
.vl-bild img { width: 100%; height: 100%; object-fit: cover; }

.vl-name {
  font-size: var(--label-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vl-entfernen {
  width: 24px; height: 24px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-pille);
  background: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vl-entfernen svg { width: 14px; height: 14px; }
.vl-entfernen:hover { background: color-mix(in srgb, var(--inverse-on-surface) 28%, transparent); }

.vl-zaehler { font-size: var(--label-medium); white-space: nowrap; }

/* ---------- Leerzustände ---------- */

.leerzustand {
  text-align: center;
  padding: 48px var(--abstand-l);
  color: var(--on-surface-variant);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-s);
}
.leerzustand svg { width: 48px; height: 48px; color: var(--primary); }
.leerzustand h2 { font-size: var(--title-medium); font-weight: 500; color: var(--on-surface); }
.leerzustand p { font-size: var(--body-medium); max-width: 420px; }