/* =========================================================
 * TonnEstate Mail-Desk – Skin-Stylesheet
 *
 * Der Skin erbt technisch von Elastic (meta.json "extends"), aber die
 * Asset-Pfade in includes/layout.html werden gegen den AKTIVEN Skin aufgeloest.
 * Deshalb muss dieses styles.css hier real existieren; es zieht Elastic als
 * Basis herein und legt darueber die TonnEstate-Produktschicht.
 *
 * WICHTIG: die url()-Angaben in Elastics styles.css (Schriften, Icons) werden
 * relativ zur IMPORTIERTEN Datei aufgeloest, also gegen skins/elastic/styles/.
 * Deshalb muessen fonts/ und images/ hier NICHT dupliziert werden.
 *
 * Vertrag: /root/contracts/tonnestate-ki-mail-desk-rework-vertrag.md
 * ========================================================= */
@import url("../../elastic/styles/styles.min.css");

:root {
  --te-accent: #2aa6a0;
  --te-accent-dark: #1f8a85;
  --te-ink: #0b0c0e;
  --te-ink-soft: #20262b;
  --te-muted: #6b7280;
  --te-line: rgba(11, 12, 14, .10);
  --te-canvas: #eef1f2;
}

/* Abschnitt 13: hell und produktiv, Tuerkis nur als Akzent. Elastic bringt
   einen eigenen Dark-Mode mit; der Mail-Desk soll ihn nicht benutzen. */
html.dark-mode { filter: none; }

body.task-mail, body.task-mail .layout, body.task-mail input, body.task-mail button, body.task-mail select, body.task-mail textarea {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

#layout { background: var(--te-canvas); }

/* Der Mail-/Nachrichtenmodus hat drei echte Bereiche. Grid verhindert, dass
 * Roundcubes Flex-Shrink die Listenbreite und die Lesespalte gegeneinander
 * verschiebt; der Composer bleibt bewusst bei seiner nativen Flex-Struktur. */
body.task-mail:not(.action-compose) #layout {
  display: grid !important;
  grid-template-columns: 164px minmax(320px, 380px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}
body.task-mail:not(.action-compose) #layout-sidebar:not(.sidebar-right) {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: none;
}
body.task-mail:not(.action-compose) #layout-list {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: none;
}
body.task-mail:not(.action-compose) #layout-content {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
}

/* ---------- Abschnitt 4: linke Mail-Navigation, kompakt und ruhig -------- */
#layout-sidebar.te-nav:not(.sidebar-right) {
  flex: 0 0 178px;
  min-width: 158px;
  max-width: 210px;
  background: #f6f8f8;
  border-right: 1px solid var(--te-line);
}
.te-nav__head {
  min-height: 46px !important;
  padding: 0 8px 0 12px !important;
  background: #f6f8f8 !important;
  border-bottom: 1px solid var(--te-line) !important;
  box-shadow: none !important;
}
.te-nav__title {
  flex: 1 1 auto;
  color: var(--te-ink);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.te-nav__actions { color: var(--te-muted) !important; }
.te-nav__actions:hover { color: var(--te-accent) !important; }
#layout-sidebar .scroller { padding: 8px 8px !important; }
#layout-sidebar .listing li a,
#layout-sidebar .treelist li a {
  min-height: 32px;
  padding: 7px 10px !important;
  border-radius: 7px;
  color: #2a2f35 !important;
  font-size: 13px;
}
#layout-sidebar .listing li a:hover,
#layout-sidebar .treelist li a:hover { background: rgba(42, 166, 160, .08) !important; }
#layout-sidebar .listing li.selected > a,
#layout-sidebar .treelist li.selected > a {
  border-left: 0 !important;
  background: rgba(42, 166, 160, .14) !important;
  color: var(--te-ink) !important;
  font-weight: 600;
}
/* Zaehler als ruhige Pille statt als Signalfarbe */
#layout-sidebar .treelist li a .unreadcount {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(42, 166, 160, .16);
  color: #14706c;
  font-size: 11px;
  font-weight: 700;
}

/* ---------- Abschnitt 5: Nachrichtenliste als Karten -------------------- */
#layout-list {
  max-width: 420px;
  min-width: 320px;
  flex: 0 1 380px;
  background: #fff;
  border-right: 1px solid var(--te-line);
}
#messagelist-header {
  min-height: 46px !important;
  padding: 4px 8px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--te-line) !important;
  box-shadow: none !important;
}
/* Die technischen Listen-Icons (Auswahl, Konversationen, Optionen) liegen im
   Ueberlaufmenue #toolbar-list-menu, erreichbar ueber den Kebab-Button rechts
   (Abschnitt 2). Die Leiste selbst wird komplett ausgeblendet: sie belegte
   sonst 180px in einer nur 335px breiten Kopfzeile, wodurch der
   "Schreiben"-Button und der Ordner-Umschalter links aus dem Container
   herausliefen und von overflow:hidden abgeschnitten wurden. */
/* Elastics ui.js baut diese Leiste zur Laufzeit in ein <ul> um und verliert
   dabei unsere Klasse; sie dient gleichzeitig als Inhalt des Kebab-Menues.
   Deshalb NICHT die ganze Leiste ausblenden (sonst waeren Auswahl,
   Konversationen und Optionen nirgends mehr erreichbar), sondern nur die
   <li>-Huellen der ohnehin versteckten Eintraege einklappen. */
#messagelist-header ul.toolbar > li:has(> a.hidden) { display: none !important; }
#messagelist-header ul.toolbar { gap: 0; }
/* Das <ul> ist zugleich das Popup #toolbar-list-menu und behaelt im
   geschlossenen Zustand eine Mindestbreite (~180px). In einer 335px breiten
   Kopfzeile drueckte das den "Schreiben"-Button links aus dem Container, wo
   overflow:hidden ihn abschnitt. Nur im geschlossenen Zustand einklappen -
   geoeffnet (aria-hidden="false") behaelt das Popup seine Groesse. */
#messagelist-header > ul.popupmenu[aria-hidden="true"] {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
}

#messagelist-content { background: #fff; }
.te-messagelist { border-collapse: separate !important; border-spacing: 0 4px !important; }
.te-messagelist tr { border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(11, 12, 14, .07); }
.te-messagelist tr td {
  padding: 9px 12px !important;
  border: 0 !important;
  background: #fff;
}
.te-messagelist tr td:first-child { border-radius: 8px 0 0 8px; }
.te-messagelist tr td:last-child { border-radius: 0 8px 8px 0; }
.te-messagelist tr:hover td { background: rgba(42, 166, 160, .05) !important; }
.te-messagelist tr:hover { box-shadow: inset 0 0 0 1px rgba(42, 166, 160, .32); }
.te-messagelist tr.selected td { background: rgba(42, 166, 160, .10) !important; }
.te-messagelist tr.selected { box-shadow: inset 0 0 0 1px var(--te-accent); }
/* Ungelesen deutlich, aber nicht aggressiv (Abschnitt 5). */
.te-messagelist tr.unread { box-shadow: inset 0 0 0 1px rgba(11, 12, 14, .10), inset 3px 0 0 0 var(--te-accent); }
.te-messagelist tr.unread td { color: var(--te-ink) !important; }
.te-messagelist tr.unread td.subject { font-weight: 650 !important; }
.te-messagelist td.subject { font-size: 13px !important; line-height: 1.35 !important; }
.te-messagelist td.fromto,
.te-messagelist span.date,
.te-messagelist td.date { font-size: 11.5px !important; color: var(--te-muted) !important; }
/* Native Roundcube flags remain the source of truth, but are visible as
   compact TonnEstate metadata instead of nearly invisible glyphs. */
.te-messagelist td.flags .attachment .attachment::after,
.te-messagelist td.flags .flag .flagged::after {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
}
.te-messagelist td.flags .attachment .attachment::after {
  content: "Anhang";
  background: rgba(42, 166, 160, .12);
  color: #0f6f6a;
}
.te-messagelist td.flags .flag .flagged::after {
  content: "Wichtig";
  background: rgba(240, 190, 45, .18);
  color: #765b00;
}

/* ---------- Abschnitt 6: Detailansicht, drei primaere Aktionen ---------- */
#layout-content { flex: 1 1 0; min-width: 0; background: #fff; position: relative; }
.te-detail__head {
  min-height: 46px !important;
  padding: 4px 10px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--te-line) !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
}
/* Die Aktionsleiste muss eine echte Reihe sein. Elastic setzt die <li> als
   inline-block mit 58px Hoehe und vertical-align:baseline, die Buttons darin
   sind aber 32px hoch - dadurch "flogen" Antworten und die Split-Buttons auf
   unterschiedlichen Hoehen und standen nicht in einer Linie. Alles auf eine
   gemeinsame Flex-Reihe mit einheitlich 32px Hoehe. */
/* NICHT die Fussleiste treffen: .footer.content-frame-navigation ist eine von
   Elastic bewusst versteckte Klon-Leiste (Klasse hide-nav-buttons). Ein
   display:flex !important darauf liess unten im Lesebereich ein zweites,
   freischwebendes "Antworten" erscheinen. */
body.task-mail .toolbar:not(.content-frame-navigation) {
  display: flex !important;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  height: auto;
}
body.task-mail .toolbar [data-hidden="small"] { display: none !important; }
body.task-mail .toolbar:not(.content-frame-navigation) > li {
  display: flex !important;
  align-items: center;
  height: 32px !important;
  width: auto !important;
  min-width: 0 !important;
  vertical-align: middle;
}
/* Der Elastic-Spacer schiebt die sekundaeren Aktionen nach rechts. */
body.task-mail .toolbar:not(.content-frame-navigation) > li.spacer { flex: 1 1 auto; height: 32px !important; }
body.task-mail .toolbar:not(.content-frame-navigation) .dropbutton { height: 32px; }
body.task-mail .toolbar:not(.content-frame-navigation) .dropbutton > a { height: 32px; }
body.task-mail .toolbar:not(.content-frame-navigation) a.dropdown { display: inline-flex !important; align-items: center; height: 32px; padding: 0 4px !important; }
body.task-mail .toolbar:not(.content-frame-navigation) a.dropdown::before { line-height: 1; }

/* "Zurueck": Elastic blendet den Back-Button auf breiten Layouts aus. Im
   CRM-Arbeitsplatz braucht der Nutzer trotzdem einen Weg aus der geoeffneten
   Mail zurueck in die Liste (Nutzerwunsch 2026-08-30). */
.te-back-to-list {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-right: 4px;
  padding: 0 10px !important;
  border: 1px solid rgba(11, 12, 14, .16);
  border-radius: 7px;
  background: #fff;
  color: var(--te-ink-soft) !important;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.te-back-to-list:hover, .te-back-to-list:focus {
  border-color: var(--te-accent);
  background: rgba(42, 166, 160, .07);
  color: var(--te-ink) !important;
}
.te-back-to-list:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'%3E%3C/line%3E%3Cpolyline points='12 19 5 12 12 5'%3E%3C/polyline%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'%3E%3C/line%3E%3Cpolyline points='12 19 5 12 12 5'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
/* Nur zeigen, wenn wirklich eine Mail offen ist. */
body:not(.message-open) .te-back-to-list { display: none !important; }
body.task-mail .toolbar a.reply, body.task-mail .toolbar a.reply-all, body.task-mail .toolbar a.forward,
body.task-mail .toolbar a.delete, body.task-mail .toolbar a.archive, body.task-mail .toolbar a.markmessage, body.task-mail .toolbar a.more {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 4px;
  height: 32px;
  /* War 0 10px: sieben Buttons (Antworten/Allen/Weiterleiten + vier
     Icon-Buttons) plus Zurueck-Button passten dadurch nicht in die feste
     Detailspalte, "Mehr" - die eigentliche Ueberlauf-Schaltflaeche - fiel
     selbst aus dem sichtbaren Bereich. */
  padding: 0 5px !important;
  border-radius: 7px;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap;
  overflow: visible !important;
}
.task-mail .toolbar a.archive:before, .task-mail .toolbar a.reply:before, .task-mail .toolbar a.reply-all:before, .task-mail .toolbar a.forward:before,
.task-mail .toolbar a.delete:before, .task-mail .toolbar a.markmessage:before, .task-mail .toolbar a.more:before {
  font-size: 1rem !important;
  margin: 0 !important;
}
.task-mail .toolbar a.archive .inner, .task-mail .toolbar a.reply .inner, .task-mail .toolbar a.reply-all .inner, .task-mail .toolbar a.forward .inner,
.task-mail .toolbar a.delete .inner, .task-mail .toolbar a.archive .inner, .task-mail .toolbar a.markmessage .inner, .task-mail .toolbar a.more .inner {
  max-width: none;
  font-size: 12.5px;
  line-height: 1;
  font-weight: 500;
  color: inherit;
}
/* Split-Buttons (Aktion + Pfeil) haben einen eigenen Wrapper. */
.task-mail .toolbar:not(.content-frame-navigation) .dropbutton { width: auto !important; min-width: 0 !important; display: inline-flex !important; align-items: center; }
.task-mail .toolbar:not(.content-frame-navigation) .dropbutton > a { width: auto !important; min-width: 0 !important; }

.task-mail .toolbar a.reply { background: var(--te-accent) !important; color: #fff !important; font-weight: 600; }
.task-mail .toolbar a.reply:hover, .task-mail .toolbar a.reply:focus { background: var(--te-accent-dark) !important; }
.task-mail .toolbar a.reply-all, .task-mail .toolbar a.forward {
  border: 1px solid rgba(11, 12, 14, .16) !important;
  background: #fff !important;
  color: var(--te-ink-soft) !important;
}
.task-mail .toolbar a.reply-all:hover, .task-mail .toolbar a.forward:hover {
  border-color: var(--te-accent) !important;
  background: rgba(42, 166, 160, .07) !important;
}
/* Sekundaeres nur als Icon, gedaempft (Abschnitt 6: keine zehn gleichwertigen
   Icons). Nicht ausgeblendet - sie stehen in keinem Ueberlaufmenue und muessen
   erreichbar bleiben (Abschnitt 21). */
.task-mail .toolbar a.delete { margin-left: 6px; }
.task-mail .toolbar a.delete, .task-mail .toolbar a.archive, .task-mail .toolbar a.markmessage, .task-mail .toolbar a.more {
  color: var(--te-muted) !important;
  background: transparent !important;
}
.task-mail .toolbar a.delete .inner, .task-mail .toolbar a.archive .inner, .task-mail .toolbar a.markmessage .inner, .task-mail .toolbar a.more .inner { display: none !important; }
.task-mail .toolbar a.delete:hover { color: #c0392b !important; background: rgba(192, 57, 43, .08) !important; }
.task-mail .toolbar a.archive:hover, .task-mail .toolbar a.markmessage:hover, .task-mail .toolbar a.more:hover { color: var(--te-ink) !important; background: rgba(11, 12, 14, .05) !important; }
/* Schreiben/Aktualisieren color is actually set in the tonnestate_theme Roundcube plugin's tonnestate.css (loaded after this stylesheet, so it wins) - see that file for the real fix. */

/* ---------- Abschnitt 15: Typografie ------------------------------------ */
#messageheader { padding: 20px 26px 14px !important; border-bottom: 1px solid var(--te-line) !important; }
#messageheader h2 {
  margin: 0 0 14px !important;
  color: var(--te-ink) !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
  font-weight: 650 !important;
  letter-spacing: -.018em;
}
#messagecontent { padding: 22px 26px !important; color: var(--te-ink-soft); font-size: 14px; line-height: 1.6; }

/* ---------- Task-Rail bleibt aus (Mail-only-Embedding im CRM) ----------- */
#layout-menu, .task-menu-button { display: none !important; }

/* Fokus in Systemfarbe statt Bootstrap-Blau */
body.task-mail input:focus, body.task-mail select:focus, body.task-mail textarea:focus, body.task-mail button:focus {
  outline-color: var(--te-accent);
  box-shadow: 0 0 0 2px rgba(42, 166, 160, .35);
}
body.task-mail a, body.task-mail a:visited { color: var(--te-accent); }
body.task-mail .btn-primary, body.task-mail button.btn-primary, body.task-mail .formbuttons button.mainaction, body.task-mail a.button.mainaction {
  background-color: var(--te-accent) !important;
  border-color: var(--te-accent) !important;
  color: #fff !important;
}
.task-mail .btn-link { color: var(--te-accent) !important; }
body.task-mail ::-webkit-scrollbar-thumb { background-color: rgba(42, 166, 160, .45); }
body.task-mail form.formcontent.scroller::-webkit-scrollbar { -webkit-appearance: none; }
body.task-mail form.formcontent.scroller::-webkit-scrollbar:vertical { width: 0.5rem; }
body.task-mail form.formcontent.scroller::-webkit-scrollbar-thumb { border-radius: 0.25rem; }

/* Das gerahmte Nachrichtendokument (html.iframe) ist oft schmaler als 700px.
   Elastics und unsere Mobilregeln duerfen dort NICHT greifen, sonst wird der
   Mailtext auf display:none gesetzt. */
@media (max-width: 700px) {
  html:not(.iframe) #layout-sidebar:not(.sidebar-right) { display: none !important; }
  html:not(.iframe) #layout-list { max-width: none !important; min-width: 0 !important; flex: 1 1 100% !important; }
  html:not(.iframe) #layout-content { display: none !important; }
  html:not(.iframe) body.message-open #layout-list { display: none !important; }
  html:not(.iframe) body.message-open #layout-content { display: flex !important; flex: 1 1 100% !important; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  body.task-mail:not(.action-compose) #layout {
    grid-template-columns: 148px minmax(280px, 320px) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* "Wichtig" als virtueller Eintrag ueber den echten Ordnern (Abschnitt 4). */
.te-nav__virtual { margin: 0 0 2px; padding: 0; list-style: none; }
.te-nav__virtual-item > a {
  display: flex; align-items: center; gap: 8px; min-height: 32px;
  padding: 7px 10px; border-radius: 7px; color: #2a2f35; font-size: 13px; text-decoration: none;
}
.te-nav__virtual-item > a:before {
  content: ''; display: inline-block; width: 1.05em; height: 1.05em; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.te-nav__virtual-item > a:hover { background: rgba(42,166,160,.08); }
.te-nav__virtual-item.selected > a { background: rgba(42,166,160,.14); color: var(--te-ink); font-weight: 600; }

/* ---------- Abschnitt 19: Threads ---------------------------------------
   Mailverlaeufe als zusammenhaengende Konversation. Der Aufklapper bekommt
   eine ruhige, klickbare Flaeche; Kindnachrichten werden eingerueckt und
   optisch als Teil des Verlaufs gelesen, nicht als eigene Karten. */
.te-messagelist td.threads { width: 22px; padding-left: 8px !important; padding-right: 0 !important; }
.te-messagelist div.expando {
  width: 18px; height: 18px; margin-top: 1px; border-radius: 4px;
  color: var(--te-muted); cursor: pointer;
}
.te-messagelist div.expando:hover { background: rgba(42,166,160,.12); color: var(--te-accent); }
/* Kindnachrichten eines Verlaufs: eingerueckt, ohne eigene Kontur, mit einer
   durchgehenden Linie als Verlaufsanker. */
.te-messagelist tr.thread.expanded td { background: #fbfdfd; }
.te-messagelist tr.thread.unfocused td,
.te-messagelist tr[class*="thread"] td.subject { position: relative; }
.te-messagelist tr.thread + tr:not(.thread) td:first-child { padding-left: 26px !important; }
.te-messagelist tr.thread.expanded { box-shadow: inset 0 0 0 1px rgba(42,166,160,.22); }
/* Anzahl der Nachrichten im Verlauf als ruhige Pille (Roundcube: span.msgcounter) */
.te-messagelist span.msgcounter {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px;
  border-radius: 9px; background: rgba(11,12,14,.07); color: #4b5560;
  font-size: 10.5px; font-weight: 700; text-align: center;
}

/* UI-Integration-Vertrag 2026-09-04: Composer-Werkzeugleiste - deutsche
   Labels ("Optionen und Anhänge", "Schnellantworten") wurden bei Elastics
   84px-Buttons abgeschnitten. Siehe styles.css fuer die vollen Kommentare. */
body.task-mail.action-compose #toolbar-menu.toolbar > li,
body.task-mail.action-compose #toolbar-menu.toolbar > li > a {
  max-width: 128px !important;
}
body.task-mail.action-compose #toolbar-menu.toolbar > li > a {
  white-space: normal !important;
  line-height: 1.15;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
body.task-mail.action-compose #toolbar-menu.toolbar li.hidden-big,
body.task-mail.action-compose #toolbar-menu.toolbar a.options {
  max-width: 172px !important;
  white-space: nowrap !important;
}
body.task-mail.action-compose #toolbar-menu.toolbar a.signature:before { transform: translateY(-2px); }

/* UI-Integration-Vertrag 2026-09-04: Optionen-Panel (DSN/MDN) - langes
   deutsches Wort wurde durch overflow:hidden statt Umbruch abgeschnitten. */
#compose-options .form-check .col-form-label {
  overflow: visible !important;
  overflow-wrap: break-word;
  word-break: break-word;
}
#compose-options .form-check.row {
  align-items: flex-start;
}