/* === MODUL: stil (kanban) — gemeinsames Aussehen Login + Brett === */ :root{ --bg:#0f172a; --bg2:#1e293b; --karte:#334155; --rand:#475569; --text:#e2e8f0; --grau:#94a3b8; --akzent:#38bdf8; --akzent2:#0ea5e9; --gut:#4ade80; --warn:#f87171; } /* Helles Design — greift, sobald gesetzt ist */ body.hell{ --bg:#eef2f7; --bg2:#ffffff; --karte:#f8fafc; --rand:#cbd5e1; --text:#0f172a; --grau:#64748b; --akzent:#0284c7; --akzent2:#0369a1; --gut:#16a34a; --warn:#dc2626; background:linear-gradient(160deg,#f8fafc,#e2e8f0); } body.hell .kopf{background:rgba(255,255,255,.85)} body.hell .knopf{color:#ffffff} *{box-sizing:border-box} body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:linear-gradient(160deg,#0f172a,#1e293b); color:var(--text); min-height:100vh; } button{font-family:inherit; cursor:pointer} /* ---- Login ---- */ .mitte{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px} .karte-box{ background:var(--bg2); border:1px solid var(--rand); border-radius:18px; padding:36px 32px; width:100%; max-width:360px; box-shadow:0 20px 60px rgba(0,0,0,.4); text-align:center; } .logo{font-size:44px; margin-bottom:6px} .marke{font-size:22px; font-weight:700; letter-spacing:.5px; margin-bottom:2px} .marke span{color:var(--akzent)} .karte-box h1{font-size:18px; margin:14px 0 4px} .unter{color:var(--grau); font-size:13px; margin:0 0 20px} .form{display:flex; flex-direction:column; gap:12px} .form input{ padding:12px 14px; border-radius:10px; border:1px solid var(--rand); background:#0f172a; color:var(--text); font-size:15px; } .form input:focus{outline:none; border-color:var(--akzent)} .knopf{ padding:12px; border-radius:10px; border:none; font-size:15px; font-weight:600; background:var(--akzent); color:#04222e; } .knopf:hover{background:var(--akzent2)} .meldung{min-height:18px; font-size:13px; color:var(--warn); margin:12px 0 0} .meldung.ok{color:var(--gut)} /* ---- Kopfzeile ---- */ .kopf{ display:flex; align-items:center; gap:14px; padding:12px 20px; background:rgba(15,23,42,.85); border-bottom:1px solid var(--rand); position:sticky; top:0; z-index:10; backdrop-filter:blur(6px); } .kopf .titel{font-weight:700; font-size:17px; display:flex; align-items:center; gap:8px} .kopf select{ background:#0f172a; color:var(--text); border:1px solid var(--rand); border-radius:8px; padding:7px 10px; font-size:14px; } .kopf .fueller{flex:1} .mini{ background:var(--karte); border:1px solid var(--rand); color:var(--text); border-radius:8px; padding:7px 11px; font-size:13px; } .mini:hover{border-color:var(--akzent)} .mini.warn:hover{border-color:var(--warn); color:var(--warn)} .wer{color:var(--grau); font-size:13px} /* ---- Brett ---- */ .brett{ display:flex; gap:16px; padding:20px; align-items:flex-start; overflow-x:auto; min-height:calc(100vh - 58px); } .spalte{ background:var(--bg2); border:1px solid var(--rand); border-radius:14px; width:290px; flex:0 0 290px; display:flex; flex-direction:column; max-height:100%; } .spalte-kopf{ display:flex; align-items:center; gap:6px; padding:12px 14px 8px; } .spalte-kopf .name{font-weight:600; font-size:15px; flex:1; cursor:text} .zahl{ background:var(--karte); color:var(--grau); font-size:12px; border-radius:20px; padding:1px 8px; } .x{background:none; border:none; color:var(--grau); font-size:16px; padding:0 4px; line-height:1} .x:hover{color:var(--warn)} .liste{ padding:6px 10px 10px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; flex:1; min-height:24px; } .liste.drueber{background:rgba(56,189,248,.08); outline:2px dashed var(--akzent); outline-offset:-6px; border-radius:10px} .k{ background:var(--karte); border:1px solid var(--rand); border-radius:10px; padding:10px 12px; cursor:grab; position:relative; } .k:hover{border-color:var(--akzent)} .k.zieht{opacity:.4} .k .kt{font-size:14px; font-weight:500; word-break:break-word} .k .kb{font-size:12px; color:var(--grau); margin-top:4px; white-space:pre-wrap; word-break:break-word} .plus{ background:none; border:1px dashed var(--rand); color:var(--grau); border-radius:8px; padding:8px; font-size:13px; margin:2px 10px 12px; text-align:center; } .plus:hover{border-color:var(--akzent); color:var(--akzent)} .spalte-neu{ flex:0 0 290px; border:1px dashed var(--rand); background:rgba(255,255,255,.02); color:var(--grau); border-radius:14px; padding:16px; font-size:14px; height:52px; } .spalte-neu:hover{border-color:var(--akzent); color:var(--akzent)} /* ---- Overlay (Karte bearbeiten) ---- */ .overlay{ position:fixed; inset:0; background:rgba(2,6,23,.7); display:none; align-items:center; justify-content:center; z-index:50; padding:20px; } .overlay.auf{display:flex} .dialog{ background:var(--bg2); border:1px solid var(--rand); border-radius:16px; padding:22px; width:100%; max-width:420px; } .dialog h3{margin:0 0 14px; font-size:16px} .dialog input,.dialog textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--rand); background:#0f172a; color:var(--text); font-size:14px; margin-bottom:12px; font-family:inherit; } .dialog textarea{min-height:90px; resize:vertical} .dialog input:focus,.dialog textarea:focus{outline:none; border-color:var(--akzent)} .dialog-knoepfe{display:flex; gap:10px; justify-content:space-between; align-items:center} /* ---- Verlauf-Schublade (Backlog) ---- */ .verlauf-hg{ position:fixed; inset:0; background:rgba(2,6,23,.5); z-index:40; opacity:0; pointer-events:none; transition:opacity .2s; } .verlauf-hg.auf{opacity:1; pointer-events:auto} .verlauf{ position:fixed; top:0; right:0; height:100vh; width:360px; max-width:88vw; background:var(--bg2); border-left:1px solid var(--rand); z-index:41; transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column; box-shadow:-16px 0 40px rgba(0,0,0,.4); } .verlauf.auf{transform:translateX(0)} .verlauf-kopf{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--rand); font-weight:700; font-size:16px; } .verlauf-liste{overflow-y:auto; padding:8px 0} .v-zeile{padding:10px 18px; border-bottom:1px solid rgba(71,85,105,.35)} .v-zeit{font-size:11px; color:var(--grau); margin-bottom:2px} .v-text{font-size:14px} .leer{color:var(--grau); text-align:center; padding:30px 18px; font-size:14px}