:root{color-scheme:light dark;--bg:#f4f7fb;--panel:#fff;--panel2:#f8fafc;--text:#152033;--muted:#6e788b;--border:#e3e8f1;--accent:#2f6fed;--accentText:#fff;--danger:#c8323c;--work:#245bd8;--private:#8a4bd8;--shadow:0 10px 32px rgba(20,35,70,.08)}
:root[data-theme="dark"]{--bg:#0f1520;--panel:#171f2d;--panel2:#111824;--text:#edf2ff;--muted:#9ca8bc;--border:#2a3448;--accent:#76a3ff;--accentText:#081225;--danger:#ff7b86;--work:#78a4ff;--private:#c59cff;--shadow:0 10px 32px rgba(0,0,0,.28)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.center-screen{min-height:100vh;display:grid;place-items:center;padding:24px}.card{background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:20px}.login-card{width:min(420px,100%)}.brand{font-weight:800;font-size:22px;margin-bottom:18px}.full{width:100%}
h1,h2,h3{margin:0 0 8px}.muted{color:var(--muted)}.smalltext{font-size:13px}.error{color:var(--danger);min-height:1.2em}
label{display:grid;gap:7px;margin:14px 0;color:var(--muted);font-size:14px}input,select,textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:11px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.primary,.ghost,.chip{border:0;border-radius:10px;padding:10px 14px}.primary{background:var(--accent);color:var(--accentText);font-weight:700}.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}.small{padding:8px 11px}
.app{min-height:100vh;display:grid;grid-template-columns:240px 1fr}.sidebar{position:sticky;top:0;height:100vh;border-right:1px solid var(--border);padding:22px 16px;background:var(--panel);display:flex;flex-direction:column}nav{display:grid;gap:6px}
.nav{border:0;background:transparent;color:var(--muted);padding:11px 12px;text-align:left;border-radius:10px}.nav.active,.nav:hover{background:var(--bg);color:var(--text)}.sidebar-bottom{margin-top:auto;display:grid;gap:8px}
main{padding:28px;max-width:1500px;width:100%}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.header-actions{display:flex;gap:8px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:16px}.stat{display:flex;justify-content:space-between;align-items:end}.stat strong{font-size:32px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.section-title{font-weight:800;font-size:17px;margin-bottom:14px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px}.filterbar,.calendar-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 18px}.spacer{flex:1}
.chip{padding:7px 10px;background:var(--panel2);color:var(--muted);border:1px solid var(--border)}.chip.active{background:var(--accent);color:var(--accentText);border-color:transparent}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border)}.item:first-child{border-top:0}.item-title{font-weight:650}.item-meta{font-size:13px;color:var(--muted)}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--border);font-size:12px}.badge.work{color:var(--work)}.badge.private{color:var(--private)}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}.calendar-head{background:transparent;border:0;margin-bottom:6px;gap:6px}.calendar-head>div{padding:6px 8px;color:var(--muted);font-size:12px;font-weight:700}
.day{min-height:135px;background:var(--panel);padding:8px}.day.outside{opacity:.45}.daynum{font-size:13px;font-weight:700;margin-bottom:7px}.event-pill{font-size:12px;padding:5px 7px;border-radius:8px;margin:4px 0;background:var(--panel2);border-left:3px solid var(--work);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-pill.private{border-left-color:var(--private)}
dialog{border:1px solid var(--border);border-radius:18px;background:var(--panel);color:var(--text);width:min(580px,calc(100% - 24px));box-shadow:var(--shadow);max-height:90vh;overflow:auto}dialog::backdrop{background:rgba(0,0,0,.45)}.dialog-form{padding:4px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;flex-wrap:wrap}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.resultbox{margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--panel2)}
@media(max-width:1000px){.stats{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.day{min-height:100px}}
@media(max-width:800px){.app{grid-template-columns:1fr}.sidebar{height:auto;position:static;border-right:0;border-bottom:1px solid var(--border);padding:12px;flex-direction:row;align-items:center;gap:10px;overflow:auto}.sidebar .brand{margin:0 8px 0 0}nav{display:flex}.sidebar-bottom{margin:0 0 0 auto;display:flex}main{padding:16px}.stats{grid-template-columns:1fr 1fr}.nav{white-space:nowrap}.calendar-grid{min-width:760px}.card:has(.calendar-grid){overflow:auto}.two{grid-template-columns:1fr}}


.routines-today-card{margin-top:16px}
.routine-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border)}
.routine-item:first-child{border-top:0}
.routine-item.done .item-title{text-decoration:line-through;color:var(--muted)}
.routine-check{margin:0;display:block}
.routine-check input{position:absolute;opacity:0;pointer-events:none}
.routine-checkmark{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--border);border-radius:10px;background:var(--panel2);color:transparent;font-weight:900}
.routine-check input:checked + .routine-checkmark{background:var(--accent);border-color:var(--accent);color:var(--accentText)}
.routine-check input:focus-visible + .routine-checkmark{outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent);outline-offset:2px}
.weekday-fieldset{border:1px solid var(--border);border-radius:12px;padding:12px;margin:14px 0}
.weekday-fieldset legend{padding:0 6px;color:var(--muted);font-size:14px}
.weekday-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.daycheck{margin:0;display:block}
.daycheck input{position:absolute;opacity:0}
.daycheck span{display:grid;place-items:center;min-height:40px;border:1px solid var(--border);border-radius:10px;background:var(--panel2);font-size:13px;font-weight:700}
.daycheck input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--accentText)}
.daycheck input:focus-visible + span{outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent);outline-offset:2px}
@media(max-width:520px){.weekday-grid{grid-template-columns:repeat(4,1fr)}}


.active-timer{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;margin-bottom:18px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
.active-timer.timer-over{border-color:var(--accent)}
.timer-label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.timer-title{font-weight:800;font-size:18px;margin-top:2px}
.timer-clock{font-variant-numeric:tabular-nums;font-size:30px;font-weight:850;letter-spacing:-.03em;min-width:110px;text-align:center}
.timer-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.routine-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.routine-actions button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){
  .active-timer{grid-template-columns:1fr auto}
  .timer-actions{grid-column:1/-1;justify-content:stretch}
  .timer-actions button{flex:1}
  .timer-clock{font-size:26px}
  .routine-item{grid-template-columns:auto 1fr}
  .routine-actions{grid-column:2;justify-content:flex-start}
}


.danger{border:1px solid color-mix(in srgb,var(--danger) 55%,var(--border));background:transparent;color:var(--danger);border-radius:10px;padding:10px 14px;font-weight:700}
.danger.small{padding:8px 11px}
.routine-pill{border-left-style:dashed;font-style:italic;opacity:.92}

.task-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.task-actions{grid-column:2;justify-content:flex-start}}

button.event-pill{display:block;width:100%;text-align:left;color:var(--text);cursor:pointer}
button.event-pill:hover{filter:brightness(.98)}

.planned-task{opacity:.72}
.today-task .item-title{font-weight:800}
.overdue-task .item-meta{color:var(--danger)}

.task-calendar-pill{border-left-style:double}
.task-calendar-pill.calendar-done{
  text-decoration:line-through;
  opacity:.5;
  filter:saturate(.45);
}
.task-calendar-pill.calendar-done::first-letter{text-decoration:none}

button.routine-pill{display:block;width:100%;text-align:left;color:var(--text);cursor:pointer}
button.routine-pill.calendar-done{
  text-decoration:line-through;
  opacity:.5;
  filter:saturate(.45);
}


/* --- V13 business look --- */
:root{
  --bg:#eef2f8;
  --panel:#ffffff;
  --panel2:#f5f7fb;
  --text:#172033;
  --muted:#67758d;
  --border:#dbe3ef;
  --accent:#295fd6;
  --accentText:#ffffff;
  --danger:#c83a44;
  --work:#245bd8;
  --private:#8557d8;
  --shadow:0 16px 38px rgba(17,31,63,.08);
}
:root[data-theme="dark"]{
  --bg:#0d1420;
  --panel:#121b2a;
  --panel2:#0f1724;
  --text:#eaf0ff;
  --muted:#9eabc2;
  --border:#243047;
  --accent:#7ea8ff;
  --accentText:#07111f;
  --danger:#ff8892;
  --work:#8cb0ff;
  --private:#cfb1ff;
  --shadow:0 18px 42px rgba(0,0,0,.34);
}

body{
  background:
    radial-gradient(circle at top left, rgba(41,95,214,.05), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 180px),
    var(--bg);
}

.sidebar{
  background:linear-gradient(180deg, var(--panel), color-mix(in srgb,var(--panel) 90%, var(--bg)));
  padding:24px 18px;
}
.brand{
  letter-spacing:.01em;
  font-size:24px;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand::before{
  content:"";
  width:14px;height:14px;border-radius:4px;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%, white));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%, transparent);
  display:inline-block;
}
.nav{
  font-weight:600;
  color:var(--muted);
}
.nav.active,.nav:hover{
  background:color-mix(in srgb,var(--accent) 10%, var(--panel2));
  color:var(--text);
}

main{padding:30px}
header{
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 88%, transparent), color-mix(in srgb,var(--panel2) 88%, transparent));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:22px;
  padding:22px 24px;
  margin-bottom:22px;
}
header h2{
  font-size:28px;
  margin-bottom:4px;
}
.header-actions{
  justify-content:flex-end;
  row-gap:10px;
}
.card{
  border-radius:20px;
  padding:22px;
}
.section-title{
  font-size:18px;
  margin-bottom:16px;
}
.stats{gap:18px}
.stat{
  min-height:104px;
  align-items:flex-start;
  flex-direction:column;
  justify-content:space-between;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--panel) 92%, white), var(--panel));
}
.stat span{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  font-weight:700;
}
.stat strong{
  font-size:38px;
  line-height:1;
}

.primary,.ghost,.chip,.danger{
  border-radius:12px;
}
.primary{
  box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 22%, transparent);
}
.ghost{
  background:color-mix(in srgb,var(--panel2) 70%, transparent);
}
.toolbar,.calendar-toolbar{
  gap:10px;
}
.calendar-toolbar{
  margin-top:16px;
}
.day{
  min-height:148px;
  padding:10px;
}
.daynum{
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}
.event-pill{
  border-left-width:4px;
  border-radius:10px;
  padding:6px 8px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel2) 90%, white), var(--panel2));
}
.slot-actions{
  align-items:flex-start;
  flex-wrap:wrap;
}
#slotMsg{
  margin-top:8px;
  display:block;
}
.dialog-form h3{
  margin-bottom:4px;
}
.dialog-form p{
  margin-top:0;
}
.resultbox{
  border-radius:16px;
}
.active-timer{
  border-radius:20px;
}
.badge{
  font-weight:700;
  padding:4px 10px;
}
.routine-checkmark{
  width:34px;height:34px;border-radius:12px;
}
.item{
  padding:14px 0;
}
.item-title{
  font-weight:700;
}

@media(max-width:1100px){
  header{
    align-items:flex-start;
    gap:16px;
    flex-direction:column;
  }
}
@media(max-width:800px){
  main{padding:16px}
  header{padding:18px}
}


.availability-results{
  margin-top:18px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel2);
}
#availabilitySlots{
  display:grid;
  gap:10px;
}
.availability-slot{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel);
  color:var(--text);
  text-align:left;
}
.availability-slot span:first-child{
  display:grid;
  gap:3px;
}
.availability-slot small{
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.slot-choose{
  color:var(--accent);
  font-weight:800;
  white-space:nowrap;
}
.availability-slot:hover{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  background:color-mix(in srgb,var(--accent) 5%,var(--panel));
}


.availability-window-card{
  margin:16px 0;
  padding:16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel2);
}
.slot-settings{
  margin:12px 0;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel2);
}
.slot-settings summary{
  cursor:pointer;
  font-weight:700;
  color:var(--text);
}
.slot-settings[open] summary{
  margin-bottom:8px;
}


/* --- V16 Executive / Millionärs-Tool --- */
.executive-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--accent) 7%,var(--panel)), var(--panel));
}
.eyebrow{
  font-size:11px;
  letter-spacing:.14em;
  font-weight:800;
  color:var(--muted);
  margin-bottom:8px;
}
.executive-hero h3{
  font-size:24px;
  margin-bottom:4px;
}
.executive-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.executive-grid{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr);
  gap:18px;
  margin-bottom:18px;
}
.executive-primary,.executive-side{
  min-width:0;
}
.exec-next{
  padding:18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--panel2)),var(--panel2));
  margin:6px 0 18px;
}
.exec-next-label,.exec-section-label{
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
}
.exec-next-title{
  font-size:22px;
  font-weight:850;
  margin-top:6px;
}
.exec-next-meta{
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
}
.exec-next-empty{
  color:var(--muted);
  font-weight:650;
}
.exec-section-label{
  margin:18px 0 8px;
}
.exec-list-row{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 0;
  border:0;
  border-top:1px solid var(--border);
  background:transparent;
  color:var(--text);
  text-align:left;
}
.exec-list-row:first-of-type{border-top:0}
.exec-list-row span:first-child{
  min-width:0;
  display:grid;
  gap:3px;
}
.exec-list-row strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.exec-list-row small{
  color:var(--muted);
}
.exec-list-row.static{cursor:default}
.exec-list-row.done strong{text-decoration:line-through;color:var(--muted)}
.exec-priority{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--muted);
}
.exec-capacity-block + .exec-capacity-block{
  margin-top:18px;
}
.exec-slot{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  margin-top:8px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel2);
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.exec-slot span:last-child{
  color:var(--accent);
  font-weight:800;
  font-size:12px;
}
.dashboard-secondary{margin-top:18px}

@media(max-width:1100px){
  .executive-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .executive-hero{align-items:flex-start;flex-direction:column}
  .executive-actions{width:100%;justify-content:stretch}
  .executive-actions button{flex:1}
}


/* V17: Wochentag + Datum direkt in jeder Kalenderzelle */
.calendar-grid{
  align-items:stretch;
}
.day{
  position:relative;
}
.day-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-bottom:8px;
  margin-bottom:4px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent);
}
.day-weekday{
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
}
.day-date{
  display:grid;
  place-items:center;
  min-width:26px;
  height:26px;
  padding:0 6px;
  border-radius:8px;
  font-size:12px;
  font-weight:850;
  color:var(--text);
  background:var(--panel2);
  border:1px solid var(--border);
}
.day.outside .day-date{
  background:transparent;
}


/* --- V18 iOS/PWA mobile shell --- */
.mobile-bottom-nav{display:none}
@media(max-width:800px){
  body{padding-bottom:78px}
  .sidebar{display:none}
  .app{display:block}
  main{padding:12px 12px 90px}
  header{
    border-radius:16px;
    padding:15px;
    margin-bottom:14px;
  }
  header .header-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  header .header-actions button{
    min-height:44px;
  }
  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .stat{min-height:90px;padding:16px}
  .executive-grid{gap:12px}
  .card{border-radius:16px;padding:16px}
  .calendar-grid{min-width:720px}
  .mobile-bottom-nav{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:80;
    padding:8px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));
    border-top:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 94%,transparent);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }
  .mobile-nav{
    min-height:50px;
    display:grid;
    place-items:center;
    gap:2px;
    border:0;
    background:transparent;
    color:var(--muted);
    border-radius:12px;
  }
  .mobile-nav span{font-size:20px;line-height:1}
  .mobile-nav small{font-size:10px;font-weight:700}
  .mobile-nav.active{color:var(--accent)}
  .mobile-add{
    background:var(--accent);
    color:var(--accentText);
  }
  dialog{
    width:calc(100% - 12px);
    max-height:calc(100vh - 16px);
    border-radius:18px;
  }
}
@media(display-mode:standalone){
  body{overscroll-behavior-y:none}
}