/* ============================================================
   Nebenkostenverwaltung – Designsystem
   Optik nach dem Vorbild WISO Vermieter (Web): dunkle Kopfleiste,
   helle linke Navigation mit orangem Aktiv-Block, flache weiße
   Flächen, Formularfelder als unterstrichene Linien, Orange als
   einziger Akzent. Eigene Marke – nur die Designsprache ist gleich.
   ============================================================ */

:root {
  --c1: #ef7d22;                 /* Primär/Akzent: WISO-Orange */
  --c1-dunkel: #d76a12;          /* Orange fuer Hover/Verlaeufe */
  --c2: #f0a35e;                 /* helleres Orange fuer Nebenakzente */
  --kopf-bg: #4a4a4a;            /* dunkle Kopfleiste */
  --kopf-text: #ffffff;
  --bg: #f4f4f2;
  --card: #ffffff;
  --text: #3c3c3b;
  --muted: #7d7d7a;
  --border: #e2e2de;
  --linie: #c9c9c4;              /* Feldunterstreichung */
  --menue-bg: #efefec;
  --menue-aktiv: #e4e4df;
  --danger: #c2362b;
  --ok: #1d8a4e;
  --warn: #b97309;
  --radius: 5px;
  --radius-s: 3px;
  --shadow: 0 1px 2px rgba(30, 30, 28, .07);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c1-dunkel); text-underline-offset: 2px; }
h1 { font-size: 1.4rem; margin: .6rem 0 1rem; letter-spacing: -.015em; }
h2 { font-size: 1.08rem; margin: 0 0 .7rem; letter-spacing: -.01em; }
h3 { font-size: .97rem; margin: 1.4rem 0 .5rem; }
p  { margin: .4rem 0 .8rem; }

.leise { color: var(--muted); font-size: .87rem; }
.erklaerung { color: var(--muted); margin: -.4rem 0 1.3rem; max-width: 68ch; font-size: .95rem; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c1) 65%, white);
  outline-offset: 2px; border-radius: 6px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--c1); color: #fff;
  padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ============ Topbar (dunkel, wie das Vorbild) ============ */
.topbar {
  background: var(--kopf-bg); color: var(--kopf-text);
  display: flex; align-items: center; gap: .9rem;
  padding: .5rem 1rem;
  position: sticky; top: 0; z-index: 30;
}
.topbar .brand { font-weight: 700; font-size: .98rem; letter-spacing: .01em; color: #fff; }
.brand-link { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; }
.brand-link:hover { opacity: .92; }
.brand-mark {
  display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto;
  background: var(--c1); color: #fff; border-radius: 4px; font-weight: 800; font-size: .9rem;
}
.brand-mark svg { width: 16px; height: 16px; }
.topbar svg { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle; }
.topbar-spacer { flex: 1 1 auto; }
.topbar-user {
  margin-left: auto; font-size: .83rem; color: #dcdcda;
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; justify-content: flex-end;
}
.tb-name { white-space: nowrap; color: #fff; }
.rolle-pille {
  background: rgba(255,255,255,.14); color: #fff;
  border-radius: 999px; padding: .14rem .62rem; font-size: .7rem; font-weight: 600;
}
.app-ver { font-size: .7rem; opacity: .55; white-space: nowrap; }
.abmelden-oben {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--c1); font-weight: 700; font-size: .85rem; white-space: nowrap;
}
.abmelden-oben:hover { color: #fff; }
.burger {
  background: none; border: 0; color: #fff; font-size: 1.3rem;
  cursor: pointer; padding: .2rem .4rem; display: inline-flex;
  border-radius: 6px;
}
.burger:hover { background: rgba(255,255,255,.12); }

/* Objektwahl in der Topbar: das ist der Bezugsrahmen für fast jede Seite. */
.topbar-objekt { display: flex; align-items: center; gap: .45rem; }
.topbar-objekt select {
  width: auto; min-width: 200px; padding: .3rem .5rem; font-size: .86rem;
  border: 1px solid #5f5f5f; border-radius: 4px;
  background: #3f3f3f; color: #fff;
}
.topbar-objekt label { margin: 0; font-size: .72rem;
  letter-spacing: .04em; color: #cfcfcc; font-weight: 600; }

/* ============ Layout ============ */
/* Das Menü sitzt links (bewährt) und lässt sich über den Knopf einklappen. */
.layout { display: flex; min-height: calc(100vh - 50px); }

.sidebar {
  background: var(--menue-bg);
  border-right: 1px solid var(--border);
  width: 236px; flex-shrink: 0;
  padding: .9rem 0 2rem;
  display: block;
  overflow: visible;              /* die Pfeilnase des aktiven Punkts ragt heraus */
}
body.menue-zu .sidebar { display: none; }
.nav-gruppe { margin-bottom: .9rem; }
.nav-gruppe-titel {
  display: flex; align-items: center; gap: .5rem;
  font-size: .84rem; font-weight: 700;
  color: #3f3f3e; margin: 0 0 .15rem; padding: .4rem 1rem .25rem;
  border-bottom: 1px solid var(--border);
}
.sidebar a, .sidebar .abmelden-btn {
  position: relative;
  display: flex; align-items: center; gap: .6rem; width: 100%;
  color: #4a4a48; text-decoration: none; background: none; border: 0;
  padding: .5rem 1rem .5rem 1.15rem; border-radius: 0; font-size: .89rem; text-align: left;
  font-family: inherit; cursor: pointer;
  border-bottom: 1px solid #e8e8e4;
}
.nav-gruppe a:last-child { border-bottom: 0; }
.sidebar a svg, .sidebar .abmelden-btn svg { width: 17px; height: 17px; opacity: .7; flex-shrink: 0; }
.sidebar a:hover, .sidebar .abmelden-btn:hover { background: var(--menue-aktiv); color: var(--text); }
.sidebar a.aktiv {
  background: var(--c1);
  color: #fff; font-weight: 600;
  border-bottom-color: var(--c1);
}
.sidebar a.aktiv svg { opacity: 1; }
/* Die Pfeilnase des aktiven Eintrags zeigt in den Inhalt (wie beim Vorbild). */
.sidebar a.aktiv::after {
  content: ""; position: absolute; right: -9px; top: 50%; margin-top: -9px;
  border: 9px solid transparent; border-left-color: var(--c1); border-right: 0;
  z-index: 2;
}
.sidebar .abmelden-form { display: block; margin: 0; }

.inhalt { flex: 1; padding: 1.4rem; max-width: 1280px; min-width: 0; margin: 0 auto; width: 100%; }

@media (max-width: 899px) {
  .sidebar {
    display: none; position: fixed; top: 50px; bottom: 0; left: 0; z-index: 25;
    width: 242px; overflow-y: auto; box-shadow: var(--shadow);
  }
  body.nav-offen .sidebar { display: block; }
  .topbar-objekt label { display: none; }
  .topbar-objekt select { min-width: 130px; }
}

/* ============ Karten ============ */
.karte {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.15rem 1.3rem; margin-bottom: 1.15rem;
}
@media (max-width: 480px) { .karte { padding: 1.1rem 1rem; } }

/* ============ Kacheln ============ */
.kachel-raster {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.kachel {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem;
  padding: 1.3rem 1rem 1.15rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: #fcfcfb; text-decoration: none; color: var(--text);
  font-weight: 600; font-size: .93rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.kachel:hover { border-color: var(--c1); transform: translateY(-2px); box-shadow: var(--shadow); }
.kachel .ico {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c1) 8%, white); color: var(--c1);
}
.kachel .ico svg { width: 22px; height: 22px; }
.kachel .sub { font-weight: 400; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.kachel.fertig .ico { background: color-mix(in srgb, var(--ok) 10%, white); color: var(--ok); }
.kachel.offen { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }

/* ============ Kennzahlen ============ */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.kennzahl {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: .9rem 1.05rem;
}
.kennzahl .wert { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kennzahl .bezeichnung { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* ============ Meldungen ============ */
.meldung { border-radius: var(--radius-s); padding: .78rem 1.05rem; margin: 0 0 .9rem; font-size: .92rem; }
.meldung.erfolg  { background: #eef9f1; border: 1px solid #c4e8d0; color: #14532d; }
.meldung.fehler  { background: #fdf1f0; border: 1px solid #f3cbc6; color: #8c241c; }
.meldung.hinweis { background: #fdf6e7; border: 1px solid #f3e3bd; color: #845207; }
.meldung a { color: inherit; }

/* ============ Tabellen ============ */
.tabelle-huelle {
  overflow-x: auto; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-s);
}
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th {
  background: #fafaf8; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); font-weight: 700;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfbf9; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.summe td { font-weight: 700; background: #fafaf8; border-top: 2px solid var(--c1); }

/* ============ Formulare ============ */
form.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: .85rem; }
form.raster .voll { grid-column: 1 / -1; }
label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .22rem; }
.hilfe { font-weight: 400; color: var(--muted); font-size: .81rem; display: block; margin-top: .18rem; line-height: 1.4; }

/* Felder als unterstrichene Linien – wie im Vorbild. */
input[type=text], input[type=password], input[type=date], input[type=number],
select, textarea {
  width: 100%; padding: .42rem .1rem;
  border: 0; border-bottom: 1px solid var(--linie);
  border-radius: 0; font: inherit; background: transparent; color: var(--text);
}
textarea { border: 1px solid var(--linie); border-radius: var(--radius-s); padding: .5rem .6rem; background: #fff; }
input[type=file] {
  width: 100%; padding: .5rem .6rem; border: 1px dashed var(--linie);
  border-radius: var(--radius-s); font: inherit; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-bottom: 2px solid var(--c1); margin-bottom: -1px;
}
textarea:focus, input[type=file]:focus { border-color: var(--c1); margin-bottom: 0; border-bottom-width: 1px; }

button, .knopf {
  background: var(--c1); color: #fff; border: 0; padding: .5rem 1.3rem;
  border-radius: 3px; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-block; transition: background .12s ease;
}
button:hover, .knopf:hover { background: var(--c1-dunkel); }
button.zweit, .knopf.zweit { background: #e9e9e6; color: #4a4a48; border: 1px solid #d5d5d0; }
button.zweit:hover { background: #dededa; }
button.klein, .knopf.klein { padding: .3rem .8rem; font-size: .84rem; }
form.inline { display: inline; }

/* ============ Rechenweg ============ */
.rechenweg {
  background: #fafaf8; border-left: 3px solid var(--c2);
  padding: .55rem .85rem; margin: .3rem 0 0; font-size: .89rem;
  color: #3a4150; border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
details summary { cursor: pointer; font-weight: 600; padding: .25rem 0; }

.fuss { padding: 1rem 1.4rem 2rem; color: var(--muted); font-size: .82rem; }

/* ============ Anmeldung ============ */
.anmeldung { max-width: 400px; margin: 3.5rem auto; padding: 0 1.25rem; }
.anmeldung h1 { text-align: center; margin-bottom: 1.2rem; }

/* ============ Druck ============ */
@media print {
  .topbar, .sidebar, .fuss, .nicht-drucken, button, .knopf { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .layout { display: block; }
  .inhalt { max-width: none; padding: 0; }
  .karte { border: 0; box-shadow: none; padding: 0; margin-bottom: 1rem; page-break-inside: avoid; }
  .tabelle-huelle { border: 0; }
  tr { page-break-inside: avoid; }
  tbody tr:hover td { background: none; }
  .rechenweg { border-left: 2px solid #999; background: none; }
  a { text-decoration: none; color: inherit; }
}

/* Zeitraumauswahl innerhalb einer Seite (die Immobilie steht in der Topbar). */
.zeitraumwahl {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: .7rem .9rem; margin-bottom: 1.1rem;
}
.zeitraumwahl label { margin: 0; }
.zeitraumwahl select { width: auto; min-width: 240px; }

/* ============ Prüfbericht ============ */
.befund {
  border-left: 4px solid var(--border); padding: .55rem 0 .55rem .9rem;
  margin: 0 0 .9rem;
}
.befund:last-child { margin-bottom: 0; }
.befund p { margin: .2rem 0; }
.befund-fehler    { border-left-color: var(--danger); }
.befund-warnung   { border-left-color: var(--warn); }
.befund-statistik { border-left-color: var(--c2); }
.befund-hinweis   { border-left-color: #a8b4c4; }

/* ============ Sofortprüfung beim Eingeben ============ */
.sofortpruefung {
  margin-top: .35rem; padding: .55rem .8rem; border-radius: var(--radius-s);
  font-size: .87rem; line-height: 1.45; border: 1px solid var(--border); background: #fafaf8;
}
.sofortpruefung[data-status="ok"]         { border-color: #c4e8d0; background: #eef9f1; color: #14532d; }
.sofortpruefung[data-status="auffaellig"] { border-color: #f3e3bd; background: #fdf6e7; color: #845207; }
.sofortpruefung[data-status="stark"]      { border-color: #f3cbc6; background: #fdf1f0; color: #8c241c; }
.sofortpruefung[data-status="neu"],
.sofortpruefung[data-status="info"]       { border-color: #cdddf5; background: #eff4fc; color: #1e3f76; }
.sofortpruefung .jahre { margin-top: .3rem; font-variant-numeric: tabular-nums; opacity: .85; }
td.abw-auf   { background: #fdf6e7; }
td.abw-stark { background: #fdf1f0; font-weight: 600; }

/* ============ Assistent ============ */
.fortschritt {
  height: 10px; border-radius: 999px; background: var(--border);
  overflow: hidden; margin-top: .6rem;
}
.fortschritt span { display: block; height: 100%; background: var(--ok); transition: width .3s ease; }
.karte.schritt h2 { display: flex; align-items: center; gap: .6rem; }
.schritt-nr {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--c1) 10%, white); color: var(--c1);
  font-size: .85rem; font-weight: 700; flex: 0 0 auto;
}
.karte.schritt.fertig { border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); }
.karte.schritt.fertig .schritt-nr { background: color-mix(in srgb, var(--ok) 12%, white); color: var(--ok); }
/* Geführter Modus: erledigte und kommende Schritte als schmale Zeile, nur der
   aktuelle Schritt als volle Karte – nichts Falsches ist anklickbar. */
.karte.schritt.kompakt { padding-top: .55rem; padding-bottom: .55rem; }
.karte.schritt.kompakt h2 { margin: 0; font-size: .95rem; }
.karte.schritt.kompakt p { margin: .25rem 0 0 2.3rem; }
.karte.schritt.gesperrt { opacity: .55; background: color-mix(in srgb, var(--card) 60%, transparent); }
.karte.schritt.aktuell { border-color: var(--c1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c1) 25%, transparent); }

/* ============ Schnellerfassung (Handy) ============ */
.wahl-liste { display: flex; flex-direction: column; gap: .4rem; }
.wahl-gruppe {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: .7rem 0 .1rem; font-weight: 700;
}
.wahl {
  display: block; padding: .85rem 1rem; border: 1.5px solid var(--border);
  border-radius: var(--radius-s); text-decoration: none; color: var(--text);
  background: #fcfcfb;
}
.wahl:hover, .wahl:focus-visible { border-color: var(--c1); }
.wahl-titel { display: block; font-weight: 600; }
.wahl-unter { display: block; font-size: .82rem; color: var(--muted); margin-top: .1rem; }

/* Große Ziele fürs Handy */
form.raster.gross input[type=text], form.raster.gross input[type=date],
form.raster.gross input[type=file], form.raster.gross select {
  padding: .8rem .7rem; font-size: 1.05rem;
}
button.gross { padding: .9rem 1.6rem; font-size: 1.05rem; width: 100%; }
@media (min-width: 640px) { button.gross { width: auto; } }
form.raster.gross img[id$="vorschau"] {
  display: block; max-width: 100%; max-height: 320px; margin-top: .6rem;
  border-radius: var(--radius-s); border: 1px solid var(--border);
}

/* ============================================================
   Selbstablesung: Mieterseite, QR-Anzeige, Druckzettel
   ============================================================ */

/* --- Seite für den Mieter: nur eine Spalte, große Ziele --- */
.mieterseite { background: var(--bg); }
.mieter-inhalt { max-width: 640px; margin: 0 auto; padding: 1.2rem 1rem 2.5rem; }
.mieter-inhalt h1 { font-size: 1.3rem; }
.mieter-inhalt input[type="text"],
.mieter-inhalt input[type="date"] { font-size: 1.05rem; padding: .7rem .8rem; }
.mieter-inhalt button { width: 100%; padding: .9rem 1.6rem; font-size: 1.05rem; margin-top: .9rem; }
.mieter-fuss { margin-top: 1.4rem; text-align: center; }

/* --- Ein Zähler als abgesetzter Block --- */
.zaehlerkarte {
  border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: .9rem 1rem; margin: 1rem 0; background: var(--card);
}
.zaehlerkarte h2 { font-size: 1rem; margin-bottom: .3rem; }
.zaehlerkarte h3 { margin-top: 0; }
.zaehlerkarte p { margin: .25rem 0 .6rem; }

.ankreuz { display: flex; gap: .55rem; align-items: flex-start; margin: 1rem 0 0; font-weight: 400; }
.ankreuz input { width: auto; margin-top: .25rem; }

/* --- Felder nebeneinander, umbrechend --- */
.feldreihe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.feldreihe > span { flex: 1 1 8.5rem; min-width: 8.5rem; }
.feldreihe label { margin-bottom: .2rem; }

.aktionen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.aktionen form { margin: 0; }
.klein-link { font-size: .84rem; white-space: nowrap; }
input.voll, .voll { width: 100%; }

/* --- QR-Code mit Link daneben --- */
.qr-block { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-start; }
.qr-bild {
  flex: 0 0 auto; line-height: 0; padding: .5rem;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-s);
}
.qr-bild svg { display: block; width: 210px; height: auto; }
.qr-daten { flex: 1 1 16rem; min-width: 15rem; }

/* --- Druckbogen: ein Zettel je Wohnung --- */
.druckbogen { background: #fff; margin: 0; }
.druck-kopf { padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }
.zettel {
  display: flex; gap: 1.6rem; align-items: flex-start;
  padding: 1.6rem 1.4rem; margin: 0 auto; max-width: 19cm;
  border-bottom: 1px dashed #bbb; page-break-inside: avoid; break-inside: avoid;
}
.zettel-text { flex: 1 1 auto; }
.zettel-text h1 { font-size: 1.25rem; margin-top: 0; }
.zettel-wohnung { font-size: 1.05rem; line-height: 1.4; }
.zettel-zaehler { margin: .3rem 0 .8rem; padding-left: 1.2rem; }
.zettel-link { margin-top: 1rem; }
.zettel-url { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
              font-size: .82rem; word-break: break-all; }
.zettel-code { flex: 0 0 auto; line-height: 0; }
.zettel-code svg { display: block; width: 5.2cm; height: auto; }

@media print {
  .druckbogen .zettel { page-break-after: always; border-bottom: 0; }
  .druckbogen .zettel:last-child { page-break-after: auto; }
  .qr-bild { border: 0; padding: 0; }
}

@media (max-width: 560px) {
  .zettel { flex-direction: column; }
  .qr-block { flex-direction: column; }
}

/* ============================================================
   Objektsicht: Kacheln auf dem Brett, Hausansicht, Schnellknöpfe
   ============================================================ */

/* --- Objektkacheln auf der Startseite --- */
.objekt-brett {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.objekt-kachel {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem 1rem; position: relative; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.objekt-kachel:hover { transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(70,50,30,.06), 0 14px 32px -12px rgba(70,50,30,.20); }
.objekt-kachel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--c1);
}
.objekt-kachel h3 { margin: .2rem 0 .1rem; font-size: 1.02rem; }
.objekt-kachel .ok-ort { color: var(--muted); font-size: .84rem; margin: 0 0 .6rem; }
.objekt-kachel .ok-zahlen { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.objekt-kachel .ok-zahlen b { display: block; font-size: 1.15rem; color: var(--c1-dunkel); }
.objekt-kachel .ok-zahlen span { font-size: .74rem; color: var(--muted); }
.objekt-kachel .ok-hinweis { margin-top: .6rem; font-size: .8rem; color: var(--warn); }

/* --- Schnellknöpfe im Kopf der Startseite --- */
.schnellzeile { display: flex; gap: .7rem; flex-wrap: wrap; margin: 0 0 1.3rem; align-items: center; }
.schnellzeile .knopf { display: inline-flex; align-items: center; gap: .5rem; }
.schnellzeile svg { width: 17px; height: 17px; }
.schnellzeile .oder { color: var(--muted, #6d6d6a); font-size: .85rem; }

/* --- Hausansicht: Umriss mit Etagen und Einheiten --- */
.haus { max-width: 1000px; margin: 0 auto; }
.haus-dach {
  height: 56px; margin: 0 7%;
  background: linear-gradient(180deg, #b9b9b4, #a7a7a1);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.haus-korpus {
  border: 2px solid #d8d8d3; border-top: 0; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #ffffff, #f4f4f1);
  padding: .6rem .8rem .9rem; box-shadow: var(--shadow);
}
.etage { display: flex; align-items: stretch; gap: .6rem; padding: .5rem 0; }
.etage + .etage { border-top: 1px dashed #ddddd8; }
.etage-name {
  flex: 0 0 3.4rem; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--muted);
  text-transform: uppercase;
}
.etage-einheiten {
  flex: 1; display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}
.wohnung {
  display: block; text-decoration: none; color: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-s);
  background: #fff; padding: .6rem .75rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.wohnung:hover { border-color: var(--c1); box-shadow: 0 6px 16px -8px rgba(30,58,95,.35); }
.wohnung .w-titel { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.wohnung .w-titel b { font-size: .92rem; }
.wohnung .w-flaeche { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.wohnung .w-mieter { margin: .25rem 0 0; font-size: .84rem; }
.wohnung .w-seit { color: var(--muted); font-size: .76rem; }
.wohnung.leer { border-style: dashed; background: #fbfbf9; }
.wohnung.leer .w-mieter { color: var(--warn); font-weight: 600; }
.w-badge {
  display: inline-block; margin-top: .3rem; font-size: .7rem; font-weight: 700;
  background: var(--menue-aktiv); color: var(--c1-dunkel);
  border-radius: 999px; padding: .12rem .55rem;
}
.haus-fuss { text-align: center; margin-top: .6rem; }

/* --- Zweispaltige Objektseite: links das Haus, rechts die Verwaltung --- */
.objekt-spalten { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 1020px) { .objekt-spalten { grid-template-columns: 3fr 2fr; align-items: start; } }

/* Dachgeschoss: Wohnungen sitzen IM Dach. Sobald Wohnungen drin liegen, wird
   aus dem spitzen Dreieck ein Trapez mit waagerechtem First – die Karten
   bleiben vollständig in der flachen Zone (Seitenabstand > Schrägenbreite)
   und werden nicht mehr vom Giebel angeschnitten. */
.haus-dach:not([aria-hidden]) {
  position: relative; height: auto; padding: .75rem 24% .55rem;
  clip-path: polygon(0 100%, 20% 0, 80% 0, 100% 100%);
  background: linear-gradient(180deg, #c3c3be, #b0b0aa);
}
.haus-dach .etage-einheiten { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.haus-dach .wohnung { background: #fdfdfc; }

/* ============ Einklappbare Abschnitte mit Hilfetext ============
   Die Überschrift ist ein Etikett mit orangem Punkt auf einer Linie –
   die Abschnittsköpfe des Vorbilds („OBJEKTDATEN", „WOHNUNGEN" …). */
.abschnitt {
  background: var(--card); border: 0; margin-bottom: 1rem; overflow: visible;
}
.abschnitt > summary {
  cursor: pointer; list-style: none; padding: 0; margin: 0 0 .1rem;
  display: flex; align-items: center; gap: 0;
}
.abschnitt > summary::-webkit-details-marker { display: none; }
.abschnitt > summary > span {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--linie); border-radius: 999px;
  padding: .18rem .95rem .18rem .7rem; background: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #6d6d6a; white-space: nowrap;
}
.abschnitt > summary > span::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c1); flex: 0 0 auto;
}
.abschnitt > summary::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--linie); margin-left: -1px;
}
.abschnitt > summary:hover > span { border-color: var(--c1); color: var(--text); }
/* Handlungsbedarf: aus dem Punkt wird ein Ausrufezeichen, der Grund steht als
   Tooltip am Reiter (und für Vorleser als verborgener Text im Titel). */
.abschnitt.achtung > summary > span::before {
  content: "!"; width: 15px; height: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c1); color: #fff;
  font-size: .72rem; font-weight: 800; line-height: 1;
}
.abschnitt.achtung > summary > span { border-color: var(--c1); }
.nur-vorleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.abschnitt-inhalt { padding: .55rem .15rem 1rem; }

.hilfe-auf { margin: .5rem 0 .8rem; }
.hilfe-auf > summary {
  cursor: help; list-style: none; display: inline-block;
  font-size: .78rem; color: var(--c1-dunkel); font-weight: 600;
  border: 1px solid var(--border); border-radius: 999px; padding: .1rem .6rem;
}
.hilfe-auf > summary::-webkit-details-marker { display: none; }
.hilfe-auf[open] > summary { background: var(--menue-aktiv); }
.hilfe-auf > p {
  margin: .5rem 0 0; font-size: .85rem; color: var(--muted);
  border-left: 3px solid var(--c2); padding: .3rem 0 .3rem .7rem; max-width: 60ch;
}

/* Checkliste im Assistenten */
.checkliste { list-style: none; padding: 0; margin: .6rem 0 0; }
.checkliste li { padding: .35rem 0; border-bottom: 1px dashed var(--border); }
.checkliste li:last-child { border-bottom: 0; }
.checkliste label { display: flex; gap: .6rem; align-items: flex-start;
  font-weight: 400; cursor: pointer; }
.checkliste input { width: auto; margin-top: .3rem; flex: 0 0 auto; }

/* Postfach des Mieters */
.postfach { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.postfach li { padding: .45rem .6rem; border: 1px solid var(--border);
  border-radius: var(--radius-s); margin-bottom: .4rem; background: #fff; }

/* Jahresmatrix wie in der Excel-Mappe */
.jahresmatrix td.zahl, .jahresmatrix th.zahl { text-align: right; white-space: nowrap; }
.jahresmatrix .aktuell { background: #fdf3e9; }
.jahresmatrix .summenzeile td { border-top: 2px solid var(--border); }

/* ============ Verbrauchs-Kacheln auf der Mieterseite ============
   Eine Kachel je Zähler und je Mengen-Schlüssel (Restmüll, Biotonne …);
   ein Klick öffnet die Einzelwerte mit allen Jahren. */
.vkacheln { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.vkachel {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: .8rem .85rem .7rem; overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.vkachel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c1); }
.vkachel:hover { border-color: var(--c1); box-shadow: 0 8px 18px -10px rgba(60, 40, 20, .3); }
.vkachel .vk-name { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .3rem; }
.vkachel .vk-wert { display: block; font-size: 1.22rem; font-weight: 700; color: var(--c1-dunkel); }
.vkachel .vk-wert small { font-size: .72rem; font-weight: 600; color: var(--muted); margin-left: .3rem; }
.vkachel .vk-stand { display: block; font-size: .74rem; color: var(--muted); margin-top: .1rem; }
.vkachel.ohne .vk-wert { color: var(--muted); font-size: .95rem; font-weight: 600; }

/* ============ Prozessleiste des Abrechnungs-Assistenten ============
   Nummerierte Punkte mit Verbindungslinie: erledigt = orange gefüllt,
   der erste offene Schritt trägt „Sie sind hier". */
.prozess { display: flex; list-style: none; margin: 0; padding: .2rem 0 0; }
.prozess li { flex: 1 1 0; min-width: 0; position: relative; text-align: center; }
.prozess li::before {
  content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px;
  background: #e2e2dd;
}
.prozess li:first-child::before { display: none; }
.prozess li.fertig::before, .prozess li.hier::before { background: var(--c1); }
.prozess .p-glied { display: block; text-decoration: none; color: inherit; padding: 0 .25rem; }
.prozess li.gesperrt { opacity: .45; }
.prozess li.gesperrt span.p-glied { cursor: default; }
.prozess .p-punkt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 2px solid #d6d6d1; font-weight: 700; font-size: .82rem; color: var(--muted);
}
.prozess li.fertig .p-punkt { background: var(--c1); border-color: var(--c1); color: #fff; }
.prozess li.hier .p-punkt {
  border-color: var(--c1); color: var(--c1-dunkel);
  box-shadow: 0 0 0 4px rgba(239, 125, 34, .18);
}
.prozess .p-text { display: block; margin-top: .35rem; font-size: .73rem; line-height: 1.3; color: var(--text); }
.prozess li.hier .p-text { font-weight: 700; }
.prozess .p-hier {
  display: block; font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c1-dunkel); margin-top: .05rem;
}
@media (max-width: 720px) { .prozess .p-text, .prozess .p-hier { display: none; } }

/* ============ Jahresauswahl als Knöpfe (Rechnungen) ============ */
.jahrknoepfe { display: inline-flex; gap: .35rem; flex-wrap: wrap; vertical-align: middle; }
.jahrknoepfe a {
  display: inline-block; padding: .28rem .75rem; border: 1px solid var(--linie);
  border-radius: 999px; text-decoration: none; color: var(--text);
  font-size: .85rem; font-weight: 600; background: #fff; line-height: 1.4;
}
.jahrknoepfe a:hover { border-color: var(--c1); color: var(--c1-dunkel); }
.jahrknoepfe a.aktiv { background: var(--c1); border-color: var(--c1); color: #fff; }

/* ============ Immobilien-Knöpfe in der Kopfleiste ============
   Ein Knopf je Immobilie statt Aufklappliste; der aktive ist orange. */
.topbar-objekte { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; min-width: 0; }
.topbar-objekte a {
  display: inline-block; padding: .22rem .7rem; border-radius: 999px;
  border: 1px solid #6b6b6b; color: #e8e8e6; text-decoration: none;
  font-size: .8rem; font-weight: 600; white-space: nowrap; line-height: 1.4;
}
.topbar-objekte a:hover { border-color: var(--c1); color: #fff; }
.topbar-objekte a.aktiv { background: var(--c1); border-color: var(--c1); color: #fff; }
@media (max-width: 899px) {
  .topbar-objekte a { font-size: .72rem; padding: .18rem .55rem; }
}

/* ============ Aufklapp-Knopf: Formular erscheint erst nach Klick ============ */
details.klapp > summary { display: inline-block; cursor: pointer; list-style: none; }
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp[open] > summary { margin-bottom: .5rem; }

/* ============ Abrechnungsjahr in der Kopfleiste ============ */
.topbar-jahr {
  color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: .02em;
  background: rgba(255,255,255,.12); border-radius: 6px; padding: .1rem .55rem;
  white-space: nowrap;
}

/* Warn-Kachel: der 31.12.-Stand des Abrechnungsjahres fehlt noch. */
.vkachel.warnung { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.vkachel.warnung::before { background: var(--warn); }
.vkachel .vk-warn {
  position: absolute; top: .55rem; right: .6rem;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--warn); color: #fff; font-weight: 800; font-size: .85rem;
}
.vkachel .vk-stand b { color: var(--warn); }


/* ============ Kompakte Jahresmatrix: alle Spalten auf einen Blick ============ */
.jahresmatrix { font-size: .8rem; }
.jahresmatrix th, .jahresmatrix td { padding: .3rem .45rem; }
.jahresmatrix input { font-size: .8rem; padding: .15rem .3rem; }

/* Die gerade geöffnete Zeile in der Schlüsselliste – damit man beim Zurück-
   springen aus dem Bearbeiten-Formular sofort wiederfindet, wo man war. */
tr.hervor > td { background: var(--akzent-hell, #fff6e8); }

/* Die Ampel auf der Objekt-Kachel: was fehlt fürs Kopfjahr? */
.ok-ampel { margin-top: .5rem; font-size: .82rem; padding: .2rem .55rem;
            border-radius: 999px; display: inline-block; }
.ok-ampel.gruen { background: #e6f4ea; color: #1e6b34; }
.ok-ampel.gelb  { background: #fff3d6; color: #8a6100; }
.ok-ampel.rot   { background: #fde8e8; color: #a03030; }

/* ============================================================
   Übergabeprotokoll: eine Vorlage, die man ausdruckt und
   von Hand ausfüllt. Am Bildschirm sind die Eintragsfelder
   zart gelb, im Druck bleiben sie weiß mit Linie.
   ============================================================ */
.protokoll {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 1.6rem 1.7rem; max-width: 940px;
}
.pr-kopf { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start;
           border-bottom: 2px solid #333; padding-bottom: .7rem; margin-bottom: 1rem; }
.pr-titel { margin: 0 0 .35rem; font-size: 1.35rem; }
.pr-objekt { margin: 0; line-height: 1.45; }
.pr-vermieter { text-align: right; font-size: .86rem; line-height: 1.45; white-space: nowrap; }
.pr-klein { font-size: .8em; color: #6d6d6a; font-weight: 400; }
.pr-h3 { margin: 1.5rem 0 .5rem; font-size: 1.02rem; border-bottom: 1px solid #999;
         padding-bottom: .2rem; }
.pr-hinweis { font-size: .82rem; color: #555; margin: .45rem 0 0; }

.pr-daten { width: 100%; border-collapse: collapse; margin-bottom: .4rem; }
.pr-daten th, .pr-daten td { border: 1px solid #bbb; padding: .42rem .6rem;
                             text-align: left; vertical-align: top; font-size: .92rem; }
.pr-daten th { background: #f4f4f2; font-weight: 700; width: 17%; }

/* Feste Spaltenaufteilung: bei automatischer Breite richtet sich die
   Tabelle nach dem Inhalt und die Vorgaben unten wären wirkungslos –
   auf einem Formular zum Ausfüllen müssen die Spalten aber sitzen. */
.pr-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pr-tabelle th, .pr-tabelle td { overflow-wrap: anywhere; }
.pr-tabelle th { border: 1px solid #999; background: #f4f4f2; padding: .4rem .55rem;
                 text-align: left; font-size: .82rem; font-weight: 700; }
.pr-tabelle td { border: 1px solid #bbb; padding: .5rem .55rem; font-size: .9rem;
                 height: 1.9rem; vertical-align: top; }
/* Feld zum Handeintragen: am Bildschirm sichtbar markiert. */
.pr-eintrag { background: #fffdf0; }

.pr-linie { display: inline-block; min-width: 12rem; border-bottom: 1px solid #666;
            line-height: 1.5; }
.pr-linie.kurz { min-width: 4.5rem; }
.pr-linie.lang { min-width: 24rem; }

.pr-kasten { border: 1px solid #bbb; padding: .6rem .7rem; }
.pr-zeile { display: block; border-bottom: 1px solid #ccc; height: 1.6rem; }
.pr-zeile:last-child { border-bottom: 0; }

.pr-unterschriften { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.2rem; }
.pr-unterschriften > div { flex: 1 1 180px; font-size: .84rem; }
.pr-strich { display: block; border-bottom: 1px solid #333; margin-bottom: .3rem; height: 2.2rem; }

@media print {
  .protokoll { border: 0; padding: 0; max-width: none; }
  .pr-eintrag { background: none; }
  .pr-tabelle, .pr-daten { page-break-inside: auto; }
  .pr-tabelle tr, .pr-daten tr { page-break-inside: avoid; }
  .pr-h3 { page-break-after: avoid; }
  .pr-unterschriften { page-break-inside: avoid; }
}

/* ============================================================
   Startseite: jedes Haus als Haus, daneben die Lage für das Jahr
   ============================================================ */
.objekt-block {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.2rem 1.2rem; margin-bottom: 1.2rem;
}
.ob-kopf { display: flex; align-items: flex-start; justify-content: space-between;
           gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.ob-titel { margin: 0; font-size: 1.12rem; }
.ob-titel a { text-decoration: none; color: var(--text); }
.ob-titel a:hover { color: var(--c1-dunkel); }
.ob-unter { margin: .15rem 0 0; color: var(--muted); font-size: .87rem; }
.ob-unter strong { color: var(--warn); }

.ob-inhalt { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1060px) { .ob-inhalt { grid-template-columns: 3fr 2fr; } }

/* Kompaktes Haus: dieselbe Optik, nur kleiner – für die Übersicht. */
.haus.kompakt { max-width: none; }
.haus.kompakt .haus-dach { height: 34px; }
.haus.kompakt .haus-dach:not([aria-hidden]) { height: auto; padding: .5rem 22% .4rem; }
.haus.kompakt .haus-korpus { padding: .35rem .55rem .5rem; }
.haus.kompakt .etage { padding: .3rem 0; gap: .45rem; }
.haus.kompakt .etage-name { flex-basis: 2.7rem; font-size: .65rem; }
.haus.kompakt .etage-einheiten { gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.haus.kompakt .wohnung { padding: .4rem .5rem; }
.haus.kompakt .wohnung .w-titel b { font-size: .84rem; }
.haus.kompakt .wohnung .w-flaeche { font-size: .72rem; }
.haus.kompakt .wohnung .w-mieter { font-size: .78rem; margin-top: .15rem; }
.haus.kompakt .wohnung .w-seit { font-size: .7rem; }

/* Die Lage: was für das Kopfjahr noch zu tun ist – in Worten, nicht als Zahl. */
.lage-karte { border: 1px solid var(--border); border-left-width: 4px;
              border-radius: var(--radius-s); padding: .7rem .85rem; background: #fcfcfb; }
.lage-karte.gruen { border-left-color: var(--ok);     background: #f4faf6; }
.lage-karte.gelb  { border-left-color: var(--warn);   background: #fffdf5; }
.lage-karte.rot   { border-left-color: var(--danger); background: #fdf7f6; }
.lage-kopf { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.lage-punkt { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
              display: grid; place-items: center; color: #fff;
              font-weight: 800; font-size: .78rem; line-height: 1; margin-top: .12rem; }
.lage-karte.gruen .lage-punkt { background: var(--ok); }
.lage-karte.gelb  .lage-punkt { background: var(--warn); }
.lage-karte.rot   .lage-punkt { background: var(--danger); }
.lage-kopf .leise { font-size: .8rem; }

.lage-liste { list-style: none; margin: .7rem 0 0; padding: 0; }
.lage-liste li { border-top: 1px solid var(--border); padding: .35rem 0 .35rem 1.1rem;
                 position: relative; font-size: .86rem; }
.lage-liste li::before { content: ""; position: absolute; left: 0; top: .78rem;
                         width: 6px; height: 6px; border-radius: 50%; }
.lage-liste li.fehlt::before   { background: var(--danger); }
.lage-liste li.pruefen::before { background: var(--warn); }
.lage-liste a { text-decoration: none; color: var(--text); }
.lage-liste a:hover { color: var(--c1-dunkel); text-decoration: underline; }
.lage-mehr { margin: .5rem 0 0; font-size: .82rem; }

.lage-meldung {
  display: block; margin-bottom: .6rem; padding: .5rem .8rem;
  border-radius: var(--radius-s); background: #eef4fb; border: 1px solid #cfe0f2;
  color: #24557f; text-decoration: none; font-size: .86rem; font-weight: 600;
}
.lage-meldung:hover { background: #e4eefa; }

/* --- Spaltenbreiten des Übergabeprotokolls -----------------------------------
   Bewusst hier und nicht als style-Attribut: die Sicherheitsregel der
   Anwendung (Content-Security-Policy style-src 'self') verwirft Stile, die
   direkt im HTML stehen – sie hätten schlicht keine Wirkung. */
.pr-tabelle.t-zaehler th:nth-child(1) { width: 30%; }
.pr-tabelle.t-zaehler th:nth-child(2) { width: 16%; }
.pr-tabelle.t-zaehler th:nth-child(3) { width: 10%; }
.pr-tabelle.t-zaehler th:nth-child(4) { width: 20%; }
.pr-tabelle.t-zaehler th:nth-child(5) { width: 24%; }

.pr-tabelle.t-zaehler-leer th:nth-child(1) { width: 34%; }
.pr-tabelle.t-zaehler-leer th:nth-child(2) { width: 16%; }
.pr-tabelle.t-zaehler-leer th:nth-child(3) { width: 12%; }
.pr-tabelle.t-zaehler-leer th:nth-child(4) { width: 19%; }
.pr-tabelle.t-zaehler-leer th:nth-child(5) { width: 19%; }

.pr-tabelle.t-schluessel th:nth-child(1) { width: 46%; }
.pr-tabelle.t-schluessel th:nth-child(2) { width: 18%; }
.pr-tabelle.t-schluessel th:nth-child(3) { width: 36%; }

.pr-tabelle.t-raeume th:nth-child(1) { width: 22%; }
.pr-tabelle.t-raeume th:nth-child(2),
.pr-tabelle.t-raeume th:nth-child(3),
.pr-tabelle.t-raeume th:nth-child(4) { width: 26%; }

.pr-tabelle.t-maengel th:nth-child(1) { width: 22%; }
.pr-tabelle.t-maengel th:nth-child(2) { width: 48%; }
.pr-tabelle.t-maengel th:nth-child(3) { width: 30%; }

/* --- Kleine Helfer, die früher style-Attribute waren --- */
.auto-breit { width: auto; }
.karte-schmal { max-width: 560px; }
.abstand-oben { margin-top: 1.2rem; }
.abstand-links { margin-left: .4rem; }
/* Ein Dach ohne Dachwohnungen ist nur ein Giebel. */
.haus-dach.leer { height: 46px; }
.haus.kompakt .haus-dach.leer { height: 30px; }
.pr-tabelle.t-kaution th { width: 25%; }
.haus-leer { text-align: center; }
/* Endgültig löschen sieht anders aus als alles andere. */
.knopf.gefahr, button.gefahr { border-color: var(--danger); color: var(--danger); }
.knopf.gefahr:hover, button.gefahr:hover { background: var(--danger); color: #fff; }

/* Zählerzeile: Name und Maßeinheit direkt bearbeitbar. Die Breiten stehen hier
   und nicht als style-Attribut – die Content-Security-Policy verwirft Stile,
   die im HTML stehen. */
.feld-name    { width: 14rem; }
.feld-einheit { width: 4rem; }
.feld-datum { width: 9rem; }

/* ===================== Bauplatz: der Fortschritt als Haus =================
   Die Grafik selbst rechnet ihre Geometrie in app/lib/hausgrafik.php aus.
   Hier stehen nur Farben und Groessen - style-Attribute im HTML waeren
   wirkungslos, die Content-Security-Policy laesst nur eigene Stylesheets zu. */
.bauplatz { display: flex; align-items: center; gap: 1rem; }
.bauplatz-bild   { flex: 0 0 5.5rem; }
.bauplatz-text   { flex: 1 1 auto; min-width: 0; }
.bauplatz-spruch { margin: 0 0 .15rem; font-size: 1.05rem; }
.bauplatz-unter  { margin: 0 0 .45rem; }
.hausgrafik      { width: 100%; height: auto; display: block; }

.hg-grund       { fill: var(--linie); }
.hg-plan        { fill: none; stroke: var(--muted); stroke-width: 2;
                  stroke-dasharray: 6 5; stroke-linejoin: round; }
.hg-fundament   { fill: var(--muted); }
.hg-wand        { fill: var(--card); }
.hg-wandkante   { fill: none; stroke: var(--text); stroke-width: 2.5; }
.hg-dachstuhl   { fill: none; stroke: var(--text); stroke-width: 2.5;
                  stroke-linejoin: round; }
.hg-dach        { fill: var(--c1); stroke: var(--c1); stroke-width: 2.5;
                  stroke-linejoin: round; }
.hg-sparren     { stroke: var(--muted); stroke-width: 2; }
.hg-fenster     { fill: var(--bg); stroke: var(--text); stroke-width: 2.5; }
.hg-tuer        { fill: var(--muted); }
.hg-tuer-hell   { fill: var(--c1); }
.hg-schornstein { fill: var(--text); }

/* Bewusst OHNE Uebergang: das SVG wird bei jedem Aufruf neu gezeichnet, es gibt
   also keinen Zustandswechsel, an dem ein transition greifen koennte. */
.bauplatz-balken   { display: block; width: 100%; height: .4rem; }
.bauplatz-bahn     { fill: var(--linie); }
.bauplatz-fuellung { fill: var(--c1); }

/* Schmale Schirme: das Haus rueckt nach oben, der Text darunter - nebeneinander
   bliebe fuer beides zu wenig Platz. */
@media (max-width: 34rem) {
  .bauplatz { flex-direction: column; align-items: stretch; gap: .5rem; text-align: center; }
  .bauplatz-bild { flex: 0 0 auto; width: 5rem; margin: 0 auto; }
  .bauplatz-spruch { font-size: 1rem; }
}

/* Das Logo im Kopf. Stand vorher als style-Attribut am Element - die
   Content-Security-Policy (style-src 'self') verwirft solche Angaben, das
   Logo lief also die ganze Zeit ohne die gedachte Groesse. */
.marken-logo { height: 26px; width: auto; border-radius: 4px; }
.hg-traufe  { fill: var(--text); }
.hg-sprosse { stroke: var(--text); stroke-width: 1.6; }
.hg-klinke  { fill: var(--text); }

/* Die schraege Ansicht: was weiter weg liegt, wird dunkler gezeichnet - daran
   erkennt das Auge die Raumtiefe, ganz ohne Schatten oder Verlaeufe. */
.hg-wand-seite        { fill: var(--bg); stroke: var(--text); stroke-width: 2;
                        stroke-linejoin: round; }
.hg-fundament-seite   { fill: var(--text); opacity: .55; }
.hg-dach-seite        { fill: var(--c1-dunkel, #c1621a); stroke: var(--c1-dunkel, #c1621a);
                        stroke-width: 2; stroke-linejoin: round; }
.hg-dachstuhl-seite   { fill: none; stroke: var(--muted); stroke-width: 2;
                        stroke-linejoin: round; }
.hg-schornstein-seite { fill: var(--text); opacity: .6; }

/* --- Vorlagen für die Abrechnungsbriefe ---------------------------------- */
/* Links die Textbausteine, rechts der Brief. Unter 1000 px untereinander -
   auf dem Tablet liest sich die Vorschau sonst wie ein Streifen.            */
.vorlage-flaeche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
                   gap: 1.1rem; align-items: start; }
@media (max-width: 1000px) { .vorlage-flaeche { grid-template-columns: minmax(0, 1fr); } }

.vorlage-felder { background: var(--card); border: 1px solid var(--border);
                  border-radius: var(--radius); box-shadow: var(--shadow);
                  padding: 1rem 1.1rem; }
.vorlage-felder details.klapp { border-top: 1px solid var(--border); padding: .55rem 0 .2rem; }
.vorlage-felder details.klapp:first-of-type { border-top: 0; padding-top: 0; }
.vorlage-feld { margin: .1rem 0 .9rem; padding-left: .55rem;
                border-left: 3px solid var(--border); }
.vorlage-feld.eigen { border-left-color: var(--c1); }
.vorlage-feld label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.vorlage-feld textarea { width: 100%; font: inherit; font-size: .9rem; }
.vorlage-hilfe { margin: .2rem 0 0; line-height: 1.45; }
.vorlage-ph { background: var(--menue-bg); border-radius: var(--radius-s);
              padding: .02rem .28rem; margin-right: .2rem; font-size: .84em; }
.vorlage-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
                   margin-top: .6rem; }
.vorlage-titel { margin: 0 0 .2rem; }
.vorlage-zurueck { margin-top: .9rem; }

/* Das Blatt. Absichtlich nüchtern und nah am Word-Ausdruck: weiß, schmale
   Schrift, dieselben Grautöne und dasselbe Gelb wie im fertigen Brief.      */
.bv-blatt { background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
            box-shadow: var(--shadow); padding: 1.5rem 1.7rem; margin-bottom: 1rem;
            font-size: .82rem; line-height: 1.5; color: #000; }
.bv-blatt p { margin: 0 0 .55rem; }
.bv-ruecksende { font-size: .68rem; color: #666; border-bottom: 1px solid #ccc;
                 padding-bottom: .15rem; }
.bv-anschrift { margin-top: .5rem; }
.bv-rechts { text-align: right; color: #696969; font-size: .78rem; margin-top: 1.1rem; }
.bv-h1 { font-size: 1.05rem; font-weight: 700; margin-top: .9rem; }
.bv-h2 { font-size: .98rem; font-weight: 700; }
.bv-h3 { font-size: .88rem; font-weight: 700; margin-top: .9rem; }
.bv-klein { font-size: .72rem; color: #666; }
.bv-abstand { margin-top: 1rem; }
.bv-fehlt { font-size: .74rem; color: var(--warn); font-style: italic; }
.bv-balken { background: #808080; color: #fff; font-weight: 600; padding: .22rem .5rem;
             margin-top: .9rem; }

.bv-tab { width: 100%; border-collapse: collapse; font-size: .74rem; }
.bv-tab td { border: 1px solid #000; padding: .18rem .35rem; vertical-align: top; }
.bv-tab .bv-r { text-align: right; white-space: nowrap; }
.bv-tab tr.bv-kopf td { font-weight: 600; }
.bv-tab tr.bv-daten td { background: #ffffc0; }
.bv-tab tr.bv-summe td { background: #c0c0c0; }
.bv-tab tr.bv-ergebnis td { background: #808080; color: #fff; font-weight: 600; }

/* Der Löschbereich liegt zugeklappt hinter einer unauffälligen Zeile: wer
   endgültig löschen will, muss ihn erst aufklappen. Versehentlich kommt dort
   niemand mehr hin - stilllegen bleibt der sichtbare Normalfall.            */
.loeschfach { margin-top: .8rem; }
.loeschfach > summary { color: var(--muted); font-weight: 400; font-size: .87rem; }
.loeschfach > summary:hover { color: var(--danger); }
.abstand-unten { margin-bottom: 1rem; }

/* Auswahlfeld, das nur so breit ist wie sein Inhalt. Früher ein
   style-Attribut - das die Sicherheitsrichtlinie verwirft.               */
.feld-schmal { width: auto; }

/* Was man oben einstellt, hier in Klartext. Ohne JavaScript steht der
   Beispieltext aus dem HTML - falsch waere er nie, nur unspezifisch.       */
.erinnerung-vorschau {
  margin: .2rem 0 0;
  padding: .55rem .75rem;
  background: var(--menue-bg);
  border-left: 3px solid var(--c1);
  border-radius: var(--radius-s);
  font-size: .9rem;
}

/* Ein Paket auf der Update-Seite: Trennlinie und Knopfzeile. Beides stand
   frueher als style="…" im HTML und war damit wirkungslos – die
   Content-Security-Policy verwirft Stilattribute. */
.paket-zeile { border-top: 1px solid #ddd; padding: .6rem 0; }
.paket-knoepfe { margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem;
                 align-items: center; }