/* ============================================================
   E-MAIL-MODUL — vollständig unter #emailOverlay gescoped.
   Keine globalen Regeln, damit die Intentio-App unberührt bleibt.
   ============================================================ */
#emailOverlay{
  position:fixed; inset:0; z-index:62; display:none; align-items:center; justify-content:center;
  background:rgba(4,7,12,.55); backdrop-filter:blur(3px);
  --bg:#f4f6fb; --surface:#ffffff; --surface2:#f7f9fc; --border:#e5e8ef;
  --text:#0f172a; --text-muted:#64748b; --blue:var(--accent,#1a9bdb); --primary:var(--accent,#1a9bdb); --primary-rgb:var(--accent-rgb,26,155,219); --primary-soft:rgba(var(--accent-rgb,26,155,219),.12); --red:#dc2626;
}
#emailOverlay[data-open="true"]{ display:flex; }
#emailOverlay *{ box-sizing:border-box; }
#emailOverlay button, #emailOverlay input, #emailOverlay select, #emailOverlay textarea{ font:inherit; }

.email-frame{ width:88%; height:90%; background:var(--surface); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 40px 100px rgba(0,0,0,.55); color:var(--text);
  font-family:'Roboto Flex','Roboto','Segoe UI',system-ui,sans-serif; font-size:14px; }
.email-topbar{ display:flex; align-items:center; gap:11px; padding:0 16px; height:54px; border-bottom:1px solid var(--ci-line,#e4eaf2); flex:0 0 auto; background:#fff; }
.email-topbar b{ font-size:15px; } .email-topbar .sp{ flex:1; }
.email-topbar .iapp-logo .material-symbols-rounded{ color:#fff; vertical-align:middle; }
.email-api{ display:none; align-items:center; gap:7px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:5px 6px 5px 11px; margin-right:10px; }
.email-api .material-symbols-rounded{ font-size:17px; color:var(--text-muted); }
.email-api input{ border:0; outline:0; background:transparent; font-size:12.5px; width:300px; color:var(--text); font-family:ui-monospace,monospace; }
.email-api button{ border:0; background:var(--blue); color:#fff; border-radius:7px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.email-api button:hover{ filter:brightness(1.06); }
.email-close{ width:40px; height:40px; border-radius:50%; border:0; background:transparent; color:var(--text-muted); cursor:pointer; display:grid; place-items:center; }
.email-close:hover{ background:var(--ci-soft,#f4f7fb); color:var(--text); }
.email-close .material-symbols-rounded{ font-size:20px; }
#emailApp{ flex:1; min-height:0; display:flex; }

/* ---- Layout: Konten | Ordner | Liste | Detail ---- */
#emailOverlay .em-layout{ position:relative; flex:1; display:grid; grid-template-columns:var(--em-c1,210px) var(--em-c2,198px) var(--em-c3,340px) 1fr; height:100%; min-height:0; background:var(--bg); }
#emailOverlay .em-resize{ position:absolute; top:0; bottom:0; width:8px; margin-left:-4px; cursor:col-resize; z-index:6; }
#emailOverlay .em-resize:hover{ background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb,26,155,219),.35)); }
#emailOverlay .em-account-bar, #emailOverlay .em-sidebar, #emailOverlay .em-list{ border-right:1px solid var(--border); background:var(--surface); min-height:0; }
#emailOverlay .em-account-bar{ overflow:auto; padding:12px 10px; display:flex; flex-direction:column; }
#emailOverlay .em-sidebar{ overflow:auto; padding:12px 10px; display:flex; flex-direction:column; gap:2px; }
#emailOverlay .em-list{ display:flex; flex-direction:column; min-width:0; position:relative; --railw:52px; }
/* Ziehgriff zum Verbreitern/Verschmälern der Emoji-/Label-Spalte */
#emailOverlay .em-rail-resizer{ position:absolute; top:0; bottom:0; right:calc(var(--railw) - 4px); width:9px; cursor:col-resize; z-index:5; }
#emailOverlay .em-rail-resizer::after{ content:""; position:absolute; left:4px; top:0; bottom:0; width:1px; background:transparent; transition:background .12s; }
#emailOverlay .em-rail-resizer:hover::after{ background:var(--blue); width:2px; left:3px; }
#emailOverlay .em-detail{ background:var(--surface); overflow:auto; display:flex; flex-direction:column; min-width:0; }

/* ---- Konten-Leiste ---- */
#emailOverlay .em-acc-vert-header{ display:flex; align-items:center; justify-content:space-between; padding:4px 6px 10px; }
#emailOverlay .em-acc-vert-title{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
#emailOverlay .em-acc-vert-addbtn{ width:24px; height:24px; border-radius:7px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); cursor:pointer; font-size:16px; line-height:1; }
#emailOverlay .em-acc-vert-addbtn:hover{ border-color:var(--blue); color:var(--blue); }
#emailOverlay .em-acc-vert-list{ display:flex; flex-direction:column; gap:4px; }
#emailOverlay .em-acc-btn{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:1px solid transparent; background:transparent; border-radius:10px; padding:7px 8px; cursor:pointer; }
#emailOverlay .em-acc-btn:hover{ background:var(--surface2); }
#emailOverlay .em-acc-btn.active{ background:var(--primary-soft); border-color:rgba(var(--accent-rgb,26,155,219),.35); }
#emailOverlay .em-acc-btn-av{ width:32px; height:32px; border-radius:9px; color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px; flex:0 0 32px; }
#emailOverlay .em-acc-btn-info{ min-width:0; }
#emailOverlay .em-acc-btn-name{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#emailOverlay .em-acc-btn-email{ font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- Ordner-Sidebar ---- */
#emailOverlay .em-compose-btn{ margin-bottom:10px; }
#emailOverlay .em-compose-btn .btn{ width:100%; justify-content:center; }
#emailOverlay .em-section-label{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin:14px 6px 6px; position:relative; padding-top:14px; }
/* Feine Trennlinie ueber jeder Abschnittsueberschrift — eingerueckt, nicht von
   Rand zu Rand. Eine durchgehende Linie zerschneidet die schmale Leiste optisch
   in Bloecke; eine kurze trennt, ohne zu zerteilen. */
#emailOverlay .em-section-label::before{
  content:""; position:absolute; top:0; left:4px; right:4px; height:1px;
  background:linear-gradient(90deg, transparent, var(--line,#d4e3f5) 12%, var(--line,#d4e3f5) 88%, transparent);
}
/* Die erste Ueberschrift steht direkt unter den Standardordnern und braucht
   keine Linie ueber sich, wenn davor nichts liegt. */
#emailOverlay .em-section-label:first-child{ padding-top:0; }
#emailOverlay .em-section-label:first-child::before{ display:none; }
#emailOverlay .em-folder{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border-radius:9px; cursor:pointer; color:var(--text); font-size:13.5px; }
#emailOverlay .em-folder:hover{ background:var(--surface2); }
#emailOverlay .em-folder.active{ background:var(--primary-soft); color:var(--blue); font-weight:600; }
#emailOverlay .em-folder svg{ vertical-align:middle; margin-right:8px; }
#emailOverlay .em-folder-count{ font-size:11px; font-weight:700; background:var(--blue); color:#fff; border-radius:999px; padding:1px 8px; min-width:22px; text-align:center; }
#emailOverlay .em-folder-count:empty{ display:none; }
#emailOverlay .em-folder.active .em-folder-count{ background:var(--blue); }

/* ---- E-Mail-Liste ---- */
#emailOverlay .em-list-header{ padding:12px; border-bottom:1px solid var(--border); flex:0 0 auto; display:flex; gap:8px; align-items:center; }
#emailOverlay .em-search{ flex:1; min-width:0; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface2); outline:0; }
/* „Ansicht"-Dropdown */
#emailOverlay .em-view-dd{ position:relative; flex:0 0 auto; }
#emailOverlay .em-view-btn{ display:flex; align-items:center; gap:6px; padding:9px 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface2); color:var(--text); font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
#emailOverlay .em-view-btn:hover{ border-color:var(--blue); color:var(--blue); }
#emailOverlay .em-view-btn .ic{ font-size:16px; line-height:1; }
#emailOverlay .em-view-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:190px; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 18px 40px -14px rgba(20,32,52,.32); padding:6px; }
#emailOverlay .em-view-menu[hidden]{ display:none; }
#emailOverlay .em-view-menu button{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 10px; border:0; border-radius:9px; background:transparent; color:var(--text); font-size:13px; cursor:pointer; }
#emailOverlay .em-view-menu button:hover{ background:var(--surface2); }
#emailOverlay .em-view-menu button.on{ background:rgba(var(--accent-rgb,26,155,219),.10); color:var(--blue); font-weight:700; }
#emailOverlay .em-view-menu button .vic{ width:18px; text-align:center; flex:0 0 auto; opacity:.8; }
#emailOverlay .em-view-menu button .vsub{ display:block; font-size:11px; color:var(--text-muted); font-weight:400; margin-top:1px; }
#emailOverlay .em-view-menu .vtxt{ min-width:0; }
#emailOverlay .em-search:focus{ border-color:var(--blue); background:var(--panel); }
#emailOverlay .em-list-body{ padding:8px; overflow:auto; flex:1; min-height:0; }
/* ---- Mail-Zeile: gemeinsame Bausteine, Layout je Ansicht (.emv-1/2/6/8) ---- */
#emailOverlay .em-item{ width:100%; text-align:left; background:transparent; border:0; margin:0; cursor:pointer; position:relative; transition:background .12s,box-shadow .14s,transform .14s,border-color .14s; }
/* Kontrollkaestchen und Stern liegen in EINER Zelle — die Ruhige Zeile ist ein
   Raster mit fester Spaltenzahl, ein eigenes Feld fuer den Stern haette sie
   gesprengt. */
/* Vier Knoepfe: Haken, Stern, Auge, Plus. Die Spalte ist so breit, dass alle
   vier immer hineinpassen - auch wenn zwei davon erst beim Ueberfahren
   sichtbar werden. Sonst wanderte die Absenderspalte bei jeder Mausbewegung. */
#emailOverlay .em-item-check{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }

/* Kaestchen im Ton der grossen Mailprogramme: graue Kontur statt gefuellter
   Systemvorgabe. appearance:none schaltet die Betriebssystem-Darstellung ab,
   sonst laesst sich die Farbe nicht setzen. */
/* Kaestchen UND Stern als Schriftzeichen derselben Familie.
   Vorher war das Kaestchen ein CSS-Rahmen und der Stern ein Zeichen — zwei
   verschiedene Techniken, die sich in Strichstaerke und Dichte nie treffen.
   Als Zeichen teilen sie Groesse, Gewicht (wght) und Farbe und wirken damit
   aus einem Guss. Die drei Werte stehen genau einmal: */
#emailOverlay .em-list{ --em-mark:#c4c7ca; --em-mark-hover:#9aa0a6; --em-mark-size:18px; --em-mark-wght:300; }

#emailOverlay .em-item-check input{
  appearance:none; -webkit-appearance:none; margin:0; padding:0; cursor:pointer;
  width:20px; height:20px; border:0; background:transparent; flex:0 0 auto;
  display:grid; place-items:center; color:var(--em-mark); transition:color .12s;
}
#emailOverlay .em-item-check input::before{
  font-family:'Material Symbols Rounded'; content:"check_box_outline_blank";
  font-size:var(--em-mark-size); line-height:1;
  font-variation-settings:"FILL" 0, "wght" var(--em-mark-wght), "opsz" 24;
  /* OHNE Ligaturen stuende hier das WORT "check_box_outline_blank" — die
     Symbolschrift setzt den Namen erst darueber in ein Zeichen um. */
  -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';
  font-weight:normal; font-style:normal; letter-spacing:normal;
  text-transform:none; white-space:nowrap; word-wrap:normal; direction:ltr;
  -webkit-font-smoothing:antialiased;
}
#emailOverlay .em-item-check input:hover{ color:var(--em-mark-hover); }
#emailOverlay .em-item-check input:checked{ color:var(--blue); }
#emailOverlay .em-item-check input:checked::before{
  content:"check_box"; font-variation-settings:"FILL" 1, "wght" var(--em-mark-wght), "opsz" 24;
}

/* Stern — dieselben drei Werte wie das Kaestchen, damit beide ein Satz sind. */
#emailOverlay .em-item-star{
  display:grid; place-items:center; flex:0 0 auto;
  width:20px; height:20px; padding:0; border:0; background:transparent;
  cursor:pointer; color:var(--em-mark); transition:color .12s;
}
#emailOverlay .em-item-star .material-symbols-rounded{
  font-size:var(--em-mark-size); line-height:1;
  font-variation-settings:"FILL" 0, "wght" var(--em-mark-wght), "opsz" 24;
}
#emailOverlay .em-item-star:hover{ color:var(--em-mark-hover); }
/* Auge (Vorschau) und Plus (Emoji/Label) stehen neben dem Stern - immer
   sichtbar wie er, im selben Grau. Ein Knopf, der erst beim Ueberfahren
   auftaucht, ist fuer den, der ihn nicht kennt, gar nicht da. */
#emailOverlay .em-item-ic{
  display:grid; place-items:center; flex:0 0 auto;
  width:20px; height:20px; padding:0; border:0; background:transparent;
  cursor:pointer; color:var(--em-mark); transition:color .12s;
}
#emailOverlay .em-item-ic .material-symbols-rounded{
  font-size:var(--em-mark-size); line-height:1;
  font-variation-settings:"FILL" 0, "wght" var(--em-mark-wght), "opsz" 24;
}
#emailOverlay .em-item-ic:hover{ color:var(--blue); }
#emailOverlay .em-item-star.on{ color:#f0a500; }
#emailOverlay .em-item-star.on .material-symbols-rounded{
  font-variation-settings:"FILL" 1, "wght" var(--em-mark-wght), "opsz" 24;
}
/* Absenderspalte — feste Breite wie bei den grossen Mailprogrammen, damit die
   Betreffzeilen untereinander auf gleicher Hoehe beginnen und das Auge eine
   Kante hat. Sie schrumpft mit der Leiste (clamp), reisst also nicht. */
#emailOverlay .em-item-from{
  flex:0 0 clamp(96px, 20%, 190px); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13.5px; color:var(--text); opacity:.86;
}
#emailOverlay .em-item.unread .em-item-from{ font-weight:700; opacity:1; }
#emailOverlay .em-item-main{ min-width:0; flex:1; display:flex; flex-direction:column; gap:5px; }
#emailOverlay .em-item-subrow{ display:flex; align-items:center; gap:6px; min-width:0; }
#emailOverlay .em-item-subject{ font-size:13.5px; font-weight:400; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; margin:0; }
#emailOverlay .em-item.unread .em-item-subject{ font-weight:600; color:var(--text); }
#emailOverlay .em-item-preview{ display:none; font-size:12px; color:var(--text-muted); line-height:1.5; }
#emailOverlay .em-item-labels{ display:flex; flex-wrap:wrap; gap:4px; }
#emailOverlay .em-lbl{ font-size:10.5px; font-weight:700; color:#fff; background:var(--kc,#c62828); border-radius:999px; padding:2px 8px; line-height:1.45; white-space:nowrap; }
#emailOverlay .em-item-time{ font-size:11.5px; color:#94a3b8; white-space:nowrap; flex:0 0 auto; }
#emailOverlay .em-item.unread .em-item-time{ color:var(--blue); font-weight:500; }
#emailOverlay .em-item-cat{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
#emailOverlay .em-item-flag{ font-size:11px; color:#f0a500; flex:0 0 auto; }
#emailOverlay .em-item-stripe{ display:none; }
#emailOverlay .em-item-emojis{ display:flex; flex-wrap:wrap; gap:1px; font-size:13px; line-height:1.15; min-width:0; }
/* Die rechte Spalte traegt Labels und Emojis. Zwei Reihen sind zu sehen; wer
   mehr vergeben hat, sieht den Rest beim Ueberfahren der Zeile - dann legt
   sich die Spalte als Kaertchen ueber die Zeile und wird so breit, wie sie
   braucht. Ohne das waere entweder die Liste unruhig oder die Labels weg. */
#emailOverlay .em-item-rail{
  display:flex; flex-wrap:wrap; align-items:center; align-content:center; gap:4px;
  flex:0 0 auto; max-height:26px; overflow:hidden; position:relative;
  flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center;
  transition:box-shadow .12s, background .12s;   /* keine Rundung: mit nur linker Kante wuerde daraus ein Bogen */
}
#emailOverlay .em-item-rail .em-item-labels{ display:contents; }   /* Label und Zahl sind eigene Kacheln */
#emailOverlay .em-item-rail .em-lbl{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* Die Zahl der weiteren Labels - so breit wie ein Label, aber still. */
#emailOverlay .em-lbl-mehr{ font-size:10px; font-weight:800; color:var(--text-muted);
  background:#eef2f8; border-radius:999px; padding:2px 7px; line-height:1.5; white-space:nowrap; }
/* Die Blase mit allen Labels: am Fenster befestigt, waechst nach rechts und
   liegt ueber Liste und Lesebereich. In der Liste verschiebt sich dadurch
   nichts - das war die Bedingung. */
.em-lbl-blase{ position:fixed; z-index:9300; display:none; align-items:center; gap:5px; flex-wrap:wrap;
  max-width:min(520px, 46vw); padding:8px 10px; border-radius:12px; background:#fff;
  box-shadow:0 18px 40px -16px rgba(9,20,44,.55), inset 0 0 0 1px #e4eaf2; pointer-events:none; }
.em-lbl-blase.auf{ display:flex; animation:em-lbl-auf .14s ease-out; }
.em-lbl-blase .em-lbl{ font-size:11px; font-weight:700; color:#fff; background:var(--kc,#c62828);
  border-radius:999px; padding:3px 9px; line-height:1.45; white-space:nowrap; }
@keyframes em-lbl-auf{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .em-lbl-blase.auf{ animation:none; } }
/* Mehr als zwei Reihen? Dann sagt ein feiner Streifen unten, dass etwas fehlt. */

/* Ansicht 1 — Ruhige Zeile (rahmenlos, durchgehende Rail-Spalte) */
/* Mit Absenderspalte hat die Zeile FUENF Spalten. Ohne diese Regel landet der
   Absender im Raster fuer vier — die rechte Spalte samt Trennstrich und "+"
   rutscht dann in eine zweite Zeile, und die Zeile wird doppelt hoch. */
#emailOverlay .emv-1.mit-absender .em-item,
#emailOverlay .emv-1.mit-absender .em-group-h{ grid-template-columns:var(--em-akt,88px) clamp(96px,20%,190px) 1fr auto var(--railw,52px); }
#emailOverlay .emv-1 .em-item{ display:grid; grid-template-columns:var(--em-akt,88px) 1fr auto var(--railw,52px); gap:9px; align-items:center; border-bottom:1px solid var(--border); padding:12px 4px 12px 6px; }
#emailOverlay .emv-1 .em-item:hover{ background:var(--surface2); }
#emailOverlay .emv-1 .em-item::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px; background:transparent; transition:.14s; }
#emailOverlay .emv-1 .em-item:hover::before{ background:#dbe2ec; }
#emailOverlay .emv-1 .em-item.active,#emailOverlay .emv-1 .em-item.selected{ background:#f0f8fd; }
#emailOverlay .emv-1 .em-item.active::before,#emailOverlay .emv-1 .em-item.selected::before{ background:var(--blue); }
/* Ruhige Zeile = EINE Zeile. Betreff und Vorschau stehen nebeneinander, nicht
   uebereinander; alles sitzt mittig auf einer Linie. */
#emailOverlay .emv-1 .em-item-main{ flex-direction:row; align-items:center; gap:7px; }
#emailOverlay .emv-1 .em-item-subrow{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Die Vorschau ist als Grundregel ausgeblendet — hier wird sie gebraucht. */
#emailOverlay .emv-1 .em-item-preview{
  display:block; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4;
}
#emailOverlay .emv-1 .em-item-preview::before{ content:"– "; }
#emailOverlay .emv-1 .em-item-labels{ flex:0 0 auto; }
#emailOverlay .em-item-main .em-item-labels{ display:none; }   /* Labels stehen jetzt rechts */

/* Farbton wie in den grossen Mailprogrammen: gelesene Zeilen durchweg gedaempft,
   nur ungelesene stehen kraeftig. Die Vorschau bleibt immer das leiseste
   Element — sie ist Beiwerk, nicht Inhalt. */
#emailOverlay .emv-1 .em-item-from,
#emailOverlay .emv-1 .em-item-subject{ color:#5f6368; font-weight:400; opacity:1; }
#emailOverlay .emv-1 .em-item-preview{ color:#80868b; font-weight:400; }
#emailOverlay .emv-1 .em-item.unread .em-item-from,
#emailOverlay .emv-1 .em-item.unread .em-item-subject{ color:#202124; font-weight:700; }
#emailOverlay .emv-1 .em-item-time{ color:#5f6368; }
#emailOverlay .emv-1 .em-item.unread .em-item-time{ color:#202124; font-weight:700; }
#emailOverlay .emv-1 .em-item-rail{ padding-left:9px; border-left:1px solid var(--border); align-self:stretch; min-width:0; }

/* Ansichten 2/6/8 — Karten */
#emailOverlay .emv-2 .em-item,#emailOverlay .emv-6 .em-item,#emailOverlay .emv-8 .em-item{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:12px 13px; margin-bottom:8px; }
#emailOverlay .emv-2 .em-item:hover,#emailOverlay .emv-6 .em-item:hover,#emailOverlay .emv-8 .em-item:hover{ box-shadow:0 10px 22px -14px rgba(15,23,42,.42); }
#emailOverlay .emv-2 .em-item.active,#emailOverlay .emv-2 .em-item.selected,#emailOverlay .emv-6 .em-item.active,#emailOverlay .emv-6 .em-item.selected,#emailOverlay .emv-8 .em-item.active,#emailOverlay .emv-8 .em-item.selected{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset; }
#emailOverlay .emv-2 .em-item-rail,#emailOverlay .emv-6 .em-item-rail,#emailOverlay .emv-8 .em-item-rail{ align-self:center; max-width:96px; }

/* Ansicht 6 — Farbstreifen = Kategorie */
#emailOverlay .emv-6 .em-item{ overflow:hidden; padding-left:17px; }
#emailOverlay .emv-6 .em-item-stripe{ display:block; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--sc,#cbd5e1); }
#emailOverlay .emv-6 .em-item:not(.unread) .em-item-stripe{ opacity:.45; }
#emailOverlay .emv-6 .em-item-cat{ display:none; }

/* Ansicht 8 — Vorschau-Karte (2 Zeilen Text) */
#emailOverlay .emv-8 .em-item{ align-items:flex-start; padding:14px 15px; }
#emailOverlay .emv-8 .em-item-subject{ font-weight:700; color:#1e293b; }
#emailOverlay .emv-8 .em-item.unread .em-item-subject{ font-weight:800; color:#0f172a; }
#emailOverlay .emv-8 .em-item-preview{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#emailOverlay .emv-8 .em-item-time{ padding-top:1px; }
/* Mehrfachauswahl-Leiste */
#emailOverlay .em-bulk{ position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:6px; padding:8px 10px; margin-bottom:8px; background:var(--blue); color:#fff; border-radius:10px; box-shadow:0 4px 12px rgba(20,32,52,.18); }
#emailOverlay .em-bulk-n{ font-size:12.5px; font-weight:700; }
#emailOverlay .em-bulk-b{ width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.18); color:#fff; font-size:14px; cursor:pointer; display:grid; place-items:center; border:0; }
#emailOverlay .em-bulk-b:hover{ background:rgba(255,255,255,.32); }
#emailOverlay .em-bulk-b.danger:hover{ background:#e5484d; }
/* Absender-Gruppierung — gleicher Zeilen-Stil wie die Mails, nur mit Dropdown-Symbol links */
#emailOverlay .em-group-h{ display:grid; grid-template-columns:var(--em-akt,88px) 1fr auto auto; gap:9px; align-items:center; padding:14px 4px 14px 6px; margin:0; border-bottom:1px solid var(--border); border-radius:0; cursor:pointer; user-select:none; position:relative; transition:background .12s; }
#emailOverlay .em-group-h:hover{ background:var(--surface2); }
#emailOverlay .em-group-rail{ display:flex; align-items:center; justify-content:flex-end; flex:0 0 auto; }
#emailOverlay .emv-1 .em-group-h{ grid-template-columns:var(--em-akt,88px) 1fr auto var(--railw,52px); }
#emailOverlay .emv-1 .em-group-rail{ justify-content:center; align-self:stretch; padding-left:9px; border-left:1px solid var(--border); }
#emailOverlay .emv-2 .em-group-h,#emailOverlay .emv-6 .em-group-h,#emailOverlay .emv-8 .em-group-h{ padding:12px 6px 8px; }
#emailOverlay .em-group-caret{ justify-self:center; font-size:11px; color:var(--text-muted); transition:transform .15s ease; }
#emailOverlay .em-group-h.collapsed .em-group-caret{ transform:rotate(-90deg); }
#emailOverlay .em-group-main{ display:flex; align-items:baseline; gap:8px; min-width:0; }
#emailOverlay .em-group-name{ flex:0 1 auto; font-size:13.5px; font-weight:400; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#emailOverlay .em-group-h.unread .em-group-name{ font-weight:600; color:var(--text); }
#emailOverlay .em-group-peek{ flex:1; min-width:0; font-size:12px; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#emailOverlay .em-group-meta{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
#emailOverlay .em-group-c{ font-size:11.5px; font-weight:600; color:#94a3b8; font-variant-numeric:tabular-nums; letter-spacing:.2px; }
#emailOverlay .em-group-unread{ min-width:18px; text-align:center; font-size:10.5px; font-weight:700; color:#fff; background:var(--blue); border-radius:999px; padding:2px 6px; }
/* Aufblend-Kurve. Kam vom Mail-Kontextmenue, das inzwischen ins gemeinsame
   Rechtsklickmenue gewandert ist; der Label-Editor unten nutzt sie weiter. */
@keyframes emcmpop{ from{opacity:0;transform:scale(.97)} to{opacity:1;transform:none} }

/* ---- Emoji-/Label-Editor (Popover am document.body) ---- */
.em-tagpop{ position:fixed; z-index:9100; width:288px; background:#fff; border:1px solid #e5e8ef; border-radius:14px;
  box-shadow:0 20px 48px rgba(20,32,52,.28); padding:12px; color:#0f172a; font-family:inherit; font-size:13px; animation:emcmpop .12s ease; }
.em-tagpop .em-tag-sec{ font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#94a3b8; margin:2px 2px 8px; }
.em-tagpop .em-tag-sec:not(:first-child){ margin-top:13px; }
.em-tagpop .em-emoji-row{ display:flex; flex-wrap:wrap; gap:4px; }
.em-tagpop .em-emoji-row button{ width:34px; height:34px; border-radius:9px; border:1px solid transparent; background:#f4f6fb; font-size:17px; line-height:1; cursor:pointer; padding:0; }
.em-tagpop .em-emoji-row button:hover{ background:#e9eef6; }
.em-tagpop .em-emoji-row button.on{ border-color:var(--accent-dark, var(--accent,#1a9bdb)); background:rgba(var(--accent-rgb,26,155,219),.10); }
.em-tagpop .em-kw-input-row{ display:flex; gap:8px; align-items:center; }
.em-tagpop .em-kw-input{ flex:1; min-width:0; padding:8px 11px; border:1px solid #e5e8ef; border-radius:9px; outline:0; font-size:13px; font-family:inherit; color:#0f172a; }
.em-tagpop .em-kw-input:focus{ border-color:var(--accent-dark, var(--accent,#1a9bdb)); }
.em-tagpop .em-kw-colorbtn{ width:36px; height:36px; border-radius:9px; border:1px solid #e5e8ef; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0; }
.em-tagpop .em-kw-colordot{ width:18px; height:18px; border-radius:50%; }
.em-tagpop .em-kw-colors{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.em-tagpop .em-kw-colors[hidden]{ display:none; }
.em-tagpop .em-kw-sw{ width:22px; height:22px; border-radius:50%; cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1px #e5e8ef; }
.em-tagpop .em-kw-sw.on{ box-shadow:0 0 0 2px var(--accent,#1a9bdb); }
.em-tagpop .em-kw-presets{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
/* Eine Zeile je Label: Kaestchen, dann das Label so, wie es spaeter in der
   Mailzeile steht. Klicken schaltet an oder aus, das X loescht es ganz. */
.em-tagpop .em-kw-liste{ display:flex; flex-direction:column; margin-top:4px; }
.em-tagpop .em-kw-zeile{ display:flex; align-items:center; gap:10px; padding:6px 4px; border-radius:9px; cursor:pointer; }
.em-tagpop .em-kw-zeile:hover{ background:#f4f8fc; }
.em-tagpop .em-kw-box{ width:17px; height:17px; border-radius:5px; flex:0 0 auto; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--kc,#c62828); color:#fff; font-size:11px; line-height:1; }
.em-tagpop .em-kw-zeile.on .em-kw-box{ background:var(--kc,#c62828); }
.em-tagpop .em-kw-zeile .em-lbl{ flex:1; min-width:0; font-size:10.5px; font-weight:700; color:#fff;
  background:var(--kc,#c62828); border-radius:999px; padding:2px 9px; align-self:center;
  max-width:max-content; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.em-tagpop .em-kw-zeile .pdel{ font-style:normal; font-size:11px; color:var(--text-muted,#6b7f95);
  opacity:0; cursor:pointer; padding:0 2px; }
.em-tagpop .em-kw-zeile:hover .pdel{ opacity:.7; }
.em-tagpop .em-kw-zeile .pdel:hover{ opacity:1; }

/* Alt (zwei Reihen) - bleibt fuer den Fall, dass noch etwas darauf zeigt. */
.em-tagpop .em-kw-preset{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  color:var(--kc,#c62828); background:transparent; box-shadow:inset 0 0 0 1.5px var(--kc,#c62828);
  border-radius:999px; padding:3px 7px 3px 10px; cursor:pointer; }
.em-tagpop .em-kw-preset:hover{ background:color-mix(in srgb, var(--kc,#c62828) 12%, transparent); }
.em-tagpop .em-kw-preset.on{ color:#fff; background:var(--kc,#c62828); }
.em-tagpop .em-kw-preset .pdel{ font-style:normal; font-size:10px; opacity:.75; cursor:pointer; }
.em-tagpop .em-kw-preset .pdel:hover{ opacity:1; }
.em-tagpop .em-kw-set{ display:flex; flex-wrap:wrap; gap:6px; }
/* Ueberschrift ueber jeder der beiden Reihen - ohne sie sahen sie aus wie
   dieselben Labels, doppelt eingefuegt. */
.em-tagpop .em-tag-unter{ font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#8598ab; margin:12px 0 5px; }
.em-tagpop .em-kw-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:#fff; background:var(--kc,#c62828); border-radius:999px; padding:3px 7px 3px 10px; }
.em-tagpop .em-kw-pill .x{ cursor:pointer; opacity:.8; font-size:10px; } .em-tagpop .em-kw-pill .x:hover{ opacity:1; }
.em-tagpop .em-kw-hint{ font-size:11px; color:#94a3b8; margin-top:10px; line-height:1.45; }

/* ---- Detail ---- */
#emailOverlay .em-detail-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--text-muted); padding:40px; text-align:center; }
#emailOverlay .em-detail-content{ flex:1; min-height:0; flex-direction:row; overflow:hidden; }
#emailOverlay .em-detail-main{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:auto; padding:24px 28px; }
#emailOverlay .em-ctx{ width:250px; flex:0 0 250px; border-left:1px solid var(--border); background:var(--surface2); padding:16px; overflow:auto; }
#emailOverlay .em-ctx-h{ font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:var(--text-muted); font-weight:800; margin:16px 0 8px; }
#emailOverlay .em-ctx-h:first-child{ margin-top:0; }
#emailOverlay .em-ctx-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
#emailOverlay .em-ctx-row{ display:flex; align-items:center; gap:9px; padding:7px 0; font-size:12.5px; }
#emailOverlay .em-ctx-ic{ flex:0 0 auto; }
#emailOverlay .em-ctx-t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
#emailOverlay .em-ctx-when{ margin-left:auto; color:var(--text-muted); font-size:11px; flex:0 0 auto; }
#emailOverlay .em-detail-header{ border-bottom:1px solid var(--border); padding-bottom:18px; margin-bottom:18px; }
#emailOverlay .em-detail-subject{ font-size:21px; font-weight:800; margin-bottom:14px; }
#emailOverlay .em-detail-meta{ display:flex; gap:12px; align-items:flex-start; }
#emailOverlay .em-avatar{ width:42px; height:42px; border-radius:12px; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:700; flex:0 0 42px; }
#emailOverlay .em-detail-from{ font-weight:700; }
#emailOverlay .em-detail-addr{ font-size:12.5px; color:var(--text-muted); }
#emailOverlay .em-detail-date{ margin-left:auto; font-size:12.5px; color:var(--text-muted); white-space:nowrap; }
#emailOverlay .em-detail-body{ line-height:1.6; color:var(--text); }
#emailOverlay .em-detail-body img{ max-width:100%; height:auto; }
/* Mail-Inhalt markieren & kopieren (hebt das globale user-select:none auf) */
#emailOverlay .em-detail-main, #emailOverlay .em-detail-subject, #emailOverlay .em-detail-from,
#emailOverlay .em-detail-addr, #emailOverlay .em-detail-date, #emailOverlay .em-detail-body,
#emailOverlay .em-detail-body *{ -webkit-user-select:text; user-select:text; cursor:auto; }
#emailOverlay .em-detail-footer, #emailOverlay .em-detail-footer *{ -webkit-user-select:none; user-select:none; cursor:pointer; }
#emailOverlay .em-detail-footer{ display:flex; gap:8px; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); }
#emailOverlay .em-attachments{ margin-top:18px; border-top:1px solid var(--border); padding-top:14px; }
#emailOverlay .em-attachments-label{ font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:8px; }
#emailOverlay .em-attachment-item{ display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:10px; padding:8px 12px; margin-bottom:6px; background:var(--surface2); }
#emailOverlay .em-attachment-name{ font-size:13px; font-weight:600; } #emailOverlay .em-attachment-size{ font-size:11px; color:var(--text-muted); }

/* ---- Buttons ---- */
#emailOverlay .btn{ display:inline-flex; align-items:center; gap:6px; border:0; border-radius:10px; padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer; }
#emailOverlay .btn-primary{ background:var(--blue); color:#fff; } #emailOverlay .btn-primary:hover{ filter:brightness(1.06); }
#emailOverlay .btn-outline{ background:var(--surface); border:1px solid var(--border); color:var(--text); } #emailOverlay .btn-outline:hover{ border-color:var(--blue); color:var(--blue); }
#emailOverlay .btn-sm{ padding:7px 11px; font-size:12.5px; } #emailOverlay .btn-xs{ padding:4px 9px; font-size:11.5px; border-radius:8px; }

/* ---- Modals ---- */
#emailOverlay .modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; padding:24px; z-index:100; }
#emailOverlay .modal-overlay.open{ display:flex; }
#emailOverlay .modal{ width:min(760px,100%); max-height:90vh; overflow:auto; background:var(--surface); border-radius:18px; box-shadow:0 24px 70px rgba(15,23,42,.28); display:flex; flex-direction:column; }
#emailOverlay .modal.em-settings-modal{ width:min(912px,100%); }  /* Einstellungen 20% breiter (760 → 912) */
#emailOverlay .modal-header{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); flex:0 0 auto; }
#emailOverlay .modal-title{ font-size:16px; font-weight:700; }
#emailOverlay .modal-close{ width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); cursor:pointer; }
#emailOverlay .modal-close:hover{ color:var(--text); border-color:var(--blue); }
#emailOverlay .modal-body{ padding:16px 20px; overflow:auto; }
#emailOverlay .modal-footer{ display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--border); flex:0 0 auto; }

/* ---- Formulare ---- */
#emailOverlay .form-group{ margin-bottom:14px; }
#emailOverlay .form-label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--text); }
#emailOverlay .form-control{ width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--panel); outline:0; }
#emailOverlay .form-control:focus{ border-color:var(--blue); }

/* ---- Compose ---- */
#emailOverlay .em-compose{ width:min(720px,100%); }
#emailOverlay .em-compose-body{ padding:16px 20px 4px; display:flex; flex-direction:column; gap:10px; }
#emailOverlay .em-compose-field{ display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); padding-bottom:8px; }
#emailOverlay .em-compose-label{ width:52px; flex:0 0 52px; font-size:12.5px; color:var(--text-muted); }
#emailOverlay .em-compose-input{ flex:1; border:0; outline:0; background:transparent; padding:4px 0; font-size:13.5px; }
#emailOverlay .rte-toolbar{ display:flex; align-items:center; gap:4px; padding:8px 20px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:8px; }
#emailOverlay .rte-btn{ width:30px; height:28px; border:1px solid transparent; background:transparent; border-radius:7px; cursor:pointer; font-weight:700; color:var(--text); }
#emailOverlay .rte-btn:hover{ background:var(--surface2); border-color:var(--border); }
#emailOverlay .rte-divider{ width:1px; height:18px; background:var(--border); margin:0 4px; }
#emailOverlay .em-compose-editor{ min-height:200px; max-height:340px; overflow:auto; padding:16px 20px; outline:0; line-height:1.55; }
#emailOverlay .em-compose-editor:empty:before{ content:attr(data-placeholder); color:var(--text-muted); }

/* ---- Einstellungen-Modal ---- */
#emailOverlay .em-settings-modal{ width:min(860px,100%); height:min(600px,88vh); }
#emailOverlay .em-settings-layout{ flex:1; min-height:0; display:grid; grid-template-columns:200px 1fr; }
#emailOverlay .em-settings-nav{ border-right:1px solid var(--border); padding:12px; background:var(--surface2); overflow:auto; }
#emailOverlay .em-settings-nav-item{ padding:10px 12px; border-radius:9px; cursor:pointer; font-size:13.5px; color:var(--text); margin-bottom:3px; }
#emailOverlay .em-settings-nav-item:hover{ background:var(--panel); }
#emailOverlay .em-settings-nav-item.active{ background:var(--primary-soft); color:var(--blue); font-weight:600; }
#emailOverlay .em-settings-panel{ padding:20px 24px; overflow:auto; }
#emailOverlay .em-settings-section{ border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-top:16px; }
#emailOverlay .em-settings-section-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:8px; }
#emailOverlay .em-setting-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--border); }
#emailOverlay .em-setting-row:last-child{ border-bottom:0; }
#emailOverlay .em-setting-label{ font-size:13.5px; font-weight:600; } #emailOverlay .em-setting-desc{ font-size:12px; color:var(--text-muted); margin-top:2px; }
#emailOverlay .em-toggle{ width:42px; height:24px; border-radius:20px; border:0; background:#cbd5e1; position:relative; cursor:pointer; flex:0 0 42px; transition:background .15s; }
#emailOverlay .em-toggle:before{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--panel); transition:left .15s; }
#emailOverlay .em-toggle.on{ background:var(--blue); } #emailOverlay .em-toggle.on:before{ left:21px; }
#emailOverlay .em-account-item{ display:flex; align-items:center; align-content:center; flex-wrap:wrap; gap:8px 12px; border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-top:10px; background:var(--surface); min-height:116px; box-sizing:border-box; }
#emailOverlay .em-account-avatar{ width:38px; height:38px; border-radius:10px; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:700; flex:0 0 38px; }
#emailOverlay .em-account-info{ flex:1; min-width:0; } #emailOverlay .em-account-name{ font-weight:700; display:flex; align-items:center; gap:8px; } #emailOverlay .em-account-addr{ font-size:12.5px; color:var(--text-muted); } #emailOverlay .em-account-type{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
#emailOverlay .em-badge-standard{ font-size:10px; font-weight:700; background:var(--primary-soft); color:var(--blue); border-radius:20px; padding:1px 8px; }
#emailOverlay .em-badge-provider{ font-size:10px; font-weight:700; border-radius:999px; padding:2px 9px; }
#emailOverlay .em-badge-provider.google{ color:#1a73e8; background:rgba(26,115,232,.12); }
#emailOverlay .em-badge-provider.microsoft{ color:#0067b8; background:rgba(0,103,184,.12); }

/* ---- Konto-Test: Live-Status + bleibender Aktiv-Zustand ---- */
#emailOverlay .em-account-avatar{ position:relative; }
#emailOverlay .em-av-dot{ position:absolute; right:-3px; bottom:-3px; width:13px; height:13px; border-radius:50%; background:#16a34a; border:2.5px solid var(--surface); transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
#emailOverlay .em-av-dot.on{ transform:scale(1); }
#emailOverlay .em-av-dot.err{ background:var(--red); }
#emailOverlay .em-status-chip{ font-size:10px; font-weight:700; border-radius:999px; padding:2px 8px; letter-spacing:.2px; white-space:nowrap; }
#emailOverlay .em-status-chip.ok{ color:#15803d; background:rgba(22,163,74,.12); }
#emailOverlay .em-status-chip.err{ color:var(--red); background:rgba(220,38,38,.10); }
#emailOverlay .em-account-type.testing{ color:var(--primary); display:flex; align-items:center; gap:6px; }
#emailOverlay .em-account-type.ok{ color:#16a34a; font-weight:600; }
#emailOverlay .em-account-type.err{ color:var(--red); font-weight:600; }
#emailOverlay .em-account-type svg{ vertical-align:-2px; }
#emailOverlay .em-spin{ width:12px; height:12px; border-radius:50%; border:2px solid rgba(var(--accent-rgb,26,155,219),.28); border-top-color:var(--primary); animation:emspin .7s linear infinite; display:inline-block; flex:none; }
@keyframes emspin{ to{ transform:rotate(360deg); } }

/* ---- Material-Design-3-Aktionsbuttons ---- */
#emailOverlay .em-account-actions{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; justify-content:flex-end; flex:0 0 100%; width:100%; }
#emailOverlay .em-mbtn{ position:relative; overflow:hidden; border:none; background:transparent; cursor:pointer; height:34px; padding:0 13px; border-radius:18px; font:inherit; font-size:12.5px; font-weight:600; letter-spacing:.1px; display:inline-flex; align-items:center; gap:6px; color:var(--primary); transition:box-shadow .18s; -webkit-tap-highlight-color:transparent; white-space:nowrap; }
#emailOverlay .em-mbtn svg{ width:15px; height:15px; }
#emailOverlay .em-mbtn::before{ content:''; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .15s; border-radius:inherit; }
#emailOverlay .em-mbtn:hover::before{ opacity:.09; }
#emailOverlay .em-mbtn:active::before{ opacity:.14; }
#emailOverlay .em-mbtn.muted{ color:var(--text-muted); }
#emailOverlay .em-mbtn.danger{ color:var(--red); }
#emailOverlay .em-mbtn.active-btn{ color:#16a34a; }
#emailOverlay .em-mbtn.err-btn{ color:var(--red); }
#emailOverlay .em-mbtn[disabled]{ opacity:.5; cursor:default; }
#emailOverlay .em-mbtn[disabled]::before{ opacity:0; }
#emailOverlay .em-ripple{ position:absolute; border-radius:50%; background:currentColor; opacity:.26; transform:scale(0); animation:emrip .55s ease-out; pointer-events:none; }
@keyframes emrip{ to{ transform:scale(2.6); opacity:0; } }

/* ---- „Mit Google/Microsoft anmelden" ---- */
#emailOverlay .ema-oauth{ display:flex; flex-direction:column; gap:9px; }
#emailOverlay .ema-signin{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:44px; border-radius:10px; border:1px solid var(--border); background:var(--panel); color:var(--text); font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:box-shadow .15s, border-color .15s; }
#emailOverlay .ema-signin:hover{ box-shadow:0 2px 10px rgba(16,24,40,.13); border-color:#cbd5e1; }
#emailOverlay .ema-signin svg{ flex:none; }
#emailOverlay .ema-signin-hint{ font-size:11.5px; color:var(--text-muted); text-align:center; margin-top:2px; }
#emailOverlay .ema-or{ display:flex; align-items:center; gap:12px; margin:15px 0 13px; color:var(--text-muted); font-size:11.5px; }
#emailOverlay .ema-or span{ flex:none; }
#emailOverlay .ema-or::before, #emailOverlay .ema-or::after{ content:''; flex:1; height:1px; background:var(--border); }
#emailOverlay .em-sig-card, #emailOverlay .em-rule-card{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-top:10px; background:var(--surface); }
#emailOverlay .em-sig-card-header{ display:flex; align-items:center; justify-content:space-between; font-weight:700; }
#emailOverlay .em-sig-card-body{ font-size:12.5px; color:var(--text-muted); margin-top:8px; white-space:pre-wrap; }
#emailOverlay .em-rule-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#emailOverlay .em-rule-name{ font-weight:700; display:flex; align-items:center; gap:8px; } #emailOverlay .em-rule-active{ font-size:10px; font-weight:700; background:#dcfce7; color:#16a34a; border-radius:20px; padding:1px 8px; } #emailOverlay .em-rule-cond{ font-size:12px; color:var(--text-muted); margin-top:3px; }

/* ---- Toast ---- */
#emailOverlay .toast{ position:fixed; right:22px; bottom:22px; background:#0f172a; color:#fff; padding:12px 16px; border-radius:10px; box-shadow:0 12px 32px rgba(15,23,42,.28); display:none; z-index:120; font-size:13px; }
#emailOverlay .toast.show{ display:block; }

/* Slide-in Drawer (Aufgabe / Board) im E-Mail-Rahmen */
#emailOverlay .em-drawer-scrim{ position:absolute; inset:0; background:rgba(15,23,42,.35); opacity:0; pointer-events:none; transition:opacity .28s; z-index:88; }
#emailOverlay .em-drawer-scrim.open{ opacity:1; pointer-events:auto; }
#emailOverlay .em-drawer{ position:absolute; top:0; right:0; bottom:0; width:60%; max-width:560px; background:var(--surface); box-shadow:-24px 0 70px rgba(15,23,42,.25); transform:translateX(102%); transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:90; display:flex; flex-direction:column; }
#emailOverlay .em-drawer.open{ transform:translateX(0); }
#emailOverlay .em-drawer.wide{ width:74%; max-width:900px; }
#emailOverlay .em-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--border); flex:0 0 auto; }
#emailOverlay .em-drawer-head b{ font-size:16px; }
#emailOverlay .em-drawer-body{ flex:1; overflow:auto; padding:18px 22px; }
#emailOverlay .em-drawer-foot{ display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--border); flex:0 0 auto; }
#emailOverlay .em-drawer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
/* Board im Drawer */
#emailOverlay .emb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#emailOverlay .emb-quad{ border:1px solid var(--border); border-radius:14px; padding:12px; background:var(--surface2); min-height:120px; }
#emailOverlay .emb-qh{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; margin-bottom:8px; }
#emailOverlay .emb-qd{ width:10px; height:10px; border-radius:50%; }
#emailOverlay .emb-qc{ margin-left:auto; font-size:11px; color:var(--text-muted); }
#emailOverlay .emb-card{ display:flex; align-items:flex-start; gap:9px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:9px 11px; margin-bottom:7px; font-size:12.5px; }
#emailOverlay .emb-card .cbx{ width:16px; height:16px; border-radius:5px; border:1.5px solid var(--text-muted); cursor:pointer; flex:0 0 16px; margin-top:1px; display:grid; place-items:center; }
#emailOverlay .emb-card .cbx:hover{ border-color:var(--blue); }
#emailOverlay .emb-card .tt{ font-weight:600; } #emailOverlay .emb-card .tm{ font-size:11px; color:var(--text-muted); margin-top:2px; }
#emailOverlay .emb-empty{ font-size:12px; color:var(--text-muted); padding:8px; }

.pill.email .material-symbols-rounded{ font-size:18px; }

/* ============================================================
   MD3-Rollout: Komponenten der Mail-App auf das gemeinsame Kit
   angleichen — Buttons als Pillen, Eingaben outlined, Icon-Buttons
   rund. Reskin: Struktur/IDs/Events bleiben unveraendert.
   ============================================================ */
/* Buttons -> MD3-Pillen */
#emailOverlay .btn{ height:40px; padding:0 20px; border-radius:20px; gap:8px; font-weight:600; position:relative; overflow:hidden; }
#emailOverlay .btn::after{ content:""; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .12s; pointer-events:none; }
#emailOverlay .btn:hover::after{ opacity:.08; }
#emailOverlay .btn:active::after{ opacity:.12; }
#emailOverlay .btn-primary{ background:var(--blue); color:#fff; }
#emailOverlay .btn-primary:hover{ filter:none; box-shadow:0 1px 2px rgba(0,0,0,.2),0 2px 6px rgba(var(--accent-rgb,26,155,219),.35); }
#emailOverlay .btn-outline{ background:transparent; border:0; box-shadow:inset 0 0 0 1px var(--border); color:var(--blue); }
#emailOverlay .btn-outline:hover{ box-shadow:inset 0 0 0 1px var(--blue); color:var(--blue); }
#emailOverlay .btn-sm{ height:34px; padding:0 16px; font-size:12.5px; border-radius:18px; }
#emailOverlay .btn-xs{ height:30px; padding:0 13px; font-size:11.5px; border-radius:16px; }
#emailOverlay .btn .material-symbols-rounded{ font-size:18px; }
/* Icon-Button (Modal schliessen) -> rund, randlos, Hover-Ripple */
#emailOverlay .modal-close{ width:40px; height:40px; border-radius:50%; border:0; background:transparent; color:var(--text-muted); display:inline-grid; place-items:center; position:relative; overflow:hidden; }
#emailOverlay .modal-close::after{ content:""; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .12s; pointer-events:none; }
#emailOverlay .modal-close:hover{ color:var(--text); border-color:transparent; }
#emailOverlay .modal-close:hover::after{ opacity:.09; }
#emailOverlay .modal-close .material-symbols-rounded{ font-size:22px; }
/* Eingaben -> MD3-Outlined-Box (1,5px Rahmen + 2px Accent-Fokus) */
#emailOverlay .em-search{ border:1.5px solid var(--border); border-radius:4px; }
#emailOverlay .em-search:focus{ border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); background:var(--panel); }
#emailOverlay .form-control{ border:1.5px solid var(--border); border-radius:4px; }
#emailOverlay .form-control:focus{ border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
/* Compose-Felder: outlined Box, Label bleibt links (Struktur unveraendert) */
#emailOverlay .em-compose-field{ border:1.5px solid var(--border); border-radius:4px; padding:0 12px; height:48px; }
#emailOverlay .em-compose-field:focus-within{ border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
/* Symbol-Groessen fuer die umgestellten Icons */
#emailOverlay .rte-btn .material-symbols-rounded{ font-size:18px; }
#emailOverlay .em-bulk-b .material-symbols-rounded{ font-size:17px; }
#emailOverlay .em-item-flag .material-symbols-rounded{ font-size:14px; vertical-align:-2px; }
#emailOverlay .em-view-btn .ic .material-symbols-rounded,
#emailOverlay .em-view-menu .vic .material-symbols-rounded{ font-size:18px; vertical-align:-4px; }
#emailOverlay .em-ctx-ic .material-symbols-rounded,
#emailOverlay .em-attachment-icon .material-symbols-rounded{ font-size:16px; vertical-align:-3px; }

/* --- Anhaenge im Verfassen-Fenster -------------------------------------
   Bis 2026-09-07 gab es hier nichts: attachFiles() zeigte nur eine
   Erfolgsmeldung und warf die Datei weg. Jetzt stehen die Anhaenge als
   Chips ueber der Fusszeile, mit Entfernen-Knopf. */
.em-anhaenge{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:8px 16px 0;
}
.em-anhang{
  display:inline-flex; align-items:center; gap:6px;
  max-width:260px; padding:4px 6px 4px 8px;
  border:1px solid var(--line,#d4e3f5); border-radius:8px;
  background:rgba(var(--accent-rgb,242,150,58),.10);
  font-size:12px; font-weight:600; color:var(--text,#102a42);
}
.em-anhang .material-symbols-rounded{ font-size:16px; opacity:.7; flex:none }
.em-anhang-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.em-anhang-weg{
  flex:none; border:0; background:transparent; cursor:pointer;
  font-size:16px; line-height:1; padding:0 2px; color:inherit; opacity:.55;
}
.em-anhang-weg:hover{ opacity:1; color:#ba1a1a }

/* Speichern-Knopf am empfangenen Anhang. */
.em-attachment-save{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:1px solid var(--line,#d4e3f5); border-radius:8px;
  background:transparent; cursor:pointer; color:inherit; opacity:.65; transition:.15s;
}
.em-attachment-save:hover{
  opacity:1; border-color:var(--accent-dark, var(--accent,#f2963a));
  background:rgba(var(--accent-rgb,242,150,58),.12);
}
.em-attachment-save .material-symbols-rounded{ font-size:18px }
/* Verlauf mit dem Absender: jede Zeile oeffnet die Mail, die offene ist hervorgehoben. */
#emailOverlay .em-hist{ padding:4px; max-height:none; }
#emailOverlay .em-hist-row{ padding:7px 8px; border-radius:8px; cursor:pointer; }
#emailOverlay .em-hist-row:hover{ background:var(--surface2); }
#emailOverlay .em-hist-row.cur{ background:rgba(var(--accent-rgb, 47,122,214), .12); }
#emailOverlay .em-hist-row.cur .em-ctx-t{ color:var(--text); }
#emailOverlay .em-hist-row:not(.cur) .em-ctx-t{ font-weight:500; }
/* Sprung aus dem Verlauf: die Zielzeile leuchtet kurz in der Akzentfarbe auf. */
@keyframes em-flash{
  0%  { box-shadow:0 0 0 0 rgba(var(--accent-rgb, 47,122,214), .55); background-color:rgba(var(--accent-rgb, 47,122,214), .22); }
  35% { box-shadow:0 0 0 6px rgba(var(--accent-rgb, 47,122,214), 0); background-color:rgba(var(--accent-rgb, 47,122,214), .18); }
  100%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb, 47,122,214), 0); }
}
#emailOverlay .em-item.em-flash{ animation:em-flash 1.3s cubic-bezier(.2,.7,.2,1); position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ #emailOverlay .em-item.em-flash{ animation-duration:.01s; } }