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

   Zweite Anwendung des generischen Musters (nach Aufmaß,
   css/mp-aufmass-mobile-steps.css) auf den bestehenden Angebots-Editor.
   NUR #view-kva — #view-rechnung bleibt bewusst unberührt (MP-046, eigene
   Aufgabe, eigene Zone). Jeder Selektor hier ist hart auf "#view-kva"
   verdrahtet, nicht auf :is(#view-kva,#view-rechnung) wie die
   Bestandsregeln in mp-baustellen-golden-v2.css — damit diese Datei
   #view-rechnung nachweislich nicht mitverändert.

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

   NACHTRAG 03.09.2026 (MP-20260903-016-Klasse, Koordinator-Einwand VOR dem
   Deploy, nachdem Marcel exakt diesen Fehler heute 15:33 am Aufmaß-OVZ-
   Sheet gefunden hatte): Die Elevation stand ZUERST bei z-index 100040/
   100045 — 1:1 aus der Aufmaß-Familie übernommen, mit der (falschen)
   Begründung, das Leistungskatalog-Fenster läge bei 100100. Das stimmt nur
   für den AUFMASS-RUNDGANG-Sonderfall (`#mpLeistungskatalogFenster.is-
   rundgang{z-index:100100!important}`, mp-leistungskatalog-fenster.css:46
   — ein Klassenzusatz, den der KVA-Aufruf NIE setzt). Grep-Beleg (03.09.2026)
   über ALLE aus einem KVA-Schritt heraus erreichbaren nativen Fenster/
   Sheets — KEINE Annahme, jede Zahl an der zitierten Zeile gelesen:
     - Leistungskatalog/Material-Katalog-Fenster (`.mp-fwin`, core/mp-
       float-window.js:39 `Z_BASIS=1200`, Kommentar „sicher unter sheet-
       layer 1300") → Band 1200–1259
     - LV-Sheet („Aus Katalog", `.lv-overlay`, legacy_styles/modules/
       leistungskatalog.css:75) → 1100 (Legacy-Variante `#leistungSheet
       Overlay`, selbe Datei :1008 → 9999)
     - Leistungspakete-Sheet (`openPaketeSheet`, `.overlay`, legacy_styles/
       core/components.css:1174 — Kommentar dort: „In some builds there was
       no overlay style, which made the editor open 'behind' the sheet" —
       derselbe Fehlerklassen-Vorfall existierte an dieser Stelle bereits
       einmal) → 9999
     - Stundenlohn-Sheet (`#mpStdOverlay`, core/mp-stundenlohn-sheet.js:94)
       → 2000
     - Material-Picker (`window.MP_MATERIAL_PICKER`, core/material-
       picker.js:65/169 — eigenständig von Material-Katalog-Fenster) →
       100020/100021
     - Kunde-Schnellanlage (`.mp-kq-overlay`, core/mp-kunde-quick-
       create.js:30 — hängt am Rahmendaten-Kunde-Select, TARGETS enthält
       `#kvaKundeSelect`) → 100030
   Die App-eigene Dockleiste/Topbar (`.bottom-nav`/`.topbar`, legacy_styles/
   core/layout.css:51/551) liegt bei 1000. Sicherer Zwischenraum also
   1001–1099. Gewählt: **1050 Elevation / 1055 Kopf-Fuß-Chrome** — bewusst
   NICHT die Aufmaß-Familie (L-2026-09-03-O: „eine bewährte z-Index-Familie
   … ist ein Präzedenzfall für die METHODE, nicht automatisch für die
   Zahl" — KVAs eigene native Fenster liegen komplett anders als Aufmaßs).
   Damit rendert JEDES der oben aufgeführten Fenster/Sheets, aus einem
   KVA-Schritt heraus geöffnet, korrekt ÜBER der Elevation — belegt per
   echter gerenderter z-Kette (elementFromPoint), nicht nur CSS-Zahlen-
   Vergleich, siehe tools/test-kva-schritt-ansichten-mobile-touch.js.
   Ein Wert unter 1000 wäre selbst schon riskant (könnte unter die eigene
   Dockleiste rutschen); 1050 liegt mit 50 Einheiten Puffer nach unten UND
   50 nach oben (zur nächsten bekannten Zahl 1100) mittig im sicheren Band.
   `body.sheet-open`/Dockleisten-Verstecken (zweiter Teil von MP-016, siehe
   kva-mobile-steps.js `ensureSheetOpenGuard()`): DA die Elevation jetzt
   UNCONDITIONAL über 1000 (Dock/Topbar) UND opak/vollflächig ist, kann die
   Dockleiste nie sichtbar durchscheinen, selbst wenn `sheet-open`
   zwischenzeitlich fälschlich entfernt würde (mehrere Fremd-Dateien
   schreiben diese Klasse direkt, L-2026-09-03-N-Klasse, siehe JS-Dateikopf)
   — die Guard-MutationObserver-Absicherung in der JS-Datei bleibt trotzdem
   bestehen, weil sie die KORREKTHEIT des geteilten Zustands wiederherstellt,
   nicht nur dessen sichtbare Wirkung in diesem einen Modul.

   ARCHITEKTUR (siehe kva-mobile-steps.js Dateikopf für die vollständige
   Begründung, KORRIGIERT 03.09.2026, MP-019-Nachzug — Marcel: "Bei
   Rechnungen scrollt die ganze Karte. Und bei Angeboten ist die Karte
   fix und der Inhalt scrollt darin."): eleviert wird NICHT mehr
   `.kva-editor` selbst, sondern — WIE BEI RECHNUNGEN — `.view-box`
   (der gemeinsame Vorfahre von `.kva-editor` UND seiner Geschwister
   `.view-header`/`#kvaA4Wrapper`/`.mp-workspace-list-master`/
   `.mp-editor-command-deck`). `.kva-editor` bleibt danach ein
   GEWÖHNLICHER, nicht positionierter Block im normalen Fluss der jetzt
   elevierten `.view-box` — sein früheres eigenes `overflow-y:auto`
   entfällt, `.view-box` wird der EINZIGE Scroll-Container. Welche der
   sechs Karten darin sichtbar ist, entscheidet weiterhin unverändert die
   bestehende Regel #view-kva.mp-document-editor-golden[data-mp-editor-
   section="X"][data-mp-editor-card="X"] (mp-baustellen-golden-v2.css:
   793-803) — diese Datei fügt nach wie vor nur EINE zusätzliche, rein
   additive Bedingung hinzu (WELCHER Container fixed/vollflächig wird),
   keine zweite Sichtbarkeitslogik.

   GEPRÜFT (03.09.2026, grep über public/css/*): .kva-editor, .view-box,
   .view-container, #view-kva tragen in KEINER Produktions-CSS-Datei
   content-visibility, contain oder transform — anders als die Aufmaß-
   Raumkarte (mp-tablet-perf.css content-visibility:auto) ist hier KEINE
   Gegenregel nötig. mp-render-stability.css setzt für .view-container/
   .view-box sogar ausdrücklich transform:none;filter:none als Schutz für
   position:fixed-Nachfahren.

   SPEZIFITÄT (L-2026-09-03-Q gelernt, hier von Anfang an angewendet statt
   erst nach einem QA-Fund): die einzige bekannte konkurrierende Regel auf
   .kva-editor selbst (mp-ui-final-hardwall.css:1714,
   "html body :is(#view-kva,#view-rechnung) :is(.kva-editor,…)
   {box-sizing…!important;min-width…!important;max-width…!important}")
   setzt KEINE der hier verwendeten Eigenschaften (position/inset/padding/
   display/z-index) — kein direkter Konflikt. Der Elevations-Selektor
   unten trägt trotzdem #view-kva + .mp-document-editor-golden +
   [data-mp-editor-mobile-step] (ID + zwei Attribut-/Klassen-Ebenen), damit
   er auch gegen künftige !important-Regeln auf .kva-editor robust bleibt
   — dieselbe defensive Haltung wie das #view-aufmass-Präfix beim Aufmaß-
   Nachfix. Die neue Wache (tools/test-kva-schritt-ansichten-mobile-
   touch.js) lädt zur Kontrolle die ECHTE mp-ui-final-hardwall.css mit,
   nicht nachgebaut. */

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

/* MP-20260904-057 — Kontextzeile ("welches Dokument ist offen"), lebt als
   ERSTES Kind von .mp-editor-command-deck, direkt VOR .mp-kva-step-overview
   (kva-mobile-steps.js ensureContextLine()/buildContextLine()) — also
   zwischen dem Modulkopf (.view-header, direkter Vorgänger des Decks laut
   core/mp-list-workspaces-golden.js ensureCommandDeck()) und der
   Schritt-Übersicht. Grundzustand (alle Breiten): unsichtbar — identisches
   Gate-Muster wie .mp-kva-step-overview/.mp-kva-step-quickbar oben. Reine
   Information, kein Bedienelement: kein Hover-/Active-/Focus-Zustand
   nötig, keine Button-Optik. */
.mp-kva-step-context {
  display: none;
}

/* MP-20260903-024 — EIN Knopf + Menü in der mobilen Schritt-Übersicht.
   Grundzustand (alle Breiten): unsichtbar — die Sichtbarkeitsregel weiter
   unten schaltet NUR mobil UND NUR im Übersichts-Zustand frei (identisches
   Muster zu .mp-kva-step-overview oben; die Zeile lebt technisch als Kind
   von .mp-editor-command-deck, das im elevierten Zustand ohnehin bereits
   display:none ist — kein zweiter Sichtbarkeitspfad nötig). */
.mp-kva-step-quickbar {
  display: none;
}

.mp-kva-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-kva-step-row:active {
  background: rgba(43, 176, 255, .07);
}

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

/* MP-20260904-032 (Marcel, Screenshot Angebote-Übersicht 14:55: "Vielleicht
   nehmen wir die Nummerierung raus, dass wir nur diese Icons haben und die
   dann ruhig ein bisschen größer"): sticht die vorherige, ausdrücklich
   gewünschte Nummerierung ("nummeriert untereinander", NACHTRAG 03.09.2026
   direkt unten) aus. WIRKLICH entfernt (display:none, kein
   visibility:hidden — das hätte den 30px+12px-Gap-Platz stehen gelassen).
   Wenn eine spätere Sitzung die alte Nummerierung wiederherstellen will:
   das ist ein bewusster Rückbau der ursprünglichen Blaupause, keine
   vergessene Regel — bitte erst mit Marcel klären, nicht einfach
   zurücksetzen. Gilt 1:1 für die Rechnungen-Schwesterdatei. */
.mp-kva-step-badge {
  display: none;
}

/* NACHTRAG 03.09.2026 (Marcel-Wunsch, Screenshot der Produktions-Tab-
   Leiste — "diese Icons für die Schritte aufgreifen", siehe JS-Dateikopf
   STEPS-Kommentar für die vollständige Begründung + die dokumentierte
   Abweichung von der ursprünglichen UX-Spec-Entscheidung "neutrale
   Markenblau-Badge-Optik"): war zuvor display:none — jetzt dieselbe
   Farbkachel-Optik wie der Desktop-Tab-Knopf dieses Editors
   (#view-kva/#view-rechnung .mp-editor-section-icon,
   mp-baustellen-golden-v2.css:778-791 — 34×34px/radius:10px/Akzentfarbe/
   weißes Symbol), hier auf 30px verkleinert, damit sie neben der
   damals noch vorhandenen Nummer-Badge in eine 56px-Zeile passt, ohne den
   Textbereich zu sehr einzuengen. Farbe kommt aus der Inline-Custom-
   Property --mp-kva-row-accent (JS setzt sie pro Zeile aus STEPS[i].color
   — denselben Werten wie core/mp-list-workspaces-golden.js entries[]).
   04.09.2026 (MP-20260904-032): Nummer-Badge fällt weg (siehe oben,
   display:none), dadurch werden 42px frei (30px Badge + 12px Gap) — Icon
   30→40px, SVG 16→20px. Zeile bleibt bei min-height:56px nicht höher,
   weil 40px Icon weiterhin unter der 56px-Zeilenhöhe liegt. */
.mp-kva-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-kva-row-accent, #2bb0ff);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.mp-kva-step-row-icon svg {
  width: 20px;
  height: 20px;
}

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

.mp-kva-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-kva-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-kva-step-row-chev {
  flex: 0 0 auto;
  color: #94a3b8;
}

/* ── Kopf/Fuß-Chrome (als Geschwister von .kva-editor eingefügt, siehe JS) */
.mp-kva-step-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* NACHTRAG 03.09.2026 (MP-016-Klasse): 1055 statt 100045, siehe
     Dateikopf-Begründung — 1050 (Elevation) + 5, damit Kopf/Fuß über dem
     eigenen elevierten Inhalt bleiben, aber unter JEDEM aus dem Schritt
     heraus geöffneten nativen Fenster/Sheet (niedrigstes bekanntes: 1100). */
  z-index: 1055;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  background: rgb(var(--mp-flaeche-rgb)); /* vollständig opak — siehe Aufmaß-Lehre MP-20260903-010 (2. Repro), kein Alpha-Kanal */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

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

.mp-kva-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-kva-step-close:active {
  background: rgba(15, 23, 42, .10);
}

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

.mp-kva-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"): 15.5px ->
   17px. Bleibt trotzdem unter der 40px-Zeilenhöhe, die ohnehin schon durch
   den 40px-Schließen-Knopf/-Spacer/-Icon in .mp-kva-step-head-row bestimmt
   ist (Kicker 10.5px + Gap 1px + Titel 17px ≈ 28.5px Textstapel) — der Kopf
   wird dadurch NICHT höher (Marcels Kompakt-Vorgabe, "Handy: Köpfe/
   Tab-Leisten KOMPAKT"). */
.mp-kva-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-kva-step-head-spacer {
  flex: 0 0 40px;
}

/* MP-20260904-072 (Marcel, Screenshot: "da muss auch oben Kontext rein,
   in welchem Angebot man gerade arbeitet … als Handwerker ist man
   schnell mal abgelenkt") — kompakte zweite Zeile UNTER der 40px-
   head-row (Wache aus -062 bleibt gültig, die Zeile sitzt darunter, nicht
   daneben), VOR dem Fortschrittsbalken. Text/Quelle: kva-mobile-steps.js
   formatIdentityHeadLine()/statusIdentity() — dieselbe Datenquelle wie
   die Übersichtszeile, "Nummer · Kunde" (kein Objekt, kein Speicher-
   status-Zusatz, siehe dortiger Kommentar). Erhöht die Kopf-Gesamthöhe
   bewusst über die bisherigen ≤76px (siehe DEFAULT_STEP_HEAD_H-Nachtrag
   in kva-mobile-steps.js + padding-calc unten). */
.mp-kva-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-kva-step-progress {
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px; /* Fortschrittsbalken-Spur, kein Knopf — Regel „keine runden Pillen" gilt für Bedienelemente */
  background: rgba(15, 23, 42, .07);
}

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

.mp-kva-step-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* NACHTRAG 03.09.2026 (MP-016-Klasse) — siehe .mp-kva-step-head oben. */
  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-kva-step-foot > button {
  min-height: 44px;
}

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

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

/* MP-20260903-024 — Auslöser-Knopf. Inhaltsbreite (44×44px, KEIN
   width:100% — Knopfregel), border-radius:12px (App-Standard, KEINE
   Pille), Markenblau #2bb0ff nur als Aktiv-/Pressed-Zustand (Grundfläche
   bleibt neutral, damit der Knopf nicht wie ein Primär-CTA wirkt — er ist
   ein sekundäres Werkzeug neben den drei Übersichtszeilen). */
/* MP-20260904-012 (Marcel, 04.09., am echten Handy): Knopf nach LINKS —
   „was man mit dem Daumen besser dahin kommt". Gilt fuer Angebote UND
   Rechnungen; die Schwesterdatei mp-rechnungen-mobile-steps.css traegt
   denselben Wert (Blaupause: gleiche Sache = gleiche Bedienung).
   04.09.2026 FORTGESCHRIEBEN (MP-20260904-034, Marcel, Screenshot 14:59,
   ausgelieferter Stand v813-abend1): „das Drei-Punkte-Menü müsste
   eigentlich in der Mitte von der Karte sein" — LINKS → MITTE. Kein
   Widerspruch zu -012, sondern deren Folge: seit MP-20260904-029 (selber
   Sammel-Deploy) sitzt die mobile Listen-Lasche
   (.mp-workspace-external-rail-toggle) am LINKEN Bildschirmrand — genau
   dort, wo -012 den Knopf hinbewegt hatte. Beide sind im
   Übersichts-Zustand GLEICHZEITIG sichtbar (geprüft: die Lasche wird nur
   im Vollbild-Schritt ausgeblendet, siehe die :is(...)-Ausblendliste
   weiter unten in dieser Datei — Idas Annahme "gegenseitig ausschließende
   Zustände" trifft auf die Lasche nicht zu, war aber auch nicht die
   Ursache eines Fehlers: die Elevations-Ausblendung der Lasche wurde
   bereits mit -029 korrekt ergänzt, kein erneuter Leck-Fall). Geprüfte
   Box-Kette (`.view-box` 14px symmetrisches Padding, `.mp-editor-command-
   deck`/`.mp-kva-step-overview`/diese Zeile selbst ohne eigenes
   horizontales Padding/Margin) — `center` zentriert hier wirklich auf die
   Kartenbreite, keine versteckte Asymmetrie gefunden. Gilt wieder fuer
   Angebote UND Rechnungen, Schwesterdatei traegt denselben Wert. */
.mp-kva-step-quickbar {
  justify-content: center;
  margin: 2px 0 4px;
}
.mp-kva-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-kva-step-quickbar-btn:active,
.mp-kva-step-quickbar-btn[aria-expanded="true"] {
  border-color: #2bb0ff;
  background: rgba(43, 176, 255, .10);
  color: #087fc4;
}
.mp-kva-step-quickbar-btn:focus-visible {
  outline: 2px solid #2bb0ff;
  outline-offset: 2px;
}

/* Body-portaliertes Menü (siehe kva-mobile-steps.js openQuickMenu() —
   fest positioniert relativ zum Auslöser-Knopf, viewport-geklemmt).
   z-index 1200 = dieselbe Zone wie das bestehende "+ Hinzufügen"-Menü
   (mpOpenSpawnPortal in modules/kva/kva_patch_events.js, NUR als
   Präzedenzwert gelesen, kein Nachbau) — sicher über Dock/Topbar (1000)
   UND über der (hier ohnehin inaktiven, da nur im Übersichts-Zustand
   sichtbaren) Elevation (1050/1055). */
.mp-kva-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-kva-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-kva-step-quickmenu-item:hover,
.mp-kva-step-quickmenu-item:active {
  background: rgba(43, 176, 255, .08);
}
.mp-kva-step-quickmenu-item:focus-visible {
  outline: 2px solid #2bb0ff;
  outline-offset: -2px;
}
.mp-kva-step-quickmenu-item[disabled] {
  color: #a3adba;
  cursor: not-allowed;
  opacity: .6;
}
.mp-kva-step-quickmenu-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: #2bb0ff;
}
.mp-kva-step-quickmenu-item[disabled] .mp-kva-step-quickmenu-icon {
  color: inherit;
}
.mp-kva-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,
     siehe core/mp-list-workspaces-golden.js ensureCommandDeck(); die
     Save/PDF/Mail-Knöpfe bleiben unverändert wie heute per horizontalem
     Scroll erreichbar, das ist NICHT Teil dieses Auftrags). */
  #view-kva.mp-document-editor-golden:not([data-mp-editor-mobile-step]) .mp-kva-step-overview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 2px 0 12px;
  }
  /* MP-20260904-057 / NACHTRAG 05.09.2026 (MP-20260904-072, Marcel: "ist
     ein bisschen klein, also muss man schon suchen … wir haben Platz auf
     dem Gerät") — aus der ruhigen 12.5px-Pille wird ein echter
     Dokumentkopf: Icon-Fläche wiederverwendet .mp-kva-step-row-icon
     (40×40/radius:12px, dieselbe Klasse wie -062 im Schritt-Kopf), Titel
     (Nummer) trägt zusätzlich .mp-kva-step-title (identische 17px/800 wie
     die Schritt-Überschriften), Sub-Zeile (Kunde·Objekt) 14px, Speicher-
     status als eigener Chip statt Fließtext-Anhängsel. Bleibt Information,
     keine dritte Bedienreihe (kein Button, kein Klick-Handler, siehe JS) —
     NUR mobil UND NUR im Übersichts-Zustand sichtbar (identisches Gate wie
     .mp-kva-step-overview darüber). */
  #view-kva.mp-document-editor-golden:not([data-mp-editor-mobile-step]) .mp-kva-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-kva-step-context-text-wrap {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
  }
  .mp-kva-step-context-title {
    /* Größe/Gewicht/Farbe/Ellipsis kommen aus der mitgetragenen Klasse
       .mp-kva-step-title (siehe oben) — hier bewusst keine zweite
       Deklaration derselben Werte. */
  }
  /* NACHTRAG 05.09.2026 (QA-Auflage A1, Lena Berger, B1 im Abnahmebericht
     MP-20260904-072-qa-abnahme.md, SHARED_LEARNINGS L-2026-09-05-O):
     Klasse bewusst NICHT `…-context-sub` genannt — `css/mp-mobile-
     typography.css` (fremde, app-weite Datei) erzwingt per
     `[class*="-sub"]` + `!important` `max(12px, var(--font-size-caption))`
     auf JEDE Klasse mit dieser Endung, unabhängig vom Fachkontext. Die
     14px-Deklaration unten kam dadurch real als 12px an (Kaskaden-Beleg
     im QA-Bericht). Fix: Klasse umbenannt auf `-context-line2` (trifft
     KEINE der fünf Wildcard-Endungen `-sub`/`-hint`/`-label`/`-meta`/
     `-caption`) statt die fremde Wildcard-Regel anzufassen oder die
     Spezifität hochzuschrauben — sauberer Ausweg laut Learning. */
  .mp-kva-step-context-line2 {
    overflow: hidden;
    color: rgb(var(--mp-t3-52607a));
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mp-kva-step-context-line2[hidden] {
    display: none;
  }
  .mp-kva-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-kva-step-context-chip[hidden] {
    display: none;
  }
  /* MP-20260903-024 — NUR mobil UND NUR im Übersichts-Zustand sichtbar,
     identisches Gate wie .mp-kva-step-overview darüber. Ab 768px bleibt
     die Basisregel (display:none) unverändert wirksam — kein extra
     Desktop-Ausschluss nötig. */
  #view-kva.mp-document-editor-golden:not([data-mp-editor-mobile-step]) .mp-kva-step-quickbar {
    display: flex;
  }
  #view-kva.mp-document-editor-golden .mp-editor-section-nav > .mp-editor-section-item {
    display: none !important;
  }

  /* NACHTRAG 04.09.2026 (MP-20260904-021, Ida Neumann): #kvaLockBanner
     bleibt an seiner heutigen DOM-Stelle (kein Umbau von
     _kvaApplyLockUI()/Klick-Handlern) — wird NUR im Übersichts-Zustand
     (:not([data-mp-editor-mobile-step]), derselbe Gate wie alle Regeln in
     diesem Block) sticky direkt unter dem Deck. --mp-kva-deck-h wird von
     syncDeckHeight() (kva-mobile-steps.js) laufend nachgeschärft; der
     300px-Fallback greift nur, solange JS noch nicht gemessen hat — gegen
     ECHTES Rendering nachgeschärft (tools/test-kva-lock-banner-sticky.js:
     reale Deck-Höhe 312px, nicht Idas grob geschätzte 210px; 300px liegt
     knapp darunter, siehe DEFAULT_DECK_H-Kommentar dort für die genaue
     Guard-Logik). Höhe des Banners selbst: flex-direction:column (statt
     row) hält Icon/Text/Knopfzeile untereinander statt nebeneinander —
     Ursache der vorher 404px hohen Karte behoben (jetzt ~150px real
     gemessen; Idas grob geschätztes ~100-110px-Zielfenster wird damit
     noch nicht ganz erreicht, siehe Handoff — Icon/Text/Knopfzeile stehen
     mit flex-direction:column als DREI Zeilen statt zwei). */
  #view-kva.mp-document-editor-golden:not([data-mp-editor-mobile-step]) #kvaLockBanner {
    position: sticky;
    top: var(--mp-kva-deck-h, 300px);
    z-index: 420;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0 0 12px;
  }
  /* Knopfzeile: nebeneinander, aber umbrechend statt bildschirmbreit
     gestreckt — kein width:100% auf den Knöpfen (Hausregel). */
  #view-kva.mp-document-editor-golden:not([data-mp-editor-mobile-step]) #kvaLockBanner .mp-kva-lock-banner-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  #view-kva.mp-document-editor-golden:not([data-mp-editor-mobile-step]) #kvaLockBanner #kvaNewVersionBtn,
  #view-kva.mp-document-editor-golden:not([data-mp-editor-mobile-step]) #kvaLockBanner #kvaUnlockViewBtn {
    flex: 0 0 auto;
  }

  /* NACHTRAG 03.09.2026 (MP-20260903-019, Marcel Live-Test Handy, Screenshot
     ee8a1791 — "Ich will eigentlich nur diese drei Auswahlpunkte haben. Und
     nicht noch den Rest scrollen können."): Die Übersichtszeilen oben waren
     bereits korrekt, aber NUR zusätzlich VOR dem Editor eingefügt
     (ensureOverview() hängt sie in .mp-editor-command-deck, einen Sibling
     VOR .kva-editor) — .kva-editor selbst blieb im Übersichts-Zustand
     unverändert sichtbar und lief unter der Übersicht normal weiter (alle
     Karten, die zur aktuell aktiven Sektion gehören, sind laut der
     bestehenden [data-mp-editor-section]/[data-mp-editor-card]-Kaskade
     sichtbar — auch OHNE offenen Schritt). Fix: .kva-editor wird im
     Übersichts-Zustand komplett ausgeblendet — reine CSS-Sichtbarkeit,
     IN-PLACE, kein DOM-Umbau (L-2026-09-02-AN — ein Teilrender/Klon hängt
     Einzel-Bindungen ab). State/Handler/Autosave bleiben unberührt, die
     Karten werden nur nicht gerendert, nicht entfernt. */
  #view-kva.mp-document-editor-golden:not([data-mp-editor-mobile-step]) .kva-editor {
    display: none !important;
  }

  /* NACHTRAG 03.09.2026 (mp019b, Marcel Live-Test am ausgelieferten
     mp019a-Stand, Screenshot bf8beb55): unter den drei Übersichtszeilen
     stand weiterhin die A4-Live-Dokumentvorschau (Briefkopf "MALERBETRIEB
     MIRAN", Summenkarte Netto/Rabatt/…/Brutto) und war scrollbar. Ursache:
     `#kvaA4Wrapper.a4-wrapper` (kva.html:625, Beleg per grep) ist ein
     GESCHWISTER von `.kva-editor` innerhalb `.view-box` — NICHT dessen
     Kind — und wurde von der `.kva-editor{display:none}`-Regel oben
     deshalb nicht erfasst. TABU beachtet: `core/mp-a4-live-preview.js`
     (Rendering-Logik) NICHT angefasst — reine additive CSS-Sichtbarkeits-
     regel, NUR im Übersichts-Zustand (`:not([data-mp-editor-mobile-step])`)
     und NUR mobil. Sobald ein Schritt offen ist ODER ab 768px greift diese
     Regel nicht — die Vorschau bleibt dort unverändert wie heute (kein
     Dauer-display:none, keine Nebenwirkung auf die PDF-Erzeugung, die liest
     weiterhin denselben, hier nur VISUELL verborgenen DOM-Knoten). */
  #view-kva.mp-document-editor-golden:not([data-mp-editor-mobile-step]) #kvaA4Wrapper {
    display: none !important;
  }

  /* NACHTRAG 04.09.2026 (MP-20260903-019 Etappe 1, Marcel: "Diese Mini-
     Vorschau hier unten kann in beiden Modulen weg" — echte Ursachen-Suche
     statt Annahme): `modules/kva/kva-a4-live.js ensureUi()` fügt bei jedem
     renderKvaPreview() ZUSÄTZLICH `#mpKvaLiveBox` ("Seitenvorschau (wie im
     PDF)" + Spinner + iframe) als GESCHWISTER von `#kvaA4Wrapper` ein
     (`w.parentElement.insertBefore(box, w.nextSibling)`, kva-a4-live.js:44
     — `w.parentElement` ist `.view-box`, exakt dieselbe Ebene). Diese Box
     existierte in einem produktiven Bearbeitungs-Vorgang praktisch immer
     (renderKvaPreview läuft laufend), war aber von KEINER bisherigen Regel
     erfasst — genau die zweite, bislang unbenannte Mini-Vorschau neben
     `#kvaA4Wrapper`. Nur mobil, nur Übersicht — TABU beachtet:
     `modules/kva/kva-a4-live.js` NICHT angefasst, reine CSS-Sichtbarkeit.
     PDF-Beleg: `src/core/app.core.js:6862-6889 mpExportOfferPdfViaServer`
     nutzt server-first `exportOfferPDF_B2()` (schnappschuss-/datenbasiert,
     komplett viewport-unabhängig laut eigenem Kommentar dort "Export
     unabhängig von der UI-Preview"); selbst der DOM-Fallback
     `document.querySelector('#kvaA4Wrapper')` liest bei display:none
     unverändert vollständigen Inhalt (CSS-Sichtbarkeit entfernt keine
     DOM-Knoten/kein innerHTML) — kein Risiko für die PDF-Erzeugung. */
  #view-kva.mp-document-editor-golden:not([data-mp-editor-mobile-step]) #mpKvaLiveBox {
    display: none !important;
  }

  /* Elevation (KORRIGIERT 03.09.2026, MP-019-Nachzug — siehe Dateikopf):
     `.view-box` selbst wird vollflächig, NUR wenn ein Schritt aktiv ist —
     NICHT mehr `.kva-editor`. Welche Karte darin sichtbar ist, regelt
     unverändert die bestehende [data-mp-editor-section]/[data-mp-editor-
     card]-Kaskade — diese Regel fügt nur Position/Größe/Chrome-Abstand
     hinzu, keine zweite Sichtbarkeitslogik. Identisches Muster zu
     `#view-rechnung…[data-mp-editor-mobile-step] > .view-container >
     .view-box` (mp-rechnungen-mobile-steps.css) — bewusst 1:1 übernommen,
     damit beide Module strukturell gleich scrollen. */
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] > .view-container > .view-box {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    /* NACHTRAG 03.09.2026 (MP-016-Klasse, siehe Dateikopf-Begründung):
       1050 statt 100040 — unter JEDEM aus einem KVA-Schritt heraus
       erreichbaren nativen Fenster/Sheet (niedrigstes bekanntes: 1100),
       aber über der Dockleiste/Topbar (.bottom-nav/.topbar, 1000). */
    z-index: 1050;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    margin: 0 !important;
    /* Content-Offset aus der gemessenen Kopf-/Fuß-Höhe (kva-mobile-
       steps.js syncStepChromeHeights(), per getBoundingClientRect() NACH
       dem Layout gesetzt) + 8px Luft. Fallback bewusst ÜBER der
       tatsächlichen Kopfhöhe angesetzt (Aufmaß-Lehre MP-20260903-010:
       ein Ruhezustand VOR/OHNE erfolgreiche JS-Messung darf nie zu knapp
       sein) — die JS-Variable darf diesen Wert nur nach OBEN verfeinern,
       nie unterschreiten (siehe DEFAULT_STEP_HEAD_H/-FOOT_H-Guard in
       kva-mobile-steps.js). NACHTRAG 05.09.2026 (MP-20260904-072): 84px ->
       100px, weil der Kopf jetzt eine zusätzliche Kontextzeile trägt
       (.mp-kva-step-head-context) — MUSS zu DEFAULT_STEP_HEAD_H in
       kva-mobile-steps.js passen. */
    padding: calc(var(--mp-kva-step-head-h, 100px) + 8px) 14px calc(var(--mp-kva-step-foot-h, 64px) + 8px + env(safe-area-inset-bottom)) !important;
    scroll-padding-top: calc(var(--mp-kva-step-head-h, 100px) + 8px);
    /* NACHTRAG 03.09.2026 (MP-016-Nacharbeit, Marcels Live-Screenshot
       57b29c24 — Wallpaper scheint zwischen/um die Karten durch): jetzt
       !important, damit dieser Wert unter GARANTIERT KEINER Bedingung
       gegen eine künftige, spezifischere Regel verliert (vorher ohne
       !important — bislang keine konkurrierende Regel gefunden, aber
       "bislang keine gefunden" ist kein Beleg für "künftig keine", siehe
       L-2026-09-03-Q). Die eigentlich vollflächige, opake Deckung MUSS aus
       diesem eigenen Container kommen (Auftrag: "nicht aus z-Erhöhung").
       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) — Karte auf Karte war Weiß auf Weiß, hebt sich jetzt
       vom Grund ab. Bleibt vollständig opak (derselbe Alpha-freie
       Hex-Wert wie vorher, nur ein anderer Farbton) — die
       elementFromPoint-Rasterprobe aus dem Wallpaper-Fund oben gilt
       unverändert, `--mp-bg-main` ist in `mp-ui-system.css` definiert,
       diese Datei ist aber NIRGENDS eingebunden (geprüft: kein Treffer in
       index.html/app/index.html) — deshalb der literale Fallback, der
       tatsächlich zieht, nicht nur zur Absicherung. */
    background: var(--mp-bg-main, rgb(var(--mp-f2-f6f7f9))) !important;
    /* "ZACK umgeschaltet, nix flackern" (Marcel, Aufmaß-Vorgabe, hier
       identisch übernommen) — kein Übergang beim Elevieren/Zurücksetzen. */
    transition: none !important;
    animation: none !important;
  }
  /* `.kva-editor` selbst ist jetzt NUR NOCH ein gewöhnlicher, nicht
     positionierter Block im Fluss der elevierten `.view-box` — kein
     eigener Scroll, keine eigene Positionierung mehr (das war die
     Ursache des "Karte fix, Inhalt scrollt darin"-Symptoms). */
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor {
    display: block !important;
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* NACHTRAG 03.09.2026 (MP-016-Nacharbeit) — STACKING-CONTEXT-HÄRTUNG,
     eigenständig gegen den echten Produktions-Quelltext geprüft (kein
     Nachbau): legacy_styles/core/layout.css:358 setzt auf JEDER aktiven
     View "`.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). Per Puppeteer-Probe
     bestätigt: dadurch würde JEDE noch so hohe interne z-Index-Zahl
     dieser Datei wirkungslos — #view-kva 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), egal wie
     hoch die Elevation/der Kopf/Fuß INNERHALB von #view-kva liegen.
     `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" — exakt
     dieselbe Erkenntnis, an anderer Stelle bereits einmal gemacht) — die
     Probe mit dieser Datei geladen zeigt korrektes Verhalten (Kopf/Fuß/
     Editor liegen korrekt über Topbar/Dockleiste, kein Wallpaper-
     Durchschein an 9 Rasterpunkten). 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, kein
     Verhaltensunterschied im aktuellen Ist-Zustand. */
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] {
    transform: none !important;
  }

  /* NACHTRAG 03.09.2026 (MP-20260903-019 Nachzug, Punkt ① + ③ — Marcel
     Live-Test Handy, mündlicher Zusatz "im Angebot ist diese Karte fest"
     [Modul-Kopfkarte] + "im Angebotsmodul … immer noch zweierlei Karten"
     bei Positionen; Beleg-Screenshot 15bf7051 zeigt dasselbe Muster an
     #view-rechnung, siehe dortige Datei für den BEWIESENEN Befund):

     (1) `.view-header` (Modul-Kopfkarte "Angebote · Angebote erstellen,
     bearbeiten und als PDF ausgeben.") UND `.mp-editor-command-deck`
     (enthält im elevierten Zustand NUR unsichtbare Kinder: die Tab-Knöpfe
     sind bereits per `.mp-editor-section-item{display:none}` oben
     ausgeblendet, und `.view-footer-actions` — dorthin von core/mp-list-
     workspaces-golden.js `ensureCommandDeck()` physisch verschoben, siehe
     dort `nav.appendChild(actions)` — ist APP-WEIT auf Mobil bereits 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, seit der
     globale Modul-Aktionen-Knopf im Dock existiert) sind deshalb IMMER
     ein leerer, aber weiterhin sichtbar gestylter Rahmen, sobald ein
     Schritt offen ist: `.mp-editor-command-deck` trägt eigenes Karten-
     Chrome (css/mp-baustellen-golden-v2.css:868-882 — `border:1px solid
     …!important;border-radius:16px!important;background:#fff!important;
     box-shadow:…!important`), das GENAU wie eine zweite, leere Karte
     neben "Positionen"/"Kalkulation" wirkt — das ist die BEWIESENE
     Ursache des "leeren Kastens" bei #view-rechnung (siehe dortige Datei)
     und der naheliegendste Erklärungsansatz für "zweierlei Karten" hier.

     (2) STATISCH bereits geprüft (Grep 03.09.2026): beide Elemente sind
     GESCHWISTER außerhalb `.kva-editor` (direkte Kinder von `.view-box`,
     modules/kva/kva.html:31/36/117 — `.view-header` VOR, `.mp-editor-
     command-deck` per `insertAdjacentElement("afterend", …)` NACH dem
     Header eingehängt, core/mp-list-workspaces-golden.js
     `ensureCommandDeck()`). `.kva-editor` selbst trägt `z-index:1050`
     (opak, `inset:0`), `.view-header`/`.mp-editor-command-deck` tragen
     nur `z-index:40` (mobile-ui-cleanup.css, `.view .view-header`) bzw.
     `z-index:430` (`:is(#view-kva,#view-rechnung) .mp-editor-command-
     deck`, mp-baustellen-golden-v2.css:868-870) — nach reiner Stacking-
     Rechnung müsste die Elevation beide bereits decken. KEIN Containing-
     Block-Bruch auf `.view-box`/`.view-container`/`#view-kva` gefunden
     (dieselbe GEPRÜFT-Notiz wie im Dateikopf). Trotzdem NICHT an einem
     echten Gerät nachvollzogen (kein Zugriff in dieser Sitzung, siehe
     Handoff) — Marcels eigener Befund widerspricht der reinen Theorie,
     deshalb hier zusätzlich EXPLIZIT ausgeblendet statt sich allein auf
     die (rechnerisch korrekte, aber nicht bewiesene) Deckung zu
     verlassen. Kostet nichts (beide Elemente sind im elevierten Zustand
     ohnehin funktionslos leer, siehe oben), macht das Ergebnis aber von
     der genauen Stacking-Mechanik unabhängig.

     (3) SPEZIFITÄT (L-2026-09-03-Q — dieselbe Falle, hier vorab vermieden
     statt erst nach einem QA-Fund behoben): css/mp-ui-final-hardwall.css:
     813-839 setzt "html:not(#mpkk):not(#mpkk-2) body .main-container >
     :is(…,#view-kva,#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. Eine schlichte
     "#view-kva …"-Regel mit nur 1 ID hätte GARANTIERT verloren, exakt
     die (bewiesene) Ursache, warum die #view-rechnung-Schwesterregel
     bislang wirkungslos war, obwohl sie seit MP-046 im Baum steht (siehe
     Handoff). Mit einem DRITTEN, hier neu ergänzten `:not(#mpkk-3)` (App-
     Konvention laut `grep ":not(#mpkk)"`, hier um eine Stufe eskaliert,
     dieselbe Technik — ein garantiert nie existierendes Element, reine
     Spezifitäts-Erhöhung) liegen wir bei 4 IDs und schlagen die o. g.
     Konkurrenzregel sicher, unabhängig von der Ladereihenfolge.

     NACHTRAG 04.09.2026 (MP-20260903-019 Etappe 1): `#mpKvaLiveBox` in die
     Geschwister-Liste aufgenommen — siehe Begründung/PDF-Beleg oben am
     Übersichts-Zustand (identische Ursache, identischer Beleg, hier nur
     zusätzlich für den elevierten Schritt-Zustand). */
  /* NACHTRAG 04.09.2026 (MP-20260904-021, Ida Neumann): #kvaLockBanner
     in die Geschwister-Liste aufgenommen. Er wird ab hier sticky direkt
     unter dem Deck (siehe @media (max-width:767px) weiter unten) — ohne
     diesen Eintrag würde die neue Sticky-Regel ihn im elevierten
     Vollbild-Schritt-Zustand erst recht festkleben; er ist dort heute
     schon fälschlich sichtbar (derselbe Zustand, den die übrigen fünf
     Geschwister hier bereits korrekt ausblenden). */
  html:not(#mpkk):not(#mpkk-2):not(#mpkk-3) body #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] > .view-container > .view-box > :is(.view-header, .mp-editor-command-deck, #kvaA4Wrapper, #mpKvaLiveBox, .mp-workspace-list-master, #kvaLockBanner) {
    display: none !important;
  }
  /* NACHTRAG 03.09.2026 (MP-019-Nachzug, eigener Wachenfund beim
     Struktur-Vergleich Angebote↔Rechnungen): `.mp-workspace-list-master`
     (Angebotsliste) ist NICHT dauerhaft ein Kind von `.view-box` — `core/
     mp-list-workspaces-golden.js placeRail()` verschiebt sie zur Laufzeit
     zu einem DIREKTEN Kind von `#view-kva` selbst ("Eine position:fixed-
     Leiste darf auf keinem Gerät im alten, zentrierten view-box bleiben",
     Kommentar dort). Die Regel oben (Kind von `.view-box`) greift deshalb
     NUR, solange dieser Rail-Umzug noch nicht gelaufen ist — per Wache
     bestätigt: in der echten, vollständig gebauten Seite ist die Liste
     bereits ein Kind von `#view-kva` selbst, die obige Regel trifft NICHT.
     Zusätzliche, direkte Regel hier (identisches Muster wie Rechnungen es
     bereits als "defensiv" kommentiert hatte — dort galt dieselbe Lücke,
     nur bislang unbemerkt, weil der Struktur-Vergleich sie zuvor nie
     geprüft hat). */
  html:not(#mpkk):not(#mpkk-2):not(#mpkk-3) body #view-kva.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, core/mp-list-workspaces-
     golden.js ensureExternalRailToggle()) ist — wie .mp-workspace-list-
     master direkt darüber — ein direktes Kind von #view-kva selbst
     (view.appendChild), nicht von .view-box. Ohne diesen Eintrag wäre sie
     im elevierten Vollbild-Schritt fälschlich sichtbar — genau die dritte
     Gelegenheit, dieselbe Klasse Fehler zu wiederholen, vor der Ida
     ausdrücklich gewarnt hat (siehe #kvaLockBanner-Nachtrag oben,
     SHARED_LEARNINGS.md L-2026-09-04-K/-L). */
  html:not(#mpkk):not(#mpkk-2):not(#mpkk-3) body #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] > .mp-workspace-external-rail-toggle {
    display: none !important;
  }

  /* NACHTRAG 03.09.2026 (MP-20260903-019, Teil 1 — Marcel Live-Test Handy,
     Screenshot 5496b485: "Und das sitzt immer noch in Karten?!? Auf mobil
     will ich, dass das VOLLBILD ist."): Die Elevation selbst funktioniert
     (Kopf/Fuß/Fortschritt), aber der INHALT steckte weiter in
     abgerundeten Karten mit Rahmen/Schatten/Außenabstand — sichtbar als
     Karte "Angebot Nr. …" (Dokumentenansicht) mit Lücke darunter Karte
     "Kalkulation" (beide gehören laut core/mp-list-workspaces-golden.js
     sectionForCard() zur selben Sektion "positionen" und stehen deshalb
     GLEICHZEITIG sichtbar). Rechnungen hat diese Neutralisierung bereits
     seit MP-20260902-046 (mp-rechnungen-mobile-steps.css) — hier dasselbe
     Muster 1:1 auf .kva-editor > .card angewendet. NUR Rand/Schatten/
     Radius/Außenabstand/seitlicher Innenabstand werden neutralisiert (der
     seitliche Lese-Rand kommt stattdessen von .kva-editors eigenem
     14px-Innenabstand, siehe Elevations-Regel oben) — Card-Body-Polsterung
     oben/unten und alle Formularfelder bleiben unverändert, keine
     Business-Logik berührt. Gilt für ALLE sechs Karten (Rahmendaten/
     Zahlungsbedingungen/Anschreiben/Positionen/Kalkulation/Schlusstext),
     nicht nur Positionen — welche gerade sichtbar ist, entscheidet
     unverändert die bestehende [data-mp-editor-card]-Kaskade. Trifft auch
     die dynamisch eingehängte .mp-comm-card[data-kind="offer"]
     (core/mail.js ensureCommunicationCard() fügt sie per
     insertAdjacentElement("afterend", …) NEBEN eine bestehende
     .kva-editor > .card ein — dadurch selbst ein .kva-editor > .card mit
     zusätzlicher .mp-comm-card-Klasse, vom Class-Selektor .card mit
     abgedeckt, kein eigener Selektor nötig). */
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor > .card {
    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-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor > .card:last-of-type {
    margin-bottom: 0 !important;
  }
  /* Abschnitts-Überschrift bleibt als Struktur erhalten (Kartenkopf-Text),
     aber als Fläche statt schwebende Kachel — eine dünne Trennlinie
     ersetzt den verlorenen Card-Header-Hintergrund, identisch zum bereits
     produktiven Rechnungen-Muster. */
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor > .card > .card-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  }
  /* Dokumentenansicht (core/kva-doc-mode.js + css/kva-doc-mode.css — NUR
     gelesen, NICHT verändert, TABU-Zone): ".kva-doc-page" ist eine EIGENE,
     von .card unabhängige weiße Fläche mit eigenem Radius/Schatten
     (Druckseiten-Optik, css/kva-doc-mode.css:144-163) — genau die "Angebot
     Nr. …"-Karte aus Marcels Screenshot. Dieselbe additive Neutralisierung
     wie oben, rein aus dieser Datei heraus, ohne die Dokumentenansicht-
     Logik selbst zu berühren. */
  #view-kva.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;
  }

  /* NACHTRAG 03.09.2026 (MP-20260903-019, Teil ② — dieselbe Karte 5496b485:
     die Aktionsreihe "+ Position/+ Titel/+ Notiz/+ Zwisc…" läuft rechts
     aus dem Bild UND ist unten angeschnitten). Ursache: ".mp-positions-
     scroll" trägt app-weit ein hartes max-height:550px!important
     ("HOTFIX POSITIONS SCROLL HARD CAP", css/mp-safe-style-patch.css) —
     im elevierten Vollbild erzeugt das eine ZWEITE, von .kva-editors
     eigenem Scroll UNABHÄNGIGE Scroll-Region. Verlangt: "EIN durchgehender
     Scroll (der elevierte Slot)" — Fix: im elevierten Zustand keine
     zweite Scroll-Region mehr, die Positionsliste fließt im selben Scroll
     wie der Rest des Schritts. */
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor .mp-positions-scroll,
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor .rechnung-table-wrapper {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }

  /* NACHTRAG 03.09.2026 (MP-20260903-019 Nachzug, Punkt ③ — eigener
     Wachenfund, tools/test-kva-schritt-ansichten-mobile-touch.js, gegen
     die ECHTE kva.html/CSS-Kaskade: die vollständige "kein panelgroßes
     Element trägt noch Radius/Rahmen/Schatten"-Inventur im elevierten
     Positionen-Schritt fand DREI übrig gebliebene Sub-Panels mit eigenem
     Karten-Chrome — NICHT die im Auftrag vermuteten `.kva-pay-opt`/
     `.mp-subcard`/etc. (die sind, GEPRÜFT, in diesem Schritt gar nicht
     im DOM sichtbar, siehe Handoff), sondern drei ECHTE, im DOM
     vorhandene Geschwister der Positionsliste/KPI-Anzeige):
       1. `.mp-positions-scroll` selbst trägt `border-radius:12px
          !important` (css/mp-safe-style-patch.css, Zeile ~162758,
          eigene, spätere Regel — unabhängig vom bereits behandelten
          max-height-Hardcap oben).
       2. `.mp-pos-add-footer` trägt `border-radius:14px;border:1.5px
          dashed …;background:rgba(248,251,255,.5)` (ohne !important,
          css/mp-safe-style-patch.css — als Ablage-/Drop-Zonen-Optik
          gedacht, wirkt hier aber wie eine zweite, gestrichelte Karte
          UNTER der bereits flachen Positionsliste).
       3. `.kva-kpi-bar` (Kalkulation-Karte, "Umsatz/Lohnkosten/Material
          EK/Gewinn/Marge") trägt volles Karten-Chrome (border/border-
          radius:16px/box-shadow/Verlaufs-Hintergrund, alle !important,
          css/mp-safe-style-patch.css) — genau DAS liest sich neben der
          bereits geflachten "Positionen"-Karte wie Marcels "zweierlei
          Karten".
     Fix: dieselbe additive Neutralisierung wie auf `.kva-editor > .card`
     oben — NUR Rand/Radius/Schatten/Hintergrund, keine Layout-/Abstands-
     Eigenschaft angefasst (Grid-Spalten der KPI-Kacheln, Innenabstand der
     Ablage-Zone bleiben unverändert). */
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor .mp-positions-scroll,
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor .mp-pos-add-footer {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  /* Horizontale Knopfreihen bekommen STATTDESSEN einen eigenen
     overflow-x:auto-Streifen, statt am Kartenrand abgeschnitten zu werden
     — "+ Zwisc…" lief im Screenshot rechts aus dem Bild. Die Knöpfe
     bleiben inhaltsbreit (keine width:100%-Knöpfe, Knopf-Regel
     unverändert) — nur die REIHE selbst darf zur Seite scrollen.
     justify-content:flex-start statt center, weil ein zentrierter Flex-
     Container bei overflow:auto den ANFANG des Inhalts symmetrisch
     verdeckt (bekannte Flexbox-Falle) — hier soll "+ Hinzufügen" immer
     als erstes erreichbar sein. .kva-doc-actions ist dieselbe Reihe im
     Dokumentenmodus (css/kva-doc-mode.css, NUR gelesen). */
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor .mp-pos-add-footer,
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor .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 (eigener Wachenfund, tools/test-kva-schritt-
     ansichten-mobile-touch.js): OHNE dies schrumpften die Knöpfe per
     Flexbox-Standardverhalten (flex-shrink:1) auf einen Bruchteil ihrer
     Textbreite, statt dass die Reihe überläuft — die Reihe blieb dadurch
     `scrollWidth == clientWidth` (kein Streifen zum Scrollen), und die
     hinteren Knöpfe ("Sortieren"/"Leistungspakete") waren an ihrer
     eigenen (zusammengequetschten) Position nicht mehr zuverlässig
     tappbar. Die Knöpfe müssen ihre natürliche Breite behalten, DAMIT die
     Reihe echt überläuft und der overflow-x:auto-Streifen oben überhaupt
     etwas zu scrollen hat. */
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor .mp-pos-add-footer > *,
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor .kva-doc-actions > * {
    flex-shrink: 0 !important;
  }
  /* .kva-editor selbst darf NICHT seitlich scrollen (nur die Streifen
     oben dürfen) — Akzeptanzkriterium: document.documentElement.
     scrollWidth <= clientWidth, kein Seiten-Horizontalscroll. Additive
     Eigenschaft zur bestehenden Elevations-Regel oben (die dort nur
     overflow-y setzt) — kein Konflikt, beide Regeln gelten gemeinsam. */
  #view-kva.mp-document-editor-golden[data-mp-editor-mobile-step] .kva-editor {
    overflow-x: hidden !important;
  }
}

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