/* =========================================================
   ImmoPotenzial · style.css  (v2 – enhanced UI)
   ========================================================= */

:root {
  --bg:         #0a0c10;
  --surface:    #111520;
  --surface2:   #181c28;
  --surface3:   #1e2330;
  --border:     #22273a;
  --border2:    #2c3248;
  --text:       #e9eaf2;
  --text-muted: #7882a0;
  --text-dim:   #464f6a;
  --text-soft:  #909ab8;
  --meta-text:  #c8d2e8;
  --fact-bg:    rgba(255,255,255,0.03);
  --card-bg:    #0e1220;
  --card-border: rgba(255,255,255,0.065);
  --accent:     #e8a24a;
  --accent2:    #c97d2e;
  --accent-glow: rgba(232,162,74,0.18);
  --crimson:    #cf4444;
  --red:        #e05c5c;
  --orange:     #e89a4a;
  --blue:       #4aa3e8;
  --purple:     #a66ce6;
  --teal:       #4ab8a6;
  --green:      #4ab87a;
  --slate:      #7a8099;
  --map-panel:  #f6f2eb;
  --map-panel-border: rgba(118,100,78,0.18);
  --map-canvas: #edf2f7;
  --map-ui:     rgba(255,255,255,0.96);
  --map-ui-border: rgba(96,82,65,0.16);
  --map-ink:    #2d3946;
  --map-muted:  #6f7b88;
  --map-brand:  #ff7500;
  --map-brand-strong: #ec5d00;
  --radius:     12px;
  --radius-sm:  7px;
  --radius-lg:  20px;
  --nav-h:      60px;
  --map-w:      480px;
  --map-resize-hit: 18px;

  /* Shadows */
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-sm:  0 2px 10px rgba(0,0,0,0.35);
  --shadow-md:  0 8px 28px rgba(0,0,0,0.45);
  --shadow-lg:  0 20px 50px rgba(0,0,0,0.55);
  --shadow-card-hover: 0 24px 52px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,162,74,0.18);
  --shadow-glow: 0 0 0 3px rgba(232,162,74,0.12), 0 8px 28px rgba(0,0,0,0.4);

  /* Transitions */
  --t-fast: .15s ease;
  --t:      .22s ease;
  --t-slow: .38s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, a, input, select { touch-action: manipulation; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (max-width: 860px) {
  html { scroll-behavior: auto; } /* prevent janky scroll on mobile Safari */
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(ellipse 90% 55% at 15% -5%, rgba(232,162,74,.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 95% 80%, rgba(74,163,232,.04) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 12px; left: 16px; z-index: 1200;
  padding: 10px 14px; border-radius: 10px;
  background: var(--accent); color: #111827;
  font-size: 12px; font-weight: 700; text-decoration: none;
  transform: translateY(-140%); transition: transform var(--t);
}
.skip-link:focus { transform: translateY(0); }

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: var(--nav-h);
  background: rgba(10,12,16,.93);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.055);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02), var(--shadow-xs);
}
.nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-logo-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 60%, #9e5010 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Serif Display', serif; font-size: 15px; color: #0d0f14;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(232,162,74,0.35), 0 0 0 1px rgba(232,162,74,0.2);
}
.nav-title { font-family: 'DM Serif Display', serif; font-size: 16px; color: var(--text); letter-spacing: -.01em; }
.nav-sub   { font-size: 10px; color: var(--text-muted); letter-spacing: .07em; text-transform: uppercase; margin-top: 1px; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-icon-btn,
.theme-btn {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text-muted); font-size: 11px; font-family: 'DM Sans', sans-serif;
  padding: 6px 14px; border-radius: 20px; cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t), transform var(--t-fast);
  letter-spacing: .03em;
}
.nav-icon-btn {
  width: 34px; height: 34px; padding: 0;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.nav-icon-btn:hover,
.theme-btn:hover { border-color: rgba(232,162,74,.55); color: var(--accent); background: var(--surface3); transform: translateY(-1px); }
.nav-icon-btn:active,
.theme-btn:active { transform: translateY(0); }

/* ── PAGE LAYOUT ── */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--map-w);
  gap: clamp(14px, 2vw, 28px);
  align-items: start;
  min-height: calc(100vh - var(--nav-h));
}
.page-layout.map-collapsed { grid-template-columns: minmax(0,1fr) 0; }

/* ── LEFT PANEL ── */
.panel-left {
  flex: 1 1 0; min-width: 0;
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.panel-left::-webkit-scrollbar { width: 3px; }
.panel-left::-webkit-scrollbar-track { background: transparent; }
.panel-left::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; }
.panel-left::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
/* Smooth momentum scrolling on iOS */
.panel-left { -webkit-overflow-scrolling: touch; }

/* ── HERO HEADER ── */
.header {
  padding: 12px clamp(16px, 2.5vw, 32px) 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.header-top-row {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.header-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(760px, 100%);
}
.header-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(232,162,74,.18);
  background: rgba(232,162,74,.08);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.header-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 700; line-height: 1.02; letter-spacing: -.03em;
  color: var(--text); margin: 0;
}
.header-subline {
  max-width: 620px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.55;
}
.header-divider { height: 1px; background: rgba(255,255,255,0.05); margin-top: 10px; }

/* ── ACTIVE FILTERS ── */
.active-filters-bar {
  display: none; align-items: stretch; justify-content: space-between;
  gap: 14px; flex: 1 1 100%; min-width: 0; padding: 14px 16px;
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(circle at 0% 0%, rgba(232,162,74,.08), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.active-filters-summary {
  flex: 0 0 138px;
  min-width: 138px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(10,14,24,.52);
}
.active-filters-summary-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.active-filters-summary-value {
  font-family: 'DM Serif Display', serif;
  font-size: 30px;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--text);
}
.active-filters-summary-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 9px;
  min-width: 0;
  flex: 1 1 auto;
  padding-top: 2px;
}
.compare-bar {
  display: none; align-items: center; justify-content: space-between;
  gap: 12px; flex: 1 1 100%; min-width: 0; padding: 10px 12px;
  border-radius: 14px; border: 1px solid rgba(74,163,232,.18);
  background: rgba(74,163,232,.06);
}
.compare-bar.is-visible { display: flex; }
.compare-selected {
  display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; flex: 1;
}
.compare-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; max-width: 100%;
  padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(74,163,232,.24); background: rgba(74,163,232,.11);
  color: var(--text); cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t-fast);
}
.compare-pill:hover { border-color: rgba(74,163,232,.45); background: rgba(74,163,232,.16); }
.compare-pill:active { transform: translateY(1px); }
.compare-pill-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-pill-remove {
  width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12); color: var(--text-muted); flex: 0 0 auto;
}
.compare-bar-actions {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--meta-text);
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.085);
  cursor: pointer; user-select: none; max-width: 100%;
  transition: border-color var(--t), color var(--t), background var(--t), transform var(--t-fast);
}
.filter-chip:hover { border-color: rgba(232,162,74,.55); color: var(--text); background: rgba(255,255,255,.065); }
.filter-chip:active { transform: translateY(1px); }
.filter-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip-x {
  width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12); color: var(--text-muted); flex: 0 0 auto;
}
.filter-chip:hover .filter-chip-x { color: var(--accent); border-color: rgba(232,162,74,.35); }

.btn-link {
  border: none; background: transparent; color: var(--text-soft);
  font-size: 12px; font-weight: 650; cursor: pointer;
  padding: 8px 10px; border-radius: 10px;
  transition: color var(--t), background var(--t); white-space: nowrap;
  align-self: center;
}
.btn-link:hover { color: var(--accent); background: rgba(232,162,74,.08); }

/* ── QUICK STATUS CHIPS ── */
.quick-status-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  flex: 1 1 100%; min-width: 0;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.05);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
.quick-status-chip {
  min-height: 36px; padding: 0 15px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); color: var(--text-muted);
  font-size: 11px; font-weight: 700; cursor: pointer;
  letter-spacing: .03em;
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t-fast);
  white-space: nowrap;
}
.quick-status-chip:hover { border-color: rgba(232,162,74,.5); color: var(--text); background: rgba(255,255,255,0.05); }
.quick-status-chip.is-active { border-color: rgba(232,162,74,.55); background: rgba(232,162,74,.12); color: var(--accent); }
.quick-status-chip:active { transform: scale(.97); }

/* Status-specific active colors */
.quick-status-chip[data-status="Sanierungsobjekt"].is-active        { border-color: rgba(224,92,92,.5);   background: rgba(224,92,92,.1);   color: var(--red); }
.quick-status-chip[data-status="Kernsanierungsobjekt"].is-active    { border-color: rgba(207,68,68,.5);   background: rgba(207,68,68,.1);   color: var(--crimson); }
.quick-status-chip[data-status="Renovierungsobjekt"].is-active      { border-color: rgba(232,154,74,.5);  background: rgba(232,154,74,.1);  color: var(--orange); }
.quick-status-chip[data-status="Modernisierungsobjekt"].is-active   { border-color: rgba(122,128,153,.5); background: rgba(122,128,153,.1); color: var(--slate); }
.quick-status-chip[data-status="Ausbauobjekt"].is-active            { border-color: rgba(74,163,232,.5);  background: rgba(74,163,232,.1);  color: var(--blue); }
.quick-status-chip[data-status="Umbau-/Umnutzungsobjekt"].is-active { border-color: rgba(166,108,230,.5); background: rgba(166,108,230,.1); color: var(--purple); }
.quick-status-chip[data-status="Erweiterungsobjekt"].is-active      { border-color: rgba(74,184,166,.5);  background: rgba(74,184,166,.1);  color: var(--teal); }

/* ── TOOLBAR ── */
.toolbar {
  margin: 0; padding: 18px 18px 16px;
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--card-border); border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(232,162,74,.08), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(74,163,232,.06), transparent 30%),
    linear-gradient(180deg, rgba(14,18,32,.99), rgba(14,18,32,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 16px 28px rgba(0,0,0,.16);
  /* Sticky on all viewport sizes */
  position: sticky;
  top: calc(var(--nav-h) + 10px);
  z-index: 200;
  backdrop-filter: blur(16px) saturate(1.3);
}
.filters-left {
  display: flex; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; min-width: 0; flex: 1 1 clamp(360px, 54vw, 820px);
}
.stats-right {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; min-width: 280px; flex: 0 0 clamp(280px, 24vw, 380px);
  padding: 14px 14px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.055);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.stats-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.result-count { font-weight: 700; font-size: 20px; color: var(--text); line-height: 1.2; }
.toolbar-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.toolbar-kpi {
  min-width: 0;
  flex: 1 1 90px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
}
.toolbar-kpi-value {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--text);
}
.toolbar-kpi-label {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}
.overview-popover {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.overview-pill {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: border-color var(--t), background var(--t), transform var(--t-fast);
}
.overview-pill:hover,
.overview-popover:focus-within .overview-pill {
  border-color: rgba(232,162,74,.45);
  background: rgba(255,255,255,0.04);
}
.overview-pill-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.overview-pill-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.overview-flyout {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: min(440px, calc(100vw - 64px));
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(12,16,24,.98);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  z-index: 40;
}
.overview-popover:hover .overview-flyout,
.overview-popover:focus-within .overview-flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.pager {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; border-radius: 12px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
}
.pager-label { font-size: 12px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.pager-btn {
  width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--border2); background: var(--surface);
  color: var(--text); font-size: 16px; line-height: 1;
  cursor: pointer; transition: border-color var(--t), transform var(--t-fast), opacity var(--t);
  display: inline-flex; align-items: center; justify-content: center;
}
.pager-btn:hover { border-color: rgba(232,162,74,.55); background: var(--surface2); }
.pager-btn:active { transform: translateY(1px); }
.pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.pager-btn-wide { width: auto; padding: 0 14px; font-size: 12px; font-weight: 600; color: var(--text); }
.pager-bottom {
  position: sticky; bottom: 0; z-index: 40;
  display: none; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border2);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(10,12,16,.72) 40%, rgba(10,12,16,.82));
  backdrop-filter: blur(8px);
}
.pager-bottom .pager-label { color: rgba(255,255,255,.72); }

/* ── FORM CONTROLS ── */
.control-group { display: flex; flex-direction: column; gap: 6px; }
.control-group-presets { min-width: 280px; flex: 1 1 280px; }
.sort-pill-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.055);
  background: rgba(255,255,255,0.015);
}
.sort-pill {
  min-height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); color: var(--text-muted);
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  letter-spacing: .02em; white-space: nowrap;
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t-fast), box-shadow var(--t);
}
.sort-pill:hover { border-color: rgba(232,162,74,.45); color: var(--text); background: rgba(255,255,255,0.05); }
.sort-pill.is-active {
  border-color: rgba(232,162,74,.55);
  background: rgba(232,162,74,.13);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.sort-pill:active { transform: scale(.97); }
.control-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-dim); font-weight: 600;
}
.tag-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--surface);
}
.tag-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 20px;
}
.tag-chip-list.is-empty {
  display: none;
}
.tag-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tag-input-row input {
  flex: 1 1 auto;
  width: 100%;
}
.btn-tag-add {
  flex: 0 0 auto;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(232,162,74,.22);
  background: rgba(232,162,74,.10);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t-fast);
}
.tag-chip:hover {
  border-color: rgba(232,162,74,.45);
  background: rgba(232,162,74,.15);
}
.tag-chip:active { transform: translateY(1px); }
.tag-chip-text {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-chip-x {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-muted);
}
.preset-controls {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.preset-select-wrap { min-width: 170px; flex: 1 1 170px; }
.preset-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.btn-preset { min-width: 118px; justify-content: center; display: inline-flex; align-items: center; }
input, select {
  background: rgba(255,255,255,0.028); border: 1px solid rgba(255,255,255,0.075);
  color: var(--text); padding: 10px 12px; border-radius: 14px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 400;
  outline: none; transition: border-color var(--t), box-shadow var(--t), background var(--t);
  appearance: none; -webkit-appearance: none;
}
input { width: auto; }
input:hover, select:hover { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,0.05); }
.num-input { width: 110px; }
.range-row { display: flex; align-items: center; gap: 8px; }
.checks-col { display: flex; flex-direction: column; gap: 8px; }
.check-row-compact { height: 36px; padding: 0 10px; border-radius: 10px; font-size: 12px; }

.advanced-grid {
  padding: 0 12px 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px 16px; align-items: start;
}
.btn-reset {
  height: 44px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.028);
  color: var(--text); font-size: 12px; font-weight: 650;
  cursor: pointer; transition: border-color var(--t), transform var(--t-fast), background var(--t);
}
.btn-reset:hover { border-color: rgba(232,162,74,.55); background: rgba(255,255,255,0.05); }
.btn-reset:active { transform: translateY(1px); }
.btn-reset-compact {
  width: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-secondary {
  height: 44px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025);
  color: var(--text); font-size: 12px; font-weight: 650; padding: 0 12px;
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--t), transform var(--t-fast), background var(--t), box-shadow var(--t);
}
.btn-secondary:hover { border-color: rgba(232,162,74,.55); background: rgba(255,255,255,0.05); box-shadow: var(--shadow-xs); }
.btn-secondary:active { transform: translateY(1px); box-shadow: none; }
.btn-secondary.is-saved { border-color: rgba(232,162,74,.55); background: rgba(232,162,74,.12); color: var(--accent); }
.btn-secondary.is-active { border-color: rgba(74,163,232,.45); background: rgba(74,163,232,.12); color: var(--blue); }
.btn-secondary.is-dismissed { border-color: rgba(224,92,92,.4); background: rgba(224,92,92,.1); color: var(--red); }

.btn-saved-toggle { min-width: 168px; justify-content: center; gap: 8px; display: inline-flex; align-items: center; }
.btn-saved-toggle.is-active { border-color: rgba(232,162,74,.55); background: rgba(232,162,74,.12); color: var(--accent); }
.btn-dismiss-toggle.is-active { border-color: rgba(224,92,92,.4); background: rgba(224,92,92,.1); color: var(--red); }
.btn-compare-open { min-width: 150px; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }

.btn-filter {
  height: 44px; border-radius: 14px;
  border: 1px solid rgba(232,162,74,.38);
  background: linear-gradient(135deg, rgba(232,162,74,.16), rgba(232,162,74,.05));
  color: var(--text); font-size: 12px; font-weight: 700; padding: 0 12px;
  cursor: pointer;
  transition: border-color var(--t), transform var(--t-fast), background var(--t), box-shadow var(--t);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-filter:hover { border-color: rgba(232,162,74,.6); background: linear-gradient(135deg, rgba(232,162,74,.22), rgba(232,162,74,.08)); box-shadow: 0 2px 12px rgba(232,162,74,.1); }
.btn-filter:active { transform: translateY(1px); box-shadow: none; }
.btn-filter.is-active {
  border-color: rgba(232,162,74,.65);
  background: linear-gradient(135deg, rgba(232,162,74,.26), rgba(232,162,74,.1));
  box-shadow: 0 8px 18px rgba(232,162,74,.1);
}
.btn-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: rgba(19,22,30,.7);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(232,162,74,.95); font-size: 11px; font-weight: 800; line-height: 1;
}

.control-hint { margin-top: 6px; font-size: 11px; color: var(--text-muted); line-height: 1.35; }

.search-row { display: flex; align-items: center; gap: 8px; }
.search-row input { flex: 1 1 auto; }
.check-row {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--border2); background: var(--surface);
  color: var(--text); font-size: 12px; font-weight: 400;
  cursor: pointer; user-select: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.check-row:hover { border-color: rgba(232,162,74,.55); }
.check-row input[type="checkbox"] { margin: 0; width: 14px; height: 14px; accent-color: var(--accent); }
.check-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,162,74,.1); }
.search-input {
  width: clamp(240px, 27vw, 360px); height: 44px; border-radius: 14px;
  padding: 10px 44px 10px 38px; font-size: 13px; font-weight: 500;
}
.search-input-wrap { position: relative; width: clamp(240px, 27vw, 360px); }
.search-input-wrap::before {
  content: '⌕';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 15px;
  pointer-events: none;
}
.search-input-wrap .search-input { width: 100%; }
.search-clear-btn {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04);
  color: var(--text-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast), border-color var(--t), color var(--t), background var(--t);
}
.search-clear-btn.is-visible { opacity: 1; pointer-events: auto; }
.search-clear-btn:hover { border-color: rgba(232,162,74,.45); color: var(--text); }
input::placeholder { color: var(--text-dim); }
input:focus, select:focus { border-color: rgba(232,162,74,.7); box-shadow: 0 0 0 3px rgba(232,162,74,.1); }

/* ── ACCESSIBILITY ── */
:focus-visible { outline: 2px solid rgba(232,162,74,.85); outline-offset: 2px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  box-shadow: 0 0 0 3px rgba(232,162,74,.2);
}
.select-wrap { position: relative; }
.select-wrap::after {
  content: '▾'; position: absolute; right: 9px; top: 50%;
  transform: translateY(-50%); color: var(--text-muted);
  pointer-events: none; font-size: 10px;
}
select { width: 168px; padding-right: 28px; cursor: pointer; }
.filter-bar select { height: 44px; border-radius: 14px; padding-top: 10px; padding-bottom: 10px; }
.toolbar-divider { width: 1px; height: 28px; background: var(--border2); margin: 0 4px; }
.toolbar-sep {
  width: 1px; height: 40px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.1), transparent);
  flex-shrink: 0; align-self: center; margin: 0 4px;
}
.stat-count { font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text); line-height: 1; }
.stat-label { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.stat-pill { display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 20px; font-size: 10px; font-weight: 500; }
.pill-dot { width: 5px; height: 5px; border-radius: 50%; }
.pill-sanierung { background: rgba(224,92,92,.12); color: var(--red); }
.pill-sanierung .pill-dot { background: var(--red); }
.pill-renovierung { background: rgba(232,154,74,.12); color: var(--orange); }
.pill-renovierung .pill-dot { background: var(--orange); }

/* ── CARD GRID ── */
.card-grid {
  padding: 20px clamp(16px, 2.5vw, 32px) 120px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(270px, 22vw, 340px), 1fr));
  gap: clamp(16px, 1.8vw, 24px); flex: 1; align-content: start;
}

.overview-card {
  min-width: 0; padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.055);
  transition: all var(--t); cursor: default;
}
.overview-card:hover {
  border-color: rgba(232,162,74,.22);
  background: rgba(255,255,255,0.035);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.overview-card:hover .overview-value { color: var(--accent); }
.overview-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-dim); font-weight: 700; margin-bottom: 6px;
}
.overview-value {
  font-family: 'DM Serif Display', serif; font-size: 22px;
  line-height: 1.1; color: var(--text); letter-spacing: -.025em;
  transition: color var(--t);
}

/* ── EMPTY STATE ── */
.empty-state {
  margin: 18px 32px 0;
  padding: 56px 32px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.018);
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.empty-icon {
  width: 72px; height: 72px; border-radius: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; margin-bottom: 22px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.empty-title {
  font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px;
  font-family: 'DM Serif Display', serif; letter-spacing: -.01em;
}
.empty-sub { font-size: 13px; color: var(--text-soft); line-height: 1.55; max-width: 380px; }
.empty-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 20px;
}
.empty-filter-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin-top: 14px; max-width: 480px;
}
.empty-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; color: var(--text-soft);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  cursor: default;
}
.empty-filter-chip-x {
  width: 14px; height: 14px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12); color: var(--text-muted);
  cursor: pointer; flex-shrink: 0; font-size: 10px;
  transition: background var(--t-fast), color var(--t-fast);
}
.empty-filter-chip-x:hover { background: rgba(224,92,92,.15); color: var(--red); }

/* ── SKELETON LOADING ── */
@keyframes shimmer {
  0%   { background-position: -400% 0; }
  100% { background-position: 400% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--surface2) 0%, var(--surface3) 35%,
    var(--surface2) 65%, var(--surface3) 100%);
  background-size: 400% 100%;
  animation: shimmer 2s ease-in-out infinite;
  border-radius: 8px; display: block;
}
.skeleton-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 18px; padding: 20px;
  animation: fadeUp .35s ease both;
}
.skeleton-thumb { width: 100%; height: 224px; border-radius: 14px; margin-bottom: 14px; }
.skeleton-line-l { height: 15px; width: 78%; margin-bottom: 9px; }
.skeleton-line-m { height: 13px; width: 52%; margin-bottom: 9px; }
.skeleton-line-s { height: 12px; width: 34%; margin-bottom: 9px; }
.skeleton-price  { height: 38px; width: 58%; margin: 14px 0; }
.skeleton-meta   { height: 12px; width: 85%; margin-bottom: 6px; }

/* ── DATA LOAD ERROR ── */
.load-error {
  grid-column: 1 / -1;
  background: rgba(224,92,92,.08); border: 1px solid rgba(224,92,92,.25);
  border-radius: var(--radius); padding: 14px;
}
.load-error-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.load-error-body  { font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.load-error-details { margin-top: 8px; font-size: 11px; color: var(--text-dim); word-break: break-word; }
.load-error code {
  font-size: 11px; padding: 1px 6px; border-radius: 6px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
}
.data-status {
  margin-left: 0; font-size: 11px; color: var(--text-muted);
  padding: 6px 10px; border-radius: 999px;
  background: rgba(19,22,30,.40); border: 1px solid rgba(255,255,255,0.05);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stats-right .data-status { margin-left: 0; }

/* ── CARD ── */
.card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 18px; padding: 20px;
  display: flex; flex-direction: column;
  transition: all var(--t); position: relative; overflow: hidden;
  animation: fadeUp .35s ease both;
  will-change: transform;
}
.card-thumb {
  width: 100%; height: 224px;
  border-radius: 13px; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 14px; background: var(--surface2);
  cursor: pointer; transition: transform .4s ease;
  display: block;
}
.card-thumb-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 7px; padding: 0; color: var(--text-soft);
  background:
    radial-gradient(circle at 30% 25%, rgba(74,163,232,.10), transparent 55%),
    radial-gradient(circle at 70% 0%, rgba(232,162,74,.10), transparent 60%),
    var(--surface2);
  border: 1px dashed rgba(255,255,255,0.12); text-align: center;
}
.thumb-ph-title { font-size: 13px; font-weight: 750; color: var(--text); letter-spacing: -.01em; }
.thumb-ph-sub   { font-size: 11px; color: var(--text-muted); }
.card:hover .card-thumb { transform: scale(1.04); }

.thumb-carousel { position: relative; }
.thumb-carousel .card-thumb { margin-bottom: 12px; }

/* Gradient overlay at bottom of image */
.thumb-carousel::after {
  content: '';
  position: absolute;
  bottom: 12px; left: 0; right: 0;
  height: 55px;
  background: linear-gradient(to top, rgba(14,18,32,.65), transparent);
  border-radius: 0 0 13px 13px;
  pointer-events: none;
}

.thumb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); background: rgba(10,12,16,.6);
  color: rgba(255,255,255,.95); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  backdrop-filter: blur(12px); z-index: 2;
}
.thumb-prev { left: 10px; }
.thumb-next { right: 10px; }
.thumb-carousel:hover .thumb-btn { opacity: 1; pointer-events: auto; }
.thumb-btn:hover { background: rgba(10,12,16,.8); border-color: rgba(255,255,255,.25); transform: translateY(-50%) scale(1.05); }
.thumb-btn:active { transform: translateY(-50%) scale(.97); }
.thumb-count {
  position: absolute; bottom: 18px; right: 12px; z-index: 2;
  font-size: 10px; color: rgba(255,255,255,.95);
  background: rgba(10,12,16,.6); border: 1px solid rgba(255,255,255,.14);
  padding: 2px 8px; border-radius: 999px;
  opacity: 0; transition: opacity var(--t-fast); backdrop-filter: blur(10px);
}
.thumb-carousel:hover .thumb-count { opacity: 1; }

@media (hover: none) {
  .thumb-btn, .thumb-count { opacity: 1; pointer-events: auto; }
}

.card:nth-child(2) { animation-delay: .05s; }
.card:nth-child(3) { animation-delay: .10s; }
.card:nth-child(n+4) { animation-delay: .14s; }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

.card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(232,162,74,.05) 0%, transparent 55%);
  opacity: 0; transition: opacity var(--t); pointer-events: none; border-radius: 18px;
}
.card:hover {
  border-color: rgba(232,162,74,.42);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-5px);
}
.card:hover::before { opacity: 1; }
.card.map-highlighted {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(232,162,74,.28), var(--shadow-md) !important;
}
.card-accent-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 18px 18px 0 0; }
.line-crimson { background: linear-gradient(90deg, var(--crimson), transparent 70%); }
.line-red     { background: linear-gradient(90deg, var(--red), transparent 70%); }
.line-orange  { background: linear-gradient(90deg, var(--orange), transparent 70%); }
.line-blue    { background: linear-gradient(90deg, var(--blue), transparent 70%); }
.line-purple  { background: linear-gradient(90deg, var(--purple), transparent 70%); }
.line-teal    { background: linear-gradient(90deg, var(--teal), transparent 70%); }
.line-green   { background: linear-gradient(90deg, var(--green), transparent 70%); }
.line-slate   { background: linear-gradient(90deg, var(--slate), transparent 70%); }

.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.card-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.badge-source { letter-spacing: .08em; }
.card-title  {
  font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--text); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  letter-spacing: -.01em;
}
.badge {
  flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
.badge-crimson { background: rgba(207,68,68,.14);   color: var(--crimson); border: 1px solid rgba(207,68,68,.28); }
.badge-red     { background: rgba(224,92,92,.14);   color: var(--red);    border: 1px solid rgba(224,92,92,.28); }
.badge-orange  { background: rgba(232,154,74,.14);  color: var(--orange); border: 1px solid rgba(232,154,74,.28); }
.badge-blue    { background: rgba(74,163,232,.14);  color: var(--blue);   border: 1px solid rgba(74,163,232,.28); }
.badge-purple  { background: rgba(166,108,230,.14); color: var(--purple); border: 1px solid rgba(166,108,230,.28); }
.badge-teal    { background: rgba(74,184,166,.14);  color: var(--teal);   border: 1px solid rgba(74,184,166,.28); }
.badge-green   { background: rgba(74,184,122,.14);  color: var(--green);  border: 1px solid rgba(74,184,122,.28); }
.badge-slate   { background: rgba(122,128,153,.14); color: var(--slate);  border: 1px solid rgba(122,128,153,.28); }
.badge-warn    { background: rgba(232,154,74,.12);  color: var(--orange); border: 1px solid rgba(232,154,74,.28); }
.badge-saved   { background: rgba(232,162,74,.12);  color: var(--accent); border: 1px solid rgba(232,162,74,.28); }
.badge-compare { background: rgba(74,163,232,.12);  color: var(--blue);   border: 1px solid rgba(74,163,232,.28); }
.badge-dismissed { background: rgba(224,92,92,.12); color: var(--red); border: 1px solid rgba(224,92,92,.28); }

.price-row   { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 10px; }
.price-value { display: flex; align-items: baseline; gap: 8px; color: var(--text); }
.price-num   { font-size: 30px; font-weight: 800; letter-spacing: -.025em; }
.price-tail  { font-size: 13px; font-weight: 600; color: var(--meta-text); }
.price-unit  { font-size: 10px; color: var(--text-dim); }
.price-sqm   { margin-left: auto; font-size: 13px; color: var(--text-soft); }

.meta { display: flex; gap: 14px; font-size: 13px; color: var(--meta-text); margin: 10px 0 12px; flex-wrap: wrap; }
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.meta-secondary { margin-top: -6px; font-size: 12px; color: var(--text-soft); }
.meta-score { color: var(--accent); font-weight: 600; }
.meta-score-strong {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(74,163,232,.12);
  border: 1px solid rgba(74,163,232,.22);
}
.meta-score-lage-sehr-gut {
  color: #32d27a;
  background: rgba(50,210,122,.14);
  border-color: rgba(50,210,122,.28);
}
.meta-score-lage-gut {
  color: #4aa3e8;
  background: rgba(74,163,232,.14);
  border-color: rgba(74,163,232,.28);
}
.meta-score-lage-mittel {
  color: #e8b14a;
  background: rgba(232,177,74,.14);
  border-color: rgba(232,177,74,.28);
}
.meta-score-lage-einfach {
  color: #e06a5c;
  background: rgba(224,106,92,.14);
  border-color: rgba(224,106,92,.28);
}
.meta-score-unclear { color: var(--text-muted); font-weight: 500; }
.meta-warn { color: var(--orange); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 13px; border-radius: 999px;
  font-size: 13px; color: var(--meta-text);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
}
.chip-link  { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.10); color: var(--text-soft); }
.chip-warn  { background: rgba(232,154,74,.12); border-color: rgba(232,154,74,.28); color: var(--orange); }
.chip-saved { background: rgba(232,162,74,.1);  border-color: rgba(232,162,74,.28); color: var(--accent); }
.chip-compare { background: rgba(74,163,232,.1); border-color: rgba(74,163,232,.28); color: var(--blue); }

.card-divider { height: 1px; background: rgba(255,255,255,0.05); margin: 8px 0; }
.card-analysis { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.card-description { font-size: 13px; color: var(--text-soft); line-height: 1.55; flex: 1; margin-bottom: 12px; }
.card-trust-wrap { margin-top: 4px; }
.card-trust-wrap .card-trust { margin-top: 0; }
.card-trust {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0;
}
.card-trust-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 27px; padding: 0 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.025);
  color: var(--meta-text); font-size: 11px; font-weight: 650;
}
.card-trust-pill.is-warning { color: var(--orange); border-color: rgba(232,154,74,.25); background: rgba(232,154,74,.08); }
.card-trust-pill.is-success { color: var(--green);  border-color: rgba(74,184,122,.25); background: rgba(74,184,122,.08); }

.card-fallback-note {
  margin-top: 10px; font-size: 13px; line-height: 1.5;
  color: var(--meta-text); padding: 10px 12px;
  border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.055);
}
.card-desc-text {
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.card-analysis-verdict {
  color: var(--text); font-weight: 750; margin-bottom: 8px;
  padding: 9px 11px; border-radius: 12px;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.055);
}
.card-analysis-summary { margin-top: 6px; }
.card-procon {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px;
}
@media (max-width: 460px) { .card-procon { grid-template-columns: 1fr; } }
.card-procon-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim); font-weight: 700;
}
.card-procon-list { list-style: none; padding: 0; margin: 6px 0 0; }
.card-procon-list li {
  margin: 0 0 6px; color: var(--meta-text);
  position: relative; padding-left: 14px;
  font-size: 13px; line-height: 1.45;
}
.card-procon-list li:last-child { margin-bottom: 0; }
.card-procon-list li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--text-dim); }
.card-pro .card-procon-list li::before { color: var(--green); }
.card-con .card-procon-list li::before { color: var(--red); }
.card-actions {
  display: flex; align-items: center;
  gap: 8px; margin-top: auto; padding-top: 4px;
}
.card-action-icons { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }

.btn-primary {
  flex: 1; background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none; color: #111827;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  transition: transform var(--t-fast), filter var(--t), box-shadow var(--t);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  letter-spacing: .02em; white-space: nowrap;
}
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(232,162,74,.3); }
.btn-primary:active { filter: brightness(.98); transform: translateY(0); box-shadow: none; }
.btn-primary.btn-sm { flex: 0 0 auto; padding: 7px 14px; font-size: 12px; border-radius: 8px; }

/* Compact icon-only action buttons */
.btn-action-icon {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,.025);
  color: var(--text-muted);
  font-size: 14px; cursor: pointer; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t-fast);
}
.btn-action-icon:hover  { border-color: rgba(232,162,74,.5); color: var(--text); background: rgba(255,255,255,.06); transform: translateY(-1px); }
.btn-action-icon:active { transform: translateY(0); }
.btn-action-icon.is-saved    { border-color: rgba(232,162,74,.55); background: rgba(232,162,74,.12); color: var(--accent); }
.btn-action-icon.is-active   { border-color: rgba(74,163,232,.45); background: rgba(74,163,232,.12); color: var(--blue); }
.btn-action-icon.is-dismissed{ border-color: rgba(224,92,92,.40);  background: rgba(224,92,92,.10);  color: var(--red); }
.btn-action-icon.btn-map { font-size: 15px; }

/* Reveal icon group on hover; always show when any state is active */
.card .card-action-icons {
  opacity: 0.45; transform: translateY(3px);
  transition: opacity var(--t), transform var(--t);
}
.card:hover .card-action-icons,
.card:focus-within .card-action-icons { opacity: 1; transform: translateY(0); }
.card:has(.btn-save.is-saved) .card-action-icons,
.card:has(.btn-compare.is-active) .card-action-icons,
.card:has(.btn-dismiss.is-dismissed) .card-action-icons { opacity: 1; transform: translateY(0); }
.btn-compare-modal { min-width: 150px; }
.btn-dismiss-modal { min-width: 150px; }

/* ── RIGHT PANEL: sticky map ── */
.panel-right {
  min-width: 0; position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  display: flex; flex-direction: column;
  transition: border-color var(--t-slow), background-color var(--t-slow);
  overflow: visible;
  background: linear-gradient(180deg, var(--map-panel), #ece4d8);
  border: 1px solid var(--map-panel-border);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(28,21,15,.16);
}
.panel-right.collapsed { border-color: transparent; background: transparent; box-shadow: none; }
.map-resize-handle {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: calc(var(--map-resize-hit) * -0.5);
  width: var(--map-resize-hit);
  border-radius: 999px;
  cursor: col-resize;
  z-index: 55;
  outline: none;
}
.map-resize-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.18), rgba(255,255,255,.04));
  transition: background var(--t), box-shadow var(--t);
}
.map-resize-handle:hover::before,
.map-resize-handle:focus-visible::before,
body.is-resizing-map .map-resize-handle::before {
  background: linear-gradient(180deg, rgba(232,162,74,.15), rgba(232,162,74,.7), rgba(232,162,74,.15));
  box-shadow: 0 0 0 3px rgba(232,162,74,.12);
}
.panel-right.collapsed .map-resize-handle {
  opacity: 0;
  pointer-events: none;
}

.map-tab {
  position: absolute; left: 0; top: 50%;
  transform: translateX(-100%) translateY(-50%);
  z-index: 50; background: var(--map-ui);
  border: 1px solid var(--map-ui-border); border-right: none;
  border-radius: 14px 0 0 14px;
  padding: 16px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: color var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
  user-select: none; font: inherit; appearance: none; outline: none;
  box-shadow: 0 14px 30px rgba(28,21,15,.14);
}
.map-tab:hover { border-color: rgba(255,117,0,.45); background: #fffaf3; box-shadow: 0 18px 32px rgba(28,21,15,.18); }
.map-tab:hover .map-tab-label, .map-tab:hover .map-tab-arrow { color: var(--accent); }
.map-tab-icon  { font-size: 13px; filter: saturate(1.2); }
.map-tab-label {
  font-size: 10px; font-family: 'DM Sans', sans-serif;
  color: var(--map-muted); letter-spacing: .08em; text-transform: uppercase;
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; transition: color var(--t);
}
.map-tab-arrow { font-size: 9px; color: #b27a3b; transition: transform var(--t-slow), color var(--t); }
.panel-right.collapsed .map-tab-arrow { transform: scaleX(-1); }

.map-inner {
  flex: 1; position: relative; overflow: hidden;
  min-width: 0; border-radius: 22px;
  padding: 12px;
}
#map {
  width: 100%; height: 100%;
  background: var(--map-canvas);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(110,96,78,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.map-fit-btn {
  position: absolute; top: 26px; right: 26px; z-index: 600;
  height: 42px; width: 42px; border-radius: 14px;
  border: 1px solid var(--map-ui-border); background: var(--map-ui);
  color: var(--map-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 24px rgba(28,21,15,.14);
  transition: border-color var(--t), background var(--t), transform var(--t-fast), box-shadow var(--t);
}
.map-fit-btn:hover { border-color: rgba(255,117,0,.45); background: #fffaf3; transform: translateY(-1px); box-shadow: 0 18px 28px rgba(28,21,15,.18); }
.map-fit-btn:active { transform: scale(.97); }

.map-legend {
  position: absolute; bottom: 24px; left: 24px; z-index: 500;
  background: var(--map-ui); border: 1px solid var(--map-ui-border);
  border-radius: 16px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  backdrop-filter: blur(14px); pointer-events: none;
  box-shadow: 0 16px 32px rgba(28,21,15,.16);
  max-width: 258px;
}
.legend-title { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--map-muted); margin-bottom: 4px; font-weight: 700; }
.legend-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.legend-item  { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--map-ink); }
.legend-dot   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.legend-note {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(96,82,65,.12);
  font-size: 10px;
  line-height: 1.5;
  color: var(--map-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.legend-note-pin {
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ff8a33, var(--map-brand-strong));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 8px 16px rgba(236,93,0,.25);
}

/* ── LEAFLET / MAP UI ── */
.leaflet-container { background: var(--map-canvas) !important; font-family: 'DM Sans', sans-serif; color: var(--map-ink); }
.leaflet-tile { filter: none !important; opacity: 1; }
.theme-light .leaflet-tile { filter: none !important; opacity: 1; }
.theme-light .map-legend { background: var(--map-ui); border-color: var(--map-ui-border); }
.leaflet-bar { box-shadow: none !important; border: none !important; }
.leaflet-control-zoom a {
  width: 42px !important;
  height: 42px !important;
  line-height: 40px !important;
  background: var(--map-ui) !important;
  color: var(--map-ink) !important;
  border: 1px solid var(--map-ui-border) !important;
  transition: color var(--t), border-color var(--t), background var(--t), transform var(--t-fast) !important;
  box-shadow: 0 12px 24px rgba(28,21,15,.14);
}
.leaflet-control-zoom a:hover {
  color: var(--map-brand-strong) !important;
  border-color: rgba(255,117,0,.45) !important;
  background: #fffaf3 !important;
  transform: translateY(-1px);
}
.leaflet-control-attribution {
  background: rgba(255,255,255,.92) !important;
  color: var(--map-muted) !important;
  font-size: 10px !important;
  border: 1px solid rgba(96,82,65,.12);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 10px;
}
.leaflet-control-attribution a { color: var(--map-muted) !important; }
.leaflet-popup-content-wrapper {
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(96,82,65,.14) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 44px rgba(26,20,15,.2) !important;
  color: var(--map-ink) !important;
  padding: 0 !important;
}
.leaflet-popup-content { margin: 0 !important; width: auto !important; }
.leaflet-popup-tip-container { display: none; }
.leaflet-popup-close-button { color: var(--map-muted) !important; font-size: 18px !important; top: 10px !important; right: 12px !important; }
.leaflet-popup-close-button:hover { color: var(--map-ink) !important; background: none !important; }
.map-popup { padding: 16px 16px 18px; min-width: 220px; max-width: 270px; }
.map-popup-thumb {
  width: 100%; height: 128px; object-fit: cover;
  border-radius: 12px; border: 1px solid rgba(96,82,65,.12);
  margin-bottom: 12px; background: #edf2f7;
}
.map-popup-thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--map-muted); font-size: 11px; letter-spacing: .02em; border-style: dashed;
}
.map-popup-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; display: inline-block; margin-bottom: 8px;
}
.badge-popup-crimson { background: rgba(207,68,68,.14);   color: var(--crimson); border: 1px solid rgba(207,68,68,.28); }
.badge-popup-red     { background: rgba(224,92,92,.14);   color: var(--red);    border: 1px solid rgba(224,92,92,.28); }
.badge-popup-orange  { background: rgba(232,154,74,.14);  color: var(--orange); border: 1px solid rgba(232,154,74,.28); }
.badge-popup-blue    { background: rgba(74,163,232,.14);  color: var(--blue);   border: 1px solid rgba(74,163,232,.28); }
.badge-popup-purple  { background: rgba(166,108,230,.14); color: var(--purple); border: 1px solid rgba(166,108,230,.28); }
.badge-popup-teal    { background: rgba(74,184,166,.14);  color: var(--teal);   border: 1px solid rgba(74,184,166,.28); }
.badge-popup-green   { background: rgba(74,184,122,.14);  color: var(--green);  border: 1px solid rgba(74,184,122,.28); }
.badge-popup-slate   { background: rgba(122,128,153,.14); color: var(--slate);  border: 1px solid rgba(122,128,153,.28); }
.map-popup-title  { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.35; margin-bottom: 5px; color: var(--map-ink); }
.map-popup-price  { font-size: 13px; color: var(--map-brand-strong); font-weight: 800; margin-bottom: 3px; }
.map-popup-loc    { font-size: 11px; color: var(--map-muted); margin-bottom: 6px; }
.map-popup-facts  { font-size: 11px; color: var(--meta-text); margin-bottom: 10px; }
.map-popup-verdict {
  font-size: 11px; line-height: 1.5; color: var(--map-ink); font-weight: 700;
  margin: 10px 0; padding: 9px 11px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,245,232,.95), rgba(255,251,245,.95));
  border: 1px solid rgba(255,117,0,.16);
}
.map-popup-desc     { font-size: 11px; color: var(--map-muted); line-height: 1.55; margin: 10px 0 11px; }
.map-popup-analysis { font-size: 11px; color: var(--map-muted); line-height: 1.45; margin: 10px 0 11px; }
.map-popup-h { font-size: 10px; color: var(--map-ink); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-top: 8px; }
.map-popup-h:first-child { margin-top: 0; }
.map-popup-p  { margin-top: 2px; }
.map-popup-ul { margin: 4px 0 0 18px; padding: 0; }
.map-popup-ul li { margin: 0 0 2px; }

/* Compact pro/con chips in popup */
.popup-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 8px 0 10px;
}
.popup-chip {
  display: inline-block;
  font-size: 10px; line-height: 1.4;
  padding: 2px 7px; border-radius: 20px;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.popup-chip-pro {
  background: rgba(74,184,122,.11);
  color: #2d8d57;
  border: 1px solid rgba(74,184,122,.2);
}
.popup-chip-con {
  background: rgba(224,92,92,.09);
  color: #c25353;
  border: 1px solid rgba(224,92,92,.18);
}

.map-popup-btn {
  display: block; width: 100%; text-align: center;
  background: linear-gradient(180deg, #ff8a33, var(--map-brand-strong));
  color: #fff; border: none;
  padding: 9px 12px; border-radius: 12px;
  font-size: 11px; font-weight: 800; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 12px 18px rgba(236,93,0,.22);
  transition: background var(--t), transform var(--t-fast), box-shadow var(--t);
}
.map-popup-btn:hover { background: linear-gradient(180deg, #ff933f, #f26505); transform: translateY(-1px); box-shadow: 0 16px 22px rgba(236,93,0,.28); }

.map-pin-icon {
  background: transparent !important;
  border: 0 !important;
}
.map-price-pin {
  position: relative;
  min-width: 86px;
  max-width: 108px;
  height: 40px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,249,241,.98));
  border: 1px solid rgba(96,82,65,.14);
  box-shadow: 0 14px 22px rgba(34,26,18,.16), inset 0 1px 0 rgba(255,255,255,.9);
  color: var(--map-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.map-price-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-right: 1px solid rgba(96,82,65,.14);
  border-bottom: 1px solid rgba(96,82,65,.14);
  border-bottom-right-radius: 4px;
  box-shadow: 4px 4px 8px rgba(34,26,18,.08);
}
.map-price-pin.is-approx {
  background: linear-gradient(180deg, rgba(255,248,238,.97), rgba(255,251,246,.97));
  border-style: dashed;
}
.map-price-pin-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--pin-accent, var(--map-brand));
  box-shadow: 0 0 0 3px rgba(255,255,255,.92);
}
.map-price-pin-label {
  max-width: 72px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: transparent !important;
}
.marker-cluster-small > div,
.marker-cluster-medium > div,
.marker-cluster-large > div {
  background: transparent !important;
}
.map-cluster-icon {
  background: transparent !important;
  border: 0 !important;
}
.map-cluster-bubble {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,117,0,.15) !important;
  box-shadow: 0 16px 30px rgba(34,26,18,.14);
}
.map-cluster-core {
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ff8a33, var(--map-brand-strong)) !important;
  color: #fff;
  border: 3px solid rgba(255,255,255,.96);
  font-weight: 800;
  letter-spacing: -.02em;
}
.map-cluster-bubble.is-small .map-cluster-core {
  width: 40px;
  height: 40px;
  font-size: 13px;
}
.map-cluster-bubble.is-medium .map-cluster-core {
  width: 46px;
  height: 46px;
  font-size: 14px;
}
.map-cluster-bubble.is-large .map-cluster-core {
  width: 54px;
  height: 54px;
  font-size: 15px;
}

/* ── MODALS ── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.78); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--card-bg); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; max-width: 1000px; width: 90%;
  max-height: 88vh; overflow-y: auto; padding: 28px;
  position: relative; z-index: 1000;
  animation: modalIn .22s ease;
  box-shadow: 0 32px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,0.04);
}
.modal::-webkit-scrollbar { width: 4px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; }

.modal-filters { max-width: min(1080px, 94vw); width: min(1080px, 94vw); }
.modal-compare { max-width: min(1280px, 96vw); width: min(1280px, 96vw); }
.modal-title-sm { font-size: clamp(20px, 2.8vw, 28px); }
.modal-submeta-sm { font-size: 13px; margin-top: 6px; }
.modal-filters input, .modal-filters select { width: 100%; }
.modal-filters .num-input { width: 100%; }
.modal-filters .advanced-grid { padding: 0; }
.compare-modal-body { min-width: 0; }
.compare-table-wrap {
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  background: rgba(255,255,255,0.018);
}
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 880px;
}
.compare-table th,
.compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  vertical-align: top;
}
.compare-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgba(14,18,32,.97);
  backdrop-filter: blur(12px);
}
.compare-table th:first-child,
.compare-table td:first-child {
  position: sticky; left: 0; z-index: 1;
  min-width: 160px;
  background: rgba(14,18,32,.97);
  backdrop-filter: blur(12px);
}
.compare-table thead th:first-child { z-index: 3; }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
  font-weight: 700;
}
.compare-header-card { display: flex; flex-direction: column; gap: 10px; min-width: 220px; }
.compare-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.compare-header-title {
  font-family: 'DM Serif Display', serif;
  font-size: 18px; line-height: 1.25; color: var(--text);
}
.compare-header-meta { font-size: 12px; color: var(--text-soft); line-height: 1.5; }
.compare-header-submeta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 12px; font-weight: 650; color: var(--meta-text);
}
.compare-remove-btn {
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
  color: var(--text-muted); cursor: pointer; flex: 0 0 auto;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.compare-remove-btn:hover { border-color: rgba(224,92,92,.38); color: var(--red); background: rgba(224,92,92,.08); }
.compare-source-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: fit-content; min-height: 34px; padding: 0 10px;
  border-radius: 10px; text-decoration: none;
  color: var(--accent); background: rgba(232,162,74,.08);
  border: 1px solid rgba(232,162,74,.18);
}
.compare-source-link:hover { border-color: rgba(232,162,74,.45); background: rgba(232,162,74,.12); }
.compare-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.compare-list li {
  position: relative; padding-left: 14px;
  color: var(--meta-text); line-height: 1.5;
}
.compare-list li::before {
  content: '•'; position: absolute; left: 0; top: 0; color: var(--text-dim);
}
.compare-list-pro li::before { color: var(--green); }
.compare-list-con li::before { color: var(--red); }
.compare-row-summary td { line-height: 1.6; }
.compare-empty-cell { color: var(--text-muted); }

/* ── FILTER TAB BAR ── */
.filter-modal-body { display: flex; flex-direction: column; gap: 18px; }
.filter-modal-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(circle at 0% 0%, rgba(232,162,74,.09), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(74,163,232,.06), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.015));
}
.filter-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
}
.filter-hero-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.filter-hero-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}
.filter-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.filter-hero-stat {
  min-width: 118px;
  padding: 14px 15px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(12,16,24,.5);
}
.filter-hero-stat-value {
  font-family: 'DM Serif Display', serif;
  font-size: 28px;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--text);
}
.filter-hero-stat-label {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
}
.filter-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.filter-tab {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 84px;
  padding: 14px 16px;
  background: rgba(255,255,255,.022);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  position: relative;
  text-align: left;
}
.filter-tab:hover {
  color: var(--text);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transform: translateY(-1px);
}
.filter-tab.is-active {
  color: var(--text);
  border-color: rgba(232,162,74,.26);
  background: linear-gradient(180deg, rgba(232,162,74,.12), rgba(232,162,74,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 18px rgba(0,0,0,.12);
}
.filter-tab-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: var(--accent);
  font-size: 15px;
  flex: 0 0 auto;
}
.filter-tab-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.filter-tab-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.filter-tab-meta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-soft);
}
.filter-tab-badge {
  margin-left: auto;
  color: var(--accent);
  font-size: 10px;
  align-self: flex-start;
}
.filter-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 999px;
  background: var(--accent); color: #000; font-size: 10px; font-weight: 700;
  margin-left: auto; padding: 0 4px;
  align-self: flex-start;
}

/* ── FILTER TAB PANELS ── */
.filter-tab-panel { display: none; }
.filter-tab-panel.is-active { display: flex; flex-direction: column; gap: 16px; }
.filter-panel-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 2px 4px;
}
.filter-panel-intro-title {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--text);
}
.filter-panel-intro-text {
  max-width: 680px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ── FILTER SECTIONS ── */
.fsec {
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.014));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.fsec-last { padding-bottom: 18px; }
.fsec-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fsec-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent); font-weight: 700;
}
.fsec-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}
.fsec-row { display: grid; gap: 10px 20px; }
.fsec-2col { grid-template-columns: 1fr 1fr; }
.fsec-3col { grid-template-columns: 1fr 1fr 1fr; }

/* Nicer labels inside filter modal */
.modal-filters .control-label {
  font-size: 10px; letter-spacing: .08em; color: var(--text-muted);
}
/* Override toolbar check-row style inside filter modal */
.modal-filters .check-row {
  border: none; background: none; height: auto; padding: 0;
  align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 10px;
  cursor: default;
}
.modal-filters .check-row:hover { border-color: transparent; }
.modal-filters .check-row:focus-within { box-shadow: none; }

/* Area panel layout */
.ftp-area { display: none; flex-direction: column; gap: 14px; }
.ftp-area.is-active { display: flex; }
.area-controls {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 12px 16px;
  align-items: start;
}
.area-status-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Legacy .filter-section for non-details usage (kept for safety) */
.filter-section-title {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 700; margin-bottom: 10px;
}
.area-map-wrap { margin-top: 12px; }
.area-map {
  height: 280px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08); overflow: hidden;
  background: rgba(0,0,0,0.2);
}
.area-meta {
  flex: 1;
  font-size: 12px; color: var(--text-muted); line-height: 1.4;
  padding: 5px 0;
}
.num-input-sm { max-width: 100%; }
.filter-modal-footer {
  display: flex; align-items: center; gap: 12px;
  margin-top: 4px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.055);
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(11,14,22,0), rgba(11,14,22,.92) 30%);
  backdrop-filter: blur(10px);
}
.filter-footer-spacer { flex: 1; }
.btn-primary-compact { flex: 0 0 auto; padding: 10px 16px; height: 40px; }

@keyframes modalIn {
  from { opacity:0; transform:translateY(14px) scale(.97); filter: blur(3px); }
  to   { opacity:1; transform:none; filter: none; }
}
@keyframes modalOut {
  from { opacity:1; transform:none; }
  to   { opacity:0; transform:translateY(8px) scale(.98); }
}

.modal-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 22px;
}
.modal-header-content { flex: 1; min-width: 0; }

.modal-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(22px, 3.2vw, 36px); font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em;
  margin-top: 8px;
}

/* Price KPI strip */
.modal-price-kpi {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  margin: 12px 0 6px;
}
.mkpi {
  font-size: 15px; font-weight: 600; color: var(--text-soft);
}
.mkpi-price {
  font-size: clamp(24px, 3vw, 34px); font-weight: 700;
  color: var(--accent); letter-spacing: -.02em; font-family: 'DM Sans', sans-serif;
}

.modal-location-line {
  font-size: 14px; color: var(--text-muted); margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.modal-submeta          { margin-top: 8px; font-size: 16px; color: var(--text-soft); line-height: 1.45; }
.modal-submeta-secondary { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.modal-actions-top { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.btn-source {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; text-decoration: none;
}
.btn-save-modal { min-width: 150px; }

.close-btn {
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02);
  color: var(--meta-text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t-fast);
}
.close-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); color: var(--text); transform: rotate(90deg); }

.modal-body {
  display: grid; grid-template-columns: 0.95fr 1.25fr;
  gap: 28px; margin-top: 0; align-items: start;
}
.modal-side { position: sticky; top: 18px; align-self: start; }
.modal-main { min-width: 0; }
.modal.is-media-empty .gallery-main,
.modal.is-media-empty .gallery-placeholder { height: 240px; }
.modal.is-lean-side .modal-body { grid-template-columns: 0.78fr 1.22fr; }
.modal.is-lean-side .modal-side { top: 8px; }

/* ── GALLERY ── */
.gallery { min-width: 0; }
.gallery-stage { position: relative; }
.gallery-main {
  width: 100%; height: clamp(240px, 28vw, 360px);
  border-radius: 16px; object-fit: cover;
  border: 1px solid var(--card-border); background: var(--surface2);
  transition: opacity var(--t-fast);
}
.gallery-main.loading { opacity: 0.5; }
.gallery-placeholder {
  width: 100%; height: clamp(240px, 28vw, 360px); border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.12);
  background: radial-gradient(circle at 20% 20%, rgba(74,163,232,.10), transparent 60%),
              radial-gradient(circle at 70% 0%, rgba(232,162,74,.10), transparent 60%), var(--surface2);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; color: var(--text-muted);
}
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(10,12,16,.62);
  color: rgba(255,255,255,.95); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(12px);
  transition: border-color var(--t), background var(--t), opacity var(--t), transform var(--t-fast);
}
.gallery-nav:hover { border-color: rgba(232,162,74,.55); background: rgba(10,12,16,.8); transform: translateY(-50%) scale(1.05); }
.gallery-nav:disabled { opacity: .3; cursor: default; transform: translateY(-50%); }
.gallery-nav-prev { left: 12px; }
.gallery-nav-next { right: 12px; }
.gallery-counter {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  min-height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(10,12,16,.62);
  color: rgba(255,255,255,.95);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(10px);
}
.gallery-ph-title { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.gallery-ph-sub   { font-size: 12px; color: var(--text-muted); }
.gallery-thumbs { display: grid; gap: 9px; margin-top: 12px; grid-template-columns: repeat(5, minmax(0,1fr)); }
.thumb-row { display: grid; gap: 9px; }
.thumb {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 11px;
  object-fit: cover; opacity: .68; border: 1px solid transparent;
  transition: all var(--t); min-width: 0; cursor: pointer;
}
.thumb.active { opacity: 1; border-color: rgba(245,158,11,.75); box-shadow: 0 0 0 2px rgba(245,158,11,.2); }
.thumb:hover  { opacity: 1; transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.thumb-more {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 11px;
  border: 1px dashed rgba(255,255,255,0.13); background: rgba(255,255,255,0.025);
  color: var(--text); font-size: 13px; font-weight: 800; cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t-fast);
  display: flex; align-items: center; justify-content: center;
}
.thumb-more:hover { border-color: rgba(232,162,74,.55); background: rgba(232,162,74,.07); transform: translateY(-1px); }
.gallery-thumb {
  width: 96px; height: 72px; border-radius: 11px;
  object-fit: cover; cursor: pointer; opacity: .68;
  border: 1px solid transparent; background: var(--surface2);
  transition: all var(--t); flex: 0 0 auto;
}
.gallery-thumb:hover { opacity: 1; transform: translateY(-1px); }
.gallery-thumb.active { opacity: 1; border-color: rgba(245,158,11,.75); }
.gallery-thumb.is-active { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232,162,74,.25); }

/* ── PROPERTY GRID ── */
.property-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.property-grid.is-compact { gap: 10px; }
.property-item {
  background: var(--fact-bg); border: 1px solid var(--card-border);
  padding: 13px; border-radius: 11px;
  transition: border-color var(--t), background var(--t);
}
.property-item:hover { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
.property-key   { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 5px; font-weight: 600; }
.property-value { font-size: 16px; color: var(--meta-text); font-weight: 600; }

/* ── MODAL SECTIONS ── */
.modal-section { margin-top: 26px; }
.modal-section:first-child { margin-top: 0; }
.modal-section-title {
  font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px;
  letter-spacing: -.01em;
}
.modal-section-title::after {
  content: ''; display: block; height: 1px;
  background: rgba(255,255,255,0.055); margin-top: 10px; margin-bottom: 16px;
}
.modal-desc  { font-size: 16px; line-height: 1.75; color: var(--meta-text); }
.description { max-width: 70ch; }
.description p + p { margin-top: 16px; }
.description strong { color: var(--text); font-weight: 700; }

.modal-empty-card {
  padding: 16px 18px; border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.11); background: rgba(255,255,255,0.018);
}
.modal-empty-card.is-muted  { border-color: rgba(255,255,255,0.09);  background: rgba(255,255,255,0.022); }
.modal-empty-card.is-warning { border-color: rgba(232,154,74,.25); background: rgba(232,154,74,.07); }
.modal-empty-title {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text); margin-bottom: 8px;
}
.modal-empty-body { font-size: 14px; line-height: 1.6; color: var(--meta-text); }

/* ── DECISION GRID ── */
.modal-decision .modal-section-title::after { margin-bottom: 12px; }
.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.decision-card {
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02); padding: 14px;
  transition: border-color var(--t);
}
.decision-card:hover { border-color: rgba(255,255,255,0.12); }
.decision-h {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 800; margin-bottom: 8px;
}
.decision-p  { font-size: 13px; line-height: 1.55; color: var(--meta-text); }
.decision-ul {
  margin: 0; padding-left: 16px;
  color: var(--meta-text); font-size: 13px; line-height: 1.55;
}
.decision-ul li { margin-bottom: 6px; }
.decision-ul li:last-child { margin-bottom: 0; }

/* ── CHIPS ── */
.modal-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.modal-chips-top { margin-top: 16px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.modal-chips a.chip { text-decoration: none; cursor: pointer; transition: border-color var(--t), color var(--t); }
.modal-chips a.chip:hover { border-color: var(--accent); color: var(--accent); }
.section-heading { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }

/* Map in side column */
.modal-side-map {
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border2);
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.modal-side-map .modal-map {
  width: 100%; height: 200px;
  border-radius: 0; border: 0;
  background: var(--surface2);
}

/* Legacy map card (kept for compat) */
.map-card {
  background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.055);
  border-radius: 18px; padding: 14px;
}
.map-frame { overflow: hidden; border-radius: 14px; min-height: 320px; }
.modal-map { width: 100%; height: 320px; border-radius: 0; border: 0; background: var(--surface2); }

/* ── KI-ANALYSE structured layout ───────────────────────────────────────── */
.analysis-verdict-box {
  background: linear-gradient(135deg, rgba(232,162,74,.08), rgba(232,162,74,.04));
  border: 1px solid rgba(232,162,74,.28);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}
.analysis-verdict-label {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}

.analysis-procon-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 14px;
}
.analysis-procon-col {
  border-radius: 12px; padding: 12px 14px;
  font-size: 13px; line-height: 1.55;
}
.analysis-pro-col {
  background: rgba(74,184,122,.07);
  border: 1px solid rgba(74,184,122,.22);
}
.analysis-con-col {
  background: rgba(239,68,68,.06);
  border: 1px solid rgba(239,68,68,.18);
}
.analysis-procon-title {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 8px;
}
.analysis-pro-col .analysis-procon-title { color: #4ab87a; }
.analysis-con-col .analysis-procon-title { color: #ef8080; }
.analysis-procon-list {
  margin: 0; padding-left: 16px; color: var(--meta-text);
}
.analysis-procon-list li { margin-bottom: 5px; }
.analysis-procon-list li:last-child { margin-bottom: 0; }

.analysis-fazit {
  font-size: 13px; line-height: 1.6; color: var(--text-muted);
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  margin-top: 2px;
}
.analysis-fazit-label {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px;
}

/* ── DESCRIPTION COLLAPSE ───────────────────────────────────────────────── */
.modal-desc.is-collapsed {
  max-height: 180px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.btn-desc-expand {
  display: block;
  margin-top: 8px;
  background: none; border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 12px; font-weight: 600;
  color: var(--text-soft); cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.btn-desc-expand:hover { border-color: var(--accent); color: var(--accent); }

/* Rich text (markdown-lite) */
.rt-h  { font-weight: 700; color: var(--text); margin: 12px 0 6px; }
.rt-h1 { font-size: 14px; }
.rt-h2 { font-size: 13px; }
.rt-h3 { font-size: 12px; color: var(--accent); }
.rt-p  { white-space: normal; }
.rt-ul { list-style: none; padding: 0; margin: 10px 0 0; }
.rt-ul li { margin-bottom: 8px; color: var(--meta-text); position: relative; padding-left: 18px; }
.rt-ul li::before { content: "•"; position: absolute; left: 0; color: var(--accent); }

/* Prevent overflow */
.modal-title, .modal-submeta, .modal-desc,
.property-value, .decision-p, .decision-ul li,
.chip, .rt-p, .rt-ul li { overflow-wrap: anywhere; }

/* ── TOAST NOTIFICATION ── */
.toast-container {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 2000; display: flex; flex-direction: column;
  align-items: center; gap: 10px; pointer-events: none;
}
.toast {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--surface3); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text); font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
  pointer-events: auto;
  animation: toastIn .3s cubic-bezier(.34,1.56,.64,1) both;
}
.toast.is-hiding { animation: toastOut .25s ease both; }
.toast-icon { font-size: 16px; }
.toast-save   { border-color: rgba(232,162,74,.35); background: rgba(19,22,30,.92); color: var(--accent); }
.toast-unsave { border-color: rgba(255,255,255,0.12); color: var(--text-muted); }
@keyframes toastIn  { from { opacity:0; transform:translateY(12px) scale(.9); } to { opacity:1; transform:none; } }
@keyframes toastOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-8px) scale(.96); } }

/* ── FOOTER ── */
footer {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 16px 32px; display: flex; justify-content: space-between;
  align-items: center; font-size: 11px; color: var(--text-dim);
  gap: 12px;
}
footer span:last-child {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05);
}

/* ── BACK TO TOP ── */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 700;
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(14,18,32,.9); color: var(--text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--t), transform var(--t), border-color var(--t), box-shadow var(--t);
  box-shadow: var(--shadow-xs);
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { border-color: rgba(232,162,74,.55); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.back-to-top:active { transform: translateY(0); }

/* ── MOBILE ACTIONS ── */
.mobile-actions {
  display: none; position: fixed;
  left: 14px; right: 14px; bottom: 14px; z-index: 650;
  gap: 8px; padding: 8px;
  border-radius: 18px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,12,16,.9); backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
}
.mobile-action-btn {
  flex: 1 1 0; min-height: 48px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t-fast);
  /* ensure proper tap target */
  touch-action: manipulation;
}
.mobile-action-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
.mobile-action-btn:active { transform: scale(.97); background: rgba(255,255,255,0.1); }

/* ── LIGHT THEME ── */
.theme-light {
  --bg:         #f5f3ee;
  --surface:    #fefcf8;
  --surface2:   #f0ede6;
  --surface3:   #e8e3d8;
  --border:     #ddd8cc;
  --border2:    #cac4b6;
  --text:       #1a1610;
  --text-muted: #7a6e5e;
  --text-dim:   #a09280;
  --text-soft:  #5a5040;
  --meta-text:  #3d3628;
  --fact-bg:    rgba(0,0,0,0.025);
  --card-bg:    #fefcf8;
  --card-border: rgba(0,0,0,0.085);
  --accent:     #c97d2e;
  --accent2:    #a65c1a;
  --accent-glow: rgba(201,125,46,0.15);
}
.theme-light body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 55% at 15% -5%, rgba(201,125,46,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 95% 80%, rgba(74,163,232,.03) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E");
  background-attachment: fixed;
}
.theme-light nav {
  background: rgba(245,243,238,.94);
  border-bottom-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.theme-light .header-kicker {
  background: rgba(201,125,46,.09);
  border-color: rgba(201,125,46,.2);
}
.theme-light .toolbar {
  background:
    radial-gradient(circle at top left, rgba(201,125,46,.08), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(74,163,232,.05), transparent 32%),
    linear-gradient(180deg, rgba(254,252,248,.99), rgba(254,252,248,.96));
  box-shadow: 0 18px 34px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,0.08);
}
.theme-light .card {
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,0.03);
}
.theme-light .card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 0 0 1px rgba(201,125,46,.2);
  border-color: rgba(201,125,46,.35);
}
.theme-light .nav-icon-btn,
.theme-light .panel-right { background: var(--card-bg); border-color: var(--card-border); }
.theme-light .sort-pill,
.theme-light .overview-pill {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.1);
}
.theme-light .sort-pill-bar,
.theme-light .active-filters-bar,
.theme-light .active-filters-summary,
.theme-light .filter-modal-hero,
.theme-light .filter-hero-stat,
.theme-light .fsec,
.theme-light .filter-tab,
.theme-light .check-label {
  background: rgba(0,0,0,.024);
  border-color: rgba(0,0,0,.08);
}
.theme-light .active-filters-bar {
  background:
    radial-gradient(circle at 0% 0%, rgba(201,125,46,.08), transparent 40%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.012));
}
.theme-light .filter-tab.is-active {
  background: linear-gradient(180deg, rgba(201,125,46,.12), rgba(201,125,46,.045));
  border-color: rgba(201,125,46,.26);
}
.theme-light .filter-tab-icon {
  background: rgba(201,125,46,.08);
  border-color: rgba(201,125,46,.18);
}
.theme-light .overview-flyout {
  background: rgba(248,246,241,.98);
  border-color: rgba(0,0,0,.08);
}
.theme-light .map-tab { background: var(--surface2); border-color: var(--border2); }
.theme-light .toolbar-divider { background: var(--border); }
.theme-light .toolbar-sep { background: linear-gradient(180deg, transparent, rgba(0,0,0,.12), transparent); }
.theme-light input, .theme-light select { background: var(--surface); color: var(--text); border-color: var(--border2); }
.theme-light input:focus, .theme-light select:focus { border-color: rgba(201,125,46,.7); box-shadow: 0 0 0 3px rgba(201,125,46,.12); }
.theme-light .quick-status-chip { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); color: var(--text-muted); }
.theme-light .quick-status-chip:hover { background: rgba(0,0,0,.06); border-color: rgba(201,125,46,.45); }
.theme-light .tag-input-wrap { background: var(--surface); border-color: var(--border2); }
.theme-light .tag-chip { background: rgba(201,125,46,.10); border-color: rgba(201,125,46,.22); }
.theme-light .btn-secondary { background: rgba(0,0,0,.03); border-color: var(--border2); }
.theme-light .btn-secondary:hover { background: rgba(0,0,0,.06); border-color: rgba(201,125,46,.5); }
.theme-light .btn-secondary.is-dismissed,
.theme-light .btn-dismiss-toggle.is-active { background: rgba(224,92,92,.08); border-color: rgba(224,92,92,.22); color: var(--red); }
.theme-light .btn-filter { border-color: rgba(201,125,46,.4); background: linear-gradient(135deg, rgba(201,125,46,.14), rgba(201,125,46,.05)); }
.theme-light .btn-filter.is-active { background: linear-gradient(135deg, rgba(201,125,46,.2), rgba(201,125,46,.07)); }
.theme-light .card-thumb-placeholder { background: var(--surface2); }
.theme-light .pager-bottom { background: linear-gradient(0deg, rgba(245,243,238,.98), transparent); }
.theme-light .mobile-actions { background: rgba(245,243,238,.93); border-color: var(--border); }
.theme-light .modal { background: var(--card-bg); border-color: rgba(0,0,0,.1); box-shadow: 0 32px 80px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.05); }
.theme-light .compare-bar { background: rgba(74,163,232,.08); border-color: rgba(74,163,232,.2); }
.theme-light .compare-pill { background: rgba(74,163,232,.12); border-color: rgba(74,163,232,.2); }
.theme-light .compare-table-wrap { border-color: rgba(0,0,0,.08); background: rgba(0,0,0,.015); }
.theme-light .compare-table thead th,
.theme-light .compare-table th:first-child,
.theme-light .compare-table td:first-child { background: rgba(254,252,248,.98); }
.theme-light .overview-card { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.07); }
.theme-light .overview-card:hover { background: rgba(0,0,0,.04); border-color: rgba(201,125,46,.25); }
.theme-light .kpi { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.07); }
.theme-light .toolbar-kpi { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.07); }
.theme-light .filter-chip { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); color: var(--text-muted); }
.theme-light .filter-footer-count { background: rgba(201,125,46,.08); border-color: rgba(201,125,46,.18); }
.theme-light .leaflet-control-attribution { background: rgba(245,243,238,.85) !important; }
.theme-light .map-fit-btn { background: rgba(245,243,238,.88); color: var(--text-muted); border-color: var(--border); }
.theme-light .back-to-top { background: rgba(245,243,238,.92); color: var(--text-muted); border-color: var(--border2); }
.theme-light .toast { background: rgba(245,243,238,.95); color: var(--text); }
.theme-light footer { border-top-color: var(--border); color: var(--text-dim); }
.theme-light .empty-state { border-color: rgba(0,0,0,.08); background: rgba(0,0,0,.02); }
.theme-light .empty-icon { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.09); }
.theme-light .stats-right { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.07); }
.theme-light .pager { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.07); }
.theme-light .pager-btn { background: var(--surface); border-color: var(--border2); color: var(--text); }
.theme-light .card-accent-line.line-crimson,
.theme-light .card-accent-line.line-red,
.theme-light .card-accent-line.line-orange,
.theme-light .card-accent-line.line-blue,
.theme-light .card-accent-line.line-purple,
.theme-light .card-accent-line.line-teal,
.theme-light .card-accent-line.line-green,
.theme-light .card-accent-line.line-slate { opacity: 0.7; }

/* ── LIGHT THEME — EXTENDED OVERRIDES ── */

/* Structural borders */
.theme-light .header                { border-bottom-color: rgba(0,0,0,.07); }
.theme-light .quick-status-bar     { border-top-color: rgba(0,0,0,.07); }
.theme-light footer span:last-child { background: rgba(0,0,0,.03); border-color: var(--border); }

/* Data-status badge */
.theme-light .data-status { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.09); }

/* Card image */
.theme-light .card-thumb            { border-color: rgba(0,0,0,.08); }
.theme-light .card-thumb-placeholder { border: 1px dashed rgba(0,0,0,.13); }
.theme-light .thumb-carousel::after { background: linear-gradient(to top, rgba(245,243,238,.3), transparent); }

/* Search clear button */
.theme-light .search-clear-btn { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04); color: var(--text-muted); }
.theme-light .search-clear-btn:hover { border-color: rgba(201,125,46,.45); color: var(--text); }

/* Card interior */
.theme-light .card-divider          { background: rgba(0,0,0,.07); }
.theme-light .chip                  { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
.theme-light .card-trust-pill       { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
.theme-light .card-analysis-verdict { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.09); }
.theme-light .card-fallback-note    { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.09); }

/* Action icon buttons */
.theme-light .btn-action-icon       { background: rgba(0,0,0,.04); border-color: var(--border2); }
.theme-light .btn-action-icon:hover { background: rgba(0,0,0,.07); }

/* Modal — close & remove */
.theme-light .close-btn { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.04); color: var(--text-muted); }
.theme-light .close-btn:hover { border-color: rgba(0,0,0,.18); background: rgba(0,0,0,.08); color: var(--text); }
.theme-light .compare-remove-btn  { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.04); }
.theme-light .filter-modal-footer { border-top-color: rgba(0,0,0,.08); background: linear-gradient(180deg, rgba(245,243,238,0), rgba(245,243,238,.95) 34%); }
.theme-light .modal-section-title::after { background: rgba(0,0,0,.07); }
.theme-light .modal-empty-card    { border-color: rgba(0,0,0,.13); background: rgba(0,0,0,.02); }
.theme-light .modal-empty-card.is-muted { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.025); }
.theme-light .map-card            { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }

/* Map popup */
.theme-light .map-popup-verdict   { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.09); }

/* Compare table row borders */
.theme-light .compare-table th,
.theme-light .compare-table td    { border-bottom-color: rgba(0,0,0,.07); }

/* Gallery in modal */
.theme-light .gallery-placeholder { border: 1px dashed rgba(0,0,0,.13); }
.theme-light .thumb-more { border: 1px dashed rgba(0,0,0,.13); background: rgba(0,0,0,.03); }

/* Filter modal — area map */
.theme-light .area-map { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.03); }

/* Empty state filter chips */
.theme-light .empty-filter-chip   { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
.theme-light .empty-filter-chip-x { border-color: rgba(0,0,0,.12); }

/* Mobile action bar */
.theme-light .mobile-action-btn { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.04); color: var(--text); }
.theme-light .mobile-action-btn:hover { background: rgba(0,0,0,.07); border-color: rgba(201,125,46,.42); }

/* Decision card hover */
.theme-light .decision-card:hover { border-color: rgba(0,0,0,.14); }

/* Analysis boxes */
.theme-light .analysis-fazit { background: rgba(0,0,0,.03); }

/* Property item hover */
.theme-light .property-item:hover { border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.04); }

/* Toast variants */
.theme-light .toast-save { background: rgba(254,252,248,.97); border-color: rgba(201,125,46,.35); color: var(--accent); }

/* Map resize handle */
.theme-light .map-resize-handle::before {
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.15), rgba(0,0,0,.04));
}

/* Scrollbar */
.theme-light .panel-left::-webkit-scrollbar-thumb { background: var(--border); }

.theme-light .panel-right {
  background: linear-gradient(180deg, var(--map-panel), #ece4d8);
  border-color: var(--map-panel-border);
}
.theme-light .map-tab {
  background: var(--map-ui);
  border-color: var(--map-ui-border);
}
.theme-light .map-fit-btn {
  background: var(--map-ui);
  color: var(--map-ink);
  border-color: var(--map-ui-border);
}
.theme-light .leaflet-control-attribution {
  background: rgba(255,255,255,.92) !important;
}
.theme-light .map-popup-verdict {
  background: linear-gradient(180deg, rgba(255,245,232,.95), rgba(255,251,245,.95));
  border-color: rgba(255,117,0,.16);
}
.theme-light .area-map {
  border-color: rgba(96,82,65,.12);
  background: #edf2f7;
}

/* ── RESPONSIVE ── */
@media (max-width: 980px) {
  .advanced-grid { grid-template-columns: repeat(2, minmax(160px,1fr)); }
  .modal-filters { width: 94%; }
  .fsec-3col { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 640px) {
  .fsec { padding: 12px 14px; }
  .fsec-2col { grid-template-columns: 1fr; }
  .fsec-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .advanced-grid { grid-template-columns: 1fr; }
  .fsec-3col { grid-template-columns: 1fr; }
  .num-input { width: 100%; }
  .range-row { flex-direction: column; align-items: stretch; }
  .search-row { flex-direction: column; align-items: stretch; }
  .btn-secondary { width: 100%; }
  .card-actions .btn-secondary,
  .modal-actions-top .btn-secondary { width: auto; }
  .preset-controls { flex-direction: column; align-items: stretch; }
  .preset-select-wrap,
  .preset-actions { width: 100%; }
  .tag-input-row { align-items: stretch; }
  .sort-pill-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .sort-pill-bar::-webkit-scrollbar { display: none; }
}

@media (max-width: 980px) {
  .modal { width: 94%; padding: 22px; }
  .modal-body { grid-template-columns: 1fr; }
  .modal-side { position: relative; top: auto; }
  .modal.is-lean-side .modal-body { grid-template-columns: 1fr; }
  .gallery-main { height: 280px; }
  .gallery-placeholder { height: 280px; }
  .gallery-thumbs { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .property-grid { grid-template-columns: 1fr; }
  .modal-map { height: 260px; }
  .decision-grid { grid-template-columns: 1fr; }
}

@media (min-width: 1600px) {
  :root { --map-w: 500px; }
}

/* ── DESKTOP RESPONSIVE ── */

/* XL desktop: 1440–1599px — wider map, spacious grid */
@media (min-width: 1440px) and (max-width: 1599px) {
  :root { --map-w: 440px; }
  .card-grid { gap: 22px; }
}

/* Standard desktop: 1280–1439px */
@media (min-width: 1280px) and (max-width: 1439px) {
  :root { --map-w: 400px; }
  .header { padding: 22px 28px 16px; }
  .card-grid { padding: 20px 28px 110px; gap: 20px; }
  .search-input-wrap { width: 280px; }
  .search-input     { width: 280px; }
  .stats-right      { min-width: 260px; flex: 0 0 300px; }
}

/* Narrow/laptop desktop: 1024–1279px — most adjustments needed */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --map-w: 320px; }

  /* Header */
  .header { padding: 18px 22px 14px; }
  .header-title { font-size: clamp(22px, 2.6vw, 32px); }

  /* Card grid — reduce min card width so 2 columns fit in the narrowed left panel */
  .card-grid {
    padding: 16px 20px 100px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
  }

  /* Toolbar — compact spacing */
  .toolbar { padding: 12px 13px; gap: 10px; }
  .filters-left { gap: 10px; }

  /* Search input narrowed */
  .search-input-wrap { width: 210px; }
  .search-input     { width: 210px; }

  /* Selects narrower */
  select { width: 120px; }
  .filter-bar select { width: 120px; }

  /* Stats panel */
  .stats-right { min-width: 210px; flex: 0 0 240px; padding: 8px 10px; }
  .result-count { font-size: 15px; }
  .toolbar-kpi { flex: 1 1 78px; }
  .toolbar-kpi-value { font-size: 15px; }

  /* Sort pills compact */
  .sort-pill { font-size: 10px; padding: 0 9px; min-height: 31px; }

  /* Merkliste button narrower */
  .btn-saved-toggle { min-width: 140px; }

  /* Presets - tighten */
  .control-group-presets { min-width: 190px; }
  .preset-select-wrap    { min-width: 110px; }

  /* Modal body — narrower side column */
  .modal-body { grid-template-columns: 0.85fr 1.15fr; gap: 20px; }
  .modal.is-lean-side .modal-body { grid-template-columns: 0.7fr 1.3fr; }
  .gallery-main, .gallery-placeholder { height: 220px; }
  .modal-side-map .modal-map { height: 170px; }

  /* Reduce modal outer padding */
  .modal { padding: 22px 24px; }
}

/* ── TABLET (861–1023px) ── */
@media (min-width: 861px) and (max-width: 1023px) {
  :root { --map-w: 300px; }
  .header { padding: 18px 20px 14px; }
  .toolbar { padding: 12px 14px; gap: 12px; }
  .filters-left { gap: 10px; flex: 1 1 clamp(340px, 45vw, 520px); }
  .search-input-wrap, .search-input { width: 180px; }
  .stats-right { min-width: 200px; flex: 0 0 220px; padding: 8px 10px; }
  .result-count { font-size: 15px; }
  .sort-pill { font-size: 10px; padding: 0 9px; min-height: 30px; }
  select, .filter-bar select { width: 110px; }
  .btn-saved-toggle { min-width: 120px; font-size: 11px; }
  .control-group-presets { display: none; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 16px 18px 100px; }
  .gallery-main, .gallery-placeholder { height: 220px; }
  .modal-body { grid-template-columns: 0.85fr 1.15fr; gap: 20px; }
}

/* ── MOBILE ── */
@media (max-width: 860px) {
  .page-layout { grid-template-columns: 1fr; gap: 0; }
  .panel-left  { height: auto; overflow-y: visible; }
  .panel-right {
    width: 100% !important; height: 320px;
    position: relative; top: 0; border: none;
    border-top: 1px solid var(--border); border-radius: 0; box-shadow: none;
  }
  .panel-right.collapsed { height: 0; width: 100% !important; }
  .map-tab { display: none; }
  .map-inner { min-width: 0; border-radius: 0; padding: 0; }
  #map { border-radius: 0; }
  .header { padding: 16px 16px 12px; }
  .header-title { font-size: 30px; }
  .header-subline { font-size: 13px; }
  .active-filters-bar { flex-direction: column; align-items: stretch; }
  .active-filters-summary {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .active-filters-summary-meta { text-align: right; }
  .compare-bar { flex-direction: column; align-items: stretch; }
  .compare-bar-actions { width: 100%; justify-content: space-between; }
  .toolbar { padding: 14px; gap: 12px; top: calc(var(--nav-h) + 6px); border-radius: 20px; }
  .filters-left { flex: 1 1 100%; min-width: 0; gap: 10px; }
  .ctrl-hide-mobile { display: none !important; }
  .toolbar .toolbar-sep { display: none; }
  .sort-pill-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
  .sort-pill-bar::-webkit-scrollbar { display: none; }
  .search-input-wrap { width: 100%; }
  .stats-right { align-items: flex-start; min-width: 0; width: 100%; flex: 1 1 100%; padding: 12px; border-radius: 16px; }
  .stats-summary { flex-wrap: wrap; }
  .toolbar-kpi { flex: 1 1 96px; }
  .overview-popover { width: 100%; justify-content: stretch; }
  .overview-pill { width: 100%; justify-content: space-between; }
  .overview-flyout {
    position: static;
    min-width: 0;
    margin-top: 10px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .filter-modal-hero { flex-direction: column; }
  .filter-hero-stats { justify-content: stretch; }
  .filter-hero-stat { flex: 1 1 calc(33.333% - 8px); min-width: 0; }
  .filter-tabs { grid-template-columns: 1fr; }
  .filter-tab { min-height: 72px; }
  .advanced-grid,
  .fsec-2col,
  .fsec-3col,
  .area-controls { grid-template-columns: 1fr; }
  .filter-modal-footer { flex-wrap: wrap; }
  .filter-footer-count { width: 100%; justify-content: center; }
  .card-grid { grid-template-columns: 1fr; padding: 18px 16px 100px; gap: 14px; }
  .pager-bottom { margin-bottom: 80px; }
  .empty-state { margin-left: 16px; margin-right: 16px; padding: 40px 20px; }
  nav, footer { padding-left: 16px; padding-right: 16px; }
  select { width: 130px; }
  .mobile-actions { display: flex; }
  .back-to-top { bottom: 84px; }
  .toast-container { bottom: 84px; }
  .map-resize-handle { display: none; }
  /* Feedback FAB: shift left to avoid overlap with back-to-top */
  .feedback-fab { left: 14px; right: auto; bottom: 88px; }
  /* List mode on mobile: use narrower image column, single image */
  .list-mode .card { grid-template-columns: 130px 1fr; }
  .list-mode .card .card-img-grid { display: none !important; }
  .list-mode .card .thumb-carousel .card-thumb,
  .list-mode .card .thumb-carousel .card-thumb-placeholder {
    display: block; height: 100%; min-height: 100px; margin-bottom: 0;
    border-radius: 0 0 0 10px;
  }
  /* Card: no lift effect on mobile (touch devices) */
  .card:hover { transform: none; }
  /* Price number: smaller on mobile */
  .price-num { font-size: 24px; }
}

@media (max-width: 620px) {
  .quick-status-bar {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
  }
  .quick-status-bar::-webkit-scrollbar { display: none; }
  .overview-flyout { grid-template-columns: 1fr; }
  .overview-card { padding: 11px 13px; }
  .modal { width: 96%; padding: 18px; }
  .modal-filters { width: 96%; }
  .modal-title { font-size: 26px; }
  .modal-submeta { font-size: 15px; }
  .filter-panel-intro-title { font-size: 21px; }
  .filter-tab { padding: 13px 14px; }
  .filter-hero-stat { flex: 1 1 100%; }
  .modal-section-title { font-size: 15px; }
  .modal-desc { font-size: 15px; }
  .chip { height: 32px; padding: 0 11px; font-size: 12px; }
  .gallery-thumbs { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .gallery-nav { width: 34px; height: 34px; }
  .compare-table { min-width: 720px; }
  .compare-table th,
  .compare-table td { padding: 12px 13px; }
}

/* ── SMALL MOBILE (≤480px) ── */
@media (max-width: 480px) {
  /* Nav: hide subtitle */
  .nav-sub { display: none; }
  /* Modal: tighter padding */
  .modal { padding: 14px; }
  .feedback-modal-body { padding: 0 14px 16px; }
  /* Feedback FAB: icon-only to save space */
  .feedback-fab-label { display: none; }
  .feedback-fab { padding: 0; width: 42px; border-radius: 50%; justify-content: center; }
  /* List mode: stack vertically */
  .list-mode .card {
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .list-mode .card .thumb-carousel {
    grid-column: 1; grid-row: 2;
    height: 160px; min-height: 160px;
    border-radius: 0; flex: 0 0 160px;
  }
  .list-mode .card .thumb-carousel .card-thumb,
  .list-mode .card .thumb-carousel .card-thumb-placeholder {
    height: 160px; min-height: 160px;
    border-radius: 0;
  }
  .list-mode .card .card-header,
  .list-mode .card .price-row,
  .list-mode .card .meta,
  .list-mode .card .meta-secondary,
  .list-mode .card .card-divider,
  .list-mode .card .card-analysis,
  .list-mode .card .card-description,
  .list-mode .card .card-trust-wrap,
  .list-mode .card .card-actions { grid-column: 1; padding-left: 14px; padding-right: 14px; }
  /* Sort pills: smaller */
  .sort-pill { font-size: 10px; padding: 0 9px; min-height: 30px; }
  /* Card title: slightly smaller */
  .card-title { font-size: 15px; }
}

@media (hover: none) {
  .card .card-action-icons { opacity: 1; transform: none; }
  .card:hover { transform: none; box-shadow: none; }
  .card:hover::before { opacity: 0; }
}

body.is-resizing-map,
body.is-resizing-map * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* ── FILTERS ADVANCED (details section) ── */
.filters-advanced {
  display: flex; flex-direction: column; gap: 10px; padding: 0;
  border: 1px solid var(--border2); border-radius: 12px; background: rgba(255,255,255,0.018);
}
.filters-advanced-summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 10px 12px; font-size: 11px; font-weight: 650; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.filters-advanced-summary::-webkit-details-marker { display: none; }
.filters-advanced-summary::after {
  content: '▾'; color: var(--text-muted); font-size: 12px; transition: transform var(--t);
}
.filters-advanced[open] .filters-advanced-summary::after { transform: rotate(180deg); }

/* ── FILTER CHECKBOX ROW ─────────────────────────────────────────────────── */
.check-row {
  display: flex; flex-direction: column; gap: 7px;
}
.check-label {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.028);
  font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; user-select: none;
  transition: border-color var(--t), background var(--t), transform var(--t-fast);
}
.check-label:hover { border-color: rgba(232,162,74,.35); background: rgba(255,255,255,0.05); }
.check-label:active { transform: translateY(1px); }
.check-label input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--accent);
  cursor: pointer; flex-shrink: 0;
}

/* ── FILTER MODAL FOOTER COUNT ───────────────────────────────────────────── */
.filter-footer-count {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(232,162,74,.18);
  background: rgba(232,162,74,.08);
  font-size: 13px; font-weight: 700; color: var(--accent);
  white-space: nowrap;
}

/* ── VIEW TOGGLE ─────────────────────────────────────────────────────────── */
.view-toggle-group {
  display: flex; gap: 3px; padding: 3px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 8px;
}
.view-toggle-btn {
  width: 30px; height: 26px; border: none; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--text-muted); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.view-toggle-btn:hover { background: var(--surface3); color: var(--text); }
.view-toggle-btn.is-active {
  background: var(--accent); color: #000;
  box-shadow: 0 1px 4px rgba(232,162,74,.4);
}

/* ── LIST MODE ───────────────────────────────────────────────────────────── */
.list-mode #cardGrid {
  display: flex; flex-direction: column; gap: 10px;
}
.list-mode .card {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto;
  min-height: 140px; border-radius: 12px;
}
.list-mode .card .card-accent-line {
  grid-column: 1 / -1; grid-row: 1; height: 3px; border-radius: 12px 12px 0 0;
}
.list-mode .card .thumb-carousel {
  grid-column: 1; grid-row: 2 / 99; height: auto; min-height: 120px;
  border-radius: 0 0 0 10px; overflow: hidden; display: flex; flex-direction: column;
}
.list-mode .card .thumb-carousel .card-thumb,
.list-mode .card .thumb-carousel .card-thumb-placeholder {
  display: none;
}

/* 4-image grid — hidden in grid mode, shown in list mode */
.card-img-grid { display: none; }
.list-mode .card .card-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  flex: 1; min-height: 120px; cursor: pointer;
}
.card-ig-item {
  width: 100%; height: 100%; object-fit: cover; display: block; min-height: 58px;
}
.card-ig-placeholder {
  grid-column: 1 / -1; grid-row: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-dim);
}
/* 1 image: fill all */
.list-mode .card .card-ig-n1 .card-ig-item { grid-column: 1/-1; grid-row: 1/-1; min-height: 120px; }
/* 2 images: two columns, full height */
.list-mode .card .card-ig-n2 .card-ig-item { grid-row: 1/-1; }
/* 3 images: last spans bottom */
.list-mode .card .card-ig-n3 .card-ig-item:last-child { grid-column: 1/-1; }
.list-mode .card .card-header,
.list-mode .card .price-row,
.list-mode .card .meta,
.list-mode .card .meta-secondary,
.list-mode .card .card-divider,
.list-mode .card .card-analysis,
.list-mode .card .card-description,
.list-mode .card .card-trust-wrap,
.list-mode .card .card-actions {
  grid-column: 2;
}
.list-mode .card .card-header { padding: 8px 12px 0; }
.list-mode .card .price-row { padding: 0 12px; }
.list-mode .card .meta,
.list-mode .card .meta-secondary,
.list-mode .card .card-analysis,
.list-mode .card .card-description,
.list-mode .card .card-trust-wrap { padding: 0 12px; }
.list-mode .card .card-divider { margin: 6px 12px; }
.list-mode .card .card-actions { padding: 6px 12px 10px; }
.list-mode .card .card-action-icons { opacity: 1; transform: none; }
.list-mode .card .thumb-btn,
.list-mode .card .thumb-count { display: none; }

/* ── KEYBOARD FOCUSED CARD ───────────────────────────────────────────────── */
.card.is-kb-focused {
  outline: 2px solid var(--accent); outline-offset: 2px;
  box-shadow: var(--shadow-card-hover), 0 0 0 4px rgba(232,162,74,.15);
}

/* ── AGE INDICATOR DOTS ──────────────────────────────────────────────────── */
.age-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 4px; vertical-align: middle; flex-shrink: 0;
}
.age-new    { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
.age-fresh  { background: #84cc16; }
.age-recent { background: #eab308; }
.age-old    { background: #f97316; }
.age-stale  { background: #ef4444; }

/* ── PRICE REDUCTION BADGE ───────────────────────────────────────────────── */
.badge-price-drop {
  background: rgba(34,197,94,.15); color: #22c55e;
  border: 1px solid rgba(34,197,94,.3); border-radius: 6px;
  padding: 1px 7px; font-size: 10px; font-weight: 700; white-space: nowrap;
}

/* ── RECENTLY VIEWED BADGE ───────────────────────────────────────────────── */
.badge-seen {
  background: rgba(147,114,227,.15); color: #9372e3;
  border: 1px solid rgba(147,114,227,.3); border-radius: 6px;
  padding: 1px 7px; font-size: 10px; font-weight: 600; white-space: nowrap;
}

/* ── NOTES BADGE ─────────────────────────────────────────────────────────── */
.badge-notes {
  background: rgba(59,130,246,.15); color: #60a5fa;
  border: 1px solid rgba(59,130,246,.3); border-radius: 6px;
  padding: 1px 7px; font-size: 10px; font-weight: 600; white-space: nowrap;
}

/* ── NOTES TEXTAREA ──────────────────────────────────────────────────────── */
.notes-toggle-btn {
  background: none; border: none; color: var(--accent); font-size: 13px;
  cursor: pointer; padding: 4px 0; text-align: left; font-weight: 500;
}
.notes-toggle-btn:hover { opacity: 0.8; }
.note-textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--surface2); color: var(--text); border: 1px solid var(--border2);
  border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.5;
  font-family: inherit; transition: border-color var(--t), box-shadow var(--t);
}
.note-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,162,74,.18);
}
.note-save-hint {
  font-size: 11px; color: var(--text-muted); margin-top: 5px; min-height: 16px;
  transition: color .3s;
}
.note-save-hint.saved { color: #22c55e; }


/* ── KEYBOARD SHORTCUT OVERLAY ───────────────────────────────────────────── */
.kb-overlay {
  position: fixed; inset: 0; z-index: 3200;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t);
}
.kb-overlay.open { opacity: 1; pointer-events: all; }
.kb-panel {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 18px; padding: 24px; width: min(420px, 92vw);
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(.97);
  transition: transform var(--t);
}
.kb-overlay.open .kb-panel { transform: none; }
.kb-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.kb-title { font-size: 16px; font-weight: 700; color: var(--text); }
.kb-grid { display: flex; flex-direction: column; gap: 8px; }
.kb-row { display: flex; align-items: center; gap: 12px; }
.kb-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 28px; padding: 0 8px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-bottom: 3px solid var(--border2); border-radius: 7px;
  font-size: 11px; font-family: monospace; font-weight: 700;
  color: var(--text); white-space: nowrap; flex-shrink: 0;
}
.kb-desc { font-size: 13px; color: var(--text-muted); }
.kb-footer {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-muted); text-align: center;
}

/* ── TOAST CONTAINER (if not present already) ────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 4000;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 12px; padding: 11px 16px; min-width: 200px; max-width: 340px;
  font-size: 13px; color: var(--text); box-shadow: var(--shadow-md);
  pointer-events: all;
  animation: toastIn .28s cubic-bezier(.34,1.56,.64,1) both;
  display: flex; align-items: center; gap: 9px;
}
.toast.toast-out { animation: toastOut .22s ease forwards; }
.toast-icon { font-size: 16px; flex-shrink: 0; }
.toast-success { border-color: rgba(34,197,94,.4); }
.toast-success .toast-icon::before { content: '✓'; color: #22c55e; }
.toast-error   { border-color: rgba(239,68,68,.4); }
.toast-error   .toast-icon::before { content: '✕'; color: #ef4444; }
.toast-info    .toast-icon::before { content: 'ℹ'; color: var(--accent); }
@keyframes toastIn  { from { opacity:0; transform: translateY(12px) scale(.92); } to { opacity:1; transform: none; } }
@keyframes toastOut { to   { opacity:0; transform: translateY(8px)  scale(.95); } }

/* ── DRAW TOOL STYLES ────────────────────────────────────────────────────── */
.leaflet-draw-toolbar a {
  background-color: var(--map-ui) !important;
  color: var(--map-ink) !important;
  border-color: var(--map-ui-border) !important;
  box-shadow: 0 10px 18px rgba(28,21,15,.12);
}
.leaflet-draw-section {
  background: rgba(255,255,255,.92) !important;
  border-color: var(--map-ui-border) !important;
  border-radius: 12px;
  box-shadow: 0 14px 24px rgba(28,21,15,.12);
}
.draw-filter-active-badge {
  position: absolute; top: -6px; right: -6px; width: 12px; height: 12px;
  background: var(--accent); border-radius: 50%; border: 2px solid var(--bg);
  pointer-events: none;
}

/* ── FILTER SECTIONS (collapsible details) ───────────────────────────────── */
/* Override legacy .filter-section non-details styles */
details.filter-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--t);
}
/* gap is managed by parent flex .filter-modal-body (gap:18px); no extra margin needed */
details.filter-section[open] { border-color: var(--border2); }

.filter-section-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
  background: var(--surface2);
  transition: background var(--t-fast);
}
.filter-section-summary::-webkit-details-marker { display: none; }
.filter-section-summary:hover { background: var(--surface3); }

.filter-section-icon { font-size: 15px; flex-shrink: 0; }

.filter-section-arrow {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  transition: transform var(--t-fast);
  flex-shrink: 0;
}
details.filter-section[open] .filter-section-arrow { transform: rotate(180deg); }

.filter-section-active-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(232,162,74,.18);
  color: var(--accent);
  border: 1px solid rgba(232,162,74,.35);
  line-height: 1.4;
  flex-shrink: 0;
}

.filter-section-content {
  padding: 14px 16px 16px;
  background: var(--surface);
}

/* Range row: [input] – [input] */
.range-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.range-row .num-input { flex: 1; min-width: 0; }
.range-sep {
  color: var(--text-dim);
  font-size: 13px;
  flex-shrink: 0;
  padding: 0 2px;
}

/* Search row: [input] [button] side by side */
.search-row {
  display: flex;
  gap: 7px;
}
.search-row input { flex: 1; min-width: 0; }

/* Area map section */
.area-map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border2);
  flex: 1;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.area-map-hint {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  text-align: center;
  pointer-events: none;
  letter-spacing: .01em;
}
.area-map {
  width: 100%;
  height: 360px;
  display: block;
}

/* Area action buttons */
.area-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.btn-geocode {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-geocode:hover { background: var(--surface3); border-color: var(--accent); color: var(--accent); }

.btn-map-center {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.btn-map-center:hover { background: var(--surface3); border-color: var(--border2); color: var(--text); }

.btn-area-clear {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.07);
  color: #ef4444;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.btn-area-clear:hover { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.6); }

/* Active area section highlight */
details.filter-section.is-active { border-color: rgba(232,162,74,.45); }
details.filter-section.is-active .filter-section-summary { background: rgba(232,162,74,.07); }

/* Draw topbar in Suchgebiet panel */
.draw-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px 12px;
}
.draw-topbar-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-muted);
}
.draw-hint-icon {
  font-size: 14px;
  flex-shrink: 0;
  opacity: .7;
}

/* ── RECENTLY VIEWED CHIP ────────────────────────────────────────────────── */
.quick-status-chip[data-status="__recently_viewed__"].is-active {
  border-color: rgba(147,114,227,.5); background: rgba(147,114,227,.12);
  color: #9372e3;
}

/* ── FEEDBACK FAB ── */
.feedback-fab {
  position: fixed; bottom: 80px; right: 18px; z-index: 600;
  height: 40px; padding: 0 14px 0 10px; border-radius: 20px;
  background: var(--accent); border: none;
  color: #000; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 16px rgba(232,162,74,0.4);
  transition: transform var(--t), box-shadow var(--t), opacity var(--t);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.feedback-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232,162,74,0.55); }
.feedback-fab-icon { font-size: 16px; }
.feedback-fab-label { letter-spacing: .01em; }

/* ── FEEDBACK MODAL ── */
.modal-feedback { max-width: 480px; }
.feedback-modal-body { padding: 0 24px 20px; display: flex; flex-direction: column; gap: 20px; }
.feedback-section { display: flex; flex-direction: column; gap: 8px; }
.feedback-label { font-size: 13px; font-weight: 600; color: var(--text); }
.feedback-optional { font-weight: 400; color: var(--text-dim); }

.feedback-rating-row,
.feedback-category-row { display: flex; gap: 8px; flex-wrap: wrap; }

.feedback-rating-btn,
.feedback-cat-btn {
  padding: 7px 14px; border-radius: 20px; font-size: 13px;
  border: 1px solid var(--border2); background: var(--surface2);
  color: var(--text-soft); cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.feedback-rating-btn:hover,
.feedback-cat-btn:hover { border-color: var(--accent); color: var(--text); }
.feedback-rating-btn.is-selected,
.feedback-cat-btn.is-selected {
  border-color: var(--accent); background: rgba(232,162,74,.12); color: var(--accent); font-weight: 600;
}
.feedback-textarea {
  width: 100%; min-height: 90px; resize: vertical;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border2); background: var(--surface2);
  color: var(--text); font-size: 13px; font-family: inherit;
  transition: border-color var(--t);
}
.feedback-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,162,74,.1); }
.feedback-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feedback-status { font-size: 13px; color: var(--text-muted); flex: 1; }
.feedback-status.is-success { color: var(--green); }
.feedback-status.is-error { color: var(--red); }

/* ── CLASSIFICATION CORRECTION (inside modal) ────────────────────────────── */
.btn-correction-toggle {
  border-color: rgba(232,162,74,.4) !important;
  color: var(--accent) !important;
}
.btn-correction-toggle:hover { background: rgba(232,162,74,.08) !important; }
.btn-correction-toggle.is-active {
  background: rgba(232,162,74,.12) !important;
  border-color: var(--accent) !important;
}
.correction-panel {
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  animation: slideDown .18s ease;
}
.correction-panel-inner {
  max-width: 780px; margin: 0 auto;
  padding: 14px 24px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.correction-hint { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.correction-options { display: flex; gap: 8px; flex-wrap: wrap; }
.correction-option-btn {
  padding: 7px 16px; border-radius: 20px; font-size: 13px;
  border: 1px solid var(--border2); background: var(--surface);
  color: var(--text-soft); cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.correction-option-btn:hover { border-color: var(--accent); color: var(--text); }
.correction-option-btn.is-current {
  border-color: var(--border2); background: var(--surface);
  color: var(--text-muted); font-style: italic; cursor: default; opacity: .6;
}
.correction-option-btn.is-selected {
  border-color: var(--accent); background: rgba(232,162,74,.12);
  color: var(--accent); font-weight: 600;
}
.correction-textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--surface); color: var(--text); border: 1px solid var(--border2);
  border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.5;
  font-family: inherit; transition: border-color var(--t);
}
.correction-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,162,74,.1); }
.correction-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.correction-status { font-size: 13px; color: var(--text-muted); flex: 1; }
.correction-status.is-success { color: var(--green); }
.correction-status.is-error { color: var(--red); }