/* ---------- Kalender im Stil von Apple Kalender ---------- */
/* Kalenderfarben: iOS-Systemfarben, im Dunkeln die helleren Varianten */
.k0{--ev:#007aff}.k1{--ev:#ff9500}.k2{--ev:#ff2d55}.k3{--ev:#34c759}.k4{--ev:#af52de}.k5{--ev:#a2845e}.k6{--ev:#32ade6}.kt{--ev:#8e8e93}.kd{--ev:#ff3b30}
:root{--ev-text-mix:black;--ev-text-pct:58%;--ev-bg-pct:16%;--tcol:52px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--ev-text-mix:white;--ev-text-pct:52%;--ev-bg-pct:30%}
  :root:not([data-theme="light"]) .k0{--ev:#0a84ff} :root:not([data-theme="light"]) .k1{--ev:#ff9f0a} :root:not([data-theme="light"]) .k2{--ev:#ff375f} :root:not([data-theme="light"]) .k3{--ev:#30d158}
  :root:not([data-theme="light"]) .k4{--ev:#bf5af2} :root:not([data-theme="light"]) .k5{--ev:#ac8e68} :root:not([data-theme="light"]) .k6{--ev:#64d2ff} :root:not([data-theme="light"]) .kd{--ev:#ff453a} }
:root[data-theme="dark"]{--ev-text-mix:white;--ev-text-pct:52%;--ev-bg-pct:30%}
:root[data-theme="dark"] .k0{--ev:#0a84ff} :root[data-theme="dark"] .k1{--ev:#ff9f0a} :root[data-theme="dark"] .k2{--ev:#ff375f} :root[data-theme="dark"] .k3{--ev:#30d158}
:root[data-theme="dark"] .k4{--ev:#bf5af2} :root[data-theme="dark"] .k5{--ev:#ac8e68} :root[data-theme="dark"] .k6{--ev:#64d2ff} :root[data-theme="dark"] .kd{--ev:#ff453a}
.k0,.k1,.k2,.k3,.k4,.k5,.k6,.kt,.kd{--ev-bg:color-mix(in srgb,var(--ev) var(--ev-bg-pct),var(--surface));--ev-ink:color-mix(in srgb,var(--ev) var(--ev-text-pct),var(--ev-text-mix))}
.kt{--ev-ink:var(--ink)}
:root{--cal-red:#ff3b30}

/* Kopf */
#v-kalender{gap:16px}
.cal-top{display:grid;gap:12px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cal-title{font-size:1.6rem;letter-spacing:-.025em}
.cal-title .muted{font-weight:600}
.cal-nav{display:flex;align-items:center;gap:2px}
.cal-arrow{background:transparent;color:var(--cal-red);font-size:1.7rem;line-height:1;padding:0 10px 4px;font-weight:400}
.cal-today{background:transparent;color:var(--cal-red);padding:6px 8px}
.cal-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cal-tools .seg{flex:0 1 auto}
.cal-add{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 14px}
details.cal-more{position:relative}
details.cal-more summary{list-style:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-s);background:var(--sunk);color:var(--accent);font-weight:600;font-size:.9rem}
details.cal-more summary::-webkit-details-marker{display:none}
details.cal-more .menu{position:absolute;left:0;top:44px;z-index:12;background:var(--surface);border-radius:var(--r);padding:12px;display:grid;gap:4px;width:min(300px,calc(100vw - 32px));box-shadow:0 10px 40px rgba(0,0,0,.18),0 0 0 .5px var(--line)}
details.cal-more .menu h3{margin:2px 4px 4px}
details.cal-more .menu button,details.cal-more .filebtn{width:100%;text-align:left;background:var(--sunk);color:var(--ink);font-weight:500;border-radius:var(--r-s);padding:10px 12px;font-size:.92rem;cursor:pointer;display:block}
details.cal-more .menu .note{padding:4px}
.calf{display:flex;align-items:center;gap:10px;padding:6px 4px;color:var(--ink);font-size:.92rem;font-weight:400;cursor:pointer}
.calf input{-webkit-appearance:none;appearance:none;width:20px;height:20px;min-width:20px;padding:0;margin:0;border-radius:50%;border:2px solid var(--ev);background:transparent;cursor:pointer}
.calf input:checked{background:var(--ev) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* Monat */
.cal-month{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){ .cal-month{grid-template-columns:minmax(0,1fr) 340px;align-items:start} }
.mgrid-wrap{padding:8px 8px 10px}
.mwd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center;padding:4px 0 6px}
.mwd span{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.mc{min-height:112px;border-top:.5px solid var(--line);padding:4px 3px 6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;min-width:0;outline-offset:-2px;border-radius:0}
.mc:focus-visible{outline:2px solid var(--accent)}
.mc .mn{align-self:flex-end;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-size:.95rem;font-variant-numeric:tabular-nums;margin-right:2px}
.mc.out .mn{color:var(--muted);opacity:.6}
.mc.we:not(.out) .mn{color:var(--muted)}
.mc.sel .mn{background:var(--ink);color:var(--surface);font-weight:600;opacity:1}
.mc.today .mn{color:var(--cal-red);font-weight:700}
.mc.today.sel .mn{background:var(--cal-red);color:#fff}
.mc .chips{display:grid;gap:2px;min-width:0}
.mc .dots{display:none}
.chip{display:flex;align-items:center;gap:4px;width:100%;min-width:0;padding:2px 5px;border-radius:5px;font-size:.74rem;font-weight:500;line-height:1.3;text-align:left;background:transparent;color:var(--ink)}
.chip:hover{filter:none;background:var(--sunk)}
.chip .ct{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.chip .cm{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.7rem}
.chip .cd{width:7px;height:7px;min-width:7px;border-radius:50%;background:var(--ev)}
.chip.allday{background:var(--ev-bg);color:var(--ev-ink);font-weight:600}
.chip.allday:hover{background:var(--ev-bg);filter:brightness(.97)}
.chip .ci,.evb .ci{width:9px;height:9px;min-width:9px;border-radius:50%;border:1.5px solid currentColor;display:inline-block;margin-right:3px;vertical-align:-1px}
.chip.done .ct,.evb.done .evt{text-decoration:line-through;opacity:.6}
.chip.done .ci,.evb.done .ci{background:currentColor}
.mc .more{font-size:.7rem;color:var(--muted);padding-left:5px;font-weight:500}
/* Ausgewählter Tag: Liste wie in der iPhone-Monatsansicht */
.daylist{padding:16px 18px}
.daylist .spread{flex-wrap:nowrap}
.daylist .spread h3{flex:1;min-width:0}
.aglist{display:grid;margin-top:6px}
.ag{display:grid;grid-template-columns:58px 4px minmax(0,1fr);gap:10px;align-items:stretch;padding:9px 0;border-bottom:.5px solid var(--line)}
.ag:last-child{border-bottom:0}
.ag-time{font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--ink);display:grid;align-content:start;gap:1px;padding-top:1px;line-height:1.3}
.ag-time span{color:var(--muted)}
.ag-time b{font-weight:600;color:var(--muted);font-size:.74rem}
.ag-bar{border-radius:2px;background:var(--ev);min-height:34px}
.ag.todo{grid-template-columns:58px 24px minmax(0,1fr)}
.ag.todo .ag-time{color:var(--muted)}
.ag.todo .chk{margin-top:0}
.ag-main{display:grid;gap:1px;text-align:left;background:transparent;padding:0;border-radius:6px;color:var(--ink);font-weight:400;min-width:0}
.ag-main:hover{filter:none}
.ag-main:hover .ag-t{color:var(--accent)}
.ag-t{font-weight:600;font-size:.95rem;overflow-wrap:anywhere}
.ag-m{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.ag.done .ag-t{text-decoration:line-through;color:var(--muted)}
.ag.debt .ag-t{color:var(--crit)}
.ag-empty{padding:10px 0}
.ov-cal .aglist{margin-top:8px}

/* Woche & Tag */
.cal-grid{padding:0;overflow:hidden}
.tg-head,.tg-all,.tg{display:grid}
.tg-head{border-bottom:.5px solid var(--line);padding:8px 0 6px}
.gh{display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;color:var(--ink);padding:2px 0;border-radius:8px;font-weight:500;min-width:0}
.gh:hover{filter:none;background:var(--sunk)}
.gh .gw{font-size:.7rem;color:var(--muted);text-transform:uppercase;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gh .gn{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:1.05rem;font-variant-numeric:tabular-nums}
.gh.we .gn{color:var(--muted)}
.gh.today .gw{color:var(--cal-red)}
.gh.today .gn{background:var(--cal-red);color:#fff;font-weight:700}
.cal-grid.one .gh{flex-direction:row;justify-content:flex-start;gap:8px;padding-left:8px}
.cal-grid.one .gh .gw{font-size:.85rem}
.tg-all{border-bottom:.5px solid var(--line);min-height:30px}
.tg-al{font-size:.66rem;color:var(--muted);text-align:right;padding:6px 6px 0 0;hyphens:manual;line-height:1.2}
.adc{border-left:.5px solid var(--line);padding:3px 2px;display:grid;gap:2px;align-content:start;min-width:0}
.adc .more{background:transparent;color:var(--muted);font-size:.7rem;padding:0 4px;text-align:left;font-weight:500}
.tg-scroll{max-height:max(380px,calc(100dvh - 380px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.tg{position:relative}
.tg-hours{position:relative}
.tg-hours span{position:absolute;right:6px;transform:translateY(-50%);font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tg-col{position:relative;border-left:.5px solid var(--line);background-image:repeating-linear-gradient(to bottom,var(--line) 0,var(--line) .5px,transparent .5px,transparent 48px);cursor:cell;min-width:0}
.tg-col.today{background-color:color-mix(in srgb,var(--cal-red) 3%,transparent)}
.evb{position:absolute;z-index:1;border-radius:6px;padding:3px 6px 3px 7px;background:var(--ev-bg);color:var(--ev-ink);border-left:3px solid var(--ev);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;gap:0;font-size:.76rem;line-height:1.25;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 0 0 1px var(--surface)}
.evb:hover{filter:brightness(.98)}
.evb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.evb .evt{font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.evb .evm{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.evb.short{flex-direction:row;align-items:center;padding-top:0;padding-bottom:0}
.evb.short .evt{-webkit-line-clamp:1;white-space:nowrap;display:block}
.evb.todo{border-left-style:dotted}
.evb[data-drag]{touch-action:pan-y}
.evb.dragging{z-index:5;opacity:.92;box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 0 1px var(--surface);cursor:grabbing;transition:none}
.evb .rs{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize}
.now{position:absolute;left:-4px;right:0;height:0;border-top:2px solid var(--cal-red);z-index:3;pointer-events:none}
.now span{position:absolute;left:-1px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--cal-red)}

/* Liste */
.cal-list{padding:10px 18px 14px}
.lday{padding-top:8px}
.lhead{margin:0;padding:6px 0 0;position:sticky;top:0;background:var(--surface);z-index:1}
.lhead button{padding:4px 0;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.lhead.is-today button{color:var(--cal-red)}

/* Handy */
@media (max-width:640px){
  :root{--tcol:40px}
  .cal-title{font-size:1.35rem}
  .cal-tools .seg{flex:1 1 auto;display:flex}
  .cal-tools .seg button{flex:1;padding:6px 4px}
  details.cal-more summary span,.cal-add span{display:none}
  .cal-add{margin-left:0;padding:8px 10px}
  details.cal-more summary{padding:7px 9px}
  details.cal-more .menu{left:auto;right:-56px}
  .mgrid-wrap{padding:6px 2px 8px}
  .mc{min-height:50px;padding:3px 0 4px;align-items:center;gap:3px}
  .mc .mn{align-self:center;margin:0;width:30px;height:30px;font-size:1rem}
  .mc .chips{display:none}
  .mc .dots{display:flex;gap:3px;justify-content:center;min-height:6px}
  .mc .dots i{width:5px;height:5px;border-radius:50%;background:var(--ev)}
  .mc.out .dots{opacity:.5}
  .daylist{padding:12px 16px}
  .cal-grid:not(.one) .evb{padding:2px 3px 2px 4px;font-size:.66rem;border-left-width:2px}
  .cal-grid:not(.one) .evb .evm{display:none}
  .cal-grid:not(.one) .evb .evt{overflow-wrap:normal;word-break:normal;hyphens:auto;-webkit-line-clamp:4}
  .cal-grid:not(.one) .gh .gn{width:26px;height:26px;font-size:.92rem}
  .cal-grid:not(.one) .adc .chip{font-size:.62rem;padding:1px 3px}
  .cal-grid:not(.one) .adc .chip .ci{display:none}
  .tg-scroll{max-height:calc(100dvh - 340px - env(safe-area-inset-bottom,0px));min-height:320px}
  .ag{grid-template-columns:50px 4px minmax(0,1fr)}
  .ag.todo{grid-template-columns:50px 24px minmax(0,1fr)}
}

/* ---------- Blatt (Termin / To-do) ---------- */
body.sheet-open{overflow:hidden}
.cal-back{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.28);animation:fadeIn .18s ease}
.cal-sheet{position:fixed;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 32px));max-height:min(86dvh,820px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.3),0 0 0 .5px var(--line);padding:0 16px 18px;animation:popIn .2s ease}
.sh-grab{display:none}
.sh-head{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:12px 0 10px;background:var(--bg)}
.sh-head h2{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;text-align:center;white-space:nowrap}
.sh-l{justify-self:start;font-weight:400;padding:6px 4px}
.sh-r{justify-self:end;padding:6px 4px}
.sh-seg{display:flex;margin:0 0 12px}
.sh-seg button{flex:1}
.sh-body{display:grid;gap:14px}
.sg{background:var(--surface);border-radius:12px;display:grid;overflow:hidden}
.sg>input,.sg>textarea{background:transparent;border-radius:0;padding:12px 14px}
.sg>*+*{border-top:.5px solid var(--line)}
.sh-title{font-size:1.05rem;font-weight:600}
.sg textarea{min-height:84px}
.sh-row{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;column-gap:10px;padding:7px 8px 7px 14px;min-height:46px;color:var(--ink);font-size:.95rem;font-weight:400}
.sh-row>:first-child{min-width:0;overflow-wrap:anywhere;line-height:1.25}
.sh-row>:last-child{justify-self:end;min-width:0;max-width:100%}
.sh-row select{width:auto;min-width:0;max-width:100%;background:var(--sunk);padding:7px 28px 7px 10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:12px}
label.ck.sh-row{display:grid;padding-right:10px}
/* Fokus in den Gruppen ohne abgeschnittenen Rahmen */
.sg>input:focus,.sg>textarea:focus,.sg>input:focus-visible,.sg>textarea:focus-visible{outline:none;box-shadow:none}
.sh-row select:focus-visible,.sh-row input:focus-visible,.sh-row .datebtn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dt{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:6px;width:100%;max-width:300px}
.dt1{width:100%;max-width:230px}
.dt .datebtn,.dt1 .datebtn{padding:8px 10px;font-size:.9rem;background:var(--sunk);justify-content:flex-end;min-width:0}
.dt .datebtn span,.dt1 .datebtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt .datebtn svg,.dt1 .datebtn svg{display:none}
.dt input[type=time],.dt1 input[type=time]{min-width:0;padding:8px 6px;text-align:center;font-variant-numeric:tabular-nums}
.dt input[type=time][hidden]{display:none}
.dt:has(input[type=time][hidden]){grid-template-columns:1fr}
.dtz{grid-template-columns:minmax(0,110px) auto;justify-content:end}
.selwrap{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.selwrap i{width:12px;height:12px;min-width:12px;border-radius:50%;background:var(--ev)}
.selwrap select{flex:0 1 auto;min-width:0;max-width:100%}
.linked{grid-template-columns:minmax(0,1fr) auto}
.linked .lt{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:.92rem;font-weight:400;min-width:0}
.linked .lt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkbtn{width:100%;background:transparent;border-radius:0;color:var(--ink);font-weight:400;text-align:right}
.linkbtn span:first-child{text-align:left}
.linkbtn span:last-child{color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-actions{background:transparent;gap:8px;overflow:visible}
.sh-actions>*+*{border-top:0}
.sh-actions button{background:var(--surface);padding:12px;font-weight:500;border-radius:12px}
.sh-actions .note{padding:0 4px}
.sh-note{padding:0 6px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (max-width:640px){
  .cal-sheet{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:94dvh;border-radius:14px 14px 0 0;padding:0 max(14px,env(safe-area-inset-left,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-right,0px));animation:sheetUp .26s cubic-bezier(.2,.8,.2,1)}
  .sh-grab{display:block;width:36px;height:5px;border-radius:3px;background:var(--line);margin:7px auto 0}
  .sh-head{padding-top:6px}
}
/* Sehr schmale iPhones: Datum und Uhrzeit unter die Beschriftung, damit nichts abgeschnitten wird */
@media (max-width:400px){
  .sh-row:has(> .dt:not(.dtz)){grid-template-columns:minmax(0,1fr);row-gap:6px;padding-top:10px;padding-bottom:10px}
  .sh-row:has(> .dt:not(.dtz))>:first-child{font-size:.8rem;color:var(--muted)}
  .sh-row > .dt:not(.dtz){justify-self:stretch;max-width:none;grid-template-columns:minmax(0,1fr) 96px}
  .sh-row > .dt:not(.dtz) .datebtn{justify-content:flex-start}
  .sh-head{column-gap:4px}
  .sh-head h2{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){ .cal-sheet,.cal-back{animation:none} }

/* Sieben Reiter unten: auf kleinen iPhones etwas kleinere Beschriftung */
@media (max-width:360px){ nav a{font-size:.58rem!important;letter-spacing:-.02em} }