/* Matterhorn Theme "Apple": hell, ruhig, viel Weiss, weiche Karten, grosse duenne Zahlen, ein Akzent. Liegt ueber style.css. */
:root{
  --canvas:#f4f5f3;--surface:#ffffff;--line:#e8e8ed;--line-2:#f0f0f3;
  --text:#1d1d1f;--muted:#6e6e73;--faint:#a1a1a6;
  --acc:#1f5f4a;--acc-soft:#e6f0ec;--acc-ink:#17493a;
  --ok:#1d8a4b;--ok-soft:#e6f4ec;--bad:#d7263d;--bad-soft:#fdeaed;--warn:#b25e00;--warn-soft:#fff3e0;--blue:#1f5f4a;--blue-soft:#e6f0ec;
  --ink:#fbfbfd;--ink-2:#f0f0f4;--ink-3:#e6e6eb;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"Times New Roman",Georgia,serif;
  --r:18px;--r-sm:12px;--shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05)
}
body{background:var(--canvas);color:var(--text);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
h1{font-family:var(--serif);font-size:38px;font-weight:500;letter-spacing:-.01em}
h2{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:0}
h2{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
h3{font-size:15px}
header{margin-bottom:22px}
main{padding:34px 40px 60px}
a{color:var(--acc)}
/* Navigation hell */
.side{background:var(--ink);color:var(--text);border-right:1px solid var(--line);padding:26px 16px 20px}
.brand{color:var(--text);border-bottom:1px solid var(--line);letter-spacing:.18em;font-weight:700}
.brand-logo{background:#fff;border:1px solid var(--line)}
.side nav a{color:#3a3a3c;font-weight:500;border-radius:10px;padding:9px 12px}
.side nav a svg{opacity:.7}
.side nav a:hover{background:var(--ink-2);color:var(--text)}
.side nav a.on{background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 1px var(--line)}
.side nav a.on::before{background:var(--acc)}
.side nav a.dim{color:var(--faint)}
.side nav a small{background:var(--ink-3);color:var(--muted)}
.who{color:var(--muted);border-top:1px solid var(--line)}.who div{color:var(--text)}.who a{color:var(--muted)}
/* Karten und Kacheln */
.card,.tile,details.card{background:var(--surface);border:1px solid transparent;border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px}
.card.todo{border-left:0;box-shadow:var(--shadow),inset 4px 0 0 var(--warn)}
.card.warn{box-shadow:var(--shadow),inset 4px 0 0 var(--warn)}
.tiles{gap:14px}
.tile{padding:22px 24px 20px}
.tile small{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0;text-transform:none}
.tile b{font-family:var(--serif);font-size:46px;font-weight:400;letter-spacing:-.01em;line-height:1.05;margin:6px 0 4px;display:block;font-variant-numeric:tabular-nums}
.tile span{color:var(--muted);font-size:13px}
.tile.hot{box-shadow:var(--shadow),inset 0 0 0 1.5px var(--acc)}
a.tile:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.05),0 14px 32px rgba(0,0,0,.08);transition:all .15s}
.count{background:var(--ink-2);color:var(--muted);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;margin-left:8px;vertical-align:middle}
/* Tabellen */
table{font-size:14px}
th,tr.th td{color:var(--muted);font-weight:500;font-size:12.5px;letter-spacing:.01em;border-bottom:1px solid var(--line)}
td{border-bottom:1px solid var(--line-2);padding:11px 10px}
tr:last-child td{border-bottom:0}
.pill{border-radius:999px;font-weight:600;font-size:11.5px;padding:3px 9px}
/* Formulare und Knoepfe */
input,select,textarea{border:1px solid var(--line);border-radius:10px;background:#fff;padding:9px 12px;font-size:14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
button,.sm{border-radius:999px;font-weight:600}
button{background:var(--acc);color:#fff;border:0;padding:10px 18px}
button:hover{background:var(--acc-ink)}
button.ghost,a.sm.ghost{background:transparent;color:var(--acc);border:1px solid var(--line)}
button.ghost:hover,a.sm.ghost:hover{background:var(--acc-soft);border-color:var(--acc-soft)}
button.danger{background:var(--bad)}
button.sm,a.sm{padding:7px 14px;font-size:13px}
/* Balken und Grafik */
.bars .stack{background:#e5e5ea;border-radius:4px 4px 0 0}.bars .stack i{background:var(--acc)}
.tile .bar-row i,.bar-row i{background:var(--acc);border-radius:3px}
.quote{background:var(--line)}.quote i{background:var(--acc)}
.chmap .lvl1{fill:#cfe3d8}.chmap .lvl2{fill:#8fc4a8}.chmap .lvl3{fill:#1f5f4a}.chmap .lvl0{fill:#ececf1}
.clock{color:var(--muted)}.clock-time{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.flash{border-radius:14px;box-shadow:var(--shadow)}
/* Login */
.login{border-radius:24px;box-shadow:var(--shadow);background:#fff}
.brand.big{letter-spacing:.2em;font-weight:700}
.hero{border-radius:24px;overflow:hidden}
/* Handy */
.tabbar{background:rgba(251,251,253,.92);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--line);color:var(--muted)}
.tabbar a.on{color:var(--acc)}
.more-menu a{border-radius:14px;background:#fff;box-shadow:var(--shadow)}
@media(max-width:760px){main{padding:18px 14px 90px}h1{font-size:28px}.tile b{font-size:36px}.card,.tile{padding:16px 16px;border-radius:16px}}
@media(max-width:760px){form.filter:not(.open) .meta-grid,form.filter:not(.open) .row{display:none}form.filter .filter-toggle{width:100%}}
.tile b.text{font-size:26px;letter-spacing:-.01em}

/* Punktwolken in den Hauptkacheln (wie im Video): Dichte = Wert */
.tile.cloudtile{position:relative;overflow:hidden;min-height:190px;padding-top:18px}
.tile.cloudtile .cloud{position:absolute;right:14px;top:8px;width:150px;height:120px;opacity:.9}
.tile.cloudtile b{position:relative;margin-top:88px}
.tile.cloudtile:first-child{background:linear-gradient(180deg,#e9f0ec 0%,#f3f6f4 100%)}
.tile.cloudtile span{position:relative}
@media(max-width:760px){.tile.cloudtile{min-height:150px}.tile.cloudtile .cloud{width:110px;height:90px}.tile.cloudtile b{margin-top:60px}}
.login .brand.big{font-family:var(--serif);letter-spacing:.14em;font-weight:500}