/* =========================================================
   MP-20260902-046 — RECHNUNGEN: MOBILE SCHRITT-ANSICHTEN (CSS)
   Jonas Falk (product-engineer), 03.09.2026.

   Dritte Anwendung des generischen Musters (Aufmaß → KVA → Rechnungen).
   NUR #view-rechnung — #view-kva bleibt unberührt (bereits MP-20260902-045,
   ausgeliefert). Jeder Selektor hier ist hart auf "#view-rechnung"
   verdrahtet.

   Gilt AUSSCHLIESSLICH unter max-width:767px — identischer Umschaltpunkt
   wie die bestehende KVA/Rechnungen-Mobil-Kaskade
   (mp-baustellen-golden-v2.css:1028/1088) und wie die beiden Vorgänger.
   Ab 768px bleibt die Tab-Leiste (.mp-editor-section-nav) unverändert wie
   heute — diese Datei greift dort nirgends ein.

   ═════════════════════════════════════════════════════════════════════
   ARCHITEKTUR — WARUM HIER NICHT `.kva-editor` GEKLONT WIRD
   ═════════════════════════════════════════════════════════════════════
   kva-mobile-steps.css eleviert den GESAMTEN `.kva-editor`-Container
   (ein einziger `<main>`, der alle Karten als direkte Kinder trägt).
   #view-rechnung hat KEIN Äquivalent: `.rg-editor-card` sind sieben
   einzelne `<div class="card rg-editor-card">`, direkte GESCHWISTER-
   Kinder von `.view-box` (rechnungen.html, kein wrappendes `<main>`).
   `core/mp-list-workspaces-golden.js cardsFor()` bestätigt das: für
   kind==="offer" wird `.kva-editor > .card` verlangt (Kind-Kombinator),
   für kind==="invoice" nur `.rg-editor-card` OHNE Container-Bindung.

   Ein neu GEBAUTER Wrapper (`.rg-editor-card`s hineinverschieben) würde
   `css/legacy_styles/modules/rechnungen.css:44`
   `#view-rechnung .view-box > .card { margin-bottom: var(--mp-card-gap) }`
   brechen (Kind-Kombinator `>` — sobald die Karten nicht mehr DIREKTE
   Kinder von `.view-box` sind, verlieren sie ihren Kartenabstand, auf
   ALLEN Breiten). Deshalb: `.view-box` SELBST wird der elevierte
   Vollbild-Container — er ist der gemeinsame Vorfahre ALLER
   `.rg-editor-card`s + der dynamisch eingehängten
   `.mp-comm-card[data-kind="invoice"]`. Welche Karte sichtbar ist,
   entscheidet unverändert AUSSCHLIESSLICH die bestehende
   `[data-mp-editor-section]`/`[data-mp-editor-card]`-Kaskade
   (mp-baustellen-golden-v2.css) — SHARED_LEARNINGS.md L-2026-09-03-R,
   nur eine strukturelle Ebene höher angewendet.

   Direkte Folgen (alle NUR unter `[data-mp-editor-mobile-step]`, rein
   additiv):
   1. `.view-header` und `#rgA4Wrapper` (A4-Live-Vorschau,
      core/mp-a4-live-preview.js, TABU-Zone/nur lesend) sind normalerweise
      Geschwister der `.rg-editor-card`s innerhalb `.view-box` — bei KVA
      übernimmt `.kva-editor` diese Trennung strukturell schon (A4-
      Vorschau sitzt dort in einem separaten `.kva-preview`-Wrapper
      AUSSERHALB von `.kva-editor`). Hier werden beide explizit
      ausgeblendet (reines CSS, kein Eingriff in die A4-Vorschau-Logik).
   2. `.mp-workspace-list-master` (Rechnungsliste) wird zur Laufzeit von
      ihrem eigenen "Rail"-Modul zu einem DIREKTEN Kind von
      `#view-rechnung` gemacht (nicht mehr Kind von `.view-box`) — auf
      Mobil ohnehin standardmäßig per `transform:translate3d(-118%,…)`
      off-canvas (mp-list-workspaces-golden.css:2712). Wird hier
      trotzdem defensiv mitversteckt, falls sie zum CSS-Auswertezeitpunkt
      noch unter `.view-box` hängt.
   3. `.mp-editor-command-deck` ist bei KVA `position:sticky;z-index:430`
      und sitzt AUSSERHALB von `.kva-editor` — bleibt beim Elevieren
      strukturell UNTER der fixierten Fläche zurück (430 < 1050). Hier
      ist der Deck dagegen ein KIND des elevierten `.view-box`, wird also
      NICHT verdeckt — er erscheint normal im Inhaltsfluss. Einzige
      Anpassung: `position:sticky` → `static`, weil `top:58px` sonst mit
      dem eigenen fixen Kopf-Chrome (0–92px) kollidieren würde.
   4. Jede sichtbare `.rg-editor-card`/`.mp-comm-card` verliert ihre
      EIGENE Karten-Chrome (Rand/Schatten/Radius/Hintergrund) — innerhalb
      einer bereits opaken Vollbild-Fläche läse sich das sonst wie
      mehrere schwebende Einzelkarten statt EIN durchgehendes
      Schritt-Formular. NUR die Chrome wird neutralisiert, NICHT die
      Card-Body-Polsterung/Formularfelder — keine Business-Logik
      berührt.

   ═════════════════════════════════════════════════════════════════════
   KOORDINATOR-NACHTRAG 03.09.2026 (zweimal während dieser Umsetzung, zum
   DEPLOYTEN KVA-Stand mp016a, Marcels Gerät — MP-045-Nacharbeit lag beim
   Schreiben dieser Datei noch NICHT im Baum, kva-mobile-steps.js/-css vor
   dem Schreiben erneut gelesen: unverändert):
   ═════════════════════════════════════════════════════════════════════
   (1) "Vollbild ist nicht opak — App-Wallpaper scheint zwischen den
   Inhaltskarten durch, Modulkartenrahmen bleibt oberhalb des Schritt-
   Kopfs sichtbar." Eigenständig behoben (siehe Punkte 3+4 oben plus):
   `.view-box{background:#fff}` deckt bei `inset:0` die GESAMTE Fläche
   aus dem eigenen Container heraus (nicht nur über höheren z-index) —
   das Kopf-Chrome bekommt zusätzlich `env(safe-area-inset-top)`-
   Polsterung (deckt eine mögliche Notch-Lücke ab; kein Beleg dafür
   vorhanden, reine Vorsichtsmaßnahme, kostet nichts). Wachen-Probe:
   `elementFromPoint` an Rasterpunkten (Ecken, Ränder, zwischen Karten),
   siehe tools/test-rechnungen-schritt-ansichten-mobile-touch.js.
   (2) "Elevation 1050/1055 zu niedrig — Editor steckt im app-eigenen
   Fenster-/Modulkarten-Chrome (mp-float-window Z_BASIS=1200, „…"-Griff-
   Leiste), Vollbild wirkt in der Karte gefangen." GEPRÜFT (Grep,
   03.09.2026): `#view-kva`/`#view-rechnung` werden an KEINER Stelle über
   `MP_FLOAT_WIN.anbinden()` gebunden (core/mp-float-window.js bindet
   ausschließlich separate Arbeitsfenster — Material-Katalog,
   Leistungskatalog, Notizen, Vermerke, Telefonbuch, Wetter, Planung,
   Kontrollzentrum, KI-Dock-Blase, Tab-Dock — NICHT die Dokument-Editor-
   Views). Kein literaler `.mp-fwin`-Wrapper um `#view-rechnung`
   gefunden. Das "in der Karte gefangen"-Gefühl ist durch Punkt 3+4 oben
   erklärbar und behoben, OHNE die Elevation in die für native Fenster
   reservierte 1200er-Zone zu heben (L-2026-09-03-O: fremde Zahl nicht
   ohne eigenen Beleg übernehmen). Die Wache bindet trotzdem einen
   synthetischen `.mp-fwin`-Stand-in bei z-index 1200 mit Griff-Leiste
   als Gegenprobe ein (Koordinator-Auflage) — Fund an QA/Koordinator zur
   Prüfung auf einem echten Gerät weitergereicht (siehe Handoff).

   Z-INDEX-INVENTAR — erneut geprüft für Rechnungen (nicht nur von KVA
   übernommen, siehe rechnungen-mobile-steps.js Dateikopf für die
   vollständige Herleitung/Korrektur). KORRIGIERT gegenüber dem ersten
   Anlauf dieser Datei (nach L-2026-09-03-Z, während dieser Umsetzung im
   Baum gelandet): „Aus Katalog" ruft `window.openUniversalLvSheet(
   {from:"rechnung"})` (rechnungen.js:4754, aus dem „+ Hinzufügen"-Menü
   via `mpOpenSpawnPortal()`) — NICHT das nirgends definierte `window.
   openLvSheet()` (toter Fallback-Zweig). `openUniversalLvSheet` erzeugt
   ein Overlay mit Klasse `"aufmass-overlay hidden"` (src/core/
   app.core.js:1700-1706 `ensureUniversalLvSheetDOM()`) — realer z-index
   **1400** (legacy_styles/modules/aufmass.css:1642), NICHT 1100 (die
   `.lv-overlay`-Regel in legacy_styles/modules/leistungskatalog.css
   gehört zu einem toten Code-Pfad). Leistungskatalog/Material-Katalog-
   Fenster (`.mp-fwin`, core/mp-float-window.js:39 Z_BASIS=1200) → Band
   1200–1259; Material-Picker (`window.MP_MATERIAL_PICKER.open(
   "rechnung")`, rechnungen.js:4765, core/material-picker.js:65/169,
   eigenständiges Modul) → 100020/100021; Stundenlohn-Sheet (`window.
   MP_STUNDENLOHN_SHEET.open("rechnung")`, rechnungen.js:4778, core/mp-
   stundenlohn-sheet.js:94) → 2000; Kunde-Schnellanlage (`.mp-kq-overlay`,
   core/mp-kunde-quick-create.js:30, TARGETS enthält `#rechnungKunde` —
   Zeile 189) → 100030; MP_CONFIRM (core/mp-confirm.js:85) → 120100.
   App-eigene Dockleiste/Topbar (`.bottom-nav`/`.topbar`, legacy_styles/
   core/layout.css:51/551) → 1000. Sicherer Zwischenraum unverändert
   1001–1099 (niedrigstes natives Fenster jetzt 1400 statt vermutet 1100
   — noch mehr Puffer, nicht weniger). Gewählt: **1050 Elevation / 1055
   Kopf-Fuß-Chrome** — identisch zu KVA; die native Fenster-Familie ist
   NACHWEISLICH dieselbe (gemeinsame globale Funktion `window.
   openUniversalLvSheet`, siehe oben), nicht nur angenommen.

   GEPRÜFT (03.09.2026, grep über public/css/*): `.view-box`,
   `.view-container`, `#view-rechnung` tragen in KEINER Produktions-CSS-
   Datei content-visibility, contain oder transform — mp-render-
   stability.css setzt für `.view-container,.view-box` sogar ausdrücklich
   `transform:none;filter:none` als Schutzregel für position:fixed-
   Nachfahren (hier: `.view-box` selbst ist das fixierte Element, kein
   Nachfahre — die Schutzregel schadet nicht, hilft aber zusätzlich
   gegen einen künftigen Vorfahren-Transform).

   SPEZIFITÄT: die einzige bekannte konkurrierende Regel auf `.view-box`
   selbst (mp-list-workspaces-golden.css:3443,
   ":is(#view-kva,#view-rechnung).mp-list-workspace.view.active >
   .view-container > .view-box {padding-inline…!important}", NUR
   max-width:767px) setzt Padding-Links/Rechts + Breite/Margin — KEINEN
   der hier verwendeten Werte (position/inset/z-index/overflow/
   background/display) außer `padding`, wo unsere Regel dieselbe
   Eigenschaft in ANDERE Richtung (top/bottom) setzt UND zusätzlich
   `padding-inline` selbst überschreibt (0 statt 12px, da die Elevation
   ihren eigenen 14px-Innenabstand mitbringt) — deshalb trägt unser
   Selektor zusätzlich `#view-rechnung` + `.mp-document-editor-golden` +
   `[data-mp-editor-mobile-step]` (ID + Klasse + Attribut), um robust
   gegen diese UND künftige `!important`-Regeln zu bleiben (dieselbe
   defensive Haltung wie bei KVA). Die Wache lädt zur Kontrolle die
   ECHTE mp-baustellen-golden-v2.css UND mp-list-workspaces-golden.css
   mit, nicht nachgebaut (L-2026-09-03-Q).

   NACHTRAG 03.09.2026 (mp046b, Koordinator, „EIN durchgängiges
   Bedienkonzept"): KEINE CSS-Änderung nötig — `.mp-rg-step-foot` war
   bereits seit mp046a `position:fixed;bottom:0;z-index:1055` mit
   identischer Höhen-/Safe-Area-Behandlung wie KVAs `.mp-kva-step-foot`
   (`calc(10px + env(safe-area-inset-bottom))`). Die Wache prüft das jetzt
   zusätzlich explizit (fixiert vor/nach echtem Scrollen, computed
   padding-bottom ≥ Fußhöhe, letztes Element nicht verdeckt, Gegenprobe) —
   siehe rechnungen-mobile-steps.js Dateikopf für Details. Zusätzlich
   vervollständigte Fenster-Inventur: `#rgAdjModal` (.mp-modal-overlay,
   z-index 9999, „Summen & Abschläge") sicher über der Elevation. */

/* ── Übersichtszeilen: Grundzustand (alle Breiten) ────────────────── */
.mp-rg-step-overview {
  display: none;
}

/* MP-20260904-057 — Kontextzeile ("welches Dokument ist offen"), Spiegel
   der KVA-Schwesterdatei (css/mp-kva-mobile-steps.css), siehe dortiger
   Kommentar für die vollständige Begründung. Lebt als ERSTES Kind von
   .mp-editor-command-deck, direkt VOR .mp-rg-step-overview. Grundzustand
   (alle Breiten): unsichtbar. */
.mp-rg-step-context {
  display: none;
}

/* MP-20260903-024 — EIN Knopf + Menü in der mobilen Schritt-Übersicht.
   Spiegel der KVA-Schwesterdatei, siehe dortiger Kommentar für die
   vollständige Begründung. Grundzustand (alle Breiten): unsichtbar. */
.mp-rg-step-quickbar {
  display: none;
}

.mp-rg-step-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  gap: 12px;
  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: 12px;
  background: rgb(var(--mp-flaeche-rgb));
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mp-rg-step-row:active {
  background: rgba(43, 176, 255, .07);
}

.mp-rg-step-row:focus-visible {
  outline: 2px solid #2bb0ff;
  outline-offset: 2px;
}

/* MP-20260904-032 — Spiegel der KVA-Schwesterdatei, siehe dortiger
   Kommentar für die vollständige Begründung (Marcel: Nummerierung raus,
   Icons größer). WIRKLICH entfernt (display:none, kein visibility:hidden).
   Vor 04.09.2026 galt hier ausdrücklich "nummeriert untereinander" — wer
   das zurückbaut, klärt das erst mit Marcel. */
.mp-rg-step-badge {
  display: none;
}

/* NACHTRAG 03.09.2026 (Marcel-Wunsch, Spiegel der KVA-Schwesterdatei —
   siehe dortiger Kommentar für die vollständige Begründung + dokumentierte
   UX-Spec-Abweichung). Farbe kommt aus --mp-rg-row-accent (JS setzt sie
   pro Zeile aus STEPS[i].color). 04.09.2026 (MP-20260904-032): Nummer-
   Badge fällt weg (siehe oben), Icon 30→40px, SVG 16→20px — Spiegel der
   KVA-Schwesterdatei. */
.mp-rg-step-row-icon {
  display: inline-flex;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--mp-rg-row-accent, #2bb0ff);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.mp-rg-step-row-icon svg {
  width: 20px;
  height: 20px;
}

.mp-rg-step-row-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.mp-rg-step-row-title {
  overflow: hidden;
  color: rgb(var(--mp-t1-172033));
  font-size: 14.5px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-rg-step-row-sub {
  overflow: hidden;
  color: rgb(var(--mp-t3-64748b));
  font-size: 12.5px;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-rg-step-row-chev {
  flex: 0 0 auto;
  color: #94a3b8;
}

/* ── Kopf/Fuß-Chrome (als Geschwister von .view-box eingefügt, siehe JS) */
.mp-rg-step-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1055;
  /* env(safe-area-inset-top) zusätzlich zur Basis-Polsterung — Vorsichts-
     maßnahme gegen eine mögliche Notch-Lücke (Koordinator-Nachtrag 1). */
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  background: rgb(var(--mp-flaeche-rgb)); /* vollständig opak, kein Alpha-Kanal */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.mp-rg-step-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mp-rg-step-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: rgba(15, 23, 42, .05);
  color: rgb(var(--mp-t1-172033));
  cursor: pointer;
}

.mp-rg-step-close:active {
  background: rgba(15, 23, 42, .10);
}

.mp-rg-step-head-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.mp-rg-step-head-text:focus-visible {
  outline: 2px solid #2bb0ff;
  outline-offset: 2px;
}

.mp-rg-step-kicker {
  overflow: hidden;
  color: #1499ea;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* MP-20260904-062 (Marcel: "Überschrift ein bisschen größer"), Spiegel der
   KVA-Schwesterdatei — 15.5px -> 17px, Kopf bleibt trotzdem kompakt (siehe
   dortiger Kommentar für die Höhenrechnung). */
.mp-rg-step-title {
  overflow: hidden;
  margin: 0;
  color: rgb(var(--mp-t1-172033));
  font-size: 17px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-rg-step-head-spacer {
  flex: 0 0 40px;
}

/* MP-20260904-072 (Spiegel der KVA-Schwesterdatei, siehe dortiger
   Kommentar für die volle Begründung) — kompakte zweite Zeile UNTER der
   40px-head-row, VOR dem Fortschrittsbalken. Text/Quelle: rechnungen-
   mobile-steps.js formatIdentityHeadLine()/statusIdentity(). Erhöht die
   Kopf-Gesamthöhe bewusst über die bisherigen ≤76px (siehe
   DEFAULT_STEP_HEAD_H-Nachtrag in rechnungen-mobile-steps.js +
   padding-calc unten). */
.mp-rg-step-head-context {
  overflow: hidden;
  margin: 4px 0 0;
  color: rgb(var(--mp-t3-52607a));
  font-size: 12px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-rg-step-progress {
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px; /* Fortschrittsbalken-Spur, kein Knopf */
  background: rgba(15, 23, 42, .07);
}

.mp-rg-step-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2bb0ff, #5b8cff);
}

.mp-rg-step-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1055;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(15, 23, 42, .08);
  background: rgb(var(--mp-flaeche-rgb));
}

.mp-rg-step-foot > button {
  min-height: 44px;
}

.mp-rg-step-foot > button[hidden] {
  display: none;
}

/* MP-20260904-037 — Speichern-Knopf im Fuß-Chrome (rechnungen-mobile-
   steps.js runRgStepSave()), Spiegel der KVA-Schwesterdatei-Regel.
   .btn-secondary liefert bereits display:inline-flex + gap:8px
   (mp-button-system.css) — Icon+Text richten sich von selbst aus.
   Etwas kompakteres Padding als der Button-Standard (18px), weil hier
   DREI Knöpfe (Zurück/Speichern/Weiter) nebeneinander passen müssen —
   Knopfregel „inhaltsbreit, keine Pille" bleibt gewahrt (border-radius
   weiterhin var(--btn-radius) = 12px, kein width:100%). */
.mp-rg-step-foot > .mp-rg-step-save-btn {
  padding-left: 14px;
  padding-right: 14px;
}

/* MP-20260903-024 — Auslöser-Knopf + Menü. Spiegel der KVA-Schwesterdatei
   (mp-kva-mobile-steps.css), identische Werte/Regeln, siehe dort für die
   ausführliche Begründung (Knopfregel/Radius-Standard/Markenblau/
   z-index-Zone). */
/* MP-20260904-012 (Marcel, 04.09.): Knopf nach LINKS, Daumenreichweite.
   Wert identisch zur KVA-Schwesterdatei — bitte gemeinsam aendern.
   04.09.2026 FORTGESCHRIEBEN (MP-20260904-034): LINKS → MITTE — Spiegel
   der KVA-Schwesterdatei, siehe dortiger Kommentar für die vollständige
   Begründung (Kollision mit der seit -029 linken mobilen Listen-Lasche,
   beide im Übersichts-Zustand gleichzeitig sichtbar; Elevations-
   Ausblendung der Lasche bereits vorhanden, kein neuer Leck-Fall). */
.mp-rg-step-quickbar {
  justify-content: center;
  margin: 2px 0 4px;
}
.mp-rg-step-quickbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 12px;
  background: rgb(var(--mp-flaeche-rgb));
  color: rgb(var(--mp-t2-475569));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mp-rg-step-quickbar-btn:active,
.mp-rg-step-quickbar-btn[aria-expanded="true"] {
  border-color: #2bb0ff;
  background: rgba(43, 176, 255, .10);
  color: #087fc4;
}
.mp-rg-step-quickbar-btn:focus-visible {
  outline: 2px solid #2bb0ff;
  outline-offset: 2px;
}
.mp-rg-step-quickmenu {
  position: fixed;
  z-index: 1200;
  width: 250px;
  max-width: calc(100vw - 20px);
  padding: 6px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 12px;
  background: rgb(var(--mp-flaeche-rgb));
  box-shadow: 0 20px 46px -22px rgba(15, 23, 42, .45);
}
.mp-rg-step-quickmenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgb(var(--mp-t1-172033));
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mp-rg-step-quickmenu-item:hover,
.mp-rg-step-quickmenu-item:active {
  background: rgba(43, 176, 255, .08);
}
.mp-rg-step-quickmenu-item:focus-visible {
  outline: 2px solid #2bb0ff;
  outline-offset: -2px;
}
.mp-rg-step-quickmenu-item[disabled] {
  color: #a3adba;
  cursor: not-allowed;
  opacity: .6;
}
.mp-rg-step-quickmenu-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: #2bb0ff;
}
.mp-rg-step-quickmenu-item[disabled] .mp-rg-step-quickmenu-icon {
  color: inherit;
}
.mp-rg-step-quickmenu-label {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 620;
}

@media (max-width: 767px) {
  /* Übersicht ersetzt die Tab-Knöpfe (nicht die ganze Bereichsleiste —
     .view-footer-actions hängt technisch IN .mp-editor-section-nav,
     ensureCommandDeck(); Save/PDF/Mail-Knöpfe bleiben unverändert per
     horizontalem Scroll erreichbar, das ist NICHT Teil dieses Auftrags). */
  #view-rechnung.mp-document-editor-golden:not([data-mp-editor-mobile-step]) .mp-rg-step-overview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 2px 0 12px;
  }
  /* MP-20260904-057 / NACHTRAG 05.09.2026 (MP-20260904-072) — Spiegel der
     KVA-Schwesterdatei (dort ausführlicher kommentiert): aus der ruhigen
     Pille wird ein echter Dokumentkopf (Icon-Fläche .mp-rg-step-row-icon,
     Titel in .mp-rg-step-title-Größe, Sub-Zeile 14px, Speicherstatus als
     eigener Chip). NUR mobil UND NUR im Übersichts-Zustand sichtbar
     (identisches Gate wie .mp-rg-step-overview darüber). */
  #view-rechnung.mp-document-editor-golden:not([data-mp-editor-mobile-step]) .mp-rg-step-context {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 8px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 12px;
    background: rgba(15, 23, 42, .035);
  }
  .mp-rg-step-context-text-wrap {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
  }
  .mp-rg-step-context-title {
    /* Größe/Gewicht/Farbe/Ellipsis kommen aus der mitgetragenen Klasse
       .mp-rg-step-title — hier bewusst keine zweite Deklaration. */
  }
  /* NACHTRAG 05.09.2026 (QA-Auflage A1, Spiegel der KVA-Schwesterdatei,
     siehe dortiger Kommentar für die volle Begründung — SHARED_LEARNINGS
     L-2026-09-05-O): Klasse umbenannt auf `-context-line2`, trifft keine
     der fünf Wildcard-Endungen aus `mp-mobile-typography.css`. */
  .mp-rg-step-context-line2 {
    overflow: hidden;
    color: rgb(var(--mp-t3-52607a));
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mp-rg-step-context-line2[hidden] {
    display: none;
  }
  .mp-rg-step-context-chip {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 8px; /* Hausregel: keine Pille (999px verboten) */
    background: rgba(15, 23, 42, .07);
    color: rgb(var(--mp-t3-52607a));
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }
  .mp-rg-step-context-chip[hidden] {
    display: none;
  }
  /* MP-20260903-024 — NUR mobil UND NUR im Übersichts-Zustand sichtbar. */
  #view-rechnung.mp-document-editor-golden:not([data-mp-editor-mobile-step]) .mp-rg-step-quickbar {
    display: flex;
  }
  #view-rechnung.mp-document-editor-golden .mp-editor-section-nav > .mp-editor-section-item {
    display: none !important;
  }

  /* NACHTRAG 03.09.2026 (MP-20260903-019, Teil 2 — gleicher Fund wie bei
     KVA, Marcels Screenshot ee8a1791 galt konkret KVA, dieselbe Lücke
     besteht hier strukturell 1:1): Die Übersichtszeilen wurden bisher NUR
     zusätzlich VOR dem Editor eingefügt (ensureOverview() hängt sie in
     .mp-editor-command-deck, Sibling der Karten) — die editorischen
     Karten selbst blieben im Übersichts-Zustand unverändert sichtbar
     (alle Karten der aktuell aktiven Sektion sind laut der bestehenden
     Kaskade sichtbar, auch OHNE offenen Schritt). Anders als bei KVA gibt
     es HIER keinen einzelnen `.kva-editor`-Container, den man ausblenden
     könnte, ohne die Übersicht (die im selben `.view-box` hängt)
     mitzunehmen — deshalb werden gezielt die Karten selbst ausgeblendet,
     dieselbe Wirkung. Reine CSS-Sichtbarkeit, IN-PLACE, kein DOM-Umbau
     (L-2026-09-02-AN). */
  #view-rechnung.mp-document-editor-golden:not([data-mp-editor-section="kommunikation"]):not([data-mp-editor-mobile-step]) .rg-editor-card,
  #view-rechnung.mp-document-editor-golden:not([data-mp-editor-section="kommunikation"]):not([data-mp-editor-mobile-step]) .mp-comm-card[data-kind="invoice"] {
    display: none !important;
  }

  /* NACHTRAG 03.09.2026 (mp019b, Marcel Live-Test — Fund am KVA-Stand
     bf8beb55, identische Ursache gilt hier strukturell 1:1): `#rgA4Wrapper.
     a4-wrapper` (rechnungen.html:762, Beleg per grep) ist ein GESCHWISTER
     der `.rg-editor-card`s innerhalb `.view-box` — NICHT deren Kind — und
     lief im Übersichts-Zustand deshalb weiterhin sichtbar/scrollbar unter
     der Übersicht mit. TABU beachtet: `core/mp-a4-live-preview.js` NICHT
     angefasst — reine additive CSS-Sichtbarkeitsregel, NUR im Übersichts-
     Zustand und NUR mobil. Die bereits bestehende Elevations-Regel weiter
     unten (`[data-mp-editor-mobile-step] > … > #rgA4Wrapper{display:none}`)
     bleibt unverändert für den offenen Schritt zuständig — diese Regel hier
     deckt zusätzlich den Übersichts-Zustand ab, kein Dauerzustand, keine
     Nebenwirkung auf die PDF-Erzeugung. */
  #view-rechnung.mp-document-editor-golden:not([data-mp-editor-mobile-step]) #rgA4Wrapper {
    display: none !important;
  }

  /* ── Elevation: `.view-box` SELBST wird vollflächig, NUR wenn ein
     Schritt aktiv ist (siehe Dateikopf-Architektur-Begründung — kein
     `.kva-editor`-Äquivalent vorhanden). Welche Karte darin sichtbar
     ist, regelt unverändert die bestehende [data-mp-editor-section]/
     [data-mp-editor-card]-Kaskade. */
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] > .view-container > .view-box {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1050;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    margin: 0 !important;
    /* Deckung KOMMT VOM CONTAINER SELBST (Koordinator-Auflage „nicht nur
       über z-Erhöhung") — vollständig opak, kein Alpha-Kanal, spannt
       dank inset:0 IMMER die komplette Viewport-Fläche auf, unabhängig
       vom Inhalt. `!important` (wie die MP-045-Nacharbeit an mp-kva-
       mobile-steps.css gehärtet hat): "bislang keine konkurrierende
       Regel gefunden" ist kein Beleg für "künftig keine", L-2026-09-03-Q. */
    /* 04.09.2026 (MP-20260904-033, Marcel Screenshot 14:55: "gräulichen
       Hintergrund... das sieht so weiß aus alles"): #fff → var(--mp-bg-
       main, #f6f7f9) — Spiegel der KVA-Schwesterdatei, siehe dortiger
       Kommentar für die vollständige Begründung (Opazität bleibt erhalten,
       `mp-ui-system.css` ist nirgends eingebunden, deshalb zieht der
       literale Fallback). */
    background: var(--mp-bg-main, rgb(var(--mp-f2-f6f7f9))) !important;
    /* Content-Offset aus der gemessenen Kopf-/Fuß-Höhe (rechnungen-
       mobile-steps.js syncStepChromeHeights()) + 8px Luft. Fallback
       bewusst ÜBER der tatsächlichen Kopfhöhe angesetzt — die JS-
       Variable darf ihn nur nach OBEN verfeinern, nie unterschreiten
       (siehe DEFAULT_STEP_HEAD_H/-FOOT_H-Guard im JS). NACHTRAG
       05.09.2026 (MP-20260904-072): 84px -> 100px, zusätzliche
       Kontextzeile im Kopf (.mp-rg-step-head-context) — MUSS zu
       DEFAULT_STEP_HEAD_H in rechnungen-mobile-steps.js passen. */
    padding: calc(var(--mp-rg-step-head-h, 100px) + 8px) 14px calc(var(--mp-rg-step-foot-h, 64px) + 8px + env(safe-area-inset-bottom)) !important;
    scroll-padding-top: calc(var(--mp-rg-step-head-h, 100px) + 8px);
    /* "ZACK umgeschaltet, nix flackern" — kein Übergang beim Elevieren. */
    transition: none !important;
    animation: none !important;
  }

  /* ── Geschwister, die NICHT Teil des Schritt-Formulars sind, werden
     beim Elevieren ausgeblendet (siehe Dateikopf-Architektur-Begründung
     Punkte 1+2). Reines CSS — keine der drei betroffenen Logiken
     (A4-Vorschau, Rechnungsliste, Rail) wird selbst angefasst.

     NACHTRAG 03.09.2026 (MP-20260903-019 Nachzug, Punkt ①): diese Regel
     stand HIER SCHON SEIT MP-046 im Baum, hat `.view-header` aber
     NACHWEISLICH NIE wirklich ausgeblendet (Beleg-Screenshot 15bf7051,
     Marcel Live-Test — Modul-Kopfkarte "Rechnungen · Rechnungen aus
     Baustellen und Angeboten erstellen …" sichtbar im elevierten Schritt
     1). URSACHE (per Grep bestätigt, kein Nachbau): css/mp-ui-final-
     hardwall.css:813-839 setzt "html:not(#mpkk):not(#mpkk-2) body
     .main-container > :is(…,#view-rechnung,…).view.active .view-header.
     mp-module-view-header{display:flex!important}" — 3 ID-Äquivalente
     (2× :not() + 1× :is() mit ID-Argument) + 5 Klassen, dieselbe Regel
     nochmal fast wortgleich in css/mp-list-workspaces-golden.css:948. Die
     alte Fassung dieser Regel hier trug nur 1 ID (#view-rechnung) — hat
     GARANTIERT verloren, unabhängig von der Ladereihenfolge (CSS-Spez.:
     (1,…) < (3,…) schlägt IMMER, auch wenn diese Datei später lädt).
     Fix: DREI zusätzliche `:not(#mpkk-N)` ergänzt (App-Konvention laut
     `grep ":not(#mpkk)"` in mp-baustellen-golden-v2.css u. a., hier um
     eine Stufe eskaliert — ein garantiert nie existierendes Element,
     reine Spezifitäts-Erhöhung, kein Verhaltensunterschied) → 4 IDs,
     schlägt die Konkurrenzregel jetzt sicher.

     NACHTRAG 03.09.2026 (MP-20260903-019 Nachzug, Punkt ② — derselbe
     Screenshot 268d7e8a/15bf7051, "leerer weiß-abgerundeter Kasten
     [~150px]"): K-374 korrigiert — der Kasten steht in JEDEM Schritt
     (auch Schritt 1 "Rahmendaten", der gar keine Positionsliste hat),
     die `.mp-positions-scroll`-Hypothese von MP-20260903-019 (erste
     Runde) ist damit WIDERLEGT. ECHTE, jetzt bewiesene Ursache: `.mp-
     editor-command-deck` (Kind von `.view-box`, siehe core/mp-list-
     workspaces-golden.js `ensureCommandDeck()`) bleibt beim Elevieren
     bisher UNVERÄNDERT sichtbar (Dateikopf-Architektur-Entscheidung
     Punkt 3 — bewusst SO GEWOLLT, DAMIT `.view-footer-actions` erreichbar
     bleibt). Diese Prämisse gilt inzwischen nicht mehr: `.view-footer-
     actions` wird SEIT `ensureMobileModuleMenu()` (core/mp-list-
     workspaces-golden.js, unabhängige, spätere Ergänzung) auf Mobil
     APP-WEIT per css/mp-list-workspaces-golden.css ("body.mp-mobile-
     module-menu-ready :is(#view-kva,#view-rechnung,#view-projekte).view.
     active .view-footer-actions{display:none!important}") ausgeblendet —
     der globale Modul-Aktionen-Knopf im Dock (`#mpMobileModuleMenuBtn`)
     hat sie ersetzt. Gleichzeitig sind die Tab-Knöpfe im Deck bereits
     durch DIESE Datei ausgeblendet (`.mp-editor-section-item{display:
     none}` oben) und `.mp-rg-step-overview` ist im elevierten Zustand per
     Basisregel (Dateianfang) ebenfalls `display:none`. `.mp-editor-
     command-deck` ist damit in JEDEM offenen Schritt ein Container OHNE
     jedes sichtbare Kind — trägt aber sein eigenes Karten-Chrome
     (css/mp-baustellen-golden-v2.css:868-882 — border/border-radius:16px/
     background:#fff/box-shadow, alle `!important`) und rendert deshalb
     genau als der gemeldete leere, weiß-abgerundete Kasten. Fix: Deck
     zusätzlich in diese Ausblend-Liste aufgenommen (dieselbe eskalierte
     Spezifität) — NUR im elevierten Zustand, Übersicht/Desktop
     unverändert (dort trägt der Deck die Übersichtszeilen bzw. die
     Tab-Leiste + `.view-footer-actions` und MUSS sichtbar bleiben). */
  html:not(#mpkk):not(#mpkk-2):not(#mpkk-3) body #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] > .view-container > .view-box > :is(.view-header, #rgA4Wrapper, .mp-workspace-list-master, .mp-editor-command-deck) {
    display: none !important;
  }
  /* NACHTRAG 03.09.2026 (MP-019-Nachzug, eigener Wachenfund beim Struktur-
     Vergleich Angebote↔Rechnungen, siehe KVA-Schwesterdatei für die volle
     Herleitung): `.mp-workspace-list-master` wird von `core/mp-list-
     workspaces-golden.js placeRail()` zur Laufzeit zu einem DIREKTEN Kind
     von `#view-rechnung` selbst gemacht — die Regel oben (Kind von
     `.view-box`) trifft danach NICHT mehr. Bislang unbemerkt, weil kein
     Struktur-Vergleich das je geprüft hatte — Marcel bewertete den
     Rechnungen-Stand trotzdem als "perfekt", vermutlich weil die Liste in
     der Praxis meist VOR dem ersten Öffnen eines Schritts bereits
     umgezogen ist und dieser Fall selten sichtbar wurde. Zusätzliche,
     direkte Regel hier schließt die Lücke defensiv. */
  html:not(#mpkk):not(#mpkk-2):not(#mpkk-3) body #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] > .mp-workspace-list-master {
    display: none !important;
  }
  /* NACHTRAG 04.09.2026 (MP-20260904-020, Ida Neumann): die neue mobile
     Lasche (.mp-workspace-external-rail-toggle) ist — wie .mp-workspace-
     list-master direkt darüber — ein direktes Kind von #view-rechnung
     selbst (view.appendChild), nicht von .view-box. Ohne diesen Eintrag
     wäre sie im elevierten Vollbild-Schritt fälschlich sichtbar — die
     dritte Gelegenheit, dieselbe Klasse Fehler zu wiederholen (siehe
     KVA-Schwesterdatei, SHARED_LEARNINGS.md L-2026-09-04-K/-L). */
  html:not(#mpkk):not(#mpkk-2):not(#mpkk-3) body #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] > .mp-workspace-external-rail-toggle {
    display: none !important;
  }

  /* ── Command-Deck: bleibt (anders als bei KVA) ein KIND des elevierten
     `.view-box` und wird deshalb NICHT von der Elevation verdeckt (siehe
     Dateikopf Punkt 3). `position:sticky` wird auf `static` zurück-
     gesetzt, weil sein `top:58px` sonst mit dem eigenen fixen Kopf-
     Chrome (0–92px) kollidieren würde — er rutscht stattdessen normal
     mit dem Inhalt mit. `.view-footer-actions` (Save/PDF/Mail) bleibt
     darin unverändert erreichbar, nur horizontal scrollbar statt
     geklebt. */
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .mp-editor-command-deck {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    margin: 0 0 14px !important;
  }

  /* ── Karten-Chrome neutralisieren (Dateikopf Punkt 4 + Koordinator-
     Nachtrag 1): sichtbare Sektions-Karten sollen als EIN durchgehendes
     Schritt-Formular lesen, nicht als mehrere schwebende Einzelkarten
     vor der (jetzt ohnehin opaken) Fläche. NUR Rand/Schatten/Radius/
     Hintergrund/Außenabstand werden neutralisiert — Card-Body-Polsterung
     und alle Formularfelder bleiben unverändert (keine Business-Logik
     berührt).
     NACHTRAG 03.09.2026 (mp046c, Koordinator — MP-20260903-015-Nacharbeit-
     Fund): `mp-app-premium.css` setzt auf JEDEM `.card` innerhalb `.view`
     (".view .card:hover", auch ".rechnung-status-card:hover" — TRIFFT
     `.rg-editor-card`/die "Abrechnung & Status"-Karte) `transform:
     translateY(-2px)` OHNE `!important`. Auf Touch-Geräten bleibt `:hover`
     nach einem Tap kleben (kein echtes mouseleave) — das Ergebnis wäre
     ein Transform auf einer `.rg-editor-card`, exakt dieselbe Fehlerklasse
     wie `L-2026-09-03-Y` (Stacking-Context/Containing-Block für
     position:fixed-NACHFAHREN dieser Karte). GEPRÜFT (siehe Handoff
     „Bestätigte Fakten"): `.view-box` (der elevierte Container) ist die
     Karten-ELTERN, nicht deren Nachfahre — `.mp-rg-step-head`/`.mp-rg-
     step-foot` werden als Geschwister von `.view-box` in `.view-container`
     eingefügt (rechnungen-mobile-steps.js `stage.parentNode.insertBefore`),
     NIE als Kind einer `.card`. Diese Fehlerklasse kann die EIGENE
     Elevation deshalb strukturell nicht treffen (anders als beim Aufmaß-
     Fassade-Fund, wo der elevierte Slot NACHFAHRE eines zusätzlichen
     `.card`-Wrappers war, `mp-aufmass-mobile-steps.css`, gelesen nicht
     verändert) — per echter `page.touchscreen.tap()`-Wache belegt, nicht
     nur angenommen. `transform:none!important` hier trotzdem ergänzt:
     kostet nichts, verhindert zusätzlich jede zukünftige/theoretische
     Kollision mit etwas INNERHALB einer Karte (aktuell keins vorhanden). */
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .rg-editor-card,
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .mp-comm-card[data-kind="invoice"] {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 0 22px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
  }
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .rg-editor-card:last-of-type,
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .mp-comm-card[data-kind="invoice"]:last-of-type {
    margin-bottom: 0 !important;
  }
  /* Eine dünne Trennlinie unter dem Karten-Titel ersetzt den verlorenen
     Card-Header-Hintergrund — hält die Abschnitte lesbar getrennt, ohne
     wie eine eigene schwebende Karte zu wirken. */
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .rg-editor-card > .card-header,
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .mp-comm-card[data-kind="invoice"] > .card-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  }

  /* NACHTRAG 03.09.2026 — STACKING-CONTEXT-HÄRTUNG, übernommen aus der
     MP-045-Nacharbeit (mp-kva-mobile-steps.css, dort nach Marcels Live-
     Screenshot 57b29c24 gefunden und behoben — landete WÄHREND dieser
     Umsetzung im Baum, siehe Dateikopf "Koordinator-Nachtrag"): DIESELBE
     Ursache trifft #view-rechnung 1:1, weil sie an derselben, generischen
     Regel hängt: legacy_styles/core/layout.css:353-358 setzt auf JEDER
     aktiven `.view` (nicht nur #view-kva) "`.view.active{transform:
     translateY(0)}`" — ein numerisch wirkungsloser (Identität-)Transform,
     der aber TROTZDEM einen neuen Stacking-Context UND eine neue
     Containing-Block-Ebene für position:fixed-Nachfahren aufspannt (CSS-
     Spec: jeder transform-Wert außer "none" tut das, unabhängig vom
     Ergebnis). Dadurch würde jede noch so hohe interne z-Index-Zahl
     dieser Datei wirkungslos — #view-rechnung selbst hat z-index:auto
     und verliert dann als GANZES gegen jedes root-level position:fixed-
     Element mit echtem z-index (Topbar/Dockleiste, beide 1000), UND
     `.view-box{position:fixed;inset:0}` wäre nur noch relativ zu
     #view-rechnungs eigener (ggf. scrollender) Box positioniert statt
     zum echten Viewport — exakt die beiden vom Koordinator gemeldeten
     Symptome (Wallpaper-Durchschein, Rahmen oberhalb des Kopfs).
     `css/mp-structural-mobile-cleanup.css` setzt bereits APP-WEIT
     ".view,.view.active{transform:none!important}" (dortiger Kommentar:
     "transform creates a containing block → fixed sheets clip") — diese
     Regel hier macht die eigene Elevation UNABHÄNGIG von jener fremden
     Datei (die dieses Modul nicht besitzt und nicht überwacht), reine
     Verteidigung in der Tiefe. */
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] {
    transform: none !important;
  }

  /* NACHTRAG 03.09.2026 (MP-20260903-019, Teil ②/④, ERSTE RUNDE — Marcels
     Screenshot 268d7e8a: im elevierten Positionen-Schritt ein großer,
     komplett LEERER weiß-abgerundeter Kasten [~150px]).

     KORREKTUR/WIDERLEGT (MP-20260903-019 Nachzug, 03.09.2026, siehe
     K-374 in KNOWN_ISSUES.md): die `.mp-positions-scroll`-Hypothese unten
     war FALSCH — Marcels Folge-Screenshot (15bf7051) zeigt denselben
     leeren Kasten in SCHRITT 1 "Rahmendaten", der gar keine Positions-
     liste enthält. Die ECHTE, jetzt bewiesene Ursache ist `.mp-editor-
     command-deck` (leer, aber weiterhin eigenes Karten-Chrome tragend,
     siehe die neue Ausblend-Regel weiter oben in dieser Datei). Der
     folgende Fix (`.mp-positions-scroll`/`.rechnung-table-wrapper` ohne
     `max-height` im elevierten Zustand) bleibt trotzdem BESTEHEN — er
     behebt unabhängig davon die zweite, verschachtelte Scroll-Region im
     Positionen-Schritt selbst (siehe Teil ② der ursprünglichen Umsetzung)
     und ist nicht falsch, nur nicht die Erklärung für DIESEN Fund. */
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .mp-positions-scroll,
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .rechnung-table-wrapper {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }

  /* NACHTRAG 03.09.2026 (MP-20260903-019 Nachzug, Spiegel der KVA-
     Schwesterdatei — dort per Wache gegen die ECHTE Kaskade bewiesen,
     siehe dortiger Kommentar): `.mp-positions-scroll` trägt eigenes
     `border-radius:12px!important` (css/mp-safe-style-patch.css), `.mp-
     pos-add-footer` eigenes `border-radius:14px;border:1.5px dashed …`
     (Ablage-Zonen-Optik) — beide lesen sich neben der bereits geflachten
     `.rg-editor-card` wie eine zweite Karte. `.kva-kpi-bar` existiert in
     #view-rechnung nicht (Rechnungen hat keine Kalkulation-Karte),
     deshalb hier NICHT mitgeführt. */
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .mp-positions-scroll,
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .mp-pos-add-footer {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .mp-pos-add-footer,
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-doc-actions {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }
  /* NACHTRAG 03.09.2026 (Wachenfund aus der KVA-Schwesterdatei, identisch
     hier übernommen): ohne flex-shrink:0 quetschen sich die Knöpfe per
     Flexbox-Standardverhalten zusammen, statt dass die Reihe überläuft —
     dann bleibt scrollWidth==clientWidth (kein Streifen zum Scrollen) und
     hintere Knöpfe sind an ihrer eigenen Position nicht mehr zuverlässig
     tappbar. */
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .mp-pos-add-footer > *,
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-doc-actions > * {
    flex-shrink: 0 !important;
  }
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] > .view-container > .view-box {
    overflow-x: hidden !important;
  }
  /* Dokumentenansicht (css/kva-doc-mode.css, geteilt mit KVA — NUR
     gelesen, NICHT verändert, TABU-Zone): dieselbe Neutralisierung wie
     bei KVA, additiv, falls die Rechnung im Dokumentenmodus angezeigt
     wird. */
  #view-rechnung.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-doc-page {
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 14px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-rg-step-progress > span {
    transition: none !important;
  }
}

/* =========================================================
   MP-20261002-069: Switch & Card für "Rechnung bereits im Vorfeld beglichen"
   ========================================================= */
#rechnungBereitsBezahltGroup .mp-rg-switch-track {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background-color: #cbd5e1;
  border-radius: 999px;
  transition: background-color .2s ease;
  flex-shrink: 0;
}
#rechnungBereitsBezahltGroup .mp-rg-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
#rechnungBereitsBezahltGroup:has(#rechnungBereitsBezahlt:checked) .mp-rg-switch-track,
#rechnungBereitsBezahltGroup.is-active .mp-rg-switch-track {
  background-color: #10b981 !important;
}
#rechnungBereitsBezahltGroup:has(#rechnungBereitsBezahlt:checked) .mp-rg-switch-track::after,
#rechnungBereitsBezahltGroup.is-active .mp-rg-switch-track::after {
  transform: translateX(20px);
}
#rechnungBereitsBezahltGroup .mp-cbx {
  display: none !important;
}
html.dark #rechnungBereitsBezahltGroup .mp-rg-switch-track {
  background-color: #475569;
}