/* Layout: Schiene | oben Postfach (Ordner + Liste) und Kalender/Lesebereich/Chat | unten vier Karten: Chat, Termine, Aufgaben, Notizen */
:root{
  --bg:#e3ebeb; --glow:rgba(33,170,146,.24); --card:#ffffff; --card-2:#f3f8f8; --line:#d8e3e4;
  --fg:#12201f; --muted:#587070; --accent:#16796b; --accent-fg:#ffffff; --accent-soft:#d4ece7; --sel:#e0f2ee;
  --rail:#10302b; --rail-fg:#b9d4ce; --c1:#139aa0; --c2:#2f9d63; --c3:#3b78d8;
  --e1:#117f86; --e2:#16825a; --e3:#2a62b8; --e4:#7a4bc4; --e5:#b85f0c; --e6:#b8386b;
  --flag:#d6451a; --danger:#b42318; --av-bg-l:88%; --av-fg-l:26%; --shadow:0 6px 24px rgba(10,40,36,.08);
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070e10; --glow:rgba(32,200,160,.27); --card:#0f1a1e; --card-2:#132227; --line:#1f3137;
    --fg:#e6f0f1; --muted:#8aa0a6; --accent:#3cc9b3; --accent-fg:#03201b; --accent-soft:#17403c; --sel:#103a3a;
    --rail:#0c1619; --rail-fg:#8fb0ab; --c1:#2ec4c9; --c2:#3fc27d; --c3:#5b9bf5;
    --flag:#ff6b5b; --danger:#f97066; --av-bg-l:24%; --av-fg-l:84%; --shadow:0 8px 30px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#070e10; --glow:rgba(32,200,160,.27); --card:#0f1a1e; --card-2:#132227; --line:#1f3137;
  --fg:#e6f0f1; --muted:#8aa0a6; --accent:#3cc9b3; --accent-fg:#03201b; --accent-soft:#17403c; --sel:#103a3a;
  --rail:#0c1619; --rail-fg:#8fb0ab; --c1:#2ec4c9; --c2:#3fc27d; --c3:#5b9bf5;
  --flag:#ff6b5b; --danger:#f97066; --av-bg-l:24%; --av-fg-l:84%; --shadow:0 8px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--fg);font:14px/1.45 var(--f-body);
  background-color:var(--bg);background-image:radial-gradient(78% 44% at 60% -8%,var(--glow),transparent 72%);background-repeat:no-repeat;
  padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono);font-size:12.5px}

.shell{height:100%;display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px}
.topbar,.fab,.only-m,.scrim,.mseg{display:none}
.mainwrap{display:flex;flex-direction:column;min-width:0;min-height:0;gap:12px}
.dtop{display:flex;align-items:center;gap:10px;min-height:40px}
.dtop .today{margin-right:auto;color:var(--muted);font-size:13.5px}
.user{display:flex;align-items:center;gap:9px;font-weight:500}
.user .av{width:32px;height:32px;font-size:12px}

/* Schiene */
.rail{background:var(--rail);border:1px solid var(--line);border-radius:16px;color:var(--rail-fg);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0}
.logo{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;font:500 15px var(--f-mono);margin-bottom:12px}
.rbtn{position:relative;width:42px;height:42px;border-radius:10px;border:0;background:transparent;color:inherit;display:grid;place-items:center}
.rbtn:hover{background:rgba(255,255,255,.08)}
.rbtn.on{background:rgba(255,255,255,.12);color:#fff}
.rbtn.on::before{content:"";position:absolute;left:-9px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--accent)}
.rbtn .badge{position:absolute;top:3px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:var(--accent-fg);font:600 10px/16px var(--f-body);text-align:center}
.spacer{flex:1}

/* Raster */
.board{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(420px,1fr) minmax(220px,29%);gap:14px;overflow:auto;padding:1px}
.mailcard{grid-column:1 / 3}
.rightcard{grid-column:3 / 5}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.card.ping{animation:ping .9s ease-out}
@keyframes ping{0%{box-shadow:0 0 0 0 var(--accent)}100%{box-shadow:0 0 0 12px transparent}}
.chead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px 10px}
.chead h2{margin:0;font-size:16px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.wbody{flex:1;min-height:0;overflow:auto;padding:0 18px 16px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card-2);white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:500}
.btn.primary:hover{filter:brightness(1.07)}
.btn.wide{width:100%;justify-content:center;padding:9px 11px}
.btn.danger{color:var(--danger)}
.btn.sm{padding:4px 9px;font-size:13px}
.ibtn{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid transparent;border-radius:8px;background:transparent}
.ibtn:hover{background:var(--sel)}
.ibtn.xs{width:26px;height:26px}
.menuwrap{position:relative;display:inline-block}
.menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.3);padding:5px}
.menu.r{left:auto;right:0}
.menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;padding:7px 9px;border-radius:6px}
.menu button:hover{background:var(--sel)}

/* Postfach-Karte */
.mailcard{display:grid;grid-template-columns:minmax(176px,222px) minmax(0,1fr)}
.side{border-right:1px solid var(--line);padding:16px 12px 12px;display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0}
.brand{padding:0 6px 8px}
.brand h2{margin:0;font-size:16px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.side-h{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 6px 2px}
.fbtn{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:9px;align-items:center;width:100%;text-align:left;padding:7px 8px;border:0;border-radius:8px;background:transparent}
.fbtn:hover{background:var(--card-2)}
.fbtn.on{background:var(--sel);font-weight:600}
.fbtn.on svg{color:var(--accent)}
.fbtn .n{font:500 12px var(--f-mono);color:var(--muted)}
.fbtn .n.u{color:var(--accent);font-weight:600}
.side-foot{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:6px}
.demo{font-size:12px;color:var(--muted);line-height:1.4;border-top:1px solid var(--line);padding-top:10px}
.linkish{border:0;background:transparent;color:var(--fg);display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;text-align:left}
.linkish:hover{background:var(--card-2)}
.listcol{display:flex;flex-direction:column;min-height:0;min-width:0}
.lhead{padding:16px 16px 10px;display:grid;gap:10px}
.lhead h2{margin:0;font-size:16px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card-2);border-radius:9px;padding:0 10px;color:var(--muted)}
.search:focus-within{border-color:var(--accent)}
.search input{flex:1;min-width:0;border:0;background:transparent;padding:8px 0;outline:0;color:var(--fg)}
.tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tab{border:0;background:transparent;padding:4px 10px;border-radius:7px;color:var(--muted);font-weight:500}
.tab:hover{background:var(--card-2)}
.tab.on{background:var(--sel);color:var(--fg)}
.chk{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.items{flex:1;overflow:auto;min-height:0;padding:0 12px 14px;display:flex;flex-direction:column;gap:8px}
.grp{position:sticky;top:0;z-index:1;background:var(--card);padding:8px 4px 2px;font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.item{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"av from time" "av subj flag" "av prev prev";
  gap:1px 11px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--bar,var(--c1));border-radius:10px;background:var(--card-2);cursor:pointer;flex:none}
.item:hover{border-color:var(--bar,var(--c1))}
.item.sel{outline:2px solid var(--accent);outline-offset:-1px;background:var(--sel)}
.av{grid-area:av;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:500 12.5px var(--f-body);
  background:hsl(var(--h) 34% var(--av-bg-l));color:hsl(var(--h) 38% var(--av-fg-l))}
.av.lg{width:42px;height:42px;font-size:14px}
.from{grid-area:from;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px}
.time{grid-area:time;font:400 12px var(--f-mono);color:var(--muted);align-self:center}
.subj{grid-area:subj;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl{grid-area:flag;color:var(--flag);display:flex;justify-content:flex-end}
.prev{grid-area:prev;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item.unread .from,.item.unread .subj{font-weight:600}
.tag{font:500 10.5px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:6px}
.none{padding:36px 20px;text-align:center;color:var(--muted)}

/* Lesebereich (ersetzt den Kalender, solange eine Nachricht offen ist) */
.rightcard{display:flex}
#reader{display:none;flex-direction:column;flex:1;min-width:0;min-height:0}
#calview{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
.shell[data-right="read"] #reader{display:flex}
.shell[data-right="read"] #calview{display:none}
.rtool{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.rtool .sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.rscroll{flex:1;overflow:auto;padding:20px clamp(16px,3vw,32px) 26px}
.rscroll h1{margin:0 0 16px;font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.meta .who{overflow-wrap:anywhere}
.meta .sub{overflow-wrap:anywhere}
.msg{white-space:pre-wrap;max-width:68ch;line-height:1.6;overflow-wrap:anywhere}
.msg .q{color:var(--muted)}
.evcard{margin-top:22px;max-width:68ch;border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:4px;background:var(--card-2)}
.evcard .h{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.evcard .t{font-weight:600}
.evcard .btn{margin-top:8px;justify-self:start}
.rbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.rempty{flex:1;display:grid;place-items:center;text-align:center;color:var(--muted);padding:24px}

/* Kalender, Wochenansicht */
.ctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.weekwrap{flex:1;overflow:auto;min-height:0}
.week{min-width:640px}
.wh{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));background:var(--card);border-bottom:1px solid var(--line)}
.wh span{text-align:center;padding:8px 2px;font-size:13.5px;color:var(--muted)}
.wh span.today{color:var(--accent);font-weight:600}
.wb{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));margin-top:10px}
.gut span{display:block;height:46px;font:400 11.5px var(--f-mono);color:var(--muted);text-align:right;padding-right:8px;transform:translateY(-7px)}
.dcol{position:relative;border-left:1px solid var(--line);background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 46px;cursor:cell}
.dcol.today::before{content:"";position:absolute;inset:0;background:var(--accent);opacity:.07;pointer-events:none}
.ev{position:absolute;border-radius:8px;padding:3px 7px;font-size:12px;line-height:1.25;color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,.2);text-align:left;cursor:pointer;display:block}
.ev b{display:block;font:500 11px var(--f-mono)}
.ev .pl{opacity:.85}
.e1{background:var(--e1)} .e2{background:var(--e2)} .e3{background:var(--e3)} .e4{background:var(--e4)} .e5{background:var(--e5)} .e6{background:var(--e6)}
.now{position:absolute;left:0;right:0;border-top:2px solid var(--flag);z-index:2;pointer-events:none}
.now::before{content:"";position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--flag)}

/* Karten unten */
.widget .chead{padding-bottom:6px}
.wx{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wx .temp{font-size:44px;font-weight:300;line-height:1;letter-spacing:-.02em}
.wx .meta2{color:var(--muted);font-size:13px;display:grid;gap:2px;margin-top:6px}
.fc{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;text-align:center;font-size:12.5px;color:var(--muted)}
.fc b{display:block;color:var(--fg);font-weight:500}
.tl,.nl{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tl li,.nl li{display:flex;align-items:center;gap:10px;padding:5px 2px;border-radius:8px}
.tl li:hover,.nl li:hover{background:var(--card-2)}
.tl .tx,.nl .tx{flex:1;min-width:0;overflow-wrap:anywhere}
.tl li.done .tx{color:var(--muted);text-decoration:line-through}
.cb{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);background:transparent;display:grid;place-items:center;flex:none;padding:0;color:var(--accent-fg)}
.cb.on{background:var(--accent);border-color:var(--accent)}
.addrow{display:flex;gap:8px;margin-top:10px}
.addrow input{flex:1;min-width:0;border:1px solid var(--line);background:var(--card-2);border-radius:8px;padding:6px 10px;color:var(--fg)}
.addrow input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.news{display:grid;gap:10px}
.nw{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:12px;align-items:center}
.nw .th{width:64px;height:44px;border-radius:8px;display:grid;place-items:center;color:#fff}
.nw .hd{font-weight:500;line-height:1.3}
.nw .src{font-size:12px;color:var(--muted)}
.nl .ni{color:var(--muted);flex:none;display:grid}

/* Formulare und Dialoge */
.form{display:grid;gap:8px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fld{display:grid;gap:3px;font-size:12.5px;color:var(--muted);min-width:0}
.fld[hidden]{display:none}
.fld input,.fld select,.fld textarea{border:1px solid var(--line);background:var(--card-2);border-radius:8px;padding:7px 9px;color:var(--fg);width:100%;min-width:0}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.modal{position:fixed;inset:0;z-index:50;background:rgba(2,10,10,.55);display:grid;place-items:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.modal[hidden]{display:none}
.sheet{width:min(680px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:hidden}
.sheet.narrow{width:min(460px,100%)}
.sheet header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.sheet h3{margin:0;font-size:16px;font-weight:600}
.sheet .body{padding:14px 16px;overflow:auto;display:grid;gap:10px}
.sheet footer{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:var(--card-2)}
.sheet textarea{min-height:220px;resize:vertical;line-height:1.55}
.err{color:var(--danger);font-size:13px;min-height:18px}
.rule{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 11px;border:1px solid var(--line);border-radius:9px}
.rule span{overflow-wrap:anywhere}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:60;
  background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:10px;display:flex;gap:14px;align-items:center;max-width:min(560px,calc(100% - 32px));box-shadow:0 12px 40px rgba(0,0,0,.35);transition:opacity .18s,transform .18s}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{border:0;background:transparent;color:inherit;font-weight:600;text-decoration:underline;padding:0}

@media (max-width:1280px){
  .rtool .lbl{display:none}
}
@media (max-width:1099px) and (min-width:901px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:560px 620px 280px 280px}
  .mailcard,.rightcard{grid-column:1 / -1}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail,.dtop,.only-d{display:none}
  .topbar{display:flex;align-items:center;gap:8px}
  .topbar h1{margin:0 auto 0 0;font-size:16px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mseg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--card)}
  .mseg button{border:0;background:transparent;width:38px;height:34px;display:grid;place-items:center;color:var(--muted)}
  .mseg button.on{background:var(--sel);color:var(--fg)}
  .topbar .ibtn{background:var(--card);border-color:var(--line)}
  .only-m{display:inline-grid}
  .board{display:flex;flex-direction:column;overflow:auto}
  .mailcard,.rightcard{flex:1;min-height:0}
  .widget{flex:none;min-height:240px}
  .mailcard{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;z-index:40;left:0;top:0;bottom:0;width:min(290px,86vw);background:var(--card);transform:translateX(-102%);transition:transform .2s;
    box-shadow:0 12px 40px rgba(0,0,0,.4);padding-top:max(16px,env(safe-area-inset-top,0px));padding-left:max(12px,env(safe-area-inset-left,0px));border-right:1px solid var(--line)}
  .side.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:0;z-index:35;background:rgba(2,10,10,.5)}
  .shell[data-panel="mail"][data-view="list"] .rightcard,.shell[data-panel="mail"][data-view="list"] .widget{display:none}
  .shell[data-panel="mail"][data-view="read"] .mailcard,.shell[data-panel="mail"][data-view="read"] .widget{display:none}
  .shell[data-panel="cal"] .mailcard,.shell[data-panel="cal"] .widget{display:none}
  .shell[data-panel="dash"] .mailcard,.shell[data-panel="dash"] .rightcard{display:none}
  .shell[data-panel="mail"] #reader{display:flex}
  .shell[data-panel="mail"] #calview{display:none}
  .shell[data-panel="cal"] #reader{display:none}
  .shell[data-panel="cal"] #calview{display:flex}
  .fab{position:fixed;z-index:20;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
    width:52px;height:52px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-fg);place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}
  .shell[data-panel="mail"][data-view="list"] ~ .fab{display:grid}
  .rtool{padding:8px 10px}
  .chead{padding:14px 14px 8px}
}
@media (max-width:420px){
  .form .two{grid-template-columns:1fr}
  .user span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== Ergänzungen für die Web-App ===== */
.btn:disabled{opacity:.55;cursor:default}
.login{min-height:100%;display:grid;place-items:center;padding:24px 0}
.loginbox{width:min(400px,100%);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:28px 26px;display:grid;gap:12px}
.loginbox h1{margin:0;font-size:20px;font-weight:600}
.loginbox .logo{margin:0 0 2px}
.loadnote{padding:22px 16px;text-align:center;color:var(--muted)}
.loadnote .btn{margin-top:10px}
.morebtn{align-self:center;margin:6px 0 10px}
.att{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;max-width:68ch}
.att a{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card-2);color:var(--fg);text-decoration:none}
.att a:hover{border-color:var(--accent)}
.att small{color:var(--muted)}
.note-info{font-size:12.5px;color:var(--muted);background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.fld .hint{font-size:12px;color:var(--muted)}
.sheet .tight{display:grid;gap:8px}
.badge.inl{position:static;display:inline-block;margin-left:6px}
.when{font:400 12px var(--f-mono);color:var(--muted);white-space:nowrap}
.nl li.click{cursor:pointer}
.nl .tx small{display:block;color:var(--muted)}
.cbadge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--accent-fg);font:600 11px/18px var(--f-body);text-align:center}

/* Chat */
#chatview{display:none;flex:1;min-width:0;min-height:0}
.shell[data-right="chat"] #chatview{display:flex}
.shell[data-right="chat"] #calview,.shell[data-right="chat"] #reader{display:none}
.chat{display:grid;grid-template-columns:minmax(170px,230px) minmax(0,1fr);flex:1;min-width:0;min-height:0}
.clist{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;min-width:0}
.cl-items{flex:1;overflow:auto;padding:0 10px 12px;display:flex;flex-direction:column;gap:4px}
.crow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"av t time" "av p badge";gap:0 10px;align-items:center;padding:8px;border:0;border-radius:10px;background:transparent;text-align:left;width:100%}
.crow:hover{background:var(--card-2)}
.crow.on{background:var(--sel)}
.crow .av{grid-area:av;width:34px;height:34px;position:relative;overflow:visible}
.crow .t{grid-area:t;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .p{grid-area:p;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .when{grid-area:time}
.crow .cbadge{grid-area:badge;justify-self:end}
.crow.unread .t,.crow.unread .p{font-weight:600;color:var(--fg)}
.onl{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--c2);border:2px solid var(--card)}
.cthread{display:flex;flex-direction:column;min-width:0;min-height:0}
.cth-head{padding:14px 16px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;min-height:58px}
.cth-head .tt{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmsgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-height:0}
.day{align-self:center;font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
.bub{max-width:min(78%,60ch);padding:7px 11px;border-radius:14px;background:var(--card-2);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;align-self:flex-start}
.bub.me{align-self:flex-end;background:var(--accent-soft);border-color:transparent}
.bub .who{display:block;font-size:12px;font-weight:600;color:var(--accent);margin-bottom:1px}
.bub .tm{display:block;font:400 10.5px var(--f-mono);color:var(--muted);text-align:right;margin-top:2px}
.bub a{color:var(--accent)}
.ccomp{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line)}
.ccomp textarea{flex:1;min-height:38px;max-height:140px;resize:none;border:1px solid var(--line);background:var(--card-2);border-radius:10px;padding:8px 10px;line-height:1.4}
.ccomp textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.cempty{flex:1;display:grid;place-items:center;color:var(--muted);padding:24px;text-align:center}
.pick{display:grid;gap:4px;max-height:280px;overflow:auto}
.pick label.row,.pick button.row{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--card-2);text-align:left;color:var(--fg)}
.pick button.row:hover{border-color:var(--accent)}
.pick input[type=checkbox]{width:auto}
@media (min-width:901px){.chat .only-m{display:none!important}}
@media (max-width:900px){
  .shell[data-panel="chat"] .mailcard,.shell[data-panel="chat"] .widget{display:none}
  .shell[data-panel="chat"] #reader,.shell[data-panel="chat"] #calview{display:none}
  .shell[data-panel="chat"] #chatview{display:flex}
  .shell[data-panel="mail"] #chatview,.shell[data-panel="cal"] #chatview{display:none}
  .chat{grid-template-columns:minmax(0,1fr)}
  .chat[data-m="list"] .cthread{display:none}
  .chat[data-m="thread"] .clist{display:none}
  .bub{max-width:88%}
}

/* Wetter */
#weatherview{display:none;flex-direction:column;flex:1;min-width:0;min-height:0}
.shell[data-right="weather"] #weatherview{display:flex}
.shell[data-right="weather"] #calview,.shell[data-right="weather"] #reader,.shell[data-right="weather"] #chatview{display:none}
.wxbody{flex:1;min-height:0;overflow:auto;padding:0 18px 18px}
.wxnow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:6px 0 14px}
.wxico{color:var(--c1);display:grid}
.wxnow .temp{font-size:48px;font-weight:300;line-height:1;letter-spacing:-.02em}
.wxtxt{color:var(--muted);margin-top:4px}
.wxmeta{display:grid;gap:4px;color:var(--muted);font-size:13px;margin-left:auto}
.wxmeta span{display:flex;align-items:center;gap:7px}
.wxh{display:flex;gap:6px;overflow-x:auto;padding:6px 0 10px}
.wxh .hr{flex:none;width:62px;display:grid;justify-items:center;gap:3px;padding:8px 4px;border:1px solid var(--line);border-radius:10px;background:var(--card-2);font-size:13px}
.hi{color:var(--c1);display:grid}
.pop{font-size:11.5px;color:var(--c3);min-height:15px;display:inline-flex;align-items:center;gap:3px}
.wxd{display:grid;gap:2px}
.wxd .dy{display:grid;grid-template-columns:minmax(64px,92px) 26px minmax(46px,60px) 34px minmax(60px,1fr) 34px;gap:8px;align-items:center;padding:7px 4px;border-radius:8px}
.wxd .dy:hover{background:var(--card-2)}
.wxd .tn{text-align:right}
.wxd .rng{position:relative;height:6px;border-radius:3px;background:var(--line)}
.wxd .rng i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,var(--c3),var(--c2))}
.wxsearch{display:grid;gap:8px;margin-top:10px;max-width:460px}
.wxres{display:grid;gap:4px}
.wxpick{display:grid;gap:1px;text-align:left;border:1px solid var(--line);background:var(--card-2);border-radius:9px;padding:8px 11px}
.wxpick:hover{border-color:var(--accent)}
.none svg{color:var(--c1)}
.none p{margin:8px 0 0}
@media (max-width:900px){
  .mseg button{width:34px}
  .shell[data-panel="weather"] .mailcard,.shell[data-panel="weather"] .widget{display:none}
  .shell[data-panel="weather"] #reader,.shell[data-panel="weather"] #calview,.shell[data-panel="weather"] #chatview{display:none}
  .shell[data-panel="weather"] #weatherview{display:flex}
  .shell[data-panel="mail"] #weatherview,.shell[data-panel="cal"] #weatherview,.shell[data-panel="chat"] #weatherview{display:none}
  .wxmeta{margin-left:0}
  .wxd .dy{grid-template-columns:minmax(58px,80px) 24px 1fr 30px minmax(40px,70px) 30px;gap:6px}
}

/* Mehrere Postfächer */
.fbtn.acc .n{min-width:1ch}
.fbtn.acc span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acclist{display:grid;gap:8px}
.accrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;flex-wrap:wrap}
.accrow .info{flex:1;min-width:140px;overflow-wrap:anywhere}
.accrow .info small{display:block;color:var(--muted);font-size:12.5px}
.accrow .acts{display:flex;gap:6px;flex-wrap:wrap}
.provgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.provgrid .btn{justify-content:center}
.warn{color:var(--flag);font-size:13px}

/* Kalender: Liste, Ganztägiges, Dialoge */
.calbar{display:flex;gap:6px;flex-wrap:wrap;padding:0 18px 8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border:1px solid var(--line);border-radius:999px;background:var(--card-2);font-size:12.5px;max-width:100%}
.chip:hover{border-color:var(--accent)}
.chip .dot{width:9px;height:9px;border-radius:50%;flex:none}
.chip.off{opacity:.5}
.chip.off .dot{background:transparent!important;border:1.5px solid var(--muted)}
.chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh .ad{padding:2px 2px 4px;display:grid;gap:2px;align-content:start;text-align:left}
.wh .adl{font:400 10.5px var(--f-mono);color:var(--muted);text-align:right;padding:6px 8px 0 0}
.adev{display:block;width:100%;text-align:left;border-radius:5px;padding:1px 6px;font-size:11.5px;line-height:1.35;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0}
.adev.cont{opacity:.72}
.ev.ro{border-style:dashed}
.ev .rp{opacity:.8}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;display:grid;place-items:center;color:#fff;padding:0}
.sw.on{border-color:var(--fg)}
.fld.chk{display:flex;align-items:center;gap:8px;color:var(--fg);font-size:14px}
.fld.chk input{width:auto}
.sheet textarea.sm{min-height:70px}
.linkbox{display:flex;gap:6px}
.linkbox input{flex:1;min-width:0;font:12.5px var(--f-mono)}
.sect{display:grid;gap:8px}
.sect+.sect{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.shrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px}
.shrow select{width:auto;min-width:130px}
.note-info code{font:12px var(--f-mono);overflow-wrap:anywhere}