:root{--fg:#1d2433;--muted:#667085;--line:#e4e7ec;--bg:#f7f8fa;--ok:#067647;--warn:#b54708;--err:#b42318;
--faellig:#b42318;--neu:#6941c6;--geplant:#175cd3;--pruefen:#b54708;--pausiert:#667085;--gesperrt:#344054;--abgeschlossen:#027a48}
*{box-sizing:border-box}body{margin:0;font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--fg);background:var(--bg)}
a{color:#175cd3}main{padding:1rem 1.5rem;max-width:1500px;margin:auto}
.top{display:flex;gap:1rem;align-items:center;padding:.7rem 1.5rem;background:#101828;color:#fff}.top a{color:#fff;text-decoration:none}
.top nav{display:flex;gap:1rem;margin-left:auto}.brand{font-weight:700}.ro{font-size:.75rem;border:1px solid #98a2b3;border-radius:1rem;padding:.05rem .5rem}
.inline{display:inline;margin:0}button{font:inherit;padding:.35rem .8rem;border:1px solid var(--line);border-radius:.4rem;background:#fff;cursor:pointer}
button.link{border:0;background:none;color:inherit;text-decoration:underline;padding:0}.top button.link{color:#fff}
.demo{background:#fef0c7;color:#7a2e0e;text-align:center;padding:.4rem;font-weight:600}
footer{color:var(--muted);font-size:.8rem;text-align:center;padding:1.5rem}
.panel{background:#fff;border:1px solid var(--line);border-radius:.6rem;padding:1rem 1.2rem;margin:1rem 0}
.panel.two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.login{max-width:380px;margin:3rem auto}.login label{display:block;margin:.6rem 0}.login input{width:100%;padding:.45rem;border:1px solid var(--line);border-radius:.4rem}
.error{color:var(--err)}.muted{color:var(--muted)}.small{font-size:.82rem;color:var(--muted)}.hint{font-size:.82rem;color:var(--warn)}
.sync{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;font-size:.85rem;padding:.6rem 1rem;border-radius:.5rem;border:1px solid var(--line);background:#fff}
.sync.ok{border-left:4px solid var(--ok)}.sync.warn{border-left:4px solid var(--warn);background:#fffaeb}.sync .err{color:var(--err)}
.buckets{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.buckets a{padding:.4rem .8rem;border-radius:2rem;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--fg)}
.buckets a.active{background:#101828;color:#fff}.buckets b{margin-left:.3rem}
.filter{display:flex;gap:1rem;align-items:end;margin-bottom:.8rem}.filter input,.filter select{padding:.35rem;border:1px solid var(--line);border-radius:.4rem}
table{width:100%;border-collapse:collapse;background:#fff}th,td{text-align:left;vertical-align:top;padding:.55rem .6rem;border-bottom:1px solid var(--line)}
th{font-size:.8rem;color:var(--muted);font-weight:600}table.board{border:1px solid var(--line);border-radius:.6rem}
.pill{display:inline-block;padding:.1rem .55rem;border-radius:1rem;color:#fff;font-size:.8rem;font-weight:600}
.pill.b-faellig{background:var(--faellig)}.pill.b-neu{background:var(--neu)}.pill.b-geplant{background:var(--geplant)}.pill.b-pruefen{background:var(--pruefen)}
.pill.b-pausiert{background:var(--pausiert)}.pill.b-gesperrt{background:var(--gesperrt)}.pill.b-abgeschlossen{background:var(--abgeschlossen)}
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:.05rem .45rem;border-radius:.3rem;margin-right:.3rem;text-transform:uppercase;letter-spacing:.02em}
.badge.native{background:#d1e9ff;color:#1849a9}.badge.crm{background:#fef0c7;color:#93370d;border:1px dashed #dc6803}
.when{font-weight:600}.crmdate{border-left:3px dashed #dc6803;padding-left:.4rem}.task{border-left:3px solid #98a2b3;padding-left:.4rem}
.chip{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:1rem;padding:.05rem .5rem;margin:.1rem}
dl.grid{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem}dt{color:var(--muted)}dd{margin:0}
.lead{font-size:1.05rem}tr.past td{color:var(--muted)}
@media (max-width:900px){.panel.two{grid-template-columns:1fr}table.board thead{display:none}table.board td{display:block;border:0}table.board tr{display:block;border-bottom:1px solid var(--line);padding:.4rem 0}}
.top{flex-wrap:wrap}.filter{flex-wrap:wrap}
@media (max-width:600px){main{padding:.6rem}.top{padding:.6rem;gap:.5rem}.top nav{margin-left:0;gap:.7rem}.filter label{flex:1 1 100%}.filter input,.filter select{width:100%}}