/* --- Darstellung -----------------------------------------------------------------------
   Je Benutzer wählbar (Kontomenü → Darstellung, darstellung.js setzt die Attribute auf <html>):
     Modus:  hell | dunkel (Klasse .dunkel) | OLED (zusätzlich .oled, echtes Schwarz) | auto = wie das Gerät
     Dichte: data-dichte = kompakt | normal | weit
     Farbe:  data-farbe  = blau | petrol | gruen | violett | graphit                                  */
:root {
  --hg: #f5f5f2;
  --flaeche: #ffffff;
  --text: #1d1f21;
  --leise: #6b6f73;
  --linie: #e1e1dc;
  --akzent: #1f5f8b;
  --akzent-text: #ffffff;
  --gefahr: #b3261e;
  --zeile-hover: #eef4f8;
  color-scheme: light;
  /* Dichte «normal» */
  --schrift: 15px;
  --zelle-y: 9px;
  --zelle-x: 12px;
  --feld-y: 7px;
  --feld-x: 10px;
  --abstand: 16px;
  --kopf-hoehe: 52px;
  --seite-breite: 1200px;
  --seite-y: 24px;
}
:root.dunkel {
  --hg: #17191b;
  --flaeche: #202326;
  --text: #e6e6e3;
  --leise: #9a9ea2;
  --linie: #33373b;
  --akzent: #5aa3d6;
  --akzent-text: #0e1214;
  --gefahr: #ef7a72;
  --zeile-hover: #263038;
  color-scheme: dark;
}
/* OLED: echtes Schwarz, Flächen nur durch feine Linien getrennt */
:root.oled {
  --hg: #000000;
  --flaeche: #000000;
  --linie: #2a2a2a;
  --leise: #8f9296;
  --zeile-hover: #121619;
}
:root.oled input, :root.oled select, :root.oled textarea { background: #0b0b0b; }

/* Farben (Akzent); Blau ist der Standard */
:root[data-farbe="petrol"]  { --akzent: #0f6b6b; --zeile-hover: #eaf4f3; }
:root[data-farbe="gruen"]   { --akzent: #2d6a3e; --zeile-hover: #edf5ef; }
:root[data-farbe="violett"] { --akzent: #5b4a9e; --zeile-hover: #f1eff9; }
:root[data-farbe="graphit"] { --akzent: #3d4650; --zeile-hover: #f0f1f3; }
:root.dunkel[data-farbe="petrol"]  { --akzent: #4fb8b0; --zeile-hover: #1d3130; }
:root.dunkel[data-farbe="gruen"]   { --akzent: #6cc28a; --zeile-hover: #1e2e23; }
:root.dunkel[data-farbe="violett"] { --akzent: #a594e8; --zeile-hover: #29263a; }
:root.dunkel[data-farbe="graphit"] { --akzent: #b4bcc6; --zeile-hover: #2a2e33; }
:root.oled[data-farbe] { --zeile-hover: #121212; }

/* Dichte */
:root[data-dichte="kompakt"] {
  --schrift: 14px; --zelle-y: 4px; --zelle-x: 8px; --feld-y: 4px; --feld-x: 8px;
  --abstand: 10px; --kopf-hoehe: 44px; --seite-breite: 1440px; --seite-y: 14px;
}
:root[data-dichte="weit"] {
  --schrift: 16px; --zelle-y: 13px; --zelle-x: 16px; --feld-y: 10px; --feld-x: 12px;
  --abstand: 22px; --kopf-hoehe: 60px; --seite-breite: 1200px; --seite-y: 32px;
}

/* Drucken immer hell */
@media print {
  :root.dunkel, :root.oled {
    --hg: #ffffff; --flaeche: #ffffff; --text: #000000; --leise: #555555; --linie: #cccccc; --zeile-hover: transparent;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: var(--schrift)/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: var(--kopf-hoehe);
  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; }
:root.dunkel .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: var(--seite-breite); margin: 0 auto; padding: var(--seite-y) 16px; }
.leiste { display: flex; align-items: center; justify-content: space-between; }
h1 { font-size: 22px; margin: 0; }

.filter { display: flex; gap: calc(var(--abstand) * .75); margin: var(--abstand) 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: var(--feld-y) var(--feld-x);
}
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: var(--zelle-y) var(--zelle-x); 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: calc(var(--abstand) * 1.25) calc(var(--abstand) * 1.5); }
dialog h2 { margin: 0 0 16px; font-size: 18px; }
.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--abstand) * .75) var(--abstand); }
/* Spalten dürfen schmaler werden als ein langer Auswahltext – sonst ragt das Feld aus dem Dialog */
.raster > * { min-width: 0; }
.raster label > select, .raster label > input { max-width: 100%; }
.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; flex-wrap: wrap; 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, minmax(0, 1fr)); }
.raster.vier { grid-template-columns: repeat(4, minmax(0, 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: minmax(0, 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: calc(var(--abstand) * 1.1) calc(var(--abstand) * 1.25); margin-top: var(--abstand); }
.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; }
:root.dunkel .status-bezahlt, :root.dunkel .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); }
/* durchgehender Streifen links – auch beim Scrollen und in Dialogen */
body.testmandant { padding-left: 8px; }
body.testmandant::before {
  content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: 8px; background: var(--test);
  z-index: 1000; pointer-events: none;
}
body.testmandant dialog { border-left: 8px 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-link { color: #fff; text-decoration: underline; font-weight: 600; }
.nur-test { display: none !important; }
body.testmandant .nur-test { display: block !important; }
.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, body.testmandant::before { display: none !important; }
  body.testmandant { padding-left: 0; }
}

/* --- 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;
}
:root.dunkel { --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; } }
/* Vorlagen: Prüfhinweis, Assistent, Artikel wählen, Mengenwahl */
.pruef-hinweis { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; padding: 10px 12px;
  border: 1px solid var(--linie); border-left: 3px solid var(--test, #b45309); border-radius: 0 6px 6px 0;
  background: var(--flaeche); font-size: 14px; }
.pruef-hinweis span { flex: 1 1 320px; }
.schritte { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; counter-reset: schritt; flex-wrap: wrap; }
.schritte li { counter-increment: schritt; flex: 1 1 140px; padding: 7px 10px; border-radius: 6px; font-size: 13px;
  color: var(--leise); background: var(--hg); border: 1px solid var(--linie); cursor: pointer; }
.schritte li::before { content: counter(schritt) ". "; font-weight: 600; }
.schritte li.erledigt { color: var(--text); }
.schritte li.erledigt::before { content: "✓ "; color: var(--akzent); }
.schritte li.aktiv { color: var(--akzent-text); background: var(--akzent); border-color: var(--akzent); font-weight: 600; }
.assistent section[data-seite] { min-height: 260px; }
.assistent .knoepfe-links { align-items: center; }
.assistent table.positionen td.p-aktion { white-space: nowrap; }
.assistent .p-preis { width: 140px; }
.assistent .p-mwst { width: 200px; }
.knopf-paar { display: flex; gap: 4px; }
.artikel-knopf { width: 100%; text-align: left; font-size: 14px; padding: 5px 8px; white-space: normal; }
.artikel-knopf.fehlt { color: var(--gefahr); border-color: var(--gefahr); }
.menge-wahl { display: flex; flex-direction: column; gap: 4px; }
.menge-felder { display: flex; align-items: center; gap: 6px; }
.menge-felder select { flex: 1 1 auto; min-width: 0; }
.menge-felder input.menge-zahl { width: 84px !important; flex: 0 0 84px; }
.menge-felder span { color: var(--leise); font-size: 13px; white-space: nowrap; }
.menge-formel { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--leise); }
#mengeDialog { width: min(460px, calc(100vw - 32px)); }
#mengeDialog .menge-wahl select, #mengeDialog .menge-wahl input { padding: 6px 8px; }
.menge-mit-knopf { display: flex; gap: 4px; }
.menge-mit-knopf .menge-knopf { flex: 0 0 auto; font-style: italic; font-family: Georgia, serif; }
.auswahl-liste { max-height: 46vh; overflow-y: auto; }
.auswahl-liste td { vertical-align: top; }
.meta-zeile { display: block; color: var(--leise); font-size: 12px; margin-top: 2px; }
#artikelDialog .breit-feld { flex: 1 1 280px; }
#artikelDialog .feld-zeile { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); max-width: 320px; }
#artikelDialog .haken-feld.klein { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--leise); }
#artikelDialog .haken-feld.klein input { width: auto; }
@media (max-width: 900px) {
  /* Assistent: Artikel und Menge über die ganze Breite, Preis und Abrechnung nebeneinander */
  .assistent table.positionen tr { grid-template-columns: 1fr 1fr; }
  .assistent table.positionen td:first-child, .assistent table.positionen td:nth-child(2) { grid-column: 1 / -1; }
  .assistent table.positionen td[colspan] { grid-column: 1 / -1; }
  .assistent .p-preis, .assistent .p-mwst { width: auto; }
  .assistent select.abrechnung { width: 100%; }
}
@media (max-width: 640px) {
  .schritte li { flex-basis: 45%; }
}

/* 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); }
:root.dunkel { --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); }
:root.dunkel .beleg-chip.einkauf { color: #e0b25c; border-color: rgba(224, 178, 92, .45); }
:root.dunkel .beleg-chip.spesen { color: #6fcf97; border-color: rgba(111, 207, 151, .45); }

/* Vorschaubild eines Belegs (Journal, Kontoblatt) */
.beleg-chip.mit-bild, td.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; }

/* --- Lager ------------------------------------------------------------------------ */
.sn-text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.sn-wahl { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; max-height: 180px; overflow-y: auto; }
.sn-wahl .haken { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; gap: 6px; }
td.plus { color: var(--status-gut); }
td.minus { color: var(--text); }
.status.sn-lager { color: var(--akzent); border-color: var(--akzent); }
.status.sn-geliefert { color: var(--status-gut); border-color: var(--status-gut); }
.status.sn-ausgebucht { color: var(--leise); border-style: dashed; }
.lager-zeile { display: block; margin-top: 4px; }
.lager-zeile label { display: inline-flex; align-items: center; gap: 6px; }
table.positionen .lager-zeile select.lager-ort { width: auto; padding: 3px 6px; font-size: 13px; }
table.positionen textarea.sn-feld { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.knapp { color: var(--gefahr); font-weight: 600; }
table.zaehlliste td.zaehlfeld { width: 200px; }
table.zaehlliste td.zaehlfeld input { width: 110px; }
table.zaehlliste td.zaehlfeld textarea { width: 100%; min-width: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
table.zaehlliste.blind .soll { display: none; }
#eingangListe .karte h2 { font-size: 16px; margin: 0; }
#eingangListe textarea { width: 100%; min-width: 160px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
#eingangListe td.aktionen { white-space: nowrap; }
#eingangListe td.aktionen button + button { margin-left: 6px; }
@media print {
  .kacheln { display: none !important; }
  table.zaehlliste td.zaehlfeld input, table.zaehlliste td.zaehlfeld textarea { border: 0; border-bottom: 1px solid #000; border-radius: 0; background: none; }
}
#eingangListe .karte h2 a { color: var(--akzent); text-decoration: none; }
#eingangListe .karte h2 a:hover { text-decoration: underline; }
.raster .sn-wahl label.haken, .sn-wahl label.haken { flex-direction: row; align-items: center; display: inline-flex; color: var(--text); }
.raster .sn-wahl label.haken input { width: auto; }
[data-seite] td a, #lagerArtikelDialog td a { color: var(--akzent); }

/* --- Importseite ------------------------------------------------------------------- */
.import-bereich { margin-top: 28px; }
.import-bereich > h2 { font-size: 18px; margin: 0 0 8px; }
.import-token { max-width: 720px; }
.import-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.import-karte { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; margin: 0; }
.import-karte p { margin: 0; }
.import-karte .knoepfe-links { margin-top: auto; padding-top: 6px; }
.import-karte-kopf { display: flex; align-items: center; gap: 10px; }
.import-karte-kopf h3 { margin: 0; font-size: 15px; }
.import-karte .schritt { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none;
  border-radius: 50%; background: var(--akzent); color: var(--akzent-text); font-size: 13px; font-weight: 600; }
.import-karte .letzter-lauf { overflow-wrap: anywhere; }
.filter-editor { display: flex; flex-direction: column; gap: 6px; }
.filter-zeilen { display: flex; flex-direction: column; gap: 6px; }
.filter-zeile { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filter-zeile select, .filter-zeile input { min-width: 0; }
.filter-zeile input { flex: 1 1 160px; }
.filter-editor .knoepfe-links { align-items: center; gap: 10px; }
table.zuordnung select { width: 100%; max-width: 320px; }
td.gekuerzt { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status.ergebnis-neu { color: var(--status-gut); border-color: var(--status-gut); }
.status.ergebnis-aktualisiert { color: var(--akzent); border-color: var(--akzent); }
.status.ergebnis-unveraendert, .status.ergebnis-uebersprungen { color: var(--leise); border-style: dashed; }
.status.ergebnis-fehler { color: var(--gefahr); border-color: var(--gefahr); }
#dateiAssistent .dash-titel { display: flex; justify-content: space-between; align-items: center; }
#dateiAssistent .dash-titel h2 { margin: 0; font-size: 17px; }
.feld-knopf { display: flex; align-items: flex-end; gap: 8px; }

/* --- Bank ------------------------------------------------------------------------- */
.bank-tabelle { table-layout: fixed; width: 100%; }
.bank-tabelle td { vertical-align: top; white-space: normal; }
.bank-tabelle tbody tr { cursor: pointer; }
.bank-tabelle th:nth-child(1) { width: 34px; }
.bank-tabelle th:nth-child(2) { width: 100px; }
.bank-tabelle th:nth-child(4) { width: 110px; }
.bank-tabelle th:nth-child(6) { width: 250px; }
.bank-tabelle td.minus { color: var(--gefahr); }
.bank-tabelle td.plus { color: var(--status-gut, #2e7d4f); }
.bank-tabelle tr.erledigt td { color: var(--leise); }
.bank-text, .bank-tabelle td:nth-child(5) { overflow-wrap: anywhere; }
.bank-text strong { display: block; font-weight: 600; }
.bank-text .meta, .bank-tabelle td > .meta { display: block; font-size: 12.5px; margin: 2px 0 0; }
.bank-tabelle td.aktionen-zelle { text-align: right; white-space: nowrap; }
.bank-tabelle td.aktionen-zelle button + button { margin-left: 6px; }
.bank-text .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.bank-vorschlag { display: block; }
.bank-vorschlag.sicher::before { content: "✓ "; color: var(--status-gut, #2e7d4f); font-weight: 700; }
.bank-ablage { margin-top: 12px; padding: 28px; border: 2px dashed var(--akzent); border-radius: 10px; text-align: center; color: var(--akzent); }
.reiter.klein { margin: 8px 0 12px; }
.reiter.klein button { padding: 6px 10px; }
.bank-bewegung dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 8px; font-size: 14px; }
.bank-bewegung dt { color: var(--leise); }
.bank-bewegung dd { margin: 0; overflow-wrap: anywhere; }
.bank-erledigt { font-weight: 600; margin: 8px 0 0; }
.bank-kandidaten { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; margin-top: 8px; }
.bank-kandidat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; text-align: left; padding: 8px 10px; background: none; }
.bank-kandidat .titel { overflow-wrap: anywhere; }
.bank-kandidat .meta { grid-column: 1; font-size: 12.5px; }
.bank-kandidat .zahl { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bank-kandidat.gewaehlt { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
#zuSuche { width: 100%; }
.bank-differenz { border-left: 3px solid var(--gefahr); padding-left: 12px; }
.bank-differenz p { margin: 0 0 8px; }
#meldung { white-space: pre-line; }
@media (max-width: 640px) {
  .bank-tabelle th:nth-child(1), .bank-tabelle td:nth-child(1),
  .bank-tabelle th:nth-child(5), .bank-tabelle td:nth-child(5),
  .bank-tabelle th:nth-child(6), .bank-tabelle td:nth-child(6) { display: none; }
  .bank-tabelle th:nth-child(2) { width: 82px; }
  .bank-tabelle th:nth-child(4) { width: 88px; }
}
.menue-knopf { white-space: nowrap; }

/* --- Postausgang ------------------------------------------------------------------ */
.pa-band { background: color-mix(in srgb, var(--akzent) 12%, var(--flaeche)); border-bottom: 1px solid var(--linie);
  padding: 6px 16px; font-size: 13.5px; text-align: center; }
.pa-band a { font-weight: 600; }
.pa-tabelle th.pa-wahl, .pa-tabelle td.pa-wahl { width: 34px; }
.pa-tabelle .fehlertext { color: var(--gefahr); }
.pa-vorgaenge { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-vorgaenge button { border-radius: 14px; padding: 4px 12px; font-size: 13px; }
.pa-vorgaenge button.aktiv { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.pa-tabelle { table-layout: fixed; width: 100%; }
.pa-tabelle th:nth-child(2) { width: 160px; }
.pa-tabelle th:nth-child(4) { width: 26%; }
.pa-tabelle td { white-space: normal; vertical-align: top; overflow-wrap: anywhere; }
.pa-tabelle tbody tr { cursor: pointer; }
.pa-tabelle .meta { display: block; margin: 2px 0 0; font-size: 12.5px; }
.pa-vorgang { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--test); color: var(--test); white-space: nowrap; }
.pa-kopf { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 12px; font-size: 14px; }
.pa-kopf dt { color: var(--leise); }
.pa-kopf dd { margin: 0; overflow-wrap: anywhere; }
.pa-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 14px; background: var(--hg); border: 1px solid var(--linie);
  border-radius: 8px; padding: 12px 14px; max-height: 45vh; overflow: auto; margin: 0; }
.pa-anhaenge { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 640px) {
  .pa-tabelle th:nth-child(4), .pa-tabelle td:nth-child(4) { display: none; }
  .pa-tabelle th:nth-child(2) { width: 92px; }
}

/* --- Darstellung (Kontomenü) ------------------------------------------------------- */
.darstellung-wahl { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px; min-width: 250px; }
.darstellung-titel { font-size: 12px; color: var(--leise); }
.darstellung-gruppe { display: flex; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }
.menue-liste .darstellung-gruppe > button { flex: 1; border: 0; border-radius: 0; padding: 4px 6px; font-size: 12.5px;
  color: var(--leise); background: var(--flaeche); text-align: center; white-space: nowrap; }
.menue-liste .darstellung-gruppe > button + button { border-left: 1px solid var(--linie); }
.menue-liste .darstellung-gruppe > button.an { background: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.darstellung-gruppe.farbe { border: 0; gap: 8px; padding: 2px 0; }
.menue-liste .darstellung-gruppe.farbe > button.farbpunkt { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 2px solid var(--flaeche); box-shadow: 0 0 0 1px var(--linie); }
.menue-liste .darstellung-gruppe.farbe > button.farbpunkt + button { border-left: 2px solid var(--flaeche); }
.menue-liste .darstellung-gruppe.farbe > button.farbpunkt.an { box-shadow: 0 0 0 2px var(--text); }
.farbpunkt[data-farbe="blau"] { background: #1f5f8b !important; }
.farbpunkt[data-farbe="petrol"] { background: #0f6b6b !important; }
.farbpunkt[data-farbe="gruen"] { background: #2d6a3e !important; }
.farbpunkt[data-farbe="violett"] { background: #5b4a9e !important; }
.farbpunkt[data-farbe="graphit"] { background: #3d4650 !important; }

/* Abos aus einem Abgleich ergänzen (Pax8-Lizenzen, Domains) */
.ergaenzen-leiste { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 10px; }
td.abo-vorschlag { min-width: 220px; white-space: normal; }
td.abo-vorschlag label.haken { align-items: flex-start; color: var(--text); font-size: 13px; }
td.abo-vorschlag label.haken input { margin-top: 2px; }
td.abo-vorschlag select, td.abo-vorschlag input.artikel-suche { display: block; width: 100%; max-width: 280px; margin-top: 4px; font-size: 13px; }

/* Domains: je Domain zwei Zeilen (Hauptangabe, darunter Details) */
table.domains td { vertical-align: top; white-space: normal; }
table.domains td:first-child strong { font-weight: 600; }
table.domains td:nth-child(2) { white-space: nowrap; }
@media (max-width: 760px) {
  table.domains td:nth-child(2) { white-space: normal; }
}
.unterzeile.warnung-text { color: var(--test); }

/* Statusbalken langer Anfragen (Importe, smerp.mitFortschritt) */
.fortschritt { margin: 8px 0 4px; display: grid; gap: 6px; }
.fortschritt-balken { position: relative; height: 8px; border-radius: 4px; background: var(--linie); overflow: hidden; }
.fortschritt-fuellung { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--akzent); border-radius: 4px; transition: width .4s ease; }
.fortschritt-balken.unbestimmt .fortschritt-fuellung { width: 30%; animation: fortschritt-wandern 1.4s ease-in-out infinite; transition: none; }
@keyframes fortschritt-wandern { from { left: -30%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .fortschritt-balken.unbestimmt .fortschritt-fuellung { animation: none; width: 100%; opacity: .35; } }
.fortschritt-schritt { font-variant-numeric: tabular-nums; min-height: 1.2em; }

/* Private Buchhaltung (Betriebsart «privat» der Lizenz, Klasse auf <html>): ohne MWST */
html:not(.privat) .nur-privat,
html.privat .nur-firma,
html.privat label:has(> select[name=mwst_code]),
html.privat table.sammel :is(th.p-mwst, td:has(> select.mwst)),
html.privat table:has(> #journal) :is(th, td):nth-child(8),
html.privat table:has(> #kontenListe) :is(th, td):nth-child(5),
html.privat table:has(> #detailZeilen) :is(th, td):nth-child(4) { display: none !important; }

/* Budget und Ausgaben (Buchhaltung) */
:root { --reihe-ein: #1c6aa6; --reihe-aus: #c2571a; }
:root.dunkel { --reihe-ein: #4a90c8; --reihe-aus: #cf7440; }
.budget-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 12px 0; }
.budget-kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px; }
.budget-kachel .wert { font-size: 1.45em; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }
.budget-diagramm { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px 8px; margin: 0 0 12px; min-width: 0; }
.budget-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9em; color: var(--leise); margin-bottom: 8px; }
.budget-legende span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.budget-legende .reihe-ein::before { background: var(--reihe-ein); }
.budget-legende .reihe-aus::before { background: var(--reihe-aus); }
.budget-monate { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; height: 160px;
  border-bottom: 1px solid var(--linie); }
.budget-monat { display: flex; gap: 2px; align-items: end; justify-content: center; height: 100%; cursor: default; }
.budget-monat:hover { background: var(--zeile-hover); }
.budget-monat i { display: block; width: min(14px, 40%); border-radius: 4px 4px 0 0; min-height: 0; }
.budget-monat i.ein { background: var(--reihe-ein); }
.budget-monat i.aus { background: var(--reihe-aus); }
.budget-achse { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; font-size: .8em; overflow: hidden; color: var(--leise); text-align: center; padding-top: 4px; }
table.budget td.zahl, table.budget th.zahl { white-space: nowrap; }
table.budget :is(td, th):first-child { position: sticky; left: 0; z-index: 1; background: var(--flaeche); min-width: 12em; max-width: 18em; }
table.budget tr.budget-gruppe td:first-child { background: var(--hg); }
table.budget td.monat { color: var(--leise); }
table.budget :is(td, th) { padding-left: 8px; padding-right: 8px; }
table.budget :is(td, th).monat { padding-left: 4px; padding-right: 4px; }
table.budget a { color: inherit; text-decoration: none; }
table.budget a:hover { text-decoration: underline; }
table.budget tr.budget-gruppe td { font-weight: 650; background: var(--hg); }
table.budget tr.budget-total td { font-weight: 650; border-top: 2px solid var(--linie); }
table.budget input.budget-eingabe { width: 7.5em; text-align: right; }
.budget-balken { position: relative; height: 6px; border-radius: 3px; background: var(--linie); min-width: 80px; margin-top: 4px; }
.budget-balken > span { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--akzent); }
.budget-balken.ueber > span { background: var(--gefahr); }
.budget-balken > b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: .55; }
.budget-monate-aus table.budget .monat { display: none; }