:root{
  --accent:#5b53c6; --accent-d:#4940a8; --accent-soft:#ecebf7;
  --grad:#5b53c6;
  --grad-soft:#f4f5f9;
  --bg:#f5f6f9; --card:#ffffff; --line:#e4e5ec; --line-2:#f0f1f5;
  --text:#1c1e2a; --muted:#585d78; --muted-2:#9498b3;
  --high:#ef4444; --normal:#6c5ce7; --low:#a3a7c2;
  --open:#94a3b8; --progress:#3b82f6; --done:#22c55e; --blocked:#f97316;
  --shadow:0 1px 2px rgba(40,30,90,.05),0 2px 8px rgba(40,30,90,.06);
  --shadow-lg:0 14px 40px rgba(60,40,120,.18);
  --radius:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{font-family:'Nunito',ui-rounded,'Segoe UI',system-ui,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;
  font-size:16px;line-height:1.55;}
.view{min-height:100%;}
[hidden]{display:none !important;}
.muted{color:var(--muted);}
.center{text-align:center;}

/* --- Buttons --- */
.btn{border:0;border-radius:11px;padding:.6rem 1.05rem;font-size:.95rem;font-weight:700;
  cursor:pointer;background:var(--line-2);color:var(--text);transition:transform .08s,filter .15s,box-shadow .15s;font-family:inherit;}
.btn:hover{filter:brightness(.98);}
.btn:active{transform:scale(.97);}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12);}
.btn.primary:hover{filter:brightness(1.06);}
.btn.ghost{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--text);}
.btn.ghost[aria-pressed="true"]{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-d);}
.btn.small{padding:.42rem .8rem;font-size:.85rem;}
.btn.block{width:100%;}
.btn.danger{background:#fff;box-shadow:inset 0 0 0 1.5px #fecaca;color:var(--high);}
.link{background:none;border:0;color:var(--accent);cursor:pointer;font-size:.85rem;font-weight:700;font-family:inherit;}

/* --- Auth --- */
#view-auth{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  padding:1.5rem;min-height:100vh;background:var(--grad-soft);}
.auth-card{background:var(--card);border-radius:24px;padding:2.1rem 1.8rem;width:100%;max-width:400px;
  box-shadow:var(--shadow-lg);}
.brand-img{display:block;width:66px;height:66px;border-radius:19px;margin:0 auto .7rem;
  box-shadow:0 6px 16px rgba(0,0,0,.14);}
.logo{margin:0;font-size:2rem;letter-spacing:-.5px;font-weight:800;text-align:center;color:var(--text);}
.tagline{text-align:center;color:var(--muted);margin:.25rem 0 1rem;font-weight:600;}
.auth-features{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-bottom:1.4rem;}
.auth-features span{background:var(--line-2);color:var(--muted);border-radius:999px;
  padding:.28rem .75rem;font-size:.8rem;font-weight:700;}
.pw-wrap{position:relative;display:block;margin-top:.45rem;}
.pw-wrap input{margin-top:0;padding-right:3rem;}
.pw-toggle{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);background:none;border:0;
  font-size:1.2rem;cursor:pointer;padding:.35rem;line-height:1;opacity:.65;}
.pw-toggle:hover{opacity:1;}
.auth-foot{color:var(--muted);opacity:.85;font-size:.82rem;font-weight:700;margin:0;text-align:center;}
.install-btn{margin-top:.8rem;}
.ios-hint{margin-top:.8rem;font-size:.85rem;color:var(--muted);font-weight:700;text-align:center;
  background:var(--line-2);border-radius:11px;padding:.6rem .7rem;line-height:1.5;}
.tabs{display:flex;gap:.3rem;margin:0 0 1.3rem;background:var(--line-2);padding:.28rem;border-radius:13px;}
.tab{flex:1;padding:.55rem;border:0;background:transparent;border-radius:10px;cursor:pointer;
  font-weight:700;color:var(--muted);font-family:inherit;font-size:.95rem;}
.tab.active{background:#fff;color:var(--accent-d);box-shadow:var(--shadow);}
form label,#modal-body label{display:block;margin-bottom:.75rem;font-size:1.1rem;color:var(--text);font-weight:800;}
form input,form select,form textarea,
#modal-body input,#modal-body select,#modal-body textarea{width:100%;margin-top:.2rem;padding:.45rem .8rem;
  border:1.5px solid transparent;border-radius:11px;font-size:1.35rem;background:var(--line-2);
  color:var(--text);font-family:inherit;line-height:1.25;min-height:34px;
  -webkit-appearance:none;appearance:none;transition:border-color .15s,background .15s,box-shadow .15s;}
form textarea,#modal-body textarea{min-height:3rem;line-height:1.45;resize:vertical;}
form select,#modal-body select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6f8d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.4rem;}
input::placeholder,textarea::placeholder{color:var(--muted-2);}
/* Datum/Uhrzeit: natives Kalender-/Uhr-Symbol behalten */
#modal-body input[type="datetime-local"],#modal-body input[type="date"],#modal-body input[type="time"]{
  -webkit-appearance:auto;appearance:auto;}
#modal-body input[type="datetime-local"]::-webkit-calendar-picker-indicator,
#modal-body input[type="date"]::-webkit-calendar-picker-indicator,
#modal-body input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.7;cursor:pointer;width:1.2rem;height:1.2rem;
  filter:invert(38%) sepia(60%) saturate(2500%) hue-rotate(232deg);}
/* Such-Auswahlfeld (Zuständigkeit) */
.picker{position:relative;margin-top:.45rem;}
#modal-body .picker input{margin-top:0;}
.picker-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;
  border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lg);max-height:220px;overflow:auto;}
.picker-opt{padding:.7rem .85rem;cursor:pointer;font-weight:600;}
.picker-opt:hover{background:var(--accent-soft);}
.picker-opt.muted{color:var(--muted);cursor:default;}
form input:focus,form select:focus,form textarea:focus,
#modal-body input:focus,#modal-body select:focus,#modal-body textarea:focus{outline:0;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px var(--accent-soft);}
.error{color:var(--high);font-size:.88rem;margin:.8rem 0 0;font-weight:700;}

/* --- Topbar --- */
.topbar{position:sticky;top:0;z-index:10;background:var(--card);color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.5rem .7rem;padding-top:max(.5rem,env(safe-area-inset-top));
  border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.04);}
.topbar-left{display:flex;align-items:center;gap:.55rem;min-width:0;}
.topbar-icon{width:32px;height:32px;border-radius:9px;flex:none;box-shadow:0 1px 4px rgba(0,0,0,.15);}
.topbar-logo{font-weight:800;color:var(--text);letter-spacing:-.3px;font-size:1.05rem;}
@media(max-width:560px){.topbar-logo{display:none;}}
#group-select{background:var(--line-2);color:var(--text);border:0;border-radius:12px;
  padding:.55rem 2.1rem .55rem .85rem;font-size:.98rem;max-width:54vw;font-weight:700;font-family:inherit;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23585d78' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .65rem center;}
#group-select option{color:#1f2138;}
.topbar-right{display:flex;gap:.25rem;}
.icon-btn{background:none;border:0;cursor:pointer;position:relative;
  width:44px;height:44px;display:grid;place-items:center;color:var(--text);border-radius:12px;}
.icon-btn:active,.icon-btn:hover{background:var(--line-2);}
.icon-btn .ico{font-size:1.35rem;line-height:1;}
.badge{position:absolute;top:4px;right:4px;background:#ef4444;color:#fff;border-radius:999px;
  font-size:.68rem;min-width:18px;height:18px;line-height:18px;text-align:center;padding:0 4px;
  font-weight:800;box-shadow:0 0 0 2px var(--card);}

/* --- Panels --- */
.panel{position:absolute;right:.7rem;top:3.4rem;z-index:20;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-lg);min-width:252px;max-width:340px;max-height:72vh;overflow:auto;}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:.8rem .95rem;border-bottom:1px solid var(--line);}
.menu-user{padding:.8rem .95rem;border-bottom:1px solid var(--line);font-size:.85rem;color:var(--muted);font-weight:700;}
.menu-item{display:block;width:100%;text-align:left;border:0;background:none;padding:.8rem .95rem;
  font-size:.95rem;cursor:pointer;color:var(--text);font-family:inherit;font-weight:600;}
.menu-item:hover{background:var(--accent-soft);}
.menu-item.danger-text{color:var(--high);}
.notif-list{list-style:none;margin:0;padding:0;}
.notif-list li{padding:.75rem .95rem;border-bottom:1px solid var(--line-2);font-size:.9rem;cursor:pointer;}
.notif-list li:hover{background:var(--bg);}
.notif-list li.unread{background:var(--accent-soft);}
.notif-list .when{display:block;color:var(--muted-2);font-size:.75rem;margin-top:.2rem;font-weight:700;}

/* --- Board --- */
.board{padding:1.1rem;max-width:1200px;margin:0 auto;}
.board-toolbar{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:1.1rem;flex-wrap:wrap;}
.board-toolbar h2{margin:0;font-size:1.45rem;font-weight:800;}
.toolbar-actions{display:flex;gap:.4rem;}
/* Mobil: seitlich wischbare Spalten (Kanban) mit Einrasten; Desktop: 4er-Raster */
.columns{display:flex;gap:.4rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-left:.25rem;padding:.1rem .25rem .6rem;margin:0 -1.1rem;-webkit-overflow-scrolling:touch;}
.column{flex:0 0 97%;scroll-snap-align:start;scroll-snap-stop:always;}
@media(min-width:820px){
  .columns{display:grid;grid-template-columns:repeat(4,1fr);gap:.95rem;overflow:visible;
    align-items:start;margin:0;padding:0;scroll-padding-left:0;}
  .column{flex:initial;}
}
.column{background:#f1f1f8;border-radius:16px;border-top:3px solid transparent;padding:.6rem;min-height:80px;transition:background .15s;}
.col-open{border-top-color:var(--open);}
.col-in_progress{border-top-color:var(--progress);}
.col-blocked{border-top-color:var(--blocked);}
.col-done{border-top-color:var(--done);}
.column.dragover{background:var(--accent-soft);outline:2px dashed var(--accent);}
.column h3{margin:.35rem .4rem .7rem;font-size:.84rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text);display:flex;justify-content:space-between;align-items:center;font-weight:800;}
.col-count{background:#fff;color:var(--muted);border-radius:999px;padding:.1rem .6rem;font-size:.8rem;box-shadow:var(--shadow);}
.col-empty{color:var(--muted-2);font-size:.82rem;text-align:center;padding:1rem .8rem;
  border:1.5px dashed var(--line);border-radius:11px;font-weight:600;}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:.4rem;vertical-align:middle;}
.dot.open{background:var(--open);}.dot.in_progress{background:var(--progress);}
.dot.done{background:var(--done);}.dot.blocked{background:var(--blocked);}
.card{background:#fff;border-radius:14px;padding:.8rem .85rem;margin-bottom:.6rem;
  box-shadow:var(--shadow);cursor:pointer;border-left:4px solid var(--line);transition:transform .08s,box-shadow .15s;}
.card:hover{box-shadow:0 8px 22px rgba(60,40,120,.14);transform:translateY(-1px);}
.card.dragging{opacity:.5;}
.card .t{font-weight:700;margin-bottom:.5rem;line-height:1.35;font-size:1.25rem;}
.card .meta{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-size:1rem;color:var(--muted);font-weight:700;}
.chip{background:none;border-radius:0;padding:0;color:var(--muted);}
.chip.due{color:var(--muted);}
.chip.due.overdue{color:var(--high);font-weight:800;}
.chip.prio-high{color:var(--high);font-weight:800;}
.avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:.7rem;font-weight:800;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.15);}
.card .spacer{margin-left:auto;}
.star{font-size:1rem;color:#f5b50a;}
.card-actions{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.4rem;}
.status-btn{font-size:.96rem;font-weight:800;border:0;border-radius:9px;padding:.38rem .65rem;cursor:pointer;
  background:var(--accent-soft);color:var(--accent-d);font-family:inherit;}
.status-btn.st-in_progress{background:#dbeafe;color:#1d4ed8;}
.status-btn.st-blocked{background:#ffedd5;color:#b45309;}
.status-btn.st-done{background:#dcfce7;color:#15803d;}
.status-btn.st-open{background:var(--line-2);color:var(--muted);}
.status-btn:hover{filter:brightness(.97);}
.status-btn:active{transform:scale(.96);}
/* Benachrichtigungs-Einstellungen */
.pref-grid{display:grid;grid-template-columns:1fr auto auto;gap:.7rem 1rem;align-items:center;margin:1.1rem 0;}
.pref-h{font-size:.76rem;font-weight:800;color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.03em;}
.pref-label{font-weight:600;font-size:.92rem;}
#modal-body label.pref-toggle{display:grid;place-items:center;margin:0;}
#modal-body input[type="checkbox"]{width:auto;min-height:0;margin:0;padding:0;
  -webkit-appearance:auto;appearance:auto;accent-color:var(--accent);transform:scale(1.35);cursor:pointer;}

/* --- Modal --- */
.modal{position:fixed;inset:0;background:rgba(31,33,56,.5);backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:0;}
@media(min-width:600px){.modal{align-items:center;padding:1rem;}}
.modal-card{background:#fff;border-radius:22px 22px 0 0;width:100%;max-width:540px;
  max-height:92vh;overflow:hidden;position:relative;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;}
@media(min-width:600px){.modal-card{border-radius:22px;}}
#modal-header{flex:none;}
.modal-title{margin:0;padding:1rem 1.4rem;background:var(--line-2);border-bottom:1px solid var(--line);
  font-size:1.3rem;font-weight:800;color:var(--text);border-radius:22px 22px 0 0;}
#modal-body{flex:1 1 auto;overflow-y:auto;min-height:0;padding:1.1rem 1.4rem;}
#modal-footer{flex:none;}
#modal-footer .footer-actions{display:flex;gap:.5rem;padding:.9rem 1.4rem;
  border-top:1px solid var(--line);background:#fff;}
#modal-footer .footer-actions .btn{flex:1;}
.due-wrap{display:flex;align-items:stretch;margin-top:.2rem;}
#modal-body .due-wrap input{margin-top:0;border-radius:11px 0 0 11px;flex:1;min-width:0;}
.due-cal{flex:none;border:0;border-radius:0 11px 11px 0;background:#d7dbe0;color:#1e3a8a;
  font-size:1.3rem;cursor:pointer;padding:0 .8rem;display:grid;place-items:center;}
.due-cal:active{background:#c7ccd3;}
#f-due::-webkit-calendar-picker-indicator{display:none;}
.modal-close{position:absolute;top:.7rem;right:.9rem;border:0;background:var(--line-2);width:32px;height:32px;
  border-radius:50%;font-size:1.3rem;cursor:pointer;color:var(--muted);line-height:1;}
.modal-card h3{margin:0 0 1.1rem;font-size:1.25rem;font-weight:800;}
.row2{display:grid;grid-template-columns:1fr;gap:0;}
@media(min-width:520px){.row2{grid-template-columns:1fr 1fr;column-gap:.7rem;}}
/* immer 50:50 nebeneinander, auch auf schmalen Geraeten */
.row2.row2-fixed{grid-template-columns:1fr 1fr;column-gap:.7rem;}
.watchers{font-size:.82rem;color:var(--muted);margin:.8rem 0;font-weight:700;}
.modal-actions{display:flex;gap:.5rem;margin-top:1.2rem;flex-wrap:wrap;}
.modal-actions .btn{flex:1;}
.btn.icon-only{font-size:1.5rem;padding:.6rem;line-height:1;}
/* Gebuerstetes-Edelstahl-Look, 3D-Optik – keiner vorausgewaehlt */
.btn.steel{color:#2b2f36;border:1px solid #a9afb7;border-radius:11px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.30) 0,rgba(255,255,255,0) 1px,rgba(0,0,0,.04) 2px,rgba(0,0,0,0) 3px),
    linear-gradient(180deg,#fdfdfe 0%,#e9ecef 46%,#cdd2d8 54%,#e6eaee 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 2px rgba(0,0,0,.10),0 2px 4px rgba(0,0,0,.28);
  text-shadow:0 1px 0 rgba(255,255,255,.7);}
.btn.steel:hover{filter:brightness(1.03);}
.btn.steel:active{background:linear-gradient(180deg,#cdd2d8,#e9ecef);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.32);transform:translateY(1px);}
.btn.steel.watching{color:#caa204;}
.code-display{font-size:1.8rem;text-align:center;letter-spacing:5px;font-weight:800;
  background:var(--line-2);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:.9rem;margin:.6rem 0;}

/* --- Kommentare --- */
.attachments{margin-top:1.3rem;border-top:1px solid var(--line);padding-top:1rem;}
.attachments h4{margin:0 0 .7rem;font-size:1rem;font-weight:800;}
.attachments #att-count{font-size:.8rem;font-weight:700;}
.attach{display:flex;align-items:center;gap:.5rem;padding:.4rem .55rem;background:var(--bg);border-radius:11px;margin-bottom:.45rem;}
.attach-name{flex:1;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:var(--accent-d);font-weight:700;font-size:.9rem;word-break:break-all;}
.attach-name:hover{text-decoration:underline;}
.attach-meta{color:var(--muted-2);font-size:.74rem;font-weight:700;white-space:nowrap;}
.attach-del{background:none;border:0;cursor:pointer;font-size:.95rem;padding:.1rem .25rem;opacity:.7;}
.attach-del:hover{opacity:1;}
.att-form{margin-top:.5rem;}
.clip{background:none;border:0;cursor:pointer;font-size:.92rem;font-weight:800;padding:.05rem .25rem;line-height:1;color:var(--muted);border-radius:8px;}
.clip:hover{background:var(--bg);}
.att-pick-row{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:var(--bg);border:0;border-radius:12px;padding:.7rem .8rem;margin-bottom:.5rem;cursor:pointer;}
.att-pick-row:hover{filter:brightness(.97);}
.att-pick-name{flex:1;font-weight:700;font-size:.95rem;color:var(--accent-d);word-break:break-all;}

.comments{margin-top:1.3rem;border-top:1px solid var(--line);padding-top:1rem;}
.comments h4{margin:0 0 .7rem;font-size:1rem;font-weight:800;}
.comment{display:flex;gap:.6rem;margin-bottom:.75rem;}
.comment .body{background:var(--bg);border-radius:13px;padding:.55rem .7rem;flex:1;}
.comment .who{font-weight:800;font-size:.82rem;}
.comment .when{color:var(--muted-2);font-size:.72rem;margin-left:.4rem;font-weight:700;}
.comment .txt{font-size:.9rem;white-space:pre-wrap;margin-top:.15rem;}
.comment-form{display:flex;gap:.5rem;align-items:flex-start;margin-top:.5rem;}
#modal-body .comment-form textarea{flex:1;margin-top:0;min-height:2.6rem;}
.comment-form .btn{align-self:stretch;}
.member-list{list-style:none;padding:0;margin:.4rem 0 0;}
.member-list li{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--line-2);font-weight:600;}
.role-tag{margin-left:auto;font-size:.75rem;color:var(--accent-d);background:var(--accent-soft);border-radius:999px;padding:.1rem .55rem;font-weight:800;}

/* --- Update-Hinweis --- */
.update-banner{position:fixed;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:120;
  background:#fff;color:var(--text);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:.55rem .6rem .55rem 1rem;display:flex;align-items:center;gap:.8rem;font-weight:800;
  border:1.5px solid var(--accent-soft);max-width:92vw;}

/* --- Toast --- */
.toast{position:fixed;bottom:1.3rem;left:50%;transform:translateX(-50%);background:#2b2356;color:#fff;
  padding:.75rem 1.2rem;border-radius:13px;z-index:100;font-size:.9rem;font-weight:700;
  box-shadow:var(--shadow-lg);max-width:90vw;}