:root {
  --ab-red: #FF385C;
  --ab-red-soft: #fff1f4;
  --text-900: #222222;
  --text-700: #484848;
  --text-500: #717171;
  --text-400: #9a9a9a;
  --line: #ebebeb;
  --line-soft: #f2f2f2;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --bg-card: #ffffff;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-2: 0 6px 20px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-900);
  background: var(--bg-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  overflow: hidden; /* Scrollen passiert NUR innerhalb #sidebar / #results-panel.
                       Body darf nie scrollen — verhindert, dass fixed/absolute
                       Elemente (z.B. lists-popover) versehentlich eine
                       seitenweite Scrollbar erzeugen. */
}

/* -------- Sidebar -------- */
#sidebar {
  width: 340px;
  height: 100vh;
  overflow-y: auto;
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 24px 20px 32px 20px;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}
#sidebar::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.brand .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  width: 100%;
}
.brand .brand-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.brand h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.5px;
  font-weight: 700;
  color: var(--text-900);
}
.logo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ab-red);
  box-shadow: 0 0 0 4px rgba(255,56,92,0.12);
}
.brand .tagline {
  margin: 0;
  font-size: 12px;
  color: var(--text-500);
  letter-spacing: 0.1px;
}

/* -------- Card -------- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px 16px 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: var(--shadow-2); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-head h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Collapsible section behavior — klick auf collapse-trigger togglet */
.card-collapsible > .collapse-trigger {
  cursor: pointer;
  user-select: none;
}
.card-collapsible > .collapse-trigger:hover h2 { color: var(--text-900); }
.card-head .chev {
  font-size: 9px;
  color: var(--text-400);
  transition: transform 0.2s ease;
  display: inline-block;
  margin-left: 2px;
}
.card-collapsible.collapsed > .collapse-trigger { margin-bottom: 0; }
.card-collapsible.collapsed > .collapse-trigger .chev { transform: rotate(-90deg); }
.card-collapsible.collapsed > *:not(.collapse-trigger) { display: none !important; }

/* "Orte"-Suche: eigene Zeile unter dem Card-Head, volle Breite. */
.places-search-row {
  margin-bottom: 10px;
}
#places-search {
  width: 100%;
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
  font-family: inherit;
  border: 1px solid #EBEBEB;
  border-radius: 999px;
  outline: none;
  background: #FFFFFF;
  color: #222222;
  transition: border-color 0.12s;
  box-sizing: border-box;
}
#places-search::placeholder { color: #9a9a9a; }
#places-search:hover { border-color: #B0B0B0; }
#places-search:focus { border-color: #222222; }
.hint-inline {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-400, #888);
  margin-left: 4px;
}
/* Collapsible details styling */
#regions-card details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  margin-bottom: 12px;
}
#regions-card details > summary::-webkit-details-marker { display: none; }
.card-head-summary h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-500);
}
.card-head-summary h2::after {
  content: " ▸";
  font-size: 9px;
  color: var(--text-400);
  transition: transform 0.15s;
  display: inline-block;
  margin-left: 4px;
}
#regions-card details[open] > summary .card-head-summary h2::after,
#regions-card details[open] > summary h2::after {
  content: " ▾";
}

/* Aktiver-Filter-Indikator: kleiner roter Punkt im Section-Header */
.card-collapsible.has-active-filter > .collapse-trigger h2::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ab-red);
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 56, 92, 0.15);
}

.badge {
  background: var(--text-900);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  min-width: 24px;
  text-align: center;
}

/* -------- Summary Card (hero number) -------- */
.card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  padding: 18px 18px;
}
.summary-main { display: flex; flex-direction: column; }
.summary-num {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--text-900);
  line-height: 1;
}
.summary-sub {
  font-size: 12px;
  color: var(--text-500);
  margin-top: 4px;
}
.summary-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-500);
  font: 500 11.5px/1 inherit;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.summary-reset:hover {
  border-color: var(--text-900);
  color: var(--text-900);
  background: var(--bg-soft);
}
.summary-reset .reset-icon {
  font-size: 13px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-0.5px);
}
.summary-reset:hover .reset-icon { transform: translateY(-0.5px) rotate(-90deg); transition: transform 0.25s; }

/* -------- Pills (filters) -------- */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Scrollable pill-row: verhindert, dass "Orte" und "Scan-Durchläufe"
   bei vielen Einträgen die ganze Sidebar sprengen. */
#regions-pills,
#places-pills {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  align-content: flex-start;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
#regions-pills::-webkit-scrollbar,
#places-pills::-webkit-scrollbar { width: 6px; }
#regions-pills::-webkit-scrollbar-track,
#places-pills::-webkit-scrollbar-track { background: transparent; }
#regions-pills::-webkit-scrollbar-thumb,
#places-pills::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}
#regions-pills::-webkit-scrollbar-thumb:hover,
#places-pills::-webkit-scrollbar-thumb:hover { background: var(--text-400); }
/* Airbnb-Style Pill-System — leichte, schlanke Borders.
 * Ruhend: weiß, 1px sehr helles Grau. Hover: mittleres Grau. Aktiv: 1px Schwarz.
 * Keine gedoppelten Ränder oder inset-Shadows — alles sauber 1px, damit es
 * nicht "fett" wirkt. */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #EBEBEB;
  font-size: 13px;
  line-height: 1.15;
  color: #222222;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s, color 0.12s, transform 0.12s;
  font-weight: 500;
  letter-spacing: 0;
}
.pill:hover { border-color: #B0B0B0; }
.pill:active { transform: scale(0.98); }
.pill input { position: absolute; opacity: 0; pointer-events: none; }

/* Aktiver Zustand — sauberer 1px schwarzer Rand, leicht fetterer Text. */
.pill:has(input:checked) {
  background: #fff;
  border-color: #222222;
  color: #222222;
  font-weight: 600;
}

/* Kleine farbige Dots für Dach-Kategorien — einziger semantischer Farbanker. */
.pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.pill .count {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #717171;
  margin-left: 3px;
  font-weight: 500;
}
.pill:has(input:checked) .count { color: #484848; font-weight: 600; }

/* Property-type tag inside the popup header */
.popup-body .tag.ptype-tag { font-weight: 600; }
.popup-body .tag.ptype-finca     { background: #f3e7d3; color: #6d5426; }
.popup-body .tag.ptype-villa     { background: #dbe6ef; color: #2c4d66; }
.popup-body .tag.ptype-cottage   { background: #eee1d3; color: #705433; }
.popup-body .tag.ptype-townhouse { background: #e3e7ec; color: #3d4753; }
.popup-body .tag.ptype-apartment { background: #dcdce4; color: #2f2f3f; }
.popup-body .tag.ptype-shed      { background: #ededed; color: #555; }

.hint {
  font-size: 11.5px;
  color: var(--text-500);
  margin: -2px 0 8px;
  line-height: 1.4;
}

.flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px 0;
}
.flag-chip {
  display: inline-block;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #fff3e4;
  color: #8a3b00;
  border: 1px solid #f3cfa5;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Image source + cross-check badges inside the popup */
.popup-body .tag.src-pnoa   { background: #dcf2e8; color: #0d5c3a; }
.popup-body .tag.src-google { background: #e8f0fe; color: #1a4e9a; }
.popup-body .tag.xc-agree   { background: #dcf2e8; color: #0d5c3a; }
.popup-body .tag.xc-disagree{ background: #fde2e2; color: #8a1616; }
.popup-body .tag.xc-renewed { background: #e5e6ff; color: #2a2a8a; }
.popup-body .tag.xc-newbuild{ background: #fff3e4; color: #8a3b00; }

/* Cross-check block inside the popup */
.xc-box {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #fafafa;
}
.xc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.xc-src {
  font-size: 11px;
  color: var(--text-500);
}
.xc-img {
  width: 100%;
  border-radius: 8px;
  margin: 4px 0 6px;
}
.xc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.xc-note {
  font-size: 11.5px;
  color: var(--text-700);
  margin: 6px 0 0;
  line-height: 1.35;
}

/* "kein Pool" / "unbekannt" / "ohne Vergleich" — leiser, aber im gleichen Stil
 * wie die echten Pills. Keine gestrichelten Border mehr, stattdessen ein
 * helleres Grau und etwas zurückhaltenderer Text. */
.pill.muted {
  color: #717171;
  background: #FFFFFF;
  border-color: #EBEBEB;
  font-weight: 500;
}
.pill.muted:hover {
  color: #222222;
  border-color: #B0B0B0;
}
.pill.muted:has(input:checked) {
  background: #FFFFFF;
  border-color: #717171;
  color: #484848;
  font-weight: 600;
}

/* -------- Range -------- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 10px;
  outline: none;
  margin: 4px 0 6px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--text-900);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--text-900);
  cursor: pointer;
}
.range-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-400);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

/* -------- Toggles -------- */
.toggle-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.toggle {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #EBEBEB;
  font-size: 12.5px;
  color: #222222;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s, color 0.12s, transform 0.12s;
  font-weight: 500;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle:hover { border-color: #B0B0B0; }
.toggle:active { transform: scale(0.98); }
.toggle:has(input:checked) {
  background: #FFFFFF;
  color: #222222;
  border-color: #222222;
  font-weight: 600;
}

/* -------- Top list -------- */
.top-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 6px;
}
.top-list li:last-child { border-bottom: none; }
.top-list li:hover { background: var(--bg-soft); padding-left: 8px; }
.top-list .score-chip {
  min-width: 34px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 6px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.top-list .score-chip.high { background: #d7263d; }
.top-list .score-chip.mid  { background: #f46036; }
.top-list .score-chip.low  { background: #bbb; }
.top-list .top-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-list .top-sub {
  font-size: 11px;
  color: var(--text-500);
  display: block;
  font-weight: 400;
}

.ghost-btn {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text-900);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
  transition: all 0.15s;
  font-family: inherit;
}
.ghost-btn:hover { border-color: var(--text-900); background: var(--bg-soft); }

/* -------- Map -------- */
#map {
  flex: 1;
  height: 100vh;
  background: #dde6e9;
  min-width: 0; /* allow flex to shrink when results panel is open */
  position: relative; /* anchors the floating lists-fab button */
}

/* Floating-Action-Button "Meine Listen" (oben rechts im Map-Viewport).
 * Der Button bleibt IM Map-Container → er bewegt sich automatisch mit,
 * wenn der User das Results-Panel collapsed (kein JS nötig). */
.lists-fab {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-900);
  font: 600 13px/1 Inter, sans-serif;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.lists-fab:hover {
  background: var(--bg-soft);
  border-color: var(--text-400);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
}
.lists-fab:active { transform: translateY(0); }
.lists-fab[aria-expanded="true"] {
  background: var(--text-900);
  color: #fff;
  border-color: var(--text-900);
}
.lists-fab[aria-expanded="true"] .fab-icon { color: var(--ab-red); }
.lists-fab .fab-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px; /* nie quetschen lassen, egal was das Flex-Layout macht */
  color: var(--ab-red);
  display: block;
  transition: transform 0.15s;
}
.lists-fab:hover .fab-icon { transform: scale(1.1); }
.lists-fab .fab-label {
  letter-spacing: -0.1px;
}
.lists-fab .fab-badge {
  background: var(--ab-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 18px;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #fff;
}
.lists-fab[aria-expanded="true"] .fab-badge { box-shadow: 0 0 0 2px var(--text-900); }

/* Listen-Popover (erscheint als Drawer oben-rechts UNTER dem FAB). */
.lists-popover {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 1300;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 88px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow:
    0 20px 48px rgba(0,0,0,0.18),
    0 0 0 1px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: top right;
  transform: scale(0.96) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s cubic-bezier(.2,.9,.3,1.1);
}
.lists-popover.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
/* Wenn das Results-Panel offen ist, muss NUR das Popover nachrücken —
 * der FAB sitzt bereits im Map-Container (position: absolute) und wird
 * automatisch mit dem schrumpfenden Map-Viewport links neben das
 * Results-Panel geschoben. Würden wir den FAB zusätzlich per right:
 * verschieben, landet er in der Mitte der Karte. */
body:has(#results-panel:not(.collapsed)) .lists-popover {
  right: calc(380px + 16px);
}
body:has(#results-panel.wide:not(.collapsed)) .lists-popover {
  right: calc(500px + 16px);
}

.lists-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.lists-pop-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lists-pop-title h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.lists-pop-title .lists-pop-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--ab-red);
  display: block;
}
.lists-pop-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 17px;
  line-height: 1;
  color: var(--text-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.lists-pop-close:hover { background: var(--bg-soft); border-color: #ddd; color: var(--text-900); }

.lists-pop-body {
  padding: 14px 16px 18px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}
.lists-pop-body::-webkit-scrollbar { width: 6px; }
.lists-pop-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }
.lists-pop-body .hint { margin-top: 0; }
.lists-pop-body .list-input-row { margin-top: 4px; }

/* ======================= Results panel (right) ======================= */
.results-panel {
  width: 380px;
  flex-shrink: 0;
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: margin-right 0.25s ease, width 0.25s ease;
}
.results-panel.collapsed {
  margin-right: -380px;
}
/* "+30% breiter"-Modus: mehr Platz für Foto-Thumbnails in den Result-Cards.
   Width bewusst ein bisschen großzügiger als +30% (→ 500px) damit die
   Bilder angenehm groß werden und eine runde Zahl dasteht. */
.results-panel.wide { width: 500px; }
.results-panel.wide.collapsed { margin-right: -500px; }

.results-head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 2;
}
.results-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.results-title h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.results-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-500);
}
.results-collapse {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 16px;
  color: var(--text-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
}
.results-collapse:hover { background: var(--bg-soft); border-color: #ddd; }

/* Width-Toggle-Button rechts im Panel-Header — gleiche Pill-Optik wie der
   Collapse-Button, aber am rechten Ende des Title-Blocks. Aktiv-Zustand
   (Panel breit) wird dunkel hervorgehoben, damit man den Toggle ohne
   Tooltip sofort unterscheidet. */
.results-wide {
  flex: 0 0 auto;
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12px;
  color: var(--text-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.results-wide:hover { background: var(--bg-soft); border-color: #ddd; }
.results-wide[aria-pressed="true"] {
  background: var(--text-900);
  border-color: var(--text-900);
  color: #fff;
}

.results-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.results-controls .toggle {
  font-size: 11.5px;
  color: var(--text-500);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}
.results-controls .toggle input {
  accent-color: var(--ab-red);
  margin: 0;
  transform: scale(0.95);
}

/* Segmented control "Alle / Folgen / Sperren" für Ergebnis-Panel.
   Airbnb-Pill-Stil, hebt die aktive Option mit dunkler Border hervor.
   Der "Sperren"-Zustand bekommt zusätzlich einen roten Akzent, damit
   klar ist, dass die Map-Bewegungen das Ergebnis nicht mehr ändern. */
.results-scope {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.results-scope .rscope {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-500);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
}
.results-scope .rscope input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.results-scope .rscope:hover { color: var(--text-900); }
.results-scope .rscope:has(input:checked) {
  background: var(--text-900);
  color: #fff;
  font-weight: 600;
}
.results-scope .rscope-lock i { font-size: 10px; }
.results-scope .rscope-lock:has(input:checked) {
  background: var(--ab-red);
  color: #fff;
}

.results-sort {
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text-700);
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.results-sort:focus { border-color: var(--ab-red); }

.results-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}
.results-list::-webkit-scrollbar { width: 6px; }
.results-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

.results-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--text-500);
  font-size: 13px;
}

/* Single result card — vertical layout: big image on top, details below. */
.rcard {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.rcard:hover {
  border-color: #d8d8d8;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.rcard.active {
  border-color: var(--ab-red);
  box-shadow: 0 0 0 2px rgba(255,56,92,0.18), 0 6px 18px rgba(0,0,0,0.08);
}
/* Wenn der User über den Map-Dot hovert, subtile Reflektion in der Card */
.rcard.hover-from-map {
  border-color: #c4c4c4;
  box-shadow: 0 4px 14px rgba(0,0,0,0.07);
}
.rcard-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;   /* makes the image area big and consistent */
  background: #eee;
  position: relative;
  overflow: hidden;
}
.rcard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.rcard:hover .rcard-thumb img {
  transform: scale(1.03);
}
.rcard-thumb.no-img {
  background:
    repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 6px, #ededed 6px, #ededed 12px);
}
.rcard-thumb.no-img::after {
  content: "kein Bild";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-400);
  letter-spacing: 0.05em;
}
.rcard-thumb .thumb-score {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}
.rcard-thumb .thumb-run {
  position: absolute;
  right: 8px;
  top: 8px;
  background: rgba(255,255,255,0.92);
  color: var(--text-900);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.rcard-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.rcard-title b {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  color: var(--text-900);
}
.rcard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.rcard-meta .chip {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 6px;
  background: #f4f4f4;
  color: var(--text-700);
  line-height: 1.5;
}
.rcard-meta .chip.roof-damaged    { background: #fde2e2; color: #8a1616; }
.rcard-meta .chip.roof-worn       { background: #fdebd5; color: #8a3b00; }
.rcard-meta .chip.roof-fair       { background: #faf4d5; color: #7a6400; }
.rcard-meta .chip.roof-good       { background: #dcf2e8; color: #0d5c3a; }
.rcard-meta .chip.roof-unknown    { background: #eaeaea; color: #555; }
.rcard-meta .chip.ptype-finca     { background: #f3e7d3; color: #6d5426; font-weight: 600; }
.rcard-meta .chip.ptype-villa     { background: #dbe6ef; color: #2c4d66; font-weight: 600; }
.rcard-meta .chip.ptype-cottage   { background: #eee1d3; color: #705433; font-weight: 600; }
.rcard-meta .chip.ptype-townhouse { background: #e3e7ec; color: #3d4753; font-weight: 600; }
.rcard-meta .chip.ptype-apartment { background: #dcdce4; color: #2f2f3f; font-weight: 600; }
.rcard-meta .chip.ptype-shed      { background: #ededed; color: #555; font-weight: 600; }
.rcard-meta .chip.pool            { background: #e3f0f7; color: #1a4e6a; }
.rcard-meta .chip.flag            { background: #fff3e4; color: #8a3b00; }
.rcard-note {
  font-size: 11px;
  color: var(--text-500);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 3px;
}

/* Link-Row unten in der Result-Card (Google Earth / Maps) */
.rcard-links {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.rcard-link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-900);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.rcard-link:hover {
  background: var(--text-900);
  color: #fff;
  border-color: var(--text-900);
  transform: translateY(-1px);
}
.rcard-link .arrow { opacity: 0.55; font-size: 12px; }
.rcard-link:hover .arrow { opacity: 1; }
.rcard-link-street {
  background: #fff4e5;
  color: #8a4b00;
  border-color: #f4d9ac;
}
.rcard-link-street:hover {
  background: #8a4b00;
  color: #fff;
  border-color: #8a4b00;
}
.rcard-link-earth {
  background: #e8f0fe;
  color: #1a4e9a;
  border-color: #c9ddf7;
}
.rcard-link-earth:hover {
  background: #1a4e9a;
  color: #fff;
  border-color: #1a4e9a;
}
/* Catastro-Deep-Link: gedämpftes Gelb = sedecatastro Branding.
 * Wenn wir die echte Referencia Catastral gezogen haben (.has-rc),
 * wird der Button aktiv-gelb statt pastell — signalisiert "hier
 * landest du direkt auf der richtigen Parzelle, kein Raten mehr". */
.rcard-link-catastro {
  background: #fff8e0;
  color: #7a5a00;
  border-color: #f0dca0;
}
.rcard-link-catastro.has-rc {
  background: #f5c945;
  color: #2a1e00;
  border-color: #d6ab24;
}
.rcard-link-catastro:hover {
  background: #7a5a00;
  color: #fff;
  border-color: #7a5a00;
}
.rcard-link-catastro.has-rc:hover {
  background: #2a1e00;
  color: #f5c945;
  border-color: #2a1e00;
}

/* Gleiche Optik im Popup-Link-Row */
.links a.link-catastro {
  color: #7a5a00;
}
.links a.link-catastro:hover {
  color: #2a1e00;
}

/* Re-open-Button: standardmäßig versteckt, per CSS sichtbar sobald der
   Panel einen .collapsed-State hat. Früher über das `hidden`-Attribut in
   JS gesteuert — das war zu fragil (Timing/Stale-References). Jetzt
   ausschließlich CSS-driven, damit es auch nach Reloads oder in Edge
   Cases zuverlässig wieder einblendbar ist. */
.results-reopen {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1000;
  display: none;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 20px 0 0 20px;
  padding: 10px 14px 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-900);
  box-shadow: -4px 0 16px rgba(0,0,0,0.08);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, padding-right 0.15s;
}
.results-reopen i { font-size: 11px; color: var(--ab-red); }
.results-reopen:hover { background: var(--bg-soft); padding-right: 18px; }
body:has(#results-panel.collapsed) .results-reopen { display: inline-flex; }

/* Make sure body-level absolute children have a reference */
body { position: relative; }

/* Leaflet overrides */
.leaflet-container { font-family: 'Inter', sans-serif; }
.leaflet-control-layers {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-2) !important;
  border: 1px solid var(--line) !important;
}
.leaflet-control-zoom a {
  border-radius: 8px !important;
  color: var(--text-900) !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
}

/* Popup */
.leaflet-popup-content-wrapper {
  background: #fff;
  color: var(--text-900);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}
.leaflet-popup-content {
  margin: 0;
  width: 440px !important;
}
.leaflet-popup-tip { background: #fff; }

.popup img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

/* ===== Photo-Stack mit Satellit-Switcher ==================================
 * Setup: absolut positionierter Stack, in dem .ph-base (das aktive
 * Satellitenbild) den Platz hält und .ph-overlay (Catastro-Linien)
 * bei Bedarf deckungsgleich drüberliegt. Der Switcher oben links ist
 * eine Toolbar mit nummerierten Chips + Kataster-Toggle.
 */
.photo-stack {
  position: relative;
  width: 100%;
  height: 280px;
  background: #0f0f14;        /* sichtbar falls Bild noch lädt/fehlschlägt */
  overflow: hidden;
}
.photo-stack img.ph-base,
.photo-stack img.ph-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.18s ease;
}
.photo-stack img.ph-overlay {
  /* Kein mix-blend-mode: das macht die dünnen Catastro-Linien auf dunklen
   * Satellit-Stellen fast schwarz. Die PNG vom IGN hat bereits transparente
   * Hintergrundpixel mit kräftig roten/violetten Parzellen-Linien - die
   * zeichnen wir einfach direkt und ungefiltert drauf. Leichtes
   * drop-shadow schärft die Linien auf hellen/körnigen Dachflächen. */
  pointer-events: none;
  background: transparent;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7));
}
.photo-stack.ph-error-base img.ph-base {
  opacity: 0;
}
.photo-stack.ph-error-base::before {
  content: "Bild konnte nicht geladen werden";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em;
  z-index: 2;
}
/* Ladespinner während src-Wechsel */
.photo-stack .ph-loading {
  position: absolute; top: 50%; left: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 3;
}
.photo-stack.ph-loading-active .ph-loading {
  opacity: 1;
  animation: ph-spin 0.8s linear infinite;
}
@keyframes ph-spin { to { transform: rotate(360deg); } }

.photo-stack .ph-caption {
  position: absolute;
  right: 10px; bottom: 10px;
  z-index: 4;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(20,20,28,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 9px;
  border-radius: 999px;
  pointer-events: none;
}

.photo-switcher {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(20,20,28,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.ph-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px 0 4px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.82);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.ph-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.ph-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 1px;
}
.ph-btn.active {
  background: #fff;
  color: #111;
}
.ph-btn .ph-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font-size: 10.5px; font-weight: 700;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  color: inherit;
}
.ph-btn.active .ph-num {
  background: rgba(0,0,0,0.08);
  color: #111;
}
.ph-btn .ph-lbl { font-weight: 600; }

/* Kataster-Toggle steht optisch vom Rest ab (eigenes Seitenfach) */
.ph-btn.ph-cat {
  margin-left: 3px;
  padding-left: 4px;
  position: relative;
}
.ph-btn.ph-cat::before {
  content: "";
  position: absolute;
  left: -2px; top: 5px; bottom: 5px;
  width: 1px;
  background: rgba(255,255,255,0.18);
}
.ph-btn.ph-cat.active {
  background: #f0c808;
  color: #1a1a1a;
}
.ph-btn.ph-cat.active .ph-num {
  background: rgba(0,0,0,0.18);
  color: #1a1a1a;
}

/* Mobile: Labels wegnehmen, nur Nummern anzeigen (Platz im Popup ist knapp) */
@media (max-width: 520px) {
  .ph-btn .ph-lbl { display: none; }
  .ph-btn { padding: 0 6px; }
  .ph-btn.ph-cat::before { left: 0; }
}

/* ===== Kompakte Variante für Kandidaten-Karten ============================
 * Der Stack rastet in .rcard-thumb ein (volle 4:3-Fläche) und der
 * Switcher zeigt nur die Nummern-Chips ohne Text. Die existierenden
 * Badges (thumb-score / thumb-run / rcard-actions) liegen auf z-index 6
 * über dem Stack, damit sie nicht vom Live-Bild überdeckt werden.
 */
.rcard-thumb .photo-stack {
  position: absolute;
  inset: 0;
  height: 100%;
  background: #ededed;
}
.rcard-thumb .photo-stack.ph-compact .photo-switcher {
  top: 6px;
  left: 6px;
  padding: 3px;
  gap: 3px;
}
.rcard-thumb .photo-stack.ph-compact .ph-btn {
  height: 22px;
  padding: 0 4px;
  min-width: 22px;
  justify-content: center;
}
.rcard-thumb .photo-stack.ph-compact .ph-lbl {
  display: none;
}
.rcard-thumb .photo-stack.ph-compact .ph-btn .ph-num {
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  padding: 0 3px;
}
.rcard-thumb .photo-stack.ph-compact .ph-btn.ph-cat {
  margin-left: 2px;
}
.rcard-thumb .photo-stack.ph-compact .ph-btn.ph-cat::before {
  top: 4px; bottom: 4px;
}
/* Der alte Hover-Zoom war auf .rcard-thumb img — das greift auch auf
 * unsere .ph-base, aber die ist absolut positioniert. scale() klappt
 * trotzdem, wirkt aber stärker, also tonen wir es runter. */
.rcard:hover .rcard-thumb .ph-base {
  transform: scale(1.02);
}
/* Badges und Action-Buttons müssen über dem Stack liegen */
.rcard-thumb .thumb-score,
.rcard-thumb .thumb-run,
.rcard-thumb .rcard-actions {
  z-index: 6;
}
/* "kein Bild"-Pattern nur, wenn wirklich kein Stack drin ist */
.rcard-thumb.no-img .photo-stack { display: none; }
.popup-body { padding: 12px 16px 14px 16px; }
.popup-body h3 {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.popup-body .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 5px;
  margin-bottom: 8px;
}
.popup-body .tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--line-soft);
  color: var(--text-700);
  font-weight: 500;
  white-space: nowrap;
}
.popup-body .tag.roof-damaged { background: #d7263d; color: #fff; }
.popup-body .tag.roof-worn    { background: #f46036; color: #fff; }
.popup-body .tag.roof-fair    { background: #f0c808; color: #1a1a1a; }
.popup-body .tag.roof-good    { background: #2ec4b6; color: #fff; }
.popup-body .tag.distress-high { background: var(--ab-red); color: #fff; }
.popup-body .tag.distress-mid  { background: #f46036; color: #fff; }
.popup-body .tag.distress-low  { background: var(--line-soft); color: var(--text-500); }
.popup-body p {
  margin: 6px 0;
  font-size: 12.5px;
  color: var(--text-700);
  line-height: 1.5;
}
.popup-body p b { color: var(--text-900); font-weight: 600; }
.popup-body .links {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.popup-body .links a {
  flex: 1;
  text-align: center;
  color: var(--text-900);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}
.popup-body .links a { padding: 7px 8px; font-size: 11.5px; }
.popup-body .links a:hover { background: var(--text-900); color: #fff; border-color: var(--text-900); }
.popup-body .links a.link-street {
  background: #fff4e5;
  color: #8a4b00;
  border-color: #f4d9ac;
}
.popup-body .links a.link-street:hover {
  background: #8a4b00;
  color: #fff;
  border-color: #8a4b00;
}
.popup-body .links a.link-earth {
  background: #e8f0fe;
  color: #1a4e9a;
  border-color: #c9ddf7;
}
.popup-body .links a.link-earth:hover {
  background: #1a4e9a;
  color: #fff;
  border-color: #1a4e9a;
}

/* Legend */
.legend-box {
  background: #fff;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-900);
  font-size: 12px;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
}
.legend-box .legend-title {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-500);
}
.legend-box .row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--text-700);
}
.legend-box .row .ldot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: #9aa0a6;
}
.legend-box .row .ldot.ring {
  background: #fff;
  border: 2.5px solid var(--rc, #aaa);
  width: 10px;
  height: 10px;
}

/* Mini-Button (z.B. "Alle abwählen" im Ort-Header) — Airbnb-Pill-Stil im Klein. */
.btn-mini {
  background: #FFFFFF;
  border: 1px solid #EBEBEB;
  color: #222222;
  font: 500 11.5px/1 Inter, sans-serif;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.btn-mini:hover { border-color: #B0B0B0; }
.btn-mini:active { transform: scale(0.98); }
.btn-mini:disabled,
.btn-mini.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
  border-color: var(--line);
}
.btn-mini:disabled:hover,
.btn-mini.is-disabled:hover {
  background: transparent;
  border-color: var(--line);
}
.btn-mini.btn-primary {
  background: var(--text-900);
  border-color: var(--text-900);
  color: #fff;
}
.btn-mini.btn-primary:hover { background: #000; border-color: #000; }
.btn-mini.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* -------- Listen-Card (Favoriten) -------- */
.list-input-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.list-input-row input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  font: 500 12.5px/1 Inter, sans-serif;
  color: var(--text-900);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s;
}
.list-input-row input[type="text"]:focus { border-color: var(--text-900); }

.lists-ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.list-row:hover { border-color: var(--text-400); background: var(--bg-soft); }
.list-row.active {
  border-color: var(--ab-red);
  background: var(--ab-red-soft);
  box-shadow: inset 3px 0 0 var(--ab-red);
  padding-left: 12px;
}
.list-row .list-heart {
  font-size: 14px;
  line-height: 1;
  color: var(--text-400);
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.list-row.active .list-heart {
  color: var(--ab-red);
  transform: scale(1.1);
}
.list-row .list-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-row.active .list-name { color: var(--ab-red); font-weight: 600; }
.list-row .list-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-500);
  background: var(--bg-soft);
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.list-row.active .list-count {
  background: rgba(255,56,92,0.18);
  color: var(--ab-red);
}
.list-row .list-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.list-row:hover .list-actions,
.list-row.active .list-actions { opacity: 1; }
.list-row .list-act {
  border: 0;
  background: transparent;
  color: var(--text-400);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font: 500 12px/1 Inter, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.list-row .list-act:hover {
  background: rgba(0,0,0,0.06);
  color: var(--text-900);
}
.list-row .list-act.list-del:hover { color: #d7263d; }

.list-empty-hint {
  margin: 0 0 10px 0;
  padding: 10px 12px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-500);
  background: var(--bg-soft);
  border-radius: 8px;
  border: 1px dashed var(--line);
}
.list-empty-hint.hidden { display: none; }

.list-tools {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.list-tools .btn-mini { flex: 1; }

/* Segmented control "Ansicht" */
.view-mode-label {
  margin-top: 4px;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-500);
}
.view-modes {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
}
.view-modes .vm {
  flex: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 6px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-500);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
  text-align: center;
  min-width: 0;
}
.view-modes .vm input { position: absolute; opacity: 0; pointer-events: none; }
.view-modes .vm:hover { color: var(--text-900); }
.view-modes .vm:has(input:checked) {
  background: var(--text-900);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.view-modes .vm span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-mode-desc {
  margin: 8px 2px 0;
  font-size: 11px;
  color: var(--text-500);
  line-height: 1.35;
  min-height: 14px;
}
.view-mode-desc.warn { color: #8a4b00; }

/* Hidden-State einer Liste: leicht ausgegraut + durchgestrichener Name */
.list-row.hidden .list-name {
  color: var(--text-400);
  text-decoration: line-through;
  text-decoration-color: var(--text-400);
}
.list-row.hidden .list-count { opacity: 0.45; }
.list-row.hidden .list-heart { opacity: 0.35; }
.list-row .list-act.list-vis {
  font-size: 14px;
}
.list-row.hidden .list-act.list-vis { color: var(--text-300, #c2c2c2); }

.list-user {
  margin: 8px 0 0;
  font-size: 10.5px;
  color: var(--text-400);
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* -------- Heart-Button in Popup + Result-Card -------- */
.fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-500);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  font: 600 11.5px/1 Inter, sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.fav-btn .fav-ico {
  font-size: 13px;
  line-height: 1;
  transition: transform 0.2s;
}
.fav-btn:hover { border-color: var(--ab-red); color: var(--ab-red); }
.fav-btn:hover .fav-ico { transform: scale(1.15); }
.fav-btn.is-fav {
  background: var(--ab-red);
  border-color: var(--ab-red);
  color: #fff;
}
.fav-btn.is-fav:hover {
  background: #e12a4e;
  border-color: #e12a4e;
  color: #fff;
}
.fav-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Popup: Heart-Button oben rechts über dem Titel-Block */
.popup-body .popup-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.popup-body .popup-top h3 { margin: 0; flex: 1; min-width: 0; }
.popup-body .fav-btn { flex-shrink: 0; }

/* Result-Card: Heart-Button floating oben rechts auf dem Thumbnail */
/* Actions-Container rechts-unten auf dem Thumbnail: Heart + Review nebeneinander. */
.rcard-thumb .rcard-actions {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.rcard-thumb .rcard-fav,
.rcard-thumb .rcard-review {
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 6px 10px;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.rcard-thumb .rcard-fav.is-fav {
  background: var(--ab-red);
  border-color: var(--ab-red);
  color: #fff;
}
.rcard-thumb .rcard-fav:hover,
.rcard-thumb .rcard-review:hover { transform: translateY(-1px); }

/* Review-Button (Pencil-Icon) */
.review-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-500);
  border-radius: var(--radius-pill);
  padding: 5px 9px;
  cursor: pointer;
  transition: all 0.15s;
}
.review-btn svg,
.review-btn i {
  font-size: 12px;
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}
.review-btn:hover {
  border-color: var(--text-900);
  color: var(--text-900);
}
.review-btn:hover svg,
.review-btn:hover i { transform: rotate(-10deg); }
.review-btn.is-corrected {
  background: var(--text-900);
  border-color: var(--text-900);
  color: #fff;
}
.review-btn.is-corrected:hover { background: #000; }

/* Chip-Status: korrigiertes Dach-Label hebt sich leicht ab */
.chip.roof-damaged.corrected,
.chip.roof-worn.corrected,
.chip.roof-fair.corrected,
.chip.roof-good.corrected {
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.85);
}

/* -------- Review-Picker -------- */
.review-picker {
  position: fixed;
  z-index: 3500;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow:
    0 20px 48px rgba(0,0,0,0.22),
    0 0 0 1px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: top right;
  transform: scale(0.96) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.14s ease,
    transform 0.14s cubic-bezier(.2,.9,.3,1.1);
}
.review-picker.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.review-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.review-picker-head strong { font-weight: 700; letter-spacing: -0.1px; }
.review-picker-close {
  width: 22px; height: 22px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 18px; line-height: 1;
  color: var(--text-400);
  cursor: pointer;
  padding: 0;
}
.review-picker-close:hover { background: var(--bg-soft); color: var(--text-900); }
.review-picker-ai {
  padding: 8px 14px;
  font-size: 11.5px;
  color: var(--text-500);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.review-picker-ai .ai-label {
  font-size: 10.5px;
}
.review-picker-ai .ai-conf {
  font-size: 10.5px;
  color: var(--text-400);
  font-variant-numeric: tabular-nums;
}
.review-picker-lists {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.review-picker-lists li { margin: 0; }
.review-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--text-800, var(--text-900));
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.review-opt input[type="radio"] {
  accent-color: var(--text-900);
  cursor: pointer;
}
.review-opt .review-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.review-opt .review-name {
  flex: 1;
  text-transform: capitalize;
  font-weight: 500;
}
.review-opt:hover { background: var(--bg-soft); }
.review-opt.active {
  background: var(--bg-soft);
  border-left-color: var(--text-900);
  font-weight: 600;
}
.review-picker-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  gap: 8px;
}
.review-picker-foot .review-hint {
  font-size: 10.5px;
  color: var(--text-400);
}
.review-picker-foot .btn-link {
  background: transparent;
  border: 0;
  color: var(--text-500);
  font: 600 11.5px/1 Inter, sans-serif;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
}
.review-picker-foot .btn-link:hover { color: var(--text-900); background: #fff; }
.review-picker-foot .btn-primary {
  background: var(--text-900);
  border: 1px solid var(--text-900);
  color: #fff;
  font: 600 11.5px/1 Inter, sans-serif;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.review-picker-foot .btn-primary:hover { background: #000; }

/* ================================================================
   Files-Button (Paperclip) auf den Result-Cards — gleicher Look wie
   review-btn, aber mit Counter-Badge wenn Dateien vorhanden sind.
   ================================================================ */
.files-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-500);
  border-radius: var(--radius-pill);
  padding: 5px 9px;
  cursor: pointer;
  transition: all 0.15s;
}
.files-btn i { font-size: 12px; transition: transform 0.15s; }
.files-btn:hover {
  border-color: var(--text-900);
  color: var(--text-900);
}
.files-btn:hover i { transform: translateY(-1px); }
.files-btn.has-files {
  background: var(--text-900);
  border-color: var(--text-900);
  color: #fff;
}
.files-btn.has-files:hover { background: #000; }
.files-btn .files-count {
  margin-left: 5px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  min-width: 14px;
  text-align: center;
  letter-spacing: 0;
}
.rcard-thumb .rcard-files {
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 6px 10px;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.rcard-thumb .rcard-files.has-files {
  background: rgba(15,15,16,0.92);
  border-color: transparent;
  color: #fff;
}
.rcard-thumb .rcard-files:hover { transform: translateY(-1px); }

/* ================================================================
   Attachments-Modal — zentrales Dialog für Datei-Uploads pro Pin.
   Scroll-bar Liste + Drag-and-drop Zone + Progress-Bars für laufende
   Uploads. Layout ist "Airbnb-ish": weißer Card auf dunklem Backdrop,
   abgerundete Ecken, dezente Linien.
   ================================================================ */
.att-modal {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.att-modal.open { opacity: 1; pointer-events: auto; }
.att-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,15,16,0.45);
  backdrop-filter: blur(4px);
}
.att-modal-box {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.25),
    0 0 0 1px rgba(0,0,0,0.04);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: scale(0.96) translateY(10px);
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1.1);
}
.att-modal.open .att-modal-box { transform: scale(1) translateY(0); }

.att-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.att-modal-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.att-modal-titles strong {
  font-size: 16px; font-weight: 700; letter-spacing: -0.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-modal-sub {
  font-size: 12px; color: var(--text-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-modal-close {
  width: 32px; height: 32px;
  border: 0; background: transparent;
  border-radius: 8px;
  font-size: 22px; line-height: 1;
  color: var(--text-500);
  cursor: pointer;
  flex-shrink: 0;
}
.att-modal-close:hover { background: #f4f4f5; color: var(--text-900); }

.att-dropzone {
  position: relative;
  margin: 14px 20px 0;
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  background: #fafafa;
}
.att-dropzone:hover,
.att-dropzone:focus-visible,
.att-dropzone.is-dragover {
  border-color: var(--text-900);
  background: #fff;
  outline: none;
}
.att-dropzone.is-dragover {
  box-shadow: 0 0 0 4px rgba(15,15,16,0.05);
}
.att-dropzone-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  pointer-events: none;
}
.att-dropzone-inner i {
  font-size: 22px; color: var(--text-700); margin-bottom: 4px;
}
.att-dropzone-inner strong { font-size: 13px; font-weight: 700; color: var(--text-900); }
.att-dropzone-inner span { font-size: 11.5px; color: var(--text-500); }
.att-file-input {
  position: absolute; inset: 0;
  opacity: 0; width: 100%; height: 100%;
  cursor: pointer;
}

.att-uploads {
  margin: 10px 20px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.att-upload {
  display: grid;
  grid-template-columns: 1fr 120px 48px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  transition: opacity 0.25s, transform 0.25s;
}
.att-upload.is-done { border-color: #cfe8cf; background: #f3faf3; }
.att-upload.is-error { border-color: #e8cfcf; background: #faf3f3; }
.att-upload.is-leaving { opacity: 0; transform: translateY(-4px); }
.att-upload-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--text-900);
}
.att-upload-bar {
  height: 4px; background: #eee; border-radius: 999px; overflow: hidden;
}
.att-upload-bar-fill {
  height: 100%; background: var(--text-900);
  width: 0%;
  transition: width 0.15s linear;
}
.att-upload.is-done .att-upload-bar-fill { background: #2c7a2c; }
.att-upload-status {
  text-align: right; font-variant-numeric: tabular-nums;
  color: var(--text-500);
}
.att-upload-error {
  grid-column: 1 / -1;
  font-size: 11px;
  color: #9a2a2a;
  margin-top: 4px;
}

.att-list-wrap {
  flex: 1; min-height: 80px;
  overflow-y: auto;
  padding: 14px 20px 18px;
}
.att-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.att-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: background 0.15s, opacity 0.2s;
}
.att-item:hover { background: #fafafa; }
.att-item.is-deleting { opacity: 0.5; pointer-events: none; }
.att-thumb {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: #f4f4f5;
}
.att-icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: #f4f4f5;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-700);
  font-size: 18px;
}
.att-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.att-name {
  font-size: 13px; font-weight: 600; color: var(--text-900);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-name:hover { text-decoration: underline; }
.att-sub {
  font-size: 11px; color: var(--text-500);
}
.att-actions { display: flex; gap: 4px; }
.att-act {
  width: 30px; height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-500);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: 13px;
  transition: background 0.12s, color 0.12s;
}
.att-act:hover { background: #f4f4f5; color: var(--text-900); }
.att-delete:hover { background: #fdecec; color: #b2241a; }

.att-list-state {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 28px 12px;
  color: var(--text-500);
  font-size: 13px;
}
.att-list-state i { font-size: 18px; }
.att-list-empty { flex-direction: column; gap: 6px; }
.att-list-error { color: #b2241a; }
.att-spinner {
  width: 16px; height: 16px;
  border: 2px solid #ebebeb;
  border-top-color: var(--text-900);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -------- Fav-Overlay-Marker (kleines weißes Herz auf gefavtem Pin) --------
 * Liegt als divIcon auf dem Canvas-Pin. Non-interactive, drop-shadow für
 * Lesbarkeit auf hellen/dunklen Hintergründen, und pointer-events:none
 * damit Klicks durch zum Hit-Circle darunter kommen. */
.leaflet-marker-icon.fav-marker-icon {
  background: transparent !important;
  border: 0 !important;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fav-marker-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.55)) drop-shadow(0 0 1px rgba(0,0,0,0.4));
}
.fav-marker-heart svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
}

/* Haus-Overlay das beim Hover/Active eines Pins erscheint. Eigenständige
   Pane-Ebene (divIcon im markerPane), liegt immer über Dot + Fav-Herz.
   Fade-In dezent, damit es nicht blinkt wenn man schnell über Cards hovert. */
.leaflet-marker-icon.pin-house-marker {
  background: transparent !important;
  border: 0 !important;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin-house-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  filter:
    drop-shadow(0 0 1.5px rgba(0,0,0,0.7))
    drop-shadow(0 0 2px rgba(0,0,0,0.45));
  animation: pin-house-in 120ms ease-out;
}
.pin-house-icon svg {
  width: 72%;
  height: 72%;
  fill: currentColor;
  display: block;
}
@keyframes pin-house-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* -------- Spotlight-Mode (beim Card-Klick im rechten Panel) --------
   Alle anderen Pins werden 3s lang ausgeblendet, nur der geklickte bleibt
   als großer hervorgehobener Dot sichtbar. So findet das Auge den richtigen
   Spot sofort wieder nach dem flyTo. */
.leaflet-container .leaflet-overlay-pane,
.leaflet-container .leaflet-marker-pane {
  transition: opacity 0.45s ease;
}
.leaflet-container.map-spotlight .leaflet-overlay-pane,
.leaflet-container.map-spotlight .leaflet-marker-pane {
  opacity: 0;
  pointer-events: none;
}
.leaflet-marker-icon.spotlight-marker {
  background: transparent !important;
  border: 0 !important;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spotlight-dot {
  position: relative;
  border-radius: 50%;
  background: var(--spot, #d7263d);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 5px color-mix(in srgb, var(--spot, #d7263d) 30%, transparent),
    0 8px 22px rgba(0, 0, 0, 0.4);
  animation: spotlight-pulse 1.8s ease-out infinite;
}
.spotlight-house {
  display: inline-flex;
  width: 55%;
  height: 55%;
  align-items: center;
  justify-content: center;
  color: #fff;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.5));
}
.spotlight-house svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
}
@keyframes spotlight-pulse {
  0% {
    box-shadow:
      0 0 0 3px #ffffff,
      0 0 0 5px color-mix(in srgb, var(--spot, #d7263d) 30%, transparent),
      0 8px 22px rgba(0, 0, 0, 0.4);
  }
  70% {
    box-shadow:
      0 0 0 3px #ffffff,
      0 0 0 20px color-mix(in srgb, var(--spot, #d7263d) 0%, transparent),
      0 8px 22px rgba(0, 0, 0, 0.4);
  }
  100% {
    box-shadow:
      0 0 0 3px #ffffff,
      0 0 0 5px color-mix(in srgb, var(--spot, #d7263d) 30%, transparent),
      0 8px 22px rgba(0, 0, 0, 0.4);
  }
}

/* -------- Fav-Picker (Mini-Dialog zum Heart-Klick bei mehreren Listen) -------- */
.fav-picker {
  position: fixed;
  z-index: 3500;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow:
    0 20px 48px rgba(0,0,0,0.22),
    0 0 0 1px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: top right;
  transform: scale(0.96) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.14s ease,
    transform 0.14s cubic-bezier(.2,.9,.3,1.1);
}
.fav-picker.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.fav-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.fav-picker-head strong {
  font-weight: 700;
  letter-spacing: -0.1px;
}
.fav-picker-close {
  width: 22px; height: 22px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 18px; line-height: 1;
  color: var(--text-400);
  cursor: pointer;
  padding: 0;
}
.fav-picker-close:hover { background: var(--bg-soft); color: var(--text-900); }
.fav-picker-lists {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
}
.fav-picker-lists::-webkit-scrollbar { width: 6px; }
.fav-picker-lists::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }
.fav-picker-lists li { margin: 0; }
.fav-picker-lists label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--text-800, var(--text-900));
}
.fav-picker-lists label:hover { background: var(--bg-soft); }
.fav-picker-lists input[type="checkbox"] {
  accent-color: var(--ab-red);
  width: 15px; height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.fav-picker-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fav-picker-count {
  font-size: 10.5px;
  color: var(--text-400);
  font-variant-numeric: tabular-nums;
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 999px;
}
.fav-picker-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
.fav-picker-foot .btn-link {
  background: transparent;
  border: 0;
  color: var(--text-500);
  font: 600 11.5px/1 Inter, sans-serif;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
}
.fav-picker-foot .btn-link:hover { color: var(--text-900); background: #fff; }
.fav-picker-foot .btn-primary {
  background: var(--text-900);
  border: 1px solid var(--text-900);
  color: #fff;
  font: 600 11.5px/1 Inter, sans-serif;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.fav-picker-foot .btn-primary:hover { background: #000; }

/* -------- Toast -------- */
.idegrab-toast {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 4000;
  background: var(--text-900);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  max-width: 320px;
}
.idegrab-toast.show { opacity: 1; transform: translateY(0); }
.idegrab-toast[data-kind="ok"]   { background: #1f8a54; }
.idegrab-toast[data-kind="warn"] { background: #8a4b00; }
.idegrab-toast[data-kind="err"]  { background: #8a1616; }