/* Posteingang (email.js, Schalter mail.posteingang): Liste links, Lesebereich rechts. Pillen, Knöpfe und Texte aus
   styles.css; hier nur die Anordnung. Unter 680px nacheinander: die Liste, nach dem Antippen nur die Mail mit «Zurück». */
.pe-split { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; }
.pe-links { min-width: 0; }
.pe-lesen { min-width: 0; display: grid; gap: 16px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 0 4px 16px 0; }
.pe-zeile { min-height: var(--tap); gap: 4px; padding: 12px 8px; border-radius: var(--radius-s); }
.pe-zeile[aria-current="true"] { background: var(--color-primary-tint); }
.pe-zeile:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.pe-kopf { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.pe-absender { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.pe-kopf .em-meta { flex: 0 0 auto; }
.pe-marken { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.pe-lesekopf { display: flex; gap: 8px; align-items: center; }
.pe-titel { margin: 0; font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.pe-zurueck { display: none; min-height: var(--tap); flex: 0 0 auto; }
.pe-block { display: grid; gap: 8px; }
.pe-verlauf { display: grid; border: 1px solid var(--color-border); border-radius: var(--radius); }
.pe-verlauf > * + * { border-top: 1px solid var(--color-border-2); }
.pe-verlauf-zeile { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-height: var(--tap); padding: 8px 12px; cursor: pointer; }
.pe-verlauf-zeile .em-vorschau { flex: 1 1 100%; min-width: 0; }
.pe-verlauf-diese { cursor: default; background: var(--color-muted); }
.pe-verlauf-eintrag .em-text { margin: 0 12px 12px; }
.pe-anhang { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.pe-anhang-name { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.pe-anhang .btn, .pe-lesen .em-aktionen .btn { min-height: var(--tap); }
.pe-anhang .btn { margin-left: auto; }
.pe-postfach { min-height: var(--tap); max-width: 240px; }
.pe-links .filter-tab, .pe-links .seg-btn { min-height: var(--tap); }
.pe-links .filter-zeile { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
@media (max-width: 679px) {
  .pe-split { grid-template-columns: minmax(0, 1fr); }
  .pe-lesen { position: static; max-height: none; overflow: visible; padding: 0; scroll-margin-top: calc(var(--tap) * 3); }
  .pe-split:not(.pe-offen) .pe-lesen, .pe-split.pe-offen .pe-links { display: none; }
  .pe-zurueck { display: inline-flex; }
  .pe-postfach { max-width: none; width: 100%; }
}