/* APEX COMPONENT: finance
===========================================================
Modul-Pfad: js/modules/fin_*.js, modules/finanzen.js
SSoT: docs/redesign/apex_typo_library.json
Stand: 14.05.2026 — Mid-Risk-Refactor
Scope: Surgical token-normalisation der finance-spezifischen
Render-Klassen (Tabellen-Zellen, Footer-Sum, Status-Badges,
Beleg-Indicators, Row-Warn/Storno). Volle Migration der
292 .fin-*-Klassen aus design-system.css ist Mid-Risk-Welle 2.
Diese Datei extrahiert die produktiv-genutzten Tabellen-Render-Bausteine
token-konform; design-system.css behält die Modal-/Popup-Implementierungen
(umfassen ~250 weitere Regeln) als Übergangs-Bestand.
Aliase: alle Legacy-Klassennamen (.fin-*) bleiben aktiv — kein JS-Rewrite.
*/
/* ── Row-Indikatoren ─────────────────────────────────────── */
.fin-row-warn { border-left: 2.5px solid var(--semantic-red); }
.fin-tfoot-sum {
background: var(--bg-zebra);
font-weight: 600;
font: var(--type-footnote);
letter-spacing: var(--type-footnote-tracking);
}
.fin-tfoot-sum td { border-top: 2px solid var(--separator); }
.fin-tfoot-sum-vst { color: var(--text-tertiary); }
.fin-aus-row-storno { background: var(--semantic-red-tint); }
.fin-ein-row-storno { color: var(--semantic-red); }
/* ── Beträge & Tabellenzellen ────────────────────────────── */
.fin-aus-td-betrag {
text-align: right;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.fin-aus-td-num,
.fin-aus-td-num-muted {
text-align: right;
font: var(--type-table-cell);
letter-spacing: var(--type-table-cell-tracking);
font-variant-numeric: tabular-nums;
}
.fin-aus-td-num-muted { color: var(--text-tertiary); }
.fin-aus-td-cat-mini {
font: var(--type-footnote);
letter-spacing: var(--type-footnote-tracking);
}
.fin-aus-td-anteil {
text-align: center;
font: var(--type-footnote);
letter-spacing: var(--type-footnote-tracking);
}
.fin-aus-td-anteil-warn { color: var(--accent-orange); font-weight: 600; }
.fin-aus-td-anteil-norm { color: var(--text-tertiary); }
.fin-aus-td-status-cell { text-align: center; }
.fin-td-trunc {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Beleg-Indicators ────────────────────────────────────── */
.fin-aus-beleg-yes { color: var(--semantic-green); cursor: pointer; }
.fin-aus-beleg-no { color: var(--semantic-red); cursor: pointer; }
.fin-aus-beleg-icon { text-align: center; font-size: 14px; font-weight: 600; }
/* ── Detail-Row (versteckter PDF-Bereich) ────────────────── */
.fin-aus-detail-row { background: var(--bg-zebra); padding: 10px 16px; border-top: none; }
.fin-aus-detail-flex { display: flex; align-items: center; gap: var(--space-3); }
.fin-aus-detail-link { font: var(--type-footnote); font-weight: 600; letter-spacing: var(--type-footnote-tracking); color: var(--brand-blue); text-decoration: none; }
.fin-aus-detail-dl { font: var(--type-footnote); letter-spacing: var(--type-footnote-tracking); color: var(--text-tertiary); text-decoration: none; }
.fin-aus-detail-fname { font: var(--type-footnote); letter-spacing: var(--type-footnote-tracking); color: var(--text-tertiary); }
.fin-aus-detail-del { font: var(--type-footnote); letter-spacing: var(--type-footnote-tracking); color: var(--semantic-red); cursor: pointer; margin-left: auto; }
/* ── Beleg-Upload-Dropzone ───────────────────────────────── */
.fin-aus-belegup {
border: 1.5px dashed var(--separator);
border-radius: 4px;
padding: 5px var(--space-4);
font: var(--type-footnote);
font-weight: 600;
letter-spacing: var(--type-footnote-tracking);
color: var(--brand-blue);
cursor: pointer;
transition: all .15s;
}
.fin-aus-belegup.drag,
.fin-aus-belegup.drag-active {
border-color: var(--brand-blue);
background: var(--color-info-inset);
}
.fin-aus-belegfb {
font: var(--type-footnote);
letter-spacing: var(--type-footnote-tracking);
color: var(--text-tertiary);
}
/* ── Status-Badges (R-BUTTON-LEGACY-konform: nur Pill-Migration) ─ */
.fin-aus-gutschrift-badge {
font: var(--type-pill);
letter-spacing: var(--type-pill-tracking);
background: var(--semantic-red-tint);
color: var(--semantic-red);
}
.fin-aus-ust-badge {
font: var(--type-pill);
letter-spacing: var(--type-pill-tracking);
}
.fin-aus-status-clickable { cursor: pointer; user-select: none; }
/* ── Lock-State-Hint für DATEV-fixierte Zeilen ──────────── */
tr[data-state="locked"][data-fin-lock-reason] td:first-child {
position: relative;
}
tr[data-state="locked"][data-fin-lock-reason] td:first-child::after {
content: "🔒";
position: absolute;
left: 2px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
opacity: 0.45;
pointer-events: none;
}
/* ── Welle-1/2 Cleanup 2026-05-15: 5 Klassen aus design-system.css ── */
.fin-todo-summary{cursor:pointer;font:var(--type-eyebrow);letter-spacing:var(--type-eyebrow-tracking);text-transform:var(--type-eyebrow-transform);color:var(--text-primary);padding:6px 0;user-select:none}
.fin-todo-info-2{flex:2;font:var(--type-footnote);letter-spacing:var(--type-footnote-tracking);color:var(--text-tertiary)}
.fin-header-select{padding:6px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px;font-family:var(--font-stack)}
.fin-form-label-bold{font:var(--type-caption);letter-spacing:var(--type-caption-tracking);text-transform:var(--type-caption-transform);color:var(--text-tertiary);display:block;margin-bottom:4px}
.fin-ka2-uploadzone.drag-active{border-color:var(--brand-blue);background:var(--color-info-inset)}
/* ── S71 Fin-Cleanup: close-× Header für Fixkosten-Modal + Col-Popover ── */
.fk-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.fk-modal-head .fk-modal-title{margin-bottom:0}
.fin-col-popover-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--separator)}
.fin-col-popover-title{font:600 12px/1 var(--font-stack);color:var(--text-primary);text-transform:uppercase;letter-spacing:0.04em}
/* ════════════════════════════════════════════════════════════════════
APEX-FIN — Controlling-Redesign (S80c · Mockup 27_finanzen_controlling.html)
Eigene Klassen-Familie apex-fin-* + apex-modtab* für das visuelle Redesign
des Controlling-Tabs. apex-modtabs ist als gemeinsames Atom für alle
Finanz-Subseiten gedacht — wird hier zuerst eingeführt, andere Module
migrieren später. Quelle 1:1 aus dem Mockup.
════════════════════════════════════════════════════════════════════ */
.apex-modtabs {
display: flex;
gap: 2px;
padding: 0 22px;
background: var(--surface);
border-bottom: 1px solid var(--separator);
}
.apex-modtab {
position: relative;
display: inline-flex; align-items: center; gap: 6px;
padding: 0 14px;
height: 42px;
border: none; background: none;
font: var(--type-meta-strong);
color: var(--text-secondary);
cursor: pointer;
letter-spacing: var(--tracking-normal);
white-space: nowrap;
}
.apex-modtab:hover { color: var(--text-primary); }
.apex-modtab.is-active {
color: var(--brand-blue);
}
.apex-modtab.is-active::after {
content: "";
position: absolute;
left: 8px; right: 8px; bottom: -1px;
height: 2px;
background: var(--brand-blue);
border-radius: 2px 2px 0 0;
}
.apex-modtab .apex-modtab-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--semantic-red);
flex: none;
}
/* ─── Modul-Wrapper ──────────────────────────────────────── */
.apex-fin-module {
background: var(--surface);
border: 1px solid var(--separator);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
overflow: hidden;
position: relative; /* Offset-Parent für den Beleg-Drawer (Mockup 26 §3) */
}
/* ─── Section-Heading ───────────────────────────────────── */
.apex-fin-section-head {
display: flex; align-items: baseline; justify-content: space-between;
padding: 14px 22px 8px;
}
.apex-fin-section-head h4 {
margin: 0;
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
}
.apex-fin-section-head-meta { font: var(--type-meta); color: var(--text-tertiary); }
.apex-fin-section-head-meta em { font-style: italic; color: var(--text-tertiary); }
/* ─── Disclaimer-Zeile rechts oben ──────────────────────── */
.apex-fin-disclaimer {
font: var(--type-meta);
color: var(--text-tertiary);
font-style: italic;
}
/* ─── KPI-Grid · Status-Snapshot ────────────────────────── */
.apex-fin-kpi-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 12px;
padding: 6px 22px 18px;
}
.apex-fin-kpi {
display: flex; flex-direction: column; gap: 4px;
padding: 14px 16px 14px;
background: var(--surface);
border: 1px solid var(--separator);
border-radius: 10px;
}
.apex-fin-kpi-label {
font: var(--type-meta);
color: var(--text-secondary);
letter-spacing: var(--tracking-normal);
}
.apex-fin-kpi-value {
font: var(--type-kpi-value);
letter-spacing: -0.5px;
color: var(--text-primary);
}
.apex-fin-kpi-foot {
font: var(--type-meta);
color: var(--text-tertiary);
margin-top: 2px;
}
.apex-fin-kpi-foot.is-pos { color: var(--semantic-green); }
.apex-fin-kpi-foot.is-warn { color: var(--semantic-amber); }
.apex-fin-kpi-foot.is-neg { color: var(--semantic-red); }
.apex-fin-kpi.is-emphasis {
background: var(--accent-orange-tint);
border-color: rgba(224, 90, 0, 0.28);
}
.apex-fin-kpi.is-emphasis .apex-fin-kpi-label {
color: var(--accent-orange);
font: var(--type-meta-strong);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.apex-fin-kpi.is-emphasis .apex-fin-kpi-value { color: var(--brand-blue-deep); }
.apex-fin-kpi.is-emphasis .apex-fin-kpi-foot { color: var(--brand-blue-deep); opacity: .72; }
/* Subtile Trennung der zweiten KPI-Reihe */
.apex-fin-kpi-grid.is-row2 { padding-top: 0; }
/* ─── Großzügige Daten-Tabellen ─────────────────────────── */
.apex-fin-bigtable-wrap { padding: 0 22px 22px; }
.apex-fin-bigtable {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--surface);
border: 1px solid var(--separator);
border-radius: 10px;
overflow: hidden;
font-variant-numeric: tabular-nums;
}
.apex-fin-bigtable thead th {
background: var(--bg-zebra);
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
text-align: right;
padding: 10px 14px;
border-bottom: 1px solid var(--separator);
white-space: nowrap;
}
.apex-fin-bigtable thead th:first-child { text-align: left; }
.apex-fin-bigtable thead th.is-gj { color: var(--text-primary); background: #F4F4F8; }
.apex-fin-bigtable tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--separator);
font: var(--type-cell);
color: var(--text-primary);
text-align: right;
white-space: nowrap;
}
.apex-fin-bigtable tbody td:first-child {
text-align: left;
color: var(--text-secondary);
font: var(--type-meta-strong);
}
.apex-fin-bigtable tbody tr:last-child td { border-bottom: none; }
.apex-fin-bigtable tbody td.is-gj {
background: #F8F8FC;
color: var(--text-primary);
font: var(--type-cell-strong);
}
.apex-fin-bigtable tbody td.is-empty { color: var(--text-quaternary); }
.apex-fin-bigtable tbody td.is-neg { color: var(--semantic-red); }
/* Spacer-Reihe zwischen Detail-Zeilen und Summe */
.apex-fin-bigtable tbody tr.is-spacer td {
height: 10px;
padding: 0; border: none;
background: transparent;
}
.apex-fin-bigtable tbody tr.is-total td {
font: var(--type-cell-strong);
color: var(--text-primary);
}
.apex-fin-bigtable tbody tr.is-total td:first-child {
color: var(--text-primary);
}
.apex-fin-bigtable tbody tr.is-cumulative td {
font: var(--type-cell);
color: var(--text-tertiary);
background: var(--bg-zebra);
border-bottom: none;
}
.apex-fin-bigtable tbody tr.is-cumulative td:first-child { color: var(--text-tertiary); }
.apex-fin-bigtable tbody tr.is-cumulative td.is-neg { color: var(--semantic-red); }
/* ─── Mini-Sparkline-Row (Bonus) ─────────────────────────── */
.apex-fin-sparkrow {
display: grid;
grid-template-columns: 1fr;
padding: 0 22px 14px;
}
.apex-fin-spark {
background: var(--surface);
border: 1px solid var(--separator);
border-radius: 10px;
padding: 14px 16px;
}
.apex-fin-spark-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 4px;
}
.apex-fin-spark-title {
font: var(--type-meta-strong);
color: var(--text-primary);
}
.apex-fin-spark-meta {
font: var(--type-meta);
color: var(--text-tertiary);
}
.apex-fin-spark-svg {
width: 100%;
display: block;
}
/* ─── Year-Select (Geschäftsjahr) ───────────────────────── */
.apex-fin-year {
display: inline-flex; align-items: center; gap: 6px;
height: 30px;
padding: 0 8px 0 12px;
background: var(--surface);
border: 1px solid var(--separator-strong);
border-radius: 8px;
font: var(--type-meta-strong);
color: var(--text-primary);
cursor: pointer;
}
.apex-fin-year:hover { background: var(--bg-hover); }
.apex-fin-year .apex-icon { color: var(--text-tertiary); }
/* ─── Toolbar des Controlling-Bereichs ──────────────────── */
.apex-fin-controlling-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 14px 22px 6px;
}
.apex-fin-controlling-toolbar-left {
display: flex; align-items: center; gap: 10px;
}
.apex-fin-controlling-toolbar-left .apex-fin-disclaimer { font-style: normal; }
/* ─── Wochen-Tabelle (Liquidität) ───────────────────────── */
.apex-fin-weektable {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--surface);
border: 1px solid var(--separator);
border-radius: 10px;
overflow: hidden;
font-variant-numeric: tabular-nums;
}
.apex-fin-weektable thead th {
background: var(--bg-zebra);
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
text-align: right;
padding: 10px 14px 8px;
border-bottom: 1px solid var(--separator);
white-space: nowrap;
}
.apex-fin-weektable thead th:first-child { text-align: left; }
.apex-fin-weektable thead th .th-date {
display: block;
font: var(--type-meta);
letter-spacing: var(--tracking-normal);
text-transform: none;
color: var(--text-tertiary);
margin-top: 2px;
}
.apex-fin-weektable thead th.is-current {
background: var(--semantic-blue-tint);
color: var(--brand-blue);
}
.apex-fin-weektable thead th.is-current .th-date { color: var(--brand-blue); }
.apex-fin-weektable tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--separator);
font: var(--type-cell);
color: var(--text-primary);
text-align: right;
white-space: nowrap;
}
.apex-fin-weektable tbody td:first-child {
text-align: left;
color: var(--text-secondary);
font: var(--type-meta-strong);
}
.apex-fin-weektable tbody tr:last-child td { border-bottom: none; }
.apex-fin-weektable tbody td.is-empty { color: var(--text-quaternary); }
.apex-fin-weektable tbody td.is-neg { color: var(--semantic-red); }
.apex-fin-weektable tbody td.is-pos { color: var(--semantic-green); }
.apex-fin-weektable tbody tr.is-spacer td { height: 10px; padding: 0; border: none; }
.apex-fin-weektable tbody tr.is-netto td {
font: var(--type-cell-strong);
}
.apex-fin-weektable tbody tr.is-balance td {
background: var(--bg-zebra);
font: var(--type-cell-strong);
color: var(--text-primary);
}
.apex-fin-weektable tbody tr.is-balance td:first-child { color: var(--text-primary); }
/* ─── Footer-Hinweis im Wochen-Block ────────────────────── */
.apex-fin-weektable-hint {
padding: 0 22px 18px;
margin-top: -2px;
font: var(--type-meta);
color: var(--text-tertiary);
font-style: italic;
}
.apex-fin-weektable-hint code {
font-family: var(--font-mono);
font-size: 12px;
background: var(--bg-zebra);
border: 1px solid var(--separator);
padding: 1px 5px;
border-radius: 3px;
font-style: normal;
}
/* ─── Modul-Topframe (Tab-Bar Demo) ─────────────────────── */
.apex-fin-frame {
background: var(--surface);
border: 1px solid var(--separator);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.apex-fin-frame-body {
padding: 6px 0 6px;
}
/* ─── Demo-Stage ────────────────────────────────────────── */
.demo-frame.is-flush { padding: 0; }
.demo-frame.is-flush.is-bg { background: var(--bg); }
.mockup-page-wide { max-width: 1640px; margin: 0 auto; padding: 40px 32px 64px; }
/* ─── Legend / hint chips ──────────────────────────────── */
.apex-fin-legend {
display: flex; gap: 14px; flex-wrap: wrap;
padding: 0 22px 16px;
}
.apex-fin-legend-item {
display: inline-flex; align-items: center; gap: 6px;
font: var(--type-meta);
color: var(--text-tertiary);
}
.apex-fin-legend-swatch {
width: 10px; height: 10px;
border-radius: 2px;
background: var(--text-tertiary);
}
.apex-fin-legend-swatch.is-neg { background: var(--semantic-red); }
.apex-fin-legend-swatch.is-pos { background: var(--semantic-green); }
.apex-fin-legend-swatch.is-current { background: var(--brand-blue); }
.apex-fin-legend-swatch.is-emphasis { background: var(--accent-orange); }
/* ════════════════════════════════════════════════════════════════════
APEX-FIN — Steuer-Cockpit (Mockup 28_finanzen_steuer.html)
USt-VA + Steuern. Klassen-Familie apex-fin-tax-* / apex-fin-ust-* /
apex-tax-chip / apex-fin-countdown / apex-fin-sphere.
Quelle 1:1 aus dem Mockup; token-konform (--type-cell/-strong/
-kpi-value 2026-05-20 in tokens.css ergänzt).
apex-status wird NICHT eingeführt — Status-Pills nutzen die
Library-Komponente apex-pill (pill.apex.css).
════════════════════════════════════════════════════════════════════ */
/* ─── Steuerart-Chips ────────────────────────────────────── */
.apex-tax-chip {
display: inline-flex; align-items: center;
height: 22px; padding: 0 9px;
border-radius: 999px;
font: var(--type-cap);
letter-spacing: 0;
white-space: nowrap;
}
.apex-tax-chip[data-tax="ekst"] { background: rgba(3,86,177,0.10); color: var(--brand-blue); }
.apex-tax-chip[data-tax="gewst"] { background: rgba(184,120,0,0.10); color: var(--semantic-amber); }
.apex-tax-chip[data-tax="ust"] { background: rgba(30,123,58,0.10); color: var(--semantic-green); }
.apex-tax-chip[data-tax="soli"] { background: rgba(118,118,128,0.10); color: var(--text-secondary); }
/* ─── Steuern-Toolbar ────────────────────────────────────── */
.apex-fin-tax-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 14px 22px;
border-bottom: 1px solid var(--separator);
}
.apex-fin-tax-toolbar-left { display: flex; align-items: center; gap: 10px; }
.apex-fin-tax-toolbar-right { display: flex; align-items: center; gap: 10px; }
.apex-fin-tax-toolbar-disclaimer { font: var(--type-meta); color: var(--text-tertiary); font-style: italic; }
.apex-fin-year-label { font: var(--type-meta); color: var(--text-tertiary); margin-right: 4px; }
/* ─── KPI-Reihe (Steuer-Übersicht) ───────────────────────── */
.apex-fin-tax-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 14px 22px 18px;
}
.apex-fin-tax-kpi {
display: flex; flex-direction: column; gap: 4px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--separator);
border-radius: 10px;
}
.apex-fin-tax-kpi-label { font: var(--type-meta); color: var(--text-secondary); }
.apex-fin-tax-kpi-value { font: var(--type-kpi-value); letter-spacing: -0.5px; color: var(--text-primary); }
.apex-fin-tax-kpi-foot { font: var(--type-meta); color: var(--text-tertiary); margin-top: 2px; }
.apex-fin-tax-kpi-foot.is-pos { color: var(--semantic-green); }
.apex-fin-tax-kpi-foot.is-warn { color: var(--semantic-amber); }
.apex-fin-tax-kpi-foot.is-neg { color: var(--semantic-red); }
.apex-fin-tax-kpi.is-delta-pos { background: rgba(30,123,58,0.04); border-color: rgba(30,123,58,0.18); }
.apex-fin-tax-kpi.is-delta-pos .apex-fin-tax-kpi-value { color: var(--semantic-green); }
/* ─── Detail-Toggle ──────────────────────────────────────── */
.apex-fin-tax-detail-toggle {
display: inline-flex; align-items: center; gap: 4px;
padding: 0 22px 16px;
font: var(--type-meta);
color: var(--brand-blue);
text-decoration: none;
cursor: pointer;
}
.apex-fin-tax-detail-toggle:hover { text-decoration: underline; }
/* ─── Block (Section-Heading + Body) ─────────────────────── */
.apex-fin-block { padding: 0 22px 18px; }
.apex-fin-block-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 8px;
padding-top: 14px;
}
.apex-fin-block-head h4 {
margin: 0;
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
}
.apex-fin-block-head-meta { font: var(--type-meta); color: var(--text-tertiary); }
/* ─── Steuer-Tabelle (gemeinsame Anatomie) ───────────────── */
.apex-fin-tax-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--surface);
border: 1px solid var(--separator);
border-radius: 10px;
overflow: hidden;
font-variant-numeric: tabular-nums;
}
.apex-fin-tax-table thead th {
background: var(--bg-zebra);
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
text-align: left;
padding: 10px 14px;
border-bottom: 1px solid var(--separator);
white-space: nowrap;
}
.apex-fin-tax-table thead th.is-right { text-align: right; }
.apex-fin-tax-table thead th.is-center { text-align: center; }
.apex-fin-tax-table tbody td {
padding: 11px 14px;
border-bottom: 1px solid var(--separator);
font: var(--type-cell);
color: var(--text-primary);
vertical-align: middle;
}
.apex-fin-tax-table tbody tr:last-child td { border-bottom: none; }
.apex-fin-tax-table tbody td.is-num { text-align: right; white-space: nowrap; }
.apex-fin-tax-table tbody td.is-muted { color: var(--text-tertiary); }
.apex-fin-tax-table tbody td.is-link { color: var(--brand-blue); }
.apex-fin-tax-table tbody td.is-link a { color: inherit; text-decoration: none; }
.apex-fin-tax-table tbody td.is-link a:hover { text-decoration: underline; }
.apex-fin-tax-table tbody td.is-center { text-align: center; }
.apex-fin-tax-table tbody td.is-mono { font-family: var(--font-mono); font-size: 12.5px; }
.apex-fin-tax-table tbody td.is-neg { color: var(--semantic-red); }
.apex-fin-tax-table tbody td.is-pos { color: var(--semantic-green); }
.apex-fin-tax-table tbody tr.is-past td:not(.is-num) { color: var(--text-tertiary); }
.apex-fin-tax-table tbody tr.is-past td.is-mono { color: var(--text-tertiary); }
.apex-fin-tax-table tfoot td {
padding: 12px 14px;
border-top: 1px solid var(--separator-strong);
background: var(--bg-zebra);
font: var(--type-cell-strong);
color: var(--text-primary);
white-space: nowrap;
}
.apex-fin-tax-table tfoot td.is-num { text-align: right; }
.apex-fin-tax-table tfoot td.is-label { font: var(--type-meta); color: var(--text-secondary); }
/* ─── Countdown-Zelle (Tage-Restlaufzeit) ────────────────── */
.apex-fin-countdown {
display: inline-flex; align-items: center; gap: 6px;
font: var(--type-cell);
}
.apex-fin-countdown.is-paid { color: var(--semantic-green); }
.apex-fin-countdown.is-overdue { color: var(--semantic-red); font: var(--type-cell-strong); }
.apex-fin-countdown.is-due-soon { color: var(--semantic-amber); }
.apex-fin-countdown.is-far { color: var(--text-tertiary); }
/* ─── Sphäre-Korrektur-Marker ────────────────────────────── */
.apex-fin-sphere {
display: inline-flex; align-items: center; gap: 6px;
font: var(--type-meta);
color: var(--semantic-amber);
}
.apex-fin-sphere .dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--semantic-amber);
flex: none;
}
/* ─── USt-VA Monatsgrid ──────────────────────────────────── */
.apex-fin-ust-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--surface);
border: 1px solid var(--separator);
border-radius: 10px;
overflow: hidden;
font-variant-numeric: tabular-nums;
}
.apex-fin-ust-table thead th {
background: var(--bg-zebra);
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
text-align: right;
padding: 10px 14px;
border-bottom: 1px solid var(--separator);
white-space: nowrap;
}
.apex-fin-ust-table thead th:first-child { text-align: left; }
.apex-fin-ust-table thead th.is-center { text-align: center; }
.apex-fin-ust-table tbody td {
padding: 11px 14px;
border-bottom: 1px solid var(--separator);
font: var(--type-cell);
color: var(--text-primary);
text-align: right;
white-space: nowrap;
}
.apex-fin-ust-table tbody td:first-child {
text-align: left;
font: var(--type-meta-strong);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0;
}
.apex-fin-ust-table tbody tr:last-child td { border-bottom: none; }
.apex-fin-ust-table tbody td.is-center { text-align: center; }
.apex-fin-ust-table tbody td.is-muted { color: var(--text-tertiary); }
.apex-fin-ust-table tbody td.is-neg { color: var(--semantic-red); }
.apex-fin-ust-table tbody td.is-empty { color: var(--text-quaternary); }
.apex-fin-ust-table tbody tr.is-future td { color: var(--text-quaternary); }
.apex-fin-ust-table tfoot td {
padding: 12px 14px;
border-top: 1px solid var(--separator-strong);
background: var(--bg-zebra);
font: var(--type-cell-strong);
color: var(--text-primary);
text-align: right;
white-space: nowrap;
}
.apex-fin-ust-table tfoot td:first-child {
text-align: left;
color: var(--text-primary);
font: var(--type-cell-strong);
}
/* ─── Pill-Cell-Wrapper ──────────────────────────────────── */
.apex-cell-pill { display: inline-flex; align-items: center; }
/* ─── Hint-Footer ────────────────────────────────────────── */
.apex-fin-hint {
font: var(--type-meta);
color: var(--text-tertiary);
font-style: italic;
padding: 8px 22px 18px;
}
.apex-fin-hint code {
font-family: var(--font-mono);
font-size: 12px;
background: var(--bg-zebra);
border: 1px solid var(--separator);
padding: 1px 5px;
border-radius: 3px;
font-style: normal;
}
/* ─── VSt-Belegausweis v2: Auto-Resolve-Hinweis + Hard-Stop-Konflikt ─── */
.apex-fin-steuer-hinweis {
font-size: 12px;
color: var(--text-secondary);
margin: 2px 0 6px;
letter-spacing: .2px;
}
.apex-fin-steuer-konflikt {
margin: 4px 0 10px;
padding: 10px 12px;
border: 1px solid var(--semantic-red);
border-radius: 6px;
background: var(--semantic-red-tint);
}
.apex-fin-steuer-konflikt-msg {
font-size: 12.5px;
color: var(--text-primary);
margin-bottom: 8px;
line-height: 1.45;
}
.apex-fin-steuer-konflikt-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.apex-fin-steuer-btn {
font-size: 12px;
padding: 6px 12px;
border: 1px solid var(--separator);
border-radius: 5px;
background: var(--surface);
color: var(--text-primary);
cursor: pointer;
}
.apex-fin-steuer-btn:hover { background: var(--bg-hover); }
.apex-fin-steuer-btn-primary {
border-color: var(--brand-blue);
background: var(--brand-blue);
color: var(--surface);
}
.apex-fin-steuer-btn-primary:hover { background: var(--brand-blue-hover); }
/* ─── Steuerart-Legende ──────────────────────────────────── */
.apex-fin-tax-legend {
display: flex; gap: 14px; flex-wrap: wrap;
padding: 0 22px 18px;
}
.apex-fin-tax-legend-item {
display: inline-flex; align-items: center; gap: 6px;
font: var(--type-meta);
color: var(--text-tertiary);
}
/* ════════════════════════════════════════════════════════════════════
APEX-FIN — Belege-Tabelle (Phase 1c · Mockup 26_finanzen_belege.html)
Gemeinsame Tabellen-Anatomie für Einnahmen + Ausgaben: Toolbar ·
Filter · Tabelle · Beleg-Button · Spalten-Popover · Spalten-Filter ·
Beleg-Drawer. Quelle 1:1 aus dem Mockup, token-konform.
apex-fin-module / apex-fin-section-head liegen bereits oben (Mockup 27)
— daher hier nicht erneut. apex-status wird NICHT angelegt; Status
nutzt die Library-Komponente apex-pill (pill.apex.css).
════════════════════════════════════════════════════════════════════ */
/* ─── Filter-Leiste ───────────────────────────────────────── */
.apex-fin-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
padding: 12px 18px;
border-bottom: 1px solid var(--separator);
background: var(--surface);
}
.apex-fin-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.apex-fin-filter {
display: inline-flex; align-items: center; gap: 6px;
height: 30px; padding: 0 12px;
border: 1px solid var(--separator-strong);
border-radius: 8px;
background: var(--surface);
font: var(--type-meta-strong);
color: var(--text-secondary);
cursor: pointer;
white-space: nowrap;
}
.apex-fin-filter:hover { background: var(--bg-hover); color: var(--text-primary); }
.apex-fin-filter.is-active { background: var(--semantic-blue-tint); color: var(--brand-blue); border-color: rgba(3,86,177,.22); }
.apex-fin-filter .apex-icon { color: var(--text-tertiary); }
.apex-fin-filter.is-active .apex-icon { color: var(--brand-blue); }
.apex-fin-toolbar-right { display: flex; align-items: center; gap: 12px; }
.apex-fin-count {
font: var(--type-meta);
color: var(--text-tertiary);
white-space: nowrap;
}
/* ─── Tabelle ─────────────────────────────────────────────── */
/* C1 (2026-05-28): Mobile-Tables-Foundation gem. Mockup 31 §2 Säule C.
Wrapper härten + Tabelle bekommt eine Min-Breite, damit Mobile-
Viewports tatsächlich horizontal scrollen statt Spalten zu quetschen.
-webkit-overflow-scrolling für ältere iOS-Safari, overscroll-behavior
verhindert Page-Bounce-Chain. */
.apex-fin-table-wrap {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-gutter: stable;
}
table.apex-fin {
width: 100%;
min-width: max(720px, 100%);
border-collapse: separate;
border-spacing: 0;
background: var(--surface);
font-variant-numeric: tabular-nums;
}
/* Sticky-First-Col — Opt-in pro Tabelle via data-sticky-anchor="first".
Default-Tabellen sind unverändert. Anchor-Spalte erhält Schatten-Trenner
nach rechts, damit der Sprung beim horizontalen Scroll sichtbar bleibt.
@supports-Guard: Browser ohne sticky-position fallen sauber auf
normales Scroll-Verhalten zurück (Mockup 31 §6 Risiko 3). */
@supports (position: sticky) {
table.apex-fin[data-sticky-anchor="first"] thead th:first-child,
table.apex-fin[data-sticky-anchor="first"] tbody td:first-child,
table.apex-fin[data-sticky-anchor="first"] tfoot td:first-child {
position: sticky;
left: 0;
background: var(--surface);
z-index: 1;
box-shadow: 1px 0 0 var(--separator);
}
}
.apex-fin thead th {
background: var(--bg-zebra);
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
text-align: left;
padding: 10px 14px;
border-bottom: 1px solid var(--separator);
white-space: nowrap;
user-select: none;
}
.apex-fin thead th .th-inner {
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer;
color: inherit;
}
.apex-fin thead th .th-inner:hover { color: var(--text-secondary); }
.apex-fin thead th[data-sort="asc"] .th-inner,
.apex-fin thead th[data-sort="desc"] .th-inner { color: var(--text-primary); }
.apex-fin thead th .sort-mark {
width: 12px; height: 12px;
color: var(--text-quaternary);
}
.apex-fin thead th[data-sort="asc"] .sort-mark,
.apex-fin thead th[data-sort="desc"] .sort-mark { color: var(--text-primary); }
.apex-fin thead th .filter-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
border-radius: 4px;
color: var(--text-quaternary);
opacity: 0;
transition: opacity .12s;
}
.apex-fin thead th:hover .filter-mark { opacity: 1; }
.apex-fin thead th .filter-mark:hover { background: var(--surface); color: var(--text-primary); }
.apex-fin thead th[data-filtered="true"] .filter-mark { opacity: 1; color: var(--brand-blue); }
.apex-fin thead th.is-right { text-align: right; }
.apex-fin thead th.is-right .th-inner { justify-content: flex-end; }
.apex-fin thead th.is-center { text-align: center; }
.apex-fin tbody td {
padding: 11px 14px;
border-bottom: 1px solid var(--separator);
font: var(--type-cell);
color: var(--text-primary);
vertical-align: middle;
}
.apex-fin tbody tr:hover td { background: var(--bg-hover); }
.apex-fin tbody td.is-num { text-align: right; white-space: nowrap; color: var(--text-primary); }
.apex-fin tbody td.is-muted { color: var(--text-tertiary); }
.apex-fin tbody td.is-link { color: var(--brand-blue); }
.apex-fin tbody td.is-link a { color: inherit; text-decoration: none; }
.apex-fin tbody td.is-link a:hover { text-decoration: underline; }
.apex-fin tbody td.is-center { text-align: center; }
.apex-fin tbody td.is-neg { color: var(--semantic-red); }
.apex-fin tbody tr[data-state="canceled"] td { color: var(--text-tertiary); }
.apex-fin tbody tr[data-state="canceled"] td.is-num { color: var(--semantic-red); }
/* Beleg-Spalte — direkt klickbarer Anhang-Button */
.apex-fin-beleg {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 6px;
background: transparent;
border: none;
cursor: pointer;
color: var(--text-secondary);
transition: background-color .12s, color .12s;
}
.apex-fin-beleg:hover { background: var(--semantic-blue-tint); color: var(--brand-blue); }
.apex-fin-beleg .apex-icon { width: 16px; height: 16px; }
.apex-fin-beleg[data-state="missing"] { color: var(--text-quaternary); }
.apex-fin-beleg[data-state="missing"]:hover { color: var(--accent-orange); background: var(--accent-orange-tint); }
/* Footer */
.apex-fin tfoot td {
padding: 12px 14px;
border-top: 1px solid var(--separator-strong);
background: var(--bg-zebra);
font: var(--type-cell-strong);
color: var(--text-primary);
white-space: nowrap;
}
.apex-fin tfoot td.is-num { text-align: right; }
.apex-fin tfoot td.is-muted { color: var(--text-tertiary); }
.apex-fin tfoot td.is-label { color: var(--text-secondary); font: var(--type-meta); }
/* ─── Spalten-Settings · Popover ──────────────────────────── */
.apex-fin-cog-host { position: relative; }
.apex-fin-popover {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 240px;
background: var(--surface);
border: 1px solid var(--separator);
border-radius: 10px;
box-shadow: var(--shadow-popover);
z-index: 10;
}
.apex-fin-popover-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px 8px;
border-bottom: 1px solid var(--separator);
}
.apex-fin-popover-head h4 {
margin: 0;
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
}
.apex-fin-popover-body { padding: 10px 14px 12px; }
.apex-fin-popover-group { margin-top: 10px; }
.apex-fin-popover-group:first-child { margin-top: 0; }
.apex-fin-popover-group-label {
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 6px;
}
.apex-fin-popover-row {
display: flex; align-items: center; gap: 8px;
padding: 4px 0;
cursor: pointer;
user-select: none;
}
.apex-fin-popover-row input[type="checkbox"] {
width: 14px; height: 14px;
margin: 0;
accent-color: var(--brand-blue);
}
.apex-fin-popover-row span {
font: var(--type-meta);
color: var(--text-primary);
}
.apex-fin-popover-row.is-off span { color: var(--text-tertiary); }
/* ─── Spalten-Filter · Popover am Header ───────────────────── */
.apex-fin-colfilter {
position: absolute;
top: 38px;
width: 260px;
background: var(--surface);
border: 1px solid var(--separator);
border-radius: 10px;
box-shadow: var(--shadow-popover);
padding: 12px;
z-index: 12;
}
.apex-fin-colfilter-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.apex-fin-colfilter-title {
font: var(--type-meta-strong);
color: var(--text-primary);
}
.apex-fin-colfilter-reset {
font: var(--type-meta);
color: var(--text-tertiary);
background: none; border: none; cursor: pointer;
}
.apex-fin-colfilter-reset:hover { color: var(--brand-blue); }
.apex-fin-colfilter-search {
width: 100%;
height: 28px;
padding: 0 10px;
border: 1px solid var(--separator-strong);
border-radius: 6px;
background: var(--surface);
font: var(--type-meta);
color: var(--text-primary);
outline: none;
margin-bottom: 8px;
}
.apex-fin-colfilter-search:focus { border-color: var(--brand-blue); box-shadow: var(--shadow-focus); }
.apex-fin-colfilter-list { max-height: 200px; overflow-y: auto; }
.apex-fin-colfilter-list label {
display: flex; align-items: center; gap: 8px;
padding: 4px 4px;
font: var(--type-meta);
color: var(--text-primary);
cursor: pointer;
border-radius: 4px;
}
.apex-fin-colfilter-list label:hover { background: var(--bg-hover); }
.apex-fin-colfilter-list label input { accent-color: var(--brand-blue); }
.apex-fin-colfilter-foot {
display: flex; gap: 6px;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--separator);
}
.apex-fin-colfilter-foot .apex-button { flex: 1; }
/* ─── Beleg-Drawer · Vorschau ──────────────────────────────── */
/* C2 (2026-05-28): Drawer + Backdrop sind Viewport-fixed gem. Mockup 31
§2 Säule B. Mount-Point ist #drawer-root außerhalb der app-shell;
damit dockt der Drawer immer an der rechten Bildschirmkante an,
unabhängig von Card-Höhe oder Korsett. PDF-iframe bekommt eine
definite Outer-Höhe → kein Schlitz-Kollaps mehr.
Top-Offset rechnet aus Tokens (--topbar-h 48px + --tabbar-h 52px),
damit Token-Änderungen automatisch durchziehen. */
.apex-fin-drawer-backdrop {
position: fixed; inset: 0;
background: rgba(28,28,30,.32);
z-index: 40;
opacity: 0;
transition: opacity .22s ease;
}
.apex-fin-drawer-backdrop[data-open] { opacity: 1; }
.apex-fin-drawer {
position: fixed;
top: calc(var(--topbar-h, 48px) + var(--tabbar-h, 52px));
right: 0; bottom: 0;
width: clamp(560px, 42vw, 960px);
background: var(--surface);
border-left: 1px solid var(--separator);
box-shadow: -20px 0 50px rgba(0,0,0,.10);
/* C3-Hotfix-2: Flex statt Grid für die Höhen-Kaskade. Robust
gegen Browser-Quirks beim Grid-1fr-min-content-Sizing. */
display: flex;
flex-direction: column;
z-index: 41;
transform: translateX(100%); /* Slide-in: HIG-Sheet-Bewegung */
transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.apex-fin-drawer-head { flex: none; }
.apex-fin-drawer[data-open] { transform: none; }
/* ── C3 (2026-05-28): Drawer-Modes — Overlay (Default) und Push ──
Modus wird per body[data-drawer]-Attribut umgeschaltet, kein
inline-style. Persistiert in localStorage.apex.drawer.mode.
Push-Mode: Backdrop weg, Tabelle bekommt rechtes Padding gleich
Drawer-Breite. Drawer bleibt position:fixed — keine Layout-Reflows
im scroll-container.
ACHTUNG (C3-Hotfix): Push-Mode darf NIEMALS position:sticky oder
position-Override am Drawer setzen — der Drawer ist Viewport-fixed
und muss es bleiben. Push regelt sich ALLEIN über padding-right am
.split-container plus optisches Tweaking (Backdrop+Schatten weg). */
body[data-drawer="push"] .apex-fin-drawer-backdrop { display: none; }
body[data-drawer="push"] .apex-fin-drawer { box-shadow: none; border-left: 1px solid var(--separator-strong); }
body[data-drawer="push"] .split-container { padding-right: clamp(560px, 42vw, 960px); }
/* ── Mobile-Override: unter 1280px wird Drawer Vollbild ──────────
Auf Phones/kleinen Tablets ergibt der 560px-Floor + position:fixed
sonst einen Überlauf. Vollbild = saubere App-Shell-UX. Push-Mode
wird erzwungen-overlay (siehe data-drawer-Override unten). */
@media (max-width: 1279px) {
.apex-fin-drawer {
top: 0;
left: 0; right: 0; bottom: 0;
width: 100%;
border-left: none;
}
body[data-drawer="push"] .split-container { padding-right: 0; }
body[data-drawer="push"] .apex-fin-drawer-backdrop { display: block; }
}
/* ── Drawer-Mode-Switch — Segmented Control im Drawer-Header ─────
Zwei Text-Buttons (Overlay/Push) mit aria-pressed-State. Auf
Mobile ausgeblendet, weil Push dort sinnlos. */
.apex-fin-drawer-modeswitch {
display: inline-flex;
border: 1px solid var(--separator-strong);
border-radius: 7px;
overflow: hidden;
background: var(--surface);
}
.apex-fin-drawer-modeswitch-btn {
padding: 4px 10px;
font: var(--type-mono-small-strong);
letter-spacing: 0.2px;
background: transparent;
color: var(--text-tertiary);
border: none;
cursor: pointer;
transition: background-color .12s, color .12s;
}
.apex-fin-drawer-modeswitch-btn + .apex-fin-drawer-modeswitch-btn {
border-left: 1px solid var(--separator);
}
.apex-fin-drawer-modeswitch-btn:hover { color: var(--text-primary); }
.apex-fin-drawer-modeswitch-btn[aria-pressed="true"] {
background: var(--semantic-blue-tint);
color: var(--brand-blue);
}
@media (max-width: 1279px) {
.apex-fin-drawer-modeswitch { display: none; }
}
/* ── Cards-Replacement für Mobile (Mockup 31 §2 Säule C Strategie 2)
Default versteckt; greift nur unter 600px. fin_ausgaben rendert
beide Repräsentationen ins DOM, CSS schaltet — kein JS-Branch,
keine doppelte State-Source. */
.apex-fin-cards {
display: none;
}
.apex-fin-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 12px;
align-items: center;
padding: 12px 14px;
background: var(--surface);
border: 1px solid var(--separator);
border-radius: var(--radius-card);
text-align: left;
cursor: pointer;
transition: box-shadow .14s ease, border-color .14s ease;
}
.apex-fin-card:hover {
border-color: var(--separator-strong);
box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
}
.apex-fin-card-title {
font: var(--type-body-strong);
color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apex-fin-card-meta {
font: var(--type-meta);
color: var(--text-secondary);
grid-column: 1 / 2;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apex-fin-card-amount {
font: var(--type-mono-strong);
color: var(--text-primary);
font-variant-numeric: tabular-nums;
grid-row: 1 / 3;
grid-column: 2 / 3;
align-self: center;
}
@media (max-width: 599px) {
.apex-fin-table-wrap { display: none; }
.apex-fin-cards {
display: grid;
grid-auto-rows: max-content;
gap: 8px;
padding: 10px;
}
}
.apex-fin-drawer-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--separator);
}
.apex-fin-drawer-head-title { display: flex; flex-direction: column; gap: 2px; }
.apex-fin-drawer-head-eyebrow {
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
}
.apex-fin-drawer-head-title h3 {
margin: 0; font: var(--type-h4);
color: var(--text-primary);
}
.apex-fin-drawer-head-actions { display: flex; align-items: center; gap: 6px; position: relative; }
.apex-fin-drawer-head-actions .apex-popover { top: calc(100% + 6px); right: 0; }
.apex-fin-drawer-body {
/* C3-Hotfix-2: Flex statt Grid, identische Begründung wie am Drawer.
flex:1 + min-height:0 garantiert, dass der Body die restliche
Drawer-Höhe füllt; flex-direction:column reiht meta/extras/pdf
vertikal. */
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bg-zebra);
}
.apex-fin-drawer-meta { flex: none; }
.apex-fin-drawer-body > [data-extras-host] { flex: none; }
/* Drawer ohne afterMount-Extras (z.B. Einnahmen): leeren Zwischen-
Container ausblenden, damit der PDF-Container die volle Höhe behält. */
.apex-fin-drawer-body > [data-extras-host]:empty { display: none; }
.apex-fin-drawer-meta {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
padding: 14px 18px;
background: var(--surface);
border-bottom: 1px solid var(--separator);
}
.apex-fin-drawer-meta-cell { display: flex; flex-direction: column; gap: 2px; }
.apex-fin-drawer-meta-cell label {
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
}
.apex-fin-drawer-meta-cell span {
font: var(--type-body);
color: var(--text-primary);
}
.apex-fin-drawer-pdf {
/* C3-Hotfix-2: flex:1 + min-height:0 — sauberer Höhen-Anker für
das iframe (height:100% darin trägt jetzt). */
flex: 1;
min-height: 0;
padding: 22px 28px;
overflow: auto;
}
.apex-fin-drawer-pdf-page {
background: #FFFFFF;
border: 1px solid var(--separator);
border-radius: 8px;
padding: 32px 36px;
box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 8px 20px rgba(0,0,0,.05);
max-width: 560px;
margin: 0 auto;
color: #2A2A2D;
font: var(--type-body);
line-height: 1.55;
}
/* Echte PDF-Einbettung: ersetzt im Live-Betrieb die statische pdf-page.
src zeigt auf die Download-Route (Anzeige, kein PDF-Render-Stack). */
.apex-fin-drawer-pdf-frame {
width: 100%;
height: 100%;
border: 0;
border-radius: 8px;
background: #FFFFFF;
box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 8px 20px rgba(0,0,0,.05);
}
/* ─── Section-Trenner (Archiv-Stapel) ──────────────────────── */
.apex-fin-section + .apex-fin-section { border-top: 8px solid var(--bg); }
/* ─── Beleg-Drawer Zahlungshistorie (Sprint 2026-05-28) ──────
Chronologische Liste der Bank-Buchungen (Match + Transit),
die zu einer Ausgabe gehören. GoBD-Audit-Trail im Drawer. */
.apex-fin-drawer-payhist {
padding: 14px 18px;
background: var(--surface);
border-bottom: 1px solid var(--separator);
display: flex; flex-direction: column; gap: 8px;
}
.apex-fin-drawer-payhist-title {
margin: 0;
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
}
.apex-fin-drawer-payhist-empty {
font: var(--type-meta);
color: var(--text-tertiary);
}
.apex-fin-drawer-payhist-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 6px;
}
.apex-fin-drawer-payhist-row {
display: grid;
grid-template-columns: 96px 84px 1fr auto;
align-items: center; gap: 10px;
padding: 6px 0;
border-bottom: 1px dashed var(--separator);
font: var(--type-meta);
color: var(--text-primary);
}
.apex-fin-drawer-payhist-row:last-child { border-bottom: none; }
.apex-fin-drawer-payhist-date {
font: var(--type-mono-small);
color: var(--text-secondary);
}
.apex-fin-drawer-payhist-party {
color: var(--text-secondary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apex-fin-drawer-payhist-amount {
font: var(--type-mono-small-strong);
text-align: right;
white-space: nowrap;
}
.apex-fin-drawer-payhist-amount.is-positive { color: var(--semantic-amber); }
.apex-fin-drawer-payhist-amount.is-negative { color: var(--text-primary); }
.apex-fin-drawer-payhist-sum {
display: flex; justify-content: space-between;
padding-top: 8px; margin-top: 4px;
border-top: 1px solid var(--separator);
font: var(--type-meta-strong);
color: var(--text-primary);
}
.apex-fin-drawer-payhist-sum-amount {
font: var(--type-mono-strong);
font-variant-numeric: tabular-nums;
}
/* Inline-Transit-Pill in der Ausgaben-Tabellenzelle.
Eigene Klasse, weil sie additiv neben apex-pill apex-pill-amber
sitzen kann (sm + spezifischer Hover/Tooltip). */
.apex-fin-transit-pill {
display: inline-flex; align-items: center; gap: 3px;
margin-left: 6px;
padding: 1px 6px;
border-radius: 4px;
background: var(--semantic-amber-tint);
color: var(--semantic-amber);
font: var(--type-mono-small-strong);
letter-spacing: 0.2px;
vertical-align: middle;
cursor: help;
}
/* ════════════════════════════════════════════════════════════
§1 KONTOAUSZÜGE — Ratio · Dropzone · Konto-Auswahl (Mockup 29 §1)
════════════════════════════════════════════════════════════ */
/* ─── Abgleich-Ratio ───────────────────────────────────────── */
.apex-fin-ratio {
display: inline-flex; align-items: center; gap: 6px;
font: var(--type-cell);
}
.apex-fin-ratio.is-complete { color: var(--semantic-green); font: var(--type-cell-strong); }
.apex-fin-ratio.is-partial { color: var(--semantic-amber); }
.apex-fin-ratio.is-empty { color: var(--text-quaternary); }
.apex-fin-ratio-bar {
width: 40px; height: 4px;
border-radius: 2px;
background: var(--separator);
position: relative;
overflow: hidden;
}
/* R3: dynamische Breite über CSS-Custom-Property statt inline style="width".
Der Render-Pfad setzt --ratio-pct (0–100) je Zeile (Stufe 4). */
.apex-fin-ratio-bar > i {
position: absolute; left: 0; top: 0; bottom: 0;
width: calc(var(--ratio-pct, 0) * 1%);
background: currentColor;
border-radius: 2px;
}
/* ─── Dropzone (PDF-Upload) ────────────────────────────────── */
.apex-fin-dropzone {
display: inline-flex; align-items: center; gap: 8px;
height: 30px; padding: 0 12px;
border: 1px dashed var(--separator-strong);
border-radius: 8px;
background: var(--surface);
font: var(--type-meta);
color: var(--text-tertiary);
cursor: pointer;
}
.apex-fin-dropzone:hover { border-color: var(--brand-blue); color: var(--brand-blue); background: var(--semantic-blue-tint); }
.apex-fin-dropzone.is-active { border-color: var(--brand-blue); color: var(--brand-blue); background: var(--semantic-blue-tint); }
.apex-fin-dropzone svg { color: var(--text-tertiary); }
.apex-fin-dropzone.is-active svg { color: var(--brand-blue); }
/* ─── Konto-Auswahl-Felder ─────────────────────────────────── */
.apex-fin-konto-row {
display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
padding: 12px 18px;
border-bottom: 1px solid var(--separator);
background: var(--bg-zebra);
}
.apex-fin-konto-row > label {
font: var(--type-meta);
color: var(--text-tertiary);
margin-right: -4px;
}
.apex-fin-select,
.apex-fin-monthinput {
height: 30px;
padding: 0 30px 0 12px;
border: 1px solid var(--separator-strong);
border-radius: 8px;
background: var(--surface) url("data:image/svg+xml;utf8,") no-repeat right 10px center;
background-size: 12px;
font: var(--type-meta-strong);
color: var(--text-primary);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
min-width: 160px;
}
.apex-fin-monthinput { background-image: none; padding-right: 12px; min-width: 130px; }
/* ─── Zeilen-Drop-Ziel (Stufe 5) ───────────────────────────────
Aktiv-Markierung während Dragover; Toggle setzt das Modul via
classList (kein inline-Style). */
.apex-fin tbody tr[data-ka-rowdrop].is-active td {
background: var(--semantic-blue-tint);
box-shadow: inset 0 0 0 1px var(--brand-blue);
}
/* ─── Recurring-Marker (Fixkosten §2, Mockup 29) ───────────────────
Turnus-Zelle der Fixkosten-Tabelle: hebt den Turnus hervor,
danach folgt der Zahlungsweg im Tertiär-Ton. */
.apex-fin-recurring {
display: inline-flex;
align-items: center;
gap: 5px;
font: var(--type-cap);
color: var(--text-tertiary);
letter-spacing: 0;
text-transform: none;
}
.apex-fin-recurring strong { color: var(--text-secondary); font-weight: 600; }
/* ─── ToDo-Inbox (§4, Mockup 29) ───────────────────────────────────
Severity-Buckets: 3 Listen (Dringend/Diese Woche/Geplant), je ein
apex-fin-todo-item mit data-severity overdue|warn|info — der Icon-
Tönung-Selektor unten färbt den Glyph-Kreis quellenübergreifend. */
.apex-fin-todo-list { padding: 8px 0; }
.apex-fin-todo-item {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 22px;
border-bottom: 1px solid var(--separator);
cursor: pointer;
}
.apex-fin-todo-item:hover { background: var(--bg-hover); }
.apex-fin-todo-item:last-child { border-bottom: none; }
.apex-fin-todo-icon {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--bg-zebra);
color: var(--text-secondary);
}
.apex-fin-todo-item[data-severity="overdue"] .apex-fin-todo-icon { background: var(--semantic-red-tint); color: var(--semantic-red); }
.apex-fin-todo-item[data-severity="warn"] .apex-fin-todo-icon { background: var(--semantic-amber-tint); color: var(--semantic-amber); }
.apex-fin-todo-item[data-severity="info"] .apex-fin-todo-icon { background: var(--semantic-blue-tint); color: var(--brand-blue); }
.apex-fin-todo-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apex-fin-todo-title { font: var(--type-body-strong); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apex-fin-todo-sub { font: var(--type-meta); color: var(--text-tertiary); }
.apex-fin-todo-actions { display: flex; gap: 6px; align-items: center; }
.apex-fin-todo-section-head {
padding: 16px 22px 8px;
font: var(--type-eyebrow);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-tertiary);
}
/* Icon-Größe md — Glyph-Kreise der ToDo-Items (§4). */
.apex-icon-md { width: 18px; height: 18px; }
/* ─── StB-Export Card-Grid (§5, Mockup 29) ─────────────────────────
3-spaltiges Paket-Karten-Grid; Glyph-Plate mit data-tone green/amber/blue. */
.apex-fin-export-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 18px 22px 22px;
}
.apex-fin-export-card {
background: var(--surface);
border: 1px solid var(--separator);
border-radius: 12px;
padding: 18px 18px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.apex-fin-export-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.apex-fin-export-card-title {
font: var(--type-body-strong);
color: var(--text-primary);
}
.apex-fin-export-card-desc {
font: var(--type-meta);
color: var(--text-tertiary);
}
.apex-fin-export-card-meta {
display: flex;
gap: 12px;
flex-wrap: wrap;
font: var(--type-meta);
color: var(--text-tertiary);
margin-top: 4px;
}
.apex-fin-export-card-meta strong { color: var(--text-primary); font-weight: 600; }
.apex-fin-export-card-foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
padding-top: 12px;
border-top: 1px solid var(--separator);
}
.apex-fin-export-glyph {
width: 36px;
height: 36px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-zebra);
color: var(--text-secondary);
flex: none;
}
.apex-fin-export-glyph[data-tone="green"] { background: var(--semantic-green-tint); color: var(--semantic-green); }
.apex-fin-export-glyph[data-tone="amber"] { background: var(--semantic-amber-tint); color: var(--semantic-amber); }
.apex-fin-export-glyph[data-tone="blue"] { background: var(--semantic-blue-tint); color: var(--brand-blue); }
.apex-fin-export-card-foot .apex-button { flex: none; }
/* ─── StB-Export · Custom-Export-Modal Checklist (§5 Stufe 4, Mockup 29)
GoBD-/DATEV-Bestätigungen: vertikale Liste nativer Checkboxen im
apex-modal-md. Rein visuelle Frontend-Auswahl. */
.apex-fin-export-checklist {
display: flex;
flex-direction: column;
gap: 8px;
}
.apex-fin-export-check {
display: flex;
align-items: flex-start;
gap: 8px;
font: var(--type-meta);
color: var(--text-secondary);
cursor: pointer;
}
.apex-fin-export-check input {
margin: 1px 0 0;
flex: none;
cursor: pointer;
accent-color: var(--brand-blue);
}
/* ════════════════════════════════════════════════════════════════════
§2 KONTOAUSZUG-MATCHING v2 — apex-fin-ka-* (Mockup 34, S65, 2026-06-08)
HIG-Restraint: monochromes Hauptbuch, Blau = einziger Interaktions-Akzent,
Semantik (Amber/Rot) nur für echte Ausnahmen. Match-Zelle ohne Pillen
(Glyph + Beleg-Text). Action-Spalte: 1 Hauptaktion + "…"-Overflow-Menü.
Kollidierende Generika (iconbtn/menu/field) bewusst apex-fin-ka-* genamespaced.
════════════════════════════════════════════════════════════════════ */
/* ─── Match-Detail Header ──────────────────────────────────── */
.apex-fin-ka-headerbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; border-bottom:1px solid var(--separator); background:var(--surface); }
.apex-fin-ka-headtitle { display:flex; align-items:baseline; gap:9px; min-width:0; }
.apex-fin-ka-headtitle h2 { font:var(--type-h4); font-size:16px; margin:0; letter-spacing:-0.2px; color:var(--text-primary); }
.apex-fin-ka-headtitle .sub { font:var(--type-meta); color:var(--text-tertiary); }
/* ─── Status-Strip (4 Reiter) — monochrom, nur „Offen" blau ── */
.apex-fin-ka-stats { display:flex; align-items:stretch; gap:0; padding:0; border-bottom:1px solid var(--separator); background:var(--surface); }
.apex-fin-ka-stat { display:flex; flex-direction:column; gap:2px; padding:12px 20px; border-right:1px solid var(--separator); }
.apex-fin-ka-stat .n { font:700 19px/1 var(--font-stack); letter-spacing:-0.4px; font-variant-numeric:tabular-nums; color:var(--text-primary); }
.apex-fin-ka-stat .l { font:var(--type-cap); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-tertiary); }
.apex-fin-ka-stat.is-focus { box-shadow: inset 0 -2px 0 var(--brand-blue); }
.apex-fin-ka-stat.is-focus .n { color:var(--brand-blue); }
.apex-fin-ka-stat.is-total { margin-left:auto; border-right:none; border-left:1px solid var(--separator); align-items:flex-end; }
.apex-fin-ka-stat.is-total .l { color:var(--text-quaternary); }
/* ─── Legende ──────────────────────────────────────────────── */
.apex-legend { display:flex; flex-wrap:wrap; gap:8px 20px; padding:10px 18px; background:var(--bg-zebra); border-bottom:1px solid var(--separator); font:var(--type-meta); color:var(--text-tertiary); }
.apex-legend .item { display:inline-flex; align-items:center; gap:7px; }
.apex-legend .sw { width:11px; height:11px; border-radius:3px; flex:none; }
.apex-legend .sw.green { background:rgba(30,123,58,.55); }
.apex-legend .sw.amber { background:rgba(184,120,0,.6); }
.apex-legend .sw.red { background:rgba(192,57,43,.55); }
.apex-legend .mk { width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; color:var(--text-tertiary); }
.apex-legend b { color:var(--text-secondary); font-weight:600; }
.apex-legend .is-spacer { margin-left:auto; }
/* ─── Buchungstabelle (table.apex-fin.apex-fin-ka) ─────────── */
/* S67-Nachfix (R-207): feste Spaltenbreiten; Gegenstelle (klassenlose Spalte)
absorbiert den Zugewinn der breiteren 90vw-Overlay. */
table.apex-fin-ka { table-layout:fixed; width:100%; }
.apex-fin-ka .c-nr { width:42px; color:var(--text-quaternary); font-variant-numeric:tabular-nums; }
.apex-fin-ka .c-date { width:96px; font-family:var(--font-mono); font-size:12.5px; color:var(--text-tertiary); }
.apex-fin-ka .c-amt { width:128px; text-align:right; white-space:nowrap; font:var(--type-cell-strong); font-variant-numeric:tabular-nums; }
.apex-fin-ka .c-sh { width:46px; text-align:center; color:var(--text-quaternary); font:600 11px/1 var(--font-stack); }
.apex-fin-ka .c-match { width:420px; }
.apex-fin-ka .c-act { width:230px; text-align:right; }
/* Gegenstelle-Zelle */
.apex-fin-ka-gs { display:flex; flex-direction:column; gap:1px; min-width:0; }
.apex-fin-ka-gs .name { font:var(--type-cell-strong); color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apex-fin-ka-gs .vz { font:var(--type-meta); color:var(--text-tertiary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:560px; }
/* Match-Zelle — Glyph + Beleg-Text, KEINE Pillen */
.apex-fin-ka-match { display:inline-flex; align-items:center; gap:7px; min-width:0; max-width:100%; font:var(--type-meta); }
.apex-fin-ka-match .mk { width:15px; height:15px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.apex-fin-ka-match .ref { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apex-fin-ka-match.is-done { color:var(--text-tertiary); }
.apex-fin-ka-match.is-done .mk { color:var(--text-tertiary); }
.apex-fin-ka-match.is-suggested { color:var(--text-secondary); }
.apex-fin-ka-match.is-suggested .mk { color:var(--text-secondary); }
.apex-fin-ka-match.is-dev { color:var(--semantic-amber); }
.apex-fin-ka-match.is-dev .mk { color:var(--semantic-amber); }
.apex-fin-ka-match.is-dev .dot { width:7px; height:7px; border-radius:50%; background:var(--semantic-amber); }
.apex-fin-ka-state { font:var(--type-meta); color:var(--text-tertiary); display:inline-flex; align-items:center; gap:6px; }
.apex-fin-ka-empty { color:var(--text-quaternary); font:var(--type-meta); }
/* Aktionscluster + Icon-Button + Undo */
.apex-fin-ka-act { display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; }
.apex-fin-ka-iconbtn { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--separator-strong); background:var(--surface); color:var(--text-secondary); border-radius:8px; cursor:pointer; }
.apex-fin-ka-iconbtn:hover { background:var(--bg-hover); color:var(--text-primary); }
.apex-fin-ka-iconbtn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.apex-act-undo { font:var(--type-meta-strong); color:var(--text-tertiary); background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:7px; display:inline-flex; align-items:center; gap:5px; opacity:0; transition:opacity .12s; }
.apex-fin-ka tbody tr:hover .apex-act-undo { opacity:1; }
.apex-act-undo:hover { color:var(--brand-blue); }
.apex-act-undo:focus-visible { opacity:1; outline:none; box-shadow:var(--focus-ring); }
/* Overflow-Menü (apex-fin-ka-menu, genamespaced gg. overlay.apex.css .apex-menu) */
.apex-fin-ka-menu-wrap { position:relative; display:inline-flex; }
/* Positionierung via uiPopover (.ui-popover, fixed an body) — keine absolute Position mehr (overflow-Clipping eliminiert). Breite/Optik bleibt. */
.apex-fin-ka-menu { min-width:208px; background:var(--surface); border:1px solid var(--separator); border-radius:11px; box-shadow:var(--shadow-popover); padding:5px; }
.apex-fin-ka-menu[hidden] { display:none; }
.apex-fin-ka-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:8px 9px; border:none; background:none; border-radius:7px; font:var(--type-meta-strong); color:var(--text-primary); cursor:pointer; text-align:left; }
.apex-fin-ka-menu button:hover { background:var(--bg-hover); }
.apex-fin-ka-menu button .apex-icon { color:var(--text-tertiary); }
.apex-fin-ka-menu button.is-danger { color:var(--semantic-red); }
.apex-fin-ka-menu button.is-danger .apex-icon { color:var(--semantic-red); }
.apex-fin-ka-menu-sep { height:1px; background:var(--separator); margin:5px 4px; }
.apex-fin-ka-menu-label { font:var(--type-cap); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-quaternary); padding:6px 9px 3px; }
/* Zeilen-Zustände */
.apex-fin-ka tbody tr.is-done td { color:var(--text-secondary); }
.apex-fin-ka tbody tr.is-strike .c-amt,
.apex-fin-ka tbody tr.is-strike .apex-fin-ka-gs .name { text-decoration:line-through; }
.apex-fin-ka tbody tr.is-strike td,
.apex-fin-ka tbody tr.is-strike .apex-fin-ka-gs .name { color:var(--text-quaternary); }
.apex-fin-ka tbody tr.is-st-green td { background:rgba(30,123,58,.05); }
.apex-fin-ka tbody tr.is-st-green:hover td { background:rgba(30,123,58,.09); }
.apex-fin-ka tbody tr.is-st-green td:first-child { box-shadow: inset 3px 0 0 0 rgba(30,123,58,.5); }
.apex-fin-ka tbody tr.is-st-amber td { background:rgba(184,120,0,.06); }
.apex-fin-ka tbody tr.is-st-amber:hover td { background:rgba(184,120,0,.11); }
.apex-fin-ka tbody tr.is-st-amber td:first-child { box-shadow: inset 3px 0 0 0 rgba(184,120,0,.55); }
.apex-fin-ka tbody tr.is-st-red td { background:rgba(192,57,43,.05); }
.apex-fin-ka tbody tr.is-st-red:hover td { background:rgba(192,57,43,.09); }
.apex-fin-ka tbody tr.is-st-red td:first-child { box-shadow: inset 3px 0 0 0 rgba(192,57,43,.5); }
/* Summary */
.apex-fin-ka-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; background:var(--bg-zebra); border-top:1px solid var(--separator); font:var(--type-meta-strong); color:var(--text-secondary); }
.apex-fin-ka-summary .prog { display:inline-flex; align-items:center; gap:10px; }
.apex-fin-ka-summary .bar { width:160px; height:5px; border-radius:3px; background:var(--separator); position:relative; overflow:hidden; }
.apex-fin-ka-summary .bar > i { position:absolute; left:0; top:0; bottom:0; background:var(--text-tertiary); border-radius:3px; width:calc(var(--ratio-pct, 0) * 1%); }
/* ─── Modal-Inhalt (Shell kommt aus uiModal: apex-modal-stage/-md/-lg) ── */
.apex-bankinfo { display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:10px; background:var(--bg-zebra); border-left:2px solid var(--brand-blue); color:var(--text-secondary); font:var(--type-meta-strong); }
.apex-bankinfo b { color:var(--text-primary); }
/* S68 R-96: volle Bankbuchungs-Infozeile — Verwendungszweck IMMER sichtbar,
mehrzeilig, kein Ellipsis, kein Tooltip-Versteck. */
.apex-bankinfo-full { flex-direction:column; align-items:stretch; gap:6px; }
.apex-bankinfo-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.apex-bankinfo-meta { color:var(--text-secondary); font:var(--type-meta); }
.apex-bankinfo-vz { font:var(--type-meta); color:var(--text-secondary); white-space:normal; word-break:break-word; line-height:1.45; }
.apex-fin-ka-field { display:flex; flex-direction:column; gap:5px; }
/* Manuell-Modal */
.apex-mm-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.apex-mm-toolbar .apex-input { flex:1 1 240px; }
.apex-mm-toolbar .apex-select { width:auto; min-width:140px; }
.apex-mm-search { position:relative; flex:1 1 240px; }
.apex-mm-search .apex-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-tertiary); }
.apex-mm-search .apex-input { width:100%; padding-left:32px; }
.apex-mm-sectitle { font:var(--type-cap); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-tertiary); }
.apex-mm-table-wrap { border:1px solid var(--separator); border-radius:10px; overflow:hidden; }
table.apex-mm { width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; }
.apex-mm thead th { background:var(--bg-zebra); font:var(--type-eyebrow); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-tertiary); text-align:left; padding:8px 12px; border-bottom:1px solid var(--separator); white-space:nowrap; }
.apex-mm thead th.is-right { text-align:right; }
.apex-mm tbody td { padding:9px 12px; border-bottom:1px solid var(--separator); font:var(--type-meta); color:var(--text-primary); vertical-align:middle; }
.apex-mm tbody tr:last-child td { border-bottom:none; }
.apex-mm tbody tr:hover td { background:var(--bg-hover); }
.apex-mm td.is-right { text-align:right; white-space:nowrap; }
.apex-mm td.is-mono { font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); }
.apex-mm-typ { display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; border-radius:5px; font:700 10px/1 var(--font-stack); background:var(--material-tint); color:var(--text-secondary); }
.apex-mm-state { font:var(--type-meta); color:var(--text-tertiary); }
.apex-mm-addbtn { width:26px; height:26px; border-radius:7px; border:1px solid var(--separator-strong); background:var(--surface); color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.apex-mm-addbtn:hover { background:var(--bg-hover); color:var(--brand-blue); border-color:var(--brand-blue); }
.apex-mm-empty { padding:11px 14px; border:1px dashed var(--separator-strong); border-radius:10px; font:var(--type-meta); color:var(--text-tertiary); background:var(--bg-zebra); }
.apex-mm-sum { border:1px solid var(--separator); border-radius:10px; overflow:hidden; }
.apex-mm-sum-row { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; font:var(--type-meta-strong); color:var(--text-secondary); border-bottom:1px solid var(--separator); }
.apex-mm-sum-row:last-child { border-bottom:none; }
.apex-mm-sum-row .v { font-variant-numeric:tabular-nums; color:var(--text-primary); }
.apex-mm-sum-row.is-diff { background:var(--bg-zebra); }
.apex-mm-sum-row.is-diff .v.is-warn { color:var(--semantic-red); }
/* ─── S66 Manuell-Zuweisen: 3-Zonen-Layout (Header+Toolbar fix · Trefferliste
scrollt · Auswahl+Summen fix). Behebt Modal-Overflow > Viewport (Header/Footer
abgeschnitten bei langer Liste). max-height 85vh; uiModal-head/-foot bleiben fix. */
.apex-modal.apex-mm-modal { max-height: 85vh; }
.apex-modal.apex-mm-modal .apex-modal-head,
.apex-modal.apex-mm-modal .apex-modal-foot { flex: 0 0 auto; }
.apex-modal.apex-mm-modal .apex-modal-body {
flex: 1 1 auto; min-height: 0; overflow: hidden;
display: flex; flex-direction: column; gap: 14px;
}
.apex-mm-modal .apex-mm-fixed { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; }
.apex-mm-modal .apex-mm-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Vorschlag-Hervorhebung + Begründungs-Chips + Empty-State/Eskalation (S66) */
.apex-mm tbody tr.is-vorschlag td { background: var(--semantic-blue-tint); }
.apex-mm tbody tr.is-vorschlag td:first-child { box-shadow: inset 2px 0 0 var(--brand-blue); }
.apex-mm-badge { display:inline-block; margin-left:8px; padding:1px 7px; border-radius:6px; background:var(--brand-blue); color:#fff; font:700 10px/1.5 var(--font-stack); text-transform:uppercase; letter-spacing:var(--tracking-wide); vertical-align:middle; }
.apex-mm-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.apex-mm-chip { display:inline-flex; align-items:center; padding:1px 7px; border-radius:6px; background:var(--material-tint); color:var(--text-secondary); font:var(--type-cap); white-space:nowrap; }
.apex-mm-noresult { display:flex; flex-direction:column; align-items:flex-start; gap:11px; padding:18px; border:1px dashed var(--separator-strong); border-radius:10px; background:var(--bg-zebra); }
.apex-mm-noresult-txt { font:var(--type-meta-strong); color:var(--text-secondary); }
.apex-mm-eskalhint { padding:7px 12px; border-radius:8px; background:var(--bg-zebra); border-left:2px solid var(--brand-blue); color:var(--text-secondary); font:var(--type-meta); margin-bottom:10px; }
/* ─── S66-UX Kandidaten-Karten (ersetzen Tabellenzeilen im Treffer-Bereich) ── */
.apex-mm-hidden { display:none !important; }
.apex-mm-cards { display:flex; flex-direction:column; gap:8px; }
.apex-mm-card { display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--separator); border-radius:12px; background:var(--surface); }
.apex-mm-card.is-best { border-color:var(--brand-blue); box-shadow:inset 0 0 0 1px var(--brand-blue); background:var(--semantic-blue-tint); }
.apex-mm-card-pct { flex:0 0 auto; min-width:56px; text-align:center; font:700 22px/1 var(--font-stack); color:var(--text-secondary); font-variant-numeric:tabular-nums; cursor:default; }
.apex-mm-card.is-best .apex-mm-card-pct { color:var(--brand-blue); }
.apex-mm-card-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.apex-mm-card-row1, .apex-mm-card-row2 { display:flex; align-items:baseline; gap:10px; }
.apex-mm-card-party { font:var(--type-cell-strong); color:var(--text-primary); }
.apex-mm-card-nr { font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); }
.apex-mm-card-amt { margin-left:auto; font:var(--type-cell-strong); font-variant-numeric:tabular-nums; color:var(--text-primary); white-space:nowrap; }
.apex-mm-card-desc { font:var(--type-meta); color:var(--text-secondary); min-width:0; }
.apex-mm-card-date { margin-left:auto; font:var(--type-meta); color:var(--text-tertiary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.apex-mm-card-actions { flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.apex-mm-card-plus { width:30px; height:30px; border-radius:8px; border:1px solid var(--separator-strong); background:var(--surface); color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.apex-mm-card-plus:hover { background:var(--bg-hover); color:var(--brand-blue); border-color:var(--brand-blue); }
.apex-mm-card-inakt { display:inline-flex; align-items:center; gap:5px; font:var(--type-meta); color:var(--semantic-green); white-space:nowrap; }
/* MATCH-UX-1 B3: voll getilgt = gesperrt/ausgegraut; Tilgungs-Hinweiszeile. */
.apex-mm-card.is-locked { background:var(--bg-zebra); border-color:var(--separator); opacity:0.72; }
.apex-mm-card.is-locked .apex-mm-card-party,
.apex-mm-card.is-locked .apex-mm-card-amt { color:var(--text-secondary); }
.apex-mm-card-row3 { display:flex; align-items:baseline; gap:8px; }
.apex-mm-card-locked { display:inline-flex; align-items:center; gap:5px; font:var(--type-meta); color:var(--text-tertiary); white-space:nowrap; }
.apex-mm-card-rest { font:var(--type-meta); color:var(--semantic-amber); white-space:nowrap; }
/* Verknüpfen-Popup (createElement in apex-modal-stage) */
.apex-pop { width:100%; max-width:760px; background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--shadow-modal); overflow:hidden; display:flex; flex-direction:column; max-height:calc(100vh - 64px); }
.apex-pop-head { padding:16px 20px; border-bottom:1px solid var(--separator); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.apex-pop-head h3 { font:var(--type-h4); font-size:16px; margin:0; color:var(--text-primary); }
.apex-pop-body { padding:14px 20px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.apex-delta { color:var(--text-quaternary); }
.apex-delta.is-warn { color:var(--semantic-amber); }
/* Steuer-Modal */
.apex-vz-list { display:flex; flex-direction:column; gap:7px; }
.apex-vz { display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--separator-strong); border-radius:10px; cursor:pointer; }
.apex-vz:hover { background:var(--bg-hover); }
.apex-vz.is-sel { border-color:var(--brand-blue); box-shadow: inset 0 0 0 1px var(--brand-blue); }
.apex-vz input { accent-color:var(--brand-blue); width:16px; height:16px; }
.apex-vz-body { display:flex; flex-direction:column; gap:1px; min-width:0; }
.apex-vz-title { font:var(--type-meta-strong); color:var(--text-primary); }
.apex-vz-sub { font:var(--type-meta); color:var(--text-tertiary); }
.apex-vz-amt { margin-left:auto; font:var(--type-cell-strong); font-variant-numeric:tabular-nums; color:var(--text-primary); }
.apex-pos-row { display:grid; grid-template-columns: 1.1fr 1fr 120px 32px; gap:9px; align-items:center; }
.apex-pos-row .apex-input, .apex-pos-row .apex-select { height:34px; }
.apex-pos-row .is-amt { text-align:right; }
.apex-pos-rm { width:32px; height:34px; border:1px solid var(--separator-strong); border-radius:8px; background:var(--surface); color:var(--text-tertiary); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.apex-pos-rm:hover { background:var(--bg-hover); color:var(--semantic-red); }
.apex-rest { display:flex; align-items:center; justify-content:space-between; padding:10px 13px; border-radius:10px; background:var(--bg-zebra); font:var(--type-meta-strong); color:var(--text-secondary); }
.apex-rest .v { font-variant-numeric:tabular-nums; color:var(--text-primary); }
.apex-rest .v.is-ok { color:var(--semantic-green); }
.apex-rest .v.is-warn { color:var(--semantic-amber); }
/* ─── §2 Hilfsklassen: Loading / Error / Empty / Listen-Rest (S65) ── */
.apex-fin-ka-slot { margin-top: 18px; }
.apex-fin-ka-loading { padding:28px 18px; text-align:center; }
.apex-fin-ka-loading-blue { padding:18px; border:1px solid var(--separator); border-radius:10px; background:var(--semantic-blue-tint); margin:14px 18px; }
.apex-fin-ka-loading-title { font:var(--type-meta-strong); color:var(--text-primary); }
.apex-fin-ka-loading-sub { font:var(--type-meta); color:var(--text-tertiary); margin-top:3px; }
.apex-fin-ka-loading-small { padding:18px; font:var(--type-meta); color:var(--text-tertiary); text-align:center; }
.apex-fin-ka-error { padding:14px 18px; margin:14px 18px; border:1px solid var(--separator); border-left:2px solid var(--semantic-red); border-radius:8px; background:var(--semantic-red-tint); font:var(--type-meta-strong); color:var(--semantic-red); }
.apex-fin-ka-emptystate { padding:28px 18px; text-align:center; font:var(--type-meta); color:var(--text-tertiary); }
.apex-fin-ka-buchnum { font:var(--type-cell-strong); font-variant-numeric:tabular-nums; color:var(--text-primary); }
.apex-fin-ka-muted { color:var(--text-quaternary); }
.apex-fin-ka-upload-status { font:var(--type-meta); color:var(--text-tertiary); }
.apex-fin-ka-mm-body { display:flex; flex-direction:column; gap:14px; }
/* Checkbox-Label (S65, Manuell-Modal "nur offene") */
.apex-check { display:inline-flex; align-items:center; gap:7px; font:var(--type-meta-strong); color:var(--text-secondary); cursor:pointer; user-select:none; white-space:nowrap; }
.apex-check input { width:16px; height:16px; accent-color:var(--brand-blue); }
/* ─── S67 Kontoauszüge: Matching-Overlay (Vollbild) + Zahnrad-Popover ──
Overlay liegt auf --z-modal; das später angehängte uiModal-Stage (gleicher
z-Index, später im DOM) erscheint darüber. Kopf + Summary fix, nur die
Buchungsliste scrollt → ein interner Scrollbalken. */
.apex-ka-overlay { position:fixed; inset:0; z-index:var(--z-modal); background:var(--backdrop-modal); backdrop-filter:blur(var(--blur-modal)); -webkit-backdrop-filter:blur(var(--blur-modal)); display:flex; align-items:stretch; justify-content:center; padding:28px 0; }
.apex-ka-overlay-panel { width:90vw; max-width:1600px; max-height:100%; display:flex; flex-direction:column; background:var(--surface); border-radius:16px; box-shadow:var(--shadow-modal); overflow:hidden; }
.apex-ka-overlay-head { position:relative; flex:0 0 auto; padding:18px 22px 14px; border-bottom:1px solid var(--separator); }
.apex-ka-overlay-x { position:absolute; top:14px; right:16px; width:32px; height:32px; border:none; background:transparent; border-radius:8px; color:var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.apex-ka-overlay-x:hover { background:var(--bg-hover); color:var(--text-primary); }
.apex-ka-overlay-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; padding:8px 22px; }
.apex-ka-overlay-foot { flex:0 0 auto; }
.apex-ka-konto-wrap { position:relative; display:inline-flex; }
/* Positionierung via uiPopover (.ui-popover, fixed an body) — keine absolute Position mehr. Optik bleibt. */
.apex-ka-kontopop { min-width:220px; background:var(--surface); border:1px solid var(--separator-strong); border-radius:12px; box-shadow:var(--shadow-modal); padding:8px; display:flex; flex-direction:column; gap:2px; }
.apex-ka-kontopop-title { font:var(--type-cap); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-tertiary); padding:4px 8px 6px; }
.apex-ka-kontopop-row { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px; font:var(--type-meta); color:var(--text-primary); cursor:pointer; }
.apex-ka-kontopop-row:hover { background:var(--bg-hover); }
.apex-ka-kontopop-row input { width:16px; height:16px; accent-color:var(--brand-blue); }
.apex-ka-archiv-btn.is-active { background:var(--brand-blue); color:#fff; border-color:var(--brand-blue); }