/* ============================================================
   BÜROSUCHE — neue Layout-Schicht
   ============================================================ */

.suche-main { background: #fff; }

/* INTRO */
.suche-intro { padding: 40px 0 28px; background: #fff; border-bottom: 1px solid var(--line); }
.suche-intro-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: end;
  margin-top: 16px;
}
.suche-intro h1 { margin: 0; line-height: 0.98; }
.suche-trust {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 26px;
  background: var(--bg-paper);
  border-radius: var(--r-l);
  border: 1px solid var(--line);
}
.suche-trust .st-item {
  display: flex; gap: 14px; align-items: flex-start;
}
.suche-trust .st-item svg { color: var(--coral); flex-shrink: 0; margin-top: 2px; }
.suche-trust .st-item strong { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.suche-trust .st-item span { font-size: 13px; color: var(--ink-3); }

@media (max-width: 900px) {
  .suche-intro-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* TOOLBAR */
.suche-toolbar-section {
  position: sticky; top: 64px; z-index: 30;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
/* GF 17.08.: EINE kompakte sticky Zeile — Filter, Teilen, Suchagent,
   (Strecker), Sortieren, Ansichten. Vorher dehnte das Grid den Filter-Knopf
   ueber die volle Breite ('leere Riesenpille'). */
.suche-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sb-strecker { flex: 1; }
.suche-bar .rt-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 48px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 999px; background: #fff;
  font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.suche-bar .rt-btn.coral { color: var(--coral-600); border-color: var(--coral-100); background: var(--coral-50); }
.suche-bar .rt-btn.ok { color: #16663D; }
.sb-sort {
  height: 48px; padding: 0 14px; border: 1px solid var(--line-2);
  border-radius: 999px; background: #fff; font-size: 13.5px; font-family: inherit;
}
@media (max-width: 700px) { .sb-strecker { display: none; } }
/* 02.09. (Critique P2): Am Telefon eine Zeile: Filter, Sortierung, Ansicht.
   Teilen und Suchagent stehen als .suche-zusatz ueber den Treffern. */
.suche-zusatz { display: none; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
@media (max-width: 600px) {
  .suche-bar .rt-btn.nur-desktop { display: none; }
  .suche-zusatz { display: flex; }
  .suche-zusatz .rt-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 500; }
  .suche-zusatz .rt-btn.coral { color: var(--coral-600); border-color: var(--coral-100); background: var(--coral-50); }
  .suche-zusatz .rt-btn.ok { color: #16663D; }
  .suche-bar { flex-wrap: nowrap; }
  .sb-filter { padding: 0 14px; flex: none; }
  .sb-sort { flex: 1; min-width: 0; padding: 0 10px; }
  .sb-views { flex: none; }
  .sb-views button { width: 36px; height: 36px; }
}
.sb-search {
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  height: 48px;
}
.sb-search:focus-within { border-color: var(--ink); }
.sb-search input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 14.5px; color: var(--ink); font-family: inherit;
  min-width: 0;
}
.sb-search input::placeholder { color: var(--ink-4); }
.sb-clear {
  width: 22px; height: 22px; border-radius: 50%; background: var(--bg-paper);
  display: grid; place-items: center; color: var(--ink-3);
}
.sb-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; height: 48px;
  border: 1px solid var(--line-2); background: #fff;
  border-radius: 999px; font-size: 14px; font-weight: 500;
  position: relative;
}
.sb-filter.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sb-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--coral); color: #fff;
  font-size: 11px; font-weight: 600;
}
.sb-filter.on .sb-count { background: var(--coral); color: #fff; }
.sb-views {
  display: inline-flex; padding: 4px;
  background: var(--bg-paper); border-radius: 999px;
}
.sb-views button {
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center; color: var(--ink-3);
  border: none; background: transparent;
}
.sb-views button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.active-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
/* 02.09.: Trefferzahl, Benchmark und Guide-Rueckweg in einer Zeile. */
.results-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.results-count { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.results-guide { font-size: 13.5px; display: inline-flex; align-items: center; gap: 4px; }
.ac-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 12px; background: var(--bg-paper);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; color: var(--ink-2);
}
.ac-chip:hover { background: var(--coral-50); border-color: var(--coral-100); color: var(--coral-600); }
.ac-reset { margin-left: 8px; font-size: 12.5px; color: var(--ink-3); text-decoration: underline; background: none; border: none; }
.ac-reset:hover { color: var(--coral); }

/* MAIN GRID
   30.07.: Die Spaltenzahl kam aus einem Inline-Stil im JSX und war damit fuer
   jede Medienabfrage unerreichbar. Jetzt zwei Klassen — einklappen heisst
   einfach: Klasse weg, Treffer bekommen die ganze Breite (GF 30.07. B10). */
.suche-content { padding: 32px 0 64px; }
.suche-grid { display: grid; gap: 32px; align-items: start; grid-template-columns: 1fr; }
.suche-grid.mit-filter { grid-template-columns: 300px minmax(0, 1fr); }

/* GF 17.08.: Einklappen gehoert AN die Leiste, nicht in die Toolbar oben.
   Der Toolbar-Knopf bleibt nur am Telefon (er oeffnet dort das Sheet). */
/* GF 17.08. (3. Runde, wie alte workinup.de): Filter startet ZU und oeffnet
   als OVERLAY ueber der Liste — die Karte ist das Herzstueck, sie behaelt
   ihre Flaeche und reagiert beim Filtern sichtbar mit. Der Toolbar-Knopf ist
   der einzige Zugang und bleibt sticky erreichbar. */
@media (min-width: 1025px) {
  .suche-grid { position: relative; }
  /* GF 19.08. („halbherzig vor der Liste"): Panel und Ergebnisbereich
     teilen sich dieselbe GRID-ZELLE (1/1) — das Panel liegt damit sauber
     ueber der Listenspalte, ist STICKY (scrollt mit, bleibt im Bild) und
     braucht kein absolute mehr. Breite = Listenspalte (7 von 12). */
  .suche-grid .results-col { grid-area: 1 / 1; }
  .suche-grid .filter-sidebar {
    grid-area: 1 / 1; align-self: start;
    /* 02.09.: Oberkante unter der gemessenen sticky Leiste (Toolbar + Chips),
       sonst ueberdeckt das Panel die Chip-Zeile. */
    position: sticky; top: calc(64px + var(--suche-leiste-h, 86px) + 12px); z-index: 60;
    bottom: auto; height: calc(100vh - 64px - var(--suche-leiste-h, 86px) - 32px); max-height: none;
    /* GF 17.09.: „Die Filterleiste hatten wir schmaler gestaltet." Zurueck auf die
       Breite vom 17.08. (min(480px, 56%)); die 700 px vom 19.08. deckten die halbe
       Liste. Die Felder darin sind kurz (max. fuenf Zeichen), siehe .fs-row-2. */
    width: min(480px, 56%);
    overflow-y: auto;
    box-shadow: 30px 0 50px -30px rgba(0,0,0,.28);
  }
  /* Bestaetigungs-Knopf am Desktop (GF 19.08.: Nutzer wissen sonst nicht, wie
     sie die Filter „anwenden"). GF 17.09.: der Knopf sass beim Scrollen frei
     ueber den Kaestchen. Jetzt eine weisse Leiste mit Oberkante, die am
     unteren Rand des Panels klebt; der Knopf selbst klebt nicht mehr. */
  .filter-sidebar .fs-fertig-leiste {
    display: block; position: sticky; bottom: 0;
    margin: 14px -20px 0; padding: 12px 20px 20px;
    background: #fff; border-top: 1px solid var(--line);
  }
  /* GF 17.08.: „scrollt man an der Ergebnisliste vorbei zum Fuss" — die
     Liste scrollte nur INTERN in einer 78vh-Box. Jetzt laeuft die Liste im
     Seitenfluss mit, die KARTE bleibt sticky stehen (Airbnb-Muster).
     overflow:hidden am Shell muss dafuer weg — es toetet position:sticky. */
  .suche-grid .map-view-shell { height: auto; overflow: visible; border: none; border-radius: 0; }
  .suche-grid .map-view-list { overflow: visible; background: transparent; }
  /* GF 19.08. („Karte scrollt ein Stueck mit und wird abgeschnitten"):
     zwei Bedingungen fehlten fuer echtes Kleben — align-self:start (ein
     gestrecktes Grid-Kind kann nicht sticky sein) und eine overflow-freie
     Vorfahrenkette. top = Unterkante der sticky Toolbar. */
  .suche-content, .suche-grid, .suche-grid .results-col { overflow: visible; }
  .suche-grid .map-view-canvas {
    position: sticky; top: 152px; align-self: start;
    height: calc(100vh - 172px);
    border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden;
  }
}
.fs-desktop-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.fs-desktop-kopf strong { font-size: 14px; font-weight: 600; }
.fs-desktop-kopf button {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink-3); background: none; border: none; cursor: pointer;
}
.fs-desktop-kopf button:hover { color: var(--ink); }
@media (max-width: 1024px) { .fs-desktop-kopf { display: none; } }
.fs-aufklappen {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 14px;
  padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: #fff; font-size: 13px; font-weight: 500; cursor: pointer;
}
.fs-aufklappen:hover { border-color: var(--ink-3); }
@media (max-width: 1024px) { .fs-aufklappen { display: none; } }

/* FILTER SIDEBAR */
.filter-sidebar {
  overscroll-behavior: contain;   /* GF 19.08.: Ergebnisliste scrollte mit */
  /* 02.09.: Oberkante an der gemessenen Hoehe der sticky Leiste (Header 64 px
     plus Toolbar plus Chips), nicht an einer festen Zahl. */
  position: sticky; top: calc(64px + var(--suche-leiste-h, 86px) + 12px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 20px 20px 0;   /* unten kein Innenabstand: den bringt die Knopf-Leiste mit (GF 17.09.) */
  max-height: calc(100vh - 64px - var(--suche-leiste-h, 86px) - 32px);
  overflow-y: auto;
}
/* 02.09.: Bei offenem Panel weicht die Berater-Blase, sonst liegt sie ueber
   dem Knopf „N Objekte zeigen" (nur Desktop; am Telefon ist das Panel ein
   Sheet mit eigenem Abschluss). */
@media (min-width: 1025px) { body.wu-filter-offen .adv-sticky { display: none; } }
/* Filter-Sheet am Telefon (GF 30.07.)
   Zu = nicht im Weg, auf = ueber den Treffern statt darunter. Ohne das lag die
   Filterspalte per `order: 2` unterhalb der Liste: der Knopf schaltete um, zu
   sehen war nichts. */
.fs-sheet-kopf { display: none; }
.fs-fertig-leiste { display: none; }
.fs-sheet-fertig { display: flex; width: 100%; justify-content: center; }
.fs-sheet-grund { display: none; }
@media (max-width: 1024px) {
  .fs-sheet-grund {
    display: block; position: fixed; inset: 0; z-index: 320;
    background: rgba(10,10,10,0.45); border: none; padding: 0;
  }
  .filter-sidebar {
    position: fixed; z-index: 330;
    left: 0; right: 0; bottom: 0; top: auto;
    max-height: 86vh; overflow-y: auto;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border: none; box-shadow: 0 -12px 40px rgba(0,0,0,.18);
    padding: 0 18px 0;   /* unten: Knopf-Leiste */
    -webkit-overflow-scrolling: touch;
  }
  .fs-sheet-kopf {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2; background: #fff;
    padding: 16px 0 12px; margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .fs-sheet-kopf strong { font-size: 17px; font-weight: 600; }
  .fs-sheet-kopf button {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2);
    display: grid; place-items: center; background: #fff;
  }
  .fs-fertig-leiste {
    display: block; position: sticky; bottom: 0;
    margin: 12px -18px 0; padding: 10px 18px 18px;
    background: #fff; border-top: 1px solid var(--line);
  }
  /* Die Checkbox-Liste hatte eine eigene Hoehenbegrenzung — im Sheet scrollt
     sonst eine Liste in einer Liste. */
  .filter-sidebar .fs-checks { max-height: none; overflow: visible; }
}

.fs-group { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 18px; }
.fs-group:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 18px; }
.fs-group h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
/* „optional" als leises Beiwort neben der Ueberschrift, nicht als zweite
   Ueberschrift — die Gruppe bleibt eine Zeile. (GF 10.08.) */
.fs-optional {
  margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--ink-4);
  text-transform: lowercase; letter-spacing: 0;
}
/* 02.09.: Die 220-px-Scrollbox versteckte gewaehlte Stadtteile; das Panel
   scrollt ohnehin als Ganzes, eine Liste in der Liste braucht es nicht. */
.fs-checks { display: grid; gap: 4px; padding-right: 4px; }
/* GF 17.09.: Stadtteile am Desktop in zwei Spalten wie Besonderheiten und Ausstattung, sonst wird die Liste zu lang */
@media (min-width: 1025px) { .filter-sidebar .fs-checks { grid-template-columns: 1fr 1fr; column-gap: 12px; } .filter-sidebar .fs-checks .fs-more { grid-column: 1 / -1; } }
.fs-check {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--ink-2);
}
.fs-check:hover { background: var(--bg-paper); }
.fs-check.on { background: var(--coral-50); color: var(--ink); }
.fs-check input { width: 14px; height: 14px; accent-color: var(--coral); }
.fs-check em { font-style: normal; font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.fs-check.on em { color: var(--coral-600); }

/* 🛑 URSACHE von „die Felder fuer die Bueroflaechenspanne sind abgeschnitten …
   Arbeitsplaetze sind auch abgeschnitten" (GF 30.07. B7) — gemessen auf 375 px:
   die beiden „bis"-Felder endeten bei x = 406 px, also 31 px ausserhalb des
   Bildschirms; in der 300-px-Spalte auf dem Desktop dasselbe Bild.
   Grund ist NICHT die Feldbreite, sondern zweimal min-width:auto: eine
   Grid-Spalte (`1fr`) darf nicht unter die Mindestbreite ihres Inhalts, und
   `<input type=number>` bringt eine Eigenbreite von rund 150 px mit. Zusammen
   mit Beschriftung und Innenabstand braucht jede Spalte ~200 px — zwei davon
   passen in 339 px nicht.
   minmax(0, …) und min-width:0 nehmen beiden das Recht, sich zu behaupten.
   GF: „muessen nicht so lang sein, die Groessenangaben sind maximal
   4-5-stellig (z. B. 10000 m²)" — daher zusaetzlich eine schlanke Grundbreite. */
/* GF 17.09.: „maximal 5 Zeichen und muessen entsprechend nicht so breit sein."
   Feste Obergrenze je Feld, links buendig, statt die Panelbreite zu fuellen. */
.fs-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: 8px; }
.fs-input, .fs-input-full {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  min-width: 0;
}
.fs-input-full { width: 100%; max-width: 200px; }
.fs-input span { font-size: 12px; color: var(--ink-3); flex-shrink: 0; }
.fs-input input {
  flex: 1 1 0; width: 100%; min-width: 0;
  border: none; outline: none; background: transparent; font-size: 13.5px;
}
/* Die Zahlenpfeile fressen bei schmalen Feldern die Haelfte des Platzes und
   werden ohnehin kaum benutzt. */
.fs-input input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.fs-input input[type="number"]::-webkit-outer-spin-button,
.fs-input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fs-input:focus-within { border-color: var(--ink); }
.fs-shortcuts { display: grid; gap: 4px; margin-top: 8px; }
.fs-sc {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: var(--bg-paper);
  border: none; border-radius: 8px;
  font-size: 12.5px; color: var(--ink-2);
  font-family: inherit;
}
.fs-sc:hover { background: var(--coral-50); color: var(--coral-600); }
.fs-sc span { font-size: 11px; color: var(--ink-4); }
.fs-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-4); }

.fs-radios { display: grid; gap: 4px; }
.fs-radio {
  display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--ink-2);
}
.fs-radio:hover { background: var(--bg-paper); }
.fs-radio.on { background: var(--coral-50); color: var(--ink); }
.fs-radio input { accent-color: var(--coral); }

.fs-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.fs-feature {
  display: grid; grid-template-columns: auto auto 1fr; gap: 6px; align-items: center;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-2);
}
.fs-feature:hover { background: var(--bg-paper); }
.fs-feature.on { background: var(--coral-50); color: var(--ink); }
.fs-feature input { width: 12px; height: 12px; accent-color: var(--coral); }
.fs-feature svg { color: var(--ink-3); }
.fs-feature.on svg { color: var(--coral); }

.fs-toggle {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  cursor: pointer; padding: 4px;
}
.fs-toggle input { display: none; }
.fs-toggle-vis {
  width: 38px; height: 22px; border-radius: 999px;
  background: var(--line-2); position: relative; transition: all .2s;
}
.fs-toggle-vis::after {
  content:''; position: absolute; left: 3px; top: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: all .2s;
}
.fs-toggle input:checked + .fs-toggle-vis { background: var(--coral); }
.fs-toggle input:checked + .fs-toggle-vis::after { transform: translateX(16px); }
.fs-toggle strong { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.fs-toggle em { font-style: normal; font-size: 12px; color: var(--ink-3); }

/* RESULTS HEAD */
.results-col { min-width: 0; }
.results-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; flex-wrap: wrap; gap: 14px;
}
.results-head strong { font-size: 22px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.results-head .r-h-sub { font-size: 14px; color: var(--ink-3); margin-left: 6px; }
.market-range-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 14px;
  padding: 4px 10px;
  background: var(--coral-50); color: var(--coral-600);
  border-radius: 999px; font-size: 12px; font-weight: 500;
}
.market-range-badge span { color: var(--ink-3); margin-left: 4px; }
.results-sort { display: flex; align-items: center; gap: 10px; }
.results-sort label { font-size: 13px; color: var(--ink-3); }
.results-sort select {
  padding: 8px 12px; border: 1px solid var(--line-2);
  background: #fff; border-radius: 8px; font-size: 13.5px; font-family: inherit;
}

/* RESULT GRID (Karten) */
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rc {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-l); overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rc:hover { border-color: var(--ink); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.rc-photo {
  position: relative; aspect-ratio: 16/10; display: block; overflow: hidden;
}
/* Gemeint ist der Bild-Container (Platzhalter-Photo bzw. der Slider), nicht
   jede Ebene darueber. Der Selektor trifft aber JEDES div-Kind — und damit auch
   die Leiste .rc-photo-top mit Status-Etikett und Score-Ring. */
.rc-photo > div { width: 100%; height: 100%; }
/* GF 07.08.: „Der Score-Ring ist verrueckt und wird oben rechts in den Cards
   abgeschnitten."
   Ursache: .rc-photo-top ist mit top/left/right:12px gesetzt, soll also 24 px
   schmaler sein als das Foto. Die Regel darueber ist mit (0,1,1) spezifischer
   als .rc-photo-top (0,1,0) und drueckt width:100% durch. Die Leiste war
   dadurch so breit wie das Foto, begann aber 12 px weiter rechts — der
   rechtsbuendige Score-Ring ragte um genau diese 12 px hinaus und wurde vom
   overflow:hidden des Fotos abgeschnitten.
   Mit (0,2,0) gewinnt die richtige Breite. Kein !important noetig — der Fehler
   war die Spezifitaet, nicht die Absicht. */
.rc-photo > .rc-photo-top { width: auto; height: auto; }
.rc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
/* Hochkant-Fotos einpassen statt zerschneiden (Markierung: shared.jsx) */
.rc-photo img.wu-hochkant, .rr-photo img.wu-hochkant, .gmi-foto img.wu-hochkant { object-fit: contain; background: var(--bg-paper, #f6f5f1); }
.rc:hover .rc-photo img { transform: scale(1.03); }

/* GF 07.08.: die ersten drei Bilder in der Karte durchklickbar.
   Alle drei liegen uebereinander und werden per Deckkraft gewechselt statt
   per display — so bleibt ein einmal geladenes Bild geladen und der Wechsel
   ist weich. `position:absolute` auf allen: sonst bestimmt das erste Bild die
   Hoehe und die anderen schieben die Karte auseinander. */
/* `pan-y` gibt die WAAGERECHTE Geste an uns ab und laesst die senkrechte beim
   Browser — die Seite scrollt also weiter normal, waehrend ein Wisch nach
   links/rechts blaettert (GF 10.08.). Ohne diese Zeile behandelt Safari den
   Wisch als Seiten-Geste und der touchend-Weg kommt gar nicht erst zustande. */
.rc-slider { position: absolute; inset: 0; touch-action: pan-y; }
.rc-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .25s ease, transform .4s;
}
.rc-slide.aktiv { opacity: 1; }
/* Pfeile erscheinen erst beim Zeigen — auf einer Liste mit vielen Karten waeren
   dauerhaft sichtbare Pfeile unruhig. Am Telefon (kein Hover) stehen sie
   dauerhaft, sonst waeren sie unerreichbar. */
.rc-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 30px; height: 30px; border: none; border-radius: 999px;
  background: rgba(255,255,255,.88); color: #0A0A0A;
  font-size: 19px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .18s ease, background .18s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.rc-pfeil.links  { left: 8px; }
.rc-pfeil.rechts { right: 8px; }
.rc:hover .rc-pfeil, .rc-pfeil:focus-visible { opacity: 1; }
.rc-pfeil:hover { background: #fff; }
.rc-punkte {
  position: absolute; left: 0; right: 0; bottom: 9px; z-index: 3;
  display: flex; justify-content: center; gap: 5px;
}
.rc-punkt {
  width: 6px; height: 6px; padding: 0; border: none; border-radius: 999px;
  background: rgba(255,255,255,.55); cursor: pointer;
  transition: background .18s ease;
}
.rc-punkt.aktiv { background: #fff; width: 16px; }
@media (hover: none) {
  .rc-pfeil { opacity: 1; }
  /* 🛑 GF 10.08.: „Bilder swipen/durchklicken funktioniert nicht."
     Neben dem fehlenden Wischen (jetzt in KartenBilder) war das zweite
     Hindernis die Groesse: 30 px Pfeil und 6 px Punkt liegen deutlich unter
     den 44 px, die eine Fingerflaeche sicher trifft — und beide liegen im
     Kartenlink, ein Fehlgriff oeffnet also das Objekt. Der Punkt behaelt seine
     zarte Optik und bekommt seine Trefferflaeche unsichtbar per ::before. */
  .rc-pfeil { width: 40px; height: 40px; font-size: 22px; }
  .rc-punkte { bottom: 12px; gap: 10px; }
  .rc-punkt { position: relative; }
  .rc-punkt::before { content: ''; position: absolute; left: -9px; right: -9px; top: -15px; bottom: -15px; }
}
.rc-photo-top {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none;
  gap: 8px;
}
.rc-photo-top > * { pointer-events: auto; }
.rc-fav {
  position: absolute; bottom: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  display: grid; place-items: center; color: var(--ink-2); border: none;
  transition: color .15s;
}
.rc-fav:hover { color: var(--coral); }
.rc-fav.on { color: var(--coral); }
/* GF 10.09.: gemerkt = Lesezeichen gefuellt. */
.rc-fav.on svg { fill: var(--coral); }
.rc-feat-flex { background: #F6F5F1; color: var(--ink); border: 1px dashed var(--line-2, #D9D5CC); }

/* 22.09. (Patrick Ludewig via GF, Screenshot Marzipanfabrik/Kraftwerk): in
   einer Karte standen sieben Schriftgroessen (11 bis 18 px) und drei Grautoene,
   die Knoepfe zweier Nachbarkarten lagen auf verschiedener Hoehe, die
   Beschriftungen (#9E9E9E, 11 px) blieben unter 3:1 Kontrast. Jetzt drei
   Stufen: 17 px fuer Name und Miete (beide 600), 13,5 px fuer Werte und
   Knoepfe, 12 px fuer alles Kleine; zwei Toene: --ink und --ink-3. Der Rumpf
   fuellt die Karte, der Fuss haengt unten (margin-top: auto), damit „Details
   ansehen" in einer Reihe immer auf gleicher Hoehe sitzt. */
.rc-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1 1 auto; }
.rc-head h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -.012em; line-height: 1.25; }
.rc-head h3 a { color: var(--ink); text-decoration: none; }
.rc-head h3 a:hover { color: var(--coral-600); }
.rc-loc { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.rc-specs {
  /* GF 03.09. (Kartenliste): vier gleich breite Spalten brachen „ca. 313–666
     m²" und „ab 17,50 €/m²" mitten im Wert um (gemessen: 35 von 96 Werten
     zweizeilig). Jetzt Breite nach Inhalt, kein Umbruch innerhalb eines Werts;
     reicht die Karte nicht, rutscht der ganze Block in die naechste Zeile. */
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rc-specs > div { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.rc-specs span { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.rc-specs strong { font-size: 13.5px; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

.rc-features { display: flex; flex-wrap: wrap; gap: 4px; }
.rc-feat {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; background: var(--bg-paper);
  border-radius: 999px; font-size: 12px; color: var(--ink);
}
.rc-feat svg { color: var(--ink-3); }
.rc-feat-more {
  font-size: 12px; color: var(--ink-3); padding: 3px 4px;
}

.rc-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 4px;
}
.rc-price strong {
  font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.rc-price > span { font-size: 12px; color: var(--ink-3); margin-left: 2px; }
.rc-meta { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.rc-meta span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink-3);
}

.price-delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; font-weight: 500;
  margin-top: 2px;
  padding: 2px 7px; border-radius: 999px;
}
.price-delta.good { background: #e3f1e8; color: #2e7148; }
.price-delta.bad { background: #f5dcd6; color: #9c4a3a; }
.price-delta.neutral { background: var(--bg-paper); color: var(--ink-3); }

.rc-actions {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: auto; padding-top: 6px;
  align-items: stretch;
}
.rc-actions .btn-outline { width: 100%; justify-content: center; }
.rc-actions .btn-sm { font-size: 13.5px; }
.btn-cmp {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 14px;
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 999px; font-size: 13.5px; color: var(--ink); font-family: inherit;
}
.btn-cmp:hover { border-color: var(--ink); color: var(--ink); }
.btn-cmp.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-cmp:disabled { opacity: 0.5; cursor: not-allowed; }

/* STATUS-BADGES */
.status-badge {
  display: inline-block; padding: 4px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 500;
  letter-spacing: .02em;
  backdrop-filter: blur(10px);
}
/* GF 17.09.: die drei Marken muessen sich unterscheiden */
.status-badge.empfohlen { background: rgba(255,255,255,.96); color: var(--coral-600); border: 1px solid var(--coral); }
.status-badge.new { background: rgba(255,255,255,.96); color: var(--ink); border: 1px solid var(--ink); }
.status-badge.vermittelt, .status-badge.vermietet { background: rgba(240,240,236,.96); color: var(--ink-3); border: 1px solid var(--line-2); }
.status-badge.off { background: var(--coral); color: #fff; }
.status-badge.avail { background: rgba(255,255,255,.95); color: #2e7148; }
.status-badge.neg { background: rgba(255,255,255,.95); color: #9c5a2e; }

/* WORKIN SCORE — SIEGEL (GF 30.07.)
   Vorher eine gefuellte Kachel, bei 70–84 Punkten flaechig Coral: „viel zu
   praesent". Jetzt ein Siegel — weisser Grund, feiner Ring, die Note nur ueber
   die Ringfarbe abgestuft. Coral bleibt Akzent (CI-Regel), nicht Flaeche. */
.score-seal {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 62px; height: 62px; flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
  line-height: 1;
}
.score-seal .sb-val {
  font-size: 19px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
/* 01.09.: 7.5px war die kleinste Schrift der Website (impeccable-Audit,
   Untergrenze 11px). Weniger Sperrung, damit „workin Score" im 62px-Siegel
   weiter zweizeilig Platz findet. */
.score-seal .sb-lbl {
  font-size: 11px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .02em; margin-top: 2px; max-width: 56px; text-align: center; line-height: 1.1;
}
.score-seal.top  { border-color: rgba(46,113,72,.45); }
.score-seal.top .sb-val { color: #2e7148; }
.score-seal.good { border-color: var(--coral); }
.score-seal.fair { border-color: var(--line); }
.score-seal.avg  { border-color: var(--line); }
.score-seal.sm { width: 54px; height: 54px; }
.score-seal.sm .sb-val { font-size: 17px; }
/* PASSUNGS-SIEGEL (GF 10.08.) — dieselbe Form wie der Score, damit die Karte
   ihr Raster behaelt; das Prozentzeichen klein, damit die Zahl fuehrt. Die
   Randabstufung uebernimmt die Bedeutung aus dem Score-Siegel (top/good/…),
   sie sagt hier aber „passt gut", nicht „gutes Haus". */
.score-seal.match .sb-val i { font-style: normal; font-size: .62em; margin-left: 1px; }
.score-seal.match .sb-lbl { color: var(--coral-600, var(--ink-3)); }
/* GF 21.09. (Screenshot Gehrckens Hof, Windows): „PASST ZU" ragte links aus dem 54-px-Ring. Die
   Grossbuchstaben brauchen je nach Schriftglaettung bis 52 px; vier Pixel Luft je Seite. */
/* 22.09. (Patrick Ludewig): „das passt zu 90 % ist auch bisschen eng". 64 px. */
.score-seal.match.sm { width: 64px; height: 64px; }
.score-seal.xs { width: 40px; height: 40px; border-width: 1px; }
.score-seal.xs .sb-val { font-size: 13px; }
.score-seal.xs .sb-lbl { display: none; }

/* SCORE-AUFSCHLUESSELUNG
   🛑 30.07.: Zu diesen Klassen gab es GAR KEIN CSS — nur .sbk-note. Die Zeilen
   liefen als display:block, der Balken hatte Breite 0. Auf der Seite stand
   deshalb „Verhandlungsposition3/5" ohne Trennung und ohne Balken; genau das
   meinte GF mit „dazu fehlen Leerzeichen". Jetzt ein Raster:
   Kriterium | Balken | Wert. */
.score-breakdown { display: grid; gap: 9px; min-width: 0; }
.sbk-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 34px; align-items: center; gap: 14px; }
.sbk-l { font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.sbk-bar { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sbk-fill { display: block; height: 100%; border-radius: inherit; background: var(--coral); }
.sbk-v { font-size: 13px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.sbk-v i { font-style: normal; font-weight: 400; color: var(--ink-4); }
.sbk-note { margin-top: 10px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 560px) {
  /* Auf 375 px bleiben von 1fr sonst ~90 px fuer „Expansionsmöglichkeiten" —
     das bricht dreizeilig um. Balken schmaler, Text bekommt den Platz. */
  .sbk-row { grid-template-columns: minmax(0, 1fr) 48px 32px; gap: 10px; }
  .sbk-l { font-size: 12.5px; }
}

/* ÖPNV-EINSTUFUNG */
/* 22.09. (Patrick Ludewig): „links ist ÖPNV grau hinterlegt, rechts nicht".
   Das war die Notenkodierung (A gruen, B Papiergrund, C/D graue Schrift), die
   kein Besucher kennt und die deshalb wie ein Fehler aussah. Jetzt eine Pille
   fuer alle Noten; die Note steht im Text (ÖPNV B · U/S 4 Min) und im
   Hinweistext mit der Rechnung dahinter. */
.transit-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
/* GF 30.07.: „Der Button sollte klickbar sein, sodass man dann runter zur Karte
   und die Entfernungen gelangt." Als Link braucht er eine Trefferflaeche, die
   auch am Telefon zu treffen ist (§2: keine Maus-Pixel-Arbeit). */
a.transit-pill.is-link { text-decoration: none; cursor: pointer; padding: 6px 11px; }
a.transit-pill.is-link:hover { border-color: var(--ink-3); }
a.transit-pill.is-link:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* RESULT LIST (Reihenansicht) */
.result-list { display: flex; flex-direction: column; gap: 12px; }
.rr {
  display: grid; grid-template-columns: 344px 1fr 230px;
  align-items: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-l); overflow: hidden;
}
.rr:hover { border-color: var(--ink); box-shadow: var(--shadow-card); }
/* GF 19.08.: Das Foto fuellte die volle Zeilenhoehe und wurde zum
   Hochformat — unsere Aufnahmen sind quer. Jetzt eine 3:2-Kachel,
   die Zeile ist so hoch wie ihr Inhalt. */
.rr-photo { display: block; overflow: hidden; aspect-ratio: 3/2; margin: 12px; border-radius: 12px; }
.rr-photo img { width: 100%; height: 100%; object-fit: cover; }
.rr-info { padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rr-info h3 { margin: 0 0 3px; font-size: 17px; font-weight: 500; }
.rr-info h3 a { color: var(--ink); text-decoration: none; }
.rr-loc { font-size: 12.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rr-loc svg { vertical-align: -2px; }
.rr-specs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.rr-specs > div { display: flex; flex-direction: column; gap: 1px; }
.rr-specs span { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; }
.rr-specs strong { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.rr-features { display: flex; flex-wrap: wrap; gap: 4px; }
.rr-feat {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; background: var(--bg-paper);
  border-radius: 999px; font-size: 11px; color: var(--ink-2);
}
.rr-side {
  background: var(--bg-paper);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  border-left: 1px solid var(--line);
}
.rr-price strong { font-size: 20px; font-weight: 500; color: var(--ink); }
.rr-price > span { font-size: 12px; color: var(--ink-3); margin-left: 2px; }
.rr-actions { display: grid; gap: 8px; margin-top: auto; }
.rr-actions .btn { width: 100%; justify-content: center; }
.rr-buttons { display: flex; gap: 6px; }
.btn-icon-sm {
  width: 36px; height: 36px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-2);
}
.btn-icon-sm.on { background: var(--coral); color: #fff; border-color: var(--coral); }

/* EMPTY STATE */
.empty-state {
  background: var(--bg-paper); border-radius: var(--r-xl);
  padding: 48px; text-align: center;
}
.empty-state h3 { font-size: 22px; font-weight: 500; margin: 0 0 8px; }
.empty-state p { color: var(--ink-3); margin: 0 auto 16px; max-width: 60ch; }

/* HELP BLOCK */
.help-block {
  margin-top: 32px; padding: 28px 32px;
  background: var(--bg-paper); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  align-items: center;
}
.help-block h3 { margin: 0 0 6px; font-size: 22px; font-weight: 500; color: var(--ink); }
.help-block p { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: 56ch; }
.help-block strong { color: var(--coral); font-weight: 500; }

/* SHORTLIST BAR — entfernt (GF 28.07.). Sie lag nur auf der Suche und zeigte
   zwei Zaehler fuer eine Absicht. Ersatz: .merk-bar in styles-truth.css,
   global und hell statt schwarz. */

/* COMPARE MODAL */
.cmp-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.55);
  display: flex; padding: 40px;
  overflow-y: auto;
}
.cmp-modal-inner {
  background: #fff; border-radius: var(--r-xl);
  width: 100%; max-width: 1280px; margin: auto;
  display: flex; flex-direction: column; max-height: 90vh;
  overflow: hidden;
}
.cmp-modal-inner header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 28px; border-bottom: 1px solid var(--line);
}
.cmp-close { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-paper); display: grid; place-items: center; }
.cmp-grid { display: grid; gap: 1px; background: var(--line); overflow-y: auto; flex: 1;
  /* 02.09.: Spaltenzahl kommt als --cmp-n aus dem Dialog, das Raster aus dem CSS. */
  grid-template-columns: 200px repeat(var(--cmp-n, 2), minmax(0, 1fr)); }
.cmp-scrollhint { display: none; margin: 0 0 6px; }
.cmp-head { padding: 16px 18px; background: #fff; }
.cmp-h-photo { aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.cmp-head h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 500; }
.cmp-loc { font-size: 12px; color: var(--ink-3); }
.cmp-remove { display: inline-flex; gap: 4px; font-size: 11px; color: var(--ink-3); margin-top: 8px; }
.cmp-rowlabel {
  padding: 12px 16px; background: var(--bg-paper);
  font-size: 12.5px; font-weight: 500; color: var(--ink); display: flex; align-items: center;
}
.cmp-cell {
  padding: 12px 16px; background: #fff; font-size: 13px; color: var(--ink-2);
  display: flex; align-items: center; flex-wrap: wrap;
}
/* GF 19.08.: "In der Etagen-Spalte ist der Gebaeudeteil direkt hinter der Etage
   angegeben ohne Leerzeichen." Ursache war nicht der Text, sondern diese Zelle:
   sie ist ein Flex-Container, und darin bleibt ein display:block-Element in
   derselben Zeile. Zusatzangaben tragen jetzt .cmp-sub und erzwingen ueber die
   volle Breite den Umbruch. */
.cmp-sub { flex: 0 0 100%; width: 100%; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.cmp-modal-inner footer {
  padding: 18px 28px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}

/* SCORE5 (1-5 dots) */
.score5 { display: inline-flex; align-items: center; gap: 4px; }
.s5-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.s5-dot.on { background: var(--coral); }
.score5 em { font-style: normal; font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }

/* MAP VIEW */
.map-view-shell {
  /* GF 17.08.: links zwei Karten nebeneinander, rechts die Karte. */
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  height: 78vh; min-height: 560px;
  border: 1px solid var(--line);
  border-radius: var(--r-l); overflow: hidden;
}
.map-view-list { overflow-y: auto; background: var(--bg-soft); }
.mvl-kopf { grid-column: 1 / -1; }
.mvl-kopf .offmarket-banner { margin-bottom: 4px; }
.map-view-list.mvl-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  /* max-content ist hier PFLICHT (gemessen 17.08.): mit auto kollabierten
     die Zeilen im Scroll-Container auf 1,6 px — die Karten waren fertig
     gerendert und wurden von overflow:hidden auf einen Strich beschnitten
     (GF: „leere Karten"). Einziger computed-Unterschied zur funktionierenden
     Kachelansicht war die Hoehe; max-content fordert die Inhaltsgroesse an. */
  grid-auto-rows: max-content;
  gap: 14px; padding: 14px; align-content: start;
}
/* Slider-Bilder sind absolut positioniert — ohne feste Hoehe kollabiert die
   Kachel hier auf 0 px (GF-Screenshot 'leere Karten', gemessen 17.08.). */
.map-view-list.mvl-cards article.rc .rc-photo { aspect-ratio: 16/10; }

/* GF-Befund 'leere Karten' — die eigentliche Ursache (gemessen 17.08.):
   reveal.js haengt den Karten beim Aufbau .rv an (opacity 0, fuer die
   Scroll-Einblendung), aber im INNEREN Scroll-Container der Splitliste
   erreicht sein Beobachter die Karten nie — sie blieben dauerhaft
   unsichtbar. Hier gibt es keine Einblendung, hier wird gearbeitet. */
.map-view-list.mvl-cards .rc.rv { opacity: 1; translate: none; }
/* GF 03.09.: „Mehr anzeigen" in der Kartenliste, ueber beide Spalten;
   die per Marker angesprungene Karte bekommt einen ruhigen Rahmen. */
.map-view-list.mvl-cards .mvl-mehr { grid-column: 1 / -1; text-align: center; padding: 6px 0 12px; }
.map-view-list.mvl-cards article.rc.rc-aktiv { box-shadow: 0 0 0 2px #FF725F; border-radius: 14px; }

/* Infocard im Kartenfenster */
.gm-infocard { width: 320px; font-family: inherit; }
/* 16:10 wie die Ergebnis-Cards — der 1,9:1-Zuschnitt vorher schnitt zu tief
   ins Motiv („zu weit reingezoomt", GF 19.08.). */
.gmi-foto { position: relative; aspect-ratio: 16/10; background: var(--bg-paper); }
.gmi-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gmi-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: #111; font-size: 18px; line-height: 1;
}
.gmi-pfeil.links { left: 8px; } .gmi-pfeil.rechts { right: 8px; }
.gmi-punkte { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
.gmi-punkte span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
.gmi-punkte span.an { background: #fff; }
.gmi-body { padding: 14px 16px 16px; }
.gmi-body h4 { margin: 0 0 3px; font-size: 17px; font-weight: 500; letter-spacing: -.012em; }
.gmi-ort { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3); }
.gmi-fakten {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  padding: 10px 0; margin-bottom: 12px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.gmi-fakten span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); margin-bottom: 2px; }
.gmi-fakten strong { font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gmi-fuss { display: flex; gap: 8px; align-items: center; }
.gmi-fuss .btn { flex: 1; justify-content: center; }
.gmi-merk { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; font-size: 15px; cursor: pointer; }
.gmi-merk:hover { border-color: var(--coral); color: var(--coral); }

/* Googles InfoWindow-Polster raus, damit die Karte bis an den Rand geht */
.gm-style .gm-style-iw-c { padding: 0 !important; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.gm-style .gm-style-iw-d { overflow: hidden !important; }
.gm-style .gm-style-iw-d > div { display: block; }
@media (max-width: 1200px) { .map-view-list.mvl-cards { grid-template-columns: 1fr; } }
/* Preis-Pills und Cluster in CI-Schwarz, Coral nur als Aktiv/Hover
   (GF 17.08. — Optik der alten workinup.de) */
.gm-pill { position: absolute; transform: translate(-50%, -50%); cursor: pointer; z-index: 3; }
.gm-preis {
  background: #111; color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.gm-preis.aktiv, .gm-preis:hover { background: var(--coral); }
/* Haltestellen-Pille der Objektseite (GF 19.08.): Coral, damit sie sich vom
   schwarzen Objekt-Pin unterscheidet — beide sind gleichzeitig zu sehen. */
.gm-station {
  background: var(--coral); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* Haltestellen-Punkt in der Objektkarte (GF 02.09.): klickbar, aus unseren
   Daten — die Places API des Schluessels liefert keine Ortsdetails.
   Bewusst klein (14px), damit er neben Googles eigenen Symbolen als
   Markierung liest, nicht als zweite Pille; Coral-Ring = anklickbar. */
.gm-halt {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--coral);
  box-shadow: 0 1px 5px rgba(0,0,0,.3);
}
.gm-halt:hover { background: var(--coral); }
.gm-cluster {
  background: #111; color: #fff; font-weight: 600; font-size: 13px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.gm-cluster:hover { background: var(--coral); }

.gm-consent {
  height: 100%; display: grid; place-items: center; text-align: center;
  background: var(--bg-paper); padding: 24px;
}
.gm-consent strong { font-size: 18px; display: block; margin-bottom: 8px; }
.gm-consent p { max-width: 44ch; color: var(--ink-3); font-size: 13.5px; margin: 0 0 16px; }
.mvl-item {
  display: grid; grid-template-columns: 90px 1fr; gap: 12px;
  padding: 10px; margin: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer;
}
.mvl-item.active { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,114,95,.12); }
.mvl-photo { aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; background: var(--bg-paper); }
.mvl-photo img { width: 100%; height: 100%; object-fit: cover; }
.mvl-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mvl-info h4 { margin: 0; font-size: 13.5px; font-weight: 500; }
.mvl-info span { font-size: 11.5px; color: var(--ink-3); }
.mvl-line { display: flex; gap: 6px; align-items: center; margin-top: auto; font-size: 12px; color: var(--ink-3); }
.mvl-line strong { color: var(--ink); font-weight: 500; }
.map-view-canvas { position: relative; overflow: hidden; }
.map-view-canvas .map-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-view-canvas .pin {
  position: absolute; transform: translate(-50%, -100%); cursor: pointer; z-index: 2;
}
.map-view-canvas .pin .pin-shape {
  background: var(--ink); color: #fff; padding: 7px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  border: 2px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.map-view-canvas .pin.active .pin-shape { background: var(--coral); }

@media (max-width: 1024px) {
  /* 30.07.: `grid-template-columns: 1fr !important` und `position: static`
     standen hier, um den alten Inline-Stil zu ueberschreiben. Der ist weg —
     .suche-grid ist ohne .mit-filter schon einspaltig, und die Filterspalte ist
     am Telefon jetzt ein Sheet (siehe MAIN GRID oben). Beides hier wuerde das
     Sheet wieder in den Textfluss zuruecksetzen. */
  .result-grid { grid-template-columns: 1fr; }
  .rr { grid-template-columns: 1fr; }
  .rr-side { border-left: none; border-top: 1px solid var(--line); }
  .rr-specs { grid-template-columns: repeat(3, 1fr); }
  /* 30.07.: unter 700 px greift die kompakte Listenansicht weiter unten. */
  .map-view-shell { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .map-view-list { max-height: none; overflow: visible; }
  .map-view-canvas { position: static; height: 420px; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
  .map-view-canvas { height: 400px; }
  .cmp-modal { padding: 16px; }
  .help-block { grid-template-columns: 1fr; }
}

/* SEITENKOPF (schmal — keine Marketing-Hero) */
.suche-pageheader { padding: 28px 0 20px; background: var(--bg-paper); border-bottom: 1px solid var(--line); }
.suche-ph-row { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.suche-ph-row h1 { margin: 0; font-size: 32px; font-weight: 500; letter-spacing: -.02em; }
.suche-ph-row p { margin: 0; color: var(--ink-3); font-size: 14px; }

/* OFF-MARKET-HINWEIS-BANNER */
/* GF 17.08.: „komplett schwarz zu aufdringlich … wie ein Fremdkoerper."
   Beide Stoerer (dieser und .help-block) laufen jetzt im Papierton der Seite
   mit Coral-Kante links — auffaellig durch die Kante und den Coral-Knopf,
   nicht durch Masse. Schwarz bleibt dem Anspruch-Block der Startseite
   vorbehalten: dort ist es ein ganzer Abschnitt, kein Einschub in Inhalte. */
.offmarket-banner {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  padding: 14px 20px;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--r-l);
  margin-bottom: 18px;
}
.omb-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,114,95,.18); color: var(--coral);
  display: grid; place-items: center;
}
.omb-text strong { display: block; font-size: 14.5px; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.omb-text p { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; max-width: 520px; }

/* OFF-MARKET-TEASER — anonymisierte Karte */
/* GF 17.08.: sichtbar ist nur, WIE GUT es passt — der Rest nach Freischaltung. */
.om-fit { margin: 2px 0 8px; font-size: 13px; color: var(--ink-2); }
.om-fit strong { color: var(--coral-600, #d64a37); font-weight: 650; }
.om-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-l); overflow: hidden;
  position: relative;
}
.om-photo {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  background: #1a1a1a;
}
/* GF 30.07. B6: statt des schwarzen Farbverlaufs EIN freundliches, gepixeltes
   Bild — bei jeder anonymisierten Flaeche dasselbe. Die Datei wird hochskaliert;
   `image-rendering: pixelated` liefert die Bloecke. Nur so entsteht Pixelung —
   auf einem grossen JPEG hat die Eigenschaft keine Wirkung, weil nichts
   hochskaliert wird.
   GF 07.08.: „Die Pixel sind zu grob und die Farbgebung passt nicht zur Website.
   Hier sollte eine moderne Immobilie von aussen, bei blauem Himmel,
   weichgezeichnet/filigran gepixelt sein. Vielleicht auch einfach die
   Elbphilharmonie, die man durch die Anonymisierung trotzdem erahnen kann."
   Umgesetzt: 64x40 statt 28x18 — fuenfmal so viele Bloecke — und der `blur`
   unten nimmt ihnen die harte Kante. Motiv ist die Elbphilharmonie: als
   Wahrzeichen deutet sie KEINE bestimmte Flaeche an, anders als ein Objektfoto
   es taete. Das Bild ist selbst gezeichnet (tools/offmarket_bild.py), es haengt
   kein fremdes Foto daran. `scale(1.02)` verhindert, dass der Weichzeichner an
   den Kartenraendern eine helle Kante stehen laesst. */
/* GF 21.09.: statt der verpixelten Elbphilharmonie ein Bueromotiv (Lounge, Arbeitsplaetze, Besprechungsraum),
   von der GF gestellt, bewusst kein reales Objekt. Unverpixelt, der Schleier darunter (::after) haelt Etikett,
   Siegel und Schild lesbar. Die Regel .om-pixelbild bleibt fuer die alte Datei stehen. */
.om-buerobild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%; display: block;
}
.om-pixelbild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
  filter: blur(2.5px);
  transform: scale(1.02);
}
.om-photo::after, .om-row-photo::after {
  /* Sanfter Schleier, damit Schild und Etikett auf jedem Bildbereich lesbar
     bleiben — vorher lag hier ein Raster auf schwarzem Grund. */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,.28), rgba(10,10,10,.14));
}
/* Eckdaten unscharf: sichtbar bleibt, DASS es Zahlen gibt — nicht welche.
   `user-select: none` verhindert das Auslesen per Markieren, die Werte stehen
   aber weiter im Markup (sie sind ohnehin Spannen, keine Adressen). */
.om-specs-verdeckt strong {
  filter: blur(4.5px);
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
}
/* GF 10.09.: Plaetze bleiben lesbar. */
.om-specs-verdeckt .om-offen strong { filter: none; user-select: auto; -webkit-user-select: auto; pointer-events: auto; }
.om-merkmale { margin-top: 2px; }
.om-shield {
  position: absolute; inset: 0;
  display: grid; place-items: center; color: #fff; z-index: 2;
}
.om-shield svg { opacity: .8; }
.om-tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  padding: 4px 10px;
  background: var(--coral); color: #fff;
  border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
}
/* GF 21.09.: Etikett und Passungs-Siegel in derselben Leiste wie auf der Objektkarte. Das Etikett
   verliert hier seine eigene Position, die Leiste liegt ueber Schleier (1) und Schild (2). */
.om-photo .rc-photo-top, .om-row-photo .rc-photo-top { z-index: 3; }
.om-photo .rc-photo-top .om-tag, .om-row-photo .rc-photo-top .om-tag { position: static; }
.om-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.om-head h3 { margin: 0 0 4px; font-size: 16px; font-weight: 500; color: var(--ink); }
.om-loc { font-size: 12.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.om-sector { margin: 0; font-size: 13px; color: var(--ink-2); }
.om-specs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.om-specs > div { display: flex; flex-direction: column; gap: 1px; }
.om-specs span { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; }
.om-specs strong { font-size: 13px; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.om-note { margin: 0; font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.om-unlock {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-paper);
  border-radius: 10px;
  align-items: flex-start;
}
.om-unlock svg { color: var(--coral); margin-top: 2px; flex-shrink: 0; }
.om-unlock strong { display: block; font-size: 12.5px; color: var(--ink); font-weight: 600; }
.om-unlock span { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }

/* OFF-MARKET-TEASER (Reihe) */
/* GF 19.08.: gleiche Zeilen-Geometrie wie .rr — die Off-Market-Zeile hatte
   den neuen Bildrahmen (3:2, eingerueckt, abgerundet) nicht mitbekommen und
   sass verschoben in der Liste. */
.om-row {
  display: grid; grid-template-columns: 344px 1fr 230px;
  align-items: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-l); overflow: hidden;
}
.om-row-photo { position: relative; overflow: hidden; background: #1a1a1a; aspect-ratio: 3/2; margin: 12px; border-radius: 12px; }
.om-row-info { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.om-row-top h3 { margin: 0 0 3px; font-size: 16px; font-weight: 500; }
.om-row-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.om-row-specs > div { display: flex; flex-direction: column; gap: 1px; }
.om-row-specs span { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; }
.om-row-specs strong { font-size: 13px; color: var(--ink); font-weight: 500; }
.om-row-side { background: var(--bg-paper); padding: 18px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--line); }
.om-row-unlock { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--ink-3); }
.om-row-unlock svg { color: var(--coral); margin-top: 1px; }
.om-row-unlock p { margin: 0; }

@media (max-width: 1024px) {
  .om-row { grid-template-columns: 1fr; }
  .om-row-side { border-left: none; border-top: 1px solid var(--line); }
  .om-row-photo { aspect-ratio: 16/9; }
  .offmarket-banner { grid-template-columns: auto 1fr; }
}

/* MODUS-WAHL: KI vs. Klassisch */
.suche-modes { padding: 24px 0 0; background: #fff; }
.mode-switcher {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 720px; margin: 0 auto;
}
.ms-tab {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  padding: 18px 22px;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--r-l);
  text-align: left; font-family: inherit;
  cursor: pointer; transition: all .15s;
}
.ms-tab:hover { border-color: var(--ink-3); }
.ms-tab.on { border-color: var(--coral); background: var(--coral-50); box-shadow: 0 0 0 3px rgba(255,114,95,.12); }
.ms-tab svg { color: var(--ink-3); flex-shrink: 0; }
.ms-tab.on svg { color: var(--coral); }
.ms-tab strong { display: block; font-size: 16px; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.ms-tab span { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.ms-tab.on strong { color: var(--ink); }

/* KI-Panel */
.ki-panel {
  max-width: 920px; margin: 24px auto 0;
  padding: 28px;
  background: linear-gradient(135deg, #fff 0%, #fafaf6 100%);
  border: 1px solid var(--line); border-radius: var(--r-xl);
}
.ki-input-wrap {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  align-items: flex-end;
  padding: 14px 14px 14px 48px;
  background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--r-l);
}
.ki-input-wrap:focus-within { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,114,95,.1); }
.ki-icon { position: absolute; left: 18px; top: 22px; color: var(--coral); }
.ki-input {
  border: none; outline: none; background: transparent; resize: none;
  max-height: 320px;   /* waechst mit dem Text (KIEingabeV2), darueber scrollt es */
  font-family: inherit; font-size: 15.5px; color: var(--ink); line-height: 1.55;
  min-width: 0;
}
.ki-input::placeholder { color: var(--ink-4); }
.ki-submit { white-space: nowrap; align-self: flex-end; }

.ki-examples {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 16px;
}
.ki-examples > span { font-size: 12.5px; color: var(--ink-3); margin-right: 4px; }
.ki-examples button {
  padding: 6px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.ki-examples button:hover { border-color: var(--coral); color: var(--coral-600); }

.ki-fallback {
  display: flex; gap: 8px; align-items: center;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3);
}
.ki-fallback svg { color: var(--ink-4); }
.ki-link {
  background: none; border: none; padding: 0;
  color: var(--coral); font-family: inherit; font-size: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.ki-link:hover { color: var(--coral-600); }

@media (max-width: 700px) {
  .mode-switcher { grid-template-columns: 1fr; }
  .ki-input-wrap { grid-template-columns: 1fr; padding: 14px 14px 14px 14px; }
  .ki-icon { display: none; }
}

/* ============================================================
   ECHTE KARTE (Leaflet) + SUCH-TOOLS + FRISCHE-BADGE
   ============================================================ */
.lf-canvas { position: relative; min-height: 560px; background: var(--bg-paper); }
.lf-map { position: absolute; inset: 0; z-index: 1; }
.lf-note { position: absolute; left: 12px; bottom: 12px; z-index: 500; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 12px; color: var(--ink-3); pointer-events: none; max-width: 80%; }
.lf-wrap { background: none; border: none; }
.lf-pin { transform: translate(-50%, -100%); display: inline-block; white-space: nowrap; background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 10px; font-family: 'Roobert', sans-serif; font-size: 12px; font-weight: 500; color: var(--ink); box-shadow: 0 2px 8px rgba(10,10,10,.12); cursor: pointer; transition: transform .12s ease; }
.lf-pin:hover { transform: translate(-50%, -100%) scale(1.06); }
.lf-pin.active { background: var(--coral); border-color: var(--coral); color: #fff; }
.lf-tip { font-family: 'Roobert', sans-serif; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 10px 30px rgba(10,10,10,.16); }
.leaflet-popup-content { margin: 12px 14px; font-family: 'Roobert', sans-serif; }
.lf-pop { display: grid; gap: 3px; text-decoration: none; color: var(--ink); min-width: 170px; }
.lf-pop strong { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.lf-pop span { font-size: 12px; color: var(--ink-3); }
.lf-pop em { font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--coral-700); }
.results-sort .rt-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.results-sort .rt-btn:hover { border-color: var(--ink); }
.results-sort .rt-btn.ok { border-color: var(--green); color: var(--green); }
.results-sort .rt-btn.coral { border-color: var(--coral-200); background: var(--coral-50); color: var(--coral-700); }
.results-sort .rt-btn.coral:hover { border-color: var(--coral); }
.fresh-badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; padding: 3px 10px 3px 8px; border-radius: 999px; background: #EDF7F0; border: 1px solid #CFE9D8; color: #16663D; font-weight: 500; }
.fresh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.agent-freq { display: grid; gap: 8px; }
.agent-freq label { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-m); font-size: 13.5px; cursor: pointer; }
.agent-freq label.on { border-color: var(--coral); background: var(--coral-50); }
@media (max-width: 900px) { .lf-canvas { min-height: 420px; } }

/* Kombinations-Treffer (GF 22.07.): ehrliche Kennzeichnung auf der Karte */
.rc-combo {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 6px 10px;
  background: var(--coral-50, #FFF1EE); color: var(--coral-700, #C2432F);
  border-radius: 8px; font-size: 12px; font-weight: 500;
}

/* Case-Galerie: echte Projektfotos, ruhiges Raster */
.case-gal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.case-gal-grid .case-gal-img { margin: 0; border-radius: var(--r-m, 14px); overflow: hidden; aspect-ratio: 4/3; }
.case-gal-grid .case-gal-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.case-gal-grid .case-gal-img:hover img { transform: scale(1.03); }
@media (max-width: 700px) { .case-gal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Passungs-Badge der KI-Treffer (GF 24.07.) */
.ki-fitwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.ki-fit { display: inline-flex; align-items: baseline; gap: 3px; background: var(--coral-50, #FFF1EF);
  color: var(--coral-700, #C74B3C); border: 1px solid var(--coral-200, #FFD3CC); border-radius: 999px;
  padding: 4px 10px; font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap; }
.ki-fit small { font-weight: 600; font-size: 11px; letter-spacing: .02em; }

.fs-more { background: none; border: none; padding: 6px 9px; font: inherit; font-size: 12.5px; color: var(--coral-700); cursor: pointer; text-align: left; }
.fs-more:hover { text-decoration: underline; }

/* LISTENANSICHT AM TELEFON — kompakt (GF 30.07., C)
   GF: „Klickt man daneben auf die 4 kästchen im Kreis passiert ebenfalls
   nichts." Nachgemessen: die Knoepfe schalten korrekt um (24 Kacheln -> 24
   Zeilen -> Karte, aktiver Zustand wandert mit). Es SAH nur nach nichts aus,
   weil eine Listenzeile am Telefon 470 px hoch war — praktisch so gross wie
   eine Kachel. Eine Liste, die aussieht wie das Raster, ist keine Liste.
   Jetzt: Bild links klein, Eckdaten zweispaltig, keine Seitenspalte. Damit
   passen mehrere Objekte gleichzeitig ins Bild — der Sinn der Ansicht. */
@media (max-width: 700px) {
  .rr { grid-template-columns: 104px minmax(0, 1fr); }
  .rr-photo { aspect-ratio: 1 / 1; }
  .rr-info { padding: 10px 12px; gap: 6px; }
  .rr-specs { grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .rr-specs > div:nth-child(n+5) { display: none; }   /* nur die vier entscheidenden */
  .rr-specs span { font-size: 9.5px; }
  .rr-specs strong { font-size: 12.5px; }
  .rr-feat { display: none; }                          /* Merkmale stehen im Detail */
  .rr-side {
    grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: none;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 12px;
  }
  /* Das Siegel gehoert in der kompakten Liste nicht in die Fusszeile — es
     verdoppelt die Hoehe und steht ohnehin auf der Objektseite. */
  .rr-side .score-seal { display: none; }
  .rr-side .rr-actions { display: flex; gap: 8px; }
  .rr-price strong { font-size: 17px; }
  /* Titelzeile: zwei Zeilen genuegen, danach Auslassungszeichen. */
  .rr-top h3, .rr-top h4 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 15px; line-height: 1.25;
  }
}

/* ============================================================================
   🛑 GF 10.08. (mobil): „Wenn ich im Filter das Feld ‚Bürofläche bis' ausfülle,
   scrollt der Bildschirm nach rechts und verschiebt die Ansicht/Zoom. Das muss
   bildschirmgerecht sein, genug Platz ist da."
   Und es IST genug Platz — die Felder passen seit dem 30.07. (B7). Der Zoom
   kommt nicht vom Layout, sondern von iOS: Safari vergroessert die Seite
   automatisch, sobald ein fokussiertes Eingabefeld kleiner als 16 px schreibt.
   Danach ist die Darstellungsflaeche breiter als das Layout und die Seite
   laesst sich seitwaerts schieben — genau das beschriebene Bild. Gemessen:
   13,5 px im Filter, 14,5 px in der Suchleiste, 13,5 px in der Sortierung.
   16 px gilt fuer JEDES Eingabefeld der Suche, damit das naechste neue Feld
   nicht dieselbe Falle stellt. Auf dem Desktop bleibt alles wie es war — dort
   gibt es diesen Automatismus nicht.
   ⚠ Dieser Block steht bewusst ganz am ENDE der Datei: `.suche-main input` und
   `.fs-input input` haben dieselbe Spezifitaet, es entscheidet die
   Reihenfolge. Weiter oben eingesetzt wurde er von der spaeteren Zeile
   ueberschrieben und blieb wirkungslos (beim Laufzeit-Test aufgefallen, nicht
   beim Lesen).
   ========================================================================== */
@media (max-width: 1024px) {
  .suche-main input:not([type="checkbox"]):not([type="radio"]),
  .suche-main select,
  .suche-main textarea,
  .filter-sidebar input:not([type="checkbox"]):not([type="radio"]),
  .filter-sidebar select { font-size: 16px; }
}

/* ---------- KI-Suche v2 (16.09., Schritt 3, hinter Flag WU_KI_V2 / ?ki=2) ---------- */
.ki2-kopf { margin: 0 0 14px; }
.ki2-kopf h2 { margin: 0 0 6px; font-size: 24px; font-weight: 500; letter-spacing: -0.018em; }
.ki2-kopf p { margin: 0; font-size: 14px; color: var(--ink-3); max-width: 60ch; }
.ki2 .ki-input { min-height: 96px; }
.ki2-hinweis { margin: 8px 0 0; font-size: 12px; color: var(--ink-4); }
/* Ladezustand (GF 17.09.): waehrend das Modell liest, laeuft ein Balken unter der Zeile, das Symbol im Feld dreht sich */
.ki2-status { margin-top: 16px; display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); }
.ki2-status-zeile { display: flex; gap: 8px; align-items: center; }
.ki2-status svg { color: var(--coral); flex: none; }
.ki2-lauf { display: block; height: 4px; border-radius: 2px; background: var(--coral-50, #FFF1EE); overflow: hidden; }
.ki2-lauf > span { display: block; width: 36%; height: 100%; border-radius: 2px; background: var(--coral); animation: ki2-laufen 1.4s ease-in-out infinite; }
@keyframes ki2-laufen { 0% { transform: translateX(-110%); } 100% { transform: translateX(300%); } }
@keyframes ki2-drehen { to { transform: rotate(360deg); } }
.ki-input-wrap.laedt .ki-icon { animation: ki2-drehen 1.6s linear infinite; transform-origin: 50% 50%; }
.ki-input-wrap.laedt .ki-input { color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .ki2-lauf > span { animation: none; width: 100%; opacity: .6; } .ki-input-wrap.laedt .ki-icon { animation: none; } }
.ki2-fehler { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--amber, #d98a1a); border-radius: 12px; background: #fff; }
.ki2-fehler strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.ki2-fehler p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-3); }
.ki2-aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.ki2-notweg { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-paper, #F6F5F1); font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.ki2-notweg svg { flex-shrink: 0; margin-top: 2px; color: var(--ink-3); }
.ki2-zusammenfassung { margin: 0 0 12px; font-size: 15px; color: var(--ink); line-height: 1.5; }
.ki2-chip { align-items: center; }
.ki2-chip .ki2-prio { width: auto; height: auto; display: inline-block; line-height: 1.5; margin-left: 6px; padding: 1px 7px;   /* GF 17.09.: .ki-chip button (16 px, fuer das X) galt auch hier, der Text lief aus dem Chip */ border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); cursor: pointer; }
.ki2-chip.prio-muss .ki2-prio { border-color: var(--coral); color: var(--coral-600); }
.ki2-chip.prio-optional .ki2-prio { color: var(--ink-4); }
.ki2-chip .ki2-prio:hover { border-color: var(--ink); color: var(--ink); }
.ki2-leer { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.ki2-rueckfragen { margin-top: 12px; display: grid; gap: 6px; }
.ki2-rueckfragen p { margin: 0; font-size: 14px; color: var(--ink); display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.ki2-rueckfragen p svg { color: var(--coral); flex-shrink: 0; margin-top: 3px; }
.ki2-rueckfragen p span { font-size: 12.5px; color: var(--ink-3); flex-basis: 100%; }
.ki2-offen { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.ki2-klasse { flex-shrink: 0; align-self: flex-start; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.ki2-klasse.passend { background: #E6F6EC; color: #1E7A45; }
.ki2-klasse.pruefkandidat, .ki2-klasse.teilweise { background: var(--bg-paper, #F6F5F1); color: var(--ink-2); }
.ki2-keinmuss { margin: 6px 0 0; flex-basis: 100%; }
/* GF 18.09. (C202609-0322): Passung in Prozent als Pille, Coral ab 80; Kartenzeilen; Rueckfragen mit Antwortoptionen;
   eingeklapptes Eingabefeld; Summenzeile und Abschluss */
.ki2-prozent { flex-shrink: 0; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .01em; background: #fff; color: var(--ink); border: 1px solid var(--ink); white-space: nowrap; }
.ki2-prozent.hoch { color: var(--coral-600); border-color: var(--coral); background: var(--coral-50, #FFF1EE); }
.ki2-punkte { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.ki2-punkte li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.ki2-punkte li svg { flex-shrink: 0; margin-top: 2px; color: #1E9E5A; }
.ki2-punkte li.minus svg { color: var(--ink-4); }
.ki2-punkte li.info svg { color: var(--amber, #d98a1a); }
.ki2-frage { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-paper, #F6F5F1); }
.ki2-frage > p { margin: 0 0 10px; font-size: 14.5px; font-weight: 500; color: var(--ink); display: flex; gap: 8px; align-items: flex-start; }
.ki2-frage > p svg { color: var(--coral); flex-shrink: 0; margin-top: 3px; }
.ki2-optionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ki2-option { border: 1px solid var(--line-2); background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 500; cursor: pointer; }
.ki2-option:hover { border-color: var(--coral); color: var(--coral-600); }
.ki2-option:disabled { opacity: .45; cursor: default; }
.ki2-option.leise { background: transparent; border-color: transparent; color: var(--ink-3); }
.ki2-option.leise:hover { color: var(--ink); border-color: var(--line-2); }
.ki2-zahl { display: inline-flex; align-items: center; gap: 6px; }
.ki2-zahl input { width: 96px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; font-family: inherit; background: #fff; }
.ki2-zahl input[type="month"] { width: 150px; }
.ki2-zahl > span { font-size: 13px; color: var(--ink-3); }
.ki2-frei { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ki2-frei input { flex: 1 1 220px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 14px; font-family: inherit; background: #fff; }
.ki2-frei small { flex-basis: 100%; font-size: 12px; color: var(--ink-4); }
.ki2-passt { margin: 12px 0 0; font-size: 14px; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ki2-passt svg { color: #1E9E5A; }
.ki2-eingeklappt { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-l); }
.ki2-eingeklappt .ki-icon { position: static; flex-shrink: 0; }
.ki2-eingeklappt-text { flex: 1 1 auto; min-width: 0; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ki2-eingeklappt .ki-link { flex-shrink: 0; }
.ki-examples.nur-link { margin-top: 8px; }
.ki2-rest, .ki2-summe { margin: 0; font-size: 13px; color: var(--ink-3); }
.ki2-unter { justify-self: start; border: none; background: transparent; color: var(--ink-3); font-size: 13px; padding: 4px 0; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.ki2-unter:hover { color: var(--coral-600); }
.ki2-abschluss { margin-top: 6px; padding: 18px 20px; border-radius: var(--r-l); background: var(--ink); color: #fff; }
.ki2-abschluss p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.85); }
.ki2-abschluss strong { color: #fff; }
.ki2-abschluss .btn-outline { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.ki2-abschluss .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.ki2-lockern { margin: 0; }
.ki2-om .om-card { margin: 0; }
.ki2-kopieren { margin-top: 10px; color: rgba(255,255,255,.75); }
.ki2-kopieren:hover { color: #fff; }
/* Antworten auf Rueckfragen fuehren die Liste selbst nach (ki-search.jsx, anker); das Scroll-Anchoring des Browsers wuerde doppelt schieben */
.ki2, .ki2 * { overflow-anchor: none; }
@media (max-width: 640px) {
  .ki2-kopf h2 { font-size: 20px; }
  .ki2 .ki-submit { width: 100%; justify-content: center; }
  .ki2-aktionen .btn { flex: 1 1 auto; justify-content: center; }
}

/* Schritt 5 (GF 17.09.): dasselbe Eingabefeld im Hero der Startseite, ohne zweiten Rahmen */
.conv-search .ki2-start { margin-top: 4px; }
/* GF 17.09.: das Feld darf groesser sein, damit Suche und Referenzen einen
   Laptop-Bildschirm fuellen; es waechst mit dem Text (KIEingabeV2), ohne
   Scrollleiste bis 320 px. */
.conv-search .ki2-start .ki-input { min-height: 140px; }
.conv-search .ki2-start .ki2-status { margin-top: 12px; }
@media (max-width: 640px) { .conv-search .ki2-start .ki-input-wrap { grid-template-columns: 1fr; } .conv-search .ki2-start .ki-submit { width: 100%; justify-content: center; } }
/* C202609-0340 (GF 20.09.): anonymisierte Flaeche im Layout der Objektkarte; Rang links wie bei Objekten, das Off-Market-Schild
   rechts; Groesse, Miete und Monatsbetrag verdeckt wie in der klassischen Suche (GF 10.09.), Plaetze lesbar */
.ki2-anonym .ki-match-photo.om-photo { aspect-ratio: auto; min-height: 190px; }
.ki2-anonym .om-tag { left: auto; right: 12px; }
.ki2-verdeckt { filter: blur(4.5px); user-select: none; -webkit-user-select: none; pointer-events: none; }