/* Projektseite B-07 Packbox-Scanner – Welt: Euro-Lagerbehälter (KLT).
   Grund Behälterblau #2a74b5 mit Rippen, weiße Etikettentaschen, schwarzer Druck; Inter + IBM Plex Mono.
   Einziger Fremdton: das Rot der Scanlinie. Leitmotiv: Behälter öffnet sich, Inhalt steigt auf und hängt am Auftragszettel.
   Grundzustand = ruhige Fassung (ohne JS, reduzierte Bewegung): alles sichtbar, Box offen, Zettel ausgefüllt.
   .pb-motion (Kopf-Skript) schaltet die gepinnte Bühne ein; die Startzustände setzt erst js/projekt-packbox.js (.pb-go). */

/* ---------- Seitenwechsel: diese Welt fährt von unten herein, die vorige Seite tritt zurück (View Transitions; ohne Unterstützung oder bei reduzierter Bewegung normaler Seitenaufruf) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition{background:#ffffff}
  ::view-transition-old(root){animation:sw-zurueck .6s cubic-bezier(.5,0,.2,1) both;mix-blend-mode:normal}
  ::view-transition-new(root){animation:sw-herein .8s cubic-bezier(.16,1,.3,1) .05s both;mix-blend-mode:normal}
}
@keyframes sw-zurueck{to{transform:translateY(-4%) scale(.9);opacity:.2}}
@keyframes sw-herein{from{transform:translateY(100%)}}

@font-face{font-family:PbSans;src:url('../fonts/inter-normal-400_700-latin.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:PbSans;src:url('../fonts/inter-normal-400_700-latin-ext.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0100-02FF}
@font-face{font-family:PbMono;src:url('../fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:PbMono;src:url('../fonts/ibm-plex-mono-normal-500-latin-ext.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-02FF}

:root{
  --blue:#2a74b5;--blue-d:#1f5f97;--ink:#111;--grey:#555c63;--rim:rgba(255,255,255,.3);--laser:#e8322b;
  --bc:linear-gradient(90deg,#111 0 7%,#0000 0 14%,#111 0 18%,#0000 0 29%,#111 0 39%,#0000 0 43%,#111 0 46%,#0000 0 57%,#111 0 64%,#0000 0 68%,#111 0 71%,#0000 0 82%,#111 0 93%,#0000 0);
  --hdr:58px;--gut:clamp(16px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--blue);color:#fff;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;font:400 1.0625rem/1.6 PbSans,system-ui,sans-serif;background:repeating-linear-gradient(90deg,rgba(8,36,66,.12) 0 3px,transparent 3px 26px),var(--blue);overflow-x:clip}
img,svg{display:block}
a{color:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-80px;z-index:40;padding:10px 16px;border-radius:4px;background:#fff;color:var(--ink);box-shadow:0 0 0 3px var(--rim);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
svg use{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tag{margin:0 0 .9rem;font:500 .8125rem/1.5 PbMono,monospace;letter-spacing:.04em;color:#fff}
.tag span{display:inline-block;margin-right:.6em;padding:.15em .55em;border-radius:3px;background:#fff;color:var(--ink);box-shadow:0 0 0 3px var(--rim)}

/* Kopf: Rückweg als Etikett. Eine Grammatik auf allen Projektseiten (Freigabe 31.10.2026): links „← Profil“, rechts
   „Demo ausprobieren“ direkt vor dem Namen, der ganz rechts zur Startseite führt; volle Breite, jedes Ziel mindestens
   44 px hoch, bei 320 px alles in einer Zeile. Die Leiste bleibt fest oben stehen. */
.site-header{position:fixed;inset:0 0 auto;z-index:30;height:var(--hdr);display:flex;align-items:center;gap:16px;padding:0 clamp(16px,3vw,40px);background:var(--blue-d);border-bottom:1px solid rgba(255,255,255,.2)}
.back{display:inline-flex;flex:none;align-items:center;gap:.45em;min-height:44px;padding:.3em .95em .3em .75em;border-radius:4px;background:#fff;color:var(--ink);box-shadow:0 0 0 3px var(--rim);font-weight:700;white-space:nowrap;text-decoration:none}
.back:hover{background:#e9eef3}
.back.demo{margin-left:auto;gap:0} /* Bedien-Demo mit Fantasiedaten (demo-packbox.html), steht direkt vor dem Namen */
@media (max-width:599px){.demo-zusatz{display:none}}
.arr{font-family:system-ui,sans-serif}
.who{display:inline-flex;flex:none;align-items:center;min-height:44px;font:700 .8125rem/1 PbSans;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap;text-decoration:none} /* Name führt zur Startseite */
.who:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:479px){.who{letter-spacing:.1em}} /* sonst ragt der Name am Handy aus der Kopfzeile */
@media (max-width:399px){.site-header{gap:10px}.back{padding:.3em .7em .3em .55em}.who{font-size:.75rem;letter-spacing:.05em}}
@media (max-width:359px){.site-header{gap:8px}.back{padding:.3em .6em .3em .5em;font-size:.9375rem}.who{letter-spacing:.02em}}

/* Bühne – ruhige Fassung */
.scene{position:relative}
.scene-in{max-width:1440px;margin:0 auto;padding:calc(var(--hdr) + clamp(28px,5vw,64px)) var(--gut) clamp(40px,6vw,80px);display:grid;gap:clamp(28px,4vw,48px)}
.caps{display:contents}
.stage{order:0;margin:0;position:relative}
.cap{order:1;max-width:38rem}
.cap.cap-0{order:-1;max-width:none}
.cap h1{margin:0;font:800 clamp(2.1rem,1.2rem + 3.2vw,4.1rem)/1.02 PbSans,system-ui,sans-serif;letter-spacing:-.035em;text-wrap:balance}
.cap h2{margin:0;font:800 clamp(1.6rem,1.1rem + 2.1vw,3.1rem)/1.05 PbSans,system-ui,sans-serif;letter-spacing:-.03em;text-wrap:balance}
.hl{padding:0 .12em;border-radius:.06em;background:#fff;color:var(--ink);box-shadow:0 0 0 .07em var(--rim);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cap .txt{margin:1rem 0 0;max-width:34rem;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)}
.hint,.rail{display:none}
.stage-note{margin:12px 0 0;font:500 .8125rem/1.3 PbMono,monospace}

.art{position:relative}
.bx-zone{position:relative;height:clamp(300px,82vw,460px);container-type:size}
.bx-zone::before{content:"";position:absolute;inset:4% 2% 0;background:radial-gradient(closest-side,rgba(255,255,255,.17),transparent);pointer-events:none}
.pn{position:relative;max-width:500px;margin:0 auto;padding-top:14px;transform:rotate(-1deg);filter:drop-shadow(0 24px 26px rgba(6,30,56,.4))}

@media (min-width:1100px){
  .scene-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);align-items:start}
  .caps{display:flex;flex-direction:column;gap:56px;grid-column:1;grid-row:1}
  .cap{min-height:min(46vh,420px)}
  .cap:last-of-type{min-height:0}
  .stage{grid-column:2;grid-row:1;position:sticky;top:calc(var(--hdr) + 24px)}
  .art{display:flex;align-items:stretch;gap:3%}
  .pn{flex:0 0 50%;margin:0}
  .bx-zone{flex:1;height:auto;min-height:520px}
}

/* Euro-Lagerbehälter (CSS-3D) */
.bx-rig{position:absolute;inset:0;perspective:160cqmin}
.bx{--W:52cqmin;--H:28cqmin;--D:36cqmin;--o1:1;position:absolute;left:50%;top:60%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-34deg)}
.f,.fl,.it{position:absolute;left:0;top:0}
.f-front,.f-back{width:var(--W);height:var(--H);margin:calc(var(--H) / -2) 0 0 calc(var(--W) / -2)}
.f-left,.f-right{width:var(--D);height:var(--H);margin:calc(var(--H) / -2) 0 0 calc(var(--D) / -2)}
.f-front{transform:translateZ(calc(var(--D) / 2));display:grid;place-items:center;padding-top:2.4cqmin;background:linear-gradient(180deg,rgba(255,255,255,.24) 0 9%,rgba(8,36,66,.28) 9% 10.5%,transparent 10.5% 89%,rgba(8,36,66,.28) 89% 90.5%,rgba(255,255,255,.08) 90.5%),repeating-linear-gradient(90deg,rgba(8,36,66,.17) 0 .5cqmin,transparent .5cqmin 3.4cqmin),#3d89cc}
.f-right{transform:translateX(calc(var(--W) / 2)) rotateY(90deg);background:linear-gradient(180deg,rgba(255,255,255,.14) 0 9%,rgba(8,36,66,.3) 9% 10.5%,transparent 10.5% 89%,rgba(8,36,66,.3) 89% 90.5%),repeating-linear-gradient(90deg,rgba(8,36,66,.2) 0 .5cqmin,transparent .5cqmin 3.4cqmin),#2763a0}
.f-back{transform:translateZ(calc(var(--D) / -2));background:repeating-linear-gradient(90deg,rgba(8,36,66,.14) 0 .5cqmin,transparent .5cqmin 3.4cqmin),linear-gradient(180deg,#2a6eae,#1b5288)}
.f-left{transform:translateX(calc(var(--W) / -2)) rotateY(90deg);background:repeating-linear-gradient(90deg,rgba(8,36,66,.14) 0 .5cqmin,transparent .5cqmin 3.4cqmin),linear-gradient(180deg,#2f75b6,#1e5890)}
.f-floor{width:var(--W);height:var(--D);margin:calc(var(--D) / -2) 0 0 calc(var(--W) / -2);transform:translateY(calc(var(--H) / 2)) rotateX(90deg);background:repeating-linear-gradient(0deg,rgba(8,36,66,.22) 0 .4cqmin,transparent .4cqmin 4cqmin),repeating-linear-gradient(90deg,rgba(8,36,66,.22) 0 .4cqmin,transparent .4cqmin 4cqmin),#184a7c}
.pocket{display:block;width:58%;padding:.7cqmin;border-radius:.8cqmin;background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 .3cqmin rgba(255,255,255,.45)}
.lbl{display:grid;gap:.8cqmin;padding:1.3cqmin 1.7cqmin 1.5cqmin;border-radius:.3cqmin;background:#fff}
.pt{font:800 5.6cqmin/1 PbSans,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.pt-code{display:block;height:3.4cqmin;background:var(--bc) 0 0/4.6cqmin 100%}
.grip{position:absolute;left:24%;right:24%;top:17%;height:15%;border-radius:4cqmin;background:#0f3456;box-shadow:inset 0 .7cqmin 0 rgba(0,0,0,.35)}
.stk{--stk:1;position:absolute;left:13%;bottom:17%;display:inline-flex;align-items:center;gap:1cqmin;padding:1cqmin 1.4cqmin;background:#fff;color:var(--ink);border:.4cqmin solid var(--ink);font:500 max(12px,2.8cqmin)/1 PbMono,monospace;opacity:var(--stk);transform:scale(calc(1.6 - var(--stk) * .6)) rotate(-2deg);transform-origin:30% 50%}
.stk svg{width:3.4cqmin;height:3.4cqmin}
.fl{width:var(--W);height:calc(var(--D) / 2);margin:calc(var(--H) / -2 - var(--D) / 2) 0 0 calc(var(--W) / -2);transform-origin:50% 100%;background:repeating-linear-gradient(0deg,rgba(8,36,66,.15) 0 .35cqmin,transparent .35cqmin 2.6cqmin),linear-gradient(180deg,#4893d4,#3c88ca);box-shadow:inset 0 0 0 .5cqmin rgba(8,36,66,.2)}
.fl-f{transform:translateZ(calc(var(--D) / 2)) translateY(-.15cqmin) rotateX(calc(90deg - var(--o1) * 118deg))}
.fl-b{transform:translateZ(calc(var(--D) / -2)) translateY(-.15cqmin) rotateX(calc(-90deg + var(--o1) * 112deg))}

/* Inhalt: zwei Beutel, zur Kamera gedreht */
.it{--rise:1;width:var(--iw);height:var(--ih);margin:calc(var(--ih) / -2) 0 0 calc(var(--iw) / -2);transform:translate3d(var(--ix),calc(var(--iy0) + var(--rise) * var(--idy)),var(--iz)) rotateY(34deg) rotateX(24deg)}
.it-a{--iw:21cqmin;--ih:25cqmin;--ix:-10cqmin;--iz:-5cqmin;--iy0:1.5cqmin;--idy:-24cqmin}
.it-b{--iw:17cqmin;--ih:21cqmin;--ix:11cqmin;--iz:6cqmin;--iy0:3.5cqmin;--idy:-20cqmin}
.bag{position:absolute;inset:0;border-radius:1.4cqmin 1.4cqmin 2.4cqmin 2.4cqmin;background:linear-gradient(100deg,rgba(255,255,255,.55),rgba(255,255,255,.2) 40%,rgba(255,255,255,.36) 70%,rgba(255,255,255,.14));box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 1.4cqmin 3cqmin rgba(6,30,56,.35);overflow:hidden}
.bag::before{content:"";position:absolute;left:6%;right:6%;top:7%;height:.8cqmin;border-radius:1cqmin;background:rgba(255,255,255,.8)}
.fill{position:absolute;left:5%;right:5%;bottom:4%;top:22%;border-radius:1cqmin 1cqmin 2cqmin 2cqmin}
.bag-herb .fill,.th-herb{background:radial-gradient(circle at 30% 40%,#9bb04a 0 1.1px,transparent 1.6px) 0 0/6px 5px,radial-gradient(circle at 60% 70%,#2f4a1c 0 1.2px,transparent 1.7px) 2px 1px/5px 6px,radial-gradient(circle,#c9b15a 0 .9px,transparent 1.3px) 1px 3px/9px 7px,linear-gradient(170deg,#6d8838,#455f25)}
.bag-pel .fill,.th-pel{background:radial-gradient(circle at 50% 45%,#a06a37 0 2px,#5a3518 2.6px,transparent 3.1px) 0 0/7px 6px,radial-gradient(circle at 50% 45%,#8a5528 0 1.8px,#4d2d13 2.4px,transparent 2.9px) 3px 3px/7px 6px,linear-gradient(#5e3a1c,#3c2310)}
.bag b{position:absolute;right:1.2cqmin;top:2.6cqmin;padding:.5cqmin 1cqmin;border-radius:.4cqmin;background:#fff;color:var(--ink);font:500 max(12px,2.8cqmin)/1 PbMono,monospace}
.it-tag{position:absolute;left:-2.6cqmin;top:-3.4cqmin;padding:.7cqmin 1cqmin;background:#fff;color:var(--ink);border:.3cqmin solid var(--ink);font:500 max(12px,2.3cqmin)/1 PbMono,monospace;font-style:normal;white-space:nowrap;transform:rotate(-8deg)}

/* Um die Box: Regalfach, Liegedauer, Sucher */
.shd{position:absolute;left:50%;top:calc(60% + 21cqmin);width:88cqmin;height:16cqmin;margin:-8cqmin 0 0 -44cqmin;border-radius:50%;background:radial-gradient(closest-side,rgba(6,28,52,.55),rgba(6,28,52,.22) 55%,transparent)}
.rack{position:absolute;left:50%;top:56%;width:100cqmin;height:82cqmin;margin:-43cqmin 0 0 -50cqmin;max-width:100%}
.rk{position:absolute;background:rgba(255,255,255,.9)}
.rk-l,.rk-r{top:0;bottom:0;width:2px;transform-origin:50% 100%}
.rk-l{left:3%}.rk-r{right:3%}
.rk-t,.rk-b{left:0;right:0;height:2px;transform-origin:0 50%}
.rk-t{top:6%}.rk-b{bottom:6%}
.rack-tag,.age span{position:absolute;padding:.45em .7em;border-radius:3px;background:#fff;color:var(--ink);box-shadow:0 0 0 3px var(--rim);font:500 max(12px,2.7cqmin)/1 PbMono,monospace;white-space:nowrap}
.rack-tag{left:5%;bottom:calc(6% - .9em)}
.age{position:absolute;left:calc(50% - 47cqmin);top:calc(56% - 54cqmin);width:14cqmin;height:14cqmin}
.age svg{width:100%;height:100%;transform:rotate(-90deg)}
.age circle{fill:#fff;stroke-width:3.4}
.age-bg{stroke:#d2d9e0}
.age-fg{fill:none!important;stroke:var(--ink);stroke-dasharray:1;stroke-dashoffset:.38}
.age-hand{stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.age span{left:100%;top:50%;margin-left:2.4cqmin;transform:translateY(-50%)}
.ret{position:absolute;left:50%;top:51%;width:78cqmin;height:70cqmin;margin:-35cqmin 0 0 -39cqmin}
.ret i{position:absolute;width:11cqmin;height:11cqmin;border:0 solid #fff}
.ret .c1{left:0;top:0;border-width:3px 0 0 3px}
.ret .c2{right:0;top:0;border-width:3px 3px 0 0}
.ret .c3{right:0;bottom:0;border-width:0 3px 3px 0}
.ret .c4{left:0;bottom:0;border-width:0 0 3px 3px}
.ret .scan{inset:0;width:auto;height:auto;border:0;opacity:0}
.ret .scan::before{content:"";position:absolute;left:2%;right:2%;top:0;height:2px;background:var(--laser);box-shadow:0 0 10px 2px rgba(232,50,43,.75),0 0 34px 8px rgba(232,50,43,.25)}
.okb{position:absolute;left:calc(50% + 32cqmin);top:calc(51% - 40cqmin);width:10cqmin;height:10cqmin;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 1cqmin var(--rim)}
.okb svg{width:62%;height:62%}
.okb use{stroke-width:2.8}
.str{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.str path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}

/* Auftragszettel: Formular auf Papier, am Klemmbügel */
.pn{container:pn/inline-size}
.pn-glow{position:absolute;left:-9px;right:-9px;top:5px;bottom:-9px;border:3px solid #fff;border-radius:6px;opacity:0;pointer-events:none}
.zt-wire{position:absolute;left:50%;top:-14px;z-index:1;width:58px;height:24px;margin-left:-29px;border:3px solid #d5dbe1;border-bottom:0;border-radius:14px 14px 0 0}
.zt-clip{position:absolute;left:50%;top:0;z-index:2;width:96px;height:30px;margin-left:-48px;background:linear-gradient(180deg,#2e2e2e,#0b0b0b);clip-path:polygon(9% 0,91% 0,100% 100%,0 100%)}
.pn-scr{position:relative;overflow:hidden;background:#fff;color:var(--ink);border-radius:2px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%}
.pn-in{position:relative;display:grid;gap:14px;padding:32px 20px 26px 28px;font:400 14px/1.35 PbSans,sans-serif;transform-origin:50% 0}
.zt-l{display:block;font:500 12px/1.2 PbMono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.zt-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.zt-top .zt-l{grid-column:1/-1}
.zt-id{font:800 clamp(28px,9cqi,40px)/1 PbSans,sans-serif;letter-spacing:-.035em}
.zt-code{grid-column:1;height:26px;max-width:230px;background:var(--bc) 0 0/31px 100%}
.zt-ok{grid-column:2;grid-row:2/4;display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 6px;border:2px solid var(--ink);border-radius:999px;font:500 12px/1 PbMono,monospace;letter-spacing:.06em;text-transform:uppercase}
.zt-ok svg{width:20px;height:20px;padding:2px;border-radius:50%;background:var(--ink);color:#fff}
.zt-ok use{stroke-width:2.8}
.zt-hd{display:flex;justify-content:space-between;padding-bottom:4px}
.row{display:flex;align-items:center;min-height:56px;border-bottom:1px dashed #a9b1b9}
.rv{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 0}
.th{width:44px;height:36px;border-radius:3px}
.rv>span{min-width:0}
.rv>span>b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 15px/1.2 PbSans,sans-serif}
.rv small{display:block;font:500 12px/1.3 PbMono,monospace;color:var(--grey)}
.rv em{font:800 16px/1 PbSans,sans-serif;font-style:normal;white-space:nowrap}
.zt-sum{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;font:500 12px/1 PbMono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.zt-sum b{margin-left:6px;font:800 18px/1 PbSans,sans-serif;letter-spacing:0;color:var(--ink)}
.zt-lager{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:12px;border-top:2px solid var(--ink)}
.lg{display:grid;gap:8px;align-content:start}
.cells{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.cells i{height:11px;border:1.5px solid var(--ink);border-radius:1px}
.cells i.on{background:var(--ink)}
.bar{display:block;height:11px;border:1.5px solid var(--ink);border-radius:1px;overflow:hidden}
.bar i{display:block;width:62%;height:100%;background:var(--ink);transform-origin:0 50%}
.zt-auf,.zt-lief{position:relative;display:grid;gap:4px;padding-top:12px;border-top:2px solid var(--ink)}
.zt-val{display:inline-flex;align-items:center;gap:8px;font:800 22px/1.1 PbSans,sans-serif;letter-spacing:-.02em}
.zt-val svg{width:26px;height:26px}
.stamp{position:absolute;right:4px;top:20px;padding:5px 10px;border:2.5px solid var(--ink);border-radius:4px;font:500 13px/1 PbMono,monospace;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-8deg);opacity:.9}
.pn-link{display:none;position:absolute;left:12px;width:2px;background:var(--ink);transform-origin:50% 0}
.pn-link::before,.pn-link::after{content:"";position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.pn-link::before{top:-4px}.pn-link::after{bottom:-4px}
.pn-note{margin:0;text-align:right;font:500 12px/1 PbMono,monospace;color:var(--grey)}
@container pn (max-width:380px){
  .pn-in{gap:11px;padding:28px 13px 22px 22px}
  .zt-code{height:20px}
  .zt-ok{padding:4px 8px 4px 4px;font-size:12px}
  .zt-ok svg{width:16px;height:16px}
  .row{min-height:48px}
  .rv{gap:9px;padding:6px 0}
  .th{width:34px;height:30px}
  .rv>span>b{font-size:13.5px}
  .rv em{font-size:14px}
  .zt-lager{gap:10px}
  .zt-val{font-size:19px}
  .stamp{font-size:12px;padding:4px 7px;top:16px}
  .pn-link{left:9px}
}

/* Abschnitte unter der Bühne (Ausbau 05.10.2026): Ausgangslage · Funktionen im Detail · Im Detail · Zusammenspiel ·
   Technik & Rolle · Weitere Projekte. Bildsprache wie oben: Behälterfront mit Rippen und Griffmulde, weiße Etiketten
   mit Taschenrand, schwarzer Druck und Fäden; Rot nur für die Scanlinie. Grundzustand = Endbild der Bewegung. */
.sec{position:relative;padding:clamp(72px,10vw,136px) var(--gut);overflow-x:clip}
.sec-in{max-width:1240px;margin:0 auto}
.dk{background:repeating-linear-gradient(90deg,rgba(8,36,66,.16) 0 3px,transparent 3px 26px),var(--blue-d)}
.dk::before{content:"";position:absolute;inset:0 0 auto;height:14px;background:linear-gradient(180deg,rgba(255,255,255,.2) 0 9px,rgba(8,36,66,.42) 9px 11px,transparent 11px)}
.sec h2{margin:0 0 1.4rem;font:800 clamp(2rem,1.25rem + 2.6vw,3.5rem)/1.04 PbSans,system-ui,sans-serif;letter-spacing:-.035em;text-wrap:balance}
.sec h3{margin:0 0 .75rem;font:800 clamp(1.35rem,1.15rem + .7vw,1.75rem)/1.15 PbSans,system-ui,sans-serif;letter-spacing:-.02em;text-wrap:balance}
.sec p{margin:0 0 1rem;max-width:40rem;font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem)}
.sec .tag{margin:0 0 1.1rem;font-size:.8125rem}
.sec-hd{margin-bottom:clamp(44px,6vw,76px)}
.sec-hd h2{margin:0;max-width:24ch}
.lb-l{display:block;font:500 12px/1.25 PbMono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}

/* Behälterfront (flach) – Stapelwand, Szenen, Netz */
.kl,.klt{position:relative;display:block;aspect-ratio:3/2;border-radius:3px 3px 6px 6px;background:linear-gradient(180deg,rgba(255,255,255,.26) 0 9%,rgba(8,36,66,.34) 9% 11%,transparent 11% 87%,rgba(8,36,66,.34) 87% 89%,rgba(255,255,255,.07) 89%),repeating-linear-gradient(90deg,rgba(8,36,66,.2) 0 1.3%,transparent 1.3% 7.4%),#3d89cc;box-shadow:inset 0 0 0 1px rgba(8,36,66,.35),0 12px 20px -14px rgba(6,30,56,.75)}
.kl::before,.klt::before{content:"";position:absolute;left:33%;right:33%;top:17%;height:12%;border-radius:99px;background:#0f3456;box-shadow:inset 0 2px 0 rgba(0,0,0,.35)}
.pk{position:absolute;left:22%;right:22%;bottom:14%;padding:1.8cqi;border-radius:1.2cqi;background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 .5cqi rgba(255,255,255,.45)}
.pk-l{position:relative;display:grid;gap:1.2cqi;padding:1.8cqi 2.4cqi 2.2cqi;border-radius:.5cqi;background:#fff;color:var(--ink);overflow:hidden}
.pk-l b{font:800 6.4cqi/1 PbSans,sans-serif;letter-spacing:-.03em}
.pk-code{display:block;height:4.6cqi;background:var(--bc) 0 0/6.6cqi 100%}
.pk-laser,.lb-laser{position:absolute;left:0;right:0;top:0;height:2px;background:var(--laser);box-shadow:0 0 8px 2px rgba(232,50,43,.7);opacity:0}

/* Ausgangslage: Stapelwand gleicher Boxen, der Sucher findet PT-41 */
.lage-in{display:grid;gap:clamp(44px,6vw,96px);align-items:center}
.wall{margin:0}
.wall-art{position:relative;isolation:isolate;padding:7% 5% 0}
.wall-art::after{content:"";position:absolute;left:0;right:0;bottom:-8%;height:16%;z-index:-1;background:radial-gradient(closest-side,rgba(6,28,52,.55),transparent)}
.wall-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px}
.kl{container-type:inline-size}
.kl b{position:absolute;left:21%;right:21%;bottom:15%;padding:5cqi 0 4.4cqi;border-radius:2px;background:#fff;color:var(--ink);box-shadow:0 0 0 3cqi rgba(255,255,255,.3);font:500 max(12px,11.5cqi)/1 PbMono,monospace;text-align:center}
.kl.is-tgt{z-index:2}
.wr{position:absolute;inset:-15% -9%;background:linear-gradient(#fff 0 0) 0 0/26% 3px,linear-gradient(#fff 0 0) 0 0/3px 32%,linear-gradient(#fff 0 0) 100% 0/26% 3px,linear-gradient(#fff 0 0) 100% 0/3px 32%,linear-gradient(#fff 0 0) 0 100%/26% 3px,linear-gradient(#fff 0 0) 0 100%/3px 32%,linear-gradient(#fff 0 0) 100% 100%/26% 3px,linear-gradient(#fff 0 0) 100% 100%/3px 32%;background-repeat:no-repeat}
.wr-scan{position:absolute;left:8%;right:8%;top:14%;height:2px;background:var(--laser);box-shadow:0 0 8px 2px rgba(232,50,43,.75),0 0 22px 6px rgba(232,50,43,.25);opacity:0}
.wr-ok{position:absolute;right:-8%;top:-14%;width:24%;aspect-ratio:1;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 4px var(--rim)}
.wr-ok svg{width:62%;height:62%}
.wr-ok use,.lb-ok use{stroke-width:3}
.wall figcaption{margin-top:26px;font:500 .8125rem/1.3 PbMono,monospace}
@media (min-width:520px){.wall-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px 12px}}
@media (min-width:960px){.lage-in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}

/* Funktionen im Detail: Schiene füllt sich, jedes Etikett wird gedruckt */
.st-list{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:clamp(52px,7vw,88px)}
.st-list::before,.st-list::after{content:"";position:absolute;left:12px;top:10px;bottom:10px;width:2px;background:rgba(255,255,255,.32)}
.st-list::after{left:11px;width:4px;background:#fff;transform:scaleY(var(--f,1));transform-origin:50% 0}
.st{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:clamp(18px,3vw,44px);row-gap:24px;align-items:start}
.st-m{position:relative;z-index:1;grid-column:1;grid-row:1;display:block;justify-self:center;width:14px;height:14px;margin-top:10px;background:#fff;border:2px solid #fff;transition:background-color .3s}
.st-js .st-m{background:var(--blue-d)}
.st-js .st.on .st-m{background:#fff}
.st-tx{grid-column:2;min-width:0}
.st-tx p{margin:0}
.no{display:inline-block;margin-right:.4em;padding:.2em .5em;border-radius:3px;background:#fff;color:var(--ink);box-shadow:0 0 0 3px var(--rim);font:500 .8125rem/1.2 PbMono,monospace;letter-spacing:.04em;vertical-align:.32em}
.lb{grid-column:2;justify-self:start;width:min(100%,300px);display:grid;gap:9px;padding:16px 18px 18px;border-radius:3px;background:#fff;color:var(--ink);box-shadow:0 0 0 4px var(--rim),0 22px 34px -22px rgba(6,30,56,.8);transform:rotate(-1.2deg)}
.st:nth-child(even) .lb{transform:rotate(1deg)}
.lb-id{font:800 30px/1 PbSans,sans-serif;letter-spacing:-.035em}
.lb-code{position:relative;display:block;height:24px;background:var(--bc) 0 0/31px 100%;overflow:hidden}
.lb-ok{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;border:2px solid var(--ink);border-radius:99px;font:500 12px/1 PbMono,monospace;letter-spacing:.06em;text-transform:uppercase}
.lb-ok svg{width:18px;height:18px;padding:2px;border-radius:50%;background:var(--ink);color:#fff}
.lb-hd{display:flex;justify-content:space-between}
.lb-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px dashed #a9b1b9;font:600 15px/1.2 PbSans,sans-serif}
.lb-r .th{width:34px;height:28px}
.lb-r b{font:800 17px/1 PbSans,sans-serif;white-space:nowrap}
.lb-sum{display:flex;justify-content:flex-end;align-items:baseline;gap:8px}
.lb-sum b{font:800 19px/1 PbSans,sans-serif;letter-spacing:0;color:var(--ink)}
.lb .cells{margin-bottom:6px}
.lb-v{display:inline-flex;align-items:center;gap:9px;font:800 26px/1.1 PbSans,sans-serif;letter-spacing:-.02em}
.lb-v svg{width:28px;height:28px;flex:none}
.lb-st{justify-self:end;padding:5px 10px;border:2.5px solid var(--ink);border-radius:4px;font:500 13px/1 PbMono,monospace;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-8deg)}
@media (min-width:860px){.st{grid-template-columns:26px minmax(0,38rem) minmax(240px,300px);column-gap:clamp(18px,5vw,80px)}.lb{grid-column:3;grid-row:1}}

/* Im Detail: drei kleine Szenen am Behälter */
.dp{display:grid;gap:clamp(28px,4vw,44px) clamp(40px,6vw,96px);align-items:center}
.dp+.dp{margin-top:clamp(72px,9vw,120px)}
.dp-fig{margin:0}
.dp-art{position:relative;isolation:isolate;max-width:540px;margin:0 auto;aspect-ratio:5/4;container-type:inline-size}
.dp-art::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent)}
.dp-tx p{margin:0}
@media (min-width:900px){.dp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.dp-b .dp-fig{order:2}}
/* A · Code → Inhaltskarte steigt aus der Box */
.dp-a .klt{position:absolute;left:17%;right:17%;bottom:5%;z-index:2}
.cc-w{position:absolute;left:0;right:0;top:-20%;bottom:56%;z-index:1;overflow:hidden}
.cc{position:absolute;left:20%;right:20%;bottom:-1cqi;display:grid;gap:1.5cqi;padding:2.8cqi 3cqi 8cqi;border-radius:.8cqi .8cqi 0 0;background:#fff;color:var(--ink);box-shadow:0 0 0 1cqi var(--rim)}
.cc .lb-l,.rs .lb-l{font-size:max(12px,2.5cqi)}
.cc-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2cqi;padding-bottom:1.3cqi;border-bottom:1px dashed #a9b1b9;font:600 max(13px,3.3cqi)/1.2 PbSans,sans-serif}
.cc-r .th{width:6.6cqi;height:5.4cqi}
.cc-r b{font:800 max(14px,3.7cqi)/1 PbSans,sans-serif}
.cc-f{font:500 max(12px,2.7cqi)/1.2 PbMono,monospace;letter-spacing:.04em}
.cc-f i{font-style:normal}
/* B · Bestand: gesamt, reserviert, verfügbar */
.rs{position:absolute;left:5%;right:5%;top:50%;translate:0 -50%;display:grid;gap:2.6cqi;padding:4.4cqi 4.6cqi 4.8cqi;border-radius:1cqi;background:#fff;color:var(--ink);box-shadow:0 0 0 1.2cqi var(--rim),0 5cqi 7cqi -4cqi rgba(6,30,56,.6)}
.rs-top{position:relative;width:calc(40% - .6cqi);display:flex;justify-content:flex-start;padding-bottom:4.4cqi;margin-top:1cqi}
.rs-top::before{content:"";position:absolute;left:50%;bottom:2.2cqi;height:2.2cqi;border-left:2px solid var(--ink);opacity:var(--b,1)}
.rs-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.2cqi;border:2px solid var(--ink);border-bottom:0;transform:scaleX(var(--b,1))}
.rs-tag{display:grid;justify-items:center;gap:.6cqi;padding:1.6cqi 2.6cqi 1.8cqi;border:2px solid var(--ink);border-radius:.8cqi;background:#fff;transform:rotate(-5deg);transform-origin:50% -40%}
.rs-tag b{font:800 max(15px,4.4cqi)/1 PbSans,sans-serif;letter-spacing:-.02em}
.rs-tag small{font:500 max(12px,2.2cqi)/1.2 PbMono,monospace;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.rs-bar{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:1.2cqi}
.rs-bar i{position:relative;aspect-ratio:4/5;border:2px solid var(--ink);border-radius:2px;background:#fff}
.rs-bar .r::after,.k-r{background:repeating-linear-gradient(-45deg,var(--ink) 0 2px,#fff 2px 5px)}
.rs-bar .r::after{content:"";position:absolute;inset:0;opacity:var(--h,1)}
.rs-leg{display:flex;flex-wrap:wrap;gap:1.4cqi 4cqi;font:500 max(12px,2.6cqi)/1.2 PbMono,monospace;letter-spacing:.04em}
.rs-leg>span{display:inline-flex;align-items:center;gap:1.2cqi}
.rs-leg b{font:800 max(15px,3.6cqi)/1 PbSans,sans-serif;letter-spacing:0}
.k{width:max(11px,2.8cqi);height:max(11px,2.8cqi);border:2px solid var(--ink)}
.k-g{background:linear-gradient(90deg,var(--ink) 0 50%,#fff 0)}
/* C · Lieferetikett → Ablauf an der Packstation */
.dp-c .dp-art{aspect-ratio:auto}
.pflow{position:relative;display:flex;align-items:flex-start;gap:5cqi;padding:4cqi 3cqi 7cqi}
.pflow .klt{flex:0 0 36%;margin-top:4cqi}
.stk2{position:absolute;left:5%;right:5%;bottom:15%;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:1.2cqi;padding:1.6cqi .8cqi;background:#fff;color:var(--ink);border:.5cqi solid var(--ink);font:500 max(12px,2.5cqi)/1 PbMono,monospace;transform:rotate(-3deg)}
.stk2 svg{flex:none;width:max(14px,3.4cqi);height:max(14px,3.4cqi)}
.pf-w{position:relative;flex:1;min-width:0;margin-top:17cqi}
.pf{list-style:none;margin:0;padding:0 0 0 7cqi;display:grid;gap:1.5cqi}
.pf::before{content:"";position:absolute;left:3.4cqi;top:2cqi;bottom:2cqi;border-left:2px dashed rgba(255,255,255,.6)}
.pf li{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.6cqi;padding:1.4cqi 1.8cqi 1.4cqi 2.2cqi;border-radius:.6cqi;background:#fff;color:var(--ink);box-shadow:0 0 0 .8cqi var(--rim);font:600 max(12px,2.7cqi)/1.2 PbSans,sans-serif}
.pf li:first-child::before{content:"";position:absolute;right:100%;top:50%;width:13.7cqi;height:2px;margin-top:-1px;background:var(--ink);transform:scaleX(var(--c,1));transform-origin:0 50%}
.ck{flex:none;position:relative;width:max(14px,3.2cqi);height:max(14px,3.2cqi);border-radius:50%;background:var(--ink)}
.ck::after{content:"";position:absolute;left:34%;top:20%;width:24%;height:44%;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pf-dot{position:absolute;left:3.4cqi;top:0;width:14px;height:14px;margin:-7px 0 0 -6px;border-radius:50%;background:#fff;border:3px solid var(--ink);opacity:0}

/* Zusammenspiel: Fäden von der Box zu vier Anhängern, daneben die Verweise */
.net-in{display:grid;gap:clamp(36px,5vw,64px) clamp(40px,6vw,96px);align-items:center}
.net-hd h2{max-width:22ch}
.net-hd p{margin:0}
.net-fig{margin:0}
.net-art{position:relative;max-width:560px;margin:0 auto;aspect-ratio:5/4;container-type:inline-size}
.net-str{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.net-str path{fill:none;stroke:var(--ink);stroke-width:.45;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:0}
.net-box{position:absolute;left:34%;width:32%;top:36.5%}
.net-box .pk{left:20%;right:20%;bottom:13%}
.net-box .pk-l{padding:1.2cqi 0;text-align:center}
.net-box .pk-l b{font-size:max(15px,4.6cqi)}
.nt{position:absolute;width:44%;height:17.5%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.8cqi;padding:0 2cqi 0 6cqi;border-radius:1.2cqi;background:#fff;color:var(--ink);box-shadow:0 0 0 1cqi var(--rim),0 3cqi 5cqi -3cqi rgba(6,30,56,.7)}
.nt::before{content:"";position:absolute;left:2.4cqi;top:50%;width:2.4cqi;height:2.4cqi;margin-top:-1.2cqi;border-radius:50%;background:var(--blue-d);box-shadow:0 0 0 .6cqi #c9d2db}
.nt-1{left:1%;top:7.5%}.nt-2{right:1%;top:7.5%}.nt-3{left:1%;bottom:7.5%}.nt-4{right:1%;bottom:7.5%}
.nt-c{padding:.3cqi 1cqi;border-radius:.5cqi;background:var(--ink);color:#fff;font:500 max(12px,2.4cqi)/1.3 PbMono,monospace;font-style:normal;letter-spacing:.04em}
.nt b{font:800 max(13px,3.8cqi)/1.1 PbSans,sans-serif;letter-spacing:-.02em;white-space:nowrap}
.net-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.net-list li{position:relative;padding:16px 46px 17px 18px;border-radius:4px;background:#fff;color:var(--ink);box-shadow:0 0 0 4px var(--rim);transition:transform .25s}
.net-list li::after{content:"→" / "";position:absolute;right:18px;top:15px;font:800 1.25rem/1.2 system-ui,sans-serif}
.net-list a{display:inline-flex;align-items:center;gap:.55em;font:800 clamp(1.0625rem,.9rem + 1vw,1.25rem)/1.2 PbSans,sans-serif;letter-spacing:-.015em;text-decoration:none}
.net-list a::after{content:"";position:absolute;inset:0;border-radius:4px}
.net-list a:focus-visible{outline:none}
.net-list li:focus-within{outline:3px solid #fff;outline-offset:5px}
.net-list li:hover{transform:translateX(5px)}
.net-list p{margin:.4rem 0 0;font-size:1rem;line-height:1.5;color:#30363c}
.nc{flex:none;display:inline-block;padding:.18em .45em;border-radius:3px;background:var(--ink);color:#fff;font:500 .8125rem/1.25 PbMono,monospace;letter-spacing:.04em}
@media (min-width:960px){.net-in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.net-hd{grid-column:1/-1}}

/* Technik & Rolle: Typenschild mit Stempel, daneben die Ansicht der Demo */
.tech-in{display:grid;gap:clamp(40px,6vw,80px);align-items:center}
.viz{margin:0;max-width:440px;width:100%;justify-self:center}
.viz a{display:block;padding:10px;border-radius:6px;background:#fff;box-shadow:0 0 0 4px var(--rim),0 30px 50px -30px rgba(6,30,56,.6);transition:transform .25s}
.viz a:hover{transform:translateY(-3px)}
.viz img{width:100%;height:auto;border-radius:2px}
.viz figcaption{margin-top:14px;font-size:1rem}
.plate{position:relative;max-width:40rem;margin:0 0 2.6rem;border-radius:6px;background:#fff;color:var(--ink);box-shadow:0 0 0 4px var(--rim),0 30px 50px -30px rgba(6,30,56,.6)}
.plate .plate-hd{margin:0;max-width:none;padding:10px 18px;border-radius:6px 6px 0 0;background:var(--ink);color:#fff;font:500 .8125rem/1.3 PbMono,monospace;letter-spacing:.12em;text-transform:uppercase}
.plate dl{margin:0;padding:4px 18px 10px}
.plate dl>div{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:2px 16px;padding:11px 0;border-bottom:1px dashed #a9b1b9}
.plate dl>div:last-child{border-bottom:0}
.plate dt{font:500 .8125rem/1.75 PbMono,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.plate dd{margin:0;font-size:1.0625rem;line-height:1.45}
.plate-st{position:absolute;right:-6px;bottom:-17px;padding:7px 12px;border:3px solid var(--ink);border-radius:5px;background:#fff;color:var(--ink);box-shadow:0 0 0 4px var(--rim);font:500 .8125rem/1 PbMono,monospace;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-6deg)}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.cta a{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:.6em 1.3em;border-radius:4px;font-weight:700;text-decoration:none;transition:background .2s,transform .2s}
.again{background:var(--ink);color:#fff}
.again:hover{background:#2b2b2b;transform:translateY(-2px)}
.again svg{width:22px;height:22px}
.ghost{border:2px solid #fff}
.ghost:hover{background:rgba(255,255,255,.12)}
@media (max-width:520px){.plate dl>div{grid-template-columns:minmax(0,1fr)}}
@media (min-width:900px){.tech-in{grid-template-columns:minmax(0,440px) minmax(0,1fr);row-gap:0}.viz{grid-column:1;grid-row:1/3}.tech-tx{grid-column:2;grid-row:1;align-self:end}.tech-in>.cta{grid-column:2;grid-row:2;align-self:start}}

/* Weitere Projekte: zwei Behälter als Wegweiser */
.more{padding-top:clamp(60px,8vw,100px);padding-bottom:clamp(60px,8vw,100px)}
.more h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.5rem)}
.more-grid{display:grid;gap:18px}
.mp{position:relative;display:grid;align-content:end;gap:16px;min-height:168px;padding:56px 22px 24px;border-radius:4px 4px 8px 8px;color:#fff;text-decoration:none;background:linear-gradient(180deg,rgba(255,255,255,.18) 0 12px,rgba(8,36,66,.4) 12px 14px,transparent 14px),repeating-linear-gradient(90deg,rgba(8,36,66,.22) 0 3px,transparent 3px 22px),#2a6aa8;box-shadow:inset 0 0 0 1px rgba(8,36,66,.4),0 18px 28px -18px rgba(6,30,56,.8);transition:transform .25s}
.mp::before{content:"";position:absolute;left:38%;right:38%;top:26px;height:14px;border-radius:99px;background:#0f3456;box-shadow:inset 0 2px 0 rgba(0,0,0,.35)}
.mp-d{font:500 .8125rem/1.3 PbMono,monospace;letter-spacing:.06em;text-transform:uppercase}
.mp-d span{display:inline-block;transition:transform .25s}
.mp-l{justify-self:start;display:inline-flex;align-items:center;flex-wrap:wrap;gap:.3em .6em;padding:.5em .85em;border-radius:3px;background:#fff;color:var(--ink);box-shadow:0 0 0 4px var(--rim);font:800 clamp(1.2rem,1rem + .9vw,1.7rem)/1.1 PbSans,sans-serif;letter-spacing:-.02em}
.mp-next{text-align:right}
.mp-next .mp-l{justify-self:end}
.mp:hover,.mp:focus-visible{transform:translateY(-5px)}
.mp-prev:hover .mp-d span{transform:translateX(-5px)}
.mp-next:hover .mp-d span{transform:translateX(5px)}
.all{display:inline-flex;align-items:center;gap:.5em;min-height:48px;margin-top:24px;padding:.55em 1.2em;border:2px solid #fff;border-radius:4px;font-weight:700;text-decoration:none;transition:background .2s}
.all:hover{background:rgba(255,255,255,.12)}
@media (min-width:720px){.more-grid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.mp,.mp-d span,.net-list li,.viz a,.cta a{transition:none}.mp:hover,.mp:focus-visible,.net-list li:hover,.viz a:hover,.again:hover,.mp:hover .mp-d span{transform:none}}

.foot{border-top:1px solid rgba(255,255,255,.18);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 28px;padding:28px var(--gut) 36px;background:var(--blue-d);font-size:1rem}
.foot p{margin:0}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{text-underline-offset:4px;padding:6px 0}

/* Bewegungsfassung: gepinnte Bühne */
.pb-motion .scene{height:100vh;height:100svh;overflow:clip}
.pb-motion .scene-in{height:100%;max-width:none;align-items:stretch;padding:calc(var(--hdr) + 10px) var(--gut) 14px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px}
.pb-motion .caps{display:grid;grid-row:2;grid-column:1;align-items:end}
.pb-motion .cap{grid-area:1/1;min-height:0;max-width:44rem}
.pb-motion .cap h1{font-size:clamp(1.65rem,1rem + 2.6vw,4rem)}
.pb-motion .cap h2{font-size:clamp(1.5rem,1rem + 1.9vw,3rem)}
.pb-motion .cap .txt{margin-top:.6rem}
.pb-motion .cap .tag{margin-bottom:.7rem}
.pb-motion .hint{display:flex;align-items:center;gap:.7em;margin:1rem 0 0;font:500 .8125rem/1 PbMono,monospace}
.pb-motion .hint i{width:2px;height:26px;background:linear-gradient(#fff,transparent)}
.pb-motion .rail{display:flex;grid-area:2/1;justify-content:space-between;position:relative;height:10px;margin-top:14px;max-width:44rem}
.pb-motion .rail::before{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:rgba(255,255,255,.35)}
.rail-fill{position:absolute;left:0;right:0;top:3px;height:4px;background:#fff;transform-origin:0 50%}
.rail b{position:relative;width:10px;height:10px;background:var(--blue);border:2px solid #fff}
.pb-motion .stage{grid-row:1;grid-column:1;position:relative;top:auto;min-height:0;container:stage/size}
.pb-motion .art{position:absolute;inset:0;display:block}
.pb-motion .stage-note{position:absolute;right:0;bottom:0;margin:0;font-size:.75rem}
.pb-motion .bx-zone,.pb-motion .pn{position:absolute;margin:0;min-height:0;height:auto;max-width:none}
.pb-motion .pn{display:flex;flex-direction:column}
.pb-motion .pn-scr{flex:1;min-height:0}
.pb-motion .pn-link{display:block}
.pb-go .bx{--o1:0}
.pb-go .it{--rise:0}
.pb-go .stk{--stk:0}
@container stage (min-aspect-ratio:19/20){
  .pb-motion .bx-zone{right:0;top:2%;bottom:6%;width:50%}
  .pb-motion .pn{left:1%;top:0;bottom:26px;margin:auto 0;height:fit-content;max-height:calc(100% - 26px);width:min(46%,460px)}
}
@container stage (max-aspect-ratio:19/20){
  .pb-motion .bx-zone{left:0;right:0;top:0;height:40%}
  .pb-motion .pn{left:6px;right:6px;top:39%;bottom:26px;height:fit-content;max-height:calc(61% - 26px);width:auto;max-width:520px;margin:0 auto auto}
}
@media (min-width:1100px) and (min-aspect-ratio:5/4){
  .pb-motion .scene-in{grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);grid-template-rows:minmax(0,1fr);gap:clamp(24px,3vw,56px);padding-bottom:24px}
  .pb-motion .caps{grid-row:1;align-content:center;align-items:center}
  .pb-motion .rail{align-self:start}
  .pb-motion .stage{grid-row:1;grid-column:2}
}

/* ---------- Druck ----------
   Papier zeigt die ruhige Fassung (js/projekt-packbox.js nimmt beim Drucken die Bewegung ab und stellt sie danach
   wieder her). Ohne gedruckte Hintergründe würde Weiß auf Behälterblau unsichtbar: Schrift in Druckschwarz, Taschenränder
   grau. Die gezeichneten Bilder (Behälter, Stapelwand, Szenen, Netz) behalten ihr Blau wie ein Foto. Fester Kopf,
   Bühnenhöhe und Knöpfe entfallen; Etiketten, Szenen und Karten werden nicht zerschnitten. */
@page{margin:14mm 12mm}
@media print{
  /* Taschenränder als Linie statt Schatten: ein Schatten über dem Seitenanfang bliebe sonst als Strich auf der Vorseite */
  :root{--gut:0px;--rim:transparent}
  html,body{background:#fff;color:var(--ink)}
  /* Bildschirmmaße wirken auf Papier groß: alles etwas kleiner, wie bei Start und Profil */
  body{zoom:.8}
  .skip,.site-header,.hint,.rail,.cta,.all,.dk::before,.st-list::before,.st-list::after,.net-list li::after{display:none}
  .tag{color:var(--ink)}
  .tag span,.hl,.no,.mp-l{border:1px solid #9fb0c0}
  .lb,.net-list li,.viz a,.plate{box-shadow:none;border:1.5px solid #9fb0c0}
  .plate-st{box-shadow:none}
  h1,h2,h3,.tag,.sec-hd,.net-hd{break-after:avoid}
  .cap,.stage,.wall,.st,.dp,.net-in,.plate,.viz,.more{break-inside:avoid}
  .art,.wall-art,.dp-art,.net-art{--rim:rgba(255,255,255,.3);background:var(--blue);border-radius:6px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lb,.pk-l,.nc,.plate-st{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Einstieg: die Frage und ihre fünf Takte als Liste, darunter das Bild – Behälter neben dem Auftragszettel */
  .scene-in{display:block;padding:0 0 8px}
  .cap{max-width:none;margin-bottom:14px}
  .cap.cap-0{margin-bottom:24px}
  .cap h2{font-size:1.5rem}
  .cap .tag{margin-bottom:.35rem}
  .stage{position:static;margin-top:24px}
  .art{display:flex;align-items:center;gap:3%;padding:22px 18px 18px}
  .bx-zone{flex:1;height:380px} /* feste Höhe: der Behälter misst sich an seiner Zone (Container-Einheiten) */
  .pn{flex:0 0 50%;margin:0}
  /* Abschnitte ohne Bühnenabstand, Bild und Text nebeneinander */
  .sec{padding:30px 0 6px}
  .sec-hd{margin-bottom:24px}
  .sec h2{font-size:2.1rem}
  .lage-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  .wall-art{padding:6% 5% 3%}
  .wall figcaption{margin-top:10px}
  .st-list{gap:34px}
  .st{grid-template-columns:26px minmax(0,1fr) 250px}
  .lb,.st:nth-child(even) .lb{grid-column:3;grid-row:1;width:238px;transform:none} /* gedreht ragte die Ecke auf die Vorseite */
  .st-m{border-color:var(--ink)}
  .dp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  .dp-b .dp-fig{order:2}
  .dp+.dp{margin-top:36px}
  /* Zusammenspiel als ein Block (die Überschrift bleibt bei ihrem Netz): Netz links, Verweise rechts */
  .net-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:22px 28px;align-items:start}
  .net-hd{grid-column:1/-1}
  .net-hd h2{max-width:none}
  .net-list{gap:10px}
  .net-list li{padding:10px 14px 11px}
  .net-list p{font-size:.9375rem}
  .tech-in{grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:32px;align-items:start}
  .viz{grid-column:1;grid-row:1}
  .tech-tx{grid-column:2;grid-row:1}
  .plate{margin-bottom:24px}
  .plate .plate-hd{background:none;color:var(--ink);border-bottom:2px solid var(--ink)}
  .more{padding:26px 0 8px}
  .more-grid{grid-template-columns:1fr 1fr}
  .mp{min-height:0;padding:14px 18px;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none}
  .mp::before{display:none}
  .foot{padding:14px 0 0;background:none;color:var(--ink);border-top:1.5px solid var(--ink);break-before:avoid}
}