/* ============================================================
   HomeNZ – Ansichten (Themen)
   body.theme-dark = „Dunkel“ (Standard)      body.theme-b = „Hell und kräftig“
   Umschalten: Sonne/Mond in der Kopfleiste (app.js: toggleTheme). Diese Datei wird nach app.css geladen
   und überschreibt nur Farben und Formen – die Funktionen bleiben gleich.
   ============================================================ */

/* ---------- Farben ---------- */
body.theme-dark {
  color-scheme: dark;
  --bg: #181b22; --bg-subtle: #0f1115; --bg-muted: #1f232c;
  --fg: #eceef2; --fg-muted: #b3b9c5; --fg-dim: #8a91a0;
  --border: #262a33; --border-strong: #343945;
  --accent: #f5b942; --accent-soft: #2e2410;
  --ok: #4ade80; --warn: #fbbf24; --danger: #f87171;
  --w-bg: #0f1115; --w-card: #181b22; --w-line: #242832; --w-sub: #1f232c; --w-bar: #14171d; --w-bar-fg: #eceef2;
  --w-soft: #262a33; --w-input: #12151b; --w-on-accent: #1a1300; --w-hot: #2b1d1a; --w-good: #15231b;
  --w-shadow: none;
}
body.theme-b {
  --bg: #ffffff; --bg-subtle: #f3f4fb; --bg-muted: #eceefa;
  --fg: #14153a; --fg-muted: #4b4f72; --fg-dim: #7c80a0;
  --border: #e6e8f5; --border-strong: #d3d6ea;
  --accent: #4f46e5; --accent-soft: #eef0ff;
  --w-bg: #f3f4fb; --w-card: #ffffff; --w-line: #ebecf5; --w-sub: #eef0fa; --w-bar: linear-gradient(140deg, #4f46e5, #7c3aed 75%); --w-bar-fg: #fff;
  --w-soft: #eef0ff; --w-input: #ffffff; --w-on-accent: #ffffff; --w-hot: #fff5f3; --w-good: #f1faf4;
  --w-shadow: 0 6px 18px rgb(79 70 229 / 0.10);
}
body.theme-dark, body.theme-b { background: var(--w-bg); color: var(--fg); }
body.whg-mode { background: var(--w-bg); }

/* ---------- Gemeinsame Bausteine in beiden Ansichten ---------- */
.btn-primary { background: var(--accent); color: var(--w-on-accent); border-color: var(--accent); border-radius: 12px; font-weight: 700; }
.btn-primary:hover { background: var(--accent); filter: brightness(1.06); }
.btn-primary-strong { background: var(--accent); color: var(--w-on-accent); border-radius: 12px; }
.btn-primary-strong:hover { background: var(--accent); filter: brightness(1.06); }
.btn-ghost, .btn-outline { border-radius: 12px; }
.whg a.btn-primary, .home-actions a, .whg-photo-btns label.btn-primary { color: var(--w-on-accent) !important; }
input, select, textarea { background: var(--w-input); color: var(--fg); border-color: var(--border-strong); border-radius: 12px; }
.glass, .glass-strong, .card.glass { background: var(--w-card); border-color: var(--w-line); border-radius: 18px; box-shadow: var(--w-shadow); }
.modal { background: var(--w-card); color: var(--fg); border-color: var(--w-line); }
.toast { background: var(--w-card); color: var(--fg); border-color: var(--w-line); }
.whg-svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }

/* ---------- Wohnung: Kopf, Karten, Listen ---------- */
.view.whg { padding-bottom: 74px; }
.whg-bar { background: var(--w-bar); color: var(--w-bar-fg); border-bottom: 1px solid var(--w-line); }
body.theme-b .whg-bar { border-bottom: 0; }
.whg-iconbtn.sm { background: var(--w-card); color: var(--fg); border-color: var(--border-strong); }
.whg-lock { background: var(--w-hot); color: var(--warn); border-color: var(--w-line); }
body.theme-b .whg-lock { color: #9a3412; }
.whg-card { background: var(--w-card); border-color: var(--w-line); border-radius: 18px; box-shadow: var(--w-shadow); }
.whg-sub { background: var(--w-sub); color: var(--fg-muted); }
.whg-row { background: transparent; border-top-color: var(--w-line); color: var(--fg); }
.whg-row:active, .whg-row.on { background: var(--accent-soft); }
.whg-ico { width: 30px; display: grid; place-items: center; color: var(--accent); }
.whg-count { background: var(--w-soft); color: var(--fg-muted); }
body.theme-dark .whg-count:not(.zero) { background: var(--accent-soft); color: var(--accent); }
body.theme-b .whg-count:not(.zero) { background: var(--accent-soft); color: var(--accent); }
.whg-count.zero { background: var(--w-soft); color: var(--fg-dim); }
.whg-chev, .home-chev { color: var(--fg-dim); }
.whg-link, .whg a.whg-link { color: var(--accent); }
.whg-none { color: var(--fg-dim); }
.whg-group { color: var(--fg-dim); }
.whg-chip { background: var(--w-card); color: var(--fg); border-color: var(--border-strong); }
.whg-chip.on { background: var(--accent); border-color: var(--accent); color: var(--w-on-accent); }
.whg-chip.add { color: var(--accent); }
.whg-seg { background: var(--w-card); border-color: var(--border-strong); border-radius: 12px; }
.whg-seg button { background: transparent; color: var(--fg); border-right-color: var(--w-line); }
.whg-seg button.on { background: var(--accent); color: var(--w-on-accent); }
.whg-tags button { background: var(--w-soft); color: var(--fg); border-color: var(--border-strong); }
.whg-tags button.on { background: var(--accent); border-color: var(--accent); color: var(--w-on-accent); }
.whg-todo { background: var(--w-hot); border-top-color: var(--w-line); }
.whg-todo.done { background: var(--w-good); }
.whg-def { background: var(--w-hot); border-top-color: var(--w-line); }
.whg-def.st-erledigt { background: var(--w-good); }
.whg-item, .whg-doc, .whg-key, .whg-line, .whg-check.row, .whg-person + .whg-person { border-top-color: var(--w-line); }
.whg-key.on { background: var(--accent-soft); }
.whg-key:not(.on) .whg-key-h b { color: var(--fg-dim); }
.whg-step { background: var(--w-input); border-color: var(--border-strong); }
.whg-step button { background: transparent; color: var(--fg); }
.whg-x { background: var(--w-soft); color: var(--fg); }
.whg-thumb img { border-color: var(--w-line); }
.whg-thumb .whg-x { background: #000; color: #fff; }
.whg-sig { background: #fff; border-color: var(--w-line); }
.whg-warn { background: var(--w-hot); color: var(--warn); border-color: var(--w-line); }
body.theme-b .whg-warn { color: #9a3412; }
.whg-check { color: var(--fg) !important; }
.whg-pad label, .whg .modal label, body.whg-mode .modal label { color: var(--fg-muted); }
.whg-person .whg-pad a, .whg-line a { color: var(--accent); }
.whg-drawer-in { background: var(--w-card); color: var(--fg); }
.whg-drawer-h { background: var(--w-bar); color: var(--w-bar-fg); }
.whg-status, .home-st { background: #3b2a08; color: #f5b942; }
.whg-status.s-abgeschlossen, .whg-status.s-unterzeichnet, .home-st.s-abgeschlossen, .home-st.s-unterzeichnet { background: #12351f; color: #4ade80; }
.whg-status.s-versendet, .home-st.s-versendet { background: #14294d; color: #7db3ff; }
.home-st.none { background: var(--w-soft); color: var(--fg-dim); }
body.theme-b .whg-status, body.theme-b .home-st { background: #fef3c7; color: #92400e; }
body.theme-b .whg-status.s-abgeschlossen, body.theme-b .whg-status.s-unterzeichnet, body.theme-b .home-st.s-abgeschlossen, body.theme-b .home-st.s-unterzeichnet { background: #dcfce7; color: #166534; }
body.theme-b .whg-status.s-versendet, body.theme-b .home-st.s-versendet { background: #dbeafe; color: #1e40af; }
body.theme-b .home-st.none { background: #eceefa; color: #6b6f8c; }
body.whg-mode .modal-actions { background: var(--w-card); }

/* ---------- Übersicht der Wohnung ---------- */
.whg-hero { padding: 6px 6px 2px; }
.whg-hero .whg-big { font-size: 1.6rem; }
.whg-steps { display: flex; gap: 6px; margin: 12px 0 6px; }
.whg-steps i { flex: 1; height: 6px; border-radius: 99px; background: var(--w-soft); }
.whg-steps i.d { background: var(--accent); }
.whg-next { background: var(--w-card); border: 1px solid var(--w-line); border-radius: 18px; padding: 14px 16px; box-shadow: var(--w-shadow); display: flex; flex-direction: column; gap: 2px; }
.whg-next b { font-size: 1.1rem; }
.whg-next > a.btn-primary { margin-top: 10px; min-height: 48px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.whg-start .btn-primary { justify-content: center; text-align: center; padding-left: 0; }
body.theme-b .whg-hero { margin: -12px -12px 0; padding: 18px 20px 44px; background: var(--w-bar); color: #fff; border-radius: 0 0 26px 26px; }
body.theme-b .whg-hero .small { opacity: 0.85; }
body.theme-b .whg-hero + .whg-next { margin-top: -40px; }
.whg-hero-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.whg-ring { flex: none; width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(#fff calc(var(--p) * 1%), rgb(255 255 255 / 0.25) 0); display: grid; place-items: center; }
.whg-ring span { width: 48px; height: 48px; border-radius: 50%; background: #6a43e9; display: grid; place-items: center; font-weight: 800; font-size: 0.82rem; color: #fff; }
.whg-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.whg-tile { position: relative; background: var(--w-card); border: 1px solid var(--w-line); border-radius: 18px; padding: 14px; min-height: 104px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--w-shadow); }
.whg-tile b { font-size: 0.95rem; }
.whg-tile-i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.whg-tile .whg-count { position: absolute; top: 12px; right: 12px; }

/* ---------- Leiste unten ---------- */
.whg-tab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; justify-content: space-around; max-width: 640px; margin: 0 auto;
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); background: var(--w-card); border-top: 1px solid var(--w-line); }
body.theme-b .whg-tab { border-radius: 20px 20px 0 0; box-shadow: 0 -4px 16px rgb(0 0 0 / 0.07); border-top: 0; }
.whg-tab a, .whg-tab button { flex: 1; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; font: inherit; font-size: 0.68rem; color: var(--fg-dim); text-decoration: none; cursor: pointer; }
.whg-tab .on { color: var(--accent); font-weight: 700; }

/* ---------- Startseite und Kopfleiste ---------- */
.home-list { background: transparent; border: 0; box-shadow: none; }
.home-group { background: var(--w-card); border-color: var(--accent); }
.home-prop a { background: var(--w-sub); color: var(--fg-muted); border-bottom-color: var(--w-line); }
.home-prop .hp-tx b { color: var(--fg); }
.home-list .home-unit { background: transparent; border-top-color: var(--w-line); }
.home-list .home-unit:active { background: var(--accent-soft); }
.home-more summary { color: var(--fg-muted); }
.theme-toggle { font-size: 1.15rem; }
@media (max-width: 760px) {
  .topbar, .topbar.glass { background: var(--w-bar); color: var(--w-bar-fg); border-bottom: 1px solid var(--w-line); }
  body.theme-b .topbar { border-bottom: 0; }
  .topbar-title { color: var(--w-bar-fg); }
  .nav-toggle { color: var(--w-bar-fg); }
  .topbar.open .topnav, .topbar.open .topnav .nav-btn { background: var(--w-card); color: var(--fg); border-color: var(--w-line); }
  .topbar.open .topnav .nav-btn.active { background: var(--accent-soft); color: var(--accent); }
  .topbar.open .topbar-right { background: var(--w-sub); color: var(--fg); border-color: var(--w-line); }
}
@media (min-width: 761px) { .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid var(--border); border-radius: 10px; color: var(--fg); cursor: pointer; } }

/* ---------- Dunkel: Stellen mit fest eingetragenen hellen Farben ---------- */
body.theme-dark .list-item, body.theme-dark .unit-card, body.theme-dark .prop-card, body.theme-dark .stat, body.theme-dark .tpl-row,
body.theme-dark .photo-tile, body.theme-dark .defect-row, body.theme-dark .rep-row, body.theme-dark .hkz-slot, body.theme-dark .tl-card,
body.theme-dark .room-row, body.theme-dark .meter-row, body.theme-dark .key-row, body.theme-dark .cmp-card { background: var(--w-card); border-color: var(--w-line); color: var(--fg); }
body.theme-dark .tbl th { background: var(--w-sub); color: var(--fg-muted); }
body.theme-dark .tbl td, body.theme-dark .tbl th { border-color: var(--w-line); }
body.theme-dark .chip, body.theme-dark .tag, body.theme-dark .badge { background: var(--w-soft); color: var(--fg); border-color: var(--border-strong); }
body.theme-dark .empty { color: var(--fg-dim); border-color: var(--border-strong); background: transparent; }
body.theme-dark .ocr-chip, body.theme-dark .hkz-warn, body.theme-dark .hkz-loose { background: var(--w-hot); color: var(--fg); border-color: var(--w-line); }
body.theme-dark .ocr-chip.hit { background: var(--w-good); color: var(--ok); }
body.theme-dark .hkz-sym { background: var(--accent-soft); color: var(--accent); }
body.theme-dark .badge-active { background: #12351f; color: #4ade80; }
body.theme-dark .badge-inactive { background: var(--w-soft); color: var(--fg-dim); }
body.theme-dark .hkz-crop-box, body.theme-dark #signature-overlay .modal { background: var(--w-card); color: var(--fg); }
body.theme-dark #sig-canvas { background: #fff; }
body.theme-dark .login-card, body.theme-dark .auth-card { background: var(--w-card); color: var(--fg); border-color: var(--w-line); }
body.theme-dark #app-version { color: var(--fg-dim); }
body.theme-dark a { color: var(--accent); }
body.theme-dark .whg a.whg-row, body.theme-dark .whg-tile, body.theme-dark .home-prop a, body.theme-dark .whg-tab a { color: inherit; }
body.theme-dark .whg-tab a { color: var(--fg-dim); }
body.theme-dark .whg-tab a.on { color: var(--accent); }
body.theme-dark .whg a.btn-primary, body.theme-dark a.btn-primary { color: var(--w-on-accent); }

/* ===== v53: Karten-Gruppen im Stil der Startseite (Mängel, Vorlagen) ===== */
.cg { border: 1.5px solid var(--accent); border-radius: 16px; overflow: hidden; margin: 0 0 14px; background: var(--w-card, #fff); }
.cg.cg-quiet { border-color: var(--w-line, #e5e7eb); border-width: 1px; }
.cg .cg-head, .cg .cg-head.whg-sub { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--w-sub, #eef0f3); color: var(--fg-muted, #374151); font-weight: 400; font-size: 0.95rem; border-bottom: 1px solid var(--w-line, #e5e7eb); margin: 0; }
.cg.cg-quiet .cg-head { border-bottom: 0; padding: 9px 14px; }
.cg.cg-quiet .cg-ic { opacity: 0.55; }
.cg-ic { flex: none; display: flex; color: var(--accent); }
.cg-ic .whg-svg { width: 20px; height: 20px; }
.cg-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cg-tx b { font-size: 1.02rem; color: var(--fg); overflow-wrap: anywhere; }
.cg-tx span { font-size: 0.8rem; color: var(--fg-dim); }
.cg-cnt { flex: none; display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); white-space: nowrap; line-height: 1.4; }
.cg-cnt.ok { border-color: var(--w-line, #e5e7eb); color: var(--fg-dim); font-weight: 600; }
.cg-add { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: inherit; font-size: 1.05rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.cg-add:active { background: var(--accent-soft); }
.cg-empty { padding: 14px; color: var(--fg-dim); font-size: 0.88rem; }
.cg-row, .cg .whg-row { min-height: 64px; padding: 10px 14px; gap: 10px; }
.cg > .whg-def:first-of-type, .cg-head + .whg-def, .cg-head + .tpl-row, .cg-head + .cg-item { border-top: 0; }
.cg .whg-def, .cg .whg-def.st-erledigt { background: transparent; border-top: 1px solid var(--w-line, #f0f0f0); }
.cg .whg-def.st-festgehalten { opacity: 1; }
.cg .whg-def.st-festgehalten .whg-row-l b, .cg .whg-def.st-erledigt .whg-row-l b { color: var(--fg-muted); font-weight: 600; }
.cg .whg-def .whg-thumbs { padding: 0 14px 12px 14px; gap: 6px; }
.cg .whg-def .whg-thumb img { width: 64px; height: 64px; border-radius: 10px; }
.cg-meta { display: block; }
.cg-meta .sev-dot { margin-right: 6px; vertical-align: 1px; }
.cg-desc { color: var(--fg-muted); margin-top: 2px; }
.sev-dot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; }
.sev-dot.sev-gering { background: #22c55e; }
.sev-dot.sev-mittel { background: #f59e0b; }
.sev-dot.sev-hoch { background: #ef4444; }

/* Stand als Pille (wie Status auf der Startseite) */
.cg-pill { flex: none; display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; line-height: 1.5; background: var(--w-soft); color: var(--fg-muted); }
.cg-pill.s-offen { background: #3b2a08; color: #f5b942; }
.cg-pill.s-angefragt { background: #14294d; color: #7db3ff; }
.cg-pill.s-beauftragt { background: #2a1f4d; color: #b9a5ff; }
.cg-pill.s-erledigt { background: #12351f; color: #4ade80; }
.cg-pill.s-festgehalten { background: var(--w-soft); color: var(--fg-dim); }
body.theme-b .cg-pill.s-offen { background: #fef3c7; color: #92400e; }
body.theme-b .cg-pill.s-angefragt { background: #dbeafe; color: #1e40af; }
body.theme-b .cg-pill.s-beauftragt { background: #ede9fe; color: #5b21b6; }
body.theme-b .cg-pill.s-erledigt { background: #dcfce7; color: #166534; }
.st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--fg-dim); vertical-align: middle; }
.st-dot.s-offen { background: #f59e0b; } .st-dot.s-angefragt { background: #3b82f6; } .st-dot.s-beauftragt { background: #8b5cf6; } .st-dot.s-erledigt { background: #22c55e; }

/* Mängel-Seite: Kopf */
.mg-actions { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.mg-actions > .btn-primary { min-height: 48px; width: 100%; display: inline-flex; align-items: center; justify-content: center; }
.mg-sec { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.mg-sec .btn-ghost { min-height: 44px; border: 1px solid var(--border-strong); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--fg); }
.mg-by { margin: 0 0 10px; }
.mg-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 2px 12px; font-size: 0.85rem; color: var(--fg-dim); }
@media (min-width: 700px) { .mg-actions { flex-direction: row; } .mg-actions > .btn-primary { width: auto; padding: 0 22px; } .mg-sec { display: flex; } .mg-sec .btn-ghost { padding: 0 16px; } }
.cg.cg-note { padding: 12px 14px; border-color: var(--w-line); line-height: 1.45; font-size: 0.9rem; }
.cg.cg-note.st-overdue { border-color: #ef4444; } .cg.cg-note.st-soon { border-color: #f59e0b; }
.cg.cg-note .btn-ghost { margin-top: 8px; border: 1px solid var(--border-strong); border-radius: 10px; }

/* Mangel-Dialog: Abschnitte */
.df-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 10px; }
.df-top h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.df-form { display: flex; flex-direction: column; gap: 12px; }
.df-sec { border: 1px solid var(--w-line, #e5e7eb); border-radius: 14px; background: var(--w-sub, #f6f7f9); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.df-sec.df-ok { border-color: #22c55e66; }
.df-sec > label { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 0.85rem; color: var(--fg-muted); font-weight: 600; }
.df-sec > label .muted { font-weight: 400; }
.df-sec input, .df-sec select, .df-sec textarea { background: var(--w-input, #fff); }
.df-sec .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.df-sec .form-grid label { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 0.85rem; color: var(--fg-muted); font-weight: 600; min-width: 0; }
.df-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; color: var(--fg); }
.df-h .whg-svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.df-h .cg-cnt { margin-left: 4px; }
.df-lab { font-size: 0.85rem; font-weight: 600; color: var(--fg-muted); margin-bottom: -4px; }
.df-note { margin: -4px 0 0; }
.df-note:empty { display: none; }
.df-sev button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.df-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.df-grid button, .df-radio button { min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--w-card, #fff); color: var(--fg); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; display: flex; align-items: center; }
.df-grid button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); }
.df-grid.df-st button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.df-grid button:disabled, .df-radio button:disabled { opacity: 0.55; }
.df-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.df-chips button { min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--w-card, #fff); color: var(--fg); font: inherit; font-size: 0.84rem; cursor: pointer; }
.df-chips button.on { background: var(--accent); border-color: var(--accent); color: var(--w-on-accent); font-weight: 700; }
.df-radio { display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; background: var(--w-card, #fff); }
.df-radio button { border: 0; border-radius: 0; border-top: 1px solid var(--w-line); gap: 10px; }
.df-radio button:first-child { border-top: 0; }
.df-radio button::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); box-sizing: border-box; }
.df-radio button.on { font-weight: 700; background: var(--accent-soft); }
.df-radio button.on::before { border: 5px solid var(--accent); }
#df-tradebox { display: flex; flex-direction: column; gap: 10px; }
#df-tradebox[hidden] { display: none; }
#df-tradebox > label { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 0.85rem; color: var(--fg-muted); font-weight: 600; }
.df-sec .ger-offer { background: var(--w-card, #fff); margin: 0; }
.df-offer-h { display: flex; justify-content: space-between; gap: 10px; }
.df-amt { white-space: nowrap; }
.df-addbtn { align-self: flex-start; border: 1px dashed var(--border-strong); border-radius: 10px; }
.df-sec .whg-photo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.df-sec .whg-thumbs { padding: 0; }
.df-actions { background: var(--w-card, #fff); margin-top: 0; border-top: 1px solid var(--w-line); z-index: 2; }
.whg-body > .cg, .whg-body .mg-actions, .whg-body .mg-by, .whg-body .mg-sum { margin-bottom: 0; }
#def-new-ph:empty { display: none; }

/* v53: Einstellungen → Vorlagen und Kontakte */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tpl-page { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.tpl-page .cg, .tpl-side .cg { margin: 0; }
.tpl-side { display: flex; flex-direction: column; gap: 16px; }
#tpl-manage { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1000px) { .tpl-page { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.cg .cg-item, .cg .tpl-row.cg-item { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 14px; border: 0; border-top: 1px solid var(--w-line, #f0f0f0); background: transparent; color: var(--fg); font-size: 0.92rem; border-radius: 0; }
.cg-subh + .cg-item, .cg-head + .cg-item, .cg-head + .cg-det > .cg-item { border-top: 0; }
.ti-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ti-tx b { font-weight: 650; overflow-wrap: anywhere; }
.ti-tx .muted { line-height: 1.4; }
.ti-obj { color: var(--fg-dim); }
.cg-subh { padding: 10px 14px 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border-top: 1px solid var(--w-line, #f0f0f0); }
.cg-head + .cg-subh { border-top: 0; }
.cg-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: var(--accent-soft); color: var(--accent); vertical-align: 2px; }
.cg-acts { flex: none; display: flex; gap: 6px; }
.cg-ib { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-strong); background: transparent; color: var(--fg-muted); font: inherit; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.cg-ib:hover { border-color: var(--accent); color: var(--accent); }
.cg-ib.del:hover { border-color: #ef4444; }
.cg-det > summary { list-style: none; cursor: pointer; }
.cg-det > summary::-webkit-details-marker { display: none; }
.cg-det .whg-chev { transition: transform .15s; }
.cg-det[open] .whg-chev { transform: rotate(90deg); }
.cg-det + .cg-det > summary { border-top: 1px solid var(--w-line, #f0f0f0); }
.cg-det > form, .cg-det > p { padding: 0 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cg-det > p { display: block; }
.cg-det > form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--fg-muted); font-weight: 600; }
.cg-det > form .btn-primary { align-self: flex-start; }
.cg-help .ti-tx .muted { font-size: 0.85rem; }

/* v54: Einstellungen → Automatik und Erinnerungen */
.opt-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.opt-grid .cg { margin: 0; }
@media (min-width: 1000px) { .opt-grid { grid-template-columns: 1fr 1fr; } .opt-grid .opt-info, .opt-grid .opt-bar { grid-column: 1 / -1; } }
.opt-row { align-items: center; }
.opt-row .ti-tx .muted { line-height: 1.4; }
.opt-src { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.opt-src .cg-pill { font-size: 0.68rem; padding: 1px 8px; }
.opt-row.opt-off .ti-tx, .opt-row.opt-off .opt-num { opacity: 0.45; }
.opt-row.opt-dirty { box-shadow: inset 3px 0 0 var(--accent); }
.opt-num { flex: none; display: flex; align-items: center; gap: 6px; margin: 0; }
.opt-num input { width: 84px; min-height: 42px; text-align: right; font: inherit; font-weight: 700; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--w-input, #fff); color: var(--fg); }
.opt-num input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.opt-num span { font-size: 0.82rem; color: var(--fg-dim); min-width: 44px; }
.opt-sw { flex: none; position: relative; display: inline-block; width: 52px; height: 30px; margin: 0; cursor: pointer; }
.opt-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.opt-sw span { position: absolute; inset: 0; border-radius: 999px; background: var(--w-soft, #e5e7eb); border: 1px solid var(--border-strong); transition: background .15s; }
.opt-sw span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--fg-dim); transition: transform .15s, background .15s; }
.opt-sw input:checked + span { background: var(--accent); border-color: var(--accent); }
.opt-sw input:checked + span::after { transform: translateX(22px); background: var(--w-on-accent, #fff); }
.opt-sw input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt-info .cg-empty code { font-size: 0.85em; }
.opt-bar { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--w-line); border-radius: 14px; background: var(--w-card, #fff); box-shadow: var(--w-shadow); }
.opt-bar .btn-primary { min-height: 44px; padding: 0 22px; }
.opt-bar .btn-primary:disabled { opacity: 0.45; }

/* ===== v55: Wartung und Fristen im Kartenstil, Wartungserinnerungen, Bestätigungsseite ===== */
/* Fristen-Liste (Wohnung, Objekt, Übersicht, Startseite) */
.ger-dl { display: flex; flex-direction: column; }
.ger-dl .ger-dg { margin: 0; }
.ger-dl .cg-subh { border-top: 1px solid var(--w-line, #f0f0f0); }
.cg-head + .ger-dl .ger-dg:first-child .cg-subh, .cg > .ger-dl:first-child .ger-dg:first-child .cg-subh { border-top: 0; }
.ger-dl .ger-due { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; border-top: 1px solid var(--w-line, #f0f0f0); background: transparent; color: var(--fg); text-align: left; font: inherit; cursor: pointer; }
.ger-dl .cg-subh + .ger-due { border-top: 0; }
.ger-dl .ger-due:hover, .ger-dl .ger-due:active { background: var(--accent-soft); }
.ger-dl .ger-day { width: 54px; border-radius: 10px; padding: 5px 0; background: var(--w-soft, #f3f4f6); color: var(--fg); }
.ger-dl .ger-due.st-overdue .ger-day { background: #3b1414; color: #fca5a5; }
body.theme-b .ger-dl .ger-due.st-overdue .ger-day { background: #fee2e2; color: #991b1b; }
.ger-dl .ger-due.st-soon .ger-day { background: #3b2a08; color: #f5b942; }
body.theme-b .ger-dl .ger-due.st-soon .ger-day { background: #fef3c7; color: #92400e; }
.ger-dl .ger-due-t { gap: 1px; }
.ger-dl .ger-due-t > b { font-weight: 650; }
.ger-dl .ger-kind { order: -1; text-transform: uppercase; letter-spacing: .04em; font-size: 0.66rem; font-weight: 700; color: var(--fg-dim); }
.ger-dl .whg-chev { flex: none; }
.ger-none { padding: 12px 14px; margin: 0; }
.ger-rem { display: block; font-size: 0.78rem; margin-top: 2px; line-height: 1.35; }
.ger-rem.sent { color: #7db3ff; }
body.theme-b .ger-rem.sent { color: #1d4ed8; }
.ger-rem.warn { color: #f5b942; }
body.theme-b .ger-rem.warn { color: #92400e; }

/* Fristen-Seite und Objekt: Karten */
.ger-page { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.ger-page .cg, .ger-side .cg { margin: 0; }
.ger-side { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1000px) { .ger-page { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.cg .ger-filter { padding: 12px 14px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cg .ger-filter label { flex: 1 1 160px; display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--fg-muted); font-weight: 600; margin: 0; }
.cg .ger-sum { padding: 10px 14px; margin: 0; }
.cg .ger-sum:empty { display: none; }
.ger-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-top: 1px solid var(--w-line, #f0f0f0); }
.ger-foot p { margin: 0; flex: 1 1 100%; }
.ger-foot .btn-ghost { border: 1px solid var(--border-strong); border-radius: 10px; }
.cg.ger-card { margin: 0 0 16px; }
.cg .ger-prow { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.cg .ger-prow:hover { background: var(--accent-soft); }
.cg .ger-prow.old { opacity: 0.55; }
.cg .ger-prow .ger-badges { margin-top: 4px; }
.cg .ger-tpl .ti-tx b { font-weight: 600; }
.ger-mailbox .cg-item:first-child { border-top: 0; }

/* Gerät-Dialog: Wartungspläne als Kärtchen in ihrem Abschnitt */
.df-sec .ger-plan { margin: 0; background: var(--w-card, #fff); border: 1px solid var(--w-line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.df-sec .ger-plan .ger-plan-h { justify-content: space-between; }
.df-sec .ger-plan .ger-plan-h .ger-st { margin-left: 0; }
.df-sec .ger-plan-a { margin-top: 4px; }
.ger-who { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; }
.ger-who .whg-svg { width: 16px; height: 16px; color: var(--accent); }
.df-sec .ger-row { padding: 6px 0; border-top: 1px solid var(--w-line); }
.df-sec .ger-row:first-of-type { border-top: 0; }
.df-sec .ger-det { margin: 0; background: var(--w-card, #fff); border-color: var(--w-line); border-radius: 12px; padding: 8px 12px; }
.df-sec .ger-det .ger-grid { margin-top: 8px; gap: 8px 10px; }
.df-sec .ger-det .ger-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--fg-muted); font-weight: 600; margin: 0; }
.ger-hist { gap: 10px; }
.ger-hist .ger-rec { border-bottom: 0; padding: 12px 14px; gap: 4px; }
.ger-hist .ger-rec.bad { border-color: #ef444466; }
.ger-hist .ger-rec .ger-plan-h { justify-content: space-between; }
.ger-hist .ger-rec .ger-plan-h .ger-st { margin-left: 0; }
.df-sec select optgroup { font-weight: 700; }

/* Automatik: E-Mail-Feld, Cron-Adresse */
.opt-mail { flex: 1 1 240px; margin: 0; }
.opt-mail input { width: 100%; min-height: 42px; font: inherit; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--w-input, #fff); color: var(--fg); }
.opt-row.opt-wide { flex-wrap: wrap; }
.cg-item.opt-wide { flex-wrap: wrap; }
.cron-url { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cron-url code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 0.8rem; padding: 8px 10px; border-radius: 10px; background: var(--w-soft, #f3f4f6); border: 1px solid var(--w-line); color: var(--fg); }
.ger-foot .muted.small { flex: 1 1 200px; }

/* Bestätigungsseite (ohne Anmeldung) */
.bst-body { min-height: 100vh; }
.bst { max-width: 580px; margin: 0 auto; padding: 16px 16px 40px; }
.bst-head { display: flex; align-items: center; gap: 12px; padding: 8px 2px 18px; }
.bst-head > span:last-child { display: flex; flex-direction: column; }
.bst-head b { font-size: 1.15rem; color: var(--fg); }
.bst-logo { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--w-on-accent, #fff); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; }
.bst .cg { margin: 0 0 14px; }
.bst .cg-note p { margin: 6px 0 0; }
.bst .cg-note.bst-ok { border-color: #22c55e; }
.bst .cg-note.bst-err { border-color: #ef4444; }
.bst-item { cursor: pointer; }
.bst-item input[type=checkbox] { flex: none; width: 22px; height: 22px; accent-color: var(--accent); }
.bst-item.off { cursor: default; opacity: 0.8; }
.bst-done { flex: none; width: 22px; text-align: center; font-weight: 800; color: #22c55e; }
.bst-fields { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.bst-fields > label { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--fg-muted); }
.bst-fields input:not([type=checkbox]):not([type=file]), .bst-fields textarea { width: 100%; min-height: 44px; font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--w-input, #fff); color: var(--fg); box-sizing: border-box; }
.bst-req { color: #ef4444; }
.bst-confirm { font-weight: 400 !important; color: var(--fg) !important; align-items: flex-start; }
.bst-confirm input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.bst-send { width: 100%; min-height: 50px; font-size: 1.02rem; }
.bst-files { display: flex; flex-direction: column; gap: 6px; }
.bst-file { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; padding: 6px 10px; border-radius: 10px; background: var(--w-soft, #f3f4f6); }
.bst-file .whg-x { margin-left: auto; }
.bst .whg-photo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.bst .whg-photo-btns .btn-ghost { border: 1px solid var(--border-strong); border-radius: 10px; }
#bst-toast { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; max-width: 548px; margin: 0 auto; }
.bst-fields > label.bst-confirm { flex-direction: row; gap: 10px; font-size: 0.92rem; }
.ger-foot a.btn-ghost, .ger-foot .btn-ghost { text-decoration: none; color: var(--fg); display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; }
@media (max-width: 560px) { .ger-dl .ger-due > .ger-st { display: none; } }
.opt-wide > .ti-tx { flex: 1 1 100%; }
.opt-wide > .opt-mail { flex: 1 1 100%; }

/* v56: Einheiten des Objekts als Karte; Löschen im Dialog „Einheit bearbeiten“ */
.unit-list { margin: 0 0 16px; }
.unit-list .cg { margin: 0; }
body .unit-list .cg .unit-card { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 14px; margin: 0; border: 0; border-top: 1px solid var(--w-line, #f0f0f0); border-radius: 0; box-shadow: none; background: transparent; color: var(--fg); cursor: pointer; transform: none; }
body .unit-list .cg .cg-head + .unit-card { border-top: 0; }
body .unit-list .cg .unit-card:hover, body .unit-list .cg .unit-card:active { background: var(--accent-soft); transform: none; }
.unit-list .unit-card .tag-row { margin-top: 4px; }
.df-sec.df-danger { border-color: #ef444455; }
.df-sec.df-danger .df-h .whg-svg { color: #ef4444; }

/* v58: mehrzeilige Notizen – Textfeld wächst mit, Zeilenumbrüche bleiben in Listen sichtbar */
textarea[data-grow] { min-height: 64px; resize: vertical; overflow-y: hidden; line-height: 1.4; }
.pre-line { white-space: pre-line; }

/* v60: Bestand – Mängelbuch, Archiv, Zähler-Verlauf, Miete, Dokumente mit Angaben, Startseite */
.mg-view, .mg-tab { margin: 0 0 12px; }
.mg-hint { margin: -4px 2px 12px; }
.bs-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding: 12px 14px 14px; margin: 0; }
.bs-f { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--fg-muted); min-width: 0; }
.bs-f select, .bs-f input { min-height: 42px; font: inherit; font-size: 0.92rem; font-weight: 400; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--w-input, #fff); color: var(--fg); width: 100%; box-sizing: border-box; }
.bs-q { grid-column: 1 / -1; }
.bs-chart { width: 100%; overflow-x: auto; }
.bs-chart svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.bs-bar path { fill: var(--accent); }
.bs-bar:hover path { opacity: 0.85; }
.bs-hatch-bg { fill: var(--accent-soft); }
.bs-hatch { stroke: var(--accent); stroke-width: 3; }
.bs-val { font-size: 11px; font-weight: 700; fill: var(--fg); }
.bs-lbl { font-size: 11px; fill: var(--fg-muted); }
.bs-sub { font-size: 10px; fill: var(--fg-dim); }
.bs-base { stroke: var(--w-line); stroke-width: 1; }
.bs-legend { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.bs-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(45deg, var(--accent) 0 2px, var(--accent-soft) 2px 5px); }
.bs-yr { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
.bs-amt { flex: none; white-space: nowrap; }
.bs-amt.neg, .bs-table .neg { color: var(--danger, #dc2626); }
.bs-table .pos { color: var(--ok, #16a34a); }
.bs-pay { flex: none; border: 1px solid var(--border-strong); border-radius: 10px; min-height: 36px; white-space: nowrap; }
.bs-year { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 12px; font-size: 1.1rem; }
.cg.bs-warn { border-color: var(--danger, #dc2626); }
.cg.cg-note.bs-ok { border-color: #22c55e66; margin-bottom: 14px; }
.bs-table { display: flex; flex-direction: column; margin-top: 8px; font-size: 0.88rem; }
.bs-table > div { display: grid; grid-template-columns: 60px 1fr 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--w-line); }
.bs-table > div:first-child { border-top: 0; }
.bs-last { margin: 6px 0 2px; }
.bs-pad { padding-top: 4px; }
.bs-card .cg-item { min-height: 56px; text-decoration: none; }
.bs-card .cg-item .cg-ic { color: var(--accent); }
.bs-ho summary { cursor: pointer; }
.bs-home { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 16px; }
.bs-home .cg { margin: 0; }
.bs-home .cg-item, .bs-docs .cg-item { text-decoration: none; color: var(--fg); }
@media (min-width: 900px) { .bs-home { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; } }
.bs-docs .cg-item .ti-tx { gap: 3px; }
#view-docs .cg-head .btn-ghost { border: 1px solid var(--border-strong); border-radius: 10px; }
#af-list .mg-sum { margin: 2px 2px 12px; }
body.whg-mode .modal .cg .cg-head.whg-sub { margin: 0; }