/* Webmail Desktop — Design „ruhig“. Wird nach style.css geladen und ersetzt dessen Optik.
   Flach: Tonflächen und feine Linien, keine Schatten (ausser auf Schwebendem), keine Verläufe, keine Farbleisten.
   Eine gedämpfte Akzentfarbe nur für Auswahl, Ungelesen und Hauptaktion. Hell/Dunkel folgen dem System.
   Gleiche Töne wie die mobile App (m/m.css). */
:root {
  --akzent: #3d5a73; --akzent-dunkel: #324c62; --akzent-hell: #e8eef3; --akzent-text: #ffffff;
  --text: #1c1d1f; --grau: #686b70; --rand: #e8e8e5; --rand-stark: #d5d5d1;
  --flaeche: #ffffff; --flaeche-2: #f2f2f0; --hintergrund: #f7f7f5; --hell: #f7f7f5;
  --ok: #3c7a4f; --ok-hell: #e9f1ec; --warn: #8f5f12; --warn-hell: #f6efe2; --schlecht: #a8372f; --schlecht-hell: #f6e9e7;
  --radius: 12px; --radius-klein: 8px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --akzent: #8fb0cc; --akzent-dunkel: #a6c1d8; --akzent-hell: #1f2b36; --akzent-text: #12161a;
    --text: #e9e9e7; --grau: #9b9ea4; --rand: #2a2b2e; --rand-stark: #3a3b3f;
    --flaeche: #19191b; --flaeche-2: #232427; --hintergrund: #111113; --hell: #151517;
    --ok: #7fc091; --ok-hell: #1c2a21; --warn: #d6a95a; --warn-hell: #2b2416; --schlecht: #e08a82; --schlecht-hell: #2d1c1a;
  }
}

body { background: var(--hintergrund); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       -webkit-font-smoothing: antialiased; }
::selection { background: var(--akzent-hell); }
a { color: var(--akzent); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
h1 { font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; font-weight: 600; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -4px; }

/* Kopf: ruhige Leiste, aktive Seite als neutrale Tonfläche */
.kopf { background: var(--flaeche); border-bottom: 1px solid var(--rand); padding: 8px 20px; gap: 20px; }
.marke { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; color: var(--text); }
.marke:hover { text-decoration: none; }
.kopf nav a { padding: 6px 12px; border-radius: var(--radius-klein); color: var(--grau); font-weight: 500;
  transition: background-color .15s var(--ease), color .15s var(--ease); }
.kopf nav a:hover { background: var(--flaeche-2); color: var(--text); text-decoration: none; }
.kopf nav a.aktiv { background: var(--flaeche-2); color: var(--text); }
.benutzername, a.benutzername { color: var(--grau); }

/* Schaltflächen: Tonfläche statt Rahmen; nur die Hauptaktion trägt die Akzentfarbe */
.btn { border: 0; background: var(--flaeche-2); color: var(--text); border-radius: var(--radius-klein); font-weight: 500;
  transition: background-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease); }
.btn:hover { background: var(--rand); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--akzent); color: var(--akzent-text); }
.btn-primary:hover { background: var(--akzent-dunkel); }
.btn-gefahr { background: var(--flaeche-2); color: var(--schlecht); border: 0; }
.btn-gefahr:hover { background: var(--schlecht-hell); }
.btn[aria-busy="true"] { opacity: .75; }
.btn-icon { padding: 6px 8px; }
.btn .ic, .nx-btn .ic { vertical-align: -4px; margin-right: 5px; }
.btn-icon .ic, .btn-klein.btn-icon .ic { margin-right: 0; }

/* Meldungen: flache Tönung, kein Rahmen */
.meldung { border: 0; border-radius: var(--radius-klein); }
.fehler { background: var(--schlecht-hell); color: var(--schlecht); border: 0; }
.hinweis { background: var(--ok-hell); color: var(--ok); border: 0; }
.info { background: var(--akzent-hell); color: var(--akzent); border: 0; }

/* Blöcke, Tabellen, Formulare */
.block, .kachel { background: var(--flaeche); border: 0; border-radius: var(--radius); }
a.kachel:hover { background: var(--flaeche-2); }
.tabelle th { font-size: .78rem; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--grau); }
.tabelle th, .tabelle td { border-bottom-color: var(--rand); }
.anzahl { background: var(--flaeche-2); border: 0; font-weight: 500; }
.feldgitter input, .feldgitter select, .feldgitter textarea,
.suchleiste input[type=search], .suchleiste select, .login-karte input,
.wm-suche input[type="search"], .mn-zeile input, .mn-zeile select {
  background: var(--flaeche); color: var(--text); border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); }
.feldgitter input:focus, .feldgitter select:focus, .feldgitter textarea:focus, .login-karte input:focus,
.wm-suche input[type="search"]:focus, .mn-zeile input:focus, .mn-zeile select:focus {
  outline: 2px solid var(--akzent); outline-offset: -1px; border-color: var(--akzent); }
input.gesperrt, .gesperrt { background: var(--flaeche-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--akzent); }
.fuss { color: var(--grau); }

/* Anmeldung */
.login-karte { background: var(--flaeche); border: 0; border-radius: 16px; box-shadow: none; padding: 32px; }
.login-karte h1 { font-size: 1.2rem; }

/* ── Mail: vier Spalten ─────────────────────────────────────────────────── */
.wm { background: var(--flaeche); border-top: 1px solid var(--rand); height: calc(100vh - 84px); height: calc(100dvh - 84px); }
.wm > .wm-ordner, .wm > .wm-liste, .wm > .wm-nachricht { border-right: 0; }
.wm-split { background: transparent; }
.wm-split::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--rand);
  transition: background-color .15s var(--ease), width .15s var(--ease); }
.wm-split:hover, .wm-split.zieht { background: transparent; }
.wm-split:hover::after, .wm-split.zieht::after { background: var(--akzent); width: 2px; margin-left: -.5px; }

/* Ordnerspalte */
.wm-ordner { background: var(--hintergrund); padding: 12px 10px; font-size: .88rem; }
.wm-neu { text-align: center; margin-bottom: 14px; display: flex; justify-content: center; align-items: center; }
.grp { margin-bottom: 14px; }
.grp-kopf { font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--grau); font-weight: 600; padding: 4px 8px; }
.grp-zeile, .tree-row, .konto-grp > summary { padding: 5px 8px; border-radius: var(--radius-klein); color: var(--text);
  transition: background-color .15s var(--ease); }
.grp-zeile:hover, .tree-row:hover, .konto-grp > summary:hover { background: var(--flaeche-2); }
.grp-zeile.active, .tree-row.active { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }
.grp-zeile.active .badge, .tree-row.active .badge { color: var(--akzent); }
.grp-zeile > .ic { color: var(--grau); width: 17px; height: 17px; }
.grp-zeile.active > .ic { color: var(--akzent); }
.badge { color: var(--grau); font-weight: 600; }
.tw::before { content: ""; display: block; width: 6px; height: 6px; border-right: 1.5px solid var(--grau); border-bottom: 1.5px solid var(--grau);
  transform: rotate(-45deg); transition: transform .15s var(--ease); margin: 3px; font-size: 0; }
li.has-kids.auf > .tree-row .tw::before { content: ""; transform: rotate(45deg); }
.konto-grp > summary .punkt { width: 8px; height: 8px; }
.mini { color: var(--grau); }

/* Liste */
.wm-liste { background: var(--flaeche); }
.wm-liste-kopf { border-bottom: 1px solid var(--rand); padding: 8px 14px; gap: 8px; }
.wm-liste-kopf .ordner-name { font-size: .95rem; font-weight: 600; letter-spacing: -.005em; }
.wm-liste-kopf .anzahl { background: none; padding: 0; margin: 0; font-size: .78rem; color: var(--grau); font-variant-numeric: tabular-nums; }
.wm-liste-kopf .anzahl b { color: var(--akzent); font-weight: 600; }
.wm-liste-kopf .btn, .wm-aktionen .btn { background: none; color: var(--grau); }
.wm-liste-kopf .btn:hover, .wm-aktionen .btn:hover { background: var(--flaeche-2); color: var(--text); }
.wm-suche { border-bottom: 0; padding: 8px 14px 4px; }
.wm-suche input[type="search"] { background: var(--flaeche-2); border: 0; padding: 7px 12px; }
.wm-suche input[type="search"]:focus { outline: 2px solid var(--akzent); outline-offset: 0; }
.wm-aktionen { border-bottom: 1px solid var(--rand); padding: 4px 10px; gap: 2px; }
.wm-aktionen .alle { margin-left: 4px; margin-right: 6px; }
.wm-aktionen .btn-gefahr { margin-left: 0; }
.wm-aktionen .wm-ziel { background: var(--flaeche-2); border: 0; border-radius: var(--radius-klein); padding: 4px 8px; color: var(--grau); font: inherit; font-size: .82rem; }
.wm-auswahl { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }

ul.msgs li { grid-template-columns: 22px 38px 1fr 22px; gap: 10px; padding: 10px 14px 10px 10px; border-bottom: 0; border-left: 0;
  background: var(--flaeche); position: relative; transition: background-color .12s var(--ease); }
ul.msgs li::after { content: ""; position: absolute; left: 80px; right: 0; bottom: 0; height: 1px; background: var(--rand); }
ul.msgs li:hover { background: var(--flaeche-2); }
ul.msgs li .msg .from { color: var(--text); font-weight: 400; }
ul.msgs li .msg .subj { color: var(--grau); font-weight: 400; }
ul.msgs li .avatar { opacity: 1; }
ul.msgs li.ungelesen { background: var(--flaeche); border-left-color: transparent; }
ul.msgs li.ungelesen:hover { background: var(--flaeche-2); }
ul.msgs li.ungelesen .msg .from { color: var(--text); font-weight: 600; }
ul.msgs li.ungelesen .msg .subj { color: var(--text); font-weight: 500; }
ul.msgs li.ungelesen .msg .time { color: var(--akzent); font-weight: 600; }
ul.msgs li.auf, ul.msgs li.auf:hover { background: var(--akzent-hell); border-left-color: transparent; }
ul.msgs li.auf .msg .from, ul.msgs li.auf .msg .subj { color: var(--text); }
ul.msgs li.auf::after { background: transparent; }
ul.msgs li:has(.pick input:checked), ul.msgs li:has(.pick input:checked):hover { background: var(--akzent-hell); border-left-color: transparent; }
ul.msgs li.leer { color: var(--grau); }
ul.msgs li.leer::after { display: none; }
/* Auswahlfeld erst bei Zeigen oder Auswahl sichtbar, bleibt aber tastaturbedienbar */
ul.msgs .pick { opacity: 0; transition: opacity .12s var(--ease); }
ul.msgs li:hover .pick, ul.msgs li:focus-within .pick, ul.msgs:has(input:checked) .pick { opacity: 1; }
@media (hover: none) { ul.msgs .pick { opacity: 1; } }
ul.msgs .pick input[type="checkbox"] { width: 16px; height: 16px; }
ul.msgs .kchip { width: 3px; height: 28px; }
.avatar, .nx-avatar { background: hsl(var(--h, 215) 22% 90%); color: hsl(var(--h, 215) 30% 28%); font-weight: 600; }
@media (prefers-color-scheme: dark) { .avatar, .nx-avatar { background: hsl(var(--h, 215) 14% 24%); color: hsl(var(--h, 215) 40% 80%); } }
.avatar { width: 38px; height: 38px; font-size: .78rem; }
.avatar > img, .nx-avatar > img { background: #fff; }
li.ungelesen .avatar::after { display: none; }
ul.msgs li.ungelesen::before { content: ""; position: absolute; left: 3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--akzent); }
.msg .time { color: var(--grau); font-variant-numeric: tabular-nums; }
.msg .clip { display: inline-flex; align-items: center; color: var(--grau); }
.msg .clip .ic { width: 14px; height: 14px; vertical-align: 0; }
.msg .clip.spam { background: var(--schlecht-hell); color: var(--schlecht); border-radius: 4px; padding: 0 5px; font-weight: 600; }
.msg .clip.prio { color: var(--schlecht); font-weight: 700; }
.stern { color: var(--rand-stark); cursor: pointer; display: grid; place-items: center; }
.stern .ic { width: 16px; height: 16px; vertical-align: 0; }
.stern.an { color: var(--warn); } .stern.an .ic { fill: currentColor; }
.blaettern { border-top: 1px solid var(--rand); }
.neu-banner { background: var(--text); color: var(--flaeche); box-shadow: none; border-radius: 0; }
.neu-banner a { color: var(--flaeche); }
.liste-hinweis { background: var(--ok); color: #fff; }

/* Nachricht */
.wm-nachricht { background: var(--flaeche); border-left: 1px solid var(--rand); }
.nx-werkzeug { border-bottom: 1px solid var(--rand); padding: 6px 10px; }
.nx-form { gap: 2px; }
.nx-btn { border: 0; background: none; color: var(--grau); border-radius: var(--radius-klein); padding: 6px 10px; font-weight: 500; font-size: .82rem;
  transition: background-color .15s var(--ease), color .15s var(--ease); }
.nx-btn:hover { background: var(--flaeche-2); color: var(--text); }
.nx-ham, .nx-spam { background: none; border: 0; }
.nx-ham:hover { color: var(--ok); }
.nx-spam:hover { color: var(--schlecht); }
.nx-gefahr:hover { color: var(--schlecht); background: var(--schlecht-hell); }
.nx-gefahr { color: var(--grau); }
.nx-btn.an { background: var(--akzent-hell); color: var(--akzent); border: 0; }
select.nx-btn { background: var(--flaeche-2); font-family: inherit; }
.nx-trenn { background: var(--rand); margin: 0 6px; }
.nx-kopf { padding: 18px 24px 14px; border-bottom: 1px solid var(--rand); }
.nx-betreff { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 14px; text-wrap: balance; }
.nx-avatar { width: 40px; height: 40px; font-size: .82rem; }
.nx-adr, .nx-an, .nx-datum { color: var(--grau); }
.nx-vonblock strong { font-weight: 600; }
.nx-score { background: var(--flaeche-2); border-radius: var(--radius-klein); }
.nx-score.nx-verdaechtig { background: var(--warn-hell); }
.nx-score.nx-spam { background: var(--schlecht-hell); }
.nx-dkim { background: var(--ok-hell); color: var(--ok); }
.nx-aktion { background: var(--rand); }
.nx-score.nx-spam .nx-aktion { background: var(--schlecht-hell); color: var(--schlecht); }
.nx-symbole summary { color: var(--akzent); }
.nx-symbole td.plus { color: var(--schlecht); } .nx-symbole td.minus { color: var(--ok); }
.bilder-hinweis { background: var(--flaeche-2); border: 0; border-radius: var(--radius-klein); margin: 12px 24px 0; }
.nx-koerper { padding: 18px 24px; }
.nx-koerper a { color: var(--akzent); }
.mail-zitat { border-left-color: var(--rand-stark); }
.nx-anhaenge { background: none; border-bottom: 1px solid var(--rand); padding: 10px 24px; gap: 8px; }
.nx-anh-titel { color: var(--grau); font-weight: 600; }
.nx-anh-titel .ic { margin-right: 2px; }
.nx-anhang { background: var(--flaeche-2); border: 0; border-radius: var(--radius-klein); padding: 5px 10px; }
.nx-anhang > a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.nx-anhang > a .ic { color: var(--grau); width: 16px; height: 16px; vertical-align: 0; }
.nx-anh-auf { border-left-color: var(--rand-stark); color: var(--akzent) !important; display: inline-flex; align-items: center; gap: 4px; }
.nx-anh-auf .ic, .serie { width: 14px; height: 14px; vertical-align: -2px; }
.nx-anh-auf .ic { vertical-align: 0; }
.nx-kopfzeilen-roh, .smtp-protokoll pre { background: var(--flaeche-2); color: var(--text); border-bottom: 0; }
.nx-fortschritt { background: transparent; height: 2px; }
.nx-fortschritt::before { background: var(--akzent); }

/* Termin-Einladung */
.einladung, .einladung.drin { background: var(--akzent-hell); border: 0; border-radius: var(--radius); margin: 14px 24px 0; padding: 12px 14px; }
.einladung.drin { background: var(--ok-hell); }
.einl-marke { color: var(--akzent); font-size: .78rem; text-transform: none; letter-spacing: 0; }
.einladung.drin .einl-marke { color: var(--ok); }
.einl-status { background: var(--flaeche); border: 0; }
.einl-status.ok { color: var(--ok); }
.einl-zeile { display: flex; align-items: center; gap: 8px; }
.einl-zeile .ic { width: 15px; height: 15px; color: var(--grau); vertical-align: 0; }

/* Tagesplan */
.wm-agenda { background: var(--hintergrund); padding: 12px; }
.mini-monat { background: var(--flaeche); border: 0; border-radius: var(--radius); padding: 8px; }
.mm-tag { border-radius: 6px; }
.mm-tag:hover { background: var(--flaeche-2); }
.mm-tag.fremd { color: var(--rand-stark); }
.mm-tag.heute { background: var(--akzent); color: var(--akzent-text); }
.mm-tag.hat::after { background: var(--akzent); }
.mm-tag.heute.hat::after { background: var(--akzent-text); }
.ag-tag { color: var(--grau); font-weight: 600; font-size: .78rem; }
a.ag-eintrag:hover { background: var(--flaeche-2); }
.ag-neu { display: flex; justify-content: center; align-items: center; }

/* Statuszeile */
.wm-status { background: var(--hintergrund); border-top: 1px solid var(--rand); }
.wm-status .rechts { background: var(--flaeche-2); border: 0; border-radius: var(--radius-klein); }

/* Verfassen */
body.mailneu-bare { background: var(--flaeche); }
.mn-kopf { border-bottom: 1px solid var(--rand); }
.mn-werkzeug { background: var(--flaeche); border-bottom: 1px solid var(--rand); }
.mn-werkzeug button { color: var(--grau); border: 0; border-radius: var(--radius-klein); display: inline-grid; place-items: center; }
.mn-werkzeug button:hover { background: var(--flaeche-2); border: 0; color: var(--text); }
.mn-werkzeug button .ic { width: 16px; height: 16px; vertical-align: 0; margin: 0; }
.mn-trenn { background: var(--rand); }
.mn-editor:focus { box-shadow: none; }
.mn-editor blockquote { border-left-color: var(--rand-stark); color: var(--grau); }
.mn-fuss { border-top: 1px solid var(--rand); }
.mn-anhang .ic { margin-right: 4px; vertical-align: -4px; }
dialog.compose-dlg, dialog.termin-dlg { background: var(--flaeche); color: var(--text); border: 0; border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0,0,0,.18); }
dialog.compose-dlg::backdrop, dialog.termin-dlg::backdrop { background: rgba(0,0,0,.32); }

/* Kalender-Seite */
.kalender { background: var(--rand); border: 0; border-radius: var(--radius); }
.kal-wochentag { background: var(--flaeche-2); text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--grau); }
.kal-tag { background: var(--flaeche); }
.kal-tag.kal-fremd { background: var(--hintergrund); }
.kal-tag.kal-we { background: var(--hell); }
.kal-tag.kal-heute { box-shadow: inset 0 0 0 1.5px var(--akzent); }
.kal-heute .kal-zahl { color: var(--akzent); font-weight: 700; }

/* Adressbuch, Filter */
.linkknopf { background: none; border: 0; color: var(--grau); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-grid; place-items: center; }
.linkknopf:hover { background: var(--flaeche-2); color: var(--schlecht); }
.linkknopf .ic { width: 16px; height: 16px; vertical-align: 0; }

/* Fremde Mail-Inhalte sind für helle Grundfarben gebaut: im Dunkelmodus als helles Blatt zeigen */
@media (prefers-color-scheme: dark) {
  .nx-koerper { background: #fff; color: #1c1d1f; margin: 16px 24px; padding: 18px 20px; border-radius: var(--radius); flex: none; overflow: visible; }
  .nx-koerper a { color: #2a5a85; }
  .mail-zitat { color: #666; }
  .nx-koerper blockquote { color: #666; }
}

/* Schmale Fenster: Kopf bricht um, Navigation scrollt waagerecht */
@media (max-width: 900px) {
  .kopf { flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; }
  .kopf nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; }
  .kopf nav a { white-space: nowrap; }
  .kopf-rechts { margin-left: auto; }
  .benutzername { display: none; }
  .wm { height: auto; }
  main { padding: 18px 14px 48px; }
  .block { padding: 14px; }
  .tabelle { display: block; overflow-x: auto; }
}

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