/* ============================================================================
   Immobilienbörse — öffentlicher On-Market-Bereich (beide Kreis-Domains, kreisneutral)
   Ergänzung zu verbund.css (Design-System v0.3). Nur was dort fehlt:
   Filter-Formular, Karten-Link, Objektseite, Kennzahlen, Makler-Karte,
   Anruf-Leiste mobil. Tokens kommen aus :root von verbund.css, nichts wird
   überschrieben. Lesbarkeit vor Eleganz, Touch-Ziele ≥ 44 px, keine Emojis.
   ========================================================================== */

/* ------------------------------------------------------- Karte als Ganzlink */
/* Die ganze Karte führt zur Objektseite: ein Tab-Stopp, ein großes Tippziel. */
.obj-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:var(--ink-2);font-weight:inherit}
.obj-link:hover{text-decoration:none}
/* .obj hat overflow:hidden — der Fokusrahmen läuft deshalb nach innen. */
.obj-link:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:var(--r-m)}
.obj-link .price{margin-top:16px}

/* Ruhiger Platzhalter, wenn ein Objekt (noch) kein Titelbild hat. */
.ph-leer{position:absolute;inset:0;display:grid;place-items:center}
.ph-leer svg{width:54px;height:54px;color:#94a8b3}
.ph-leer.gross svg{width:84px;height:84px}

/* -------------------------------------------------------- Filter-Formular */
.pf{margin:0}
.pf-wrap{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-1)}
.pf-sum{display:none}
.pf-sum::-webkit-details-marker{display:none}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  padding:14px 15px;align-items:end}
.pf-fl{display:flex;flex-direction:column;gap:7px;min-width:0}
.pf-fl label{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.pf-fl select{width:100%;min-width:0;min-height:48px;border:1px solid var(--line-in);border-radius:var(--r-s);
  padding:12px 36px 12px 13px;font-size:15.5px;font-family:var(--tx);font-weight:600;color:var(--ink);
  background-color:var(--surface);appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23134b84' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  transition:border-color .16s,box-shadow .16s}
.pf-fl select:hover{border-color:var(--accent2)}
.pf-fl select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(28,87,168,.22)}
.pf-go{grid-column:1/-1;display:flex}
.pf-go .btn{min-height:48px;padding:13px 26px}

/* Trefferzahl und Zurücksetzen unter der Leiste. */
.pf-res{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:16px 0 0}
.pf-res .count{font-family:var(--ui);font-size:16px;font-weight:700;color:var(--ink)}
.pf-res .count .von{color:var(--muted);font-weight:600}
.pf-reset{font-family:var(--ui);font-size:14.5px;font-weight:700;color:var(--accent-t);
  text-decoration:underline;text-underline-offset:3px;padding:6px 0}

/* Leerzustand */
.leer{text-align:center;padding:52px 0 44px}
.leer p{font-size:16.5px;color:var(--ink-2);font-weight:500;margin:0 0 22px}

.steps-fuss{margin-top:30px;font-size:15.5px;color:var(--ink-2);font-weight:500}
.steps-fuss a{font-weight:700}

/* =========================================================== Objektseite */
.det-back{padding-top:clamp(18px,2.6vw,28px)}
.backlink{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  font-family:var(--ui);font-size:14.5px;font-weight:700;color:var(--accent-t);text-decoration:none}
.backlink svg{width:17px;height:17px;flex:0 0 auto}
.backlink:hover{text-decoration:underline;text-underline-offset:3px}

.det{display:grid;grid-template-columns:2fr 1fr;gap:clamp(24px,3vw,40px);
  align-items:start;padding-bottom:clamp(34px,4.4vw,56px)}
.det-main{min-width:0}

.det-bild{position:relative;aspect-ratio:16/10;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-2);
  background:linear-gradient(140deg,#d5dee4,#eef2f5)}
.det-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.det-bild .badge{top:14px;left:14px}

.det-kopf{margin-top:clamp(20px,2.6vw,28px)}
.det-kopf .loc{display:flex;align-items:center;gap:6px;font-family:var(--ui);font-size:12.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-t)}
.det-kopf .loc svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}
.det-kopf .loc .ot{color:var(--muted);font-weight:600}
.det-kopf h1{font-size:clamp(26px,3.4vw,40px);margin:12px 0 0;max-width:24ch}
.det-art{margin-top:10px;font-size:16px;color:var(--muted);font-weight:600}
.det-wt{margin-top:10px;font-family:var(--ui);font-size:clamp(18px,1.9vw,21px);line-height:1.4;color:var(--ink-2);font-weight:600;max-width:40ch}

/* Kennzahlen: ruhige Liste, Preis als Anker. Keine Kachelflut. */
.facts{margin-top:clamp(22px,3vw,30px);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);box-shadow:var(--sh-1);overflow:hidden}
.facts-preis{display:flex;flex-direction:column;gap:4px;padding:20px 22px;border-bottom:1px solid var(--line-2)}
.facts-preis .lab{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-t)}
.facts-preis strong{font-family:var(--ui);font-size:clamp(27px,3.2vw,34px);font-weight:700;
  letter-spacing:-.026em;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums}
.facts-preis .cur{font-size:.68em;font-weight:500;color:var(--muted);margin-left:.16em}
.facts-liste{margin:0;padding:6px 22px 14px}
.facts-liste>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:12px 0;border-bottom:1px solid var(--line-2)}
.facts-liste>div:last-child{border-bottom:0}
.facts-liste dt{font-size:15px;color:var(--muted);font-weight:500;margin:0}
.facts-liste dd{margin:0;font-family:var(--ui);font-size:16px;font-weight:700;color:var(--ink);
  text-align:right;font-variant-numeric:tabular-nums}

.det-block{margin-top:clamp(26px,3.2vw,36px)}
.det-block h2{font-size:clamp(20px,2vw,24px)}
.freitext{margin-top:12px;font-size:16.5px;line-height:1.68;color:var(--ink-2);font-weight:450;max-width:66ch}

/* Hinweiszeile */
.det-note{display:flex;gap:11px;align-items:flex-start;margin-top:clamp(24px,3vw,32px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);
  padding:14px 16px;font-size:14.5px;color:var(--ink-2);line-height:1.5;font-weight:500;max-width:56ch}
.det-note svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px;color:var(--accent)}

/* ----------------------------------------------------------- Makler-Karte */
.det-side{position:sticky;top:86px;min-width:0}
.agent{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-2);padding:22px 22px 24px}
.agent-kicker{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-t);padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.agent-kopf{display:flex;align-items:center;gap:14px;margin-top:18px}
.agent .avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--soft);border:1px solid var(--soft-line);display:grid;place-items:center;
  font-family:var(--ui);font-size:17px;font-weight:700;color:var(--accent-t)}
.agent-id{min-width:0}
.agent-id h2{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.2}
.agent-id .role{font-size:13.5px;color:var(--muted);margin-top:4px;font-weight:500;line-height:1.4}
.agent-id .firma{font-size:14px;color:var(--ink-2);margin-top:3px;font-weight:600;line-height:1.4}
.agent-meta{display:flex;flex-direction:column;align-items:flex-start;margin-top:16px}
.agent-meta .town{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-family:var(--tx);font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none;
  word-break:break-word}
.agent-meta a.town{color:var(--accent-t)}
.agent-meta a.town:hover{text-decoration:underline;text-underline-offset:3px}
.agent-meta .town svg{width:17px;height:17px;flex:0 0 auto;color:var(--accent)}
.agent-tat{display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line-2)}
.agent-tat .btn{width:100%}
.agent-tat .btn svg{width:17px;height:17px}

/* ------------------------------------------------------------- Anfrage */
.anfrage-form{max-width:700px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.req{color:var(--accent-t);font-weight:700}
.accept .t label{cursor:pointer}
.hinweis-kasten{display:flex;gap:11px;align-items:flex-start;max-width:700px;
  background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:var(--r-s);
  padding:14px 16px;margin-bottom:18px;font-size:15px;color:var(--amber);
  line-height:1.5;font-weight:600}
.hinweis-kasten svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px}

/* -------------------------------------------- Anruf-Leiste (nur mobil) */
.callbar{display:none}

/* =================================================================== Umbruch */
@media(max-width:980px){
  .det{grid-template-columns:1fr}
  .det-side{position:static;top:auto}
  .agent{max-width:560px}
}
@media(max-width:860px){
  /* Zweite Leiste über der App-Leiste: Anrufen ist der kürzeste Weg zum Makler. */
  body.hat-leiste{padding-bottom:162px}
  .callbar{display:flex;gap:10px;position:fixed;left:0;right:0;z-index:109;
    bottom:calc(76px + env(safe-area-inset-bottom));
    padding:10px 12px;background:rgba(255,255,255,.97);
    backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(20,40,50,.1)}
  .callbar .btn{flex:1;min-height:50px;padding:12px 14px;box-shadow:none}
  .callbar .btn svg{width:17px;height:17px}
}
@media(max-width:700px){
  /* Filter eingeklappt: Kopfzeile mit Zähler, Inhalt erst nach Tipp (UI-Doktrin Regel 9). */
  .pf-sum{display:flex;align-items:center;gap:9px;min-height:52px;padding:0 15px;cursor:pointer;
    list-style:none;font-family:var(--ui);font-size:15px;font-weight:700;color:var(--ink)}
  .pf-sum .pf-l{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
  .pf-sum .pf-l svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto}
  .pf-sum .pf-c{font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;min-width:0}
  .pf-sum .pf-chev{margin-left:auto;width:9px;height:9px;flex:0 0 auto;
    border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
    transform:rotate(45deg);transition:transform .15s}
  .pf-wrap[open] > .pf-sum .pf-chev{transform:rotate(-135deg)}
  .pf-wrap[open] > .pf-sum{border-bottom:1px solid var(--line-2)}
  .pf-grid{grid-template-columns:1fr;gap:14px;padding:14px 15px 16px}
  .pf-go .btn{width:100%}
  .det-bild{aspect-ratio:4/3}
  .facts-preis,.facts-liste{padding-left:16px;padding-right:16px}
  .agent{padding:18px 16px 20px}
  .det-kopf h1{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .pf-sum .pf-chev{transition:none}
}

/* Beispielobjekte (11.09.2026): eigener Badge, ruhige Erklärung statt Ansprechpartner */
.badge.b-demo{color:var(--slate);background:var(--slate-soft);border-color:var(--line)}
.det-demo{margin:10px 0 16px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}

/* ==========================================================================
   Vollmodus der Objektseite (11.09.2026): Galerie, Bildansicht, Texte,
   Merkmale, Grundrisse, Energieausweis, Provisionszeile, Anschrift.
   Nur Ergänzungen, nichts oben Stehendes wird überschrieben.
   ========================================================================== */

/* ------------------------------------------------------------- Galerie */
/* Vier Vorschauen je Reihe am Handy (≈ 76 × 57 px), mehr auf breiten Schirmen. */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.gal-t{display:block;width:100%;padding:0;position:relative;aspect-ratio:4/3;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;
  background:linear-gradient(140deg,#d5dee4,#eef2f5);transition:border-color .16s}
.gal-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal-t:hover{border-color:var(--accent2)}
.gal-t:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(min-width:701px){.gal{grid-template-columns:repeat(6,1fr);gap:10px}}

/* --------------------------------------------------------- Bildansicht */
/* Eigenes <dialog>: Esc, Fokusfalle und Fokus-Rückgabe kommen vom Browser. */
/* Die Fläche deckt selbst ab (nicht nur ::backdrop): sonst scheinen Seite und
   Anruf-/App-Leiste durch, die im Normalfluss unter dem Dialog liegen. */
.lb{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;
  background:rgba(16,28,34,.96);overflow:hidden}
.lb::backdrop{background:rgba(16,28,34,.96)}
.lb-fig{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:70px 16px 78px}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  border-radius:var(--r-s);background:var(--surface)}
.lb-cap{font-family:var(--tx);font-size:15px;font-weight:500;line-height:1.45;
  color:#fff;text-align:center;max-width:58ch}
.lb-nr{position:absolute;left:0;right:0;bottom:24px;margin:0;text-align:center;
  font-family:var(--ui);font-size:13px;font-weight:700;color:#e6edf0;font-variant-numeric:tabular-nums}
.lb-btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;
  border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(16,28,34,.7);
  color:#fff;cursor:pointer;transition:background-color .16s}
.lb-btn svg{width:22px;height:22px}
.lb-btn:hover{background:rgba(16,28,34,.92)}
.lb-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lb-x{top:14px;right:14px}
.lb-prev{left:10px;top:50%;margin-top:-24px}
.lb-next{right:10px;top:50%;margin-top:-24px}

/* ----------------------------------------------- Texte aus dem CRM */
.det-block .freitext + .freitext{margin-top:14px}
.det-liste{margin:12px 0 0;padding:0 0 0 22px;max-width:64ch}
.det-liste li{font-size:16.5px;line-height:1.6;color:var(--ink-2);font-weight:450;margin-top:7px}
.det-liste li::marker{color:var(--accent)}
.det-liste + .freitext{margin-top:14px}

/* Merkmale: ruhige Häkchenliste, kein Kastenraster. */
.merkmale{list-style:none;margin:12px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 22px;max-width:66ch}
.merkmale li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;
  font-size:15.5px;line-height:1.45;color:var(--ink-2);font-weight:500}
.merkmale svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px;color:var(--accent)}

/* ---------------------------------------------------------- Grundrisse */
.plaene{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.plan{display:block;width:100%;padding:0;cursor:pointer;text-align:left;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-1);transition:border-color .16s}
.plan img{display:block;width:100%;max-width:100%;height:auto}
.plan .t{display:block;padding:12px 16px;border-top:1px solid var(--line-2);
  font-family:var(--ui);font-size:14px;font-weight:700;color:var(--ink)}
.plan:hover{border-color:var(--accent2)}
.plan:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ------------------------------------------------------- Energieausweis */
.energie{margin-top:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);box-shadow:var(--sh-1);overflow:hidden}
.en-fuss{margin-top:11px;font-size:13.5px;line-height:1.5;color:var(--muted);
  font-weight:500;max-width:58ch}
/* Klassen-Pille: helle Fläche als Orientierung, Text bleibt dunkel (Kontrast ≥ 4,5:1). */
.epill{display:inline-block;min-width:36px;padding:3px 11px;border-radius:999px;
  border:1px solid;text-align:center;font-family:var(--ui);font-size:13.5px;font-weight:700;
  letter-spacing:.02em;color:var(--ink)}
.epill.k-a{background:#daefe7;border-color:#a4d2c4}
.epill.k-c{background:#f7f0c9;border-color:#dbc982}
.epill.k-e{background:#fae4cb;border-color:#e6bf8f}
.epill.k-g{background:#f9dad5;border-color:#edb0a8}
.epill.k-n{background:var(--surface-2);border-color:var(--line)}

/* ------------------------------------------------------ Provisionszeile */
/* Ausschließlich die Angabe des Anbieters zu diesem Objekt. */
.facts-prov{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 12px;
  padding:15px 22px;border-bottom:1px solid var(--line-2)}
.facts-prov .lab{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-t);width:100%}
.facts-prov .v{font-family:var(--ui);font-size:16.5px;font-weight:700;color:var(--ink)}
.facts-prov .q{font-size:13.5px;color:var(--muted);font-weight:500}

/* --------------------------------------------- Anschrift in der Karte */
/* Anbieterkennzeichnung: darf zweizeilig laufen, bleibt ohne Aufklappen sichtbar. */
.agent-meta .adr{align-items:flex-start;min-height:0;padding:10px 0;line-height:1.45}
.agent-meta .adr svg{margin-top:2px}

/* ----------------------------------- Kennzeichen auf der Objektkarte */
.stats .epill{background:#daefe7;border-color:#a4d2c4;padding:4px 11px;font-size:12.5px}
.stats .epill.k-c{background:#f7f0c9;border-color:#dbc982}
.stats .epill.k-e{background:#fae4cb;border-color:#e6bf8f}
.stats .epill.k-g{background:#f9dad5;border-color:#edb0a8}
.stats .epill.k-n{background:var(--surface-2);border-color:var(--line)}

@media(max-width:700px){
  .lb-fig{padding:66px 12px 70px}
  .facts-prov{padding-left:16px;padding-right:16px}
}
@media(prefers-reduced-motion:reduce){
  .gal-t,.plan,.lb-btn{transition:none}
}