:root{--bg:#f6f7fb;--card:#fff;--ink:#3b4558;--mut:#7d8798;--line:#e8ebf2;--acc:#5568c8;--r:14px;--hol:#fdeaea;--off:#e6f0fc}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:130px}
a{color:inherit;text-decoration:none}small{color:var(--mut)}
.top{display:flex;justify-content:center;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top nav,.subnav{display:flex;gap:4px;flex-wrap:wrap}.top nav a,.subnav a{padding:6px 14px;border-radius:99px;color:var(--mut)}.top nav a.on,.subnav a.on{background:var(--acc);color:#fff}.subnav{margin:12px 4px}
.toolbar{display:flex;gap:12px;align-items:center;justify-content:center;padding:12px;flex-wrap:wrap}
.toolbar a{background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 16px;font-weight:600}.toolbar input{width:auto}
.page{max-width:1000px;margin:0 auto;padding:8px 12px}
.card{background:var(--card);border-radius:var(--r);box-shadow:0 1px 4px #3b455810;padding:16px;margin:12px;max-width:1000px}
@media(min-width:1000px){.card{margin:12px auto}}
h3{margin:.2em 0 .6em}h4{margin:1em 0 .3em;color:var(--mut)}
/* Tage */
.week{font-size:15px;display:flex;gap:6px;padding:0 8px;align-items:flex-start}
.day{flex:1;min-width:0;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 1px 4px #3b455810;display:none}
.day.cur{display:block;outline:2px solid #c9d3f7}.m-only{display:inline-block}.d-only{display:none}
@media(min-width:1000px){.day{display:block}.m-only{display:none}.d-only{display:inline-block}}
.dh{display:block;position:relative;height:58px;padding:10px 10px 4px;border-bottom:1px solid var(--line)}
.r1{display:flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap}.rd{display:flex;gap:8px;align-items:baseline;min-width:0}.wd{color:var(--mut);font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0}.r1 b{font-size:17px}.dots{display:flex;gap:4px}.dots i{width:15px;height:15px;border-radius:50%;border:1px solid #0003}
.ttl{display:block;font-size:12px;color:#b06a6a;min-height:16px;margin-top:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.day.hol .dh{background:var(--hol)}.day.today .r1 b{background:var(--acc);color:#fff;border-radius:99px;padding:0 8px}
.cols{display:grid;grid-template-columns:30px repeat(3,1fr)}
.names span{font-size:11px;font-weight:600;text-align:center;padding:4px 0;color:var(--mut);height:24px}
.allday{min-height:30px}.bgc{border-left:1px solid var(--line)}.allday .ev,.allday .bub{margin:2px;align-self:start;min-width:0}
.tc{border:0!important}.grid>.tc{height:var(--gh,768px);overflow:hidden}.tc span{display:block;height:48px;font-size:10px;color:#a9b1c0;text-align:right;padding:1px 4px 0 0;line-height:1}
.grid{position:relative}
.col{position:relative;height:var(--gh,768px);border-left:1px solid var(--line);cursor:pointer;background-image:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 48px)}
.day.hol .col{background-color:#fffafa}
.day .off{background-color:var(--off)}
.ev{display:block;background:color-mix(in srgb,var(--c) 22%,#fff);border-left:5px solid var(--c);border-radius:6px;font-size:12px;line-height:1.25;padding:2px 5px;overflow:hidden;min-width:0}
.ev.timed{position:absolute;padding:0;display:flex;flex-direction:column;overflow:visible;z-index:2}.ev b{display:block;white-space:normal;word-break:break-word}.ev .tm{display:block;color:#566074;font-size:11px;white-space:nowrap}.ev .main{padding:2px 5px;min-width:0;flex:1}.ev .nt{display:block;color:#566074;font-weight:400;text-shadow:0 0 3px #fff,0 0 3px #fff}.evl{position:absolute;left:30px;right:0;top:0;height:var(--gh,768px);pointer-events:none}.evl .ev{pointer-events:auto}
.trv{flex:none;font-size:10px;color:#6b7587;padding:1px 5px;overflow:hidden;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,#fff) 0 5px,#fff 5px 10px)}
.bub{display:block;font-size:11px;font-weight:600;text-align:center;padding:2px 8px;border-radius:99px;background:#d4e4fa;color:#3e5f8c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now{position:absolute;left:0;right:0;height:2px;background:#ef8a8a;z-index:5;pointer-events:none}.now::before{content:"";position:absolute;left:24px;top:-4px;width:10px;height:10px;border-radius:50%;background:#ef8a8a}
.tag{font-style:normal;font-size:10.5px;padding:1px 7px;border-radius:99px;white-space:nowrap}.tag.hol{background:#f7c5c5;color:#7f2a2a}.tag.sch{background:#c9e4fb;color:#1e4a75}
/* Buttons / Formulare */
.qbtns,.actions,.pillrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qbtn,.btn{border:0;border-radius:12px;background:var(--acc);color:#fff;padding:13px 20px;font:600 17px inherit;cursor:pointer}.qbtn{background:color-mix(in srgb,var(--c,#6b80db) 28%,#fff);color:#2b3547;border:1px solid color-mix(in srgb,var(--c,#6b80db) 55%,#fff)}
.btn.ghost{background:#e8ebf2;color:var(--ink)}.btn.danger{background:#f0a3a3}.btn.sm{padding:9px 14px;font-size:15px}
.pill{cursor:pointer}.pill input{display:none}.pill span{display:inline-block;padding:10px 18px;border-radius:99px;border:2px solid var(--c);color:var(--t);font-weight:600;background:#fff;opacity:.6}.pill input:checked+span{background:#8ea2e6;border-color:#8ea2e6;color:#14215f;opacity:1}.pill.sm span{padding:6px 11px;font-size:14px}
.chk{display:flex;gap:6px;align-items:center}.chk input{width:auto}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--ink)}input[type=color]{width:46px;padding:2px;height:38px}
label{display:block;font-size:14px;color:var(--mut);font-weight:600}label.chk,label.pill{font-size:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.w2{grid-column:1/-1}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stack{display:flex;flex-direction:column;gap:12px;max-width:460px}.stack h3{margin:0}.mt{text-align:center;margin:18px 0 8px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.row input,.row select{width:auto;flex:1;min-width:110px}.row input.sm{width:64px;flex:none}.row input[type=color]{flex:none}
.bnav{position:fixed;left:0;right:0;bottom:0;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:8px;background:#fffd;backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:30}
.bnav a,.bnav input{font-size:15px;padding:10px 16px;border-radius:99px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:13px;width:auto}.bnav .plus{background:var(--acc);color:#fff;border-color:var(--acc)}
/* Monat / Müll */
.month{display:grid;grid-template-columns:34px repeat(7,1fr);gap:4px;padding:0 8px;max-width:1200px;margin:0 auto}.month.w{grid-template-columns:repeat(7,1fr)}
.mh,.kw{text-align:center;color:var(--mut);font-size:12px;font-weight:600;align-self:center}
.mc{background:#fff;border-radius:10px;min-height:96px;padding:4px;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-width:0}.mc.out{opacity:.45}
.mc.hol{background:var(--hol)}.mc.sch{background:var(--off)}.mc.today,.mc.sel{outline:2px solid var(--acc)}.mc b{font-size:13px}
.chip{font-size:11px;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 22%,#fff);padding:0 4px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.binrow{display:flex;gap:4px;margin-top:auto}.bin{width:24px;height:24px;border-radius:50%;border:1px solid #0004;background:color-mix(in srgb,var(--c) 22%,#fff);cursor:pointer}.bin.on{background:var(--c)}
.legend{text-align:center;color:var(--mut);font-size:13px}
.bar{height:10px;background:#eceff5;border-radius:99px;overflow:hidden;min-width:100px}.bar i{display:block;height:100%}
.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}
@media(max-width:600px){.grid2{grid-template-columns:1fr}.mc{min-height:70px}.chip{font-size:9px}.bin{width:18px;height:18px}}

.mtop{display:flex;justify-content:space-between;align-items:center}.mc .dots i{width:12px;height:12px}
.bnav{flex-direction:column;align-items:center}.bnav .r{display:flex;gap:6px;align-items:center}
@media(max-width:700px){.cal .top,.cal .toolbar{display:none}.bnav .lbl{display:none}}