/* =====================================================================
   RechnungsWERK — Oberfläche (Fassung 0.1.0, 17.10.2026)

   Liste und Akte nach core/akte/bauwerk-akte.css (Quelle BauWERKCORE/packages/akte)
   und docs/design/DESIGNSYSTEM.md. Kopf, Sperrseite und Dialoge sind von
   ProjektWERK übernommen. Die Leitfarbe Salbei kommt über data-bw-product="rechnungswerk"
   aus dem Core (ADR-008, Nachtrag 17.10.2026) — hier nirgends als Hex wiederholt.
   ===================================================================== */
:root {
  --bw-color-focus: var(--c-accent);
  --bw-marke-akzent: var(--bw-product-rechnungswerk, #697c5e);
  --bw-icon-akzent: var(--bw-color-accent);
  --pj-lesebreite: 1700px;
  --z-sticky: 20;
  --z-bereiche: 30;
  --z-kalender: 90;
  --liste-b: 380px;
  --kopf-h: 104px;
}
@media (max-width: 1279.98px) { :root { --liste-b: 340px; } }
@media (max-width: 767.98px) { :root { --kopf-h: 0px; } }

html { min-width: 320px; }
body { min-height: 100vh; margin: 0; background: var(--bw-color-canvas); color: var(--bw-color-text); font-family: var(--bw-font-ui); font-weight: var(--bw-font-weight-base); font-variant-numeric: tabular-nums; }
body[data-bereich="rechnungen"], body[data-bereich="auftraege"] { background: var(--c-ground); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: var(--bw-font-weight-base); text-wrap: balance; }
button, input, select, textarea { font-weight: 400; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--bw-color-focus); outline-offset: 2px; }
::selection { background: var(--bw-color-accent-surface); }
.gedaempft { color: var(--bw-color-text-muted); }
.blass { color: var(--bw-color-text-faint); }

/* --- Kopf: Zeile 1 (56 px) und Bereichsreiter (48 px) ------------------ */
.app-header { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; min-height: 56px; padding: 0 20px; border-bottom: 1px solid var(--bw-color-line); background: var(--bw-color-surface); }
.app-title { display: flex; align-items: center; min-width: 150px; font-size: 21px; line-height: 1; }
.app-subtitle { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--bw-color-line); color: var(--bw-color-text-muted); font-size: var(--bw-type-meta); }
.fassung { margin-left: 4px; color: var(--bw-color-text-muted); font-size: var(--bw-type-meta); }
.cloud-state { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; padding: 3px 10px; border-radius: var(--bw-radius-pill); background: var(--bw-color-surface-subtle); color: var(--bw-color-text-muted); font-size: var(--bw-type-meta); white-space: nowrap; }
.cloud-state span { width: 7px; height: 7px; border-radius: 50%; background: var(--bw-color-line-strong); }
.cloud-state.verbunden { background: var(--c-ok-bg); color: var(--c-ok-text); }
.cloud-state.verbunden span { background: var(--c-ok-dot); }
.bw-markenecke { margin-left: auto; }

.ansichten { position: sticky; top: 56px; z-index: var(--z-sticky); display: flex; align-items: stretch; gap: 2px; min-height: 48px; padding: 0 20px; background: var(--bw-color-surface); border-bottom: 1px solid var(--bw-color-line); }
.ansichten .raum { flex: 1; }
.ansichten [role="tab"] { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; margin-bottom: -1px; font-size: var(--bw-type-body); color: var(--bw-color-text-muted); border-bottom: 2px solid transparent; }
.ansichten [role="tab"]:hover { color: var(--bw-color-text); }
.ansichten [role="tab"][aria-selected="true"] { color: var(--c-accent-dark); border-bottom-color: var(--c-accent); }
.ansichten [role="tab"]:focus-visible { outline: 2px solid var(--bw-color-focus); outline-offset: -2px; border-radius: 4px; }
.ansichten .bw-action-button { align-self: center; }
.tab-zeichen { display: none; }
.zaehl { min-width: 20px; padding: 0 6px; border-radius: var(--bw-radius-pill); font-size: var(--bw-type-meta); line-height: 18px; text-align: center; background: var(--bw-color-warning-surface); color: var(--bw-color-warning); border: 1px solid var(--bw-color-warning); }
.zaehl.null { background: var(--bw-color-surface-subtle); color: var(--bw-color-text-muted); border-color: var(--bw-color-line); }

/* --- Rahmen der übrigen Reiter ----------------------------------------- */
main { width: min(var(--pj-lesebreite), 100%); margin: 0 auto; padding: 16px 20px 40px; }
body[data-bereich="rechnungen"] main { width: auto; max-width: none; margin: 0; padding: 0; }
.work-surface { border: 1px solid var(--bw-color-line); border-radius: var(--bw-radius-md); background: var(--bw-color-surface); }
.befehlszeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.befehlszeile h1 { margin-bottom: 2px; font-size: var(--bw-type-title); line-height: 1.15; }
.befehlszeile p { margin-bottom: 0; max-width: 70ch; color: var(--bw-color-text-muted); font-size: var(--bw-type-body); }
.befehle { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.umschalter { display: inline-flex; }
.umschalter .bw-action-button { border-radius: 0; margin-left: -1px; }
.umschalter .bw-action-button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.umschalter .bw-action-button:last-child { border-radius: 0 6px 6px 0; }
.umschalter .bw-action-button[aria-pressed="true"] { position: relative; z-index: 1; border-color: var(--bw-color-accent); background: var(--bw-color-accent-surface); color: var(--bw-color-accent); }
.leer-zeile td { padding: 26px 12px; color: var(--bw-color-text-muted); text-align: center; cursor: default; }

/* Stand: immer Wort UND Form, nie Farbe allein (WCAG, PRODUCT.md) */
.stand { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bw-type-meta); white-space: nowrap; }
.stand::before, .sdot::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.stand.aktiv, .sdot.aktiv { color: var(--c-ok-dot); }
.stand.angebot, .sdot.angebot { color: var(--c-accent); }
.stand.angebot::before, .sdot.angebot::before { background: transparent; border-radius: 1px; box-shadow: inset 0 0 0 1.5px currentColor; transform: rotate(45deg) scale(.85); }
.stand.ruht, .sdot.ruht { color: var(--bw-color-warning); }
.stand.ruht::before, .sdot.ruht::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.stand.abgeschlossen, .sdot.abgeschlossen { color: var(--c-muted); }
.stand.abgeschlossen::before, .sdot.abgeschlossen::before { border-radius: 2px; }
.stand.offen { color: var(--bw-color-warning); }
.stand.uebernommen { color: var(--c-ok-dot); }
.stand.in_app_belassen { color: var(--c-accent); }
.stand.abgelehnt { color: var(--c-muted); }
.sdot { display: inline-flex; align-items: center; }
.sdot::before { width: 10px; height: 10px; }

/* --- Die Akte (Projekte) ----------------------------------------------- */
.akte-kopf--projekt { align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.akte-kopf--projekt .akte-titel { flex: 1; }
.akte-kopf--projekt h1 { margin: var(--s-3) 0 4px; font-size: 32px; line-height: 1.15; }
.akte-kopf--projekt h1 .zusatz { color: var(--c-muted); font-size: .6em; }
.kachel--nummer { display: inline-flex; width: auto; height: 34px; padding: 0 var(--s-3); border-radius: var(--r-chip); font-size: var(--t-body); }
.kachel--nummer.keine { background: var(--c-muted); font-weight: 400; }
.pill--status { gap: 6px; }
.pill--status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--status.aktiv { border-color: transparent; background: var(--c-ok-bg); color: var(--c-ok-text); }
.pill--status.angebot { color: var(--c-accent-dark); background: var(--c-accent-wash); }
.pill--status.ruht { color: var(--bw-color-warning); background: var(--bw-color-warning-surface); border-color: transparent; }
.pill--status.abgeschlossen { color: var(--c-muted); }
.pills { align-items: center; }
.akte-ort { margin: 0; color: var(--c-muted); font-size: var(--t-body); }
.akte-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.knopf--icon { min-width: var(--knopf-h); padding: 0; font-size: 20px; line-height: 1; }
.menue-wurzel { position: relative; }
.menue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 250px; padding: var(--s-1); border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); box-shadow: 0 20px 50px rgba(0, 0, 0, .18); }
.menue button { display: block; width: 100%; min-height: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-control); background: transparent; color: var(--c-ink); font-size: var(--t-body); text-align: left; cursor: pointer; }
.menue button:hover, .menue button:focus-visible { background: var(--c-ground); }
.menue hr { margin: var(--s-1) 0; border: 0; border-top: 1px solid var(--c-line); }
.menue .menue-gefahr { color: var(--c-fehler-text); }
.menue-text { margin: 0; padding: 0 var(--s-3) var(--s-2); color: var(--c-muted); font-size: var(--t-caption); }
.menue .nur-phone { display: none; }
.lese-hinweis { margin: 0 0 var(--s-3); }

.hinweisleiste { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--c-accent-tint); border-radius: var(--r-card); background: var(--c-accent-wash); font-size: var(--t-body); }
.hinweisleiste b { font-weight: 500; }
.hinweisleiste ul { margin: 4px 0 0; padding-left: 18px; }
.hinweisleiste--klein { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); font-size: var(--t-label); }
.kz-wert.leer { color: var(--c-muted); }
.kz .leer { color: var(--c-muted); }
.kennzahlen--apps { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.kz-unter:empty { display: none; }
.leer { color: var(--c-muted); font-weight: 300; }
.wz .leer { font-style: normal; }

/* Listen-Abschnitte */
.sektion-links h2 .zaehler { margin-left: 4px; color: var(--c-muted); font-size: var(--t-label); font-weight: 300; }
.leerfeld { padding: var(--s-6) var(--s-4); border: 1px dashed var(--c-input-border); border-radius: var(--r-control); color: var(--c-muted); font-size: var(--t-body); text-align: center; }
.lz { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--c-line-soft); }
.lz:last-child { border-bottom: 0; }
.lz-text { display: grid; gap: 2px; min-width: 0; font-size: var(--t-body); overflow-wrap: anywhere; }
.lz-text b { font-weight: 400; }
.lz-text small { color: var(--c-muted); font-size: var(--t-caption); font-weight: 300; }
.lz-akt { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.lz.still .lz-text { color: var(--c-muted); }
.knopf--klein { min-height: 36px; padding: 0 var(--s-3); font-size: var(--t-label); }
.haken--klein { font-size: var(--t-label); }
.rollenkopf { margin: var(--s-4) 0 2px; color: var(--c-muted); font-size: var(--t-overline); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.rollenkopf:first-child { margin-top: 0; }
.felder-gitter--projekt, .felder-gitter--bauherr, .felder-gitter--status, .felder-gitter--ust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.felder-gitter--bauherr .fld:first-child { grid-column: 1 / -1; }
.eingabe--mono { font-family: var(--bw-font-mono); }
.eingabe:disabled { background: var(--c-ground); color: var(--c-disabled); }
.sektion { scroll-margin-top: calc(var(--kopf-h) + var(--s-4)); }
.schale[data-modus="pruefen"] .inhalt { padding-bottom: 340px; }
.klein { font-size: var(--bw-type-meta); color: var(--bw-color-text-muted); }
.ohne { color: var(--bw-color-warning); font-size: var(--bw-type-meta); }
.marke-kk { display: inline-block; padding: 0 5px; border: 1px solid var(--bw-color-line-strong); border-radius: 4px; font-size: var(--bw-type-meta); color: var(--bw-color-text-muted); margin-right: 3px; white-space: nowrap; }
.bw-action-button.klein { min-height: 26px; padding: 2px 8px; font-size: var(--bw-type-meta); color: inherit; }
.leer-hinweis { margin: 4px 0 0; padding: 10px 0; color: var(--c-muted); }

/* iPad hoch und iPhone: untere Bereichsleiste statt Reiterzeile */
@media (max-width: 767.98px) {
  .app-header { display: none; }
  .ansichten { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: var(--z-bereiche); justify-content: space-around; gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bw-color-line); border-bottom: 0; box-shadow: 0 -4px 16px rgba(28, 26, 23, .06); }
  .ansichten [role="tab"] { flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 0 2px; margin: 0; border-bottom: 0; font-size: 12px; position: relative; }
  .ansichten [role="tab"][aria-selected="true"] { color: var(--c-accent-dark); }
  .tab-zeichen { display: block; }
  .ansichten .zaehl { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; line-height: 14px; font-size: 11px; padding: 0 4px; }
  .ansichten .raum, .ansichten #einstellungenKnopf { display: none; }
  main { padding: 10px 10px 90px; }
  body[data-bereich="rechnungen"] main { padding: 0 0 76px; }
  .menue .nur-phone { display: block; }
  .kennzahlen--apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .akte-kopf--projekt { flex-wrap: wrap; }
  .akte-kopf--projekt h1 { font-size: 28px; }
  .akte-aktionen { position: absolute; top: 4px; right: 12px; }
  .zurueck { margin-bottom: 0; }
  .hinweisleiste { flex-wrap: wrap; align-items: flex-start; }
  .hinweisleiste .knopf { width: 100%; }
  .felder-gitter--projekt, .felder-gitter--bauherr, .felder-gitter--status, .felder-gitter--ust { grid-template-columns: minmax(0, 1fr); }
  .lz { flex-wrap: wrap; }
  .lz-akt { justify-content: flex-start; }
  .sektion--liste .sektion-rechts { padding: 0 var(--s-4) var(--s-3); }
  .sektion--apps .kennzahlen { padding: var(--s-3) var(--s-4); }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .app-header, .ansichten { position: sticky; } }

/* --- Sperrseite ------------------------------------------------------ */
.sperre { display: flex; align-items: flex-start; gap: 14px; max-width: 720px; margin: 42px auto; padding: 22px; }
.sperre-zeichen { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: var(--bw-color-warning-surface); color: var(--bw-color-warning); font-weight: 700; }
.sperre h1 { margin-bottom: 5px; font-size: var(--bw-type-section); }
.sperre p { max-width: 62ch; margin-bottom: 15px; color: var(--bw-color-text-muted); }
.sperre-knoepfe { display: flex; flex-wrap: wrap; gap: 7px; }
.sperre-knoepfe a { text-decoration: none; }

/* --- Dialoge --------------------------------------------------------- */
.rw-dialog { width: min(600px, calc(100vw - 32px)); }
.rw-dialog.breit { width: min(780px, calc(100vw - 32px)); }
.rw-dialog .bw-core-modal__body { max-height: min(74vh, 780px); overflow: auto; color: var(--bw-color-text); }
.dialog-einleitung { margin: 0 0 10px; color: var(--bw-color-text-muted); }
.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.felder .breit { grid-column: 1 / -1; }
@media (max-width: 560px) { .felder { grid-template-columns: 1fr; } }
.feld-hinweis { color: var(--bw-color-text-muted); font-size: var(--bw-type-meta); line-height: 1.4; }
.bw-core-input[aria-invalid="true"] { border-color: var(--bw-color-danger); }
.form-fehler { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: var(--bw-color-danger-surface); color: var(--bw-color-danger); font-size: var(--bw-type-meta); }
.warnkasten { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: var(--bw-color-warning-surface); color: var(--bw-color-warning); font-size: var(--bw-type-meta); }
.pj-gefahr { border-color: var(--bw-color-danger); color: var(--bw-color-danger); }
.pj-gefahr:hover:not(:disabled) { background: var(--bw-color-danger-surface); border-color: var(--bw-color-danger); }
.diff-tabelle td { white-space: normal; }
.diff-tabelle td:nth-child(2) { color: var(--bw-color-text-muted); text-decoration: line-through; text-decoration-color: var(--bw-color-line-strong); }
.probe-ergebnis { margin-top: 6px; font-size: var(--bw-type-meta); }



/* =====================================================================
   Nur RechnungsWERK
   ===================================================================== */
/* Stand: immer Wort UND Form, nie Farbe allein */
.stand.eingegangen { color: var(--c-muted); }
.stand.eingegangen::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.stand.in_pruefung { color: var(--c-accent-dark); }
.stand.in_pruefung::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px currentColor; }
.stand.geprueft { color: var(--c-accent-dark); }
.stand.uebersandt { color: var(--c-ok-text); }
.stand.uebersandt::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.stand.bezahlt { color: var(--c-ok-text); }
.pill--akzent { border-color: transparent; background: var(--c-accent-tint); color: var(--c-accent-dark); }
.pill--warn { border-color: transparent; background: #FBEAEA; color: #A1221B; }
.pill--warn::before { content: "▲"; margin-right: 5px; font-size: 10px; }
.pill--ok { }

.chip--lang { min-width: 56px; text-align: center; }
.zeile--rechnung { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 60px; align-items: center; }
.zeile--rechnung .zeile-name { white-space: normal; line-height: 1.25; }
.zeile--rechnung .sub { display: block; color: var(--c-muted); font-size: var(--t-caption); font-weight: 300; }
.zeile--rechnung .zeile-wert { display: grid; justify-items: end; gap: 1px; }
.zeile--rechnung .zeile-wert .ue { color: #8C1D18; font-weight: 400; font-size: var(--t-caption); }
.zeile--rechnung .zeile-wert .ue::before { content: "▲ "; }

.stepper { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-control); overflow: hidden; background: var(--c-surface); }
.stepper div { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--knopf-h); border-right: 1px solid var(--c-line); padding: 0 var(--s-2); font-size: var(--t-label); text-align: center; color: var(--c-muted); }
.stepper div:last-child { border-right: 0; }
.stepper div .n { opacity: .7; }
.stepper .erl { background: var(--c-accent-wash); color: var(--c-accent-dark); }
.stepper .erl::before { content: "✓"; font-weight: 700; }
.stepper .akt { background: var(--c-accent); color: #fff; }

.kz.held { border-color: var(--c-accent); background: var(--c-accent-wash); }
.warn-wert { color: #8C1D18; font-weight: 400; }
.ok-flag { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--c-ok-bg); color: var(--c-ok-text); font-size: var(--t-caption); }
.ok-flag::before { content: "✓ "; font-weight: 700; }
.ue-flag { display: inline-block; padding: 0 8px; border-radius: 999px; background: #FBEAEA; color: #A1221B; font-size: var(--t-caption); }
.ue-flag::before { content: "▲ "; }

.rk { width: 100%; border-collapse: collapse; }
.rk td { padding: 6px 0; border-bottom: 1px solid var(--c-line-soft); font-weight: 400; }
.rk td.pr { width: 62px; color: var(--c-muted); font-weight: 300; }
.rk td.z { text-align: right; white-space: nowrap; width: 150px; }
.rk tr.zw td { font-weight: 700; border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-line); }
.rk tr.ergebnis td { font-size: 19px; border-top: 2px solid var(--c-ink); border-bottom: 0; padding-top: 10px; }
.rk .abw td { color: #8C1D18; }
.rk .m { color: var(--c-muted); font-weight: 300; }

.listen { width: 100%; border-collapse: collapse; }
.listen td, .listen th { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--c-line-soft); text-align: left; font-weight: 400; }
.listen th { color: var(--c-muted); font-weight: 300; font-size: var(--t-label); }
.listen .z { text-align: right; white-space: nowrap; }
.eingabe.zahl { text-align: right; }
.folge { margin-top: var(--s-2); padding: var(--s-3); border-radius: var(--r-control); background: var(--c-ground); font-size: var(--t-label); }
.folge b { font-weight: 400; color: var(--c-accent-dark); }
.fest-hinweis { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin-top: var(--s-3); border: 1px dashed var(--c-line); border-radius: var(--r-control); color: var(--c-muted); font-size: var(--t-label); }
.herkunft { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--c-line); color: var(--c-muted); font-size: var(--t-caption); }
.ereignis { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-3); padding: 6px 0; border-bottom: 1px solid var(--c-line-soft); font-size: var(--t-label); }
.ereignis:last-child { border-bottom: 0; }
.ereignis .wann { color: var(--c-muted); }
.aktionen-leiste { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; }

.kennzahlen--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kennzahlen--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sektion .felder-gitter .fld .prozent { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.zeilenfeld { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: var(--s-2); align-items: center; margin-bottom: 6px; }

.uebersicht-kz { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.uebersicht-tab { width: 100%; }
.uebersicht-tab td, .uebersicht-tab th { white-space: normal; }
.uebersicht-tab td.zahl, .uebersicht-tab th.zahl { text-align: right; white-space: nowrap; }
.uebersicht-tab tr[data-id] { cursor: pointer; }
.uebersicht-tab tr[data-id]:hover { background: var(--c-ground); }
.rw-kopf-seite { margin-bottom: var(--s-4); }
.rw-kopf-seite h1 { font-size: var(--t-display); line-height: 1.1; margin-bottom: 4px; }
.rw-kopf-seite p { color: var(--c-muted); margin: 0; }

/* --- Vorschau Blatt und Anschreiben ----------------------------------- */
.rw-druck { width: min(1040px, 100vw); height: min(96vh, 1200px); padding: 0; border: 0; border-radius: var(--r-card); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.rw-druck::backdrop { background: var(--c-overlay); }
.rw-druck[open] { display: flex; flex-direction: column; }
.rw-druck header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); background: var(--c-surface); flex-wrap: wrap; }
.rw-druck header span { margin-left: var(--s-3); color: var(--c-muted); font-size: var(--t-label); }
.rw-druck-knoepfe { display: flex; gap: var(--s-2); }
.rw-druck iframe { flex: 1; width: 100%; border: 0; background: #5b5f63; }

/* Belegfläche während des Druckens aus der Hauptseite: nichts (gedruckt wird der Rahmen) */

/* Zähler im Reiter: „offen“ ist keine Warnung, nur „überfällig“ */
.ansichten #zaehlOffen { background: var(--c-accent-tint); border-color: transparent; color: var(--c-accent-dark); }
.ansichten #zaehlOffen.null { background: var(--bw-color-surface-subtle); color: var(--bw-color-text-muted); }
/* Zeichen auf Akzentknöpfen in der Knopffarbe, nicht in der Akzentfarbe (sonst unsichtbar) */
.bw-action-button--primary, .knopf--akzent { --bw-icon-akzent: currentColor; }

/* iPhone: der Fortschrittsbalken darf seitlich wischen statt abgeschnitten zu werden */
@media (max-width: 767.98px) {
  .stepper { display: flex; overflow-x: auto; scrollbar-width: none; }
  .stepper div { flex: 0 0 auto; min-width: 96px; flex-direction: column; gap: 0; padding: 6px 8px; font-size: 12px; line-height: 1.25; }
}