/* =====================================================================
   Immobilien – Kaufangebote & Mietangebote (mlg-ag.ch/leistungen/immobilien/)
   HTML-Design für den Bricks-Nachbau, DSG, 07.10.2026. Aufbau dieser Datei:
     1. Tokens – VERBATIM aus Levins Paket «Immobilie verkaufen»
        (docs/vor-ort/landingpage/styles.css, Branch feat/vor-ort-landingpage, 598a4b26):
        der :root-Block (dort Z. 30–87) und die :root-Stufen bei 1199/1023/767 px (Z. 622–624, 626–636,
        680–688). Die Formular-Reserve-Stufen (Z. 704–722) gehören zum Vor-Ort-Formular und fehlen hier.
        Danach die Ergänzungen dieser Seiten (--ang-…), gemessen am 07.10.2026 auf mlg-ag.ch.
     2. Site-Muster aus Levins Paket, unverändert: Grundlagen, .behaelter, .knopf, Header- und
        Footer-Platzhalter (.kopf, .fuss), .brotkrumen, .abschnitt, .abschluss-box. Auf
        /immobilie-verkaufen/ sind behaelter, abschnitt, abschluss-box und brotkrumen schon Klassen in Bricks.
     3. Komponenten dieser Seiten mit Präfix ang- (BEM-artig).
   Keine Webfonts: Myriad Pro liegt nicht im Repo; die Schrift-Kette aus --schrift greift (Windows: Segoe UI).
   ===================================================================== */

/* =====================================================================
   1. Tokens (verbatim aus Levins styles.css, 598a4b26)
   ===================================================================== */
:root {
  /* Farben (gemessen am 29.09.2026) */
  --farbe-primaer: #023a78;         /* Hero, Knöpfe, aktiver Menüpunkt, Eyebrow */
  --farbe-primaer-dunkel: #011d3c;  /* Menü, FAQ-Fragen, Umriss-Knopf */
  --farbe-primaer-hover: #024690;   /* Knopf-Hover (Widget mlg) */
  --farbe-text: #171717;
  --farbe-text-sekundaer: #525252;  /* Footer, «Kontakt» im Menü */
  --farbe-text-leise: #a3a3a3;      /* Footer unten */
  --farbe-weiss: #ffffff;
  --farbe-flaeche: #fafafa;         /* graue Sektionen, Footer, Abschlussbox */
  --farbe-hellblau: #ebf4ff;        /* hellblaue Sektionen auf /leistungen/ */
  --farbe-linie: #e5e5e5;
  --farbe-linie-dunkel: #d4d4d4;   /* Zeitleiste im Ablauf auf #fafafa */
  --farbe-akzent-hell: #c1defe;     /* Fokusring */
  --farbe-fehler: #dc2626;

  /* Schrift */
  --schrift: "Myriad Pro", "Myriad", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --groesse-text: 18px;   --zeile-text: 27px;
  --groesse-klein: 15px;  --zeile-klein: 22.5px;
  --groesse-mini: 12px;
  --groesse-h1: 72px;     --zeile-h1: 72px;
  --groesse-unterzeile: 24px; --zeile-unterzeile: 33.6px;
  --groesse-h2: 36px;     --zeile-h2: 45px;
  --groesse-h3: 24px;     --zeile-h3: 33.6px;
  --groesse-menue: 18px;

  /* Abstände */
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;
  --abstand-7: 48px;
  --abstand-8: 80px;

  --breite: 1404px;         /* Container der Site */
  --rand: 12px;             /* Innenrand des Containers */
  --spalte-text: 912px;     /* Textspalte = 2/3, wie FAQ und Hero-Text */
  --kopf-hoehe: 84px;
  --hero-oben: 156px;       /* Kopf 84 + 72 */
  --hero-unten: 48px;
  --karte-innen: 40px;
  --abschnitt-y: var(--abstand-8);
  --sticky-oben: 100px;     /* Abstand oben für Sticky-Elemente, wie .tmg auf /leistungen/ (top: 100px) */

  /* Formular-Widget: --formular-mindesthoehe = Höhe von Schritt 1 im iFrame (ohne den Innenabstand der Karte), damit
     die Seite nicht springt, wenn das iFrame seine Höhe meldet (SEO-Brief §4, CLS ≤ 0,1). Neu gemessen am 30.09.2026,
     dritte Runde, am Formular mit «Weiter» in der PLZ-Zeile (feat/vor-ort-formular d3f55d6e, Testserver :5190) je
     iFrame-Breite, jede Stufe mit frisch geladener Seite an beiden Rändern bestätigt: 440 px (Desktop-Karte und jedes
     Fenster ab 520 px) 585 px; 335–439 px 371; 332–334 px 386; 310–331 px 407; 273–309 px 426; 269–272 px 443;
     239–268 px 466; darunter 480 px (Chrome auf macOS). Unter 440 px iFrame zeigt das Formular die Handy-Ansicht.
     Die Karte reserviert diese Höhe plus 2 × --karte-innen. Die Stufen unten rechnen die Fensterbreite in die
     iFrame-Breite um (unter 520 px: Fenster − 80 px). embed.js startet das iFrame mit 720 px und setzt dann die
     gemeldete Höhe; spätere Schritte dürfen wachsen (nach einer Eingabe zählt das nicht als Layout-Verschiebung). */
  --formular-mindesthoehe: 585px;
}

@media (max-width: 1199px) {
  :root { --groesse-h1: 60px; --zeile-h1: 60px; }
}
@media (max-width: 1023px) {
  :root {
    --kopf-hoehe: 107px;
    --hero-oben: 140px;
    --hero-unten: 32px;
    --groesse-h1: 48px; --zeile-h1: 48px;
    --groesse-unterzeile: 16px; --zeile-unterzeile: 22.4px;
    --groesse-h2: 28px; --zeile-h2: 35px;
    --groesse-h3: 20px; --zeile-h3: 28px;
    --karte-innen: 32px;
    --abschnitt-y: 64px;
  }
}
@media (max-width: 767px) {
  :root {
    --rand: 16px;
    --groesse-text: 16px; --zeile-text: 24px;
    --groesse-h1: 36px; --zeile-h1: 36px;
    --groesse-h2: 20px; --zeile-h2: 25px;
    --groesse-h3: 16px; --zeile-h3: 22.4px;
    --karte-innen: 24px;
    --abschnitt-y: 48px;
  }
}

/* Ergänzungen dieser Seiten (nur, was die Seiten brauchen). Gemessen am 07.10.2026 mit Headless-Chrome auf
   mlg-ag.ch/leistungen/immobilien/ in 20 Fensterbreiten: Hero-Innenabstand oben 320 px ab 992, 220 px ab 768,
   200 px darunter; Reiter fett 16/24 px (8 px 0) ab 992, 20/30 px (20 px 30 px) ab 576, 18/27 px (14 px) darunter;
   Abstand Reiter → Inhalt 64 / 48 / 24 px. Die Site stuft hier bei 992/768/576 px (Bricks), nicht bei 1024. */
:root {
  --ang-hero-oben: 280px;           /* Site 320 px; hier 40 px weniger, weil die Unterzeile dazukommt (Review UX-2) */
  --ang-reiter-groesse: 16px;
  --ang-reiter-zeile: 24px;
  --ang-reiter-innen: 8px 0;
  --ang-angebot-oben: 64px;
  --ang-spalte-liste: 7fr;          /* Split-View: Liste 7/12 … */
  --ang-spalte-karte: 5fr;          /* … Karte 5/12 */
  --ang-karte-hoehe: calc(100vh - var(--sticky-oben) - var(--abstand-5));   /* Kartenvak: Fenster minus 100 + 24 px */
  --ang-titel-objekt: 48px;         /* H1 der Detailseiten (Objekttitel bis 160 Zeichen) */
  --ang-titel-objekt-zeile: 56px;
}
@media (max-width: 1199px) { :root { --ang-spalte-liste: 8fr; --ang-spalte-karte: 4fr; } }   /* 1024–1199: Karten sonst zu schmal */
@media (max-width: 1023px) { :root { --ang-titel-objekt: 36px; --ang-titel-objekt-zeile: 42px; } }
@media (max-width: 991px) {
  :root { --ang-hero-oben: 220px; --ang-reiter-groesse: 20px; --ang-reiter-zeile: 30px; --ang-reiter-innen: 20px 30px; --ang-angebot-oben: 48px; }
}
@media (max-width: 767px) { :root { --ang-hero-oben: 200px; --ang-angebot-oben: 24px; --ang-titel-objekt: 28px; --ang-titel-objekt-zeile: 34px; } }
@media (max-width: 575px) { :root { --ang-reiter-groesse: 18px; --ang-reiter-zeile: 27px; --ang-reiter-innen: 14px; } }

/* =====================================================================
   3. Komponenten dieser Seiten (Präfix ang-)
   Übersicht /leistungen/immobilien/ (index.html) und die zwei Detailvorlagen
   /immobilien/kaufen/<slug>/ und /immobilien/mieten/<slug>/.
   Stufen: Desktop ≥ 1024 px (Liste + Karte nebeneinander), Tablet 520–1023 px,
   Handy < 520 px – dazu die Token-Stufen 1199/1023/767 px aus Levins Paket.
   ===================================================================== */

/* Unsichtbar, aber vorlesbar (Beschriftungen der Preisfelder, Zusatztexte) */
.ang-nur-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Fokus: auf hellen Flächen ein dunkelblauer Rahmen (11 : 1 auf Weiss). Levins Ring #c1defe (global, siehe oben) bleibt auf
   dem dunklen Hero und dem blauen Objektkopf, wo er gut sichtbar ist; auf Weiss hätte er nur 1,4 : 1. */
.ang-reiter-band :focus-visible, .ang-angebot :focus-visible, .ang-detail :focus-visible, .abschnitt :focus-visible {
  outline: 2px solid var(--farbe-primaer);
  outline-offset: 2px;
}
.ang-karte:focus { outline: none; }   /* nur Sprungziel beim Öffnen der Ebene, kein Bedienelement */

/* ---------- Sektion 1: Hero wie /leistungen/immobilien/ heute (.cover + img.parallax + .cover-ovl) ----------
   Gemessen am 07.10.2026 (Headless-Chrome): Foto-Block über die ganze Breite, Bild 120 % hoch und oben −10 %,
   Abdunkelung linear-gradient(rgba(0,0,0,.32) −5.72 %, transparent 35.15 %, rgba(0,0,0,.32) 85.11 %),
   Innenabstand oben 320 px (1024 und 1440), 220 px (768), 200 px (390), unten 16 px; Brotkrumen 15 px mit 28 px
   Abstand; H1 72/64/56/48/36 px fett, weiss. H1 «Immobilien» einzeilig wie auf der Site (Review UX-2), darunter neu
   die Unterzeile; damit der Hero nicht höher wird als heute (1440: Site 503 px, hier ≤ 520 px), beginnt der Text ab
   992 px 40 px höher (280 statt 320 px). Kontrast (Review UX-3): ein dunkelblauer Verlauf NUR unten links unter dem
   Textblock (::before, Maske von unten), oben und rechts bleibt das Foto wie auf der Site; weisse Schrift erreicht so
   auch auf einem ganz weissen Foto ≥ 4,5 : 1 (M6) und auf dem echten Foto mehr (M20). overflow: clip statt hidden
   (Levins Befund 30.09.: «hidden» macht den Hero zu einem Scroll-Container, den ein Sprung auf #kaufangebote
   mitverschieben würde). */
.ang-hero {
  position: relative;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: var(--farbe-primaer-dunkel);
  color: var(--farbe-weiss);
  padding: var(--ang-hero-oben) 0 var(--abstand-4);
}
.ang-hero__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; overflow: clip; }
.ang-hero__foto img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; }
/* Abdunkelung der Site, unverändert */
.ang-hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .32) -5.72%, rgba(0, 0, 0, 0) 35.15%, rgba(0, 0, 0, .32) 85.11%);
}
/* Dunkelblau nur unter dem Textblock: waagrecht deckend bis hinter die Unterzeile (≥ 700 px bzw. 50 %), dann
   auslaufend; senkrecht deckend bis 260 px über dem unteren Rand (der Textblock ist 175–235 px hoch), darüber in
   140 px auslaufend – oben und rechts bleibt das Foto frei. */
.ang-hero__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(1, 29, 60, .84) 0, rgba(1, 29, 60, .8) max(700px, 50%), rgba(1, 29, 60, .3) max(920px, 68%), rgba(1, 29, 60, 0) max(1120px, 84%));
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 260px, transparent 400px);
  mask-image: linear-gradient(to top, #000 0, #000 260px, transparent 400px);
}
.ang-hero__inhalt { position: relative; }
.ang-hero h1 { max-width: 10.5em; color: var(--farbe-weiss); margin-bottom: var(--abstand-2); text-shadow: 0 1px 24px rgba(1, 29, 60, .35); }
/* 576–1023 px: der Text (Unterzeile 46 ch in 16 px) reicht bis etwa 450 px – Verlauf von links wie oben, nur früher
   auslaufend; der Textblock ist hier etwa 190 px hoch */
@media (max-width: 1023px) {
  .ang-hero__foto::before {
    background: linear-gradient(90deg, rgba(1, 29, 60, .84) 0, rgba(1, 29, 60, .8) 480px, rgba(1, 29, 60, .3) 620px, rgba(1, 29, 60, 0) 760px);
    -webkit-mask-image: linear-gradient(to top, #000 0, #000 230px, transparent 340px);
    mask-image: linear-gradient(to top, #000 0, #000 230px, transparent 340px);
  }
}
/* Unter 576 px läuft der Text über die ganze Breite: Dunkelblau über die ganze Breite, nur unter dem Textblock
   (≈ 200 px) deckend, darüber in 90 px auslaufend */
@media (max-width: 575px) {
  .ang-hero__foto::before {
    background: rgba(1, 29, 60, .8);
    -webkit-mask-image: linear-gradient(to top, #000 0, #000 210px, transparent 300px);
    mask-image: linear-gradient(to top, #000 0, #000 210px, transparent 300px);
  }
}
.ang-hero__unterzeile { max-width: 46ch; margin: 0 0 var(--abstand-5); font-size: var(--groesse-unterzeile); line-height: var(--zeile-unterzeile); }

/* ---------- Sektion 1b: Schalter Kaufen | Mieten (Reiter) ----------
   Wie das Reiter-Band der Site (gemessen 07.10.2026): graues Band #fafafa über die ganze Breite, 16 px oben/unten,
   20 px zwischen den Reitern; Reiter fett 16/24 px mit 8 px oben/unten (≥ 992 px), 20/30 px mit 20/30 px (576–991),
   18/27 px mit 14 px (< 576); aktiv #023a78 mit 1 px Linie unten. Inaktiv auf der Site #a3a3a3 = 2,4 : 1 auf #fafafa –
   unter 4,5 : 1; hier darum #525252 (7,5 : 1). Die IDs kaufangebote / mietangebote sitzen wie auf der Site auf den
   Reitern selbst, damit bestehende Links /leistungen/immobilien/#kaufangebote weiter funktionieren. */
.ang-reiter-band { background: var(--farbe-flaeche); }
.ang-reiter { display: flex; flex-wrap: nowrap; gap: 20px; padding-block: var(--abstand-4); overflow-x: auto; }
.ang-reiter__knopf {
  flex: none;
  margin: 0;
  padding: var(--ang-reiter-innen);
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--farbe-text-sekundaer);
  font: inherit;
  font-size: var(--ang-reiter-groesse);
  line-height: var(--ang-reiter-zeile);
  font-weight: 700;
  cursor: pointer;
  scroll-margin-top: calc(var(--kopf-hoehe) + var(--abstand-4));
}
.ang-reiter__knopf:hover { color: var(--farbe-primaer); }
.ang-reiter__knopf[aria-selected="true"] { color: var(--farbe-primaer); border-bottom-color: var(--farbe-primaer); }

/* ---------- Sektion 2: Filter (WF1 v2, Owner 07.10.2026) ----------
   Miete 1:1 das Flatfox-Applet der Site, Kauf mit Kauf-Logik; gleiche Mechanik für beide Reiter:
   Leiste = Suchfeld + Knöpfe (Zustand steht im Knopf: «3+ Zimmer», «CHF 1'000 – 2'000», «Weitere (2)»);
   ab 1024 px Klappfelder unter den Knöpfen und die Lade «Weitere» rechts (480 px), darunter eine Ebene «Filter» mit allen
   Feldern (ab 768 px als Lade, darunter über das ganze Fenster). Jedes Feld steht genau einmal im DOM: die Fläche
   .ang-filterflaeche ist zu (display: contents) nur Behälter der Klappfelder, offen die Lade/Ebene.
   Eckig wie die Site; Bedienelemente 48 px hoch (unter 1024 px ≥ 44 px), Eingaben 16 px (iOS zoomt nicht). */
.ang-angebot { padding: var(--ang-angebot-oben) 0 0; }   /* unten der Abstand der Abschlussbox (80 / 48 px) */
:root { --ang-aktiv-flaeche: #e8eef6; }   /* aktiver Filter: Fläche hinter #023a78 (9,7 : 1) */
.ang-filter { position: relative; margin: 0 0 var(--abstand-6); }
.ang-filterleiste { display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: stretch; }
.ang-suche { position: relative; flex: 1 1 280px; min-width: 0; }
.ang-suche__lupe { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--farbe-text-sekundaer); pointer-events: none; }
.ang-eingabe.ang-suche__feld { padding-left: 44px; }
.ang-filterknopf {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 14px 0 16px;
  border: 1px solid var(--farbe-linie-dunkel);
  border-radius: 0;
  background: var(--farbe-weiss);
  color: var(--farbe-text);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ang-filterknopf:hover { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.ang-filterknopf__text { min-width: 0; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
.ang-filterknopf__pfeil { flex: none; width: 12px; height: 12px; transition: transform .15s ease; }
.ang-filterknopf__symbol { flex: none; width: 20px; height: 20px; }
.ang-filterknopf[aria-expanded="true"] { border-color: var(--farbe-primaer); box-shadow: inset 0 0 0 1px var(--farbe-primaer); color: var(--farbe-primaer); }
.ang-filterknopf[aria-expanded="true"] .ang-filterknopf__pfeil { transform: rotate(180deg); }
.ang-filterknopf.ist-aktiv { border-color: var(--farbe-primaer); background: var(--ang-aktiv-flaeche); color: var(--farbe-primaer); font-weight: 700; }
.ang-filterknopf--schmal { display: none; }

/* Chips der aktiven Filter (je ein Knopf «… ×») und «Alle Filter zurücksetzen» */
.ang-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-4); margin-top: var(--abstand-3); }
.ang-chips[hidden] { display: none; }
.ang-chips__liste { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
.ang-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin: 0;
  padding: 4px 10px 4px 12px;
  border: 1px solid var(--farbe-primaer);
  border-radius: 0;
  background: var(--ang-aktiv-flaeche);
  color: var(--farbe-primaer);
  font: inherit;
  font-size: var(--groesse-klein);
  line-height: 20px;
  cursor: pointer;
}
.ang-chip span { font-size: 18px; line-height: 1; }
.ang-chip:hover { background: var(--farbe-primaer); color: var(--farbe-weiss); }
.ang-chips .ang-textknopf { padding-block: 6px; }

/* Fläche zu: nur Behälter (display: contents), sichtbar ist höchstens das offene Klappfeld */
.ang-filterflaeche:not(.ist-offen), .ang-filterflaeche:not(.ist-offen) > .ang-filterflaeche__inhalt { display: contents; }
.ang-filterflaeche:not(.ist-offen) .ang-filterflaeche__kopf,
.ang-filterflaeche:not(.ist-offen) .ang-filterflaeche__fuss,
.ang-filterflaeche:not(.ist-offen) .ang-gruppe { display: none; }
.ang-dropdown, .ang-gruppe, .ang-dreiwahl { min-width: 0; margin: 0; padding: 0; border: 0; }
.ang-filterflaeche:not(.ist-offen) .ang-dropdown {
  display: none;
  position: absolute;
  z-index: 40;
  width: min(380px, calc(100vw - 2 * var(--rand)));
  max-height: min(70vh, 560px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  box-shadow: 0 12px 24px rgba(1, 29, 60, .12);
}
.ang-filterflaeche:not(.ist-offen) .ang-dropdown.ist-offen { display: block; }
.ang-dropdown__titel, .ang-gruppe__titel {
  float: left;   /* legend ohne Sonderlage auf dem Rahmen */
  width: 100%;
  margin: 0 0 var(--abstand-3);
  padding: 0;
  font-size: var(--groesse-klein);
  line-height: 22.5px;
  font-weight: 700;
  color: var(--farbe-primaer-dunkel);
}
.ang-dropdown__titel + *, .ang-gruppe__titel + * { clear: both; }

/* Fläche offen: Lade rechts (480 px) bzw. Ebene über das ganze Fenster unter 768 px */
.ang-abdeckung { position: fixed; inset: 0; z-index: 69; background: rgba(1, 29, 60, .45); }
.ang-abdeckung[hidden] { display: none; }
.ang-filterflaeche.ist-offen {
  position: fixed;
  z-index: 70;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(480px, 100%);
  background: var(--farbe-weiss);
  box-shadow: -12px 0 32px rgba(1, 29, 60, .18);
}
.ang-filterflaeche:focus { outline: none; }
.ang-filterflaeche__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4); padding: var(--abstand-3) var(--abstand-3) var(--abstand-3) var(--abstand-5); border-bottom: 1px solid var(--farbe-linie); }
.ang-filterflaeche__kopf h3 { margin: 0; font-size: 22px; line-height: 28px; color: var(--farbe-primaer-dunkel); }
.ang-filterflaeche__zu { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--farbe-primaer-dunkel); cursor: pointer; }
.ang-filterflaeche__zu svg { width: 24px; height: 24px; }
.ang-filterflaeche__inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--abstand-5) var(--abstand-5); }
.ang-filterflaeche.ist-offen .ang-dropdown, .ang-filterflaeche.ist-offen .ang-gruppe { display: block; padding: 20px 0 22px; border-top: 1px solid var(--farbe-linie); }
.ang-filterflaeche.ist-offen .ang-filterflaeche__inhalt > :first-child { border-top: 0; }
.ang-filterflaeche__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4); padding: var(--abstand-4) var(--abstand-5); border-top: 1px solid var(--farbe-linie); background: var(--farbe-weiss); }
.ang-filterflaeche__fuss .ang-textknopf { padding-block: 10px; }
.ang-filterflaeche__anzeigen { justify-content: center; min-width: 200px; font: inherit; font-size: 16px; cursor: pointer; }
@media (min-width: 1024px) {
  .ang-filterflaeche.ist-offen .ang-dropdown { display: none; }   /* Lade «Weitere»: nur die weiteren Gruppen */
  .ang-filterflaeche.ist-offen .ang-dropdown + .ang-gruppe { border-top: 0; }
}

/* Optionen: Häkchen/Punkt + Text + Zahl der Treffer «(n)»; 0 Treffer = abgeschaltet (#737373, 4,7 : 1) */
.ang-optionen { display: grid; }
.ang-optionen + .ang-optionen { margin-top: var(--abstand-3); }
.ang-optionen__gruppe { margin: 0 0 2px; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--farbe-text-sekundaer); }
.ang-optionen--spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--abstand-4); }
.ang-option { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 16px; line-height: 22px; cursor: pointer; }
.ang-option input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--farbe-primaer); cursor: pointer; }
/* lange Wörter («Wohnbaugenossenschaft») trennen statt über die Zahl zu laufen (Review UX-4): Silbentrennung, sonst Umbruch */
.ang-option__text { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.ang-option__anzahl { flex: none; margin-left: auto; padding-left: var(--abstand-2); font-size: var(--groesse-klein); color: var(--farbe-text-sekundaer); }
.ang-option.ist-aus, .ang-option.ist-aus .ang-option__anzahl { color: #737373; cursor: default; }
.ang-dropdown--preis > .ang-option, .ang-gruppe .ang-paar + .ang-option { margin-top: var(--abstand-3); }

/* Segmente (Zimmer, Badezimmer, GEAK, –/Ja/Nein): echte Radioknöpfe über der ganzen Fläche, unsichtbar */
.ang-segmente { display: flex; }
.ang-segment { position: relative; flex: 1 1 0; min-width: 0; }
.ang-segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ang-segment input:focus-visible { outline: none; }
.ang-segment .ang-option__text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-left: -1px;
  padding: 0 10px;
  border: 1px solid var(--farbe-linie-dunkel);
  font-size: var(--groesse-klein);
  white-space: nowrap;
}
.ang-segment:first-child .ang-option__text { margin-left: 0; }
.ang-segment:hover .ang-option__text { position: relative; z-index: 1; border-color: var(--farbe-primaer); }
.ang-segment input:checked + .ang-option__text { position: relative; z-index: 1; background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: var(--farbe-weiss); font-weight: 700; }
.ang-segment input:focus-visible + .ang-option__text { position: relative; z-index: 2; outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }
.ang-segmente--umbruch { flex-wrap: wrap; gap: var(--abstand-2); }
.ang-segmente--umbruch .ang-segment { flex: 0 0 auto; }
.ang-segmente--umbruch .ang-option__text { margin-left: 0; }

/* Von/Bis-Paare, Schnellwahl, Felder der Verfügbarkeit */
.ang-bereich + .ang-bereich, .ang-bereich + .ang-dreiwahl, .ang-dreiwahl + .ang-dreiwahl, .ang-dreiwahl + .ang-bereich { margin-top: 20px; }
.ang-bereich__titel { display: block; margin: 0 0 6px; padding: 0; font-size: var(--groesse-klein); line-height: 22.5px; font-weight: 700; color: var(--farbe-text); }
.ang-bereich__felder { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--abstand-2); }
.ang-bereich__felder--eins { grid-template-columns: minmax(0, 1fr); max-width: calc(50% - 12px); }
.ang-bereich__feld { display: grid; gap: 2px; min-width: 0; }
.ang-bereich__name { font-size: 13px; line-height: 18px; color: var(--farbe-text-sekundaer); }
.ang-bereich__strich { padding-bottom: 12px; color: var(--farbe-text-sekundaer); }
.ang-schnell { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--abstand-3); }
.ang-schnell[hidden] { display: none; }
.ang-schnell__wahl { min-height: 36px; margin: 0; padding: 6px 10px; border: 1px solid var(--farbe-linie-dunkel); border-radius: 0; background: var(--farbe-weiss); color: var(--farbe-text); font: inherit; font-size: 14px; line-height: 20px; cursor: pointer; }
.ang-schnell__wahl:hover { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.ang-schnell__wahl[aria-pressed="true"] { background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: var(--farbe-weiss); }
.ang-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-3); }
.ang-feld { display: grid; gap: 2px; min-width: 0; }

.ang-label { display: block; padding: 0; font-size: var(--groesse-klein); line-height: var(--zeile-klein); font-weight: 700; color: var(--farbe-text); }
.ang-eingabe {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--farbe-linie-dunkel);
  border-radius: 0;
  background: var(--farbe-weiss);
  color: var(--farbe-text);
  font: inherit;
  font-size: 16px;   /* ≥ 16 px: iOS zoomt beim Fokus nicht */
  line-height: 24px;
}
.ang-eingabe::placeholder { color: #737373; opacity: 1; }   /* 4,7 : 1 auf Weiss */
select.ang-eingabe {
  appearance: none;
  padding-right: 40px;
  background: var(--farbe-weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 4 6 8l4.5-4' fill='none' stroke='%23011d3c' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center / 12px 12px no-repeat;
  cursor: pointer;
}
.ang-eingabe:focus, .ang-eingabe:focus-visible { outline: none; border-color: var(--farbe-primaer); box-shadow: 0 0 0 1px var(--farbe-primaer); }
.ang-textknopf {
  justify-self: start;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--farbe-primaer);
  font: inherit;
  font-size: var(--groesse-klein);
  line-height: 24px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ang-textknopf:hover { color: var(--farbe-primaer-dunkel); }

/* ---------- Sektion 3: Liste links, Karte rechts (Split-View) ---------- */
.ang-split { position: relative; }
.ang-liste__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--abstand-2) var(--abstand-5); margin: 0 0 var(--abstand-5); }
.ang-liste__kopf h2 { margin: 0; }
.ang-liste__anzahl { margin: 0; color: var(--farbe-text-sekundaer); }
.ang-liste__hinweis { flex-basis: 100%; margin: 0; font-size: var(--groesse-klein); line-height: var(--zeile-klein); color: var(--farbe-text-sekundaer); }
.ang-paa-hinweis { margin: calc(-1 * var(--abstand-2)) 0 var(--abstand-4); padding: 10px 14px; background: var(--farbe-hellblau); font-size: var(--groesse-klein); line-height: var(--zeile-klein); }
.ang-paa-hinweis[hidden] { display: none; }
.ang-paa-hinweis .ang-textknopf { padding: 0; line-height: inherit; }
.ang-objekte { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(2 * var(--rand)); margin: 0; padding: 0; }
.ang-objekte > li { display: flex; min-width: 0; }
.ang-objekte > li[hidden] { display: none; }

/* Objektkarte (WF1 v2): Foto 3 : 2 mit Preis-Marke unten links (Flatfox-Muster «Kaufen · CHF 890'000»), Fotozahl oben
   rechts; darunter Titel (zwei Zeilen), Adresse, Eckwerte, Bezug (je eine Zeile) – alle Karten einer Reihe gleich hoch,
   nichts springt. Die Marke steht im DOM nach dem Titel (Vorlesen: Titel → Preis) und liegt über einer unsichtbaren
   Fläche in Fotogrösse (3 : 2 der Kartenbreite) – darum ohne Positionierung des Textblocks, und der gestreckte Link
   deckt weiter die ganze Karte. Hover wie .pcard auf der Site: Foto zoomt in 0,6 s auf 1,1. */
.ang-objekt {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ang-objekt:hover, .ang-objekt:focus-within, .ang-objekt.ist-hervorgehoben { border-color: var(--farbe-primaer); }
.ang-objekt.ist-hervorgehoben { box-shadow: 0 0 0 1px var(--farbe-primaer), 0 12px 24px rgba(1, 29, 60, .12); }
.ang-objekt__bild { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--farbe-flaeche); }
.ang-objekt__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ang-objekt:hover .ang-objekt__bild img { transform: scale(1.1); }
.ang-objekt__ohne-bild { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--abstand-2); height: 100%; color: var(--farbe-text-sekundaer); font-size: var(--groesse-klein); line-height: var(--zeile-klein); }
.ang-objekt__symbol { width: 48px; height: 48px; color: var(--farbe-primaer); }
.ang-objekt__bildzahl { position: absolute; top: var(--abstand-3); right: var(--abstand-3); display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: rgba(1, 29, 60, .78); color: var(--farbe-weiss); font-size: 13px; line-height: 18px; font-weight: 700; }
.ang-objekt__bildzahl svg { width: 16px; height: 16px; }
.ang-objekt__preisbadge { position: absolute; z-index: 2; top: 0; left: 0; display: flex; align-items: flex-end; width: 100%; aspect-ratio: 3 / 2; margin: 0; pointer-events: none; }
.ang-objekt__preis-wert { padding: 6px 12px; background: var(--farbe-primaer); color: var(--farbe-weiss); font-size: var(--groesse-klein); line-height: 22px; font-weight: 700; }
.ang-objekt__transaktion { font-weight: 400; }
.ang-objekt__text { display: flex; flex: 1; flex-direction: column; padding: var(--abstand-4) 20px 18px; }
.ang-objekt__titel {
  display: -webkit-box;
  margin: 0 0 6px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--groesse-text);
  line-height: var(--zeile-text);
  color: var(--farbe-primaer-dunkel);
}
@media (min-width: 520px) { .ang-objekt__titel { min-height: calc(2 * var(--zeile-text)); } }   /* zwei Karten je Reihe: gleiche Höhe */
.ang-objekt__link { color: inherit; text-decoration: none; }
.ang-objekt__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ang-objekt__link:focus-visible { outline: none; }
.ang-objekt:has(.ang-objekt__link:focus-visible) { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }
.ang-objekt__adresse, .ang-objekt__fakten, .ang-objekt__bezug { margin: 0; overflow: hidden; font-size: var(--groesse-klein); line-height: var(--zeile-klein); white-space: nowrap; text-overflow: ellipsis; color: var(--farbe-text-sekundaer); }
.ang-objekt__fakten { color: var(--farbe-text); }
.ang-objekt__bezug { margin-top: auto; padding-top: var(--abstand-3); }

/* Kartenvak: Platzhalter für die immo-map im Angebotsmodus (Fase C), in Grösse und Lage des späteren iFrames.
   Ab 1024 px rechts neben der Liste und «sticky»: es bleibt 100 px unter dem oberen Rand stehen (wie .tmg auf
   /leistungen/, --sticky-oben) und endet mit der Split-View – also vor der Abschlussbox und vor dem Footer. */
.ang-karte { position: relative; display: none; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); overflow: hidden; }
.ang-karte__svg { display: block; width: 100%; height: 100%; }
.ang-karte__land { fill: var(--farbe-flaeche); }
.ang-karte__see { fill: var(--farbe-akzent-hell); }
.ang-karte__fluss { fill: none; stroke: var(--farbe-akzent-hell); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ang-karte__ort { fill: var(--farbe-text-sekundaer); font-family: var(--schrift); }   /* Grösse als SVG-Attribut je Karte */
.ang-karte__ortpunkt { fill: var(--farbe-text-sekundaer); }
.ang-karte__massstab { stroke: var(--farbe-text-sekundaer); stroke-width: 2; fill: none; }
.ang-karte__hinweis {
  position: absolute;
  top: var(--abstand-3);
  left: var(--abstand-3);
  right: var(--abstand-3);
  margin: 0;
  padding: 6px 10px;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  font-size: 13px;
  line-height: 18px;
  color: var(--farbe-text-sekundaer);
}
.ang-pin { cursor: pointer; }
.ang-pin__form { fill: var(--farbe-primaer); stroke: var(--farbe-weiss); stroke-width: 1.5; }
.ang-pin__haus { fill: var(--farbe-weiss); }
.ang-pin[hidden] { display: none; }
.ang-pin.ist-aktiv .ang-pin__form { fill: var(--farbe-primaer-dunkel); }
.ang-pin.ist-aktiv > g { transform: scale(1.3); }
.ang-pin > g { transition: transform .15s ease; transform-box: fill-box; transform-origin: 50% 100%; }

/* Kartenvak in der Vorschau: Karte v3 (MapLibre GL, Grundkarte der Bewertungskarte ohne Einrichtungen, README «Karte v3»)
   als Platzhalter der immo-map. Ohne Netz oder ohne WebGL bleibt die SVG-Zeichnung oben (.ang-karte__svg, .ang-pin –
   gleiche Klassen wie auf den Detailseiten), ohne WebGL mit Hinweis und Link. Die Fläche trägt das Kartenpapier des
   Stils (#eef1f3, MAP_PAPER der immo-map): bis die ersten Kacheln da sind, sieht man einen einzigen ruhigen Ton. */
/* .ang-karte davor: MapLibre setzt .maplibregl-map { position: relative } in seinem später geladenen CSS */
.ang-karte .ang-karte__flaeche { position: absolute; inset: 0; display: none; background: #eef1f3; }
.ang-karte.ist-geladen .ang-karte__flaeche { display: block; }
.ang-karte.ist-geladen .ang-karte__svg, .ang-karte.ist-geladen .ang-karte__hinweis, .ang-karte.ist-ohne-webgl .ang-karte__hinweis { display: none; }
.ang-karte .maplibregl-map { font: 14px/20px var(--schrift); }
.ang-karte__ohne-webgl { position: absolute; top: var(--abstand-3); left: var(--abstand-3); right: var(--abstand-3); margin: 0; padding: 8px 12px; background: var(--farbe-weiss); border: 1px solid var(--farbe-linie-dunkel); font-size: 14px; line-height: 20px; color: var(--farbe-text); }
.ang-karte__ohne-webgl[hidden] { display: none; }
.ang-karte__leer {
  position: absolute;
  z-index: 900;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 12px 16px;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  box-shadow: 0 8px 20px rgba(1, 29, 60, .14);
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
  font-weight: 700;
  color: var(--farbe-primaer-dunkel);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.ang-karte__leer[hidden] { display: none; }
.ang-karte__zoomhinweis {
  position: absolute;
  z-index: 900;
  left: 50%;
  bottom: var(--abstand-5);
  margin: 0;
  padding: 8px 12px;
  background: rgba(1, 29, 60, .88);
  color: var(--farbe-weiss);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .2s ease;
}
.ang-karte__zoomhinweis.ist-sichtbar { opacity: 1; }
.ang-karte:not(.ist-geladen) .ang-karte__zoomhinweis { display: none; }
/* Bedienelemente der Karte eckig wie die Site. MapLibre lädt sein CSS nach diesem (vendor/maplibre-gl.css, erst mit der
   Karte): darum überall .ang-karte davor (Spezifität), Fokus innen (das Kartenvak schneidet aussen ab) */
.ang-karte .maplibregl-ctrl-group { border: 1px solid var(--farbe-linie-dunkel); border-radius: 0; box-shadow: 0 4px 12px rgba(1, 29, 60, .12); }
.ang-karte .maplibregl-ctrl-group button { width: 36px; height: 36px; border-radius: 0; }
.ang-karte .maplibregl-ctrl-group button + button { border-top: 1px solid var(--farbe-linie); }
.ang-karte .maplibregl-ctrl button:not(:disabled):hover { background-color: var(--ang-aktiv-flaeche); }
.ang-karte .maplibregl-ctrl-group button:focus:focus-visible { border-radius: 0; box-shadow: none; outline: 2px solid var(--farbe-primaer-dunkel); outline-offset: -3px; }
.ang-karte .maplibregl-canvas:focus-visible { outline: 2px solid var(--farbe-primaer-dunkel); outline-offset: -3px; }
.ang-karte__alle { margin: 0; padding: 8px 12px; border: 1px solid var(--farbe-linie-dunkel); border-radius: 0; background: var(--farbe-weiss); color: var(--farbe-primaer-dunkel); font: 700 14px/20px var(--schrift); box-shadow: 0 4px 12px rgba(1, 29, 60, .12); cursor: pointer; }
.ang-karte__alle:hover { background: var(--ang-aktiv-flaeche); color: var(--farbe-primaer); }
.ang-karte__alle:focus-visible { outline: 2px solid var(--farbe-primaer-dunkel); outline-offset: 2px; }
/* Quellenangabe immer offen (nicht eingeklappt) und als Link: «© OpenStreetMap contributors» (ODbL) */
.ang-karte .maplibregl-ctrl.maplibregl-ctrl-attrib { padding: 2px 8px; background: rgba(255, 255, 255, .92); color: var(--farbe-text-sekundaer); font: 12px/18px var(--schrift); }
.ang-karte .maplibregl-ctrl-attrib a { color: var(--farbe-primaer); text-decoration: underline; }
.ang-karte .maplibregl-ctrl-attrib a:focus-visible { outline: 2px solid var(--farbe-primaer-dunkel); outline-offset: -2px; }
/* Preis-Pins (Karte v3, Owner-Entscheid 32 Vorschlag W): Form wie properti (weisse Pille, Ecken 4 px, Spitze auf der
   Koordinate) in MLG-Farben – Rand 2 px und Schrift #023a78, weil eine weisse Pille ohne Rand auf den weissen Strassen
   der Grundkarte verschwindet (1,00 : 1). Zeiger, Fokus und «aktiv» (Objektkarte unter dem Zeiger): voll #023a78 mit
   weisser Schrift, wie properti «gewählt = umgekehrt». «Preis auf Anfrage» als Haus, Gruppe «ab 1'450» mit Zahl im Kreis.
   Die Wurzel (Knopf .ang-kartenpin-huelle) bekommt keine eigene Lage – MapLibre setzt position und transform; die
   Spitze liegt im unteren Innenabstand, damit «anchor: bottom» genau die Spitze auf die Koordinate setzt. */
.ang-kartenpin-huelle { display: block; margin: 0; padding: 0 0 7px; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.ang-kartenpin-huelle:focus-visible { outline: none; }
.ang-kartenpin {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 32px;
  padding: 0 12px;
  background: var(--farbe-weiss);
  border: 2px solid var(--farbe-primaer);
  border-radius: 4px;
  color: var(--farbe-primaer);
  font: 700 14px/20px var(--schrift);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(1, 29, 60, .25);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
/* Spitze: gedrehtes Quadrat mit Rand rechts und unten, deckt die Unterkante der Pille in der Mitte ab */
.ang-kartenpin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: inherit;
  border-right: 2px solid var(--farbe-primaer);
  border-bottom: 2px solid var(--farbe-primaer);
  transform: rotate(45deg);
  transition: background-color .15s ease;
}
.ang-kartenpin svg { width: 18px; height: 18px; }
.ang-kartenpin--haus { padding: 0 8px; }
/* Gruppe (Review UX-8): «ab 1'450» und die Zahl der Objekte im Kreis */
.ang-kartenpin--gruppe { padding-right: 6px; }
.ang-kartenpin__zahl { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--farbe-primaer); color: var(--farbe-weiss); font-size: 12px; line-height: 20px; }
.ang-kartenpin.ist-aktiv, .ang-kartenpin-huelle:hover .ang-kartenpin, .ang-kartenpin-huelle:focus-visible .ang-kartenpin { background: var(--farbe-primaer); color: var(--farbe-weiss); box-shadow: 0 0 0 2px var(--farbe-weiss), 0 6px 14px rgba(1, 29, 60, .45); }
.ang-kartenpin.ist-aktiv .ang-kartenpin__zahl, .ang-kartenpin-huelle:hover .ang-kartenpin__zahl, .ang-kartenpin-huelle:focus-visible .ang-kartenpin__zahl { background: var(--farbe-weiss); color: var(--farbe-primaer); }
.ang-kartenpin-huelle:focus-visible .ang-kartenpin { outline: 2px solid var(--farbe-primaer-dunkel); outline-offset: 3px; }
/* Popup: Bild 3 : 2 (card), Titel als Link, Preis, Eckwerte; bei gleicher Adresse eine kleine Liste. Eckig wie die Site */
.ang-popup-huelle .maplibregl-popup-content { padding: 0; border-radius: 0; box-shadow: 0 12px 28px rgba(1, 29, 60, .22); color: var(--farbe-text); font: 15px/22px var(--schrift); }
.ang-karte .ang-popup-huelle .maplibregl-popup-close-button { top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 0; background: var(--farbe-weiss); color: var(--farbe-primaer-dunkel); font: 400 24px/30px var(--schrift); }
.ang-karte .ang-popup-huelle .maplibregl-popup-close-button:hover { background: var(--ang-aktiv-flaeche); }
.ang-karte .ang-popup-huelle .maplibregl-popup-close-button:focus-visible { outline: 2px solid var(--farbe-primaer-dunkel); outline-offset: -2px; }
.ang-popup { width: 240px; }
.ang-karte .ang-popup p { margin: 0; }
.ang-popup__bild { display: block; width: 240px; height: 160px; object-fit: cover; background: var(--farbe-flaeche); }
.ang-popup__bild--leer, .ang-popup__mini--leer { display: flex; align-items: center; justify-content: center; color: var(--farbe-primaer); }
.ang-popup__symbol { width: 40px; height: 40px; }
.ang-popup__mini .ang-popup__symbol { width: 24px; height: 24px; }
.ang-popup__titel { padding: 12px 16px 2px; font-size: 16px; line-height: 22px; font-weight: 700; }
.ang-karte .ang-popup__titel a { color: var(--farbe-primaer-dunkel); text-decoration: none; }
.ang-karte .ang-popup__titel a:hover { color: var(--farbe-primaer); text-decoration: underline; }
.ang-karte .ang-popup__titel a:focus-visible { outline: 2px solid var(--farbe-primaer-dunkel); outline-offset: 2px; }
.ang-popup__preis { padding: 0 16px; font-weight: 700; color: var(--farbe-primaer); }
.ang-popup__fakten { padding: 2px 16px 14px; font-size: 14px; line-height: 20px; color: var(--farbe-text-sekundaer); }
.ang-popup--gruppe { width: 288px; padding: 14px 16px 16px; }
.ang-karte .ang-popup .ang-popup__kopf { margin-bottom: 10px; padding-right: 32px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--farbe-primaer-dunkel); }
.ang-popup__liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ang-popup__liste li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.ang-popup__mini { display: block; width: 64px; height: 43px; object-fit: cover; background: var(--farbe-flaeche); }
.ang-popup--gruppe .ang-popup__titel, .ang-popup--gruppe .ang-popup__preis { padding: 0; font-size: 14px; line-height: 20px; }

/* Knopf «Karte» (unter 1024 px): fest unten in der Mitte, solange die Liste im Bild ist; öffnet das Kartenvak als
   Ebene über der Liste. Eckig und dunkelblau wie die Knöpfe der Site. */
.ang-kartenknopf {
  position: fixed;
  left: 50%;
  bottom: var(--abstand-4);
  z-index: 61;
  display: none;
  align-items: center;
  gap: var(--abstand-2);
  padding: var(--abstand-3) 20px;
  border: 1px solid var(--farbe-primaer);
  border-radius: 0;
  background: var(--farbe-primaer);
  color: var(--farbe-weiss);
  font: inherit;
  font-size: var(--groesse-text);
  line-height: var(--zeile-text);
  box-shadow: 0 8px 24px rgba(1, 29, 60, .28);
  transform: translateX(-50%);
  cursor: pointer;
}
.ang-kartenknopf svg { width: 20px; height: 20px; }
.ang-kartenknopf:hover { background: var(--farbe-primaer-hover); border-color: var(--farbe-primaer-hover); }

/* ---------- Sektion 4: Leerer Zustand (keine Objekte im Feed / keine Treffer für den Filter) ---------- */
.ang-leer { max-width: var(--spalte-text); padding: var(--abstand-7) var(--karte-innen); background: var(--farbe-flaeche); border-top: 2px solid var(--farbe-primaer); }
.ang-leer[hidden] { display: none; }
.ang-leer__titel { margin: 0 0 var(--abstand-2); font-size: var(--groesse-h3); line-height: var(--zeile-h3); font-weight: 700; color: var(--farbe-primaer-dunkel); }
.ang-leer p:last-child { margin-bottom: 0; }
.ang-leer .cta { margin-top: var(--abstand-5); }
/* Feed leer (Review UX-7): über die ganze Breite des Containers und hellblau statt grau – sonst stünden zwei graue Boxen
   (leerer Zustand, Abschlussbox) übereinander; zweiter Knopf «… ansehen» wechselt den Reiter */
.ang-leer[data-ang-leer="feed"] { max-width: none; background: var(--farbe-hellblau); }
.ang-leer[data-ang-leer="feed"] .cta { display: flex; flex-wrap: wrap; gap: var(--abstand-3) var(--abstand-4); }
.ang-leer [data-ang-zu-reiter][hidden] { display: none; }
/* Feed leer: Filter, Liste und Karte weg, nur der Hinweis bleibt (Klasse am Panel, gesetzt vom Vorschau-Skript
   bzw. in Bricks über eine Bedingung «Anzahl der Abfrage = 0») */
.ang-panel.ist-leer .ang-filter, .ang-panel.ist-leer .ang-split { display: none; }

/* ---------- Detailseiten: Objektkopf (blaues Band wie /impressum/ – Site-Muster ohne Foto) ----------
   Gemessen am 07.10.2026: Band #023a78, Brotkrumen 157 px unter der Oberkante (= --hero-oben 156 px). Die H1 ist
   hier der Objekttitel (bis 160 Zeichen) und darum kleiner als die 72 px der Site: 48 / 36 / 28 px. */
.ang-objektkopf { background: var(--farbe-primaer); color: var(--farbe-weiss); padding: var(--hero-oben) 0 var(--abstand-7); }
.ang-objektkopf__raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--abstand-4) var(--abstand-7); align-items: end; }
.ang-objektkopf h1 { margin: 0 0 var(--abstand-3); font-size: var(--ang-titel-objekt); line-height: var(--ang-titel-objekt-zeile); color: var(--farbe-weiss); }
.ang-objektkopf__adresse { margin: 0; font-size: var(--groesse-text); line-height: var(--zeile-text); }
.ang-objektkopf__preis { margin: 0; text-align: right; }
.ang-objektkopf__betrag { display: block; font-size: var(--groesse-h2); line-height: var(--zeile-h2); font-weight: 700; white-space: nowrap; }
.ang-objektkopf__zusatz { display: block; font-size: var(--groesse-klein); line-height: var(--zeile-klein); }
.ang-objektkopf .brotkrumen a { color: var(--farbe-weiss); }

/* Inhalt: links Galerie und Angaben (8/12), rechts der Anfrage-Block (4/12, ab 1024 px «sticky»). Reihenfolge im
   Quelltext = Reihenfolge auf dem Handy: Galerie, Eckdaten, Anfrage, Highlights, Beschreibung, Merkmale, Lage. */
.ang-detail { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: var(--abstand-7) var(--abschnitt-y); }
/* Abstände über margin statt grid-gap: der Anfrage-Block überspannt ab 1024 px bis zu 10 Zeilen, leere Zeilen
   bekämen sonst je eine Lücke */
.ang-detail > * { margin-bottom: var(--abstand-7); }
.ang-detail > :last-child { margin-bottom: 0; }
.ang-detail h2 { margin-bottom: var(--abstand-4); font-size: var(--groesse-h3); line-height: var(--zeile-h3); color: var(--farbe-primaer-dunkel); }
.ang-block { min-width: 0; }

/* Galerie: Titelbild gross (3 : 2, ganzes Bild sichtbar), darunter die Vorschaubilder als Knöpfe */
.ang-galerie__haupt { position: relative; margin: 0; aspect-ratio: 3 / 2; background: var(--farbe-flaeche); }
.ang-galerie__haupt img { width: 100%; height: 100%; object-fit: contain; }
.ang-galerie__zaehler { position: absolute; right: 0; bottom: 0; margin: 0; padding: 4px 10px; background: var(--farbe-primaer-dunkel); color: var(--farbe-weiss); font-size: 13px; line-height: 20px; }
.ang-galerie__pfeil {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 0;
  border-radius: 0;
  background: var(--farbe-weiss);
  color: var(--farbe-primaer-dunkel);
  cursor: pointer;
}
.ang-galerie__pfeil svg { width: 24px; height: 24px; }
.ang-galerie__pfeil:hover { background: var(--farbe-primaer); color: var(--farbe-weiss); }
.ang-galerie__pfeil--zurueck { left: 0; }
.ang-galerie__pfeil--weiter { right: 0; }
.ang-galerie__leiste { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * var(--abstand-3)) / 5); gap: var(--abstand-3); margin: var(--abstand-3) 0 0; padding: 0 0 4px; overflow-x: auto; scroll-snap-type: x mandatory; }
.ang-galerie__leiste li { scroll-snap-align: start; }
.ang-galerie__vorschau { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: var(--farbe-flaeche); cursor: pointer; aspect-ratio: 3 / 2; overflow: hidden; outline-offset: -2px; }
.ang-galerie__vorschau img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: opacity .2s ease; }
.ang-galerie__vorschau:hover img, .ang-galerie__vorschau[aria-current="true"] img { opacity: 1; }
.ang-galerie__vorschau[aria-current="true"] { outline: 2px solid var(--farbe-primaer); }
.ang-galerie__vorschau:focus-visible { outline: 4px solid var(--farbe-primaer); outline-offset: -4px; }   /* innen: die Leiste scrollt und schneidet aussen ab */
.ang-galerie__leer { display: grid; place-items: center; aspect-ratio: 3 / 2; margin: 0; background: var(--farbe-flaeche); color: var(--farbe-text-sekundaer); }

/* Eckdaten: Raster aus Begriff und Wert mit feinen Linien */
.ang-eckdaten__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 calc(2 * var(--rand)); margin: 0; }
.ang-eckdaten__liste > div { padding: var(--abstand-3) 0; border-top: 1px solid var(--farbe-linie); }
.ang-eckdaten__liste dt { font-size: var(--groesse-klein); line-height: var(--zeile-klein); color: var(--farbe-text-sekundaer); }
.ang-eckdaten__liste dd { margin: 0; font-weight: 700; }

/* Highlights: Häkchen-Liste wie die Punkte im Hero von /immobilie-verkaufen/, hier dunkel auf Weiss */
.ang-highlights__liste { list-style: none; display: grid; gap: var(--abstand-3); margin: 0; padding: 0; }
.ang-highlights__liste li { position: relative; padding-left: 36px; }
.ang-highlights__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  background: var(--farbe-primaer);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ang-beschreibung p { max-width: 70ch; }

/* Merkmale: Tabelle mit Linien, Begriff links */
.ang-merkmale__tabelle { width: 100%; border-collapse: collapse; }
.ang-merkmale__tabelle th, .ang-merkmale__tabelle td { padding: var(--abstand-3) 0; border-top: 1px solid var(--farbe-linie); text-align: left; vertical-align: top; }
.ang-merkmale__tabelle tr:last-child > * { border-bottom: 1px solid var(--farbe-linie); }
.ang-merkmale__tabelle th { width: 40%; padding-right: var(--abstand-5); font-weight: 400; color: var(--farbe-text-sekundaer); }

/* Lage: Adresse und Kartenausschnitt (Platzhalter, später immo-map mit einem Pin) */
.ang-lage__adresse { margin: 0 0 var(--abstand-4); }
.ang-lage__karte { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); overflow: hidden; }

.ang-fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--abstand-4); padding-top: var(--abstand-5); border-top: 1px solid var(--farbe-linie); }
.ang-zurueck { display: inline-flex; align-items: center; gap: var(--abstand-2); margin: 0; }
.ang-zurueck svg { width: 20px; height: 20px; }
.ang-stand { margin: 0; font-size: var(--groesse-klein); line-height: var(--zeile-klein); color: var(--farbe-text-sekundaer); }

/* Anfrage-Block: Preis, Eckwerte, Formular «Exposé anfordern» bzw. «Kontakt aufnehmen» */
.ang-anfrage { padding: var(--karte-innen); background: var(--farbe-flaeche); border-top: 2px solid var(--farbe-primaer); }
.ang-anfrage__preis { margin: 0; font-size: var(--groesse-h2); line-height: var(--zeile-h2); font-weight: 700; color: var(--farbe-primaer); }
.ang-anfrage__preis small { display: block; font-size: var(--groesse-klein); line-height: var(--zeile-klein); font-weight: 400; color: var(--farbe-text-sekundaer); }
.ang-anfrage__eckwerte { margin: var(--abstand-1) 0 0; color: var(--farbe-text-sekundaer); }
.ang-anfrage__mietzins { margin: var(--abstand-4) 0 0; }
.ang-anfrage__mietzins > div { display: flex; justify-content: space-between; gap: var(--abstand-4); padding: 6px 0; border-top: 1px solid var(--farbe-linie); font-size: var(--groesse-klein); line-height: var(--zeile-klein); }
.ang-anfrage__mietzins dt { color: var(--farbe-text-sekundaer); }
.ang-anfrage__mietzins dd { margin: 0; font-weight: 700; white-space: nowrap; }
.ang-anfrage h2 { margin: var(--abstand-5) 0 var(--abstand-2); padding-top: var(--abstand-5); border-top: 1px solid var(--farbe-linie-dunkel); }
.ang-anfrage__text { font-size: var(--groesse-klein); line-height: var(--zeile-klein); }
.ang-expose { display: grid; gap: var(--abstand-3); }
.ang-expose[hidden] { display: none; }
.ang-expose .knopf { justify-content: center; border-radius: 0; font: inherit; cursor: pointer; }
.ang-einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--farbe-text-sekundaer); cursor: pointer; }
.ang-einwilligung input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--farbe-primaer); }
.ang-expose__meldung { margin: 0; padding: var(--abstand-3); background: var(--farbe-hellblau); font-size: var(--groesse-klein); line-height: var(--zeile-klein); }
.ang-expose__meldung[hidden] { display: none; }
.ang-anfrage__weitere { display: grid; gap: var(--abstand-3); margin-top: var(--abstand-5); }
.ang-anfrage__weitere .knopf { justify-content: center; }
.ang-anfrage__telefon { margin: 0; font-size: var(--groesse-klein); line-height: var(--zeile-klein); color: var(--farbe-text-sekundaer); }

/* Umriss-Knopf (zweite Handlung neben dem dunkelblauen Knopf) – Navy wie --farbe-primaer-dunkel («Umriss-Knopf») */
.knopf--umriss { background: transparent; border-color: var(--farbe-primaer-dunkel); color: var(--farbe-primaer-dunkel); }
.knopf--umriss:hover { background: var(--farbe-primaer-dunkel); border-color: var(--farbe-primaer-dunkel); color: var(--farbe-weiss); }

/* ---------- Stufen ---------- */
@media (min-width: 1024px) {
  .ang-split { display: grid; grid-template-columns: minmax(0, var(--ang-spalte-liste)) minmax(0, var(--ang-spalte-karte)); column-gap: calc(2 * var(--rand)); align-items: start; }
  .ang-karte { display: block; position: sticky; top: var(--sticky-oben); height: var(--ang-karte-hoehe); min-height: 420px; }
  .ang-detail { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--abstand-7); align-items: start; }
  .ang-detail > .ang-block { grid-column: 1; }
  .ang-detail > .ang-anfrage { grid-column: 2; grid-row: 1 / span 10; margin-bottom: 0; }
}
/* «sticky» nur, wo der ganze Anfrage-Block unter den 100 px Platz hat (wie Levins Ablauf) */
@media (min-width: 1024px) and (min-height: 720px) {
  .ang-detail > .ang-anfrage { position: sticky; top: var(--sticky-oben); }
}
@media (max-width: 1199px) {
  .ang-eckdaten__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  /* Filter bleibt beim Scrollen oben stehen (unter dem Kopf; wenn der Kopf beim Runterscrollen wegfährt, ganz oben – wie
     der Platzhalter-Kopf über scroll-state, auf der Site über body.scrolling-up). Ist eine Ebene offen, liegt der ganze
     Filter über dem Kopf (die Ebene steckt in seinem Stapelkontext). */
  .ang-filter { position: sticky; top: var(--kopf-hoehe); z-index: 45; margin-inline: calc(-1 * var(--rand)); padding: var(--abstand-2) var(--rand); background: var(--farbe-weiss); box-shadow: 0 1px 0 var(--farbe-linie); }
  @media (prefers-reduced-motion: no-preference) { .ang-filter { transition: top .3s ease; } }   /* «Bewegung reduzieren»: rückt ohne Gleiten */
  .ang-filter:has(.ist-offen) { z-index: 80; }
  /* Filterleiste schmal: Suchfeld über die ganze Breite, darunter «Filter (n)» (Ebene mit allen Feldern) und «Sortiert» */
  .ang-filterknopf--breit { display: none; }
  .ang-filterknopf--schmal { display: inline-flex; }
  .ang-suche { flex-basis: 100%; }
  .ang-filterknopf--schmal, .ang-filterknopf--sort { flex: 1 1 0; }
  .ang-kartenknopf.ist-sichtbar { display: inline-flex; }
  /* Kartenvak als Ebene über der Liste (Knopf «Karte»), Liste bleibt darunter stehen */
  .ang-karte.ist-offen { display: block; position: fixed; inset: 0; z-index: 60; border: 0; }
  .ang-objektkopf__raster { grid-template-columns: minmax(0, 1fr); }
  .ang-objektkopf__preis { text-align: left; }
}
@media (max-width: 767px) {
  .ang-filterflaeche.ist-offen { width: 100%; box-shadow: none; }
  .ang-filterknopf { padding: 0 12px; }
  .ang-optionen--spalten { grid-template-columns: minmax(0, 1fr); }
  .ang-galerie__leiste { grid-auto-columns: calc((100% - 2 * var(--abstand-3)) / 3.3); }
  .ang-objekt__text { padding: var(--abstand-3) var(--abstand-4) var(--abstand-4); }
}
@media (max-width: 519px) {
  .ang-objekte { grid-template-columns: minmax(0, 1fr); }
  .ang-galerie__pfeil { width: 40px; height: 40px; margin-top: -20px; }
}
/* Ebene offen (Kartenebene, Lade/Ebene «Filter»): die Seite steht; die Breite der wegfallenden Scrollleiste kommt als Rand
   rechts dazu (gemessen vom Skript, --ang-sperr-rand), auch am festen Kopf – nichts springt seitlich (Review UX-6) */
html.ang-karte-offen, html.ang-ebene-offen { overflow: hidden; padding-right: var(--ang-sperr-rand, 0px); }
html.ang-karte-offen .kopf, html.ang-ebene-offen .kopf { padding-right: var(--ang-sperr-rand, 0px); }

/* Lenis (vendor/lenis.min.js) – die Standard-CSS der Bibliothek. Das weiche Scrollen und das Parallax des Hero-Fotos
   macht das Skript der Site (script.js, initScroll), nicht CSS; bei «Bewegung reduzieren» startet keins von beiden. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* «Bewegung reduzieren»: keine Übergänge (auch die Knöpfe der Site), kein Zoom, kein Parallax (auch wenn die Einstellung
   erst während des Besuchs wechselt: das Parallax-Skript der Site setzt den Stil weiter, hier gilt transform: none),
   kein weiches Scrollen (Lenis beendet das Skript) */
@media (prefers-reduced-motion: reduce) {
  .knopf, .ang-objekt, .ang-objekt__bild img, .ang-galerie__vorschau img, .ang-pin > g, .ang-filterknopf, .ang-filterknopf__pfeil,
  .ang-kartenpin, .ang-kartenpin::after, .ang-karte__zoomhinweis, .ang-filter { transition: none; }
  .ang-objekt:hover .ang-objekt__bild img { transform: none; }
  .ang-hero__foto img.parallax { transform: none !important; }
}