:root {
  --bg: #0e1116;
  --bg-soft: #151a21;
  --card: #171d26;
  --card-2: #1d2430;
  --line: #2a323f;
  --text: #e8edf4;
  --muted: #8d9aad;
  --gold: #d4a845;
  --gold-soft: rgba(212, 168, 69, .14);
  --green: #4fbf8b;
  --blue: #5a9bd8;
  --red: #e2756b;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f5f7; --bg-soft: #eceef2; --card: #ffffff; --card-2: #f7f8fa;
    --line: #e2e5ea; --text: #16202c; --muted: #68758a;
    --gold: #a97d16; --gold-soft: rgba(169,125,22,.10);
    --green: #198f61; --blue: #2f6fb0; --red: #c5453a;
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 24px -16px rgba(16,24,40,.25);
  }
}
* { box-sizing: border-box; }
/* hidden muss immer gewinnen — sonst überstimmt ein display:grid das Attribut */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
main { max-width: 1320px; margin: 0 auto; padding: 22px 20px 80px; display: grid; gap: 18px; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 14px 20px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.mark {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--gold), color-mix(in srgb, var(--gold) 60%, #8a5a00));
  color: #1a1304; font-weight: 700; font-size: 19px;
}
.topbar h1 { font-size: 16px; }
.sub { margin: 1px 0 0; color: var(--muted); font-size: 12px; }
.topbar-tools { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }

/* ---------- Buttons / Inputs ---------- */
.btn {
  border: 1px solid var(--line); background: var(--card-2); color: var(--text);
  padding: 8px 13px; border-radius: 9px; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: .14s ease;
}
.btn:hover { border-color: var(--gold); color: var(--gold); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #1a1304; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); color: #1a1304; }
.btn.ghost { background: transparent; }
.btn.danger:hover { border-color: var(--red); color: var(--red); }
.btn.tiny { padding: 4px 8px; font-size: 12px; }
.field { display: grid; gap: 5px; }
.field > span { color: var(--muted); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.field.wide { grid-column: span 2; }
.field.inline { min-width: 190px; }
input, select {
  background: var(--card-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
input[type="range"] { padding: 0; accent-color: var(--gold); }
.row { display: flex; align-items: center; gap: 8px; }
output { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 600; min-width: 34px; }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h2 { font-size: 14px; }
.grid-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

/* ---------- KPI ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.kpi.now { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label strong { font-size: 12.5px; font-weight: 600; }
.kpi-date { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.kpi-value { font-size: 25px; font-weight: 650; letter-spacing: -.02em; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-sub { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.bar { height: 5px; border-radius: 4px; background: var(--card-2); display: flex; overflow: hidden; margin: 10px 0 8px; }
.bar i { display: block; height: 100%; }
.bar i.secured { background: var(--green); }
.bar i.vacant { background: var(--red); }
.bar i.planned { background: var(--blue); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--card-2); color: var(--muted); border: 1px solid var(--line); }
.pill.pos { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.pill.neg { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }

/* ---------- Stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.stat b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat span { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Legende (Karte) ---------- */
.legend { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-left: 10px; }
.dot.secured { background: var(--green); }
.dot.planned { background: var(--blue); }
.dot.cost { background: var(--red); }

/* ---------- Gebäude ---------- */
#buildings { display: grid; gap: 14px; }
.bld { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.bld-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; flex-wrap: wrap; }
.bld-head:hover { background: var(--card-2); }
.bld-title { flex: 1 1 220px; min-width: 0; }
.bld-title h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.bld-title p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.bld-metrics { display: flex; gap: 20px; flex-wrap: wrap; }
.metric { text-align: right; }
.metric b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.metric span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.chev { color: var(--muted); transition: .2s; }
.bld.open .chev { transform: rotate(90deg); }
.bld-body { border-top: 1px solid var(--line); padding: 16px; display: grid; gap: 16px; background: var(--bg-soft); }
.tag { font-size: 11px; padding: 2px 7px; border-radius: 6px; font-weight: 600; border: 1px solid var(--line); background: var(--card-2); color: var(--muted); }
.tag.fertig { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.tag.bau { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.tag.planung { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); }

table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 1130px; }
td select { min-width: 0; }
td input[type="date"] { min-width: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 5px 5px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--card-2); }
td input, td select { background: transparent; border-color: transparent; padding: 5px 6px; }
td input:hover, td select:hover { border-color: var(--line); }
td input:focus, td select:focus { background: var(--card-2); }
td.num input { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 600; font-variant-numeric: tabular-nums; padding: 9px 10px; border-top: 1px solid var(--line); }
.sec-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: 8px; }
.unit-tools { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.unit-tools .field { min-width: 110px; }
.empty { color: var(--muted); text-align: center; padding: 30px; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--gold); color: var(--text);
  padding: 9px 16px; border-radius: 99px; box-shadow: var(--shadow); font-size: 13px; z-index: 90;
}
@media (max-width: 1000px) {
  .kpi-grid, .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .kpi-grid, .grid-form { grid-template-columns: 1fr; }
  .field.wide { grid-column: span 1; }
}

/* ---------- Filter + Kantone ---------- */
.filterbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 12px 16px; }
.filterbar .spacer { flex: 1 1 40px; }
.canton-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 16px; margin: 0; cursor: pointer; user-select: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: border-color .15s ease, background .15s ease;
}
.canton-head:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.canton-group.open > .canton-head {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-color: transparent; background: var(--card-2);
}
.canton-head h2 { font-size: 14px; letter-spacing: .01em; }
.canton-head .chev { color: var(--muted); font-size: 11px; transition: transform .18s ease; }
.canton-group.open > .canton-head .chev { transform: rotate(90deg); color: var(--gold); }
.ct-spacer { flex: 1 1 20px; }
.ct-num { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-num b { color: var(--text); font-size: 14px; font-weight: 600; margin-right: 3px; }
.ct-num.gold b { color: var(--gold); }
.canton-code {
  display: inline-grid; place-items: center; min-width: 30px; padding: 2px 6px;
  border-radius: 7px; background: var(--gold-soft); color: var(--gold);
  font-weight: 700; font-size: 11.5px; letter-spacing: .04em;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.canton-group { display: grid; gap: 0; margin-bottom: 14px; }
.canton-body {
  display: grid; gap: 10px; padding: 12px;
  background: var(--bg-soft); border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.ct-table td, .ct-table th { white-space: nowrap; }
.ct-table table { min-width: 620px; }
.ct-table td.num, .ct-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ct-table tbody tr.total { font-weight: 600; }
.ct-table td { padding: 8px 10px; }
.muni { color: var(--muted); font-size: 12px; }

/* ---------- Schweizer Karte ---------- */
.mapcard { padding-bottom: 10px; }
.maprow { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 18px; align-items: start; }
.mapsvg svg { display: block; width: 100%; height: auto; }
.swatch-active { background: var(--gold); }
.swatch-idle { background: color-mix(in srgb, var(--muted) 45%, transparent); }

.ct { fill: var(--card-2); stroke: var(--bg); stroke-width: 1.1; stroke-linejoin: round; transition: fill .15s ease; }
.ct.idle { fill: color-mix(in srgb, var(--muted) 20%, transparent); }
.ct.active { fill: color-mix(in srgb, var(--gold) 42%, transparent); cursor: pointer; }
.ct.active:hover { fill: var(--gold); }
.ct.sel { fill: var(--gold); stroke: var(--text); stroke-width: 1.6; }
.lake { fill: color-mix(in srgb, var(--blue) 38%, transparent); stroke: none; pointer-events: none; }
.ct-label { font-size: 15px; font-weight: 700; fill: var(--text); pointer-events: none; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.ct-label.idle { fill: var(--muted); font-weight: 600; font-size: 12px; opacity: .55; }
.ct-pin { fill: var(--text); pointer-events: none; }
.mapsrc { margin: 6px 0 0; color: var(--muted); font-size: 10.5px; text-align: right; }

.mapinfo {
  display: grid; gap: 8px; align-content: start;
  padding: 16px 18px 18px;
  border: 2px solid var(--gold); border-radius: 16px;
  background: linear-gradient(180deg, var(--gold-soft), transparent 90px), var(--card);
  box-shadow: var(--shadow);
}
.mapinfo h3 {
  font-size: 15px; display: flex; align-items: center; gap: 8px;
  color: var(--gold); text-transform: uppercase; letter-spacing: .02em; font-weight: 700;
  padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid var(--line);
}
.mi-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 10px; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; }
.mi-row b { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 650; }
/* die zwei Mietzeilen sind das Wichtigste im Panel */
.mi-row.gross { padding: 9px 10px; align-items: baseline; }
.mi-row.gross > span { white-space: nowrap; }
.mi-row.gross b { font-size: 18px; color: var(--gold); white-space: nowrap; }
.mi-row.gross b small {
  font-size: 10.5px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; margin-left: 4px;
}
.mi-list { display: grid; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.mi-list li { font-size: 12.5px; color: var(--muted); padding-left: 12px; position: relative; }
.mi-list li::before { content: "·"; position: absolute; left: 2px; color: var(--gold); font-weight: 700; }
.mi-hint { color: var(--muted); font-size: 12.5px; }
@media (max-width: 860px) { .maprow { grid-template-columns: 1fr; } }

/* ---------- Vermietet / Leerstand / Zukunft ---------- */
.whoami { color: var(--muted); font-size: 12.5px; align-self: center; }
.statusgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.st {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  background: var(--card-2); border-left: 4px solid var(--muted);
}
.st.vermietet { border-left-color: var(--green); }
.st.leerstand { border-left-color: var(--red); }
.st.zukunft { border-left-color: var(--blue); }
.st h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.st .big { font-size: 26px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 6px 0 0; }
.st .big small { font-size: 13px; color: var(--muted); font-weight: 500; }
.st .line { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; margin-top: 3px; }
.st.vermietet .big { color: var(--green); }
.st.leerstand .big { color: var(--red); }
.st.zukunft .big { color: var(--blue); }
.splitbar { height: 10px; border-radius: 5px; overflow: hidden; display: flex; background: var(--card-2); border: 1px solid var(--line); margin-top: 14px; }
.splitbar i { height: 100%; display: block; }
.splitbar i.v { background: var(--green); }
.splitbar i.l { background: var(--red); }
.splitbar i.z { background: var(--blue); }
.vlz { display: inline-flex; gap: 7px; align-items: center; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vlz b { font-weight: 600; }
.vlz .v { color: var(--green); }
.vlz .l { color: var(--red); }
.vlz .z { color: var(--blue); }
@media (max-width: 760px) { .statusgrid { grid-template-columns: 1fr; } }

/* ---------- Einheiten-Typen ---------- */
.kindwrap {
  margin-top: 18px; padding: 16px 18px 18px;
  border: 2px solid var(--gold); border-radius: 16px;
  background: linear-gradient(180deg, var(--gold-soft), transparent 90px), var(--card);
  box-shadow: var(--shadow);
}
.kindkopf {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.kindkopf h3 {
  font-size: 15px; letter-spacing: .02em; color: var(--gold);
  text-transform: uppercase; font-weight: 700;
}
.kindkopf .kk-total { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.kindkopf .kk-total b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.klegende {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 10px;
  font-size: 12px; color: var(--muted);
}
.klegende .kl { display: inline-flex; align-items: center; gap: 7px; }
.klegende .kl b { color: var(--text); font-weight: 650; }
.klegende i, .kliste i {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none;
}
.klegende .v i, .kliste li.v i { background: var(--green); }
.klegende .l i, .kliste li.l i { background: var(--red); }
.klegende .z i, .kliste li.z i { background: var(--blue); }

.kindstrip {
  display: grid; gap: 8px;
  /* alle Typen in einer Reihe — die Spaltenzahl kommt aus dem Markup */
  grid-template-columns: repeat(var(--kcols, 4), minmax(0, 1fr));
}
.kchip {
  display: grid; gap: 5px; padding: 12px 12px 11px; min-width: 0;
  border: 2px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 12px; background: var(--card);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
/* Kopfzeile jeder Karte: Icon + Typ, durch eine Linie vom Rest getrennt */
.kchip .kname {
  padding-bottom: 7px; margin-bottom: 2px; border-bottom: 1px solid var(--line);
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gold); font-weight: 700; white-space: nowrap;
}
.kchip .knum {
  /* die Hauptzahl bekommt einen eigenen, hervorgehobenen Kasten */
  display: flex; align-items: baseline; gap: 6px; justify-content: center;
  padding: 7px 8px; margin: 2px 0 1px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 9px; background: var(--gold-soft);
  font-size: 29px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1;
  white-space: nowrap; letter-spacing: -.02em;
}
.kchip .knum small {
  font-size: 9.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; margin: 0;
}
.kliste {
  list-style: none; margin: 3px 0 0; padding: 0; display: grid; gap: 3px;
  font-size: 12px; color: var(--muted);
}
.kliste li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.kliste li b { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 2ch; text-align: right; }
.kliste li.v b { color: var(--green); }
.kliste li.l b { color: var(--red); }
.kliste li.z b { color: var(--blue); }
.kchip .krent {
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kchip .krent b { color: var(--text); font-weight: 650; }
.kindline { margin: 3px 0 0 !important; color: var(--gold) !important; font-size: 11.5px !important; font-weight: 500; }
td select.kindsel { min-width: 0; font-size: 12.5px; }
tbody tr.k-parkplatz td:first-child, tbody tr.k-garage td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
tbody tr.k-lager td:first-child { box-shadow: inset 3px 0 0 var(--muted); }
tbody tr.k-gewerbe td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

/* ---------- Typ-Aufstellung neben der Karte ---------- */
.mi-kinds { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mi-kind { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; background: var(--card-2); font-size: 13px; }
.mi-kind b { font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 650; }
.mi-kind.zero { color: var(--muted); }
.mi-kind.zero b { color: var(--muted); font-weight: 500; }
.mi-kind.total { background: var(--gold-soft); font-weight: 650; padding: 9px 10px; }
.mi-kind.total b { color: var(--gold); font-size: 19px; }

/* ---------- Verknüpfte Einheiten ---------- */
tbody tr.childrow { background: color-mix(in srgb, var(--gold) 6%, transparent); }
tbody tr.childrow:hover { background: color-mix(in srgb, var(--gold) 11%, transparent); }
td.indent { padding-left: 2px; white-space: nowrap; }
td.indent .arrow { color: var(--gold); font-weight: 700; margin: 0 2px 0 8px; }
td.indent input { width: calc(100% - 26px); display: inline-block; }
td select.parentsel { min-width: 0; font-size: 12.5px; }
.linktag {
  display: inline-block; padding: 3px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
  background: var(--gold-soft); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  white-space: nowrap;
}

/* ---------- Extern vermietete Einheiten ---------- */
td select.parentsel.is-extern { color: var(--blue); font-weight: 600; border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); }
td input.extern-tenant { color: var(--blue); font-weight: 500; }
td input.extern-tenant::placeholder { color: color-mix(in srgb, var(--blue) 60%, transparent); font-weight: 400; }
td.nolink { color: color-mix(in srgb, var(--muted) 60%, transparent); text-align: center; }

/* ---------- Spaltenbreiten der Einheiten-Tabelle ---------- */
/* Feste Spaltenaufteilung: der Rest geht an die Bezeichnung.
   Auf der Übersicht wird die Einheit erfasst — Mietbeginn und Mieter
   stehen bei «Wohnungen» und «Mieter», darum sind sie hier nicht mehr dabei.
   1 Typ · 2 Bezeichnung · 3 Etage · 4 Zi. · 5 m² · 6 Miete · 7 NK
   8 Depot · 9 Status · 10 Zuordnung · 11 Dateien · 12 Löschen            */
/* Feste Breiten brauchen eine Mindestbreite der Tabelle, sonst quetscht der
   Browser die Bezeichnung zusammen. Ist weniger Platz da, scrollt sie seitlich. */
.bld-body table { table-layout: fixed; min-width: 1150px; }
.bld-body th:nth-child(1),  .bld-body td:nth-child(1)  { width: 104px; }
.bld-body th:nth-child(2),  .bld-body td:nth-child(2)  { width: 220px; }
.bld-body th:nth-child(3),  .bld-body td:nth-child(3)  { width: 88px; }
.bld-body th:nth-child(4),  .bld-body td:nth-child(4)  { width: 72px; }
.bld-body th:nth-child(5),  .bld-body td:nth-child(5)  { width: 64px; }
.bld-body th:nth-child(6),  .bld-body td:nth-child(6)  { width: 88px; }
.bld-body th:nth-child(7),  .bld-body td:nth-child(7)  { width: 104px; }
.bld-body th:nth-child(8),  .bld-body td:nth-child(8)  { width: 104px; }
.bld-body th:nth-child(9),  .bld-body td:nth-child(9)  { width: 112px; }
.bld-body th:nth-child(10), .bld-body td:nth-child(10) { width: 130px; }
.bld-body th:nth-child(11), .bld-body td:nth-child(11) { width: 74px; }
.bld-body th:nth-child(12), .bld-body td:nth-child(12) { width: 44px; }
/* Überschriften dürfen umbrechen statt sich zu überlagern */
.bld-body th { white-space: normal; line-height: 1.25; vertical-align: bottom; }

/* Zahlenfelder brauchen keine Spinner — spart Platz */
.bld-body td input[type="number"] { -moz-appearance: textfield; }
.bld-body td input[type="number"]::-webkit-outer-spin-button,
.bld-body td input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bld-body td:nth-child(10) select { min-width: 100%; }

/* ---------- Gruppenzeilen nach Einheitentyp ---------- */
tbody tr.grouprow td {
  background: var(--card-2); padding: 7px 10px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
tbody tr.grouprow:first-child td { border-top: none; }
tbody tr.grouprow:hover td { background: var(--card-2); }
.grouprow .gname {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold);
}
.grouprow .gmeta { font-size: 11.5px; color: var(--muted); margin-left: 10px; font-variant-numeric: tabular-nums; }

/* ---------- Miete nach Fertigstellung ---------- */
.soll-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 12px; background: var(--card);
  border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line));
  border-left: 4px solid var(--blue);
}
.soll-banner > div:first-child { display: grid; gap: 1px; }
.sb-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.sb-value { font-size: 24px; font-weight: 650; color: var(--blue); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sb-value small { font-size: 13px; color: var(--muted); font-weight: 500; }
.sb-sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sb-kinds { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sb-chip {
  font-size: 12px; padding: 5px 10px; border-radius: 8px; background: var(--card-2);
  border: 1px solid var(--line); color: var(--muted); font-variant-numeric: tabular-nums;
}
.sb-chip b { color: var(--text); }
.sb-warn { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: var(--red); }

/* ---------- Soll-Summe unter der Verteilungsleiste ---------- */
.soll-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.st-formula { color: var(--muted); }
.st-formula b.v { color: var(--green); }
.st-formula b.l { color: var(--red); }
.st-formula b.z { color: var(--blue); }
.st-formula .op { color: var(--muted); margin: 0 2px; font-weight: 600; }
.st-sum { font-size: 15px; }
.st-sum b { color: var(--gold); font-weight: 650; }
.st-sum small { color: var(--muted); font-size: 12px; font-weight: 400; }
td select.roomsel { text-align: right; font-variant-numeric: tabular-nums; }
td select.floorsel { font-variant-numeric: tabular-nums; }

/* ---------- Kantonswappen ---------- */
.wappen {
  height: 18px; width: auto; display: inline-block; vertical-align: -3px;
  border-radius: 2px; flex: none;
  filter: drop-shadow(0 0 0.5px color-mix(in srgb, var(--text) 35%, transparent));
}
.wappen.big { height: 24px; vertical-align: -5px; }
.wappen.mini { height: 15px; vertical-align: -2px; margin-right: 7px; }
.wappen.placeholder { height: 18px; width: 14px; background: var(--card-2); border: 1px solid var(--line); }
.ct-cell { display: flex; align-items: center; gap: 7px; }
.mapinfo h3 { gap: 8px; }

/* ---------- Ausgaben ---------- */
.stat.cost { border-left: 3px solid var(--muted); }
.stat.cost.zins { border-left-color: var(--red); }
.stat.cost.amort { border-left-color: var(--blue); }
.stat.cost.hauswart { border-left-color: var(--gold); }
.stat.cost.sonstige { border-left-color: var(--muted); }
.stat.cost.total { border-left-color: var(--text); background: var(--card); }
.stat.cost em { display: block; font-style: normal; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; margin-top: 2px; }

.cf-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.cf-formula { color: var(--muted); }
.cf-formula b.v { color: var(--green); }
.cf-formula b.l { color: var(--red); }
.cf-formula .op { margin: 0 3px; font-weight: 600; }
.cf-res { font-size: 15px; }
.cf-res b.pos { color: var(--green); }
.cf-res b.neg { color: var(--red); }
.cf-res small { color: var(--muted); font-size: 12px; margin-left: 4px; }
.cf-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

.costline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding: 9px 14px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--red);
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.costline .cl-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.costline b { color: var(--text); font-weight: 600; }
.costline .cl-total { margin-left: auto; }
.costline .cl-total b { font-size: 14px; }
.costline .cl-cf.pos b, .costline .cl-cf.pos { color: var(--green); font-weight: 600; }
.costline .cl-cf.neg, .costline .cl-cf.neg b { color: var(--red); font-weight: 600; }
.nk-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 7px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.nk-line .nk-vals b { color: var(--text); font-weight: 600; }
.costline .cl-nk { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.field em.hint { font-style: normal; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.costline .cl-item i { font-style: normal; color: var(--muted); font-size: 11.5px; }
input.readonly { background: var(--bg-soft); color: var(--muted); cursor: default; }
input.readonly:focus { border-color: var(--line); box-shadow: none; }
.costline.empty { border-left-color: var(--line); }
.costline.empty .cl-item b, .costline.empty .cl-total b { color: var(--muted); font-weight: 500; }
.costline .cl-hint { flex-basis: 100%; font-size: 12px; color: var(--muted); font-style: italic; }

/* ---------- Netto-Rendite ---------- */
.metric.rendite b {
  color: var(--green); font-size: 13px;
  padding: 1px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 32%, transparent);
  display: inline-block;
}
.metric.rendite.leer b { color: var(--muted); background: var(--card-2); border-color: var(--line); }
.ct-num.rend b { color: var(--green); }
.costline .cl-rend { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.costline .cl-rend b { color: var(--green); }
.costline .cl-rend i { font-style: normal; opacity: .8; }

/* ---------- Finanzierung ---------- */
.fin-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fin-big {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  background: var(--card-2); border-left: 4px solid var(--muted);
}
.fin-big.eigen { border-left-color: var(--green); }
.fin-big.bank { border-left-color: var(--blue); }
.fin-big.zins { border-left-color: var(--gold); }
.fin-big h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.fin-big .big { font-size: 25px; font-weight: 650; letter-spacing: -.02em; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.fin-big .big small { font-size: 13px; color: var(--muted); font-weight: 500; }
.fin-big .line { color: var(--muted); font-size: 12.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.fin-big.eigen .big { color: var(--green); }
.fin-big.bank .big { color: var(--blue); }
.fin-big.zins .big { color: var(--gold); }
.splitbar.fin-bar { margin-top: 14px; height: 12px; }
.splitbar i.eigen { background: var(--green); }
.splitbar i.bank { background: var(--blue); }
.ct-table i.calc { font-style: normal; color: var(--muted); margin-left: 2px; }
@media (max-width: 860px) { .fin-top { grid-template-columns: 1fr; } }
.fin-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fin-big.wert { border-left-color: var(--gold); }
.fin-big.wert .big { color: var(--gold); }
.fin-bezug { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.fin-bezug b { color: var(--gold); }
@media (max-width: 1100px) { .fin-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================================================================
   Mobil — alles unter 760px
   ====================================================================== */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  main { padding: 12px 12px 56px; gap: 12px; }
  .card { padding: 13px 13px; border-radius: 12px; }
  .card-head { margin-bottom: 10px; gap: 8px; }

  /* Kopfzeile: Marke oben, Werkzeuge darunter in einer Reihe */
  .topbar { padding: 10px 12px; gap: 10px; }
  .topbar h1 { font-size: 15px; }
  .sub { font-size: 11px; }
  .topbar-tools { width: 100%; gap: 8px; align-items: center; }
  .topbar-tools .field.inline { order: 3; flex: 1 1 100%; min-width: 0; }
  .topbar-tools .btn { flex: 1 1 auto; padding: 9px 10px; font-size: 12.5px; }
  .whoami { flex: 1 1 100%; order: 4; font-size: 11.5px; }

  /* Eingaben: 16px verhindert das Hineinzoomen auf dem iPhone */
  input, select { font-size: 16px; padding: 9px 10px; }
  .field > span { font-size: 11px; }

  /* Karte: Panel unter die Schweiz, nicht daneben */
  .maprow { grid-template-columns: 1fr; gap: 12px; }
  .mapinfo { max-width: none; }
  .legend { font-size: 11px; }
  .dot { margin-left: 4px; }

  /* Kacheln überall einspaltig */
  .statusgrid, .fin-top, .kpi-grid, .grid-form { grid-template-columns: 1fr !important; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field.wide { grid-column: span 1; }
  .kindstrip { gap: 8px; }
  .kindstrip { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* Summenzeilen untereinander statt nebeneinander */
  .soll-total, .nk-line, .cf-line, .fin-bezug { flex-direction: column; align-items: flex-start; gap: 4px; }
  .st-sum, .cf-res { font-size: 14px; }

  /* Kantonsbalken: Titel oben, Zahlen als Raster darunter */
  .canton-head { padding: 11px 12px; gap: 8px; }
  .canton-head h2 { font-size: 14px; flex: 1 1 auto; }
  .canton-head .muni { flex-basis: 100%; margin-left: 42px; margin-top: -4px; }
  .ct-spacer { display: none; }
  .canton-head .ct-num {
    flex: 1 1 calc(50% - 6px); font-size: 11.5px;
    background: var(--bg-soft); border: 1px solid var(--line);
    border-radius: 8px; padding: 5px 8px;
  }
  .canton-body { padding: 8px; }

  /* Gebäudezeile: Kennzahlen als zweispaltiges Raster, linksbündig */
  .bld-head { padding: 12px; gap: 10px; }
  .bld-title { flex: 1 1 100%; }
  .bld-title h3 { font-size: 14px; }
  .bld-metrics {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px; width: 100%;
  }
  .metric { text-align: left; background: var(--bg-soft); border: 1px solid var(--line);
            border-radius: 8px; padding: 5px 8px; }
  .metric b { font-size: 14px; }
  .metric span { font-size: 10px; }
  .bld-body { padding: 12px; gap: 12px; }

  /* Tabellen scrollen seitlich — Hinweis, dass da mehr ist */
  .table-wrap { position: relative; }
  .table-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px;
    pointer-events: none; border-radius: 0 10px 10px 0;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--card) 85%, transparent));
  }
  td input, td select { font-size: 14px; }

  /* Werkzeugleiste über der Einheitentabelle */
  .unit-tools { width: 100%; gap: 6px; }
  .unit-tools .field { min-width: 0; flex: 1 1 calc(50% - 3px); }
  .unit-tools .btn { flex: 1 1 auto; }

  /* Filterleiste */
  .filterbar { padding: 12px; gap: 10px; }
  .filterbar .field.inline { flex: 1 1 100%; min-width: 0; }
  .filterbar .spacer { display: none; }
  .filterbar .btn { flex: 1 1 calc(33% - 7px); }

  /* Finanzierung / Soll-Banner */
  .soll-banner { padding: 11px 12px; }
  .sb-kinds { justify-content: flex-start; }
  .sb-value { font-size: 21px; }
  .fin-big .big, .st .big { font-size: 22px; }
  .costline { gap: 8px 12px; padding: 10px 12px; }
  .costline .cl-total { margin-left: 0; }
}

/* Sehr schmale Geräte */
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .kindstrip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* in der schmalen Karte bekommt «Einheiten total» eine eigene Zeile */
  .kchip .knum { flex-direction: column; align-items: center; gap: 0; }
  .klegende { gap: 5px 14px; font-size: 11.5px; }
  .kpi-value { font-size: 22px; }
  /* Kennzahlen bleiben zweispaltig — einspaltig wird die Gebäudezeile zu lang */
  .bld-metrics { gap: 5px 6px; }
  .metric b { font-size: 13px; }
  .metric span { font-size: 9.5px; letter-spacing: .02em; }
  .canton-head .ct-num { font-size: 11px; padding: 4px 6px; }
}

/* ======================================================================
   Grid- und Flex-Kinder dürfen schmaler werden als ihr Inhalt.
   Ohne das sprengt die 1130px breite Einheitentabelle die ganze Seite,
   und das iPhone zoomt die Desktop-Ansicht einfach heraus.
   ====================================================================== */
#buildings, .canton-group, .canton-body, .bld, .bld-body,
.maprow, .mapinfo, .statusgrid, .stats, .fin-top, .kpi-grid, .grid-form { min-width: 0; }
#buildings > *, .canton-body > *, .bld-body > *, .maprow > *,
.statusgrid > *, .stats > *, .fin-top > *, .kpi-grid > *, .grid-form > * { min-width: 0; }
.table-wrap { max-width: 100%; }
.card, .bld, main > section { max-width: 100%; }
body { overflow-x: hidden; }

/* Einspaltige Grids: die Spalte darf nie breiter werden als der Container.
   Ohne minmax(0, 1fr) zieht sie sich auf den max-content der Tabelle auf. */
main, .view, #buildings, .canton-group, .canton-body, .bld-body, .mapinfo, .mi-kinds {
  grid-template-columns: minmax(0, 1fr);
}
.maprow { grid-template-columns: minmax(0, 1fr) 268px; }
@media (max-width: 860px) { .maprow { grid-template-columns: minmax(0, 1fr); } }
.later-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.later-note b { color: var(--gold); }
.costline .cl-item.spaeter { opacity: .55; }
.costline .cl-item.spaeter i { font-style: normal; font-size: 11px; }

/* ---------- Wortmarke ---------- */
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: "Didot", "Bodoni 72", "Playfair Display", "Hoefler Text", Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: 15px; line-height: 1;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text); white-space: nowrap; flex-wrap: nowrap;
}
.logo .word { display: inline-block; }
.logo .emblem { width: 2.2em; height: 1.38em; flex: none; color: var(--text); }
.logo .emblem circle, .logo .emblem ellipse { vector-effect: non-scaling-stroke; }
.brand { align-items: center; }
.topbar .sub { letter-spacing: .01em; margin-top: 5px; }

/* Anmeldeseite: grösser und zentriert */
.login .logo-gross {
  justify-content: center; font-size: 14.5px; letter-spacing: .13em;
  margin: 0 auto 2px; flex-wrap: nowrap; gap: 8px;
}
.login .logo-gross .emblem { width: 2.45em; height: 1.53em; }

@media (max-width: 760px) {
  .logo { font-size: 13px; letter-spacing: .12em; gap: 6px; }
  .logo .emblem { width: 2.1em; height: 1.32em; }
}
@media (max-width: 420px) {
  .logo { font-size: 11.5px; letter-spacing: .08em; gap: 5px; }
}
tbody tr.k-scheune td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--gold) 60%, var(--muted)); }

/* ---------- Soll-Hero im Kartenpanel ---------- */
.soll-hero {
  display: grid; gap: 1px; margin-top: 4px; padding: 13px 14px;
  border-radius: 12px; text-align: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--gold) 16%, transparent),
    color-mix(in srgb, var(--gold) 7%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  animation: sollGlow 3.2s ease-in-out infinite;
}
@keyframes sollGlow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 28%, transparent); }
  50%      { box-shadow: 0 0 16px 2px color-mix(in srgb, var(--gold) 34%, transparent); }
}
.soll-hero .sh-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600;
}
.soll-hero .sh-jahr {
  font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: var(--gold);
  font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 3px;
}
.soll-hero .sh-cur { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.soll-hero .sh-monat {
  font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
@media (prefers-reduced-motion: reduce) { .soll-hero { animation: none; } }
@media (max-width: 760px) { .soll-hero .sh-jahr { font-size: 22px; } }
.soll-hero .sh-cur em { font-style: normal; color: var(--gold); font-weight: 600; }
.soll-hero .sh-nk {
  display: grid; gap: 2px; margin-top: 8px; padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
  font-size: 11px; font-weight: 400; line-height: 1.45;
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-variant-numeric: tabular-nums;
}
.soll-hero .sh-nk i { font-style: normal; font-weight: 400; color: inherit; }


/* ---------- Tooltip auf der Karte ---------- */
.mapsvg { position: relative; }
.maptip {
  position: absolute; z-index: 10; pointer-events: none;
  display: grid; gap: 3px; min-width: 190px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 6px 24px -8px rgba(0,0,0,.35);
  font-variant-numeric: tabular-nums;
}
.maptip .mt-kopf { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.maptip .mt-kopf b { font-weight: 600; }
.maptip .mt-zeile { font-size: 12px; color: var(--muted); }
.maptip .mt-zeile b { color: var(--text); font-weight: 600; }
.maptip .mt-soll {
  margin-top: 5px; padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  font-size: 12px; color: var(--muted);
}
.maptip .mt-soll b { font-size: 17px; color: var(--gold); font-weight: 700; display: block; line-height: 1.2; }
.maptip .mt-soll i { font-style: normal; font-size: 10.5px; display: block; margin-top: 1px; }
.maptip { left: 0; top: 0; will-change: transform; }
.mapinfo h3 { flex-wrap: wrap; }

/* ---------- Symbole der Einheitentypen ---------- */
.kbadge {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    color-mix(in srgb, var(--gold) 20%, transparent),
    color-mix(in srgb, var(--gold) 9%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--gold);
}
.kbadge .kicon { width: 16px; height: 16px; stroke-width: 1.55; }
.kchip .kname { display: flex; align-items: center; gap: 8px; }
.grouprow .gname { display: inline-flex; align-items: center; gap: 7px; vertical-align: -6px; }
.grouprow .kbadge { width: 22px; height: 22px; }
.grouprow .kbadge .kicon { width: 13px; height: 13px; }
.maptip[hidden] { display: none; }

/* ---------- Alle Einheiten ---------- */
.tchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 7px; border-radius: 999px; cursor: pointer;
  background: var(--card-2); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 12.5px; transition: .15s ease;
}
.tchip:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.tchip.an { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); font-weight: 600; }
.tchip b { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .75; }
.tchip .kbadge { width: 24px; height: 24px; }
.tchip .kbadge .kicon { width: 14px; height: 14px; }

.ufilter { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.ufilter .field { min-width: 130px; }
.ufilter .field.grow { flex: 1 1 200px; }

.ue-table table { min-width: 1080px; table-layout: auto; }
.ue-table th.sortbar { cursor: pointer; user-select: none; white-space: nowrap; }
.ue-table th.sortbar:hover { color: var(--gold); }
.ue-table th.sortbar.aktiv { color: var(--gold); }
.ue-table th i { font-style: normal; font-size: 9px; margin-left: 3px; }
.ue-table th.num, .ue-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ue-table th.mid, .ue-table td.mid { white-space: nowrap; }
.ue-table td { padding: 7px 9px; }
.ue-table tbody tr { cursor: pointer; }
.ue-table td.typ { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.ue-table td.typ .kbadge { width: 22px; height: 22px; }
.ue-table td.typ .kbadge .kicon { width: 13px; height: 13px; }
.ue-table .wappen { vertical-align: -3px; }

.st-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line); background: var(--card-2); color: var(--muted);
}
.st-pill.vermietet { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, transparent); }
.st-pill.frei { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, transparent); }
.st-pill.reserviert { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
  background: var(--gold-soft); }
.st-pill.im_bau { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, transparent); }
@media (max-width: 760px) {
  .ufilter .field { min-width: 0; flex: 1 1 calc(50% - 5px); }
  .tchip { font-size: 11.5px; padding: 5px 10px 5px 6px; }
}

/* ---------- Abschnitte zuklappen ---------- */
.card-head.klappbar { cursor: pointer; user-select: none; margin-bottom: 12px; }
.card-head.klappbar:hover h2 { color: var(--gold); }
.sec-chev { color: var(--muted); font-size: 11px; transition: transform .18s ease; margin-right: 2px; }
section.card:not(.zu) > .card-head .sec-chev { transform: rotate(90deg); color: var(--gold); }
section.card.zu > *:not(.card-head) { display: none; }
section.card.zu > .card-head { margin-bottom: 0; }
section.card.zu { padding-top: 12px; padding-bottom: 12px; }
.ue-hinweis { padding: 26px 14px; }
.ue-hinweis b { color: var(--gold); }

/* ---------- Hinweis, dass der Kanton aufklappbar ist ---------- */
.ct-open {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  margin-left: 14px; padding: 5px 10px 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--gold); background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  transition: .15s ease;
}
.ct-open i { font-style: normal; font-size: 14px; line-height: 1; transition: transform .18s ease; }
.canton-group.open .ct-open i { transform: rotate(90deg); }
.canton-head:hover .ct-open { background: var(--gold); color: #1a1304; border-color: var(--gold); }
.canton-head .chev { font-size: 12px; }
@media (max-width: 760px) {
  .ct-open { margin-left: 0; flex: 1 1 100%; justify-content: center; }
}
.ct-table tbody tr[data-bld], .ct-table tbody tr[data-ct] { cursor: pointer; }
.ct-table tbody tr[data-bld]:hover td:first-child,
.ct-table tbody tr[data-ct]:hover td:first-child { color: var(--gold); }

/* ---------- Globale Suche in der Kopfzeile ---------- */
.suchfeld { position: relative; flex: 0 1 300px; min-width: 190px; }
.suchfeld input {
  width: 100%; padding: 8px 12px; border-radius: 999px; font-size: 13px;
  background: var(--card-2); border: 1px solid var(--line);
}
.suchfeld input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

.such-erg {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  max-height: 420px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 34px -12px rgba(0,0,0,.45); padding: 5px;
}
.such-erg[hidden] { display: none; }
.such-zeile {
  display: grid; grid-template-columns: auto 1fr auto; gap: 2px 9px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 9px; background: transparent;
  text-align: left; cursor: pointer; font: inherit; color: var(--text);
}
.such-zeile:hover, .such-zeile:focus { background: var(--card-2); outline: none; }
.sz-art {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  color: var(--gold); background: var(--gold-soft); padding: 3px 7px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); white-space: nowrap;
}
.sz-titel { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 600; }
.sz-zeile { grid-column: 2; grid-row: 2; font-size: 11.5px; color: var(--muted); }
.sz-wert {
  grid-column: 3; grid-row: 1 / span 2; align-self: center; white-space: nowrap; text-align: right;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.such-leer { margin: 0; padding: 14px; text-align: center; color: var(--muted); font-size: 12.5px; }
@media (max-width: 760px) { .suchfeld { flex: 1 1 100%; order: 2; } }
.kpi-sub.basis { font-size: 10.5px; color: color-mix(in srgb, var(--muted) 80%, transparent); margin-top: 1px; }

/* ---------- Erwartete vs. effektive Baukosten ---------- */
.field.ruhend > span { opacity: .55; }
.field.ruhend input { background: var(--bg-soft); color: var(--muted); }
.field.ruhend .hint { opacity: .6; }
.field.aktiv > span { color: var(--gold); }
.field.aktiv input { border-color: color-mix(in srgb, var(--gold) 38%, var(--line)); }

/* ---------- Kapitalplan ---------- */
.kp-bar {
  display: flex; height: 9px; width: 100%; border-radius: 5px; overflow: hidden;
  background: var(--card-2); border: 1px solid var(--line);
}
.kp-bar i { display: block; height: 100%; }
.kp-bar i.e { background: var(--green); }
.kp-bar i.b { background: var(--blue); }
.ct-table tbody tr.ereignis td { background: color-mix(in srgb, var(--gold) 7%, transparent); font-weight: 600; }
.ct-table td.jetzt { color: var(--gold); font-weight: 700; }
.kp-bau { margin-top: 16px; }
.kp-bau .sec-title { margin-bottom: 8px; }
.kp-bar.ueber { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); }
.kp-summe {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 11px 14px;
  border-radius: 10px; background: var(--card-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.kp-summe span { white-space: nowrap; }
.kp-summe span + span { padding-left: 10px; border-left: 1px solid var(--line); }
.kp-summe b { color: var(--text); font-size: 14px; font-weight: 650; margin-right: 3px; }
.kp-summe .kp-quote { margin-left: auto; }
.kp-summe .kp-quote b { color: var(--gold); }
.ct-table td.zufluss { color: var(--blue); font-weight: 600; }
@media (max-width: 760px) { .kp-summe .kp-quote { margin-left: 0; } .kp-summe span + span { padding-left: 0; border-left: none; } }
.ueberfaellig { display: block; font-style: normal; font-size: 10.5px; color: var(--red); font-weight: 600; margin-top: 1px; }
.capsatz { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.capsatz input { width: 72px; padding: 5px 8px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.field .hint b { color: var(--gold); }
.field .hint i { font-style: normal; opacity: .75; }

/* ======================================================================
   Gebäudezeile: wichtig gross, Nebensache klein
   ====================================================================== */
.bld-head { display: flex; align-items: flex-start; gap: 20px; padding: 15px 18px; }
.bld-title { flex: 1 1 300px; min-width: 0; }
.bld-title h3 { font-size: 16px; }
.bld-title p { font-size: 12px; }

.bld-zahlen { flex: 0 1 460px; min-width: 260px; display: grid; gap: 9px; }

/* Belegung: eine Leiste sagt mehr als drei Zahlen */
.belegung { display: grid; gap: 5px; }
.bg-bar {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--card-2); border: 1px solid var(--line);
}
.bg-bar i { display: block; height: 100%; }
.bg-bar i.v { background: var(--green); }
.bg-bar i.l { background: var(--red); }
.bg-bar i.z { background: var(--blue); }
.bg-text { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bg-text b { font-size: 14px; font-weight: 700; }
.bg-text b.v { color: var(--green); }
.bg-text b.l { color: var(--red); }
.bg-text b.z { color: var(--blue); }
.bg-text em { font-style: normal; opacity: .7; margin-left: 6px; }
.pkt { opacity: .45; margin: 0 5px; }

/* Geld: heute und Vollvermietung, sonst nichts */
.geld { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.g-teil { display: grid; line-height: 1.15; }
.g-teil b { font-size: 23px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.g-teil small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.g-teil.jetzt b { color: var(--green); }
.g-teil.voll b { color: var(--gold); }
.g-pfeil { color: var(--muted); font-size: 18px; opacity: .6; }

/* Nebensache */
.bld-klein { margin: 0; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bld-klein b { color: var(--text); font-weight: 600; }
.bld-klein b.gruen { color: var(--green); }
.bld-leer { margin: 0; font-size: 12.5px; color: var(--muted); font-style: italic; }

@media (max-width: 860px) {
  .bld-head { flex-direction: column; gap: 12px; }
  .bld-zahlen { flex: 1 1 100%; width: 100%; }
  .g-teil b { font-size: 20px; }
}

/* ---------- Dateiablage je Einheit (Vertrag, Fotos) ---------- */
.filecell { text-align: center; }
.filebtn { min-width: 38px; }
.filebtn.hat { border-color: var(--gold); color: var(--gold); }
.filebtn.offen { background: var(--gold-soft); border-color: var(--gold); }
.filerow > td { padding: 0 !important; background: var(--bg-soft); }
.fileablage {
  padding: 12px 14px; display: grid; gap: 10px;
  border-left: 3px solid var(--gold);
}
.fa-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.fa-kopf b { color: var(--text); font-size: 13.5px; }
.fa-knoepfe { margin-left: auto; display: flex; gap: 8px; }
.fa-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fa-docs li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 8px; background: var(--card); border: 1px solid var(--line);
  border-radius: 11px; font-size: 13px; transition: border-color .15s, background .15s;
}
.fa-docs li:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--card-2); }

/* die ganze Zeile öffnet die Datei */
.fa-zeile { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0;
  color: var(--text); text-decoration: none; }
.fa-zeile:hover { text-decoration: none; }

.fa-kachel {
  flex: none; width: 44px; height: 44px; border-radius: 9px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--gold) 13%, var(--card-2));
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
}
.fa-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fk-zeichen { font-size: 20px; line-height: 1; }

.fa-text { display: grid; gap: 2px; min-width: 0; }
.fa-text b { font-size: 13.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fa-text em { font-style: normal; font-size: 11.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }

/* je Art eine eigene Farbe für die Kachel */
.fa-docs li.d-abnahme .fa-kachel { background: color-mix(in srgb, var(--blue) 13%, var(--card-2));
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line)); }
.fa-docs li.d-kuendigung .fa-kachel { background: color-mix(in srgb, var(--lila) 13%, var(--card-2));
  border-color: color-mix(in srgb, var(--lila) 30%, var(--line)); }
.fa-docs li.d-ausweis .fa-kachel, .fa-docs li.d-betreibung .fa-kachel,
.fa-docs li.d-lohn .fa-kachel { background: color-mix(in srgb, var(--green) 11%, var(--card-2));
  border-color: color-mix(in srgb, var(--green) 26%, var(--line)); }

.fa-docs .fa-dl { flex: none; color: var(--gold); font-size: 12px; font-weight: 500;
  text-decoration: none; }
.fa-docs .fa-dl:hover { text-decoration: underline; }
.fa-bilder { display: flex; gap: 10px; flex-wrap: wrap; }
.fa-bilder figure { margin: 0; width: 150px; }
.fa-bilder img {
  width: 150px; height: 110px; object-fit: cover; display: block;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.fa-bilder figcaption {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 11px; color: var(--muted); overflow: hidden;
}
.fa-bilder figcaption em { font-style: normal; flex: none; }
.fa-bilder .fc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fa-bilder figcaption button { margin-left: auto; flex: none; }
.fa-leer { margin: 0; color: var(--muted); font-size: 12.5px; }
@media (max-width: 560px) {
  .fa-knoepfe { margin-left: 0; width: 100%; }
  .fa-bilder figure, .fa-bilder img { width: 100%; }
  .fa-bilder figure { width: calc(50% - 5px); }
}
th.filehead { width: 66px; white-space: nowrap; text-align: center; }
.speicherzeile { margin: 4px 2px 0; color: var(--muted); font-size: 12px; }
.speicherzeile b { color: var(--text); font-weight: 650; }
.speicherzeile em { font-style: normal; opacity: .8; }

/* ---------- Mieterwechsel und Archiv ---------- */
.fa-wechsel {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px;
  background: var(--card); font-size: 12.5px; color: var(--muted);
}
.fa-wechsel .fw-text b { color: var(--text); }
.fa-wechsel label { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.fa-wechsel input[type=date] { font-size: 12.5px; }
.btn.gold { border-color: var(--gold); color: var(--gold); }
.fa-archiv { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px; }
.fa-archiv h5 {
  margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700;
}
.fa-archiv h5 span {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px;
  background: var(--gold-soft); color: var(--gold);
}
.arch { border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.arch summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; cursor: pointer; font-size: 12.5px; color: var(--muted);
}
.arch summary b { color: var(--text); font-size: 13.5px; }
.arch summary .arch-zeit { font-variant-numeric: tabular-nums; }
.arch summary .arch-miete { font-variant-numeric: tabular-nums; }
.arch summary .arch-n { margin-left: auto; }
.arch-body { padding: 0 10px 10px; display: grid; gap: 8px; }
.arch-form {
  display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: end;
  padding: 8px; background: var(--card-2); border-radius: 8px;
}
.arch-form label { display: grid; gap: 3px; font-size: 11px; color: var(--muted); }
.arch-form label.weit { flex: 1 1 200px; }
.arch-form input { font-size: 12.5px; }
.arch-knoepfe { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 560px) {
  .fa-wechsel label { margin-left: 0; }
  .arch-knoepfe { margin-left: 0; width: 100%; }
}

/* ================= Hauptmenü und Seiten ================= */
.hauptmenue {
  position: sticky; top: 64px; z-index: 15;
  display: flex; gap: 4px; flex-wrap: wrap;
  max-width: 1320px; margin: 14px auto -4px; padding: 5px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
}
.hm-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 9px; text-decoration: none;
  color: var(--muted); font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
}
.hm-link:hover { background: var(--card-2); color: var(--text); }
.hm-link.aktiv { background: var(--gold-soft); color: var(--gold); }
.hm-link .hm-icon { font-size: 15px; line-height: 1; }
body.kein-admin .nur-admin { display: none; }
.view { display: grid; gap: 18px; }
.view[hidden] { display: none; }

/* Nur-Lesen-Konten: alles, was verändert, verschwindet */
body.nurlesen #btnNew, body.nurlesen #btnImport,
body.nurlesen [data-delunit], body.nurlesen [data-delbld], body.nurlesen [data-delfile],
body.nurlesen [data-deltenancy], body.nurlesen [data-upload], body.nurlesen [data-auszug],
body.nurlesen [data-addunits], body.nurlesen [data-bulkrent], body.nurlesen [data-bulkstatus],
body.nurlesen .fa-wechsel label { display: none !important; }
/* Gesperrt wird nur, was wirklich speichert — Filter und Suche bleiben bedienbar */
body.nurlesen [data-upatch], body.nurlesen [data-bpatch], body.nurlesen [data-tpatch],
body.nurlesen [data-assign], body.nurlesen .hakenbox, body.nurlesen .betragbox,
body.nurlesen #addKind-, body.nurlesen .usertab select, body.nurlesen .usertab input {
  pointer-events: none; opacity: .7; background: var(--card-2);
}

/* ---------------- Wohnungen ---------------- */
.wh-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wh-tools input { min-width: 220px; }
.wh-liste { display: grid; gap: 10px; }
.wh-geb { border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); overflow: hidden; }
.wh-kopf {
  width: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 13px; color: var(--muted); font-family: inherit;
}
.wh-kopf b { color: var(--text); font-size: 14.5px; }
.wh-kopf .chev { transition: transform .15s; font-size: 10px; }
.wh-geb.offen .wh-kopf .chev { transform: rotate(90deg); }
.wh-ort { flex: 1; }
.wh-zahl { font-variant-numeric: tabular-nums; }
.wh-zahl b { color: var(--text); }
.wh-zahl.gruen b { color: var(--green); }
.wh-zahl.gold b { color: var(--gold); }
.wh-karten {
  display: grid; gap: 8px; padding: 0 12px 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.wh-karte {
  display: grid; gap: 4px; text-align: left; cursor: pointer; font-family: inherit;
  padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 10px; background: var(--card); min-width: 0;
}
.wh-karte:hover { border-color: var(--gold); }

/* Ganze Karte eingefaerbt — der Status ist so schon von weitem zu sehen */
.wh-karte.st-vermietet {
  background: color-mix(in srgb, var(--green) 13%, var(--card));
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  border-left-color: var(--green);
}
.wh-karte.st-frei {
  background: color-mix(in srgb, var(--red) 13%, var(--card));
  border-color: color-mix(in srgb, var(--red) 35%, var(--line));
  border-left-color: var(--red);
}
.wh-karte.st-im_bau {
  background: color-mix(in srgb, var(--blue) 13%, var(--card));
  border-color: color-mix(in srgb, var(--blue) 35%, var(--line));
  border-left-color: var(--blue);
}
.wh-karte.st-reserviert {
  background: color-mix(in srgb, var(--gold) 14%, var(--card));
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
  border-left-color: var(--gold);
}
/* Das Statuswort oben rechts nimmt dieselbe Farbe an */
.wh-karte.st-vermietet .wk-status {
  color: var(--green); border-color: color-mix(in srgb, var(--green) 55%, transparent);
  background: color-mix(in srgb, var(--green) 16%, var(--card));
}
.wh-karte.st-frei .wk-status {
  color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent);
  background: color-mix(in srgb, var(--red) 16%, var(--card));
}
.wh-karte.st-im_bau .wk-status {
  color: var(--blue); border-color: color-mix(in srgb, var(--blue) 55%, transparent);
  background: color-mix(in srgb, var(--blue) 16%, var(--card));
}
.wh-karte.st-reserviert .wk-status {
  color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  background: color-mix(in srgb, var(--gold) 18%, var(--card));
}
.wh-karte:hover { border-color: var(--gold); }
.wk-kopf { display: flex; align-items: center; gap: 7px; font-size: 14px; min-width: 0; }
.wk-kopf b { color: var(--text); }
.wk-status { margin-left: auto; flex: 0 0 auto; font-style: normal; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--muted); }
.wk-zeile, .wk-mieter, .wk-fuss { font-size: 12px; color: var(--muted); }
.wk-mieter { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-miete { font-size: 15px; font-variant-numeric: tabular-nums; }
.wk-miete i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.wk-fuss { font-size: 11px; min-height: 14px; }

.wh-dkopf { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.wh-dgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wh-box { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); min-width: 0; }
.wh-box.weit { margin-top: 12px; }
.wh-box h4 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gold); font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.wh-bknoepfe { margin-left: auto; display: flex; gap: 6px; }
.wh-dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 13px; }
.wh-dl dt { color: var(--muted); }
.wh-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.wh-dl dd .gold { color: var(--gold); }
.wh-mieter { margin: 0 0 8px; font-size: 17px; font-weight: 650; }
.st-text.st-vermietet { color: var(--green); }
.st-text.st-frei { color: var(--red); }
.st-text.st-reserviert, .st-text.st-im_bau { color: var(--blue); }
.wh-zahlliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.wh-zahlliste li { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 6px; background: var(--card); }
.wh-zahlliste li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.wh-zahlliste li em { font-style: normal; color: var(--muted); font-size: 11px; min-width: 66px; text-align: right; }
.wh-zahlliste li.ok b { color: var(--green); }
.wh-zahlliste li.offen b { color: var(--red); }

/* ---------------- Mieten ---------------- */
.miet-nav { display: flex; gap: 8px; align-items: center; }
.miet-summe { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-karte {
  display: grid; gap: 2px; padding: 12px 14px; border: 2px solid var(--line);
  border-radius: 12px; background: var(--card-2);
}
.ms-karte .ms-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.ms-karte b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ms-karte small { font-size: 11.5px; color: var(--muted); }
.ms-karte.gruen { border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.ms-karte.gruen b { color: var(--green); }
.ms-karte.rot { border-color: color-mix(in srgb, var(--red) 50%, transparent); }
.ms-karte.rot b { color: var(--red); }
.ms-balken { grid-column: 1 / -1; display: grid; gap: 5px; }
.msb-spur { height: 10px; border-radius: 6px; background: var(--card-2); overflow: hidden; border: 1px solid var(--line); }
.msb-spur i { display: block; height: 100%; background: var(--green); }
.msb-text { font-size: 12px; color: var(--muted); }
.miet-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ml-spacer { flex: 1; }
.miet-filter {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.miet-filter input { width: 16px; height: 16px; accent-color: var(--gold); }
.miet-geb { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mg-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px; background: var(--card-2);
}
.mg-auf {
  flex: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0;
  padding: 8px 10px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 12.5px; color: var(--muted);
}
.mg-auf b { color: var(--text); font-size: 14px; }
.mg-auf .chev { font-size: 10px; transition: transform .15s; }
.miet-geb.offen .mg-auf .chev { transform: rotate(90deg); }
.mg-zahl.ok { color: var(--green); font-weight: 650; }
.mg-geld { font-variant-numeric: tabular-nums; }
.mg-spur {
  flex: 0 1 120px; height: 7px; min-width: 60px; border-radius: 5px;
  background: var(--card); border: 1px solid var(--line); overflow: hidden;
}
.mg-spur i { display: block; height: 100%; background: var(--green); }
.miet-geb.fertig .mg-kopf { background: color-mix(in srgb, var(--green) 10%, var(--card-2)); }
.miettab tr.bezahlt td { background: color-mix(in srgb, var(--green) 7%, transparent); }
.miettab tr.offen .mt-offen { color: var(--red); font-size: 12px; }
.miettab .mt-etage { font-style: normal; color: var(--muted); font-size: 11.5px; }
.hakenbox { width: 19px; height: 19px; accent-color: var(--green); cursor: pointer; }
.betragbox { width: 94px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------- Benutzer ---------------- */
.usertab td, .usertab th { vertical-align: middle; }
.usertab tr.gesperrt { opacity: .5; }
.ubadge { font-style: normal; font-size: 10.5px; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.user-neu { margin-top: 16px; padding: 14px; border: 2px solid var(--gold); border-radius: 12px; background: var(--card-2); }
.user-neu h4 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); font-weight: 700; }
.un-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.un-form label { display: grid; gap: 3px; font-size: 11px; color: var(--muted); }
.un-hinweis { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.un-hinweis b { color: var(--text); }

@media (max-width: 760px) {
  .hauptmenue { top: 0; margin-top: 10px; }
  .hm-link { flex: 1 1 auto; justify-content: center; padding: 9px 10px; font-size: 12.5px; }
  .miet-summe { grid-template-columns: 1fr; }
  .wh-karten { grid-template-columns: minmax(0, 1fr); }
  .mg-kopf .btn { margin-left: 0; }
}

/* ---------------- Dialogfenster ---------------- */
body.modal-offen { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  overflow-y: auto; overscroll-behavior: contain; }
.modal[hidden] { display: none; }
.modal-hinter { position: absolute; inset: 0; background: rgba(8, 12, 18, .55); backdrop-filter: blur(2px); }
.modal-box {
  position: relative; width: min(420px, 100%); display: grid; gap: 14px;
  padding: 20px 22px 18px; border-radius: 16px;
  border: 2px solid var(--gold); background: var(--card); box-shadow: 0 24px 60px -20px rgba(0,0,0,.55);
  /* Hohe Dialoge dürfen scrollen statt unten abgeschnitten zu werden */
  max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain;
}
.modal-box h3 { font-size: 16px; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.md-wer { margin: 0; display: grid; gap: 2px; }
.md-wer b { font-size: 19px; font-weight: 650; }
.md-wer span { font-size: 12.5px; color: var(--muted); }
.md-soll {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px;
  background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.md-soll span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.md-soll b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.md-soll em { font-style: normal; font-size: 12px; color: var(--muted); }
.md-felder { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.md-felder label { display: grid; gap: 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.md-felder input { font-size: 15px; padding: 9px 10px; }
.md-knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.md-knoepfe .btn { padding: 9px 16px; }

/* Zeilen in der Mietentabelle sind anklickbar */
.miettab tr[data-zrow] { cursor: pointer; }
.miettab tr[data-zrow]:hover td { background: var(--gold-soft); }
.miettab .haken {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border: 2px solid var(--line); border-radius: 6px; font-size: 13px; line-height: 1;
}
.miettab .haken.ja { border-color: var(--green); background: var(--green); color: #fff; }
.miettab tr.trenner td {
  padding: 4px 10px; background: var(--bg-soft);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--green); font-weight: 700;
}
.mt-weniger { font-style: normal; color: var(--red); font-size: 11.5px; }
@media (max-width: 560px) { .md-felder { grid-template-columns: 1fr; } }

/* ================= Bewerbungen ================= */
.bw-linkbox {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  padding: 14px 16px; border: 2px solid var(--gold); border-radius: 12px;
  background: linear-gradient(180deg, var(--gold-soft), transparent 70px), var(--card-2);
}
.bw-linkbox h4 { margin: 0 0 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); font-weight: 700; }
.bw-linkbox p { margin: 0; font-size: 12.5px; color: var(--muted); }
.bl-zeile { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.bl-zeile input { min-width: 280px; font-size: 13px; font-family: ui-monospace, Menlo, monospace; }

.bew-karte { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 10px; background: var(--card); }
.bew-karte.s-neu { border-left: 4px solid var(--gold); }
.bew-karte.s-zusage { border-left: 4px solid var(--green); }
.bew-karte.s-absage { border-left: 4px solid var(--red); }
.bew-karte.s-geprueft { border-left: 4px solid var(--blue); }
.bk-kopf {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; cursor: pointer;
  padding: 11px 14px; background: var(--card-2); font-size: 12.5px; color: var(--muted);
}
.bk-kopf b { color: var(--text); font-size: 14.5px; }
.bk-kopf .chev { font-size: 10px; transition: transform .15s; }
.bew-karte.offen .bk-kopf .chev { transform: rotate(90deg); }
.bk-wohnung { flex: 1; min-width: 120px; }
.bk-status {
  padding: 2px 10px; border-radius: 10px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; background: var(--card); border: 1px solid var(--line);
}
.bk-status.st-neu { color: var(--gold); border-color: var(--gold); }
.bk-status.st-zusage { color: var(--green); border-color: var(--green); }
.bk-status.st-absage { color: var(--red); border-color: var(--red); }
.bk-status.st-geprueft { color: var(--blue); border-color: var(--blue); }
.bk-body { padding: 12px 14px 14px; display: grid; gap: 12px; }
.bk-spalten { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.bk-bemerkung { margin: 0; font-size: 13px; padding: 9px 12px; background: var(--card-2); border-radius: 8px; }
.bk-fuss { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.bk-fuss label { display: grid; gap: 4px; font-size: 11px; color: var(--muted); }
.bk-fuss label.weit { flex: 1 1 260px; }
.bk-knoepfe { display: flex; gap: 8px; margin-left: auto; align-items: center; }

/* ---- Oeffentliches Formular ---- */
.bewerbenseite { background: var(--bg); }
.bw-kopf { text-align: center; padding: 26px 16px 6px; }
.bw-kopf .sub { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.bw-main { max-width: 820px; margin: 0 auto; padding: 16px 16px 70px; }
.bw-form { display: grid; gap: 22px; }
.bw-block h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold);
  font-weight: 700; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.bw-grid { display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bw-grid label { display: grid; gap: 4px; font-size: 11.5px; color: var(--muted); min-width: 0; }
.bw-grid label.weit { grid-column: 1 / -1; }
.bw-grid input, .bw-grid select { font-size: 16px; padding: 10px 12px; }
.bl-kurz { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.bl-kurz a { color: var(--gold); text-decoration: none; }
.bl-domain { margin-top: 10px; align-items: end; }
.bl-domain label { display: grid; gap: 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); flex: 1; }
.nt-eintrag.neu { border-color: var(--gold); background: var(--gold-soft); }
.tw-box { width: min(380px, 100%); text-align: center; }
.tw-vorschau { width: 200px; height: 200px; margin: 6px auto 12px; border-radius: 50%;
  overflow: hidden; border: 3px solid var(--gold-soft); background: var(--card-2); }
.tw-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-knoepfe { justify-content: center; }

/* Kleines Rundbild in der Mieterliste */
.mr-name { display: inline-flex; align-items: center; gap: 9px; }
.mr-unterlagen .mr-rund { margin-right: 2px; }
.mr-rund { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: color-mix(in srgb, var(--gold) 16%, var(--card-2));
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
  color: var(--gold); }
.mr-rund.frueher { background: var(--card-2); border-color: var(--line); color: var(--muted); }
.mr-rund.offen { background: color-mix(in srgb, var(--blue) 12%, var(--card-2));
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); color: var(--blue); }
.mr-rund img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr-rund img[data-passfoto] { object-position: 30% 40%; transform: scale(2.2); }
.bf-wahl { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.bf-wahl .nv-wahl span { display: grid; gap: 2px; font-size: 13px; }
.bf-wahl .nv-wahl em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.bw-wahl { display: grid; gap: 10px; margin-top: 10px; }
.bw-wahl .nv-wahl { align-items: center; padding: 12px 14px; cursor: pointer; text-align: left; }
.bw-wahl .nv-wahl span { display: grid; gap: 3px; text-align: left; }
.bw-wahl .nv-wahl input[type="radio"] { width: 18px; height: 18px; min-width: 18px; flex: 0 0 auto; margin: 0; }
.bw-wahl .nv-wahl b { font-size: 14px; }
.bw-wahl .nv-wahl em { font-style: normal; font-size: 12px; color: var(--muted); }
.pf { color: var(--gold); }
.bw-hinweis { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.bw-uploads { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bw-up {
  display: grid; gap: 5px; align-content: start; padding: 12px;
  border: 2px dashed var(--line); border-radius: 10px; background: var(--card-2);
}
.bw-up b { font-size: 13px; }
.bw-up small { color: var(--muted); font-size: 11.5px; }
.bw-up input[type=file] { font-size: 12px; }
.bw-liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.bw-liste li {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  padding: 5px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 7px;
}
.bw-liste em { font-style: normal; color: var(--muted); margin-left: auto; }
.bw-liste button { border: 0; background: none; color: var(--red); cursor: pointer; font-size: 15px; padding: 0 2px; }
.bw-fuss { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.bw-klein { margin: 0; flex: 1; font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.bw-fuss .btn { font-size: 15px; padding: 12px 24px; }
.bw-danke { text-align: center; padding: 40px 20px; }
.bw-danke h2 { font-size: 20px; color: var(--green); margin-bottom: 8px; }
.bw-danke p { color: var(--muted); margin: 0; }
@media (max-width: 560px) {
  .bl-zeile { margin-left: 0; width: 100%; }
  .bl-zeile input { min-width: 0; flex: 1; }
  .bk-knoepfe { margin-left: 0; }
}
.bk-einzug { font-style: normal; color: var(--gold); font-size: 11.5px; }

/* Bearbeitbare Felder in der Wohnungs-Detailseite */
.wh-tipp { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.wh-form { display: grid; gap: 9px 10px; grid-template-columns: 1fr 1fr; }
.wh-form label { display: grid; gap: 3px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; min-width: 0; }
.wh-form label.weit { grid-column: 1 / -1; }
.wh-form input, .wh-form select { font-size: 14px; padding: 8px 10px; width: 100%; min-width: 0; }
.wh-form .st-sel.st-vermietet { color: var(--green); font-weight: 600; }
.wh-form .st-sel.st-frei { color: var(--red); font-weight: 600; }
.wh-form .st-sel.st-reserviert, .wh-form .st-sel.st-im_bau { color: var(--blue); font-weight: 600; }
.wh-kinder { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.wh-summe { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.wh-auszug { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.wh-auszug label { display: grid; gap: 3px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 560px) { .wh-form { grid-template-columns: 1fr; } }
.wh-unterh { margin: 14px 0 8px !important; padding-top: 10px; border-top: 1px dashed var(--line); }
.wh-kontakt { grid-column: 1 / -1; margin: 2px 0 0; display: flex; gap: 14px; font-size: 12.5px; }
.wh-kontakt a { color: var(--gold); text-decoration: none; font-weight: 600; }
.wh-kontakt a:hover { text-decoration: underline; }

/* ---- Fortschrittsfenster der Online-Bewerbung ---- */
.bw-modal { text-align: center; gap: 0; }
.bw-modal h3 { margin: 12px 0 6px; font-size: 17px; color: var(--text); text-transform: none; letter-spacing: 0; }
.bw-modal p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.bw-modal .btn { margin-top: 16px; min-width: 140px; }
.bwm-kreis {
  width: 58px; height: 58px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px; font-weight: 700;
  background: var(--gold-soft); color: var(--gold);
}
.bwm-kreis.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.bwm-kreis.fehler { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.bwm-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-top-color: var(--gold); animation: bwmdreh .8s linear infinite;
}
@keyframes bwmdreh { to { transform: rotate(360deg); } }
.bwm-spur {
  height: 8px; margin: 14px 0 8px; border-radius: 5px; overflow: hidden;
  background: var(--card-2); border: 1px solid var(--line);
}
.bwm-spur i { display: block; height: 100%; background: var(--gold); transition: width .35s ease; }
.bwm-klein { font-size: 11.5px !important; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .bwm-spinner { animation-duration: 2s; } }

/* ---------------- Mieter-Seite ---------------- */
.mieter-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.mietertab td { vertical-align: top; }
.mietertab tr.alt td { background: var(--bg-soft); color: var(--muted); }
.mietertab b { display: block; }
.mr-klein { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.mr-alt {
  display: inline-block; font-style: normal; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); border: 1px solid var(--line);
  border-radius: 8px; padding: 0 6px; margin-top: 2px;
}
.mr-fehlt { color: var(--muted); opacity: .6; }
.mietertab a { color: var(--gold); text-decoration: none; }
.mietertab a:hover { text-decoration: underline; }

/* ---- Dialog «Neuer Mieter» ---- */
.nm-box { width: min(560px, 100%); text-align: left; }
.nm-hinweis { margin: 0; font-size: 12.5px; color: var(--muted); }
.nm-hinweis.ok { color: var(--green); }
.nm-hinweis b { color: var(--text); }
.nm-form { display: grid; gap: 10px 12px; grid-template-columns: 1fr 1fr; }
.nm-form label { display: grid; gap: 4px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; min-width: 0; }
.nm-form label.weit, .nm-form > .weit { grid-column: 1 / -1; }
.nm-form input, .nm-form select { font-size: 15px; padding: 9px 11px; width: 100%; }
.nm-treffer {
  grid-column: 1 / -1; display: grid; gap: 6px; padding: 10px;
  border: 1px solid var(--gold); border-radius: 10px; background: var(--gold-soft);
}
.nt-titel { margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); font-weight: 700; }
.nt-eintrag {
  display: grid; gap: 1px; text-align: left; cursor: pointer; font-family: inherit;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.nt-eintrag:hover { border-color: var(--gold); }
.nt-eintrag b { font-size: 14px; }
.nt-eintrag span, .nt-eintrag em { font-size: 11.5px; color: var(--muted); font-style: normal; }
.nt-eintrag i { justify-self: end; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--gold); font-weight: 600; }
.nt-eintrag span, .nt-eintrag em { overflow-wrap: anywhere; }
@media (max-width: 560px) { .nm-form { grid-template-columns: 1fr; } }
.mietertab tr.ohne td { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.mr-alt.offen { color: var(--gold); border-color: var(--gold); }
.mr-aktion { white-space: nowrap; }
.mr-aktion .btn + .btn { margin-left: 5px; }

/* ---- Art der Nebenkosten ---- */
.nk-hinweis { font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; text-transform: none; letter-spacing: 0; }
.nkzelle, th.nkhead { white-space: normal; }
.nkzelle input { width: 100%; }
/* Die Spalte braucht etwas Platz — die Tabelle scrollt dafuer seitlich */
.nkzelle, th.nkhead { min-width: 96px; }
.nkzelle input { width: 100%; }
.nkzelle .nkart {
  display: block; width: 100%; min-width: 86px; margin-top: 3px;
  font-size: 11px; padding: 3px 4px; font-weight: 600;
  color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}
.nkzelle .nkart.leer { color: var(--muted); font-weight: 400; border-color: var(--line); }
.nkart-text {
  display: block; margin-top: 2px; font-style: normal; font-size: 10.5px;
  color: var(--gold); font-weight: 600; letter-spacing: .02em;
}
.mt-nkart { display: block; font-style: normal; font-size: 10.5px; color: var(--muted); }
.mr-gross { color: var(--text) !important; font-weight: 500; }
.mr-geb { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.mr-geb b { display: inline; font-size: 13px; color: var(--text); }
.mr-einheit { display: block; font-size: 14.5px; }

/* Mieter: Karten sind Filter, die Liste bleibt bis zum Klick zu */
.mkarte { cursor: pointer; text-align: left; font-family: inherit; }
.mkarte:hover { border-color: var(--gold); }
.mkarte.aktiv { background: var(--gold-soft); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.mieter-hinweis {
  margin: 14px 0 0; padding: 18px; text-align: center; font-size: 13px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 12px; background: var(--card-2);
}
.mzeile { cursor: pointer; }
.mzeile:hover td { background: var(--gold-soft); }

/* ---- Adressfelder mit Vorschlägen ---- */
.adr-strasse { position: relative; }
.adr-treffer {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  margin-top: 3px; padding: 5px; display: grid; gap: 3px; max-height: 240px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--gold); border-radius: 10px;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.45);
}
.adr-eintrag {
  display: grid; gap: 1px; text-align: left; cursor: pointer; font-family: inherit;
  padding: 7px 9px; border: 0; border-radius: 7px; background: none;
}
.adr-eintrag:hover { background: var(--gold-soft); }
.adr-eintrag b { font-size: 13.5px; color: var(--text); }
.adr-eintrag span { font-size: 11.5px; color: var(--muted); }
/* Strasse und Nr. stehen auf einer Zeile */
.adr-zeile {
  grid-column: 1 / -1; display: grid; gap: 10px 12px;
  grid-template-columns: minmax(0, 1fr) 96px; align-items: end;
}
.adr-zeile > label { display: grid; gap: 4px; min-width: 0; }
.wh-form .adr-zeile { gap: 9px 10px; }
@media (max-width: 420px) { .adr-zeile { grid-template-columns: minmax(0, 1fr) 72px; } }

/* ---- Adresse ab Mietbeginn ---- */
.adr-neu {
  grid-column: 1 / -1; display: grid; gap: 5px; margin-top: 6px; padding: 10px 12px;
  border: 1px dashed var(--gold); border-radius: 10px; background: var(--gold-soft);
}
.an-titel { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); font-weight: 700; }
.adr-neu > b { font-size: 13.5px; font-weight: 650; }
.adr-neu > b em { font-style: normal; font-weight: 400; color: var(--muted); }
.adr-neu label { display: grid; gap: 3px; margin-top: 3px; }
.an-hinweis { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.an-hinweis b { color: var(--text); font-weight: 600; }
.um-sel.um-ja { color: var(--green); font-weight: 600; }
.um-sel.um-nein { color: var(--red); font-weight: 600; }
.mr-neuadr { color: var(--green) !important; }
.mr-neuadr i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }

/* ---- Ausweis beim erfassten Mieter ---- */
.nm-ausweis {
  grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 6px; padding: 10px 12px;
  border: 1px dashed var(--gold); border-radius: 10px; background: var(--gold-soft);
}
.nm-ausweis.fehlt { border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }
.nm-ausweis > b { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; }
.nm-ausweis > b > em { font-style: normal; font-weight: 400; color: var(--muted); }
.nm-datei {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); font-weight: 500; font-size: 12.5px;
}
.nm-datei.bew { border-style: dashed; }
.nm-datei i { font-style: normal; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mr-ausweis { color: var(--green) !important; opacity: 1 !important; }
.mr-ausweis a { color: var(--green); }
.mr-halb { color: var(--gold) !important; opacity: 1 !important; }
.mr-unterlagen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; opacity: 1 !important; }
.mr-unterlagen .mr-fehlt { opacity: .75; }

/* ---- Ausweis: Vorder- und Rückseite ---- */
.aw-raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.aw-karte {
  display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px;
  background: var(--card);
}
.aw-karte.voll { border-style: solid; border-color: var(--green); }
.aw-titel { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); font-weight: 700; }
.aw-feld {
  display: grid; place-items: center; min-height: 170px; border-radius: 10px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.aw-feld img { width: 100%; height: 100%; max-height: 260px; object-fit: contain; display: block; }
.aw-leer { display: grid; gap: 6px; place-items: center; color: var(--muted); font-size: 12.5px; }
.aw-leer b { font-size: 32px; font-weight: 400; opacity: .55; }
.aw-feld.leer { cursor: pointer; transition: background .15s, box-shadow .15s; }
.aw-feld.leer:hover { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.aw-feld.leer:hover .aw-leer { color: var(--gold); }
.aw-pdf { display: grid; place-items: center; padding: 20px; font-size: 13px; color: var(--gold); text-decoration: none; }
.aw-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.aw-ok { font-size: 12px; font-weight: 600; color: var(--green); margin-right: auto; }
.aw-stand { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.aw-stand.ok { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.aw-stand.offen { color: var(--gold); background: var(--gold-soft); }

/* Verlauf in der Mieterakte auf- und zuklappen */
.ak-klapp {
  display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.ak-klapp .chev { font-size: 9px; color: var(--gold); }
.ak-klapp em {
  font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0;
  font-size: 11.5px; color: var(--muted);
}
.ak-klapp:hover { color: var(--gold); }

.aw-wahl { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.aw-wahl .nv-wahl span { display: grid; gap: 2px; font-size: 13px; font-weight: 600; }
.aw-wahl .nv-wahl em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.mietertab .mr-fehlt .btn { margin-left: 2px; }

/* ---- E-Mail-Fenster ---- */
.mail-box { width: min(680px, 100%); text-align: left; }
.mail-warn {
  margin: 0; padding: 9px 12px; border-radius: 8px; font-size: 12.5px;
  background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red);
}
.mail-form { display: grid; gap: 10px; }
.mail-form label { display: grid; gap: 4px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mail-form input, .mail-form select, .mail-form textarea { font-size: 14px; padding: 9px 11px; width: 100%; }
.mail-form textarea { font-family: inherit; line-height: 1.6; resize: vertical; }
.mail-ph { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; font-size: 11px; color: var(--muted); }
.ph-chip {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; cursor: pointer;
  padding: 3px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--card-2); color: var(--gold);
}
.ph-chip:hover { border-color: var(--gold); }
.mail-vorschau {
  padding: 12px 14px; border: 1px solid var(--gold); border-radius: 10px; background: var(--gold-soft);
}
.mail-vorschau b { display: block; margin-bottom: 6px; font-size: 14px; }
.mail-vorschau pre { margin: 0; font: 13px/1.6 inherit; white-space: pre-wrap; }
.mail-verlauf { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 5px; }
.mail-verlauf h5 { margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.mv-zeile { display: grid; gap: 1px; padding: 7px 10px; border-radius: 8px; background: var(--card-2); font-size: 12px; }
.mv-zeile b { font-size: 13px; }
.mv-zeile span, .mv-zeile em { color: var(--muted); font-style: normal; }
.mv-zeile.fehler { background: color-mix(in srgb, var(--red) 10%, transparent); }
.mv-zeile.fehler em { color: var(--red); }
.mail-zugang { margin-top: 0; margin-bottom: 16px; }
.mail-zugang .un-form { align-items: end; }
.mz-ok { color: var(--green); text-transform: none; letter-spacing: 0; font-size: 11px; }
.mz-offen { color: var(--red); text-transform: none; letter-spacing: 0; font-size: 11px; }
.mz-sig { display: grid; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mz-sig textarea { font: 13px/1.6 inherit; padding: 9px 11px; width: 100%; resize: vertical; }

/* ---- Mieterakte ---- */
.akte-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.akte-lage {
  padding: 3px 11px; border-radius: 11px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--line); color: var(--muted);
}
.akte-lage.aktuell { color: var(--green); border-color: var(--green); }
.akte-lage.offen { color: var(--gold); border-color: var(--gold); }
.akte-lage.frueher { color: var(--muted); }
.akte-knoepfe { display: grid; gap: 7px; }
.akte-knoepfe .btn { width: 100%; justify-content: center; }
.akte-hinweis { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.akte-unterh { margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--line); }
.akte-post { margin: 8px 0; font-size: 11.5px; color: var(--muted); }
.akte-post b { color: var(--text); }
.akte-mails { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.akte-mails li {
  display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--card);
  border: 1px solid var(--line); font-size: 12px;
}
.akte-mails li b { font-size: 13px; }
.akte-mails li span, .akte-mails li em { color: var(--muted); font-style: normal; font-size: 11.5px; }
.akte-mails li.fehler { border-color: var(--red); }
.akte-mails li.fehler em { color: var(--red); }
.akte-mails li .btn { justify-self: start; margin-top: 3px; }
.mail-lese { display: flex; align-items: center; gap: 9px; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.mail-lese input { width: 16px; height: 16px; accent-color: var(--gold); }
.lese { font-weight: 600; }
.lese.gelesen { color: var(--green); }
.lese.offen { color: var(--muted); }
.lese.fehler { color: var(--red); }
.lese.neutral { color: var(--muted); }

/* ---- Nachrichtenverlauf nach Monat ---- */
.vl-monat, .vl-jahr { margin-bottom: 7px; }
.vl-kopf {
  width: 100%; display: flex; align-items: baseline; gap: 8px; text-align: left; cursor: pointer;
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2);
  font-family: inherit; font-size: 11.5px; color: var(--muted);
}
.vl-kopf b { color: var(--text); font-size: 12.5px; }
.vl-kopf .chev { font-size: 9px; transition: transform .15s; }
.vl-monat.offen > .vl-kopf .chev, .vl-jahr.offen > .vl-kopf .chev { transform: rotate(90deg); }
.vl-kopf.laufend, .vl-monat.laufend > .vl-kopf {
  cursor: default; background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}
.vl-monat.laufend > .vl-kopf b { color: var(--gold); }
.vl-kopf.jahr { background: var(--bg-soft); }
.vl-monat .akte-mails, .vl-jahr .akte-mails { margin-top: 6px; }
.vl-jahr .vl-monat { margin-left: 12px; }

/* E-Mail-Fenster kompakter und nie höher als der Bildschirm */
.mail-box { max-height: 88vh; overflow-y: auto; gap: 11px; padding: 16px 18px 14px; }
.mail-box h3 { font-size: 15px; }
.mail-form { gap: 8px; }
.mail-form label { font-size: 10px; }
.mail-form input, .mail-form select { font-size: 13.5px; padding: 7px 10px; }
.mail-form textarea { font-size: 13.5px; padding: 8px 10px; }
.mail-ph { gap: 4px; font-size: 10.5px; }
.ph-chip { font-size: 10px; padding: 2px 6px; }
.mail-lese { font-size: 11.5px; }
.mail-verlauf { margin-top: 10px; padding-top: 8px; }
.md-knoepfe .btn { padding: 8px 14px; }
@media (max-height: 760px) { .mail-form textarea { min-height: 120px; } }
/* Der Haken für die Zustellkontrolle gehört in eine Zeile, nicht in Grossbuchstaben */
.mail-form .mail-lese {
  display: flex; align-items: center; gap: 9px;
  text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted);
}
.mail-form .mail-lese input { width: 16px; height: 16px; flex: none; }
.mail-fehler {
  margin: 0; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red);
}

/* ---- Knoepfe zu den druckbaren Vertragsunterlagen */
.druck-knoepfe { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.druck-knoepfe .btn { text-decoration: none; }

/* ---- Eingegangene Antworten im Verlauf */
.akte-mails li.eingang { border-left: 3px solid var(--gold); padding-left: 8px; }
.lese.eingang { background: color-mix(in srgb, var(--gold) 16%, transparent); color: #7a6224; }

/* ---- Verlauf als Gespräch, wie in einem Messenger:
   eigene Nachricht rechts und dunkel, Antwort des Mieters links und hell */
.akte-mails li.vl-paar {
  display: flex; flex-direction: column; gap: 6px;
  border: 0; padding: 0; margin: 0 0 14px; background: none;
}
.vl-blase { border-radius: 14px; padding: 9px 12px; max-width: 88%; position: relative; }
.vl-blase.von-mir {
  align-self: flex-end; border-bottom-right-radius: 4px;
  background: var(--gold); border: 1px solid var(--gold); color: #fff;
}
.vl-blase.von-mir .vl-bkopf b { color: #fff; }
.vl-blase.von-mir .vl-bkopf span { color: rgba(255,255,255,.72); }
.vl-blase.von-mir .vl-betreff { color: #fff; }
.vl-blase.von-mir .vl-text { color: rgba(255,255,255,.95); }
.vl-blase.von-mir .lese { background: rgba(255,255,255,.2); color: #fff; }
.vl-blase.von-mir .btn.tiny { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.vl-blase.von-mieter {
  align-self: flex-start; border-bottom-left-radius: 4px;
  background: var(--card-2); border: 1px solid var(--line);
}
.vl-bkopf { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.vl-bkopf b { font-size: 11.5px; }
.vl-bkopf span { font-size: 11px; color: var(--muted); }
.vl-betreff { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.vl-text {
  font-size: 12.5px; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden;
}
.vl-blase .btn.tiny { margin-top: 5px; }

.nk-hinweis.warn { color: var(--red); font-weight: 600; }

/* ---- Depot-Spalte in der Übersicht: Betrag und Art untereinander */
.depotzelle, th.depothead { white-space: normal; min-width: 96px; }
.depotzelle input { width: 100%; }
.depotzelle .depotart {
  display: block; width: 100%; min-width: 86px; margin-top: 3px;
  font-size: 11px; padding: 3px 4px; font-weight: 600;
  color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}
.depotzelle .depotart.leer { color: var(--muted); font-weight: 400; border-color: var(--line); }

/* ---- Kündigungstermin direkt in der Mieterakte ändern */
.akte-kuend { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.akte-kuend label { display: block; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
.akte-kuend input { width: 100%; margin-top: 4px; }
.akte-kuend em { display: block; margin-top: 4px; font-style: normal;
  font-size: 11px; color: var(--muted); }

/* ---- Anhänge direkt in der Sprechblase */
.vl-anhang { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.vl-bild { display: block; width: 76px; height: 76px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: var(--card); }
.vl-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-datei { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); text-decoration: none; font-size: 12px; }
.vl-datei em { font-style: normal; color: var(--muted); font-size: 11px; }
.vl-datei:hover { border-color: var(--gold); }
.von-mir .vl-datei { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; }
.von-mir .vl-datei em { color: rgba(255,255,255,.75); }
.von-mir .vl-bild { border-color: rgba(255,255,255,.4); }
.wh-hinweis { margin: 0 0 4px; font-size: 12px; color: var(--muted); }

/* ---- Online unterschreiben: Stand in der Wohnungsansicht */
.sig-block { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.sig-stand { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 10px; }
.sig-stand.fertig { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.sig-stand b { display: block; font-size: 13px; }
.sig-stand > span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sig-liste { list-style: none; margin: 7px 0 8px; padding: 0; display: grid; gap: 3px; }
.sig-liste li { font-size: 12px; color: var(--muted); }
.sig-liste li.ok { color: var(--green); font-weight: 600; }
.sig-wahl { display: grid; gap: 6px; }
.sig-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  text-transform: none; letter-spacing: 0; color: var(--text); }

/* ================= Menü an der Seite =================
   Ab Tablet-Breite steht das Menü links untereinander, der Inhalt rückt
   daneben und wird dadurch etwas schmaler. Auf dem Handy bleibt die
   bisherige Leiste quer oben. */
@media (min-width: 1000px) {
  .hauptmenue {
    position: fixed; top: 92px; left: 18px; width: 184px;
    flex-direction: column; flex-wrap: nowrap; gap: 2px;
    margin: 0; padding: 7px;
    max-height: calc(100vh - 110px); overflow-y: auto;
  }
  .hm-link { width: 100%; padding: 10px 13px; font-size: 13.5px; }
  .hm-link .hm-icon { width: 18px; text-align: center; }
  /* Der Inhalt nutzt die ganze Breite neben dem Menü */
  main { margin: 0 0 0 212px; padding-right: 26px;
    width: calc(100vw - 238px); max-width: 1700px; }
}

@media (min-width: 1960px) {
  /* sehr breiter Bildschirm: Menü und Inhalt gemeinsam mittig */
  .hauptmenue { left: calc(50% - 968px); }
  main { margin-left: calc(50% - 756px); }
}
.wh-unterh2 { margin: 16px 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gold); font-weight: 700;
  border-top: 1px solid var(--line); padding-top: 11px; }

/* ================= Seite «Gebäude» ================= */
.geb-kopf { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.geb-kopf h2 { font-size: 22px; }
.geb-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.geb-sub b { color: var(--gold); }
.geb-neu {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 0; border-radius: 12px; background: var(--gold); color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: .01em; padding: 15px 28px;
  box-shadow: 0 6px 18px -8px rgba(185,151,84,.9);
}
.geb-neu span { font-size: 23px; line-height: 1; margin-top: -2px; }
.geb-neu:hover { filter: brightness(1.06); }

/* ---- Kantonsfilter über den Wohnungen ---- */
.wh-kantone { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* alle Knöpfe gleich gross, damit die Reihe ruhig wirkt */
.wk-knopf {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 8px 7px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); cursor: pointer; width: 96px;
}
.wk-knopf:hover { border-color: var(--gold); background: var(--card-2); }
.wk-knopf.an { border-color: var(--gold); background: var(--gold-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent); }
.wk-name { font-size: 10.5px; color: var(--muted); font-weight: 600; line-height: 1.2;
  width: 100%; min-height: 2.4em; display: flex; align-items: center; justify-content: center;
  text-align: center; }
.wk-knopf.an .wk-name { color: var(--text); }
.wk-knopf em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 700; }
.wk-knopf.an em { color: var(--gold); }
/* das Wappen steckt immer im selben Rahmen - sonst wirken sie verschieden gross */
.wk-alle { font-size: 15px; font-weight: 700; color: var(--text);
  height: 34px; display: flex; align-items: center; }
.wappen.gross { height: 34px; width: 40px; object-fit: contain; display: block; }

/* ---- Vertragsübersicht ---- */
.vtr-table { min-width: 1100px; border-collapse: separate; border-spacing: 0; }
/* Kästchen statt loser Zeilen: jede Angabe sitzt in ihrem eigenen Feld */
.vtr-table th, .vtr-table td { border-right: 1px solid var(--line); }
.vtr-table th:last-child, .vtr-table td:last-child { border-right: 0; }
.vtr-table thead th { border-bottom: 1px solid var(--line); background: var(--card-2); }
.vtr-table tbody td { border-bottom: 1px solid var(--line); }
.vtr-table td { vertical-align: middle; }
.vtr-mail { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.vtr-sig { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px;
  border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.vtr-sig.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent); }
.vtr-sig.laeuft { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: var(--gold-soft); }
.vtr-aktion { white-space: nowrap; }
.vtr-aktion .btn { margin-left: 5px; text-decoration: none; }
.vtr-zeile { cursor: pointer; }
.vtr-zeile:hover td { background: var(--card-2); }
.vtr-zeile:hover td:first-child b { color: var(--gold); }

/* ---- Unterlagen-Seite: Videos ---- */
.dok-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dok-videos figure { margin: 0; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; }
.dok-videos video { width: 100%; display: block; background: #000; max-height: 200px; }
.dok-videos figcaption { display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  font-size: 11.5px; color: var(--muted); }
.dok-videos .fc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text); }

/* ---- Zusätzliche Personen im Bewerbungsformular ---- */
.bw-personen { display: grid; gap: 8px; margin-bottom: 10px; }
.bw-person { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.bw-person label { display: grid; gap: 4px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 600px) { .bw-person { grid-template-columns: 1fr 1fr auto; gap: 6px; } }

/* ---- Unterschrift der Verwaltung ---- */
.vs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
  margin: 12px 0 14px; }
.vs-feld label { display: grid; gap: 4px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.vs-pad { width: 100%; height: 130px; display: block; background: var(--card);
  border: 2px dashed var(--line); border-radius: 10px; touch-action: none; cursor: crosshair; }
.vs-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.vs-knoepfe { display: flex; gap: 6px; }

.st-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 0; background: var(--muted); }
.st-punkt.st-vermietet { background: var(--green); }
.st-punkt.st-frei { background: var(--red); }
.st-punkt.st-reserviert, .st-punkt.st-im_bau { background: var(--blue); }

/* ---- Park-Bussen ---- */
.bu-hinweis { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.6;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.bu-hinweis b { color: var(--text); }
.bu-summe { font-size: 13px; color: var(--muted); margin-right: 10px; }
.bu-liste { display: grid; gap: 8px; }
.bu-fall { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px;
  background: var(--card); overflow: hidden; }
.bu-fall.st-offen { border-left-color: var(--red); }
.bu-fall.st-verschickt { border-left-color: var(--gold); }
.bu-fall.st-bezahlt { border-left-color: var(--green); }
.bu-fall.st-storniert { border-left-color: var(--muted); opacity: .7; }
.bu-kopf { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 14px; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.bu-kopf .chev { color: var(--muted); font-size: 11px; transition: transform .15s; }
.bu-fall.offen .bu-kopf .chev { transform: rotate(90deg); }
.bu-kz { font-size: 14px; letter-spacing: .04em; min-width: 92px; }
.bu-ort { flex: 1; min-width: 0; color: var(--muted); font-size: 12.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bu-datum, .bu-halter { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.bu-halter em { font-style: normal; color: var(--red); }
.bu-betrag { font-size: 13px; white-space: nowrap; }
.bu-fotos { font-size: 12px; color: var(--muted); }
.bu-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.bu-status.st-offen { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.bu-status.st-verschickt { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.bu-status.st-bezahlt { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.bu-body { border-top: 1px solid var(--line); padding: 14px; background: var(--card-2);
  display: grid; gap: 14px; }
.bu-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.bu-aktionen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bu-aktionen .btn { text-decoration: none; }
.bu-statuswahl { display: flex; align-items: center; gap: 7px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bu-trenner { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gold); font-weight: 700; border-top: 1px solid var(--line);
  padding-top: 11px; margin-top: 4px; }
.nm-hinweis.ok { color: var(--green); }
.bu-index { display: grid; gap: 8px; }
.bu-indexinfo { font-size: 11.5px; color: var(--muted); }
.bu-index textarea { width: 100%; font: inherit; font-size: 13px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--text); }
.bu-knopf-hilfe { border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  padding: 10px 14px; margin-bottom: 14px; }
.bu-knopf-hilfe summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gold); }
.bu-schritte { margin: 10px 0 6px; padding-left: 20px; font-size: 12.5px; line-height: 1.8;
  color: var(--muted); }
.bu-schritte b { color: var(--text); }
.bu-bookmarklet { display: inline-block; margin-left: 6px; padding: 6px 14px; border-radius: 8px;
  background: var(--gold); color: #fff; font-weight: 700; font-size: 12.5px; text-decoration: none;
  cursor: grab; }
.bu-klein { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }

/* ---- Bundesregister: EGID / EGRID / Parzelle ---- */
.reg-feld { justify-content: flex-end; }
.reg-feld .btn { width: 100%; }
.reg-wahl { display: grid; gap: 8px; margin: 4px 0 2px; }
.reg-karte { display: grid; gap: 2px; text-align: left; padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); }
.reg-karte:hover { border-color: var(--gold); background: var(--card-2); }
.reg-karte span { font-size: 12.5px; color: var(--muted); }
.reg-karte em { font-style: normal; font-size: 11.5px; color: var(--gold); }

/* Eigene Adresse der Einheit — klein unter dem Gebaeudenamen */
.wk-adr { font-size: 11px; color: var(--muted); }
.wh-hinweis { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px;
  color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Zweite, kleine Zeile in der Spalte Bezeichnung: eigene Adresse der Einheit */
.u-adr { display: block; width: 100%; margin-top: 2px; font-size: 11px; color: var(--muted); padding: 2px 6px !important; }
.u-adr::placeholder { color: var(--muted); opacity: .55; }

/* Sprachwahl auf dem Bewerbungsformular */
/* Sprachwahl: alle Sprachen auf einen Blick, nichts zum Scrollen */
.bw-sprache { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px; margin: 12px auto 0; max-width: 720px; }
.bs-globus { font-size: 15px; opacity: .6; margin-right: 2px; }
.bw-sprache button { border: 1px solid var(--line); background: var(--card); color: var(--muted);
  cursor: pointer; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px;
  font-weight: 500; line-height: 1.2; white-space: nowrap; }
.bw-sprache button:hover { color: var(--text); border-color: var(--gold); }
.bw-sprache button.an { background: var(--gold); border-color: var(--gold); color: #1a1407; font-weight: 700; }

@media (max-width: 600px) {
  .bw-sprache { gap: 5px; padding: 0 4px; }
  .bw-sprache button { padding: 6px 10px; font-size: 12.5px; }
  .bs-globus { display: none; }
}

/* Kacheln mit der Maus sortieren */
.wh-karte[draggable="true"] { cursor: grab; }
.wh-karte[draggable="true"]:active { cursor: grabbing; }
.wh-karte.zieht { opacity: .45; outline: 2px dashed var(--gold); outline-offset: 2px; }
.wh-karten { min-height: 10px; }

/* ---- Bewerbungen nach Monat abgelegt ---- */
.bew-monat { margin-bottom: 10px; }
.bm-kopf {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card-2); font: inherit; color: var(--text); text-align: left;
}
.bm-kopf:hover { border-color: var(--gold); }
.bm-kopf .chev { font-size: 10px; transition: transform .15s; }
.bew-monat.offen .bm-kopf .chev { transform: rotate(90deg); color: var(--gold); }
.bew-monat.offen .bm-kopf { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
.bm-kopf b { font-size: 14px; }
.bm-zahl { margin-left: auto; font-size: 12px; color: var(--muted); }
.bm-neu { font-size: 11px; font-weight: 600; color: var(--gold);
  background: var(--gold-soft); border-radius: 999px; padding: 3px 9px; }
.bew-monat .bew-karte { margin-top: 8px; margin-left: 18px; }

/* ---- Bank-Konten ---- */
.kt-karte { border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  margin-bottom: 12px; overflow: hidden; }
.kt-karte.still { opacity: .6; }
.kt-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; background: var(--card-2); border-bottom: 1px solid var(--line); }
.kt-kopf b { font-size: 14.5px; }
.kt-bank { font-size: 12.5px; color: var(--muted); }
.kt-iban { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); }
.kt-marke { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.kt-marke.qr { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent);
  background: color-mix(in srgb, var(--green) 14%, var(--card)); }
.kt-marke.fehler { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent);
  background: color-mix(in srgb, var(--red) 14%, var(--card)); }
.kt-zahl { margin-left: auto; font-size: 12px; color: var(--muted); }
.kt-form { display: grid; gap: 10px; padding: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kt-form label { display: grid; gap: 4px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600; min-width: 0; }
.kt-form input, .kt-form select { font-size: 14px; }
.kt-fuss { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

/* ---- Vorschau der QR-Rechnung bei der Einheit ---- */
.qr-vorschau { display: grid; gap: 5px; margin: 8px 0 12px; font-size: 13px; }
.qv-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qv-zeile > span { min-width: 90px; color: var(--muted); font-size: 12px; }
.qv-zeile b { font-variant-numeric: tabular-nums; }
.qv-zeile em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.qv-marke { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); }
.qv-marke.qr { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.qv-fehlt { margin: 0; font-size: 13px; color: var(--red); }

/* ---- Unterlagen einer Einheit: Kopfleiste, zwei Spalten, Dateigruppen ---- */
.dok-kopf { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.dk-chip { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); }
.dk-chip em { font-style: normal; font-size: 10px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.dk-chip b { font-size: 13.5px; white-space: nowrap; }
.dk-chip i { font-style: normal; color: var(--muted); font-weight: 400; }
.dk-chip.gold b { color: var(--gold); }
.dk-chip.ok b { color: var(--green); }
.dk-chip.ok { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.dk-chip.laeuft b { color: var(--gold); }
.dk-chip.laeuft { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
.dk-chip.offen b { color: var(--muted); }

.dok-raster { display: grid; gap: 12px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  margin-bottom: 12px; align-items: start; }
.dok-trenner { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }

.dok-gruppe { margin-top: 14px; }
.dok-gruppe:first-of-type { margin-top: 6px; }
.dg-titel { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dg-titel em { font-style: normal; color: var(--gold); margin-left: 4px; }

@media (max-width: 900px) {
  .dok-raster { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Dossier und einzelne unterschriebene Dokumente ---- */
.dossier { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 0 16px; padding: 13px 15px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line));
  background: color-mix(in srgb, var(--gold) 8%, var(--card)); }
.ds-text { flex: 1 1 100%; min-width: 0; display: grid; gap: 3px; }
/* Die Knöpfe stehen gesammelt direkt unter dem Text — keiner versteckt sich */
.ds-aktionen { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-text b { font-size: 14px; }
.ds-text span { font-size: 12px; color: var(--muted); line-height: 1.5; }
.dossier .btn em { font-style: normal; opacity: .75; margin-left: 6px; font-size: 11.5px; }
.ds-fehlt { font-size: 12.5px; color: var(--muted); }

.sig-einzeln { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.sig-einzeln li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.se-name { flex: 1 1 180px; min-width: 0; font-size: 13px; }
.se-datum { font-style: normal; font-size: 11.5px; color: var(--green); }
.se-offen { font-style: normal; font-size: 11.5px; color: var(--muted); }

/* Uhrzeit der Unterschrift in der Kopfleiste */
.dk-zeit { font-style: normal; font-size: 10.5px; color: var(--muted); }

/* ---- In Kündigung: eigene Farbe, damit es sofort auffällt ---- */
:root { --lila: #8b6fd1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lila: #9d85e0; } }

.wh-karte.st-kuendigung {
  background: color-mix(in srgb, var(--lila) 13%, var(--card));
  border-color: color-mix(in srgb, var(--lila) 35%, var(--line));
  border-left-color: var(--lila);
}
.wh-karte.st-kuendigung .wk-status {
  color: var(--lila); border-color: color-mix(in srgb, var(--lila) 55%, transparent);
  background: color-mix(in srgb, var(--lila) 16%, var(--card));
}
.st-punkt.st-kuendigung { background: var(--lila); }
.wh-form .st-sel.st-kuendigung { color: var(--lila); font-weight: 600; }
.st-text.st-kuendigung { color: var(--lila); }
.sb-chip.st-kuendigung { color: var(--lila); }

/* Stand der Kündigung bei der Einheit */
.kue-stand { flex: 1 1 100%; display: grid; gap: 2px; margin-bottom: 8px;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--lila) 40%, var(--line));
  background: color-mix(in srgb, var(--lila) 10%, var(--card)); }
.kue-stand b { font-size: 13px; color: var(--lila); }
.kue-stand span { font-size: 12.5px; color: var(--muted); }
.kue-stand span b { color: var(--text); font-size: 12.5px; }
.vtr-kue { font-size: 12px; font-weight: 600; color: var(--lila);
  background: color-mix(in srgb, var(--lila) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--lila) 40%, transparent);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

/* Gekündigte Verträge: ganze Zeile lila hinterlegt */
.vtr-zeile.st-kuendigung td { background: color-mix(in srgb, var(--lila) 11%, transparent); }
.vtr-zeile.st-kuendigung:hover td { background: color-mix(in srgb, var(--lila) 17%, transparent); }
.vtr-zeile.st-kuendigung td:first-child { box-shadow: inset 3px 0 0 var(--lila); }

/* Kündigung auf der Unterlagen-Seite */
.dok-kuendigung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dk-chip.kue b { color: var(--lila); }
.dk-chip.kue { border-color: color-mix(in srgb, var(--lila) 40%, var(--line));
  background: color-mix(in srgb, var(--lila) 10%, var(--card-2)); }

/* ---- Einheit im Detail: ruhigere Formulare, klarere Kästen ---- */
.wh-dgrid { gap: 14px; }
.wh-box { padding: 16px 18px; border-radius: 14px; }
.wh-box h4 { margin-bottom: 12px; }
.wh-form { gap: 12px 12px; }
.wh-form label { gap: 5px; font-size: 10px; font-weight: 600; }
.wh-form input, .wh-form select {
  border-radius: 9px; background: var(--card);
  transition: border-color .15s, box-shadow .15s;
}
.wh-form input:hover, .wh-form select:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.wh-form input:focus, .wh-form select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
  outline: none;
}
.wh-form input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }

/* Statusfarbe auch in der Kopfleiste der Einheit */
.dk-chip.st-vermietet b { color: var(--green); }
.dk-chip.st-vermietet { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.dk-chip.st-frei b { color: var(--red); }
.dk-chip.st-frei { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.dk-chip.st-im_bau b, .dk-chip.st-reserviert b { color: var(--blue); }
.dk-chip.st-im_bau, .dk-chip.st-reserviert { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); }
.dk-chip.st-kuendigung b { color: var(--lila); }
.dk-chip.st-kuendigung { border-color: color-mix(in srgb, var(--lila) 40%, var(--line)); }

/* ---- Archiv der abgelaufenen Verträge ---- */
.vtr-archiv { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.va-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.va-kopf h3 { margin: 0; font-size: 15px; }
.va-zahl { font-size: 12px; color: var(--muted); }

.va-monat { margin-bottom: 8px; }
.va-mkopf { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card-2); font: inherit; color: var(--text); text-align: left; }
.va-mkopf:hover { border-color: var(--gold); }
.va-mkopf .chev { font-size: 10px; transition: transform .15s; }
.va-monat.offen .va-mkopf .chev { transform: rotate(90deg); color: var(--gold); }
.va-monat.offen .va-mkopf { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
.va-mkopf b { font-size: 13.5px; }
.va-mzahl { margin-left: auto; font-size: 12px; color: var(--muted); }
.va-mhaus { font-size: 11.5px; color: var(--muted); }

.va-haus { margin: 8px 0 10px 18px; }
.va-hname { display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); }
.va-hname em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; }

.va-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.va-liste li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; cursor: pointer;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); font-size: 13px; }
.va-liste li:hover { border-color: var(--gold); background: var(--card-2); }
.va-name { font-weight: 600; flex: 1 1 160px; min-width: 0; }
.va-einheit { color: var(--muted); font-size: 12.5px; }
.va-zeit { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.va-miete { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.va-dateien { font-size: 12px; color: var(--muted); min-width: 34px; text-align: right; }

/* Hinweis im Vertragsdialog unter dem Mietbeginn */
.nv-hinweis { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px;
  color: var(--gold); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Grosse Leiste am Ende der Einheit */
/* Bleibt beim Scrollen unten am Bild kleben — der Knopf ist immer da */
.us-leiste { position: sticky; bottom: 14px; z-index: 30;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding: 16px 20px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  background: color-mix(in srgb, var(--gold) 12%, var(--card));
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px -14px rgba(20, 24, 32, .45); }
.us-leiste.fehlt { border-color: var(--line); background: var(--card-2); }
.ul-text { flex: 1 1 280px; min-width: 0; display: grid; gap: 4px; }
.ul-text b { font-size: 16px; }
.ul-text span { font-size: 13px; color: var(--muted); line-height: 1.5; }
.btn.gross { font-size: 15px; padding: 13px 24px; border-radius: 11px; font-weight: 600; }
.btn.gross:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Mieter-Akte: Kopf mit Initialen, ruhige Karten ---- */
.akte-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ak-rund { flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; letter-spacing: .02em;
  background: color-mix(in srgb, var(--gold) 18%, var(--card-2));
  border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line));
  color: var(--gold); }
.ak-rund.frueher { background: var(--card-2); border-color: var(--line); color: var(--muted); }
.ak-rund.offen { background: color-mix(in srgb, var(--blue) 14%, var(--card-2));
  border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); color: var(--blue); }
/* Titelbild aus dem Ausweis: der Ausschnitt sitzt auf dem Passfoto links */
.ak-rund { overflow: hidden; }
.ak-rund img { width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: none; transition: transform .2s, object-position .2s; display: block; }
.ak-rund img[data-passfoto] { object-position: 30% 40%; transform: scale(2.2); }
.ak-rund.klickbar { cursor: pointer; position: relative; }
.ak-rund .ak-stift {
  position: absolute; right: -2px; bottom: -2px; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: 10px;
  background: var(--gold); color: #fff; border: 2px solid var(--card);
  opacity: 0; transition: opacity .15s;
}
.ak-rund.klickbar:hover .ak-stift { opacity: 1; }

/* ---- Titelbild zuschneiden ---- */
.tb-box { width: min(420px, 100%); }
.tb-buehne { position: relative; width: 320px; max-width: 100%; margin: 6px auto 10px; }
.tb-buehne canvas { width: 320px; height: 320px; max-width: 100%; border-radius: 12px;
  background: var(--card-2); touch-action: none; cursor: grab; display: block; }
.tb-buehne canvas:active { cursor: grabbing; }
.tb-kreis { position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .35) inset;
  /* «closest-side»: der Kreis reicht genau bis zum Rand — sonst zeigt die
     Vorschau einen kleineren Ausschnitt als später gespeichert wird */
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent 0 96%, #000 96.5%);
  mask: radial-gradient(circle closest-side at 50% 50%, transparent 0 96%, #000 96.5%); }
.tb-regler { display: grid; gap: 8px; margin-bottom: 10px; }
.tb-regler label { display: grid; gap: 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }
.tb-knoepfe { margin-bottom: 4px; }
.ak-titel { display: grid; gap: 2px; min-width: 0; }
.ak-titel h2 { margin: 0; font-size: 21px; }
.ak-unten { font-size: 12.5px; color: var(--muted); }
.ak-schnell { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.akte-grid > .wh-box { padding: 16px 18px; border-radius: 14px; }
.ak-dl dt { font-size: 11px; }
.ak-dl dd { font-size: 14px; }
.ak-dl dd a { color: var(--gold); text-decoration: none; }
.ak-dl dd a:hover { text-decoration: underline; }

/* Kündigen ist ein Einschnitt — der Knopf sagt das auch */
.btn.rot { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, var(--card)); }
.btn.rot:hover { border-color: var(--red);
  background: color-mix(in srgb, var(--red) 16%, var(--card)); }
.btn.rot.voll { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.btn.rot.voll:hover { filter: brightness(1.07); background: var(--red); color: #fff; }

/* Fotos und Videos bleiben zugeklappt — ein Klick zeigt sie */
/* Chrome laesst eigene display-Regeln gewinnen — hier zuklappen erzwingen */
.dok-gruppe.zu:not([open]) > *:not(summary) { display: none !important; }
.dok-gruppe.zu > .dg-titel { cursor: pointer; list-style: none; display: flex;
  align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card); margin-bottom: 0; }
.dok-gruppe.zu > .dg-titel::-webkit-details-marker { display: none; }
.dok-gruppe.zu > .dg-titel::before { content: '▶'; font-size: 9px; color: var(--muted);
  transition: transform .15s; }
.dok-gruppe.zu[open] > .dg-titel::before { transform: rotate(90deg); color: var(--gold); }
.dok-gruppe.zu > .dg-titel:hover { border-color: var(--gold); }
.dok-gruppe.zu[open] > .dg-titel { border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
  margin-bottom: 8px; }

/* Frisch hochgeladen — kurz hervorheben, damit man es sieht */
.dok-gruppe.frisch { animation: frischAn 1.6s ease-out; border-radius: 10px; }
@keyframes frischAn {
  0% { background: color-mix(in srgb, var(--gold) 28%, transparent); }
  100% { background: transparent; }
}
.va-kuenftig { font-size: 11px; font-weight: 600; color: var(--blue);
  background: color-mix(in srgb, var(--blue) 13%, var(--card));
  border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  border-radius: 999px; padding: 2px 8px; }


/* ---- Vorlagen zum Drucken ---- */
.vl-liste { display: grid; gap: 8px; margin-bottom: 18px; }
.vl-zeile { display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  transition: border-color .15s, background .15s; }
.vl-zeile:hover { border-color: var(--gold); background: var(--card-2); }
.vl-kachel { flex: none; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: color-mix(in srgb, var(--gold) 13%, var(--card-2));
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); }
.vl-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.vl-text b { font-size: 14px; }
.vl-text em { font-style: normal; font-size: 12px; color: var(--muted); }

/* ---- Menügruppe «Verträge» mit Unterpunkten ---- */
.hm-gruppe { display: grid; }
.hm-kopf .hm-pfeil { margin-left: auto; font-size: 10px; color: var(--muted);
  transition: transform .15s; }
.hm-gruppe.auf .hm-kopf .hm-pfeil { transform: rotate(90deg); color: var(--gold); }
.hm-kopf.bereich { color: var(--gold); }
.hm-unterliste { display: none; }
.hm-gruppe.auf .hm-unterliste { display: grid; }
.hm-link.hm-unter { position: relative; padding-left: 46px; font-size: 13px; font-weight: 500; }
.hm-link.hm-unter::before { content: '·'; position: absolute; margin-left: -14px;
  color: var(--muted); }
.hm-link.hm-unter.aktiv::before { color: var(--gold); }

/* ---- Vorlagen bearbeiten ---- */
.vl-knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vl-eigen { font-style: normal; font-size: 11px; font-weight: 600; color: var(--gold);
  background: var(--gold-soft); border-radius: 999px; padding: 3px 9px; }
.modal-box.vl-box { max-width: 960px; width: 94vw; }
.vl-marken { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 8px; max-height: 92px;
  overflow: auto; }
.vl-marke { border: 1px solid var(--line); background: var(--card-2); color: var(--muted);
  border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 11.5px; cursor: pointer; }
.vl-marke:hover { border-color: var(--gold); color: var(--gold); }
.vl-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 10px 0 6px;
  padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); }
.vl-wz { border: 1px solid transparent; background: none; color: var(--text); border-radius: 7px;
  padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; line-height: 1.1; }
.vl-wz:hover:not(:disabled) { background: var(--card); border-color: var(--line); }
.vl-wz:disabled { opacity: .35; cursor: default; }
.vl-wz.an { background: var(--gold-soft); color: var(--gold); border-color: var(--gold); }
.vl-trenner { flex: 1; }
.vl-blatt { width: 100%; min-height: 46vh; max-height: 56vh; overflow: auto;
  padding: 26px 32px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: #15161a; font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px; line-height: 1.6; }
.vl-blatt:focus { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
.vl-blatt h1 { font-size: 20px; text-align: center; margin: 0 0 14px; }
.vl-blatt h2 { font-size: 15px; margin: 16px 0 6px; }
.vl-blatt h3 { font-size: 13.5px; margin: 12px 0 4px; }
.vl-blatt p { margin: 0 0 8px; }
.vl-blatt .usig-platz { border: 1px dashed rgba(176,141,46,.6); background: var(--gold-soft);
  border-radius: 8px; padding: 14px; text-align: center; color: #7a5c12; font-size: 12px; }
.vl-blatt .usig-platz::before { content: 'Hier kommen die Unterschriften'; }
.vl-blatt .partei-platz, .vl-blatt .anzahl-platz { border: 1px dashed rgba(176,141,46,.6);
  background: var(--gold-soft); border-radius: 8px; padding: 14px; text-align: center;
  color: #7a5c12; font-size: 12px; }
.vl-blatt .partei-platz::before { content: '1.2. Mieter — Name, Firma, weitere Personen und Adressen (immer aktuell)'; }
.vl-blatt .anzahl-platz::before { content: 'Anzahl erwachsene Personen (wird automatisch gezählt)'; }
.vl-blatt .dauer-platz, .vl-blatt .zins-platz, .vl-blatt .depot-platz {
  border: 1px dashed rgba(176,141,46,.6); background: var(--gold-soft); border-radius: 8px;
  padding: 14px; text-align: center; color: #7a5c12; font-size: 12px; }
.vl-blatt .dauer-platz::before { content: 'Mietbeginn, Mietende, Kündigungsfrist und -termin (immer aktuell)'; }
.vl-blatt .zins-platz::before { content: 'Nettomietzins, Nebenkosten und Bruttomietzins (immer aktuell)'; }
.vl-blatt .depot-platz::before { content: 'Depot: Höhe und Art der Sicherheit (immer aktuell)'; }
.vl-chip { background: var(--gold-soft); color: #7a5c12; border: 1px solid rgba(176,141,46,.45);
  border-radius: 5px; padding: 0 5px; font-family: inherit; font-size: .92em; white-space: nowrap; }
#vlText { width: 100%; min-height: 46vh; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.55; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); resize: vertical; }
#vlText:focus { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }

/* Weitere Personen im Vertrag */
.wh-personen { display: grid; gap: 6px; }
.wh-personen .wp-liste { display: grid; gap: 6px; }
.wp-zeile { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
.wp-zeile input { width: 100%; }
.wp-weg { border: 1px solid var(--line); background: var(--card-2); color: var(--muted);
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font: inherit; line-height: 1; }
.wp-weg:hover { border-color: #c0392b; color: #c0392b; }

/* Aktueller Mieter: zugeklappt, bis man ihn aufmacht */
.mieter-klapp > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 10px; padding: 4px 2px 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; font-size: 12px; color: var(--gold); }
.mieter-klapp > summary::-webkit-details-marker { display: none; }
.mieter-klapp .mk-wer { margin-left: auto; text-transform: none; letter-spacing: 0;
  font-weight: 500; font-size: 13px; color: var(--muted); }
.mieter-klapp .mk-pfeil { transition: transform .15s ease; color: var(--muted); }
.mieter-klapp[open] .mk-pfeil { transform: rotate(180deg); }
.mieter-klapp:not([open]) .mk-titel { animation: mkPuls 1.8s ease-in-out infinite; }
.mieter-klapp:not([open]) > summary:hover .mk-titel { animation: none; color: var(--text); }
@keyframes mkPuls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.mieter-klapp:not([open]) > *:not(summary) { display: none !important; }

/* Einheitenseite: Stammdaten breit, der Mieterkasten darunter über die ganze Breite */
@media (min-width: 900px) {
  .wh-dgrid { grid-template-columns: 2fr 1fr; }
  .wh-dgrid > .wh-stamm { grid-column: 1; }
  .wh-dgrid > .wh-unten { grid-column: 1 / -1; order: 3; }
}

/* Datei in eine andere Ablage schieben */
.fa-ablage { border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 8px; padding: 3px 6px; font: inherit; font-size: 11.5px; max-width: 150px; }
.fa-ablage:hover { border-color: var(--gold); color: var(--gold); }

/* ---------------------------------------------------------- Besichtigungen */
.bes-liste { display: grid; gap: 10px; margin-top: 12px; }
.bes-liste.vorbei { opacity: .75; }
.bes-karte { border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); overflow: hidden; }
.bes-karte.offen { border-color: var(--gold); }
.bes-karte.abgesagt .bes-titel h4 { text-decoration: line-through; }
.bes-kopf { display: grid; grid-template-columns: 110px 1fr auto 18px; gap: 14px;
  align-items: center; padding: 12px 14px; cursor: pointer; }
.bes-kopf:hover { background: var(--card); }
.bes-datum { display: grid; }
.bes-datum b { font-size: 15px; }
.bes-datum span { font-size: 12px; color: var(--muted); }
.bes-titel h4 { margin: 0 0 2px; font-size: 14px; }
.bes-titel p { margin: 0; font-size: 12.5px; color: var(--muted); }
.bes-zahlen { text-align: right; display: grid; }
.bes-zahlen b { font-size: 17px; color: var(--gold); }
.bes-zahlen span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bes-zahlen em { font-size: 11.5px; color: var(--muted); font-style: normal; }
.bes-pfeil { color: var(--muted); }
.bes-body { padding: 0 14px 14px; display: grid; gap: 12px; }
.bes-link { display: grid; gap: 6px; }
.bes-linkzeile { display: flex; gap: 6px; align-items: center; }
.bes-linkzeile input { flex: 1; min-width: 0; font-size: 12.5px; }
.bes-gaeste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bes-gaeste li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px;
  align-items: center; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); }
.bes-gaeste li.ab { opacity: .5; }
.bg-name { display: grid; }
.bg-name em { font-size: 11.5px; color: var(--muted); font-style: normal; }
.bg-kontakt { display: grid; font-size: 12.5px; text-align: right; }
.bg-zeit { font-size: 11.5px; color: var(--muted); font-style: normal; white-space: nowrap; }
@media (max-width: 760px) {
  .bes-kopf { grid-template-columns: 1fr auto; gap: 8px; }
  .bes-datum { grid-column: 1 / -1; }
  .bes-gaeste li { grid-template-columns: 1fr auto; }
  .bg-kontakt, .bg-zeit { grid-column: 1 / -1; text-align: left; }
}

/* Abfrage des Löschcodes — eigenes Fenster statt der Browserabfrage */
.lc-hinter { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(12, 16, 24, .55);
  backdrop-filter: blur(2px); }
.lc-box { width: min(380px, 100%); background: var(--card); border: 1px solid var(--gold);
  border-radius: 14px; padding: 20px 22px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.lc-box h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); }
.lc-text, .lc-warnung { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.lc-warnung { color: #c0392b; font-weight: 600; }
.lc-box input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card-2); color: var(--text); font: inherit; letter-spacing: .25em; }
.lc-box input:focus { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
.lc-box .md-knoepfe { margin-top: 14px; }

/* Inseratetext der Wohnung */
.inserat-box > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 10px; padding: 2px 2px 8px; }
.inserat-box > summary::-webkit-details-marker { display: none; }
.inserat-box:not([open]) > *:not(summary) { display: none !important; }
.inserat-box[open] .mk-pfeil { transform: rotate(180deg); }
.ins-form { display: grid; gap: 10px; margin: 8px 0 12px; }
.ins-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
.ins-form input, .ins-form textarea { font: inherit; font-size: 13.5px; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  text-transform: none; letter-spacing: 0; }
.ins-form textarea { resize: vertical; line-height: 1.55; min-height: 180px; }
.ins-form input:focus, .ins-form textarea:focus { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }

/* Gebäude-Stammdaten in Gruppen — jede Gruppe ein eigenes Feld */
.bld-gruppe { border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  padding: 12px 14px 14px; margin: 0 0 10px; }
.bld-gruppe .gruppe-titel { font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.bld-gruppe .grid-form { margin: 0; }
@media (max-width: 760px) { .bld-gruppe { padding: 10px 11px 12px; } }

/* Karte etwas kleiner, damit die Übersicht ruhiger wirkt */
.mapsvg svg { max-width: 860px; margin-left: auto; margin-right: auto; }

/* Inserate bei ImmoScout — anklickbare Zeile in der Übersicht */
.mi-row.inserate { text-decoration: none; color: inherit; align-items: center; }
.mi-row.inserate:hover { border-color: var(--gold); }
.mi-row.inserate em { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.mi-row.inserate b { color: var(--gold); }

/* Doppelcheck beim Wechsel des Liegenschaftskontos */
.lc-box .lc-text p, .lc-box .lc-warnung p { margin: 0 0 10px; }
.lc-box .lc-warnung { color: var(--muted); font-weight: 400; }
.kw-paar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;
  margin: 12px 0; }
.kw-feld { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  background: var(--card-2); font-size: 12.5px; line-height: 1.45; color: var(--text); }
.kw-feld span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 3px; }
.kw-feld.neu { border-color: var(--gold); }
.kw-pfeil { color: var(--gold); font-size: 16px; }

/* Bank-Konten: zugeklappt bis zum Klick */
.kt-karte > summary.kt-kopf { list-style: none; cursor: pointer; }
.kt-karte > summary::-webkit-details-marker { display: none; }
.kt-karte:not([open]) > *:not(summary) { display: none !important; }
.kt-karte > summary.kt-kopf:hover { background: var(--card-2); }
.kt-pfeil { color: var(--muted); margin-left: 8px; transition: transform .15s ease;
  display: inline-block; }
.kt-karte[open] .kt-pfeil { transform: rotate(180deg); }

/* Konten mit der Maus sortieren */
.kt-liste { display: grid; gap: 10px; }
.kt-griff { color: var(--muted); cursor: grab; letter-spacing: -1px; margin-right: 2px; }
.kt-karte.zieht { opacity: .45; border-color: var(--gold); }
.kt-karte[draggable="true"] > summary { user-select: none; }

/* Neuer Vertrag: online oder physisch unterschreiben */
.nv-unterz { display: grid; gap: 6px; }
.nv-wahl { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; background: var(--card); cursor: pointer;
  font-size: 12.5px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.nv-wahl b { color: var(--text); }
.nv-wahl:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.nv-wahl input { margin-top: 2px; accent-color: var(--gold); }

/* Kacheln oben: anklickbar — führen zum passenden Feld */
.dk-chip.dk-klick { cursor: pointer; font: inherit; text-align: left; }
.dk-chip.dk-klick:hover { border-color: var(--gold); }
.dk-chip.dk-klick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.feld-blitz { border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent) !important; }

/* Unterlagen beim Gebäude */
.geb-unterlagen { display: grid; gap: 10px; }
.geb-unterlagen .fa-docs { margin: 0; }

/* Download-Knöpfe in der Kopfzeile eines Gebäudes */
.bld-laden { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; justify-content: flex-end; }
.bld-laden .btn { text-decoration: none; }
@media (max-width: 760px) { .bld-laden { justify-content: flex-start; } }

/* ---- Abnahme-/Uebergabe-Protokoll ---- */
.ab-table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; }
.ab-table th, .ab-table td { border-right: 1px solid var(--line); padding: 5px 7px; }
.ab-table th:last-child, .ab-table td:last-child { border-right: 0; }
.ab-table thead th { border-bottom: 1px solid var(--line); background: var(--card-2);
  font-size: 11.5px; color: var(--muted); font-weight: 600; text-align: left; }
.ab-table tbody td { border-bottom: 1px solid var(--line); vertical-align: middle; }
.ab-table th.r, .ab-table td.r { text-align: right; }
.ab-table input { width: 100%; border: 1px solid transparent; background: transparent;
  padding: 4px 6px; border-radius: 6px; font: inherit; color: inherit; }
.ab-table input:hover { border-color: var(--line); }
.ab-table input:focus { border-color: var(--gold); background: var(--card); outline: none; }
.ab-table td.ab-nr, .ab-table th.ab-nr { width: 34px; color: var(--muted); font-size: 11.5px; }
.ab-table .ab-anteil { max-width: 90px; }
.ab-liste tbody tr { cursor: pointer; }
.ab-liste tbody tr:hover td { background: var(--card-2); }

.ab-kreuz { width: 58px; }
.ab-box { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); cursor: pointer; font-size: 13px; line-height: 1; }
.ab-box:hover { border-color: var(--gold); }
.ab-box.an { background: var(--gold-soft); border-color: var(--gold); font-weight: 700; }
.ab-box.an.uabn { background: color-mix(in srgb, var(--red, #b43c33) 14%, transparent);
  border-color: var(--red, #b43c33); color: var(--red, #b43c33); }

.ab-raum { margin-top: 18px; }
.ab-raumkopf { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; }
.ab-raumkopf h4 { margin: 0; }
.ab-raumknoepfe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ab-raumknoepfe select, .ab-raumknoepfe input { padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--card); color: inherit; font: inherit; }

.ab-kopf { margin-top: 10px; }
.ab-werkzeug { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.ab-bilder { display: inline-flex; align-items: center; gap: 2px; }
.ab-mini img { width: 30px; height: 30px; object-fit: cover; border-radius: 5px;
  border: 1px solid var(--line); }
.ab-bildweg { border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 11px; padding: 0 2px; }
.ab-bildweg:hover { color: var(--red, #b43c33); }
.ab-fuss { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.ab-fertig { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }

.ab-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px; margin-top: 8px; }
.ab-galerie figure { margin: 0; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; }
.ab-galerie img { width: 100%; height: 130px; object-fit: cover; display: block; }
.ab-galerie figcaption { display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 6px 8px; font-size: 11.5px; color: var(--muted); }

.ab-mini-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.ab-mini-liste li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card-2); }
.ab-art { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.ab-art.einzug { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.ab-art.auszug { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.ab-wer { color: var(--muted); font-size: 12.5px; }
.ab-anteil-chip { margin-left: auto; font-weight: 600; }
.ab-mini-liste .btn { text-decoration: none; }

.eig-liste { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 6px; }
.eig-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card-2); }
.eig-anzahl { margin-left: auto; color: var(--muted); font-size: 12px; }

/* ---- Gebäude als Kacheln: drei nebeneinander, eine offene nimmt die Reihe ---- */
.canton-body { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); align-items: start; }
.canton-body .bld.open { grid-column: 1 / -1; }
.canton-body .bld-head { flex-direction: column; align-items: stretch; gap: 10px; position: relative; }
.canton-body .bld-head .chev { position: absolute; top: 14px; right: 14px; }
.canton-body .bld-title h3 { font-size: 15.5px; }
.canton-body .bld-zahlen { width: 100%; flex: 0 0 auto; min-width: 0; }
.canton-body .bld-title { flex: 0 0 auto; }
.canton-body .geld { flex-wrap: wrap; }
.canton-body .bld-laden { display: flex; flex-wrap: wrap; gap: 6px; }
/* Offene Karte wieder breit wie früher */
.canton-body .bld.open .bld-head { flex-direction: row; align-items: center; }
.canton-body .bld.open .bld-zahlen { flex: 0 1 460px; }
.canton-body .bld.open .bld-title { flex: 1 1 300px; }
.canton-body .bld.open .bld-head .chev { position: static; }

.bld-seite { display: grid; gap: 12px; }
.bld-seite > .bld { box-shadow: var(--shadow); }
.bld-seite .bld-head { flex-direction: row; align-items: center; }

.bld-zurueck { width: 100%; justify-self: stretch; text-align: center; font-size: 16px;
  font-weight: 700; padding: 13px 22px; border-radius: 10px; letter-spacing: .01em;
  box-shadow: var(--shadow); animation: zurueck-puls 1.8s ease-in-out infinite; }
.bld-zurueck:hover { filter: brightness(1.08); animation: none; }
@keyframes zurueck-puls {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .bld-zurueck { animation: none; } }

.fa-bilder video { width: 100%; border-radius: 10px 10px 0 0; display: block; background: #000; }