/* ═══════════════════════════════════════════════════════════════
   frontend/css/objekt-ansichten.css — v3237 · Marcel 09.11.2026
   Reiter Objekt, vier Ansichten (Spracheingabe):

   (1) „Die Pilot-Lage-Bewertung darf gerne kompakter dargestellt werden,
       vor allem wenn noch kein Aufruf passiert ist."
       Vor dem Aufruf steht im Körper nur .ki-lage-empty — dann wird die
       Box ein Streifen: Kopf mit Knopf, darunter eine Zeile Text.
       Danach weniger Abstände; der Abgleich ist schon ein <details>.
       Spezifität über object-actions.js (#ki-lage-box.ki-lage-box mit
       !important, eingespritzt) — deshalb html body … !important.

   (2) „Die Parameter der Verkehrswertermittlung könnten auf Karten
       einfach dargestellt werden und erst unter ‚genau' so erscheinen
       wie jetzt." — Kacheln aus objekt-reiter.js kachelnSetzen(), die
       Zeilen unverändert in <details class="oe-genau">.

   (3) Bodenrichtwert-Karte (js/brw-karte.js): Fenster mit Leaflet und
       den Zonen des bundesweiten Dienstes der Gutachterausschüsse.

   (4) „Einklappen" der Pilot-Mietpreis-Analyse: in ki-miete.js selbst.

   Optik wie Reiter Objekt: weiß, Rahmen Gold 22 %, Radius 2 px, Köpfe
   in Mono 10 px Versalien. Gold nur als var(--wl-<hex>, #<hex>).
   ═══════════════════════════════════════════════════════════════ */

/* ── (1) Pilot-Lage-Bewertung ─────────────────────────────────── */
html body #ki-lage-box.ki-lage-box {
  background: #fff !important;
  border: 1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 22%, transparent) !important;
  border-radius: 2px !important;
  padding: 10px 14px !important;
}
html body #ki-lage-box .ki-lage-header { margin-bottom: 0 !important; gap: 8px 12px; }
html body #ki-lage-box .ki-lage-body { margin-top: 8px; }
/* vor dem ersten Aufruf: ein Streifen */
html body #ki-lage-box.ki-lage-box:has(> #ki-lage-body > .ki-lage-empty:only-child) { padding: 7px 12px !important; }
html body #ki-lage-box:has(> #ki-lage-body > .ki-lage-empty:only-child) .ki-lage-body { margin-top: 2px; }
html body #ki-lage-box:has(> #ki-lage-body > .ki-lage-empty:only-child) .ki-lage-title { font-size: 12.5px; }
html body #ki-lage-box .ki-lage-empty {
  margin: 0 !important; padding: 0 !important;
  font-size: 11.5px !important; line-height: 1.35 !important; font-style: normal;
  color: var(--muted, #7A7370);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* nach dem Aufruf: dichter */
html body #ki-lage-box .ki-lage-vergleich { padding: 8px 10px; margin: 0 0 8px; border-radius: 2px; }
html body #ki-lage-box .lv-kopf { margin-bottom: 4px; font-size: 10px; }
html body #ki-lage-box .lv-tab td { padding: 4px 6px; }
html body #ki-lage-box .lv-abgl { margin-top: 6px; border-radius: 2px; border-color: color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 22%, transparent); }
html body #ki-lage-box .lv-abgl > summary { padding: 7px 0; }
html body #ki-lage-box .lv-sk { font-size: 10px; }
html body #ki-lage-box .lv-fuss { font-size: 11px; }
@media (max-width: 640px) {
  html body #ki-lage-box .ki-lage-empty { white-space: normal; }
  html body #ki-lage-box:has(> #ki-lage-body > .ki-lage-empty:only-child) .ki-lage-tag { display: none; }
}
/* v3247 · Marcel 09.11.2026: die Box steht oben in „Lage & Einschätzung" (über der Lageklasse),
   der Aufruf sitzt im Kopf direkt neben dem Auf-/Zuklapp-Pfeil (#ki-lage-min, object-actions.js) —
   auch am Handy in EINER Zeile (style.css (7) legte den Knopf dort in eine zweite, volle Zeile). */
html body #ki-lage-box.ki-lage-oben { margin: 2px 0 12px !important; }
html body #ki-lage-box .ki-lage-header > #ki-lage-btn { margin-left: auto; white-space: nowrap; }
html body #ki-lage-box .ki-lage-header > #ki-lage-min { margin-left: 6px; flex: 0 0 auto; }
@media (max-width: 640px) {
  html body #ki-lage-box .ki-lage-header { grid-template-columns: minmax(0, 1fr) auto auto !important; gap: 8px !important; }
  html body #ki-lage-box .ki-lage-header > #ki-lage-btn { grid-column: 2; grid-row: 1; width: auto; margin: 0; padding-left: 10px; padding-right: 10px; }
  html body #ki-lage-box .ki-lage-header > #ki-lage-min { grid-column: 3; grid-row: 1; margin: 0; }
}

/* ── (2) Parameter der Verkehrswertermittlung als Kacheln ─────── */
/* v3247 · Marcel 09.11.2026: „die Karten ein bisschen cooler in Szene setzen, dass sie
   zur Pilot-Optik passen." Die Kachel wird ein Instrument: Obsidian-Grund, Goldkante,
   oben die Runway-Linie, Beschriftung in Mono-Versalien mit Kontrollleuchte, die Zahl
   groß in Creme, die Einheit klein in Gold dahinter, unten eine feine Skala. Die
   Herkunftsmarken (Stufe A–E/N …) bleiben, auf dem dunklen Grund mit eigenem Hof. */
#oe-auto.oe-auto.oe-mit-kacheln { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.oe-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
  min-width: 0;
}
.oe-kachel {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
  padding: 11px 11px 14px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 14%, transparent), transparent 60%),
    linear-gradient(165deg, #1a1712 0%, #0d0c0a 48%, var(--obsidian, #050505) 100%);
  border: 1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 38%, transparent);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 3px rgba(5, 5, 5, .18);
  color: #FDFCFA;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
/* Runway-Linie oben */
.oe-kachel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: -1;
  background: linear-gradient(110deg, var(--wl-e8cc7a, #E8CC7A), var(--wl-c9a84c, #C9A84C) 55%, var(--wl-b8932f, #b8932f));
  opacity: .9;
}
.oe-kachel.leer::before { opacity: .35; }
.oe-kachel:hover, .oe-kachel:focus-visible {
  border-color: color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 75%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 25%, transparent), 0 4px 14px rgba(5, 5, 5, .22);
  outline: none;
}
/* Instrumenten-Skala am Fuß */
.oe-kachel-skala {
  position: absolute; left: 11px; right: 11px; bottom: 4px; height: 5px; z-index: -1;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 55%, transparent) 0 1px, transparent 1px 7px) bottom / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 75%, transparent) 0 1px, transparent 1px 35px) bottom / 100% 5px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: .55;
  pointer-events: none;
}
.oe-kachel-k {
  display: flex; align-items: center; gap: 6px;
  font: 500 9.5px/1.25 "JetBrains Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--wl-e8cc7a, #E8CC7A) 85%, #FDFCFA);
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;   /* „Modernisierungs-punkte" trennt an der Silbe */
}
/* Kontrollleuchte: Gold, wenn ein Wert anliegt, sonst aus */
.oe-kachel-k::before {
  content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
  background: var(--wl-e8cc7a, #E8CC7A);
  box-shadow: 0 0 5px color-mix(in srgb, var(--wl-e8cc7a, #E8CC7A) 80%, transparent);
}
.oe-kachel.leer .oe-kachel-k::before { background: rgba(253, 252, 250, .22); box-shadow: none; }
.oe-kachel-w {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px;
  min-width: 0;
  color: #FDFCFA;
}
.oe-kachel-z {
  min-width: 0;
  font: 600 22px/1.1 "Space Grotesk", Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.oe-kachel-e {
  font: 500 10.5px/1.2 "JetBrains Mono", monospace;
  letter-spacing: .04em;
  color: var(--wl-e8cc7a, #E8CC7A);
  white-space: nowrap;
}
.oe-kachel-w.text .oe-kachel-z { font-size: 15px; line-height: 1.25; letter-spacing: 0; }
.oe-kachel-w.lang .oe-kachel-z { font-size: 13.5px; }
.oe-kachel.leer .oe-kachel-z { color: rgba(253, 252, 250, .45); }
.oe-kachel-m { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* Herkunftsmarken auf dem dunklen Grund: Statusfarben bleiben (nie tokenisiert), dazu ein Hof */
html body .oe-auto .oe-kachel-m .oe-st { margin: 0; min-width: 0; padding: 1px 6px; border-radius: 3px; font-size: 9.5px; background: rgba(253, 252, 250, .05); }
html body .oe-auto .oe-kachel-m .oe-st.a { color: #5DBE88; border-color: #3FA56C; background: rgba(63, 165, 108, .14); }
html body .oe-auto .oe-kachel-m .oe-st.b { color: var(--wl-e8cc7a, #E8CC7A); border-color: color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 70%, transparent); background: color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 12%, transparent); }
html body .oe-auto .oe-kachel-m .oe-st.x { color: #E58A82; border-color: #D8564C; background: rgba(216, 86, 76, .14); }
html body .oe-auto .oe-kachel-m .oe-st.n { color: #D9A06E; border-color: #B87A46; background: rgba(184, 122, 70, .16); }
.oe-kachel-ind {
  font: 500 9px/1.2 "JetBrains Mono", monospace;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(253, 252, 250, .55);
}
.oe-kachel-q {
  font-size: 11px; line-height: 1.3; color: rgba(253, 252, 250, .62);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.oe-kachel-a { margin-top: auto; padding-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
html body .oe-auto .oe-kachel-a .oe-btn {
  width: auto !important; min-height: 0;
  padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 500 10px/1.4 "JetBrains Mono", monospace !important;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--wl-e8cc7a, #E8CC7A) !important;
  cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--wl-e8cc7a, #E8CC7A) 45%, transparent); text-underline-offset: 3px;
}
html body .oe-auto .oe-kachel-a .oe-btn:hover { color: #FDFCFA !important; }
/* „Genau ansehen" — darin die bisherigen Zeilen, unverändert */
.oe-genau {
  margin-top: 8px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 22%, transparent);
  border-radius: 2px;
  overflow: hidden;
}
.oe-genau > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 8px 12px;
  cursor: pointer; list-style: none;
}
.oe-genau > summary::-webkit-details-marker { display: none; }
.oe-genau > summary::before { content: "▸"; color: var(--wl-b8932f, #b8932f); font-size: 10px; }
.oe-genau[open] > summary::before { content: "▾"; }
.oe-genau-k {
  font: 600 10px/1.3 "JetBrains Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wl-b8932f, #b8932f);
}
.oe-genau-h { font-size: 11px; color: var(--muted, #7A7370); }
.oe-auto .oe-genau .oe-row.oe-kachel-blitz { background: color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 12%, transparent); transition: background .3s; }
@media (max-width: 420px) {
  .oe-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .oe-kachel { padding: 9px 8px 13px; }
  .oe-kachel-skala { left: 8px; right: 8px; }
  .oe-kachel-z { font-size: 18px; }
  .oe-kachel-w.text .oe-kachel-z, .oe-kachel-w.lang .oe-kachel-z { font-size: 12.5px; }
  .oe-kachel-k { font-size: 9px; letter-spacing: .07em; }
}

/* ── (3) Bodenrichtwert-Karte ──────────────────────────────────── */
.brw-karte-ov {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(5, 5, 5, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.brw-karte-dlg {
  width: min(960px, 100%); height: min(680px, calc(100vh - 32px)); height: min(680px, calc(100dvh - 32px));
  display: flex; flex-direction: column; min-width: 0;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 22%, transparent);
  border-radius: 2px;
  box-shadow: 0 18px 48px rgba(5, 5, 5, .35);
  overflow: hidden;
}
.brw-karte-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 22%, transparent);
}
.brw-karte-titel {
  font: 600 10px/1.3 "JetBrains Mono", monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--wl-9a7f33, #9a7f33);
}
.brw-karte-adr { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--ch, #2A2727); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brw-karte-zu {
  margin-left: auto; width: 28px; height: 28px; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 30%, transparent); border-radius: 2px;
  background: #fff; color: var(--ch, #2A2727); font-size: 18px; line-height: 1; cursor: pointer;
}
.brw-karte-hinweis { padding: 6px 14px; font-size: 11.5px; line-height: 1.4; color: var(--muted, #7A7370); }
.brw-karte-hinweis a { color: var(--wl-b8932f, #b8932f); }
.brw-karte-map { flex: 1 1 auto; min-height: 0; background: #f2efe8; }
.brw-karte-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 8px 14px;
  border-top: 1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 22%, transparent);
  font-size: 11.5px; color: var(--muted, #7A7370);
}
.brw-karte-portal {
  margin-left: auto;
  padding: 4px 10px; border-radius: 2px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 45%, transparent);
  background: #fff; color: var(--wl-9a7f33, #9a7f33);
  font: 500 10px/1.4 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase;
}
.brw-karte-pop { font: 12px/1.45 Inter, sans-serif; color: #2A2727; }
.brw-karte-pop + .brw-karte-pop { margin-top: 6px; padding-top: 6px; border-top: 1px solid #eee; }
@media (max-width: 640px) {
  .brw-karte-ov { padding: 8px; }
  .brw-karte-dlg { height: calc(100vh - 16px); height: calc(100dvh - 16px); }
  .brw-karte-adr { flex-basis: 100%; order: 3; white-space: normal; }
  .brw-karte-portal { margin-left: 0; }
}