/* ==========================================================================
   redesign.css — v6-Redesign-Layer (grünes CI), zuletzt geladen.
   Stage 2: Amazon- + eBay-Showcase. Reines Styling, keine Markup-/Logikänderung.
   Nutzt --site-* Tokens (aus site.css) + tokens.css. Rückbau = Link entfernen.
   ========================================================================== */

/* --- Showcase-Flächen ruhiger (Gradient → flach) ------------------------- */
.amazon-showcase,
.ebay-showcase{
  background:#fff;
  border-color:var(--site-line);
  box-shadow:var(--site-shadow);
}
.amazon-showcase-head h3,
.ebay-showcase-head h3{ color:var(--site-navy); }

/* --- eBay: von Blau auf einheitliches grünes CI -------------------------- */
.ebay-eyebrow{ color:var(--site-green); }
.ebay-buy,
.ebay-variant .amazon-product-actions .ebay-buy{ background:var(--site-navy); }
.ebay-buy:hover,
.ebay-variant .amazon-product-actions .ebay-buy:hover{ background:#20362f; }
.ebay-alert{
  border-color:#cfe0d8;
  color:var(--site-green);
  background:var(--site-green-soft);
}
.ebay-variant .amazon-all-offers,
.ebay-variant .amazon-offer-details a,
.ebay-offer-row > a{ color:var(--site-green); }
.ebay-variant .amazon-offer-details{ border-top-color:#e5ebe8; }

/* --- Status als Pille (Amazon + eBay), Text + Punkt ---------------------- */
.amazon-product-state,
.ebay-metric > span{
  display:inline-flex;
  justify-self:start;
  align-items:center;
  gap:7px;
  padding:4px 11px;
  border-radius:999px;
  background:var(--neutral-soft,#eef1ef);
  color:var(--site-muted);
  font-size:var(--text-12);
  font-weight:700;
}
.amazon-product-state.available,
.ebay-metric > span.available{
  background:var(--site-green-soft);
  color:var(--site-green);
}
.amazon-product-state.out_of_stock,
.amazon-product-state.recent_out_of_stock{
  background:#eef1ef;
  color:#68736e;
}

/* --- Preis prominenter & ruhiger (Ink statt „schwer") -------------------- */
.amazon-product-price,
.ebay-metric strong{
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--site-ink);
}

/* --- Primär-CTA einheitlich dunkel, Alarm als dezente grüne Ghost-Aktion - */
.amazon-buy{ background:var(--site-navy); }
.amazon-buy:hover{ background:#20362f; }
.amazon-alert{
  border-color:#d7e0da;
  color:var(--site-green);
  background:var(--site-green-soft);
}

/* --- Showcase = v6-Karten: Bild oben, vertikaler Stapel, separate Karten -- */
.amazon-showcase,
.ebay-showcase{
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
  margin:20px 0 24px;
}
.amazon-showcase-head,
.ebay-showcase-head{ border-bottom:0; padding:0 2px 16px; }
.amazon-disclosure,
.ebay-disclosure{ border-top:0; padding:14px 2px 0; }
.amazon-products{ gap:16px; padding:0; align-items:stretch; }
/* eBay-Grid nicht oben ausrichten -> Karten gleich hoch wie bei Amazon */
.amazon-products.ebay-products{ align-items:stretch; }
.ebay-products .ebay-variant{ align-self:stretch; }
.amazon-product{
  display:flex;
  flex-direction:column;
  gap:9px;
  border:1px solid var(--site-line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:16px 16px 14px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.amazon-product:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
/* Produktbild als Querformat-Banner OBEN (Bilder sind 16:10) */
.amazon-product img{
  width:100%;
  height:auto;
  aspect-ratio:16 / 10;
  object-fit:cover;
  background:#f6f8f7;
  border-radius:12px;
  margin-bottom:2px;
}
.amazon-product-name{ font-size:1.06rem; line-height:1.25; }
/* Kurzer Unterschieds-Text pro Variante */
.amazon-product-diff{
  margin:0;
  color:var(--site-muted);
  font-size:.8rem;
  line-height:1.4;
}
/* Modus-Badges auf dem Bild: Heizen/Kühlen sofort sichtbar --------------- */
.amazon-product-media{ position:relative; display:block; }
.amazon-product-media img{ display:block; margin-bottom:0; }
.mode-badges{ position:absolute; left:8px; bottom:8px; display:flex; gap:6px; }
.mode-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow-sm);
  font-size:var(--text-12);
  font-weight:700;
  color:#1a241f;
}
.mode-badge svg{ width:13px; height:13px; }
.mode-badge.cool svg{ color:#2b7fd4; }
.mode-badge.heat svg{ color:#d9822b; }

/* Amazon/eBay-Hinweis: dauerhaft sichtbar und bewusst leiser als Sortierung. */
.market-note-icon{
  display:inline-flex; order:2; align-items:center; justify-content:flex-end; gap:6px;
  width:auto; max-width:320px; padding:0;
  color:var(--site-muted); cursor:default;
  font-size:var(--text-11); font-weight:550; line-height:1.4; text-align:right;
}
.market-note-icon svg{ width:15px; height:15px; flex:none; opacity:.72; }

/* ==========================================================================
   v6-Pass OBERER SEITENBEREICH: Hero, Stat-Karten, Produktfamilie, Filter
   Ruhigere Hierarchie, einheitliche Karten/Schatten, Touch-Ziele >= 44px,
   sichtbare Fokus-Ringe, Tabellenziffern bei Kennzahlen.
   ========================================================================== */

/* --- Überschriften & Eyebrows einheitlich (Navy + ruhige Laufweite) ------ */
.section-head h2,
.hero h1,
.section h2{ color:var(--site-navy); }
.section-kicker{
  color:var(--site-green);
  letter-spacing:.09em;
  font-weight:700;
}
.section-subtitle{ color:var(--site-muted); }

/* --- Suchkarte: Touch-Ziele, ruhigere Fläche ---------------------------- */
.search-card{
  background:#fff;
  border:1px solid var(--site-line);
  border-radius:16px;
  box-shadow:var(--shadow-sm), 0 8px 24px rgba(16,24,32,.06);
  padding:12px;
}
/* Eingabefelder: eigener Radius. Buttons behalten die Pillenform aus
   components.css – sonst gibt es zwei Button-Formen auf einer Seite. */
.search-card input,
.search-card select,
.search-field{ min-height:46px; border-radius:var(--radius-md); }
.search-card .btn{ min-height:46px; }
.search-card .btn-primary{ background:var(--site-green); border-color:var(--site-green); }
.search-card .btn-primary:hover{ background:var(--color-primary-strong); }
.search-card input:focus-visible,
.search-card select:focus-visible,
.search-card .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--site-green) 42%,transparent);
}

/* --- Vertrauens-Zeile unter der Suche ----------------------------------- */
.hero-trust i{ background:var(--site-green-soft); color:var(--site-green); }
.hero-trust{ color:var(--site-muted); }

/* --- Stat-Karten: Icon links + Kennzahl rechts (füllt die Fläche) ------- */
/* Keine Rahmenlinien um den Streifen – die Karten tragen die Struktur. */
.stats{
  border-top:0;
  border-bottom:0;
  gap:12px;
}
/* Datenstand-Zeile: mittig, mehr Luft, lesbare Größe */
.live-report-note{
  margin-top:20px;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  text-align:center;
  color:var(--site-muted);
  font-size:var(--text-13);
}
.live-report-note a{
  min-height:36px;
  padding:0 15px;
  border-color:var(--site-line);
  background:#fff;
  color:var(--site-green);
  font-size:var(--text-13);
  font-weight:700;
  white-space:nowrap;
}
.live-report-note a:hover{ background:var(--site-green-soft); border-color:#bfe0d1; }

.stats .stat{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:16px 18px;
  border:1px solid var(--site-line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease;
}
.stats .stat:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stats .stat-ic{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:13px;
  background:var(--site-green-soft); color:var(--site-green);
}
.stats .stat-ic svg{ width:21px; height:21px; }
.stats .stat-body{ min-width:0; display:block; }
.stats .stat b{
  display:block;
  font-size:1.55rem;
  line-height:1.12;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--site-ink);
  letter-spacing:-.03em;
}
.stats .stat small{ display:block; color:var(--site-muted); font-size:var(--text-13); }
.stats .stat.avail b{ color:var(--site-green); }
@media(max-width:900px){
  .stats .stat{ padding:14px; gap:11px; }
  .stats .stat-ic{ width:38px; height:38px; border-radius:11px; }
  .stats .stat-ic svg{ width:18px; height:18px; }
  .stats .stat b{ font-size:1.32rem; }
}

/* --- Produktfamilie: Karten wie im Rest des Systems --------------------- */
.variant-card{
  border-color:var(--site-line);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.variant-card:hover,
.variant-card:focus-within{
  border-color:color-mix(in srgb,var(--site-green) 38%,var(--site-line));
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.variant-card.is-selected{
  box-shadow:0 0 0 2px var(--site-green), 0 8px 26px rgba(16,24,32,.09);
  border-color:var(--site-green);
}
.variant-name{ color:var(--site-navy); }
.variant-card .price,
.variant-state strong{ font-variant-numeric:tabular-nums lining-nums; }

/* --- Filter-Chips: Marken-Navy statt Blau-Grau, Touch + Fokus ----------- */
.filter-shell{
  border-color:var(--site-line);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
}
.filter-label{ color:var(--site-muted); }
.chips .chip{
  min-height:40px;
  border-color:var(--site-line);
  color:var(--site-muted);
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.chips .chip:hover{ border-color:var(--border-strong,#c3cec8); color:var(--site-ink); }
.chips .chip.on{
  background:var(--site-navy);
  border-color:var(--site-navy);
  color:#fff;
  box-shadow:none;
}
.chips .chip:focus-visible,
.availability-scope button:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--site-green) 42%,transparent);
}
/* --- Ansicht-Zeile: Umschalter als Segmented Control IN der Filterkarte -- */
.filter-row-view .chips{ align-items:center; gap:8px; }
.filter-row-view .availability-scope{
  display:inline-flex;
  gap:2px;
  margin:0;
  padding:3px;
  border:1px solid var(--site-line);
  border-radius:var(--radius-md);
  background:var(--site-bg,#f4f7f5);
  flex-wrap:nowrap;
}
.filter-row-view .availability-scope button{
  /* Verschachtelter Radius: innen = außen (16) − Innenabstand (3) = 13.
     Bei 16px auf 32px Höhe entstünde exakt eine Pille (Radius = halbe Höhe),
     obwohl der Token stimmt. Höhe zusätzlich auf 36px, damit die Form als
     abgerundetes Rechteck lesbar bleibt. */
  min-height:36px;
  padding:0 13px;
  border:0;
  border-radius:var(--radius-nested);
  background:transparent;
  color:var(--site-muted);
  font-size:.8rem;
  white-space:nowrap;
}
.filter-row-view .availability-scope button:hover{ color:var(--site-ink); }
.filter-row-view .availability-scope button.on{
  background:var(--site-navy);
  color:#fff;
  box-shadow:var(--shadow-sm);
}
/* Trenner zwischen Umschalter und Status-Chips */
.filter-divider{
  display:inline-block; width:1px; height:24px;
  background:var(--site-line); margin:0 3px;
}
@media(max-width:640px){
  .filter-divider{ display:none; }
  .filter-row-view .availability-scope{ width:100%; justify-content:space-between; }
}
.result-summary b{ font-variant-numeric:tabular-nums lining-nums; color:var(--site-ink); }

/* ==========================================================================
   v6-Pass UNTERER SEITENBEREICH: Online-Shop-Tabelle, Karte, Verlauf,
   FAQ und SEO-Text. Ruhige Flächen, Status als Pille, Tabellenziffern.
   ========================================================================== */

/* --- Online-Shop-Tabelle („Händler, Preis und Prüfstatus") -------------- */
.offer-panel{
  border-color:var(--site-line);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
}
.offer-panel-head{ border-bottom-color:var(--site-line); }
.offer-panel-head h3{ color:var(--site-navy); }
.offer-table th{
  background:var(--site-bg,#f4f7f5);
  color:var(--site-muted);
  border-bottom:1px solid var(--site-line);
  letter-spacing:.05em;
}
.offer-table td{ border-bottom-color:#eef2f0; }
.offer-table tbody tr{ transition:background .15s ease; }
.offer-table tbody tr:hover{ background:var(--site-bg,#f4f7f5); }
.offer-merchant{ color:var(--site-ink); }
/* Status als Pille statt nackter Punkt+Text */
.offer-status{
  padding:4px 10px;
  border-radius:999px;
  background:#eef1ef;
  color:var(--site-muted);
  font-size:var(--text-13);
}
.offer-status.available{ background:var(--site-green-soft); color:var(--site-green); }
.offer-status.available i{ background:var(--site-green); }
.offer-status.out_of_stock i{ background:#9aa39f; }
.offer-price{ font-variant-numeric:tabular-nums lining-nums; color:var(--site-ink); font-weight:700; }
.offer-price small{ color:var(--site-muted); font-weight:500; }
/* Toggle „Nicht prüfbare einblenden" im Markenstil */
.offer-unverified-toggle{ min-height:36px; border-color:var(--site-line); }
.offer-unverified-toggle:hover,
.offer-unverified-toggle:focus-visible,
.offer-unverified-toggle.on{
  border-color:#bfe0d1;
  background:var(--site-green-soft);
  color:var(--site-green);
}
.offer-unverified-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--site-green) 42%,transparent);
}


/* Mobil: Tabelle -> Karten (kein horizontales Scrollen bei Kerninhalt) */
@media(max-width:768px){
  .offer-table-wrap{ overflow-x:visible; }
  .offer-table{ min-width:0; display:block; }
  .offer-table thead{ display:none; }
  .offer-table tbody,
  .offer-table tr,
  .offer-table td{ display:block; width:100%; }
  .offer-table tr{
    border:1px solid var(--site-line);
    border-radius:14px;
    background:#fff;
    padding:13px 14px;
    margin:0 0 10px;
  }
  .offer-table tbody tr:hover{ background:#fff; }
  .offer-table td{
    border:0;
    padding:3px 0;
  }
  .offer-table td:first-child{ padding-bottom:7px; }
  .offer-action{ justify-content:flex-start; flex-wrap:wrap; margin-top:6px; }
  .offer-action .btn{ flex:1 1 auto; }
  .offer-panel-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .offer-panel-tools{ justify-items:start; }
  .offer-panel-tools>span{ text-align:left; }
}

/* --- Kartenansicht ------------------------------------------------------ */
.map-panel{
  border-color:var(--site-line);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
}
.map-panel-head h3{ color:var(--site-navy); }
.quality-strip{
  border-color:var(--site-line);
  border-radius:14px;
  color:var(--site-muted);
}
.quality-strip a{ color:var(--site-green); font-weight:650; }
.quality-dot.available{ background:var(--site-green); }
.map-consent .btn-primary{ background:var(--site-green); border-color:var(--site-green); }
.map-consent .btn-primary:hover{ background:var(--color-primary-strong); }
.map-consent a{ color:var(--site-green); }

/* --- Verlauf / Bestandswechsel ----------------------------------------- */
.feed{ border-top-color:var(--site-line); }
.feed-heading h3{ color:var(--site-navy); }
.feed-heading>span{ color:var(--site-muted); }

/* --- SEO-Text: Lesbarkeit ---------------------------------------------- */
.seo-text{
  border-top-color:var(--site-line);
  color:var(--site-muted);
  line-height:1.75;
}
.seo-text h2,
.seo-text h3{ color:var(--site-navy); }
.seo-text p{ max-width:none; }
.seo-text a{ color:var(--site-green); }

/* --- PLZ-Badge: immer an gleicher Stelle (Anfang der Adresszeile) ------- */
.market-list .store-addr .store-postcode,
.store-addr .store-postcode{
  display:inline-flex;
  align-items:center;
  margin:0 8px 0 0;
  padding:2px 8px;
  border:1px solid var(--site-line);
  border-radius:999px;
  background:var(--site-bg,#f4f7f5);
  color:var(--site-muted);
  font-size:var(--text-12);
  font-weight:700;
  font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;
  vertical-align:baseline;
}
.store-title-line{ flex-wrap:nowrap; }
/* Straße immer in EINER eigenen Zeile unter der PLZ */
.store-addr .store-postcode{ margin-bottom:5px; }
.store-addr .store-street{ display:block; }

/* --- Auswahl 1/3 + Karte 2/3 nebeneinander ----------------------------- */
/* Auswahl und Karte bilden EINEN Block: ein Rahmen aussen, dazwischen nur
   eine Trennlinie. Zwei getrennt schwebende Karten wirkten unruhig. */
.filter-map-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:0;
  align-items:stretch;   /* beide Spalten exakt gleich hoch */
  margin:18px 0 20px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.mobile-result-toolbar{ display:none; }
.result-trust-note{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-3);
  margin:var(--space-4) 0 0;
  padding:11px 14px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-bg-subtle);
  color:var(--color-text-muted);
}
.result-trust-note svg{ width:22px; height:22px; color:var(--color-primary); }
.result-trust-note p{ margin:0; font-size:var(--text-12); line-height:1.55; }
.result-trust-note strong{ color:var(--color-text); }
.result-trust-note a{ color:var(--color-primary-strong); font-size:var(--text-12); font-weight:var(--weight-bold); text-decoration:none; white-space:nowrap; }
.filter-map-grid .filter-shell{
  margin:0;
  padding:16px;
  border:0;
  border-right:1px solid var(--color-border);
  border-radius:0;
  box-shadow:none;
}
/* Kartenpanel füllt die Höhe der Filterspalte -> beide Spalten gleich hoch */
.filter-map-grid .map-panel{
  margin:0;
  display:flex;
  flex-direction:column;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.filter-map-grid .map-wrap{ flex:1; display:flex; }
/* In der schmalen Spalte Label über die Chips setzen */
.filter-map-grid .filter-row{ display:block; }
.filter-map-grid .filter-row+.filter-row{ margin-top:14px; padding-top:14px; }
.filter-map-grid .filter-label{
  display:block; min-width:0; padding:0 0 9px;
  font-size:var(--text-11); letter-spacing:.08em;
}
.filter-map-grid .filter-divider{ display:none; }
/* Chips gleichmäßig statt Flatterrand: kompakter, einheitliche Höhe */
.filter-map-grid .chips{ gap:7px; }
.filter-map-grid .chips .chip{
  min-height:36px;
  padding:0 12px;
  font-size:.8rem;
  display:inline-flex;
  align-items:center;
}
/* Ansicht-Zeile: Umschalter volle Breite (3 gleiche), Status darunter (2 gleiche) */
.filter-map-grid .filter-row-view .chips{ display:flex; flex-wrap:wrap; }
/* Umschalter: IMMER drei nebeneinander (volle Breite der Spalte) */
.filter-map-grid .filter-row-view .availability-scope{
  flex:1 0 100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-flow:column;
  gap:2px;
  width:100%;
}
.filter-map-grid .filter-row-view .availability-scope button{
  padding:0 6px;
  font-size:var(--text-12);
  justify-content:center;
}
.filter-map-grid .filter-row-view .chips>.chip{ flex:1 1 calc(50% - 4px); justify-content:center; }
/* Karte wächst mit der Spaltenhöhe statt fester Höhe */
.filter-map-grid #map{ height:auto; flex:1; min-height:300px; width:100%; }
.filter-map-grid .map-panel-head{ padding-bottom:0; }
.filter-map-grid .quality-strip{ margin-bottom:0; }

/* Karten-Container und Legende ohne Rahmen (Vorgabe) */
.map-panel .map-wrap{
  border:0px;
  margin:0 8px 8px;
  border-radius:15px;
  box-shadow:none;
}
.map-panel .map-status-legend{
  border:0px;
}
/* --- Hero-Bild auf Mobil mit Seitenabstand ----------------------------- */
/* Der Hero hat mobil padding:30px 0 22px (kein seitliches Padding), dadurch
   lag das Produktbild bündig am Displayrand – anders als alle anderen
   Inhalte. Abstand entspricht dem .wrap-Padding (18px). */
@media(max-width:900px){
  .hero .product-stage-photo{
    margin-inline:18px;
    width:auto;
  }
}

/* --- Zweite Standortsuche in der Filterkarte --------------------------- */
.filter-location{ display:flex; flex-wrap:wrap; gap:7px; }
.filter-location .search-field{
  flex:1 1 100%;
  display:flex; align-items:center; gap:8px;
  min-height:40px; padding:0 12px;
  border:1px solid var(--site-line); border-radius:var(--radius-md); background:#fff;
}
/* Das globale .search-field>span ist absolut positioniert (left:16px) und
   lag damit ueber dem Platzhalter. Hier laeuft das Feld als Flexbox mit gap,
   also muss das Icon im Fluss stehen. */
.filter-location .search-field > span{
  position:static;
  left:auto;
  flex:none;
  line-height:1;
}
.filter-location .search-field input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:var(--text-14); color:var(--site-ink);
}
.filter-location select{
  flex:1 1 40%;
  min-height:40px; padding:0 10px;
  border:1px solid var(--site-line); border-radius:var(--radius-md); background:#fff;
  font:inherit; font-size:var(--text-13); color:var(--site-ink);
}
.filter-location .btn{
  flex:1 1 55%;
  min-height:40px; border-radius:var(--radius-md);
  background:var(--site-green); color:#fff;
  font-size:var(--text-14); border:0;
}
.filter-location .btn:hover{ background:var(--color-primary-strong); }
.filter-location .search-field:focus-within,
.filter-location select:focus-visible,
.filter-location .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--site-green) 42%,transparent);
}

/* Hinweis in der Kartenkopfzeile bleibt einzeilig */
.map-panel-head p{
  white-space:nowrap;
  font-size:var(--text-13);
  color:var(--site-muted);
  margin:0;
}
@media(max-width:640px){
  .map-panel-head p{ white-space:normal; }
  .mobile-result-toolbar{
    position:sticky;
    top:76px;
    z-index:850;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    margin:0 0 var(--space-3);
    padding:10px 12px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:color-mix(in srgb,var(--color-surface) 94%,transparent);
    box-shadow:var(--shadow-md);
    backdrop-filter:blur(14px);
  }
  .mobile-result-toolbar>div{ min-width:0; display:grid; gap:1px; }
  .mobile-result-toolbar b{ color:var(--color-text); font-size:var(--text-14); }
  .mobile-result-toolbar small{
    overflow:hidden;
    color:var(--color-text-muted);
    font-size:var(--text-11);
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-result-toolbar .btn{ flex:none; min-height:40px; padding-inline:13px; }
  /* Die kompakte Werkzeugleiste ist im geschlossenen Zustand der einzige
     Standort-Einstieg. So erscheint das Standortformular nicht doppelt. */
  .availability-section>.section-head .result-summary{ display:none; }
  .filter-map-grid .filter-shell:not(.is-mobile-expanded){ display:none; }
  .result-trust-note{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    margin-bottom:var(--space-3);
  }
  .result-trust-note a{ grid-column:2; }
}
@media(max-width:1024px){
  .filter-map-grid{ grid-template-columns:1fr; }
  /* Untereinander: Trennlinie wandert von rechts nach unten. */
  .filter-map-grid .filter-shell{
    border-right:0;
    border-bottom:1px solid var(--color-border);
  }
  /* Label bleibt ÜBER dem Inhalt – nebeneinander läuft auf Mobil raus. */
  .filter-map-grid .filter-row{ display:block; }
  .filter-map-grid .filter-label{ display:block; min-width:0; padding:0 0 8px; }
  /* Chips umbrechen statt seitlich abgeschnitten zu werden */
  .filter-map-grid .chips{ flex-wrap:wrap; overflow-x:visible; }
  .filter-map-grid .chips .chip{ flex:0 1 auto; max-width:100%; }
  /* Standortsuche stapelt sauber */
  .filter-location .search-field{ flex:1 1 100%; }
  .filter-location select,
  .filter-location .btn{ flex:1 1 100%; }
  .filter-map-grid #map{ height:300px; }
}
@media(max-width:560px){
  /* Umschalter bleibt EINE Zeile mit drei Feldern – nur kompakter.
     (Ein Umbruch auf zwei Zeilen sah in der Pillen-Fassung kaputt aus.) */
  .filter-map-grid .filter-row-view .availability-scope{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-flow:column;
  }
  .filter-map-grid .filter-row-view .availability-scope button{
    padding:0 3px;
    font-size:var(--text-11);
  }
  .filter-map-grid .filter-row-view .chips>.chip{ flex:1 1 100%; }
}

/* Kartensystem: siehe components.css (EINE Definition für alle Karten).
   Hier stehen nur noch Ausnahmen und Zustände. */
.variant-card.is-selected{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--color-primary), var(--shadow-md);
}
/* Mobile Tabellen-Karten im selben Radius; das umgebende Panel wird dabei
   transparent, sonst liegt eine weiße Karte auf einer weißen Fläche. */
@media(max-width:768px){
  .offer-table tr{ border-radius:16px; border-color:var(--site-line); }
  .offer-panel{
    background:transparent;
    border:0;
    box-shadow:none;
    border-radius:0;
    overflow:visible;
  }
  .offer-panel-head{ border-bottom:0; padding-left:0; padding-right:0; }
  .offer-table-wrap{ background:transparent; }
}
/* Ausnahmen (Vorgaben des Nutzers bleiben bestehen) */
.map-panel .map-status-legend{ border:0; }
.map-panel .map-wrap{ border:0; box-shadow:none; border-radius:15px; }

/* Marken-Icon hinter der Sektionsüberschrift (Amazon / eBay) */
.brand-mark-icon{display:inline-flex;align-items:center;vertical-align:middle;margin-left:9px}
.brand-mark-icon.amazon{width:20px;height:20px;color:#ff9900}
.brand-mark-icon.ebay{gap:0;font-size:.72em;font-weight:800;letter-spacing:-.03em;line-height:1;transform:translateY(1px)}
.brand-mark-icon.ebay b{font-weight:800}

/* ===== Produktwelten: Amazon/eBay-Blöcke wie auf der Startseite ===========
   Andere Welten nutzen world-affiliate.js (.world-marketplace-*). Hier wird
   deren Optik an die Startseiten-Karten (.amazon-product) angeglichen. */
.world-marketplace{background:transparent;border:0;box-shadow:none;margin:20px 0 24px}
.world-marketplace-head{border-bottom:0;padding:0 2px 16px}
.world-marketplace-head h2{color:var(--site-navy);letter-spacing:-.03em}
.world-marketplace-product{
  display:flex;flex-direction:column;gap:9px;
  border:1px solid var(--site-line);border-radius:16px;
  background:#fff;padding:16px 16px 14px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease,transform .2s ease;
}
.world-marketplace-product:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
/* Bild als Querformat-Banner oben, Text darunter */
.world-marketplace-summary{display:block;padding:0}
.world-marketplace-summary img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  background:#f6f8f7;border-radius:12px;margin-bottom:10px;display:block;
}
.world-marketplace-summary h3{font-size:1.06rem;line-height:1.25;color:var(--site-navy);margin:0 0 6px}
/* Status als Pille (Text + Punkt) */
.world-marketplace-status{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 8px;
  padding:4px 11px;border-radius:999px;
  background:#eef1ef;color:var(--site-muted);font-size:var(--text-12);font-weight:700;
}
.world-marketplace-status span{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.world-marketplace-status.available,.world-marketplace-status.ok{background:var(--site-green-soft);color:var(--site-green)}
.world-marketplace-status.limited,.world-marketplace-status.stale{background:#fbeed7;color:#9a5a05}
/* Preis prominent + Tabellenziffern */
.world-marketplace-price{
  display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;
  color:var(--site-ink);font-variant-numeric:tabular-nums lining-nums;
}
/* CTA grün, volle Breite */
.world-marketplace-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:100%;min-height:44px;margin-top:4px;padding:0 18px;
  border-radius:var(--radius-md);background:var(--site-green);color:#fff;
  font-weight:700;font-size:var(--text-14);text-decoration:none;
}
.world-marketplace-cta:hover{background:var(--color-primary-strong)}
/* Angebotszeilen kompakt */
.world-marketplace-offers{border-top:1px solid var(--site-line);margin-top:10px;padding-top:8px}
.world-marketplace-offers>b{display:block;font-size:var(--text-13);font-weight:700;margin-bottom:4px}
.world-marketplace-offers a{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;border-top:1px solid var(--site-line);
  font-size:var(--text-14);color:var(--site-ink);text-decoration:none;
}
.world-marketplace-offers a small{display:block;color:var(--site-muted);font-size:var(--text-12);line-height:1.4}
.world-marketplace-offers a>b{white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}

/* ===== v6-Pass: lokale Marktliste (grünes CI, konsistent zu den Karten) ===== */
/* Status-Badges auf Marken-Grün/Orange statt mittelgrün/indigo */
.market-list .badge.ok{background:var(--site-green-soft);color:var(--site-green);border:1px solid color-mix(in srgb,var(--site-green) 26%,transparent)}
.market-list .badge.online{background:var(--site-green-soft);color:var(--site-green);border:1px solid color-mix(in srgb,var(--site-green) 22%,transparent)}
.market-list .badge.limited{background:#fbeed7;color:#9a5a05;border:1px solid #f0dcae}
.market-list .badge.cycle,
.market-list .badge.no{background:#eef1ef;color:#586259;border:1px solid #dfe4e0}
/* Verfügbarkeits-Punkte in Markenfarben */
.market-list .avail-dot.g{background:var(--site-green);box-shadow:0 0 0 3px var(--site-green-soft)}
.market-list .avail-dot.u{background:#c4cec8}
/* Preise: Tabellenziffern, kräftiges Ink */
.market-list .prod-row .price{font-variant-numeric:tabular-nums lining-nums;color:var(--site-ink)}
/* Karten-Hover konsistent zu Amazon/eBay */
.market-list .card.local-store{transition:background var(--transition-fast);box-shadow:none;border:0;border-top:1px solid var(--color-border);border-radius:0}
.grid.market-list{border:0px}
.market-list .card.local-store:first-child{border-top:0}
.market-list .card.local-store:hover{background:var(--color-bg-subtle)}
/* „So prüfen wir" + Sekundärlinks in Markenfarbe */
.market-list .verification-meta a{color:var(--site-green)}
/* Status-abhängige CTA: ausverkauft/ungeprüft = Ghost, verfügbar = Primär */
/* Ist nichts verfügbar, bleibt der CTA bewusst NICHT grün - grün steht auf
   dieser Seite für Verfügbarkeit. Er ist aber die Hauptaktion der Zeile und
   darf deshalb nicht wie ein Sekundärbutton aussehen: dunkel gefüllt. */
.market-list .card-foot .verify-stock:not(.reserve){
  background:var(--color-navy);
  color:#fff;
  border:1px solid var(--color-navy);
  font-weight:var(--weight-bold);
}
.market-list .card-foot .verify-stock:not(.reserve):hover{
  background:var(--color-navy-strong);
  border-color:var(--color-navy-strong);
}
/* Aktionen gestapelt, volle Breite; Primär GRÜN, Sekundär neutral ------- */
/* Angebotszeilen: etwas luftiger, gut lesbar */


/* --- PLZ als eigene Tabellenspalte --------------------------------------
   Die Postleitzahl stand vorher im Adresstext und machte die Namensspalte
   breit. Als eigene, schmale Spalte wird die Tabelle deutlich kompakter. */
.market-list .local-store .store-zip{
  grid-area:zip;
  display:flex;
  align-items:center;
  min-width:0;
  padding:10px 8px;
  border-left:1px solid var(--color-border);
}
.market-list .local-store .store-zip .store-postcode{
  margin:0;
  font-variant-numeric:tabular-nums lining-nums;
}
@media(max-width:1120px){
  /* Untereinander: die senkrechte Trennlinie ergibt hier keinen Sinn mehr. */
  .market-list .local-store .store-zip{
    padding:0 18px 12px;
    border-left:0;
  }
}
@media(max-width:640px){
  .market-list .local-store .store-zip{ padding:0 16px 10px; }
}

/* --- Einheitliche vertikale Ausrichtung in der Markttabelle --------------
   Die Namensspalte war oben ausgerichtet, alle anderen Zellen mittig. Bei
   zweizeiligen Adressen lief die Zeile dadurch optisch auseinander.
   Jetzt: alle Zellen mittig, Adresse einzeilig -> gleich hohe Zeilen. */
.market-list .local-store .card-top,
.market-list .local-store .card-head{ align-items:center; }
.market-list .local-store .card-top{ padding:13px 18px 13px 20px; }
.market-list .local-store .store-addr{ margin-top:3px; }
/* Adresse auf eine Zeile begrenzen; der vollstaendige Text steht im title. */
.market-list .local-store .store-street{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* --- Filialstatus als eigene Spalte -------------------------------------
   Der Status stand vorher rechts im Namensfeld und war dort schwer zu
   vergleichen. Als eigene Spalte neben der PLZ steht er in einer Flucht. */
.market-list .local-store .store-status{
  grid-area:status;
  display:flex;
  align-items:center;
  min-width:0;
  padding:10px 12px;
  border-left:1px solid var(--color-border);
}
.market-list .local-store .store-status .badge{ margin:0; }
@media(max-width:1120px){
  .market-list .local-store .store-status{
    padding:0 18px 12px;
    border-left:0;
  }
}
@media(max-width:640px){
  .market-list .local-store .store-status{ padding:0 16px 10px; }
}

/* Namenszelle auf volle Zeilenhoehe strecken, sonst sitzt ihr Inhalt hoeher
   als der der uebrigen Spalten. */
.market-list .local-store .card-top{ align-self:stretch; }
/* Lange Marktnamen einzeilig halten -> alle Zeilen exakt gleich hoch.
   Der vollstaendige Name steht im title-Attribut. */
.market-list .local-store .store-name{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* Namenszelle: korrektes Kuerzen. min-width:auto (Flex-Standard) verhindert
   das Schrumpfen der inneren Textbloecke - der Name lief dadurch in die
   PLZ-Spalte hinein. */
.market-list .local-store .card-top{
  margin:0;
  overflow:hidden;
}
/* Volle Zeilenhoehe NUR im Tabellenraster. Im gestapelten Layout (display:
   block) wuerde height:100% die Zeile auf ein Vielfaches aufblaehen. */
@media(min-width:1121px){
  .market-list .local-store .card-top{ align-self:stretch; height:100%; }
}
.market-list .local-store .card-head{ flex:1 1 auto; min-width:0; }
.market-list .local-store .card-head > div{ min-width:0; }

/* ==========================================================================
   OpenStreetMap im Klima-CI
   --------------------------------------------------------------------------
   Bewusst per CSS-Filter auf die KACHELEBENE, nicht durch einen anderen
   Kartenanbieter: Ein zweiter Dienst waere ein weiterer Drittempfaenger und
   der Einwilligungstext nennt ausdruecklich OpenStreetMap.
   Nur .leaflet-tile-pane wird eingefaerbt - Marker, Popups und die
   Attribution bleiben unveraendert und lesbar (Lizenzpflicht).
   ========================================================================== */
.leaflet-tile-pane{
  filter:
    grayscale(.72)
    brightness(1.04)
    contrast(.92)
    sepia(.12)
    hue-rotate(88deg)
    saturate(.78);
}

/* Bedienelemente der Karte an die Designsprache angleichen ---------------- */
.leaflet-container{ background:var(--color-bg-subtle); font-family:var(--site-font); }
body .leaflet-control-zoom{
  border:1px solid var(--color-border);
  border-radius:var(--radius-nested);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.leaflet-control-zoom a{
  width:34px; height:34px; line-height:34px;
  background:var(--color-surface);
  color:var(--color-text);
  border-bottom-color:var(--color-border);
  font-weight:var(--weight-bold);
}
.leaflet-control-zoom a:hover{ background:var(--color-bg-subtle); color:var(--color-primary); }
.leaflet-control-attribution{
  border-radius:var(--radius-xs) 0 0 0;
  background:rgba(255,255,255,.92);
  color:var(--color-text-muted);
  font-size:var(--text-11);
}
.leaflet-control-attribution a{ color:var(--color-primary); }
.leaflet-popup-content-wrapper{
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
}
.leaflet-popup-content{ font-size:var(--text-13); line-height:var(--leading-normal); }
.leaflet-popup-tip{ border:1px solid var(--color-border); }

/* Kopfzeile mitscrollen lassen, damit sie ueber den Spalten bleibt. */
.market-list-head{ overflow-x:auto; scrollbar-width:none; }
.market-list-head::-webkit-scrollbar{ display:none; }

/* --- Karte fuellt die volle Spaltenhoehe --------------------------------
   Die Kopfzeile ("Kartenansicht / Filialen in deiner Naehe") ist entfallen;
   der Hinweis auf OpenStreetMap steht jetzt im Einwilligungs-Platzhalter.
   Bündig bis an die Panelkanten - die Rundung uebernimmt der Aussenrahmen. */
.filter-map-grid .map-panel .map-wrap{
  flex:1;
  display:flex;
  margin:0;
  border-radius:0;
  box-shadow:none;
  border:0;
}
.filter-map-grid #map{
  height:100%;
  min-height:0;
  flex:1;
  border:0;
  border-radius:0;
  margin:0;
}

/* --- Ruhigere Tabelle: keine senkrechten Spaltentrenner ------------------
   Kopfzeile und saubere Ausrichtung tragen die Struktur bereits. Senkrechte
   Linien verdoppeln sie nur und machen die Tabelle unruhig. Es bleiben die
   waagerechten Zeilentrenner. */
.market-list .local-store .store-zip,
.market-list .local-store .store-status,
.market-list .local-store .prod-rows,
.market-list .local-store .verification-meta,
.market-list .local-store .card-foot{
  border-left:0;
}

/* --- Aktionsspalte: Buttons passten nicht in ihre Zelle ------------------
   Das innere Raster war fest (130px 74px 82px = ~300px), die Zelle aber nur
   ~253px breit - die Buttons ragten heraus und wurden abgeschnitten.
   Jetzt flexibel, mit Ueberlaufsperre als Sicherheitsnetz. */
.market-list .local-store .card-foot{
  grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.9fr);
  gap:6px;
  padding:10px 14px;
  overflow:hidden;
}
.market-list .local-store .card-foot .btn{
  min-width:0;
  padding:0 var(--space-3);
  white-space:nowrap;
}

/* ==========================================================================
   Filtermenü schwebt über der Karte (ab Desktop)
   --------------------------------------------------------------------------
   Die Karte nimmt die volle Breite ein, das Menü liegt als eigene Fläche
   darüber. Zwei Dinge sind dabei zu beachten:
     1. Leaflets Zoom-Steuerung sitzt oben links und läge unter dem Menü ->
        sie wandert nach rechts.
     2. Das Menü ist höhenbegrenzt und scrollt intern, damit es auf kurzen
        Fenstern nicht aus der Karte herausläuft.
   Unter 1025px bleibt die gestapelte Anordnung (Menü über der Karte).
   ========================================================================== */
@media(min-width:1025px){
  .filter-map-grid{
    display:block;
    position:relative;
    --map-filter-width:380px;
  }
  .filter-map-grid .map-panel{ min-height:640px; }
  .filter-map-grid .filter-shell{
    position:absolute;
    top:var(--space-4);
    left:var(--space-4);
    z-index:1000;              /* über Leaflet-Panes und -Controls */
    width:min(var(--map-filter-width), calc(100% - 2 * var(--space-4)));
    max-height:calc(100% - 2 * var(--space-4));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:16px;
    border:1px solid var(--color-border);
    border-right:1px solid var(--color-border);
    border-bottom:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface);
    box-shadow:var(--shadow-lg);
  }
  /* Zoom-Steuerung nach rechts, damit sie frei bleibt */
  .filter-map-grid .leaflet-top.leaflet-left{ left:auto; right:0; }
}

/* --- Standort-Knopf neben "Märkte finden" --------------------------------
   Vorher zwang .filter-location .btn{flex:1 1 100%} jeden Button in eine
   eigene volle Zeile. Jetzt teilen sich Radius, Primäraktion und Standort
   eine Zeile; der Standort bleibt sichtbar sekundär (weiß), damit er die
   Hauptaktion nicht verdrängt. */
.filter-location .btn{ flex:1 1 auto; min-width:0; padding:0 var(--space-3); }
.filter-location select{ flex:0 0 86px; }
.filter-location #search-button2{ flex:2 1 118px; }
.filter-location #location-button2{
  flex:1 1 86px;
  background:var(--color-surface);
  color:var(--color-text);
  border:1px solid var(--color-border-strong);
  font-weight:var(--weight-bold);
}
.filter-location #location-button2:hover{
  background:var(--color-bg-subtle);
  border-color:var(--color-primary);
  color:var(--color-primary);
}

/* Zu dritt (Radius + Märkte finden + Standort) passen die Bedienelemente
   nicht in die 308px des schwebenden Menüs. Der Radius rückt deshalb nach
   oben neben das Eingabefeld; darunter teilen sich die beiden Aktionen
   gleichmäßig die Zeile. */
.filter-location .search-field{ flex:1 1 150px; }
.filter-location select{ flex:0 0 92px; }
.filter-location #search-button2{ flex:1 1 130px; }
.filter-location #location-button2{ flex:1 1 120px; }

/* --- KORREKTUREN zum schwebenden Menü ------------------------------------
   1. #map hatte height:100% + min-height:0. Ohne definierte Elternhöhe
      loest 100% zu 0 auf - Leaflet braucht aber einen Container mit Hoehe,
      sonst wird die Karte gar nicht erst gezeichnet.
   2. z-index:1000 lag ueber der klebenden Kopfzeile (z-index:900). Das Menue
      muss darunter bleiben, aber ueber den Kartenebenen liegen. */
.filter-map-grid #map{
  min-height:520px;
}
.filter-map-grid .map-wrap{
  min-height:520px;
}
@media(min-width:1025px){
  .filter-map-grid .filter-shell{ z-index:800; }
}
@media(max-width:1024px){
  .filter-map-grid #map,
  .filter-map-grid .map-wrap{ min-height:320px; }
}

/* Mehr Luft zwischen schwebendem Menü und Kartenrand (16px -> 24px). */
@media(min-width:1025px){
  .filter-map-grid .filter-shell{
    top:var(--space-6);
    left:var(--space-6);
    max-height:calc(100% - 2 * var(--space-6));
    width:min(var(--map-filter-width), calc(100% - 2 * var(--space-6)));
  }
}

/* --- Legende + Prüfmethode schweben ebenfalls über der Karte -------------
   Sie sitzt rechts NEBEN dem Filtermenü (nicht darunter oder mittig), sonst
   überschneiden sich beide auf schmalen Desktops. Unten bleibt Platz für die
   OpenStreetMap-Attribution, die aus Lizenzgründen sichtbar bleiben muss. */
@media(min-width:1025px){
  .filter-map-grid .map-status-legend{
    position:absolute;
    left:calc(var(--space-6) + var(--map-filter-width) + var(--space-6));
    right:var(--space-6);
    bottom:var(--space-6);
    z-index:800;
    margin:0;
    padding:9px 14px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-nested);
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    box-shadow:var(--shadow-md);
  }
  /* Attribution etwas anheben, damit sie nicht unter der Legende klebt. */
  .filter-map-grid .leaflet-control-attribution{ margin-bottom:0; }
}

/* ==========================================================================
   Dunkle Kartenvariante (schwarz-grün)
   --------------------------------------------------------------------------
   Wird über die Klasse .map-theme-dark auf .filter-map-grid aktiviert.
   Standard bleibt die helle Variante. invert() dreht die helle OSM-Kachel
   ins Dunkle, danach wird sie ins Marken-Grün getönt.
   Schwebendes Menü und Legende bleiben bewusst hell - weiße Flächen auf
   dunkler Karte geben den besten Kontrast.
   ========================================================================== */
.map-theme-dark .leaflet-tile-pane{
  /* invert bestimmt, WIE dunkel es wird: bei .93 landen die hellen
     OSM-Flaechen bei rund #272727 - praktisch Schwarz. Mit .78 plus
     angehobener Helligkeit ergibt sich ein mittleres Dunkelgruen, in dem
     Ortsnamen lesbar bleiben und weisse Flaechen trotzdem klar abheben. */
  filter:
    grayscale(1)
    invert(.82)         /* dunkler -> ruhiger */
    brightness(.96)
    contrast(1.22)      /* Kontrast zurueck: .88 flachte die Karte ein */
    sepia(.7)           /* Tönungsbasis */
    hue-rotate(104deg)
    saturate(1.6);      /* gedämpft: 1.25 war grau, 2.4 war grell */
}
.map-theme-dark .leaflet-container{ background:#1b3226; }
body .map-theme-dark .leaflet-control-zoom{
  border-color:rgba(255,255,255,.16);
}
.map-theme-dark .leaflet-control-zoom a{
  background:rgba(34,53,44,.92);
  color:#e6efea;
  border-bottom-color:rgba(255,255,255,.14);
}
.map-theme-dark .leaflet-control-zoom a:hover{
  background:#2c4438;
  color:var(--color-primary-bright);
}
.map-theme-dark .leaflet-control-attribution{
  background:rgba(34,53,44,.9);
  color:#a7bcb3;
}
.map-theme-dark .leaflet-control-attribution a{ color:var(--color-primary-bright); }

/* --- Mobil kompakter: PLZ und Status teilen sich eine Zeile --------------
   Untereinander belegten die beiden schmalen Angaben zusammen ~74px. Als
   Raster nebeneinander spart das rund 40px pro Markteintrag - bei mehreren
   hundert Treffern deutlich spuerbar. */
@media(max-width:640px){
  .market-list .card.local-store{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "identity status"
      "zip status"
      "products products"
      "verification verification"
      "actions actions";
  }
  .market-list .local-store .card-top{
    min-height:0;
    padding:14px 8px 4px 16px;
  }
  .market-list .local-store .store-zip{
    grid-area:zip;
    align-items:flex-start;
    padding:0 0 12px 64px;
  }
  .market-list .local-store .store-status{
    grid-area:status;
    align-items:flex-start;
    justify-content:flex-end;
    max-width:148px;
    padding:14px 14px 10px 4px;
  }
  .market-list .local-store .store-status .badge{
    white-space:normal;
    text-align:center;
    line-height:1.25;
  }
}

/* Menü zusätzlich unten verankern: sonst richtet sich seine Höhe nach dem
   Inhalt und die Unterkante fluchtet nicht mit der Legende (35px statt 25px).
   top + bottom bestimmen jetzt die Höhe, der Inhalt scrollt bei Bedarf. */
@media(min-width:1025px){
  .filter-map-grid .filter-shell{
    bottom:auto;
    max-height:none;
    overflow:visible;
    overscroll-behavior:auto;
  }
}

.filter-map-grid .map-panel .map-wrap{
  position:relative;
  padding:0;
}
.filter-map-grid .map-panel #map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
}

/* ==========================================================================
   Mobil/Tablet: Regeln des Tabellenrasters zurücknehmen
   --------------------------------------------------------------------------
   Einzeilige Kürzung und das feste Aktionsraster sind nur im Tabellenlayout
   sinnvoll. Im gestapelten Layout ist Platz zum Umbrechen - dort wurden
   Marktnamen unnötig abgeschnitten und Route/Alarm samt Hinweistext in
   80px-Spalten gequetscht.
   ========================================================================== */
@media(max-width:1120px){
  .market-list .local-store .store-name,
  .market-list .local-store .store-street{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .market-list .local-store .card-top{ overflow:visible; }

  /* Aktionen untereinander statt nebeneinander gequetscht */
  .market-list .local-store .card-foot{
    grid-template-columns:1fr 1fr;
    gap:8px;
    overflow:visible;
  }
  .market-list .local-store .card-foot > .btn-primary{ grid-column:1 / -1; }
  .market-list .local-store .secondary-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    grid-column:1 / -1;
    margin:0;
  }
  .market-list .local-store .secondary-actions .btn{ width:auto; }
  .market-list .local-store .market-hint{
    grid-column:1 / -1;
    margin:0;
    -webkit-line-clamp:3;
  }
}

/* Mobile Haendlerkarten nutzen die Breite fuer Status und Inhalt, statt
   Desktop-Spalten als leere Flaechen untereinander fortzufuehren. */
@media(max-width:640px){
  #cards:not(.market-list) .card.online-shop{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "identity status"
      "products products"
      "verification verification"
      "actions actions";
    align-items:start;
    min-height:0;
    padding:0;
  }
  #cards:not(.market-list) .online-shop .card-top{
    grid-area:identity;
    display:flex;
    min-width:0;
    margin:0;
    padding:16px 8px 10px 16px;
  }
  #cards:not(.market-list) .online-shop .store-status{
    grid-area:status;
    display:flex;
    justify-content:flex-end;
    max-width:148px;
    padding:16px 16px 10px 4px;
  }
  #cards:not(.market-list) .online-shop .store-status .badge{
    white-space:normal;
    text-align:center;
    line-height:1.25;
  }
  #cards:not(.market-list) .online-shop .prod-rows{
    grid-area:products;
    flex:none;
    margin:0;
    padding:2px 16px;
    border-top:1px solid var(--color-border);
  }
  #cards:not(.market-list) .online-shop .verification-meta{
    grid-area:verification;
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:10px 16px 4px;
    color:var(--color-text-muted);
    font-size:var(--text-11);
  }
  #cards:not(.market-list) .online-shop .card-foot{
    grid-area:actions;
    margin:0;
    padding:10px 16px 16px;
    border-top:0;
  }
  #cards:not(.market-list) .online-shop .card-foot .btn{
    min-height:44px;
  }
}

/* --- Marker auf der dunklen Karte ----------------------------------------
   Die Inline-Farben der Marker sind für die helle Karte gesetzt. Auf dunklem
   Grund wirkten die hellgrauen Punkte wie eine flächige Masse. Hier treten
   verfügbare Märkte hervor, ausverkaufte treten bewusst zurück. */
.map-theme-dark .leaflet-overlay-pane .mk-stock{
  fill:#2fd18a;
  stroke:#0f5132;
  fill-opacity:.95;
}
.map-theme-dark .leaflet-overlay-pane .mk-out{
  fill:#9fb3a8;
  stroke:#26382e;
  fill-opacity:.5;
}
.map-theme-dark .leaflet-overlay-pane .mk-unknown{
  fill:#e0a63c;
  stroke:#4a3413;
  fill-opacity:.75;
}