/* ================================================================
   Hausfunk Design-System (13.11.2026)
   Hell und ruhig nach Apple Human Interface Guidelines: viel Weißraum,
   eine Akzentfarbe (Blau), Status nur als Punkt, Text oder dezente Fläche.
   Alle Farben, Abstände, Rundungen und Schatten kommen aus den Variablen.
   ================================================================ */
:root {
  /* Farben */
  --blue: #007aff;
  --blue-hover: #0066dd;
  --blue-text: #0066dd;          /* Blau für Text und Links, besser lesbar als #007aff */
  --blue-soft: rgba(0, 122, 255, .10);
  --blue-soft-2: rgba(0, 122, 255, .16);
  --bg: #f5f5f7;
  --side-bg: rgba(240, 242, 247, .86);
  --side-solid: #f0f2f7;
  --surface: #ffffff;
  --surface-2: #f9f9fb;          /* Tabellenkopf, Eingabehilfen, leichte Flächen */
  --fill: rgba(118, 118, 128, .12); /* graue Füllung für Segmente und Hover */
  --fill-2: rgba(118, 118, 128, .08);
  --ink: #1d1d1f;
  --ink-2: #3a3a3c;
  --muted: #6e6e73;              /* Sekundärtext, ausreichend Kontrast für kleine Schrift */
  --muted-2: #86868b;            /* Tertiärtext, Platzhalter, Symbole */
  --line: #e5e5ea;
  --line-2: #d2d2d7;
  --success: #34c759; --success-text: #248a3d; --success-soft: rgba(52, 199, 89, .13);
  --warning: #ff9f0a; --warning-text: #b25000; --warning-soft: rgba(255, 159, 10, .14);
  --danger: #ff3b30;  --danger-text: #d70015;  --danger-soft: rgba(255, 59, 48, .10);
  --gray-dot: #8e8e93;

  /* Alte Namen, die Vorlagen noch inline verwenden */
  --accent: var(--blue);
  --accent-hover: var(--blue-hover);
  --accent-ink: #ffffff;
  --accent-soft: var(--blue-soft);
  --accent-text: var(--blue-text);
  --new: var(--blue); --new-soft: var(--blue-soft);
  --prog: var(--warning-text); --prog-soft: var(--warning-soft); --prog-dot: var(--warning);
  --done: var(--success-text); --done-soft: var(--success-soft);

  /* Schrift */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "IBM Plex Sans", "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  /* Abstände nach 4er Raster */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* Rundungen */
  --r-xs: 6px;
  --radius-sm: 10px;             /* Eingaben, Knöpfe, Menüpunkte */
  --radius: 18px;                /* Karten */
  --r-inner: 14px;               /* Karten in Karten, Kartenausschnitt */

  /* Schatten */
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 12px rgba(0, 0, 0, .03);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .05);
  --focus: 0 0 0 4px rgba(0, 122, 255, .22);

  /* Steuerelemente */
  --h-control: 38px;
  --h-control-sm: 30px;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --t: .16s;

  --side-w: 280px;
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14.5px/1.5 var(--font); font-feature-settings: "cv11", "ss01"; letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--blue-text); text-decoration: none; transition: color var(--t) var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-family: var(--font-display); color: var(--ink); }
h1 { font-size: 1.85rem; font-weight: 700; letter-spacing: -.022em; }
h2 { font-size: 1.06rem; font-weight: 600; letter-spacing: -.012em; }
h3 { font-size: .95rem; font-weight: 600; letter-spacing: -.008em; }
p { margin: 0 0 .75rem; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic { width: 18px; height: 18px; flex: none; stroke-width: 1.8; }
::selection { background: rgba(0, 122, 255, .2); }

/* ---------- Seitenleiste ---------- */
.side {
  position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 1100; overflow-y: auto;
  display: flex; flex-direction: column; padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--side-bg); color: var(--ink-2); border-right: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .side { background: var(--side-solid); } }
.brand { display: flex; align-items: center; gap: var(--s-3); color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.side .brand { padding: 2px var(--s-2) var(--s-5); }
.side .brand .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.side .brand .brand-name { font-size: 1.12rem; }
.side .brand .brand-org { font-size: .78rem; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.logo { display: block; flex: none; }
.wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -.022em; color: var(--ink); }
.wordmark span { color: inherit; }

.side > * { flex-shrink: 0; }
.side-cta {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin: 0 var(--s-1) var(--s-4);
  height: 40px; padding: 0 var(--s-4); border-radius: var(--radius-sm); background: var(--blue); color: #fff;
  font-weight: 600; font-size: .92rem; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 122, 255, .25);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.side-cta:hover { background: var(--blue-hover); text-decoration: none; }
.side-cta:active { transform: scale(.98); }

.side-label { font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--muted-2); padding: var(--s-4) var(--s-3) 6px; text-transform: uppercase; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  position: relative; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-3); height: 38px; border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: .94rem; font-weight: 500; text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.side-nav a .ic { width: 19px; height: 19px; color: #48484a; transition: color var(--t) var(--ease); }
.side-nav a:hover { background: var(--fill-2); color: var(--ink); text-decoration: none; }
.side-nav a.on { background: var(--blue-soft); color: var(--blue-text); font-weight: 600; }
.side-nav a.on .ic { color: var(--blue); }
.side-nav a.on::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue); }
.side-nav a.sub { height: 32px; padding-left: 43px; font-size: .88rem; color: var(--muted); margin-top: -2px; }
.side-nav a.sub:hover { color: var(--ink); }
.side-nav a.sub.on { color: var(--blue-text); }
.count-due { background: var(--danger); }
.count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--blue); color: #fff;
  font-size: .72rem; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }

.side-foot { margin-top: auto; padding-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.me { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-2); border-radius: var(--radius-sm);
  border-top: 1px solid var(--line); border-radius: 0; padding-top: var(--s-4); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft-2); color: var(--blue-text); display: flex; align-items: center; justify-content: center; font-weight: 650; flex: none; }
.me-text { min-width: 0; flex: 1; }
.me-name { color: var(--ink); font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-mail { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-out-form { display: inline; margin: 0; }
button.me-out { background: none; border: 0; cursor: pointer; font: inherit; }
.me-out { color: var(--muted-2); display: flex; padding: 7px; border-radius: 8px; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.me-out:hover { color: var(--ink); background: var(--fill-2); }

.main-wrap { margin-left: var(--side-w); min-height: 100vh; min-width: 0; }
.content { max-width: 1320px; margin: 0 auto; padding: var(--s-8) var(--s-8) 64px; }
body.plain .content { max-width: 1240px; padding: var(--s-6) var(--s-4) 48px; }
.mobile-top { display: none; }
.backdrop { display: none; }

@media (max-width: 1180px) { .content { padding: var(--s-6) var(--s-6) 56px; } }
@media (max-width: 960px) {
  .side { transform: translateX(-100%); transition: transform .2s var(--ease); background: var(--side-solid); box-shadow: var(--shadow-lg); border-right: 0; width: min(var(--side-w), 86vw); }
  .side.open { transform: none; }
  .backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .28); z-index: 1050; }
  .main-wrap { margin-left: 0; }
  .mobile-top {
    display: flex; align-items: center; gap: var(--s-2); position: sticky; top: 0; z-index: 1000; height: 56px; padding: 0 var(--s-3);
    background: rgba(245, 245, 247, .82); border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  }
  .mobile-top .brand { gap: 10px; flex: 1; min-width: 0; font-weight: 650; }
  .mobile-top .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-top .wordmark { font-size: 1.08rem; }
  .menu-btn { background: none; border: 0; color: var(--ink); width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .menu-btn:hover { background: var(--fill-2); }
  .menu-btn .ic { width: 22px; height: 22px; }
  .content { padding: var(--s-5) var(--s-4) 48px; }
  h1 { font-size: 1.6rem; }
}

/* ---------- Seitenkopf, Karten, Raster ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); margin-top: var(--s-1); font-size: .95rem; }
.page-head .small a { color: var(--muted); }
.page-head .small a:hover { color: var(--blue-text); }
.actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.card > .table-wrap:last-child, .card > .list:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.card-pad { padding: var(--s-5) var(--s-6); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); min-height: 58px; }
.card-head h2 { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.card-head h2 .ic { width: 18px; height: 18px; color: var(--muted-2); }
.card-head a.small { font-weight: 500; }
.grid { display: grid; gap: var(--s-5); }
.g-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.g-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.g-side { grid-template-columns: minmax(0, 1fr) 340px; }
.g-side > *, .g-main > *, .g-2 > * { min-width: 0; }
@media (max-width: 1100px) { .g-2, .g-main, .g-side { grid-template-columns: minmax(0, 1fr); } }
.stack > * + * { margin-top: var(--s-5); }

/* ---------- Kennzahlen ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } }
.stat { display: block; padding: var(--s-5) var(--s-5) var(--s-4); color: inherit; text-decoration: none;
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease); }
a.stat:hover { text-decoration: none; box-shadow: var(--shadow-hover); border-color: var(--line-2); transform: translateY(-1px); }
a.stat:active { transform: none; }
.stat .lbl { color: var(--muted); font-size: .86rem; font-weight: 500; display: flex; align-items: center; gap: var(--s-2); }
.stat .val { font-family: var(--font-display); font-size: clamp(1.3rem, 2.3vw + .6rem, 2.15rem); white-space: nowrap; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; margin-top: var(--s-2); font-variant-numeric: tabular-nums; color: var(--ink); }
.stat .sub { font-size: .78rem; color: var(--muted); margin-top: var(--s-1); }
.stat-danger .val { color: var(--danger-text); }
.stat-warn .val { color: var(--warning-text); }
.stat .chip { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex: none; }
.stat .chip .ic { width: 20px; height: 20px; }
.chip-neu, .chip-accent { background: var(--blue-soft); color: var(--blue); }
.chip-prog { background: var(--warning-soft); color: var(--warning-text); }
.chip-hoch { background: var(--danger-soft); color: var(--danger-text); }
.chip-done { background: var(--success-soft); color: var(--success-text); }
.chip-over { background: var(--danger); color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot-neu { background: var(--blue); }
.dot-in_arbeit { background: var(--warning); }
.dot-erledigt { background: var(--success); }
.dot-hoch { background: var(--danger); }
.dot-ok { background: var(--gray-dot); }
.dot-over { background: #fff; box-shadow: 0 0 0 2px var(--danger); }

/* ---------- Karte (Leaflet) ---------- */
.map { height: 460px; z-index: 0; border-radius: 0 0 var(--radius) var(--radius); background: #e8eaed; }
.map.tall { height: 560px; }
.map-inset { padding: var(--s-3); }
.map-inset .map { border-radius: var(--r-inner); }
.map.small { height: 240px; border-radius: var(--r-inner); }
.map.picker { height: 380px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
@media (max-width: 760px) { .map.tall { height: 420px; } }
.pin { width: 30px; height: 30px; border-radius: 50%; background: var(--gray-dot); border: 2.5px solid #fff; color: #fff; font-weight: 650; font-size: 12px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .22); font-family: var(--font); }
.pin.p-neu { background: var(--blue); }
.pin.p-prog { background: var(--warning); }
.pin.p-ok { background: var(--gray-dot); }
.pin.p-over { box-shadow: 0 0 0 2.5px var(--danger), 0 2px 8px rgba(0, 0, 0, .22); }
.legend { display: flex; gap: var(--s-4); font-size: .8rem; color: var(--muted); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.leaflet-container { font-family: var(--font); }
.leaflet-popup-content { font: 14px/1.45 var(--font); margin: 14px 18px; }
.leaflet-popup-content a { font-weight: 600; color: var(--blue-text); }
.leaflet-popup-content-wrapper { border-radius: var(--r-inner); box-shadow: var(--shadow-lg); }
.leaflet-popup-tip { box-shadow: none; }
.leaflet-bar { border: 0 !important; border-radius: var(--radius-sm) !important; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .10) !important; }
.leaflet-bar a { width: 34px !important; height: 34px !important; line-height: 34px !important; color: var(--ink) !important; border-bottom: 1px solid var(--line) !important;
  background: rgba(255, 255, 255, .94) !important; font: 500 18px/34px var(--font) !important; transition: background var(--t) var(--ease); }
.leaflet-bar a:last-child { border-bottom: 0 !important; }
.leaflet-bar a:hover { background: #fff !important; color: var(--blue) !important; text-decoration: none; }
.leaflet-control-attribution { border-radius: 6px 0 0 0; font-size: 10.5px; }

/* ---------- Tabellen und Listen ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; }
th:first-child, td:first-child { padding-left: var(--s-6); }
th:last-child, td:last-child { padding-right: var(--s-6); }
th { font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--surface-2); padding-top: 10px; padding-bottom: 10px; white-space: nowrap; letter-spacing: 0; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--t) var(--ease); }
tr.click, tr[data-href] { cursor: pointer; }
tr.click:hover td, tr[data-href]:hover td { background: var(--surface-2); }
td .t-title { font-weight: 600; color: var(--ink); text-decoration: none; }
tr.click:hover .t-title, tr[data-href]:hover .t-title { color: var(--blue-text); }
td .t-sub { color: var(--muted); font-size: .84rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Listen in schmalen Bereichen (Handy, Seitenspalte): jede Zeile als Block statt breiter Tabelle.
   t-stack blendet die letzte Spalte (Datum) aus, m-stack behält alle Spalten (z. B. Knöpfe) */
.table-wrap { container-type: inline-size; }
@container (max-width: 780px) {
  table.t-stack, table.t-stack tbody, table.m-stack, table.m-stack tbody { display: block; width: 100%; }
  table.t-stack thead, table.m-stack thead { display: none; }
  table.t-stack tr, table.m-stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px var(--s-5); border-bottom: 1px solid var(--line); }
  table.t-stack tr:last-child, table.m-stack tr:last-child { border-bottom: 0; }
  table.t-stack td, table.m-stack td { display: block; padding: 0 !important; border: 0; font-size: .86rem; min-width: 0; text-align: left; }
  table.t-stack td:first-child, table.m-stack td:first-child { flex: 0 0 100%; font-size: inherit; }
  table.t-stack td:last-child { display: none; }
  table.m-stack td:last-child { flex: 0 0 100%; white-space: normal; }
  table.m-stack td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-weight: 400; }
  table.t-stack .t-sub.ellipsis { max-width: 100% !important; }
  table.t-stack tr.over td:first-child, table.m-stack tr.over td:first-child { box-shadow: none; }
  table.t-stack tr.over, table.m-stack tr.over { box-shadow: inset 3px 0 0 var(--danger); }
}
.empty { padding: var(--s-8) var(--s-5); text-align: center; color: var(--muted); }
.tr-total td { font-weight: 650; background: var(--surface-2); }

.list { list-style: none; margin: 0; padding: 0; }
.list li { position: relative; padding: 14px var(--s-6); display: flex; gap: var(--s-3); align-items: flex-start; transition: background var(--t) var(--ease); }
.list li + li::before { content: ""; position: absolute; top: 0; left: var(--s-6); right: 0; border-top: 1px solid var(--line); }
.list li:hover { background: var(--surface-2); }
.list a.row { display: flex; gap: var(--s-3); align-items: flex-start; text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .title { font-weight: 600; color: var(--ink); }
.list .muted.small { margin-top: 1px; }
.list li.over::after { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--danger); }
tr.over td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* ---------- Status, Priorität, Fristen ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; line-height: 1; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-neu { background: var(--blue-soft); color: var(--blue-text); }
.b-in_arbeit { background: var(--warning-soft); color: var(--warning-text); }
.b-erledigt { background: var(--success-soft); color: var(--success-text); }
.b-hoch { background: var(--danger-soft); color: var(--danger-text); }
.b-plain { background: var(--fill-2); color: var(--muted); }
.b-plain::before { display: none; }
.prio { height: 20px; border-radius: var(--r-xs); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; padding: 0 7px; vertical-align: 1px; }
.prio::before { display: none; }
.pr-notfall { background: var(--danger); color: #fff; }
.pr-hoch { background: var(--danger-soft); color: var(--danger-text); }
.pr-normal { background: var(--fill-2); color: var(--ink-2); }
.pr-niedrig { background: var(--fill-2); color: var(--muted); }
.due { display: inline-block; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.due-over { background: var(--danger); color: #fff; padding: 2px 8px; border-radius: var(--r-xs); }
.due-soon { background: var(--warning-soft); color: var(--warning-text); padding: 2px 8px; border-radius: var(--r-xs); }
.due-normal { color: var(--muted); font-weight: 500; }
.due-ok { color: var(--success-text); }
.due-late { color: var(--danger-text); }
.tag { display: inline-block; padding: 1px 8px; border-radius: var(--r-xs); background: var(--blue-soft); color: var(--blue-text); font-size: .76rem; font-weight: 600; }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; white-space: nowrap; line-height: 1.3; color: var(--muted); }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none; }
.st-entwurf { font-weight: 500; }
.st-offen { color: var(--warning-text); } .st-offen::before { background: var(--warning); }
.st-ueberfaellig { color: var(--danger-text); } .st-ueberfaellig::before { background: var(--danger); }
.st-bezahlt { color: var(--success-text); } .st-bezahlt::before { background: var(--success); }
.stars { color: var(--warning); letter-spacing: 1px; white-space: nowrap; }
.stars .off { color: var(--line-2); }

/* ---------- Formulare ---------- */
label { display: block; font-weight: 500; font-size: .86rem; margin-bottom: 6px; color: var(--ink-2); }
.hint { color: var(--muted); font-size: .8rem; font-weight: 400; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], input[type=url],
input[type=date], input[type=time], input[type=datetime-local], input[type=month], select, textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
  font: inherit; font-size: 16px; letter-spacing: normal; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
@media (min-width: 761px) {
  input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], input[type=url],
  input[type=date], input[type=time], input[type=datetime-local], input[type=month], select, textarea { font-size: 14.5px; }
}
select { -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
select[multiple] { background-image: none; padding-right: 12px; }
::placeholder { color: var(--muted-2); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: #c7c7cc; }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
input[readonly] { background: var(--surface-2); color: var(--muted); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted-2); cursor: not-allowed; }
input[type=checkbox], input[type=radio] { accent-color: var(--blue); }
input[type=file] { font: inherit; font-size: .86rem; color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 500; font-size: .84rem; margin-right: 10px; height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; transition: background var(--t) var(--ease); }
input[type=file]::file-selector-button:hover { background: var(--surface-2); }
.field { margin-bottom: var(--s-4); }
.row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.row-3 { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-3); }
@media (max-width: 560px) { .row-2, .row-3 { grid-template-columns: minmax(0, 1fr); } }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink); }
.check input { margin-top: 3px; width: 17px; height: 17px; flex: none; }
.filters { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line);
  background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.filters select, .filters input { width: auto; min-width: 150px; min-height: 36px; padding: 6px 10px; font-size: 14px; }
.filters select { padding-right: 32px; }
.filters input[type=search] { flex: 1; min-width: 180px; }
.filters input[type=checkbox] { min-width: 0; min-height: 0; width: 17px; padding: 0; }
.filters .check { align-items: center; white-space: nowrap; margin: 0; }
.filters .check input { margin-top: 0; }
@media (max-width: 560px) { .filters select, .filters input { flex: 1 1 140px; min-width: 0; } }

/* Segmente (wie macOS) */
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-sm); background: var(--fill); max-width: 100%; overflow-x: auto; }
.seg a { padding: 5px 12px; border-radius: 8px; color: var(--ink-2); font-size: .86rem; font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.seg a:hover { color: var(--ink); text-decoration: none; }
.seg a.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--h-control); padding: 0 var(--s-4);
  border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  font: inherit; font-weight: 500; font-size: .9rem; letter-spacing: -.005em; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, .04);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease), color var(--t) var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: #c7c7cc; text-decoration: none; color: var(--ink); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 122, 255, .25); }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.btn-danger { color: var(--danger-text); border-color: rgba(255, 59, 48, .35); }
.btn-danger:hover { background: var(--danger-soft); border-color: rgba(255, 59, 48, .5); color: var(--danger-text); }
.btn-rec { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-rec:hover { background: #e0352b; border-color: #e0352b; color: #fff; }
.btn-sm { height: var(--h-control-sm); padding: 0 11px; font-size: .82rem; border-radius: 8px; }
.btn-block { width: 100%; height: 46px; font-size: .98rem; }
.btn .ic { width: 16px; height: 16px; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; transform: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--danger-text); cursor: pointer; font: inherit; font-size: .84rem; font-weight: 500; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Hinweise ---------- */
.flash { padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); margin-bottom: var(--s-5); border: 1px solid; font-weight: 500; font-size: .92rem; }
.flash.ok { background: #effaf2; border-color: rgba(52, 199, 89, .3); color: #1c6b31; }
.flash.error { background: #fff2f1; border-color: rgba(255, 59, 48, .28); color: #b0000f; }
.note, .warn-box, .check-warn { border-radius: var(--radius-sm); background: #fff8ec; border: 1px solid rgba(255, 159, 10, .32); color: #8a3d00; font-size: .9rem; }
.note { padding: var(--s-3) 14px; }
.warn-box { padding: 10px 14px; margin-bottom: var(--s-3); }
.emergency { padding: var(--s-3) 15px; border-radius: var(--radius-sm); background: #fff2f1; border: 1px solid rgba(255, 59, 48, .28); color: #9b0010; font-size: .9rem; margin-bottom: 14px; }
.emergency a { color: inherit; font-weight: 700; }
.dup-warn { margin: 0 0 var(--s-3); padding: 10px var(--s-3); border-radius: var(--radius-sm); background: #fff8ec; border: 1px solid rgba(255, 159, 10, .32); font-size: .92rem; }
.wiz-err { margin-top: 10px; padding: 9px var(--s-3); border-radius: var(--radius-sm); background: var(--danger-soft); color: #9b0010; font-size: .92rem; }

/* ---------- Detailseiten ---------- */
.dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px var(--s-4); margin: 0; }
.dl dt { color: var(--muted); font-size: .86rem; }
.dl dd { margin: 0; overflow-wrap: anywhere; }
.tech-dl dt { font-size: .82rem; }
.desc { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px var(--s-4); line-height: 1.55; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.photos a { display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s var(--ease); }
.photos a:hover img { transform: scale(1.03); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--s-4) 24px; }
.timeline li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); }
.timeline li::after { content: ""; position: absolute; left: 7px; top: 19px; bottom: 2px; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline .meta { color: var(--muted); font-size: .8rem; }
.timeline .pub { color: var(--blue-text); font-size: .75rem; font-weight: 600; }
.qr-thumb { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: 3px; display: block; }
.svc-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.svc-row:last-child { border-bottom: 0; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.kpis > div { padding: 14px var(--s-6); border-right: 1px solid var(--line); min-width: 0; }
.kpis > div:last-child { border-right: 0; }
.kpis .lbl { color: var(--muted); font-size: .76rem; font-weight: 500; }
.kpis .v { font-weight: 650; font-size: 1.1rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
@media (max-width: 1300px) and (min-width: 561px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis > div:nth-child(2) { border-right: 0; } .kpis > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .kpis { grid-template-columns: minmax(0, 1fr); } .kpis > div { border-right: 0; border-bottom: 1px solid var(--line); } .kpis > div:last-child { border-bottom: 0; } }
.inline-pop { display: inline-block; position: relative; }
.inline-pop > summary { list-style: none; }
.inline-pop > summary::-webkit-details-marker { display: none; }
.inline-pop .pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 230px; display: grid; gap: var(--s-2); text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-inner); padding: var(--s-3); box-shadow: var(--shadow-lg); }
.inline-pop .pop label { margin: 0; }
.inline-pop .pop:has(.doc-pick) { width: min(440px, 86vw); }
.app-sign { text-align: center; color: var(--muted); font-size: .78rem; margin-top: 18px; }
.app-sign strong { color: var(--ink-2); font-weight: 650; }

/* ---------- Öffentliche Seiten (Mieter, Handwerker), Anmeldung ---------- */
.pub-body, body.plain { background: var(--bg); min-height: 100vh; }
.pub-wrap { max-width: 560px; margin: 0 auto; padding: var(--s-6) var(--s-4) 48px; }
.pub-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: var(--s-3); color: var(--ink); font-weight: 650; margin-bottom: 18px; }
.pub-head .grow { flex: 1 1 0; min-width: 0; }
.pub-head svg { width: 28px; height: 28px; }
.house-box { padding: var(--s-4) 18px; margin-bottom: 14px; }
.house-box .name { font-weight: 650; font-size: 1.05rem; }
.lang-pick { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 6px; font-weight: 500; }
.lang-pick a { font-size: .78rem; line-height: 1.2; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); background: #fff; text-decoration: none; }
.lang-pick a.on { border-color: var(--blue); color: var(--blue-text); background: var(--blue-soft); font-weight: 600; }
.cats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); }
.cats label { display: flex; align-items: center; gap: var(--s-2); padding: 10px var(--s-3); border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff;
  font-weight: 500; font-size: .88rem; cursor: pointer; margin: 0; color: var(--ink); transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.cats label:hover { border-color: #c7c7cc; }
.cats input { margin: 0; }
.cats label:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-text); }
.file-drop { border: 1.5px dashed var(--line-2); border-radius: var(--radius-sm); padding: var(--s-4); text-align: center; background: var(--surface-2); color: var(--muted); }
.file-drop input { font-size: 14px; max-width: 100%; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* unsichtbar, auch bei Arabisch (rechts nach links) */
.steps { display: flex; gap: 6px; margin: 14px 0; }
.steps div { flex: 1; text-align: center; font-size: .8rem; color: var(--muted); }
.steps div::before { content: ""; display: block; height: 5px; border-radius: 3px; background: var(--line); margin-bottom: 6px; }
.steps div.on { color: var(--ink); font-weight: 600; }
.steps div.on::before { background: var(--blue); }
.big-check { width: 60px; height: 60px; border-radius: 50%; background: var(--success-soft); color: var(--success-text); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--s-3); }
.big-check svg { width: 30px; height: 30px; }
.auth { max-width: 400px; margin: 10vh auto; padding: 0 var(--s-4); }
.auth .card { box-shadow: var(--shadow-lg); border-color: rgba(0, 0, 0, .04); }
.auth-logo { display: flex; justify-content: center; margin-bottom: var(--s-5); }
.fixed-place { padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.fixed-place .hint { margin-top: 2px; }
.open-here { margin-bottom: var(--s-4); }
.open-item { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 10px 0; border-top: 1px solid var(--line); }
.open-item form { margin: 0; flex-shrink: 0; }
.take-box { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; border-color: rgba(0, 122, 255, .25); background: #f5f9ff; }
.dup-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: 10px; }
.dup-actions .btn { min-height: 44px; }

/* Geführte Meldeseite für Mieter: ein Schritt nach dem anderen */
.wizard .wiz-progress { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: 14px; }
.wiz-steps { display: flex; gap: var(--s-2); }
.wiz-steps span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 650; font-size: .9rem;
  border: 1.5px solid var(--line-2); color: var(--muted); background: #fff; transition: all var(--t) var(--ease); }
.wiz-steps span.on { border-color: var(--blue); color: #fff; background: var(--blue); }
.wiz-steps span.done { border-color: var(--blue); color: var(--blue-text); }
.wizard .step h2 { font-size: 1.25rem; margin: 4px 0 var(--s-3); }
.wizard.js .step { display: none; }
.wizard.js .step.on { display: block; }
.wizard:not(.js) .step + .step { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.wizard:not(.js) .wiz-nav, .wizard:not(.js) .wiz-progress { display: none; }
.wizard:not(.js) #sendBtn { display: block; }
.cats-big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.cats-big label span { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.cats-big label { min-height: 64px; padding: 14px; font-size: 1rem; font-weight: 600; line-height: 1.25; border-radius: var(--r-inner); }
/* Kacheln ohne sichtbaren Kreis: Auswahl zeigt Rahmen und Fläche, mehr Platz für lange Wörter auf dem Handy */
.cats-big label { position: relative; justify-content: center; text-align: center; }
.cats-big label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cats-big label:has(input:focus-visible) { box-shadow: var(--focus); }
.cats-big label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--blue); }
@media (max-width: 360px) { .cats-big { grid-template-columns: minmax(0, 1fr); } }
.wiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.wiz-nav .btn { height: 48px; padding-left: 22px; padding-right: 22px; font-size: 1rem; }
.wiz-nav .btn-primary { flex: 1; }
.photo-btn { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; min-height: 56px; padding: var(--s-3);
  border: 1.5px dashed rgba(0, 122, 255, .45); border-radius: var(--radius-sm); background: var(--blue-soft); color: var(--blue-text);
  font-weight: 600; cursor: pointer; text-align: center; }
.photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wizard:not(.js) .photo-input { position: static; width: auto; height: auto; opacity: 1; margin-top: 6px; }
.urgent-box { padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--radius-sm); transition: all var(--t) var(--ease); }
.urgent-box:has(input:checked) { border-color: var(--danger); background: var(--danger-soft); }

/* ---------- Zeiterfassung ---------- */
.timer-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: var(--danger-soft);
  color: var(--danger-text); font-weight: 600; font-size: .8rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.timer-pill:hover { text-decoration: none; background: rgba(255, 59, 48, .16); }
.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: blink 1.4s infinite; flex: none; }
@keyframes blink { 50% { opacity: .25; } }
.stopwatch { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px var(--s-6); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.stopwatch input[type=text] { flex: 1; min-width: 180px; }
.stopwatch .clock { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--danger-text); min-width: 96px; }
.add-box { border-top: 1px solid var(--line); padding: var(--s-5) var(--s-6); }
.add-box h3 { margin-bottom: var(--s-3); }
.time-grid { display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr .8fr; gap: 10px; }
.time-grid > * { min-width: 0; }
@media (max-width: 760px) { .time-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Rechte-Matrix, Benutzer ---------- */
.matrix th, .matrix td { text-align: center; vertical-align: middle; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix input[type=checkbox] { width: 18px; height: 18px; }
.matrix input[type=text] { min-width: 120px; min-height: 34px; font-size: 14px; padding: 6px 8px; font-weight: 600; text-align: center; }
.house-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; max-height: 220px; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; background: var(--surface-2); }
.house-checks label { font-weight: 400; display: flex; gap: var(--s-2); align-items: center; margin: 0; }
.radio-row { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-2); }
.radio-row label { display: flex; gap: 6px; align-items: center; font-weight: 500; margin: 0; }

/* ---------- Mieter-Import ---------- */
tr.imp-err td { background: #fff5f4; }
.imp-msg { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.imp-msg-err { color: var(--danger-text); }
.imp-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--s-4); flex-wrap: wrap; }

/* ---------- Mietverträge, Stellplätze ---------- */
.extras { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.extra-row { display: flex; align-items: center; gap: 10px; padding: var(--s-2) 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; }
.extra-row:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.extra-row .grow { flex: 1; min-width: 0; }
.extra-row input[type=text] { width: 90px; text-align: right; }
tr.lease-child td { border-top: 0; padding-top: 2px; }
tr.lease-child .t-title { font-weight: 500; }
tr.lease-sum td { border-top: 0; padding-top: 0; font-weight: 600; }
.lease { padding: var(--s-4) var(--s-6) 18px; border-top: 1px solid var(--line); }
.lease-ended .t-title, .lease-ended .lease-figs .val { color: var(--muted); }
.lease-head { display: flex; gap: 10px; align-items: flex-start; }
.lease-head .t-title { margin-right: 6px; }
.lease-head .grow { flex: 1; min-width: 0; }
.lease-head .num { text-align: right; }
.lease-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px 18px; margin: var(--s-3) 0 2px; }
.lease-figs .lbl { font-size: .74rem; color: var(--muted); }
.lease-figs .val { font-weight: 600; font-variant-numeric: tabular-nums; }
.lease-figs .total .val { color: var(--blue-text); }
.lease-kids { list-style: none; margin: 10px 0 0; padding: 0 0 0 var(--s-3); border-left: 2px solid var(--blue-soft-2); font-size: .88rem; }
.lease-kids li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 3px 0; }
.lease-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.lease-actions .btn.on { border-color: var(--blue); color: var(--blue-text); background: var(--blue-soft); }
.lease-panel { margin-top: 10px; padding: var(--s-3) 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.lease-panel .doc-pick { flex-wrap: wrap; padding: 6px 0; }
.lease-panel .doc-pick + .doc-pick { border-top: 1px solid var(--line); }
.lease-panel[hidden] { display: none !important; }
.panel-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px var(--s-3); }
.panel-row .field { margin: 0; min-width: 160px; }
.panel-row .panel-note { flex-basis: 100%; margin: 0; }

/* ---------- Kategorien, Vorlagen, Mieterakte ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px var(--s-4); }
.doc-pick { display: flex; align-items: center; gap: 6px; padding: 4px 0; text-align: left; }
.doc-pick .grow { flex: 1; min-width: 140px; font-weight: 500; }
.doc-pick form { margin: 0; }
.doc-upload { border-top: 1px solid var(--line); }
.ph-group { margin-top: 14px; }
.ph-group h3 { margin: 0 0 4px; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ph { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--line); padding: 7px 4px; cursor: pointer; font: inherit; color: inherit; border-radius: 0; transition: background var(--t) var(--ease); }
.ph:hover { background: var(--surface-2); }
.ph code { font-size: .8rem; background: var(--blue-soft); color: var(--blue-text); padding: 1px 7px; border-radius: 5px; white-space: nowrap; }
.ph-desc { font-size: .82rem; color: var(--muted); flex: 1; min-width: 140px; }
.ph.copied code { background: var(--success-soft); color: var(--success-text); }
.ph.copied .ph-desc::after { content: " (kopiert)"; color: var(--success-text); font-weight: 600; }
.steps-list { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }
.steps-list li { margin-bottom: 10px; }
.upload-card { scroll-margin-top: 20px; transition: box-shadow .3s var(--ease); }
.upload-card.flash-focus { box-shadow: 0 0 0 3px var(--blue); }

/* ---------- Kosten, Rundschreiben, Berichte ---------- */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 700px) { .cols-3 { grid-template-columns: minmax(0, 1fr); } }
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px var(--s-4); }
.letter-preview { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px var(--s-4); font-size: .92rem; line-height: 1.55; }
.cost-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* ---------- Nebenkostenabrechnung ---------- */
.nk-late { color: var(--danger-text); font-weight: 600; }
.nk-pos { color: var(--danger-text); }
.nk-neg { color: var(--success-text); }
.nk-warn { margin: 6px 0 0; padding-left: 18px; }
.nk-units { margin-top: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.nk-units th, .nk-units td { padding: 6px 10px; }
.nk-units th:first-child { width: 86px; }
.nk-units td { overflow-wrap: anywhere; }
.nk-units td.num { white-space: normal; }
.nk-units td input[type=text] { width: 100%; max-width: 110px; min-width: 64px; min-height: 32px; padding: 5px 8px; text-align: right; }
@media (max-width: 760px) { .nk-units th, .nk-units td { padding: 6px; } .nk-units th:first-child { width: 70px; } }
.nk-pre { width: 110px; padding: 5px 8px; text-align: right; }
.nk-owner td { background: var(--surface-2); }
.nk-add { background: var(--surface-2); }

/* ---------- Zählerstände ---------- */
.meter-box { border: 1px solid var(--line); border-radius: var(--r-inner); padding: 14px; margin-bottom: var(--s-3); background: var(--surface-2); }
.meter-title { font-weight: 600; font-size: 1.05rem; }
.meter-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); margin-top: 10px; }
.meter-inputs .field { margin: 0; }
.meter-val { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.photo-btn { cursor: pointer; }
.meter-thumb { display: block; width: 100%; max-height: 140px; object-fit: cover; border-radius: var(--radius-sm); margin-top: var(--s-2); border: 1px solid var(--line); }
.meter-new { margin: 6px 0 4px; }
.meter-new summary { cursor: pointer; font-weight: 600; color: var(--blue-text); margin-bottom: 10px; }
.meter-link { display: flex; gap: var(--s-3); align-items: flex-start; }
.meter-link img { border: 1px solid var(--line); border-radius: var(--radius-sm); flex: none; background: #fff; }
.meter-link input { font-size: .8rem; }
.meter-link .grow { flex: 1; min-width: 0; }
.reading-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r-xs); border: 1px solid var(--line); display: block; }
.reading-check { display: flex; gap: var(--s-4); align-items: flex-start; }
.reading-check .grow { flex: 1; min-width: 0; }
.reading-photo { width: 180px; max-height: 180px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; }
.check-number { margin-top: 6px; font-size: .88rem; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.check-warn { margin: var(--s-2) 0 0; padding: var(--s-2) 10px var(--s-2) 26px; font-size: .86rem; }
.check-warn li + li { margin-top: 3px; }
@media (max-width: 760px) {
  .meter-inputs { grid-template-columns: minmax(0, 1fr); }
  .reading-check { flex-direction: column; }
  .reading-photo { width: 100%; max-height: 260px; }
}

/* ---------- Häuser: Einheiten, Eigentümer, Technik ---------- */
details.add { border-top: 1px solid var(--line); padding: 14px var(--s-6) 18px; }
details.add > summary, details.unit-owner > summary, .own-mail summary { cursor: pointer; font-weight: 600; color: var(--blue-text); }
details.add[open] > summary { margin-bottom: 14px; }
.check-row { display: flex; flex-wrap: wrap; gap: var(--s-2) 18px; padding-top: 4px; }
.check-row .check { align-items: center; }
.check-row .check input { margin-top: 0; }
details.unit-owner { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 15px; background: var(--surface-2); }
details.unit-owner > summary { color: var(--ink); }
details.unit-owner[open] > summary { margin-bottom: var(--s-3); }
.tech-row { display: grid; gap: 0 14px; }
.tech-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tech-row-2 { grid-template-columns: minmax(0, 1fr) 130px; }
@media (max-width: 760px) { .tech-row-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .tech-row-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Auftragsseite Handwerker ---------- */
.job-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin: 14px 0; }
.job-steps div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s-2) 10px; font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.job-steps b { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; color: var(--ink); flex: none; }
.job-steps .done { background: var(--success-soft); border-color: rgba(52, 199, 89, .35); color: var(--success-text); font-weight: 600; }
.job-steps .done b { background: var(--success); border-color: var(--success); color: #fff; }
.job-when { font-weight: 700; font-size: 1.1rem; margin: 0 0 var(--s-3); color: var(--blue-text); }
.job-invoice { display: flex; justify-content: space-between; gap: 10px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: .9rem; }

/* ---------- Anleitung ---------- */
.guide { display: grid; gap: var(--s-4); max-width: 860px; }
.guide-step { display: flex; gap: 18px; align-items: flex-start; }
.guide-step h2 { margin-top: 2px; }
.guide-step p { margin: 0 0 var(--s-2); line-height: 1.6; }
.guide-no { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-text); font-weight: 650; font-size: 1rem; display: flex; align-items: center; justify-content: center; }
.guide-tip { color: var(--muted); font-size: .9rem; border-left: 3px solid var(--blue-soft-2); padding-left: 10px; }
.guide-list { margin: 0 0 var(--s-2); padding-left: 20px; line-height: 1.6; }
.guide-faq dt { font-weight: 600; margin-top: var(--s-3); }
.guide-faq dd { margin: 2px 0 0; color: var(--ink-2); line-height: 1.55; }

/* ---------- Einstellungen, Zwei-Faktor ---------- */
.module-list { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.module-list li { padding: 5px 0 5px 18px; position: relative; }
.module-list li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.module-list li.off { color: var(--muted); }
.module-list li.off::before { background: var(--line-2); }
.qr-box { margin: 10px 0 6px; } .qr-box svg { width: 200px; height: 200px; display: block; }
code.secret { font-size: .95rem; letter-spacing: .04em; word-break: break-all; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: 14px 0; }
.recovery-codes code { padding: var(--s-2) 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-align: center; font-size: 1rem; background: var(--surface-2); }
.own-mail { margin-top: 14px; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.own-mail summary { margin-bottom: var(--s-2); }
#mail .dup-warn { margin-top: 10px; }

/* ---------- Rechts nach links (Arabisch) ---------- */
[dir=rtl] .check input { margin-left: 0; }
[dir=rtl] input[inputmode=decimal], [dir=rtl] input[type=tel], [dir=rtl] input[type=email] { direction: ltr; text-align: right; }
[dir=rtl] .timeline li { padding: 0 24px var(--s-4) 0; }
[dir=rtl] .timeline li::before { left: auto; right: 3px; }
[dir=rtl] .timeline li::after { left: auto; right: 7px; }
[dir=rtl] select { background-position: left 12px center; padding-right: 12px; padding-left: 34px; }

/* ---------- Bewegung reduzieren, Druck ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print {
  .side, .mobile-top, .page-head .actions { display: none !important; }
  .main-wrap { margin: 0 !important; }
  .card { box-shadow: none; }
  .guide-step { break-inside: avoid; }
}

/* Mieteinnahmen: erfasste Zahlungen als kleine Liste unter dem Betrag */
.pay-pop { display: block; }
.pay-pop > summary.pay-link { cursor: pointer; color: var(--blue-text); text-decoration: none; margin-top: 2px; }
.pay-pop > summary.pay-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.pay-pop .pop { width: 300px; text-align: left; white-space: normal; }
.pay-item { display: flex; align-items: center; gap: var(--s-3); }
.pay-item + .pay-item { border-top: 1px solid var(--line); padding-top: var(--s-2); }
.pay-item form { margin: 0; }
@container (max-width: 780px) { .pay-pop .pop { left: 0; right: auto; } }

/* Pop-up-Fenster (dialog.sheet): z. B. Rechnung erfassen */
dialog.sheet { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .08); overflow: hidden; }
dialog.sheet[open] { display: flex; flex-direction: column; animation: sheet-in .18s var(--ease); }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.sheet > form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.sheet-head { padding: var(--s-6) var(--s-6) var(--s-3); border-bottom: 1px solid var(--line); }
.sheet-head h2 { font-size: 1.2rem; margin-bottom: 4px; }
.sheet-head p { margin: 0; }
.sheet-body { padding: var(--s-5) var(--s-6) var(--s-2); overflow-y: auto; }
.sheet-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-6); border-top: 1px solid var(--line); background: var(--surface-2); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  dialog.sheet { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--radius) var(--radius) 0 0; }
  @keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .sheet-foot .btn { flex: 1; height: 44px; }
}
dialog.sheet.sheet-sm { width: min(520px, calc(100vw - 32px)); }
@media (max-width: 560px) { dialog.sheet.sheet-sm { width: 100vw; } }