/* Verpackungsbibliothek – Zusatzstyles (nur Tokens aus kit.css, nichts hart verdrahtet) */
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
h2.sec{font-size:.95rem;color:var(--mut);margin:4px 0 8px;font-weight:600}
.back{margin:-6px 0 4px}.back button{padding-left:4px}
.row-b{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}.row-b h2,.row-b h3{margin:0}
.acts-l{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:600;margin:16px 0 8px}
.bdg{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Packtisch: Produktkacheln */
.pgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:12px}
.ptile{border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color .12s,background .12s}
.ptile.on{border-color:var(--acc);background:var(--acc-2)}
button.pmain{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:10px;cursor:pointer;min-height:64px;position:relative}
button.pmain:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;border-radius:var(--r)}
.pthumb{flex:0 0 52px;width:52px;height:52px;border-radius:var(--r-s);object-fit:cover;border:1px solid var(--line);background:var(--line-2)}
.pthumb.s{flex-basis:40px;width:40px;height:40px}
.pthumb.ph{display:grid;place-items:center;color:var(--mut)}
.ptx{display:flex;flex-direction:column;min-width:0;flex:1}.pt{font-weight:600;line-height:1.3}.pm{color:var(--mut);font-size:.82rem}
.pcheck{position:absolute;top:8px;right:8px;background:var(--acc);color:var(--acc-fg);width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 10px}.stepper button{min-width:44px}.stepper span{font-weight:600}
.pickbar{position:sticky;bottom:calc(var(--bot) + 10px);z-index:15;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 6px 24px rgba(0,0,0,.14);padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0}
.pickbar.done{position:static;box-shadow:var(--sh)}
@media(min-width:861px){.pickbar{bottom:14px}}
.pb-a{display:flex;gap:8px;margin-left:auto}
.filters .seg{margin-bottom:10px}.filters .fgrid{align-items:end}.filters label.chk{display:flex;align-items:center;gap:10px;margin:0;min-height:44px;color:var(--fg);font-size:.95rem;font-weight:500}.chkbox{display:flex;align-items:center}
/* Ergebnis */
.res{border-left:6px solid var(--line)}.res.ok{border-left-color:var(--ok)}.res.warn{border-left-color:var(--warn)}
.res-h{display:flex;gap:14px;align-items:center;margin-bottom:12px}.res-h h2{margin:0 0 2px;font-size:1.25rem}.res-h p{margin:0}
.big-ico{flex:0 0 52px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center}.big-ico.ok{background:var(--ok-bg);color:var(--ok)}.big-ico.warn{background:var(--warn-bg);color:var(--warn)}.big-ico.bad{background:var(--bad-bg);color:var(--bad)}
.res-a+.res-a{border-top:1px solid var(--line);margin-top:16px;padding-top:6px}
.prop{border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;margin:10px 0;background:var(--surface)}
.prop-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.prop-h h3{margin:4px 0 0}.fill{text-align:right;line-height:1.2}.fill b{display:block;font-size:1.3rem}
.bar{height:8px;border-radius:99px;background:var(--line-2);overflow:hidden;margin:10px 0}.bar i{display:block;height:100%;background:var(--ok);border-radius:99px}.bar.hi i{background:var(--warn)}
ul.why{list-style:none;padding:0;margin:6px 0 0;color:var(--mut);font-size:.9rem}ul.why li{padding-left:22px;position:relative;margin:3px 0}ul.why li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
details.abg{margin:10px 0}details.abg summary{cursor:pointer;color:var(--acc);font-weight:600;min-height:32px}details.abg p{margin:4px 0 4px 8px;font-size:.88rem}
/* Anleitung ansehen */
.vgrid{display:grid;gap:0 24px;grid-template-columns:1fr 1fr}@media(max-width:640px){.vgrid{grid-template-columns:1fr}}
.kbox{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;background:var(--surface)}.kico{flex:0 0 40px;height:40px;border-radius:10px;background:var(--acc-2);color:var(--acc);display:grid;place-items:center}.kbox .t{font-weight:600}.kbox .m{color:var(--mut);font-size:.86rem}
.mchip{display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:4px 12px;font-size:.86rem;background:var(--surface)}.mchip em{font-style:normal;color:var(--mut)}
ol.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.step{padding:12px 0;border-bottom:1px solid var(--line-2)}.step:last-child{border-bottom:0}.step-h{display:flex;gap:12px;align-items:flex-start}.step-t{margin:3px 0 0;font-size:1.02rem}
.num{flex:0 0 30px;height:30px;border-radius:50%;background:var(--acc);color:var(--acc-fg);display:grid;place-items:center;font-weight:700;font-size:.9rem}
.stepimgs,.gallery{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0 42px}.gallery{margin-left:0}
figure.pic{margin:0;width:min(100%,260px)}figure.pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-s);border:1px solid var(--line);display:block}figure.pic figcaption{font-size:.8rem;color:var(--mut);margin-top:4px}
.picbtn{all:unset;display:block;cursor:zoom-in;border-radius:var(--r-s)}.picbtn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.meta{margin-top:14px}
.done{display:flex;align-items:center;gap:12px;margin:12px 0 0 42px;min-height:48px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--surface)}
.done input{width:26px;height:26px}.done label{margin:0;flex:1;font-size:1rem;color:var(--fg);padding:12px 0;cursor:pointer}
.step.is-done .done{border-color:var(--ok);background:var(--ok-bg)}.step.is-done .step-t{color:var(--mut)}.step.is-done .num{background:var(--ok)}
/* Tabs mit Punkt */
nav.tabs button{position:relative}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-left:6px;vertical-align:middle}
/* Editor */
.edstep{border:1px solid var(--line);border-radius:var(--r-s);padding:10px;margin:0 0 10px;background:var(--surface)}
.edstep-h{display:flex;gap:10px;align-items:flex-start}.edstep-h textarea{flex:1;min-height:64px}.mv{display:flex;flex-direction:column;gap:4px}.mv button{min-width:40px;padding:4px 8px}
.edstep-f{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;align-items:stretch}
.ptile2{width:132px;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--surface);display:flex;flex-direction:column}.ptile2 img{width:100%;height:88px;object-fit:cover;display:block}.pcap{font-size:.78rem;padding:4px 8px;min-height:30px;line-height:1.3}.pact{display:flex;flex-direction:column;gap:4px;padding:0 6px 6px}
label.addfoto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:132px;min-height:100px;border:1.5px dashed var(--line);border-radius:var(--r-s);cursor:pointer;color:var(--acc);font-weight:600;font-size:.85rem;margin:0;text-align:center;position:relative}
label.addfoto:hover,label.addfoto:focus-within{border-color:var(--acc);background:var(--acc-2)}
.mqty{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px;align-items:center;margin-top:8px}.mqty label{margin:0;color:var(--fg);font-size:.92rem}
.sticky-acts{position:sticky;bottom:calc(var(--bot) + 8px);z-index:10;box-shadow:0 6px 24px rgba(0,0,0,.14)}@media(min-width:861px){.sticky-acts{bottom:10px}}
ul.checks{list-style:none;display:flex;gap:6px 18px;flex-wrap:wrap;padding:0;margin:0;font-size:.88rem;color:var(--warn)}ul.checks li{display:flex;align-items:center;gap:6px}ul.checks li.ok{color:var(--ok)}
/* Versionen, Verlauf */
.vrow{align-items:flex-start;flex-wrap:wrap}.vrow .acts-l{margin:4px 0 0}
ul.timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line)}ul.timeline li{position:relative;padding:6px 0 6px 14px}ul.timeline li::before{content:"";position:absolute;left:-21px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--acc)}.when{display:block;color:var(--mut);font-size:.78rem}
ul.diff{list-style:none;padding:0;margin:10px 0}ul.diff li{padding:6px 10px;border-radius:var(--r-s);margin:4px 0;display:flex;gap:10px}ul.diff li b{width:14px}ul.diff .add{background:var(--ok-bg);color:var(--ok)}ul.diff .rm{background:var(--bad-bg);color:var(--bad)}ul.diff .chg{background:var(--info-bg);color:var(--info)}
.linkbox{border:1px solid var(--line);border-radius:var(--r-s);padding:12px;margin:12px 0;background:var(--surface)}
/* Sortiment */
.srow{flex-wrap:wrap}.srow .racts{display:flex;gap:6px;flex-wrap:wrap}.srow.arch{opacity:.65}.fr{color:var(--warn);font-weight:500;font-size:.82rem}
@media(max-width:640px){.srow .racts{width:100%;padding-left:64px}}
.danger-zone h2{color:var(--bad)}
.plist{max-height:48vh;overflow:auto;margin:10px 0;border:1px solid var(--line);border-radius:var(--r-s)}
.prow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line-2)}.prow:last-child{border-bottom:0}.prow label{flex:1;margin:0;display:flex;flex-direction:column;color:var(--fg);font-size:.95rem;cursor:pointer;min-width:0}.prow input.nm{width:68px;flex:none;text-align:center}
.csverr{margin:2px 0;font-size:.86rem}
/* Kundenseite */
.public{max-width:680px}.public h1{font-size:1.35rem;margin:10px 0 6px}.pub-prod{font-weight:600;margin:0 0 12px}.public .progress{margin-top:6px}.pub-err{text-align:center;padding:30px 20px}.pub-err .big-ico{margin:0 auto 14px}.pub-ok{text-align:center;border-color:var(--ok)}.pub-ok .big-ico{margin:0 auto 8px}
.public .step-t{font-size:1.1rem}.public .done{min-height:52px}
.public figure.pic{width:100%}
/* Druck */
@media print{.pickbar,.back,nav.tabs,.banner,.sticky-acts,.done,.page-h .acts,#out .acts-l,.shell>header.top{display:none!important}.content{padding:0!important}body{background:#fff}.card{border:0;box-shadow:none}.res{border-left:0}figure.pic{width:200px}.stepimgs,.gallery{break-inside:avoid}.public .acts-l{display:none}}
@media(max-width:560px){.shell>header.top .muted.nmlbl{display:none}}
.ptile.on .ptx{padding-right:28px}
@media(max-width:860px){.sticky-acts{position:static}}