:root{--farbe-hintergrund: #f6f7f9;--farbe-flaeche: #ffffff;--farbe-rand: #dfe3e8;--farbe-text: #1b1f24;--farbe-text-schwach: #6b7480;--farbe-akzent: #2f6feb;--farbe-akzent-schwach: #e8effd;--farbe-offen: #9aa4b1;--farbe-laeuft: #e0a11a;--farbe-erledigt: #2f9e5f;--farbe-gefahr: #c0392b;--farbe-gefahr-schwach: #fdecea;--farbe-kategorie: #eef1f5;--farbe-kategorie-rand: #c6ccd6;--farbe-kategorie-text: #33404f;--abstand-1: 4px;--abstand-2: 8px;--abstand-3: 12px;--abstand-4: 16px;--abstand-5: 24px;--radius: 10px;--tippflaeche: 44px;--krume-breite: 7ch;--schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--schrift-klein: 15px;--schrift-normal: 17px;--schrift-gross: 21px}@media(min-width:900px){:root{--schrift-klein: 13px;--schrift-normal: 15px;--schrift-gross: 17px;--tippflaeche: 40px;--krume-breite: 14ch}}*{box-sizing:border-box}body{margin:0;font-family:var(--schrift);font-size:var(--schrift-normal);color:var(--farbe-text);background:var(--farbe-hintergrund);-webkit-text-size-adjust:100%;text-size-adjust:100%}button,input,select,textarea{font:inherit;color:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.app{display:flex;flex-direction:column;height:100dvh}.kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-3);padding:var(--abstand-3) var(--abstand-4);background:var(--farbe-flaeche);border-bottom:1px solid var(--farbe-rand)}.kopfzeile h1{margin:0;font-size:var(--schrift-gross)}.breadcrumb{display:flex;align-items:center;overflow-x:auto;padding:var(--abstand-1) var(--abstand-3);background:var(--farbe-flaeche);border-bottom:1px solid var(--farbe-rand);white-space:nowrap;min-width:0;scrollbar-width:none}.breadcrumb::-webkit-scrollbar{display:none}.krume{display:flex;align-items:center;flex:none}.krume-trenner{color:var(--farbe-text-schwach);padding-inline:1px}.krume-name{min-height:var(--tippflaeche);max-width:var(--krume-breite);padding:0 var(--abstand-1);border:0;background:none;color:var(--farbe-akzent);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.krume:last-of-type .krume-name{max-width:calc(var(--krume-breite) * 2);font-weight:600}.krume-plus{flex:none;margin-left:var(--abstand-1);color:var(--farbe-akzent)}.krume-plus:hover{background:var(--farbe-akzent-schwach)}.app[data-detail-offen=true] .krume-plus{display:none}.inhalt{flex:1;min-height:0;display:flex;position:relative}.spalten{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.spalten-schiene{display:flex;height:100%;transform:translate(calc(var(--aktive-spalte, 0) * -100%));transition:transform .22s ease}@media(prefers-reduced-motion:reduce){.spalten-schiene{transition:none}}.spalte{flex:0 0 100%;display:flex;flex-direction:column;min-height:0;overflow-y:auto;background:var(--farbe-flaeche)}.zeile-gruppe{display:flex;align-items:stretch;border-bottom:1px solid var(--farbe-rand)}.zeile-gruppe[data-variante=kategorie]{background:var(--farbe-kategorie);border-bottom:2px solid var(--farbe-kategorie-rand)}.zeile-gruppe[data-variante=kategorie] .zeile-titel{font-weight:600;color:var(--farbe-kategorie-text)}.zeile-gruppe[data-variante=kategorie] .zeile[aria-current=true]{background:none}.zeile{display:flex;align-items:center;gap:var(--abstand-2);flex:1;min-width:0;min-height:var(--tippflaeche);padding:var(--abstand-2) var(--abstand-3);border:0;background:none;text-align:left;cursor:pointer}.zeile[aria-current=true]{background:var(--farbe-akzent-schwach)}.prioritaet-marke{margin-left:var(--abstand-1);font-size:var(--schrift-klein);font-variant-numeric:tabular-nums;color:var(--farbe-text-schwach);white-space:nowrap}.prioritaet-marke[data-wichtig=A]{color:var(--farbe-gefahr);font-weight:600}.prioritaet-marke[data-wichtig=B]{color:var(--farbe-laeuft)}.zeile-inhalt{flex:1;min-width:0}.zeile-titel{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zeile-meta{display:flex;align-items:center;gap:var(--abstand-2);margin-top:var(--abstand-1);font-size:var(--schrift-klein);color:var(--farbe-text-schwach)}.status-punkt{width:8px;height:8px;border-radius:50%;flex:none}.status-punkt[data-status=open]{background:var(--farbe-offen)}.status-punkt[data-status=in_progress]{background:var(--farbe-laeuft)}.status-punkt[data-status=done]{background:var(--farbe-erledigt)}.unteraufgaben-zaehler{font-variant-numeric:tabular-nums;white-space:nowrap}.zeile-knopf{flex:none;width:var(--tippflaeche);border:0;background:none;color:var(--farbe-text-schwach);cursor:pointer}.zeile-pfeil{display:grid;place-items:center;flex:none;width:var(--tippflaeche);border:0;border-left:1px solid var(--farbe-rand);background:none;color:var(--farbe-text-schwach);font-size:var(--schrift-gross);cursor:pointer}.zeile-pfeil:hover{background:var(--farbe-akzent-schwach);color:var(--farbe-akzent)}.spalte-leer{padding:var(--abstand-4);color:var(--farbe-text-schwach);font-size:var(--schrift-klein)}.entwurf{display:flex;padding:var(--abstand-2) var(--abstand-3);border-bottom:1px solid var(--farbe-rand);background:var(--farbe-akzent-schwach)}.entwurf input{flex:1;min-width:0;min-height:var(--tippflaeche);padding:0 var(--abstand-3);border:1px solid var(--farbe-akzent);border-radius:var(--radius);background:var(--farbe-flaeche)}.detailbereich{display:none}.detailbereich[data-offen=true]{display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;overflow-y:auto;padding:var(--abstand-4);background:var(--farbe-flaeche)}.anmeldung{display:grid;place-items:center;min-height:100dvh;padding:var(--abstand-4);background:var(--farbe-hintergrund)}.anmeldung-karte{width:min(420px,100%);padding:var(--abstand-5);background:var(--farbe-flaeche);border:1px solid var(--farbe-rand);border-radius:var(--radius)}.anmeldung-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-3);margin-bottom:var(--abstand-4)}.anmeldung-kopf h1{margin:0;font-size:var(--schrift-gross)}.anmeldung-karte .feld input{min-height:var(--tippflaeche);padding:var(--abstand-2) var(--abstand-3);border:1px solid var(--farbe-rand);border-radius:var(--radius);background:var(--farbe-flaeche)}.person-kennwort{display:flex;align-items:center;flex-wrap:wrap;gap:var(--abstand-2);margin:0 0 var(--abstand-3) 0;font-size:var(--schrift-klein);color:var(--farbe-text-schwach)}.person-kennwort input{flex:1 1 10rem;min-width:0;min-height:var(--tippflaeche);padding:0 var(--abstand-3);border:1px solid var(--farbe-rand);border-radius:var(--radius)}.person-kennwort button{flex:none}.person-kennwort [role=status]{flex:1 0 100%}.person-zeile{display:flex;align-items:center;gap:var(--abstand-2);margin-bottom:var(--abstand-2)}.person-zeile input{flex:1;min-width:0;min-height:var(--tippflaeche);padding:0 var(--abstand-3);border:1px solid var(--farbe-rand);border-radius:var(--radius);background:var(--farbe-flaeche)}.detail-leiste{display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-2)}.detail-neu{color:var(--farbe-akzent)}.detail-neu:hover{background:var(--farbe-akzent-schwach)}.detail-zurueck{display:flex;align-items:center;gap:var(--abstand-1);min-height:var(--tippflaeche);margin-bottom:var(--abstand-2);padding:0 var(--abstand-2) 0 0;border:0;background:none;color:var(--farbe-akzent);font-size:var(--schrift-normal);cursor:pointer}.detail-zurueck>span[aria-hidden]{font-size:calc(var(--schrift-gross) * 1.1)}.detail-leer{margin:0;padding:var(--abstand-5) var(--abstand-4);color:var(--farbe-text-schwach);font-size:var(--schrift-klein)}.detail-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--abstand-3);margin-bottom:var(--abstand-2)}.detail-kopf h2{margin:0;font-size:var(--schrift-gross)}.detail-kopf-text{min-width:0}.detail-kopf-knoepfe{display:flex;gap:var(--abstand-1);flex:none}.symbolknopf{display:grid;place-items:center;width:var(--tippflaeche);height:var(--tippflaeche);padding:0;border:1px solid transparent;border-radius:var(--radius);background:none;color:var(--farbe-text-schwach);cursor:pointer}.symbolknopf:hover{background:var(--farbe-rand)}.symbolknopf-gefahr:hover{color:var(--farbe-gefahr);border-color:var(--farbe-gefahr);background:var(--farbe-gefahr-schwach)}.speicherstand{min-height:1.2em;margin:0 0 var(--abstand-3);font-size:var(--schrift-klein);color:var(--farbe-text-schwach)}.speicherstand[data-status=error]{color:var(--farbe-gefahr)}.speicherstand[data-status=saved]{color:var(--farbe-erledigt)}.hinweis-gesperrt{margin:0 0 var(--abstand-3);padding:var(--abstand-3);border:1px solid var(--farbe-gefahr);border-radius:var(--radius);background:var(--farbe-gefahr-schwach);color:var(--farbe-text);font-size:var(--schrift-klein)}.detail-zeitstempel{margin:var(--abstand-1) 0 0;font-size:var(--schrift-klein);color:var(--farbe-text-schwach)}.titel-zeile{display:flex;align-items:center;gap:var(--abstand-1);min-width:0}.titel-zeile h2{margin:0;font-size:var(--schrift-gross)}.titel-feld{width:100%;min-height:var(--tippflaeche);padding:var(--abstand-1) var(--abstand-2);border:1px solid var(--farbe-akzent);border-radius:var(--radius);background:var(--farbe-flaeche);font-size:var(--schrift-gross);font-weight:700}.symbolknopf-klein{width:var(--tippflaeche);height:var(--tippflaeche)}.feldreihe{display:flex;flex-wrap:wrap;gap:var(--abstand-3)}.feldreihe>.feld{flex:1 1 160px;min-width:0}.feld{display:flex;flex-direction:column;gap:var(--abstand-1);margin-bottom:var(--abstand-3)}.feld>span{font-size:var(--schrift-klein);color:var(--farbe-text-schwach)}.feld input,.feld select,.feld textarea{min-height:var(--tippflaeche);padding:var(--abstand-2) var(--abstand-3);border:1px solid var(--farbe-rand);border-radius:var(--radius);background:var(--farbe-flaeche)}.feld textarea{min-height:96px;resize:vertical}.detail-aktionen{display:flex;gap:var(--abstand-2);margin-top:var(--abstand-4)}.detail-aktionen button{flex:1;min-height:var(--tippflaeche);border:1px solid var(--farbe-rand);border-radius:var(--radius);background:var(--farbe-flaeche);cursor:pointer}.detail-aktionen button[data-variante=primaer]{border-color:var(--farbe-akzent);background:var(--farbe-akzent);color:#fff}.dialog-hintergrund{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:center;padding:var(--abstand-4);background:#0006}.dialog{width:min(420px,100%);padding:var(--abstand-4);background:var(--farbe-flaeche);border-radius:var(--radius)}.einstellungen{width:min(460px,100%);max-height:85dvh;overflow-y:auto}.einstellung+.einstellung{margin-top:var(--abstand-4);padding-top:var(--abstand-4);border-top:1px solid var(--farbe-rand)}.einstellung h3{margin:0 0 var(--abstand-2);font-size:var(--schrift-normal)}.einstellung-hinweis{margin:0 0 var(--abstand-2);font-size:var(--schrift-klein);color:var(--farbe-text-schwach)}.einstellung-knopf{min-height:var(--tippflaeche);margin-bottom:var(--abstand-4);padding:0 var(--abstand-4);border:1px solid var(--farbe-rand);border-radius:var(--radius);background:var(--farbe-flaeche);cursor:pointer}.einstellung-knopf:hover{border-color:var(--farbe-akzent);color:var(--farbe-akzent)}.einstellung select,.einstellung input[type=file]{min-height:var(--tippflaeche);padding:var(--abstand-2) var(--abstand-3);border:1px solid var(--farbe-rand);border-radius:var(--radius);background:var(--farbe-flaeche)}.einstellung .speicherstand{margin:var(--abstand-2) 0 0}@media(min-width:900px){.spalten{flex:0 0 25%;border-right:1px solid var(--farbe-rand)}.detailbereich,.detailbereich[data-offen=true]{display:block;position:static;flex:1 1 auto;min-width:0;max-height:none;overflow-y:auto;padding:var(--abstand-5);border-top:0;border-radius:0;box-shadow:none;background:var(--farbe-hintergrund)}.detail{max-width:640px}.zeile-knopf,.detail-zurueck{display:none}.app[data-detail-offen=true] .krume-plus{display:grid}}
