/* ============================================================
   To-Do  –  Stil  (hell, modern, Glas-Optik, Mint-Gruen)
   ============================================================ */
:root{
  --mint:        #2bbf9c;          /* einzige Akzentfarbe */
  --mint-dark:   #1fa386;
  --mint-soft:   rgba(43,191,156,.12);
  --ink:         #1f2a30;
  --ink-soft:    #5b6b73;
  --line:        rgba(31,42,48,.10);
  --bg1:         #eef6f3;
  --bg2:         #e3eef0;
  --card:        rgba(255,255,255,.72);
  --card-solid:  #ffffff;
  --radius:      18px;
  --shadow:      0 10px 30px rgba(31,42,48,.10);
  --shadow-sm:   0 4px 14px rgba(31,42,48,.07);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 8% -8%, rgba(43,191,156,.18), transparent 60%),
    radial-gradient(800px 500px at 108% 12%, rgba(43,191,156,.10), transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
}

/* ---- Kopfzeile ------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.75rem 1.25rem;
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{ font-weight:700; font-size:1.2rem; letter-spacing:.2px; display:flex; align-items:center; gap:.5rem; }
.brand-mark{
  display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg, var(--mint), var(--mint-dark));
  color:#fff; font-size:.95rem; box-shadow:var(--shadow-sm);
}
.topbar-actions{ display:flex; gap:.5rem; align-items:center; }
.btn-ghost{
  font:inherit; cursor:pointer; text-decoration:none;
  color:var(--ink); background:rgba(255,255,255,.7);
  border:1px solid var(--line); border-radius:10px;
  padding:.5rem .85rem; transition:.15s;
}
.btn-ghost:hover{ background:#fff; border-color:var(--mint); color:var(--mint-dark); }

/* ---- Board (Spalten) ------------------------------------- */
.board{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:1.25rem; padding:1.5rem; max-width:1400px; margin:0 auto;
}
.loading{ color:var(--ink-soft); padding:2rem; }

/* ---- Listen-Karte ---------------------------------------- */
.list-card{
  flex:1 1 320px; max-width:420px; min-width:280px;
  background:var(--card);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem 1rem 1.1rem;
}
.list-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.75rem; }
.list-name{
  margin:0; font-size:1.1rem; font-weight:700; flex:1;
  outline:none; border-radius:8px; padding:.15rem .3rem;
}
.list-name[contenteditable="true"]{ background:#fff; box-shadow:0 0 0 2px var(--mint-soft); }
.list-tools{ display:flex; gap:.2rem; }

/* ---- Erledigtes Projekt (ganze Liste) -------------------- */
.list-card.done{ opacity:.55; }
.list-card.done .list-name{ text-decoration:line-through; color:var(--ink-soft); }
.icon-btn.is-on{ background:var(--mint-soft); color:var(--mint-dark); }

.icon-btn{
  cursor:pointer; border:none; background:transparent;
  font-size:.95rem; line-height:1; padding:.35rem .4rem;
  border-radius:8px; color:var(--ink-soft); transition:.15s;
}
.icon-btn:hover{ background:var(--mint-soft); color:var(--mint-dark); }

/* ---- Eingabe neue Aufgabe -------------------------------- */
.add-task{ display:flex; gap:.4rem; margin-bottom:.75rem; }
.add-task .task-input{
  flex:1; font:inherit; padding:.55rem .7rem;
  border:1px solid var(--line); border-radius:10px; background:#fff; outline:none;
}
.add-task .task-input:focus{ box-shadow:0 0 0 2px var(--mint-soft); border-color:var(--mint); }
.add-task .task-due{
  font:inherit; padding:.45rem; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink-soft); max-width:140px;
}
.add-btn{
  cursor:pointer; border:none; border-radius:10px;
  width:42px; font-size:1.3rem; line-height:1; color:#fff;
  background:linear-gradient(135deg, var(--mint), var(--mint-dark));
  box-shadow:var(--shadow-sm); transition:.15s;
}
.add-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* ---- Aufgabenliste --------------------------------------- */
.task-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.task{
  display:flex; align-items:flex-start; gap:.6rem;
  background:rgba(255,255,255,.7); border:1px solid var(--line);
  border-radius:12px; padding:.55rem .65rem; transition:.15s;
}
.task:hover{ background:#fff; box-shadow:var(--shadow-sm); }

.check{ position:relative; cursor:pointer; flex:0 0 auto; padding-top:1px; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check .box{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:7px;
  border:2px solid var(--line); color:transparent;
  font-size:.8rem; transition:.15s; background:#fff;
}
.check input:checked + .box{
  background:linear-gradient(135deg, var(--mint), var(--mint-dark));
  border-color:var(--mint-dark); color:#fff;
}

.task-body{ flex:1; display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.task-text{
  outline:none; border-radius:6px; padding:.1rem .2rem;
  word-break:break-word; line-height:1.35;
}
.task-text[contenteditable="true"]{ background:#fff; box-shadow:0 0 0 2px var(--mint-soft); }
.task.done .task-text{ text-decoration:line-through; color:var(--ink-soft); }

.task-due-badge{ font-size:.74rem; color:var(--ink-soft); display:none; }
.task-due-badge.show{ display:inline-block; }
.task-due-badge.overdue{ color:#c0392b; font-weight:600; }
.task-due-badge.today{ color:var(--mint-dark); font-weight:600; }

.task-tools{ display:flex; gap:.1rem; opacity:0; transition:.15s; flex:0 0 auto; }
.task:hover .task-tools{ opacity:1; }

.list-foot{ margin-top:.7rem; font-size:.8rem; color:var(--ink-soft); }

/* ---- Login-Seite ----------------------------------------- */
.login-page{ display:grid; place-items:center; min-height:100vh; padding:1.5rem; }
.login-card{
  width:100%; max-width:360px; text-align:center;
  background:var(--card); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:22px;
  box-shadow:var(--shadow); padding:2.2rem 1.8rem;
}
.login-logo{
  width:60px; height:60px; margin:0 auto 1rem; border-radius:16px;
  display:grid; place-items:center; font-size:1.6rem; color:#fff;
  background:linear-gradient(135deg, var(--mint), var(--mint-dark)); box-shadow:var(--shadow-sm);
}
.login-card h1{ margin:.2rem 0 .3rem; font-size:1.5rem; }
.login-sub{ margin:0 0 1.3rem; color:var(--ink-soft); font-size:.93rem; }
.login-card form{ display:flex; flex-direction:column; gap:.7rem; }
.login-card input{
  font:inherit; padding:.7rem .85rem; border:1px solid var(--line);
  border-radius:12px; background:#fff; outline:none; text-align:center;
}
.login-card input:focus{ box-shadow:0 0 0 2px var(--mint-soft); border-color:var(--mint); }
.login-card button{
  font:inherit; font-weight:600; cursor:pointer; color:#fff; padding:.72rem;
  border:none; border-radius:12px;
  background:linear-gradient(135deg, var(--mint), var(--mint-dark));
  box-shadow:var(--shadow-sm); transition:.15s;
}
.login-card button:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.login-error{
  background:rgba(192,57,43,.1); color:#c0392b; border:1px solid rgba(192,57,43,.25);
  border-radius:10px; padding:.6rem .8rem; margin-bottom:1rem; font-size:.9rem;
}

/* ---- klein / mobil --------------------------------------- */
@media (max-width:640px){
  .board{ padding:1rem; }
  .list-card{ max-width:none; }
  .task-tools{ opacity:1; }
}