@font-face{font-family:'Gotham';src:url('/fonts/gotham-book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('/fonts/gotham-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#f6f5f2;
  --bg-sidebar:#111;
  --bg-sidebar-hover:#2a2a2a;
  --bg-sidebar-border:#2e2e2e;
  --sidebar-text:#fff;
  --sidebar-text-muted:#aaa;
  --text:#111;
  --muted:#666;
  --border:#e5e5e5;
  --border-strong:#d9d5cb;  /* kraeftigere Kontur aus der Beige-Familie des
                               Page-BG: sichtbar auf #f6f5f2, ohne mit dem
                               Gold der Buttons und Icons zu konkurrieren */
  --ci:#b49d45;
  --gold:#b49d45;          /* Alias für --ci, Backward-Compat */
  --gold-bg:#faf5e8;
  --gold-border:#e5d5a8;
  --radius:12px;
  --radius-button:100px;
  --space-page:32px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{scrollbar-gutter:stable}
body{font-family:'Gotham',system-ui,sans-serif;font-weight:400;color:var(--text);background:var(--bg);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{letter-spacing:-0.05em;margin:0;font-weight:700}
h1{font-size:28px}
h2{font-size:20px}
h3{font-size:16px}
label,.label{font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.muted{color:var(--muted)}
.hidden{display:none !important}
a{color:inherit}

/* View Transitions: Alter Content fadet still aus, neuer kommt mit Bewegung von unten. Sidebar bleibt statisch. */
.sidebar{view-transition-name:sidebar}
::view-transition-old(sidebar),
::view-transition-new(sidebar){animation:none}
@keyframes os-vt-fadeout{to{opacity:0}}
@keyframes os-vt-fadein-up{from{opacity:0;transform:translateY(40px)}}
::view-transition-old(root){animation:os-vt-fadeout .18s ease-in both}
::view-transition-new(root){animation:os-vt-fadein-up .35s ease-out both}

/* Shell */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:23vw;min-width:200px;max-width:400px;flex-shrink:0;
  background:var(--bg-sidebar);color:var(--sidebar-text);
  display:flex;flex-direction:column;overflow:hidden;
  padding:var(--space-page);
  position:sticky;top:0;height:100vh;
}

/* Brand */
/* Brand-Block sitzt fest oben in der Sidebar. position:relative + solid BG,
   damit das ::after-Pseudo darunter (Top-Fade) sich absolute positionieren
   kann und der Block selbst die Items dahinter sauber blockt. */
.sidebar-brand{
  position:relative;background:var(--bg-sidebar);
  display:flex;align-items:center;gap:9px;
  padding-bottom:20px;flex-shrink:0;
}
/* Top-Fade-Maske unter dem Brand-Block — Spiegelbild zum Bottom-Fade beim
   User-Block. 140-px-Höhe, wahrnehmungs-linearer Gradient mit 6 Stops
   (ease-in-out-Verlauf), damit Nav-Items beim Hochscrollen weich hinter
   dem Brand-Block ausfaden. pointer-events:none → Items unter dem Fade
   bleiben klickbar. */
.sidebar-brand::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:60px;
  background:linear-gradient(
    to top,
    rgba(17,17,17,0)    0%,
    rgba(17,17,17,0.05) 20%,
    rgba(17,17,17,0.2)  40%,
    rgba(17,17,17,0.5)  65%,
    rgba(17,17,17,0.85) 85%,
    var(--bg-sidebar)  100%
  );
  pointer-events:none;
  z-index:1;
}
.sidebar-logo{height:26px;width:auto;filter:brightness(0) invert(1)}
.sidebar-brand-text{font-size:24px;font-weight:700;color:var(--sidebar-text);text-transform:uppercase;flex:1;letter-spacing:-0.04em}

/* Main Nav */
/* Scroll-Area: nimmt den verbleibenden Platz zwischen Brand und User-Block.
   Bei vielen Modulen + aufgeklappten Sub-Items scrollt die Nav intern;
   Brand bleibt fix oben, User-Block fix unten. min-height:0 ist Pflicht,
   sonst respektiert das Flex-Layout den intrinsic-content-Size statt
   das `flex:1` korrekt aufzulösen → kein Overflow-Scroll. Scrollbar
   versteckt, weil sie auf dem dunklen Sidebar-BG hässlich aussähe. */
.sidebar-nav{
  display:flex;flex-direction:column;gap:0;
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;
  /* Padding-Top/Bottom matched die Höhe der Fade-Overlays. Dadurch sitzt
     der erste Eintrag initial UNTER dem Top-Gradient (= Clear Zone) und
     der letzte über dem Bottom-Gradient. Beim Scrollen wandern Items
     durch die Padding-Zone und fadet dabei smooth aus. Reine CSS-Lösung,
     kein JS-Scroll-Listener nötig. */
  padding-top:50px;padding-bottom:50px;
}
.sidebar-nav::-webkit-scrollbar{display:none}
.sidebar-nav-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;
  font-size:18px;font-weight:700;color:var(--sidebar-text);
  text-decoration:none;cursor:pointer;user-select:none;
  border-radius:var(--radius);
  transition:background .15s,color .15s;
  letter-spacing:-0.02em;
}
.sidebar-nav-item svg{opacity:.6;flex-shrink:0;transition:opacity .15s}
.sidebar-nav-item:hover{background:var(--bg-sidebar-hover)}
.sidebar-nav-item:hover svg{opacity:1}
.sidebar-nav-item.is-active{background:var(--bg);color:var(--bg-sidebar)}
.sidebar-nav-item.is-active svg{opacity:1}
.sidebar-nav-badge{
  margin-left:auto;font-size:11px;font-weight:700;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--radius-button);
  background:var(--bg-sidebar-border);color:var(--sidebar-text-muted);
}

.sidebar-list{flex:1;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:2px;padding-bottom:var(--space-page)}
.sidebar-list::-webkit-scrollbar{display:none}
.sidebar-list-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;font-size:15px;font-weight:700;color:var(--sidebar-text);
  text-decoration:none;cursor:pointer;user-select:none;
  border-radius:var(--radius);
  transition:background .15s;
}
.sidebar-list-item:hover{background:var(--bg-sidebar-hover)}
.sidebar-list-item.is-active{background:var(--bg);color:var(--bg-sidebar)}
.sidebar-list-item-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.sidebar-list-item-badge{
  font-size:11px;padding:2px 7px;border-radius:var(--radius-button);
  background:var(--bg-sidebar-border);color:var(--sidebar-text-muted);flex-shrink:0;
}
.sidebar-list-item.is-active .sidebar-list-item-badge{background:#eee;color:#111}
.sidebar-list-empty{padding:12px;font-size:12px;color:var(--sidebar-text-muted)}

/* Sub-Items pro Modul: nur sichtbar wenn parent-<a class="is-active is-with-subs"> */
.sidebar-subs{
  display:none;flex-direction:column;gap:0;
  padding:4px 0 8px 16px;
  border-left:1px solid var(--bg-sidebar-border);
  margin:2px 0 4px 12px;
}
.sidebar-nav-item.is-active.is-with-subs + .sidebar-subs{display:flex}
.sidebar-sub-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 12px;font-size:16px;font-weight:600;
  color:var(--sidebar-text-muted);
  text-decoration:none;cursor:pointer;user-select:none;
  border-radius:var(--radius);background:transparent;border:none;
  text-align:left;letter-spacing:-0.02em;font-family:inherit;
  transition:background .15s,color .15s;
}
.sidebar-sub-item svg{opacity:.55;flex-shrink:0}
.sidebar-sub-item:hover{background:var(--bg-sidebar-hover);color:var(--sidebar-text)}
.sidebar-sub-item.is-active{background:var(--bg);color:var(--bg-sidebar)}
.sidebar-sub-item.is-active svg{opacity:1}
.sidebar-sub-list{display:flex;flex-direction:column;gap:0;margin-top:4px}
.sidebar-sub-list:empty{display:none}
.sidebar-sub-list-item{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:5px 10px;font-size:12px;color:var(--sidebar-text-muted);
  text-decoration:none;border-radius:var(--radius);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-sub-list-item:hover{background:var(--bg-sidebar-hover);color:var(--sidebar-text)}
.sidebar-sub-list-item.is-active{background:var(--bg);color:var(--bg-sidebar)}
.sidebar-sub-list-item-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.sidebar-sub-list-empty{padding:6px 10px;font-size:11px;color:var(--sidebar-text-muted)}

/* Kein overflow auf .main — das Document scrollt, die Sidebar ist sticky.
   overflow-y:auto würde .main zum Scroll-Container machen, aber ohne eigene
   Höhe scrollt .main nichts → sticky-Page-Header hängt an einem inerten
   Container und funktioniert nicht mehr. */
.main{flex:1;min-width:0}
.view{min-height:100vh}
/* overflow-x:clip kappt seitlich rausragende Form-Tooltips (.field-help::after,
   360px breit, in der rechten Spalte) — sonst erzeugt die per visibility:hidden
   versteckte Bubble dauerhaft einen horizontalen Scrollbalken. clip (kein
   scroll-container) lässt overflow-y:visible erhalten → sticky page-header +
   nach oben/unten aufklappende Tooltips/Dropdowns bleiben sichtbar. */
.content-area{max-width:1400px;margin:0 auto;padding:0 var(--space-page) 80px;overflow-x:clip}

/* ──────────────────────────────────────────────────────────
   Baukasten v1 — Page-Header, Section, Field-Grid
   ────────────────────────────────────────────────────────── */

/* Sticky-Header: Title links + Actions rechts. Lebt direkt im .content-area
   und zieht sich per negativem horizontalen Margin auf volle Container-Breite. */
.page-header{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin:0 calc(var(--space-page) * -1) var(--space-page);
  padding:var(--space-page) var(--space-page) 20px;
  background:var(--bg);
}
/* Sanfter Fade-Verlauf unter dem Sticky-Header: durchscrollender Content
   verschwindet weich, statt mit harter Kante hinter den Header zu rutschen.
   Pseudo-Element sitzt im margin-bottom-Bereich (top:100% relativ zum Header-
   Box), wird durch position:sticky des Headers automatisch mitgenommen. */
.page-header::after{
  content:'';position:absolute;left:0;right:0;top:100%;
  height:24px;pointer-events:none;
  background:linear-gradient(to bottom, var(--bg), transparent);
}
/* min-height entspricht H1 (~28px) + gap (4px) + Subline (~20px) = 52px.
   Damit ist die Page-Header-Höhe konsistent über alle Modul-Seiten, egal
   ob sie eine Subline haben (Dashboard) oder nicht (MPA-Liste, TV-Liste).
   Erste Content-Reihe (Tiles, Filter-Bar, KPI-Row) sitzt dann auf allen
   Seiten am selben Y. */
.page-header-title{display:flex;flex-direction:column;gap:4px;min-width:0;min-height:52px}
.page-header-title h1{font-size:24px;letter-spacing:-0.04em;line-height:1.15;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-header-title .subline{font-size:14px;color:#444;line-height:1.4}
.page-header-title .subline a{color:inherit}
.page-header-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;align-items:center}
/* Status-Pill rechts neben dem Titel. Vokabular analog zu .row-tag aus der
   MPA-Liste, aber etwas größer (passt zur H1-Höhe). */
.page-status-pill{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:8px;line-height:1;
  border:2px solid var(--border);color:var(--muted);background:transparent;
  align-self:center;white-space:nowrap;
}
.page-status-pill.is-ready{border-color:var(--ci);color:var(--ci)}
.page-status-pill.is-live{border-color:#2a6b18;color:#2a6b18}
.page-status-pill.is-offline{border-color:#a55;color:#a55}
.page-status-pill.is-archived{border-color:#cfcfcf;color:#999;background:#f3f2ef}
/* Overflow-Menü im Header: kleiner Drei-Punkte-Button mit Dropdown. */
.header-menu{position:relative;display:inline-flex}
/* Trigger: 32×32-Kreis im neutralen Sekundär-Look — gleiche Form/Größe wie
   die .mpa-kpi-toggle Edit-Buttons, aber grau statt CI-gold (sonst wären
   zu viele goldene Buttons nebeneinander). */
.header-menu-trigger{
  width:32px;height:32px;padding:0;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:#e8e4db;border:0;cursor:pointer;color:#111;
  border-radius:50%;transition:background .15s;
}
.header-menu-trigger:hover{background:#d8d2c4}
.header-menu-trigger svg{width:18px;height:18px}
.header-menu-list{
  position:absolute;top:calc(100% + 6px);right:0;z-index:40;
  min-width:220px;
  background:#fff;border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06);
  padding:6px;display:flex;flex-direction:column;gap:2px;
}
.header-menu-list[hidden]{display:none}
.header-menu-item{
  display:flex;align-items:center;gap:10px;
  background:transparent;border:0;appearance:none;cursor:pointer;
  font:inherit;font-size:14px;color:#111;
  padding:8px 10px;border-radius:6px;text-align:left;width:100%;
}
.header-menu-item svg{width:14px;height:14px;flex-shrink:0;color:var(--muted)}
.header-menu-item:hover{background:#f0f0f0}
.header-menu-item.is-danger{color:#c62828}
.header-menu-item.is-danger svg{color:#c62828}
.header-menu-item.is-danger:hover{background:#fde4e4}
.header-menu-sep{height:1px;background:var(--border);margin:4px 0}
@media (max-width:760px){
  .page-header{flex-direction:column;align-items:stretch;padding:16px var(--space-page)}
  .page-header-actions{justify-content:flex-start}
}

/* Section: Card mit 2-Spalten-Layout (Title-Info links, Body rechts) */
.section{
  background:#fff;border-radius:var(--radius);
  padding:28px;margin-bottom:30px;
  display:grid;grid-template-columns:minmax(180px,240px) 1fr;
  gap:32px;align-items:start;
}
.section-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.section-info h2{font-size:17px;letter-spacing:-0.03em;line-height:1.3}
.section-info .desc{font-size:14px;color:var(--muted);line-height:1.5}
/* Admin-Sub-Tabs (Cache/Activity/Audit/Backup) — Einleitungstext über der
   Tabelle prominenter: schwarz statt muted, 16px statt 14px. */
.section.admin-info .section-info .desc{color:#111;font-size:16px}
.section-info .label{color:var(--muted);font-size:11px}
.section-body{min-width:0;display:flex;flex-direction:column;gap:18px}
.section-actions{
  display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;
  margin-top:4px;
}
.section-actions--left{justify-content:flex-start}
.section-actions--between{justify-content:space-between}
@media (max-width:800px){
  .section{grid-template-columns:1fr;gap:18px;padding:22px}
}

/* Vollbreite-Variante (Title oben, Body darunter) */
.section--full{grid-template-columns:1fr;gap:14px}

/* Layouts ohne Title (z. B. reine Card mit Body) */
.section--bare{grid-template-columns:1fr;gap:0}
.section--bare .section-info{display:none}

/* Zwei Sections in einer 50/50-Reihe (z. B. Veröffentlichung + Inhaber). Innen-Sections
   werden automatisch auf `--full`-Layout gezwungen, weil die Außenbreite zu schmal für
   das 240px-Title-Grid wäre. */
.section-row{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:30px}
.section-row--3{grid-template-columns:1fr 1fr 1fr}
.section-row > .section{margin-bottom:0;grid-template-columns:1fr;gap:14px}
@media (max-width:1100px){.section-row--3{grid-template-columns:1fr 1fr}}
@media (max-width:800px){.section-row,.section-row--3{grid-template-columns:1fr}}

/* Field-Grid für Forms in .section-body */
.field-grid{display:grid;gap:12px 14px}
.field-grid--2{grid-template-columns:1fr 1fr}
.field-grid--3{grid-template-columns:repeat(3,1fr)}
.field-grid--3 .field-wide,
.field-grid .field-wide{grid-column:span 2}
@media (max-width:760px){
  .field-grid--2,.field-grid--3{grid-template-columns:1fr}
  .field-grid .field-wide{grid-column:auto}
}

/* BORIS-NRW Layer-Auswahl im MPA-Form — Pills mit Mini-Sparkline pro Layer.
   So sieht der Mitarbeiter auf einen Blick, welche Zone wie viele Daten hat. */
.boris-empty{
  font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
}
.boris-pill-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.boris-pill{
  appearance:none;
  border:2px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:14px;
  cursor:pointer;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-family:inherit;
  color:#111;
  transition:border-color .15s,background .15s;
}
.boris-pill:hover{border-color:var(--ci)}
.boris-pill.is-active{
  border-color:var(--ci);
  background:var(--gold-bg);
}
.boris-pill.is-locked{
  cursor:default;
  border-color:var(--ci);
  background:var(--gold-bg);
}
.boris-pill__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}
.boris-pill__label{
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.25;
}
.boris-pill__badge{
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ci);
  border:1px solid var(--ci);
  border-radius:4px;
  padding:2px 5px;
  white-space:nowrap;
}
.boris-pill__brw{
  font-size:18px;
  font-weight:700;
  letter-spacing:-.02em;
}
.boris-pill__count{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
}
.boris-pill__chart{
  margin-top:2px;
  color:var(--ci);
}
.boris-pill__chart .boris-sparkline-svg{
  width:100%;
  height:40px;
  display:block;
}
.boris-pill__chart .boris-sparkline-axis{
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  margin-top:2px;
}
.boris-pill__chart .boris-sparkline-empty{
  font-size:11px;
  color:var(--muted);
  font-style:italic;
  padding:12px 0;
  text-align:center;
}


/* Cards / Lists */
.card{background:#fff;border-radius:var(--radius);padding:20px;margin-bottom:16px}
.list{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;background:#fff;border-radius:var(--radius);cursor:pointer;transition:background .15s}
.row:hover{background:var(--gold-bg)}
.row-main{display:flex;gap:14px;align-items:center;min-width:0}
.row-thumb{width:56px;height:56px;border-radius:8px;background:#eee center/cover no-repeat;flex-shrink:0}
.row-text{min-width:0}
.row-title{font-weight:700;font-size:14px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-tag{font-size:11px;padding:3px 10px;border-radius:8px;background:transparent;color:#111;border:2px solid var(--border);font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.row-tag.ok{border-color:#2a6b18;color:#2a6b18}
.row-tag.is-ready{border-color:var(--ci);color:var(--ci)}
.row-tag.is-offline{border-color:#a55;color:#a55}
.row-tag.is-archived{border-color:#cfcfcf;color:#999;background:#f3f2ef}

/* MPA-Liste: Spalten-Layout (alle Reihen vertikal aligned) */
.mpa-list .row{display:grid;grid-template-columns:1fr 140px 112px;align-items:center;gap:24px}
.mpa-list.has-contact .row{grid-template-columns:1fr 160px 140px 112px}
.mpa-filter-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:20px}
/* Chip-Gruppe in der Filter-Bar: kein Bottom-Margin (Bar steuert den Abstand). */
.mpa-filter-bar .chips{margin-bottom:0}
.row-owner{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-value{font-weight:700;font-size:14px;color:#111;white-space:nowrap;text-align:right}
.row-value-suffix{font-weight:400;font-size:12px;color:var(--muted)}
.row-value-empty{color:var(--muted);font-weight:400}
.row-status{text-align:right}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius-button);font-weight:700;font-size:14px;font-family:inherit;border:2px solid transparent;cursor:pointer;text-decoration:none;background:var(--ci);color:#fff;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:#9d8a3b}
.btn-primary{background:var(--ci);color:#fff;border-color:transparent}
.btn-primary:hover{background:#9d8a3b}
.btn-secondary{background:#e8e4db;color:#111;border-color:transparent}
.btn-secondary:hover{background:#d8d2c4}
.btn-danger{background:#fde4e4;color:#c73030;border-color:transparent}
.btn-danger:hover{background:#c73030;color:#fff}
.btn-sm{padding:6px 14px;font-size:12px}
.btn svg{width:14px;height:14px;flex-shrink:0}
.btn-sm svg{width:13px;height:13px}

/* Inputs */
.input,.select,textarea{width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:var(--radius);background:#fff;font-family:inherit;font-size:14px;color:#111}
.input:focus,.select:focus,textarea:focus{outline:none;border-color:#111}
.field{margin-bottom:14px}
.field label{display:block;margin-bottom:6px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}


/* Search dropdown */
.search-wrap{position:relative;margin-bottom:16px}
.search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border-radius:var(--radius);max-height:420px;overflow-y:auto;z-index:10;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.search-result{display:flex;gap:12px;padding:12px;align-items:center;cursor:pointer;border-bottom:1px solid var(--border)}
.search-result:last-child{border-bottom:none}
.search-result:hover{background:var(--gold-bg)}

/* MPA detail */
.detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start}
@media (max-width:900px){.detail-grid{grid-template-columns:1fr}}
.hero{aspect-ratio:16/9;border-radius:var(--radius);background:#ddd center/cover no-repeat;margin-bottom:16px}

.pills{display:flex;flex-wrap:wrap;gap:8px}

/* "Neue MPA"-Auswahl: Bestand vs. Manuell */
.new-mpa-stack{display:flex;flex-direction:column;gap:20px}
.new-mpa-stack #estate-results{max-height:560px;overflow-y:auto;margin-top:4px}
.card-head-sm{margin-bottom:16px}
.card-head-sm h3{margin:0 0 4px}

/* Neue-MPA-Wizard: onOffice-Lookup-Bar + manuelle Adresse in einer Section.
   Bar-Layout (Input + Button), Status-Zeile, Trenn-Linie zwischen den beiden Eingabewegen. */
.onoffice-lookup{display:flex;flex-direction:column;gap:10px}
.onoffice-lookup-bar{display:flex;gap:10px;align-items:stretch}
.onoffice-lookup-bar .input{flex:1;min-width:0}
.onoffice-lookup-status{font-size:14px;color:var(--muted);min-height:20px}
.onoffice-lookup-ok{color:#2a8a2a;font-weight:700}
.onoffice-lookup-error{color:#b00;font-weight:700}
.onoffice-lookup-divider{display:flex;align-items:center;gap:12px;margin:18px 0 6px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.onoffice-lookup-divider::before,
.onoffice-lookup-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.onoffice-lookup-divider span{flex:0 0 auto}

/* OS.estatePicker — wiederverwendbarer onOffice-Estate-Picker (TV + MPA + künftige Module). */
.estate-picker{display:flex;flex-direction:column;gap:10px}
.estate-picker-search{width:100%}
.estate-picker-status{font-size:14px;color:var(--muted);min-height:20px}
.estate-picker-status--error{color:#b00;font-weight:700}
.estate-picker-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}
.estate-picker-list:empty{display:none}
.estate-picker-row{display:flex;align-items:center;gap:12px;padding:10px;background:#fff;border-radius:var(--radius);cursor:pointer;transition:background .15s}
.estate-picker-row:hover{background:var(--gold-bg)}
.estate-picker-thumb{width:64px;height:48px;background:#eee center/cover no-repeat;border-radius:8px;flex-shrink:0}
.estate-picker-meta{flex:1;min-width:0}
.estate-picker-title{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.estate-picker-sub{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.estate-picker-tag{flex-shrink:0;padding:3px 10px;border-radius:8px;border:2px solid;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.estate-picker-tag--active{border-color:#2a8a2a;color:#2a8a2a}
.estate-picker-tag--reserved{border-color:#d97706;color:#d97706}
.estate-picker-tag--sold{border-color:#b00;color:#b00}
.estate-picker-tag--draft{border-color:var(--ci);color:var(--ci)}
.estate-picker-empty{padding:10px;font-size:14px;color:var(--muted)}
.estate-picker-expand{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.estate-picker-expand[hidden]{display:none}
.estate-picker-expand-btn{appearance:none;background:none;border:none;padding:0;font:inherit;font-size:13px;color:var(--ci);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(180,157,69,.4);transition:text-decoration-color .15s}
.estate-picker-expand-btn:hover{text-decoration-color:var(--ci)}
.estate-picker-expand-btn:disabled{opacity:.5;cursor:wait}

/* MPA Formular (Objektdaten) — Wrapper um mehrere .section-Cards, hält data-type für Show/Hide */
.mpa-form{display:block}
.form-block{display:flex;flex-direction:column;gap:10px}
.form-block-label{font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px}
.form-grid-3{grid-template-columns:1.6fr 1fr 1fr}
@media(max-width:760px){.form-grid,.form-grid-3{grid-template-columns:1fr 1fr}}
.form-grid .field-wide{grid-column:span 2}
.field label{display:block;font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}

/* Typ-/Deal-Toggle Buttons */
.typo-row{display:inline-flex;gap:0;background:#f4f3ef;border:1px solid var(--border);border-radius:var(--radius-button);padding:3px}
.typo-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:-0.01em;padding:8px 16px;border-radius:var(--radius-button);cursor:pointer;color:#444;transition:all .15s}
.typo-btn:hover{color:#111}
.typo-btn.is-active{background:#111;color:#fff}
.typo-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:inherit}
.typo-btn-icon svg{width:100%;height:100%;display:block}

/* Segmented Ja/Nein-Toggle (gleiche Optik wie .typo-row, aber Radio-basiert
   mit reinem :checked-Active-State — z. B. „Termin vor Ort?" im MPA-Form). */
.seg-toggle{display:inline-flex;align-items:center;gap:0;background:#f4f3ef;border:2px solid var(--border);border-radius:var(--radius-button);padding:3px}
/* Spezifität (0,2,0) nötig, weil `.field label` (0,1,1) sonst display:block +
   margin-bottom:4px durchdrückt — Letzteres schob den Pill nach oben (4px mehr
   Luft unten). margin:0 + flex stellt die saubere vertikale Zentrierung her. */
.seg-toggle .seg-toggle__opt{cursor:pointer;margin:0;display:flex;align-items:center}
.seg-toggle .seg-toggle__opt input{position:absolute;opacity:0;width:0;height:0}
/* padding-y 11px → Pill 36px → Track 46px (= Höhe von .input/.select daneben). */
.seg-toggle .seg-toggle__opt span{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:11px 18px;line-height:1;border-radius:var(--radius-button);font-size:14px;font-weight:700;letter-spacing:-0.01em;color:#444;transition:all .15s}
.seg-toggle .seg-toggle__opt:hover span{color:#111}
.seg-toggle .seg-toggle__opt input:checked + span{background:#111;color:#fff}

/* PH-Style Prefix-Icon im Input: Icon sitzt links im Feld, Input bekommt linkes
   Padding, damit der eingegebene Wert nicht aufs Icon läuft. */
.field-icon-prefix{position:relative}
.field-icon-prefix .input,.field-icon-prefix .select{padding-left:44px}
.field-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:#111;pointer-events:none;display:inline-flex;align-items:center;justify-content:center}
.field-icon svg{width:100%;height:100%;display:block}

/* Systemnachricht (Admin-Broadcast) — E-Mail-Compose-Fenster (volle Content-Breite) */
.mail-compose-lead{font-size:13px;line-height:1.5;margin:0 0 18px}
.mail-compose{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.mail-compose__head{padding:12px 18px;background:#111;color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em}
.mail-compose__rows{display:flex;flex-direction:column}
.mail-row{display:flex;align-items:flex-start;gap:14px;padding:11px 18px;border-bottom:1px solid var(--border)}
.mail-row__label{flex:0 0 60px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding-top:7px}
.mail-row__value{font-size:14px;padding-top:6px}
.mail-row__input{flex:1;min-width:0;border:none;outline:none;font:inherit;font-size:14px;padding:6px 0;background:transparent;color:#111}
.mail-row--rcpt{align-items:stretch}
.mail-recipients{flex:1;min-width:0}
.mail-recipients__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-top:2px}
.mail-recipients__count{font-size:12px;color:var(--muted)}
.mail-recipients__tools{display:flex;gap:4px}
.mail-recipients__tools button{appearance:none;border:none;background:transparent;color:var(--ci);font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:2px 6px;border-radius:6px}
.mail-recipients__tools button:hover{background:var(--gold-bg)}
/* Empfänger als flowende Pillen (Chip + Checkbox), wie die An-Zeile im Mailprogramm */
.mail-chips{display:flex;flex-wrap:wrap;gap:8px}
.mail-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:6px 14px 6px 11px;border-radius:100px;border:0;background:var(--bg);font-size:13px;cursor:pointer;user-select:none;transition:background .12s,opacity .12s,filter .12s}
.mail-chip input{margin:0;flex:0 0 auto;width:15px;height:15px;accent-color:var(--ci);cursor:pointer}
.mail-chip__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.mail-chip:has(input:checked){background:var(--gold-bg)}
.mail-chip:has(input:not(:checked)){opacity:.55}
.mail-chip:has(input:not(:checked)) .mail-chip__name{text-decoration:line-through;font-weight:400}
.mail-chip:hover{filter:brightness(.96)}
.mail-recipients__empty{font-size:13px;color:var(--muted)}
.mail-compose__textarea{width:100%;border:none;outline:none;font:inherit;font-size:14px;line-height:1.5;padding:16px 18px;min-height:240px;resize:vertical;color:#111;display:block}
.mail-compose__foot{display:flex;align-items:center;gap:16px;padding:14px 18px;border-top:1px solid var(--border);background:var(--bg)}
.mail-compose__hint{font-size:12px;color:var(--muted)}
.mail-compose__hint code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;background:var(--gold-bg);border:1px solid var(--gold-border);border-radius:4px;padding:1px 5px}

/* Anschreiben-Textarea + Reset-Bar */
.mpa-intro-textarea{min-height:200px;font-family:inherit;line-height:1.5;resize:vertical}
.mpa-intro-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:8px;flex-wrap:wrap}
.mpa-intro-hint{font-size:12px}

/* Eigentümer-Card (aus onOffice gezogen) — sitzt als 3. Spalte in der section-row
   neben Einwertungstermin + Ansprechpartner. Klick auf die goldene Briefanrede
   kopiert sie ins Clipboard. Bei Ehepaar mehrere Rows untereinander, durch eine
   feine Goldlinie getrennt. */
/* Eigentümer-Kurzinfo in der linken Info-Spalte der Anschreiben-Section
   (ersetzt 2026-05-28 die frühere eigene „Eigentümer"-Karte). Dezent, ohne
   eigene Box — nur durch den Break (margin-top) vom Beschreibungstext getrennt.
   Das Label nutzt den .section-info .label-Look (= wie das „Anschreiben"-Label). */
.mpa-owner-hint{margin-top:16px}
.mpa-owner-hint .label{display:block;margin-bottom:4px}
.mpa-owner-hint__name{font-size:14px;font-weight:700;color:#111;line-height:1.4}

/* Hinweis-Code-Pille im Intro-Hint (z. B. {{anrede}}) */
.mpa-intro-hint code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px;
  background:var(--gold-bg);
  padding:1px 6px;
  border-radius:4px;
  border:1px solid var(--gold-border);
  color:#1d1d1f;
}

/* „Manuell"-Pill am Feld-Label: zeigt, dass das Feld NICHT aus onOffice gezogen wird
   (tenant-seitig Inaktiv oder im Schema gar nicht vorhanden). Hover-Tooltip via title="…". */
.field-manual{display:inline-block;padding:2px 7px;margin-left:8px;border:1px solid var(--ci);color:var(--ci);border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px;cursor:help}

/* „PH"-Pill am Feld-Label: markiert Felder, deren Wert in die PriceHubble-Bewertung
   einfließt (= im PH-API-Payload landet, nicht nur Anzeige). Gleicher Look wie
   `.field-manual` — 1 px Outline, 4 px Radius, kleine Caps. Bei vielen Pills auf einer
   Seite wirkt das ruhiger als die runden Filled-Kreise. */
.field-ph{display:inline-block;padding:0px 5px;margin-left:5px;border:1px solid var(--ci);color:var(--ci);border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px;cursor:help}

/* Multi-Select-Dropdown (Heizungsart, Klimatisierung, SmartHome).
   Button + ausklappendes Popup mit Checkbox-Liste. Native <select multiple>
   wäre uncomfortable (Ctrl+Click), Checkbox-Popup ist diskoverbar. */
/* Social-Media-Vergleich-Kachel (MPA-Detail): Städte-Auswahl fürs Report-Ranking */
.soc-cmp__intro{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--muted)}
.soc-cmp__list{display:flex;flex-direction:column}
.soc-cmp__row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:var(--radius);cursor:pointer;
  transition:background .12s;
}
.soc-cmp__row:hover{background:var(--gold-bg)}
.soc-cmp__row:has(input:checked){background:var(--gold-bg)}
.soc-cmp__row input{width:17px;height:17px;accent-color:var(--ci);flex-shrink:0;cursor:pointer}
.soc-cmp__city{font-size:14px;font-weight:600;color:#111}
.soc-cmp__row:has(input:checked) .soc-cmp__city{color:var(--ci)}
.soc-cmp__meta{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.soc-cmp__more{margin-top:6px}
.soc-cmp__more summary{
  cursor:pointer;font-size:13px;font-weight:600;color:var(--ci);
  padding:8px 12px;list-style:none;
}
.soc-cmp__more summary::-webkit-details-marker{display:none}
.soc-cmp__more summary::before{content:"▸ ";font-size:10px}
.soc-cmp__more[open] summary::before{content:"▾ "}

.multiselect{position:relative}
.multiselect-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:10px 14px;
  border:2px solid var(--border);border-radius:var(--radius);
  background:#fff;color:#111;
  font-family:inherit;font-size:14px;text-align:left;
  cursor:pointer;
}
.multiselect-btn:hover{border-color:#bbb}
.multiselect-btn:focus{outline:none;border-color:#111}
.multiselect-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.multiselect-arrow{font-size:10px;color:var(--muted);flex-shrink:0}
.multiselect-popup{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;
  max-height:260px;overflow-y:auto;
  background:#fff;border:2px solid #111;border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,0,0,0.12);
}
.multiselect-popup.hidden{display:none}
/* Specificity-Anchor: `.field label` (im Form) hat höhere Specificity als
   `.multiselect-option` allein → das doppelte Class-Selector hebt uns drüber.
   Sonst würde der Caps-Style von Field-Labels kaskadieren und die Optionen
   wären alle in Großbuchstaben. */
.field .multiselect-option,
.multiselect-option{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  font-size:14px;font-weight:400;color:#111;cursor:pointer;
  letter-spacing:0;text-transform:none;
  margin-bottom:0;
  border-bottom:1px solid #f0f0f0;
}
.multiselect-option:last-child{border-bottom:none}
.multiselect-option:hover{background:var(--gold-bg)}
.multiselect-option input{margin:0;cursor:pointer;width:16px;height:16px;accent-color:var(--ci)}
.multiselect-empty{padding:14px;color:var(--muted);font-size:14px}

/* Rating-Buttons (Qualität / Zustand) */
.rating-row{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:12px}
@media(max-width:620px){.rating-row{grid-template-columns:1fr;gap:6px}}
.rating-label{font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.rating-buttons{display:flex;gap:6px;flex-wrap:wrap}
.rating-btn{background:#fff;border:2px solid var(--border);border-radius:var(--radius-button);padding:6px 12px;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:-0.01em;color:#444;cursor:pointer;transition:all .15s}
.rating-btn:hover{border-color:#111;color:#111}
.rating-btn.is-active{background:#111;color:#fff;border-color:#111}

/* Kombinierte Qualität+Zustand-Matrix: 7 Pill-Spalten gleicher Breite (4 Qualität + 3 Zustand),
   damit alle Stufen vertikal über den Zeilen alignen. fr-Ratio 4:3 zwischen den beiden
   Gruppen → pro Pill identische Breite. Label-Spalte fix auf 100px (fits „BADEZIMMER"). */
.rating-pair-grid{display:grid;grid-template-columns:100px minmax(0,4fr) minmax(0,3fr);gap:10px 40px;align-items:center}
.rating-pair-head{font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.rating-pair-label{font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.04em}

.rating-btn.has-tip{position:relative}
.rating-btn.has-tip:hover::after,.rating-btn.has-tip:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:#111;color:#fff;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.5;padding:10px 14px;border-radius:8px;white-space:normal;width:max-content;max-width:320px;z-index:50;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,0.18)}
.rating-btn.has-tip:hover::before,.rating-btn.has-tip:focus-visible::before{content:'';position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);border:6px solid transparent;border-top-color:#111;z-index:50;pointer-events:none}
.rating-row-naked{display:block;min-width:0}
/* Buttons-Container ist ein eigenes Grid mit gleichen Spaltenbreiten. Damit ist jeder
   Pill im Q-Block 1/4 der Q-Sektion breit und jeder Pill im Z-Block 1/3 der Z-Sektion.
   Weil das outer-Grid die Sektions-Breiten im 4:3-Verhältnis hat, sind ALLE Pills gleich
   breit — vertikale Ausrichtung über alle Zeilen. */
.rating-row-naked .rating-buttons{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.rating-row-naked .rating-btn{padding:6px 6px;font-size:11px;letter-spacing:-0.02em;white-space:nowrap;text-align:center;min-width:0}
@media(max-width:760px){
  .rating-pair-grid{grid-template-columns:1fr;gap:4px}
  .rating-pair-head{display:none}
  .rating-pair-label{margin-top:10px}
}

/* Toggle (Checkbox-als-Pill) */
.toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.toggle input{appearance:none;width:34px;height:20px;background:#ddd;border-radius:10px;position:relative;cursor:pointer;transition:background .15s;margin:0}
.toggle input:checked{background:#1f7d1f}
.toggle input::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:left .15s}
.toggle input:checked::before{left:16px}
.toggle span{font-size:12px;font-weight:700;color:var(--muted)}
.toggle input:checked + span{color:#1f7d1f}

/* Typabhängige Sichtbarkeit */
.mpa-form .type-apartment-only,
.mpa-form .type-house-only,
.mpa-form .type-mfh-only{display:none}
.mpa-form[data-type="apartment"] .type-apartment-only{display:block}
.mpa-form[data-type="apartment"] .type-apartment-only.field{display:block}
.mpa-form[data-type="house"] .type-house-only{display:block}
.mpa-form[data-type="house"] .type-house-only.field{display:block}
.mpa-form[data-type="multi_family_house"] .type-mfh-only{display:block}
.mpa-form[data-type="multi_family_house"] .type-mfh-only.field{display:block}
.mpa-form[data-type="multi_family_house"] .type-not-mfh{display:none}
.mpa-form[data-type="apartment"] .type-not-apartment{display:none}
.mpa-form[data-type="house"] .type-not-house{display:none}

/* Rating-Pair-Grid: type-restricted Children (z. B. `type-house-only` an Mauerwerk-
   Row) müssen ihren Grid-Item-Default behalten, nicht als block rendern — sonst
   sprengt's das 3-Spalten-Layout. `display:revert` greift den Browser-Default zurück. */
.mpa-form[data-type="house"] .rating-pair-grid > .type-house-only{display:revert}

/* Leere Pflichtfelder bekommen einen roten Border — Live-Validation, geht
   weg sobald der User einen Wert eingibt. Rating-Pills via Wrapper-Klasse,
   weil Buttons keine echte Border-Color haben. */
.input.is-missing,
.input.is-invalid,
.select.is-missing,
.select.is-invalid,
textarea.is-missing,
textarea.is-invalid,
.multiselect-btn.is-missing{
  border-color:#dc2626 !important;
}
/* CI-Gold-Border für optionale, noch nicht ausgefüllte Number-Inputs —
   visuelle Erinnerung im Brand-Ton, dass das Feld bewusst leer gelassen
   werden kann. Blockt nichts. Pflicht-Rot überschreibt den Gold-Border. */
.input.is-optional-empty{
  border-color:var(--ci);
}

/* Legende am Form-Ende, erklärt die Border-Farben (Rot = Pflicht, Gelb = optional).
   Dezent in Caps-Label-Style — bleibt im Sichtfeld, lenkt aber nicht ab. */
.mpa-form-legend{
  display:flex;flex-wrap:wrap;gap:20px;margin-top:32px;
  font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;font-weight:700;
}
.mpa-form-legend-dot{
  display:inline-block;width:10px;height:10px;border-radius:3px;
  margin-right:6px;vertical-align:-1px;border:2px solid;
}
.mpa-form-legend-dot--required{border-color:#dc2626}
.mpa-form-legend-dot--optional{border-color:var(--ci)}
/* Rote Markierung leerer Pflicht-Ratings — nur das Bauteil-Label wird rot, die Pills
   bleiben unangetastet (sonst wirkt jede Option „fehlerhaft" statt „bitte wählen").
   Alle Typen (Wohnung/Haus/MFH) nutzen die `.rating-pair-grid`-Matrix, das Label ist
   überall `.rating-pair-label`. */
.rating-pair-label.is-missing{
  color:#dc2626;
}
/* Datenstatus-Liste (MPA-Detail) */
.status-list{display:flex;flex-direction:column;gap:10px}
.status-row{display:flex;gap:10px;align-items:flex-start}
.status-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0}
.status-dot.is-ok{background:#1f7d1f}
.status-dot.is-off{background:#ccc}
.status-body{flex:1;min-width:0}
.status-label{font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.status-detail{font-size:12px;color:var(--muted);margin-top:1px}

/* MPA-Result-Sektion (oberhalb des Formulars) */
.mpa-result{margin-bottom:30px}

/* Hero-Bild voll-breit oben (Phase 1/2/3). */
.mpa-hero-wide{margin-bottom:24px}
.mpa-hero-wide .hero{aspect-ratio:21/9;margin-bottom:0;min-height:280px}
@media (max-width:900px){
  .mpa-hero-wide .hero{aspect-ratio:16/9;min-height:0;height:auto}
}

/* Hero + Adresse 2-spaltig oben (50/50). Foto streckt sich auf die volle Höhe
   der Adress-Section (Grid `align-items:stretch` + Flex-Kinder mit `flex:1`),
   damit die zwei Spalten gleich hoch und gleich breit wirken. Aspect-Ratio
   wird bewusst nicht erzwungen — die Adresse-Card bestimmt die Höhe, das Foto
   passt sich an und cropt via `background-size:cover`. Auf schmalen Viewports
   klappen die Spalten unter; das Foto fällt dort wieder in ein 16:9-Aspect. */
.mpa-hero-address{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin-bottom:30px;
  align-items:stretch;
}
.mpa-hero-address__photo{display:flex;min-height:280px;position:relative}
/* Foto-Aktion oben rechts im Titelbild („Fotos neu laden" / „Mit onOffice
   verknüpfen"). Weiß statt Secondary-Beige, damit sie auf Foto UND Platzhalter lesbar ist. */
.mpa-photo-action{position:absolute;top:12px;right:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.mpa-photo-action:hover{background:#f6f5f2}
/* „Mit onOffice verknüpfen" im MPA-Header: gelber Punkt als Dauer-Hinweis, dass
   die manuell angelegte Analyse noch keine onOffice-Verknüpfung hat. */
.btn-needs-link{position:relative}
.btn-needs-link::after{content:'';position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#e0a100;box-shadow:0 0 0 2px #fff}
.mpa-hero-address__photo .hero{flex:1 1 auto;aspect-ratio:auto;min-height:0;margin-bottom:0}
.mpa-hero-address__form{display:flex}
.mpa-hero-address__form > .section{flex:1 1 auto;margin-bottom:0}
@media (max-width:900px){
  .mpa-hero-address{grid-template-columns:1fr}
  .mpa-hero-address__photo{min-height:0}
  .mpa-hero-address__photo .hero{aspect-ratio:16/9}
}

/* Platzhalter wenn kein Titelbild aus onOffice da ist — gleicher Slot wie der
   Hero, damit das Layout konsistent bleibt. */
.mpa-hero-placeholder{
  flex:1 1 auto;
  border-radius:var(--radius);
  background:#f0efeb;
  color:#9a9a9a;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.mpa-hero-placeholder svg{width:40px;height:40px;opacity:0.6}
.mpa-hero-placeholder span{font-size:12px;letter-spacing:0.04em;text-transform:uppercase;font-weight:700}
@media (max-width:900px){
  .mpa-hero-placeholder{min-height:200px;aspect-ratio:16/9}
}

/* Valuation-Card mit 3 Spalten (Marktwert · Marktwertspanne · Konfidenznote)
   im Stil des Public-Reports (.rep-valuation). Spalten sind so breit wie
   ihr Inhalt; der Whitespace dazwischen wird per `space-between` gleich-
   mäßig verteilt — sonst quetscht die schmale Konfidenz-Spalte die
   Range-Spalte (deren nowrap-Text sonst überfließt). Pencil sitzt inline
   neben dem Marktwert-Wert. */
.mpa-valuation{padding:32px 36px;container-type:inline-size}
.mpa-valuation-row{
  display:flex;flex-wrap:nowrap;justify-content:space-between;
  gap:32px;align-items:flex-start;
}
.mpa-valuation-col{
  display:flex;flex-direction:column;gap:8px;min-width:0;
  padding-left:18px;border-left:3px solid var(--ci);
}
/* Wert + Pencil in einer Zeile, Pencil rückt direkt hinter den Marktwert. */
.mpa-valuation-value-row{
  display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
}

/* Inline-Edit: es swappt immer nur die angeklickte Spalte (Angebotspreis
   ODER Spanne) — Input in selber Größe wie der Wert, Cancel + Save als
   runde Icon-Buttons rechts daneben. So bleibt das Layout-Shift minimal
   und die übrigen Spalten bleiben sichtbar. Leerer Input + Speichern
   entfernt den Override. */
/* Kombinierter Selector schlägt das spätere `.mpa-kpi-edit{flex-direction:column}`.
   Sonst interpretiert `.mpa-valuation-input{flex:0 1 200px}` die 200 px als
   HÖHE (Main-Axis in einem column-Flex), Input wird riesig. */
.mpa-valuation-edit.mpa-kpi-edit{
  display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;
}
.mpa-valuation-input{
  font-family:inherit;
  font-size:18px;font-weight:700;letter-spacing:-0.02em;line-height:1.2;color:#111;
  padding:8px 12px;border:2px solid var(--ci);border-radius:8px;
  background:#fff;outline:none;
  box-sizing:border-box;
  min-width:0;width:auto;flex:0 1 200px;
  -moz-appearance:textfield;
}
.mpa-valuation-input:focus{box-shadow:0 0 0 3px var(--gold-bg)}
/* Spanne: zwei Inputs (von — bis) plus Trennstrich in einer Zeile. Deutlich
   schmaler als der Hauptwert-Input, damit die Zeile samt Trenner und den
   beiden Action-Buttons in die Spaltenbreite passt und nicht umbricht. */
/* Feste, schmale Breite statt `flex:1` — die Spalten der Card sind inhalts-
   getrieben (`space-between`, `nowrap`), eine wachsende Edit-Zeile würde die
   Nachbarspalten überlappen. 100 px fassen jeden realistischen Betrag. */
/* Doppel-Klassen-Selector, weil `.mpa-valuation-edit.mpa-kpi-edit` oben
   `flex-wrap:wrap` setzt — sonst rutschen die Action-Buttons in Zeile zwei. */
.mpa-valuation-edit--range.mpa-kpi-edit{gap:6px;flex-wrap:nowrap}
.mpa-valuation-edit--range .mpa-valuation-input{
  flex:0 0 100px;padding:8px 10px;
}
.mpa-valuation-edit-sep{
  font-size:18px;font-weight:700;color:var(--muted);flex-shrink:0;
}
/* Wiederverwendbar — wird auch von der TTL-Inline-Edit-Form genutzt. */
.mpa-valuation-edit-actions{display:flex;gap:6px;flex-shrink:0}
.mpa-valuation-icon-btn{
  width:32px;height:32px;flex-shrink:0;
  background:#f0f0f0;border:0;cursor:pointer;color:#444;
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.mpa-valuation-icon-btn:hover{background:#e0e0e0;color:#111}
.mpa-valuation-icon-btn.is-primary{background:var(--ci);color:#fff}
.mpa-valuation-icon-btn.is-primary:hover{background:#9a8538}
.mpa-valuation-icon-btn svg{width:14px;height:14px}
.mpa-valuation-label{
  font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.mpa-valuation-value{
  font-size:clamp(18px, 1.6vw, 28px);
  font-weight:700;letter-spacing:-0.03em;line-height:1.1;color:#111;
  white-space:nowrap;
}
.mpa-valuation-unit{
  font-size:0.55em;font-weight:500;color:var(--muted);margin-left:0.2em;
}
.mpa-valuation-sub{
  font-size:14px;color:var(--muted);
}
.mpa-valuation-orig{
  font-size:12px;color:var(--muted);
  margin-top:4px;padding-top:8px;
  border-top:1px solid var(--border);
}
/* Vier Spalten nebeneinander brauchen gut 1200 px, darunter zwei mal zwei, schmal untereinander. */
@container (max-width:1220px){
  .mpa-valuation-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
  .mpa-valuation-value{white-space:normal}
  .mpa-valuation-edit--range .mpa-valuation-input{flex-shrink:1}
}
@container (max-width:560px){
  .mpa-valuation-row{grid-template-columns:minmax(0,1fr);gap:24px}
}

/* `.mpa-kpi` ist die einzige verbliebene Card-Wrapperklasse (jetzt
   nur noch von der Valuation-Card genutzt). `.mpa-kpi-view`/`.mpa-kpi-edit`
   sind die Toggle-Container, die das bestehende JS-Edit-Toggle-Logik
   ansteuert — Klassen bleiben generisch, damit künftige Inline-Edit-
   Sektionen sie wiederverwenden können. */
.mpa-kpi{margin-bottom:0;position:relative}
.mpa-kpi-toggle{
  width:32px;height:32px;flex-shrink:0;
  background:var(--ci);border:0;cursor:pointer;color:#fff;
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.mpa-kpi-toggle:hover{background:#9a8538}
.mpa-kpi-toggle svg{width:16px;height:16px}
/* `is-editing` sitzt am editierbaren Block (`[data-kpi-edit]`), nicht an der
   Card — pro Spalte ein eigener Edit-Zustand. */
.is-editing .mpa-kpi-toggle{display:none}
.mpa-kpi-edit{display:flex;flex-direction:column;gap:10px}
.mpa-kpi-edit[hidden],.mpa-kpi-view[hidden]{display:none}

/* Next-Step-Banner über dem Content (Phase 1/2). Full-width über die ganze
   Content-Breite, mit Headline + Subline und direkter Anweisung. Goldener
   Cream-BG als Default, roter Alert-BG bei fehlenden Pflichtfeldern. Refresh
   passiert in `refreshEnrichGating` — nur Phase 1 ist dynamisch, Phase 2
   hat einen statischen Banner („Bewertung ist abgerufen"). */
.mpa-step-banner{
  display:flex;align-items:flex-start;gap:16px;
  background:#e8e4db;
  border-radius:var(--radius);
  padding:18px 22px;
  margin-bottom:24px;
}
.mpa-step-banner__icon{
  flex:0 0 32px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ci);
}
.mpa-step-banner__icon svg{width:28px;height:28px;stroke-width:2.5}
.mpa-step-banner__content{flex:1 1 auto;min-width:0}
.mpa-step-banner__head{
  font-size:18px;font-weight:700;letter-spacing:-.03em;
  line-height:1.2;color:#1d1d1f;
  margin-bottom:4px;
}
.mpa-step-banner__sub{
  font-size:14px;color:#444;line-height:1.5;
}
.mpa-step-banner--missing,
.mpa-step-banner--error{background:#fde4e4}
.mpa-step-banner--missing .mpa-step-banner__icon,
.mpa-step-banner--error .mpa-step-banner__icon{color:#dc2626}
.mpa-step-banner--missing .mpa-step-banner__icon svg,
.mpa-step-banner--error .mpa-step-banner__icon svg{stroke-width:3}

/* MPA · Bewertung Hilfe (#/mpa/guide) — Cheat-Sheet für Mitarbeiter mit Tier-
   Sections (Pflicht / Optional / Ignoriert). Listen-Layout (label / why / hint
   in 3 Spalten) statt fetter Cards für besseres Scannen. Property-Typ-Filter
   oben blendet Rows aus, die für den gewählten Typ nicht relevant sind. */
.mpa-guide{display:flex;flex-direction:column;gap:40px;margin-top:24px}

.mpa-guide-rules{
  background:#e8e4db;border-radius:var(--radius);padding:24px 28px;
}
.mpa-guide-rules__title{
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#111;margin:0 0 12px;
}
.mpa-guide-rules ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.mpa-guide-rules li{font-size:14px;line-height:1.55;color:#222}

.mpa-guide-tier{display:flex;flex-direction:column;gap:14px}
.mpa-guide-tier__header{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mpa-guide-tier__badge{
  display:inline-block;font-size:12px;font-weight:700;
  padding:6px 12px;border-radius:8px;background:#f0f0f0;color:#222;
  letter-spacing:.02em;
}
.mpa-guide-tier--high  .mpa-guide-tier__badge{background:#fde4e4;color:#a01818}
.mpa-guide-tier--medium .mpa-guide-tier__badge{background:#faf5e8;color:var(--ci)}
.mpa-guide-tier--ignored .mpa-guide-tier__badge{background:#f0f0f0;color:#666}
.mpa-guide-tier__title{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0;color:#111}
.mpa-guide-tier__desc{font-size:14px;line-height:1.55;color:#555;margin:0;max-width:760px}

/* Listen-Layout (label / why / hint als 3 Spalten — Tabellen-Look ohne Tabelle,
   damit das auf Mobile sauber zusammenbricht). Rows haben weiße Cards mit
   dezenten Borders dazwischen statt vollwertigen Cards mit Padding-Box. */
.mpa-guide-list{
  background:#fff;border-radius:var(--radius);overflow:hidden;
}
.mpa-guide-row{
  display:grid;grid-template-columns:220px 1fr 180px;gap:24px;
  padding:14px 22px;border-bottom:1px solid #f0f0f0;
  align-items:start;
}
.mpa-guide-row:last-child{border-bottom:0}
.mpa-guide-row__label{
  font-size:14px;font-weight:700;color:#111;letter-spacing:-.01em;line-height:1.4;
}
.mpa-guide-row__api{
  font-size:11px;font-weight:400;color:#999;letter-spacing:0;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-top:2px;line-height:1.3;
}
.mpa-guide-row__why{
  font-size:13px;line-height:1.55;color:#444;
}
.mpa-guide-row__why strong{color:#111}
.mpa-guide-row__hint{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ci);line-height:1.4;text-align:right;
}
.mpa-guide-row--ignored .mpa-guide-row__why{color:#666}
@media (max-width:880px){
  .mpa-guide-row{grid-template-columns:1fr;gap:6px;padding:14px 18px}
  .mpa-guide-row__hint{text-align:left}
}

/* Anker-Pulse für externes Deep-Linking (#/mpa/guide#guide-X). */
.mpa-guide-row.is-pulse{
  animation:mpaGuidePulse 1.6s ease-out;
}
@keyframes mpaGuidePulse{
  0%{box-shadow:inset 3px 0 0 var(--ci);background:#faf5e8}
  60%{box-shadow:inset 3px 0 0 var(--ci);background:#faf5e8}
  100%{box-shadow:inset 0 0 0 transparent;background:#fff}
}

/* Inline-?-Bubble an Form-Labels: zeigt bei Hover/Focus einen Tooltip mit dem
   Erklärungstext aus GUIDE_FIELDS[phName].why. Kein Link mehr — bleibt im Form-
   Kontext, kein Route-Wechsel. */
.field-help{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  border:1px solid var(--ci);color:var(--ci);background:#fff;
  font-size:10px;font-weight:700;line-height:1;
  margin-left:6px;cursor:help;
  transition:background .15s ease, color .15s ease;
  vertical-align:middle;
  position:relative;
}
.field-help:hover,.field-help:focus-visible{background:var(--ci);color:#fff;outline:none}

/* Tooltip-Bubble: erscheint auf Hover/Focus mit dem `data-tip`-Text. Positioniert
   oberhalb der Bubble; bei Platzproblemen am rechten Viewport-Rand würde der
   Tooltip aktuell rausragen — Akzeptanz: betrifft nur extreme Edge-Fälle, und
   max-width:340px hält die Bubble in der Regel handlich. */
.field-help::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:#111;color:#fff;font-size:13px;font-weight:400;line-height:1.5;
  letter-spacing:0;text-transform:none;
  padding:10px 14px;border-radius:8px;
  width:max-content;max-width:360px;
  white-space:normal;text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .15s ease, visibility .15s ease;
  z-index:50;
}
.field-help::before{
  content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#111;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .15s ease, visibility .15s ease;
  z-index:50;
}
.field-help:hover::after,.field-help:focus-visible::after,
.field-help:hover::before,.field-help:focus-visible::before{
  opacity:1;visibility:visible;
}

/* Header-Action-Container: Phasen-Buttons (Vorschau/Veröffentlichen/Overflow)
   und Dirty-Buttons (Verwerfen/Speichern) sind exklusiv — bindMpaForm togglet
   `hidden`, sobald Form-Felder vom Baseline abweichen. */
.header-dirty-actions,.header-phase-actions,.header-idle-actions{display:flex;gap:8px;align-items:center}
.header-dirty-actions[hidden],.header-phase-actions[hidden],.header-idle-actions[hidden]{display:none}

/* Public-Link-Block: dezenter Click-to-copy-Streifen (Phase 3). Kein Rahmen,
   nur ein dezenter Cream-BG als Klick-Affordanz; Copy-Icon rechts macht die
   Funktion klar, ohne dass es einen Sub-Text braucht. */
/* Bewertungs-Verlauf (History pro PriceHubble-Abruf) — schlichte 3-Spalten-Tabelle */
.mpa-valhist{display:flex;flex-direction:column}
.mpa-valhist__head,.mpa-valhist__row{
  display:grid;grid-template-columns:1.2fr 1fr 1.4fr 0.8fr;gap:16px;align-items:baseline;
}
.mpa-valhist__head{
  font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.04em;
  color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--border);
}
.mpa-valhist__row{padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.mpa-valhist__row:last-child{border-bottom:0}
.mpa-valhist__date{color:var(--muted)}
.mpa-valhist__val{font-weight:700;letter-spacing:-0.01em}

.mpa-public-link{
  display:flex;align-items:center;gap:12px;
  background:#faf5e8;border-radius:var(--radius);
  padding:12px 16px;cursor:pointer;transition:background .15s ease;
  margin-bottom:10px;
}
.mpa-public-link:hover{background:#f5edd8}
.mpa-public-link-url{
  flex:1;min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;font-weight:700;color:#111;
  word-break:break-all;line-height:1.4;
}
.mpa-public-link-copy{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  color:var(--muted);transition:color .15s ease,background .15s ease;
}
.mpa-public-link:hover .mpa-public-link-copy{color:#111;background:rgba(0,0,0,.05)}

/* Footer-Row der Öffentlicher-Link-Card: beides rechtsbündig — erst die
   TTL-Anzeige, dann mit Abstand der Unpublish-Button. */
.mpa-public-footer{
  display:flex;align-items:center;justify-content:flex-end;gap:24px;flex-wrap:wrap;
}

/* TTL — `.mpa-ttl` ist nur ein Daten-Wrapper, `display:contents` lässt die
   inneren Row/Edit-Elemente direkte Children der `.mpa-public-footer`-Flex
   sein (für Layout-Konsistenz mit dem Unpublish-Button).
   Im Edit-Mode swappt die `.mpa-ttl-row` gegen `.mpa-ttl-edit` — Date-Input
   + Cancel + Save inline (gleiches Pattern wie die Marktwert-Inline-Edit). */
.mpa-ttl{display:contents}
.mpa-ttl-row{display:inline-flex;align-items:center;gap:8px}
.mpa-ttl-state{font-size:14px;line-height:1.4}
.mpa-ttl-state.is-expired{color:#c73030;font-weight:700}
.mpa-ttl-edit{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.mpa-ttl-edit[hidden],.mpa-ttl-row[hidden]{display:none}
.mpa-ttl-input{
  font:inherit;font-size:14px;font-weight:700;color:#111;
  padding:6px 10px;border:2px solid var(--ci);border-radius:8px;
  background:#fff;outline:none;
}
.mpa-ttl-input:focus{box-shadow:0 0 0 3px var(--gold-bg)}

/* Aufrufe-Card — schlichte 4-Spalten-Tabelle wie der Bewertungs-Verlauf */
.mpa-visits-list{display:flex;flex-direction:column;max-height:340px;overflow:auto}
.mpa-visits__head,.mpa-visits__row{
  display:grid;grid-template-columns:1.2fr 1.4fr 1fr 0.8fr;gap:16px;align-items:baseline;
}
.mpa-visits__head{
  font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.04em;
  color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--border);
}
.mpa-visits__row{padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.mpa-visits__row:last-child{border-bottom:0}
.mpa-visits__date{font-weight:700}
.mpa-visits__where{color:var(--muted)}
.mpa-visits__ip code{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);background:#f0f0f0;padding:1px 4px;border-radius:3px}
.mpa-visits__tag{justify-self:start}

/* MPA Public-Report: Nahversorgung (Amenities) — Kategorie-Karten 2×3 */
.report-amenities{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
}
@media (max-width: 560px){.report-amenities{grid-template-columns:minmax(0,1fr)}}
.amenity-card{
  background:#fff;border-radius:var(--radius);padding:20px;
  display:flex;flex-direction:column;gap:12px;
}
.amenity-head{display:flex;gap:14px;align-items:flex-start}
.amenity-icon{
  width:42px;height:42px;flex:0 0 42px;
  background:var(--gold-bg);color:var(--ci);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.amenity-title{min-width:0;flex:1}
.amenity-cat{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#111;margin-bottom:4px;
}
.amenity-meta{font-size:13px;color:var(--muted)}
.amenity-meta strong{color:#111;font-weight:700}
.amenity-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.amenity-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:14px;line-height:1.4;
  padding:6px 0;border-top:1px solid #f0efea;
}
.amenity-row:first-child{border-top:none}
.amenity-name{
  color:#111;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;
}
.amenity-sub{color:var(--muted);font-weight:400;font-size:12px}
.amenity-dist{
  color:var(--muted);font-size:13px;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  flex-shrink:0;
}

/* MPA Public-Report: Sozio-Ökonomie — 2-Spalten-Grid mit Karten pro Kennzahl */
.socio-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
}
@media (max-width: 720px){.socio-grid{grid-template-columns:minmax(0,1fr)}}
.socio-card{
  background:#fff;border-radius:var(--radius);padding:20px;
  display:flex;flex-direction:column;gap:14px;
}
.socio-card-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.socio-card-title{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#111;
}
.socio-card-year{
  font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.socio-kpi{display:flex;flex-direction:column;gap:2px}
.socio-kpi-value{font-size:30px;line-height:1.05;font-weight:700;letter-spacing:-0.03em;color:#111}
.socio-kpi-sub{font-size:13px;color:var(--muted)}
.socio-kpi-delta{font-size:12px;color:var(--ci);font-weight:700;letter-spacing:.02em;margin-top:2px}
.socio-card-chart{width:100%}
.socio-chart-svg{width:100%;height:auto;display:block}
.socio-axis-tick{font-size:9px;fill:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.socio-bar-val{font-size:10px;fill:#111;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.socio-line-val{font-size:10px;fill:#111;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Horizontale gestapelte Reihen (für Alter, Haushalte, Einkommen, Bildung, Baujahre) */
.socio-rows{display:flex;flex-direction:column;gap:6px}
.socio-row{
  display:grid;grid-template-columns:110px 1fr 50px;align-items:center;gap:10px;
  font-size:12px;line-height:1.3;
}
.socio-row-label{color:#111;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.socio-row-bar{
  height:8px;background:#f1efe8;border-radius:6px;overflow:hidden;
}
.socio-row-bar span{display:block;height:100%;border-radius:6px}
.socio-row-val{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:var(--muted);font-weight:700;text-align:right;
}

/* Donut + Legende (für Eigentum/Miete, Wohnung/Haus) */
.socio-donut-wrap{
  display:flex;align-items:center;gap:18px;
}
.socio-donut{flex:0 0 110px;width:110px;height:110px}
.socio-donut-legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.socio-legend-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  font-size:13px;line-height:1.3;
}
.socio-legend-dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
}
.socio-legend-label{color:#111;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.socio-legend-val{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;color:var(--muted);font-weight:700;
}

/* Datenquelle-Hinweis am Ende einer Section */
.report-source{
  margin:18px 0 0;font-size:12px;color:var(--muted);line-height:1.5;
}

/* MPA Public-Report: Erreichbarkeit (Isochronen) — 2×2 Karten + Verkehrspunkte */
.report-isochrones{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
}
@media (max-width: 720px){.report-isochrones{grid-template-columns:1fr}}
.iso-card{
  background:#fff;border-radius:var(--radius);padding:20px;
  display:flex;flex-direction:column;gap:12px;
}
.iso-head{display:flex;align-items:center;gap:12px}
.iso-icon{
  width:36px;height:36px;flex:0 0 36px;
  background:var(--gold-bg);color:var(--ci);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
}
.iso-title{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#111;
}
.iso-map{
  width:100%;aspect-ratio:4/3;border-radius:8px;overflow:hidden;
  background:#f0efea;
}
/* Karten-Tiles in S/W — die Ampel-Outlines (SVG) bleiben davon unberührt */
.iso-map img.leaflet-tile{filter:grayscale(100%) brightness(1.02)}
.iso-legend{
  display:flex;flex-wrap:wrap;gap:14px;
  font-size:12px;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.iso-legend-dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle;
}
.iso-legend-dot--5 {background:#16a34a}
.iso-legend-dot--15{background:#eab308}
.iso-legend-dot--30{background:#dc2626}

.iso-densities{margin-top:4px;padding-top:12px;border-top:1px solid #f0efea}
.iso-densities-title{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;
}
.iso-densities-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:4px 16px;
  font-size:13px;line-height:1.5;
}
.iso-d-num{
  font-weight:700;color:#111;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  display:inline-block;min-width:32px;
}

.iso-waypoints{margin-top:24px}
.iso-waypoints-title{
  font-size:16px;font-weight:700;letter-spacing:-0.01em;color:#111;
  margin-bottom:14px;
}
.iso-waypoints-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:30px;row-gap:24px;
}
@media (max-width: 720px){.iso-waypoints-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 480px){.iso-waypoints-grid{grid-template-columns:1fr}}
.iso-waypoint{
  padding-left:14px;border-left:2px solid #e5e3dd;
  display:flex;flex-direction:column;gap:2px;
}
.iso-waypoint-dist{
  font-size:20px;font-weight:500;color:#111;letter-spacing:-0.01em;line-height:1.2;
}
.iso-waypoint-label{
  font-size:14px;color:var(--muted);line-height:1.3;
}
.iso-waypoint-name{
  margin-top:10px;font-size:14px;color:#111;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* MPA Report-Aufbau: sortierbare Section-Liste */
/* Hinweis: Der frühere Social-Konkurrenten-Editor (.social-*) ist seit 2026-06-02
   ins Tools-Modul „Instagram Ranking" gewandert — Styles dort in
   public/css/modules/igranking.css (.igr-*). */

.mpa-layout-list{display:flex;flex-direction:column;gap:6px}
.mpa-layout-row{
  display:grid;
  grid-template-columns:20px 1fr 44px;
  align-items:center;gap:14px;
  padding:14px 18px;
  border-radius:var(--radius);
  background:#fff;
  transition:background .1s,opacity .15s;
}
.mpa-layout-row:hover{background:var(--gold-bg)}
.mpa-layout-row.is-disabled{opacity:.45}
.mpa-layout-row.is-empty .mpa-layout-name{color:var(--muted)}
.mpa-layout-grip{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:grab;padding:6px 0}
.mpa-layout-grip:active{cursor:grabbing}
.mpa-layout-grip i{display:block;width:14px;height:2px;background:#bbb}
.mpa-layout-info{min-width:0}
.mpa-layout-name{font-size:15px;font-weight:700;margin-bottom:2px;color:#111}
.mpa-layout-desc{font-size:14px;color:var(--muted);line-height:1.4}
.mpa-layout-badge{
  display:inline-block;margin-left:8px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);background:#f0f0f0;padding:2px 7px;border-radius:8px;
  vertical-align:1px;
}
.mpa-layout-switch{
  width:36px;height:20px;border-radius:100px;background:#ccc;
  position:relative;cursor:pointer;transition:background .15s;
  justify-self:center;flex-shrink:0;border:none;padding:0;
}
.mpa-layout-switch.is-on{background:var(--ci)}
.mpa-layout-switch::after{
  content:'';position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;background:#fff;
  transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.mpa-layout-switch.is-on::after{transform:translateX(16px)}
.mpa-layout-ghost{opacity:.4}
.mpa-layout-chosen{box-shadow:0 4px 16px rgba(180,157,69,.2)}

/* Banner-Variante: abgelaufener Report (sichtbar für eingeloggte User) */
.draft-banner-warn{background:#fef0e6;color:#a04018;border-bottom-color:#f3c8a8}

/* Public „Report abgelaufen"-Sperrseite */
.report-expired-body{background:#f6f5f2;font-family:'Gotham','Helvetica Neue',sans-serif;margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center}
.report-expired{max-width:520px;text-align:center;padding:48px 32px;background:#fff;border-radius:var(--radius)}
.report-expired-logo{width:48px;height:48px;margin-bottom:24px}
.report-expired h1{margin:0 0 12px;letter-spacing:-0.04em;font-size:28px}
.report-expired p{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 20px}
.report-expired .btn{margin-top:8px}
.report-expired .muted a{color:var(--gold)}

/* Link Card */
.link-card{background:#111;color:#fff;border-radius:var(--radius);padding:20px}
.link-card a{color:#fff;word-break:break-all}

/* Empty State */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}

/* Coming Soon */
.coming-soon{
  max-width:520px;margin:80px auto 0;text-align:center;
  padding:48px 32px;
  background:#fff;border-radius:var(--radius);
}
.coming-soon-icon{
  width:72px;height:72px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-bg);
  border-radius:50%;color:var(--gold);
}
.coming-soon-tag{
  display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:4px 12px;border-radius:var(--radius-button);
  background:var(--gold-bg);color:var(--gold);
  margin-bottom:12px;
}
.coming-soon h1{font-size:32px;margin-bottom:12px}
.coming-soon p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}

/* Public report */
body.public{background:#fff}
.draft-banner{background:#111;color:#fff;text-align:center;padding:10px 16px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;position:sticky;top:0;z-index:100}
.report{max-width:960px;margin:0 auto;padding:48px 24px 80px}
.report-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;border-bottom:1px solid var(--border);padding-bottom:20px}
.report-logo{width:44px}
.report-meta{font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.08em;color:var(--gold)}
.report-hero{aspect-ratio:16/10;background:#eee center/cover no-repeat;border-radius:var(--radius);margin-bottom:32px}
.report-title{font-size:36px;margin-bottom:8px}
.report-sub{color:var(--muted);margin:0 0 40px}

.report-section{margin:0 0 40px}

/* Timeline-Tooltip */
.timeline-wrap{position:relative}
.tl-hit{cursor:pointer}
.tl-tooltip{
  position:absolute;pointer-events:none;
  transform:translate(-50%,calc(-100% - 12px));
  background:#fff;border:1px solid #e5e5e5;border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.10);
  padding:10px 14px;font-size:13px;white-space:nowrap;z-index:10;
}
.tl-tooltip[hidden]{display:none}
.tl-tooltip-head{font-size:11px;color:#777;margin-bottom:4px;letter-spacing:.01em}
.tl-tooltip-body{display:flex;align-items:center;gap:6px;font-weight:700;color:#111}
.tl-tooltip-dot{width:8px;height:8px;border-radius:50%;background:#18486b;flex-shrink:0}
.tl-tooltip-delta{font-weight:400;color:#888;font-size:12px;margin-left:2px}
.tl-tooltip::after{
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:10px;height:10px;background:#fff;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;
  transform:translateX(-50%) rotate(45deg);
}
.report-h2{font-size:22px;margin:0 0 14px;display:flex;align-items:baseline;gap:10px}
.report-h2-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.report-h2-row .report-h2{margin:0}
.trend-filters{display:flex;gap:8px}
.trend-filters select{
  font-family:inherit;font-size:14px;font-weight:700;color:#111;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-button);
  padding:7px 36px 7px 14px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}
.trend-filters select:hover{border-color:#111}
.trend-variant[hidden]{display:none}

/* Trend-Chart Tooltip (wie PriceHubble) */
.trend-chart-wrap{position:relative}
.trend-hit{cursor:pointer}
.trend-tooltip{
  position:absolute;pointer-events:none;
  transform:translate(-50%,calc(-100% - 14px));
  background:#fff;border:1px solid #e5e5e5;border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.10);
  padding:14px 16px;font-size:13px;min-width:140px;z-index:10;
}
.trend-tooltip[hidden]{display:none}
.trend-tooltip::after{
  content:"";position:absolute;left:50%;bottom:-6px;
  width:10px;height:10px;background:#fff;
  border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;
  transform:translateX(-50%) rotate(45deg);
}
.tr-row-head{font-size:13px;font-weight:700;color:#111;margin-bottom:10px}
.tr-row-label{font-size:11px;color:#777;text-transform:uppercase;font-weight:700;letter-spacing:.04em;margin-top:8px}
.tr-row-label:first-child{margin-top:0}
.tr-row-value{font-size:14px;color:#111;font-weight:700;margin-top:2px}
.tr-row-value.is-up{color:#1f7d1f}
.tr-row-value.is-down{color:#b03030}
.report-h2-count{font-size:13px;font-weight:700;letter-spacing:.04em;color:#fff;background:#18486b;border-radius:var(--radius-button);padding:2px 10px}
.report-card{background:#fff;border-radius:var(--radius);padding:20px}
.report-trend-note{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:700;letter-spacing:.06em;margin-top:10px;text-align:center}

/* KPI-Reihe (Marktwert + Marktwertspanne) */
.report-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px}
@media(max-width:620px){.report-grid-2{grid-template-columns:1fr}}
.report-kpi{background:#fafafa;border-radius:var(--radius);padding:22px}
.report-kpi-label{font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.report-kpi-value{font-size:28px;font-weight:700;letter-spacing:-0.04em;margin-top:8px;line-height:1.1}
.report-kpi-sub{font-size:13px;color:var(--muted);margin-top:6px}

/* Timeline: Delta-Kacheln */
.report-delta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
@media(max-width:620px){.report-delta-grid{grid-template-columns:1fr}}
.report-delta-value{font-size:20px;font-weight:700;letter-spacing:-0.02em}
.report-delta-abs{font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}
.report-delta-label{font-size:12px;color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.04em;margin-top:4px}
.is-up{color:#1f7d1f}
.is-down{color:#b03030}

/* Trend-Charts: KPI-Reihe oben */
.report-trend-head{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
@media(max-width:620px){.report-trend-head{grid-template-columns:1fr}}
.report-trend-kpi-label{font-size:12px;color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.report-trend-kpi-value{font-size:22px;font-weight:700;letter-spacing:-0.03em;margin-top:4px}

/* Marktpreis-Karte: Platzhalter */
.report-map-placeholder{background:repeating-linear-gradient(45deg,#f6f5f2,#f6f5f2 12px,#efece4 12px,#efece4 24px);border:1px dashed #d4cfc0;border-radius:var(--radius);height:320px;display:flex;align-items:center;justify-content:center;color:#9a9385}
.report-map-placeholder-inner{text-align:center;padding:20px}
.report-map-placeholder-title{font-size:15px;font-weight:700;letter-spacing:-0.01em;color:#5c574c;margin-top:10px}
.report-map-placeholder-sub{font-size:12px;color:#857f71;margin-top:6px}

/* Marktpreis-Karte (Leaflet + CartoDB Positron) */
.map-scope{font-size:13px;color:var(--muted);letter-spacing:.02em}
.map-wrap{position:relative;background:#fff;border-radius:var(--radius);overflow:hidden;margin-top:6px}

/* Overlay-Legende oben rechts in der Karte (PriceHubble-Stil) */
.map-overlay-legend{position:absolute;top:14px;right:14px;z-index:500;background:#fff;border-radius:8px;padding:10px 12px;box-shadow:0 2px 8px rgba(0,0,0,.08);min-width:160px;pointer-events:none}
.map-overlay-legend-title{font-size:12px;font-weight:700;color:#333;margin-bottom:6px;letter-spacing:-0.01em}
.map-overlay-legend-bar{height:6px;border-radius:3px;background:linear-gradient(90deg,#2d7a3a 0%,#7eae2f 25%,#d4a93c 50%,#d4691c 75%,#b23030 100%)}
.map-overlay-legend-labels{display:flex;justify-content:space-between;margin-top:5px;font-size:11px;color:var(--muted)}

/* Beschriftung der eingezeichneten Flächen. Ohne sie liest man die goldene Linie
   als „das Viertel", sie ist aber die Bezugsfläche der Statistik (meist die PLZ,
   und die ist in Bochum groesser als der Stadtteil). Deshalb steht dort die Ebene
   UND die Flaeche in km². Sitzt unten links, die Preis-Legende oben rechts. */
.map-scope-legend{background:#fff;border-radius:8px;padding:8px 10px;box-shadow:0 2px 8px rgba(0,0,0,.08);font-size:11px;line-height:1.35;color:#333;pointer-events:none;max-width:230px}
.map-scope-legend-row{display:flex;align-items:flex-start;gap:7px}
.map-scope-legend-row + .map-scope-legend-row{margin-top:5px}
.map-scope-legend b{font-weight:700}
.map-scope-legend em{display:block;font-style:normal;color:var(--muted)}
.map-scope-swatch{flex:0 0 14px;height:0;margin-top:6px;border-top-width:2px;border-top-style:solid}
.map-scope-swatch.is-focus{border-top-color:#b49d45}
.map-scope-swatch.is-city{border-top-color:#888;border-top-style:dashed;border-top-width:1px;margin-top:7px}

/* Erklärtext unter der Karte */
.map-disclaimer{margin:14px 0 0;font-size:12px;color:var(--muted);line-height:1.55;max-width:820px}
.map-canvas{width:100%;height:520px;background:#f6f5f2}
.map-canvas .leaflet-container{font-family:inherit;background:#f6f5f2}

/* Objekt-Marker (Schwarzer Kreis mit Engelsburg-Logo) */
.map-property-marker{pointer-events:auto}
.map-property-pin{width:38px;height:38px;background:#111;border-radius:50%;box-shadow:0 3px 10px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center}
.map-property-pin img{width:18px;height:18px;display:block;filter:brightness(0) invert(1);position:relative;bottom:2px}

/* B&W-Basemap-Modus (nur Tiles entsättigen, Punkte/Marker bleiben farbig) */
body.map-bw .leaflet-tile-pane{filter:grayscale(1) contrast(.95)}

/* Tooltip */
.map-tooltip-wrap.leaflet-tooltip{background:#111;color:#fff;border:0;border-radius:6px;padding:8px 10px;box-shadow:0 6px 20px rgba(0,0,0,.18);font-family:inherit;font-size:12px}
.map-tooltip-wrap.leaflet-tooltip::before{border-top-color:#111}
.map-tip b{font-weight:700}
.map-tip-sub{margin-top:3px;color:#c8c5bd;font-size:11px}

/* Legende unter den Karten */
.map-legend{margin-top:14px;padding:12px 16px;background:#fff;border-radius:var(--radius)}
.map-legend-title{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#333;margin-bottom:8px}
.map-legend-gradient{height:8px;border-radius:4px;background:linear-gradient(90deg,#2d7a3a 0%,#7eae2f 25%,#d4a93c 50%,#d4691c 75%,#b23030 100%)}
.map-legend-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Vergleichsobjekte */
.report-similar .report-h2-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:14px;flex-wrap:wrap}
.similar-filter{display:inline-flex}
.similar-filter select{appearance:none;-webkit-appearance:none;background:#fff;border:1px solid #e5e5e5;border-radius:var(--radius);padding:10px 36px 10px 14px;font-size:13px;font-weight:500;color:#111;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
.similar-filter select:focus{outline:none;border-color:var(--ci)}
.similar-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;background:#fff;border-radius:var(--radius);padding:24px 28px;margin-bottom:20px}
@media(max-width:760px){.similar-kpis{grid-template-columns:1fr;gap:16px}}
.similar-kpi-label{font-size:12px;color:var(--muted);font-weight:500;margin-bottom:6px}
.similar-kpi-value{font-size:24px;font-weight:700;letter-spacing:-0.02em;color:#111;font-variant-numeric:tabular-nums}
.similar-map-wrap{margin-bottom:24px}
.similar-map{height:420px;border-radius:var(--radius);overflow:hidden;background:#f0f0f0;position:relative;z-index:0}
.similar-map img.leaflet-tile{filter:grayscale(100%) brightness(1.02)}
.similar-list-h3{font-size:16px;font-weight:700;margin:0 0 14px;letter-spacing:-0.02em}
.similar-cluster-icon{background:#18486b;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.similar-cluster-icon.is-single{font-size:11px}
.similar-marker-pin{width:14px;height:14px;border-radius:50%;background:#18486b;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,0.3)}
.similar-marker-pin.is-historic{background:#888}
.report-similar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.report-similar-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.report-similar-grid{grid-template-columns:1fr}}
.offer-card{background:#fff;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
a.offer-card,.offer-card.is-linked{text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
a.offer-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.offer-card-source{margin-left:auto;font-size:11px;color:var(--ci);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.offer-card-img{aspect-ratio:16/10;background:#eee center/cover no-repeat;position:relative}
.offer-card-badge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:var(--radius-button);color:#fff}
.offer-card-badge.is-active{background:#18486b}
.offer-card-badge.is-historic{background:#888}
.offer-card-body{padding:14px}
.offer-card-title{font-size:13px;font-weight:700;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.7em}
.offer-card-price{font-size:17px;font-weight:700;letter-spacing:-0.02em;margin-top:6px}
.offer-card-ppm{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0}
.offer-card-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted)}

.report-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:620px){.report-facts{grid-template-columns:repeat(2,1fr)}}
.report-fact{background:#fafafa;border-radius:var(--radius);padding:16px}
.report-fact-label{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:700;letter-spacing:.06em}
.report-fact-value{font-size:18px;font-weight:700;margin-top:4px}
.report-foot{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:700;letter-spacing:.06em;text-align:center;padding-top:24px;border-top:1px solid var(--border);margin-top:40px}

/* Dashboard */

.kpi-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:12px;margin-bottom:32px}
@media (max-width:1100px){.kpi-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:680px){.kpi-grid{grid-template-columns:1fr 1fr}}

.kpi{
  background:#fff;border-radius:var(--radius);
  padding:18px;display:flex;flex-direction:column;gap:6px;min-height:120px;
  position:relative;overflow:hidden;
}
.kpi-primary{background:#111;color:#fff}
.kpi-primary .kpi-label{color:#888}
.kpi-wide{grid-row:span 1;grid-column:span 1}
.kpi-label{font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.kpi-value{font-size:28px;font-weight:700;letter-spacing:-0.04em}
.kpi-big{font-size:40px}
.kpi-accent{color:#1f7d1f}
.kpi-primary .kpi-accent{color:#7be07b}
.kpi-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700}

/* Dashboard-Cockpit (modular, ab Mai 2026) */

.dashboard-tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;margin-bottom:30px;
}
.dashboard-tile{
  /* Kontur statt Flaeche: die Kachel rahmt ihre Zahl, statt sie auf einem
     weissen Block zu tragen -- die Zahl bleibt damit das Lauteste im Raster. */
  background:transparent;border:2px solid var(--border-strong);
  border-radius:var(--radius);
  padding:18px;display:flex;flex-direction:column;gap:10px;
  position:relative;overflow:hidden;min-height:200px;
}
.tile-head{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:#111;
  margin:-2px 0 4px;
}
.tile-icon{
  width:32px;height:32px;border-radius:8px;
  background:var(--gold-bg);color:var(--gold);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.tile-title{font-weight:700;font-size:15px;letter-spacing:-0.02em;flex:1}
.tile-kpi{display:flex;align-items:baseline;gap:10px}
.tile-kpi-value{font-size:36px;font-weight:700;letter-spacing:-0.04em;line-height:1}
.tile-kpi-label{font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.06em;color:var(--muted)}

.tile-recent{
  margin-top:auto;
  font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Quick-Action(s) am Fuss der Tile — z. B. „+ Neue MPA" / „+ Neuer Stream".
   Sitzen unter der „Zuletzt"-Zeile, sind echte Primary-Buttons (btn btn-sm). */
.tile-actions{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:8px;
}
.tile-action{align-self:flex-start}

/* Activity-Feed */
.activity-feed{margin-top:8px}
.activity-row{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 0;border-bottom:1px solid var(--border);
}
.activity-row:last-child{border-bottom:none}
.activity-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--gold-bg);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;flex-shrink:0;
}
.activity-text{flex:1;min-width:0}
.activity-line{font-size:14px;line-height:1.4}
.activity-line strong{font-weight:700}
.activity-verb{color:var(--muted);margin:0 4px}
.activity-resource{color:#111;text-decoration:none;font-weight:700;border-bottom:1px solid transparent}
a.activity-resource:hover{color:var(--gold);border-bottom-color:var(--gold)}
.activity-meta{display:flex;gap:12px;align-items:center;margin-top:2px;font-size:11px;color:var(--muted)}
.activity-module{display:inline-flex;align-items:center;gap:4px;text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.activity-module svg{opacity:.7}

.section-head{display:flex;align-items:center;justify-content:space-between;margin:24px 0 12px}
.section-head h2{font-size:18px}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:#666;color:#fff;border:2px solid transparent;
  border-radius:var(--radius-button);padding:6px 14px;
  font-family:inherit;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  cursor:pointer;transition:background .15s;
}
.chip:hover{background:#444}
.chip.is-active{background:var(--ci);color:#fff}
.chip.is-active:hover{background:#9d8a3b}
/* Count-Bubble innerhalb eines Chips (z. B. MPA-Liste „Meine Analysen (5)").
   Kreis-Pille mit leichtem Hintergrund-Tint — auf inaktivem Chip dunkler als
   die Chip-Farbe, auf aktivem Chip leicht ausgeblichen. */
.chip-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:rgba(255,255,255,0.18);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:0;
  line-height:1;
}
.chip.is-active .chip-count{background:rgba(0,0,0,0.18);color:#fff}

/* Thumbnail-Stack */
.thumb-stack{display:flex;gap:4px;flex-shrink:0}
.thumb-stack-item{
  width:56px;height:56px;border-radius:8px;
  background:#eee center/cover no-repeat;flex-shrink:0;
}
.thumb-stack-item:nth-child(2),.thumb-stack-item:nth-child(3){display:none}
@media (min-width:760px){
  .thumb-stack-item:nth-child(2){display:block}
}
@media (min-width:900px){
  .thumb-stack-item:nth-child(3){display:block}
}

/* PriceHubble Playground */
.ph-action-group{margin-bottom:14px}
.ph-action-group .label{margin-bottom:8px;display:block}
.ph-output-head{margin-bottom:10px}
.ph-response{
  background:#0d0d0d;color:#eee;border-radius:var(--radius);
  padding:16px;overflow:auto;max-height:560px;
  font-family:'SF Mono',Monaco,Menlo,monospace;font-size:12px;line-height:1.5;
  margin:0;white-space:pre-wrap;word-break:break-word;
}
.ph-response .j-key{color:#7fb3ff}
.ph-response .j-str{color:#a7e3a0}
.ph-response .j-num{color:#ffb86c}
.ph-response .j-bool{color:#ff79c6}
.ph-history-item{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 12px;background:#fafafa;border-radius:var(--radius);
  font-size:12px;
}
.btn:disabled{opacity:.4;cursor:not-allowed}
input:disabled,.select:disabled{background:#f4f4f4;color:#999;cursor:not-allowed}

/* Misc */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid #ddd;border-top-color:#111;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Toasts liegen über allen Dialogen, sonst sind Meldungen bei offenem Modal nicht lesbar. */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:14px 22px;border-radius:100px;font-size:14px;font-weight:700;z-index:1201;opacity:0;transition:opacity .2s;display:inline-flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,0.25);max-width:min(640px,90vw)}
.toast.show{opacity:1}
.toast--error{background:#c0392b;box-shadow:0 10px 30px rgba(192,57,43,0.35)}
.toast-spinner{display:none;width:14px;height:14px;border:2px solid rgba(255,255,255,0.28);border-top-color:#fff;border-radius:50%;animation:toast-spin .7s linear infinite;flex-shrink:0}
.toast--loading .toast-spinner{display:block}
@keyframes toast-spin{to{transform:rotate(360deg)}}
.toast-backdrop{position:fixed;inset:0;background:rgba(17,17,17,0.45);backdrop-filter:blur(2px);z-index:1200;opacity:0;pointer-events:none;transition:opacity .2s}
.toast-backdrop.show{opacity:1;pointer-events:auto}
.toast--modal{bottom:auto;top:50%;transform:translate(-50%,-50%);padding:20px 28px;font-size:15px;z-index:1202;gap:16px}
.toast--modal .toast-spinner{width:18px;height:18px;border-width:2.5px}

/* Confirm-Modal (OS.confirmModal) — Mini-Dialog mit Primary/Secondary-Button.
   Backdrop ist immer visible (kein .show-Toggle), Modal fadet kurz ein. */
.confirm-modal-backdrop{position:fixed;inset:0;background:rgba(17,17,17,0.45);backdrop-filter:blur(2px);z-index:1100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s}
.confirm-modal-backdrop.show{opacity:1;pointer-events:auto}
.confirm-modal{background:#fff;border-radius:var(--radius);padding:24px 28px;min-width:340px;max-width:520px;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:confirm-pop .18s ease-out}
@keyframes confirm-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.confirm-modal__title{font-size:16px;font-weight:700;margin-bottom:10px;letter-spacing:-0.01em}
.confirm-modal__msg{font-size:14px;line-height:1.5;color:#333;margin-bottom:20px;white-space:pre-line}
.confirm-modal__msg .cm-lead{white-space:normal;margin:0 0 14px}
.confirm-modal__actions{display:flex;justify-content:flex-end;gap:8px}

/* Zwei-Gruppen-Aufschlüsselung in einem confirmModal (z. B. „onOffice neu laden":
   überschriebene vs. erhaltene Werte). Farb-codierte Boxen mit Caps-Header +
   Bullet-Liste, damit die Werte schnell scanbar sind statt als Plain-Text-Wand. */
.cm-groups{display:flex;flex-direction:column;gap:12px;white-space:normal;text-align:left}
.cm-group{border-radius:10px;padding:12px 14px}
.cm-group--overwrite{background:#fdeded}
.cm-group--keep{background:#eef6ef}
.cm-group__head{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.cm-group--overwrite .cm-group__head{color:#c0392b}
.cm-group--keep .cm-group__head{color:#2f7d32}
.cm-group__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.cm-group__list li{font-size:13px;line-height:1.4;color:#333;padding-left:16px;position:relative}
.cm-group__list li::before{content:'';position:absolute;left:2px;top:6px;width:5px;height:5px;border-radius:50%}
.cm-group--overwrite .cm-group__list li::before{background:#d9534f}
.cm-group--keep .cm-group__list li::before{background:#4caf50}
/* Hervorgehobene „ist online"-Status-Box im Archivieren-Confirm. */
.cm-online-note{white-space:normal;display:flex;align-items:center;gap:9px;background:#eef6ef;border-radius:10px;padding:11px 14px;margin:0 0 14px;font-size:13px;line-height:1.4;color:#2f7d32}
.cm-online-note__dot{width:9px;height:9px;border-radius:50%;background:#2a6b18;flex:none}
/* Warnbox im Confirm (z. B. abweichende Adresse beim onOffice-Verknüpfen). */
.cm-warn-note{white-space:normal;background:#fff4e0;border-radius:10px;padding:11px 14px;margin:0 0 14px;font-size:13px;line-height:1.4;color:#8a5a00}

/* OS.progressSteps — Checklist-Modal für mehrstufige Abrufe (Bewertung etc.).
   Liegt auf demselben Backdrop wie confirm-modal. Pro Schritt-Zustand
   (data-state) wird genau ein Icon eingeblendet: Punkt / Spinner / Häkchen / X. */
.os-progress{background:#fff;border-radius:var(--radius);padding:28px 30px;min-width:380px;max-width:460px;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:confirm-pop .18s ease-out}
.os-progress__title{font-size:18px;font-weight:700;letter-spacing:-0.03em;margin-bottom:18px}
.os-progress__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.os-progress__step{display:flex;align-items:flex-start;gap:12px}
.os-progress__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.os-progress__icon > *{display:none}
.os-progress__dot{width:8px;height:8px;border-radius:50%;background:#d8d8d8}
.os-progress__mark{width:20px;height:20px;align-items:center;justify-content:center}
.os-progress__mark svg{width:18px;height:18px}
.os-progress__step[data-state="pending"] .os-progress__dot{display:block}
.os-progress__step[data-state="active"] .spinner{display:inline-block}
.os-progress__step[data-state="done"] .os-progress__mark--check{display:flex;color:#16a34a}
.os-progress__step[data-state="warn"] .os-progress__mark--check{display:flex;color:#b0a36a}
.os-progress__step[data-state="fail"] .os-progress__mark--x{display:flex;color:#dc2626}
.os-progress__body{display:flex;flex-direction:column;gap:1px;min-width:0}
.os-progress__label{font-size:14px;font-weight:500;color:#111;line-height:1.4}
.os-progress__step[data-state="pending"] .os-progress__label{color:#999}
.os-progress__msg{font-size:12px;color:#999;line-height:1.3}
.os-progress__msg:empty{display:none}

/* Suchinteressenten-Info-Card (MPA-Form, 50/50 neben „Vermarktung"). Read-only
   Info wie die Eigentümer-Card; bei frischen MPAs zählt der Poller die Zahl live
   hoch (onOffice rechnet die Zuordnung noch). */
.mpa-suitors__num{font-size:44px;font-weight:700;line-height:1;letter-spacing:-0.04em;color:#111}
.mpa-suitors__label{margin-top:4px;font-size:13px;color:#444}
.mpa-suitors__tenant{margin-top:14px;font-size:13px;color:#666}
.mpa-suitors__tenant strong{font-weight:700;color:#111}
.mpa-suitors__status{display:flex;align-items:center;gap:8px;margin-top:16px;min-height:16px}
.mpa-suitors__icon{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mpa-suitors__icon > *{display:none}
.mpa-suitors.is-loading .spinner{display:inline-block}
.mpa-suitors__dot{width:7px;height:7px;border-radius:50%;background:var(--ci)}
.mpa-suitors.is-idle .mpa-suitors__dot{display:inline-block}
.mpa-suitors__sub{font-size:12px;color:#999;line-height:1.35}
.mpa-suitors__sub:empty{display:none}
.mpa-suitors-empty{font-size:13px;color:#999;font-style:italic}

/* OS.openModal — generisches Edit-Modal für kompakte Forms (Links, Admin-User,
   TV-Stream/Slide etc.). Backdrop + zentrierte Card; Save/Cancel im Footer. */
.os-modal-overlay{position:fixed;inset:0;background:rgba(17,17,17,0.45);backdrop-filter:blur(2px);z-index:1050;display:flex;align-items:center;justify-content:center;padding:24px;animation:os-modal-fade .15s ease-out}
@keyframes os-modal-fade{from{opacity:0}to{opacity:1}}
.os-modal{background:#fff;border-radius:var(--radius);padding:28px 32px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:os-modal-pop .18s ease-out}
.os-modal .btn[hidden]{display:none}
@keyframes os-modal-pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.os-modal-title{font-size:22px;font-weight:700;letter-spacing:-0.04em;margin:0 0 20px}
.os-modal-body > .field + .field,
.os-modal-body > .field-grid + .field,
.os-modal-body > .field + .field-grid,
.os-modal-body > .field-grid + .field-grid{margin-top:14px}
.os-modal-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid #f0f0f0}
.os-modal-extras{margin-right:auto;order:-1;display:flex;gap:8px;align-items:center}

/* ── Auth pages (Login, Setup) ──────────────────────────── */
.auth-page{background:var(--bg);min-height:100vh}
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{
  width:100%;max-width:420px;background:var(--bg-sidebar);color:var(--sidebar-text);
  border:1px solid #1f1f1f;border-radius:var(--radius);padding:36px 32px;
}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:40px}
.auth-logo{height:64px;width:auto;filter:brightness(0) invert(1)}
.auth-brand-text{font-size:56px;font-weight:700;text-transform:uppercase;letter-spacing:-0.04em;color:var(--sidebar-text)}
.auth-card h1{font-size:28px;letter-spacing:-0.05em;margin:4px 0 18px;color:#fff}
.auth-intro{color:var(--sidebar-text-muted);margin-bottom:18px;font-size:14px;line-height:1.5}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-card .field-label{color:var(--sidebar-text-muted)}
.auth-card .field input[type="text"],
.auth-card .field input[type="email"],
.auth-card .field input[type="password"]{
  background:#1a1a1a;border-color:#3a3a3a;color:#fff;
}
.auth-card .field input:focus{border-color:#fff}
.auth-error{
  background:#3a1a1a;color:#ffb4b4;border:1px solid #5a2424;
  padding:10px 14px;border-radius:var(--radius);font-size:14px;margin-bottom:14px;
}
.btn-block{width:100%;justify-content:center}
.btn-primary{background:var(--gold);color:#fff}
.btn-primary:hover{opacity:.9}

/* Field-Label-Span (für vertikales label > span + input) */
.field-label{
  display:block;font-size:12px;text-transform:uppercase;font-weight:700;
  letter-spacing:.04em;color:var(--muted);margin-bottom:6px;
}
.field input[type="text"],.field input[type="email"],.field input[type="password"]{
  width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:var(--radius);
  background:#fff;font-family:inherit;font-size:14px;color:#111;
}
.field input:focus{outline:none;border-color:#111}
.field-checkbox{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;padding:6px 0}
.field-checkbox input{width:16px;height:16px;cursor:pointer}

/* ── Sidebar User ───────────────────────────────────────── */
.sidebar-user{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:10px;flex-shrink:0;
  background:var(--bg-sidebar);
}
/* Fade-Maske über dem User-Block, damit weggescrollte Nav-Items darunter
   weich verschwinden statt mit harter Kante zu kollidieren. 140-px-Höhe mit
   wahrnehmungs-linearer Gradient-Kurve (mehr Stops mit ease-in-out-artiger
   Verteilung) — vermeidet sichtbare Bands oder eine harte Kante zwischen
   Fade-Ende und User-Block-Oberkante. pointer-events:none → Nav-Items unter
   dem Fade bleiben klickbar. */
.sidebar-user::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:60px;
  background:linear-gradient(
    to bottom,
    rgba(17,17,17,0)    0%,
    rgba(17,17,17,0.05) 20%,
    rgba(17,17,17,0.2)  40%,
    rgba(17,17,17,0.5)  65%,
    rgba(17,17,17,0.85) 85%,
    var(--bg-sidebar)  100%
  );
  pointer-events:none;
}
.sidebar-user-link{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  padding:6px;margin:-6px;border-radius:8px;color:inherit;text-decoration:none;transition:background .15s;
}
.sidebar-user-link:hover{background:var(--bg-sidebar-hover)}
.sidebar-user-avatar{
  width:32px;height:32px;border-radius:50%;background:#3a3a3a;color:#bbb;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;
}
.sidebar-user-meta{flex:1;min-width:0}
.sidebar-user-name{font-size:16px;font-weight:700;color:var(--sidebar-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user-logout-form{display:contents}
.sidebar-user-logout{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:8px;color:var(--sidebar-text-muted);transition:all .15s;flex-shrink:0;
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
}
.sidebar-user-logout:hover{background:var(--bg-sidebar-hover);color:#fff}

/* ── Settings: User-Verwaltung ──────────────────────────── */
.user-table{width:100%;border-collapse:collapse;font-size:14px}
.user-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--border);
}
.user-table td{padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.user-table tr:last-child td{border-bottom:none}
.user-modules{max-width:320px}
.user-table th.th-sort{cursor:pointer;user-select:none;white-space:nowrap;transition:color .12s}
.user-table th.th-sort:hover{color:var(--ci)}
.user-table th.th-sort.is-active{color:#111}
.user-table th.th-sort .sort-ind{display:inline-block;width:.8em;margin-left:3px;font-size:10px;opacity:.5}
.user-table th.th-sort.is-active .sort-ind{opacity:1;color:var(--ci)}
.user-modules .pill{display:inline-block;margin:0 4px 6px 0}
.user-actions{text-align:right;white-space:nowrap}
.user-actions .btn+.btn{margin-left:6px}
.modules-grid{display:flex;flex-direction:column;gap:2px;background:#fafafa;border-radius:var(--radius);padding:8px 12px}

/* User-Profile (Avatar + Signatur Upload) */
.user-profile-row{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)}
@media (max-width:760px){.user-profile-row{grid-template-columns:1fr}}
.user-asset{display:flex;flex-direction:column;gap:10px}
.user-asset-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.user-asset-preview{
  width:140px;height:180px;border-radius:var(--radius);background:#fafafa;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  cursor:pointer;outline:2px dashed transparent;outline-offset:-4px;
  transition:background .15s ease, outline-color .15s ease;
}
.user-asset-preview:hover{background:#f0efeb}
.user-asset-preview:focus-visible{outline-color:var(--ci)}
.user-asset-preview.is-dragover{background:var(--gold-bg);outline-color:var(--ci)}
.user-asset-preview img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.user-asset-preview--sig{width:240px;height:100px;background:#fff;border:1px solid var(--border)}
.user-asset-preview--sig img{object-fit:contain;padding:8px}
.user-asset-empty{font-size:12px;color:var(--muted);text-align:center;line-height:1.4;padding:0 8px;pointer-events:none}
.user-asset-actions{display:flex;gap:6px;flex-wrap:wrap}
.user-asset-actions label.btn{cursor:pointer}
.user-asset-hint{font-size:11px;color:var(--muted);max-width:280px;line-height:1.4}
.form-error{background:#fdecec;color:#a01818;border:1px solid #f3c4c4;padding:10px 12px;border-radius:var(--radius);font-size:14px;margin-bottom:10px}
.form-actions{display:flex;gap:8px;margin-top:18px}
.form-actions-right{justify-content:flex-end;align-items:center}
.form-divider{border:0;border-top:1px solid var(--border);margin:20px 0 0}
.field-hint{display:block;font-size:11px;color:var(--muted);margin-top:6px;text-transform:none;letter-spacing:0;font-weight:400}
.pill{
  display:inline-block;font-size:11px;padding:3px 10px;border-radius:8px;
  background:transparent;color:#111;border:2px solid var(--border);
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.pill-gold{border-color:var(--ci);color:var(--ci)}
.pill-soft{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500;font-size:11px}

/* ── Markt-Statistiken ───────────────────────────────────────── */
.ms-filter{
  display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;
  background:#fff;border-radius:var(--radius) var(--radius) 0 0;padding:20px 24px 16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
/* Suchfeld (links, feste ~1/3-Breite) · Transaktion. */
.ms-filter > .ms-filter-field{flex:0 0 auto}
.ms-filter > .ms-combobox{flex:0 1 360px}
.ms-filter-field{display:flex;flex-direction:column;gap:8px}
.ms-filter-field label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ms-filter-field input{
  border:2px solid var(--border);border-radius:var(--radius);
  padding:10px 14px;font:inherit;font-size:18px;font-weight:700;letter-spacing:.04em;
  background:#fff;color:#111;width:100%;
}
.ms-filter-field input:focus{outline:none;border-color:var(--ci)}
.ms-deal-toggle{display:flex;gap:8px;flex-wrap:wrap}
.ms-deal-toggle .chip{padding:9px 18px;font-size:12px}
.ms-deal-toggle .chip.active{background:var(--ci);color:#fff;border-color:var(--ci)}
/* Vor der ersten Analyse gesperrt (Transaktion bleibt auf „Verkauf") — ausgegraut. */
.ms-deal-toggle.is-locked{opacity:.3;pointer-events:none}
@media (max-width:760px){.ms-filter{flex-direction:column;align-items:stretch}.ms-filter > .ms-filter-field{flex-basis:auto}}

/* Filter-Chip-Reihe (PriceHubble-Style: Pill-Dropdown-Buttons mit Chevron). */
.ms-filter-row{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:#fff;border-radius:0 0 var(--radius) var(--radius);
  padding:0 24px 18px;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.ms-filter-row.is-locked{opacity:.4;pointer-events:none;margin-bottom:30px}
.ms-filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border:2px solid var(--border);border-radius:100px;
  background:#fff;color:#111;font:inherit;font-size:13px;font-weight:700;
  cursor:pointer;transition:border-color .12s,background .12s;
}
.ms-filter-chip:hover{border-color:var(--ci)}
.ms-filter-chip svg{color:var(--muted);flex:0 0 auto}
.ms-filter-chip.is-active{border-color:var(--ci);background:var(--gold-bg);color:#111}
.ms-filter-chip.is-active svg{color:var(--ci)}
.ms-filter-chip:disabled{cursor:default}
.ms-filter-reset{
  margin-left:auto;background:transparent;border:0;font:inherit;font-size:13px;font-weight:700;
  color:var(--ci);cursor:pointer;padding:8px 4px;
}
.ms-filter-reset:disabled{color:var(--muted);opacity:.5;cursor:default}

.ms-total-count{font-size:14px;color:var(--muted);margin:20px 0 30px}
.ms-total-count strong{color:#111}

/* Filter-Dropdown-Popup (absolut, an document.body gehängt). */
.ms-filter-popup{
  position:absolute;z-index:60;min-width:220px;max-width:300px;
  background:#fff;border-radius:var(--radius);padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}
.ms-popup-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:4px 8px 8px}
.ms-popup-radio{display:flex;flex-direction:column;gap:2px}
.ms-popup-opt{
  display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:8px;
  background:transparent;font:inherit;font-size:14px;color:#111;cursor:pointer;
}
.ms-popup-opt:hover{background:var(--gold-bg)}
.ms-popup-opt.is-sel{background:var(--ci);color:#fff;font-weight:700}
.ms-popup-range{display:flex;gap:10px;padding:4px 8px}
.ms-popup-range label{display:flex;flex-direction:column;gap:4px;flex:1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ms-popup-range input,.ms-popup-range select{
  border:2px solid var(--border);border-radius:8px;padding:8px 10px;font:inherit;font-size:14px;font-weight:700;color:#111;background:#fff;
}
.ms-popup-range input:focus,.ms-popup-range select:focus{outline:none;border-color:var(--ci)}
.ms-popup-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 8px 4px}
.ms-popup-clear{background:transparent;border:0;font:inherit;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.ms-popup-clear:hover{color:var(--ci)}

.ms-combobox{position:relative}
.ms-suggest{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  background:#fff;border-radius:var(--radius);padding:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);max-height:340px;overflow-y:auto;
}
.ms-suggest-item{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  width:100%;padding:10px 12px;background:transparent;border:0;border-radius:8px;
  text-align:left;cursor:pointer;font:inherit;
}
.ms-suggest-item:hover,.ms-suggest-item:focus{background:var(--gold-bg);outline:none}
.ms-suggest-main{font-size:14px;font-weight:700;color:#111}
.ms-suggest-sub{font-size:11px;color:var(--muted);line-height:1.4}
.ms-suggest-loading,.ms-suggest-empty{padding:14px 12px;font-size:12px;color:var(--muted);text-align:center}

.ms-empty{
  background:#fff;border-radius:var(--radius);padding:60px 40px;text-align:center;
  color:var(--muted);
}
.ms-empty h2{font-size:22px;color:#111;margin:0 0 12px;letter-spacing:-.02em}
.ms-empty p{font-size:14px;line-height:1.6;margin:0;max-width:580px;margin-left:auto;margin-right:auto}

.ms-summary{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:30px;
}
@media (max-width:1100px){.ms-summary{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.ms-summary{grid-template-columns:repeat(2,1fr)}}
.ms-kpi{background:#fff;border-radius:var(--radius);padding:20px}
.ms-kpi-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.ms-kpi-value{font-size:24px;font-weight:700;color:#111;letter-spacing:-.02em}

.ms-grid{
  display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:30px;
}

.ms-card{background:#fff;border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:16px}
.ms-card-head h3{margin:0 0 4px;font-size:16px;font-weight:700;color:#111;letter-spacing:-.01em}
.ms-card-head p{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.ms-card-body{flex:1;display:flex;flex-direction:column;gap:14px;justify-content:flex-end}

.ms-chart-stats{display:flex;gap:24px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--border)}
.ms-chart-stats > div{display:flex;flex-direction:column;gap:2px}
.ms-chart-stats .lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ms-chart-stats strong{font-size:18px;font-weight:700;color:#111;letter-spacing:-.01em}
.ms-chart-stats strong.pos{color:#0a8a3a}
.ms-chart-stats strong.neg{color:#c0392b}
.ms-chart-empty{padding:40px 0;text-align:center;color:var(--muted);font-size:14px}
.ms-chart-stats--single{gap:0}
/* Wert-Charts: Toggle Preis/m² ⇄ Preis im Card-Header */
.ms-card-head--toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ms-vtoggle{display:flex;gap:4px;flex-shrink:0}
.ms-vtoggle .chip{font-size:12px;padding:5px 12px}
.ms-vtoggle .chip.active{background:var(--ci);color:#fff;border-color:var(--ci)}
/* KPI-Marker, die zugleich als Legende dienen (Gold-Punkt = teuerste Gruppe,
   orange Strich = Ø-Referenzlinie im Chart) */
.ms-legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ci);margin-right:6px;vertical-align:middle}
.ms-legend-line{display:inline-block;width:16px;height:0;border-top:2px dashed #e08a2b;margin-right:6px;vertical-align:middle}
.ms-hist-bar{cursor:pointer;transition:opacity .12s}
.ms-hist-bar:hover{opacity:.82}
/* Histogramm-Hover-Tooltip im PriceHubble-Stil (dunkle Box, zwei Zeilen) */
.ms-tip{position:fixed;z-index:90;display:none;pointer-events:none;background:#2c3036;color:#fff;
  padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.5;box-shadow:0 6px 20px rgba(0,0,0,.22);
  max-width:260px}
.ms-tip-lbl{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#aab1ba;margin-top:6px}
.ms-tip-lbl:first-child{margin-top:0}

.ms-line-svg .ms-delta.pos{fill:#0a8a3a}
.ms-line-svg .ms-delta.neg{fill:#c0392b}

.ms-footnote{font-size:11px;color:var(--muted);text-align:center;margin:0 0 30px;line-height:1.6}

/* ── Modul: Link in Bio (Admin) ─────────────────────────── */
.links-admin{display:flex;flex-direction:column;gap:16px}
.links-admin-empty{padding:40px 0;text-align:center}

.links-admin-form{background:#fff;border-radius:var(--radius);padding:20px}
.links-admin-fields{display:grid;grid-template-columns:1fr 2fr;gap:16px;margin-bottom:16px}
@media (max-width:760px){.links-admin-fields{grid-template-columns:1fr}}
.links-admin-fields .field{display:flex;flex-direction:column;gap:6px}
.links-admin-fields .field > span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.links-admin-fields .field > span em{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);opacity:.8}
.links-admin-fields__full{grid-column:1 / -1}
.links-admin-form-actions{display:flex;justify-content:flex-end;gap:10px}

/* Icon-Picker */
.links-icon-picker{display:flex;flex-direction:column;gap:14px}
.links-icon-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px;
  padding:14px;background:#fafafa;border-radius:var(--radius);
}
.links-icon-grid__cell{
  width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid transparent;background:#fff;border-radius:12px;
  cursor:pointer;color:#111;
  transition:border-color .15s,background .15s,color .15s;
}
.links-icon-grid__cell svg{width:24px;height:24px}
.links-icon-grid__cell:hover{border-color:#ddd}
.links-icon-grid__cell.is-active{border-color:var(--ci);background:var(--gold-bg);color:var(--ci)}
.links-icon-grid__cell--none{font-size:18px;color:var(--muted)}
.links-icon-grid__cell--none.is-active{color:var(--ci)}

.links-icon-picker__custom label{display:flex;flex-direction:column;gap:6px}
.links-icon-picker__custom label > span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.links-icon-picker__custom input{max-width:140px}

/* Checkbox-Zeile (Top-Row-Switch) */
.links-admin-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:#111}
.links-admin-checkbox input{width:18px;height:18px;accent-color:var(--ci)}
.links-admin-checkbox span em{font-style:normal;color:var(--muted)}

/* Liste */
.links-admin-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.links-admin-row{
  display:grid;
  grid-template-columns:24px 40px 1fr 88px auto auto;
  align-items:center;gap:16px;
  background:#fff;border-radius:var(--radius);padding:14px 18px;
}
.links-admin-row[data-enabled="0"]{opacity:.55}
.links-admin-row__grip{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:grab;padding:6px 0;
}
.links-admin-row__grip:active{cursor:grabbing}
.links-admin-row__grip i{display:block;width:14px;height:2px;background:#bbb}

.links-admin-row__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;background:#fafafa;color:#111;
}
.links-admin-row__icon:empty{background:transparent}
.links-admin-row__icon svg{width:22px;height:22px;display:block}
.links-admin-row__icon .links-icon-text{font-size:20px;line-height:1}

.links-admin-row__main{min-width:0;display:flex;flex-direction:column;gap:2px}
.links-admin-row__label{
  font-weight:700;color:#111;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.links-admin-row__url{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.links-admin-row__url a{color:inherit;text-decoration:none}
.links-admin-row__url a:hover{color:var(--ci);text-decoration:underline}
.links-admin-row__sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.links-admin-row__clicks{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--muted);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.links-admin-row__clicks svg{width:14px;height:14px}

.links-admin-row__actions{display:flex;align-items:center;gap:8px}

/* Status-Tag in eigener Spalte: klickbar, gleicher Look wie .row-tag in der MPA-Liste.
   Im aktiven Zustand (.ok) zeigt „Top-Row" (Link wird oben als Icon gestackt),
   sonst „Liste" (normaler Button im Listen-Block). Tag-Look (font-size, padding,
   border) erbt aus .row-tag — wir setzen hier nur Button-Reset + Interaktivität.
   Wichtig: NICHT `font:inherit` setzen, sonst kommt body-font-size durch und der
   Tag wird groß + umbrochen. */
.links-admin-row__status-cell{display:flex;justify-content:flex-start;align-items:center}
.links-admin-status{
  appearance:none;cursor:pointer;
  white-space:nowrap;line-height:1.2;
  transition:background-color .15s,color .15s,border-color .15s;
}
.links-admin-status:hover{background:var(--gold-bg);border-color:var(--ci);color:var(--ci)}
.links-admin-status.ok:hover{background:#e8f3df;border-color:#2a6b18;color:#2a6b18}
.links-admin-status:disabled{opacity:.5;cursor:wait}

/* Switch (compact) — Aktiv/Deaktiviert-Toggle in der Action-Spalte */
.links-admin-toggle{position:relative;display:inline-block;width:36px;height:20px;cursor:pointer}
.links-admin-toggle input{position:absolute;opacity:0;width:0;height:0}
.links-admin-toggle span{
  position:absolute;inset:0;background:#ddd;border-radius:100px;transition:background .15s;
}
.links-admin-toggle span::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  background:#fff;border-radius:50%;transition:left .15s;
}
.links-admin-toggle input:checked + span{background:var(--ci)}
.links-admin-toggle input:checked + span::after{left:18px}

.links-admin-row__form{grid-column:1 / -1;border-top:1px solid var(--border);margin-top:14px;padding-top:14px}

.links-admin-ghost{opacity:.4}
.links-admin-chosen{background:var(--gold-bg)}

@media (max-width:760px){
  .links-admin-row{grid-template-columns:24px 40px 1fr;gap:10px}
  .links-admin-row__status-cell,
  .links-admin-row__clicks{grid-column:2 / span 2;justify-self:start}
  .links-admin-row__actions{grid-column:2 / span 2;flex-wrap:wrap}
}

/* PriceHubble-Check (Admin-Sandbox) */
.phcheck-dump{background:var(--bg);border-radius:8px;padding:12px 16px}
.phcheck-dump > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.phcheck-dump > summary::-webkit-details-marker{display:none}
.phcheck-dump > summary::before{content:'▸';font-size:10px;color:var(--muted);transition:transform .15s}
.phcheck-dump[open] > summary::before{transform:rotate(90deg)}
.phcheck-boolrow{display:flex;gap:24px;margin-top:18px;flex-wrap:wrap}
.phcheck-public-report{margin-top:60px}
.phcheck-dump > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.phcheck-dump > summary::-webkit-details-marker{display:none}
.phcheck-dump > summary::before{content:'▸';font-size:10px;color:var(--muted);transition:transform .15s}
.phcheck-dump[open] > summary::before{transform:rotate(90deg)}


/* ─── Admin-Modul ─────────────────────────────────────────────── */
/* Tile-Grid auf #/admin Overview */
.admin-tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;margin-top:8px;
}
.admin-tile{
  background:#fff;border-radius:var(--radius);
  padding:20px;display:flex;gap:16px;align-items:flex-start;
  text-decoration:none;color:#111;
  transition:transform .15s, background .15s;
}
.admin-tile:hover{background:var(--gold-bg);transform:translateY(-2px)}
.admin-tile-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--gold-bg);color:var(--ci);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.admin-tile-icon svg{width:22px;height:22px}
.admin-tile-text{flex:1;min-width:0}
.admin-tile-label{font-weight:700;font-size:16px;letter-spacing:-0.02em;margin-bottom:4px}
.admin-tile-desc{font-size:14px;color:var(--muted);line-height:1.4}

/* Generische Admin-Tabelle (Cache / Activity / Audit / Backup) */
/* Filter-Leiste über Admin-Tabellen (Activity Log: User + Kategorie). */
.admin-filter-bar{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;
}
.admin-filter-bar select{padding:8px 14px;max-width:280px}
.admin-filter-label{
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}
.admin-filter-label:not(:first-child){margin-left:12px}

.admin-table{
  width:100%;border-collapse:collapse;font-size:14px;
}
.admin-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  font-weight:700;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--border);
}
.admin-table td{
  padding:12px;border-bottom:1px solid var(--border);vertical-align:middle;
}
.admin-table tbody tr:last-child td{border-bottom:none}
.admin-table tfoot td{
  padding:12px;border-top:2px solid var(--border);
  background:var(--bg);
}
.admin-table .num{text-align:right;font-variant-numeric:tabular-nums}
.admin-table th.num{text-align:right}
.admin-table td.empty{text-align:center;color:var(--muted);padding:24px}
.admin-table code{font-size:12px;background:var(--bg);padding:2px 6px;border-radius:4px}
/* Owner-only Lösch-Spalte im Activity Log — schmal, rechtsbündig. */
.admin-table .activity-del{width:1%;text-align:right;white-space:nowrap}
.admin-table .activity-del .btn{padding:5px 8px}
.admin-cache-label{font-weight:700;margin-bottom:2px}
.admin-cache-desc{font-size:12px;line-height:1.4}

/* ──────────────────────────────────────────────────────────
   Mobile-Shell: Hamburger-Top-Bar + Off-Canvas-Sidebar
   Ans Dateiende gehängt, damit der Block bei Spezifitäts-
   Gleichstand (z. B. .page-header) die früheren Regeln gewinnt.
   ────────────────────────────────────────────────────────── */
.mobile-topbar{display:none}
.mobile-nav-backdrop{display:none}

@media (max-width:860px){
  /* Shell wird zum normalen Block-Flow, Sidebar fliegt off-canvas darüber. */
  .shell{display:block}

  /* Fixe Top-Bar mit Hamburger + Brand — immer erreichbar beim Scrollen. */
  .mobile-topbar{
    display:flex;align-items:center;gap:11px;
    position:fixed;top:0;left:0;right:0;height:52px;z-index:60;
    background:var(--bg-sidebar);color:var(--sidebar-text);
    padding:0 14px;
  }
  .mobile-nav-toggle{
    width:40px;height:40px;flex-shrink:0;margin-left:-6px;
    display:inline-flex;align-items:center;justify-content:center;
    background:transparent;border:0;border-radius:8px;
    color:var(--sidebar-text);cursor:pointer;
    transition:background .15s;
  }
  .mobile-nav-toggle:hover{background:var(--bg-sidebar-hover)}
  .mobile-topbar-logo{height:22px;width:auto;filter:brightness(0) invert(1)}
  .mobile-topbar-title{
    font-size:20px;font-weight:700;text-transform:uppercase;
    letter-spacing:-0.04em;color:var(--sidebar-text);
  }

  /* Sidebar als Off-Canvas-Drawer. Interne Scroll-Logik (.sidebar-nav)
     bleibt erhalten, nur die Positionierung wechselt von sticky zu fixed. */
  .sidebar{
    position:fixed;top:0;left:0;height:100dvh;z-index:80;
    width:80vw;max-width:320px;min-width:0;
    transform:translateX(-100%);
    transition:transform .28s ease;
    box-shadow:0 0 40px rgba(0,0,0,.45);
    view-transition-name:none;
  }
  .shell.nav-open .sidebar{transform:translateX(0)}

  /* Backdrop: immer im DOM (für Transition), fängt Klicks erst bei nav-open. */
  .mobile-nav-backdrop{
    display:block;position:fixed;inset:0;z-index:70;
    background:rgba(0,0,0,.5);
    opacity:0;pointer-events:none;transition:opacity .28s ease;
  }
  .shell.nav-open .mobile-nav-backdrop{opacity:1;pointer-events:auto}

  /* Content rutscht unter die 52px-Top-Bar. */
  .main{padding-top:52px}
  .content-area{padding-left:16px;padding-right:16px}
  .page-header{
    top:52px;
    margin-left:-16px;margin-right:-16px;
    padding:16px 16px;
  }

  /* Breite Admin-Tabellen (Benutzer/Cache/Audit/Activity) horizontal scrollbar
     machen, statt sie an der content-area-Kante (overflow-x:clip) abzuschneiden.
     Greift nur für Section-Bodies MIT Tabelle — Form-Bodies mit aufklappenden
     Dropdowns bleiben unangetastet (kein implizites overflow-y-Clipping). */
  .section-body:has(.admin-table),
  .section-body:has(.user-table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .admin-table,.user-table{min-width:540px}
}

/* ── Mein Profil (read-only, #/profile) ─────────────────────── */
.profile-hero{
  display:flex;align-items:center;gap:24px;
  padding:28px 30px;background:#fff;border-radius:var(--radius);margin-bottom:30px;
}
.profile-avatar{
  width:88px;height:88px;border-radius:50%;flex-shrink:0;
  background-size:cover;background-position:center;background-color:#ececec;
}
.profile-avatar--initial{
  display:flex;align-items:center;justify-content:center;
  background:#111;color:#fff;font-weight:700;font-size:32px;letter-spacing:-.02em;
}
.profile-hero-name{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.2}
.profile-hero-role{font-size:14px;color:var(--muted);margin-top:2px}
.profile-hero-badges{margin-top:10px}
.profile-rows{display:flex;flex-direction:column;gap:12px}
.profile-row{display:flex;align-items:center;gap:10px;font-size:14px;color:#333}
.profile-row svg{flex-shrink:0;color:var(--muted)}
.profile-row a{color:inherit;text-decoration:none;transition:color .15s}
.profile-row a:hover{color:var(--ci)}
.profile-row-label{min-width:130px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.profile-pills{display:flex;flex-wrap:wrap;gap:8px}
.profile-modules-note{margin:0;font-size:14px;color:#333}
.profile-signature{max-width:260px}
.profile-signature img{max-width:100%;height:auto;display:block}

/* ─── Zugangsschutz (htpasswd) ──────────────────────────────────────────── */
.htpasswd-path{display:block;font-size:12px;color:var(--muted);word-break:break-all;line-height:1.6}
.htpasswd-status{display:block;margin-top:8px}
.htpasswd-users{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.htpasswd-user{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fafafa;border-radius:var(--radius);padding:10px 14px}
.htpasswd-user > code{font-size:14px;font-weight:600}
.htpasswd-user-actions{display:flex;gap:8px;flex-wrap:wrap}
.htpasswd-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.htpasswd-form .input{flex:1;min-width:160px}
.htpasswd-htaccess{margin-top:16px}
.htpasswd-htaccess summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--muted)}
.htpasswd-htaccess pre{background:#fafafa;border-radius:var(--radius);padding:14px;font-size:12px;line-height:1.5;overflow:auto;margin:10px 0}
.htpasswd-secret{margin:14px 0}
.htpasswd-secret code{display:block;background:var(--gold-bg);border-radius:var(--radius);padding:12px 16px;font-size:18px;font-weight:700;letter-spacing:.06em;text-align:center;user-select:all}

/* Ein-Modul-Ansicht: statt der Seitenleiste nur eine schmale Leiste mit Marke, Profil und Abmelden. */
.shell--ein-modul{display:block}
.ein-modul-kopf{
  position:sticky;top:0;z-index:60;height:52px;
  display:flex;align-items:center;gap:12px;
  padding:0 var(--space-page);
  background:var(--bg-sidebar);color:var(--sidebar-text);
}
.ein-modul-kopf__marke{display:flex;align-items:center;gap:11px;margin-right:auto;color:var(--sidebar-text);text-decoration:none}
.ein-modul-kopf__marke span{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:-0.04em}
.ein-modul-kopf__logo{height:22px;width:auto;filter:brightness(0) invert(1)}
.ein-modul-kopf__user{color:var(--sidebar-text);font-weight:700;font-size:14px;text-decoration:none;padding:8px 10px;border-radius:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ein-modul-kopf__user:hover{background:var(--bg-sidebar-hover)}
.shell--ein-modul .page-header{top:52px}
@media (max-width:860px){
  .ein-modul-kopf{padding:0 14px}
  .shell--ein-modul .main{padding-top:0}
}