/* ===========================================================================
   E-Mail-Modul "Postfach"
   Stand 20.08.2026

   Alle Werte stammen aus dem Prototyp "E-Mail Postfach.dc.html". Dort stehen
   sie als Inline-Styles; hier sind sie zu Klassen zusammengefasst, damit die
   Oberflaeche nicht bei jedem Neuzeichnen kilobyteweise style-Attribute
   erzeugt. Die Zahlen sind unveraendert uebernommen.

   Praefix ml- durchgaengig, damit nichts mit den anderen Modulen kollidiert.
   =========================================================================== */

/* Gegen den Layout-Sprung, wenn Panels in-flow aufklappen und die Seite
   dadurch scrollbar wird. */
html { scrollbar-gutter: stable; }

/* Schlanke Scrollbars, 1:1 aus dem Entwurf.

   Der Kniff steckt in den beiden letzten Angaben am Griff: die Spur ist
   7px breit, der Griff traegt aber einen 2px breiten durchsichtigen Rand,
   und background-clip:content-box laesst die Farbe erst innerhalb davon
   beginnen. Sichtbar bleiben also 3px - deutlich schlanker, waehrend die
   Flaeche zum Greifen 7px breit bleibt.

   Ohne diese zwei Zeilen ist der Balken mehr als doppelt so dick. Genau
   das war er hier, bis es auffiel. */
#mail-root ::-webkit-scrollbar { width: 7px; height: 7px; }
#mail-root ::-webkit-scrollbar-track { background: transparent; }
#mail-root ::-webkit-scrollbar-thumb {
  background: #dcdbd3; border-radius: 4px;
  border: 2px solid transparent; background-clip: content-box;
}
#mail-root ::-webkit-scrollbar-thumb:hover {
  background: #b9b8b0; background-clip: content-box;
}
#mail-root ::-webkit-scrollbar-corner { background: transparent; }
/* Auf ALLE Elemente im Modul, nicht nur auf #mail-root: scrollbar-width
   wird nicht vererbt, und gescrollt wird in den Kindern - Liste,
   Ordnerspalte, Lesebereich. Stand die Angabe nur am Rahmen, bekamen genau
   die Stellen, an denen man scrollt, den dicken Standardbalken.

   Der Entwurf setzt sie auf * (jedes Element der Seite); hier bleibt sie
   auf das Modul begrenzt, damit die uebrigen Seiten unveraendert bleiben. */
#mail-root, #mail-root * {
  scrollbar-width: thin; scrollbar-color: #d8d7cf transparent;
}

/* Der Verfassen-Dialog haengt am body, nicht unter #mail-root - er braucht
   die Regeln deshalb noch einmal fuer sich. */
.mlv-dialog ::-webkit-scrollbar { width: 7px; height: 7px; }
.mlv-dialog ::-webkit-scrollbar-track { background: transparent; }
.mlv-dialog ::-webkit-scrollbar-thumb {
  background: #dcdbd3; border-radius: 4px;
  border: 2px solid transparent; background-clip: content-box;
}
.mlv-dialog ::-webkit-scrollbar-thumb:hover {
  background: #b9b8b0; background-clip: content-box;
}
.mlv-dialog, .mlv-dialog * {
  scrollbar-width: thin; scrollbar-color: #d8d7cf transparent;
}

/* ── Rahmen ──────────────────────────────────────────────────────────────── */
/* Die generische Regel der Anwendung lautet
     .page { display:none; padding:16px; max-width:680px; margin:0 auto }
   - gedacht fuer schmale Formularseiten. Fuer ein Postfach mit Ordner-
   spalte, Liste und Lesebereich ist das falsch: die Seite sass zentriert
   in 680px statt ueber die volle Breite.

   Dieselbe Ausnahme brauchen schon das Aufgaben-Board und der Messenger;
   dort steht auch begruendet, warum !important hier Absicht ist und kein
   Notnagel: .page ist generisch, und ohne !important setzt sich die
   Ausnahme in der laufenden Anwendung nicht durch.

   display:block statt flex mit demselben Grund wie beim Messenger - bei
   flex haengt die Breite davon ab, wie sich das Flex-Item verhaelt, und
   das ergab dort volle Hoehe bei nur rund 600px Breite. */
#page-mail {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
#page-mail.active { display: block !important; }

.ml-wrap {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: calc(100vh - 52px);
  background: #F4F6FA;
}

/* ── Ordnerspalte ────────────────────────────────────────────────────────── */
.ml-spalte {
  width: 212px;
  flex-shrink: 0;
  background: #fff;
  border-right: 0.5px solid #e0dfd7;
  display: flex;
  flex-direction: column;
}
.ml-spalte-kopf {
  padding: 10px 12px;
  border-bottom: 0.5px solid #f0efe8;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ml-kbtn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 0.5px solid #e0dfd7;
  background: #fff;
  color: #888;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ml-kbtn:hover { background: #EBF4FF; border-color: #3F96FE; color: #185FA5; }
.ml-kbtn.aktiv { background: #EBF4FF; border-color: #3F96FE; color: #185FA5; }
.ml-kbtn.primaer {
  border: none; background: #3F96FE; color: #fff;
}
.ml-kbtn.primaer:hover { background: #0A67EA; }

.ml-spalte-body { flex: 1; overflow-y: auto; padding: 8px 8px 4px; }

.ml-sec-lbl {
  font-size: 10px; font-weight: 500; color: #aaa;
  letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 6px 5px;
}
.ml-sec-lbl.spaeter { padding: 13px 6px 5px; }

.ml-ordner {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  border: none; width: 100%; text-align: left;
}
.ml-ordner:hover { background: #f0f6ff; }
.ml-ordner.aktiv { background: #EBF4FF; }
/* Ziel eines Drag-Vorgangs - dieselbe Hervorhebung wie die Lanes im
   Aufgaben-Board, damit sich beides gleich anfuehlt. */
.ml-ordner.ziel { background: #EBF4FF; box-shadow: inset 0 0 0 2px #3F96FE; }

/* Traegt seit der Angleichung an den Entwurf ein Emoji statt eines
   gezeichneten Symbols. Deshalb font-size statt SVG-Masse - und keine
   Farbangabe: Emoji bringen ihre Farbe mit. */
.ml-ordner-ico {
  width: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
}
.ml-ordner-name {
  font-size: 12.5px; color: #1a1a18; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-ordner.aktiv .ml-ordner-name { color: #185FA5; font-weight: 600; }
.ml-ordner-zahlen {
  margin-left: auto; display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.ml-pill-ungelesen {
  font-size: 9.5px; font-weight: 600;
  min-width: 16px; height: 16px; padding: 0 5px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: #EBF4FF; color: #185FA5;
}
.ml-zahl-gesamt {
  font-size: 9.5px; color: #c4c3bb;
  font-variant-numeric: tabular-nums;
}
.ml-ordner.zugewiesen {
  margin-top: 4px;
  border-top: 0.5px solid #f0efe8;
  padding-top: 11px;
}

.ml-spalte-fuss {
  padding: 9px 12px;
  border-top: 0.5px solid #e0dfd7;
  background: #fafaf8;
  display: flex; flex-direction: column; gap: 6px;
}
.ml-fussbtn {
  width: 100%; padding: 6px 10px;
  border-radius: 8px; border: 0.5px solid #e0dfd7;
  background: #fff; color: #666;
  font-size: 11.5px; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
}
.ml-fussbtn:hover { background: #f5f4f0; }

/* ── Inhalt ──────────────────────────────────────────────────────────────── */
.ml-inhalt {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: #fff;
}

/* Listenkopf */
.ml-listkopf {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: #fafaf8;
  border-bottom: 0.5px solid #e0dfd7;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  color: #888;
}
.ml-sp-check { width: 14px; flex-shrink: 0; display: flex;
               align-items: center; justify-content: center; }
.ml-sp-brief { width: 15px; flex-shrink: 0; }
.ml-sp-stern { width: 14px; flex-shrink: 0; }
.ml-sp-clip  { width: 12px; flex-shrink: 0; }
.ml-sp-betreff { flex: 1 1 0; min-width: 150px;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-sp-von   { flex: 0 1 200px; min-width: 60px;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-sp-datum { width: 70px; flex-shrink: 0; display: flex;
               align-items: center; gap: 3px; }
.ml-sp-datum.sortiert { color: #185FA5; }
.ml-sp-groesse { width: 58px; flex-shrink: 0; text-align: right; }

/* Liste */
.ml-liste { flex: 1; overflow-y: auto; min-height: 0; }
.ml-zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  border-bottom: 0.5px solid #f0efe8;
  background: #fff;
}
.ml-zeile:hover { background: #f7f9fc; }
.ml-zeile.gewaehlt { background: #EBF4FF; }
.ml-zeile.zieht { opacity: .45; }
.ml-zeile-betreff {
  flex: 1 1 0; min-width: 150px;
  font-size: 12.5px; color: #1a1a18;
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.ml-zeile-bt {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-zeile.ungelesen .ml-zeile-bt,
.ml-zeile.ungelesen .ml-zeile-von,
.ml-zeile.ungelesen .ml-zeile-datum { font-weight: 600; }
.ml-zeile-von {
  flex: 0 1 200px; min-width: 60px;
  font-size: 12px; color: #666;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-zeile-datum {
  width: 70px; flex-shrink: 0;
  font-size: 11px; color: #666;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ml-zeile-groesse {
  width: 58px; flex-shrink: 0; text-align: right;
  font-size: 10.5px; color: #aaa;
  font-variant-numeric: tabular-nums;
}
.ml-ico-btn {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: none; border: none; padding: 0;
}
.ml-ico-brief { width: 15px; color: #3F96FE; }
.ml-ico-brief.gelesen { color: #c4c3bb; }
/* Beantwortet und weitergeleitet treten an die STELLE des Briefs - eine
   Spalte, ein Zeichen. So steht es im Entwurf. */
.ml-ico-brief.beantwortet { color: #3F96FE; }
.ml-ico-brief.weitergeleitet { color: #EF9F27; }
.ml-ico-stern { width: 14px; color: #c4c3bb; }
.ml-ico-stern.an { color: #EF9F27; }
.ml-ico-clip { width: 12px; color: #aaa; }

/* Pillen in der Zeile */
.ml-mini {
  font-size: 9.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 9px;
  white-space: nowrap; flex-shrink: 0;
}
.ml-mini-wichtig  { background: #FCEBEB; color: #A32D2D; }
.ml-mini-eilt     { background: #FCEBEB; color: #A32D2D; }
.ml-mini-info     { background: #EBF4FF; color: #185FA5; }
.ml-mini-rechnung { background: #FAEEDA; color: #854F0B; }
.ml-mini-thread   { background: #EBF4FF; color: #185FA5; }
.ml-mini-zust     { background: #EBF4FF; color: #185FA5; }
.ml-mini-warte    { background: #FAEEDA; color: #854F0B; }
.ml-mini-wv       { background: #FAEEDA; color: #854F0B; }
.ml-mini-erledigt { background: #EAF3DE; color: #3B6D11; }
.ml-mini-aufgabe  { background: #EAF3DE; color: #3B6D11; }

/* Infozeile "50 neueste von 3.313" */
.ml-infozeile {
  padding: 9px 12px; text-align: center;
  font-size: 11px; color: #aaa;
  border-bottom: 0.5px solid #f0efe8;
  background: #fafaf8;
}
.ml-mehr {
  border: 0.5px solid #e0dfd7; background: #fff; color: #185FA5;
  border-radius: 8px; padding: 4px 12px; font-size: 11.5px;
  cursor: pointer; margin-left: 8px;
}
.ml-mehr:hover { background: #EBF4FF; border-color: #3F96FE; }

/* ── Ziehgriff ───────────────────────────────────────────────────────────── */
/* Im Entwurf ist das eine 1px hohe LINIE, kein Balken - und sie faerbt
   sich blau, sobald man sie anfasst.

   Gegriffen wird trotzdem bequem: ein unsichtbares ::before reicht 5px
   nach oben und unten und macht daraus 11px Trefferflaeche. Ein sichtbarer
   Balken waere die einfachere Loesung gewesen und genau deshalb falsch -
   er teilt die Ansicht optisch in zwei Haelften, statt sie nur zu trennen.

   Ich hatte hier zuerst 5px mit Rahmen gebaut; das ist als Streifen
   deutlich zu sehen und war nicht gemeint. */
.ml-griff {
  height: 1px; flex-shrink: 0;
  position: relative; z-index: 5;
  background: #e0dfd7;
}
.ml-griff::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: -5px; bottom: -5px;
}
.ml-griff:hover,
.ml-griff.zieht { background: #3F96FE; box-shadow: 0 0 0 1px #3F96FE; }

/* Die Kapsel sitzt UEBER der Linie (top:-8px bei 17px Hoehe), und die
   beiden Pfeile stehen uebereinander, nicht nebeneinander. */
.ml-griff-kapsel {
  position: absolute; top: -8px; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 17px;
  border-radius: 9px;
  border: 0.5px solid #e0dfd7;
  background: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
  color: #aaa;
  cursor: inherit; z-index: 6;
}
.ml-griff:hover .ml-griff-kapsel,
.ml-griff.zieht .ml-griff-kapsel { border-color: #3F96FE; color: #3F96FE; }
.ml-griff-kapsel svg { display: block; }

/* ── Lesebereich ─────────────────────────────────────────────────────────── */
.ml-lesen {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto;
  background: #F4F6FA;
  border-top: 0.5px solid #e0dfd7;
}
/* Kopf und Knopfleiste bilden zusammen einen weissen Block auf dem
   grauen Grund - im Entwurf ist es ein Element mit einem Rand unten. */
.ml-lesen-kopf {
  padding: 12px 16px 9px;
  background: #fff;
}
.ml-lesen-betreff {
  font-size: 15.5px; color: #1a1a18; line-height: 1.35;
  margin-bottom: 9px; word-break: break-word;
}
.ml-lesen-von { display: flex; align-items: center; gap: 10px; }
.ml-av {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.ml-lesen-vname { font-size: 12.5px; color: #1a1a18; font-weight: 600; }
.ml-lesen-vadr  { font-size: 11px; color: #888; }
.ml-lesen-datum { margin-left: auto; font-size: 11px; color: #aaa;
                  flex-shrink: 0; white-space: nowrap; }

.ml-aktionen {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 0 16px 12px;
  background: #fff;
  border-bottom: 0.5px solid #e0dfd7;
}
.ml-btn {
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
  border-radius: 8px; padding: 6px 12px;
  font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.ml-btn:hover { background: #f5f4f0; }
.ml-btn.primaer { background: #3F96FE; border-color: #3F96FE; color: #fff; }
.ml-btn.primaer:hover { background: #0A67EA; border-color: #0A67EA; }
.ml-btn.hell { background: #EBF4FF; border-color: #C7DEF7; color: #185FA5; }
.ml-btn.hell:hover { background: #d9e9ff; }
.ml-btn.rechts { margin-left: auto; }

/* Der Nachrichtentext als Karte - so steht er im Entwurf: weiss,
   0.5px Rand, 12px Radius, auf dem grauen Grund. */
.ml-lesen-body {
  flex-shrink: 0;
  margin: 14px 16px;
  padding: 16px 18px;
  background: #fff;
  border: 0.5px solid #e0dfd7;
  border-radius: 12px;
  font-size: 13px; line-height: 1.55; color: #1a1a18;
  white-space: pre-wrap; word-break: break-word;
}
.ml-lesen-html { padding: 14px 16px; font-size: 13px; line-height: 1.55; }
.ml-lesen-html img { max-width: 100%; height: auto; }

/* Anhaenge als Kacheln */
/* Anhaenge als schmale Chips in der Fussleiste - nicht mehr als
   88px-Kacheln darunter. Name und Groesse stehen in einer Zeile, der
   Platz bleibt der Nachricht. Bewusste Abweichung vom Entwurf. */
.ml-anhang {
  max-width: 220px; flex-shrink: 0;
  padding: 3px 9px;
  border: 0.5px solid #e0dfd7; border-radius: 20px;
  background: #fafaf8; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  color: #888;
}
.ml-anhang:hover { background: #EBF4FF; border-color: #C7DEF7;
                   color: #185FA5; }
.ml-anhang-name {
  font-size: 11px; color: #1a1a18;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ml-anhang-gr { font-size: 10px; color: #aaa; flex-shrink: 0; }

/* ── Leerzustaende ───────────────────────────────────────────────────────── */
.ml-leer {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 40px 20px;
  color: #aaa; font-size: 13px; text-align: center;
}
.ml-leer-titel { font-size: 14px; color: #666; }
.ml-hinweis {
  margin: 12px 16px;
  background: #FAEEDA; border: 0.5px solid #EF9F27;
  color: #854F0B; border-radius: 8px;
  padding: 9px 12px; font-size: 12px; line-height: 1.45;
}
.ml-hinweis.gut { background: #EAF3DE; border-color: #97C459; color: #3B6D11; }
.ml-hinweis.schlecht { background: #FCEBEB; border-color: #F09595; color: #A32D2D; }

/* ── Konto einrichten ────────────────────────────────────────────────────── */
.ml-einrichten {
  max-width: 520px; margin: 30px auto; padding: 0 20px;
}
.ml-feld { margin-bottom: 12px; }
.ml-feld-l { font-size: 11.5px; color: #666; margin-bottom: 4px; }
.ml-input {
  width: 100%; padding: 8px 10px;
  border: 1.5px solid #e0dfd7; border-radius: 8px;
  font-size: 13px; color: #1a1a18; background: #fff;
}
.ml-input:focus { outline: none; border-color: #3F96FE; }
.ml-zeile2 { display: flex; gap: 10px; }
.ml-zeile2 > * { flex: 1; }

/* ── Etappe 4: Auswahl, Kennzeichnen, Verschieben, HTML ─────────────────── */

/* Zeile ueber der Liste: Ordner, Zahlen, Auswahl-Aktionen */
.ml-infokopf {
  padding: 7px 12px; border-bottom: 0.5px solid #f0efe8;
  display: flex; align-items: center; gap: 8px;
  background: #fafaf8; flex-shrink: 0;
}
.ml-infokopf-o {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: #888; white-space: nowrap;
}
.ml-infokopf-i { font-size: 11px; color: #aaa; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
.ml-ausw { display: flex; align-items: center; gap: 6px; margin-left: 4px; }
.ml-ausw-zahl {
  font-size: 10.5px; font-weight: 600;
  background: #EBF4FF; color: #185FA5;
  border-radius: 20px; padding: 2px 8px; white-space: nowrap;
}
.ml-ausw-btn {
  padding: 2px 9px; border-radius: 7px;
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
  font-size: 11px; cursor: pointer; white-space: nowrap;
}
.ml-ausw-btn:hover { background: #f5f4f0; }
.ml-ausw-btn.weg:hover { background: #FCEBEB; border-color: #F09595;
                         color: #A32D2D; }
.ml-ausw-x {
  border: none; background: transparent; color: #aaa;
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.ml-ausw-x:hover { color: #A32D2D; }

/* Kennzeichnungs-Panel im Lesebereich */
.ml-btn.aktiv { background: #EBF4FF; border-color: #3F96FE; color: #185FA5; }
.ml-btn.loeschen:hover { background: #FCEBEB; border-color: #F09595;
                         color: #A32D2D; }
.ml-markpanel {
  margin: 10px 16px 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 11px;
  border: 0.5px solid #C7DEF7; border-radius: 10px; background: #F7FBFF;
}
.ml-markzeile { display: flex; align-items: flex-start; gap: 9px; }
.ml-marklbl {
  width: 88px; flex-shrink: 0;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: #aaa; padding-top: 6px;
}
.ml-markchips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.ml-chip {
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
  border-radius: 20px; padding: 4px 11px;
  font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.ml-chip:hover { border-color: #3F96FE; }
.ml-chip.an { background: #EBF4FF; border-color: #3F96FE; color: #185FA5;
              font-weight: 500; }
.ml-markzu {
  width: 22px; height: 22px; border-radius: 7px;
  border: 0.5px solid #e0dfd7; background: #fff; color: #aaa;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
}
.ml-markzu:hover { background: #FCEBEB; border-color: #F09595; color: #A32D2D; }

/* HTML-Anzeige im abgeschotteten Rahmen */
.ml-htmlrahmen {
  /* Waechst mit, schrumpft aber nicht (flex: 1 0 auto).
     Vorher stand hier flex:1 mit min-height:0 - und weil der Lesebereich
     scrollt, drueckte alles, was UNTER dem Rahmen steht, ihn zusammen.
     Bei einer Mail mit acht Nachrichten im Verlauf blieben davon rund
     neunzig Pixel; der Rahmen schneidet seinen Inhalt ab, man sah eine
     leere Flaeche und darunter den Verlauf. Jetzt bleibt der Rahmen
     stehen und der Lesebereich scrollt eben. */
  flex: 1 0 auto; display: flex; flex-direction: column; min-height: 260px;
  margin: 14px 16px;
  background: #fff;
  border: 0.5px solid #e0dfd7;
  border-radius: 12px;
  overflow: hidden;
}
.ml-htmlframe {
  flex: 1; width: 100%; min-height: 240px;
  border: none; background: #fff; display: block;
}
.ml-htmlfuss {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; font-size: 10.5px; color: #aaa;
  border-top: 0.5px solid #f0efe8; flex-shrink: 0;
}
.ml-htmlum {
  margin-left: auto;
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
  border-radius: 7px; padding: 2px 9px; font-size: 11px; cursor: pointer;
}
.ml-htmlum:hover { background: #EBF4FF; border-color: #3F96FE;
                   color: #185FA5; }

/* Verschieben-Dialog */
.ml-overlay {
  position: fixed; inset: 0; background: rgba(26, 26, 24, .42);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 16px; z-index: 65; overflow-y: auto;
}
.ml-dialog {
  background: #fff; border-radius: 16px;
  width: 100%; max-width: 420px; max-height: calc(100vh - 160px);
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(26, 26, 24, .20); overflow: hidden;
}
.ml-dialog-kopf {
  padding: 15px 18px 13px; border-bottom: 0.5px solid #e0dfd7;
  display: flex; flex-direction: column; gap: 3px; flex-shrink: 0;
}
.ml-dialog-zeile { display: flex; align-items: center; gap: 8px; }
.ml-dialog-titel { font-size: 17px; font-weight: 500; color: #1a1a18; }
.ml-dialog-x {
  margin-left: auto; border: none; background: transparent; color: #aaa;
  cursor: pointer; padding: 2px; display: flex; align-items: center;
}
.ml-dialog-x:hover { color: #A32D2D; }
.ml-dialog-sub {
  font-size: 12px; color: #888;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-dialog-such {
  padding: 11px 18px; border-bottom: 0.5px solid #f0efe8;
  flex-shrink: 0; display: flex; flex-direction: column; gap: 9px;
}
.ml-suchfeld {
  width: 100%; height: 36px; padding: 0 12px; font-size: 13px;
  border: 1.5px solid #C7DEF7; border-radius: 9px;
  background: #fafaf8; outline: none; color: #1a1a18;
}
.ml-suchfeld:focus { border-color: #3F96FE; }
.ml-zuletzt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ml-zuletzt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0.5px solid #e0dfd7; background: #fff; border-radius: 20px;
  padding: 3px 11px; font-size: 12px; color: #1a1a18; cursor: pointer;
}
.ml-zuletzt-btn:hover { background: #EBF4FF; border-color: #3F96FE;
                        color: #185FA5; }
.ml-dialog-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.ml-zielgruppe { display: flex; flex-direction: column; gap: 1px;
                 margin-bottom: 6px; }
.ml-ziellbl {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: #aaa; padding: 7px 11px 4px;
}
.ml-ziel {
  border: none; background: transparent; border-radius: 8px;
  padding: 8px 11px; font-size: 13px; color: #1a1a18; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  text-align: left; width: 100%;
}
.ml-ziel:hover { background: #f0f6ff; }
.ml-ziel.hier { color: #aaa; cursor: default; }
.ml-ziel.hier:hover { background: transparent; }
.ml-ziel-ico { width: 16px; display: flex; align-items: center;
               justify-content: center; flex-shrink: 0;
               font-size: 13px; line-height: 1; }
.ml-ziel-name { flex: 1; white-space: nowrap; overflow: hidden;
                text-overflow: ellipsis; }
.ml-ziel-hier { font-size: 10.5px; color: #aaa; flex-shrink: 0; }
.ml-ziel-zahl { font-size: 10.5px; color: #c4c3bb; flex-shrink: 0; }
.ml-zielleer { padding: 26px 12px; font-size: 13px; color: #aaa;
               text-align: center; }
.ml-dialog-fuss {
  padding: 10px 18px; border-top: 0.5px solid #e0dfd7; background: #fafaf8;
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.ml-dialog-anzahl { font-size: 11.5px; color: #888; flex: 1; }

/* ── Etappe 5: Verfassen ─────────────────────────────────────────────────── */
/* Eigener Praefix mlv-, weil dieser Dialog am body haengt und nicht unter
   #mail-root - die Scrollbalken-Regeln dort greifen also nicht. */

.mlv-overlay {
  position: fixed; inset: 0; background: rgba(26, 26, 24, .42);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 50px 16px; z-index: 60; overflow-y: auto;
}
#mlv-root.zieht .mlv-dialog {
  box-shadow: 0 0 0 3px #3F96FE, 0 12px 40px rgba(26, 26, 24, .20);
}
.mlv-dialog {
  background: #fff; border-radius: 16px;
  width: 100%; max-width: 660px; max-height: calc(100vh - 100px);
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(26, 26, 24, .20); overflow: hidden;
  font-size: 13px; color: #1a1a18;
}

.mlv-kopf {
  padding: 15px 18px 13px; border-bottom: 0.5px solid #e0dfd7;
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.mlv-titel { font-size: 17px; font-weight: 500; color: #1a1a18; }
.mlv-x {
  margin-left: auto; border: none; background: transparent; color: #aaa;
  cursor: pointer; padding: 2px; display: flex; align-items: center;
}
.mlv-x:hover { color: #A32D2D; }

.mlv-body {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
}
.mlv-felder { padding: 6px 18px 0; }
.mlv-zeile {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 0.5px solid #f0efe8; padding: 5px 0;
}
.mlv-lbl { font-size: 11.5px; color: #888; width: 44px; flex-shrink: 0; }
.mlv-von {
  font-size: 12.5px; color: #1a1a18;
  font-family: ui-monospace, Menlo, monospace;
}
.mlv-vonname { font-size: 11px; color: #aaa; }
.mlv-inp {
  flex: 1; min-width: 0; border: none; outline: none;
  font-size: 12.5px; color: #1a1a18; padding: 5px 0; background: transparent;
}
.mlv-inp.betreff { font-weight: 500; }
.mlv-cc {
  border: none; background: transparent; font-size: 11.5px; color: #185FA5;
  cursor: pointer; padding: 2px 4px; font-weight: 500; flex-shrink: 0;
}
.mlv-cc:hover { color: #0A67EA; }

.mlv-editorbox {
  margin: 12px 18px 0;
  border: 1.5px solid #e0dfd7; border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
.mlv-leiste {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 5px 7px; background: #fafaf8;
  border-bottom: 0.5px solid #e0dfd7;
}
.mlv-fbtn {
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px;
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px;
}
.mlv-fbtn:hover { background: #EBF4FF; border-color: #3F96FE; color: #185FA5; }
.mlv-trenner { width: 1px; height: 18px; background: #e0dfd7; margin: 0 4px; }
.mlv-sel {
  height: 26px; border-radius: 6px; border: 0.5px solid #e0dfd7;
  background: #fff; color: #666; font-size: 11.5px; padding: 0 4px;
  cursor: pointer; outline: none; max-width: 104px;
}
.mlv-htmlschalter {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: #aaa;
}
.mlv-bahn {
  width: 30px; height: 17px; border-radius: 9px; border: none;
  background: #dcdbd3; cursor: pointer; padding: 0; position: relative;
  display: flex; align-items: center;
}
.mlv-bahn.an { background: #3F96FE; }
.mlv-knopf {
  position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(26, 26, 24, .2);
  transition: left .12s ease;
}
.mlv-bahn.an .mlv-knopf { left: 15px; }

.mlv-editor {
  width: 100%; border: none; padding: 11px 12px;
  font-size: 13px; color: #1a1a18; outline: none;
  min-height: 118px; max-height: 260px; overflow-y: auto;
  line-height: 1.6; resize: none;
  font-family: inherit; background: #fff;
  display: block; box-sizing: border-box;
}
/* Platzhalter fuer den contenteditable-Editor: der kennt kein
   placeholder-Attribut. */
.mlv-editor[contenteditable]:empty::before {
  content: attr(data-leer); color: #aaa; pointer-events: none;
}

.mlv-zitat {
  margin: 10px 18px 0; border-left: 2px solid #C7DEF7;
  padding: 2px 0 2px 12px;
}
.mlv-zitat-kopf { font-size: 11.5px; color: #888; margin-bottom: 4px; }
.mlv-zitat-text {
  font-size: 12px; color: #888; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  max-height: 160px; overflow-y: auto;
}

.mlv-mit {
  margin: 10px 18px 0; border: 0.5px solid #e0dfd7; border-radius: 10px;
  background: #fafaf8; overflow: hidden;
}
.mlv-mit-kopf {
  padding: 9px 12px; border-bottom: 0.5px solid #e0dfd7;
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: #888;
}
.mlv-mit-kopf span {
  margin-left: auto; font-size: 11px; color: #aaa;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.mlv-mit-liste { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.mlv-mit-datei {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 0.5px solid #e0dfd7; border-radius: 8px;
  padding: 4px 9px; font-size: 11px; color: #1a1a18;
}
.mlv-mit-datei span { color: #aaa; }

.mlv-abschnitt {
  margin: 12px 18px 0; display: flex; flex-direction: column; gap: 8px;
}
.mlv-abschnitt.sig {
  border: 0.5px solid #e0dfd7; border-radius: 10px; background: #fafaf8;
  padding: 10px 12px; margin-bottom: 14px;
}
.mlv-abschnitt-kopf {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: #888;
}
.mlv-anhang-info {
  font-size: 11px; color: #aaa; text-transform: none;
  letter-spacing: 0; font-weight: 400;
}
.mlv-anhang-info.zuviel { color: #A32D2D; font-weight: 500; }
.mlv-sigauto {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #666; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.mlv-sigtext {
  font-size: 11.5px; color: #888; line-height: 1.55;
  white-space: pre-wrap; border-left: 2px solid #e0dfd7; padding-left: 10px;
}
.mlv-sigleer { font-size: 11.5px; color: #aaa; }

/* Das i neben "Signatur" - dasselbe Muster wie beim Verlauf. */
.mlv-siginfo {
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; font-weight: 600; font-style: italic;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0;
  border: 0.5px solid #e0dfd7; background: #fff; color: #aaa;
}
.mlv-siginfo:hover { border-color: #3F96FE; color: #3F96FE; }
.mlv-siginfo.an { border-color: #3F96FE; background: #EBF4FF; color: #185FA5; }

.mlv-dateien { display: flex; gap: 8px; flex-wrap: wrap; }
.mlv-datei {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 0.5px solid #e0dfd7; border-radius: 10px;
  padding: 7px 11px;
}
.mlv-datei-art {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; flex-shrink: 0;
  font-family: ui-monospace, Menlo, monospace;
  background: #EBF4FF; color: #185FA5;
}
.mlv-datei-name {
  font-size: 11.5px; font-weight: 500; color: #1a1a18;
  max-width: 180px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.mlv-datei-gr { font-size: 10px; color: #888; }
.mlv-datei-weg {
  border: none; background: transparent; color: #aaa;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.mlv-datei-weg:hover { color: #A32D2D; }
/* Die beiden Wege nebeneinander und flacher: sie tun dasselbe, sie
   nehmen nur einen anderen Weg. Untereinander und hoch nahmen sie mehr
   Platz als die Anhaenge selbst. */
.mlv-ablagen { display: flex; gap: 8px; }
.mlv-ablage {
  flex: 1;
  border: 1.5px dashed #C7DEF7; border-radius: 10px; background: #F5FAFF;
  display: flex; flex-direction: row; align-items: center;
  justify-content: center; cursor: pointer; padding: 9px 10px;
  color: #185FA5; gap: 7px; font-size: 11.5px; font-weight: 500;
}
.mlv-ablage:hover { background: #EBF4FF; border-color: #3F96FE; }
.mlv-ablage-zeichen { font-size: 14px; line-height: 1; }

/* Vorschau der angehaengten Dateien ─────────────────────────────────────── */
/* Nach dem Muster der Lightbox im Messenger. */
.mlv-datei { cursor: pointer; }
.mlv-datei:hover { border-color: #3F96FE; background: #F5FAFF; }
.mlv-datei-bild {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  object-fit: cover; background: #EBF4FF;
}
.mlv-lb {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(26, 26, 24, .78);
  display: flex; flex-direction: column; padding: 20px; gap: 12px;
}
.mlv-lb-kopf {
  display: flex; align-items: center; gap: 12px;
  color: #fff; font-size: 13px; flex-shrink: 0;
}
.mlv-lb-x {
  margin-left: auto; border: none; background: transparent; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.mlv-lb-mitte {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.mlv-lb-mitte img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.mlv-lb-mitte iframe {
  width: 100%; height: 100%; border: none; border-radius: 8px;
  background: #fff;
}

.mlv-warnung {
  margin: 0 18px 10px; display: flex; align-items: center; gap: 9px;
  background: #FAEEDA; border: 0.5px solid #EF9F27; border-radius: 9px;
  padding: 9px 12px; flex-shrink: 0;
}
.mlv-warntext { flex: 1; font-size: 12px; color: #854F0B; line-height: 1.45; }
.mlv-warnbtn {
  padding: 5px 11px; border-radius: 7px;
  border: 0.5px solid #EF9F27; background: #fff; color: #854F0B;
  font-size: 11.5px; font-weight: 500; cursor: pointer; flex-shrink: 0;
}
.mlv-warnbtn:hover { background: #EF9F27; color: #fff; }
.mlv-warnbtn.primaer { border-color: #3F96FE; background: #3F96FE; color: #fff; }
.mlv-warnbtn.primaer:hover { background: #0A67EA; }

.mlv-fuss {
  padding: 12px 18px; border-top: 0.5px solid #e0dfd7; background: #fafaf8;
  display: flex; gap: 10px; align-items: center; flex-shrink: 0;
}
.mlv-btn {
  padding: 8px 15px; border-radius: 8px;
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
  font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.mlv-btn:hover { background: #f5f4f0; }
.mlv-btn.primaer { background: #3F96FE; border-color: #3F96FE; color: #fff; }
.mlv-btn.primaer:hover { background: #0A67EA; border-color: #0A67EA; }
.mlv-btn.weg { margin-left: auto; }
.mlv-btn.weg:hover { background: #FCEBEB; border-color: #F09595; color: #A32D2D; }
.mlv-btn[disabled] { opacity: .55; cursor: default; }

/* ── Etappe 6a: Live ─────────────────────────────────────────────────────── */

/* Ankuendigung neuer Post ueber der Liste. Sitzt zwischen Tabellenkopf und
   Liste, damit sie nicht mitscrollt und nicht uebersehen wird. */
.ml-neue {
  width: 100%;
  border: none; border-bottom: 0.5px solid #C7DEF7;
  background: #EBF4FF; color: #185FA5;
  padding: 7px 12px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  flex-shrink: 0;
}
.ml-neue:hover { background: #d9e9ff; }

/* ── Etappe 6b: Suchen ───────────────────────────────────────────────────── */

.ml-suchbereich {
  padding: 8px 12px;
  border-bottom: 0.5px solid #e0dfd7;
  background: #fff; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.ml-suchzeile { display: flex; align-items: center; gap: 8px; }
.ml-suchfeld-box {
  flex: 1; min-width: 0; height: 32px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  border: 1.5px solid #C7DEF7; border-radius: 8px; background: #fafaf8;
}
.ml-suchfeld-box:focus-within { border-color: #3F96FE; background: #fff; }
.ml-suchlupe { color: #888; display: flex; flex-shrink: 0; }
.ml-suchfeld-inp {
  flex: 1; min-width: 0; border: none; outline: none;
  background: transparent; font-size: 12.5px; color: #1a1a18;
}
.ml-volltextmarke {
  flex-shrink: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .3px;
  background: #EBF4FF; color: #185FA5;
  border-radius: 20px; padding: 2px 7px; white-space: nowrap;
}
.ml-filterbtn {
  border: none; background: transparent; padding: 0; cursor: pointer;
  display: flex; align-items: center; color: #aaa; flex-shrink: 0;
}
.ml-filterbtn:hover { color: #3F96FE; }
.ml-filterbtn.an { color: #185FA5; }
.ml-suchzu {
  width: 32px; height: 32px; border-radius: 8px;
  border: 0.5px solid #e0dfd7; background: #fff; color: #aaa;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; padding: 0;
}
.ml-suchzu:hover { background: #FCEBEB; border-color: #F09595; color: #A32D2D; }

.ml-filterpanel {
  display: flex; flex-direction: column; gap: 9px;
  padding: 11px 12px;
  border: 0.5px solid #C7DEF7; border-radius: 10px; background: #F5FAFF;
}
.ml-fgruppe { display: flex; flex-direction: column; gap: 5px; }
.ml-fgruppe.zeitraum {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px;
}
.ml-flbl {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: #888;
}
.ml-fchips { display: flex; flex-wrap: wrap; gap: 5px; }
.ml-fchip {
  font-size: 11.5px; padding: 3px 10px; border-radius: 20px; cursor: pointer;
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
}
.ml-fchip:hover { border-color: #3F96FE; }
.ml-fchip.an { background: #EBF4FF; border-color: #3F96FE; color: #185FA5;
               font-weight: 500; }
.ml-fhinweis {
  display: flex; align-items: flex-start; gap: 7px;
  background: #fff; border: 0.5px solid #C7DEF7; border-radius: 8px;
  padding: 7px 10px; font-size: 11px; color: #666; line-height: 1.45;
}
.ml-fbereich {
  display: flex; border: 0.5px solid #e0dfd7; border-radius: 8px;
  overflow: hidden; background: #fff;
}
.ml-fber {
  flex: 1; border: none; border-right: 0.5px solid #e0dfd7;
  font-size: 11.5px; padding: 5px 6px; cursor: pointer;
  background: #fff; color: #666;
}
.ml-fber:last-child { border-right: none; }
.ml-fber:hover { background: #f0f6ff; }
.ml-fber.an { background: #3F96FE; color: #fff; font-weight: 500; }
.ml-fdatum {
  border: 0.5px solid #e0dfd7; border-radius: 7px; padding: 4px 8px;
  font-size: 11.5px; color: #666; outline: none; background: #fff;
}
.ml-fbis { font-size: 11.5px; color: #888; }
.ml-ffuss {
  display: flex; align-items: center; gap: 8px;
  border-top: 0.5px solid #C7DEF7; padding-top: 8px; flex-wrap: wrap;
}
.ml-fzus { font-size: 11px; color: #185FA5; flex: 1; line-height: 1.4;
           min-width: 140px; }
.ml-fleer {
  padding: 4px 10px; border-radius: 7px;
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
  font-size: 11.5px; cursor: pointer;
}
.ml-fleer:hover { background: #f5f4f0; }
.ml-fsuchen {
  padding: 4px 12px; border-radius: 7px;
  border: 0.5px solid #3F96FE; background: #3F96FE; color: #fff;
  font-size: 11.5px; font-weight: 500; cursor: pointer;
}
.ml-fsuchen:hover { background: #0A67EA; border-color: #0A67EA; }

/* Woher ein Treffer stammt - bei einer Suche ueber alle Ordner sonst
   nicht erkennbar. */
.ml-herkunft {
  flex-shrink: 0; font-size: 9.5px; font-weight: 600;
  background: #f0efe8; color: #888;
  border-radius: 20px; padding: 1px 7px; margin-left: 6px;
  white-space: nowrap; max-width: 110px;
  overflow: hidden; text-overflow: ellipsis;
}

/* ── Etappe 6c: Zuständigkeit ────────────────────────────────────────────── */

.ml-person {
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
  border-radius: 20px; padding: 3px 11px 3px 3px;
  font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.ml-person:hover { border-color: #3F96FE; }
.ml-person.an { background: #EBF4FF; border-color: #3F96FE; color: #185FA5;
                font-weight: 500; }
.ml-av.klein {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; flex-shrink: 0;
}
.ml-zustnotiz {
  width: 100%; padding: 6px 10px;
  border: 0.5px solid #e0dfd7; border-radius: 8px;
  font-size: 12px; color: #1a1a18; background: #fff; outline: none;
}
.ml-zustnotiz:focus { border-color: #3F96FE; }
.ml-zustoffen {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-top: 0.5px solid #C7DEF7; padding-top: 8px;
  font-size: 12px; color: #185FA5;
}
.ml-zurueck {
  margin-left: auto;
  padding: 3px 10px; border-radius: 7px;
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
  font-size: 11.5px; cursor: pointer;
}
.ml-zurueck:hover { background: #FCEBEB; border-color: #F09595;
                    color: #A32D2D; }

/* Zeilen in der Ansicht "Mir zugewiesen" - andere Spalten als im Ordner,
   weil dort andere Dinge zaehlen: von wem, worum es geht, aus welchem
   Postfach. */
.ml-zeile.zust { gap: 10px; }
.ml-zustnotiz-mini {
  font-size: 11px; color: #888; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 260px;
}

/* ── Verlauf ─────────────────────────────────────────────────────────────── */
/* Die Karten liegen auf dem grauen Grund des Lesebereichs, wie der
   Nachrichtentext darueber - nur flacher: 10px Radius statt 12, damit die
   geoeffnete Mail die Hauptsache bleibt und der Verlauf dazu gehoert. */

.ml-thread {
  flex-shrink: 0;
  margin: 0 16px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.ml-tzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ml-tlbl {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: #888;
}
.ml-tanzahl { font-size: 11px; color: #aaa; }
.ml-tinfo-btn {
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; font-weight: 600; font-style: italic;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0;
  border: 0.5px solid #e0dfd7; background: #fff; color: #aaa;
}
.ml-tinfo-btn:hover { border-color: #3F96FE; color: #3F96FE; }
.ml-tinfo-btn.an { border-color: #3F96FE; background: #EBF4FF; color: #185FA5; }

.ml-tinfo {
  background: #fff; border: 0.5px solid #C7DEF7; border-radius: 10px;
  padding: 11px 12px; display: flex; flex-direction: column; gap: 6px;
}
.ml-tinfo-kopf {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: #185FA5;
}
.ml-tinfo-x {
  margin-left: auto; border: none; background: transparent; color: #aaa;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.ml-tinfo-x:hover { color: #A32D2D; }
.ml-tinfo-p {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12px; color: #666; line-height: 1.45;
}
.ml-tpunkt {
  width: 6px; height: 6px; border-radius: 50%;
  margin-top: 6px; flex-shrink: 0;
}
.ml-tpunkt.blau { background: #3F96FE; }
.ml-tpunkt.gruen { background: #97C459; }

.ml-tkarte {
  background: #fff; border: 0.5px solid #e0dfd7; border-radius: 10px;
  cursor: pointer; overflow: hidden;
}
.ml-tkopf {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  background: #fff;
}
.ml-tkopf:hover { background: #f7f9fc; }
.ml-tkopf.auf { background: #fafaf8; }
.ml-tvon {
  font-size: 12px; font-weight: 500; color: #1a1a18;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px; flex-shrink: 0;
}
.ml-tvorschau {
  font-size: 11.5px; color: #888; flex: 1; min-width: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-tzeit { font-size: 10.5px; color: #aaa; flex-shrink: 0;
            white-space: nowrap; }
.ml-tpfeil { font-size: 11px; color: #aaa; flex-shrink: 0; }
.ml-ttext {
  padding: 11px 13px 13px; border-top: 0.5px solid #f0efe8;
  font-size: 12.5px; color: #666; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}

/* Der Aktualisieren-Knopf dreht sich, solange geholt wird. Er ersetzt die
   Rueckmeldung, die frueher darin bestand, dass die Liste kurz leer war -
   dieselbe Auskunft, ohne dass der Inhalt verschwindet. */
@keyframes ml-dreh { to { transform: rotate(360deg); } }
.ml-kbtn.dreht svg {
  animation: ml-dreh .8s linear infinite;
  transform-origin: 50% 50%;
}
.ml-kbtn.dreht { color: #185FA5; border-color: #C7DEF7; background: #EBF4FF; }

/* Wer das nicht sehen will oder soll: die Drehung faellt weg, die Farbe
   bleibt. Ohne das dreht es auch auf Rechnern, an denen Bewegung
   ausdruecklich abgeschaltet ist. */
@media (prefers-reduced-motion: reduce) {
  .ml-kbtn.dreht svg { animation: none; }
}

/* ── Fussleiste unter der Nachricht ──────────────────────────────────────── */
/* Hinweis zur Anzeige, Anhaenge und die Knoepfe, die zur Anzeige gehoeren -
   alles in einer Zeile. Vorher standen diese Dinge an drei Stellen, und
   die Anhaenge nahmen als 88px-Kacheln viel Platz fuer wenig Auskunft. */

/* Eine Zeile, nicht drei. Der Umbruch (flex-wrap) machte aus der Leiste
   einen Block, sobald ein Anhang und ein Knopf zusammenkamen - das nahm
   dem Lesebereich Platz, ohne mehr zu sagen. Wird es zu eng, schiebt
   sich die Zeile seitlich. */
.ml-fussleiste {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  margin: 0 16px 12px;
  padding: 5px 10px;
  background: #fff;
  border: 0.5px solid #e0dfd7; border-radius: 10px;
  font-size: 11px;
  overflow-x: auto;
}
/* Die Anhaenge stehen links - man fasst sie an, also gehoeren sie dorthin,
   wo der Blick anfaengt. Die Auskunft zur Anzeige rutscht nach rechts. */
.ml-fussanh {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.ml-fussrechts {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.ml-fusstext { color: #999; white-space: nowrap; }
.ml-fussbtn {
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
  border-radius: 7px; padding: 2px 9px;
  font-size: 11px; cursor: pointer; white-space: nowrap;
}
.ml-fussbtn:hover { background: #EBF4FF; border-color: #3F96FE; color: #185FA5; }

/* Halter zum Erneuern einzelner Teile ─────────────────────────────── */
/* Sie sind reine Griffe fuer das Neuzeichnen und sollen im Layout
   nicht vorkommen: display:contents laesst ihre Kinder an ihre
   Stelle treten, als gaebe es sie nicht. Ohne das saessen zwischen
   den Flex-Containern und ihren Kindern zusaetzliche Kaesten, und
   die ganze Aufteilung faenge von vorn an. */
#ml-spalte-halter, #ml-oben, #ml-lesen-oben, #ml-koerper,
#ml-lesen-unten, #ml-overlay { display: contents; }

/* Die Flaeche zwischen Klick und Ankunft der Nachricht.
   Sie haelt genau die Hoehe, die der Rahmen danach einnimmt - sonst
   springt alles darunter hoch und gleich wieder herunter. Bewusst ohne
   Balken und ohne Text: sie ist in Sekundenbruchteilen wieder weg, und
   alles darin waere ein Zucken. */
.ml-warte {
  flex: 1 0 auto; min-height: 260px;
  margin: 14px 16px;
  background: #fff;
  border: 0.5px solid #e0dfd7; border-radius: 12px;
}

/* Der Inhalt blendet ein, statt schlagartig dazustehen ─────────────────── */
/* 140 ms: lang genug, dass es kein Sprung ist, kurz genug, dass niemand
   darauf wartet. Die Klasse setzt das Skript, wenn der Rahmen geladen
   hat - oder spaetestens nach einer Sekunde. */
.ml-htmlframe { opacity: 0; transition: opacity .14s ease-out; }
.ml-htmlframe.da { opacity: 1; }

/* Wer Bewegung abgeschaltet hat, bekommt keine. Das ist eine Einstellung,
   die Menschen aus gutem Grund setzen - Schwindel, Migraene,
   Konzentration. Sichtbar muss der Rahmen trotzdem werden. */
@media (prefers-reduced-motion: reduce) {
  .ml-htmlframe { transition: none; opacity: 1; }
}

/* ── Handy-Upload im Verfassen-Dialog ───────────────────────────────────── */
/* Der Knopf sieht aus wie "Datei anhängen" daneben - beide tun dasselbe,
   sie nehmen nur einen anderen Weg. */
.mlv-ablage.klein { margin-top: 6px; }

.mlv-qr {
  margin-top: 8px; padding: 12px;
  border: 0.5px solid #e0dfd7; border-radius: 10px;
  background: #fafaf8; text-align: center;
}
/* Der Code muss vom Handy aus zwei Handbreit Entfernung lesbar sein -
   darunter wird das Scannen zur Geduldsprobe. */
.mlv-qr-bild { width: 168px; height: 168px; display: block; margin: 0 auto 8px; }
.mlv-qr-hinweis { font-size: 11.5px; color: #666; line-height: 1.5;
                  margin-bottom: 9px; }
.mlv-qr-fehler { font-size: 12px; color: #A32D2D; margin-bottom: 9px; }
.mlv-qr-btn {
  border: 0.5px solid #e0dfd7; background: #fff; color: #666;
  border-radius: 8px; padding: 5px 12px; font-size: 12px;
  cursor: pointer; margin: 0 3px;
}
.mlv-qr-btn:hover { background: #EBF4FF; border-color: #3F96FE; color: #185FA5; }
.mlv-qr-btn.primaer { background: #3F96FE; border-color: #3F96FE; color: #fff; }
.mlv-qr-btn.primaer:hover { background: #0A67EA; border-color: #0A67EA; }

/* ── Rückbezug: aus dieser Mail wurde eine Aufgabe ────────────────────────
   Dieselbe Pille wie im Chat (.msg-aufgabe), damit man sie an beiden
   Stellen wiedererkennt. */
.ml-aufgpillen {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 16px 10px;
}
.ml-aufgpille {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 0.5px solid #C7DEF7; border-radius: 20px;
  padding: 3px 11px 3px 8px;
  font-size: 11px; font-family: inherit; color: #185FA5; cursor: pointer;
}
.ml-aufgpille:hover { background: #EBF4FF; }
.ml-aufgpille.fertig { border-color: #97C459; color: #3B6D11; }
.ml-aufgpille.fertig:hover { background: #EAF3DE; }
.ml-aufgpille strong { font-weight: 600; }
.ml-aufgpille-icon {
  width: 14px; height: 14px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: #EBF4FF; color: #185FA5;
}
.ml-aufgpille.fertig .ml-aufgpille-icon { background: #EAF3DE; color: #3B6D11; }