:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #d9dde3;
  --text: #1c2430;
  --text-muted: #5b6472;
  --accent: #2f6fed;
  --accent-hover: #1f57c9;
  --danger: #c0392b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181f;
    --panel: #1c222c;
    --border: #2b3341;
    --text: #e7ebf0;
    --text-muted: #97a2b3;
    --accent: #4d8dff;
    --accent-hover: #6ba0ff;
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
body {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Panels scrollen selbst (Sidebar/Liste/Karte) statt der ganzen Seite */
}

#topbar {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
#topbar h1 { font-size: 1.1rem; margin: 0; }
#status { font-size: 0.85rem; color: var(--text-muted); }

#warnings-banner {
  position: relative;
  background: #fdf0d5;
  color: #6b4a00;
  border-bottom: 1px solid #e8c98a;
  padding: 0.5rem 2.2rem 0.5rem 1rem;
  font-size: 0.82rem;
}
#warnings-banner.hidden { display: none; }
#warnings-banner ul { margin: 0; padding-left: 1.2rem; }
#warnings-close {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}
#warnings-close:hover { opacity: 1; }

@media (prefers-color-scheme: dark) {
  #warnings-banner {
    background: #3a2f14;
    color: #f0c96b;
    border-bottom-color: #5c4a1e;
  }
}

#layout {
  display: flex;
  flex: 1;
  min-height: 0; /* erlaubt Kindern, selbst zu scrollen statt body aufzublaehen */
}

#sidebar {
  width: 340px;
  min-width: 340px;
  border-right: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

#search-form {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border-bottom: 1px solid var(--border);
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

select, input[type="text"], input[type="date"] {
  font-size: 0.9rem;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}

.req { color: var(--danger); }

fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
}
legend { font-size: 0.85rem; color: var(--text-muted); padding: 0 0.3rem; }

.checkbox-list {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst blaest langer Label-Text (z.B.
     "Eigentumswohnung (3 bis 4 Zimmer)") die Spalte auf und der Text wird
     abgeschnitten statt umzubrechen, besonders bei der schmaleren
     Tablet/Handy-Sidebar. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.15rem 0.6rem;
  max-height: 160px;
  overflow-y: auto;
}
.checkbox-list label {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text);
  min-width: 0;
  overflow-wrap: break-word;
}

details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--accent);
}
details[open] summary { margin-bottom: 0.5rem; }
details label { margin-bottom: 0.4rem; }

.az-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.az-row input { width: 3.2rem; }
.az-row span { color: var(--text-muted); }

button {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}
#search-btn {
  background: var(--accent);
  color: white;
  font-weight: 600;
}
#search-btn:hover { background: var(--accent-hover); }
#search-btn:disabled { opacity: 0.6; cursor: wait; }

#results-header {
  padding: 0.6rem 0.9rem 0.2rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

#geocode-progress {
  padding: 0.3rem 0.9rem 0.4rem;
}
#geocode-progress.hidden { display: none; }
#geocode-progress-track {
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
#geocode-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.2s ease-out;
}
#geocode-progress-text {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

#favorites-toggle-row {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.9rem 0.5rem;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
}
#favorites-toggle-row input { cursor: pointer; }
#favorites-count { color: var(--text-muted); }

#results-list {
  /* Kein eigenes flex:1/overflow-y hier - sonst konkurriert dieser Container
     mit dem overflow-y:auto von #sidebar um denselben Platz und die Liste
     wird auf einen kaum sichtbaren Rest gequetscht statt zu scrollen
     (insbesondere am Handy, wo Formular+Liste zusammen scrollen muessen).
     #sidebar ist der alleinige Scroll-Container fuer Formular+Liste. */
  padding: 0 0.6rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.result-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 1.7rem 0.55rem 0.7rem;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}

.fav-star {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.fav-star.active { color: #d4a017; }
.result-card .fav-star {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
}
.popup-content .fav-star {
  float: right;
  font-size: 1.3rem;
}
.result-card:hover { border-color: var(--accent); }
.result-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.result-card .az { font-weight: 600; font-size: 0.85rem; }
.result-card .objekt { font-size: 0.85rem; margin: 0.15rem 0; }
.result-card .adresse { font-size: 0.78rem; color: var(--text-muted); }
.result-card .meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}
.result-card .no-geo, .popup-content .no-geo {
  font-size: 0.72rem;
  color: var(--danger);
  margin-top: 0.2rem;
}
.result-card .no-geo.approx, .popup-content .no-geo.approx {
  color: #b8860b;
}
.result-card .no-geo.geo-error, .popup-content .no-geo.geo-error {
  font-style: italic;
}

#map { flex: 1; }

.popup-content { font-size: 0.85rem; max-width: 220px; }
.popup-content .az { font-weight: 600; display: block; margin-bottom: 0.2rem; }
.popup-content button {
  margin-top: 0.4rem;
  background: var(--accent);
  color: white;
  font-size: 0.78rem;
  padding: 0.3rem 0.5rem;
}

#detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#detail-overlay.hidden { display: none; }

#detail-panel {
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  max-width: 640px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.2rem 1.4rem;
  position: relative;
}

#detail-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.2rem 0.5rem;
}
#detail-close:hover { color: var(--text); }

#detail-content h2 { margin-top: 0; font-size: 1.05rem; }
#detail-content .field { margin-bottom: 0.7rem; }
#detail-content .field-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}
#detail-content .beschreibung { white-space: pre-line; font-size: 0.88rem; }
#detail-content ul.anhaenge { list-style: none; padding: 0; margin: 0; }
#detail-content ul.anhaenge li { margin-bottom: 0.35rem; }
#detail-content ul.anhaenge a {
  color: var(--accent);
  text-decoration: none;
}
#detail-content ul.anhaenge a:hover { text-decoration: underline; }
#detail-content .size { color: var(--text-muted); font-size: 0.78rem; }
#detail-content a.pdf-link.loading { opacity: 0.6; cursor: wait; }
#detail-content .pdf-error {
  color: var(--danger);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.error-msg { color: var(--danger); }

#mobile-tabs { display: none; }

/* ---- Tablet (~641-1024px): Sidebar+Karte nebeneinander wie Desktop, nur
   schmalere Sidebar und groessere Touch-Ziele. ---- */
@media (max-width: 1024px) {
  #sidebar { width: 300px; min-width: 300px; }

  /* Touch-Ziele vergroessern (gilt fuer Tablet UND Smartphone).
     font-size:16px auf Feldern verhindert das ungewollte Auto-Zoom von iOS
     Safari beim Fokussieren eines Inputs mit kleinerer Schrift. */
  select, input[type="text"], input[type="date"] {
    padding: 0.55rem 0.6rem;
    font-size: 1rem;
  }
  button { padding: 0.65rem 1rem; font-size: 0.95rem; }
  /* Eine Spalte statt zwei: bei der schmaleren Tablet/Handy-Sidebar quetschen
     sich die laengeren Objekt-Namen (z.B. "Eigentumswohnung (3 bis 4 Zimmer)")
     sonst unangenehm zusammen. */
  .checkbox-list { grid-template-columns: 1fr; max-height: 200px; }
  .checkbox-list label { padding: 0.3rem 0; }
  .checkbox-list input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
  .fav-star { font-size: 1.4rem; padding: 0.3rem; }
  .result-card { padding: 0.7rem 2.3rem 0.7rem 0.8rem; }
  #favorites-toggle-row input { width: 1.15rem; height: 1.15rem; }
  #warnings-close { font-size: 1.6rem; padding: 0.35rem 0.6rem; }
  #warnings-banner { padding-right: 2.6rem; }
}

/* ---- Smartphone (<=640px breit ODER <=480px hoch): Sidebar (Filter+Liste)
   und Karte belegen abwechselnd den ganzen Bildschirm, umgeschaltet ueber
   die Tab-Leiste unten - beides gleichzeitig ist nicht sinnvoll nutzbar.
   Die Hoehen-Bedingung ist wichtig fuer Handys im Querformat (z.B. 844x390):
   die sind breiter als 640px (faelschlich "Tablet"), aber zu niedrig, um
   Filterformular UND Liste nebeneinander zur Karte sinnvoll zu zeigen - die
   Liste wurde sonst auf einen kaum sichtbaren Rest gequetscht. ---- */
@media (max-width: 640px), (max-height: 480px) {
  #topbar { padding: 0.5rem 0.7rem; flex-wrap: wrap; row-gap: 0.15rem; }
  #topbar h1 { font-size: 1rem; }
  #status { font-size: 0.75rem; }

  #layout { flex-direction: column; }
  #sidebar, #map { width: 100%; min-width: 0; height: 100%; }

  body.view-map #sidebar { display: none; }
  body.view-list #map { display: none; }

  #mobile-tabs {
    display: flex;
    flex: none;
    border-top: 1px solid var(--border);
    background: var(--panel);
  }
  .mobile-tab {
    flex: 1;
    background: transparent;
    border-radius: 0;
    padding: 0.7rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-top: 2px solid transparent;
  }
  .mobile-tab.active {
    color: var(--accent);
    border-top-color: var(--accent);
    font-weight: 600;
  }

  /* Detailseite auf dem Handy vollflaechig statt als kleines Modal */
  #detail-overlay { align-items: stretch; justify-content: stretch; }
  #detail-panel {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    padding: 3.2rem 1rem 1.2rem;
  }
  #detail-close { top: 0.7rem; right: 0.7rem; font-size: 1.8rem; padding: 0.4rem 0.6rem; }
}