/* Layout: App-Rahmen – Kopfleiste oben, Kalenderliste links (am Handy als Schublade), Kalenderfläche rechts. */
:root{
  --bg:#EEF1F5; --surface:#FFFFFF; --surface-2:#F4F6F9; --line:#D8DEE7; --line-soft:#E7EBF1;
  --fg:#18202C; --muted:#5A6577; --accent:#1F4E8C; --accent-fg:#FFFFFF; --accent-soft:#E3ECF8;
  --today:#FFF4CC; --holiday:#B42318; --weekend:#F8F9FB; --pending:#B45309; --ok:#15803D; --danger:#B42318;
  --shadow:0 12px 36px rgba(16,24,40,.18);
  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F141B; --surface:#171D26; --surface-2:#1D2531; --line:#2C3644; --line-soft:#232C38;
  --fg:#E6EAF0; --muted:#9AA5B6; --accent:#86AEEA; --accent-fg:#0E1520; --accent-soft:#1E2B40;
  --today:#2D2814; --holiday:#F2877C; --weekend:#141A22; --pending:#F0A55A; --ok:#5BC37F; --danger:#F2877C;
  --shadow:0 12px 36px rgba(0,0,0,.5); color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0F141B; --surface:#171D26; --surface-2:#1D2531; --line:#2C3644; --line-soft:#232C38;
  --fg:#E6EAF0; --muted:#9AA5B6; --accent:#86AEEA; --accent-fg:#0E1520; --accent-soft:#1E2B40;
  --today:#2D2814; --holiday:#F2877C; --weekend:#141A22; --pending:#F0A55A; --ok:#5BC37F; --danger:#F2877C;
  --shadow:0 12px 36px rgba(0,0,0,.5); color-scheme:dark; }

html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:14px;line-height:1.4}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{height:100%;display:grid;grid-template-rows:auto auto 1fr;padding-inline:16px;padding-block:10px 12px;gap:10px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.brand{display:flex;flex-direction:column;margin-right:auto;min-width:0}
.brand b{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.01em}
.brand span{font-size:12px;color:var(--muted)}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 12px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:700}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:700}
.btn.danger{color:var(--danger)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.sm{padding:4px 9px;font-size:13px}
.badge{background:var(--pending);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px}
.badge[data-n="0"]{display:none}
select.role{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 10px}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bar h1{font-family:var(--font-display);font-size:24px;font-weight:700;margin:0 8px 0 4px;letter-spacing:-.01em;min-width:9ch}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;padding:7px 12px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);font-weight:700}
.spacer{flex:1}
.proto{font-size:12px;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:3px 10px}

.main{display:grid;grid-template-columns:250px minmax(0,1fr);gap:12px;min-height:0}
.side{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:12px}
.side input[type=search]{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--surface-2)}
.quick{display:flex;gap:6px;flex-wrap:wrap}
.grp-h{display:flex;align-items:center;gap:6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:4px 0}
.grp-h button{border:0;background:none;padding:0;color:inherit;font:inherit;letter-spacing:inherit;display:flex;align-items:center;gap:6px;flex:1;text-align:left}
.grp-h .chev{transition:transform .15s}
.grp[data-collapsed="1"] .chev{transform:rotate(-90deg)}
.grp[data-collapsed="1"] .cals{display:none}
.cals{display:flex;flex-direction:column;gap:2px}
.cal{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px}
.cal:hover{background:var(--surface-2)}
.cal label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:pointer}
.cal label span.n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal input[type=checkbox]{accent-color:var(--accent);margin:0}
.sw{width:14px;height:14px;border-radius:4px;flex:none;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.12)}
.sw input{position:absolute;inset:-6px;opacity:0;cursor:pointer}
.tag{font-size:10px;font-weight:700;border:1px solid var(--line);border-radius:4px;padding:0 4px;color:var(--muted)}
.note{font-size:12px;color:var(--muted);line-height:1.45}
.sub-row{display:flex;align-items:center;gap:8px}
.sub-row input[type=text]{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:4px 8px;background:var(--surface-2)}
.sub-row input[type=color]{width:30px;height:26px;border:1px solid var(--line);border-radius:6px;padding:0;background:none}
.switch{display:flex;align-items:center;gap:8px;cursor:pointer}

.stage{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:0;display:flex;flex-direction:column}

/* Monat */
.mhead{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line);background:var(--surface-2)}
.mhead div{padding:6px 8px;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.mgrid{flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(112px,1fr);overflow:auto}
.day{border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:4px 4px 6px;display:flex;flex-direction:column;gap:3px;min-width:0;cursor:cell}
.day:nth-child(7n){border-right:0}
.day.we{background:var(--weekend)}
.day.out .dn{opacity:.4}
.day.today{background:var(--today)}
.day.drop{outline:2px dashed var(--accent);outline-offset:-3px}
.dh{display:flex;align-items:baseline;gap:6px;padding:0 2px;font-variant-numeric:tabular-nums}
.kw{font-size:11px;font-weight:700;color:var(--muted)}
.dn{margin-left:auto;font-weight:700;font-size:13px}
.day.hol .dn{color:var(--holiday)}
.hl{font-size:11px;color:var(--holiday);padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.more{border:0;background:none;color:var(--accent);font-size:12px;text-align:left;padding:0 4px;font-weight:700}

.ev{border-radius:5px;padding:2px 6px;font-size:12px;line-height:1.35;display:flex;align-items:center;gap:5px;min-width:0;cursor:pointer;border:1.5px solid transparent;user-select:none}
.ev .t{font-variant-numeric:tabular-nums;font-weight:700;flex:none}
.ev .x{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.ev.multi{background:var(--surface);color:var(--fg);border:1px solid var(--line)}
.ev .sq{display:flex;gap:2px;flex:none;align-items:center}
.ev .sq i{width:10px;height:10px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.ev .sq i:first-child{width:14px}
.col .ev .sq{margin-bottom:2px}
/* Freie Zeit */
.slots{display:flex;flex-direction:column;gap:10px}
.sday h4{margin:0 0 4px;font-size:13px}
.sday h4 small{color:var(--muted);font-weight:400}
.srow{display:flex;flex-wrap:wrap;gap:6px}
.slot{border:1px solid var(--ok);color:var(--ok);background:transparent;border-radius:8px;padding:5px 10px;font-variant-numeric:tabular-nums;font-weight:700}
.slot:hover{background:var(--ok);color:#fff}
.slot small{font-weight:400}
.ev .ic{flex:none;width:12px;height:12px}
.ev.cont-l{border-top-left-radius:0;border-bottom-left-radius:0}
.ev.cont-r{border-top-right-radius:0;border-bottom-right-radius:0}
.ev.pending{border-style:dashed;border-color:currentColor;opacity:.85}
.ev .pill{flex:none;font-size:10px;font-weight:700;border-radius:3px;padding:0 4px;background:rgba(255,255,255,.85);color:#7A3E06}
.ev.busy{background:repeating-linear-gradient(135deg,var(--surface-2) 0 6px,var(--line-soft) 6px 12px);color:var(--muted);cursor:default;border-color:var(--line)}
.ev.declined{opacity:.5;text-decoration:line-through}
.ev.hit{box-shadow:0 0 0 2px var(--accent)}
.ev[draggable="true"]{cursor:grab}

/* Woche */
.wk{flex:1;display:flex;flex-direction:column;min-height:0;overflow:auto}
.wk-head,.wk-all,.wk-body{display:grid;grid-template-columns:52px repeat(7,minmax(90px,1fr))}
.wk-head{position:sticky;top:0;z-index:3;background:var(--surface-2);border-bottom:1px solid var(--line)}
.wk-head div{padding:6px 8px;font-size:12px;font-weight:700;color:var(--muted)}
.wk-head div b{display:block;font-size:18px;color:var(--fg);font-family:var(--font-display)}
.wk-head div.today b{color:var(--accent)}
.wk-head div.hol b{color:var(--holiday)}
.wk-all{border-bottom:1px solid var(--line);background:var(--surface)}
.wk-all>div{padding:3px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line-soft);min-width:0}
.wk-all .lbl{font-size:11px;color:var(--muted);justify-content:center;align-items:center}
.wk-body{position:relative}
.hours{display:flex;flex-direction:column}
.hours div{height:48px;font-size:11px;color:var(--muted);text-align:right;padding-right:6px;transform:translateY(-7px);font-variant-numeric:tabular-nums}
.col{position:relative;border-right:1px solid var(--line-soft);background-image:linear-gradient(var(--line-soft) 1px,transparent 1px);background-size:100% 48px;cursor:cell}
.col.we{background-color:var(--weekend)}
.col.today{background-color:var(--today)}
.col .ev{position:absolute;align-items:flex-start;flex-direction:column;gap:0;overflow:hidden;padding:3px 5px}
.col .ev .x{white-space:normal}
.now{position:absolute;left:0;right:0;height:2px;background:var(--danger);z-index:2}

/* Liste */
.list{flex:1;overflow:auto;padding:8px 16px 20px}
.lday{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.lday h3{margin:0;font-family:var(--font-display);font-size:16px}
.lday h3 small{display:block;font-family:var(--font-body);font-size:12px;color:var(--muted);font-weight:400}
.lday.today h3{color:var(--accent)}
.litems{display:flex;flex-direction:column;gap:4px;min-width:0}
.litems .ev{font-size:13px;padding:5px 8px}
.empty{color:var(--muted);padding:30px 0;text-align:center}

/* Zeitslots */
.ev .cnt{flex:none;font-size:10px;font-weight:700;border-radius:3px;padding:0 4px;background:rgba(0,0,0,.18);font-variant-numeric:tabular-nums}
.ev.multi .cnt{background:var(--surface-2);border:1px solid var(--line)}
.slotbox{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
.slothead{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.slothead b{flex:1;min-width:0}
.slothead small{color:var(--muted);font-weight:400}
.stbl{display:flex;flex-direction:column;max-height:260px;overflow:auto;border-top:1px solid var(--line-soft)}
.srw{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,.8fr) 22px;gap:6px;align-items:center;padding:3px 0;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
.srw.ro{grid-template-columns:96px minmax(0,1fr) minmax(0,.8fr)}
.srw input{border:1px solid var(--line);border-radius:6px;padding:4px 7px;background:var(--surface-2);min-width:0;width:100%}
.srw .tm{font-size:13px;font-weight:700}
.srw .free{color:var(--muted);font-style:italic}
.sltools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sltools select{border:1px solid var(--line);border-radius:6px;padding:4px 6px;background:var(--surface-2)}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* Anhänge */
.flist{display:flex;flex-wrap:wrap;gap:8px}
.flist:empty{display:none}
.ftile{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;max-width:100%;min-width:0;background:var(--surface-2)}
.ftile img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:4px}
.ftile .fn{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.fbadge{font-size:11px;font-weight:700;color:#fff;border-radius:4px;padding:3px 6px;flex:none}
.fb-PDF{background:#B42318}.fb-Word{background:#2B579A}.fb-Excel{background:#217346}.fb-Datei{background:#5A6577}
.fx{border:0;background:none;color:var(--muted);padding:0 2px}
.qrrow{display:flex;align-items:center;gap:12px}
.qrrow:empty{display:none}
.qrimg{background:#fff;padding:6px;border-radius:8px;border:1px solid var(--line);flex:none}
.qrimg img,.qrimg canvas{display:block}

/* Zugänge */
.dlg.wide{width:min(880px,100%)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px}
.tabs button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ppl{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.prow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line-soft)}
.prow:last-child{border-bottom:0}
.prow .nm b{display:block}
.prow .nm small{color:var(--muted)}
.rpill{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--accent-soft);color:var(--fg)}
.rpill.k{background:color-mix(in srgb,#4A7FD4 18%,transparent)}
.rpill.x{background:color-mix(in srgb,#6D597A 20%,transparent)}
.st{font-size:12px;color:var(--muted)}
.st.inv{color:var(--pending);font-weight:700}
.st.off{color:var(--danger);font-weight:700}
.pacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rights{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;padding:8px;max-height:300px;overflow:auto}
.rights .rg{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:6px 4px 2px}
.rr{display:flex;align-items:center;gap:8px;padding:3px 4px}
.rr span.n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f .rr select{width:auto;flex:none;min-width:140px}
.rr select{border:1px solid var(--line);border-radius:6px;padding:3px 6px;background:var(--surface-2);font-size:13px}
.rr select.lv-edit{border-color:var(--ok)}
.rr select.lv-{color:var(--muted)}
.rdesc{font-size:12px;color:var(--muted)}
@media (max-width:600px){.prow{grid-template-columns:minmax(0,1fr) auto}.prow .rcol{grid-column:1/-1;order:3}}

/* Wochenblatt (Druckformat wie Outlook-Wochenagenda) */
.paperwrap{flex:1;overflow:auto;padding:16px;background:var(--surface-2)}
.paper{--paper:#FFFFFF;--pink:#111111;background:var(--paper);color:var(--pink);width:min(760px,100%);margin:0 auto;padding:22px 24px 14px;box-shadow:var(--shadow);font-family:"Segoe UI",Arial,sans-serif;aspect-ratio:210/297;display:flex;flex-direction:column;min-height:0}
.pp-head{border:1.5px solid var(--pink);display:flex;justify-content:space-between;gap:12px;padding:6px 8px;flex-wrap:wrap}
.pp-head h2{margin:0;font-size:clamp(16px,3.4vw,27px);line-height:1.25;font-weight:700}
.minis{display:flex;gap:14px}
.mini{font-size:8.5px;text-align:center;font-variant-numeric:tabular-nums}
.mini table{border-collapse:collapse;margin-top:2px}
.mini td,.mini th{padding:0 2px;font-weight:400}
.mini th{border-bottom:1px solid var(--pink)}
.mini td.in{font-weight:700}
.pp-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr .5fr .5fr;border:1.5px solid var(--pink);border-top:0;min-height:0}
.pp-day{border-top:1.5px solid var(--pink);padding:4px 5px;overflow:hidden;min-width:0}
.pp-day:nth-child(odd){border-right:1.5px solid var(--pink)}
.pp-day.fr{grid-row:span 2}
.pp-day h4{margin:0 0 3px;font-size:clamp(11px,1.9vw,15px)}
.pp-e{display:flex;gap:4px;font-size:clamp(8px,1.25vw,10px);font-weight:700;line-height:1.3;margin-bottom:2px}
.pp-e i{width:9px;height:9px;border:1px solid #666;flex:none;margin-top:2px}
.pp-e.ad{background:#E8E8F4;border:1px solid #999;padding:0 3px}
.pp-foot{display:flex;justify-content:space-between;font-size:8.5px;margin-top:3px;font-variant-numeric:tabular-nums}
.pp-hint{width:min(760px,100%);margin:0 auto 10px;font-size:12px;color:var(--muted)}

/* Schublade Anfragen */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:40;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer header h2{margin:0;font-family:var(--font-display);font-size:20px;flex:1}
.drawer .body{overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.req{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.req .who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.req .who i{width:10px;height:10px;border-radius:50%}
.req .what{font-weight:700}
.req .chg{font-size:13px;font-variant-numeric:tabular-nums}
.req .chg s{color:var(--muted)}
.req .acts{display:flex;gap:6px;flex-wrap:wrap}

/* Dialog */
.scrim{position:fixed;inset:0;background:rgba(10,14,20,.45);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.dlg{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);width:min(560px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column}
.dlg header{padding:16px 18px 6px;display:flex;align-items:center;gap:10px}
.dlg header h2{margin:0;font-family:var(--font-display);font-size:21px;flex:1;text-wrap:balance}
.dlg form{padding:6px 18px 16px;display:flex;flex-direction:column;gap:12px}
.f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f>span{font-size:12px;color:var(--muted);font-weight:700}
.f input[type=text],.f input[type=date],.f input[type=time],.f select,.f textarea{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface-2);width:100%;min-width:0}
.f textarea{min-height:64px;resize:vertical}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chipc{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 6px;cursor:pointer;font-size:13px}
.chipc input{margin:0;accent-color:var(--accent)}
.chipc:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.colors{display:flex;flex-wrap:wrap;gap:6px}
.colors label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:4px 8px;cursor:pointer;font-size:13px}
.colors label:has(input:checked){border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.colors input{position:absolute;opacity:0;pointer-events:none}
.thumb{display:flex;align-items:center;gap:10px}
.thumb img{width:84px;height:84px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff}
.info{background:var(--accent-soft);border-radius:8px;padding:8px 10px;font-size:13px}
.warn{background:color-mix(in srgb,var(--pending) 14%,transparent);border-radius:8px;padding:8px 10px;font-size:13px}
.foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:4px}
.foot .grow{flex:1}
.ro{font-size:15px}
.ro small{color:var(--muted)}

.toasts{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:60;max-width:min(380px,calc(100% - 32px))}
.toast{background:var(--fg);color:var(--bg);border-radius:10px;padding:10px 14px;box-shadow:var(--shadow);font-size:13px;animation:tin .2s ease-out}
.toast b{display:block;margin-bottom:2px}
@keyframes tin{from{transform:translateY(8px);opacity:0}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}.grp-h .chev{transition:none}}

.only-mobile{display:none}
@media (max-width:860px){
  .main{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(300px,86%);z-index:45;border-radius:0;box-shadow:var(--shadow);padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .side:not(.open){display:none}
  .only-mobile{display:inline-flex}
  .bar h1{font-size:20px;min-width:0}
  .mgrid{grid-auto-rows:minmax(84px,1fr)}
  .day .ev .t{display:none}
  .day .ev .sq i{width:8px;height:8px}.day .ev .sq i:first-child{width:11px}
  .day .ev{font-size:11px;padding:1px 4px}
  .lday{grid-template-columns:76px minmax(0,1fr)}
}

/* ---------- Ergänzungen echte App ---------- */
.gate{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.gate .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;max-width:420px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.gate h1{font-family:var(--font-display);margin:0;font-size:24px}
.gate p{margin:0;color:var(--muted)}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);padding:40px}
.spin{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.me{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.me b{color:var(--fg)}
.sres{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}
.sres button{border:0;background:var(--surface-2);border-radius:6px;padding:5px 8px;text-align:left;display:flex;gap:8px;align-items:center;font-size:13px}
.sres button:hover{background:var(--accent-soft)}
.sres small{color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.sres .sw{flex:none}
.ro-tag{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 5px}
.linkbox{display:flex;gap:6px;align-items:center;min-width:0}
.linkbox input{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:5px 8px;background:var(--surface-2);font-size:12px}
.printbar{display:flex;gap:8px;align-items:center;width:min(760px,100%);margin:0 auto 10px}
@media print{
  @page{size:A4 portrait;margin:8mm}
  body{background:#fff}
  .top,.bar,.side,.toasts,#layer,.pp-hint,.printbar{display:none!important}
  .app{display:block;padding:0}
  .main{display:block}
  .stage{border:0;overflow:visible}
  .paperwrap{padding:0;background:#fff;overflow:visible}
  .paper{box-shadow:none;width:100%;padding:0;aspect-ratio:auto;height:280mm}
}
.files{display:flex;flex-direction:column;gap:4px}
.file{display:flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2)}
.file a,.file span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file small{color:var(--muted,#667);white-space:nowrap}
.filebtn{align-self:flex-start;margin-top:6px;cursor:pointer}

/* ---------- Persönliche Optik ---------- */
.coon-mini{display:none;width:46px;height:44px;flex:none}
/* Comic (Andrea): hellblau, kräftige Linien, harte Schatten, Waschbär */
body[data-optik="comic"]{
  --bg:#E4F3FC; --surface:#FFFFFF; --surface-2:#F3FAFE; --line:#16324F; --line-soft:#C9E3F3;
  --fg:#16324F; --muted:#4C6A85; --accent:#2380BF; --accent-fg:#FFFFFF; --accent-soft:#D3ECFA;
  --today:#FFF0B8; --pop:#FFC93C; --hard:4px 4px 0 #16324F; --shadow:6px 6px 0 #16324F;
  --font-display:"Baloo 2","Comic Sans MS",system-ui,sans-serif; --font-body:"Baloo 2","Comic Sans MS",system-ui,sans-serif;
}
body[data-optik="comic"]{font-size:15px}
body[data-optik="comic"] .coon-mini{display:block}
body[data-optik="comic"] .top{gap:10px 12px}
body[data-optik="comic"] .brand{flex-direction:row;align-items:center;gap:10px}
body[data-optik="comic"] .brand b{font-size:23px;font-weight:800;line-height:1}
body[data-optik="comic"] .brand .bt{display:flex;flex-direction:column}
body[data-optik="comic"] .btn,body[data-optik="comic"] .seg{border:2.5px solid var(--line);border-radius:14px;box-shadow:3px 3px 0 var(--line);font-weight:600}
body[data-optik="comic"] .btn.ghost{box-shadow:none;border-color:transparent}
body[data-optik="comic"] .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
body[data-optik="comic"] .btn.primary{background:var(--pop);color:#16324F;border-color:var(--line)}
body[data-optik="comic"] .seg button[aria-pressed="true"]{background:var(--accent)}
body[data-optik="comic"] .side,body[data-optik="comic"] .stage{border:3px solid var(--line);border-radius:20px;box-shadow:var(--hard)}
body[data-optik="comic"] .dlg{border:3px solid var(--line);border-radius:22px}
body[data-optik="comic"] .drawer{border-left:3px solid var(--line)}
body[data-optik="comic"] .f input[type=text],body[data-optik="comic"] .f input[type=date],body[data-optik="comic"] .f input[type=time],body[data-optik="comic"] .f select,body[data-optik="comic"] .f textarea,body[data-optik="comic"] .side input[type=search]{border:2px solid var(--line);border-radius:12px}
body[data-optik="comic"] .chipc{border:2px solid var(--line)}
body[data-optik="comic"] .info{border:2px solid var(--line);border-radius:14px}
body[data-optik="comic"] .warn{border:2px solid var(--pending);border-radius:14px}
body[data-optik="comic"] .ev{border-radius:8px;border:1.5px solid rgba(22,50,79,.55)}
body[data-optik="comic"] .day{border-color:var(--line-soft)}
body[data-optik="comic"] .toast{border:3px solid var(--line);box-shadow:var(--hard);border-radius:16px}
/* Schlicht (Bernhard): rot, ruhig */
body[data-optik="schlicht"]{
  --bg:#F4F4F4; --surface:#FFFFFF; --surface-2:#F7F7F7; --line:#DADADA; --line-soft:#EBEBEB;
  --fg:#1A1A1A; --muted:#666666; --accent:#C8102E; --accent-fg:#FFFFFF; --accent-soft:#FBE7EA;
  --font-display:"IBM Plex Sans",system-ui,sans-serif; --font-body:"IBM Plex Sans",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body[data-optik="comic"]{--bg:#0E2233;--surface:#16334C;--surface-2:#1B3B57;--line:#EAF6FD;--line-soft:#24476A;--fg:#EAF6FD;--muted:#A9C6DA;--accent:#6CC0EE;--accent-fg:#0E2233;--accent-soft:#1F4A6E;--today:#3A3314;--hard:4px 4px 0 #EAF6FD;--shadow:6px 6px 0 #EAF6FD}
  :root:not([data-theme="light"]) body[data-optik="schlicht"]{--bg:#141414;--surface:#1F1F1F;--surface-2:#262626;--line:#333;--line-soft:#2A2A2A;--fg:#F2F2F2;--muted:#A0A0A0;--accent:#E5374F;--accent-soft:#3A1A20}
}
:root[data-theme="dark"] body[data-optik="comic"]{--bg:#0E2233;--surface:#16334C;--surface-2:#1B3B57;--line:#EAF6FD;--line-soft:#24476A;--fg:#EAF6FD;--muted:#A9C6DA;--accent:#6CC0EE;--accent-fg:#0E2233;--accent-soft:#1F4A6E;--today:#3A3314;--hard:4px 4px 0 #EAF6FD;--shadow:6px 6px 0 #EAF6FD}
:root[data-theme="dark"] body[data-optik="schlicht"]{--bg:#141414;--surface:#1F1F1F;--surface-2:#262626;--line:#333;--line-soft:#2A2A2A;--fg:#F2F2F2;--muted:#A0A0A0;--accent:#E5374F;--accent-soft:#3A1A20}
@media (prefers-reduced-motion:no-preference){ body[data-optik="comic"] .coon-mini:hover{animation:wackel .6s ease-in-out} @keyframes wackel{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}} }