/* Oberfläche der Buchhaltung: Menü links in dunklem Petrol, warme helle Fläche, abgerundete Karten mit
   leichtem Schatten, Akzent Petrol, Hinweise in Bernstein.
   Baut auf den Stilen des Django-Admins auf und überschreibt dessen Variablen. */

:root {
  --blau: #0e7c86;          /* Akzent Petrol */
  --blau-dunkel: #095f67;
  --blau-hell: #e3f3f3;
  --orange: #d9822b;        /* Bernstein für Hinweise */
  --gruen: #2f9e62;
  --rot: #c8402f;
  --gelb-flaeche: #e9f4f3;
  --gelb-rand: #cfe6e3;
  --leiste: #10303a;
  --leiste-kopf: #10303a;
  --leiste-text: #d6e4e6;
  --leiste-leise: #7fa1a8;
  --leiste-aktiv: #1b4552;
  --flaeche: #f5f4f0;
  --karte: #ffffff;
  --rand: #e4e2dc;
  --grau-knopf: #e8eeee;
  --text: #1c2a30;
  --text-leise: #66767c;
  --radius: 12px;
  --schatten: 0 1px 2px rgba(16, 48, 58, .05), 0 2px 8px rgba(16, 48, 58, .05);

  --primary: var(--blau);
  --secondary: var(--blau);
  --accent: var(--blau);
  --primary-fg: #fff;
  --body-fg: var(--text);
  --body-bg: var(--karte);
  --body-quiet-color: var(--text-leise);
  --body-medium-color: #3b4557;
  --body-loud-color: #0d1320;
  --header-color: var(--text);
  --header-branding-color: var(--text);
  --header-bg: var(--karte);
  --header-link-color: var(--text);
  --breadcrumbs-fg: var(--text-leise);
  --breadcrumbs-link-fg: var(--text-leise);
  --breadcrumbs-bg: transparent;
  --link-fg: var(--blau);
  --link-hover-color: var(--blau-dunkel);
  --link-selected-fg: var(--blau-dunkel);
  --hairline-color: #edf0f5;
  --border-color: #d3dae5;
  --error-fg: var(--rot);
  --message-success-bg: #e6f5ee;
  --message-warning-bg: #fff4e0;
  --message-error-bg: #fdecec;
  --darkened-bg: #f7f9fc;
  --selected-bg: #e6eefb;
  --selected-row: #eef4fd;
  --button-fg: #fff;
  --button-bg: var(--blau);
  --button-hover-bg: var(--blau-dunkel);
  --default-button-bg: var(--blau);
  --default-button-hover-bg: var(--blau-dunkel);
  --close-button-bg: #8a94a6;
  --close-button-hover-bg: #5f6b7d;
  --delete-button-bg: var(--rot);
  --delete-button-hover-bg: #a61e1e;
  --object-tools-fg: var(--blau);
  --object-tools-bg: var(--blau-hell);
  --object-tools-hover-bg: #d4e5fa;
  --font-family-primary: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

html, body { background: var(--flaeche); }
body { font-size: 15px; color: var(--text); }
svg { width: 18px; height: 18px; flex: none; }

/* ---------- Grundgerüst ---------- */

#container {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
  height: auto;
  min-width: 0;
  padding: 0;
  background: linear-gradient(to right, var(--leiste) 264px, var(--flaeche) 264px);
}
#container:not(:has(.seitenleiste)) { grid-template-columns: minmax(0, 1fr); background: var(--flaeche); }
.menue-schalter { display: none; }

.seitenleiste {
  background: var(--leiste);
  color: var(--leiste-text);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 0 12px 24px;
  box-sizing: border-box;
  z-index: 30;
  background: linear-gradient(180deg, #123844 0%, #0d2830 100%);
}
.leistenkopf {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 22px; padding: 10px;
  border-radius: 12px; background: rgba(255, 255, 255, .06);
}
.marke-feld { display: flex; align-items: center; justify-content: center; flex: none; }
.marke-feld .marke-zeichen { width: 38px; height: 38px; }
.kanzlei { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; }
.kanzlei small { color: var(--leiste-leise); font-size: 12px; }
.kanzlei span { color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zahnrad-menue { position: relative; display: flex; align-items: center; }
.zahnrad { list-style: none; cursor: pointer; color: var(--leiste-leise); display: flex; padding: 6px; border-radius: 50%; }
.zahnrad::-webkit-details-marker { display: none; }
.zahnrad:hover, .zahnrad.aktiv, .zahnrad-menue[open] .zahnrad { color: #fff; }
.aufklapp {
  position: fixed;  /* nicht von der scrollbaren Seitenleiste abschneiden lassen */
  top: 70px;
  left: 200px;
  z-index: 60;
  width: 270px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
  padding: 14px 0 10px;
}
.aufklapp-titel { color: var(--text-leise); font-size: 12.5px; font-weight: 600; padding: 4px 22px 8px; }
.aufklapp a, .aufklapp button {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 8px 22px; color: var(--text); font-size: 15px; text-decoration: none;
  background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left;
}
.aufklapp a:hover, .aufklapp button:hover { background: var(--blau-hell); color: var(--blau-dunkel); }
.aufklapp svg { color: var(--text-leise); }
.aufklapp hr { border: 0; border-top: 1px solid var(--rand); margin: 10px 0; }
.aufklapp form { margin: 0; }

.seitenleiste nav { padding: 0; }
.seitenleiste ul { list-style: none; margin: 0 0 4px; padding: 0; }
.seitenleiste li { list-style: none; padding: 0; }
.seitenleiste li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--leiste-text);
  font-size: 14.5px;
  text-decoration: none;
  line-height: 1.3;
}
.seitenleiste li a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.seitenleiste li a.aktiv { color: #10303a; background: #e7f3f2; font-weight: 600; }
.seitenleiste li a.aktiv svg { color: var(--blau); }
.seitenleiste li a svg { width: 19px; height: 19px; opacity: .9; }
.menue-ueberschrift {
  margin: 18px 12px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--leiste-leise);
}
.zaehler {
  margin-left: auto;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
}

.marke { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; text-decoration: none; letter-spacing: -.01em; }
.marke:link, .marke:visited { color: inherit; }
.marke-zeichen { width: 30px; height: 30px; }

.hauptbereich { display: flex; flex-direction: column; min-width: 0; }

/* Kopfzeile */
#header.kopfzeile {
  display: flex;
  align-items: center;
  gap: 16px;
  height: auto;
  min-height: 60px;
  padding: 0 28px;
  background: var(--karte);
  color: var(--text);
  border-bottom: 1px solid var(--rand);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 20;
}
#container:has(.seitenleiste) #header.kopfzeile { display: none; }
#header #branding { display: flex; margin: 0; }
#header #site-name { font-size: 17px; font-weight: 700; color: var(--text); }
#header .pfad { flex: 1; min-width: 0; }
div.breadcrumbs {
  background: none;
  padding: 0;
  border: 0;
  color: var(--text-leise);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.breadcrumbs a:link, div.breadcrumbs a:visited { color: var(--text-leise); }
div.breadcrumbs a:hover { color: var(--blau); }
#user-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  padding: 0;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-leise);
  white-space: nowrap;
}
#user-tools .benutzer { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
#header #user-tools a:link, #header #user-tools a:visited { color: var(--text-leise); border: 0; text-decoration: none; }
#header #user-tools a:hover { color: var(--blau); text-decoration: none; }
#logout-form { display: inline; }
#header #logout-form button {
  border: 1px solid var(--border-color);
  background: var(--karte);
  color: var(--text);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 13px;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
#header #logout-form button:hover { border-color: var(--blau); color: var(--blau); }
.menue-knopf { display: none; cursor: pointer; color: var(--text); }
.menue-knopf svg { width: 24px; height: 24px; }

/* Inhalt */
#container > .hauptbereich > .main { flex: 1; display: block; }
.main > .content { padding: 0; }
#content { padding: 30px 34px 48px; max-width: 1500px; box-sizing: border-box; }
.dashboard #content { width: auto; max-width: 1500px; }
#content h1 { font-size: 28px; font-weight: 700; color: var(--text); margin: 4px 0 24px; letter-spacing: -.01em; line-height: 1.2; }
#content h2 { font-size: 16px; }
#footer { padding: 0; }

/* Meldungen */
ul.messagelist { margin: 20px 28px 0; padding: 0; }
ul.messagelist li {
  border-radius: 8px;
  padding: 11px 14px 11px 40px;
  margin: 0 0 8px;
  background-position: 14px 13px;
  color: var(--text);
  font-size: 14px;
}
ul.messagelist li.success { background-color: var(--message-success-bg); }
ul.messagelist li.warning { background-color: var(--message-warning-bg); }
ul.messagelist li.error { background-color: var(--message-error-bg); }
.errornote { border-radius: 8px; border: 1px solid #f3c2c2; background: var(--message-error-bg); }

/* ---------- Bausteine ---------- */

.module, .karte, fieldset.module {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.module { overflow: hidden; margin-bottom: 20px; }
.module h2, .module caption, .inline-group h2 {
  background: var(--karte);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rand);
}
fieldset.module { padding: 0; }

/* Knöpfe */
.button, input[type=submit], input[type=button], .submit-row input, a.button, button.button {
  background: var(--blau);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover, a.button:hover { background: var(--blau-dunkel); color: #fff; }
.button.default, input[type=submit].default, .submit-row input.default { background: var(--blau); }
a.button.zweitrangig, .button.zweitrangig {
  background: var(--karte);
  color: var(--text);
  border: 1px solid var(--border-color);
}
a.button.zweitrangig:hover { border-color: var(--blau); color: var(--blau); background: var(--karte); }
.submit-row {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 20px;
}
.submit-row a.deletelink { border-radius: 8px; padding: 9px 16px; height: auto; }
.submit-row a.closelink { border-radius: 8px; padding: 9px 16px; height: auto; }

/* Eingabefelder */
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=tel],
input[type=search], input[type=date], textarea, select, .vTextField {
  border: 1px solid var(--border-color);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 14px;
  background: #fff;
  color: var(--text);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blau-hell); border-color: var(--blau); }
select { height: auto; }
.form-row { padding: 12px 16px; border-bottom: 1px solid var(--hairline-color); }
.aligned label { color: var(--text-leise); font-weight: 600; }
.help, p.help, form p.help, div.help { color: var(--text-leise); font-size: 12px; }

/* Objektwerkzeuge (z. B. „Hinzufügen“) */
.object-tools { margin-top: -54px; }
.object-tools a:link, .object-tools a:visited {
  border-radius: 8px;
  background: var(--blau);
  color: #fff;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.object-tools a:hover { background: var(--blau-dunkel); }
.object-tools a.addlink { background-image: none; padding-left: 14px; }
.object-tools a.addlink::before { content: "+ "; }

/* ---------- Listen ---------- */

#changelist.module { background: none; border: 0; box-shadow: none; overflow: visible; }
#changelist { display: flex; gap: 20px; align-items: flex-start; }
#changelist .changelist-form-container { flex: 1; min-width: 0; }
#changelist-filter {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  flex: 0 0 230px;
  order: 1;
  align-self: flex-start;
  margin: 0;
}
#changelist-filter h2 { background: none; color: var(--text); font-size: 14px; text-transform: none; padding: 14px 16px 6px; border: 0; }
#changelist-filter h3 { font-size: 12px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .05em; margin: 14px 16px 4px; }
#changelist-filter details summary { font-size: 12px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .05em; padding: 0 16px; }
#changelist-filter ul { padding: 0 8px; border: 0; margin: 4px 0 10px; }
#changelist-filter li { padding: 0; }
#changelist-filter a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--text); }
#changelist-filter a:hover { background: var(--darkened-bg); color: var(--blau); }
#changelist-filter li.selected a { background: var(--blau-hell); color: var(--blau-dunkel); font-weight: 600; }
#changelist-filter li.selected { border: 0; padding-left: 0; margin-left: 0; }
#changelist-filter #changelist-filter-extra-actions { padding: 0 8px 10px; margin: 0; border-bottom: 1px solid var(--hairline-color); }
#changelist-filter #changelist-filter-extra-actions h3 { margin: 0; }
#changelist-filter #changelist-filter-extra-actions a {
  display: block;
  padding: 4px 8px 4px 26px;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-leise);
  background-position: 8px center;
}

#changelist .toplinks, #changelist .xfull, .xfull { background: none; border: 0; }
#toolbar {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  padding: 12px 16px;
  margin: 0;
}
#toolbar form input[type=text] { width: 300px; max-width: 100%; }
#toolbar form #searchbar { height: auto; padding: 7px 10px; }
#toolbar form input[type=submit] { padding: 7px 14px; }
#changelist .actions {
  background: var(--darkened-bg);
  border: 1px solid var(--rand);
  border-bottom: 0;
  padding: 10px 16px;
  color: var(--text-leise);
  box-sizing: border-box;
  width: 100%;
}
#changelist .actions select { padding: 6px 8px; }
#changelist .actions .button { padding: 6px 12px; font-size: 13px; }
.xfull, .date-hierarchy-wrapper { margin: 0; }
#changelist nav.toplinks, .toplinks {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-bottom: 0;
  padding: 10px 16px;
  margin: 0;
}
#changelist .results {
  background: var(--karte);
  border: 1px solid var(--rand);
  overflow-x: auto;
  box-sizing: border-box;
}
#result_list { width: 100%; }
#result_list th.column-betrag, #result_list th.column-brutto, #result_list th.column-netto,
#result_list th.column-zahlbetrag, #result_list th.column-zahllast { text-align: right; }
#changelist-search input[type=submit] { background: var(--karte); color: var(--text); border: 1px solid var(--border-color); }
#changelist .paginator {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 12px 16px;
  margin: 0 0 20px;
  color: var(--text-leise);
  line-height: 1.6;
}
.paginator a:link, .paginator a:visited { background: var(--blau-hell); color: var(--blau-dunkel); border-radius: 6px; padding: 3px 8px; }
.paginator .this-page { padding: 3px 8px; }

/* Tabellen allgemein */
table { border-color: var(--rand); }
thead th, tfoot td {
  background: var(--darkened-bg);
  color: var(--text-leise);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--rand);
  border-top: 0;
  padding: 10px 12px;
}
thead th a:link, thead th a:visited { color: var(--text-leise); }
td, th { border-bottom: 1px solid var(--hairline-color); padding: 10px 12px; font-size: 14px; vertical-align: middle; }
#result_list tbody tr:hover td, #result_list tbody tr:hover th { background: #f8fafd; }
#result_list tbody tr.selected td, #result_list tbody tr.selected th { background: var(--selected-row); }
#result_list th a { font-weight: 600; }
td.field-betrag, td.field-brutto, td.field-netto, td.field-zahlbetrag, td.field-zahllast, td.zahl, th.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th { text-align: left; }
.tabelle th.zahl { text-align: right; }
.tabellen-rahmen { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.tabelle td { font-size: 13.5px; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle td a { color: var(--text); }
.tabelle td a:hover { color: var(--blau); }

/* Auswertungstabellen (BWA, EÜR) als Karte */
table.bwa, table.euer {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
table.bwa td, table.euer td { font-variant-numeric: tabular-nums; }

/* ---------- Übersicht ---------- */

.schnellzugriff { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 22px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
a.kachel {
  display: block;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 16px 18px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
a.kachel:hover { border-color: #bcd3f2; box-shadow: 0 4px 14px rgba(20, 33, 61, .08); color: var(--text); }
a.kachel.hinweis { border-left: 4px solid var(--orange); }
.kachel-titel { display: flex; align-items: center; gap: 8px; color: var(--text-leise); font-size: 13px; font-weight: 600; }
.kachel-titel svg { color: var(--blau); }
.kachel-wert { font-size: 24px; font-weight: 700; margin: 10px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kachel-wert.leer { color: var(--text-leise); }
.kachel-hinweis { font-size: 12.5px; color: var(--text-leise); }

.raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
.karte { padding: 18px 20px; min-width: 0; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#content .karte-kopf h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); background: none; padding: 0; }
.karte-kopf a { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; text-decoration: none; }
.karte-kopf a svg { width: 15px; height: 15px; }
.karte p.leer { color: var(--text-leise); margin: 4px 0; }
.fussnote { display: flex; align-items: center; gap: 6px; color: var(--text-leise); font-size: 12px; margin: 14px 0 0; }
.fussnote svg { width: 14px; height: 14px; }

.ergebniszeile { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-bottom: 18px; }
.ergebniszeile > div { display: flex; flex-direction: column; color: var(--text-leise); font-size: 13px; }
.ergebniszeile .bezeichnung { display: flex; align-items: center; }
.ergebniszeile strong { color: var(--text); font-size: 20px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.ergebniszeile small { font-size: 12px; margin-top: 2px; }
.legende { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legende.einnahmen { background: var(--blau); }
.legende.ausgaben { background: var(--orange); }
.negativ, .ergebniszeile strong.negativ { color: var(--rot); }

.balken { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.monat { display: flex; flex-direction: column; align-items: stretch; cursor: default; }
.saeulen {
  height: 180px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  border-bottom: 1px solid var(--rand);
  border-radius: 6px 6px 0 0;
}
.monat:hover .saeulen { background: var(--darkened-bg); }
.saeule { width: 38%; max-width: 16px; border-radius: 4px 4px 0 0; }
.saeule.einnahmen { background: var(--blau); }
.saeule.ausgaben { background: var(--orange); }
.monatsname { font-size: 11.5px; color: var(--text-leise); text-align: center; padding-top: 6px; }

.kontenliste { list-style: none; margin: 0; padding: 0; }
.kontenliste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline-color); list-style: none; }
.kontenliste li:last-child { border-bottom: 0; }
.kontenliste li div { display: flex; flex-direction: column; min-width: 0; }
.kontenliste small { color: var(--text-leise); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kontenliste .betrag { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.linkliste { list-style: none; margin: 0; padding: 0; }
.linkliste li { list-style: none; padding: 0; }
.linkliste a { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 7px; color: var(--text); text-decoration: none; }
.linkliste a:hover { background: var(--darkened-bg); color: var(--blau); }
.linkliste svg { color: var(--blau); }

/* ---------- Anmeldung ---------- */

html:has(body.login), body.login { background: linear-gradient(160deg, #14213d 0%, #1f3a6b 100%); min-height: 100vh; }
body.login { margin: 0; padding: 12vh 0 40px; box-sizing: border-box; }
.login #container {
  display: block;
  background: var(--karte);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  width: 380px;
  max-width: calc(100% - 32px);
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
}
.login .hauptbereich { display: block; }
.login #header.kopfzeile { position: static; justify-content: center; border: 0; padding: 30px 32px 0; min-height: 0; background: none; }
.login #header .pfad { display: none; }
.login #header #branding .marke { flex-direction: column; gap: 12px; font-size: 20px; }
.login .marke-zeichen { width: 44px; height: 44px; }
.login #content { padding: 18px 32px 30px; width: auto; }
.login .form-row { padding: 6px 0; border: 0; }
.login .form-row label { display: block; font-weight: 600; color: var(--text-leise); padding: 0 0 5px; font-size: 13px; }
.login .form-row input { width: 100%; box-sizing: border-box; padding: 10px 12px; }
.login .submit-row { background: none; border: 0; padding: 12px 0 0; margin: 0; }
.login .submit-row input { width: 100%; justify-content: center; padding: 11px; font-size: 15px; }
.login .password-reset-link { text-align: center; }

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 1100px) {
  .raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  #container { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste {
    display: none;
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    z-index: 50;
    box-shadow: 0 0 40px rgba(0, 0, 0, .3);
  }
  #container:has(#menue-schalter:checked) .seitenleiste { display: block; }
  .menue-knopf { display: inline-flex; }
  #container:has(.seitenleiste) #header #branding { display: flex; }
  #header .pfad { display: none; }
  #header.kopfzeile { padding: 0 16px; flex-direction: row; justify-content: flex-start; height: 60px; }
  #container, #container:has(.seitenleiste) { background: var(--flaeche); }
  .login #header.kopfzeile { height: auto; justify-content: center; }
  #user-tools .benutzer, #user-tools > a { display: none; }
  #content { padding: 20px 16px 32px; }
  ul.messagelist { margin: 16px 16px 0; }
  #changelist { flex-direction: column; }
  #changelist-filter { flex: none; width: 100%; order: 0; }
  .object-tools { margin-top: 0; float: none; }
  .balken { gap: 3px; }
  .monatsname { font-size: 10px; }
  .tabelle .nebensache { display: none; }
}

/* ---------- Bausteine im Stil von BuchhaltungsButler ---------- */

.seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
a.button.grau, .button.grau {
  background: var(--blau);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  padding: 11px 18px;
}
a.button.grau:hover, .button.grau:hover { background: var(--blau-dunkel); color: #fff; }

.abschnitt-titel {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  margin: 28px 0 10px;
}
.abschnitt-titel:first-child { margin-top: 0; }

/* Zeilen mit Symbol, Name, Anzahl und Pfeil (Belegverwaltung, Aufgaben) */
ul.zeilenliste {
  list-style: none; margin: 0; padding: 0; background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden;
}
ul.zeilenliste li { list-style: none; padding: 0; border-bottom: 1px solid var(--rand); }
ul.zeilenliste li:last-child { border-bottom: 0; }
ul.zeilenliste a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  color: var(--text);
  text-decoration: none;
}
ul.zeilenliste a:hover { background: #f8faf9; }
ul.zeilenliste li.eingerueckt a { padding-left: 50px; }
ul.zeilenliste svg { width: 20px; height: 20px; color: var(--blau); }
ul.zeilenliste strong { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; }
ul.zeilenliste .nebenangabe { color: var(--text-leise); font-size: 14px; }
ul.zeilenliste .anzahl { color: var(--text-leise); white-space: nowrap; min-width: 90px; text-align: right; }
ul.zeilenliste .anzahl.hinweis { color: var(--orange); font-weight: 700; }
ul.zeilenliste svg.pfeil, .los svg, .hinweis-kasten svg.pfeil { color: var(--blau); }
.los { display: inline-flex; align-items: center; gap: 6px; color: var(--blau); white-space: nowrap; }

/* Einstellungen: schlichte Linkliste */
ul.einstellungen { list-style: none; margin: 0; padding: 0; }
ul.einstellungen li { list-style: none; padding: 7px 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
ul.einstellungen a { font-size: 15px; font-weight: 600; text-decoration: none; }
ul.einstellungen span { color: var(--text-leise); font-size: 13.5px; }

/* Startseite */
.startseite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.startseite .spalte > section { margin-bottom: 28px; }
.startseite ul.zeilenliste a { padding: 16px 22px; }
.aufgaben .grosszahl {
  font-size: 15px; font-weight: 700; min-width: 34px; height: 34px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: #fbefe2; color: var(--orange); padding: 0 6px; box-sizing: border-box;
}
.hinweis-karte {
  position: relative;
  background: linear-gradient(135deg, #e6f3f2 0%, #f3f8f6 100%);
  border: 1px solid var(--gelb-rand);
  border-radius: var(--radius);
  padding: 24px 24px 20px;
}
#content .hinweis-karte h2 { font-size: 22px; font-weight: 700; margin: 6px 0 6px; padding: 0; background: none; color: var(--text); }
.hinweis-karte p { margin: 0 0 22px; font-size: 16px; }
.hinweis-karte .schliessen {
  position: absolute; top: 12px; right: 12px; border: 0; background: none; cursor: pointer;
  color: var(--text-leise); font-size: 13px; font-family: inherit; display: inline-flex; align-items: center; gap: 4px;
}
.hinweis-karte .schliessen svg { width: 15px; height: 15px; }
.hinweis-links { list-style: none; margin: 0 0 18px; padding: 0; }
.hinweis-links li { list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 16px; }
.hinweis-links a:first-child { color: var(--text); font-weight: 600; text-decoration: none; }
.hinweis-links a.los { color: var(--blau); }
a.hinweis-kasten {
  display: flex; align-items: center; gap: 14px; margin-top: 12px;
  background: #fff; border-radius: 10px; padding: 14px 18px; color: var(--text); text-decoration: none; font-size: 15px;
}
a.hinweis-kasten:hover { background: rgba(255, 255, 255, .8); color: var(--text); }
a.hinweis-kasten svg { width: 22px; height: 22px; color: var(--blau); }
a.hinweis-kasten strong { flex: 0 1 auto; }
a.hinweis-kasten small { color: var(--text-leise); flex: 1; }
a.hinweis-kasten svg.pfeil { width: 18px; height: 18px; color: var(--blau); }
.leer-karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 18px 22px; color: var(--text-leise); }
.weisse-karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 18px 22px; }
.kontenliste li.summe { border-top: 1px solid var(--rand); }
.kontenliste li.summe .betrag { font-size: 17px; }

.diagramm-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 10px; padding: 0; color: var(--text-leise); font-size: 14px; }
.diagramm-legende li { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 0; }
.diagramm-legende span { width: 12px; height: 12px; border-radius: 4px; background: var(--farbe); }
svg.liniendiagramm { width: 100%; height: auto; display: block; overflow: visible; }
.liniendiagramm .raster-linie { stroke: #e6e9ee; stroke-width: 1; }
.liniendiagramm .raster-linie.null { stroke: #b9c0ca; }
.liniendiagramm .achse { fill: var(--text-leise); font-size: 11.5px; }
.liniendiagramm circle { cursor: default; }
.liniendiagramm circle:hover { r: 5.5; }

@media (max-width: 1100px) {
  .startseite { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  ul.zeilenliste a { padding: 14px 14px; gap: 10px; }
  ul.zeilenliste li.eingerueckt a { padding-left: 28px; }
  ul.zeilenliste .nebenangabe { display: none; }
  #content h1 { font-size: 24px; margin-bottom: 16px; }
  .hinweis-links li { flex-direction: column; gap: 4px; }
  #container:has(.seitenleiste) #header.kopfzeile { display: flex; }
  .startseite ul.zeilenliste a { padding: 16px; }
  .aufgaben .grosszahl { min-width: 32px; font-size: 24px; }
  .los { font-size: 0; gap: 0; }
  #content .hinweis-karte h2 { font-size: 20px; }
  .hinweis-karte { padding: 26px 18px 18px; }
  a.hinweis-kasten { flex-wrap: wrap; gap: 4px 12px; }
  .aufklapp { left: 20px; }
}

/* ---------- Zahlungen ---------- */

.kopf-werkzeuge { display: flex; gap: 12px; align-items: stretch; }
.volltext { position: relative; display: flex; align-items: center; margin: 0; }
.volltext svg { position: absolute; left: 14px; color: var(--text-leise); }
#content .volltext input { width: 260px; height: 100%; min-height: 42px; padding: 0 14px 0 40px; border-radius: 10px; border-color: var(--rand); }
.filterleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  margin: -6px 0 0; padding: 10px 16px; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); font-size: 14.5px;
}
#content .filterleiste select { border: 1px solid var(--rand); background: #fff; color: var(--text); font-size: 14px; padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.filter-rechts { margin-left: auto; display: flex; align-items: center; gap: 18px; color: var(--text-leise); }
.kaestchen { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.filter-weg { color: var(--text-leise); display: inline-flex; }
.abschnitt-titel.monat { margin-top: 22px; }

ul.zahlungsliste {
  list-style: none; margin: 0; padding: 0; background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden;
}
li.zahlung {
  list-style: none; display: grid; align-items: center;
  grid-template-columns: 32px minmax(180px, 1.3fr) 120px minmax(220px, 1.3fr) 200px 96px 110px;
  gap: 0 14px; padding: 8px 16px; border-bottom: 1px solid var(--rand); min-height: 76px; box-sizing: border-box;
}
li.zahlung:last-child { border-bottom: 0; }
li.zahlung.gewaehlt { background: #f0f7f6; }
li.zahlung .auswahl input { width: 18px; height: 18px; }
.partner { min-width: 0; }
.partner summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 14px 0; }
.partner summary::-webkit-details-marker { display: none; }
.partner summary strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.partner summary small { color: var(--text-leise); font-size: 13px; }
.partner summary small span { color: var(--rand); margin: 0 3px; }
.partner summary::after { content: "Details ▸"; color: var(--blau); font-size: 12px; }
.partner[open] summary::after { content: "Details ▾"; }
.einzelheiten { color: var(--text-leise); font-size: 13.5px; padding: 0 0 14px; }
.einzelheiten p { margin: 0 0 4px; overflow-wrap: anywhere; }
li.zahlung .betrag { text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
li.zahlung .betrag.negativ { color: var(--rot); }
.kontierung, .steuer {
  border: 0; background: #f7f7f4; border-radius: 10px; padding: 6px 12px; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 46px; box-sizing: border-box;
}
.kontierung small { color: var(--text-leise); font-size: 12.5px; }
.kontierung span, .steuer span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kontierung.eingabe, .steuer.eingabe { background: #fff; border: 1px solid var(--border-color); padding: 2px 4px; }
#content .kontierung.eingabe input, #content .steuer.eingabe select {
  border: 0; padding: 4px 8px; font-size: 14.5px; width: 100%; box-sizing: border-box; background: transparent; outline: none;
}
#content .kontierung.eingabe input[name^=gegenkonto] { color: var(--blau-dunkel); font-weight: 600; }
#content .kontierung.eingabe input:focus { background: var(--blau-hell); }
.steuer .fest { padding: 4px 8px; color: var(--text-leise); }
.belegfeld { display: flex; align-items: center; justify-content: center; gap: 6px; }
.belegfeld a { color: var(--text); display: inline-flex; }
.belegfeld svg { width: 22px; height: 22px; }
.beleg-hochladen { cursor: pointer; color: var(--text-leise); display: inline-flex; }
.beleg-hochladen:hover { color: var(--blau); }
.beleg-hochladen input { display: none; }
.belegfeld.mit-beleg a { color: var(--gruen); background: #e3f4ea; border-radius: 8px; padding: 4px; }
.belegfeld.mit-beleg .beleg-hochladen svg { width: 18px; height: 18px; }
.belegfeld.ohne-beleg .beleg-hochladen {
  flex-direction: column; align-items: center; gap: 1px; color: #b5651d; border: 1.5px dashed #e3a46a;
  border-radius: 10px; padding: 3px 8px; background: #fdf4ea;
}
.belegfeld.ohne-beleg .beleg-hochladen svg { width: 18px; height: 18px; }
.belegfeld .fehlt { order: 2; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.statusfeld { display: flex; align-items: center; justify-content: flex-end; }
li.zahlung.ignoriert { color: var(--text-leise); }
.statusfeld .haken {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  background: #e3f4ea; color: var(--gruen); font-size: 13px; font-weight: 600;
}
.statusfeld .haken svg { width: 14px; height: 14px; }
.statusfeld .punkt {
  border: 0; cursor: pointer; padding: 8px 16px; border-radius: 10px; background: var(--blau); color: #fff;
  font-size: 13.5px; font-weight: 600; font-family: inherit;
}
.statusfeld .punkt:hover { background: var(--blau-dunkel); }
.statusfeld .strich { display: inline-block; padding: 5px 11px; border-radius: 999px; background: #eeece6; font-size: 12.5px; color: var(--text-leise); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.aktionsleiste {
  position: fixed; bottom: 18px; left: calc(264px + 50%); transform: translateX(calc(-50% - 132px)); z-index: 40;
  display: flex; align-items: center; gap: 6px; padding: 6px;
  background: var(--leiste); color: #fff; box-shadow: 0 8px 30px rgba(16, 48, 58, .35); border-radius: 14px;
}
.aktionsleiste[hidden] { display: none; }
.aktionsleiste .anzahl-kreis { margin-left: 8px; min-width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .15); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.aktionsleiste .summe { color: var(--leiste-text); padding: 0 12px; display: flex; align-items: center; gap: 4px; font-size: 14px; white-space: nowrap; }
.aktionsleiste .summe strong { color: #fff; }
.aktionsleiste button { border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; padding: 9px 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.aktionsleiste button:hover { background: rgba(255, 255, 255, .16); }
.aktionsleiste button.gruen { background: var(--gruen); }
.seiten { display: flex; gap: 20px; justify-content: center; align-items: center; padding: 20px 0; color: var(--text-leise); }

@media (max-width: 1200px) {
  li.zahlung { grid-template-columns: 28px minmax(0, 1fr) 110px minmax(0, 1fr) 90px 100px; gap: 6px 12px; }
  li.zahlung .steuer { grid-column: 4; }
  li.zahlung .belegfeld, li.zahlung .statusfeld { grid-row: 1 / span 2; }
  li.zahlung .belegfeld { grid-column: 5; } li.zahlung .statusfeld { grid-column: 6; }
}
@media (max-width: 900px) {
  .seitenkopf { flex-wrap: wrap; }
  .kopf-werkzeuge { width: 100%; margin: -14px 0 16px; }
  .volltext { flex: 1; } #content .volltext input { width: 100%; }
  .filterleiste { padding: 10px 12px; }
  .filter-rechts { margin-left: 0; }
  li.zahlung { grid-template-columns: 24px minmax(0, 1fr) auto 84px; padding: 10px 12px; gap: 6px 10px; }
  li.zahlung .partner { grid-column: 2; } li.zahlung .betrag { grid-column: 3; grid-row: 1; }
  li.zahlung .kontierung, li.zahlung .steuer { grid-column: 2 / span 2; }
  li.zahlung .steuer { grid-row: 3; }
  li.zahlung .belegfeld { grid-column: 4; grid-row: 2 / span 2; }
  li.zahlung .statusfeld { grid-column: 4; grid-row: 1; }
  .aktionsleiste { left: 8px; right: 8px; transform: none; overflow-x: auto; }
}

/* ---------- Journal ---------- */

form.neue-buchung {
  display: grid; grid-template-columns: minmax(200px, 1.2fr) 130px minmax(240px, 1.4fr) minmax(180px, 1fr) auto;
  gap: 12px; align-items: end; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 16px 18px; margin-bottom: 8px;
}
.neue-buchung label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-leise); font-weight: 600; }
.neue-buchung .feldgruppe { display: flex; flex-direction: column; gap: 8px; }
#content .neue-buchung input, #content .neue-buchung select { width: 100%; box-sizing: border-box; font-weight: 400; }
#content .neue-buchung input[type=file] { border: 0; padding: 4px 0; font-size: 13px; }
.neue-buchung .betragsfeld input { text-align: right; }
.neue-buchung .konten label { flex-direction: row; align-items: center; gap: 8px; }
.neue-buchung .button { height: 40px; justify-content: center; }
.seite-s, .seite-h {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-weight: 700; margin-right: 6px; background: #e3f3f3; color: var(--blau-dunkel);
}
.seite-h { background: #fbefe2; color: #9a5a17; }
.journal-filter { margin-top: 22px; }
#content .journal-filter input[type=text] { border: 1px solid var(--rand); border-radius: 8px; padding: 5px 8px; font-size: 14px; width: 220px; }

ul.journalliste {
  list-style: none; margin: 0; padding: 0; background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
li.buchungszeile {
  list-style: none; display: grid; align-items: center; gap: 0 14px; padding: 10px 16px; border-bottom: 1px solid var(--rand);
  grid-template-columns: 24px minmax(170px, 1.1fr) 120px minmax(240px, 1.6fr) 130px 56px 90px;
}
li.buchungszeile:last-child { border-bottom: 0; }
li.buchungszeile.storniert { color: var(--text-leise); }
li.buchungszeile.storniert .betrag { text-decoration: line-through; }
.datumtext { display: flex; flex-direction: column; min-width: 0; }
.datumtext strong { font-size: 14.5px; }
.datumtext small { color: var(--text-leise); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
li.buchungszeile .betrag { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sollhaben { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13.5px; }
.sollhaben > span { display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
li.buchungszeile .steuer { font-size: 13px; }
details.mehr { position: relative; }
details.mehr summary { list-style: none; cursor: pointer; font-size: 20px; color: var(--text-leise); padding: 0 8px; border-radius: 8px; }
details.mehr summary::-webkit-details-marker { display: none; }
details.mehr summary:hover { background: var(--flaeche); }
.aufklapp-klein {
  position: absolute; right: 0; top: 100%; z-index: 20; background: #fff; border-radius: 10px; min-width: 150px;
  box-shadow: 0 6px 24px rgba(16, 48, 58, .2); padding: 6px 0;
}
.aufklapp-klein a, .aufklapp-klein button {
  display: block; width: 100%; text-align: left; padding: 7px 14px; border: 0; background: none; font: inherit; font-size: 14px;
  color: var(--text); cursor: pointer; text-decoration: none; box-sizing: border-box;
}
.aufklapp-klein a:hover, .aufklapp-klein button:hover { background: var(--blau-hell); }

@media (max-width: 1200px) {
  form.neue-buchung { grid-template-columns: 1fr 1fr; }
  li.buchungszeile { grid-template-columns: 24px minmax(0, 1fr) 110px 48px 80px; }
  li.buchungszeile .sollhaben { grid-column: 2 / span 2; grid-row: 2; padding-top: 6px; }
  li.buchungszeile .steuer { grid-column: 4 / span 2; grid-row: 2; }
}
@media (max-width: 900px) {
  form.neue-buchung { grid-template-columns: 1fr; }
  #content .journal-filter input[type=text] { width: 140px; }
}

/* Belege hochladen */
.ablage {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  border: 2px dashed var(--blau); border-radius: var(--radius); background: var(--karte); padding: 44px 20px;
  color: var(--text-leise); transition: background .15s;
}
.ablage.aktiv { background: var(--blau-hell); }
.ablage > svg { width: 44px; height: 44px; color: var(--blau); }
.ablage strong { color: var(--text); font-size: 18px; }
.ablage-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.ablage-knoepfe .button { cursor: pointer; }
.fortschritt { display: flex; align-items: center; gap: 14px; margin: 18px 0 8px; }
.fortschritt .balken { flex: 1; height: 8px; border-radius: 99px; background: var(--rand); overflow: hidden; }
.fortschritt .balken div { height: 100%; width: 0; background: var(--gruen); transition: width .2s; }
.zusammenfassung { margin: 6px 0 14px; font-weight: 600; }
.ergebnisliste li.ergebnis { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.ergebnisliste li.ergebnis strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ergebnisliste .marke { flex: none; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: #eeece6; color: var(--text-leise); }
.ergebnisliste .kostenrechnung .marke { background: var(--blau-hell); color: var(--blau-dunkel); }
.ergebnisliste .beleg .marke { background: #e3f4ea; color: var(--gruen); }
.ergebnisliste .fehler .marke { background: #fbe4e4; color: var(--rot); }
.ergebnisliste .nebenangabe { margin-left: auto; text-align: right; }

/* Aufgeteilte Zahlungen: Teilbeträge unter dem Betrag, Steuer je Teil in der Steuerspalte */
li.zahlung .betrag .teile, .steuer .teile { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; }
li.zahlung .betrag .teile span { font-size: 13px; font-weight: 400; color: var(--text-leise); }
.steuer .teile span { font-size: 13px; white-space: nowrap; }
.statusfeld { flex-direction: column; align-items: flex-end; gap: 3px; }
.statusfeld .zurueck { border: 0; background: none; padding: 0; cursor: pointer; color: var(--text-leise); font-size: 12px; font-family: inherit; text-decoration: underline; }
.statusfeld .zurueck:hover { color: var(--rot); }
.zuordnen-zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 10px; }

/* Zahlungen: aufklappbares Feld „Weitere Filter“ */
.weitere-filter { position: relative; }
.weitere-filter summary { list-style: none; cursor: pointer; color: var(--blau-dunkel); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.weitere-filter summary::-webkit-details-marker { display: none; }
.weitere-filter summary::after { content: "▾"; font-size: 12px; }
.weitere-filter .zaehler { background: var(--blau); color: #fff; border-radius: 99px; font-size: 12px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.filter-feld {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; width: 340px; display: flex; flex-direction: column; gap: 12px;
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 18px;
}
.filter-feld > label, .filter-feld .von-bis label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-leise); }
.filter-feld .von-bis { display: flex; gap: 10px; }
.filter-feld .von-bis[hidden] { display: none; }
.filter-feld select, .filter-feld input[type=text], .filter-feld input[type=date] { width: 100%; box-sizing: border-box; font-size: 14.5px; padding: 7px 9px; }
.filter-feld label.kaestchen { flex-direction: row; align-items: center; color: var(--text); }
.filter-knoepfe { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
@media (max-width: 600px) { .filter-feld { position: fixed; left: 12px; right: 12px; width: auto; top: 120px; } }
.filter-feld .schnellfilter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--rand); font-size: 13px; color: var(--text-leise); }
.filter-feld .pille { background: var(--blau-hell); color: var(--blau-dunkel); border-radius: 99px; padding: 3px 10px; font-weight: 600; }
.filter-merken { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--rand); padding-top: 10px; }
.filter-merken .verweis { border: 0; background: none; padding: 0; color: var(--blau-dunkel); cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; }
.kopf-mehr summary { display: flex; align-items: center; height: 36px; background: var(--flaeche); }
.kopf-mehr .aufklapp-klein { right: 0; left: auto; min-width: 260px; }
.zahlung-kopf { background: #fff; border-radius: 12px; padding: 16px 20px; margin-bottom: 8px; }
.zahlung-kopf strong { font-size: 22px; margin-right: 12px; }
.zahlung-kopf strong.negativ { color: var(--rot, #b3261e); }
.zahlung-kopf p { margin: 8px 0 0; color: var(--text-leise); }
.teilbuchungen .teilzeile { display: grid; grid-template-columns: 2fr 120px 1.2fr 2fr; gap: 8px; margin-bottom: 6px; }
.belegwahl li { display: flex; gap: 12px; align-items: center; }
.belegwahl .nebenangabe { margin-left: auto; }
form.einspaltig { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
form.volltext.klein { margin: 0 0 8px; max-width: 420px; }
.zahlung-menue .aufklapp-klein { min-width: 240px; }
.belegfeld .beleglos { font-size: 12px; color: var(--text-leise); }
.kommentar-marke { font-size: 12px; color: var(--text-leise); margin-left: 6px; }
@media (max-width: 800px) { .teilbuchungen .teilzeile { grid-template-columns: 1fr 1fr; } }
/* Belegliste */
.titel-wahl { display: flex; align-items: center; gap: 12px; }
.zurueck-pfeil { font-size: 24px; text-decoration: none; color: var(--text-leise); }
.titel-menue summary h1 { display: inline; margin: 0; }
.titel-menue .aufklapp-klein { left: 0; right: auto; min-width: 280px; }
.belegkopf, .belegzeile { display: grid; grid-template-columns: 32px 40px minmax(220px, 2fr) 120px minmax(200px, 1.5fr) 40px; gap: 12px; align-items: center; }
.belegkopf { padding: 8px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.belegkopf a { color: var(--text-leise); text-decoration: none; }
.belegkopf a.aktiv { color: var(--text); font-weight: 600; }
.belegkopf a:first-of-type { grid-column: 3; }
.belegkopf .rechts { grid-column: 4; text-align: right; }
ul.belegzeilen { list-style: none; margin: 0; padding: 0; }
.belegzeile { background: #fff; padding: 12px 16px; border-bottom: 1px solid var(--linie, #e3e7ea); }
.belegzeile.ausgeblendet { opacity: .55; }
.belegzeile .beleg-symbol svg { width: 28px; height: 28px; }
.belegangaben { display: flex; flex-direction: column; gap: 2px; }
.belegangaben a { text-decoration: none; color: var(--text); }
.belegangaben small { color: var(--text-leise); }
.belegzeile .betrag { text-align: right; font-variant-numeric: tabular-nums; }
.marken { display: flex; flex-wrap: wrap; gap: 6px; }
.etikett { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: #eef3f6; color: var(--text); text-decoration: none; }
.etikett.gruen { background: #e4f4e6; color: #22713a; }
.etikett.gelb { background: #fdf3dc; color: #8a5a00; }
.etikett.grau { background: var(--flaeche); color: var(--text-leise); }
.beleg-detail { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 24px; }
.beleg-vorschau iframe { width: 100%; height: 80vh; border: 1px solid var(--linie, #e3e7ea); border-radius: 8px; background: #fff; }
.beleg-daten dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.beleg-daten dt { color: var(--text-leise); }
.beleg-daten dd { margin: 0; }
@media (max-width: 900px) {
  .beleg-detail { grid-template-columns: 1fr; }
  .belegkopf { display: none; }
  .belegzeile { grid-template-columns: 28px 32px 1fr auto; }
  .belegzeile .marken { grid-column: 3 / -1; }
}
.vorlage-link { display: block; font-size: 12px; color: var(--text-leise); margin-top: 2px; }
/* Anlagen */
.anlagenkopf, .anlagenzeile { display: grid; grid-template-columns: 32px minmax(220px, 2fr) 150px 130px 110px; gap: 12px; align-items: center; }
.anlagenkopf { padding: 8px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.anlagenkopf a { color: var(--text-leise); text-decoration: none; }
.anlagenkopf a.aktiv { color: var(--text); font-weight: 600; }
.anlagenkopf .rechts, .anlagenzeile .rechts { text-align: right; }
ul.anlagenliste { list-style: none; margin: 0; padding: 0; }
ul.anlagenliste > li { background: #fff; border-bottom: 1px solid var(--rand); }
.anlagenzeile { padding: 12px 16px; cursor: pointer; list-style: none; }
.anlagenzeile::-webkit-details-marker { display: none; }
.anlagenzeile svg { width: 24px; height: 24px; color: var(--text-leise); }
.anlage-name { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.anlagenzeile small { display: block; color: var(--text-leise); font-size: 13px; }
.anlagenzeile .rechts { font-variant-numeric: tabular-nums; }
.anlage-details { padding: 0 16px 16px 60px; display: grid; grid-template-columns: 1fr auto; gap: 24px; }
.anlage-details dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.anlage-details dt { color: var(--text-leise); }
.anlage-details dd { margin: 0; }
.afa-plan td, .afa-plan th { padding: 3px 10px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 800px) {
  .anlagenkopf { display: none; }
  .anlagenzeile { grid-template-columns: 24px 1fr auto; }
  .anlagenzeile .rechts:nth-of-type(n+2) { grid-column: 2 / -1; text-align: left; }
  .anlage-details { grid-template-columns: 1fr; padding-left: 16px; }
}
form.formular-zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; background: #fff; padding: 20px; border-radius: 12px; max-width: 980px; }
form.formular-zweispaltig > label:not(.kaestchen) { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-leise); }
form.formular-zweispaltig .breit { grid-column: 1 / -1; }
fieldset.auswahlgruppe { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
fieldset.auswahlgruppe legend { font-size: 13px; color: var(--text-leise); padding: 0; }
@media (max-width: 800px) { form.formular-zweispaltig { grid-template-columns: 1fr; } }
.afa-automatik { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 20px; background: #fff; padding: 14px 16px; border-radius: 12px; }
/* Abschluss */
.abschluss { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
select.monatswahl { font-size: 22px; padding: 6px 12px; border-radius: 8px; color: var(--blau); }
.abschluss-zahl { font-size: 20px; margin: 8px 0; }
.balken-gross { height: 10px; background: var(--flaeche); border-radius: 99px; overflow: hidden; max-width: 520px; }
.balken-gross div { height: 100%; background: #e9b949; }
ul.abschluss-liste, ul.link-liste { list-style: none; padding: 0; margin: 12px 0 20px; }
ul.abschluss-liste li { display: flex; gap: 14px; align-items: center; padding: 6px 0; flex-wrap: wrap; }
ul.abschluss-liste li > span:first-child { min-width: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
ul.abschluss-liste .betrag-breit { min-width: 130px !important; text-align: right; }
ul.link-liste li { padding: 6px 0; }
ul.link-liste a::before { content: "→ "; }
table.susa { border-collapse: collapse; background: #fff; }
table.susa th, table.susa td { padding: 5px 12px; border-bottom: 1px solid var(--rand); }
table.susa .zahl { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .abschluss { grid-template-columns: 1fr; } }
/* BWA mit Konten */
.bwa-wahl { flex-wrap: wrap; gap: 12px; }
.bwa-blatt { background: #fff; border-radius: 12px; padding: 24px 28px; max-width: 900px; }
.bwa-kopf { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-leise); }
.bwa-blatt h2 { text-align: center; margin: 12px 0 2px; }
.bwa-zeitraum { text-align: center; margin: 0 0 16px; color: var(--text-leise); }
table.bwa-konten { width: 100%; border-collapse: collapse; }
table.bwa-konten td, table.bwa-konten th { padding: 3px 6px; }
table.bwa-konten .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.bwa-konten tr.gruppe td { font-weight: 600; padding-top: 10px; }
table.bwa-konten tr.posten td { color: var(--text-leise); font-size: 13.5px; }
table.bwa-konten tr.posten td:first-child { padding-left: 18px; }
table.bwa-konten tr.summe td { font-weight: 700; background: var(--flaeche); }
table.bwa-konten tr.ergebnis td { font-weight: 700; font-size: 18px; border-top: 2px solid var(--text); padding-top: 8px; }
@media print {
  .seitenleiste, .kopfzeile, .nicht-drucken, .messagelist { display: none !important; }
  .bwa-blatt { box-shadow: none; padding: 0; max-width: none; }
}
.bwa-blatt.breit { max-width: none; }
table.susa th { text-align: left; font-size: 12.5px; border-bottom: 1px solid var(--rand, #ddd); }
table.susa td { font-size: 13.5px; }
@media print { table.susa td, table.susa th { font-size: 10px; } }
.export-formular section { margin-bottom: 18px; }
.export-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.export-spalten select[multiple] { width: 100%; }
.abschluss-zahl.fertig { color: #2f9e62; font-weight: 600; }

/* Aufgaben */
ul.aufgabenliste { list-style: none; margin: 0 0 12px; padding: 0; }
ul.aufgabenliste li { display: flex; gap: 12px; align-items: flex-start; background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 6px; }
ul.aufgabenliste li form { margin: 0; }
ul.aufgabenliste li small { display: block; margin-top: 2px; }
ul.aufgabenliste li.erledigt > div { color: var(--text-leise); text-decoration: line-through; }
.button.klein { padding: 2px 9px; min-height: 0; font-size: 13px; }

/* Nutzer- und Rechteverwaltung */
table.nutzerliste { width: 100%; }
table.nutzerliste tr.gesperrt td { color: var(--text-leise); }
.warnung-text { color: #b4531a; font-weight: 600; }
.qr-karte { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px; max-width: 520px; }
.qr-karte svg { width: 220px; height: 220px; display: block; }
code.umbrechen { word-break: break-all; font-size: 12px; }
.rollenformular { max-width: 760px; }
.rollenformular fieldset { border: 0; border-top: 1px solid var(--rand); margin: 14px 0 0; padding: 10px 0 0; }
.rollenformular legend { font-size: 17px; font-weight: 600; padding: 0 0 6px; }
.rollenformular .rollenname { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
label.schalter { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; }
label.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.schalter span { width: 40px; height: 22px; border-radius: 11px; background: #c9d1d9; position: relative; flex: none; transition: background .15s; }
label.schalter span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
label.schalter input:checked + span { background: var(--blau); }
label.schalter input:checked + span::after { left: 21px; }
label.schalter input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 2px; }
label.schalter input:disabled + span { opacity: .45; }
.knopfleiste { display: flex; gap: 10px; margin-top: 18px; align-items: center; }
.knopfleiste .rechts { margin-left: auto; }