/* VEREO · Global App Layout & Components
   Mobile-first, full-bleed on small screens, centered max-content on desktop. */

@import url('tokens.css');

/* === Reset === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-app);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  min-height: 100vh;
  overscroll-behavior-y: contain;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }

/* === Globaler Tastatur-Fokus (a11y, Audit P2), nur bei Keyboard-Navigation sichtbar
   (:focus-visible), KEINE Änderung für Maus/Touch. Monochrom (CI). Niedrige Spezifität via
   :where() → element-spezifische Fokus-Stile (z.B. .feed-cta, .merk-btn) gewinnen weiterhin. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--text, #0F0F0F);
  outline-offset: 2px;
}

/* === App Shell === */
.app {
  max-width: var(--content-max-width);
  margin: 0 auto;
  background: var(--bg-app);
  min-height: 100vh;
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  position: relative;
}
@media (min-width: 640px) {
  .app {
    box-shadow: var(--shadow-card);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
}

/* === Top Bar (Logo, Search Icon, Avatar) === */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-app);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: calc(var(--space-3) + env(safe-area-inset-top));
}
/* Aktionen rechts in der Topbar (Person + Glocke), jede Seite gleich (Diego 18.07.).
   Zentral hier, damit egal welches Modul (register-door/notifications) den Container anlegt. */
.topbar .topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.topbar .vereo-logo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: var(--ls-caps);
  color: var(--text);
  text-decoration: none;            /* als Link (→ Startseite) kein Unterstrich */
  -webkit-tap-highlight-color: transparent;
}
a.vereo-logo { cursor: pointer; }
.topbar .city-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--text-soft);
  background: var(--bg-card);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  margin-left: 4px;
}
.topbar .spacer { flex: 1; }
/* DER Icon-Knopf der App (Diego 18.08.): Zurück, zur Startseite, Galerie-Pfeile,
   Topbar-Türen. Nicht mehr an .topbar gebunden, das Store-Profil hat eine eigene
   Leiste und musste sich deshalb vorher einen zweiten Zurück-Knopf bauen. */
.icon-btn {
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  /* Nicht schrumpfen (Fund 26.08.): In der Such-Topbar sitzt der Zurueck-Knopf neben einem
     Suchfeld mit flex:1. Ohne flex-shrink:0 nahm das Feld ihm den GESAMTEN Platz, der Knopf
     war 0px breit und damit unsichtbar: auf der Suchseite gab es keinen Weg zurueck. */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { background: var(--surface); }
/* Runde Variante: die kleinen Knöpfe oben rechts (Konto-Tür, Glocke, Karten-Info).
   Waren dreimal getrennt definiert und byte-nah gleich. */
.icon-btn--round {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.icon-btn--round:hover { border-color: var(--text); background: var(--bg-card); }
.icon-btn--round svg { width: 20px; height: 20px; }
/* Zwei runde Knoepfe nebeneinander: 34 px Knopf plus 14 px Luecke ergibt 48 px Abstand
   der Mitten. Mit weniger Luecke ueberlappen die Trefferflaechen unten, und der rechte
   Knopf nimmt dem linken einen Streifen weg. */
.topbar .topbar-actions { gap: 14px; }

/* === Trefferflaeche 48 px (Diego 29.09.2026: fuer die ganze App) ===
   Was klein aussieht, weil es so gestaltet ist (Wortmarke, runde Knoepfe, Pfeile,
   Textlinks), behaelt seine Optik. Fuer den Finger waechst die Flaeche unsichtbar: ein
   leeres Pseudo-Element, mittig, mindestens --tap-target-min in beide Richtungen, bei
   groesseren Elementen genau ihr Kasten. Bedingung: die Flaeche liegt frei. Kein anderes
   Ziel darunter und kein Vorfahr mit overflow oder content-visibility, der sie
   abschneidet, sonst zaehlt der Pruefer 48 px, die der Finger nicht trifft. Balken und
   Felder, denen nur wenige Pixel fehlen, wachsen dagegen sichtbar (min-height). */
.topbar .vereo-logo, .icon-btn--round, .legal-links a,
.related-section .related-head a, .store-share-btn, .sp-chip, .store-tab { position: relative; }
.topbar .vereo-logo::after, .icon-btn--round::after, .legal-links a::after,
.related-section .related-head a::after, .store-share-btn::after, .sp-chip::after,
.store-tab::after, .hero-gallery-btn::after, .list-feed-card .lfc-add::after,
.vac-nav::after, .gallery-arrow::after {
  content: '';
  position: absolute;
  inset: min(0px, calc(50% - var(--tap-target-min) / 2));
}

/* === Hero (Store-Profile uses photo, Home uses editorial below) === */
.hero {
  position: relative;
  width: 100%;
  height: var(--hero-height);
  overflow: hidden;
  background: var(--surface);
}
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-5) var(--space-5) var(--space-6);
  color: #fff;
}
.hero-overlay h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: 80%;
}
.hero-overlay .hero-italic { font-style: italic; color: rgba(255,255,255,0.92); }
.hero-overlay .hero-sub {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.85);
  margin-top: var(--space-2);
  letter-spacing: var(--ls-wide);
}

/* === Editorial Hero (Home), Mr Porter / SSENSE tone === */
.hero-editorial {
  background: var(--bg-app);
  padding: var(--space-5) var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.hero-editorial .eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  font-weight: 500;
}
.hero-editorial h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--text);
  margin-bottom: var(--space-5);
}
.hero-editorial h1 em {
  font-style: italic;
  font-weight: 400;
}
.hero-editorial .hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.hero-editorial .hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-editorial .hero-meta-item .num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--text);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.hero-editorial .hero-meta-item .lbl {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
}
.hero-editorial .hero-meta-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
}
@media (min-width: 480px) {
  .hero-editorial { padding: var(--space-8) var(--space-6) var(--space-8); }
  .hero-editorial h1 { font-size: var(--fs-hero); }
}

/* === Section Headings === */
.section-head {
  padding: var(--space-6) var(--space-5) var(--space-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
}
.section-head .meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* === Product Card Grid (Discovery Feed) === */
/* Seitenrand = var(--space-5), identisch zu Topbar, Filterzeile und allen Bloecken
   (Diego 26.08.: „die Buttons enden gefuehlt alle an verschiedenen Stellen, die Seite wirkt
   unruhig"). Vorher lief der Feed mit 12px (mobil) bzw. 16px, waehrend Topbar und Filter bei
   20px sitzen, die groesste Flaeche der Seite fluchtete also mit nichts. Die Karten werden
   dadurch minimal schmaler; das ruhige Raster ist den Platz wert. */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: 0 var(--space-5) var(--space-6);
}
@media (min-width: 480px) {
  .product-grid { gap: var(--space-3); padding: 0 var(--space-5) var(--space-6); }
}

/* === Home-Discovery-Feed: GLEICHMÄSSIGES Raster, gleich große Karten in sauberen Reihen,
   feste 3:4-Box (cover) wie Suche/Store/Produkt. KEINE Masonry mehr (Diego: Bilder sollen
   vollständig + gleich groß sein, nicht gestaffelt/zu groß). 2 Spalten mobil → 3/4/5 breiter.
   display:grid + 3:4 kommen aus .product-grid / .product-card .img-wrap. === */
#product-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); padding-top: 2px; }
@media (min-width: 700px)  { #product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { #product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1360px) { #product-grid { grid-template-columns: repeat(5, 1fr); } }
/* Garantie: eine komplette Karten-Reihe passt in die Bildschirmhöhe, das Bild wird nie
   höher als ~58vh (Karte = Bild + schmale Info bleibt im Viewport). Auf dem Handy greift das
   kaum (Karten sind kurz), auf Laptop deckelt es zu große Karten. */
#product-grid .img-wrap { max-height: 58vh; }

/* "Im Feed weiterstöbern/entdecken", garantierter Weg in den Katalog für Deep-Link-Lander
   (Produkt-/Store-Seite). Monochrom (CI: kein Akzent), Tap-Target ≥44px, echtes <a>. */
.feed-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 1180px;
  margin: var(--space-4) auto var(--space-5);
  padding: 0 var(--space-5);
  background: var(--text, #0F0F0F);
  color: #fff;
  border-radius: var(--radius-lg, 14px);
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-weight: 600;
  font-size: var(--fs-md);
  text-decoration: none;
}
.feed-cta:focus-visible { outline: 2px solid var(--text, #0F0F0F); outline-offset: 3px; }
@media (min-width: 700px) { .feed-cta { margin-left: var(--space-5); margin-right: var(--space-5); } }

/* === Suchfeld + Vorschlags-Chips im Feed-Header (Friction 2). Monochrom, Tap-Targets ≥44px.
   Eigene <section> über #product-grid → außerhalb des Masonry-Spaltenflusses. === */
.feed-search { padding: 12px var(--space-4) 18px; max-width: 1180px; margin: 0 auto; box-sizing: border-box; }
.feed-search-field {
  display: flex; align-items: center; gap: 10px;
  /* Schmaler und ZENTRIERT → cleaner; die Chips darunter sitzen als zentrierte Reihe gleich
     breit darunter (Karussell). Auf dem Handy bleibt das Feld voll. */
  width: 100%; max-width: 520px; margin: 0 auto; min-height: 48px; padding: 0 18px; box-sizing: border-box;
  background: var(--surface, #F7F7F5); color: var(--text-soft, #5C5C5C);
  border: 1px solid var(--border, #E4E4E4); border-radius: 999px;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); font-size: var(--fs-md); text-decoration: none;
}
.feed-search-field svg { flex: 0 0 auto; color: var(--text, #0F0F0F); }
.feed-search-field { transition: border-color 120ms ease-out, background 120ms ease-out; }
.feed-search-field:hover { border-color: var(--text-soft, #5C5C5C); background: #fff; }
.feed-search-field:focus-visible { outline: 2px solid var(--text, #0F0F0F); outline-offset: 2px; }
/* Hero + Suche auf einer Zeile (Home). H1 links, Suche RECHTSBÜNDIG (auto-Margin schiebt sie
   an den rechten Rand, statt direkt hinter der H1 zu kleben). Mobil: Umbruch, volle Breite. */
.hero-search-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-search-row h1 { flex: 0 1 auto; }
/* Seit dem Wegfall der dekorativen Ueberschrift (28.08.) steht das Suchfeld allein in
   der Zeile. Rechtsbuendig mit 480px sass es sonst mit einer leeren Haelfte daneben. */
.hero-search-row .feed-search-field { flex: 1 1 100%; width: auto; max-width: none; margin: 0; }
@media (max-width: 640px) {
  .hero-search-row .feed-search-field { flex: 1 1 100%; max-width: none; margin: 0; }
}
/* Vorschlags-Chips: EINE Reihe, horizontal scrollbar (statt umbrechen), Rand-Bleed bis zum
   Bildschirmrand, Scrollbar versteckt. */
.fs-chips {
  display: flex; flex-wrap: nowrap; gap: 8px; margin: 14px auto 0; max-width: 520px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 2px; scroll-padding-left: var(--space-4);
  /* Wischbares Karussell: Snap + sanfter Rand-Fade als „mehr →"-Hinweis (konsistent zu stores.html). */
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
}
.fs-chips::-webkit-scrollbar { display: none; }
.fs-chip {
  flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  background: #fff; color: var(--text, #0F0F0F);
  border: 1px solid var(--border, #E4E4E4); border-radius: 999px;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); font-size: var(--fs-base); font-weight: 600; text-decoration: none;
}
.fs-chip { transition: border-color 120ms ease-out, background 120ms ease-out, color 120ms ease-out; }
.fs-chip:hover { border-color: var(--text, #0F0F0F); }
.fs-chip:active { transform: scale(0.98); }
/* Alle Chips EINHEITLICHE Schrift (Marken nicht mehr fett, Diego-Wunsch). */
/* „Letzte Suche"-Chips: kleines Verlauf-Symbol oben rechts, etwas mehr Platz rechts dafür. */
.fs-chip--recent { position: relative; padding-right: 22px; }
.fs-chip--recent .fs-hist { position: absolute; top: 6px; right: 7px; width: 11px; height: 11px; color: var(--text-muted, #6F6F6F); }
.fs-chip:focus-visible { outline: 2px solid var(--text, #0F0F0F); outline-offset: 2px; }

/* === Engagement-Badges (geteilt: Feed/Suche-Karten + Detailseiten). Monochrom, ein Pill. ===
   „Oft gemerkt/angesehen/besucht" = echte Social-Proof-Signale (dunkel); „Zuletzt angesehen"
   = persoenlicher Re-Find-Hinweis (dezent, weiß). Daten = /data/engagement-signals.json. */
.card-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-wide);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.card-badge--pop { background: var(--text, #0F0F0F); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.card-badge--seen { background: #fff; color: var(--text-soft, #5C5C5C); border: 1px solid var(--border, #E4E4E4); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.detail-badge {
  display: inline-flex; align-items: center; align-self: flex-start; width: fit-content;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--ls-wide);
  padding: 4px 11px; border-radius: 999px; background: var(--text, #0F0F0F); color: #fff;
}

.product-card {
  display: block;
  position: relative;
  background: var(--bg-card);
  border-radius: var(--store-radius-card);
  overflow: hidden;
  transition: transform var(--transition-fast);
  /* Karten außerhalb des Sichtfelds werden nicht gelayoutet und nicht gezeichnet.
     Ein Store-Profil mit 419 Artikeln (Ragazzi) baute sonst 6.743 Elemente in einem Zug, 
     gemessen 396 ms lokal bis 2.373 ms live, in denen die Seite auf nichts reagiert: kein
     Scrollen, kein Ziehen des Karten-Sheets. Im A/B-Test am gleichen Markup: 297 → 135 ms.
     contain-intrinsic-size ist die angenommene Größe, solange nicht gezeichnet wird, der
     Wert muss zur echten Kartenhöhe passen, sonst springt der Scrollbalken. */
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}
/* Am Telefon (zwei Spalten, 20 px Rand, 12 px Luecke) gerechnet statt geschaetzt: Bild 3:4
   ueber die halbe Breite plus 82 px Text plus 48 px Store-Zeile. Mit den 300 px von vorher
   war jede noch nie gezeichnete Karte 46 px zu kurz: am Seitenende wuchs die Seite nach dem
   Hinrollen, und die letzte Reihe rutschte unter die Bottom-Nav (Pruefer 29.09.2026). */
@media (max-width: 699px) {
  #product-grid .product-card { contain-intrinsic-size: auto calc((100vw - 52px) * 2 / 3 + 130px); }
}
.product-card .pc-main { display: block; color: inherit; text-decoration: none; }
.product-card .pc-main:active { transform: scale(0.98); }
.product-card .img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--surface);
  overflow: hidden;
}
/* Helle Ware sichtbar machen (Diego 30.08.2026).
   Gemessen an einer echten Karte: das Foto liegt als object-fit:cover ueber der ganzen
   Flaeche und ist an seinen Raendern reinweiss (255), die Ware in der Mitte 231. Ein
   weisser Pullover auf weissem Fotogrund hat damit keine Kante mehr, und die Karte sieht
   leer aus. Ein anderer Kartenhintergrund haette daran NICHTS geaendert, weil das Foto
   ihn vollstaendig verdeckt.
   Deshalb eine Haarlinie INNEN auf der Bildflaeche: sie begrenzt das Bild unabhaengig
   davon, was darauf zu sehen ist. Monochrom, ein Token, keine neue Form. Gilt ueber die
   gemeinsame Karte fuer Feed, Suche, Merken und Karte zugleich. */
.product-card .img-wrap::after,
.store-feed-card .sfc-img::after,
.list-feed-card .lfc-img::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(15, 15, 15, 0.09);
  border-radius: inherit;
}
.product-card .brand-tile-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  color: var(--text);
  background: var(--surface-soft);
  padding: var(--space-3);
  text-align: center;
  line-height: 1.2;
}
/* Category placeholder tile, shown instead of a wrong/missing photo.
   Reads as an intentional "Foto folgt" state, never a broken image. */
.ph-tile {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--space-3);
  text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--surface-soft) 0%, var(--surface) 100%);
}
.ph-tile .ph-icon { width: 30px; height: 30px; color: var(--text-muted); opacity: 0.85; }
.ph-tile .ph-cat {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  color: var(--text);
  line-height: 1.15;
}
.ph-tile .ph-note {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
}
.product-card .pc-img { display: block; width: 100%; height: 100%; }
.product-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card .img-wrap .badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: rgba(255,255,255,0.95);
  color: var(--text);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.product-card .info { padding: var(--space-2) var(--space-1) 0; }
.product-card .brand {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.product-card .name {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 32px;
}
.product-card .price {
  font-size: var(--fs-base);
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: var(--ls-tight);
}
/* Angebot: alter Preis durchgestrichen neben dem aktuellen (Cards, Listen, Produktseite) */
.price-old {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: line-through;
  letter-spacing: 0;
  white-space: nowrap;
}
.product-card .store-line {
  /* Trefferflaeche 48 px (Diego 29.09.2026): die Zeile ist so hoch wie ein Finger und
     gehoert ganz dem Store-Link, der Chip bleibt optisch wie er war. Vorher 6 px Abstand
     oben, 23 px Chip, 8 px unten, zusammen 37 px, der Finger traf 23 px. Die Karte waechst
     dadurch um 11 px, fuer alle Karten gleich. */
  position: relative;
  min-height: var(--tap-target-min);
  padding: 0 var(--space-1);
  font-size: var(--fs-xs);
  color: var(--text-soft);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.product-card .store-line .store-link::after { content: ''; position: absolute; inset: 0; }
/* Store name = subtle tappable chip (fine border; doesn't pull focus from the product) */
.product-card .store-line .store-link {
  flex: 0 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.product-card .store-line .store-link:active { border-color: var(--text-soft); background: var(--surface); }
@media (hover: hover) {
  .product-card .store-line .store-link:hover { border-color: var(--text-soft); background: var(--surface); }
}
.product-card .store-line .sep { flex: 0 0 auto; color: var(--text-muted); }
.product-card .store-line .dist { flex: 0 0 auto; color: inherit; white-space: nowrap; }
.product-card .store-line .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }
/* Derselbe gezeichnete Punkt in der Store- und Listen-Karte (card-markup.js,
   list-card.js). Dort stand bis 02.09. der Mittelpunkt als Schriftzeichen. */
.sfc-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-muted); vertical-align: middle; margin: 0 6px; flex: 0 0 auto; }

/* Image-filter switch ("Nur mit Bildern"), shared by the home feed + store profiles */
.img-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; flex: 0 0 auto; }
.img-toggle-text { font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft, #6B6B6B); white-space: nowrap; }
.img-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.img-toggle-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--border, #E2E2E2); transition: background 200ms ease-out; flex: 0 0 auto; }
.img-toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 200ms ease-out; }
.img-toggle input:checked + .img-toggle-track { background: var(--text, #0F0F0F); }
.img-toggle input:checked + .img-toggle-track::after { transform: translateX(14px); }
.img-toggle input:focus-visible + .img-toggle-track { outline: 2px solid var(--text, #0F0F0F); outline-offset: 2px; }

/* === Store Card (Stores Grid + Store-Cards under Map) === */
.store-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  transition: transform var(--transition-fast);
}
.store-card:active { transform: scale(0.98); }
.store-card .store-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background: var(--surface);
  flex-shrink: 0;
  overflow: hidden;
}
.store-card .store-thumb img { width: 100%; height: 100%; object-fit: cover; }
.store-card .store-body { flex: 1; min-width: 0; }
.store-card .store-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.store-card .store-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
}
.pilot-badge {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  white-space: nowrap;
}
.pilot-badge.badge-live {
  background: #16332A;
  color: #fff;
}
.pilot-badge.badge-soon {
  background: var(--surface);
  color: var(--text-soft);
  border: 1px solid var(--border);
}
.store-card .store-cat { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }
.store-card .store-meta {
  display: flex;
  gap: var(--space-3);
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.store-card .store-meta .star { color: var(--text); font-weight: 600; }

/* === Knoepfe, die EINE Basis (Diego 18.08.) ==========================
   Drei Stufen: .btn-primary (schwarz, die Handlung), .btn-secondary (weiss
   mit Rand, Nebenweg), .btn-ghost (nur Text, Ausstieg). Dazu .btn-block
   fuer volle Breite.

   Diese Klassen gab es vorher schon, sie waren aber unbenutzbar: ohne
   `border:none`, `cursor` und `font-family` sah ein <button class="btn">
   nach Systemschrift mit Browser-Rahmen aus. Deshalb hat sich jede Ansicht
   ihren eigenen Knopf gebaut, sieben eigene .btn-Definitionen und vier
   verschiedene .cta (Inventur: internal-docs/knopf-chip-inventur-2026-08-18.md).
   Die Werte hier sind die des bisherigen Produktseiten-CTA (.psc-btn), weil
   der die meistgesehene Handlung der App traegt.

   WER EINEN KNOPF BRAUCHT, NIMMT DIESE KLASSEN, kein eigenes Knopf-CSS. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  padding: 12px var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.btn svg { flex: 0 0 auto; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; transform: none; }
.btn-primary { background: var(--text); color: #fff; }
.btn-primary:hover { opacity: 0.9; }
/* Rand als inset-Schatten statt border: so ist die Pille exakt so hoch wie die
   gefuellte daneben, egal ob sie einen Rand hat. */
.btn-secondary { background: var(--bg-card); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--text); }
.btn-ghost { background: transparent; color: var(--text-soft); }
.btn-ghost:hover { color: var(--text); }
.btn-block { width: 100%; }
.kasse-hint {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  text-align: center;
  line-height: 1.5;
  margin: 0;
  padding: 0 var(--space-5) var(--space-3);
}
.btn-call {
  background: var(--text);
  color: #fff;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
}

/* === Pills / Chips === */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.chip.active { background: var(--text); color: #fff; border-color: var(--text); }

/* === Filter Strip (horizontal scroll, used on Home + Search) === */
.filter-strip {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-strip::-webkit-scrollbar { display: none; }
.filter-strip .chip { flex-shrink: 0; }
.filter-strip-brand {
  padding-top: 0;
  padding-bottom: var(--space-2);
}
.filter-strip-brand .chip {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  background: transparent;
  border-color: transparent;
  padding: 6px 10px;
  color: var(--text-muted);
}
.filter-strip-brand .chip.active {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}

/* === Search Input === */
.search-input {
  display: flex;
  align-items: center;
  /* min-width:0 ist Pflicht, sobald das Feld als flex:1 neben festen Nachbarn sitzt
     (Such-Topbar: Zurueck-Knopf + Feld + Icons). Ohne das behaelt es seine Inhaltsbreite,
     schrumpft NICHT und schiebt die Icons ueber den rechten Rand. */
  min-width: 0;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  height: var(--tap-target-min);
  margin: var(--space-2) var(--space-5);
}
.search-input input {
  flex: 1;
  min-width: 0;   /* siehe oben: sonst blockiert der Input das Schrumpfen des Feldes */
  border: none;
  outline: none;
  background: transparent;
  /* --fs-input (16px): unter 16px zoomt iOS beim Fokus in die Seite (D-11), 
     Diego-Befund 18.07. „sobald ich auf die Leiste klicke, zoomt das rein". */
  font-size: var(--fs-input, 16px);
  color: var(--text);
}
/* Das Feld selbst ist die Trefferflaeche und reicht ueber die ganze Hoehe der Leiste,
   auch ueber deren 1-px-Rand (sonst 46 statt 48 px). Vorher war es 19 px hoch. */
.search-input input { align-self: stretch; margin-block: -1px; }
.search-input svg { color: var(--text-muted); flex-shrink: 0; }

/* === Bottom Nav (Tier 1, fixed) === */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .nav-inner {
  display: flex;
  max-width: var(--content-max-width);
  margin: 0 auto;
}
.bottom-nav .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) 0 var(--space-3);
  /* Diego 18.07.: Tab-Bar wird übersehen → dezent präsenter (dunklere Grundfarbe,
     600er-Label, minimal größere Icons), bewusst KEIN Redesign. */
  color: var(--text-soft);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.bottom-nav .nav-item.active { color: var(--text); font-weight: 700; }
.bottom-nav .nav-item svg { width: 24px; height: 24px; }

/* === Empty State === */
.empty-state {
  padding: var(--space-12) var(--space-5);
  text-align: center;
  color: var(--text-muted);
}
.empty-state svg { margin: 0 auto var(--space-3); opacity: 0.5; }

/* === Skeleton Loader === */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-soft) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Sprunglinks (WCAG 2.4.1 Bypass Blocks, Level A) ==================
   Ohne sie liegt die Hauptnavigation hinter dem gesamten Produktraster: auf
   Ragazzis Store-Profil waren das 1.277 Tab-Stopps (gemessen 02.09.2026). Wer
   keine Maus benutzt, kam von einem Store nicht mehr zur Suche.
   Unsichtbar, bis jemand mit der Tastatur ankommt: dann sitzen sie oben links
   ueber allem. Fuer Maus und Touch aendert sich nichts. */
.sprunglinks { position: absolute; top: 0; left: 0; z-index: 1000; }
.sprunglink {
  position: absolute;
  top: 0; left: 0;
  transform: translateY(-140%);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  padding: 12px var(--space-5);
  background: var(--text);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  white-space: nowrap;
  transition: transform var(--transition-fast);
}
.sprunglink:nth-of-type(2) { left: 190px; }
.sprunglink:focus { transform: translateY(0); }
.sprunglink:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .sprunglink { transition: none; } }

/* === Utility === */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  /* Unsichtbar, aber gerendert: ohne feste Stufe zaehlt der Browser-Default (h1 = 2em)
     als eigene Schriftgroesse in der Skala-Messung. */
  font-size: var(--fs-base);
}
.text-center { text-align: center; }
.text-soft { color: var(--text-soft); }
.text-muted { color: var(--text-muted); }
.divider { height: 1px; background: var(--border); margin: var(--space-4) var(--space-5); }

/* === Desktop / wide viewports === */
/* Mobile stays a centered app-frame; on laptops/desktops we widen the frame and
   show more product columns so the screen real-estate is actually used. */
@media (min-width: 1024px) {
  .app { max-width: 760px; }
  .bottom-nav .nav-inner { max-width: 760px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .app { max-width: 1040px; }
  .bottom-nav .nav-inner { max-width: 1040px; }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}
/* A-4 (Diego 18.07.): Primär-Controls nicht über die volle Frame-Breite strecken, 
   ab 900px deckeln Haupt-CTAs und Standort-/Geo-Leisten auf Lesebreite. */
@media (min-width: 900px) {
  .feed-cta, .btn-block { max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* === Filter: Mehrfachauswahl-Dropdown === */
/* Standard: Filter füllen die Breite / brechen um (wie vorher, Desktop + Feed).
   Horizontales Wischen NUR auf der mobilen Suchseite, siehe Media-Query unten. */
.ms-mount, .ms { flex: 1 1 140px; min-width: 0; }
.ms .ms-trigger {
  width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Aktiv = dunkler Doppelrand (NICHT mehr Fettung, die tragen jetzt alle Filter, s. u.). */
.ms .ms-trigger.ms-active { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
/* Panel hängt an <body> (fixed), Position via JS, so kann die scrollende Leiste es nicht abschneiden. */
.ms-panel {
  position: fixed; z-index: 1000; max-width: 80vw;
  max-height: 280px; overflow-y: auto; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.ms-opt {
  display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--text); cursor: pointer;
}
.ms-opt:hover { background: var(--surface); }
.ms-opt input { width: 16px; height: 16px; accent-color: var(--text); flex: 0 0 auto; }

/* === Filter-Bausteine: Select · Chip · Preis-Popover ===
   Zentral hier, damit Home-Feed, Suche UND Store-Profil exakt dieselben Filter tragen
   (Diego 17.07.: "filter cards ebenfalls gleich designen wie im home feed oder in der
   suche -> vertrautes design"). Vorher lagen diese Regeln doppelt in den <style>-Blöcken
   von index.html + search.html, store.html benutzte dieselben Klassen, lud sie aber nie
   und zeigte darum ein nacktes natives <select> + randlose Marke/Kategorie-Trigger. */
.filter-select {
  flex: 1 1 140px; min-width: 0; min-height: var(--tap-target-min); padding: 10px 30px 10px 13px;
  border: 1px solid var(--border, #ECECEC); border-radius: var(--radius-md);
  background: var(--bg-card, #fff);
  font: inherit; font-size: var(--fs-sm); color: var(--text, #0F0F0F); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F6F6F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 12px;
}
.filter-select:focus { outline: none; border-color: var(--text, #0F0F0F); }
/* Preis = Chip (Regler erscheint erst beim Öffnen, Zalando-Struktur, unser Design) */
.filter-pill {
  flex: 1 1 140px; min-width: 0; min-height: var(--tap-target-min); display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 13px; border: 1px solid var(--border, #ECECEC); border-radius: var(--radius-md);
  background: var(--bg-card, #fff);
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text, #0F0F0F);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* Chevron = EXAKT das der Selects (Linsen-Audit 17.07.: Mini-Dreieck „▾" neben großem
   SVG-Chevron war Formen-Wildwuchs im selben Panel, eine Form, überall). */
.filter-pill::after {
  content: ''; margin-left: auto; width: 12px; height: 12px; flex: 0 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F6F6F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}
/* Natives Such-Clear-X in Haus-Optik (Linsen-Audit: das blaue Webkit-X war das einzige
   bunte Element der Graustufen-App). appearance:none + mask in currentColor, das
   VERHALTEN (Tap löscht, native Fläche) bleibt unangetastet. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-left: 6px; flex: 0 0 auto; cursor: pointer;
  background: currentColor; color: var(--text-muted, #6F6F6F);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") no-repeat center / 14px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") no-repeat center / 14px;
}
.filter-pill #pr-chip-val { color: var(--text-soft, #5C5C5C); }
.filter-reset { flex: 0 0 auto; justify-content: center; color: var(--text-soft, #5C5C5C); }
.filter-reset::after { content: none; }
.filter-reset:hover { border-color: var(--text, #0F0F0F); color: var(--text, #0F0F0F); }
.filter-reset[hidden] { display: none; }

/* Fett, Diego 17.07.: "Filter immer fett formatiert". EINE Stufe (600 = die im Haus
   etablierte Betonung, s. .store-tab.active) für ALLE Bedienelemente der Filter-/Sortier-
   leisten auf allen drei Flächen. Keine ad-hoc-Weights daneben streuen. */
/* .ms-opt = die Optionen IM Mehrfachauswahl-Panel (Marken-/Kategorie-/Store-Namen). Dort wird
   der Filter tatsächlich gewählt, "immer fett" endet nicht am Panel-Rand. */
.filter-select, .filter-pill, .filter-toggle, .sort-toggle, .sp-chip, .ms-opt { font-weight: 600; }

/* .sp-chips/.sp-chip ZENTRAL (Linsen-Audit 17.07.: war byte-gleich doppelt in search.html-Inline
   und store-profile.css, eine Form, ein Ort). Genutzt von Suche (Vorschläge/Unterkategorien/
   0-Treffer-Lockerung) und Store-Profil (Unterkategorien/Lockerung). */
/* padding oben und unten 4 px: der Chip ist 40 px hoch, seine Trefferflaeche 48 (siehe
   Trefferflaeche unten). Ein waagerecht rollender Behaelter schneidet alles ab, was ueber
   seinen Innenrand ragt; die negativen Raender halten das Layout, wo es war. */
.sp-chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0; margin: -4px 0 -2px; }
.sp-chips::-webkit-scrollbar { display: none; }
/* DER Chip der App (Diego 18.08.): Facetten im Feed/Suche/Store-Profil, Filter auf der
   Karte, Groessen und Zeitfenster in den Sheets, vorher vier eigene Optiken
   (.sp-chip, .p-chip, .vereo-chip, .fs-chip). Aktiv wird sowohl ueber .active als auch
   ueber aria-pressed erkannt, weil die Sheets den Zustand barrierefrei fuehren. */
.sp-chip {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: var(--tap-target-min); min-height: 40px; white-space: nowrap; padding: 9px 16px;
  border: 1px solid var(--border, #ECECEC); border-radius: var(--radius-pill);
  background: var(--bg-card, #fff);
  font-family: inherit; font-size: var(--fs-sm); color: var(--text-soft, #5C5C5C);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  /* Zustandswechsel (Hover/Aktiv/Auswahl) weich statt hart, plus taktiler Druck. */
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.sp-chip:hover { border-color: var(--text, #0F0F0F); color: var(--text, #0F0F0F); }
.sp-chip.active, .sp-chip[aria-pressed="true"] { background: var(--text, #0F0F0F); color: #fff; border-color: var(--text, #0F0F0F); }
.sp-chip:active:not([disabled]) { transform: scale(0.96); }
.sp-chip[disabled] { opacity: 0.35; cursor: not-allowed; }
/* Chevron = EXAKT das der Filter-Felder (app.css:830). Vorher stand hier ein Text-„▾"
   mit 10px, zwei Formen fuer dasselbe Signal. */
.sp-chip .chip-caret {
  content: ''; width: 12px; height: 12px; flex: 0 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F6F6F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}
.sp-chip.active .chip-caret { filter: invert(1) brightness(2); }
/* Aktiv-Marker: Fettung ist als Zustandssignal verbraucht (alles fett) → aktiv = dunkler
   Doppelrand. Gilt für Mehrfachauswahl (.ms-active, s. o.) und Preis-Chip gleich. */
.filter-pill.is-active { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }

.price-pop {
  position: fixed; z-index: 60; width: 300px; max-width: calc(100vw - 24px);
  background: var(--bg-card, #fff); border: 1px solid var(--border, #ECECEC);
  border-radius: var(--radius-lg); box-shadow: 0 14px 36px rgba(0,0,0,0.2); padding: 16px;
  font-family: var(--font-body); animation: vereo-locpop 120ms ease-out;
}
.price-pop .pp-boxes { display: flex; align-items: center; gap: 8px; }
.price-pop .pp-box { flex: 1 1 0; display: flex; align-items: center; gap: 5px; border: 1px solid var(--border, #ECECEC);
  border-radius: var(--radius-sm); padding: 8px 10px; font-size: var(--fs-xs); color: var(--text-soft, #5C5C5C); }
.price-pop .pp-box input { width: 100%; min-width: 0; border: none; outline: none; background: none; font: inherit; font-size: var(--fs-input, 16px); font-weight: 700; color: var(--text, #0F0F0F); -moz-appearance: textfield; }
.price-pop .pp-box input::-webkit-outer-spin-button, .price-pop .pp-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-pop .pp-box i { font-style: normal; color: var(--text-muted, #6F6F6F); }
.price-pop .pp-dash { color: var(--text-muted, #6F6F6F); }
.price-pop .pp-track { position: relative; height: 26px; margin: 18px 6px 4px; }
.price-pop .pp-track::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: var(--radius-pill); background: var(--border, #ECECEC); }
.price-pop .pp-fill { position: absolute; top: 11px; height: 4px; border-radius: var(--radius-pill); background: var(--text, #0F0F0F); }
.price-pop .pp-track input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.price-pop .pp-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--text, #0F0F0F); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.3); cursor: pointer; }
.price-pop .pp-track input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--text, #0F0F0F); border: 3px solid #fff; cursor: pointer; }
.price-pop .pp-track input[type=range]::-webkit-slider-runnable-track { background: none; border: none; }
.price-pop .pp-track input[type=range]::-moz-range-track { background: none; }
.price-pop .pp-reset { margin-top: 14px; width: 100%; padding: 9px; border: 1px solid var(--border, #ECECEC); border-radius: var(--radius-sm);
  background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft, #5C5C5C); cursor: pointer; }
/* Auch von .loc-pop (index.html) genutzt. */
@keyframes vereo-locpop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* === Filterleiste === */
/* Desktop: Sortierung + Filter zusammen in EINER umbrechenden Reihe. */
.filter-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px; }
.sort-bar, .filter-bar { display: contents; }     /* Inhalte fließen in die .filter-controls-Reihe */
.filter-toggle, .sort-toggle { display: none; }   /* Box-Buttons nur mobil */
/* Sortier-Dropdown (#feed-sort) im Desktop-Filterband klar als SORTIERUNG markieren: Sortier-Icon
   links IM Feld → unterscheidet es von den Filter-Kacheln. flex-basis = wie alle anderen Boxen
   (gleich groß); Icon vertikal exakt zentriert (top:50% + translate, nicht von Flex-Quirks abhängig). */
.sort-field { position: relative; display: inline-flex; align-items: center; flex: 1 1 140px; min-width: 0; }
.sort-field .sort-field-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-soft, #5C5C5C); pointer-events: none; }
.sort-field .filter-select { width: 100%; padding-left: 36px; }

/* Mobil (Feed + Suche): links "Filter" (~80%), rechts Sortier-Icon (Box). Beide klappen
   ihren Bereich aus; Sortierung ist von den Filtern getrennt. */
@media (max-width: 640px) {
  .sort-bar, .filter-bar { display: none; width: 100%; }
  .filter-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto;
    min-height: var(--tap-target-min);
    padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-card); font-family: inherit; font-size: var(--fs-sm); color: var(--text); cursor: pointer;
  }
  .sort-toggle {
    display: flex; align-items: center; justify-content: center; flex: 0 0 56px;
    min-height: var(--tap-target-min);
    padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-card); color: var(--text); cursor: pointer;
  }
  .filter-toggle[aria-expanded="true"], .sort-toggle[aria-expanded="true"] { border-color: var(--text); }
  .filter-controls.filters-open .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
  .filter-controls.sort-open .sort-bar { display: flex; margin-top: 2px; }
  .sort-bar .filter-select { width: 100%; }
}

/* === Store-Karte im Feed/Ergebnis-Grid, EIN Grid-Feld, exakt so groß wie die Produktkarte
   (Diego 2026-07-15: Produkt-/Store-/Listen-Karten sind IMMER gleich groß). === */
.store-feed-card {
  grid-column: span 1; position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--store-radius-card); overflow: hidden;
  transition: transform var(--transition-fast);
}
.store-feed-card:active { transform: scale(0.99); }
/* flex: 1 fuellt die Karte bis zur Reihenhoehe, min-height haelt auch die kuerzeste
   Textflaeche bei 48 px (Suche: "N22" mit einer Zeile Meta war 44 px). */
.store-feed-card .sfc-main { display: block; flex: 1 0 auto; min-height: var(--tap-target-min); color: inherit; text-decoration: none; }
.store-feed-card .sfc-img {
  position: relative; width: 100%; flex: 0 0 auto; aspect-ratio: 3/4;
  background: var(--surface); overflow: hidden;
}
.store-feed-card .sfc-imglink { display: block; width: 100%; height: 100%; }
.store-feed-card .sfc-img img { width: 100%; height: 100%; object-fit: cover; }
.store-feed-card .sfc-initial {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-family: var(--font-display); font-size: 40px; color: var(--text-muted); background: var(--surface-soft);
}
.store-feed-card .sfc-body { padding: var(--space-2) var(--space-3) var(--space-3); }
.store-feed-card .sfc-name {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 400; letter-spacing: var(--ls-tight);
}
.store-feed-card .sfc-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.store-feed-card .sfc-meta .sfc-star { color: var(--text); font-weight: 600; }
/* Markenliste am Kartenboden, füllt den freien Platz (v. a. Laptop) sauber auf. */
.store-feed-card .sfc-brands {
  display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.store-feed-card .sfc-brand-pill {
  font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.4;
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 9px; white-space: nowrap;
}

/* === List-Karte (eine ganze Liste als Karte; gleiche Maße wie die Store-Karte) === */
.list-feed-card {
  grid-column: span 1; position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--store-radius-card); overflow: hidden;
  transition: transform var(--transition-fast);
}
.list-feed-card:active { transform: scale(0.99); }
.list-feed-card .lfc-main { display: block; color: inherit; text-decoration: none; }
.list-feed-card .lfc-img {
  position: relative; width: 100%; flex: 0 0 auto; aspect-ratio: 1/1; min-height: 0;
  background: var(--surface); overflow: hidden;
}
.list-feed-card .lfc-imglink { display: block; width: 100%; height: 100%; }
.list-feed-card .lfc-mosaic {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px;
  width: 100%; height: 100%;
}
.list-feed-card .lfc-mosaic .lfc-tile { position: relative; overflow: hidden; }
.list-feed-card .lfc-mosaic .lfc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.list-feed-card .lfc-mosaic--one { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.list-feed-card .lfc-mosaic--one .lfc-tile { grid-column: 1 / -1; grid-row: 1 / -1; }
/* >4 Teile: 4. Kachel abgedunkelt + „+N" */
.list-feed-card .lfc-tile--more img { filter: brightness(0.4); }
.list-feed-card .lfc-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 400; letter-spacing: var(--ls-tight);
}
/* „+ Neue Liste"-Karte in Listengröße (gestrichelt) */
.list-feed-card.lfc-new {
  grid-column: span 1; min-height: 205px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px dashed var(--border); cursor: pointer; color: var(--text-soft);
}
.list-feed-card.lfc-new:hover { border-color: var(--text); color: var(--text); }
.list-feed-card.lfc-new .lfc-new-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.list-feed-card.lfc-new .lfc-new-plus { font-size: var(--fs-xl); line-height: 1; font-weight: 400; }
.list-feed-card .lfc-tag {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; font-weight: 700;
  background: rgba(255,255,255,0.94); color: var(--text); padding: 2px 7px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.16);
}
.list-feed-card .lfc-add {
  /* 9 statt 5 px vom Rand: die unsichtbare 48-px-Flaeche (Trefferflaeche oben) ragt 9 px
     ueber den 30-px-Knopf, und die Karte schneidet ab, was ueber ihren Rand geht. */
  position: absolute; bottom: 9px; right: 9px; z-index: 3;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; border-radius: 999px; cursor: pointer;
  background: var(--text); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  transition: transform .12s ease-out;
}
.list-feed-card .lfc-add svg { width: 15px; height: 15px; }
.list-feed-card .lfc-add:active { transform: scale(0.86); }
.list-feed-card .lfc-add.lfc-edit { text-decoration: none; }   /* Admin: Stift ist ein <a> */
.list-feed-card .lfc-body { padding: var(--space-2) 10px var(--space-2); }
.list-feed-card .lfc-name {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 400; letter-spacing: var(--ls-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-feed-card .lfc-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 2px;
  font-size: var(--fs-xs); color: var(--text-muted);
}
/* Feed-Karten sind ALLE gleich groß, Produkt-, Store- UND Listen-Karte belegen EIN Grid-Feld
   (1 Spalte) mit gleichem 3:4-Bild; die Zeilenhöhe gleicht das Grid ohnehin an. VERBINDLICH
   (Diego 2026-07-15): nie wieder unterschiedliche Kartengrößen im Feed → KEIN `span 2` mehr.
   Store-Marken-Pills raus (waren nur Platzfüller der alten 2-breiten Karte → Höhe unruhig). */
.list-feed-card--feed { grid-column: span 1; }
.list-feed-card--feed .lfc-img { aspect-ratio: 3/4; flex: 0 0 auto; }
#product-grid .store-feed-card .sfc-brands,
.product-grid .store-feed-card .sfc-brands { display: none; }
.list-feed-card--feed .lfc-name { font-size: var(--fs-md); }
.list-feed-card--feed .lfc-meta { font-size: var(--fs-xs); }
/* Feed-Cover: ALLE Produktbilder VOLL sichtbar (contain statt cover/Beschnitt), je Kachel auf
   weißem Grund mit etwas Luft → liest sich als kuratiertes 2×2-„Board". Ein hochgeladenes
   Einzel-Titelbild (--one) bleibt formatfüllend (cover). */
.list-feed-card--feed .lfc-mosaic:not(.lfc-mosaic--one) { background: var(--border, #ECECEC); gap: 1px; }
.list-feed-card--feed .lfc-mosaic:not(.lfc-mosaic--one) .lfc-tile { background: #fff; padding: 9px; box-sizing: border-box; }
.list-feed-card--feed .lfc-mosaic:not(.lfc-mosaic--one) .lfc-tile img { object-fit: contain; }
/* „+N"-Kachel: dunkler Schleier über der GANZEN Kachel (nicht nur dem Bild), damit die Zahl
   auch auf dem hellen contain-Grund lesbar bleibt. */
.list-feed-card--feed .lfc-mosaic:not(.lfc-mosaic--one) .lfc-tile--more img { filter: none; }
.list-feed-card--feed .lfc-mosaic:not(.lfc-mosaic--one) .lfc-tile--more .lfc-more {
  background: rgba(15,15,15,0.55); border-radius: 0;
}

/* === Listen-Tabs (Teile | Stores) + Store-Aufschlüsselung/Route === */
.ls-tabs { display: inline-flex; gap: 4px; margin: 4px 0 14px; background: var(--surface); border-radius: 999px; padding: 3px; }
.ls-tabs button { border: none; background: none; padding: 7px 16px; border-radius: 999px; font: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--text-muted); cursor: pointer; }
.ls-tabs button.is-on { background: var(--text); color: #fff; }
.ls-head { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.45; margin: 0 0 12px; }
.ls-loading { padding: 24px 4px; color: var(--text-muted); font-size: var(--fs-base); }
/* Auswählbare Store-Cards im Stores-Tab (Bild wie im Feed) + Auswahl-Häkchen. */
.ls-scards { display: flex; flex-direction: column; gap: 10px; }
.ls-scard {
  position: relative; display: flex; align-items: stretch; gap: 0; width: 100%; min-height: 88px; padding: 0;
  border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg-card);
  cursor: pointer; text-align: left; transition: border-color 120ms ease-out;
}
.ls-scard.is-sel { border-color: var(--text); }
.ls-scard-img { position: relative; width: 110px; flex: 0 0 auto; background: var(--surface); overflow: hidden; }
.ls-scard-img img { width: 100%; height: 100%; object-fit: cover; }
.ls-scard-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--text-muted); }
.ls-scard-check {
  position: absolute; top: 7px; left: 7px; width: 24px; height: 24px; border-radius: 999px;
  background: rgba(255,255,255,0.92); border: 1.5px solid var(--border); color: transparent;
  display: flex; align-items: center; justify-content: center; transition: background .12s ease-out, color .12s ease-out, border-color .12s ease-out;
}
.ls-scard-check svg { width: 14px; height: 14px; }
.ls-scard.is-sel .ls-scard-check { background: var(--text); border-color: var(--text); color: #fff; }
.ls-scard-body { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 12px 14px; min-width: 0; }
.ls-scard-name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 400; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-scard-meta { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-cta-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 18px; }
.ls-cta { padding: 12px 22px; border-radius: 999px; font: inherit; font-size: var(--fs-base); font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); transition: opacity 120ms ease-out; }
.ls-cta--route { background: var(--text); border-color: var(--text); color: #fff; }
.ls-cta:disabled { opacity: .38; cursor: not-allowed; }

/* (Route-Banner am 18.08. entfernt, CSS ohne Markup, seit dem Karten-Umbau ungenutzt.) */

/* === Like-Herz auf Produkt- und Store-Karten === */
.card-like {
  position: absolute; bottom: 2px; right: 2px; z-index: 3;
  width: var(--tap-target-min, 48px); height: var(--tap-target-min, 48px); display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: transparent; cursor: pointer;
  color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  transition: transform .12s ease-out, color 120ms ease-out;
}
.card-like svg { width: 18px; height: 18px; }
.card-like:active { transform: scale(0.84); }
/* „Gemerkt" = gefülltes Herz in VEREO-Bordeaux (Diego 12.07.: dunkles Rot, nicht aggressiv). */
.card-like.is-on { color: var(--vereo-accent, #7F1D1D); }
.card-like.is-on svg { fill: currentColor; }
.card-like:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* === Bilder sanft einblenden (Feinschliff) ===
   Karten-Bilder faden beim LADEN ein statt hart aufzupoppen. Default = sichtbar (opacity 1);
   nur solange ein Bild noch lädt, setzt cards.js `.vereo-fade-pending` (opacity 0). So bleibt
   nichts unsichtbar, falls JS ausfällt, und Cache-Treffer blitzen nicht. */
.product-card img, .store-feed-card img, .list-feed-card img { transition: opacity var(--transition-base, 200ms) ease-out; }
.vereo-fade-pending { opacity: 0; }

/* === Feed-Einlauf (nur die ERSTE Karten-Charge) ===
   Sanftes Fade-up mit kleiner Staffelung, von feed.js nur beim ersten Render gesetzt, Pagination
   und Filter-Rerenders bleiben ruhig. Transform statt margin → kein Reflow, GPU-glatt. */
@keyframes vereo-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vereo-card-enter { animation: vereo-card-in 320ms ease-out both; animation-delay: var(--enter-delay, 0ms); }

/* === Barrierefreiheit: Bewegung reduzieren (app-weit) ===
   Respektiert die OS-Einstellung „Bewegung reduzieren": Animationen/Transitions/Sheet-Slides
   werden praktisch sofort, ohne dass sich Funktion oder Layout ändern. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Cosmos-Style „in welcher Liste"-Label (unten links, erscheint nach dem Merken) + Pfeil → Auswahl. */
.card-collect {
  position: absolute; bottom: 8px; left: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 3px; max-width: 62%;
  padding: 5px 6px 5px 10px; border: none; border-radius: 999px;
  background: rgba(255,255,255,0.94); color: var(--text, #0F0F0F);
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.20); transition: transform .12s ease-out;
}
.card-collect[hidden] { display: none; }
.card-collect .cc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-collect .cc-chev { width: 13px; height: 13px; flex: 0 0 auto; opacity: .7; }
.card-collect:active { transform: scale(0.94); }
.card-collect:focus-visible { outline: 2px solid var(--text, #0F0F0F); outline-offset: 2px; }

/* === Merken-Button mit Label (Produktseite), sichtbarer als das kleine Topbar-Herz.
   Merken ist ~100 % prädiktiv für Wiederkehr → wir machen es prominent + belohnen es. === */
.merk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap-target-min); padding: 0 18px;
  background: #fff; color: var(--text, #0F0F0F);
  border: 1px solid var(--border, #E4E4E4); border-radius: 999px;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-weight: 600; font-size: var(--fs-base); cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}
.merk-btn svg { width: 18px; height: 18px; }
.merk-btn.is-on { background: var(--vereo-accent, #7F1D1D); color: #fff; border-color: var(--vereo-accent, #7F1D1D); }
.merk-btn.is-on svg { fill: currentColor; }
.merk-btn:focus-visible { outline: 2px solid var(--text, #0F0F0F); outline-offset: 3px; }

/* PDP: Listen, in denen das Produkt liegt, als Chips (Klick → zur Liste) + „+" zum Hinzufügen. */
.pdp-lists { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pdp-lists[hidden] { display: none; }
.pdp-list-chip {
  display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--border, #E4E4E4); border-radius: 999px;
  background: var(--surface, #F7F7F5); color: var(--text, #0F0F0F); text-decoration: none;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); font-size: var(--fs-base); font-weight: 600;
  transition: transform .12s ease-out, border-color .12s ease-out;
}
.pdp-list-chip:hover { border-color: var(--text-soft, #5C5C5C); }
.pdp-list-chip:active { transform: scale(0.97); }
.pdp-list-add {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border, #E4E4E4); border-radius: 999px; background: var(--bg-card, #fff); color: var(--text, #0F0F0F);
  font-size: 20px; line-height: 1; cursor: pointer; transition: transform .12s ease-out, border-color .12s ease-out;
}
.pdp-list-add:hover { border-color: var(--text, #0F0F0F); }
.pdp-list-add:active { transform: scale(0.94); }
.pdp-list-add:focus-visible, .pdp-list-chip:focus-visible { outline: 2px solid var(--text, #0F0F0F); outline-offset: 2px; }
.merk-nudge {
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: var(--fs-base); color: var(--text-soft, #5C5C5C); margin: 10px 0 0;
}
/* Produktseite-Aktionen unter dem Preis (Zalando/AY-Konvention): Anrufen = großer Primär-CTA
   am erwarteten "In den Warenkorb"-Platz; Merken/Teilen sekundär nebeneinander darunter. */
.pdp-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pdp-secondary { display: flex; gap: 10px; }
.pdp-secondary .merk-btn { flex: 1 1 0; justify-content: center; }


/* Rechtliche Links im Seitenfuss (auf allen Seiten gleich). */
.legal-links {
  margin-top: 12px;
  font-size: var(--fs-xs);
  display: flex;
  justify-content: center;
  /* Zeilenabstand 31 px: bricht die Reihe um, liegen die 48-px-Flaechen der Links
     (Trefferflaeche oben) genau aneinander statt uebereinander. */
  gap: 31px 16px;
  flex-wrap: wrap;
}
.legal-links a { color: var(--text-muted); text-decoration: none; }
.legal-links a:hover { color: var(--text); }