/* =========================================================
   MP-20260916-007 — MAIL CENTER: MOBILE SCHRITT-ANSICHTEN (CSS)
   Jonas Falk (product-engineer), 16.09.2026.

   Vierte Anwendung des generischen Musters (Aufmaß → KVA → Rechnungen →
   Mail). NUR #view-mail — die anderen drei Module bleiben unberührt.
   Jeder Selektor hier ist hart auf "#view-mail" verdrahtet.

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

   ═════════════════════════════════════════════════════════════════════
   ARCHITEKTUR — dieselbe Begründung wie css/mp-rechnungen-mobile-
   steps.css (dort ausführlich hergeleitet, hier nur das für Mail
   Geprüfte): #view-mail hat wie #view-rechnung KEIN `.kva-editor`-
   Äquivalent. modules/mail/mail.html zeigt zwei EINZELNE `<div
   class="card mail-reader-card">`/`<div class="card mail-composer-
   card">` als direkte GESCHWISTER-Kinder von `.view-box` (kein
   wrappendes `<main>`, Grep-Beleg 16.09.2026). `.view-box` SELBST wird
   deshalb der elevierte Vollbild-Container — identische Technik wie bei
   Rechnungen. Welche Karte sichtbar ist, entscheidet unverändert die
   bestehende `[data-mp-editor-section]`/`[data-mp-editor-card]`-Kaskade
   (mp-baustellen-golden-v2.css, dort bereits um #view-mail erweitert).

   ZWEI ECHTE UNTERSCHIEDE zu Rechnungen (siehe mail-mobile-steps.js
   Dateikopf für die volle Begründung):
   1. NUR ZWEI Schritte (Nachricht/Verfassen), kein drittes/viertes Feld
      wie Positionen/Zahlung — die Fußleiste trägt deshalb NUR Zurück +
      Weiter/Senden, keinen separaten Speichern-Knopf.
   2. #view-mail hat KEIN `#rgA4Wrapper`-Äquivalent (keine A4-Live-
      Vorschau) und KEINE `.mp-comm-card`, die dynamisch eingehängt
      würde — die beiden Karten `.mail-reader-card`/`.mail-composer-card`
      sind von Anfang an im Markup vorhanden (modules/mail/mail.html),
      deshalb entfällt die entsprechende Ausblendregel ersatzlos.

   Direkte Folgen (alle NUR unter `[data-mp-editor-mobile-step]`, rein
   additiv):
   1. `.mp-workspace-list-master` (Mail-Liste) wird zur Laufzeit von
      ihrem eigenen "Rail"-Modul zu einem DIREKTEN Kind von `#view-mail`
      gemacht (core/mp-list-workspaces-golden.js placeRail(), identisch
      zu KVA/Rechnungen) — auf Mobil ohnehin standardmäßig off-canvas.
      Wird hier trotzdem defensiv mitversteckt, falls sie zum CSS-
      Auswertezeitpunkt noch unter `.view-box` hängt.
   2. `.mp-workspace-external-rail-toggle` (mobile Lasche) ist ebenfalls
      ein direktes Kind von `#view-mail` selbst, nicht von `.view-box`
      (identisch zu KVA/Rechnungen, SHARED_LEARNINGS.md L-2026-09-04-
      K/-L-Klasse) — ohne diesen Eintrag wäre sie im elevierten Vollbild-
      Schritt fälschlich sichtbar.
   3. `.mp-editor-command-deck` ist ein KIND des elevierten `.view-box`
      (core/mp-list-workspaces-golden.js ensureCommandDeck()) — wird
      beim Elevieren deshalb NICHT von der Elevation verdeckt, sondern
      läuft im Übersichts-Zustand normal mit. Im elevierten Schritt ist
      er (wie bei Rechnungen) ein Container OHNE sichtbares Kind (Tab-
      Knöpfe ausgeblendet, Übersicht per Basisregel unsichtbar, kein
      `.view-footer-actions`-Analog mehr nötig) und wird deshalb hier
      zusätzlich ausgeblendet, damit sein eigenes Karten-Chrome (Rand/
      Schatten/Radius) nicht als leerer weißer Kasten erscheint —
      dieselbe, bereits bei Rechnungen bewiesene Ursache (K-374-
      Korrektur, dortiger Dateikopf).
   4. Jede sichtbare `.mail-reader-card`/`.mail-composer-card` verliert
      ihre EIGENE Karten-Chrome (Rand/Schatten/Radius/Hintergrund) —
      innerhalb einer bereits opaken Vollbild-Fläche läse sich das sonst
      wie zwei schwebende Einzelkarten statt EIN durchgehendes Schritt-
      Formular. NUR die Chrome wird neutralisiert, NICHT die Card-Body-
      Polsterung/Formularfelder — keine Business-Logik berührt.

   Z-INDEX/SPEZIFITÄT: identisches Inventar wie bei Rechnungen (siehe
   dortiger Dateikopf für die vollständige Herleitung) — Elevation
   1050/Kopf-Fuß-Chrome 1055, sicher unter allen bekannten nativen
   Fenstern (Telefonbuch/Dokument-Auswahl/Kunde-Schnellanlage, jeweils
   ≥ 1200) und über der App-eigenen Dockleiste/Topbar (1000). Die
   konkurrierende Padding-Regel auf `.view-box` selbst (css/mp-list-
   workspaces-golden.css, `:is(#view-kva,#view-rechnung,#view-mail).mp-
   list-workspace.view.active > .view-container > .view-box{padding-
   …!important}`, NUR max-width:767px, Grep-Beleg 16.09.2026: schließt
   #view-mail bereits ein) setzt 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 — deshalb
   trägt unser Selektor identisch zur Rechnungen-Fassung zusätzlich
   `#view-mail` + `.mp-document-editor-golden` + `[data-mp-editor-
   mobile-step]` (ID + Klasse + Attribut), um robust gegen diese UND
   künftige `!important`-Regeln zu bleiben. */

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

/* Kontextzeile ("welche Nachricht ist offen"), Spiegel der Rechnungen-
   Schwesterdatei, siehe dortiger Kommentar für die vollständige
   Begründung. Lebt als ERSTES Kind von .mp-editor-command-deck, direkt
   VOR .mp-mail-step-overview. Grundzustand (alle Breiten): unsichtbar. */
.mp-mail-step-context {
  display: none;
}

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

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

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

/* Farbe kommt aus --mp-mail-row-accent (JS setzt sie pro Zeile aus
   STEPS[i].color). Keine Nummerierung (Marcel-Entscheidung, Spiegel der
   Rechnungen/KVA-Schwesterdateien), Icon-Fläche 40px/SVG 20px. */
.mp-mail-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-mail-row-accent, #2bb0ff);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.mp-mail-step-row-icon svg {
  width: 20px;
  height: 20px;
}

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

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

/* ── Kopf/Fuß-Chrome (als Geschwister von .view-box eingefügt, siehe JS) */
.mp-mail-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, identisch zu KVA/
     Rechnungen. */
  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-mail-step-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

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

.mp-mail-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-mail-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-mail-step-head-spacer {
  flex: 0 0 40px;
}

/* Kompakte zweite Zeile UNTER der 40px-head-row, VOR dem Fortschritts-
   balken. Text/Quelle: mail-mobile-steps.js formatIdentityHeadLine()/
   statusIdentity(). Erhöht die Kopf-Gesamthöhe bewusst über ≤76px (siehe
   DEFAULT_STEP_HEAD_H in mail-mobile-steps.js + padding-calc unten). */
.mp-mail-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-mail-step-progress {
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px; /* Fortschrittsbalken-Spur, kein Knopf */
  background: rgba(15, 23, 42, .07);
}

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

.mp-mail-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-mail-step-foot > button {
  min-height: 44px;
}

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

/* Auslöser-Knopf + Menü. Spiegel der Rechnungen/KVA-Schwesterdateien,
   identische Werte/Regeln, siehe dort für die ausführliche Begründung
   (Knopfregel/Radius-Standard/Markenblau/z-index-Zone). Mitte statt
   links (Marcel-Wunsch, Spiegel der Rechnungen-Schwesterdatei): keine
   Kollision mit der mobilen Listen-Lasche, die im Übersichts-Zustand
   ebenfalls sichtbar ist. */
.mp-mail-step-quickbar {
  justify-content: center;
  margin: 2px 0 4px;
}
.mp-mail-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-mail-step-quickbar-btn:active,
.mp-mail-step-quickbar-btn[aria-expanded="true"] {
  border-color: #2bb0ff;
  background: rgba(43, 176, 255, .10);
  color: #087fc4;
}
.mp-mail-step-quickbar-btn:focus-visible {
  outline: 2px solid #2bb0ff;
  outline-offset: 2px;
}
.mp-mail-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-mail-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-mail-step-quickmenu-item:hover,
.mp-mail-step-quickmenu-item:active {
  background: rgba(43, 176, 255, .08);
}
.mp-mail-step-quickmenu-item:focus-visible {
  outline: 2px solid #2bb0ff;
  outline-offset: -2px;
}
.mp-mail-step-quickmenu-item[disabled] {
  color: #a3adba;
  cursor: not-allowed;
  opacity: .6;
}
.mp-mail-step-quickmenu-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: #2bb0ff;
}
.mp-mail-step-quickmenu-item[disabled] .mp-mail-step-quickmenu-icon {
  color: inherit;
}
.mp-mail-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-mail.mp-document-editor-golden:not([data-mp-editor-mobile-step]) .mp-mail-step-overview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 2px 0 12px;
  }
  /* Spiegel der Rechnungen/KVA-Schwesterdateien (dort ausführlicher
     kommentiert): echter Dokumentkopf (Icon-Fläche .mp-mail-step-row-
     icon, Titel in .mp-mail-step-title-Größe, Sub-Zeile 14px, Status als
     eigener Chip). NUR mobil UND NUR im Übersichts-Zustand sichtbar
     (identisches Gate wie .mp-mail-step-overview darüber). */
  #view-mail.mp-document-editor-golden:not([data-mp-editor-mobile-step]) .mp-mail-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-mail-step-context-text-wrap {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
  }
  .mp-mail-step-context-title {
    /* Größe/Gewicht/Farbe/Ellipsis kommen aus der mitgetragenen Klasse
       .mp-mail-step-title — hier bewusst keine zweite Deklaration. */
  }
  .mp-mail-step-context-line2 {
    overflow: hidden;
    color: rgb(var(--mp-t3-52607a));
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mp-mail-step-context-line2[hidden] {
    display: none;
  }
  .mp-mail-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;
  }
  /* EIN-Knopf-Menü — NUR mobil UND NUR im Übersichts-Zustand sichtbar. */
  #view-mail.mp-document-editor-golden:not([data-mp-editor-mobile-step]) .mp-mail-step-quickbar {
    display: flex;
  }
  #view-mail.mp-document-editor-golden .mp-editor-section-nav > .mp-editor-section-item {
    display: none !important;
  }

  /* Die Übersichtszeilen werden zusätzlich VOR dem Editor eingefügt
     (ensureOverview() hängt sie in .mp-editor-command-deck, Geschwister
     der Karten) — die editorischen Karten selbst müssen im Übersichts-
     Zustand ausdrücklich ausgeblendet werden (dieselbe Lücke wie bei
     Rechnungen/KVA, MP-20260903-019-Klasse: ohne diese Regel bleiben
     `.mail-reader-card`/`.mail-composer-card` sichtbar, auch OHNE
     offenen Schritt). Reine CSS-Sichtbarkeit, IN-PLACE, kein DOM-Umbau. */
  #view-mail.mp-document-editor-golden:not([data-mp-editor-mobile-step]) :is(.mail-reader-card, .mail-composer-card) {
    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-mail.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 — vollständig opak, kein Alpha-
       Kanal, spannt dank inset:0 IMMER die komplette Viewport-Fläche
       auf, unabhängig vom Inhalt. `!important` (wie bei KVA/Rechnungen
       gehärtet): "bislang keine konkurrierende Regel gefunden" ist kein
       Beleg für "künftig keine". */
    background: var(--mp-bg-main, rgb(var(--mp-f2-f6f7f9))) !important;
    /* Content-Offset aus der gemessenen Kopf-/Fuß-Höhe (mail-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). */
    padding: calc(var(--mp-mail-step-head-h, 100px) + 8px) 14px calc(var(--mp-mail-step-foot-h, 64px) + 8px + env(safe-area-inset-bottom)) !important;
    scroll-padding-top: calc(var(--mp-mail-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+3). Reines CSS — keine der betroffenen Logiken (Mail-Liste,
     Rail, Deck) wird selbst angefasst. Spiegel der eskalierten
     Spezifität aus der Rechnungen/KVA-Schwesterdatei (dort per
     Screenshot-Beleg gehärtet: konkurrierende Regeln in css/mp-ui-
     final-hardwall.css/css/mp-list-workspaces-golden.css tragen 3+
     ID-Äquivalente + mehrere Klassen und schlagen eine einfache
     ID-Regel unabhängig von der Ladereihenfolge). */
  html:not(#mpkk):not(#mpkk-2):not(#mpkk-3) body #view-mail.mp-document-editor-golden[data-mp-editor-mobile-step] > .view-container > .view-box > :is(.view-header, .mp-editor-command-deck, .mp-workspace-list-master) {
    display: none !important;
  }
  html:not(#mpkk):not(#mpkk-2):not(#mpkk-3) body #view-mail.mp-document-editor-golden[data-mp-editor-mobile-step] > .mp-workspace-external-rail-toggle {
    display: none !important;
  }

  /* ── Command-Deck: bleibt (wie bei Rechnungen) 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. */
  #view-mail.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): sichtbare
     Karten sollen als EIN durchgehendes Schritt-Formular lesen, nicht
     als zwei 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).
     `.mail-reader-card`/`.mail-composer-card` tragen beide zusätzlich
     die Klasse `.card` (modules/mail/mail.html:92/214) — dieselbe
     mp-app-premium.css-Regel (".view .card:hover{transform:
     translateY(-2px)}" OHNE `!important`) träfe sie deshalb ebenso wie
     `.rg-editor-card`; `transform:none!important` hier aus demselben
     Grund wie in der Rechnungen-Schwesterdatei ergänzt (Touch-Geräte:
     `:hover` bleibt nach einem Tap kleben, kein echtes mouseleave). */
  #view-mail.mp-document-editor-golden[data-mp-editor-mobile-step] :is(.mail-reader-card, .mail-composer-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-mail.mp-document-editor-golden[data-mp-editor-mobile-step] :is(.mail-reader-card, .mail-composer-card):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-mail.mp-document-editor-golden[data-mp-editor-mobile-step] :is(.mail-reader-card, .mail-composer-card) > .card-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  }
  /* Marcel 16.09. 12:37 (Handy-Screenshot): im offenen Schritt hat der
     Schritt-Kopf (X) und der Schritt-Fuss (Zurueck/Weiter/Senden) das
     Sagen. Der „Abbrechen"-Knopf im Karten-Kopf, der Einklapp-Chevron des
     Kartenkopf-Standards und die Composer-Fussleiste (Telefonbuch/
     WhatsApp/Senden) sind dort doppelt und standen als lose Pillen ueber
     bzw. unter dem Formular. Ausserhalb des Schritts (Desktop/Tablet)
     bleiben sie unveraendert. */
  /* Spezifitaet: der Kartenkopf-Standard setzt den Aktions-Slot mit
     `html:not(#mpkk):not(#mpkk-2) body .mp-kopf-std > div[data-mp-kk-slot="aktion"]`
     auf display:flex !important — gemessen 16.09. 13:0x: headActVis blieb true.
     Deshalb hier dieselbe html:not()-Vorstufe plus View-ID. */
  html:not(#mpkk):not(#mpkk-2) body #view-mail.mp-document-editor-golden[data-mp-editor-mobile-step] .mp-mail-composer-head-actions,
  html:not(#mpkk):not(#mpkk-2) body #view-mail.mp-document-editor-golden[data-mp-editor-mobile-step] .mp-mail-composer-footer,
  html:not(#mpkk):not(#mpkk-2) body #view-mail.mp-document-editor-golden[data-mp-editor-mobile-step] :is(.mail-reader-card, .mail-composer-card) > .card-header .card-toggle {
    display: none !important;
  }

  /* ── STACKING-CONTEXT-HÄRTUNG, übernommen aus der Rechnungen/KVA-
     Schwesterdatei (dort nach Marcels Live-Screenshot gefunden und
     behoben): legacy_styles/core/layout.css setzt auf JEDER aktiven
     `.view` (nicht nur #view-kva/#view-rechnung) ".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/mp-structural-mobile-cleanup.css` setzt
     bereits APP-WEIT ".view,.view.active{transform:none!important}" —
     diese Regel hier macht die eigene Elevation UNABHÄNGIG von jener
     fremden Datei, reine Verteidigung in der Tiefe. */
  #view-mail.mp-document-editor-golden[data-mp-editor-mobile-step] {
    transform: none !important;
  }

  #view-mail.mp-document-editor-golden[data-mp-editor-mobile-step] > .view-container > .view-box {
    overflow-x: hidden !important;
  }
}

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