:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #dde1e6;
  --border-strong: #c3c9d1;
  --text: #1f2937;
  --text-muted: #6b7280;
  --accent: #2f5d8a;
  --accent-light: #eaf1f8;
  --ertrag: #1e7a4c;
  --ertrag-bg: #eaf7f0;
  --aufwand: #a33b3b;
  --aufwand-bg: #fbeeee;
  --hochrechnung: #8a6d1f;
  --hochrechnung-bg: #fbf3d9;
  --plan: #2f5d8a;
  --plan-bg: #eaf1f8;
  --radius: 8px;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

header.app-header {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 30;
}

header.app-header h1 {
  font-size: 17px;
  margin: 0;
  font-weight: 650;
}

header.app-header .subtitle {
  color: var(--text-muted);
  font-size: 12.5px;
}

.szenario-bar { margin-left: auto; display: flex; align-items: center; gap: 6px; align-self: center; }
.szenario-bar select {
  border: 1px solid var(--border-strong); border-radius: 6px; padding: 5px 8px; font-size: 12.5px;
  background: var(--plan-bg); color: var(--plan); font-weight: 600;
}
.szenario-bar button {
  border: 1px solid var(--border-strong); background: #fff; border-radius: 6px;
  padding: 5px 8px; font-size: 12px; cursor: pointer; color: var(--text-muted);
}
.szenario-bar button:hover { background: var(--bg); color: var(--text); }

.hidden { display: none !important; }

.user-bar { display: flex; align-items: center; gap: 8px; align-self: center; font-size: 12.5px; color: var(--text-muted); }
.user-bar button {
  border: 1px solid var(--border-strong); background: #fff; border-radius: 6px;
  padding: 5px 8px; font-size: 12px; cursor: pointer; color: var(--text-muted);
}
.user-bar button:hover { background: var(--bg); color: var(--text); }
.user-bar a { color: var(--accent); text-decoration: none; font-weight: 600; }
.user-bar a:hover { text-decoration: underline; }

.login-screen { display: flex; align-items: center; justify-content: center; min-height: 70vh; }
.login-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; width: 320px; box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.login-card h2 { margin: 0 0 4px; font-size: 17px; }
.login-card p.hinweis { color: var(--text-muted); font-size: 12.5px; margin: 0 0 18px; }
.login-card label { display: block; font-size: 12.5px; color: var(--text-muted); margin: 12px 0 4px; }
.login-card input {
  width: 100%; border: 1px solid var(--border-strong); border-radius: 6px; padding: 8px 10px; font-size: 14px;
}
.login-card button.login-submit {
  width: 100%; margin-top: 18px; background: var(--accent); color: #fff; border: none;
  border-radius: 6px; padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.login-card button.login-submit:hover { opacity: 0.92; }
.login-card .login-fehler { color: var(--aufwand); font-size: 12.5px; margin-top: 10px; min-height: 1em; }
.login-card .login-sso-btn {
  display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none;
  background: #fff; color: #222; border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 10px; font-size: 14px; font-weight: 600;
}
.login-card .login-sso-btn:hover { background: #f5f5f5; }
.login-card .login-trenner {
  display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; margin: 14px 0 2px;
}
.login-card .login-trenner::before, .login-card .login-trenner::after { content: ''; flex: 1; height: 1px; background: var(--border); }

nav.tabs {
  display: flex;
  gap: 4px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  position: sticky;
  top: 49px;
  z-index: 29;
  overflow-x: auto;
}

nav.tabs button {
  border: none;
  background: transparent;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

nav.tabs button:hover { color: var(--text); }

nav.tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

main {
  padding: 20px 24px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.panel h2 {
  font-size: 15px;
  margin: 0 0 4px 0;
}

.panel .hint {
  color: var(--text-muted);
  font-size: 12.5px;
  margin-bottom: 14px;
  line-height: 1.5;
}

.link-btn {
  border: none; background: none; padding: 0; color: var(--accent); text-decoration: underline;
  font-size: inherit; cursor: pointer;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--bg);
}

.kpi .label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; }
.kpi .value { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.kpi .value.neg { color: var(--aufwand); }
.kpi .value.pos { color: var(--ertrag); }
.kpi .row { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; color: var(--text-muted); }

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

table.wide { min-width: 1500px; }

/* Konto-Ebene: begrenzte Hoehe statt die ganze (oft 100+ Zeilen lange) Seite scrollen zu muessen -
   sonst ist die horizontale Scrollleiste erst ganz unten auf der Seite erreichbar. Kopfzeile bleibt
   dank position:sticky innerhalb dieses Rahmens oben haengen, beide Scrollleisten sind so immer
   sichtbar/erreichbar, ohne die Seite selbst zu scrollen. */
.konten-scroll { max-height: 65vh; overflow-y: auto; }
.konten-scroll::-webkit-scrollbar { height: 13px; width: 13px; }
.konten-scroll::-webkit-scrollbar-track { background: var(--bg); }
.konten-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 7px; border: 3px solid var(--bg); }
.konten-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.konten-scroll::-webkit-scrollbar-corner { background: var(--bg); }

/* Die beiden Override-Spalten ganz rechts (Hochr. 2026 H2, Plan 2027) rechts anheften, analog zur
   linken Konto/Kategorie-Spalte - sonst sind sie bei vielen Perioden (v.a. Monatsansicht, oft 50+
   Spalten breit) erst nach sehr langem Scrollen erreichbar. Kein eigener Hintergrund noetig (anders
   als bei der linken Spalte): .plan-cell/.override-cell/thead th haben bereits opake, korrekte
   Hintergruende - position:sticky aendert daran nichts, nur an der Positionierung.
   WICHTIG: feste Breite (nicht dem Auto-Layout ueberlassen) - die natuerliche Breite variiert je
   Zeile (Zellen mit aktiver Korrektur sind durch den zusaetzlichen Ruecksetzen-Button breiter als
   Zellen ohne), das Auto-Layout macht dann ALLE Zellen der Spalte so breit wie die breiteste - der
   sticky right-Offset der zweiten Spalte muss exakt dieser (durch die erste Spalte vorgegebenen)
   Breite entsprechen, sonst ueberlappt sie die davor liegende, nicht-sticky Spalte beim Scrollen. */
table.konten-tabelle td:last-child, table.konten-tabelle th:last-child,
table.konten-tabelle td:nth-last-child(2), table.konten-tabelle th:nth-last-child(2) {
  width: 190px; min-width: 190px; max-width: 190px;
}
table.konten-tabelle td:last-child, table.konten-tabelle th:last-child,
table.konten-tabelle td:nth-last-child(2), table.konten-tabelle th:nth-last-child(2) { position: sticky; }
table.konten-tabelle td:last-child, table.konten-tabelle th:last-child { right: 0; }
table.konten-tabelle td:nth-last-child(2), table.konten-tabelle th:nth-last-child(2) { right: 190px; }
/* z-index getrennt von position/right gesetzt (nicht in derselben Regel wie oben!), sonst gewinnt
   die spezifischere thead-Regel oben unbeabsichtigt auch fuer den z-index und die Kopfzeile faellt
   beim Scrollen hinter die Datenzeilen zurueck (Text/Zahlen scheinen durcheinander). */
table.konten-tabelle tbody td:last-child, table.konten-tabelle tbody td:nth-last-child(2) { z-index: 1; }
table.konten-tabelle thead th:last-child, table.konten-tabelle thead th:nth-last-child(2) { z-index: 3; }
table.konten-tabelle td:nth-last-child(2) { border-left: 1px solid var(--border-strong); }

/* Trend-Spalte (Sparkline, ausblendbar ueber state.zeigeTrend) - wird als DRITTE sticky Spalte vor
   den beiden Override-Spalten eingehaengt, sobald aktiv; ohne sie bleibt das obige 2-Spalten-Layout
   unveraendert. right-Offset = Breite der beiden Override-Spalten (190px + 190px). */
table.konten-tabelle.mit-trend td:nth-last-child(3), table.konten-tabelle.mit-trend th:nth-last-child(3) {
  width: 108px; min-width: 108px; max-width: 108px; position: sticky; right: 380px; text-align: center;
  border-left: 1px solid var(--border-strong);
}
table.konten-tabelle.mit-trend tbody td:nth-last-child(3) { z-index: 1; }
table.konten-tabelle.mit-trend thead th:nth-last-child(3) { z-index: 3; }
table.konten-tabelle.mit-trend td:nth-last-child(2) { border-left: none; }
/* Eigene, absichtlich NIEDRIGE Spezifitaet (nur 1 Klasse, wie td.plan-cell) - Zeilentypen mit
   eigenem Hintergrund (tr.kategorie-row td, tr.bereich-row td) sollen diesen Fallback weiterhin
   ueberschreiben koennen, s. Kommentar bei td:first-child oben. */
td.trend-cell { background: var(--panel); }
.trend-inner { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.trend-label { font-size: 10.5px; white-space: nowrap; }
.trend-badge {
  font-size: 10px; background: var(--hochrechnung-bg); color: var(--hochrechnung);
  padding: 1px 5px; border-radius: 6px; white-space: nowrap;
}

.beleg-pill {
  display: inline-block; font-size: 11px; text-decoration: none; color: var(--accent);
  background: var(--accent-light); padding: 1px 6px; border-radius: 6px; white-space: nowrap;
}
.beleg-pill:hover { background: #dfeaf3; }

th, td {
  padding: 6px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

th:first-child, td:first-child { text-align: left; }

thead th {
  position: sticky;
  top: 0;
  background: #fafbfc;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  z-index: 2;
  border-bottom: 1px solid var(--border-strong);
}

thead tr.group-row th {
  top: 0;
  background: #f2f4f6;
  border-bottom: 1px solid var(--border);
}
thead tr.label-row th { top: 26px; }

td:first-child, th:first-child {
  position: sticky;
  left: 0;
  /* Default-Hintergrund (nicht "inherit"): eine <tr> ohne eigene background-Regel liefert sonst
     transparent, wodurch beim Scrollen die daruntergerutschten Zellen der gleichen Zeile durch die
     sticky Spalte durchscheinen ("Buchstabensalat"). Zeilentypen mit eigenem Hintergrund (z.B.
     tr.kategorie-row td, tr.bereich-row td) sind spezifischer und ueberschreiben dies weiterhin. */
  background: var(--panel);
  z-index: 1;
  min-width: 260px;
  max-width: 420px;
  white-space: normal;
}
thead th:first-child { background: #fafbfc; z-index: 3; }

tr.bereich-row td {
  background: #eef0f3;
  font-weight: 700;
  font-size: 13px;
  padding-top: 9px;
  padding-bottom: 9px;
}

tr.kategorie-row { cursor: pointer; }
tr.kategorie-row td { background: var(--accent-light); font-weight: 620; }
tr.kategorie-row:hover td { background: #dfeaf3; }
tr.kategorie-row .chevron { display: inline-block; width: 14px; transition: transform .12s; color: var(--accent); }
tr.kategorie-row.open .chevron { transform: rotate(90deg); }
tr.kategorie-row .ref-note { font-weight: 400; color: var(--text-muted); font-size: 11px; }

/* Ergebnis-Zeile (Erträge ./. Aufwand) deutlich von der Summe-Aufwand-Zeile direkt darüber absetzen
   (User-Wunsch 20.08.2026) - dunkler Balken statt der sonst gleichen hellblauen Kategorie-Row-Optik,
   damit die Bottom-Line auf einen Blick als eigenständiges Ergebnis erkennbar ist, nicht als weitere
   Zwischensumme. Gilt fuer beide Vorkommen (Konto-Ebene + Soll-Ist-GuV), gleiche Klasse. */
tr.ergebnis-row { cursor: default; border-top: 2px solid var(--text); }
tr.ergebnis-row td, tr.ergebnis-row:hover td { background: var(--text); color: #fff; font-size: 13.5px; padding-top: 8px; padding-bottom: 8px; }
tr.ergebnis-row .ref-note { color: rgba(255, 255, 255, 0.7); }

tr.konto-row td { color: var(--text); font-size: 13px; }
tr.konto-row td:first-child { padding-left: 30px; color: var(--text-muted); }
tr.konto-row .konto-nr { color: var(--text-muted); font-family: var(--mono); font-size: 11.5px; margin-right: 6px; }
tr.konto-row.hidden-row { display: none; }
tr.konto-row:hover td { background: #fbfbfc; }
tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover td { background: var(--accent-light); }
tr.konto-row.no-data { color: var(--text-muted); opacity: 0.55; }

td.num.ist { }
td.num.hochr { color: var(--hochrechnung); background: var(--hochrechnung-bg); }
td.num.summe { font-weight: 620; }
td.num.zero { color: #c6cad1; }
td.num.clickable { cursor: pointer; }
td.num.clickable:hover { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }

td.plan-cell { background: var(--plan-bg); }
td.plan-cell input {
  width: 100px;
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  background: #fff;
  padding: 3px 6px;
  text-align: right;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--plan);
}
td.plan-cell input::placeholder { color: #b7b2d8; font-style: italic; }
td.plan-cell input:focus { outline: none; border-style: solid; border-color: var(--accent); }
td.plan-cell.saved input { border-color: var(--ertrag); }

button.begruendung-btn {
  border: none; background: transparent; cursor: pointer; font-size: 12px; opacity: 0.3;
  padding: 2px 3px; border-radius: 4px; vertical-align: middle;
}
button.begruendung-btn:hover { opacity: 0.7; background: var(--bg); }
button.begruendung-btn.hat-begruendung { opacity: 1; }

button.revert-btn {
  border: none; background: transparent; cursor: pointer; font-size: 12px; opacity: 0.5;
  padding: 2px 3px; border-radius: 4px; vertical-align: middle; color: var(--accent);
}
button.revert-btn:hover { opacity: 1; background: var(--bg); }

td.override-cell.override-hochr { background: var(--hochrechnung-bg); }
td.override-cell.override-hochr input { border-color: var(--hochrechnung); color: var(--hochrechnung); }
td.override-cell.override-hochr input::placeholder { color: #c2a860; font-style: italic; }
td.override-cell .ref-note { display: block; margin-top: 2px; white-space: normal; }

td.plan-cell.override-na { background: var(--bg); color: var(--text-muted); text-align: center; font-size: 11.5px; font-style: italic; cursor: default; }

th.ist-vorperiode, td.ist-vorperiode { background: var(--bg); color: var(--text-muted); }
td.ist-vorperiode { font-style: italic; }

.badge {
  display: inline-block;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 6px;
}
.badge.ertrag { background: var(--ertrag-bg); color: var(--ertrag); }
.badge.aufwand { background: var(--aufwand-bg); color: var(--aufwand); }

/* Drilldown modal */
.overlay {
  position: fixed; inset: 0; background: rgba(20, 24, 30, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; z-index: 100;
}
.overlay.hidden { display: none; }
.modal {
  background: var(--panel); border-radius: var(--radius); max-width: 1100px; width: 100%;
  max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.modal header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.modal header h3 { margin: 0; font-size: 14.5px; }
.modal header .sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.modal .close-btn { border: none; background: var(--bg); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 15px; color: var(--text-muted); }
.modal .body { overflow: auto; padding: 0; }
.modal .footer { padding: 8px 18px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); }

/* Beleg-Vorschau (19.08.2026, User-Wunsch: PDF direkt im Popup statt neuer Tab) - eigenes,
   hoeher liegendes Overlay, da ein 📎-Pill auch INNERHALB des bereits offenen Drilldown-Modals
   angeklickt werden kann (Buchungs-Beleg) - muss darueber stapeln, nicht dahinter. */
#beleg-overlay { z-index: 110; }
.beleg-modal { max-width: 900px; height: 85vh; }
.beleg-body { flex: 1; padding: 0 !important; }
#beleg-frame { width: 100%; height: 100%; border: none; display: block; }

/* Eigener Dialog statt confirm()/prompt(): native Browser-Dialoge werden von manchen Browser-
   Policies/Privacy-Einstellungen/eingebetteten Ansichten unterdrueckt (liefern dann kommentarlos
   false/null oder werfen sogar einen Fehler) - das fuehrte zu einem fuer den User unsichtbaren Bug
   beim Rücksetzen-Button. */
.dialog-modal { max-width: 440px; }
.dialog-body { padding: 18px; }
#dialog-message { margin: 0 0 12px 0; font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
#dialog-textarea {
  width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 6px; resize: vertical; margin-bottom: 12px; box-sizing: border-box;
}
#dialog-textarea.hidden { display: none; }
#dialog-textarea:focus { outline: none; border-color: var(--accent); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-actions button {
  border-radius: 6px; padding: 7px 14px; font-size: 13px; cursor: pointer; border: 1px solid var(--border-strong);
}
.dialog-btn-secondary { background: #fff; color: var(--text); }
.dialog-btn-secondary:hover { background: var(--bg); }
.dialog-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.dialog-btn-primary:hover { opacity: 0.9; }
.dialog-btn-primary.danger-btn { background: var(--aufwand); border-color: var(--aufwand); }

.legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--text-muted); margin-top: 10px; flex-wrap: wrap; }
.legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

.loading, .empty { padding: 40px; text-align: center; color: var(--text-muted); }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.toolbar button {
  border: 1px solid var(--border-strong); background: #fff; border-radius: 6px;
  padding: 6px 11px; font-size: 12.5px; cursor: pointer; color: var(--text);
}
.toolbar button:hover { background: var(--bg); }
.toolbar button.active-toggle { background: var(--accent); border-color: var(--accent); color: #fff; }
.toolbar button.active-toggle:hover { background: var(--accent); }

.note-box {
  background: #fff8e6; border: 1px solid #eddca0; border-radius: 6px;
  padding: 10px 12px; font-size: 12.5px; color: #6b5518; margin-bottom: 14px; line-height: 1.5;
}

footer.app-footer {
  text-align: center; color: var(--text-muted); font-size: 11.5px; padding: 24px;
}

th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--accent); }
th.sortable .sort-arrow { color: var(--accent); font-size: 10px; margin-left: 2px; }

.mini-input {
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  background: #fff;
  padding: 3px 6px;
  font: inherit;
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 90px;
}
.mini-input:focus { outline: none; border-style: solid; border-color: var(--accent); }
td:first-child .mini-input, select[data-feld="tarifstufe"] { text-align: left; width: auto; min-width: 120px; }
select#neu-tarifstufe { padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 6px; }

button.row-remove {
  border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px;
  width: 22px; height: 22px; border-radius: 4px;
}
button.row-remove:hover { background: var(--aufwand-bg); color: var(--aufwand); }

tr.detail-row td { background: #f6f7f9; padding: 10px 16px; }
table.mini-override-table { width: auto; min-width: 480px; }
table.mini-override-table th, table.mini-override-table td { padding: 3px 8px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
table.mini-override-table tr.override-row td { background: var(--plan-bg); }
td.num.override { background: var(--plan-bg); font-weight: 620; }
tr.mitarbeiter-row .chevron { color: var(--accent); transition: transform .12s; }
tr.mitarbeiter-row .chevron.open { transform: rotate(90deg); }

/* Druck/PDF-Export (20.08.2026, User-Wunsch "sauberer PDF-Export, Breite A4 quer") - reine CSS-Loesung
   ueber die native Browser-Druckfunktion (window.print(), Ziel "Als PDF speichern") statt einer neuen
   Server-Abhaengigkeit (PDF-Bibliothek) - passt zum bewusst abhaengigkeitsfreien Projekt-Ansatz. Blendet
   Chrome (Kopf-/Fussbereich, Tab-Leiste, Toolbars) aus, hebt die Scroll-Begrenzung der Tabellen auf und
   verkleinert Schrift/Abstaende, damit auch breite Tabellen auf eine A4-Quer-Seitenbreite passen. */
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  html, body { background: #fff; }
  header.app-header, nav.tabs, footer.app-footer, .toolbar, .overlay { display: none !important; }
  main { padding: 0; }
  .panel { background: #fff; border: none; box-shadow: none; padding: 0; margin: 0 0 14px 0; page-break-inside: avoid; }
  .panel h2 { font-size: 13px; }
  .table-scroll { overflow: visible; border: none; }
  table { width: 100%; }
  /* !important noetig: .konto-row/.kategorie-row setzen auf dem Bildschirm eigene, unterschiedlich
     spezifische font-size-Regeln (13px bzw. gar keine) - ohne !important gewinnt fuer .konto-row die
     bildschirm-Regel gegen diese Druck-Regel (hoehere Selektor-Spezifitaet schlaegt Media-Query-
     Zugehoerigkeit), fuer .kategorie-row (keine eigene Regel) nicht - Ergebnis waren unterschiedlich
     grosse Schriften zwischen Positions- und Summenzeilen im Ausdruck (User-Befund 20.08.2026). */
  table, th, td { font-size: 8.5px !important; }
  th, td { padding: 3px 4px; }
  .anmerkung-zelle { max-width: none; cursor: default; }
  .anmerkung-platzhalter { display: none; }
  a.beleg-pill, button { display: none !important; }
}