:root {
  --bg: #f4f5f7;
  --flaeche: #ffffff;
  --rand: #dfe3e8;
  --text: #1d2733;
  --leise: #66717f;
  --primaer: #1f4e79;
  --primaer-hell: #e8eff7;
  --gruen: #2e7d4f;
  --gruen-bg: #dcf1e3;
  --gelb: #8a6100;
  --gelb-bg: #fdf0c8;
  --orange: #a64b00;
  --orange-bg: #ffe3c7;
  --rot: #b3261e;
  --rot-bg: #fadbd8;
  --blau-bg: #dcebfb;
  --grau-bg: #eef0f3;
  --radius: 8px;
  --schatten: 0 1px 2px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; line-height: 1.45;
}
a { color: var(--primaer); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.55rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
.leise { color: var(--leise); }
.klein { font-size: .85rem; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }

/* Kopfzeile */
.kopf {
  background: var(--primaer); color: #fff; position: sticky; top: 0; z-index: 30;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.kopf-innen { display: flex; align-items: center; gap: 1rem; padding: 0 1rem; max-width: 1800px; margin: 0 auto; }
.logo { font-weight: 700; color: #fff; padding: .8rem 0; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.nav { display: flex; gap: .15rem; overflow-x: auto; flex: 1; scrollbar-width: none; }
.nav a { color: #d7e3f0; padding: .85rem .7rem; white-space: nowrap; border-bottom: 3px solid transparent; }
.nav a:hover { color: #fff; text-decoration: none; }
.nav a.aktiv { color: #fff; border-bottom-color: #8fc1ef; }
.suche input { border: 0; border-radius: 6px; padding: .4rem .6rem; width: 13rem; font: inherit; }
.kopf .rechts-menue { display: flex; gap: .75rem; align-items: center; white-space: nowrap; }
.kopf .rechts-menue a, .kopf .rechts-menue button { color: #d7e3f0; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }

main { max-width: 1800px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* Karten & Raster */
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--schatten); margin-bottom: 1rem; }
.raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.raster-2 { display: grid; gap: 1rem; grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) { .raster-2 { grid-template-columns: 1fr; } }
.kpis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1rem; }
.kpi { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--schatten); }
.kpi .wert { font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.kpi .label { color: var(--leise); font-size: .85rem; }
.balken { height: 6px; background: var(--grau-bg); border-radius: 3px; margin-top: .5rem; overflow: hidden; }
.balken span { display: block; height: 100%; background: var(--gruen); }

/* Tabellen */
table { border-collapse: collapse; width: 100%; }
th, td { padding: .45rem .55rem; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--leise); font-weight: 600; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.summe td { font-weight: 650; border-top: 2px solid var(--text); }
.tabelle-scroll { overflow-x: auto; }
tbody tr:hover { background: #fafbfc; }

/* Zahlungsmatrix */
.matrix-wrap { overflow: auto; max-height: calc(100vh - 210px); border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); }
.matrix { font-size: .86rem; }
.matrix th, .matrix td { border-bottom: 1px solid #edf0f3; padding: 0; }
.matrix thead th { position: sticky; top: 0; background: #f8f9fb; z-index: 5; padding: .5rem .4rem; text-align: center; border-bottom: 1px solid var(--rand); }
.matrix thead th.aktuell { background: var(--primaer-hell); color: var(--primaer); }
.matrix .fix { position: sticky; left: 0; background: var(--flaeche); z-index: 4; }
.matrix thead .fix { z-index: 6; background: #f8f9fb; text-align: left; }
.matrix td.fix { padding: .3rem .6rem; min-width: 250px; max-width: 300px; border-right: 1px solid var(--rand); }
.matrix .nr { font-weight: 600; display: inline-block; min-width: 4.8rem; }
.matrix .mietername { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.matrix .lage { color: var(--leise); font-size: .78rem; }
.matrix .matrix-hinweis { font-size: .76rem; color: var(--gelb); background: var(--gelb-bg); border-radius: 4px; padding: 0 .3rem; margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matrix tr.gruppe td { background: #eef2f7; font-weight: 650; padding: .45rem .6rem; position: sticky; left: 0; }
.matrix td.z { text-align: center; min-width: 62px; }
.matrix td.z a { display: block; padding: .5rem .2rem; color: inherit; font-variant-numeric: tabular-nums; }
.matrix td.z a:hover { text-decoration: none; outline: 2px solid var(--primaer); outline-offset: -2px; }
.matrix td.summe-spalte { text-align: right; padding: .5rem .6rem; font-variant-numeric: tabular-nums; white-space: nowrap; border-left: 1px solid var(--rand); }
.matrix tfoot td { position: sticky; bottom: 0; background: #f8f9fb; font-weight: 650; padding: .4rem; text-align: center; border-top: 2px solid var(--rand); font-variant-numeric: tabular-nums; font-size: .8rem; }
.matrix tfoot td.fix { text-align: left; z-index: 6; }
.matrix tfoot .diff-minus { color: var(--rot); }
.matrix tfoot .diff-plus { color: var(--gruen); }

.s-bezahlt { background: var(--gruen-bg); color: var(--gruen); }
.s-ueber { background: var(--blau-bg); color: var(--primaer); }
.s-teil { background: var(--orange-bg); color: var(--orange); font-weight: 600; }
.s-offen { background: var(--rot-bg); color: var(--rot); font-weight: 650; }
.s-faellig { background: var(--gelb-bg); color: var(--gelb); }
.s-erwartet { background: #fff; color: var(--leise); }
.s-zukunft { background: #fff; color: #a9b1bb; }
.s-leer { background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 4px, #f1f3f5 4px, #f1f3f5 8px); }

.legende { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .82rem; color: var(--leise); margin: .5rem 0 .8rem; }
.legende span::before { content: ""; display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; margin-right: .3rem; border: 1px solid rgba(0,0,0,.08); }
.legende .l-bezahlt::before { background: var(--gruen-bg); }
.legende .l-teil::before { background: var(--orange-bg); }
.legende .l-offen::before { background: var(--rot-bg); }
.legende .l-faellig::before { background: var(--gelb-bg); }
.legende .l-ueber::before { background: var(--blau-bg); }
.legende .l-leer::before { background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 3px, #e6e9ed 3px, #e6e9ed 6px); }

/* Abzeichen */
.badge { display: inline-block; font-size: .74rem; padding: .08rem .45rem; border-radius: 999px; background: var(--grau-bg); color: var(--leise); font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.badge.rot { background: var(--rot-bg); color: var(--rot); }
.badge.gelb { background: var(--gelb-bg); color: var(--gelb); }
.badge.gruen { background: var(--gruen-bg); color: var(--gruen); }
.badge.blau, .badge.s-ueber { background: var(--blau-bg); color: var(--primaer); }
.badge.s-bezahlt { background: var(--gruen-bg); color: var(--gruen); }
.badge.s-teil { background: var(--orange-bg); color: var(--orange); }
.badge.s-offen { background: var(--rot-bg); color: var(--rot); }
.badge.s-faellig { background: var(--gelb-bg); color: var(--gelb); }

/* Formulare & Knöpfe */
.knopf, button.knopf { display: inline-block; background: var(--primaer); color: #fff; border: 1px solid var(--primaer); border-radius: 6px; padding: .45rem .85rem; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.knopf:hover { text-decoration: none; filter: brightness(1.1); }
.knopf.zweit { background: var(--flaeche); color: var(--primaer); border-color: var(--rand); }
.knopf.gefahr { background: var(--flaeche); color: var(--rot); border-color: #f0c4c0; }
.knopf.klein { padding: .2rem .55rem; font-size: .85rem; }
.knopfleiste { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
form.inline { display: inline; }
.filterleiste { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.filterleiste select, .filterleiste input { padding: .4rem .5rem; border: 1px solid var(--rand); border-radius: 6px; font: inherit; background: #fff; }

.formular { max-width: 720px; }
.feld { margin-bottom: .85rem; }
.feld label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.feld input[type=text], .feld input[type=email], .feld input[type=number], .feld input[type=date], .feld input[type=password],
.feld input:not([type]), .feld select, .feld textarea { width: 100%; padding: .5rem .6rem; border: 1px solid #c9d0d8; border-radius: 6px; font: inherit; background: #fff; }
.feld input[type=checkbox] { width: 1.1rem; height: 1.1rem; vertical-align: -3px; margin-right: .3rem; }
.feld.checkbox label { display: inline; }
.feld .hilfe { color: var(--leise); font-size: .8rem; margin-top: .2rem; }
.feld .fehler, .fehlerliste { color: var(--rot); font-size: .85rem; }
.feld-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 .8rem; }

/* Meldungen */
.meldungen { list-style: none; padding: 0; margin: 0 0 1rem; }
.meldungen li { padding: .6rem .9rem; border-radius: 6px; margin-bottom: .4rem; background: var(--gruen-bg); color: var(--gruen); }
.meldungen li.error { background: var(--rot-bg); color: var(--rot); }
.meldungen li.info { background: var(--blau-bg); color: var(--primaer); }
.hinweis { background: var(--primaer-hell); border-left: 4px solid var(--primaer); padding: .6rem .9rem; border-radius: 6px; margin-bottom: 1rem; }

/* Definitionslisten */
dl.daten { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.daten dt { color: var(--leise); }
dl.daten dd { margin: 0; }

.hinweis-text { color: var(--gelb); margin-top: .2rem; }
table.konto td { font-size: .9rem; }
tr.storniert td { color: var(--leise); }
tr.storniert td.zahl { text-decoration: line-through; }
table.protokoll td { font-size: .86rem; }

/* Zeitleiste */
.zeitleiste { list-style: none; padding: 0; margin: 0; }
.zeitleiste li { padding: .5rem 0; border-bottom: 1px solid var(--rand); display: flex; gap: .7rem; }
.zeitleiste .datum { color: var(--leise); min-width: 5.5rem; font-variant-numeric: tabular-nums; }

/* Dokumente */
.doks { list-style: none; padding: 0; margin: 0; }
.doks li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--rand); }
.ablage { border: 2px dashed #c9d0d8; border-radius: var(--radius); padding: .8rem; background: #fafbfc; }
.ablage.drueber { border-color: var(--primaer); background: var(--primaer-hell); }

/* Anmeldung */
.anmelde-box { max-width: 380px; margin: 10vh auto; }

@media (max-width: 700px) {
  html { font-size: 14px; }
  .suche { display: none; }
  .kopf-innen { gap: .5rem; }
  .matrix td.fix { min-width: 170px; max-width: 190px; }
  .matrix .lage { display: none; }
}
@media print {
  .kopf, .knopfleiste, .filterleiste, .meldungen { display: none !important; }
  main { padding: 0; }
  .matrix-wrap { max-height: none; overflow: visible; border: 0; }
  .karte { box-shadow: none; }
}