:root {
  --ground:#f4f4f6; --surface:#fff; --lane:#eaeaee; --ink:#20222b; --muted:#7c7e8a;
  --line:#e0e0e6; --line-strong:#c8c8d2; --accent:#3f4ea6; --accent-soft:#e3e5f5; --accent-ink:#fff;
  --danger:#b23b34; --c-ideen:#3f8f8a; --c-maria:#c08327; --c-marcus:#b8478c; --c-gepostet:#3f8f5a;
  --shadow:0 1px 2px rgba(25,25,40,.06),0 6px 18px rgba(25,25,40,.06);
  --shadow-lift:0 2px 6px rgba(25,25,40,.10),0 16px 40px rgba(25,25,40,.14);
  --radius:12px;
  --wash:linear-gradient(135deg,rgba(236,87,97,.13) 0%,rgba(138,111,174,.06) 45%,rgba(91,141,198,.15) 100%);
}
@media (prefers-color-scheme:dark){:root{
  --ground:#121319; --surface:#1c1d25; --lane:#191a21; --ink:#ecedf3; --muted:#9a9caa;
  --line:#2e2f3a; --line-strong:#3d3e4c; --accent:#8f9ce8; --accent-soft:#262a44; --accent-ink:#10121f;
  --danger:#e0776f; --c-ideen:#63b5af; --c-maria:#e0a852; --c-marcus:#e07ab7; --c-gepostet:#63b585;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.32);
  --shadow-lift:0 2px 6px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.5);
  --wash:linear-gradient(135deg,rgba(236,87,97,.14) 0%,rgba(138,111,174,.05) 45%,rgba(91,141,198,.16) 100%);
}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;font-weight:700}
img{max-width:100%}
[hidden]{display:none!important}

#app{display:flex;flex-direction:column;height:100dvh}
header.bar{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:13px 20px;border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{display:flex;flex-direction:column;line-height:1}
.logo-mark{height:30px;width:auto;display:block}
.logo-tag{margin-top:4px;font-size:7.5px;letter-spacing:.11em;text-transform:lowercase;white-space:nowrap;color:var(--muted)}
.brand-divider{width:1px;align-self:stretch;min-height:24px;background:var(--line-strong)}
.brand h1{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--muted);white-space:nowrap}
.spacer{flex:1}
.conn{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.conn .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.conn.ok .dot{background:var(--c-gepostet)}
.conn.off .dot{background:var(--danger)}

button{font:inherit;cursor:pointer;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:7px 12px;transition:background .12s,border-color .12s,transform .05s}
button:hover{border-color:var(--muted)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
button.primary:hover{filter:brightness(1.06);border-color:var(--accent)}
button.ghost{border-color:transparent;background:transparent;color:var(--muted);padding:5px 8px}
button.ghost:hover{background:var(--lane);color:var(--ink)}
button.danger{border-color:transparent;background:transparent;color:var(--danger)}
button.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}
button[disabled]{opacity:.35;cursor:not-allowed}

main.board{flex:1;min-height:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:16px;padding:16px 20px 20px;overflow-x:auto;overflow-y:hidden;background:var(--wash),var(--ground)}
.col{display:flex;flex-direction:column;min-height:0;background:var(--lane);border:1px solid var(--line);border-radius:var(--radius)}
.col-head{display:flex;align-items:center;gap:9px;padding:12px 13px 11px;border-bottom:1px solid var(--line)}
.col-head .swatch{width:9px;height:9px;border-radius:3px;background:var(--hue);flex:none}
.col-head h2{margin:0;font-size:13px;letter-spacing:.01em}
.col-head .count{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.col-head button.ghost{font-size:11px;padding:4px 7px}
.col-head button.add{font-size:15px;padding:1px 8px}
.col-cards{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px}
.col.drop-on .col-cards{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.col-empty{margin:auto;text-align:center;color:var(--muted);font-size:12.5px;padding:26px 14px;line-height:1.55}

.rubrik-panel{padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:9px}
.rk-list{display:flex;flex-wrap:wrap;gap:6px}
.rk{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;background:var(--lane);border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 9px}
.rk .dot{width:8px;height:8px;border-radius:3px;flex:none}
.rk button{border:none;background:none;color:var(--muted);font-size:15px;line-height:1;padding:0 3px;cursor:pointer}
.rk button:hover{color:var(--danger)}
.rk-empty{margin:0;color:var(--muted);font-size:11.5px}
.rk-add{display:flex;gap:6px}
.rk-add input{flex:1;min-width:0;font:inherit;font-size:12px;padding:5px 8px;border:1px solid var(--line-strong);border-radius:7px;background:var(--ground);color:var(--ink)}
.rk-add button{font-size:12px;padding:5px 10px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:10px 11px 9px;display:flex;flex-direction:column;gap:7px;cursor:pointer}
.card:hover{box-shadow:var(--shadow-lift)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card.dragging{opacity:.4}
.card-top{display:flex;align-items:center;gap:9px}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:13px;color:#fff;background:linear-gradient(150deg,#4a5ec0,#6a3fa6);flex:none;text-transform:lowercase}
.who{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.who strong{font-size:13px}
.who strong.ph{color:var(--muted);font-weight:500}
.who span{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-collapse{margin-left:auto;border:none;background:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:2px 5px;border-radius:6px}
.card-collapse:hover{color:var(--ink);background:var(--lane)}
.preview-tag{margin-left:6px;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line-strong);border-radius:5px;padding:2px 5px;flex:none}
.card-collapse+.preview-tag{margin-left:6px}
.card-top>.card-collapse:first-of-type{margin-left:auto}
.card-text{white-space:pre-wrap;word-break:break-word;font-size:13.5px;line-height:1.5}
.card.collapsed .card-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-text .empty{color:var(--muted);font-style:italic}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.thumbs:has(img:nth-child(2):last-child){grid-template-columns:1fr 1fr}
.thumbs:has(img:only-child){grid-template-columns:1fr}
.thumbs img{width:100%;height:88px;object-fit:cover;border-radius:7px;border:1px solid var(--line);cursor:zoom-in;background:var(--lane)}
.thumbs img:only-child{height:150px;object-fit:contain}
.thumbs img:nth-child(1):nth-last-child(2),.thumbs img:nth-child(2):nth-last-child(1){height:120px}
.rubrik{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rubrik .dot{width:8px;height:8px;border-radius:3px;flex:none}
.imgs{display:grid;gap:4px}
.imgs img{width:100%;object-fit:contain;display:block;background:var(--lane);border:1px solid var(--line);border-radius:8px;cursor:zoom-in}
.imgs.n1{grid-template-columns:1fr}
.imgs.n1 img{height:230px}
.imgs.n2{grid-template-columns:1fr 1fr}
.imgs.n2 img{height:140px}
.imgs.n3{grid-template-columns:1fr 1fr}
.imgs.n3 img{height:120px}
.imgs.n3 img:first-child{grid-column:1/3;height:180px}
.approval{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.approval::before{content:"\2709"}
.cc{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.card-foot{display:flex;align-items:center;gap:8px;margin-top:1px}
.card-foot .move{display:flex;gap:3px}
.card-foot .move button{padding:3px 8px;font-size:12px;line-height:1;border-color:var(--line);color:var(--muted);background:var(--lane)}
.card-foot .move button:not([disabled]):hover{color:var(--ink);border-color:var(--muted)}
.people{display:flex}
.people .chip{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;border:2px solid var(--surface);margin-right:-6px}
.people .chip:last-child{margin-right:0}
.card-foot time{margin-left:auto;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.card-foot time.posted{color:var(--c-gepostet);font-weight:600}

#overlay{position:fixed;inset:0;background:color-mix(in srgb,#10111a 55%,transparent);display:grid;place-items:center;padding:18px;z-index:20}
.sheet{width:min(560px,100%);max-height:calc(100dvh - 36px);overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lift);padding:20px;display:flex;flex-direction:column;gap:14px}
.sheet h2{margin:0;font-size:17px}
.sheet label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:6px}
.sheet textarea,.sheet select,.sheet input[type=text],.sheet input[type=email]{width:100%;font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--line-strong);border-radius:10px;padding:10px 11px}
.sheet textarea{min-height:150px;resize:vertical;line-height:1.5}
.sheet textarea:focus,.sheet select:focus,.sheet input:focus{outline:2px solid var(--accent);outline-offset:1px}
.field-hint{color:var(--muted);font-size:11.5px;margin:6px 0 0}
.two{display:flex;gap:10px}
.two>div{flex:1}
.people-pick{display:flex;flex-wrap:wrap;gap:7px}
.people-pick button{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 11px 5px 6px;font-size:12.5px;background:var(--ground)}
.people-pick button .chip{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff}
.people-pick button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-radius:12px}
.slots.drag{outline:2px dashed var(--accent);outline-offset:4px}
.slots.drag .slot{border-color:var(--accent)}
.slot{aspect-ratio:1;border-radius:10px;border:1px dashed var(--line-strong);background:var(--ground);display:grid;place-items:center;position:relative;overflow:hidden;color:var(--muted);font-size:20px;padding:0}
.slot.add:hover{border-color:var(--accent);color:var(--accent)}
.slot.filled{border-style:solid}
.slot.filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot .rm{position:absolute;top:4px;right:4px;width:22px;height:22px;padding:0;border-radius:50%;background:rgba(15,12,20,.72);color:#fff;border:none;font-size:13px;display:grid;place-items:center}
.slot .rm:hover{background:var(--danger)}
.slot.busy{color:transparent}
.slot.busy::after{content:"";position:absolute;inset:0;background:var(--ground) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="%233f4ea6" stroke-width="3" stroke-linecap="round" stroke-dasharray="30 60"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="0.8s" repeatCount="indefinite"/></circle></svg>') center/24px no-repeat}
.sheet-foot{display:flex;align-items:center;gap:8px;margin-top:2px}
.sheet-foot .right{margin-left:auto;display:flex;gap:8px}
.cmts{display:flex;flex-direction:column;gap:8px}
.cmt-list{display:flex;flex-direction:column;gap:8px;max-height:210px;overflow-y:auto}
.cmt-empty{margin:0;color:var(--muted);font-size:12px}
.cmt{background:var(--ground);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.cmt-head{display:flex;align-items:baseline;gap:8px;font-size:11px;color:var(--muted)}
.cmt-head strong{color:var(--ink);font-size:12px}
.cmt-head time{margin-left:auto}
.cmt-head button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;margin-left:4px}
.cmt-head button:hover{color:var(--danger)}
.cmt-body{font-size:13px;white-space:pre-wrap;word-break:break-word;margin-top:3px}
.cmt-form{display:flex;flex-direction:column;gap:6px}
.cmt-form input,.cmt-form textarea{width:100%;font:inherit;background:var(--ground);border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;color:var(--ink)}
.cmt-form input:focus,.cmt-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.cmt-form textarea{resize:vertical;min-height:40px;line-height:1.45}
.cmt-row{display:flex;gap:6px;align-items:flex-start}
.cmt-row textarea{flex:1}
.cmt-row button{flex:none}

#lightbox{position:fixed;inset:0;z-index:60;background:rgba(8,8,12,.93);display:flex;align-items:center;justify-content:center;padding:24px}
#lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:8px}
#lightbox .lb-x{position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer}
#lightbox .lb-x:hover{background:rgba(255,255,255,.26)}
#lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer}
#lightbox .lb-nav:hover{background:rgba(255,255,255,.26)}
#lightbox .lb-prev{left:16px}
#lightbox .lb-next{right:16px}
#lightbox .lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:12px;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:999px}

#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:9px 15px;border-radius:10px;font-size:12.5px;box-shadow:var(--shadow-lift);z-index:80;max-width:90vw}
#toast.err{background:var(--danger);color:#fff}

.login-wrap{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:var(--wash),var(--ground)}
.login-card{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lift);padding:26px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.login-card .logo-mark{height:34px}
.login-card h1{margin:2px 0 0;font-size:20px}
.login-sub{margin:0;color:var(--muted);font-size:13px}
#login-form{display:flex;flex-direction:column;gap:9px;width:100%;margin-top:6px}
#login-form input{font:inherit;padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--ground);color:var(--ink)}
#login-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.login-msg{margin:0;font-size:12.5px;color:var(--muted);min-height:1.2em}
.login-msg.ok{color:var(--c-gepostet)}
.login-msg.err{color:var(--danger)}

#admin{position:fixed;inset:0;background:color-mix(in srgb,#10111a 55%,transparent);display:grid;place-items:center;padding:18px;z-index:30}
.admin-card{width:min(480px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lift);padding:20px;display:flex;flex-direction:column;gap:12px;max-height:calc(100dvh - 36px);overflow-y:auto}
.admin-card h2{margin:0;font-size:17px}
.ulist{display:flex;flex-direction:column;gap:6px}
.urow{display:flex;align-items:center;gap:8px;font-size:13px;padding:7px 9px;background:var(--ground);border:1px solid var(--line);border-radius:9px}
.urow .um{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urow .tag{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line-strong);border-radius:5px;padding:1px 5px}
.uadd{display:flex;gap:6px}
.uadd input{flex:1;min-width:0;font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:9px;background:var(--ground);color:var(--ink)}

#stats{position:fixed;inset:0;background:color-mix(in srgb,#10111a 55%,transparent);display:grid;place-items:center;padding:18px;z-index:30}
.stats-nav{display:flex;align-items:center;justify-content:center;gap:14px;font-weight:700;font-size:14px}
.stats-nav button{padding:4px 11px}
.stats-list{display:flex;flex-direction:column;gap:9px}
.stat-row{display:grid;grid-template-columns:88px 1fr 30px;align-items:center;gap:10px;font-size:13px}
.stat-row .sl{font-weight:600}
.stat-row .sbar{height:12px;background:var(--lane);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.stat-row .sbar>span{display:block;height:100%;background:var(--accent);border-radius:6px 0 0 6px;min-width:2px}
.stat-row .sn{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.stat-total{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:560px){main.board{grid-auto-columns:minmax(84vw,1fr)}header.bar{gap:8px}}