*{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#1E2347; --navy-2:#2B3162; --slate:#4E5689; --lilac:#9379B4;
  --lilac-strong:#7C5FA3; --lilac-soft:#B59BD4; --accent:#9379B4;
  --bg:#F6F6FA; --surface:#FFFFFF; --surface-2:#ECEDF5; --input-bg:#FFFFFF;
  --text:#1B2040; --text-soft:#3A4063; --muted:#5B6080;
  --border:#E1E3F0; --border-strong:#C9CCE2; --hover-bg:#ECEDF7; --link:#4E5689;
  --error:#C0394B; --ok:#2F8F5B;
  --shadow:0 14px 34px rgba(30,35,71,.12); --shadow-sm:0 2px 8px rgba(30,35,71,.08);
}
[data-theme="dark"]{
  --bg:#0B0E22; --surface:#141833; --surface-2:#10142E; --input-bg:#0F1330;
  --text:#EAECF9; --text-soft:#C6CAE6; --muted:#9CA3C9;
  --border:#252B52; --border-strong:#363D70; --hover-bg:#1A1F42; --link:#ADB4E8;
  --lilac-strong:#B59BD4; --error:#FF8B9B; --ok:#5CC98D;
  --shadow:0 16px 40px rgba(0,0,0,.45); --shadow-sm:0 2px 10px rgba(0,0,0,.4);
}
html,body{height:100%}
body{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--text)}
h1,h2,h3,h4{font-family:'Sora',sans-serif;letter-spacing:-.02em}
.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--link)}a:hover{color:var(--lilac-strong)}
button{font-family:inherit;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit;color:var(--text)}
[contenteditable]:empty:before{content:attr(data-placeholder);color:var(--muted)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
@keyframes nmxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes nmxScrim{from{opacity:0}to{opacity:1}}
@keyframes nmxToast{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes nmxFly{0%{transform:translateY(0)}50%{transform:translateY(-7px)}100%{transform:translateY(0)}}
@keyframes nmxSpin{to{transform:rotate(360deg)}}
.hidden{display:none!important}
.spin{animation:nmxSpin .8s linear infinite}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb,var(--lilac) 10%,var(--bg)), var(--bg))}
.login-card{width:100%;max-width:420px;animation:nmxIn .4s ease}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:38px 34px;box-shadow:var(--shadow)}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--lilac-strong);margin-bottom:8px}
.login-box h1{font-size:1.5rem;font-weight:800;margin-bottom:6px}
.login-sub{color:var(--muted);font-size:.92rem;margin-bottom:26px}
.field-label{display:block;font-weight:600;font-size:.86rem;margin-bottom:7px}
.tin{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border-strong);background:var(--input-bg);font-size:.95rem;outline:none}
.tin:focus{border-color:var(--lilac-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--lilac) 22%,transparent)}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);padding:6px;display:grid;place-items:center}
.form-error{color:var(--error);font-size:.82rem;margin-top:12px;display:flex;align-items:center;gap:7px}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 18px;border-radius:9px;background:var(--navy);color:#fff;font-weight:600;font-size:.88rem;border:0;transition:background .15s}
.btn-primary:hover{background:var(--navy-2)}
.btn-primary:disabled{opacity:.6;cursor:default}
[data-theme="dark"] .btn-primary{background:var(--lilac-strong);color:#14102A}
.btn-primary svg{width:16px;height:16px}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:9px;border:1px solid var(--border-strong);background:transparent;color:var(--text);font-weight:600;font-size:.86rem}
.btn-ghost:hover{background:var(--hover-bg)}
.btn-ghost svg{width:16px;height:16px}
.btn-danger{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:9px;border:1px solid var(--error);background:transparent;color:var(--error);font-weight:600;font-size:.86rem}
.btn-mini{padding:6px 11px;border-radius:7px;border:1px solid var(--border-strong);background:transparent;color:var(--text-soft);font-size:.78rem;font-weight:600}
.btn-mini:hover{background:var(--hover-bg)}
.btn-mini.danger{color:var(--error)}
.login-note{margin-top:22px;padding-top:18px;border-top:1px dashed var(--border-strong);display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem}
.login-foot{text-align:center;color:var(--muted);font-size:.76rem;margin-top:20px}

/* ---------- Sync ---------- */
.sync-wrap{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--bg);animation:nmxScrim .3s ease}
.sync-inner{text-align:center;max-width:360px;padding:24px;animation:nmxIn .4s ease}
.sync-env{animation:nmxFly 1.6s ease-in-out infinite;margin-bottom:22px}
.sync-bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin:18px 0 12px;border:1px solid var(--border)}
.sync-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--slate),var(--lilac));transition:width .45s cubic-bezier(.4,0,.2,1)}
.sync-step{color:var(--muted);font-size:.86rem;min-height:1.3em}
.sync-count{font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--lilac-strong);letter-spacing:.08em;margin-top:6px;min-height:1.2em}

/* ---------- Shell ---------- */
.app{height:100vh;display:flex;flex-direction:column}
.topbar{height:60px;flex:none;display:flex;align-items:center;gap:14px;padding:0 20px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:40}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand b{font-family:'Sora';font-weight:800;letter-spacing:.06em;font-size:.98rem}
.brand b span{color:var(--muted);font-weight:600;letter-spacing:0}
.topnav{display:flex;gap:2px;margin-left:8px}
.nav-btn{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:9px;border:0;background:transparent;font-size:.88rem;font-weight:600;color:var(--muted)}
.nav-btn:hover{background:var(--hover-bg)}
.nav-btn.active{color:var(--text);background:var(--hover-bg)}
.nav-btn svg{width:18px;height:18px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang-seg{display:flex;flex:none;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden;background:var(--surface)}
.lang-seg button{appearance:none;border:0;background:transparent;color:var(--muted);font-weight:600;font-size:.74rem;padding:7px 12px;font-family:'JetBrains Mono',monospace}
.lang-seg button.active{background:var(--navy);color:#fff}
[data-theme="dark"] .lang-seg button.active{background:var(--lilac-strong);color:#14102A}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-soft);flex:none}
.icon-btn:hover{background:var(--hover-bg)}
.icon-btn svg{width:17px;height:17px}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--slate),var(--lilac));color:#fff;display:grid;place-items:center;font-size:.78rem;font-weight:700;font-family:'Sora';flex:none;overflow:hidden;background-size:cover;background-position:center}
.user-chip{display:flex;align-items:center;gap:9px;background:none;border:0;padding:3px 4px 3px 3px;border-radius:999px}
.user-chip:hover{background:var(--hover-bg)}
.user-names{text-align:left;line-height:1.15}
.user-names .n{display:block;font-size:.84rem;font-weight:600;color:var(--text)}
.user-names .e{display:block;font-size:.72rem;color:var(--muted)}
.user-menu{position:absolute;right:0;top:46px;width:220px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:60;animation:nmxIn .12s ease}
.user-menu button{width:100%;display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;border:0;background:transparent;font-size:.88rem;font-weight:500;text-align:left}
.user-menu button:hover{background:var(--hover-bg)}
.user-menu svg{width:16px;height:16px}
.main{flex:1;display:flex;min-height:0}
.view{flex:1;min-height:0;display:flex}

/* ---------- Mail: Sidebar ---------- */
.sidebar{width:230px;flex:none;border-right:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;background:var(--surface)}
.btn-compose{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 16px;border-radius:11px;background:var(--navy);color:#fff;border:0;font-weight:600;font-size:.92rem;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.btn-compose:hover{background:var(--navy-2)}
[data-theme="dark"] .btn-compose{background:var(--lilac-strong);color:#14102A}
.btn-compose svg{width:16px;height:16px}
.folder-btn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:9px;border:0;background:none;color:var(--text-soft);font-size:.89rem;text-align:left;border-left:3px solid transparent}
.folder-btn:hover{background:var(--hover-bg)}
.folder-btn.active{background:color-mix(in srgb,var(--lilac) 14%,var(--bg));color:var(--text);font-weight:600;border-left-color:var(--lilac-strong)}
.folder-btn svg{width:16px;height:16px;flex:none;color:var(--muted)}
.folder-btn.active svg{color:var(--lilac-strong)}
.folder-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-row{display:flex;align-items:center;position:relative}
.folder-row .folder-btn{flex:1;min-width:0}
.folder-menu-btn{border:0;background:none;color:var(--muted);padding:4px 6px;border-radius:6px;opacity:0;font-size:.9rem;line-height:1;flex:none}
.folder-row:hover .folder-menu-btn{opacity:1}
.folder-menu-btn:hover{background:var(--hover-bg)}
@media (hover:none){.folder-menu-btn{opacity:1}}
.badge{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;color:var(--lilac-strong);background:color-mix(in srgb,var(--lilac) 18%,var(--surface));border-radius:999px;padding:2px 8px}
.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:7px}
.side-foot svg{width:14px;height:14px;flex:none}
.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.conn-dot.off{background:var(--error)}

/* ---------- Mail: Liste ---------- */
.listpane{width:380px;flex:none;border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;background:var(--surface)}
.list-head{flex:none;display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.list-head-row{display:flex;align-items:center;gap:10px}
.list-head h2{font-size:1.02rem;font-weight:700;flex:1}
.list-count{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--muted)}
.search-wrap{position:relative}
.search-wrap svg{width:16px;height:16px;position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search-in{width:100%;padding:9px 12px 9px 36px;border:1px solid var(--border-strong);border-radius:9px;background:var(--input-bg);font-size:.88rem;outline:none}
.search-in:focus{border-color:var(--lilac-strong)}
.filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sel{padding:8px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--input-bg);font-size:.82rem;cursor:pointer;outline:none}
.dens-seg{margin-left:auto;display:flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden}
.dens-seg button{padding:7px 10px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center}
.dens-seg button.active{background:var(--hover-bg);color:var(--text)}
.dens-seg svg{width:16px;height:16px}
.msg-scroll{flex:1;overflow-y:auto}
.msg-row{display:flex;gap:11px;width:100%;padding:13px 16px;border:0;border-bottom:1px solid var(--border);background:none;text-align:left;align-items:flex-start;color:var(--text);border-left:3px solid transparent;cursor:pointer;font-size:inherit}
.msg-row.compact{padding:9px 16px}
.msg-row:hover{background:var(--hover-bg)}
.msg-row.active{background:color-mix(in srgb,var(--lilac) 13%,var(--surface));border-left-color:var(--lilac-strong)}
.row-avatar{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;color:#fff;font-family:'Sora';font-weight:700;font-size:.82rem}
.msg-row.compact .row-avatar{width:30px;height:30px;font-size:.7rem}
.msg-meta{flex:1;min-width:0}
.msg-line1{display:flex;align-items:baseline;gap:8px}
.msg-from{font-weight:700;font-size:.88rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-row.seen .msg-from{font-weight:500;color:var(--text-soft)}
.msg-date{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--muted);flex:none}
.msg-subj{font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;display:flex;align-items:center;gap:6px}
.msg-row.seen .msg-subj{color:var(--muted);font-weight:400}
.msg-subj svg{width:13px;height:13px;flex:none;color:var(--muted)}
.unread-dot{width:8px;height:8px;border-radius:50%;background:var(--lilac-strong);flex:none}
.star-btn{background:none;border:0;padding:2px;color:var(--muted);flex:none}
.star-btn.on{color:#E8B23A}
.star-btn svg{width:16px;height:16px}
.list-more{margin:12px auto;display:block;padding:9px 20px;border-radius:9px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-soft);font-size:.85rem}
.list-more:hover{background:var(--hover-bg)}
.empty{padding:60px 24px;text-align:center;color:var(--muted);font-size:.9rem}

/* ---------- Mail: Lesen ---------- */
.readpane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.read-empty{flex:1;display:grid;place-items:center;color:var(--muted);font-size:.92rem}
.read-toolbar{flex:none;padding:10px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--surface)}
.tool-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text);font-size:.85rem;font-weight:500}
.tool-btn:hover{background:var(--hover-bg)}
.tool-btn svg{width:16px;height:16px}
.tool-btn.danger{color:var(--error)}
.tool-sep{width:1px;height:22px;background:var(--border);margin:0 4px}
.read-scroll{flex:1;min-height:0;overflow-y:auto;padding:26px 30px;display:flex;flex-direction:column}
.read-scroll h1{font-size:1.35rem;font-weight:700;margin-bottom:16px;overflow-wrap:anywhere}
.read-fromline{display:flex;align-items:center;gap:13px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.read-avatar{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff;font-family:'Sora';font-weight:700}
.read-who{flex:1;min-width:0}
.read-name{font-weight:600;font-size:.95rem}
.read-addr{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere;margin-top:3px}
.read-date{color:var(--muted);font-size:.8rem;white-space:nowrap}
.read-frame{flex:1;min-height:320px;width:100%;border:1px solid var(--border);border-radius:12px;background:#fff;margin-top:18px}
.attach-block{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.attach-label{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.attach-row{display:flex;gap:10px;flex-wrap:wrap}
.attach-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 13px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);font-size:.84rem;color:var(--text);text-decoration:none}
.attach-chip:hover{border-color:var(--lilac)}
.attach-ext{width:34px;height:38px;flex:none;display:grid;place-items:center;color:#fff;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:600;background:linear-gradient(135deg,var(--navy),var(--lilac-strong));clip-path:polygon(0 9%,100% 0,100% 91%,0 100%)}
.attach-size{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:.68rem}

/* ---------- Kalender ---------- */
.cal-wrap{flex:1;min-height:0;display:flex;flex-direction:column;padding:20px 24px;overflow:hidden}
.cal-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.cal-head h2{font-size:1.35rem;font-weight:700}
.cal-title{font-family:'Sora';font-weight:700;font-size:1.05rem}
.cal-seg{display:flex;border:1px solid var(--border-strong);border-radius:9px;overflow:hidden}
.cal-seg button{padding:8px 14px;border:0;background:transparent;font-size:.84rem;font-weight:600}
.cal-seg button.active{background:var(--navy);color:#fff}
[data-theme="dark"] .cal-seg button.active{background:var(--lilac-strong);color:#14102A}
.cal-month{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.cal-wd{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border)}
.cal-wd div{padding:9px 10px;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center}
.cal-grid{flex:1;min-height:0;display:grid;grid-template-rows:repeat(6,1fr)}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border)}
.cal-cell{border-right:1px solid var(--border);padding:5px 6px;display:flex;flex-direction:column;gap:3px;min-height:0;overflow:hidden;cursor:pointer}
.cal-cell.dim{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.cal-num{font-size:.78rem;font-weight:500;width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.cal-num.today{background:var(--lilac-strong);color:#fff;font-weight:700}
.cal-ev{font-size:.72rem;padding:2px 6px;border-radius:5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.calw-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;overflow-y:auto}
.calw-day{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:10px;min-height:180px;cursor:pointer}
.calw-head{font-size:.8rem;color:var(--muted)}
.calw-head.today{color:var(--lilac-strong);font-weight:700}
.calw-ev{font-size:.76rem;padding:5px 8px;border-radius:6px;color:#fff;cursor:pointer;margin-top:5px}
.cald-list{flex:1;min-height:0;overflow-y:auto;max-width:720px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.cald-ev{display:flex;gap:16px;align-items:stretch;padding:16px 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer}
.cald-ev:hover{border-color:var(--lilac)}
.cald-bar{width:4px;border-radius:4px;flex:none}
.cald-time{min-width:88px;flex:none;font-family:'JetBrains Mono',monospace}

/* ---------- Kontakte ---------- */
.ct-wrap{flex:1;min-height:0;display:flex;flex-direction:column;padding:20px 24px;overflow:hidden;max-width:960px;width:100%;margin:0 auto}
.ct-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ct-head h2{font-size:1.35rem;font-weight:700}
.ct-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;align-content:start}
.ct-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:20px}
.ct-card:hover{border-color:var(--lilac)}
.ct-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ct-av{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff;font-family:'Sora';font-weight:700}
.ct-lines{display:flex;flex-direction:column;gap:6px;font-size:.84rem;color:var(--text-soft)}
.ct-lines div{display:flex;align-items:center;gap:8px;min-width:0}
.ct-lines svg{width:14px;height:14px;flex:none;color:var(--muted)}
.ct-lines span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-actions{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}

/* ---------- Einstellungen ---------- */
.set-wrap{flex:1;min-height:0;overflow-y:auto}
.set-inner{max-width:760px;margin:0 auto;padding:26px 24px 60px}
.set-inner>h2{font-size:1.35rem;font-weight:700;margin-bottom:6px}
.set-sub{color:var(--muted);font-size:.9rem;margin-bottom:26px}
.set-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 28px;margin-bottom:18px}
.set-card h3{font-size:1.05rem;font-weight:700;margin-bottom:16px}
.set-label{display:block;font-weight:600;font-size:.84rem;margin:16px 0 7px}
.big-avatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:'Sora';font-weight:700;font-size:1.4rem;flex:none;overflow:hidden;background-size:cover;background-position:center;background-color:var(--slate)}
.sig-editor{min-height:120px;border:1px solid var(--border-strong);border-radius:10px;background:var(--input-bg);padding:14px 16px;font-size:.92rem;line-height:1.6;outline:none}
.hint{font-size:.78rem;color:var(--muted);margin-top:8px}
.srv-list{display:flex;flex-direction:column;gap:1px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.srv-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface-2)}
.srv-row .l{font-size:.86rem;color:var(--text-soft);flex:1}
.srv-row .v{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--muted)}
.srv-row svg{width:15px;height:15px;color:var(--muted);flex:none}
.pill-ok{font-family:'JetBrains Mono',monospace;margin-left:auto;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);border:1px solid var(--ok);border-radius:999px;padding:3px 10px}
.pill-ok.off{color:var(--error);border-color:var(--error)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* ---------- Modals ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(18,22,43,.55);display:flex;align-items:center;justify-content:center;padding:20px;animation:nmxScrim .2s ease}
.scrim.bottom{align-items:flex-end;padding-bottom:0}
.modal{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:26px;animation:nmxIn .18s ease;max-height:92vh;overflow-y:auto}
.compose{width:100%;max-width:720px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);animation:nmxIn .25s ease;overflow:hidden}
.compose-head{flex:none;display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--navy);color:#fff}
.compose-head h3{font-family:'Sora';font-weight:700;font-size:.98rem;flex:1}
.compose-head button{background:none;border:0;color:#fff;padding:4px;opacity:.85}
.compose-head button:hover{opacity:1}
.compose-head svg{width:19px;height:19px}
.compose-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.c-fields{padding:4px 20px}
.c-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}
.c-row label{width:52px;flex:none;font-size:.85rem;font-weight:600;color:var(--muted)}
.c-row input{flex:1;border:0;background:transparent;font-size:.92rem;outline:none}
.cc-toggle{background:none;border:0;color:var(--link);font-size:.82rem;font-weight:600;flex:none}
.rt-bar{display:flex;gap:2px;padding:8px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.rt-btn{width:34px;height:32px;display:grid;place-items:center;border-radius:7px;border:0;background:transparent}
.rt-btn:hover{background:var(--hover-bg)}
.rt-btn svg{width:16px;height:16px}
.c-editor-wrap{position:relative;padding:16px 20px;flex:1;min-height:0}
.c-editor{min-height:190px;outline:none;font-size:.95rem;line-height:1.65}
.drop-hint{position:absolute;inset:8px;border:2px dashed var(--lilac);border-radius:10px;background:color-mix(in srgb,var(--lilac) 8%,transparent);display:flex;align-items:center;justify-content:center;color:var(--lilac-strong);font-weight:600;pointer-events:none}
.c-atts{padding:0 20px 14px;display:flex;flex-wrap:wrap;gap:9px}
.c-att{display:flex;align-items:center;gap:9px;padding:7px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);font-size:.8rem}
.c-att .x{background:none;border:0;color:var(--muted);padding:2px;font-size:1rem;line-height:1}
.c-att .x:hover{color:var(--error)}
.compose-foot{flex:none;display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--border);flex-wrap:wrap}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:120;background:var(--navy);color:#fff;padding:11px 20px;border-radius:10px;font-size:.88rem;box-shadow:var(--shadow);animation:nmxToast .25s ease;display:flex;align-items:center;gap:9px}
.toast.err{background:var(--error)}
[data-theme="dark"] .toast{background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong)}

@media (max-width:1100px){.listpane{width:320px}}
@media (max-width:960px){
  .sidebar{width:60px;padding:16px 8px}
  .sidebar .folder-name,.sidebar .badge,.btn-compose span,.side-foot span{display:none}
  .btn-compose{justify-content:center;padding:12px}
  .folder-btn{justify-content:center;border-left:0}
  .listpane{width:290px}
  .user-names{display:none}
  .nav-btn span{display:none}
}
@media (max-width:720px){
  .topbar{padding:0 10px;gap:8px}
  .brand b span{display:none}
  .lang-seg{display:none}
  .readpane{position:fixed;inset:60px 0 0 0;z-index:50;display:none;background:var(--bg)}
  .readpane.mobile-open{display:flex}
  #view-mail{flex-direction:column}
  .sidebar{width:100%;flex-direction:row;align-items:center;gap:6px;padding:8px 10px;border-right:0;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden}
  .btn-compose{margin-bottom:0;flex:none}
  #folder-list{display:flex;flex-direction:row;gap:4px}
  .folder-btn{width:auto;flex:none;padding:8px 10px;justify-content:center;border-left:0}
  .side-foot{display:none}
  .listpane{flex:1;width:auto;border-right:0}
  .scrim{padding:0}
  .compose{max-width:100%;max-height:100vh;height:100%;border-radius:0;margin:0}
  .read-scroll{padding:18px 14px}
  .read-toolbar{padding:8px 10px}
  .tool-btn{padding:8px 8px;font-size:.8rem}
  .cal-wrap,.ct-wrap{padding:14px 12px}
  .calw-grid{grid-template-columns:repeat(2,1fr)}
  .cal-ev{font-size:.6rem;padding:1px 4px}
  .cal-head .btn-primary span{display:none}
  .set-inner{padding:20px 14px 60px}
  .set-card{padding:18px 16px}
  .grid2{grid-template-columns:1fr}
  .modal{padding:20px 16px}
}


/* ---------- Empfänger-Chips ---------- */
.c-row .chip-wrap{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;padding:4px 0}
.c-row .chip-wrap input{flex:1 1 140px;min-width:120px;width:auto;border:0;background:none;outline:none;padding:4px 0;font:inherit;color:inherit}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2,#EDEFF6);border:1px solid var(--border);border-radius:999px;padding:3px 5px 3px 11px;font-size:.82rem;line-height:1.3;max-width:100%;overflow-wrap:anywhere}
.chip button{border:0;background:none;cursor:pointer;color:inherit;font-size:.95rem;line-height:1;padding:2px 5px;border-radius:50%;opacity:.65}
.chip button:hover{opacity:1;background:rgba(0,0,0,.08)}
.chip.bad{border-color:var(--error);color:var(--error);background:rgba(192,57,75,.08)}
