/* TodoListe */
:root{
  --bg:#0e1015;--seite:#12151b;--fl:#161a22;--fl2:#1d222c;--fl3:#262c38;--rand:#242a35;--rand2:#343c4b;
  --text:#eceef3;--grau:#8d95a7;--blau:#5b8def;--blau2:#7a6cf5;--rot:#ff5d6c;--gelb:#ffc04d;--gruen:#38d39f;
  --radius:14px;
}
@media (prefers-color-scheme:light){:root{
  --bg:#f5f6fa;--seite:#fbfbfd;--fl:#ffffff;--fl2:#f1f3f8;--fl3:#e5e9f1;--rand:#e4e7ef;--rand2:#cfd5e2;
  --text:#191c26;--grau:#677088;--blau:#3f78e8;--blau2:#6a5af0;--rot:#e5384b;--gelb:#c97d00;--gruen:#14a577;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
input,select{background:var(--fl);border:1px solid var(--rand);border-radius:10px;padding:10px 12px;min-width:0;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover{border-color:var(--rand2)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blau);box-shadow:0 0 0 4px color-mix(in srgb,var(--blau) 20%,transparent)}
button:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
button{cursor:pointer;border:1px solid var(--rand);background:var(--fl);border-radius:10px;padding:9px 14px;transition:background .15s,border-color .15s,transform .08s}
button:hover{border-color:var(--rand2);background:var(--fl2)}
button:active{transform:translateY(1px)}
.haupt{background:linear-gradient(135deg,var(--blau),var(--blau2));border-color:transparent;color:#fff;font-weight:600}
.haupt:hover{background:linear-gradient(135deg,var(--blau),var(--blau2));border-color:transparent;filter:brightness(1.08)}
.gefahr{color:var(--rot)}
.gefahr:hover{border-color:var(--rot);background:color-mix(in srgb,var(--rot) 10%,transparent)}
.klein{font-size:13px;color:var(--grau)}
.fehler{color:var(--rot);font-size:13px;min-height:20px}
[hidden]{display:none!important}

/* Gerüst */
.rahmen{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh;align-items:start}
.topleiste,.schleier{display:none}

/* Seitenleiste */
.seite{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;background:var(--seite);border-right:1px solid var(--rand);padding:18px 12px 12px;display:flex;flex-direction:column;gap:4px}
.seite h1{display:flex;align-items:center;gap:10px;margin:2px 8px 14px;font-size:17px;letter-spacing:-.01em}
.logo{width:28px;height:28px;border-radius:9px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/62% no-repeat,linear-gradient(135deg,#5b8def,#7a6cf5)}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rand2);margin-left:auto}
.live.an{background:var(--gruen);box-shadow:0 0 0 3px color-mix(in srgb,var(--gruen) 25%,transparent)}
.seitenkopf{display:flex;align-items:center;justify-content:space-between;margin:16px 8px 4px 10px}
.seitentitel{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--grau);font-weight:600}
.icon{width:26px;height:26px;padding:0;display:grid;place-items:center;font-size:17px;line-height:1;background:transparent;border-color:transparent;color:var(--grau);border-radius:8px}
.icon:hover{background:var(--fl2);color:var(--text);border-color:transparent}
#projekte,#teams{display:flex;flex-direction:column;gap:1px}
.proj{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;padding:8px 10px;border-radius:9px;color:var(--text)}
.proj:hover{background:var(--fl2);border:0}
.proj.aktiv{background:var(--fl3);font-weight:600}
.proj i{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.proj .txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.proj .txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj small{font-size:11.5px;color:var(--grau);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj b{font-weight:500;font-size:12.5px;color:var(--grau)}
.proj.aktiv b{color:var(--text)}
.plus{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:8px 10px;color:var(--grau);font-size:14px}
.plus:hover{background:var(--fl2);color:var(--text);border:0}
.plus::before{content:"+";width:10px;text-align:center;font-size:17px;line-height:1}
.projekt-form{display:flex;flex-wrap:wrap;gap:6px;padding:4px 2px 8px}
.projekt-form input{flex:1;font-size:14px;padding:8px 11px;background:var(--fl2);border-color:transparent}
.projekt-form button{padding:8px 13px;font-weight:700}
.projekt-form select{flex-basis:100%;font-size:13px;padding:7px 10px;background:var(--fl2);border-color:transparent}
.konto{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 6px 0;border-top:1px solid var(--rand)}
.avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--blau),var(--blau2))}
.konto .wer{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.konto b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.konto .klein{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.konto button{padding:6px 10px;font-size:13px;background:none;color:var(--grau)}

/* Hauptbereich */
main{padding:40px clamp(18px,4vw,56px) 80px;max-width:1240px;width:100%;margin:0 auto}
.kopf{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-start;margin-bottom:22px}
.kopf-links{min-width:0;flex:1 1 280px}
.gruss{margin:0 0 2px;font-size:14px;color:var(--grau)}
.kopf h2{margin:0 0 10px;font-size:34px;letter-spacing:-.025em;line-height:1.15}
.stats{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--grau)}
.stat b{color:var(--text);font-weight:600;margin-right:5px}
.stat.warn,.stat.warn b{color:var(--rot)}
.stat.heute,.stat.heute b{color:var(--gelb)}
.online{color:var(--gruen);min-height:19px;margin-top:6px}
.ring{position:relative;width:72px;height:72px;flex-shrink:0;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.ring .spur{stroke:var(--fl3)}
.ring .fuell{stroke:url(#ringfarbe);stroke-dasharray:163.36;stroke-dashoffset:163.36;transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}
.ring b{font-size:15px;letter-spacing:-.02em}
.ring .klein{display:none}

.werkzeuge{order:3;flex:1 1 100%;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:6px}
.segment{display:flex;gap:2px;padding:3px;background:var(--fl);border:1px solid var(--rand);border-radius:11px}
.segment button{border:0;background:transparent;padding:6px 14px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--grau)}
.segment button:hover{background:var(--fl2);color:var(--text);border:0}
.segment button[aria-pressed=true]{background:var(--fl3);color:var(--text);font-weight:600}
.rechtswerk{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rechtswerk input{width:190px;padding:7px 12px 7px 34px;font-size:14px;background:var(--fl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d95a7' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 11px center/16px no-repeat}
.rechtswerk button{padding:7px 12px;font-size:13.5px}

/* Neue Aufgabe: klappt beim Anklicken auf */
.neu{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 8px;margin-bottom:6px;background:var(--fl);border:1px dashed var(--rand2);border-radius:var(--radius);transition:border-color .15s,background .15s,padding .15s}
.neu:hover{border-color:var(--grau)}
.neu:focus-within{border-style:solid;border-color:var(--blau);padding:10px 12px 12px;box-shadow:0 0 0 4px color-mix(in srgb,var(--blau) 14%,transparent)}
.neu #atitel{flex:1 1 100%;border:0;background:transparent;font-size:16px;padding:8px 6px;box-shadow:none}
.neu #atitel:focus{box-shadow:none}
.neu #atitel::placeholder{color:var(--grau)}
.neu:not(:focus-within) > :not(#atitel){display:none}
.neu select,.neu input[type=date]{flex:0 1 auto;font-size:13px;padding:7px 10px;border-radius:9px;background:var(--fl2);border-color:transparent}
.neu .haupt{margin-left:auto;padding:8px 20px}

/* Aufgaben */
#liste{margin-top:18px}
.gruppe{margin-top:30px}
.gruppe:first-child{margin-top:0}
.gruppe h3{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);margin:0 0 10px 4px;font-weight:600}
.gruppe h3 i{width:10px;height:10px;border-radius:3px}
.gruppe h3 span{font-weight:500;color:var(--grau)}
.box{background:var(--fl);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden}
.aufgabe{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--rand);animation:rein .25s ease both;transition:background .12s,opacity .2s}
.aufgabe:last-child{border-bottom:0}
.aufgabe:hover{background:var(--fl2)}
@keyframes rein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.aufgabe .titel{font-weight:500;font-size:15.5px;word-break:break-word;line-height:1.4}
.aufgabe .notiz{font-size:13.5px;color:var(--grau);margin-top:2px;white-space:pre-wrap;word-break:break-word}
.aufgabe .von{font-size:12px;color:var(--grau);margin-top:3px;opacity:.85}
.rechts{display:flex;align-items:center;gap:10px;white-space:nowrap}
.datum{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--grau)}
.datum::before{content:"";width:13px;height:13px;background:currentColor;opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat}
.datum.spaet{color:var(--rot);font-weight:600}
.datum.heute{color:var(--gelb);font-weight:600}
.mini{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;color:#fff;letter-spacing:0;box-shadow:0 0 0 2px var(--fl)}
.mini.platz{box-shadow:none;background:transparent}
.mini.ich{box-shadow:0 0 0 2px var(--fl),0 0 0 4px color-mix(in srgb,var(--blau) 60%,transparent)}
.aktionen{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;gap:2px;padding:3px;background:var(--fl3);border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .15s}
.aufgabe:hover .aktionen,.aufgabe:focus-within .aktionen{opacity:1;pointer-events:auto}
@media (hover:none){.aktionen{position:static;transform:none;opacity:1;pointer-events:auto;background:none;box-shadow:none;padding:0;grid-column:2}}
.aktionen button{padding:5px 10px;font-size:13px;background:none;border-color:transparent;color:var(--text)}
.aktionen button:hover{background:var(--fl3);color:var(--text)}
.aktionen .gefahr:hover{color:var(--rot);background:color-mix(in srgb,var(--rot) 12%,transparent)}
.aufgabe.nurlesen .aktionen{display:none}

/* Checkbox: Ring in der Farbe der Priorität */
.aufgabe input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border:2px solid var(--rand2);border-radius:50%;background:transparent;display:grid;place-content:center;cursor:pointer;padding:0;transition:background .15s,border-color .15s,transform .1s}
.aufgabe.hoch input[type=checkbox]{border-color:var(--rot);background:color-mix(in srgb,var(--rot) 12%,transparent)}
.aufgabe.niedrig input[type=checkbox]{border-color:var(--rand)}
.aufgabe input[type=checkbox]::before{content:"";width:10px;height:5.5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .15s}
.aufgabe input[type=checkbox]:hover:not(:disabled){border-color:var(--gruen);transform:scale(1.1)}
.aufgabe input[type=checkbox]:checked{background:var(--gruen);border-color:var(--gruen)}
.aufgabe input[type=checkbox]:checked::before{transform:translateY(-1px) rotate(-45deg) scale(1)}
.aufgabe input[type=checkbox]:disabled{cursor:default;opacity:.55}
.aufgabe input[type=checkbox]:focus-visible{outline:2px solid var(--blau);outline-offset:2px;box-shadow:none}

/* Erledigt: ausgegraut */
#liste .aufgabe.fertig{opacity:.5;filter:grayscale(1)}
#liste .aufgabe.fertig .titel{text-decoration:line-through;color:var(--grau)}
#liste .aufgabe.fertig:hover,#liste .aufgabe.fertig:focus-within{opacity:.92;filter:none}

/* Bearbeiten */
.bearbeiten{grid-column:2/-1;display:grid;grid-template-columns:1fr auto auto;gap:8px}
.bearbeiten textarea{grid-column:1/-1;background:var(--fl2);border:1px solid var(--rand);border-radius:10px;padding:10px 12px;resize:vertical;min-height:64px}
.bearbeiten select.zu{grid-column:1/-1}
.bearbeiten .zeile{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}

/* Leer */
.leer{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--grau);padding:64px 16px}
.leer svg{width:92px;height:92px}
.leer b{color:var(--text);font-size:17px;font-weight:600}
.leer span{max-width:36ch}

/* Dialoge */
dialog{background:var(--fl);color:var(--text);border:1px solid var(--rand);border-radius:16px;padding:22px;width:min(500px,calc(100% - 24px));box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(5,7,12,.6);backdrop-filter:blur(3px)}
dialog[open]{animation:rein .2s ease}
.dialog-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.dialog-kopf h3{margin:0;font-size:19px;letter-spacing:-.01em}
.dialog-kopf button{background:none;border:0;font-size:24px;line-height:1;padding:2px 9px;color:var(--grau)}
.person{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rand)}
.person .wer{flex:1;min-width:0;display:flex;flex-direction:column}
.person .wer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person select{padding:5px 8px;font-size:13px}
.person button{padding:4px 10px;font-size:13px;background:none}
.einladen{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:16px}
.hinweis{font-size:13px;color:var(--grau);margin:10px 0 0}
.ok{color:var(--gruen)}

/* Handy: Seitenleiste als ausfahrbares Menü */
@media (max-width:820px){
  .rahmen{grid-template-columns:minmax(0,1fr)}
  .topleiste{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;padding:10px 14px;background:color-mix(in srgb,var(--seite) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--rand);font-weight:700}
  .topleiste .icon{width:38px;height:38px;border:1px solid var(--rand);font-size:0}
  .topleiste .icon svg{width:20px;height:20px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round}
  .topleiste .live{margin-left:auto}
  .seite{position:fixed;z-index:50;left:0;top:0;bottom:0;width:min(300px,86vw);height:auto;transform:translateX(-102%);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .menue-offen .seite{transform:none;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .seite h1 .live{display:none}
  .schleier{display:block;position:fixed;inset:0;z-index:40;background:rgba(5,7,12,.55);opacity:0;pointer-events:none;transition:opacity .25s}
  .menue-offen .schleier{opacity:1;pointer-events:auto}
  main{padding:22px 16px 64px}
  .kopf h2{font-size:28px}
  .rechtswerk{width:100%}.rechtswerk input{flex:1;width:auto}
  .segment{width:100%}.segment button{flex:1 1 0;padding:7px 4px}
}
@media (max-width:560px){
  .aufgabe{grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding:13px 14px}
  .rechts{grid-column:2;white-space:normal;flex-wrap:wrap}
  .aufgabe .aktionen{position:static;transform:none;grid-column:2;opacity:1;pointer-events:auto;background:none;box-shadow:none;padding:0}
  .ring{width:58px;height:58px}.ring b{font-size:13px}
  .einladen{grid-template-columns:1fr 1fr}.einladen input{grid-column:1/-1}.person{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aufgabe,.aufgabe input[type=checkbox],.aufgabe input[type=checkbox]::before,.ring .fuell,dialog[open],.seite,.schleier{animation:none;transition:none}
}

/* Breite Bildschirme: bei „Alle Aufgaben" stehen die Listen nebeneinander */
#liste.mehrspaltig{display:grid;grid-template-columns:repeat(auto-fill,minmax(500px,1fr));gap:30px 28px;align-items:start}
#liste.mehrspaltig .gruppe{margin-top:0}
@media (max-width:1100px){#liste.mehrspaltig{display:block}#liste.mehrspaltig .gruppe{margin-top:30px}#liste.mehrspaltig .gruppe:first-child{margin-top:0}}