/* ============================================================
   TRUTH LAYER + KI-DEMO — Styles (Etappe 1)
   ECHTDATEN-Marker · Consent · Rechtsseiten · 404 · KI-Suche
   ============================================================ */

/* ---------- Inline-Marker: gelb, deutlich ---------- */
.ed {
  background: linear-gradient(0deg, rgba(255,214,66,0.55), rgba(255,214,66,0.55));
  box-shadow: 0 0 0 2px rgba(255,214,66,0.55);
  border-radius: 3px;
  border-bottom: 2px dotted #B8860B;
  color: inherit;
  cursor: help;
  padding: 0 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Auf dunklen Flächen lesbar bleiben */
.section.dark .ed, .cta-banner .ed, .help-block .ed, .tool-card.dark .ed, .crm-grid .ed, [style*="background: var(--ink)"] .ed {
  color: #1a1a1a;
}

/* ---------- Block-Marker ---------- */
.ed-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: #FFF7DB;
  border: 1px solid #F0DA8C;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 14px 0;
}
.ed-note-badge {
  flex-shrink: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: #F5C518; color: #3A2E00;
  padding: 3px 8px; border-radius: 6px; margin-top: 1px;
}
.ed-note p { margin: 0; font-size: 13px; line-height: 1.5; color: #5A4A10; }
.ed-note p em { font-style: normal; font-weight: 500; color: #3A2E00; }
.ed-note p a { color: #8A6D00; text-decoration: underline; text-underline-offset: 2px; }
.section.dark .ed-note, .cta-banner .ed-note { background: #FFF7DB; }

/* ---------- Consent ---------- */
.consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 14px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-3);
  cursor: pointer;
}
.consent input {
  width: 16px; height: 16px; margin-top: 1px;
  accent-color: var(--coral); flex-shrink: 0;
}
.consent a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Rechtsseiten ---------- */
.legal-body { max-width: 760px; }
.legal-body h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.014em; margin: 36px 0 8px; }
.legal-body p { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* ---------- ECHTDATEN-Liste ---------- */
.ed-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.ed-table th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 14px 10px 0; border-bottom: 1px solid var(--line-2);
}
.ed-table td {
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-2); vertical-align: top; line-height: 1.5;
}
.ed-table td:first-child { font-weight: 500; color: var(--ink); width: 26%; }
.ed-table td:last-child { color: var(--ink-3); width: 26%; }
.ed-table.done td:first-child { color: var(--ink-2); }
.ed-table.done tr td { background: transparent; }
.ed-table.done td { color: var(--ink-3); }

/* ============================================================
   KI-SUCHE — Demo-Flow
   ============================================================ */
.ki-demo-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFF7DB; border: 1px solid #F0DA8C; border-radius: 999px;
  padding: 5px 12px 5px 6px;
  font-size: 12px; color: #5A4A10; font-weight: 500;
}
.ki-demo-tag .ki-demo-dot {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: #F5C518; color: #3A2E00; border-radius: 999px; padding: 2px 8px;
}

/* Verstanden-Rückspiegelung */
.ki-understood {
  margin-top: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 18px 20px;
}
.ki-understood-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.ki-understood-head h3 { margin: 0; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.ki-understood-head h3 svg { color: var(--coral); }
.ki-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ki-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--coral-50); border: 1px solid var(--coral-100);
  color: var(--ink); border-radius: 999px; padding: 7px 12px;
  font-size: 13px; font-weight: 500;
}
.ki-chip .ki-chip-k { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.ki-chip button {
  display: grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; color: var(--ink-3); padding: 0;
}
.ki-chip button:hover { background: var(--coral-100); color: var(--ink); }
.ki-chip.derived { background: var(--bg-paper); border-color: var(--line-2); }
.ki-understood-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ki-contract { margin-top: 14px; border-top: 1px dashed var(--line-2); padding-top: 12px; }
.ki-contract summary {
  cursor: pointer; font-size: 12.5px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.ki-contract summary:hover { color: var(--ink); }
.ki-contract pre {
  margin: 10px 0 0; padding: 14px;
  background: #101010; color: #E8E8E4;
  border-radius: 10px; font-size: 11.5px; line-height: 1.55;
  overflow-x: auto;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Match-Ergebnisse */
.ki-results { margin-top: 20px; display: grid; gap: 14px; }
.ki-results-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ki-results-head h3 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.018em; }
.ki-results-head .sub { font-size: 13px; color: var(--ink-3); }
.ki-match {
  display: grid; grid-template-columns: 240px 1fr;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-l);
  overflow: hidden;
}
.ki-match-photo { position: relative; min-height: 190px; }
.ki-match-rank {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-size: 13.5px; font-weight: 600;
  border: 2px solid #fff;
}
.ki-match-body { padding: 18px 20px; display: grid; gap: 12px; align-content: start; }
.ki-match-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.ki-match-top h4 { margin: 0 0 3px; font-size: 17px; font-weight: 500; letter-spacing: -0.012em; }
.ki-match-top h4 a { color: var(--ink); }
.ki-match-top h4 a:hover { color: var(--coral-600); }
.ki-match-loc { font-size: 12.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.ki-match-specs { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.ki-match-specs strong { font-weight: 600; color: var(--ink); }
.ki-match-specs > span { white-space: nowrap; }
.ki-why { display: grid; gap: 5px; }
.ki-why li {
  list-style: none; display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; color: var(--ink-2); line-height: 1.45;
}
.ki-why li svg { flex-shrink: 0; margin-top: 2px; color: #1E9E5A; }
.ki-why.devs li svg { color: var(--amber); }
.ki-why ul { margin: 0; padding: 0; }
.ki-why-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.ki-match-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.ki-match-price strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ki-match-price span { font-size: 12.5px; color: var(--ink-3); }
.ki-empty {
  background: var(--bg-paper); border-radius: var(--r-l); padding: 28px;
  text-align: center;
}
.ki-empty h4 { margin: 0 0 6px; font-size: 17px; font-weight: 500; }
.ki-empty p { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-3); }
.ki-offmarket-hint {
  display: flex; gap: 12px; align-items: center;
  background: var(--ink); color: #fff; border-radius: var(--r-l);
  padding: 16px 20px;
}
.ki-offmarket-hint svg { color: var(--coral); flex-shrink: 0; }
.ki-offmarket-hint p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.85); }
.ki-offmarket-hint strong { color: #fff; }
.ki-offmarket-hint .btn { margin-left: auto; flex-shrink: 0; }

@media (max-width: 760px) {
  .ki-match { grid-template-columns: 1fr; }
  .ki-match-photo { min-height: 160px; }
  .ki-offmarket-hint { flex-wrap: wrap; }
  .ki-offmarket-hint .btn { margin-left: 0; }
  .ed-table td:first-child, .ed-table td:last-child { width: auto; }
}

/* EN-Hinweis auf nicht übersetzten Seiten */
.lang-notice {
  display: flex; gap: 12px; align-items: flex-start;
  max-width: 1480px; margin: 14px auto 0; padding: 12px 32px;
}
.lang-notice strong {
  flex-shrink: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 3px 8px; margin-top: 1px;
}
.lang-notice span { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.lang-notice a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* Hero-Eyebrow-Pill: darf nicht aus dem Hintergrund laufen */
.hero-eyebrow { white-space: nowrap; }
@media (max-width: 720px) {
  .hero-eyebrow { white-space: normal; height: auto; min-height: 0; padding-top: 6px; padding-bottom: 6px; line-height: 1.35; }
}

/* ============================================================
   ETAPPE 2 — USPs above the fold, Lead-Gate, Fit-Check, Mobile
   ============================================================ */

/* Hero-USPs (Briefing §1: above the fold) */
.hero { padding-top: 34px; padding-bottom: 44px; }
.hero .hero-eyebrow { margin-bottom: 16px; }
/* GF 23.09.: Headline 5 bis 8 % kleiner als bis dahin (4.6vw / 74px), damit
   „beginnt mit Euren Worten." auch bei kleineren Desktopbreiten zweizeilig bleibt. */
.hero-claim-col h1 { font-size: clamp(34px, 3.7vw, 58px); }
.conv-input { min-height: 96px; }
.hero-usps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
}
.hero-usp { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.hero-usp svg { color: var(--coral); flex-shrink: 0; margin-top: 1px; }
.hero-usp strong { color: var(--ink); font-weight: 600; }
/* GF 23.09.: drei Argumente, je Titel (16 px, 600) und Unterzeile (14 px, grau). */
.hero-usps.hero-usps-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; padding-top: 24px; }
.hero-usps.hero-usps-3 .hero-usp { gap: 14px; align-items: flex-start; }
.hero-usps.hero-usps-3 .hero-usp svg { margin-top: 2px; }
.hero-usps.hero-usps-3 .hero-usp strong { display: block; font-size: 16px; line-height: 1.3; margin-bottom: 3px; }
.hero-usps.hero-usps-3 .hero-usp em { display: block; font-style: normal; font-size: 14px; color: var(--ink-3); line-height: 1.45; }
@media (max-width: 1100px) { .hero-usps.hero-usps-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .hero-usps.hero-usps-3 { grid-template-columns: 1fr; gap: 14px; }
  .hero-usps.hero-usps-3 .hero-usp { border-left: none; padding-left: 0; }
}
@media (max-width: 1100px) { .hero-usps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .hero-usps { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* CRM-Sektion hell (keine dunkle Grundstimmung, §3) */
.section.paper .crm-text h2 { color: var(--ink); }
.section.paper .crm-text h2 .accent { color: var(--coral); }
.section.paper .crm-stat .num { color: #fff; }
.section.paper .crm-stat .lbl { color: rgba(255,255,255,0.6); }
.section.paper .crm-bullets div { color: var(--ink-2); }
.section.paper .crm-bullet-dot { background: var(--coral); }
.section.paper .crm-text .accent { color: var(--coral); }

/* Lead-Gate-Modal (Shortlist-PDF / Auswahl senden) */
.lead-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,10,10,0.45);
  display: grid; place-items: center; padding: 20px;
}
.lead-modal-inner {
  background: #fff; border-radius: var(--r-xl);
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  padding: 28px;
}
.lead-modal-inner header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 6px; }
.lead-modal-inner h2 { margin: 4px 0 6px; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.lead-modal-inner .lm-sub { font-size: 13.5px; color: var(--ink-3); margin: 0 0 16px; }
.lm-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; flex-shrink: 0; }
.lm-close:hover { border-color: var(--ink); }
.lm-items { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.lm-item { font-size: 12px; background: var(--bg-paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; color: var(--ink-2); }
/* 🛑 URSACHE von „die Datenschutzvereinbarung ist aus dem Bild gerutscht und
   wird nicht korrekt angezeigt" (GF 30.07.) — gemessen, nicht vermutet:
   Der Selektor hiess `.lm-fields input` und traf damit AUCH die
   Consent-Checkbox. Die bekam `width: 100%` plus 13/15 px Innenabstand, also die
   ganze Zeilenbreite (494 px). Fuer den Satz daneben blieb eine Breite von
   0 px — bei 635 px Textbedarf. Genau das zeigt der Screenshot: ein einzelnes
   Kaestchen mittig, der Satz rechts daneben aus dem Dialog heraus, plus
   waagerechte Bildlaufleiste.
   Es war also kein Umbruch- oder Raster-Problem, sondern ein zu weit gefasster
   Selektor. Checkboxen und Radios sind jetzt ausgenommen; ihre Groesse kommt
   aus .consent bzw. .agent-freq.
   minmax(0, 1fr) bleibt als zweite Sicherung: ohne Spaltenangabe legt `grid`
   eine implizite Spalte mit min-width:auto an, die mitwaechst. */
.lm-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lm-fields input:not([type="checkbox"]):not([type="radio"]),
.lm-fields select, .lm-fields textarea {
  padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 12px;
  font-size: 14.5px; background: #fff; width: 100%; min-width: 0;
  font-family: inherit; color: inherit; box-sizing: border-box;
}
.lm-fields textarea { resize: vertical; line-height: 1.45; }
.lm-fields input:not([type="checkbox"]):not([type="radio"]):focus,
.lm-fields select:focus, .lm-fields textarea:focus {
  outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,114,95,0.12);
}
.lead-modal-inner { overflow-x: hidden; }   /* Rueckfallschutz gegen dasselbe Muster */
.lead-modal-inner .consent { min-width: 0; }
.lead-modal-inner .consent span { min-width: 0; }

/* Zwei Felder je Zeile — auf dem Telefon gestapelt (die Regel darunter). */
.lm-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

/* Suchprofil-Block (GF 30.07. A3): aufklappbar, damit der Dialog nicht wie ein
   Antragsformular wirkt. Zu = eine Zeile, auf = die Angaben, mit denen ein
   Berater ueberhaupt etwas einschaetzen kann. */
.lm-profil-schalter {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 12px;
  background: var(--bg-paper); font-size: 13.5px; font-weight: 500; color: var(--ink);
  cursor: pointer; text-align: left; font-family: inherit;
}
.lm-profil-schalter:hover { border-color: var(--ink-3); }
.lm-profil-schalter em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--ink-3); font-weight: 400; }
.lm-profil { display: grid; gap: 10px; padding: 4px 0 2px; }
.lm-profil label { display: grid; gap: 4px; min-width: 0; position: relative; }
.lm-profil label > span, .lm-lbl {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4);
}
/* Einheit im Feld statt daneben — sonst braucht die Zeile eine dritte Spalte. */
.lm-profil label > i {
  position: absolute; right: 14px; bottom: 13px;
  font-style: normal; font-size: 13px; color: var(--ink-4); pointer-events: none;
}
.lm-profil label > i ~ input, .lm-profil label:has(> i) input { padding-right: 42px; }
.lm-full { grid-column: 1 / -1; }
.lm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lm-chip {
  font-size: 12.5px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  cursor: pointer; font-family: inherit;
}
.lm-chip:hover { border-color: var(--ink-3); }
.lm-chip.on { border-color: var(--coral); background: var(--coral-50); color: var(--ink); font-weight: 500; }
.lm-demo { margin-top: 14px; }
@media (max-width: 560px) {
  .lm-row2 { grid-template-columns: minmax(0, 1fr); }
  .lm-profil-schalter em { display: none; }
}
.lm-success { text-align: center; padding: 28px 8px 12px; }
.lm-success .ok-ring { width: 56px; height: 56px; border-radius: 50%; background: var(--coral-50); color: var(--coral-700); display: grid; place-items: center; margin: 0 auto 14px; }
.lm-success h3 { margin: 0 0 8px; font-size: 20px; font-weight: 500; }
.lm-success p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }

/* Büro-Fit-Check Flow */
.fit-flow { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; }
.fit-progress { display: flex; gap: 6px; margin-bottom: 22px; }
.fit-progress span { height: 4px; flex: 1; border-radius: 999px; background: var(--line); }
.fit-progress span.on { background: var(--coral); }
.fit-q h3 { margin: 0 0 4px; font-size: 21px; font-weight: 500; letter-spacing: -0.015em; }
.fit-q .fq-sub { font-size: 13.5px; color: var(--ink-3); margin: 0 0 18px; }
.fit-opts { display: grid; gap: 8px; }
.fit-opt {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  text-align: left; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: 14px;
  font-size: 14.5px; color: var(--ink); background: #fff;
  transition: border-color .15s, background .15s;
}
.fit-opt:hover { border-color: var(--coral); background: var(--coral-50); }
.fit-opt svg { color: var(--ink-4); flex-shrink: 0; }
.fit-back { margin-top: 14px; font-size: 13px; color: var(--ink-3); background: none; border: none; text-decoration: underline; text-underline-offset: 2px; }
.fit-result-head { text-align: center; margin-bottom: 20px; }
.fit-result-head .fr-badge { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 12px; }
.fit-result-head .fr-badge.ok { background: #E7F5EC; color: #16663D; }
.fit-result-head .fr-badge.mid { background: #FFF3E0; color: #8A5A08; }
.fit-result-head .fr-badge.act { background: var(--coral-50); color: var(--coral-800); }
.fit-result-head h3 { margin: 0 0 8px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.fit-result-head p { margin: 0 auto; max-width: 46ch; font-size: 14.5px; color: var(--ink-2); }
.fit-dims { display: grid; gap: 10px; margin: 22px 0; }
.fit-dim { display: grid; grid-template-columns: 150px 1fr 34px; gap: 12px; align-items: center; font-size: 13px; color: var(--ink-2); }
.fit-dim .bar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.fit-dim .bar i { display: block; height: 100%; border-radius: 999px; background: var(--coral); }
.fit-dim em { font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fit-cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ---------- Detail: Wasserzeichen, Lightbox, Gebäudeübersicht, Karte ---------- */
.wm {
  position: absolute; left: 50%; top: 50%;
  width: 38%; max-width: 260px; height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.55; pointer-events: none;
  filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,0.35));
}
.gal-tile:hover img { transform: scale(1.02); transition: transform .25s ease; }

.lightbox {
  /* GF 17.09.: die klebende Kopfzeile (z-index 850) lag ueber der Lightbox und verdeckte den Schliessen-Knopf */
  position: fixed; inset: 0; z-index: 950;
  background: rgba(8,8,8,0.92);
  display: grid; place-items: center; padding: 48px;
}
.lb-stage { position: relative; max-width: min(1400px, 92vw); max-height: 86vh; }
.lb-stage img { max-width: 100%; max-height: 86vh; display: block; border-radius: 10px; }
/* GF 17.09.: „Wenn sich Grundrisse oeffnen, fehlt ein x zum Schliessen." Es gab eines, auf 12 % Weiss und ohne
   Wort, also unsichtbar fuer Laien. Jetzt eine dunkle Pille mit Rand, Schatten und dem Wort „Schliessen". */
.lb-close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  height: 44px; padding: 0 18px 0 14px; border-radius: 999px;
  background: rgba(20,20,20,0.85); color: #fff;
  border: 1.5px solid rgba(255,255,255,0.75); box-shadow: 0 2px 12px rgba(0,0,0,0.45);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.lb-close:hover { background: #fff; color: var(--ink, #111); }
/* GF 28.07.: „kann nicht durchklicken". Die Pfeile funktionierten, waren aber
   ein weisses Symbol auf 12 % Weiss — auf einem hellen Foto praktisch
   unsichtbar. Jetzt dunkle Scheibe mit Rand und Schatten: lesbar auf jedem
   Motiv, hell wie dunkel. */
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(16,16,16,0.55); color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  display: grid; place-items: center;
  transition: background .15s, transform .15s;
}
.lb-nav:hover { background: rgba(16,16,16,0.85); transform: translateY(-50%) scale(1.06); }
.lb-nav.prev { left: 16px; } .lb-nav.next { right: 16px; }
/* Am Telefon liegen die Pfeile sonst auf halbem Bild — dort zaehlt der
   Klick aufs Bild und das Wischen mehr als die Scheiben. */
@media (max-width: 560px) {
  .lb-nav { width: 44px; height: 44px; }
  .lb-nav.prev { left: 8px; } .lb-nav.next { right: 8px; }
}
.lb-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.75); font-size: 13px; }

.stack-legend { display: flex; gap: 18px; font-size: 13px; color: var(--ink-2); margin: 10px 0 14px; }
.stack-legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.stack-legend .dot.free { background: #1E9E5A; }
.stack-legend .dot.rented { background: var(--line-2); }
.stack { display: grid; gap: 8px; max-width: 620px; }
.stack-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: stretch; }
/* GF 25.08.: Neben der freien Flaeche steht jetzt jede vermietete Flaeche der
   Etage als eigenes Feld — der Kunde soll den Aufbau des Hauses sehen und
   erkennen, wo sich anbauen laesst. Gleich breite Spalten, damit eine Etage
   mit drei Feldern nicht anders gewichtet aussieht als eine mit einem.
   Am Telefon untereinander: drei Felder nebeneinander waeren dort Streifen. */
.stack-cells { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
@media (max-width: 560px) { .stack-cells { grid-auto-flow: row; } }
.stack-floor { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; }
.stack-floor strong { font-size: 13.5px; font-weight: 600; }
.stack-floor span { font-size: 11.5px; color: var(--ink-4); }
.stack-cell {
  border-radius: 12px; min-height: 56px; padding: 8px 16px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px;
  font-size: 13px; width: 100%;
}
.stack-cell.rented { background: var(--g50, #F3F2EE); background: var(--bg-paper); color: var(--ink-4); border: 1px solid var(--line); }
.stack-cell.rented strong { font-size: 13px; font-weight: 500; }
.stack-cell.rented .mx-kind { font-size: 11px; }
.stack-cell.free {
  background: #E7F5EC; border: 1.5px solid #BFE5CC; color: #16663D; cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.stack-cell.free:hover { border-color: #1E9E5A; }
/* 24.09.: je freie Fläche eine Zelle; die gewählte ist markiert wie ihr Preis rechts. */
.stack-cell.free.sel { border-color: #1E9E5A; box-shadow: inset 0 0 0 1px #1E9E5A; }
.stack-cell.free strong { font-size: 15px; font-weight: 600; }
.stack-cell.free em { font-style: normal; font-size: 11px; color: #4a7d5d; }
.stack-total {
  display: grid; grid-template-columns: 110px 1fr; gap: 12px;
  border-top: 1px solid var(--line-2); padding-top: 10px; margin-top: 4px;
  font-size: 14px; align-items: center;
}
.stack-total span { text-align: right; color: var(--ink-3); }
.stack-total strong { font-weight: 600; padding-left: 16px; }

.unit-row { cursor: pointer; }
.unit-row:hover td { background: var(--coral-50); }
.unit-row.sel td { background: #E7F5EC; }
.terr { display: inline-flex; align-items: center; gap: 5px; color: #16663D; font-weight: 500; white-space: nowrap; }

.map-consent { position: relative; width: 100%; height: 100%; }
.map-consent-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.82); backdrop-filter: blur(3px);
  text-align: center; padding: 24px;
}
.map-consent-inner svg { color: var(--coral); }
.map-consent-inner p { margin: 0; font-size: 13.5px; color: var(--ink-2); max-width: 44ch; }

/* Anbindungs-Leiste unter der Karte (GF 28.07.) — Daten aus dem CRM.
   Fünf Spalten am Desktop, ab Tablet zwei, am Telefon eine; die Trennlinien
   laufen deshalb über border-inline-start statt über feste :not(:last-child)-
   Regeln, die beim Umbruch falsch sitzen würden. */
.transit-strip { margin-top: 14px; }
.transit-strip-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bg-paper); border-radius: var(--r-m); overflow: hidden;
}
.transit-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 13px 14px; min-width: 0;
  border-inline-start: 1px solid var(--line);
}
.transit-item:first-child { border-inline-start: 0; }
.transit-item > svg { color: var(--ink-3); flex: none; margin-top: 1px; }
.transit-item-body { min-width: 0; flex: 1; }
/* 01.09.: nowrap+ellipsis schnitt echte Namen ab („Holstenstraße (S-B…"),
   auf Berg 9 um 26px (impeccable-Audit). Umbrechen statt beschneiden: die
   Zeile darf zweizeilig werden, eine Haltestelle muss lesbar sein. */
.transit-item-name {
  font-size: 13.5px; font-weight: 500; line-height: 1.3;
  overflow-wrap: break-word; hyphens: auto;
}
.transit-item-sub {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.35; margin-top: 2px;
  overflow-wrap: break-word; hyphens: auto;
}
.transit-item-min { font-size: 13.5px; font-weight: 500; white-space: nowrap; flex: none; }

/* Anklickbare Zeilen (GF 19.08.): dieselbe Zelle, nur als Knopf. Sie duerfen
   sich nicht vom Rest der Leiste unterscheiden, solange man sie nicht beruehrt
   — sonst zerfaellt die Leiste optisch in zwei Sorten Kacheln. */
.transit-item.transit-klick {
  appearance: none; background: none; font: inherit; color: inherit;
  text-align: start; cursor: pointer; border-block: 0; border-inline-end: 0;
  transition: background .15s ease;
}
/* GF 19.08.: "Ich kann nach wie vor nicht auf die Haltestellen klicken."
   Der Knopf war da, aber er sah aus wie Text — ohne Zeiger, ohne Marke, und
   auf manchen Objekten war nur eine von fuenf Zeilen anklickbar. Die
   anklickbaren Namen tragen jetzt eine gepunktete Linie; das ist die
   sparsamste Andeutung, die man auch ohne Maus (Telefon) sieht. */
.transit-item-name.zeigbar {
  text-decoration: underline dotted var(--ink-4);
  text-underline-offset: 3px;
}
.transit-item.transit-klick:hover { background: #fff; }
.transit-item.transit-klick:hover .transit-item-name.zeigbar { text-decoration-color: var(--coral); }
.transit-item.transit-klick:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }
.transit-item.transit-klick.aktiv { background: #fff; box-shadow: inset 0 -2px 0 var(--coral); }
.transit-item.transit-klick.aktiv .transit-item-name { color: var(--coral); }
.transit-hinweis { margin-top: 6px; }
.transit-strip-note { margin-top: 8px; }

@media (max-width: 900px) {
  .transit-strip-row { grid-template-columns: repeat(2, 1fr); }
  /* Beim Umbruch trennt die Zeile oben, nicht mehr nur seitlich */
  .transit-item { border-block-start: 1px solid var(--line); }
  .transit-item:nth-child(-n+2) { border-block-start: 0; }
  .transit-item:nth-child(odd) { border-inline-start: 0; }
}
@media (max-width: 560px) {
  .transit-strip-row { grid-template-columns: 1fr; }
  .transit-item { border-inline-start: 0; }
  .transit-item:first-child { border-block-start: 0; }
}

/* Gebäudeübersicht-Matrix (Spalten = Gebäudeteile) */
.mx-wrap { overflow-x: auto; }
/* 02.09. (Critique, GF-Freigabe): bei 14 Gebaeudeteilen (Bahrenpark)
   quetschte 1fr die Spalten auf ~45px, Woerter brachen einzeln um und
   vermietet-Labels liefen ineinander. Spalten fallen nie unter Lesebreite;
   was nicht passt, wischt im vorhandenen .mx-wrap horizontal, wie mobil. */
.mx { display: grid; gap: 8px; min-width: 560px; align-items: stretch;
      grid-template-columns: 96px repeat(var(--mx-parts, 1), minmax(156px, 1fr)); }

/* MOBIL (GF 28.07.): Die Matrix ist zweidimensional (Gebaeudeteile x Etagen) —
   sie laesst sich nicht sinnvoll in eine Spalte falten, ohne den Vergleich zu
   verlieren, um den es hier geht. Sie bleibt also wischbar, wird aber bedienbar:
   feste, LESBARE Spaltenbreite statt mittendrin abgeschnittener Zellen,
   Einrasten je Spalte, und die Etagenspalte bleibt beim Wischen stehen —
   sonst weiss man nach zwei Fingerbewegungen nicht mehr, welche Etage man
   gerade sieht. */
@media (max-width: 700px) {
  /* Kein Innenabstand am Scroller: sticky klebt sonst an der Polsterkante,
     und Zellen wandern sichtbar durch den Streifen LINKS der Etagenspalte. */
  .mx-wrap { scroll-snap-type: x mandatory; }
  .mx {
    min-width: 0;
    grid-template-columns: 68px repeat(var(--mx-parts, 1), 208px);
    gap: 6px;
  }
  /* Etage in JEDER Zelle statt fester Spalte (GF 28.07., vierte und letzte
     Fassung). Drei Anlaeufe mit `position: sticky` sind gescheitert: in einem
     CSS-Grid ist die Zelle ihr eigener Bezugsrahmen, die Spalte haelt nur
     solange sie selbst im Bild ist und rutscht danach weg — und wo sie hielt,
     schnitt sie die darunter scrollenden Zellen an.
     Jetzt traegt jede Zelle ihre Etage als kleine Marke oben links. Kostet
     etwas Wiederholung, ist dafuer unkaputtbar: egal wie weit man wischt, man
     sieht immer, welche Etage man betrachtet. */
  .mx-cell { position: relative; padding-top: 20px; }
  .mx-cell::before {
    content: attr(data-etage);
    position: absolute; top: 5px; left: 8px;
    font-size: 10px; font-weight: 600; letter-spacing: .04em;
    color: var(--ink-4);
  }
  .mx-cell.free::before { color: #1E9E5A; }
  /* Die linke Etagenspalte ist damit doppelt — am Telefon weg, das schafft
     Platz fuer die Zellen selbst. */
  .mx { grid-template-columns: repeat(var(--mx-parts, 1), 208px); }
  .mx-floor:not(.total), .mx > div:first-child { display: none; }
  /* „Frei gesamt" bleibt — als eigene Zeile ueber den Summen, sonst stuenden
     dort drei Zahlen ohne Beschriftung. */
  .mx-floor.total {
    grid-column: 1 / -1; display: block;
    margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line);
    text-align: left;
  }
  .mx-head, .mx-cell, .mx-total { scroll-snap-align: start; }
  .mx-cell { min-height: 76px; }
}
.mx-head { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); text-align: center; align-self: end; padding-bottom: 2px; }
.mx-floor { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; }
.mx-floor strong { font-size: 13px; font-weight: 600; }
.mx-floor span { font-size: 11px; color: var(--ink-4); }
/* GF 25.08. (2. Anlauf): „Vermietete Flaechen NEBEN den freien abbilden und
   nicht IN den freien Flaechen vermietet darstellen." Vorbild ist der
   Flaechenplan auf workinup.de.
   Daraus folgt der Aufbau: Die Zelle ist nur noch der Platz einer Etage in
   einem Gebaeudeteil und traegt selbst keine Farbe mehr. Was darin liegt, sind
   die einzelnen Flaechen — nebeneinander, jede mit eigenem Grund und eigener
   Kante. Zwei vermietete Flaechen in einer Zelle stehen damit auch
   nebeneinander und nicht mehr uebereinander. */
.mx-cell { min-height: 58px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; font-size: 12px; text-align: center; }
.mx-cell.none { border-radius: 12px; border: 1px dashed var(--line); background: transparent; display: flex; align-items: center; justify-content: center; }
/* Ausserhalb der Etagenspanne eines Bauteils steht kein Gebaeude — die Zelle
   ist leer (kein <span>) und traegt dann auch keinen Rahmen. Der „Wald"
   gestrichelter Leerkaestchen (Audit 31.08.) war Rauschen; das ehrliche
   „keine Angabe" INNERHALB der Spanne (GF 31.07.) behaelt seinen Rahmen. */
.mx-cell.none:empty { border-color: transparent; }
/* GF 31.07.: Leer heisst „wir wissen es nicht“, nicht „hier ist nichts“.
   Beschriftet, damit die Luecke nicht wie ein Seitenfehler aussieht — aber
   deutlich leiser als eine freie Flaeche, sonst konkurriert sie mit dem
   Angebot, auf das die Zelle daneben zeigt. */
.mx-cell.none span { font-size: 11px; color: var(--ink-4); opacity: .7; }
/* Die einzelne Flaeche traegt die Farbe: gruen = frei, grau = belegt.
   Klickziel ist die Flaeche, nicht die Zelle (04.08.). */
.mx-unit {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px;
  border-radius: 10px; padding: 8px 8px; min-width: 0;
}
/* 24.09.: Preis und Nebenkosten brechen nur als Ganzes um, nie „3,45" und „€" getrennt. */
.mx-np { white-space: nowrap; }
.mx-unit.free { background: #E7F5EC; border: 1.5px solid #BFE5CC; color: #16663D; }
.mx-unit.rented { background: var(--bg-paper); border: 1px solid var(--line); color: var(--ink-4); font-weight: 500; }
.mx-unit.rented strong { font-weight: 500; font-size: 12.5px; }
.mx-unit.click { cursor: pointer; transition: border-color .15s; }
.mx-unit.free.click:hover { border-color: #1E9E5A; }
.mx-cell.free strong { font-size: 14.5px; font-weight: 600; }
.mx-cell.free em { font-style: normal; font-size: 11px; color: #4a7d5d; }
.mx-cell.free a { font-size: 11px; text-decoration: underline; color: #16663D; }
.mx-floor.total { border-top: 1px solid var(--line-2); padding-top: 8px; margin-top: 2px; }
.mx-total { border-top: 1px solid var(--line-2); padding-top: 8px; margin-top: 2px; text-align: center; font-weight: 600; font-size: 13.5px; }

/* Berater-Karte (Apple-like) + Nachbarschafts-Slider */
.adv-big { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.adv-photo {
  position: relative; width: 112px; height: 112px; border-radius: 50%;
  background: var(--coral-50); border: 1px solid var(--coral-100);
  display: grid; place-items: center; margin-bottom: 12px;
}
.adv-initials { font-size: 30px; font-weight: 500; color: var(--coral-700); letter-spacing: -0.02em; }
.adv-photo-ed { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 9.5px; white-space: nowrap; }
.adv-name { font-size: 18px; font-weight: 600; letter-spacing: -0.014em; margin-top: 6px; }
.adv-role { font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.adv-area { font-size: 12px; color: var(--ink-4); margin-top: 3px; max-width: 30ch; line-height: 1.4; }
.adv-phone { display: inline-block; margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.adv-phone:hover { color: var(--coral-600); }
/* 30.07.: zweiter Weg neben dem Anruf — vorher gab es auf der Objektseite nur
   eine Telefonnummer (und die war fest verdrahtet, s. detail.jsx). */
.adv-mail { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--ink-3); text-decoration: none; word-break: break-word; }
.adv-mail:hover { color: var(--coral-600); }
.adv-actions { display: flex; gap: 8px; width: 100%; margin-top: 12px; }
.adv-note { font-size: 11.5px; color: var(--ink-4); margin-top: 10px; }

.nb-scroll {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x proximity; padding: 4px 4px 12px;
  -webkit-overflow-scrolling: touch;
}
.nb-card { min-width: 300px; max-width: 300px; flex-shrink: 0; scroll-snap-align: start; }
/* 300px-Karte: „ab 21,50 € /Monat" brach mitten im Preis um (Audit 31.08.).
   Der Preis bleibt eine Zeile; wird es eng, rutscht er als Ganzes unter
   den Titel statt zu zerreissen. */
.nb-card .top-row { flex-wrap: wrap; }
.nb-card .price { white-space: nowrap; flex: none; }

/* Mobile-Sicherheit 375px */
@media (max-width: 1024px) {
  /* 30.07.: `.filter-sidebar { order: 2 }` war die Ursache fuer „Filter-Knopf
     tut nichts" am Telefon — das Panel ging auf, stand aber UNTER der
     Trefferliste. Es ist jetzt ein Sheet (styles-search.css, MAIN GRID);
     `order` und die Spaltenvorgabe gehoeren damit hier raus. */
  .results-col { order: 1; }
}
@media (max-width: 700px) {
  .fit-dim { grid-template-columns: 110px 1fr 30px; }
  .cmp-modal-inner { padding: 16px; }
  /* 02.09. (Critique P0): `repeat(2, …) !important` galt fuer JEDE Objektzahl;
     ab drei Objekten wickelte das Raster um, Kopfzellen rutschten in die
     Datenzeilen. Jetzt so viele Spalten wie Objekte, das Raster scrollt quer,
     der Hinweis darueber sagt es. */
  .cmp-grid { grid-template-columns: 120px repeat(var(--cmp-n, 2), minmax(150px, 1fr)); overflow-x: auto; }
  .cmp-scrollhint { display: block; }
  .cmp-modal-inner footer { padding: 14px 16px; justify-content: stretch; }
  .cmp-modal-inner footer .btn { flex: 1 1 100%; justify-content: center; }
  .sl-grid { display: grid; gap: 10px; }
  .sl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  /* 🛑 29.07.: Ohne feste Zeilenhoehe richten sich die Zeilen nach der
     NATUERLICHEN Hoehe der Bilder. Ein Bild, das noch nicht geladen ist
     (Kachel 2-5 haengen an loading="lazy") oder gar nicht laedt, hat keine —
     die Zeile faellt auf einen Streifen zusammen. Am Telefon sah man deshalb
     eine gequetschte erste Reihe, bis nachgeladen war; bei kaputten URLs
     blieb sie so stehen. 1fr macht alle Zeilen gleich hoch, unabhaengig
     davon, ob und wann ein Bild ankommt. */
  /* 30.07.: Spaltenzahl und Zeilenhoehe kommen jetzt aus dem Block „AUFMACHER-
     BILD AM TELEFON" weiter unten — er greift bis 720 px und damit auch hier.
     Der Grund von oben (feste Hoehe statt natuerlicher Bildhoehe) gilt dort
     weiter: jede Kachel hat ein eigenes aspect-ratio, haengt also nicht am
     Ladezustand des Bildes. */
}

/* ============================================================
   ETAPPE 3 — Gesuch-Wizard, Vollmarkt-Claim, Termin-Buchen, Medien-Slots
   ============================================================ */
.gw-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.gw-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; }
.gw-steps { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.gw-step { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-soft); font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.gw-step .gw-step-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--line); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.gw-step.on { border-color: var(--ink); color: var(--ink); background: #fff; }
.gw-step.on .gw-step-n { background: var(--ink); color: #fff; }
.gw-step.done { color: var(--ink-2); cursor: pointer; }
.gw-step.done .gw-step-n { background: #EDF7F0; color: var(--green); }
.gw-step:disabled { cursor: default; }
.gw-body { padding: 26px 0 6px; min-height: 260px; }
.gw-body h2 { margin: 0 0 6px; font-size: 26px; font-weight: 400; letter-spacing: -0.02em; }
.gw-sub { margin: 0 0 20px; font-size: 14px; color: var(--ink-3); }
.gw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gw-field { display: grid; gap: 6px; margin-top: 12px; }
.gw-field span { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--ink-3); }
.gw-field input, .gw-field select, .gw-field textarea { border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 12px 14px; font: inherit; font-size: 15px; background: #fff; width: 100%; }
.gw-field input:focus, .gw-field select:focus, .gw-field textarea:focus { outline: none; border-color: var(--ink); }
.gw-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.gw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.gw-chip:hover { border-color: var(--ink); }
.gw-chip.on { border-color: var(--coral); background: var(--coral-50); color: var(--coral-800); font-weight: 500; }
.gw-hint { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; font-size: 13px; color: var(--ink-2); background: var(--bg-paper); border-radius: var(--r-m); padding: 10px 14px; }
.gw-notice { display: flex; gap: 10px; margin-top: 14px; padding: 12px 16px; background: #FFF7DB; border: 1px solid #F0DA8C; border-radius: var(--r-m); }
.gw-notice p { margin: 0; font-size: 13px; line-height: 1.5; color: #5A4A10; }
.gw-notice svg { flex-shrink: 0; margin-top: 2px; color: #8A5A08; }
.gw-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gw-opt { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: #fff; font-size: 14.5px; font-weight: 450; color: var(--ink); cursor: pointer; text-align: left; }
.gw-opt:hover { border-color: var(--ink); }
.gw-opt.on { border-color: var(--coral); background: var(--coral-50); }
.gw-opt-wide { width: 100%; }
.gw-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.gw-aside { display: grid; gap: 14px; position: sticky; top: 96px; }
.gw-aside-card { background: var(--bg-paper); border-radius: var(--r-l); padding: 20px 22px; }
.gw-aside-card.dark { background: var(--ink); color: #fff; display: grid; gap: 8px; justify-items: start; }
.gw-aside-card.dark svg { color: var(--coral); }
.gw-aside-card.dark strong { font-size: 16px; font-weight: 500; }
.gw-aside-card.dark p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.72); }
.gw-summary { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.gw-summary li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-4); }
.gw-summary li.set { color: var(--ink); font-weight: 450; }
.gw-summary li svg { flex-shrink: 0; color: var(--ink-4); }
.gw-summary li.set svg { color: var(--coral); }
@media (max-width: 960px) { .gw-grid { grid-template-columns: 1fr; } .gw-aside { position: static; } .gw-options, .gw-row2 { grid-template-columns: 1fr; } }

/* Vollmarkt-Claim (Startseite)
   GF 19.08.: Der schwarze Grund war "zu doll" — derselbe Papierton wie im
   Off-Market-Band ("Portale zeigen Euch, was uebrig ist."). Damit tragen die
   beiden Abschnitte, die dasselbe Argument machen, auch denselben Grund;
   schwarz bleibt dem Seitenfuss vorbehalten. Die Trennlinien der Kennzahlen
   entstehen weiter aus der 1px-Gitterluecke, jetzt in der Linienfarbe. */
.market-claim { padding: 84px 0; background: var(--bg-paper); color: var(--ink); }
.market-claim .mc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.market-claim .eyebrow { display: block; }   /* GF 17.09.: als Block wie im .section-head, sonst zaehlt die Zeilenhoehe des Spans mit */
.market-claim h2 { color: var(--ink); margin: 14px 0 20px; }   /* GF 17.09.: gleiche Abstaende wie .section-head */
.market-claim .body-l { color: var(--ink-2); margin: 0; }
.mc-stats { display: grid; gap: 1px; background: var(--line-2); border-radius: var(--r-l); overflow: hidden; }
.mc-stat { background: var(--bg-paper); padding: 18px 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.mc-stat strong { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; }
.mc-stat span { font-size: 13px; color: var(--ink-3); text-align: right; }
.mc-cta { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .market-claim .mc-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Kontaktangaben (Beratungsseite), GF 23.08.: alle drei anklickbar.
   Der Link traegt die Farbe des Textes, damit die Zeile ruhig bleibt, und
   zeigt sich beim Ueberfahren und beim Tastatur-Fokus. Ohne den Fokusrahmen
   waere die Zeile fuer Tastaturbedienung unsichtbar. */
.kontakt-liste { margin-top: 48px; display: grid; gap: 16px; }
.kontakt-zeile { display: flex; gap: 14px; align-items: center; }
.kontakt-link { font-weight: 500; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.kontakt-link:hover { border-bottom-color: currentColor; }
.kontakt-link:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 2px; }

/* Termin-Buchen (Kontakt) */
.cal-card { margin-top: 40px; border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px 24px; background: #fff; }
.cal-card > strong { font-size: 16px; font-weight: 500; }
.cal-card > p { margin: 4px 0 14px; font-size: 13.5px; color: var(--ink-3); }
.cal-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-slot { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; font-weight: 500; cursor: pointer; }
.cal-slot:hover { border-color: var(--ink); }
.cal-slot.on { border-color: var(--coral); background: var(--coral-50); color: var(--coral-800); }
.cal-ok { margin: 12px 0 0; font-size: 13px; color: var(--green); display: flex; align-items: center; gap: 6px; }

/* Medien-Slots (Objektseite) */
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.ms-tile { border: 1.5px dashed var(--line-2); border-radius: var(--r-l); padding: 26px; display: grid; gap: 8px; justify-items: start; background: var(--bg-soft); }
.ms-tile svg { color: var(--coral); }
.ms-tile strong { font-size: 15.5px; font-weight: 500; }
.ms-tile p { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 720px) { .ms-grid { grid-template-columns: 1fr; } }

/* Berater-Karte + KI-Echo (Etappe 3 / v2-Adoption) */
.wu-advisor { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 18px 10px 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; width: fit-content; }
.wu-advisor .acd-photo { position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #FFB199, var(--coral)); flex-shrink: 0; }
.wu-advisor .acd-photo i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; color: #fff; font-weight: 600; font-size: 14px; }
.wu-advisor .acd-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wu-advisor .acd-kicker { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.wu-advisor strong { display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; margin: 1px 0; }
.wu-advisor a { font-size: 13px; color: var(--coral-700); font-weight: 500; }
.gw-aside .wu-advisor { width: 100%; border-radius: var(--r-l); margin-top: 0; }
.ki-echo { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 10px; padding: 9px 13px; background: var(--bg-paper); border-radius: var(--r-m); }
.ki-echo span { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); white-space: nowrap; }
.ki-echo p { margin: 0; font-size: 13px; color: var(--ink-2); }

/* Klassische Schnellsuche im Hero (cs2) */
.cs2-grid { display: grid; grid-template-columns: 1.05fr 1.25fr 1.15fr; gap: 1px; background: var(--line); border-radius: var(--r-l); border: 1px solid var(--line); }
/* overflow:hidden schnitt das absolut positionierte Stadtteil-Dropdown ab
   (GF 24.07.: "kann keine Stadtteile auswaehlen") — Rundung stattdessen pro Zelle */
.cs2-grid > .cs2-field:first-child { border-radius: calc(var(--r-l) - 1px) 0 0 calc(var(--r-l) - 1px); }
.cs2-grid > .cs2-field:last-child { border-radius: 0 calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0; }
.cs2-field { background: #fff; padding: 12px 16px 14px; min-width: 0; }
.cs2-field > label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; white-space: nowrap; }
.cs2-alt { font-size: 10px; letter-spacing: .02em; text-transform: none; font-weight: 500; color: var(--coral-700); background: none; border: none; padding: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.cs2-alt:hover { text-decoration: underline; }
.cs2-field input, .cs2-field select { width: 100%; border: none; outline: none; font: inherit; font-size: 15px; color: var(--ink); background: transparent; padding: 2px 0; min-width: 0; }
.cs2-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs2-budget { grid-template-columns: 1fr auto; }
.cs2-budget select { font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.cs2-dbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: none; border: none; padding: 2px 0; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.cs2-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 340px; max-height: 380px; overflow-y: auto; overflow-x: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 14px 40px rgba(10,10,10,.16); padding: 10px; display: grid; grid-template-columns: 1fr; gap: 2px; }
/* GF 24.07.: Dropdown lag hinter der USP-Zeile — die fade-up-Transforms
   erzeugen Stacking-Kontexte, die spaetere Sektion gewann. Suchkarte hoch. */
.conv-search { position: relative; z-index: 40; }
/* Filterfeld im Stadtteil-Popover (Audit 31.08.): 26 Checkboxen brauchen
   eine Suche. Klebt oben, damit es beim Scrollen der Liste stehen bleibt. */
.cs2-filter { position: sticky; top: -10px; z-index: 2; margin: -10px -10px 6px; width: calc(100% + 20px); padding: 10px 12px; border: none; border-bottom: 1px solid var(--line); border-radius: var(--r-m) var(--r-m) 0 0; background: #fff; font: inherit; font-size: 13px; }
.cs2-filter:focus { outline: none; border-bottom-color: var(--coral); }
.cs2-leer { padding: 10px 9px; font-size: 13px; color: var(--ink-3); margin: 0; }
.cs2-check { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.cs2-check:hover { background: var(--bg-paper); }
.cs2-check.on { background: var(--coral-50); color: var(--coral-800); font-weight: 500; }
.cs2-check input { width: 14px; height: 14px; accent-color: var(--coral); flex-shrink: 0; }
.cs2-check span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs2-check em { font-style: normal; font-size: 11px; color: var(--ink-4); }
/* GF 24.07.: Uebernehmen unten fixiert — kein Scrollen bis ans Ende noetig */
.cs2-done-bar { grid-column: 1 / -1; position: sticky; bottom: -10px; margin: 8px -10px -10px; padding: 10px; background: #fff; border-top: 1px solid var(--line); z-index: 2; }
.cs2-done { width: 100%; justify-content: center; }
.cs2-hint { display: flex; align-items: baseline; gap: 7px; margin: 10px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.cs2-hint svg { flex-shrink: 0; color: var(--coral); transform: translateY(1px); }
@media (max-width: 720px) { .cs2-grid { grid-template-columns: 1fr; } .cs2-pop { width: 100%; } .cs2-grid > .cs2-field:first-child { border-radius: calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0 0; } .cs2-grid > .cs2-field:last-child { border-radius: 0 0 calc(var(--r-l) - 1px) calc(var(--r-l) - 1px); } }

/* Gesuch: eigene Stadtteile ergänzen */
.gw-addrow { display: flex; gap: 8px; margin-top: 12px; max-width: 460px; }
.gw-addrow input { flex: 1; border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 10px 13px; font: inherit; font-size: 14px; background: #fff; min-width: 0; }
.gw-addrow input:focus { outline: none; border-color: var(--ink); }
/* Suche: Vergleich leeren */
.sl-clear { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: rgba(255,255,255,.85); font-size: 11.5px; font-weight: 500; cursor: pointer; }
.sl-clear:hover { border-color: #fff; color: #fff; }
/* Case-Detail: Vorher/Nachher + Galerie + Story-Karten */
.case-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.case-ba-tile { margin: 0; position: relative; aspect-ratio: 4/3; border-radius: var(--r-l); overflow: hidden; background: var(--bg-paper); }
.case-ba-tile > figure { height: 100%; }
.case-ba-label { position: absolute; z-index: 5; top: 14px; left: 14px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); pointer-events: none; }
.case-ba-label.coral { background: var(--coral); border-color: var(--coral); color: #fff; }
.case-gal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.case-gal-slot { aspect-ratio: 4/3; border-radius: var(--r-l); overflow: hidden; background: var(--bg-paper); }
.case-detail-story { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.case-detail-block { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; margin: 0; }
.case-detail-quote { background: var(--bg-paper); border-left: none; border-radius: var(--r-xl); padding: 30px 34px; margin: 0 0 22px; }
.case-detail-quote p { border-left: none; padding-left: 0; font-style: normal; font-size: clamp(20px, 2vw, 26px); font-weight: 300; line-height: 1.35; letter-spacing: -0.015em; }
.case-detail-quote svg { color: var(--coral); }
@media (max-width: 860px) { .case-ba, .case-detail-story { grid-template-columns: 1fr; } .case-gal-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .case-gal-row { grid-template-columns: 1fr; } }

/* 01.09.: Off-Market-Band mit dem Anspruch-Block zusammengelegt
   (Critique, GF-Freigabe); Stile des Bands samt btn-xl entfernt. */

/* USP-Leiste: Die Spalten sind exakt gleich breit (5 x 1fr, 20px gap) — was
   ungleichmaessig WIRKT, ist der Flattersatz: kurze Punkte enden frueh, dadurch
   liest sich die Luecke zum naechsten Icon groesser (GF-Befund 27.07., Abstand
   4->5). Eine feine Trennlinie gibt dem Auge einen gleichmaessigen Rhythmus,
   unabhaengig davon, wo die Textzeile endet. */
/* 5 Spalten: Linie vor jedem Punkt ausser dem ersten. */
.hero-usps .hero-usp + .hero-usp { border-left: 1px solid var(--line); padding-left: 20px; }
/* 3 Spalten: die Zeilenanfaenge (1., 4.) bekommen keine Linie. */
@media (max-width: 1100px) {
  .hero-usps .hero-usp:nth-child(3n+1) { border-left: none; padding-left: 0; }
}
/* 2 Spalten: Zeilenanfaenge sind 1., 3., 5. */
/* Gleiche Spezifitaet wie die 3n+1-Regel oben noetig — sonst behaelt Punkt 4
   auf schmalen Breiten faelschlich „keine Linie". */
@media (max-width: 700px) {
  .hero-usps .hero-usp:nth-child(even) { border-left: 1px solid var(--line); padding-left: 14px; }
  .hero-usps .hero-usp:nth-child(odd)  { border-left: none; padding-left: 0; }
}
/* 04.09. (Layout-Durchgang Startseite): Auf 375 px sind zwei Spalten je
   150 px breit. Seit die USP-Zeilen ganze Saetze tragen („Off-Market-Zugang:
   Wir kennen Bueroflaechen, die nirgends inseriert sind") brechen sie dort
   sechsmal um, und der fuenfte Punkt steht allein in der letzten Zeile.
   Unter 440 px deshalb eine Spalte mit Trennlinie OBEN statt links. */
@media (max-width: 440px) {
  .hero-usps { grid-template-columns: 1fr; gap: 0; padding-top: 4px; }
  .hero-usps .hero-usp,
  .hero-usps .hero-usp:nth-child(even),
  .hero-usps .hero-usp:nth-child(odd) { border-left: none; padding-left: 0; padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--line); }
  .hero-usps .hero-usp:first-child { border-top: none; padding-top: 4px; }
}

/* ── Immobilien-Detailseite, Block B (GF 27.07.) ─────────────────────────── */

/* Marktvergleich: ersetzt den Platzhalter "Marktvergleich fuer X folgt".
   Balken = Spanne des Teilmarkts, Punkt = Einstiegsmiete dieses Hauses. */
.mkt-bar {
  position: relative; height: 10px; border-radius: 999px; max-width: 620px;
  background: linear-gradient(90deg, var(--coral-50), var(--coral-100));
  border: 1px solid var(--line);
}
.mkt-bar .mkt-avg {
  position: absolute; top: -4px; width: 1px; height: 18px;
  background: var(--ink-3); transform: translateX(-50%);
}
/* Spanne der Lage als Flaeche (GF 28.07.) — eine Miete ist ein Korridor,
   kein Zielwert; nur ein Punkt haette eine Genauigkeit vorgetaeuscht,
   die es im Markt nicht gibt. */
.mkt-bar .mkt-band {
  position: absolute; top: 0; bottom: 0;
  /* bewusst ein fester Wert statt --coral-200: der Token ist heller als der
     Balken-Verlauf darunter und die Spanne waere nicht zu erkennen */
  background: rgba(255, 114, 95, .38);
  border-radius: 999px;
}
.mkt-bar .mkt-dot {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  background: var(--coral); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transform: translate(-50%, -50%);
}
.mkt-scale {
  display: flex; justify-content: space-between; max-width: 620px;
  margin-top: 8px; font-size: 12px; color: var(--ink-3);
}

/* Innenansichten (GF 28.07.) — Anzahl als dezente Beigabe zum Link, nicht
   als alleinstehende Zahl wie vorher. */
.shot-n {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  border-radius: 999px; background: var(--bg-paper);
  font-size: 11px; color: var(--ink-3); font-weight: 500;
  vertical-align: 1px;
}
.fitout-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; max-width: 78ch; line-height: 1.55;
}
.fitout-note > svg { flex: none; margin-top: 2px; color: var(--coral); }
/* Am Telefon stehen die Karten dicht beieinander — der Hinweis braucht dort
   mehr Luft nach oben, sonst klebt er an der letzten Karte. */
@media (max-width: 700px) {
  .fitout-note { margin-top: 18px; }
  .detail-layout h3.display-4 { margin-top: 40px !important; font-size: 26px !important; }
}
/* Hinweis in der Bildansicht. Absolut gesetzt wie .lb-count — die Lightbox ist
   ein zentrierendes Grid, ein zweites Element im Fluss haette das Bild aus der
   Mitte gedrueckt und den Text 260 px darunter abgesetzt. */
.lightbox-note .lb-note {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  max-width: min(62ch, 90vw); margin: 0; padding: 0 16px;
  text-align: center; font-size: 12.5px; line-height: 1.6;
  color: rgba(255,255,255,.72);
}
.lightbox-note .lb-count { bottom: 96px; }
/* Platz fuer den Hinweis schaffen, sonst deckt er hohe Bilder ab */
.lightbox-note .lb-stage,
.lightbox-note .lb-stage img { max-height: 68vh; }
@media (max-width: 700px) {
  .lightbox-note .lb-stage, .lightbox-note .lb-stage img { max-height: 52vh; }
  .lightbox-note .lb-count { bottom: 118px; }
}
/* Die Merklisten-Leiste schimmerte unter dem Overlay durch und lag genau dort,
   wo Zaehler und Hinweis stehen. */
main:has(.lightbox) ~ .merk-bar { display: none; }

/* MERKLISTE (GF 28.07.) — Zaehler im Header + Leiste ab 2 Objekten.
   Ersetzt .merk-hint (Chip auf der Detailseite) und .shortlist-bar (Leiste
   nur in der Suche); beide sind mit dem Zusammenlegen entfallen. */
.merk-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.merk-btn:hover { background: var(--bg-paper); color: var(--ink); }
.merk-count {
  position: absolute; top: 1px; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--coral); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1;
}

.merk-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  /* iPhone-Homeindicator nicht ueberdecken */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.merk-bar-in {
  display: flex; align-items: center; justify-content: space-between;
  /* padding-BLOCK: '11px 0' setzte die seitlichen 32px von .container-wide
     auf null, der Zaehler klebte am Bildschirmrand statt im Raster der Seite.
     Gemessen 20.08.: Logo bei 32 px, Zaehler bei 0. */
  gap: 14px; padding-block: 11px; flex-wrap: wrap;
}
.merk-bar-count {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.merk-bar-count > svg { color: var(--coral); }
.merk-bar-clear {
  font-size: 12.5px; color: var(--ink-3); text-decoration: underline;
  text-underline-offset: 2px; margin-left: 2px;
}
.merk-bar-clear:hover { color: var(--coral); }
.merk-bar-actions { display: flex; align-items: center; gap: 8px; }
/* Berater-Blase sitzt unten links und verdeckte sonst den Zaehler. */
.merk-bar ~ .adv-sticky { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
/* 02.09.: Rueckgaengig-Leiste nach „Liste leeren". */
.merk-undo { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; padding: 10px 16px; border-radius: 999px; background: var(--bg-paper); font-size: 14px; }
.merk-undo .inline-link { font: inherit; font-weight: 500; }

/* ZUSTIMMUNG ZU OPTIONALEN DIENSTEN (GF 20.08.) ─────────────────────────
   Zentral ueber der Seite statt Leiste am Rand (GF 20.08.): eine Leiste
   unten laesst sich uebersehen und bleibt offen stehen, dann ist die
   Entscheidung nie getroffen. Beim Widerruf ueber den Fuss sperrt der
   Dialog nicht, dort ist bereits entschieden. */
.cc-huelle {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cc-huelle.sperrt { background: rgba(23,23,23,.55); backdrop-filter: blur(3px); }
.cc-kasten {
  position: relative; width: 100%; max-width: 640px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: #fff; border-radius: var(--r-l);
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
}
.cc-kasten.ist-offen { max-width: 760px; }
.cc-in { padding: 28px 30px 26px; }
.cc-zu {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-3);
}
.cc-zu:hover { background: var(--bg-paper); color: var(--ink); }

.cc-kopf { display: grid; gap: 18px; }
.cc-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.cc-text strong { display: block; font-size: 19px; line-height: 1.3; color: var(--ink); font-weight: 600; margin-bottom: 8px; letter-spacing: -.01em; }
.cc-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.cc-text a:hover { color: var(--coral-600); }

/* Zustimmen zuerst und gefuellt, Ablehnen daneben mit Kontur. BEIDE gleich
   gross und auf derselben Ebene: ein Ablehnen als blasser Link waere der
   klassische Abmahngrund. Die Breite kommt aus dem Grid, nicht aus dem
   Inhalt, sonst waere der laengere Text automatisch der groessere Knopf. */
.cc-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.cc-knoepfe .btn { width: 100%; justify-content: center; }
.cc-mehr {
  grid-column: 1 / -1; justify-self: center;
  font-size: 13px; color: var(--ink-3); text-decoration: underline;
  text-underline-offset: 3px; padding: 4px 8px;
}
.cc-mehr:hover { color: var(--coral-600); }

.cc-detail { margin-top: 20px; border-top: 1px solid var(--line); }
.cc-zeile {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.cc-zeile > div { display: grid; gap: 3px; }
.cc-zeile strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.cc-zeile span { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.cc-zeile input[type=checkbox] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--coral); cursor: pointer; flex: none; }
label.cc-zeile { cursor: pointer; }
.cc-zeile > svg { color: var(--ink-4); flex: none; margin-top: 3px; }
.cc-detail-fuss { display: grid; gap: 12px; padding-top: 16px; }
.cc-widerruf { font-size: 12px; line-height: 1.5; color: var(--ink-4); }

/* Widerruf im Fuss: sieht aus wie die Links daneben, ist aber ein Knopf. */
.fuss-link { color: inherit; font: inherit; text-decoration: none; padding: 0; background: none; cursor: pointer; }
.fuss-link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .cc-huelle { padding: 0; align-items: flex-end; }
  .cc-kasten, .cc-kasten.ist-offen {
    max-width: 100%; max-height: 92vh;
    border-radius: var(--r-l) var(--r-l) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cc-in { padding: 24px 20px 22px; }
  /* Untereinander: nebeneinander waeren beide Knoepfe zu schmal fuer ihren
     Text. Zustimmen bleibt oben, die Reihenfolge traegt die Gewichtung. */
  .cc-knoepfe { grid-template-columns: 1fr; }
}

/* Aktionsleiste der Merkliste-Seite (GF 28.07.). Ersetzt .merk-filter-note —
   die Merkliste ist keine gefilterte Suche mehr, sondern eine eigene Seite. */
.merk-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; padding-bottom: 4px;
}
/* MERKLISTE — kompakte Zeilen (GF 28.07.)
   Vorher die grossen Suchergebnis-Karten: eine Karte fuellte den halben
   Bildschirm, drei gemerkte Objekte waren nicht mehr zu ueberblicken. Auf der
   Merkliste will man VERGLEICHEN, nicht entdecken — also Bild klein, und die
   vier Zahlen nebeneinander, in denen sich die Objekte unterscheiden. */
.merk-liste { display: grid; gap: 10px; margin-top: 24px; }
.merk-zeile {
  display: grid; grid-template-columns: auto 132px minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
  gap: 18px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 12px 16px 12px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.merk-zeile:hover { border-color: var(--line-2); box-shadow: var(--shadow-lift); }
.mz-bild { display: block; width: 132px; height: 88px; border-radius: var(--r-m); overflow: hidden; background: var(--bg-paper); }
.mz-bild > * { width: 100%; height: 100%; object-fit: cover; }
.mz-text { min-width: 0; display: grid; gap: 3px; }
.mz-titel { font-size: 16px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.mz-titel:hover { color: var(--coral-600); }
.mz-ort { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-3); }
.mz-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; min-width: 0; }
.mz-zahlen > div { display: grid; gap: 2px; min-width: 0; }
.mz-zahlen span { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.mz-zahlen strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.mz-aktionen { display: flex; align-items: center; gap: 8px; }
.mz-weg {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-4); flex: none;
}
.mz-weg:hover { background: var(--bg-paper); color: var(--coral); }

/* Auswahl fuer den Vergleich (GF 19.08.) — bis dahin nahm die Seite die
   ersten fuenf. Das Kaestchen ist bewusst gross: es wird auf dem Telefon
   mit dem Daumen getroffen, nicht mit der Maus. */
.mz-pick { display: grid; place-items: center; padding-left: 4px; }
.mz-pick-text { display: none; }
.mz-pick input {
  width: 20px; height: 20px; margin: 0;
  accent-color: var(--coral); cursor: pointer;
}
.mz-pick input:disabled { cursor: not-allowed; opacity: .35; }
/* Die gewaehlte Zeile traegt die Coral-Kante der uebrigen Auswahlzustaende,
   damit man die Auswahl auch ohne Blick auf die Kaestchen ueberblickt. */
.merk-zeile.ist-gewaehlt { border-color: var(--coral); }
.merk-pick-hinweis {
  margin: 0 0 14px; font-size: 13px; color: var(--ink-3); max-width: 62ch;
}
.merk-pick-hinweis strong { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  /* Als eigene Spalte kostete das Kaestchen auf 390 px so viel Breite, dass
     Titel und Adresse silbenweise umbrachen; auf dem Foto lag es dem Bild und
     dem Namen im Weg (GF 20.08.). Beides faellt weg, wenn es sich eine eigene
     Zeile ueber der Karte nimmt: Foto und Text stehen dann exakt so wie vor
     der Auswahl, und die Breite kostet es keinen Pixel. */
  .merk-zeile { grid-template-columns: 96px minmax(0, 1fr) auto; row-gap: 12px; }
  .mz-bild { width: 96px; height: 72px; }
  .mz-pick {
    grid-column: 1 / -1; justify-self: start;
    display: flex; align-items: center; gap: 9px; padding: 0;
  }
  .mz-pick-text { display: inline; font-size: 13.5px; color: var(--ink-3); }
  .merk-zeile.ist-gewaehlt .mz-pick-text { color: var(--ink); font-weight: 500; }
  /* Zahlen unter Bild und Titel, ueber die volle Breite */
  .mz-zahlen { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .merk-zeile { padding: 12px; gap: 12px; }
  .mz-zahlen { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
  .mz-aktionen .btn { padding-inline: 12px; }
}

/* Flaechen-Auswahl im Vergleich (GF 28.07.) */
.cmp-unit, .cmp-unit-fix {
  display: block; width: 100%; margin: 8px 0 6px;
  font-size: 12.5px; color: var(--ink-2);
  background: var(--bg-paper); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px;
}
.cmp-unit { cursor: pointer; }
.cmp-unit:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.cmp-unit-fix { color: var(--ink-3); }

.merk-clear-all {
  font-size: 13px; color: var(--ink-3); text-decoration: underline;
  text-underline-offset: 2px; margin-left: 4px;
}
.merk-clear-all:hover { color: var(--coral); }
@media (max-width: 560px) {
  .merk-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 560px) {
  .merk-bar-in { padding: 9px 0; gap: 8px; }
  .merk-bar-actions { width: 100%; }
  .merk-bar-actions .btn { flex: 1; justify-content: center; }
}

/* Grundriss-Ansicht: heller Grund (Plaene sind Strichzeichnungen) und
   Wasserzeichen deutlicher als bei Fotos. */
.lb-stage.plan-stage { background: #fff; }
.lb-stage.plan-stage img { object-fit: contain; max-height: 82vh; }
.lb-stage.plan-stage .wm { opacity: .3; width: 42%; max-width: 380px; }

/* ── Detailseite: Breite + neue Kennzeichnungen (GF 27.07., 2. Runde) ────── */

/* Bilderleiste: so breit wie der uebrige Inhalt, mit runden Ecken (GF 27.07.).
   Vorher war sie SCHMALER als der Text darunter — Ursache war die Kombination
   `aspect-ratio: 16/9` + `max-height: 620px` in styles.css: im 1.480-px-Container
   verlangt 16/9 eine Hoehe von 832 px, der Deckel bei 620 px zwingt daraufhin die
   BREITE auf 1.102 px zurueck. Mein erster Versuch (Ausbruch auf 100vw) war die
   falsche Antwort: randlos, eckig und mit so extremen Kachelformaten, dass auf den
   Fotos nichts mehr zu erkennen war. Jetzt volle Containerbreite, flacheres
   Gesamtformat (weniger Beschnitt) und der Deckel raus. */
.detail-gallery {
  width: 100%;
  max-height: none;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-xl);
}
/* 🛑 30.07.: Hier stand `@media (max-width:720px) { aspect-ratio: 4/3 }`. Diese
   Regel steht WEITER UNTEN in derselben Datei als der Aufmacher-Block oben und
   hat ihn deshalb ueberstimmt: Der Aufmacher (335 x 223) plus Vorschaureihe
   (108) braucht 337 px Hoehe, 4:3 deckelte den Rahmen aber auf 251 px — und
   `overflow: hidden` aus styles.css schnitt die Vorschaureihe ab. Gemessen und
   dann entfernt: am Telefon bestimmen die Kacheln die Hoehe (jede hat ihr
   eigenes aspect-ratio, haengt also nicht am Ladezustand des Bildes). */
/* 🛑 Ohne min-height:0 loesen sich die `1fr 1fr`-Zeilen UNGLEICH auf: Die
   Grid-Standardregel min-height:auto laesst ein Kind nie kleiner werden als
   sein Inhalt — ein Hochformat (350 px breit = 473 px hoch) draengt die zweite
   Zeile auf 470 px. Gemessen: Zeilen 253 px / 470 px, Galerie laeuft auf 732 px
   ueber und wird von overflow:hidden unten abgeschnitten. Genau das sah man
   im Screenshot. */
/* AUFMACHERBILD AM TELEFON (GF 30.07.: „Hier wird momentan kein grosses
   Aufmacherbild als Eyecatcher gezeigt.")
   Stimmt — gemessen auf 375 px: Galerie 335 x 251 px, aufgeteilt in fuenf
   Kacheln von 164 x 165 bzw. 164 x 78 px. Fuenf Daumennagel statt eines Bildes,
   das etwas zeigt. Am Telefon fuehrt jetzt EIN Bild ueber die volle Breite
   (3:2), darunter drei Vorschaukacheln als Hinweis auf die Galerie; der Rest
   steckt wie bisher hinter „N Fotos". §2: weniger, groessere Flaechen.
   Die Reihenfolge kommt weiter aus dem OS (Titelbild zuerst) — hier wird nur
   anders aufgeteilt, nicht neu sortiert. */
@media (max-width: 720px) {
  .detail-gallery {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    grid-auto-rows: auto !important;
    aspect-ratio: auto;
    max-height: none;
    gap: 6px;
  }
  /* Aufmacher: volle Breite, ruhiges Format. Das `grid-row: 1 / 3` aus
     styles.css (Desktop-Aufmacher ueber zwei Zeilen) muss hier weg, sonst
     bleibt die Vorschauzeile leer. */
  .detail-gallery > div:first-child {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    aspect-ratio: 3 / 2;
  }
  .detail-gallery > div:nth-child(n+2) { aspect-ratio: 1 / 1; }
  /* Die fuenfte Kachel waere die vierte in einer Dreierreihe und riesse eine
     halbe Zeile auf. Ihr Bild ist ueber „N Fotos" erreichbar. */
  .detail-gallery > div:nth-child(5) { display: none; }
}

.detail-gallery > div { min-height: 0; min-width: 0; }
.detail-gallery img { display: block; }

/* Gebaeudeuebersicht ist neben den Bildern der Hauptdarsteller — sie bekommt
   mehr Breite, die Kontaktspalte bleibt daneben stehen und scrollt mit. */
@media (min-width: 1200px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
  .detail-layout > aside { position: sticky; top: 88px; align-self: start; }
}

/* Kennzeichnung: Nicht-Bueroflaeche (Laden, Lager …) */
.mx-kind {
  display: inline-block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-2); background: var(--bg-paper);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-top: 3px;
}
/* GF 07.08.: Eine Flaeche, die sich ueber mehrere Gebaeudeteile erstreckt, wird
   als EINE Zelle ueber beide Spalten gezeichnet (Camp 15, 2. OG: 618 m² ueber
   Gebaeude A + B). Damit die breite Zelle nicht wie ein Layoutzufall wirkt,
   nennt sie die Bauteile im Klartext. Bewusst dezent gesetzt — es ist eine
   Zuschnitts-Angabe, keine Auszeichnung. */
.mx-teile {
  display: block; font-size: 11px; color: var(--ink-3);
  letter-spacing: .01em; margin-top: 1px;
}
/* Die Fusszeilen „Ueber mehrere Teile" und „Frei gesamt" laufen ueber alle
   Spalten — sie gehoeren keiner einzelnen zu. */
.mx-total-span { text-align: center; }
/* Vermietete Zellen: Groesse bzw. "Groesse unbekannt" wie im OS */
.mx-rented-sqm { display: block; font-size: 11px; color: var(--ink-4); margin-top: 2px; }
/* Hinweis auf hinterlegte Innenansichten */
.mx-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mx-photos { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-3); }

/* Trennpunkte der Kopfzeile (GF 28.07.): Beim Umbruch am Telefon blieb ein
   einzelnes "·" am Zeilenende stehen — ein Trenner ohne Folgeinhalt. Der
   Zeilenabstand trennt dort ausreichend. */
@media (max-width: 700px) { .meta-sep { display: none; } }

/* Off-Market-Bezug im Gesuch-Wizard (GF 30.07. Punkt 4)
   Der Kunde kommt von einer anonymisierten Karte — ohne diesen Hinweis wirkt
   der Wizard wie ein beliebiges Kontaktformular, und er weiss nicht, ob sein
   Klick angekommen ist. */
.gw-om-hinweis {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin: 0 0 18px;
  background: var(--coral-50); border: 1px solid var(--coral-100);
  border-radius: var(--r-m);
}
.gw-om-hinweis svg { color: var(--coral-600); flex-shrink: 0; margin-top: 2px; }
.gw-om-hinweis strong { display: block; font-size: 14px; font-weight: 600; }
.gw-om-hinweis span { font-size: 13px; color: var(--ink-2); line-height: 1.45; }

/* KI-Suche: „Zeig mir mehr" + ehrlicher Hinweis auf Nicht-Verstandenes
   (GF 30.07. B1/B2) */
.ki-mehr {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 20px; margin-top: 4px;
  border: 1px dashed var(--line-2); border-radius: var(--r-m);
  background: #fff; font-family: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--ink); cursor: pointer;
}
.ki-mehr:hover { border-color: var(--coral); color: var(--coral-600); }
.ki-mehr-hinweis { margin: 4px 0 12px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.ki-unklar {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin-top: 14px;
  background: var(--bg-paper); border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.ki-unklar svg { color: var(--ink-3); flex-shrink: 0; margin-top: 2px; }
.ki-unklar strong { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.ki-unklar span { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.ki-mehr-alle { border-style: solid; border-color: var(--ink); margin-top: 10px; }
.ki-mehr-alle:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── Exposé zum Ausdrucken (GF 24.09.2026, C202609-0367/0368) ──────────────
   Am Bildschirm: Vorschau mit Leiste „Als PDF sichern". Im Druck: A4 quer, eine Sektion je Seite.
   Aufbau nach GF 24.09.: 1 Titel (Bild vollflächig, runde Ecken, Logo oben links, Text darüber),
   2 vier Ansichten, 3 Beschreibung, Entfernungen, Karte, 4 Ausstattung mit Icons, Rahmendaten, Ansichten,
   5 Gebäudeübersicht, 6 ff. Grundrisse, zuletzt Hinweise und Berater. Fußzeile auf jeder Seite. */
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ex-hinweis { font-size: 12px; color: var(--ink-3); margin: 2px 0 0; line-height: 1.45; }
.expose-tor { min-height: 100vh; background: var(--bg-paper, #FBF8F4); position: relative; overflow: hidden; }
.expose-tor-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px); transform: scale(1.08); opacity: .55; }
.ex-modal-seite { background: rgba(10,10,10,0.25); }
.expose { background: #EDEDED; padding: 72px 0 40px; }
.ex-leiste { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.ex-leiste a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.ex-laedt { text-align: center; color: var(--ink-3); }
.ex-seite { position: relative; width: 297mm; height: 210mm; margin: 0 auto 24px; background: #fff; padding: 12mm 14mm 22mm; box-sizing: border-box; overflow: hidden; color: #000; }
.ex-seite h2 { font-size: 24px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 7mm; }
.ex-seite h3 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 3mm; }
.ex-fuss { position: absolute; left: 14mm; right: 14mm; bottom: 7mm; display: flex; gap: 6mm; align-items: center; font-size: 8.5px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 3mm; }
.ex-fuss img { height: 10px; }
.ex-fuss span:last-child { margin-left: auto; }
.ex-fuss.hell { color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.35); }
/* 1 Titel */
.ex-titelbild { position: absolute; inset: 12mm 14mm 22mm; border-radius: 5mm; overflow: hidden; background: #d9d9d9; }
.ex-titelbild > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-titelbild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,.62) 100%); pointer-events: none; }
.ex-logo { position: absolute; top: 9mm; left: 10mm; height: 24px; width: auto; z-index: 2; }
.ex-badge { position: absolute; top: 9mm; right: 10mm; z-index: 2; background: var(--coral); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.ex-titeltext { position: absolute; left: 10mm; right: 10mm; bottom: 9mm; z-index: 2; color: #fff; }
.ex-titeltext h1 { font-size: 44px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 3mm; color: #fff; }
.ex-unter { font-size: 17px; margin: 0 0 2mm; color: #fff; }
.ex-adr { font-size: 13px; margin: 0 0 6mm; color: rgba(255,255,255,.85); }
.ex-kurz { margin: 0; display: flex; gap: 10mm; }
.ex-kurz div { display: flex; flex-direction: column-reverse; gap: 1mm; }
.ex-kurz dt { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.8); }
.ex-kurz dd { margin: 0; font-size: 20px; font-weight: 500; color: #fff; }
/* 2 Ansichten */
.ex-raster { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5mm; height: 100%; }
.ex-raster.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ex-raster.n2 { grid-template-rows: 1fr; }
.ex-raster.n3 img:first-child { grid-row: span 2; }
.ex-raster img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 4mm; display: block; background: #e6e6e6; }
.ex-fotos { padding-bottom: 22mm; }
/* 3 Beschreibung, Entfernungen, Karte */
.ex-spalten { display: grid; grid-template-columns: 1.55fr 1fr; gap: 10mm; }
.ex-lage { order: 2; }
.ex-beschreibung p, .ex-beschreibung li { font-size: 11px; line-height: 1.55; color: #111; margin: 0 0 2.6mm; }
.ex-beschreibung ul { padding-left: 5mm; margin: 0 0 3mm; }
.ex-karte { height: 62mm; border-radius: 4mm; overflow: hidden; background: #eef0ee; margin-bottom: 5mm; }
.ex-entf { list-style: none; padding: 0; margin: 0 0 4mm; }
.ex-entf li { display: grid; grid-template-columns: 16px 1fr auto; gap: 3mm; align-items: center; font-size: 10.5px; padding: 1.8mm 0; border-bottom: 1px solid var(--line); }
.ex-entf li svg { color: var(--coral); }
.ex-entf em { font-style: normal; color: var(--ink-3); white-space: nowrap; }
.ex-umgebung { font-size: 10.5px; color: var(--ink-2); }
/* 4 Ausstattung, Rahmendaten (GF 24.09.: größer, geordneter, füllt die Seite) */
.ex-daten, .ex-gebaeude, .ex-plan { display: flex; flex-direction: column; }
.ex-daten-raster { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.05fr 0.95fr; gap: 10mm; }
.ex-daten-raster.ohne-bild { grid-template-columns: 1fr 1.2fr; }
.ex-daten-spalte h3 { margin-bottom: 4mm; }
.ex-daten-spalte h3 ~ h3 { margin-top: 7mm; }
.ex-icons { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3.2mm 5mm; }
.ex-icons li { display: flex; align-items: center; gap: 3mm; font-size: 13px; line-height: 1.3; }
.ex-icon { flex-shrink: 0; width: 8.5mm; height: 8.5mm; border-radius: 50%; background: #FFF0ED; color: var(--coral); display: inline-flex; align-items: center; justify-content: center; }
.ex-fakten { margin: 0; display: grid; align-content: start; }
.ex-fakten div { display: flex; justify-content: space-between; align-items: baseline; gap: 5mm; border-bottom: 1px solid var(--line); padding: 3.3mm 0; }
.ex-fakten div:first-child { border-top: 1px solid var(--line); }
.ex-fakten dt { color: var(--ink-3); font-size: 12.5px; }
.ex-fakten dd { margin: 0; font-size: 14px; font-weight: 500; text-align: right; }
.ex-daten-bilder { display: grid; grid-template-rows: 1fr 1fr; gap: 5mm; min-height: 0; }
.ex-daten-bilder.n1 { grid-template-rows: 1fr; }
.ex-daten-bilder img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 4mm; display: block; background: #e6e6e6; }
/* 5 Gebäudeübersicht: Zeilenhöhe aus --ex-zeile (je nach Etagenzahl), Schrift größer als auf der Website */
.ex-gebaeude .mx-wrap { overflow: visible; max-height: none; }
.ex-gebaeude .mx { gap: 3mm; min-width: 0; }
.ex-gebaeude .mx-cell { min-height: var(--ex-zeile, 20mm); font-size: 12.5px; }
.ex-gebaeude .mx-cell.free strong { font-size: 17px; }
.ex-gebaeude .mx-unit { gap: 1mm; }
.ex-gebaeude .mx-head { font-size: 12px; }
.ex-gebaeude .mx-floor strong { font-size: 14px; }
.ex-gebaeude .mx-floor span { font-size: 12px; }
.ex-gebaeude .mx-total { font-size: 15px; }
.ex-gebaeude .mx-links { display: none; }
/* GF 25.09.: viele Zeilen (unter 15 mm je Zeile): kleinere Schrift, kein dritter Zeilentext, damit alles auf ein Blatt passt. */
.ex-gebaeude .ex-mx.dicht .mx { gap: 2mm; }
.ex-gebaeude .ex-mx.dicht .mx-cell { font-size: 11.5px; }
.ex-gebaeude .ex-mx.dicht .mx-cell.free strong { font-size: 14.5px; }
.ex-gebaeude .ex-mx.dicht .mx-unit { padding: 1mm 2mm; gap: 0; }
.ex-gebaeude .ex-mx.dicht .mx-unit > span:not(.mx-kind):not(.mx-teile):not(:has(.mx-np)) { display: none; }
.ex-gebaeude .ex-mx.dicht .mx-kind { font-size: 9px; padding: 0 4px; }
.ex-gebaeude .ex-mx.dicht .mx-total { font-size: 13px; padding-top: 4px; }
.ex-gebaeude .ex-mx.dicht .mx-floor strong { font-size: 13px; }
.ex-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ex-tabelle th, .ex-tabelle td { text-align: left; padding: 3mm; border-bottom: 1px solid var(--line); }
/* 6 ff. Grundrisse: bis zu vier je Seite */
.ex-plan-raster { flex: 1; min-height: 0; display: grid; gap: 5mm; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ex-plan-raster.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ex-plan-raster.n2 { grid-template-rows: 1fr; }
.ex-plan-raster figure { margin: 0; min-height: 0; display: flex; flex-direction: column; gap: 2mm; border: 1px solid var(--line); border-radius: 4mm; padding: 3mm 4mm; }
.ex-plan-raster img { flex: 1; min-height: 0; width: 100%; object-fit: contain; display: block; }
.ex-plan-raster figcaption { font-size: 11px; color: var(--ink-2); text-align: center; }
/* Letzte Seite */
.ex-kontakt { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto 1fr; column-gap: 14mm; background: var(--coral); color: #fff; }
.ex-kontakt h2 { color: #fff; grid-column: 1 / -1; }
/* GF 25.09.: Hinweise unten links, Berater mit Foto unten rechts, beide auf einer Grundlinie über der Fußzeile. */
.ex-kontakt-links, .ex-kontakt-rechts { align-self: end; }
.ex-recht { font-size: 10.5px; line-height: 1.55; margin: 0 0 3mm; max-width: 140mm; }
.ex-stand { font-size: 10px; opacity: .9; margin: 0; }
.ex-kontakt-rechts { font-size: 15px; display: grid; grid-template-columns: auto 1fr; column-gap: 7mm; align-items: end; }
.ex-kontakt-rechts .ex-berater-foto { grid-row: 1 / span 6; margin-bottom: 0; }
.ex-kontakt-rechts p { margin: 0 0 1.5mm; }
.ex-berater-name { font-size: 24px; font-weight: 400; }
/* GF 24.09.: Im Kreis schnitt der Ausschnitt den Kopf oben ab. Die Porträts sind 4:5 mit gleichem Schnitt,
   darum ganz und hochkant, wie auf der Team-Seite. */
.ex-berater-foto { width: 46mm; aspect-ratio: 4 / 5; border-radius: 4mm; overflow: hidden; margin-bottom: 6mm; background: #fff; }
.ex-berater-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 0; display: block; }
/* Nur am Bildschirm: A4 quer ist im Druck ~1123 px breit und fiele sonst in diese Regel. */
@media screen and (max-width: 1180px) {
  .ex-seite { width: auto; height: auto; min-height: 0; margin: 0 12px 16px; padding: 16px 16px 64px; }
  .ex-titel { height: 150vw; max-height: 720px; }
  .ex-titelbild { inset: 12px 12px 56px; }
  .ex-titeltext h1 { font-size: 30px; }
  .ex-kurz { flex-wrap: wrap; gap: 12px 20px; }
  .ex-spalten, .ex-daten-raster, .ex-daten-raster.ohne-bild, .ex-kontakt, .ex-plan-raster { grid-template-columns: 1fr; }
  .ex-plan-raster, .ex-daten-bilder { grid-template-rows: none; grid-auto-rows: 60vw; }
  .ex-raster { height: auto; grid-auto-rows: 44vw; grid-template-rows: none; }
  .ex-recht { margin-top: 8px; }
  .ex-kontakt-rechts { padding-top: 0; grid-template-columns: 1fr; }
  .ex-gebaeude .mx-wrap { overflow-x: auto; }
  .ex-fuss { left: 16px; right: 16px; bottom: 12px; flex-wrap: wrap; gap: 4px 12px; }
}
@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { background: #fff !important; }
  /* GF-PDF 24.09.: Chrome verkleinerte alle Seiten auf 97,5 % (weißer Rand rechts und unten), weil etwas
     außerhalb der Blätter breiter als A4 war. Lokal nicht nachstellbar (Kartendienst, Erweiterungen).
     Darum nur die Blätter drucken und alles Übrige in der Breite abschneiden, ohne einen Scrollbereich
     zu bilden (clip statt hidden, sonst druckt Chrome nur die erste Seite). */
  body.expose-modus { width: 297mm; overflow-x: clip; }
  html:has(body.expose-modus) { overflow-x: clip; }
  body.expose-modus > :not(#root):not(script) { display: none !important; }
  .expose-modus .ex-leiste, .expose-modus .ex-laedt, .expose-modus [class^="cc-"], .expose-modus .cc-leiste { display: none !important; }
  .expose { padding: 0; background: #fff; }
  .ex-seite { margin: 0; page-break-after: always; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ex-seite:last-child { page-break-after: auto; break-after: auto; }
  /* Lange Beschreibungen dürfen über mehrere Seiten laufen, statt abgeschnitten zu werden. */
  .ex-text { height: auto; min-height: 210mm; overflow: visible; }
  .ex-text .ex-spalten { display: block; }
  .ex-text .ex-lage { float: right; width: 92mm; margin: 0 0 6mm 10mm; }
  .ex-text h2 { break-after: avoid; page-break-after: avoid; }
}

/* GF 24.09.: Das Fit-Check-Foto sah „einfach eingesetzt" aus; abgerundet wie die übrigen Fotos (.how-photo, .hood-photo-real: 18px). */
.photo-frame.foto-rund { border-radius: 18px; }