:root{
  --bg:#eef1f3; --surface:#ffffff; --surface-2:#f6f8f9;
  --ink:#14191e; --ink-2:#4b565f; --ink-3:#7b8792;
  --line:#d8dee3; --line-strong:#b9c3cb;
  --accent:#15607d; --accent-soft:#e3eef3;
  --warn:#8a5a00; --warn-soft:#fbf0dc;
  --ok:#1f6b45; --ok-soft:#e2f0e8;
  --alert:#9c3328; --alert-soft:#fae7e4;
  --violet:#54468c; --violet-soft:#eae7f4;
  --teal:#0f6a6a; --teal-soft:#dff0ef;
  --shadow:0 1px 2px rgba(16,28,38,.06), 0 4px 14px rgba(16,28,38,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1317; --surface:#171d23; --surface-2:#1d242b;
    --ink:#e8edf1; --ink-2:#a8b4be; --ink-3:#7a8792;
    --line:#2a333b; --line-strong:#3a454f;
    --accent:#6fb6d4; --accent-soft:#16333f;
    --warn:#e0ab5a; --warn-soft:#3a2d16;
    --ok:#6fc396; --ok-soft:#173226;
    --alert:#e59084; --alert-soft:#3a1f1b;
    --violet:#a89ce0; --violet-soft:#26224a;
    --teal:#63c2bf; --teal-soft:#123232;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.45;
}
.wrap{max-width:1140px; margin:0 auto; padding-inline:16px; padding-block:0 60px}

header.top{
  position:sticky; top:0; z-index:20;
  background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
}
.top-inner{max-width:1140px; margin:0 auto; padding:12px 16px;
  display:flex; flex-wrap:wrap; gap:10px 20px; align-items:baseline}
h1{font-size:17px; font-weight:600; margin:0; display:flex; align-items:baseline; gap:10px}
h1 .date{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; font-weight:400; color:var(--ink-3)}
.counts{display:flex; gap:16px; margin-left:auto; font-size:13px}
.counts b{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:15px;
  display:block; font-variant-numeric:tabular-nums}
.counts span{color:var(--ink-3); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em}
.c-neu b{color:var(--accent)} .c-wv b{color:var(--warn)} .c-erl b{color:var(--ok)}
.abmelden{font-size:12px; color:var(--ink-3); text-decoration:none; border:1px solid var(--line);
  border-radius:5px; padding:3px 9px}
.abmelden:hover{color:var(--accent); border-color:var(--accent)}

.meldung{border-radius:6px; padding:10px 14px; margin:14px 0; font-size:13.5px}
.meldung.ok{background:var(--ok-soft); color:var(--ok)}
.meldung.fehler{background:var(--alert-soft); color:var(--alert)}

.filters{display:flex; gap:8px; overflow-x:auto; padding:12px 0 4px; -webkit-overflow-scrolling:touch}
.filters + .filters{padding-top:0}
.filter-label{flex:0 0 auto; align-self:center; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-3); padding-right:4px; min-width:58px}
.chip{flex:0 0 auto; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink-2); border-radius:999px; padding:5px 13px; font-size:13px;
  text-decoration:none; white-space:nowrap; display:inline-block}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip.aktiv{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500}
@media (prefers-color-scheme: dark){ .chip.aktiv{color:#0e1317} }
.chip .n{font-family:"IBM Plex Mono",monospace; font-size:11.5px; opacity:.7; margin-left:6px;
  font-variant-numeric:tabular-nums}

.group-head{display:flex; align-items:baseline; gap:10px; margin:26px 0 8px;
  padding-bottom:6px; border-bottom:1px solid var(--line)}
.group-head h2{font-size:13px; font-weight:600; margin:0}
.group-head .meta{font-size:12px; color:var(--ink-3); margin-left:auto;
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}

ul.list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
li.mail{background:var(--surface); display:grid; grid-template-columns:52px 1fr auto;
  gap:2px 12px; padding:11px 14px; align-items:start; border-left:3px solid transparent}
li.mail:first-child{border-radius:6px 6px 0 0}
li.mail:last-child{border-radius:0 0 6px 6px}
li.mail.done{opacity:.55}
li.mail.wv{border-left-color:var(--warn)}
li.mail.faellig{border-left-color:var(--alert)}
li.mail.unread .subject{font-weight:600}

.time{grid-column:1; grid-row:1 / span 4; font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  color:var(--ink-3); padding-top:2px; font-variant-numeric:tabular-nums}
.from{grid-column:2; font-size:14px; font-weight:600}
.subject{grid-column:2; font-size:13.5px; color:var(--ink-2); overflow-wrap:anywhere}
.tags{grid-column:2; display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:5px}
.cat{font-size:11px; font-weight:600; padding:2px 8px; border-radius:4px; white-space:nowrap}
.cat-rechnung{background:var(--warn-soft); color:var(--warn)}
.cat-stb{background:var(--violet-soft); color:var(--violet)}
.cat-ab{background:var(--ok-soft); color:var(--ok)}
.cat-avis{background:var(--teal-soft); color:var(--teal)}
.cat-behoerde{background:var(--alert-soft); color:var(--alert)}
.cat-kunde{background:var(--accent-soft); color:var(--accent)}
.cat-werbung{background:var(--surface-2); color:var(--ink-3)}
.cat-sonstiges{background:var(--surface-2); color:var(--ink-3)}
.unsicher{opacity:.72; border:1px dashed currentColor}
.box{font-size:11px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace;
  border:1px solid var(--line); border-radius:4px; padding:1px 6px}
.att{font-size:11.5px; color:var(--ink-3)}
.wv-note{font-size:11.5px; color:var(--warn); font-weight:500}
.wv-note.faellig{color:var(--alert)}

.actions{grid-column:3; grid-row:1 / span 4; display:flex; gap:5px;
  align-items:flex-start; padding-top:1px}
.btn{font-family:inherit; font-size:12px; border-radius:5px; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--ink-2); padding:5px 10px; white-space:nowrap; cursor:pointer}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn-done:hover{border-color:var(--ok); color:var(--ok)}
.btn:focus-visible,.chip:focus-visible,summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

details.werkzeug{grid-column:2; margin-top:6px}
details.werkzeug summary{font-size:11.5px; color:var(--ink-3); cursor:pointer; list-style:none;
  display:inline-block; border-bottom:1px dotted var(--line-strong)}
details.werkzeug summary::-webkit-details-marker{display:none}
details.werkzeug summary:hover{color:var(--accent)}
.werkzeug-inhalt{display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin-top:8px; padding:10px; background:var(--surface-2); border-radius:5px}
.werkzeug-inhalt select,.werkzeug-inhalt input[type=date]{font-family:inherit; font-size:12.5px;
  padding:4px 6px; border:1px solid var(--line-strong); border-radius:4px;
  background:var(--surface); color:var(--ink)}
.werkzeug-inhalt label{font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:5px}

.empty{background:var(--surface); border:1px dashed var(--line-strong); border-radius:6px;
  padding:28px 16px; text-align:center; color:var(--ink-3); font-size:13.5px}

.status-leiste{margin-top:34px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-3)}
.status-leiste table{border-collapse:collapse; width:100%; font-family:"IBM Plex Mono",monospace}
.status-leiste td{padding:3px 8px 3px 0; border-bottom:1px solid var(--line)}
.status-leiste .fehler{color:var(--alert)}

/* Anmeldung */
.login{max-width:340px; margin:14vh auto; background:var(--surface); padding:26px;
  border-radius:8px; box-shadow:var(--shadow)}
.login h1{margin:0 0 4px; font-size:18px}
.login p{margin:0 0 18px; color:var(--ink-3); font-size:13px}
.login input{width:100%; font-family:inherit; font-size:15px; padding:9px 11px;
  border:1px solid var(--line-strong); border-radius:5px; background:var(--surface-2); color:var(--ink)}
.login button{width:100%; margin-top:10px; font-family:inherit; font-size:15px; padding:9px;
  border:0; border-radius:5px; background:var(--accent); color:#fff; cursor:pointer}
@media (prefers-color-scheme: dark){ .login button{color:#0e1317} }

@media (max-width:640px){
  li.mail{grid-template-columns:1fr auto; padding:12px}
  .time{grid-row:auto; grid-column:1; font-size:11.5px; padding:0}
  .from,.subject,.tags,details.werkzeug{grid-column:1/-1}
  .actions{grid-row:1; grid-column:2; flex-direction:row; justify-self:end; align-items:flex-start}
  .counts{width:100%; margin-left:0; justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Rueckgaengig-Knopf in der Erfolgsmeldung */
.meldung.ok{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
form.undo{margin:0}
.btn-undo{background:var(--surface); border-color:var(--ok); color:var(--ok); font-weight:500}
.btn-undo:hover{background:var(--ok); color:var(--surface); border-color:var(--ok)}