:root{
  --bg:#eef0f3; --panel:#ffffff; --ink:#1f2328; --muted:#5f6670; --line:#d9dde3;
  --accent:#2f6fb5; --danger:#c0392b; --ok:#2e9d4f; --warn:#c8901c;
  --colw:300px; --radius:10px; --hdr:#2b2f36;
  --surface:#ffffff; --col-bg:#e3e6ea; --modal-bg:#f7f8fa; --soft:#fafbfc; --soft2:#f2f4f7; --soft-line:#f0f1f3;
  --dash:#aab1ba; --hover:#d6dade; --ord:#8a5a00; --xc:#99a0a8; --xhover:#fbe9e7; --link:#2f6fb5;
  --row-ok:#eef8f0; --row-bad:#fdecea; --row-ab:#eef4fb; --note-st:#f1f6fc; --note-line:#c5cad1;
  --badge-bg:#fff3cd; --badge-ink:#7a5a00; --input-bg:#ffffff; --role-bg:#e3e6ea; --role-ink:#333;
  color-scheme:light;
}
html.dark{
  --bg:#16181d; --panel:#2a2f38; --ink:#e8eaed; --muted:#a9b1bc; --line:#3a404a;
  --accent:#2f6fb5; --danger:#e8776c; --ok:#4cc26f; --warn:#e0a83a; --hdr:#0e1013;
  --surface:#22262e; --col-bg:#1f232a; --modal-bg:#1a1d23; --soft:#2a2f38; --soft2:#2f343e; --soft-line:#30353e;
  --dash:#4d545f; --hover:#2a2f38; --ord:#f2b950; --xc:#8f97a2; --xhover:#4a2523; --link:#8cbcf5;
  --row-ok:#1d3326; --row-bad:#3e2326; --row-ab:#1d2a3c; --note-st:#1e2837; --note-line:#4d545f;
  --badge-bg:#4a3b12; --badge-ink:#f7dc8a; --input-bg:#1a1e25; --role-bg:#3a404a; --role-ink:#e8eaed;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--link)}
.app{display:flex;flex-direction:column;height:100%;height:100dvh}
/* Header */
header{background:var(--hdr);color:#fff;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
header h1{font-size:18px;margin:0 8px 0 2px;white-space:nowrap;font-weight:600;letter-spacing:.2px}
header h1 span{opacity:.65;font-weight:400}
.hsearch{flex:1 1 220px;display:flex;gap:6px;min-width:0}
.hsearch input,.hsearch select{height:40px;border-radius:8px;border:1px solid var(--line);padding:0 10px;background:var(--input-bg);color:var(--ink);min-width:0}
.hsearch input{flex:1 1 auto}
.hsearch select{flex:0 0 auto;max-width:150px}
.hbtns{display:flex;gap:6px;flex:0 0 auto}
.btn{height:40px;min-width:40px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger.solid{background:#b3261e;border-color:#b3261e;color:#fff}
.btn.danger{background:var(--surface);border-color:var(--danger);color:var(--danger)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn.small{height:34px;padding:0 10px;font-size:14px}
.btn.icon{padding:0;width:40px}
/* column nav */
.colnav{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line);scrollbar-width:thin}
.colnav button{flex:0 0 auto;border:0;background:var(--c);border-radius:16px;padding:6px 12px;font-size:14px;color:#fff;font-weight:500;opacity:.9}
.colnav button.active{outline:3px solid rgba(0,0,0,.25);opacity:1}
.colnav button b{background:rgba(255,255,255,.3);border-radius:10px;padding:0 6px;margin-left:4px;font-weight:600}
/* Board */
.board{flex:1;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:12px;align-items:flex-start;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.col{flex:0 0 var(--colw);max-height:100%;display:flex;flex-direction:column;background:var(--col-bg);border-radius:var(--radius);
  scroll-snap-align:start;border-top:6px solid var(--c)}
.colhead{display:flex;align-items:center;gap:6px;padding:8px 8px 6px 12px}
.colhead .name{flex:1;font-weight:700;font-size:15px;color:var(--c);text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.colhead .count{font-size:13px;background:var(--c);color:#fff;border-radius:10px;padding:1px 8px;font-weight:600}
.colhead .btn{height:32px;width:32px;padding:0;background:transparent;border:0;font-size:20px;color:var(--muted)}
.cards{flex:1;overflow-y:auto;padding:4px 8px 8px;min-height:60px;display:flex;flex-direction:column;gap:8px}
.addcard{margin:0 8px 8px;height:42px;border:1px dashed var(--dash);border-radius:8px;background:transparent;color:var(--muted);font-weight:500}
.addcard:hover{background:var(--hover)}
/* Card */
.card{background:var(--panel);border-radius:8px;padding:10px 12px;box-shadow:0 1px 2px rgba(0,0,0,.12);border-left:4px solid var(--c);
  cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.card:hover{box-shadow:0 2px 6px rgba(0,0,0,.18)}
.card .labels{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.lbl{display:inline-block;background:var(--c);font-size:12px;font-weight:600;color:#fff;border-radius:4px;padding:1px 7px;line-height:18px}
.card .title{font-weight:600;font-size:15.5px;word-break:break-word}
.card .meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-size:13px;color:var(--muted)}
.card .meta .due.over{color:#fff;background:#c0392b;border-radius:4px;padding:0 5px}
.card .meta .due.soon{color:#1a1a1a;background:var(--warn);border-radius:4px;padding:0 5px}
.card .meta .done{color:var(--ok);font-weight:600}
.card .meta .ord{color:var(--ord);font-weight:600}
.card.sample{background:repeating-linear-gradient(135deg,var(--panel),var(--panel) 12px,var(--soft2) 12px,var(--soft2) 24px)}
.placeholder{border:2px dashed var(--dash);border-radius:8px;background:rgba(128,128,128,.12)}
.dragghost{position:fixed;z-index:1000;pointer-events:none;transform:rotate(2deg);box-shadow:0 10px 24px rgba(0,0,0,.3);opacity:.95;cursor:grabbing}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none!important}
body.dragging .board{scroll-snap-type:none!important}
.addcol{flex:0 0 200px;height:48px;border:2px dashed var(--dash);border-radius:var(--radius);background:transparent;color:var(--muted);font-weight:600}
.empty-hint{color:var(--muted);font-size:13px;text-align:center;padding:10px 4px}
/* Modal */
.overlay{position:fixed;inset:0;background:rgba(5,6,8,.65);z-index:500;display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:24px 12px}
.modal{background:var(--modal-bg);border-radius:12px;width:100%;max-width:1080px;box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden}
.mhead{display:flex;gap:8px;align-items:flex-start;padding:14px 16px;background:var(--surface);border-bottom:1px solid var(--line);border-top:8px solid var(--c);position:sticky;top:0;z-index:2}
.mhead textarea.title{flex:1;font-size:20px;font-weight:700;border:1px solid transparent;border-radius:6px;padding:6px 8px;resize:none;background:transparent;min-height:42px}
.mhead textarea.title:focus{border-color:var(--accent);background:var(--input-bg);outline:none}
.mbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.mbar label{font-size:13px;color:var(--muted);font-weight:600}
.mbar select{height:40px;border-radius:8px;border:1px solid var(--line);padding:0 10px;background:var(--input-bg);font-weight:600}
.mbody{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 16px 20px}
.sec{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.sec.wide{grid-column:1/-1}
.sec h3{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:8px}
.sec h3 .n{font-size:12px;background:var(--role-bg);border-radius:10px;padding:1px 8px;color:var(--muted)}
.sec h3 .sp{flex:1}
.fgrid{display:grid;grid-template-columns:120px 1fr;gap:6px 10px;align-items:center}
.fgrid label{font-size:13px;color:var(--muted)}
.fld{display:flex;gap:6px;align-items:center;min-width:0}
.fld input,.fld select{flex:1;min-width:0}
input.t,select.t,textarea.t{height:40px;border:1px solid var(--line);border-radius:7px;padding:0 9px;background:var(--input-bg);width:100%}
textarea.t{height:auto;min-height:70px;padding:8px 9px;resize:vertical}
input.t:focus,select.t:focus,textarea.t:focus{outline:2px solid rgba(47,111,181,.35);border-color:var(--link)}
.act{flex:0 0 auto;height:40px;min-width:40px;border-radius:7px;border:1px solid var(--line);background:var(--soft2);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px}
.act[hidden]{display:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:2px solid var(--lc);color:var(--lc);background:transparent;border-radius:16px;padding:5px 12px;font-weight:600;font-size:14px}
.chip.on{background:var(--lc);color:#fff}
.chk{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--soft-line)}
.chk input[type=checkbox]{width:26px;height:26px;flex:0 0 26px;accent-color:var(--ok)}
.chk input.t{border-color:transparent;background:transparent}
.chk input.t:focus{border-color:var(--accent);background:var(--input-bg)}
.chk.done input.t{text-decoration:line-through;color:var(--muted)}
.chk.warn input.t{font-weight:700;color:var(--danger)}
.x{flex:0 0 auto;width:36px;height:36px;border:0;background:transparent;color:var(--xc);font-size:20px;border-radius:6px}
.x:hover{background:var(--xhover);color:var(--danger)}
.progress[hidden]{display:none}
.chkempty{padding:6px 0 8px}
.otable .ek{text-align:right;font-variant-numeric:tabular-nums}
.otable th.ek{text-align:right}
.otable input.t.bad{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.osum{display:flex;justify-content:flex-end;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 4px 2px;border-top:1px solid var(--line);margin-top:4px;font-size:14px}
.osum b{font-size:16px;font-variant-numeric:tabular-nums}
.osum .small-muted{font-size:12px}
.progress{height:6px;background:var(--role-bg);border-radius:3px;overflow:hidden;margin-bottom:8px}
.progress i{display:block;height:100%;background:var(--ok)}
.addrow{display:flex;gap:6px;margin-top:8px}
/* Orders */
.otable{width:100%;border-collapse:collapse;font-size:14px}
.otable th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:4px;border-bottom:1px solid var(--line)}
.otable td{padding:3px;vertical-align:middle}
.otable input.t,.otable select.t{height:36px;padding:0 6px;font-size:14px}
.otable tr.st-geliefert td{background:var(--row-ok)}
.otable tr.st-reklamiert td{background:var(--row-bad)}
.otable tr.st-ab td{background:var(--row-ab)}
/* notes */
.note{border-left:3px solid var(--note-line);padding:6px 10px;margin:8px 0;background:var(--soft);border-radius:0 6px 6px 0;position:relative}
.note.status{border-left-color:var(--accent);background:var(--note-st)}
.note .ts{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
.note .txt{white-space:pre-wrap;word-break:break-word}
.note .x{position:absolute;right:2px;top:2px;width:30px;height:30px;font-size:16px}
.link{display:flex;gap:6px;align-items:center;padding:5px 0;border-bottom:1px solid var(--soft-line)}
.link .lt{flex:1;min-width:0}
.link .lt b{display:block;font-size:14px}
.link .lt span,.link .lt a{font-size:13px;color:var(--muted);word-break:break-all}
.link .lt a{color:var(--link)}
.ctiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px}
.ctile{border:1px solid var(--line);border-left:4px solid #6b7079;border-radius:8px;padding:8px 10px;background:var(--soft);min-width:0}
.ctile.edit{grid-column:1/-1;background:var(--surface);border-left-color:var(--link)}
.ctile .role{display:inline-block;font-size:12px;font-weight:700;background:var(--role-bg);color:var(--role-ink);border-radius:4px;padding:1px 7px;margin-bottom:4px}
.ctile .cn{font-weight:600;word-break:break-word}
.ctile .cf{font-size:13px;color:var(--muted);word-break:break-word}
.ctile .cnote{font-size:13px;margin-top:4px;white-space:pre-wrap;word-break:break-word}
.ctile .cacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ctile .cacts a.act{font-size:14px;padding:0 8px;gap:4px;height:36px;color:var(--ink)}
.ctile .cacts .sp{flex:1}
.ctile .fgrid{grid-template-columns:110px 1fr}
.cpick{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.cpick input{flex:1 1 220px}
@media (max-width:700px){ .ctile .fgrid{grid-template-columns:1fr} .ctiles{grid-template-columns:1fr} }
.mfoot{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:var(--surface);border-top:1px solid var(--line)}
.mfoot .sp{flex:1}
.small-muted{font-size:12px;color:var(--muted)}
/* Archive / Menu lists */
.list .row{display:flex;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.list .row .grow{flex:1;min-width:0}
.menu{padding:16px;display:grid;gap:8px}
.menu .btn{justify-content:flex-start;height:48px}
.help{padding:4px 18px 18px}
.help h4{margin:14px 0 4px}
.help ul{margin:4px 0;padding-left:20px}
.overlay.dlg{align-items:center;padding:16px;z-index:900}
.modal.dialog{max-width:460px;border-top:4px solid var(--c,#2f6fb5)}
.dialog .dbody{padding:4px 20px 8px;display:flex;flex-direction:column;gap:10px}
.dialog .dmsg{white-space:pre-line;line-height:1.45;color:var(--ink)}
.dialog .dbody label{font-size:13px;color:var(--muted);margin-bottom:-6px}
.dialog .dfoot{display:flex;gap:10px;justify-content:flex-end;padding:12px 20px 18px;flex-wrap:wrap}
.dialog .dfoot .btn{min-height:44px;min-width:110px}
.inladd{margin:0 8px 8px;display:flex;flex-direction:column;gap:8px}
.inladd textarea{resize:none;min-height:64px;font-size:16px;line-height:1.35;border-radius:8px}
.inladd .row{display:flex;gap:8px;align-items:center}
.inladd .row .btn{min-height:44px}
.warnbar{flex:none;display:flex;gap:10px;align-items:center;padding:6px 12px;padding-left:max(12px,env(safe-area-inset-left));background:#5a3b00;color:#fff3d6;font-size:14px;line-height:1.4}
.warnbar.err{background:#6b1414;color:#ffe3e3}
.warnbar span{flex:1}
.warnbar button{background:transparent;border:1px solid rgba(255,255,255,.45);color:inherit;border-radius:6px;min-width:40px;min-height:36px;font-size:16px}
/* Label-Verwaltung */
html:not(.dark) .lbl{background:color-mix(in srgb,var(--c) 88%,#000)}
html:not(.dark) .chip.on{background:color-mix(in srgb,var(--lc) 88%,#000);border-color:color-mix(in srgb,var(--lc) 88%,#000)}
.chip.tool{border-style:dashed}
.lmlist{display:flex;flex-direction:column;gap:6px;padding:12px 16px}
.lmrow{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.lmrow .lbl{font-size:14px;line-height:24px;padding:2px 10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lmrow .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lmrow .cnt{font-size:12px;color:var(--muted)}
.lmrow .btn.icon{min-width:44px;min-height:44px}
.lmrow .btn.icon:disabled{opacity:.3}
.lmfoot{display:flex;gap:10px;justify-content:space-between;padding:4px 16px 18px;flex-wrap:wrap}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.swatch{height:44px;border-radius:10px;border:2px solid transparent;background:var(--sw);cursor:pointer;color:#fff;font-size:18px}
html.dark .swatch{background:color-mix(in srgb,var(--sw) 72%,#000)}
.swatch.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--modal-bg) inset}
.labprev{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.labprev .lbl{font-size:14px;line-height:24px;padding:2px 10px}
.laberr{color:var(--danger);font-size:14px;min-height:0}
.freecol{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.freecol input[type=color]{font-size:16px;width:64px;height:44px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--input-bg)}
@media (max-width:700px){ .lmrow .btn.icon{min-width:40px} .swatches{grid-template-columns:repeat(4,1fr)} }
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#2b2f36;color:#fff;padding:10px 18px;border-radius:8px;z-index:2000;
  box-shadow:0 6px 18px rgba(0,0,0,.3);font-size:15px;max-width:90vw}
.badge-sample{font-size:11px;background:var(--badge-bg);color:var(--badge-ink);border-radius:4px;padding:0 6px;font-weight:600}
.hidden{display:none!important}
/* ---- Safari / Touch ---- */
html{-webkit-tap-highlight-color:transparent}
input.t,select.t,textarea.t,.hsearch input,.hsearch select,.mbar select{font-size:16px} /* kein Auto-Zoom in iOS */
@media (pointer:coarse){ .otable input.t,.otable select.t{font-size:16px} }
@supports (-webkit-touch-callout:none){ /* nur iOS/iPadOS Safari */
  input[type=date].t,input[type=datetime-local].t{-webkit-appearance:none;appearance:none;display:flex;align-items:center;min-height:40px}
  input[type=date]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;margin:0}
}
.board{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom))}
header{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.mfoot{padding-bottom:max(12px,env(safe-area-inset-bottom))}
@media (max-width:700px){ .overlay{padding-top:env(safe-area-inset-top)} .mhead{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))} }
.card,.colhead,.ctile,.att{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.dragging{-webkit-user-select:none;-webkit-touch-callout:none}
/* ---- Verlauf ---- */
.vfilter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 6px}
.vchip{min-height:36px;border-radius:18px;border:1px solid var(--line);background:transparent;padding:0 11px;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.vchip.on{background:var(--soft2);border-color:var(--k,var(--link));box-shadow:inset 0 0 0 1px var(--k,var(--link));font-weight:700}
.vchip.sysc{border-style:dashed}
.ventry{border-left:4px solid var(--k);background:var(--soft);border-radius:0 8px 8px 0;padding:8px 10px;margin:8px 0}
.ventry .vh{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:13px;color:var(--muted)}
.vkind{display:inline-flex;gap:4px;align-items:center;font-weight:700;font-size:12px;border-radius:4px;padding:1px 7px;color:#fff;background:var(--k)}
html.dark .vkind{background:color-mix(in srgb,var(--k) 72%,#000)}
.ventry .vacts{margin-left:auto;display:flex;gap:4px}
.ventry .vacts .act{height:36px;min-width:36px;font-size:15px}
.ventry .vsub{font-weight:700;margin-top:4px;word-break:break-word}
.ventry .vtxt{white-space:pre-wrap;word-break:break-word;margin-top:2px;line-height:1.45}
.ventry .vtxt.clamp{max-height:5.8em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.ventry .vmore{background:none;border:0;color:var(--link);font-weight:600;padding:2px 0;min-height:34px}
.ventry.sys{border-left:2px solid var(--note-line);background:transparent;padding:2px 10px;margin:3px 0;font-size:12.5px;color:var(--muted)}
.vatt{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.vatt img{width:60px;height:60px;object-fit:cover;border-radius:6px;cursor:zoom-in;border:1px solid var(--line)}
.vatt .act{font-size:13px;height:34px;padding:0 8px;gap:4px}
.veditor{border:1px solid var(--line);border-left:4px solid var(--k,var(--link));border-radius:8px;padding:10px;margin:8px 0;background:var(--soft)}
.veditor .fgrid{grid-template-columns:120px 1fr}
.veditor textarea.t{height:auto;min-height:150px;padding:8px 9px;resize:vertical;line-height:1.4}
.pchips,.attpick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pchips button{min-height:34px;border-radius:17px;border:1px dashed var(--line);background:transparent;color:var(--ink);padding:0 10px;font-size:13px}
.attpick label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:4px 8px;min-height:44px;font-size:14px;background:var(--surface)}
.attpick input{width:22px;height:22px}
.attpick img{width:36px;height:36px;object-fit:cover;border-radius:4px}
.veditor .cacts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.veditor .cacts .sp{flex:1}
@media (max-width:700px){ .veditor .fgrid{grid-template-columns:1fr} }
/* ---- Bilder / Anhänge ---- */
.filebtn{position:relative;overflow:hidden}
.vh-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:10px}
.att{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--soft);aspect-ratio:1/1}
.att img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block;background:var(--soft2)}
.att .fi{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px;text-align:center;font-size:12px;word-break:break-all;color:var(--ink);text-decoration:none}
.att .fi b{font-size:30px}
.att .x{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;width:34px;height:34px;border-radius:17px}
.att .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.overlay.lightbox{background:rgba(0,0,0,.94);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;overflow:hidden;z-index:1500;color:#fff;touch-action:pan-y pinch-zoom}
.lightbox .lbbar{display:flex;gap:8px;align-items:center;padding:8px 12px}
.lightbox .lbt{flex:1;font-size:14px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lightbox .lbimg{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;position:relative;padding:0 8px 8px}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:76px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:34px}
.lightbox .prev{left:10px}.lightbox .next{right:10px}
.lightbox .btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
/* Dunkles Schema: OneNote-Farben als Akzente, für Kontrast angepasst */
html.dark .colhead .name{color:color-mix(in srgb,var(--c) 55%,#fff)}
html.dark .colhead .count,html.dark .colnav button,html.dark .lbl{background:color-mix(in srgb,var(--c) 72%,#000)}
html.dark .colnav button.active{outline-color:rgba(255,255,255,.55)}
html.dark .card{box-shadow:0 1px 3px rgba(0,0,0,.5)}
html.dark .chip{color:color-mix(in srgb,var(--lc) 50%,#fff);border-color:color-mix(in srgb,var(--lc) 70%,#fff)}
html.dark .chip.on{background:color-mix(in srgb,var(--lc) 72%,#000);color:#fff;border-color:color-mix(in srgb,var(--lc) 72%,#000)}
html.dark .btn.ghost{border-color:rgba(255,255,255,.3)}
html.dark .chk.warn input.t{color:#ff8a7e}
html.dark .chk input[type=checkbox]{accent-color:#2e9d4f}
html.dark .progress i{background:#2e9d4f}
html.dark .toast{background:#3a404a}
html.dark ::placeholder{color:#7f8792}
/* Tablet / Handy */
@media (max-width:900px){
  .mbody{grid-template-columns:1fr}
}
@media (max-width:700px){
  :root{--colw:calc(100vw - 24px)}
  header h1{font-size:16px;flex:1 1 100%}
  .board{scroll-snap-type:x mandatory;gap:12px}
  .col{scroll-snap-align:center}
  .hsearch select{max-width:120px}
  .overlay{padding:0}
  .modal{border-radius:0;min-height:100%}
  .overlay.dlg{padding:16px;padding-top:max(16px,env(safe-area-inset-top))} .overlay.dlg .modal.dialog{border-radius:14px;min-height:0}
  .fgrid{grid-template-columns:1fr}
  .fgrid label{margin-top:6px}
  /* order rows stacked */
  .otable thead{display:none}
  .otable,.otable tbody,.otable tr,.otable td{display:block;width:100%}
  .otable tr{border:1px solid var(--line);border-radius:8px;padding:6px;margin-bottom:8px}
  .otable td{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:6px;padding:2px 0}
  .otable td::before{content:attr(data-l);font-size:12px;color:var(--muted)}
  .otable td.del{grid-template-columns:1fr;justify-items:end}
  .otable td.del::before{content:none}
}