/* ============================================================================
   35A Verwaltung – zentrales Design-System
   Helles, flaches Layout · Sidebar-Navigation · Gold-Akzent
   ========================================================================== */

/* Self-hosted Inter Variable — replaces Google Fonts CDN. No external request. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2-variations"),
       url("../fonts/inter-variable-latin.woff2") format("woff2");
}

/* --- Design-Tokens -------------------------------------------------------- */
:root {
  --brand:        #DAA24D;
  --brand-dark:   #a87729;
  --brand-tint:   #fbf4e6;
  --brand-tint-2: #f1e2c7;

  --bg:        #eaecf1;
  --surface:   #ffffff;
  --surface-2: #f3f4f8;
  --text:      #0d1220;
  --text-mut:  #525a6e;
  --text-dim:  #858ca0;
  --border:    #d9dce4;
  --border-2:  #bcc1cd;

  --ok:    #0f8a4f;
  --ok-bg: #dff3e7;
  --err:    #c0392b;
  --err-bg: #fbe5e0;
  --warn:    #b07211;
  --warn-bg: #fbeed1;

  --ok-text:   #1f6b41;
  --ok-border: #bfe3cd;
  --warn-text: #8a6212;

  --color-indigo: #6366f1;
  --color-blue-mid: #0369a1;
  --color-purple: #7c3aed;

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow:    0 1px 2px rgba(20,28,40,.06), 0 2px 8px rgba(20,28,40,.04);
  --shadow-lg: 0 4px 16px rgba(20,28,40,.10);

  --sidebar-w: 256px;
  --content-max: 1200px;
  --marketing-max: 1100px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --brand-text-on: #1b1306;

  --t-fast: .12s;
  --t-base: .15s;
  --t-slow: .25s;

  /* Legal topic badge colors */
  --topic-co2-bg:   #d4edda; --topic-co2-text:   #155724;
  --topic-heiz-bg:  #fff3cd; --topic-heiz-text:  #856404;
  --topic-bk-bg:    #d1ecf1; --topic-bk-text:    #0c5460;
  --topic-mr-bg:    #e2d9f3; --topic-mr-text:    #432874;
  --topic-geg-bg:   #f8d7da; --topic-geg-text:   #721c24;
  --topic-sonst-bg: #e9ecef; --topic-sonst-text: #495057;

  /* Legal role badge colors */
  --role-verm-border: #4a90d9; --role-verm-text: #1a5fa8;
  --role-miet-border: #2da44e; --role-miet-text: #1a7335;
}

/* --- Reset & Basis -------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
[data-theme="dark"] a { color: var(--brand); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
p { margin: 0; }
img { max-width: 100%; }

/* ============================================================================
   APP-LAYOUT  (Sidebar + Hauptbereich)
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* --- Sidebar -------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Wrapper um Brand-Logo + Hamburger */
.sidebar__head {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1.1rem 1.25rem;
  color: var(--text);
  flex: 1;
}
.sidebar__brand:hover { text-decoration: none; }

/* Hamburger-Button (nur mobile sichtbar) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: .5rem;
  border: none;
  background: transparent;
  color: var(--text-mut);
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--surface-2); color: var(--text); }
.nav-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.sidebar__mark {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  display: grid;
  place-items: center;
  letter-spacing: .02em;
}
.sidebar__brand strong { display: block; font-size: .95rem; }
.sidebar__brand small  { display: block; color: var(--text-mut); font-size: .78rem; }

.sidebar__nav { padding: .75rem .65rem; flex: 1; }

.sidebar__group {
  padding: .9rem .6rem .35rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sidebar__group:first-child { padding-top: .25rem; }

.sidebar__link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .65rem;
  margin: .1rem 0;
  border-radius: 8px;
  color: var(--text-mut);
  font-size: .9rem;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.sidebar__link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sidebar__link.is-active {
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-weight: 600;
  border-left-color: var(--brand);
}
.sidebar__ico { flex: 0 0 18px; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.sidebar__footer {
  padding: .8rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .85rem;
}
.sidebar__footer .who { color: var(--text); font-weight: 600; }
.sidebar__footer a { color: var(--text-mut); }

/* --- Hauptbereich --------------------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.6rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar__crumb { font-size: .82rem; color: var(--text-mut); }
.topbar__tools { display: flex; align-items: center; gap: .6rem; }

.content { padding: 1.6rem; max-width: 1200px; width: 100%; }

.page-title { font-size: 1.5rem; margin-bottom: .25rem; }
.page-intro { color: var(--text-mut); margin-bottom: 1.4rem; max-width: 70ch; }

.section { margin-top: 2rem; }
.section:first-child { margin-top: 0; }
.section__title { font-size: 1.1rem; margin-bottom: .9rem; }
.eyebrow {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: .35rem;
}

/* ============================================================================
   KOMPONENTEN
   ========================================================================== */

/* --- Karten --------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.card--spaced { margin-bottom: 1.2rem; }
.card--fill   { flex: 1; }
.card__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .3rem;
}
.card__title { font-size: 1.05rem; margin-bottom: .9rem; }

/* --- Raster --------------------------------------------------------------- */
.grid       { display: grid; gap: 1rem; }
.grid--2    { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3    { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4    { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: .6rem; }

/* --- Claim-Status-Klassen (damages.php) ----------------------------------- */
.claim-status { display: inline-block; font-size: .72rem; padding: .15rem .5rem; border-radius: 20px; font-weight: 700; white-space: nowrap; }
.claim-status--offen              { background: var(--err-bg);  color: #97271c; }
.claim-status--zugesagt           { background: var(--warn-bg); color: #7a3b00; }
.claim-status--teilweise_erhalten { background: #fff3cd;        color: #856404; }
.claim-status--erhalten           { background: var(--ok-bg);   color: #1f6b41; }
.claim-status--abgeschrieben      { background: var(--surface-2); color: var(--text-mut); border: 1px solid var(--border); }
/* Claim-Card linker Farbstreifen */
.claim-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; margin-bottom: .65rem; }
.claim-card--offen              { border-left: 3px solid var(--err); }
.claim-card--zugesagt           { border-left: 3px solid #ea580c; }
.claim-card--teilweise_erhalten { border-left: 3px solid var(--warn); }
.claim-card--erhalten           { border-left: 3px solid var(--ok); }
.claim-card--abgeschrieben      { border-left: 3px solid var(--text-dim); }
[data-theme="dark"] .claim-status--offen              { background: #260c09; color: #ff8a80; }
[data-theme="dark"] .claim-status--zugesagt           { background: #3e1f00; color: #ffcc80; }
[data-theme="dark"] .claim-status--teilweise_erhalten { background: #332900; color: #fff176; }
[data-theme="dark"] .claim-status--erhalten           { background: #0a3622; color: #7ee89a; }

/* --- Form-Row (inline-flex Felder nebeneinander) -------------------------- */
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.form-row label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: var(--text-mut); font-weight: 600; flex: 1; min-width: 160px; }
.form-row label input,
.form-row label select,
.form-row label textarea { font-size: .9rem; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--sm { padding: .4rem .75rem; font-size: .82rem; }
.btn--block { width: 100%; }

/* --- Formulare ------------------------------------------------------------ */
.field { margin-bottom: .9rem; }
.field:last-child { margin-bottom: 0; }

label .req { color: var(--err); }

/* Einheitliche Formular-Controls — eine Regel, eine Höhe */
input, select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: .9rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
/* Inputs: appearance none für sauberes Custom-Styling */
input:not([type=checkbox]):not([type=radio]):not([type=range]) {
  -webkit-appearance: none;
  appearance: none;
}
/* Einzeilige Controls: feste Höhe */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select {
  height: 44px;
  padding: 0 .85rem;
  line-height: 44px;
}
/* Select: native Pfeil bleibt, nur Padding angepasst */
select {
  padding-right: 2rem;
  cursor: pointer;
}
textarea {
  padding: .65rem .85rem;
  resize: vertical;
  min-height: 90px;
  line-height: 1.55;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--brand);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(218,162,77,.18);
}
input:disabled, select:disabled, textarea:disabled {
  opacity: .5;
  cursor: not-allowed;
}
/* Dark Mode: background-color (kein Shorthand — lässt native select-Rendering intakt) */
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),
[data-theme="dark"] textarea {
  background-color: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}
[data-theme="dark"] select {
  background-color: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
  color-scheme: dark;
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 1rem; }
.form-actions { margin-top: 1.1rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.form-hint { font-size: .8rem; color: var(--text-mut); margin-top: .2rem; }

/* --- Hinweise ------------------------------------------------------------- */
.notice {
  padding: .7rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .88rem;
  margin-bottom: 1rem;
}
.notice--ok    { background: var(--ok-bg);   border-color: #bfe3cd; color: #1f6b41; }
.notice--error { background: var(--err-bg);  border-color: #f0c4be; color: #97271c; }
.notice--warn  { background: var(--warn-bg); border-color: #ecd9a6; color: #8a6212; }
.notice strong { display: block; margin-bottom: .15rem; }

/* --- Kennzahl-Kacheln ----------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap: 1rem;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow);
}
.stat-tile__label {
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.stat-tile__value { font-size: 1.7rem; font-weight: 800; margin-top: .25rem; letter-spacing: -.02em; }
.stat-tile__sub   { font-size: .82rem; color: var(--text-mut); margin-top: .1rem; }

/* --- Aktions-Kacheln ------------------------------------------------------ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  gap: 1rem;
}
.tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  box-shadow: var(--shadow);
  color: var(--text);
}
.tile:hover { box-shadow: var(--shadow-lg); border-color: var(--border-2); text-decoration: none; }
.tile__label {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand-dark);
}
.tile strong { display: block; font-size: 1.05rem; margin: .3rem 0 .25rem; }
.tile small  { color: var(--text-mut); font-size: .83rem; }

/* --- Hero-Panel (Seitenkopf mit Begleittext) ------------------------------ */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}
.hero h1 { font-size: 1.4rem; margin-bottom: .4rem; }
.hero p  { color: var(--text-mut); max-width: 70ch; }

/* --- Tabellen ------------------------------------------------------------- */
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.data-table th {
  text-align: left;
  padding: .7rem .9rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-mut);
  white-space: nowrap;
}
.data-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-2); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Badge ---------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-mut);
}
.badge--ok   { background: var(--ok-bg);   border-color: #bfe3cd; color: #1f6b41; }
.badge--gold { background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--brand-dark); }
.badge--err  { background: var(--err-bg);  border-color: #f0c4be; color: #97271c; }
.badge--warn { background: var(--warn-bg); border-color: #ecd9a6; color: #8a6212; }
[data-theme="dark"] .badge--err  { background: #260c09; color: #ff8a80; }
[data-theme="dark"] .badge--warn { background: #241704; color: #ffd047; }

/* --- Theme-Umschalter (entfaellt – ausgeblendet) -------------------------- */
.theme-toggle { display: none; }

/* --- Hilfstexte ----------------------------------------------------------- */
.muted  { color: var(--text-mut); }
.dim    { color: var(--text-dim); }
.tip    { font-size: .82rem; color: var(--text-mut); }
.mono   { font-family: var(--mono); }
.strike { text-decoration: line-through; }

/* --- Komponenten-Hilfsklassen -------------------------------------------- */
/* Kompakte Karte (weniger Padding) */
.card--compact  { padding: .85rem 1rem; }
/* Karte ohne overflow, z.B. für Report-Reihen */
.card--overflow-hidden { overflow: hidden; padding: 0; }
/* Centered empty-state Karte */
.card--empty    { text-align: center; padding: 2.5rem 1rem; color: var(--text-mut); }
.card--empty__icon { font-size: 2rem; margin-bottom: .5rem; }

/* Inline-Panel (status-kommentar, rechtliche Einordnung) */
.inline-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .65rem .85rem;
  margin-bottom: .7rem;
}
.inline-panel__label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-mut); margin-bottom: .3rem;
}
.inline-panel__body { font-size: .85rem; line-height: 1.6; white-space: pre-line; margin: 0; }

/* Brand-Panel (rechtliche Hinweise, brand-tint Hintergrund) */
.brand-panel {
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-2);
  border-radius: var(--radius);
  padding: .65rem .85rem;
  margin-top: .4rem;
  font-size: .83rem;
  line-height: 1.65;
}

/* Widget-Header innerhalb einer Karte (Titel + Zähler-Badge) */
.widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.widget-head__label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mut); }
.widget-head__count { font-size: .72rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: .1rem .45rem; color: var(--text-mut); }
.widget-row { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-top: 1px solid var(--border); font-size: .83rem; }
.widget-row:first-child { border-top: none; }

/* Filterform-Karte kompakte Labels */
.filter-card { padding: .75rem 1rem; margin-bottom: 1rem; }
.filter-card .field { margin: 0; }
.filter-card label { font-size: .75rem; }

/* Sort-row innerhalb Filterform */
.sort-row { display: flex; gap: .4rem; align-items: center; }
.sort-row select { flex: 1; }
.sort-row .btn { flex-shrink: 0; padding: .4rem .6rem; }

/* Report-Karte (Schäden & Mängel Liste) */
.report-card { margin-bottom: .85rem; }
.report-detail { display: none; border-top: 1px solid var(--border); padding: 1rem 1.1rem; }
.report-detail__desc { margin-bottom: .7rem; line-height: 1.65; white-space: pre-line; }
.report-detail__summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--brand-dark); padding: .3rem 0; user-select: none; list-style: none; }
.report-detail__summary::-webkit-details-marker { display: none; }
.report-meta { margin-top: .15rem; }
.report-nr   { font-family: var(--mono); font-weight: 600; color: var(--brand-dark); }

/* Inline-SVG Icon sizing (Print-Button, Chevrons) */
.icon-sm { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; vertical-align: middle; margin-right: .3rem; }
.icon-chevron { width: 16px; height: 16px; stroke: var(--text-dim); fill: none; stroke-width: 2; transition: transform .2s; }

/* Filter-aktiv Span */
.filter-active-label { color: var(--brand-dark); font-weight: 600; }

/* Reset-Link Stil */
.btn--reset { width: 100%; text-align: center; color: var(--err); }
[data-theme="dark"] .btn--reset { color: #ff8a80; }

/* ============================================================================
   ZÄHLERSTAND-TABELLE  (year.php)
   ========================================================================== */
.year-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
  overflow: hidden;
}
.year-block > summary {
  list-style: none;
  cursor: pointer;
  padding: .9rem 1.2rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.year-block > summary::-webkit-details-marker { display: none; }
.year-block > summary:hover { background: var(--surface-2); }
.year-block[open] > summary { border-bottom: 1px solid var(--border); }
.year-chev {
  flex: 0 0 22px; width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  transition: transform .18s;
}
.year-block[open] .year-chev { transform: rotate(180deg); }
.year-chev svg { width: 11px; height: 11px; }
.year-hint { color: var(--text-mut); font-size: .85rem; font-weight: 400; margin-left: auto; }
.year-block[open] .year-hint { display: none; }

.meter-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.meter-table th {
  text-align: right;
  padding: .6rem .8rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-mut);
}
.meter-table th:first-child, .meter-table td:first-child { text-align: left; }
.meter-table th .unit { display: block; color: var(--brand-dark); font-weight: 600; }
.meter-table td {
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.meter-table tr:last-child td { border-bottom: none; }
.meter-table .row-sum td {
  background: var(--brand-tint);
  font-weight: 700;
}
.meter-table .dash { color: var(--text-dim); }
.meter-table .warn { color: var(--err); font-weight: 600; font-size: .8rem; }
.meter-table .unit { color: var(--text-dim); font-weight: 400; }

.footnotes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(340px,1fr));
  margin-top: 1.5rem;
}
.footnote {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  font-size: .85rem;
  color: var(--text-mut);
}
.footnote h4 { font-size: .9rem; color: var(--text); margin-bottom: .3rem; }
.footnote .law { font-family: var(--mono); font-size: .78rem; color: var(--text-dim); margin-top: .4rem; }

/* ============================================================================
   NEBENKOSTENABRECHNUNG  (nbka.php) – Klassennamen wie vom JS erzeugt
   ========================================================================== */
.accent { color: var(--brand); }

.hero-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
}
.hero-title { font-size: 1.5rem; margin: .35rem 0 .4rem; }
.hero-lede { color: var(--text-mut); max-width: 70ch; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: .8rem;
  margin-top: 1.2rem;
}
.hero-stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem .9rem;
}
.hero-stat__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-dim);
}
.hero-stat__value { font-weight: 600; margin-top: .2rem; }
#saveStatus { color: var(--text-mut); }
#saveStatus.ok  { color: var(--ok); }
#saveStatus.err { color: var(--err); }

/* --- Abrechnungsjahr ------------------------------------------------------ */
.year-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.2rem;
}
.year-picker__row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.year-picker__label { font-weight: 600; margin-bottom: 0; flex: 1; min-width: 200px; }
.year-picker__select { width: auto; min-width: 130px; font-weight: 600; }

/* --- Abschnitts-Panels ---------------------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 1.2rem;
  overflow: hidden;
}
.sec-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: .8rem 1.15rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mut);
}

/* --- Positionstabelle ----------------------------------------------------- */
.ptbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ptbl thead th {
  background: var(--surface-2);
  color: var(--text-mut);
  padding: .65rem .7rem;
  text-align: left;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.ptbl thead th.r { text-align: right; }
.ptbl tbody td { padding: .6rem .7rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ptbl tbody tr:last-child td { border-bottom: none; }
.ptbl tbody tr:hover { background: var(--surface-2); }
.pos-nr { color: var(--text-dim); font-size: .75rem; text-align: center; }
.pos-name { font-weight: 600; }
.pos-name-wrap { display: flex; align-items: center; gap: 3px; }


.ainput, .extra input[type=number] {
  padding: .4rem .55rem;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  text-align: right;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  color: var(--text);
}
.ainput { width: 110px; }
.ainput:focus, .extra input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint-2);
}
.extra { display: flex; flex-direction: column; gap: 5px; }
.extra label {
  font-size: .74rem; color: var(--text-mut); font-weight: 500;
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
}
.extra input[type=number] { width: 95px; }
.extra input[type=checkbox] { width: auto; cursor: pointer; }

.result { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .85rem; }
.result.empty { color: var(--text-dim); font-weight: 400; }
.result.gutschrift { color: var(--ok); }

.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-mut);
  font-size: .65rem;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.info-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --- Vorauszahlungen ------------------------------------------------------ */
.vo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; padding: 1.15rem; }
.vo-lbl  { font-size: .8rem; color: var(--text-mut); margin-bottom: 4px; }
.vo-row  { display: flex; align-items: center; gap: 8px; }
.vo-row input {
  width: 110px; padding: .45rem .6rem;
  border: 1px solid var(--border-2); border-radius: 6px;
  text-align: right;
}
.vo-note { font-size: .78rem; color: var(--text-dim); margin-top: 4px; }

/* --- Abrechnungsergebnis -------------------------------------------------- */
.saldo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; padding: 1.15rem; }
.saldo-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem;
}
.saldo-card h3 {
  font-size: .98rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .85rem;
}
.saldo-tbl { width: 100%; border-collapse: collapse; margin-bottom: .9rem; }
.saldo-tbl td { padding: .35rem 0; font-size: .87rem; }
.saldo-tbl td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.saldo-tbl .sfinal td {
  border-top: 1px solid var(--border-2);
  padding-top: .6rem;
  font-size: 1rem; font-weight: 800;
}
.prt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .6rem 1.1rem;
  background: var(--brand); color: #fff;
  border: none; border-radius: 8px;
  cursor: pointer; font-size: .87rem; font-weight: 700;
}
.prt-btn:hover { background: var(--brand-dark); }

/* --- Hinweis-Box ---------------------------------------------------------- */
.hint {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .9rem 1.1rem; margin-bottom: 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--brand-tint-2);
  background: var(--brand-tint);
  font-size: .88rem;
}
.hint__icon {
  flex: 0 0 22px; width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-weight: 700; font-size: .8rem; font-style: italic;
}

/* --- Hilfe-Modal ---------------------------------------------------------- */
.help-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20,28,40,.5);
  z-index: 1000;
  align-items: flex-start; justify-content: center;
  padding-top: 60px;
}
.help-modal.open { display: flex; }
.help-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  max-width: 580px; width: 92%;
  max-height: 78vh; overflow-y: auto;
  padding: 1.6rem 1.75rem;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.help-box h2 {
  font-size: 1.05rem; margin-bottom: .8rem;
  padding-bottom: .6rem; padding-right: 1.4rem;
  border-bottom: 1px solid var(--border);
}
.help-box h3 {
  font-size: .78rem; font-weight: 700; color: var(--text-mut);
  margin: .9rem 0 .3rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.help-box p  { font-size: .85rem; line-height: 1.55; color: var(--text-mut); margin: .3rem 0; }
.help-box ul { font-size: .84rem; line-height: 1.6; color: var(--text-mut); padding-left: 1.1rem; margin: .3rem 0; }
.help-close {
  position: absolute; top: .7rem; right: .85rem;
  background: var(--surface-2); border: none;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 1.05rem; cursor: pointer; color: var(--text-mut);
}
.help-close:hover { background: var(--border); }
.src {
  display: inline-block;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 7px;
  font-size: .76rem; font-family: var(--mono); color: var(--text-mut);
}
.formula {
  background: var(--surface-2);
  border-left: 3px solid var(--brand);
  padding: .5rem .65rem; margin: .5rem 0;
  font-size: .8rem; font-family: var(--mono);
  border-radius: 0 6px 6px 0; line-height: 1.55;
  color: var(--text);
}
.tip {
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-2);
  border-radius: 6px; padding: .5rem .65rem;
  font-size: .82rem; margin-top: .6rem; color: var(--text);
}

/* ============================================================================
   AUTH-SEITEN  (login, register, ...)
   ========================================================================== */
.auth-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1.5rem;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
}
.auth-card__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.4rem;
}
.auth-card__brand .sidebar__mark { flex: 0 0 40px; width: 40px; height: 40px; }
.auth-card__brand strong { font-size: 1rem; }
.auth-card__brand .theme-btn { margin-left: auto; }
.auth-card h1 { font-size: 1.3rem; margin-bottom: .35rem; }
.auth-card__sub { color: var(--text-mut); font-size: .9rem; margin-bottom: 1.3rem; }
.auth-card .field label { font-size: .8rem; }
.auth-switch { font-size: .86rem; color: var(--text-mut); margin-top: 1.1rem; text-align: center; }
.auth-legal  { font-size: .82rem; margin-top: .8rem; text-align: center; }

/* ============================================================================
   UPLOAD / FOTO-ZUORDNUNG  (reading_add.php, assign.php)
   ========================================================================== */
.upload-drop {
  border: 2px dashed var(--border-2);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.5rem;
  text-align: center;
  background: var(--surface-2);
  transition: border-color .15s, background .15s;
  cursor: default;
}
.upload-drop.drag {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-2));
  border-style: solid;
}
.upload-drop input[type=file] { display: none; }
.upload-drop .upload-hint { font-weight: 600; margin-bottom: .8rem; }
.upload-drop .upload-meta { font-size: .82rem; color: var(--text-mut); margin-top: .8rem; }

.assign-thumb {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: .8rem;
  background: var(--surface-2);
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }

  /* Sidebar wird sticky am oberen Rand, Nav per Toggle */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 200;
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar__head { border-bottom: none; }
  .sidebar__brand { padding: .75rem 1rem; }
  .nav-toggle { display: flex; }

  /* Nav: standardmäßig ausgeblendet, dropdown-Overlay wenn .nav-open */
  .sidebar__nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 201;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: .5rem .65rem .85rem;
  }
  .sidebar.nav-open .sidebar__nav { display: flex; }
  .sidebar__group { display: block; padding: .6rem .6rem .2rem; }
  .sidebar__link { margin: .1rem 0; border-left: none; }
  .sidebar__link.is-active { background: var(--brand-tint); border-left: none; border-radius: 8px; }
  .sidebar__footer { display: none; }

  /* Topbar */
  .topbar { padding: .7rem 1rem; gap: .5rem; }
  .topbar__crumb { display: none; }

  /* Content & Grids */
  .content { padding: .9rem; }
  .form-grid, .grid--2, .grid--3, .grid--4, .grid--auto { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: 1fr 1fr; }

  /* Tabellen horizontal scrollbar */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .ptbl, .saldo-tbl { min-width: 520px; }

  /* nbka: Positions + Saldo grids */
  .vo-grid, .saldo-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-direction: column; gap: .6rem; }
  .hero-panel { padding: 1rem; }

  /* Karten */
  .card { padding: 1rem; }
}

@media (max-width: 560px) {
  .topbar { padding: .6rem .85rem; }
  .theme-btn span#theme-label { display: none; } /* nur Icon, kein Label-Text */
  .page-title { font-size: 1.25rem; }
}

/* ============================================================================
   DARK MODE  (data-theme="dark" auf <html>)
   ========================================================================== */
[data-theme="dark"] {
  --bg:        #000000;
  --surface:   #0d0d0d;
  --surface-2: #181818;
  --text:      #ffffff;
  --text-mut:  #a8a8a8;
  --text-dim:  #6e6e6e;
  --border:    #262626;
  --border-2:  #3d3d3d;

  --brand-dark:   #DAA24D;
  --brand-tint:   rgba(218,162,77,.14);
  --brand-tint-2: rgba(218,162,77,.30);

  --ok-bg:   #0a2613;
  --err-bg:  #260c09;
  --warn-bg: #241704;

  --ok-text:   #7ee89a;
  --ok-border: #1a5e38;
  --warn-text: #ffd047;

  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --shadow-lg: 0 4px 20px rgba(0,0,0,.6);

  /* Legal topic badge colors – dark */
  --topic-co2-bg:   #1a3d20; --topic-co2-text:   #7ee89a;
  --topic-heiz-bg:  #3d3000; --topic-heiz-text:  #ffd047;
  --topic-bk-bg:    #0c2d32; --topic-bk-text:    #6ad4e0;
  --topic-mr-bg:    #2d1a4a; --topic-mr-text:    #c9a7f7;
  --topic-geg-bg:   #3d1a1e; --topic-geg-text:   #f08090;
  --topic-sonst-bg: #1e1e1e; --topic-sonst-text: #a0a0a0;

  /* Legal role badge colors – dark */
  --role-verm-border: #4a90d9; --role-verm-text: #7ab8f5;
  --role-miet-border: #2da44e; --role-miet-text: #5dc47e;
}
[data-theme="dark"] .sidebar { background: #060606; border-right-color: var(--border); }
/* Brand mark PNG: light shown by default, dark shown in dark mode */
.brand-mark__img--dark  { display: none; }
.brand-mark__img--light { display: block; }
[data-theme="dark"] .brand-mark__img--light { display: none; }
[data-theme="dark"] .brand-mark__img--dark  { display: block; }
[data-theme="dark"] .topbar { background: var(--surface); }
[data-theme="dark"] .auth-card { background: var(--surface); }

/* --- Theme-Toggle-Button -------------------------------------------------- */
.theme-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .65rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--text-mut);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.theme-btn:hover { background: var(--border); color: var(--text); border-color: var(--border-2); }
.theme-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ============================================================================
   SCHÄDEN & MÄNGEL
   ========================================================================== */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .65rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.status-pill--new          { background: #e8f0fe; color: #3060c0; }
.status-pill--acknowledged { background: var(--warn-bg); color: var(--warn); }
.status-pill--in_progress  { background: #fef3e2; color: #c07a00; }
.status-pill--resolved     { background: var(--ok-bg); color: var(--ok); }
.status-pill--rejected     { background: var(--err-bg); color: var(--err); }
[data-theme="dark"] .status-pill--new { background: #1a2a50; color: #7aa0f0; }

.urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .55rem;
  border-radius: 12px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.urgency-badge--normal { background: var(--surface-2); color: var(--text-mut); }
.urgency-badge--urgent { background: #fde8e8; color: #b91c1c; }
[data-theme="dark"] .urgency-badge--urgent { background: #3a1010; color: #f87171; }

/* Foto-Grid für Schadensfotos */
.damage-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .6rem;
  margin-top: .75rem;
}
.damage-photo {
  aspect-ratio: 1;
  border-radius: var(--radius);
  object-fit: cover;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.damage-photo:hover { transform: scale(1.04); box-shadow: var(--shadow-lg); }

/* Admin-Panel innerhalb Detailansicht */
.admin-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1rem;
}
.admin-panel__title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
  margin-bottom: .75rem;
}

/* Report-Karte in Listenansicht */
.report-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: .9rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
.report-row:last-child { border-bottom: none; }
.report-row:hover { background: var(--surface-2); }
.report-row__cat {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: var(--surface-2);
}
.report-row__title { font-weight: 600; font-size: .95rem; margin-bottom: .15rem; }
.report-row__meta { font-size: .8rem; color: var(--text-mut); }
.report-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }

/* Upload-Preview für damage_new.php */
.photo-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .6rem;
}
.photo-preview-item {
  position: relative;
  width: 80px; height: 80px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.photo-preview-item img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.photo-preview-item__del {
  position: absolute;
  top: 2px; right: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: .75rem;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* ============================================================================
   ERGÄNZUNGEN – zentralisierte Klassen (vorher in Page-Inline-Styles)
   Mobile-first, alle Breakpoints, alle Komponenten
   ========================================================================== */

/* --- Page Header ---------------------------------------------------------- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.page-head h1 { flex: 1; min-width: 0; }

/* --- Alert / Flash-Meldungen --------------------------------------------- */
.alert {
  padding: .7rem 1rem;
  border-radius: 8px;
  font-size: .88rem;
  border-left: 4px solid var(--border);
  background: var(--surface-2);
  margin-bottom: 1rem;
}
.alert--ok    { border-color: var(--ok);   background: var(--ok-bg);   color: #1f6b41; }
.alert--error { border-color: var(--err);  background: var(--err-bg);  color: #97271c; }
.alert--warn  { border-color: var(--warn); background: var(--warn-bg); color: #8a6212; }
[data-theme="dark"] .alert--ok    { color: #7ee89a; }
[data-theme="dark"] .alert--error { color: #ff8a80; }
[data-theme="dark"] .alert--warn  { color: #ffd047; }

/* --- Warn-Block (Dashboard-Warnungen) ------------------------------------- */
.warn-block {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: 1.4rem;
}
.warn-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .6rem .9rem;
  border-radius: 8px;
  font-size: .86rem;
  border-left: 4px solid transparent;
  margin-bottom: .3rem;
}
.warn-item a { color: inherit; font-weight: 600; text-decoration: underline; margin-left: .3rem; }
.warn-blocker { background: #fdecea; border-color: #c62828; color: #b71c1c; }
.warn-error   { background: #fff3e0; border-color: #ef6c00; color: #e65100; }
.warn-warn    { background: #fffde7; border-color: #f9a825; color: #796002; }
.warn-info    { background: var(--ok-bg); border-color: var(--ok); color: #1f6b41; }
[data-theme="dark"] .warn-blocker { background: #3b0e0e; color: #ff8a80; }
[data-theme="dark"] .warn-error   { background: #3e1f00; color: #ffcc80; }
[data-theme="dark"] .warn-warn    { background: #332900; color: #fff176; }
[data-theme="dark"] .warn-info    { background: #0a3622; color: #a5d6a7; }

/* --- KPI-Kacheln ---------------------------------------------------------- */
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  position: relative;
  overflow: hidden;
}
.kpi--alert { border-color: var(--err); }
.kpi--warn  { border-color: var(--warn); }
.kpi--ok    { border-color: var(--ok); }
.kpi__label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-mut);
  margin-bottom: .2rem;
}
.kpi__value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.kpi__sub   { font-size: .74rem; color: var(--text-mut); margin-top: .15rem; }
.kpi__badge {
  position: absolute;
  top: .6rem; right: .6rem;
  font-size: .65rem;
  padding: .1rem .4rem;
  border-radius: 20px;
  font-weight: 700;
}
.badge-red    { background: var(--err);  color: #fff; }
.badge-orange { background: #ef6c00;     color: #fff; }
.badge-green  { background: var(--ok);   color: #fff; }

/* --- Dashboard-Karten ----------------------------------------------------- */
.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.dash-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.dash-card__head h2 { font-size: .95rem; font-weight: 700; margin: 0; }

/* Zweispaltig, collapsiert auf Mobile */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
@media (min-width: 700px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Operations-Panel (Dashboard Admin) ----------------------------------- */
.ops-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .65rem;
  margin-bottom: 1.2rem;
}
.ops-alerts {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-bottom: 1.2rem;
}
@media (min-width: 640px) {
  .ops-alerts { grid-template-columns: 1fr 1fr; }
}
.ops-alert {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.ops-alert__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
  flex-wrap: wrap;
  gap: .4rem;
}
.ops-alert__head h3 { font-size: .92rem; font-weight: 700; margin: 0; }
.ops-alert ul { margin: 0; padding: 0; list-style: none; }
.ops-alert li { font-size: .84rem; padding: .28rem 0; border-top: 1px solid var(--border); color: var(--text-mut); }
.ops-alert li:first-child { border-top: none; }
.ops-alert--ok   { border-left: 3px solid var(--ok); }
.ops-alert--warn { border-left: 3px solid var(--warn); }
.ops-alert--err  { border-left: 3px solid var(--err); }
.ops-empty { color: var(--text-mut); font-size: .84rem; padding: .3rem 0; }

.ops-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .65rem;
  margin-bottom: 1.2rem;
}

/* --- Mängel-Liste --------------------------------------------------------- */
.dmg-list { list-style: none; margin: 0; padding: 0; }
.dmg-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .4rem .7rem;
  align-items: start;
  padding: .5rem 0;
  border-top: 1px solid var(--border);
  font-size: .84rem;
}
.dmg-item:first-child { border-top: none; }
.dmg-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: .25rem; flex-shrink: 0; }
.dmg-dot-urgent { background: var(--err); }
.dmg-dot-normal { background: var(--warn); }
.dmg-title  { font-weight: 500; line-height: 1.35; }
.dmg-meta   { font-size: .74rem; color: var(--text-mut); }
.dmg-age    { font-size: .74rem; white-space: nowrap; text-align: right; }
.dmg-age--overdue { color: var(--err); font-weight: 700; }
.dmg-age--old     { color: #ef6c00; }
.dmg-tags { grid-column: 2 / -1; display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .1rem; }
.dmg-tag  { font-size: .7rem; padding: .1rem .4rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }

/* --- Zähler-Statusliste --------------------------------------------------- */
.meter-list  { display: flex; flex-direction: column; gap: .5rem; }
.meter-row   {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .6rem;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .84rem;
  flex-wrap: wrap;
}
.meter-row--issue { border-color: var(--err); }
.meter-row--warn  { border-color: var(--warn); }
.meter-name { flex: 1; font-weight: 500; min-width: 100px; }
.meter-val  { font-size: .8rem; color: var(--text-mut); }
.meter-badge { font-size: .68rem; padding: .1rem .45rem; border-radius: 20px; font-weight: 700; white-space: nowrap; }
.mb-ok      { background: var(--ok-bg);   color: #1f6b41; }
.mb-defect  { background: var(--err-bg);  color: #842029; }
.mb-cal     { background: var(--warn-bg); color: #664d03; }
.mb-missing { background: var(--surface-2); color: #495057; border: 1px solid var(--border); }
[data-theme="dark"] .mb-ok      { background: #0a3622; color: #7ee89a; }
[data-theme="dark"] .mb-defect  { background: #3a0a0d; color: #ff8a80; }
[data-theme="dark"] .mb-cal     { background: #3d3000; color: #ffd047; }
[data-theme="dark"] .mb-missing { background: #2a2a2a; color: #aaa; }

/* --- NK: Status-Pillen ---------------------------------------------------- */
.nk-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .45rem 0;
  border-top: 1px solid var(--border);
  font-size: .84rem;
  flex-wrap: wrap;
  gap: .3rem;
}
.nk-row:first-child { border-top: none; }
.nk-status-pill {
  font-size: .72rem;
  padding: .12rem .5rem;
  border-radius: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.nk-entwurf    { background: var(--surface-2); color: var(--text-mut); border: 1px solid var(--border); }
.nk-geprueft   { background: #cff4fc; color: #055160; }
.nk-freigegeben{ background: var(--ok-bg); color: #0a3622; }
.nk-blockiert  { background: var(--err-bg); color: #842029; }
[data-theme="dark"] .nk-entwurf    { background: #2a2a2a; color: #ccc; }
[data-theme="dark"] .nk-blockiert  { background: #3a0a0d; color: #ff8a80; }

/* --- NK: Prüf-Check-Liste ------------------------------------------------- */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.check-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem .8rem;
  border-radius: 8px;
  font-size: .86rem;
}
.check-blocker { background: #fdecea; border-left: 4px solid #c62828; color: #b71c1c; }
.check-warn    { background: #fff3e0; border-left: 4px solid #ef6c00; color: #e65100; }
.check-info    { background: var(--ok-bg); border-left: 4px solid var(--ok); color: #1b5e20; }
[data-theme="dark"] .check-blocker { background: #3b0e0e; color: #ff8a80; }
[data-theme="dark"] .check-warn    { background: #3e1f00; color: #ffcc80; }
[data-theme="dark"] .check-info    { background: #1b3a1f; color: #a5d6a7; }

/* --- Mietverhältnis-Zeile ------------------------------------------------- */
.ten-row { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--border); font-size: .84rem; flex-wrap: wrap; }
.ten-row:first-child { border-top: none; }
.ten-days { font-size: .74rem; font-weight: 700; color: #ef6c00; }

/* --- btn--brand (Alias für btn--primary) ---------------------------------- */
.btn--brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #1b1306;
  font-weight: 700;
}
.btn--brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; text-decoration: none; }

/* --- Timeline ------------------------------------------------------------- */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: .5rem; top: 0; bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline-item { position: relative; margin-bottom: 1.2rem; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.1rem; top: .35rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--bg);
}
.timeline-date    { font-size: .75rem; color: var(--text-mut); }
.timeline-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .7rem .9rem;
  margin-top: .2rem;
}
.timeline-content h4 { font-size: .9rem; margin: 0 0 .25rem; }

/* --- Table Wrapper (horizontal scroll) ------------------------------------ */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.tbl-scroll table { min-width: 500px; }

/* ============================================================================
   MOBILE-FIRST VERBESSERUNGEN
   ========================================================================== */

/* Touch-Targets: alle Buttons mindestens 44px hoch */
.btn { min-height: 36px; }
@media (max-width: 560px) {
  .btn { min-height: 44px; padding: .6rem 1rem; }
  .btn--sm { min-height: 38px; padding: .45rem .75rem; }
}

/* Page-Head: Buttons auf Mobile umbrechen sauber */
@media (max-width: 560px) {
  .page-head { flex-direction: column; align-items: flex-start; }
  .page-head > div,
  .page-head > a,
  .page-head > form { width: 100%; }
}

/* KPI-Row: 2 Spalten auf kleinen Screens */
@media (max-width: 560px) {
  .ops-stats,
  .nk-kpi-row { grid-template-columns: 1fr 1fr; }
  .kpi__value  { font-size: 1.35rem; }
  .stat-tile__value { font-size: 1.4rem; }
}

/* Tabellen: immer scrollbar auf Mobile */
@media (max-width: 760px) {
  .data-table,
  .meter-table,
  .period-table,
  .users-table,
  .rec-table,
  .legal-admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* Content-Padding */
@media (max-width: 480px) {
  .content { padding: .75rem; }
  .dash-card { padding: .85rem; }
  .kpi { padding: .7rem .8rem; }
}

/* Nav auf Mobile: alle Links vollen Touch-Bereich */
@media (max-width: 860px) {
  .sidebar__link { padding: .65rem .65rem; min-height: 44px; }
}

/* Formulare auf Mobile: immer full-width */
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-row  { grid-template-columns: 1fr !important; }
  .vo-grid, .saldo-grid { grid-template-columns: 1fr; }
}

/* NK-Period-Row: Stack auf Mobile */
@media (max-width: 700px) {
  .nk-period-row,
  .nk-table-head { display: none; }  /* Tabellen-Kopfzeile ausblenden */
  .nk-period-row {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .8rem;
    border-bottom: 1px solid var(--border);
  }
}

/* dash-grid ist schon responsive durch @media min-width oben */

/* Tile-Grid: 1 Spalte unter 400px */
@media (max-width: 400px) {
  .tile-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   NK MODULE – Zentralisierte Styles
   ========================================================================== */
.nk-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .65rem;
  margin-bottom: 1.4rem;
}

/* NK Perioden-Tabelle */
.nk-table-head {
  display: grid;
  grid-template-columns: 80px 1fr 120px 120px auto;
  gap: .75rem;
  padding: .35rem .8rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-mut);
  border-bottom: 2px solid var(--border);
}
.nk-period-row {
  display: grid;
  grid-template-columns: 80px 1fr 120px 120px auto;
  gap: .75rem;
  align-items: center;
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--border);
  font-size: .86rem;
  transition: background .1s;
}
.nk-period-row:last-child { border-bottom: none; }
.nk-period-row:hover { background: var(--surface-2); }
.nk-status {
  font-size: .71rem;
  padding: .12rem .5rem;
  border-radius: 20px;
  font-weight: 700;
  white-space: nowrap;
  width: fit-content;
}
.ps-entwurf     { background: var(--surface-2); color: var(--text-mut); border: 1px solid var(--border); }
.ps-in_pruefung { background: #cff4fc; color: #055160; }
.ps-freigegeben { background: var(--ok-bg); color: #0a3622; }
.ps-versendet   { background: #d1ecf1; color: #0c5460; }
.ps-archiviert  { background: var(--surface-2); color: var(--text-dim); }
.rs-berechnet     { background: var(--ok-bg); color: #0a3622; }
.rs-mit_warnungen { background: var(--warn-bg); color: #664d03; }
.rs-blockiert     { background: var(--err-bg); color: #842029; }
.rs-freigegeben   { background: #cff4fc; color: #055160; }
[data-theme="dark"] .ps-entwurf     { background: #2a2a2a; color: #ccc; }
[data-theme="dark"] .ps-freigegeben { background: #0a3622; color: #7ee89a; }
[data-theme="dark"] .ps-in_pruefung { background: #0c2d32; color: #6ad4e0; }

@media (max-width: 760px) {
  .nk-table-head { display: none; }
  .nk-period-row {
    grid-template-columns: 1fr;
    padding: .8rem;
  }
}

/* NK Quick Create */
.quick-create {
  background: var(--surface);
  border: 2px dashed var(--border-2);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
  transition: border-color .15s;
}
.quick-create:hover { border-color: var(--brand); }
.quick-create__icon  { font-size: 2rem; margin-bottom: .6rem; }
.quick-create__title { font-size: 1rem; margin: 0 0 .4rem; }
.quick-create__desc  { font-size: .85rem; color: var(--text-mut); margin: 0 0 1rem; }

/* NK Details collapsible */
.details-block               { margin-bottom: 1.2rem; }
.details-block__summary      { cursor: pointer; font-size: .86rem; color: var(--brand); font-weight: 600; }
.details-block__form         { margin-top: .7rem; }

/* Inline flex utility (forms, button groups) */
.inline-flex-row { display: inline-flex; gap: .5rem; align-items: center; }

/* Select field */
.select-field    { font-size: .9rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.select-field--sm{ font-size: .86rem; padding: .35rem .5rem; }

/* Button row (flex wrap) */
.btn-row { display: flex; gap: .3rem; flex-wrap: wrap; }

/* Muted text utilities */
.text-sub    { font-size: .8rem;  color: var(--text-mut); }
.text-xs-mut { font-size: .78rem; color: var(--text-mut); }

/* KPI value size modifier */
.kpi__value--lg { font-size: 1.1rem; }

/* NK status — clickable variant */
.nk-status--link { cursor: pointer; }

/* dash-card flush (no inner padding) */
.dash-card--flush { padding: 0; overflow: hidden; }

/* Workflow-Steps */
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .65rem;
  margin-bottom: 1.4rem;
}
.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem .75rem;
  text-align: center;
}
.step__num   { font-size: 1.4rem; font-weight: 700; color: var(--brand); }
.step__label { font-size: .78rem; margin-top: .2rem; color: var(--text-mut); line-height: 1.35; }

/* Legal Cards */
.legal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.legal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: border-color .15s;
}
.legal-card:hover { border-color: var(--brand); }
@media (max-width: 560px) {
  .legal-grid { grid-template-columns: 1fr; }
}
.legal-card__head { display: flex; align-items: flex-start; gap: .5rem; }
.legal-card__topic {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: .15rem .55rem; border-radius: 20px; white-space: nowrap;
}
.topic-CO2_AUFTEILUNG { background: var(--topic-co2-bg);   color: var(--topic-co2-text); }
.topic-HEIZKOSTEN     { background: var(--topic-heiz-bg);  color: var(--topic-heiz-text); }
.topic-BETRIEBSKOSTEN { background: var(--topic-bk-bg);    color: var(--topic-bk-text); }
.topic-MIETRECHT      { background: var(--topic-mr-bg);    color: var(--topic-mr-text); }
.topic-GEG,
.topic-ENERGIE        { background: var(--topic-geg-bg);   color: var(--topic-geg-text); }
.topic-SONSTIGE       { background: var(--topic-sonst-bg); color: var(--topic-sonst-text); }
.legal-card__new-badge {
  font-size: .7rem; background: var(--err); color: var(--surface);
  border-radius: 20px; padding: .1rem .5rem; font-weight: 700;
}
.legal-card__title  { font-size: .97rem; font-weight: 700; margin: 0; flex: 1; }
.legal-card__date   { font-size: .78rem; color: var(--text-mut); }
.legal-card__summary { font-size: .86rem; color: var(--text); line-height: 1.5; }
.legal-card__law    { font-size: .75rem; color: var(--text-mut); font-style: italic; }
.legal-card__role   { font-size: .72rem; padding: .1rem .45rem; border-radius: 12px; border: 1px solid var(--border); }
.role-VERMIETER { border-color: var(--role-verm-border); color: var(--role-verm-text); }
.role-MIETER    { border-color: var(--role-miet-border); color: var(--role-miet-text); }
.role-BOTH      { border-color: var(--border); color: var(--text-mut); }
.legal-card__footer {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .2rem; flex-wrap: wrap;
}
.legal-empty { text-align: center; padding: 3rem; color: var(--text-mut); }

/* Legal year bar */
.legal-year-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.legal-year-bar .year-label { font-weight: 700; font-size: 1.1rem; }
.legal-year-btn {
  padding: .35rem .9rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text);
  text-decoration: none; font-size: .88rem; transition: border-color .15s;
}
.legal-year-btn.active,
.legal-year-btn:hover { border-color: var(--brand); background: var(--brand-tint); }

/* Year-change summary card */
.year-change-card {
  border: 1px solid var(--brand); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin-bottom: 1.5rem; background: var(--brand-tint);
}
.year-change-card h2   { font-size: 1rem; margin: 0 0 .7rem; }
.year-change-card ul   { margin: .4rem 0 0; padding: 0 0 0 1.2rem; }
.year-change-card li   { font-size: .88rem; margin-bottom: .3rem; }
.year-change-card__summary { font-size: .88rem; color: var(--text-mut); margin: 0 0 .5rem; }
.year-change-card .co2-pill {
  display: inline-block; background: var(--ok); color: var(--surface);
  border-radius: 20px; padding: .1rem .6rem; font-size: .78rem;
  font-weight: 700; margin-left: .4rem;
}

/* CO₂ info box */
.co2-infobox {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.5rem;
  display: flex; gap: 1rem; align-items: center;
}
.co2-infobox__price { font-size: 2rem; font-weight: 700; color: var(--brand); }
.co2-infobox__label { font-size: .8rem; color: var(--text-mut); }
.co2-infobox__text  { font-size: .86rem; color: var(--text-mut); flex: 1; }

/* Legal details expand */
.legal-details { margin-top: .3rem; }
.legal-details__summary { font-size: .82rem; cursor: pointer; color: var(--text-mut); }
.legal-details__body    { font-size: .84rem; margin: .5rem 0 0; }

/* Inline-Form-Row (viele Pages) */
.form-row-inline {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.form-row-inline input,
.form-row-inline select { flex: 1; min-width: 120px; }

/* ============================================================================
   DARK MODE — KORREKTUREN
   ========================================================================== */

/* Chart-Karten: Datum-Badge + letzter Stand im Dark Mode */
[data-theme="dark"] .card {
  background: var(--surface);
}
[data-theme="dark"] .tip {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-mut);
}

/* KPI-Gruppen */
[data-theme="dark"] .kpi-group { background: var(--surface); }

/* Verbrauchstabelle Anomalie-Zeile */
[data-theme="dark"] .vt-anomaly td { background: #3b0e0e !important; }

/* Section-Toggle */
.section-toggle { border-radius: var(--radius); transition: background .15s; }
.section-toggle:hover { background: var(--surface-2); }

/* NK Status-Pills */
[data-theme="dark"] .nk-entwurf     { background: #2a2a2a; color: #ccc; border-color: #444; }
[data-theme="dark"] .nk-geprueft    { background: #0c2d32; color: #6ad4e0; }
[data-theme="dark"] .nk-freigegeben { background: #0a3622; color: #7ee89a; }

/* NK Belege-Tabelle */
.rec-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.rec-table th { text-align: left; padding: .4rem .6rem; border-bottom: 2px solid var(--border); font-size: .73rem; text-transform: uppercase; color: var(--text-mut); }
.rec-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.rec-sum-row { background: var(--surface); font-weight: 700; }
.split-needed { background: color-mix(in srgb, var(--warn-bg) 25%, transparent); }
.mixed-badge { font-size: .7rem; background: var(--warn-bg); color: var(--warn); padding: .1rem .4rem; border-radius: 12px; font-weight: 700; }
.rec-status-erfasst { color: var(--text-mut); }
.rec-status-geprueft { color: var(--ok, #28a745); }
.rec-status-freigegeben { color: var(--brand); }
.split-expand { background: var(--surface); border-bottom: 1px solid var(--border); }
.split-panel { padding: .65rem .8rem; display: grid; grid-template-columns: auto auto auto auto; gap: .5rem; align-items: center; font-size: .84rem; }
.split-panel label { font-size: .78rem; color: var(--text-mut); margin-bottom: .1rem; display: block; }
.split-panel input[type=number] { padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: .84rem; width: 110px; }
.split-panel__actions { padding-top: 1.2rem; display: flex; gap: .3rem; }
@media (max-width: 640px) { .split-panel { grid-template-columns: 1fr 1fr; } }

/* Utility classes */
.btn-group { display: flex; gap: .5rem; }
.actions-cell { display: flex; gap: .3rem; flex-wrap: wrap; }
.d-inline { display: inline; }
.is-hidden { display: none; }
.text-right { text-align: right; }
.text-sm { font-size: .8rem; }
.text-mut { color: var(--text-mut); }
.cell-nowrap { white-space: nowrap; font-size: .8rem; }
.empty-state { color: var(--text-mut); font-size: .88rem; text-align: center; padding: 2rem; }
.kpi__value--lg { font-size: 1.2rem; }
.input--readonly { background: var(--surface); color: var(--text-mut); }

/* ── Spacing utilities ───────────────────────────────────────────────────── */
.mt-sm  { margin-top: .75rem; }
.mt-md  { margin-top: 1.4rem; }
.mb-sm  { margin-bottom: .75rem; }
.mb-md  { margin-bottom: 1.4rem; }

/* Trend-Farben */
.trend-up       { color: var(--err);  font-weight: 600; }
.trend-up-mild  { color: var(--warn); font-weight: 600; }
.trend-down     { color: var(--ok);   font-weight: 600; }

/* ── KPI-Reihe (Dashboard 4er-Kachelzeile) ──────────────────────────────── */
.kpi-row { margin-bottom: 1.4rem; }
.kpi-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.kpi-card-link:hover { text-decoration: none; }
.kpi-card-link > .cockpit-kachel { flex: 1; }

/* ── Flex-Utilities (für form-row-inline und ähnliche Layouts) ───────────── */
.flex-grow-1 { flex: 1; min-width: 140px; }
.flex-grow-2 { flex: 2; min-width: 180px; }
.self-end     { align-self: flex-end; }
.mt-sm        { margin-top: .75rem; }
.trend-neutral  { color: var(--text-mut); }

/* Klickbare Warn-Items */
a.warn-item {
  cursor: pointer;
  transition: filter .12s, opacity .12s;
}
a.warn-item:hover { filter: brightness(.94); opacity: .95; text-decoration: none; }

/* ============================================================================
   FORMULARE — Labels, Sections, Grid
   ========================================================================== */

/* Labels */
label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-mut);
  margin-bottom: .32rem;
  letter-spacing: .01em;
}
label .req  { color: var(--err); }
label .hint { font-weight: 400; color: var(--text-dim); font-size: .76rem; margin-left: .3rem; }

/* Fieldset-Sections */
.form-section { border: none; padding: 0; margin: 0 0 1.5rem; }
.form-section__title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-dim);
  margin-bottom: .85rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

/* Responsives 2-Spalten Form-Grid */
.fg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem 1rem;
}
.fg .span-1 { grid-column: span 1; }
.fg .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .fg { grid-template-columns: 1fr; }
  .fg .span-1, .fg .span-2 { grid-column: auto; }
}

.field { margin-bottom: .85rem; }
.field:last-child { margin-bottom: 0; }

/* Hint unter Dropdown */
.field-hint {
  margin-top: .4rem;
  padding: .5rem .75rem;
  background: var(--brand-tint);
  border-radius: 6px;
  font-size: .78rem;
  color: var(--text-mut);
  line-height: 1.45;
}
[data-theme="dark"] .field-hint { background: #2a2410; color: var(--text-mut); }
.field-hint--hidden { display: none; }

/* ============================================================================
   DESIGN SYSTEM — Semantic type utilities
   ============================================================================ */

.t-display {
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.06;
}
.t-display em { font-style: normal; color: var(--brand); }

.t-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
[data-theme="dark"] .t-eyebrow { color: var(--brand); }

.t-card-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.t-kpi {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.t-kpi--lg { font-size: 2.4rem; }

.t-mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.t-num { font-variant-numeric: tabular-nums; text-align: right; }

.muted { color: var(--text-mut); }
.dim   { color: var(--text-dim); }

/* Brand mark — square gold tile with white "35A" */
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .02em;
  font-family: var(--font);
  flex-shrink: 0;
}
.brand-mark--lg { width: 48px; height: 48px; font-size: 1rem; border-radius: 12px; }
.brand-mark--sm { width: 28px; height: 28px; font-size: .7rem;  border-radius: 7px;  }

/* ============================================================================
   DASHBOARD EXTRAS — KPI-Gruppen + Verbrauchstabelle
   (extracted from inline <style> in index.php)
   ============================================================================ */

.kpi-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1.4rem;
}
@media (max-width: 700px) { .kpi-groups { grid-template-columns: 1fr; } }

.kpi-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}
.kpi-group__label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
  margin-bottom: .6rem;
}
.kpi-group--risk { border-left: 3px solid var(--err); }
.kpi-group--ops  { border-left: 3px solid var(--brand); }
.kpi-group--fin  { border-left: 3px solid var(--ok); }

.kpi-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
  padding: .25rem 0;
  border-top: 1px solid var(--border);
  font-size: .86rem;
}
.kpi-stat:first-of-type { border-top: none; }
.kpi-stat__num {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-stat__num--big { font-size: 1.5rem; }
.kpi-stat__label { color: var(--text-mut); flex: 1; margin-left: .5rem; }
.kpi-stat__badge {
  font-size: .7rem;
  padding: .1rem .4rem;
  border-radius: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.kb-red    { background: var(--err-bg);    color: var(--err); }
.kb-orange { background: var(--warn-bg);   color: var(--warn); }
.kb-green  { background: var(--ok-bg);     color: var(--ok); }
.kb-gray   { background: var(--surface-2); color: var(--text-mut); border: 1px solid var(--border); }

[data-theme="dark"] .kb-red    { background: #3b0e0e; color: #ff8a80; }
[data-theme="dark"] .kb-orange { background: #3e1f00; color: #ffcc80; }
[data-theme="dark"] .kb-green  { background: #0a3622; color: #7ee89a; }

.vt-badge { font-size: .7rem; padding: .1rem .4rem; border-radius: 10px; font-weight: 700; }

/* ── Mängel-Liste (Dashboard) ── */
.dmg-item2{display:grid;grid-template-columns:8px 1fr auto;gap:.4rem .65rem;align-items:start;padding:.5rem 0;border-top:1px solid var(--border);font-size:.84rem;}
.dmg-item2:first-child{border-top:none;}
.dmg-dot2{width:8px;height:8px;border-radius:50%;margin-top:.3rem;flex-shrink:0;}
.dmg-dot2-urgent{background:var(--err);}
.dmg-dot2-normal{background:var(--warn);}
.dmg-title2{font-weight:500;line-height:1.3;}
.dmg-meta2{font-size:.75rem;color:var(--text-mut);margin-top:.1rem;}
.dmg-frist{font-size:.75rem;font-weight:600;white-space:nowrap;text-align:right;}
.dmg-frist--overdue{color:var(--err);}
.dmg-frist--soon{color:var(--warn);}
.dmg-tags2{display:flex;gap:.25rem;flex-wrap:wrap;margin-top:.2rem;}
.dmg-tag2{font-size:.68rem;padding:.08rem .35rem;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);}
.dmg-tag2--red{background:var(--err-bg);border-color:#f0c4be;color:var(--err);}
[data-theme=dark] .dmg-tag2--red{background:#3b0e0e;border-color:#5a1a1a;color:#ff8a80;}

/* ── Verbrauchstabelle (Dashboard) ── */
.vt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.vt{width:100%;border-collapse:collapse;font-size:.85rem;}
.vt th{text-align:left;padding:.4rem .6rem;border-bottom:2px solid var(--border);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mut);white-space:nowrap;}
.vt th.r,.vt td.r{text-align:right;}
.vt td{padding:.5rem .6rem;border-bottom:1px solid var(--border);vertical-align:middle;}
.vt tr:last-child td{border-bottom:none;}
.vt tr:hover td{background:var(--surface-2);}
.vt-anomaly td{background:var(--err-bg) !important;}
[data-theme=dark] .vt-anomaly td{background:#3b0e0e !important;}

/* ── NK + MV Zeilen (Dashboard) ── */
.nk2-row{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;border-top:1px solid var(--border);font-size:.84rem;flex-wrap:wrap;}
.nk2-row:first-child{border-top:none;}

/* ── Section expand / collapse ── */
.section-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:.5rem 0;user-select:none;}
.section-toggle:hover .section-toggle__label{color:var(--brand);}
.section-toggle__label{font-size:1rem;font-weight:700;}
.section-toggle__hint{font-size:.78rem;color:var(--text-mut);}
.section-toggle__ico{font-size:.75rem;color:var(--text-mut);transition:transform .2s;}
.section-toggle.open .section-toggle__ico{transform:rotate(180deg);}
.section-collapse{display:none;}
.section-collapse.open{display:block;}


.btn--save { min-width: 140px; font-size: .9rem; }

/* ── Role-Switcher (Admin-Topbar) ─────────────────────────────────────────── */
.role-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px;
}
.rs-btn {
  padding: .22rem .65rem;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-mut);
  font-size: .75rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.rs-btn:hover { background: var(--surface); color: var(--text); }
.rs-btn--active {
  background: var(--brand);
  color: var(--brand-text-on);
  cursor: default;
}
.rs-btn--active:hover { background: var(--brand); color: var(--brand-text-on); }

/* ── Preview-Banner ─────────────────────────────────────────────────────────── */
.preview-banner {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1.25rem;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn);
  font-size: .82rem;
  color: var(--warn);
}
[data-theme="dark"] .preview-banner { background: var(--warn-bg); }
.preview-banner strong { font-weight: 700; }
.preview-banner__reset {
  padding: .18rem .55rem;
  border: 1px solid var(--warn);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--warn);
  font-size: .74rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--t-fast);
}
.preview-banner__reset:hover { background: var(--warn); color: #fff; }

/* Auth-Hosting-Badge (Login + Register Seiten) */
.auth-hosting {
  font-size: .78rem;
  color: var(--text-dim);
  text-align: center;
  margin-top: 1.25rem;
  letter-spacing: .01em;
}

/* ── Scope-Label (Geltungsbereich je Card) ─────────────────────────────────── */
.scope-label {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .03em;
  margin-top: .15rem;
}
.scope-label::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-2);
  flex-shrink: 0;
}
.scope-label--portfolio::before { background: var(--brand); }
.scope-label--object::before    { background: var(--ok); }

/* ============================================================================
   CHECKBOX NORMALIZATION
   ========================================================================== */
input[type=checkbox], input[type=radio] {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Contacts ─────────────────────────────────────────────────────────────── */
.contacts-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1.2rem;}
.contacts-toolbar input[type=search]{flex:1;min-width:180px;max-width:340px;}
.contacts-toolbar select{min-width:120px;}
.contacts-count{margin-left:auto;color:var(--text-mut);font-size:.85rem;white-space:nowrap;}
.contacts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;color:inherit;transition:box-shadow .15s,border-color .15s;}
.contact-card:hover{box-shadow:var(--shadow-lg);border-color:var(--brand);}
.contact-card__art{font-size:.7rem;font-weight:700;letter-spacing:.04em;color:var(--text-mut);text-transform:uppercase;align-self:flex-end;margin-bottom:.2rem;}
.contact-card__name{font-size:1.05rem;font-weight:700;line-height:1.2;}
.contact-card__sub{color:var(--text-mut);font-size:.83rem;}
.contact-card__info{font-size:.82rem;color:var(--text-mut);display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.1rem;}
.contact-card__info span{display:flex;align-items:center;gap:.2rem;}
.contact-card__badges{margin-top:.4rem;display:flex;flex-wrap:wrap;gap:.25rem;}
.contact-card__meta{font-size:.75rem;color:var(--text-mut);margin-top:.2rem;}
.contact-card__actions{margin-top:auto;padding-top:.6rem;}
.badge--role{background:var(--brand-pale);color:var(--brand-dark);border:1px solid var(--brand-lite);font-size:.7rem;padding:.1rem .45rem;border-radius:20px;font-weight:600;white-space:nowrap;}
.contact-empty{text-align:center;padding:3rem;color:var(--text-mut);}
.contact-empty p{margin:.4rem 0;}
.contact-empty .ico{font-size:2.5rem;}

/* ============================================================================
   LEGAL ADMIN
   ========================================================================== */
.legal-admin-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.legal-admin-table th{text-align:left;padding:.5rem .75rem;border-bottom:2px solid var(--border);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-mut);}
.legal-admin-table td{padding:.55rem .75rem;border-bottom:1px solid var(--border);vertical-align:middle;}
.legal-admin-table tr:hover td{background:var(--surface-hover,rgba(0,0,0,.03));}
.trust-pill{font-size:.72rem;padding:.15rem .5rem;border-radius:20px;font-weight:700;}
.trust-draft{background:var(--surface-2,#e9ecef);color:var(--text-mut);}
.trust-verified{background:var(--info-bg,#cff4fc);color:var(--info,#055160);}
.trust-published{background:var(--ok-bg,#d1e7dd);color:var(--ok,#0a3622);}
.trust-archived{background:var(--surface-2,#f0f0f0);color:var(--text-dim,#888);}
.admin-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;}
.new-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius,10px);padding:1.4rem;margin-bottom:1.5rem;}
.new-form h2{font-size:1rem;margin:0 0 1rem;}
.new-form__summary{cursor:pointer;font-weight:700;font-size:.95rem;}
.form-body{margin-top:1rem;}
.form--inline{display:inline;}
.detail-panel{margin-top:.6rem;}
.td--mono{font-family:var(--mono,monospace);font-size:.78rem;}
.footnote-row{padding:.5rem .75rem;border-bottom:1px solid var(--border);font-size:.84rem;}
.footnote-key{font-family:var(--mono,monospace);font-size:.78rem;background:var(--surface);padding:.1rem .3rem;border-radius:4px;}
.footnote-meta{margin-left:.5rem;font-size:.78rem;color:var(--text-mut);}
.footnote-text{margin:.25rem 0 0;font-size:.84rem;}
.footnote-text--muted{margin:.15rem 0 0;font-size:.82rem;color:var(--text-mut);}
.mt-lg{margin-top:1.5rem;}

/* ============================================================================
   IOT / SOLAR DEVICES
   ========================================================================== */
.iot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin-bottom:1.5rem;align-items:stretch;}
.iot-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius,10px);padding:1rem 1.1rem;display:flex;flex-direction:column;}
.iot-card__head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem;}
.iot-card__name{font-size:.9rem;font-weight:700;}
.iot-card__loc{font-size:.72rem;color:var(--text-mut);margin-top:.1rem;}
.iot-card__watt{font-size:1.6rem;font-weight:700;line-height:1;}
.iot-card__watt--solar{color:var(--color-solar,#f39c12);}
.iot-card__watt--muted{color:var(--text-mut);}
.iot-card__watt--hk{color:var(--text-mut);font-size:1.1rem;}
.iot-card__unit{font-size:.9rem;font-weight:400;}
.iot-card__sub{font-size:.78rem;color:var(--text-mut);margin-top:.25rem;}
.iot-card__sub--dim{margin-top:.4rem;font-size:.72rem;color:var(--text-dim);}
.iot-card--solar{border-left:3px solid var(--color-solar,#f39c12);}
.iot-card--poll{border-left:3px solid var(--color-ok,#27ae60);}
.iot-card--hk{border-left:3px solid var(--color-hk,#95a5a6);opacity:.75;}
.iot-card__badge{font-size:.68rem;padding:.12rem .45rem;border-radius:20px;font-weight:700;white-space:nowrap;}
.badge-online{background:var(--ok-bg,#d1e7dd);color:var(--ok,#0a3622);}
.badge-offline{background:var(--surface-2,#e9ecef);color:var(--text-mut,#666);}
.badge-hk{background:#e8eaf6;color:#3949ab;}
[data-theme="dark"] .badge-online{background:#0a3622;color:#7ee89a;}
[data-theme="dark"] .badge-offline{background:#2a2a2a;color:#888;}
[data-theme="dark"] .badge-hk{background:#1a1a3a;color:#7986cb;}
.iot-section-head{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0 .75rem;}
.iot-section-head h2{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mut);margin:0;}
.iot-section-head .iot-total{font-size:.82rem;font-weight:700;color:var(--brand);}
.iot-section-head__note{font-size:.78rem;color:var(--text-mut);}
details.iot-setup{margin-top:1.5rem;border-top:1px solid var(--border);padding-top:1rem;}
details.iot-setup summary{cursor:pointer;font-size:.82rem;font-weight:600;color:var(--text-mut);padding:.5rem 0;user-select:none;list-style:none;}
details.iot-setup summary::-webkit-details-marker{display:none;}
details.iot-setup .grid.grid--2{margin-top:.75rem;}
.iot-setup__card{padding:1rem;font-size:.82rem;}
.iot-setup__card-title{font-weight:700;margin:0 0 .5rem;}
.iot-setup__card-text{color:var(--text-mut);margin:0 0 .5rem;}
.iot-setup__code{font-size:.76rem;word-break:break-all;}
.td-name{font-weight:600;}
.td-muted{color:var(--text-mut);}
.td-purpose{font-size:.78rem;color:var(--text-mut);max-width:200px;}
.td-mono{font-size:.75rem;font-family:var(--mono,monospace);}
.link-brand{color:var(--brand);}
/* Modal */
.u-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center;padding:1rem;}
.u-modal-backdrop.open{display:flex;}
.u-modal{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius,10px);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.25);}
.u-modal__head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1;}
.u-modal__title{font-size:1rem;font-weight:700;margin:0;}
.u-modal__close{background:none;border:none;cursor:pointer;color:var(--text-mut);font-size:1.25rem;line-height:1;padding:.2rem .4rem;border-radius:4px;}
.u-modal__close:hover{background:var(--surface-2);color:var(--text);}
.u-modal__body{padding:1.25rem;}
.u-modal__foot{display:flex;gap:.6rem;align-items:center;padding:1rem 1.25rem;border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--bg);}
.u-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem;}
.u-field:last-child{margin-bottom:0;}
.u-field label{font-size:.75rem;color:var(--text-mut);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.u-field input,.u-field textarea{font-size:.9rem;padding:.45rem .65rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);width:100%;box-sizing:border-box;}
.u-field input:focus,.u-field textarea:focus{outline:2px solid var(--brand);outline-offset:1px;}

/* --- NK: Ergebnis-Seite --------------------------------------------------- */
.nk-result-wrap { max-width: 900px; }
.nk-prop-info { margin-bottom: 1.2rem; font-size: .84rem; color: var(--text-mut); }
.nk-unit-card { border: 1px solid var(--border); border-radius: 8px; padding: 1.2rem; margin-bottom: 1rem; page-break-inside: avoid; }
.nk-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .7rem; }
.nk-tenant-name { font-size: .8rem; color: var(--text-mut); margin-left: .5rem; }
.nk-card-meta { text-align: right; }
.nk-meta-row { font-size: .78rem; color: var(--text-mut); }
.nk-pos-table { width: 100%; border-collapse: collapse; font-size: .83rem; margin-bottom: .7rem; }
.nk-tr-sep td { border-top: 1px solid var(--border); }
.nk-tr-total td { border-top: 2px solid var(--border); font-weight: 700; }
.nk-tr-saldo td { border-top: 2px solid var(--border); font-weight: 700; font-size: 1rem; }
.nk-td { padding: .28rem .2rem; }
.nk-td--total { padding: .4rem .2rem; }
.nk-td--saldo { padding: .5rem .2rem; }
.nk-td--right { text-align: right; }
.nk-td--muted { color: var(--text-mut); }
.nk-td--sm { font-size: .78rem; }
.nk-saldo--err { color: var(--err); }
.nk-saldo--ok  { color: var(--ok); }
.nk-details-summary { font-size: .76rem; cursor: pointer; color: var(--text-mut); }
.nk-explain-row { font-size: .74rem; color: var(--text-mut); margin-top: .15rem; line-height: 1.4; }
.nk-lauf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.nk-lauf-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 10px); padding: 1.1rem 1.2rem; }
.nk-lauf-card h3 { font-size: .95rem; margin: 0 0 .6rem; }
.nk-lauf-saldo { font-size: 1.3rem; font-weight: 700; margin-bottom: .5rem; }
.u-field .u-field-hint{font-size:.74rem;color:var(--text-mut);margin-top:.1rem;}

/* --- Nebenkosten Mieteranschreiben --------------------------------------- */
@media screen {
  .letter-wrap { max-width: 780px; margin: 0 auto; }
  .letter { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
            padding: 3rem 3.5rem; margin-bottom: 2rem; font-size: .9rem; line-height: 1.6; }
  .screen-controls { max-width: 780px; margin: 0 auto 1.5rem; display: flex; gap: .5rem; }
}
@media print {
  .sidebar, .topbar, .page-head, .screen-controls, nav, header { display: none !important; }
  .main, .letter-wrap { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }
  .letter { border: none !important; border-radius: 0 !important; padding: 2cm 2.5cm !important;
            page-break-after: always; break-after: page; box-shadow: none !important;
            background: white !important; color: black !important; font-size: 10.5pt !important; }
  .letter:last-child { page-break-after: avoid; }
  table { border-collapse: collapse; }
  th, td { padding: 3pt 5pt !important; }
}
.letter-absender { font-size: .78rem; color: var(--text-mut); margin-bottom: .5rem;
                   border-bottom: 1px solid var(--border); padding-bottom: .3rem; }
.letter-empfaenger { min-height: 5rem; margin-bottom: 2rem; }
.letter-meta { display: flex; justify-content: flex-end; margin-bottom: 2rem; font-size: .85rem; }
.letter-betreff { font-weight: 700; margin-bottom: 1.25rem; font-size: 1rem; }
.letter-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin: 1rem 0; }
.letter-table th { text-align: left; padding: .3rem .4rem; border-bottom: 2px solid currentColor; font-size: .78rem; }
.letter-table td { padding: .3rem .4rem; border-bottom: 1px solid var(--border); }
.letter-table td:last-child, .letter-table th:last-child { text-align: right; }
.letter-table__anteil { color: var(--text-mut); font-size: .8rem; }
.letter-table__total { font-weight: 700; border-top: 2px solid var(--border); }
.letter-table__vz { color: var(--text-mut); }
.letter-saldo-box { border: 2px solid currentColor; border-radius: 6px; padding: .75rem 1rem;
                    margin: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; }
.saldo-nachzahlung { border-color: var(--err); color: var(--err); }
.saldo-guthaben { border-color: var(--ok); color: var(--ok); }
.letter-saldo-box__label { font-weight: 700; font-size: 1rem; }
.letter-saldo-box__amount { font-size: 1.25rem; font-weight: 800; }
.letter-p { margin: .65rem 0; }
.letter-note { font-size: .85rem; }
.letter-footer { margin-top: 2rem; font-size: .78rem; color: var(--text-mut); border-top: 1px solid var(--border); padding-top: .75rem; }

/* --- Contact edit (ct-*) ------------------------------------------------- */
.ct-tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1.25rem; border-bottom: 2px solid var(--border); padding-bottom: .5rem; }
.ct-tabs a { padding: .4rem .85rem; border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0; font-size: .85rem; font-weight: 600; color: var(--text-mut); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.ct-tabs a:hover { background: var(--surface-2); color: var(--text); }
.ct-tabs a.active { background: var(--surface); border-color: var(--border); border-bottom-color: var(--surface); color: var(--text); }
.ct-tabs a.disabled { opacity: .45; pointer-events: none; cursor: default; }
.ct-section-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mut); margin: 1rem 0 .5rem; }
.ct-divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.ct-rel-card { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.ct-rel-card:last-child { border-bottom: none; }
.ct-rel-card__body { flex: 1; min-width: 0; }
.ct-rel-card__header { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.ct-rel-card__title { font-size: .9rem; font-weight: 600; }
.ct-rel-card__sub { font-size: .8rem; color: var(--text-mut); }
.ct-rel-card__note { font-size: .78rem; color: var(--text-dim); margin-top: .2rem; font-style: italic; }
.ct-rel-rolle { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); color: var(--text-mut); padding: .15rem .45rem; border-radius: var(--radius-sm, 6px); white-space: nowrap; }
.ct-empty { font-size: .85rem; color: var(--text-mut); padding: .75rem 0; }
.ct-add-panel { border: 1px solid var(--border); border-radius: var(--radius, 10px); margin-top: 1rem; }
.ct-add-panel > summary { padding: .6rem 1rem; font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--brand); }
.ct-add-panel > summary:hover { color: var(--brand-dark); }
.ct-add-panel__body { padding: 1rem; border-top: 1px solid var(--border); }
.ct-save-bar { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; margin-top: .5rem; }
.ct-block { display: block; }
.ct-block--hidden { display: none; }
.art-toggle { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.art-toggle input[type=radio] { accent-color: var(--brand); }
.art-toggle label { font-size: .9rem; cursor: pointer; }
.label--checkbox { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; margin-bottom: .5rem; }
.label--checkbox input { accent-color: var(--brand); }
.btn--err { color: var(--err); border-color: var(--err); }
.btn--err:hover { background: var(--err-bg); }

/* card modifier */
.card--flush { padding: 0; }
.card--err   { border-color: var(--err); }
.card--mt-sm { margin-top: .5rem; }
.card--mb    { margin-bottom: 1rem; }

/* empty-state sub-elements */
.empty-state__title { font-size: 1rem; margin-bottom: .4rem; }
.empty-state__sub   { font-size: .85rem; }

/* audit list count */
.audit-count { margin-left: auto; align-self: flex-end; color: var(--text-mut); font-size: .85rem; }

/* pager — site-wide pagination component */
.pager { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; flex-wrap: wrap; }
.pager a,
.pager span { padding: .3rem .65rem; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: .82rem; text-decoration: none; color: var(--text); }
.pager .cur { background: var(--brand); color: var(--surface); border-color: var(--brand); font-weight: 700; }
.pager a:hover { background: var(--surface-2); }
.pager__info { margin-left: .5rem; color: var(--text-mut); font-size: .8rem; border: none !important; }

/* --- damage_new / report form -------------------------------------------- */
input.photo-file-input { display: none; }
.is-visible { display: block !important; }
.col-stack { display: flex; flex-direction: column; gap: 1rem; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; margin-top: .5rem; }
@media (max-width: 640px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
.type-hint { display: none; margin-top: .75rem; }
.schimmel-warn { display: none; margin-top: .5rem; }
.legal-card--schaden { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; background: var(--surface); }


/* ============================================================================
   nbka.php – Nebenkostenabrechnung component classes
   ========================================================================== */

/* Table column widths */
.col-nr    { width: 2rem; text-align: center; }
.col-key   { width: 140px; }
.col-amt   { width: 110px; text-align: right; }
.col-extra { width: 220px; }

/* Result cell state */
.pos-val   { color: var(--ok);  font-weight: 700; }
.neg-val   { color: var(--err); font-weight: 700; }

/* Auto-calculated totals and labels */
.auto-total { font-weight: 700; color: var(--text); }
.auto-value { color: var(--text-mut); }
.auto-label { font-size: .75rem; color: var(--text-dim); }

/* Extra-input section headings inside table cells */
.extra-section-head         { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                               color: var(--text-mut); margin: .5rem 0 .2rem; padding-bottom: .15rem;
                               border-bottom: 1px solid var(--border); }
.extra-section-head--ok     { color: var(--ok); border-bottom-color: var(--ok); }

/* Extra details collapsible block */
.extra-details { margin-top: .35rem; }

/* Hint messages inside extra blocks */
.extra-hint         { font-size: .75rem; padding: .3rem .5rem; border-radius: var(--radius-sm); margin: .25rem 0;
                       background: var(--surface-2); color: var(--text-mut); }
.extra-hint--error  { background: var(--err-bg);  color: var(--err); }
.extra-hint--ok     { background: var(--ok-bg);   color: var(--ok); }
.extra-hint--muted  { background: var(--surface-2); color: var(--text-mut); }

/* Label modifier variants */
.label--muted    { color: var(--text-mut); }
.label--strong   { font-weight: 700; }
.label--error    { color: var(--err); }
.label--flex     { display: flex; align-items: center; gap: .4rem; }
.label--required { color: var(--warn); font-size: .8rem; }
.label--xs       { font-size: .75rem; color: var(--text-dim); }

/* Field state classes */
.field--error       { border-color: var(--err) !important; background: var(--err-bg) !important; }
.field--warn        { border-color: var(--warn) !important; background: var(--warn-bg) !important; }
.field--auto-loaded { border-color: var(--ok) !important; background: var(--ok-bg) !important; }

/* badge--block: full-width badge in table cells */
.badge--block { display: block; margin-bottom: .2rem; }

/* ============================================================================
   admin_properties.php – property / meter / tech component classes
   ========================================================================== */

/* Leaflet map fill div inside .prop-card__map */
.prop-map { position: absolute; inset: 0; }

/* Property block wrapper */
.prop-block { margin-bottom: 2rem; }

/* Property card layout — flex row, map takes 40% */
.prop-card__inner { display: flex; gap: 1.5rem; align-items: stretch; }
.prop-card__body  { flex: 1; min-width: 0; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.prop-card__map   { flex: 0 0 40%; min-height: 280px; position: relative; }
@media (max-width: 700px) { .prop-card__map { flex: none; min-height: 180px; } }

/* Chips row inside property card */
.prop-chips { margin-top: auto; padding-top: .5rem; }

/* Property-level Kontakte section */
.prop-kontakte { margin-top: 1.5rem; scroll-margin-top: 60px; }

/* Shared tab-content top margin */
.tab-content { margin-top: 1.2rem; }

/* Contact card inside Objektkontakte grid */
.contact-card__role  { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-dark); }
.contact-card__name  { font-weight: 600; font-size: .9rem; }
.contact-card__meta  { font-size: .78rem; color: var(--text-mut); }
.contact-card__form  { margin-top: .3rem; }

/* Eyebrow variant in error color (e.g. Zähler-Defekte heading) */
.eyebrow--err { color: var(--err); margin: 0 0 .5rem; }

/* Heating system overview card */
.heizsystem-card { margin-bottom: 1.2rem; display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; padding: 1rem 1.4rem; }
.heizsystem-card__label  { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: .2rem; }
.heizsystem-card__type   { font-size: 1.05rem; font-weight: 700; }
.heizsystem-card__energy { font-size: .83rem; color: var(--text-mut); }
.heizsystem-card__since  { font-size: .82rem; color: var(--text-mut); margin-left: auto; }

/* Shared details > summary style */
details > summary.details__summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-mut);
  padding: .4rem 0;
  user-select: none;
  list-style: none;
}

/* Component list */
.comp-card         { margin-bottom: .75rem; padding: 0; }
.comp-card__head   { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.comp-card__head-info { flex: 1; }
.comp-card__type   { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-dark); }
.comp-card__name   { font-size: .95rem; font-weight: 700; margin-top: .1rem; }
.comp-card__maker  { font-size: .82rem; color: var(--text-mut); }
.comp-card__body   { padding: .75rem 1rem; }
.comp-notizen      { font-size: .82rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.comp-prop-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .3rem .75rem; font-size: .83rem; }
@media (max-width: 640px) { .comp-prop-grid { grid-template-columns: 1fr 1fr; } }
.comp-prop-grid__label { font-size: .75rem; color: var(--text-dim); }

/* Component photo grid */
.comp-photo-grid    { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.comp-thumb-wrap    { position: relative; }
.comp-thumb         { width: 90px; height: 70px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.comp-thumb-link    { display: flex; align-items: center; justify-content: center; width: 90px; height: 70px; border: 1px solid var(--border); border-radius: 6px; font-size: .72rem; color: var(--text-mut); text-decoration: none; }
.comp-thumb-caption { font-size: .68rem; color: var(--text-dim); text-align: center; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Component photo upload flex row */
.comp-photo-form    { padding-top: .5rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.comp-photo-form .field--flex1 { flex: 1; min-width: 150px; }
.comp-photo-form .field--flex2 { flex: 2; min-width: 200px; }

/* Component edit form utilities */
.comp-checkbox-row  { display: flex; align-items: center; gap: .4rem; padding-top: 1.5rem; }
.comp-checkbox-row label { font-weight: 400; font-size: .88rem; }

/* System history row */
.syshistory-row    { display: flex; align-items: start; gap: 1rem; padding: .65rem 1rem; }
.syshistory-row--border { border-top: 1px solid var(--border); }
.syshistory-date   { flex: 0 0 90px; font-size: .8rem; color: var(--text-mut); }
.syshistory-detail { flex: 1; font-size: .85rem; }
.syshistory-notes  { color: var(--text-dim); font-size: .8rem; }

/* Defect row */
.defect-row        { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; }
.defect-row--border { border-top: 1px solid var(--border); }
.defect-row__name  { flex: 1; font-weight: 600; font-size: .86rem; }
.defect-row__date  { font-size: .8rem; color: var(--err); }

/* Meter table utility cells */
.meter-table__sm      { font-size: .8rem; }
.meter-table__nowrap  { white-space: nowrap; }
.meter-table__actions { white-space: nowrap; text-align: right; }
.row--inactive      { opacity: .55; }
.card--dashed       { border: 1px dashed var(--border); }

/* Prop-setting inline edit form */
.prop-setting-form-row   { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.prop-setting-form-row .field--w180 { margin: 0; }
.prop-setting-form-row .field--w180 input { width: 180px; max-width: 100%; }
.prop-setting-form-row .field--w220 { margin: 0; }
.prop-setting-form-row .field--w220 input { width: 220px; max-width: 100%; }

/* Unit card subtitle (type + floor) */
.unit-card__subtitle { font-size: .78rem; color: var(--text-dim); margin-top: .15rem; }

/* Unit card kpi-value parking (slightly smaller) */
.kpi-value--sm { font-size: .85rem; }

/* Unit card actions small links */
.btn--xs { font-size: .76rem; }

/* Unit card "margin-top: auto" for status badge area */
.unit-card__status { margin-top: auto; }

/* Empty state inside unit grid */
.empty-dashed {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-mut);
  font-size: .86rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* Versorger: tariff group block */
.tariff-group { margin-bottom: 1.5rem; }
.tariff-group__label { margin-bottom: .6rem; }

/* Versorger: no-tariff note */
.no-tariff-note { font-size: .84rem; color: var(--text-mut); margin-bottom: .75rem; }

/* Replace-meter inline table cell */
.replace-cell { background: var(--surface-2); padding: 1rem 1.2rem; }
.replace-cell__head { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); margin: 0 0 .75rem; }
.replace-cell__note { margin: 0 0 .75rem; }

/* Zaehler edit form section heads */
.zaehler-section-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: .3rem 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }

/* New-property panel: label eyebrow */
.new-prop-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: .7rem; }
#new-property { margin-top: 1rem; }

/* ============================================================================
   DAMAGE FORM — type/urgency/category selection widgets (damage_new.php)
   ========================================================================== */
.type-option { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, background .15s; }
.type-option input[type=radio] { margin-top: .2rem; flex-shrink: 0; }
.type-option:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.type-option__body { flex: 1; }
.type-option__desc { font-size: .82rem; color: var(--text-mut); margin-top: .15rem; }
.cat-option { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; font-size: .9rem; transition: border-color .15s; }
.cat-option input[type=radio] { flex-shrink: 0; }
.cat-option:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.cat-option--warn:has(input:checked) { border-color: var(--err); background: var(--err-bg); }
.urgency-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.urgency-opt { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.urgency-opt input[type=radio] { margin-top: .2rem; flex-shrink: 0; }
.urgency-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.urgency-opt__desc { font-size: .8rem; color: var(--text-mut); margin-top: .1rem; }
@media (max-width: 640px) { .urgency-opts { grid-template-columns: 1fr; } }

/* ============================================================================
   DAMAGE PAGE — cost grids, status classes, maintenance/battery states
   ========================================================================== */
.cost-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.cost-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem 1rem; }
@media (max-width: 640px) { .cost-grid-2, .cost-grid-3 { grid-template-columns: 1fr; } }
.maint-date--overdue { color: var(--err); font-weight: 600; }
.maint-date--soon    { color: var(--warn); font-weight: 600; }
.batt--critical { color: var(--err); font-weight: 600; }
.batt--low      { color: var(--warn); font-weight: 600; }
.report-card-head { display: grid; grid-template-columns: 36px 1fr auto; align-items: start; gap: .9rem; padding: .85rem 1rem; cursor: pointer; transition: background .1s; }
.report-card-head:hover { background: var(--surface-2); }
.btn--danger { color: var(--err); border-color: var(--err); }
.btn--danger:hover { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.btn--accent { color: var(--brand-dark); }
.btn--accent:hover { background: var(--brand-tint); border-color: var(--brand); }

/* ============================================================================
   UNIT EDIT — betriebsstatus, check-card, doc-card, section helpers
   ========================================================================== */
.betriebsstatus--vermietet    { color: var(--ok);        font-weight: 600; }
.betriebsstatus--leerstand    { color: var(--warn);       font-weight: 600; }
.betriebsstatus--reserviert   { color: var(--brand-dark); font-weight: 600; }
.betriebsstatus--eigennutzung { color: var(--text-mut);   font-weight: 600; }
.betriebsstatus--in_sanierung { color: var(--err);        font-weight: 600; }
.betriebsstatus--ausser_betrieb { color: var(--text-dim); font-weight: 600; }
.check-card { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, background .15s; }
.check-card input[type=checkbox] { flex-shrink: 0; }
.check-card:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.doc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: .4rem; transition: border-color .15s; }
.doc-card:hover { border-color: var(--brand); }
.doc-card__meta { font-size: .72rem; color: var(--text-mut); }

/* ============================================================================
   PROPERTY ADMIN — component details, photo grid, prop-card layout
   ========================================================================== */
.comp-thumb-del-form { position: absolute; top: 2px; right: 2px; }
.photo-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.photo-thumb { width: 90px; height: 70px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.comp-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .3rem .75rem; }
@media (max-width: 640px) { .comp-detail-grid { grid-template-columns: 1fr 1fr; } }
.col-action { width: 1px; white-space: nowrap; }
.fw-bold { font-weight: 600; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ============================================================================
   NBKA CASE EDIT — badge-s, cost-table, alert variants for case context
   ========================================================================== */
.badge-s { display: inline-block; font-size: .72rem; padding: .1rem .45rem; border-radius: 20px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.badge-s.ok   { background: var(--ok-bg);   border-color: #bfe3cd; color: #1f6b41; }
.badge-s.warn { background: var(--warn-bg); border-color: #ecd9a6; color: #8a6212; }
.badge-s.err  { background: var(--err-bg);  border-color: #f0c4be; color: #97271c; }
[data-theme="dark"] .badge-s.ok   { background: #0a3622; color: #7ee89a; border-color: #1a5e38; }
[data-theme="dark"] .badge-s.warn { background: #241704; color: #ffd047; border-color: #4a3500; }
[data-theme="dark"] .badge-s.err  { background: #260c09; color: #ff8a80; border-color: #5a1a1a; }
.nein-badge { background: var(--err-bg); color: #97271c; font-size: .72rem; padding: .1rem .45rem; border-radius: 20px; font-weight: 600; }
[data-theme="dark"] .nein-badge { background: #260c09; color: #ff8a80; }
.cost-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cost-table th { text-align: left; padding: .5rem .6rem; border-bottom: 2px solid var(--border); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mut); }
.cost-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cost-table tr:last-child td { border-bottom: none; }
.cost-table tr:hover td { background: var(--brand-tint); }
[data-theme="dark"] .cost-table tr:hover td { background: #2a2410; }
.uml-badge { display: inline-block; font-size: .72rem; padding: .1rem .45rem; border-radius: 20px; font-weight: 600; white-space: nowrap; }
.uml-badge--ja   { background: var(--ok-bg);   color: #1f6b41; }
.uml-badge--nein { background: var(--err-bg);  color: #97271c; }

/* ============================================================================
   PROPERTY ADMIN — prop-card, unit-card, tab-nav, kpi-mini-grid
   ========================================================================== */
.prop-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1.2rem; }
.label--hidden { visibility: hidden; display: block; font-size: .82rem; margin-bottom: .3rem; }
@media (max-width: 860px) { .prop-stammdaten-grid { grid-template-columns: 1fr; } }
.prop-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .5rem; }
.prop-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-mut); }
.prop-chip--alert { background: var(--err-bg); border-color: #f0c4be; color: #97271c; }
.prop-chip--warn  { background: var(--warn-bg); border-color: #ecd9a6; color: #8a6212; }
.kpi-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
@media (max-width: 560px) { .kpi-mini-grid { grid-template-columns: 1fr 1fr; } }

/* Tab nav (admin_properties.php) */
.tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-nav__link { display: inline-block; padding: .55rem .9rem; font-size: .875rem; font-weight: 600; color: var(--text-mut); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; text-decoration: none; transition: color .15s, border-color .15s; }
.tab-nav__link:hover { color: var(--text); text-decoration: none; }
.tab-nav__link--active { color: var(--brand-dark); border-bottom-color: var(--brand); }

/* Unit cards */
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
@media (max-width: 560px) { .unit-grid { grid-template-columns: 1fr; } }
.unit-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .5rem; }
.unit-card__name { font-size: .95rem; font-weight: 700; }
.unit-card__kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .6rem; margin: .2rem 0; }
.unit-card__kpi { display: flex; flex-direction: column; }
.unit-card__kpi-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.unit-card__kpi-value { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.unit-card__actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; }
.unit-card__chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.unit-card__chip { font-size: .68rem; padding: .1rem .4rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-mut); }
.btn-photo-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: .8rem; border: none; cursor: pointer; display: grid; place-items: center; line-height: 1; }
.btn-photo-del:hover { background: var(--err); }

/* ============================================================================
   MODAL — global reusable overlay (admin_users.php, others)
   ========================================================================== */
.u-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 900; display: none; align-items: center; justify-content: center; padding: 1rem; }
.u-modal-backdrop.open { display: flex; }
.u-modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 8px 40px rgba(0,0,0,.25); width: 100%; max-width: 480px; overflow: hidden; }
.u-modal--lg { max-width: 620px; }
.u-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.u-modal__title { font-size: 1rem; font-weight: 700; margin: 0; }
.u-modal__close { background: var(--surface-2); border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: .9rem; color: var(--text-mut); display: grid; place-items: center; }
.u-modal__close:hover { background: var(--border); }
.u-modal__body { padding: 1.25rem; }
.u-modal__foot { display: flex; gap: .5rem; justify-content: flex-end; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
@media (max-width: 560px) { .u-modal__foot { flex-direction: column; } .u-modal__foot .btn { width: 100%; } }

/* ============================================================================
   CSS VARIABLE TOKENS — ok/warn border colors for component use
   ========================================================================== */

/* ============================================================================
   TENANCY LIST  (tenancies.php)
   ========================================================================== */
.tc-list { display: flex; flex-direction: column; gap: .5rem; }
/* tc-card: vertikales Layout für Card-Grid (jede Card ist eigenständig) */
.tc-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.1rem 1.2rem; height: 100%; }
.tc-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.tc-card__bottom { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem 1rem; align-items: end; border-top: 1px solid var(--border); padding-top: .65rem; margin-top: auto; }
.tc-addr { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: .2rem; }
.tc-unit { font-size: 1rem; font-weight: 700; }
.tc-unit__sub { font-size: .8rem; font-weight: 400; color: var(--text-mut); }
.tc-mieter { font-size: .86rem; color: var(--text-mut); margin-top: .1rem; }
.tc-laufzeit__label { font-size: .7rem; color: var(--text-dim); margin-bottom: .2rem; }
.tc-laufzeit__val { font-size: .88rem; font-weight: 600; }
.tc-laufzeit__sub { font-size: .8rem; color: var(--text-mut); }
.tc-finance { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .5rem; }
.tc-finance__item label { font-size: .68rem; color: var(--text-dim); display: block; }
.tc-finance__item .val { font-size: .86rem; font-weight: 500; }
.tc-finance__item.total .val { font-weight: 700; color: var(--brand-dark, #b57e1a); }
.tc-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; white-space: nowrap; }
.tc-kaution { font-size: .75rem; color: var(--text-mut); }
.tc-kaution__label { font-size: .68rem; color: var(--text-dim); }
.tc-erh { font-size: .7rem; color: var(--text-dim); text-align: right; }
.tc-ok  { color: var(--ok); }
.tc-err { color: var(--err); }
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; }
.filter-bar__count { margin-left: auto; color: var(--text-mut); font-size: .85rem; }
.filter-bar__select { min-width: 160px; }
.filter-bar__select--wide { min-width: 180px; }
.card--empty { text-align: center; padding: 3rem; color: var(--text-mut); }
.card--empty__msg { font-size: 1.1rem; margin-bottom: .5rem; }
.stat-grid--mb { margin-bottom: 1.5rem; }
.stat-tile__value--md { font-size: 1.3rem; }
@media (max-width: 640px) {
  .tc-card__bottom { grid-template-columns: 1fr auto; }
  .tc-laufzeit { display: none; }
}

/* ── Collapsible Stammdaten Edit ─────────────────────────────────────────── */
.prop-edit-details { cursor: default; }
.prop-edit-details > summary.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  list-style: none; padding: 0; margin: 0; border: 0;
}
.prop-edit-details > summary::-webkit-details-marker { display: none; }
.prop-edit-details > summary::marker { display: none; }
.prop-edit-body { padding: 0; }

/* Footer row inside prop-card: chips left, Bearbeiten-button right */
.prop-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  gap: .75rem;
  padding-top: .5rem;
}