:root {
  --hg: #f5f5f2;
  --flaeche: #ffffff;
  --text: #1d1f21;
  --leise: #6b6f73;
  --linie: #e1e1dc;
  --akzent: #1f5f8b;
  --akzent-text: #ffffff;
  --gefahr: #b3261e;
  --zeile-hover: #eef4f8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hg: #17191b;
    --flaeche: #202326;
    --text: #e6e6e3;
    --leise: #9a9ea2;
    --linie: #33373b;
    --akzent: #5aa3d6;
    --akzent-text: #0e1214;
    --gefahr: #ef7a72;
    --zeile-hover: #263038;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--hg);
  color: var(--text);
}

.kopf {
  display: flex; align-items: center; gap: 32px;
  padding: 0 24px; height: 52px;
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.marke { font-weight: 700; letter-spacing: .02em; color: var(--akzent); font-size: 18px; }
.kopf .marke { display: flex; align-items: center; min-width: 60px; }
.kopf .marke:not(.bereit) { visibility: hidden; } /* bis klar ist, ob es ein Logo gibt */
.marke-logo { display: block; height: 30px; max-width: 150px; object-fit: contain; }
@media (prefers-color-scheme: dark) {
  .marke-logo { background: #fff; padding: 2px 6px; border-radius: 4px; box-sizing: content-box; height: 26px; }
}
nav { display: flex; gap: 20px; }
nav a, nav span { color: var(--leise); text-decoration: none; }
nav a.aktiv { color: var(--text); font-weight: 600; }
nav .bald { opacity: .5; cursor: default; }

main { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
.leiste { display: flex; align-items: center; justify-content: space-between; }
h1 { font-size: 22px; margin: 0; }

.filter { display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap; align-items: center; }
.filter input[type=search] { flex: 1; min-width: 220px; }
.haken { display: flex; align-items: center; gap: 6px; color: var(--leise); }

input, select, textarea, button {
  font: inherit; color: inherit;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 6px; padding: 7px 10px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
button { cursor: pointer; }
button.primaer { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); font-weight: 600; }
button.gefahr { color: var(--gefahr); }

.tabelle-rahmen { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); font-weight: 600; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--zeile-hover); }
tbody tr:last-child td { border-bottom: 0; }
td.nr { font-variant-numeric: tabular-nums; color: var(--leise); }
tr.archiviert td { opacity: .45; }
.typ { font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--linie); color: var(--leise); }
.leer { text-align: center; color: var(--leise); padding: 32px; margin: 0; }

dialog {
  border: 1px solid var(--linie); border-radius: 10px; padding: 0;
  background: var(--flaeche); color: var(--text);
  width: min(720px, calc(100vw - 32px));
}
dialog::backdrop { background: rgb(0 0 0 / .35); }
dialog form { padding: 20px 24px; }
dialog h2 { margin: 0 0 16px; font-size: 18px; }
.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.raster label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); }
.raster label > input, .raster label > select, .raster label > textarea { color: var(--text); }
.raster .breit { grid-column: 1 / -1; }
small[data-fehler] { color: var(--gefahr); min-height: 0; }
small[data-fehler]:empty { display: none; }
.meta { font-size: 12px; color: var(--leise); margin: 14px 0 0; }
.knoepfe { display: flex; gap: 8px; margin-top: 18px; }
.platz { flex: 1; }

.meldung {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--hg);
  padding: 10px 18px; border-radius: 8px; font-size: 14px;
}

@media (max-width: 640px) {
  .raster { grid-template-columns: 1fr; }
  .kopf { gap: 16px; padding: 0 16px; }
}

/* --- Konto oben rechts ---------------------------------------------------- */
.kopf nav { flex: 1; }
.konto { display: flex; align-items: center; gap: 8px; }
.konto-name { color: var(--leise); font-size: 14px; margin-right: 4px; }
/* Systemangaben (nur Admins): zweizeilig, unaufdringlich */
.konto button.system-info {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  border: 0; background: none; padding: 2px 6px; margin-right: 4px;
  font-size: 11px; line-height: 1.25; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.konto button.system-info:hover { color: var(--text); background: var(--zeile-hover); }
.konto button.system-info.warnung { color: var(--test); font-weight: 600; }
.system-dialog { width: min(520px, calc(100vw - 32px)); }
.system-dialog h3 { font-size: 14px; margin: 18px 0 8px; }
.system-dialog .zahlen { grid-template-columns: 190px 1fr; }
.system-dialog .zahlen dd { font-weight: 500; overflow-wrap: anywhere; }
.system-dialog h2 + h3 { margin-top: 0; }
@media (max-width: 640px) { .system-dialog .zahlen { grid-template-columns: 1fr; gap: 0; } .system-dialog .zahlen dd { margin-bottom: 6px; } }
.warnung-text { color: var(--test); }
.konto button { padding: 4px 10px; font-size: 13px; }

/* --- Anmeldung ------------------------------------------------------------- */
.login-seite { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-karte {
  width: min(360px, 100%);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 14px;
}
.login-karte label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); }
.login-karte input { color: var(--text); }
.login-karte button { margin-top: 4px; padding: 9px; }
.marke.gross { font-size: 26px; text-align: center; margin-bottom: 6px; }
.fehlertext { color: var(--gefahr); margin: 0; font-size: 14px; }

/* --- Benutzerverwaltung ---------------------------------------------------- */
.abstand-oben { margin-top: 16px; }
.raster.einspaltig { grid-template-columns: 1fr; }
.raster .haken-feld { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 8px; color: var(--text); }
.raster .haken-feld.eingerueckt { margin-left: 26px; }
.hinweis {
  font-size: 13px; color: var(--leise); margin: 0 0 16px;
  padding: 10px 12px; border: 1px solid var(--linie); border-radius: 6px;
}
input:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
[hidden] { display: none !important; }

@media (max-width: 640px) {
  .kopf { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px 16px; }
  .konto-name { display: none; }
  .konto { flex-wrap: wrap; row-gap: 4px; }
  .konto button.system-info { order: 5; flex-basis: 100%; flex-direction: row; gap: 8px; padding: 0; }
}

/* --- Adress-Dialog: Kopf, Kontakte, search.ch ------------------------------ */
dialog { max-height: calc(100vh - 32px); }
dialog.breit { width: min(820px, calc(100vw - 32px)); }
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.dialog-kopf h2 { margin: 0; }
.dialog-kopf button { font-size: 13px; padding: 5px 10px; }

.kontakte { margin-top: 20px; border-top: 1px solid var(--linie); padding-top: 14px; }
.kontakte-kopf { display: flex; align-items: center; justify-content: space-between; }
.kontakte-kopf h3 { margin: 0; font-size: 15px; }
.kontakte-kopf button { font-size: 13px; padding: 4px 10px; }
.kontakt-liste, .tel-treffer { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.kontakt, .treffer {
  border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px;
  cursor: pointer; display: grid; gap: 2px;
}
.kontakt:hover, .treffer:hover, .kontakt:focus-visible, .treffer:focus-visible {
  background: var(--zeile-hover); outline: none;
}
.kontakt-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kontakt .meta, .treffer .meta { margin: 0; }
.kontakt-kanaele { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.kontakt-kanaele a { color: var(--akzent); text-decoration: none; }
.kontakt-kanaele a:hover { text-decoration: underline; }
.typ.haupt { border-color: var(--akzent); color: var(--akzent); }

.tel-suche { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.tel-suche label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); }
.tel-suche input { color: var(--text); }
.tel-suche button { height: 37px; }
.tel-suche small[data-fehler] { position: absolute; }
.tel-suche label { position: relative; }
.tel-treffer { max-height: 50vh; overflow-y: auto; }
.quelle { font-size: 12px; color: var(--leise); align-self: center; }

@media (max-width: 640px) {
  .tel-suche { grid-template-columns: 1fr; }
  .tel-suche small[data-fehler] { position: static; }
}

/* --- Import ------------------------------------------------------------------ */
.leiste-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.feldhilfe { font-size: 12px; color: var(--leise); }
.feldhilfe a { color: var(--akzent); }
.bericht { margin-top: 18px; border-top: 1px solid var(--linie); padding-top: 14px; }
.bericht h3 { margin: 0 0 10px; font-size: 15px; }
.zahlen { display: grid; grid-template-columns: max-content auto; gap: 4px 24px; margin: 0; }
.zahlen dt { color: var(--leise); }
.zahlen dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.bericht details { margin-top: 12px; }
.bericht summary { cursor: pointer; color: var(--gefahr); font-size: 14px; }
.warnungen { margin: 8px 0 0; padding-left: 18px; font-size: 13px; max-height: 30vh; overflow-y: auto; }
.warnungen li { margin-bottom: 3px; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* --- Artikel ------------------------------------------------------------------- */
.raster.drei { grid-template-columns: repeat(3, 1fr); }
.raster.vier { grid-template-columns: repeat(4, 1fr); }
.raster .zwei { grid-column: span 2; }
.abschnitt { font-size: 14px; margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--linie); }
th.zahl, td.zahl, input.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.unterzeile { font-size: 12px; color: var(--leise); }
#preisInfo { margin-top: 8px; }
#preisInfo.warnung { color: var(--gefahr); }

@media (max-width: 640px) {
  .raster.drei, .raster.vier { grid-template-columns: 1fr; }
  .raster .zwei { grid-column: auto; }
}

/* --- Mehrfachauswahl und Massenmutation ------------------------------------------- */
th.wahl, td.wahl { width: 36px; padding-right: 0; text-align: center; }
td.wahl { cursor: default; }
.wahl input { width: 16px; height: 16px; cursor: pointer; }
.auswahl-leiste {
  position: sticky; bottom: 16px; margin: 16px auto 0; width: fit-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--flaeche); border: 1px solid var(--akzent); border-radius: 10px;
  padding: 8px 10px 8px 16px; box-shadow: 0 4px 16px rgb(0 0 0 / .15);
}
.auswahl-leiste span { font-weight: 600; margin-right: 6px; }
.massen-felder { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; align-items: center; }
.mf { display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.mf-wert { display: flex; gap: 8px; flex-wrap: wrap; }
.mf-wert > input:not(.kurz) { flex: 1; min-width: 180px; }
input.kurz { width: 130px; }
.aenderungen { margin: 0 0 10px; padding-left: 18px; font-size: 14px; }
.fehlerliste { color: var(--gefahr); }
#massenStatus { color: var(--gefahr); }
.tabelle-rahmen.klein { margin-top: 12px; max-height: 40vh; overflow-y: auto; }
.tabelle-rahmen.klein th, .tabelle-rahmen.klein td { padding: 6px 10px; font-size: 13px; }
td.geaendert { font-weight: 700; color: var(--akzent); }
h3.fehlertext { color: var(--gefahr); }

@media (max-width: 640px) {
  .massen-felder { grid-template-columns: 1fr; }
}

/* --- Belege ------------------------------------------------------------------------- */
main.schmal { max-width: 820px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 18px 20px; margin-top: 16px; }
.karte h2 { margin: 0 0 14px; font-size: 17px; }
.reiter { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.reiter button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--leise); padding: 8px 12px; }
.reiter button.aktiv { color: var(--text); border-bottom-color: var(--akzent); font-weight: 600; }
.filter-hinweis { margin: -6px 0 12px; font-size: 14px; color: var(--leise); }
.filter-hinweis a { color: var(--akzent); }
td.gekuerzt { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }

.status { font-size: 12px; padding: 3px 9px; border-radius: 10px; border: 1px solid var(--linie); white-space: nowrap; }
.status-entwurf { color: var(--leise); border-style: dashed; }
.status-freigegeben { color: var(--akzent); border-color: var(--akzent); }
.status-bezahlt { color: #2e7d4f; border-color: #2e7d4f; }
.status-ueberfaellig { color: var(--gefahr); border-color: var(--gefahr); font-weight: 600; }
.status-storniert { color: var(--leise); text-decoration: line-through; }
.status-angenommen { color: #2e7d4f; border-color: #2e7d4f; font-weight: 600; }
.status-abgelehnt { color: var(--gefahr); border-color: var(--gefahr); }
.annahme-karte .annahme-link { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.annahme-karte .annahme-link input { flex: 1 1 320px; font-family: ui-monospace, monospace; font-size: 13px; }
.annahme-karte .entscheid { padding: 10px 12px; border-radius: 6px; border-left: 4px solid var(--linie); background: var(--zeile-hover); margin: 8px 0; }
.annahme-karte .entscheid.angenommen { border-left-color: #2e7d4f; }
.annahme-karte .entscheid.abgelehnt { border-left-color: var(--gefahr); }
.annahme-karte .entscheid p { margin: 4px 0; }
@media (prefers-color-scheme: dark) {
  .status-bezahlt, .status-angenommen { color: #6fcf97; border-color: #6fcf97; }
}

.beleg-kopfleiste { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.beleg-kopfleiste h1 { margin: 4px 0 2px; }
.zurueck { color: var(--leise); text-decoration: none; font-size: 14px; }
.kette { font-size: 13px; color: var(--leise); min-height: 18px; }
.kette a { color: var(--akzent); }
.aktionen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ungespeichert { font-size: 12px; color: var(--gefahr); }
.menue { position: relative; }
.menue-liste {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 230px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 4px;
  box-shadow: 0 6px 20px rgb(0 0 0 / .15); display: grid;
}
.menue-liste button { border: 0; text-align: left; background: none; padding: 8px 10px; }
.menue-liste button:hover { background: var(--zeile-hover); }

.stapel { display: grid; gap: 12px; align-content: start; }
.stapel label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); }
.stapel input { color: var(--text); }
.raster .zeilen-3 { grid-row: span 1; }
.klein-link { border: 0; background: none; padding: 2px 0; color: var(--akzent); font-size: 12px; text-align: left; cursor: pointer; }
label.block { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); }
label.block textarea { color: var(--text); }

.positionen-rahmen { border: 0; border-radius: 0; }
table.positionen th, table.positionen td { padding: 6px 4px; vertical-align: top; white-space: normal; }
table.positionen tbody tr { cursor: default; }
table.positionen tbody tr:hover { background: none; }
table.positionen input, table.positionen textarea, table.positionen select { width: 100%; padding: 5px 7px; font-size: 14px; }
table.positionen input.domain-feld { margin-top: 4px; font-size: 13px; font-family: ui-monospace, monospace; }
table.positionen .klein-link { display: block; margin-top: 2px; }
table.positionen textarea.beschr { margin-top: 4px; font-size: 13px; color: var(--leise); resize: vertical; }
.p-nr { width: 26px; color: var(--leise); padding-top: 12px !important; }
.p-zahl { width: 92px; text-align: right; }
.p-einheit { width: 80px; }
.p-rabatt { width: 70px; text-align: right; }
.p-mwst { width: 96px; } /* «VM 8.1 %» bzw. gewählter Satz */
.p-aktion { width: 92px; white-space: nowrap !important; text-align: right; }
td.betrag { padding-top: 12px !important; font-variant-numeric: tabular-nums; }
tr.pos-titel input.titel-feld { font-weight: 700; }
tr.pos-titel td, tr.pos-text td { padding-top: 10px; }
button.mini { padding: 3px 7px; font-size: 12px; }
.positionen-fuss { display: flex; justify-content: space-between; gap: 24px; margin-top: 12px; flex-wrap: wrap; align-items: flex-start; }
.knoepfe-links { display: flex; gap: 8px; flex-wrap: wrap; }
dl.summen { display: grid; grid-template-columns: auto auto; gap: 4px 28px; margin: 0; min-width: 300px; }
dl.summen dt { color: var(--leise); }
dl.summen dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
dl.summen .leise { font-size: 13px; }
dl.summen .total { font-weight: 700; font-size: 16px; color: var(--text); border-top: 1px solid var(--text); padding-top: 6px; margin-top: 4px; }
body.ohne-preise .preis-spalte { display: none !important; }

.logo-bereich { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.logo-bereich img { max-height: 60px; max-width: 220px; background: #fff; padding: 6px; border: 1px solid var(--linie); border-radius: 6px; }
.knopf-datei { display: inline-block; border: 1px solid var(--linie); border-radius: 6px; padding: 7px 10px; cursor: pointer; background: var(--flaeche); }

@media (max-width: 900px) {
  table.positionen thead { display: none; }
  table.positionen tr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-bottom: 1px solid var(--linie); padding: 8px 0; }
  table.positionen td { padding: 0 !important; border: 0; }
  table.positionen td:nth-child(2) { grid-column: 1 / -1; }
  table.positionen td.p-nr { display: none; }
  table.positionen td.p-aktion { grid-column: 1 / -1; text-align: left; }
  tr.pos-titel td[colspan], tr.pos-text td[colspan], tr.kunde-kopf td[colspan] { grid-column: 1 / -1; }
}
.knopf-link { font-size: 13px; padding: 5px 10px; border: 1px solid var(--linie); border-radius: 6px; color: var(--text); text-decoration: none; background: var(--flaeche); }
.knopf-link:hover { background: var(--zeile-hover); }

/* Mittlere Breite: Navigation in eine zweite Zeile, damit der Kontobereich Platz hat */
@media (max-width: 860px) {
  .kopf { height: auto; flex-wrap: wrap; padding: 8px 24px; gap: 6px 24px; }
  .kopf nav { flex-wrap: wrap; gap: 6px 20px; flex-basis: 100%; order: 3; padding-bottom: 4px; }
  .kopf .konto { margin-left: auto; }
}

/* Navigation auf schmalen Bildschirmen umbrechen */
@media (max-width: 640px) {
  .kopf nav { flex-wrap: wrap; gap: 6px 14px; flex-basis: 100%; order: 3; }
}
.p-einheit { width: 96px; }

/* --- Abos ------------------------------------------------------------------------- */
dialog.sehr-breit { width: min(1100px, calc(100vw - 32px)); }
.p-preis { width: 120px; }
.mini-haken { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--leise); margin-top: 3px; white-space: nowrap; }
.mini-haken input { width: auto !important; }
.block-fehler { display: block; color: var(--gefahr); font-size: 13px; margin-top: 6px; }
.verlauf { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 14px; max-height: 200px; overflow-y: auto; }
.verlauf li { display: flex; gap: 8px; align-items: center; }
.verlauf a { color: var(--akzent); }
.lauf-kopf { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.lauf-kopf label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); }
.lauf-kopf input { color: var(--text); }
.lauf-freigabe { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
#laufTitel { font-size: 15px; margin: 16px 0 8px; }
#laufListe a { color: var(--akzent); }

/* --- Buchhaltung -------------------------------------------------------------------- */
table.fibu td.nr { width: 1%; }
tr.storniert td { color: var(--leise); }
tr.storniert td:nth-child(n+5) { text-decoration: line-through; }
tr.summe td { font-weight: 600; background: var(--hg); cursor: default; }
tfoot td { border-top: 1px solid var(--text); border-bottom: 0; }
.unterzeile.warnung, .kontoname.warnung, .warnung { color: var(--gefahr); }
.blatt-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 16px 0 12px; }
.blatt-kopf h2 { margin: 4px 0 2px; font-size: 20px; }
.blatt-kopf .meta { margin: 0; }
.zeitraum { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.zeitraum label { display: flex; align-items: center; gap: 6px; color: var(--leise); font-size: 14px; }

.bilanz { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.bilanz .karte, .karte.er { margin-top: 0; }
.karte h3 { margin: 0 0 8px; font-size: 16px; }
.karte h4 { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); }
.bzeile { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-size: 14px; }
.bzeile .zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.konto-zeile { cursor: pointer; padding-left: 8px; }
.konto-zeile:hover { background: var(--zeile-hover); }
.bzeile.zwischen { font-weight: 600; border-top: 1px solid var(--linie); margin-top: 2px; }
.bzeile.total { font-weight: 700; font-size: 16px; border-top: 2px solid var(--text); margin-top: 12px; padding-top: 6px; }
.karte.er { max-width: 760px; }
td .bx-kontakt { font-weight: 600; margin-right: 4px; }
pre.roh { font-size: 12px; max-height: 260px; overflow: auto; background: var(--hg); padding: 8px 10px; border-radius: 6px; white-space: pre-wrap; }
td .bx-kontakt::after { content: " ·"; font-weight: 400; color: var(--leise); }
#ebHinweise .hinweis { margin: 0 0 8px; }
#ebHinweise { margin-bottom: 12px; }
.eb-rahmen { max-width: 920px; }
table.eroeffnung.ohne-vergleich tr > :nth-child(2), table.eroeffnung.ohne-vergleich tr > :nth-child(4) { display: none; }
table.eroeffnung.ohne-vergleich tr > [colspan] { display: table-cell; }
table.eroeffnung td.zahl { width: 1%; padding-left: 20px; }
table.eroeffnung td:first-child { white-space: normal; }
table.eroeffnung .unterzeile { display: block; font-size: 12px; color: var(--leise); }
table.eroeffnung tr.eb-seite td { font-weight: 700; font-size: 15px; padding-top: 16px; background: none; cursor: default; }
table.eroeffnung tr.eb-gruppe td { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); padding-top: 10px; cursor: default; }
table.eroeffnung tr.eb-zwischen td { font-weight: 600; color: var(--leise); cursor: default; }
table.eroeffnung tr.eb-erfolg td { font-style: italic; cursor: default; }
table.eroeffnung tr.konto-zeile td:first-child { padding-left: 14px; }
table.eroeffnung tr.abweichung td:last-child { color: var(--status-kritisch); font-weight: 600; }
table.eroeffnung tr.abweichung { background: color-mix(in srgb, var(--status-kritisch) 7%, transparent); }
.eb-buchungen { max-height: none; }
.eb-buchungen li.klickbar { cursor: pointer; padding: 3px 4px; border-radius: 4px; }
.eb-buchungen li.klickbar:hover { background: var(--zeile-hover); }
.eb-buchungen li.storniert span:not(.meta) { text-decoration: line-through; color: var(--leise); }
.druck-titel { font-size: 17px; margin: 0 0 12px; }

.umschalter { display: flex; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }
.umschalter button { border: 0; border-radius: 0; padding: 5px 12px; font-size: 13px; }
.umschalter button.aktiv { background: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.raster.buchung-kopf { grid-template-columns: 170px 1fr 2fr; }
.raster.buchung-einfach { grid-template-columns: 1fr 1fr 150px 1fr; margin-top: 14px; }
.kontoname { font-size: 12px; color: var(--leise); min-height: 16px; }
#sammel { margin-top: 14px; }
table.sammel input.kurs { margin-top: 4px; font-size: 12px; }
table.sammel .kontoname { margin-top: 2px; }
.vorschau { margin-top: 16px; border-top: 1px solid var(--linie); padding-top: 10px; }
.vorschau h3 { font-size: 13px; margin: 0 0 6px; color: var(--leise); font-weight: 600; }
.vorschau .meta { margin: 0; }
.vorschau-tabelle { width: auto; min-width: 60%; }
.vorschau-tabelle td { padding: 3px 14px 3px 0; border: 0; font-size: 13px; color: var(--text); }
.vorschau-tabelle tr { cursor: default; }
.vorschau-tabelle tr:hover { background: none; }
.leer p { margin: 0 0 12px; }

@media (max-width: 900px) {
  .bilanz { grid-template-columns: 1fr; }
  .raster.buchung-kopf, .raster.buchung-einfach { grid-template-columns: 1fr 1fr; }
  .raster.buchung-kopf label:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .raster.buchung-kopf, .raster.buchung-einfach { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff; color: #000; font-size: 12px; }
  .kopf, .leiste, .reiter, .filter, .zeitraum button, .zurueck, .hinweis, .meldung, button { display: none !important; }
  main { max-width: none; padding: 0; }
  .karte, .tabelle-rahmen { border: 0; padding: 0; }
  .bilanz { grid-template-columns: 1fr 1fr; }
  th, td { padding: 3px 6px; }
  tr.summe td { background: none; }
}
.raster.buchung-kopf > label, .raster.buchung-einfach > label { min-width: 0; }
.raster.buchung-kopf input, .raster.buchung-einfach input, .raster.buchung-einfach select { width: 100%; min-width: 0; }

/* --- Testmandant ------------------------------------------------------------------ */
:root { --test: #d9730d; }
body.testmandant .kopf { border-top: 4px solid var(--test); }
.test-band {
  background: var(--test); color: #fff; text-align: center; font-weight: 600; font-size: 14px;
  padding: 6px 16px; display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.test-band button { padding: 2px 10px; font-size: 13px; background: #fff; color: var(--test); border-color: #fff; font-weight: 600; }
.mandant-wahl { display: inline-flex; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }
.konto .mandant-wahl button { border: 0; border-radius: 0; padding: 4px 10px; font-size: 13px; color: var(--leise); background: var(--flaeche); }
.konto .mandant-wahl button + button { border-left: 1px solid var(--linie); }
.konto .mandant-wahl button.aktiv { cursor: default; font-weight: 600; color: var(--akzent-text); background: var(--akzent); }
.konto .mandant-wahl button.aktiv[data-mandant="test"] { background: var(--test); color: #fff; }
#testBereich .knoepfe-links { margin-bottom: 4px; }
@media print { .test-band { display: none !important; } }

/* --- Vorschau ------------------------------------------------------------------- */
dialog.vorschau-dialog { width: min(1000px, calc(100vw - 32px)); height: calc(100vh - 32px); max-height: none;
  display: none; flex-direction: column; }
dialog.vorschau-dialog[open] { display: flex; }
.vorschau-kopf { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.vorschau-kopf .meta { margin: 0; }
#vorschauRahmen { flex: 1; width: 100%; border: 0; background: #525659; }

/* --- Standardtexte -------------------------------------------------------------- */
.label-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hinweis code { font-size: 12px; background: var(--hg); padding: 1px 4px; border-radius: 4px; }
.nummernliste { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--leise); }
.nummernliste select, .nummernliste button { font-size: 13px; padding: 4px 8px; }
.bericht summary.neutral { color: var(--leise); }

/* --- Übersicht (Dashboard) ------------------------------------------------------ */
:root {
  --reihe-1: #2a78d6;          /* Diagramm-Reihe 1 (bezahlt / nicht fällig) */
  --reihe-2: #eb6834;          /* Diagramm-Reihe 2 (offen) */
  --status-kritisch: #d03b3b;  /* überfällig – immer mit ⚠ und Text */
  --status-gut: #2e7d4f;
}
@media (prefers-color-scheme: dark) {
  :root { --reihe-1: #3987e5; --reihe-2: #d95926; --status-kritisch: #e66767; --status-gut: #6fcf97; }
}
.uebersicht .leiste { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.uebersicht .leiste .meta { margin: 4px 0 0; }
.leise { color: var(--leise); }
.gut { color: var(--status-gut); }
.schlecht { color: var(--status-kritisch); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0 4px; }
.kachel {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 14px 16px;
  color: var(--text); text-decoration: none;
}
a.kachel:hover { border-color: var(--akzent); }
.kachel.kritisch { border-left: 4px solid var(--status-kritisch); padding-left: 13px; }
.kachel-titel { font-size: 13px; color: var(--leise); }
.kachel-wert { font-size: 26px; font-weight: 650; line-height: 1.15; overflow-wrap: anywhere; }
.kachel-wert small { font-size: 13px; font-weight: 500; color: var(--leise); }
.kachel-zeile { font-size: 12.5px; color: var(--leise); }

.dash-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 900px) { .dash-raster { grid-template-columns: minmax(0, 1fr); } }
.dash-karte { display: flex; flex-direction: column; min-width: 0; }
.dash-karte > * { flex-shrink: 0; }
.uebersicht .tabelle-rahmen.klein { max-height: none; margin-top: 0; }
.dash-karte td a, .status-matrix td a { color: var(--akzent); text-decoration: none; font-weight: 600; }
.dash-karte td a:hover, .status-matrix td a:hover { text-decoration: underline; }
.uebersicht .leiste-knoepfe { display: flex; gap: 8px; align-items: center; }
.uebersicht .leiste-knoepfe .knopf-link { font-size: inherit; padding: 7px 10px; }
.dash-titel { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dash-titel h2 { margin: 0; }
.dash-titel .meta { margin: 0; font-size: 12.5px; }

.legende { display: flex; gap: 16px; font-size: 12.5px; color: var(--leise); margin-bottom: 4px; }
.legende-eintrag { display: inline-flex; align-items: center; gap: 6px; }
.legende-punkt { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.diagramm { width: 100%; min-height: 40px; }
.diagramm svg { display: block; overflow: visible; }
.diagramm .gitter { stroke: var(--linie); stroke-width: 1; }
.diagramm .achse { stroke: var(--leise); stroke-opacity: .5; stroke-width: 1; }
.diagramm .achsentext { fill: var(--leise); font-size: 11px; font-variant-numeric: tabular-nums; }
.diagramm .wertetext { fill: var(--text); font-size: 12px; font-weight: 600; }
.diagramm .trefferflaeche { fill: transparent; }
.diagramm svg:hover .saeule path { opacity: .45; }
.diagramm svg .saeule:hover path { opacity: 1; }
.als-tabelle { margin-top: 10px; font-size: 13px; }
.als-tabelle summary { cursor: pointer; color: var(--leise); }
.als-tabelle .tabelle-rahmen { margin-top: 8px; }

.balken-zeile { display: grid; grid-template-columns: 170px minmax(40px, 1fr) max-content; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.balken-zeile + .balken-zeile { border-top: 1px solid var(--linie); }
.balken-name { white-space: nowrap; }
.balken-zeile.ueber .warn-icon { color: var(--status-kritisch); }
.balken-spur { height: 14px; display: block; }
.balken { display: block; height: 100%; background: var(--reihe-1); border-radius: 0 4px 4px 0; }
.balken-zeile.ueber .balken { background: var(--status-kritisch); }
.balken-wert { font-variant-numeric: tabular-nums; text-align: right; }
.balken-wert small { color: var(--leise); }
@media (max-width: 640px) {
  .balken-zeile { grid-template-columns: minmax(0, 1fr) max-content; row-gap: 4px; }
  .balken-spur { grid-column: 1 / -1; grid-row: 2; }
}

.dash-karte .tabelle-rahmen td.umbruch { white-space: normal; min-width: 120px; }
.feldhilfe.klickbar { cursor: pointer; text-decoration: underline dotted; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover { background: var(--zeile-hover); }
.leer-klein { color: var(--leise); font-size: 14px; margin: 4px 0 0; }
.status-matrix td:first-child a { color: var(--text); font-weight: 500; }
@media (max-width: 640px) {
  .dash-karte .tabelle-rahmen td.umbruch { min-width: 0; }
  /* Zeilen sind anklickbar – die Nummer darf auf dem Handy weg */
  .dash-karte table th:first-child, .dash-karte table td:first-child { display: none; }
  .status-matrix th:last-child, .status-matrix td:last-child { display: none; }
  .uebersicht th { letter-spacing: 0; font-size: 11px; }
  .status-matrix th { white-space: normal; }
  .dash-karte .tabelle-rahmen th, .dash-karte .tabelle-rahmen td { padding: 6px 6px; }
  .kachel { padding: 12px; }
  .kachel-wert { font-size: 22px; }
}

.dash-tooltip {
  position: fixed; z-index: 50; pointer-events: none; min-width: 170px;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 8px;
  box-shadow: 0 6px 20px rgb(0 0 0 / .15); padding: 8px 10px; font-size: 12.5px;
}
.dash-tooltip strong { display: block; margin-bottom: 4px; }
.tt-zeile { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; }
.tt-punkt { width: 9px; height: 9px; border-radius: 2px; }
.tt-punkt.ohne { background: none; }
.tt-wert { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

/* Elemente ohne Berechtigung (gesetzt von gemeinsam.js, siehe data-recht) */
[data-kein-recht] { display: none !important; }

/* --- Rollen & Rechte (Matrix) ----------------------------------------------------- */
.rollen-chip { display: inline-block; font-size: 12px; padding: 1px 8px; margin: 1px 4px 1px 0; border: 1px solid var(--linie); border-radius: 10px; }
.rollen-wahl { border: 1px solid var(--linie); border-radius: 8px; padding: 8px 12px 10px; margin: 0; }
.rollen-wahl legend { font-size: 13px; color: var(--leise); padding: 0 4px; }
.rollen-wahl .haken-zeile, .haken-zeile { display: flex; flex-direction: row; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 14px; cursor: pointer; color: var(--text); }
.matrix-rahmen { max-height: calc(100vh - 260px); overflow: auto; }
table.matrix { border-collapse: separate; border-spacing: 0; width: auto; min-width: 100%; }
table.matrix th, table.matrix td { white-space: normal; }
table.matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--flaeche); vertical-align: bottom; text-transform: none; letter-spacing: 0; }
table.matrix .recht-spalte { position: sticky; left: 0; z-index: 1; background: var(--flaeche); text-align: left; min-width: 230px; max-width: 320px;
  font-weight: 400; color: var(--text); font-size: 14px; text-transform: none; letter-spacing: 0; }
table.matrix thead .recht-spalte { z-index: 3; color: var(--leise); font-size: 12px; }
table.matrix .rolle-spalte { min-width: 110px; text-align: center; }
table.matrix .rolle-spalte.geaendert { box-shadow: inset 0 -3px 0 var(--akzent); }
.rolle-knopf { border: 0; background: none; padding: 2px 4px; font-weight: 600; color: var(--akzent); font-size: 13px; }
.rolle-knopf:disabled { color: var(--text); cursor: default; }
table.matrix td.zelle { text-align: center; }
table.matrix td.zelle input { width: 18px; height: 18px; cursor: pointer; }
table.matrix tr.modul-zeile th, table.matrix tr.modul-zeile td { background: var(--hg); font-weight: 650; padding-top: 12px; }
table.matrix tr.modul-zeile .recht-spalte { background: var(--hg); font-weight: 650; }
table.matrix tbody tr:not(.modul-zeile):hover th, table.matrix tbody tr:not(.modul-zeile):hover td { background: var(--zeile-hover); }

/* --- Kreditoren ------------------------------------------------------------------- */
.reiter .zaehler { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px; border-radius: 9px; font-size: 11.5px;
  line-height: 18px; background: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.status.kstatus-eingang { color: var(--leise); border-style: dashed; }
.status.kstatus-erfasst, .status.kstatus-visiert { color: var(--reihe-2, #c0601f); border-color: currentColor; }
.status.kstatus-freigegeben, .status.kstatus-exportiert { color: var(--akzent); border-color: var(--akzent); }
.status.kstatus-bezahlt { color: var(--status-gut, #2e7d4f); border-color: currentColor; }
.status.kstatus-abgelehnt { color: var(--leise); text-decoration: line-through; }
.status.lauf-erstellt { color: var(--akzent); border-color: var(--akzent); }
.status.lauf-ausgefuehrt { color: var(--status-gut, #2e7d4f); border-color: currentColor; }
.status.lauf-zurueckgenommen { color: var(--leise); text-decoration: line-through; }
.hinweis.warnung { border-left: 4px solid var(--status-kritisch, #d03b3b); }
.hinweis.rueckstand { color: var(--text); margin-top: 8px; }
.hinweis.rueckstand p { margin: 0 0 8px; }
.mini-text { font-size: 12.5px; padding: 3px 8px; }
.aktionen-zelle { white-space: nowrap; }

.zahl-gruppe { border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.zahl-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.zahl-kopf label { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--leise); }
.zahl-kopf select { max-width: 420px; }

.kreditor-seite { max-width: 1500px; }
.ablauf { display: flex; list-style: none; padding: 0; margin: 14px 0 10px; gap: 0; overflow-x: auto; }
.ablauf li { flex: 1; min-width: 120px; padding: 8px 12px 8px 16px; border-top: 4px solid var(--linie); font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.ablauf li span { color: var(--leise); font-size: 12px; }
.ablauf li.fertig { border-top-color: var(--status-gut, #2e7d4f); }
.ablauf li.aktuell { border-top-color: var(--akzent); }
.ablauf li.aktuell strong { color: var(--akzent); }
.ablauf.abgelehnt li { opacity: .5; }
.kreditor-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; }
.kreditor-raster.ohne-dokument { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.kreditor-dokument { position: sticky; top: 12px; margin-top: 16px; }
.kreditor-dokument iframe { width: 100%; height: calc(100vh - 120px); min-height: 520px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; }
.kreditor-formular .karte:first-child { margin-top: 16px; }
.eingabe-mit-knopf { display: flex; gap: 6px; }
.eingabe-mit-knopf input { flex: 1; min-width: 0; }
.zwei-felder { display: flex; gap: 6px; }
.zwei-felder input { flex: 1; min-width: 0; }
.zwei-felder input.kurz { flex: 0 0 90px; max-width: 90px; }
.kreditor-formular input.kurz { flex: none; width: 90px; max-width: 90px; }
table.kontierung input, table.kontierung select { width: 100%; }
table.rechnungszeilen td.p-zahl { padding-top: 12px; font-variant-numeric: tabular-nums; }
table.rechnungszeilen .p-privat { width: 60px; text-align: center; }
table.rechnungszeilen td.p-privat input { width: auto; margin-top: 10px; }
table.rechnungszeilen tr.privat td:nth-child(2) strong { text-decoration: line-through; text-decoration-color: var(--leise); }
@media (min-width: 901px) { table.rechnungszeilen td:nth-child(5) { width: 260px; } }
table.rechnungszeilen tr.kunde-kopf td { padding-top: 14px !important; border-bottom: 1px solid var(--linie); }
table.rechnungszeilen tr.kunde-kopf .kunde-name { font-weight: 700; margin-right: 10px; }
table.rechnungszeilen tr.kunde-kopf input { width: 280px; max-width: 100%; }
table.rechnungszeilen input.artikel-suche { margin-top: 4px; font-size: 13px; }
table.lizenzen th, table.lizenzen td { white-space: normal; vertical-align: top; }
table.lizenzen tbody tr { cursor: default; }
table.lizenzen td.zahl { white-space: nowrap; }
table.lizenzen td:last-child { min-width: 140px; }
@media (max-width: 700px) {
  table.lizenzen thead { display: none; }
  table.lizenzen tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "kunde status" "artikel artikel" "rechnung abo";
    gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
  table.lizenzen td { border: 0; padding: 0 !important; min-width: 0 !important; }
  table.lizenzen td:nth-child(1) { grid-area: kunde; }
  table.lizenzen td:nth-child(2) { grid-area: artikel; }
  table.lizenzen td:nth-child(3) { grid-area: rechnung; text-align: left; }
  table.lizenzen td:nth-child(4) { grid-area: abo; }
  table.lizenzen td:nth-child(5) { grid-area: status; text-align: right; }
  table.lizenzen td:nth-child(3)::before { content: "Rechnung "; color: var(--leise); }
  table.lizenzen td:nth-child(4)::before { content: "Abo "; color: var(--leise); }
}
table.lizenzen td.abweichung { color: var(--status-kritisch); font-weight: 600; }
table.lizenzen td.stimmt { color: var(--status-gut); }
table.lizenzen tr.nebensache td { color: var(--leise); }
table.rechnungszeilen .zeile-meta { display: block; font-size: 12px; color: var(--leise); margin-top: 2px; }
table.kontierung input.ungueltig { outline: 2px solid var(--status-kritisch, #d03b3b); }
.protokoll li { font-size: 13px; }
@media (max-width: 1000px) {
  .kreditor-raster { grid-template-columns: minmax(0, 1fr); }
  .kreditor-dokument { position: static; }
  .kreditor-dokument iframe { height: 70vh; }
}

/* E-Mail-Versand */
.versand-verlauf { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.automatik-laeufe { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.automatik-laeufe li { padding: 8px 0; border-top: 1px solid var(--linie); }
.automatik-laeufe li:first-child { border-top: 0; }
.automatik-laeufe ul { margin: 4px 0 0; padding-left: 18px; color: var(--leise); }
.mail-nur-smtp[hidden], .mail-nur-graph[hidden] { display: none !important; }
.mail-test { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mail-test input { flex: 1 1 220px; min-width: 0; }
.mail-test[hidden] { display: none; }
.einst-reiter { margin: 0 0 16px; }
.einst-reiter[hidden] { display: none; }
@media (max-width: 640px) { .einst-reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .einst-reiter button { white-space: nowrap; } }
dl.summen .abstand { margin-top: 14px; }
select.abrechnung { margin-top: 4px; font-size: 12.5px; padding: 3px 6px; width: 100%; }

/* Offertrechner */
.block { border: 1px solid var(--linie); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; background: var(--flaeche); }
.block.block-aus { opacity: .55; }
.block-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.block-name { font-weight: 600; font-size: 15px; flex: 1 1 240px; min-width: 0; }
.block-summe { font-size: 13px; color: var(--leise); font-variant-numeric: tabular-nums; }
.block-knoepfe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.marke-klein { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 9px; background: var(--zeile-hover);
  color: var(--leise); border: 1px solid var(--linie); white-space: nowrap; margin-left: 6px; }
.marke-extern { border-color: var(--akzent); color: var(--akzent); }
.parameter { margin-bottom: 10px; }
.regel-titel { font-size: 12px; color: var(--leise); margin: 6px 0 4px; }
.regel-liste { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.regel { display: flex; align-items: baseline; gap: 7px; font-size: 13px; }
.regel-art { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); min-width: 56px; }
.regel-warnung .regel-art { color: var(--test, #b45309); }
.rechner-positionen .p-griff { width: 26px; }
.rechner-positionen .formel { font-size: 11.5px; color: var(--leise); font-family: ui-monospace, Consolas, monospace;
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.rechner-positionen tr.pos-aus { opacity: .5; }
.rechner-positionen select.abrechnung { width: auto; margin-top: 0; }
.griff { cursor: grab; color: var(--leise); user-select: none; }
tr.zieht { opacity: .4; }
.komm-kopf { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); margin-bottom: 3px; }
.komm-kopf.notiz { color: #6b5bb5; }
.cloud-server input.zahl { width: 72px; }
.cloud-server input { width: 100%; min-width: 60px; }
.cloud-fg { margin-top: 12px; }
.fg-ausgabe { background: var(--hg); border: 1px solid var(--linie); border-radius: 6px; padding: 10px 12px;
  font-size: 12px; overflow-x: auto; max-height: 40vh; }
.vorschau-rahmen { flex: 1 1 420px; }
/* Belegvorschau im Buchungsdialog */
#belegBereich { border: 1px solid var(--linie); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }
#belegRahmen { width: 100%; height: 55vh; border: 1px solid var(--linie); border-radius: 4px; margin-top: 10px;
  background: var(--hg); }
@media (max-width: 640px) { #belegRahmen { height: 45vh; } }
.v-titel td { font-weight: 600; padding-top: 10px; }
.v-text td { color: var(--leise); white-space: pre-line; }
.warnung { border-left: 3px solid var(--test, #b45309); background: var(--zeile-hover); padding: 6px 10px; margin-bottom: 5px; font-size: 13px; border-radius: 0 4px 4px 0; }
.notiz { border-left: 3px solid var(--akzent); background: var(--zeile-hover); padding: 6px 10px; margin-bottom: 5px; font-size: 13px; border-radius: 0 4px 4px 0; }
.notiz-intern { border-left-color: #6b5bb5; }
.dritte { margin-top: 16px; }
.artikel-wahl { max-width: 320px; }
.card-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.card-kopf h2, .card-kopf h3 { margin: 0; }
.vorlagen-raster { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.vorlagen-liste { position: sticky; top: 12px; max-height: calc(100vh - 90px); overflow-y: auto; }
.vorlagen-liste input[type=search] { width: 100%; margin-bottom: 10px; }
.liste-kategorie { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); margin: 10px 0 4px; }
.liste-eintrag { display: block; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: var(--text); }
.liste-eintrag:hover { background: var(--zeile-hover); }
.liste-eintrag.aktiv { background: var(--zeile-hover); box-shadow: inset 2px 0 0 var(--akzent); }
.liste-eintrag small { display: block; color: var(--leise); font-size: 12px; }
.liste-eintrag.archiviert strong { text-decoration: line-through; }
.optionen-feld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--leise); }
.formel-hilfe { font-size: 13px; line-height: 1.7; margin: 6px 0 0; padding-left: 18px; }
.formel-hilfe code { background: var(--hg); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.vorschau-text { color: var(--leise); font-size: 13px; }
@media (max-width: 900px) { .vorlagen-raster { grid-template-columns: 1fr; } .vorlagen-liste { position: static; max-height: 300px; } }

/* Jahresabschluss */
.kennzahlen-zeile { display: flex; gap: 28px; flex-wrap: wrap; margin: 4px 0 6px; }
.kennzahlen-zeile > div { display: grid; gap: 2px; }
.kennzahlen-zeile .meta { margin: 0; }
.kennzahlen-zeile strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.pruefliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.pruefliste li { display: grid; grid-template-columns: 20px 1fr; gap: 6px; align-items: start; }
.pruefliste .zeichen { font-weight: 700; text-align: center; }
.pruefliste .ok .zeichen { color: var(--status-gut, #2e7d4f); }
.pruefliste .sperrt .zeichen, .pruefliste .definitiv .zeichen { color: var(--gefahr); }
.pruefliste .hinweis-punkt .zeichen { color: var(--test, #b45309); }
.pruefliste small { display: block; color: var(--leise); font-size: 12px; margin-top: 1px; }
.gj-liste li { flex-wrap: wrap; }
.gj-liste .klein-link { margin-left: auto; }
.status.gj-offen { color: var(--leise); border-style: dashed; }
.status.gj-provisorisch { color: var(--test, #b45309); border-color: currentColor; }
.status.gj-definitiv { color: var(--status-gut, #2e7d4f); border-color: currentColor; }
tr.wechsel td { background: var(--zeile-hover); font-style: italic; color: var(--leise); cursor: default; }

/* --- Kopfzeile: Dropdown-Menüs ---------------------------------------------------- */
nav { align-items: center; }
.menue { position: relative; }
.menue-knopf {
  border: 0; background: none; padding: 4px 2px; color: var(--leise); font-size: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.menue-knopf:hover, nav a:hover { color: var(--text); }
.menue-knopf.aktiv { color: var(--text); font-weight: 600; }
.menue-knopf .pfeil { font-size: 10px; opacity: .7; }
.menue-knopf[aria-expanded="true"] .pfeil { transform: rotate(180deg); }
.menue-liste {
  position: absolute; top: calc(100% + 6px); left: -10px; z-index: 50; min-width: 190px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.menue-liste.rechts { left: auto; right: 0; }
.menue-liste a, .menue-liste > button {
  display: block; text-align: left; padding: 7px 10px; border: 0; border-radius: 5px;
  background: none; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 400; white-space: nowrap;
}
.menue-liste a:hover, .menue-liste > button:hover { background: var(--zeile-hover); }
.menue-liste a.aktiv { font-weight: 600; background: var(--zeile-hover); }
.menue-trenner { border: 0; border-top: 1px solid var(--linie); margin: 5px 2px; }
.menue-kopf { display: grid; gap: 1px; padding: 6px 10px 4px; font-size: 14px; }
.menue-kopf span { font-size: 12px; color: var(--leise); }
.konto .konto-menue .menue-knopf {
  border: 1px solid var(--linie); border-radius: 6px; padding: 4px 10px; font-size: 13px; color: var(--text);
}
.konto .konto-menue .menue-knopf.warnung { border-color: var(--test); color: var(--test); }
.konto .konto-menue .menue-knopf.warnung::before { content: "●"; font-size: 9px; }
.konto .konto-name { margin: 0; color: inherit; font-size: inherit; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto .menue-liste button.system-info {
  align-items: flex-start; margin: 0; padding: 6px 10px; flex-direction: column; flex-basis: auto; order: 0;
}
@media (max-width: 640px) {
  .konto .konto-name { display: inline; max-width: 110px; }
  .menue-liste { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
  .menue-liste.rechts { left: 12px; right: 12px; }
}

/* --- Spesen (fürs Handy gebaut) ------------------------------------------------- */
.monat-wahl { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0 4px; }
.monat-wahl strong { min-width: 150px; text-align: center; font-size: 16px; }
.monat-wahl button { padding: 4px 14px; font-size: 18px; line-height: 1; }
.spesen-summen { display: flex; gap: 6px 16px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--leise); margin-bottom: 12px; }
.spesen-summen strong { color: var(--text); font-variant-numeric: tabular-nums; }
.spesen-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.spesen-liste li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; cursor: pointer;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
}
.spesen-liste li:hover { background: var(--zeile-hover); }
.spesen-liste .titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spesen-liste .betrag { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spesen-liste .unter { font-size: 12px; color: var(--leise); grid-column: 1 / -1; }
.spesen-liste .marken { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 1 / -1; margin-top: 4px; }
.spesen-liste .marken .status { font-size: 11px; padding: 1px 7px; }
.status.sp-offen { color: var(--test, #b45309); border-color: currentColor; }
.status.sp-verbucht { color: var(--status-gut, #2e7d4f); border-color: currentColor; }
.status.sp-abrechnung { color: var(--akzent); border-color: currentColor; }
.status.sp-wartet { color: var(--leise); border-style: dashed; }
.status.sp-fehler { color: var(--gefahr); border-color: currentColor; }
.spesen-fab { display: none; }
.beleg-feld { display: grid; gap: 8px; margin-bottom: 14px; justify-items: start; }
.beleg-feld canvas { max-width: 100%; max-height: 220px; border: 1px solid var(--linie); border-radius: 6px; }
.beleg-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.knopf-gross {
  display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 8px; cursor: pointer;
  background: var(--akzent); color: var(--akzent-text); font-weight: 600; border: 1px solid var(--akzent);
}
.knopf-gross.leise { background: var(--flaeche); color: var(--text); border-color: var(--linie); font-weight: 400; }
.betrag-zeile { display: flex; gap: 6px; }
.betrag-zeile input { flex: 1; min-width: 0; }
.betrag-zeile select { width: 82px; }
.feld-titel { display: block; font-size: 13px; color: var(--leise); margin-bottom: 4px; }
.breit-umschalter button { flex: 1; padding: 9px 6px; font-size: 14px; }
.spesen-dialog { width: min(560px, calc(100vw - 32px)); }

@media (max-width: 640px) {
  .spesen-seite main { padding-bottom: 96px; }
  .spesen-seite .leiste #btnNeu { display: none; }
  .spesen-fab {
    display: block; position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    padding: 14px; font-size: 17px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); z-index: 20;
  }
  /* Erfassen als Vollbild: Tastatur und Kamera brauchen den Platz */
  .spesen-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .spesen-dialog form { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .spesen-dialog input, .spesen-dialog select { font-size: 16px; } /* iOS zoomt sonst beim Antippen */
  .spesen-knoepfe { flex-wrap: wrap; }
  .spesen-knoepfe .primaer { flex: 1 1 100%; order: 10; padding: 12px; font-size: 16px; }
}
.merken-banner { display: grid; gap: 10px; color: var(--text); border-left: 4px solid var(--akzent); }
.geraete-liste li { justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.geraete-liste .meta { margin: 0; }

/* --- Sortierbare Tabellen (Klick auf den Spaltenkopf) ------------------------------- */
th.sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortierbar:hover { color: var(--text); }
th.sortierbar::after { content: "↕"; margin-left: 4px; font-size: 10px; opacity: 0; }
th.sortierbar:hover::after { opacity: .45; }
th.sortierbar[aria-sort="ascending"]::after { content: "▲"; opacity: .8; }
th.sortierbar[aria-sort="descending"]::after { content: "▼"; opacity: .8; }
th.sortierbar[aria-sort] { color: var(--text); }
th.sortierbar:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.vorformatiert { white-space: pre-line; }

/* Kontoblatt: kompakt, abwechselnd je Beleg eingefärbt, MWST zur Hauptbuchung */
:root { --band: rgba(31, 95, 139, .055); }
@media (prefers-color-scheme: dark) { :root { --band: rgba(255, 255, 255, .045); } }
table.kontoblatt th { padding: 6px 10px; }
table.kontoblatt td { padding: 3px 10px; font-size: 14px; line-height: 1.35; border-bottom: 0; }
table.kontoblatt tbody tr.band td { background: var(--band); }
table.kontoblatt tbody tr:hover td { background: var(--zeile-hover); }
table.kontoblatt tbody tr.summe td, table.kontoblatt tfoot td { padding: 6px 10px; border-bottom: 1px solid var(--linie); }
table.kontoblatt tbody tr.wechsel td { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
#blattZeilen .mwst-info { font-size: 11.5px; line-height: 1.25; color: var(--leise); white-space: normal; }
#blattZeilen tr.mwst-zu td { color: var(--leise); font-size: 12.5px; padding-top: 0; }
#blattZeilen tr.mwst-zu td.gekuerzt { padding-left: 22px; }
#blattZeilen .mwst-pfeil { font-weight: 600; }

/* Hinweis auf den Beleg zur Buchung (Journal, Kontoblatt) */
td.beleg-zelle { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.beleg-chip { display: inline-block; font-size: 11.5px; line-height: 1.5; padding: 0 7px; border-radius: 9px; margin-left: 4px;
  border: 1px solid var(--linie); color: var(--leise); max-width: 160px; overflow: hidden; text-overflow: ellipsis; vertical-align: 1px; margin-left: 7px; }
td.beleg-zelle .beleg-chip:first-child { margin-left: 0; }
.beleg-chip.geraten { border-style: dashed; } /* über Betrag und Datum zugeordnet */
.beleg-chip::before { content: "▤ "; opacity: .7; }
.beleg-chip.verkauf { color: var(--akzent); border-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
.beleg-chip.einkauf { color: #8a5a00; border-color: rgba(138, 90, 0, .4); }
.beleg-chip.spesen { color: #2e7d4f; border-color: rgba(46, 125, 79, .4); }
@media (prefers-color-scheme: dark) {
  .beleg-chip.einkauf { color: #e0b25c; border-color: rgba(224, 178, 92, .45); }
  .beleg-chip.spesen { color: #6fcf97; border-color: rgba(111, 207, 151, .45); }
}

/* Vorschaubild eines Belegs (Journal, Kontoblatt) */
.beleg-chip.mit-bild { cursor: zoom-in; }
.bild-vorschau { position: fixed; z-index: 50; width: 380px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, .22); padding: 8px; pointer-events: none; }
.bild-vorschau img { display: block; width: 100%; height: auto; max-height: 500px; object-fit: contain; object-position: top;
  background: #fff; border-radius: 4px; }
.bild-vorschau .bild-titel { font-size: 12px; color: var(--leise); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bild-vorschau .bild-lade { font-size: 13px; color: var(--leise); padding: 30px 0; text-align: center; }
@media print { .bild-vorschau { display: none !important; } }

/* MWST-Abgleich und Erfassen */
table.abgleich tbody tr { cursor: pointer; }
table.abgleich tr.summe td, table.abgleich-ziffern tr.summe td, table.erf-ziffern tr.summe td { font-weight: 600; }
table.abgleich tr.gewaehlt td { background: color-mix(in srgb, var(--akzent) 9%, transparent); }
table.abgleich-ziffern tr.abweichung td { background: color-mix(in srgb, var(--status-kritisch) 7%, transparent); }
table.abgleich-ziffern tr.abweichung td:nth-child(n+6) { color: var(--status-kritisch); font-weight: 600; }
table.erf-ziffern input.zahl { width: 9em; text-align: right; font-variant-numeric: tabular-nums; }
table.erf-ziffern input.berechnet { border-color: var(--status-kritisch); }
table.erf-ziffern td:first-child { width: 4em; }

/* Leistungsdatum einer Belegposition (MWST-Satz bei einem Satzwechsel) */
.link-knopf { background: none; border: none; padding: 2px 0; font-size: 12px; color: var(--leise); cursor: pointer; text-decoration: underline dotted; }
.link-knopf:hover { color: inherit; }
.leistung-zeile { margin-top: 4px; }
.leistung-zeile input.leistung { font-size: 12px; padding: 2px 4px; width: auto; }