/* B-03 Kommissionierung – eigene Projektseite.
   Welt: Palettenregal und Bodenmarkierung. Hallenboden aus Beton, Regalträger Orange, Stützen Blau,
   gelbe Bodenlinie mit schwarzer Kante, schwarze Platzschilder. Formen eckig, harte Schatten, Warnstreifen.
   Schriften: Unbounded 800 für große Platznummern und Überschriften, Barlow (Schilderschrift) für Lesetext,
   IBM Plex Mono nur für Etiketten, Codes und kurze Schilder. */

/* ---------- 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:#141414}
  ::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:Unbounded;src:url('../fonts/unbounded-normal-400_900-latin.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:Unbounded;src:url('../fonts/unbounded-normal-400_900-latin-ext.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0100-02FF}
@font-face{font-family:Barlow;src:url('../fonts/barlow-normal-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url('../fonts/barlow-normal-600-latin.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Plex;src:url('../fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url('../fonts/ibm-plex-mono-normal-400-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02FF}
@font-face{font-family:Plex;src:url('../fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Plex;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{
  --con:#d8d6d0;--floor:#cdcac2;--line:#a9a59c;
  --ink:#141414;--ink-2:#3b3935;--ink-3:#55524c;--wh:#fbfaf7;
  --or:#e8641b;--or-d:#a9450d;--bl:#1f5fa8;--bl-d:#1a5296;--ye:#f3c300;
  --haz:repeating-linear-gradient(-45deg,var(--ink) 0 9px,var(--ye) 9px 18px);
  --upr:repeating-linear-gradient(180deg,var(--bl) 0 8px,transparent 8px 14px) center/6px 100% no-repeat,linear-gradient(var(--bl),var(--bl)) left/5px 100% no-repeat,linear-gradient(var(--bl),var(--bl)) right/5px 100% no-repeat;
  --gut:clamp(16px,4vw,48px);
  --disp:Unbounded,"Arial Black",sans-serif;--sans:Barlow,"Segoe UI",Arial,sans-serif;--mono:Plex,ui-monospace,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 18px/1.6 var(--sans);overflow-x:clip;
  background:radial-gradient(rgba(20,20,20,.07) 1px,transparent 1.3px) 0 0/9px 9px,radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.3px) 4px 6px/13px 13px,var(--con)}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:12px;top:-80px;z-index:30;padding:10px 16px;background:var(--ink);color:var(--ye);font:500 16px var(--mono);text-decoration:none}
.skip:focus{top:12px}
/* Etiketten und Schilder in Mono, Lesetext in Barlow */
.top,.to-walk,figcaption,.cta,.ghost,.foot,.all{font-family:var(--mono)}

/* Fortschritt der Seite: Bodenlinie oben */
.pbar{position:fixed;left:0;top:0;z-index:25;width:100%;height:7px;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--ye);border-bottom:2px solid var(--ink);pointer-events:none}

/* Kopf: 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 eine Zeile.
   Das Fachkürzel steht in der Mitte und weicht am Handy (der Einstieg nennt es darunter). */
.top{display:flex;align-items:center;gap:clamp(12px,2vw,24px);padding:16px clamp(16px,3vw,40px) 10px;font-size:17px}
.back{display:inline-flex;flex:none;align-items:center;gap:8px;min-height:44px;padding:8px 16px 8px 12px;background:var(--ye);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:500;font-size:16px;white-space:nowrap;text-decoration:none;transition:transform .15s,box-shadow .15s}
.back:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.back.demo{margin-left:auto;gap:0} /* Bedien-Demo mit Fantasiedaten (demo-kommissionierung.html), steht direkt vor dem Namen */
@media (max-width:599px){.demo-zusatz{display:none}}
.who{display:inline-flex;flex:none;align-items:center;min-height:44px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;text-decoration:none;color:var(--ink-2)}
.who:hover{color:var(--ink);text-decoration:underline}
.top-code{flex:1 1 auto;text-align:center;font-size:13px;color:var(--ink-3);white-space:nowrap}
@media (max-width:760px){.top-code{display:none}}
@media (max-width:519px){.who{letter-spacing:.08em}}
@media (max-width:374px){.top{gap:8px}.back{gap:6px;padding:6px 10px 6px 8px;font-size:14px}.who{font-size:12px;letter-spacing:.04em}}

.kick{font:500 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.kick::before{content:"";width:30px;height:12px;background:var(--haz);border:1.5px solid var(--ink)}

/* Lesetext der Abschnitte */
.prose h2,.walk-head h2{font:800 clamp(1.6rem,3.6vw,3.1rem)/1.08 var(--disp);letter-spacing:-.03em;margin:.45em 0 .55em}
.prose p:not(.kick){text-wrap:pretty;max-width:36em;font-size:clamp(1.0625rem,.35vw + .95rem,1.1875rem);line-height:1.6;color:var(--ink-2)}
.prose p:not(.kick)+p{margin-top:.85em}
.prose .lead{font-size:clamp(1.18rem,.8vw + .9rem,1.45rem);line-height:1.45;color:var(--ink)}

/* Hero: Regalfeld mit drei Trägern */
.hero{max-width:1680px;margin:0 auto;padding:clamp(16px,4vh,48px) var(--gut) clamp(64px,11vh,130px);display:grid;gap:clamp(30px,4.5vw,64px)}
.hero h1{font:800 clamp(1.95rem,7vw,7rem)/.92 var(--disp);letter-spacing:-.035em;margin:.3em 0 0;hyphens:manual}
.hook{position:relative;padding:0 30px;font:500 clamp(1.12rem,2.1vw,1.85rem)/1.28 var(--mono);letter-spacing:-.015em}
.hook::before,.hook::after,.bay::before,.bay::after{content:"";position:absolute;width:16px;background:var(--upr)}
.hook::before,.hook::after{top:-10px;bottom:-34px}
.hook::before{left:0}.hook::after{right:0}
.lvl{display:block;padding-top:clamp(16px,3.2vh,30px)}
.hl{display:block;padding:0 6px 10px}
.beam,.bay-beam{display:block;position:relative;height:22px;margin:0 -14px;background:var(--or);border-bottom:3px solid var(--or-d)}
.beam b,.bay-beam b{position:absolute;left:24px;top:3px;height:14px;padding:0 6px;background:var(--wh);border:1px solid var(--ink);font:500 12px/12px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.kw{position:relative;white-space:nowrap}
.kw-item{color:var(--bl-d)}
.kw-qty{background:var(--or);padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.orn-route{position:absolute;left:0;bottom:-.2em;width:100%;height:.22em;overflow:visible}
.orn-route path{fill:none;stroke-linecap:butt;vector-effect:non-scaling-stroke}
.orn-route .ru{stroke:var(--ink);stroke-width:9}
.orn-route .rt{stroke:var(--ye);stroke-width:5}
.orn-arrow{position:absolute;right:-.62em;bottom:-.36em;width:.52em;height:.52em;overflow:visible}
.orn-arrow path{fill:var(--ye);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.br{position:absolute;width:.3em;height:.3em;border:0 solid var(--ink)}
.br-tl{left:-.16em;top:.02em;border-width:3px 0 0 3px}
.br-tr{right:-.16em;top:.02em;border-width:3px 3px 0 0}
.br-bl{left:-.16em;bottom:-.02em;border-width:0 0 3px 3px}
.br-br{right:-.16em;bottom:-.02em;border-width:0 3px 3px 0}
.orn-laser{position:absolute;left:-.14em;right:-.14em;top:0;height:3px;background:var(--or);box-shadow:0 0 10px 2px rgba(232,100,27,.75);opacity:0}
.orn-pips{display:inline-flex;align-items:center;gap:.16em;margin-left:.4em;vertical-align:.04em}
.orn-pips i{width:.42em;height:.42em;border:2px solid var(--ink);background:var(--ink)}
.orn-chk{width:.66em;height:.66em;margin-left:.06em}
.orn-chk path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:square}
.to-walk{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(48px,7vh,72px);padding:10px 0;font-weight:500;font-size:16px;text-underline-offset:5px}
.to-walk svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:square}
.to-walk:hover{text-decoration-thickness:3px}
@media (max-width:359px){.hook{font-size:.95rem;padding:0 24px}.hl{padding:0 2px 10px}.orn-pips{margin-left:.25em}}

/* Bilder: Stellplatz mit Bodenecken */
.hero-fig,.view-fig{margin:0;justify-self:center;width:min(100%,460px);padding:16px}
.frame{position:relative}
.fig-link{display:block;position:relative;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--ink)}
.fig-link img{width:100%;height:auto}
.spot{position:absolute;width:42px;height:42px;border:0 solid;border-image:var(--haz) 8}
.spot-tl{left:-16px;top:-16px;border-width:8px 0 0 8px}
.spot-tr{right:-16px;top:-16px;border-width:8px 8px 0 0}
.spot-bl{left:-16px;bottom:-16px;border-width:0 0 8px 8px}
.spot-br{right:-16px;bottom:-16px;border-width:0 8px 8px 0}
figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:space-between;margin-top:26px;font-size:16px}
.cap-t{font-weight:500}
.cap-n{font-size:13px;color:var(--ink-2)}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,96px)}
  .hero-head{grid-column:1/-1}
  .hero-rack{grid-column:1;align-self:start;padding-top:12px}
  .hero-fig{grid-column:2;grid-row:2;justify-self:end;align-self:start;width:min(100%,460px,max(300px,calc((100vh - 390px) * .8)))}
}

/* Startzustände der Gesten (nur Zierelemente, nie Text) – nur solange das Kopfskript Bewegung meldet, Rückfall nach 3,5 s */
.kmo .orn-route path{stroke-dasharray:1;stroke-dashoffset:1}
.kmo .orn-arrow,.kmo .br,.kmo .hero-fig .spot{opacity:0}
.kmo .orn-pips i{background:transparent}
.kmo .orn-chk path{stroke-dasharray:1;stroke-dashoffset:1}

/* Ausgangslage: die Liste und die Plätze in der Halle (Bodenlinie als Trenner) */
.sit{position:relative;max-width:1680px;margin:0 auto;padding:clamp(64px,11vh,128px) var(--gut) clamp(56px,9vh,110px);display:grid;gap:clamp(36px,5vw,88px);align-items:center}
.sit::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;height:10px;background:var(--ye);border-block:2px solid var(--ink)}
.sit-fig{margin:0;justify-self:center;width:min(100%,430px)}
.sit-svg{width:100%;height:auto}
.sit-fig figcaption{margin-top:14px}
@media (min-width:900px){.sit{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.sit-fig{justify-self:end}}
.m-sh{fill:var(--ink)}
.m-sheet{fill:var(--wh);stroke:var(--ink);stroke-width:3}
.m-head{fill:var(--ink)}
.m-ht{font:500 13px var(--mono);fill:var(--ye);letter-spacing:.06em;text-transform:uppercase}
.m-hn{font:400 12px var(--mono);fill:var(--wh)}
.m-rule{stroke:var(--ink);stroke-width:1.5}
.m-dot,.m-pd{fill:var(--ink)}
.m-pd{stroke:var(--wh);stroke-width:2}
.m-dn,.m-pn{font:800 11px var(--disp);fill:var(--ye);text-anchor:middle}
.m-code{font:800 17px var(--disp);fill:var(--ink);letter-spacing:-.02em}
.m-gl path{fill:none;stroke:var(--ink);stroke-width:3.8;stroke-linejoin:round}
.m-q{font:500 16px var(--mono);fill:var(--ink)}
.m-plan .k-floor{stroke-width:5}
.m-plan .k-lane{stroke-width:7}
.m-hot{fill:var(--ye);stroke:var(--ink);stroke-width:4}
.m-pr{fill:none;stroke:var(--ink);stroke-width:2;opacity:0}

/* Laufweg */
.walk{position:relative;padding:clamp(56px,9vh,110px) 0 6vh}
.walk::before{content:"";position:absolute;top:0;left:0;right:0;height:12px;background:var(--haz);border-block:2px solid var(--ink)}
.walk-head{padding:0 var(--gut);max-width:780px}
.view h2{max-width:15ch}
.note{color:var(--ink-2);font-size:17px}
.stage{position:sticky;top:0;z-index:3;display:grid;gap:10px;justify-items:center;padding:14px var(--gut) 24px;margin-top:28px;
  background:linear-gradient(var(--con) calc(100% - 20px),rgba(216,214,208,0))}
.plan{width:100%;height:auto;max-height:30svh;overflow:visible}

/* Plan von oben: Beton, Regale, Bodenlinie */
.k-floor{fill:var(--floor);stroke:var(--ink);stroke-width:3}
.k-joint{fill:none;stroke:#bdb9b0;stroke-width:1}
.k-lane{fill:none;stroke:var(--ye);stroke-width:5}
.k-haz{fill:url(#kHaz);stroke:var(--ink);stroke-width:2}
.k-racks{transition:opacity .35s}
.k-pal{fill:#ece8df;stroke:#8f8a80;stroke-width:1}
.k-beam{fill:var(--or)}
.k-up{fill:var(--bl)}
.k-aisle{font:800 26px var(--disp);fill:var(--ink);text-anchor:middle}
.k-gate-t{font:500 13px var(--mono);fill:var(--ink)}
.k-hot{fill:var(--ye);stroke:var(--ink);stroke-width:2.5;opacity:0;transition:opacity .25s,fill .25s}
.k-hot.is-on{opacity:1}
.k-hot.is-done{opacity:1;fill:var(--ink)}
.k-hot.is-skip{opacity:1;fill:var(--wh);stroke:var(--bl);stroke-dasharray:4 3}
.k-focus{opacity:0}
.k-focus path{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:square}
.k-ru{fill:none;stroke:var(--ink);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.k-r{fill:none;stroke:var(--ye);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.k-ret{stroke-dasharray:14 10;stroke-linecap:butt}
.k-retmask{fill:none;stroke:#fff;stroke-width:18;stroke-linecap:round;stroke-linejoin:round}
.k-stop circle,.k-stop path,.k-stop text{transition:opacity .2s,fill .2s,stroke .2s}
.k-disc{fill:var(--ink);stroke:var(--wh);stroke-width:2}
.k-num{font:800 13px var(--disp);fill:var(--ye);text-anchor:middle}
.k-chk{fill:none;stroke:var(--ye);stroke-width:3;stroke-linecap:square;opacity:0}
.k-skip{fill:none;stroke:var(--bl);stroke-width:2.5;stroke-dasharray:4 3;opacity:0}
.k-ring{fill:none;stroke:var(--ink);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.k-stop.is-on .k-disc{fill:var(--ye);stroke:var(--ink);stroke-width:2.5}
.k-stop.is-on .k-num{fill:var(--ink)}
.k-stop.is-on .k-ring{animation:kPulse 1.4s ease-out 3}
.k-stop.is-done .k-num{opacity:0}
.k-stop.is-done .k-chk{opacity:1}
.k-stop.is-skip .k-disc{fill:var(--wh);stroke:var(--bl)}
.k-stop.is-skip .k-num{fill:var(--bl)}
.k-stop.is-skip .k-skip{opacity:1}
@keyframes kPulse{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.2)}}
.k-halo{fill:var(--or);opacity:.35}
.k-core{fill:var(--ink);stroke:var(--ye);stroke-width:3}

/* Platzschild (Beispielwerte) */
.kc{width:100%;max-width:520px;background:var(--wh);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);display:grid;gap:8px 10px;padding:0 0 10px;font:500 12px/1.2 var(--mono);
  grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "prog prog" "body scan" "acts acts";transition:box-shadow .25s}
.kc>*:not(.kc-head){margin:0 10px}
.kc.is-focus{box-shadow:6px 6px 0 var(--bl)}
.kc-head{grid-area:head;display:flex;align-items:center;gap:8px;background:var(--ink);color:var(--ye);padding:6px 10px;text-transform:uppercase;letter-spacing:.06em}
.kc-fin{display:none}
.kc.is-done .kc-next{display:none}
.kc.is-done .kc-fin{display:inline}
.kc-count{margin-left:auto;color:var(--wh)}
.kc-count b{font-weight:500;color:var(--ye)}
.kc.is-done .kc-count{visibility:hidden}
.kc-prog{grid-area:prog;display:flex;align-items:center;gap:10px}
.kc-bar{flex:1;display:flex;gap:3px}
.kc-bar i{flex:1;height:10px;border:2px solid var(--ink);background:var(--wh);transition:background .2s}
.kc-bar i.on{background:var(--ye)}
.kc-pt{white-space:nowrap;color:var(--ink-3)}
.kc-pt b{color:var(--ink)}
.kc-body{grid-area:body;display:flex;align-items:center;gap:10px;min-width:0;transition:opacity .15s}
@media (max-width:399px){.kc-glyph{display:none}}
.kc-place{display:grid;gap:2px}
.kc-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.kc-code{font:800 22px/1 var(--disp);letter-spacing:-.02em;white-space:nowrap} /* Platz „R01-2“ nie am Bindestrich trennen */
.kc-item{display:flex;align-items:center;gap:8px;min-width:0}
.kc-glyph{width:28px;height:28px;flex:none}
.kc-glyph .g{display:none;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round}
.kc[data-g="0"] .g0,.kc[data-g="1"] .g1,.kc[data-g="2"] .g2{display:inline}
.kc-qty{display:grid;gap:2px}
.kc-q{font:800 22px/1 var(--disp)}
.kc-pips{display:flex;gap:4px;flex:none}
.kc-pips i{width:11px;height:11px;border:2px solid var(--ink);background:transparent;transition:background .12s}
.kc-pips i.on{background:var(--ink)}
.kc-pips i.x{display:none}
.kc-scan{grid-area:scan;position:relative;width:70px;height:40px;background:#fff;border:2px solid var(--ink);padding:4px 6px;overflow:hidden}
.kc-scan svg{width:100%;height:100%;fill:var(--ink)}
.kc-laser{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--or);box-shadow:0 0 8px 2px rgba(232,100,27,.85);opacity:0}
.kc-acts{grid-area:acts;display:flex;gap:6px}
.kc-btn{flex:1;text-align:center;padding:7px 4px;border:2px solid var(--ink);text-transform:uppercase;letter-spacing:.04em;font-size:11px;white-space:nowrap;transition:background .12s,color .12s,transform .12s}
.kc-ok{background:var(--ink);color:var(--ye)}
.kc-skip{background:var(--wh)}
.kc-btn.is-press{transform:translate(2px,2px)}
.kc-ok.is-press{background:var(--ye);color:var(--ink)}
.kc-skip.is-press{background:var(--bl);color:#fff}
.kc-list{display:none;list-style:none;margin:0;padding:0;grid-area:list}
.kc-list li{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:8px;padding:6px 0;border-top:2px solid var(--ink)}
.kc-list i{width:14px;height:14px;border:2px solid var(--ink)}
.kc-list li.is-done i{background:var(--ink)}
.kc-list li.is-on i{background:var(--ye)}
.kc-list li.is-skip i{border-style:dashed;border-color:var(--bl)}
.kc-list span{font-size:13px}
.kc-list em{font-style:normal;font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.kc-list li.is-skip em{color:var(--bl-d)}

/* Schritte: eine Bodenlinie mit fünf Stationen */
.steps{--sm:70svh;--hold:34svh;list-style:none;margin:0;padding:0 var(--gut);position:relative}
.steps::before,.steps::after{content:"";position:absolute;left:calc(var(--gut) + 15px);top:0;bottom:var(--hold);width:6px}
.steps::before{background:repeating-linear-gradient(180deg,var(--line) 0 12px,transparent 12px 20px)}
.steps::after{background:var(--ye);box-shadow:inset 0 0 0 1.5px var(--ink);transform-origin:0 0;transform:scaleY(var(--rp,1))}
.step{--c:var(--ye);--ct:var(--ink);min-height:var(--sm);padding:4svh 0;max-width:680px}
.step:nth-child(2){--c:var(--bl);--ct:#fff}
.step:nth-child(3){--c:var(--or);--ct:var(--ink)}
.step:nth-child(4){--c:var(--ink);--ct:var(--ye)}
.step:nth-child(5){--c:var(--wh);--ct:var(--ink)}
.step:last-child{min-height:calc(var(--sm) + var(--hold))}
.step-in{position:relative;padding-left:58px}
.step-mark{position:absolute;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;background:var(--ink);color:var(--ye);border:2px solid var(--ink);font:800 14px/1 var(--disp);z-index:1;transition:background .2s,color .2s,box-shadow .2s}
.step-mark svg{display:none;width:20px;height:20px}
.step-mark path{fill:none;stroke:var(--ye);stroke-width:3;stroke-linecap:square}
.step.is-on .step-mark{background:var(--ye);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.step.is-past .step-mark b{display:none}
.step.is-past .step-mark svg{display:block}
.step-dim{display:inline-block;margin-top:3px;padding:5px 9px;background:var(--c);color:var(--ct);border:2px solid var(--ink);font:500 13px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.step h3{font:600 clamp(1.3rem,1.7vw,1.6rem)/1.22 var(--sans);letter-spacing:-.005em;margin:.55em 0 .45em}
.step p:not(.step-dim){text-wrap:pretty;color:var(--ink-2);font-size:clamp(1.0625rem,1.1vw,1.1875rem);line-height:1.58;max-width:34em}
.legend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--ink-2);font-size:17px}
.legend li{display:flex;align-items:center;gap:10px}
.legend i{width:18px;height:18px;border:2px solid var(--ink)}
.lg-ok{background:var(--ink)}
.legend .lg-skip{border-style:dashed;border-color:var(--bl);background:var(--wh)}
@media (max-width:1279px){.steps.has-sh .step:not(.no-stick) .step-in{position:sticky;top:calc(var(--sh) + 6px)}}
@media (max-width:699px){.step h3{font-size:1.25rem}.step p:not(.step-dim){font-size:1.0625rem;line-height:1.55}}

/* Tablet und schmale Desktops: Plan und Schild nebeneinander über den Schritten */
@media (min-width:700px){
  .stage{grid-template-columns:minmax(0,1fr) 290px;align-items:center;gap:24px}
  .plan{max-height:44svh}
  .kc{width:290px;gap:10px;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body" "scan" "acts" "prog" "list"}
  .kc-body{flex-direction:column;align-items:stretch;gap:10px}
  .kc-code{font-size:42px}
  .kc-item{gap:12px;border-top:2px solid var(--ink);padding-top:10px}
  .kc-glyph{width:40px;height:40px}
  .kc-q{font-size:34px}
  .kc-pips{margin-left:auto}
  .kc-pips i{width:14px;height:14px}
  .kc-scan{width:auto;height:46px}
  .kc-btn{font-size:12px;padding:9px 4px}
  .kc-list{display:block}
  .steps{--sm:76svh}
}
@media (min-width:700px) and (max-height:860px){.kc-list{display:none}}

/* Breite Bildschirme: Schritte links, Halle rechts mitlaufend */
@media (min-width:1280px){
  .walk{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,4vw,80px);max-width:1680px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
  .walk-head{grid-column:1;grid-row:1;padding:0}
  .steps{--sm:78vh;--hold:58vh;grid-column:1;grid-row:2;padding:0;margin-top:6vh}
  .steps::before,.steps::after{left:15px;top:9vh;bottom:calc(9vh + var(--hold))}
  .stage{grid-column:2;grid-row:1/3;align-self:start;height:100vh;margin:0;padding:6vh 0;grid-template-columns:minmax(0,1fr) 300px;align-content:center;background:none}
  .plan{max-height:74vh}
  .kc{width:300px;margin-left:-40px;position:relative}
  .step{display:flex;flex-direction:column;justify-content:center;padding:0}
  .step:last-child{padding-bottom:var(--hold)}
  .step-in{padding-left:64px}
}
@media (min-width:1280px) and (max-height:860px){.kc-list{display:none}}
@media (min-width:1280px) and (min-height:861px){.kc-list{display:block}}

/* Ansicht */
.view{display:grid;gap:clamp(28px,5vw,72px);align-items:center;max-width:1680px;margin:0 auto;padding:clamp(72px,14vh,160px) var(--gut)}
.view-fig .fig-link{overflow:hidden}
.view-img{display:block}
.view-laser{position:absolute;left:0;right:0;top:0;height:4px;background:var(--or);box-shadow:0 0 18px 4px rgba(232,100,27,.7);opacity:0;pointer-events:none}
@media (min-width:900px){
  .view{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .view-fig{justify-self:end;width:min(100%,520px)}
}

/* Im Detail: drei Regalfelder an einem Gang, ein Kommissionierer läuft sie ab */
.aisle{position:relative;max-width:1680px;margin:0 auto;padding:clamp(72px,12vh,140px) var(--gut) clamp(48px,8vh,96px)}
.aisle::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:12px;background:var(--haz);border-block:2px solid var(--ink)}
.aisle-head{max-width:820px}
.bays{position:relative;display:grid;gap:clamp(40px,7vw,64px);margin-top:clamp(32px,5vh,56px)}
.bay{position:relative;padding:0 28px;min-width:0}
.bay::before,.bay::after{top:-12px;bottom:-10px}
.bay::before{left:0}.bay::after{right:0}
.bay-beam{margin:0 -16px 20px}
.bay-foot{margin:26px -16px 0}
.bay-svg{width:calc(100% + 24px);max-width:none;height:auto;margin:0 -12px 22px}
.bay h3{font:600 clamp(1.3rem,1.2vw + .9rem,1.6rem)/1.22 var(--sans);letter-spacing:-.005em;margin:0 0 .5em}
.bay p{text-wrap:pretty;color:var(--ink-2);font-size:clamp(1.0625rem,.3vw + .98rem,1.15rem);line-height:1.6;max-width:36em}
.aisle-lane{display:none}
@media (min-width:700px) and (max-width:1099px){
  .bay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,44px);padding:0 32px}
  .bay-beam{grid-column:1/-1}
  .bay-svg{grid-column:1;grid-row:2/4;width:100%;margin:4px 0 0}
  .bay h3{grid-column:2;grid-row:2}
  .bay p{grid-column:2;grid-row:3}
}
@media (min-width:1100px){
  .bays{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .bay{display:flex;flex-direction:column;padding:0 32px}
  .bay-svg{width:100%;max-width:440px;margin:0 auto 22px}
  .bay p{flex:1}
  .bay:not(:last-of-type)::after{display:none}
  .aisle-lane{display:block;grid-column:1/-1;position:relative;height:40px;margin-top:6px}
  .aisle-lane::before{content:"";position:absolute;left:0;right:0;top:15px;height:10px;background:var(--ye);border-block:2px solid var(--ink)}
  .aisle-pk{position:absolute;top:20px;left:83.333%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--ink);border:3px solid var(--ye);box-shadow:0 0 0 7px rgba(232,100,27,.38)}
}
/* Szene 1: Auftragsautomatik */
.s-lu{fill:none;stroke:var(--ink);stroke-width:10;stroke-linecap:round}
.s-l{fill:none;stroke:var(--ye);stroke-width:5;stroke-linecap:round}
.s-post{fill:none;stroke:var(--ink);stroke-width:3}
.s-box{fill:var(--wh);stroke:var(--ink);stroke-width:2.5;transition:fill .2s}
.s-box.on{fill:var(--ye)}
.s-chk{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:square;stroke-dasharray:1}
.s-lab{font:500 12px var(--mono);fill:var(--ink-2);text-anchor:middle}
.s-tok rect{fill:#d9b98a;stroke:var(--ink);stroke-width:2}
.s-tok path{fill:none;stroke:var(--ink);stroke-width:2}
.s-slot{fill:var(--ink)}
.s-sh{fill:var(--ink)}
.s-pg{fill:var(--wh);stroke:var(--ink);stroke-width:2}
.s-main .s-pg{fill:var(--ye)}
.s-tab{fill:var(--ink)}
.s-tab-b{fill:var(--bl)}
.s-tab-o{fill:var(--or)}
.s-st{font:500 12px var(--mono);fill:var(--ink)}
/* Szene 2: Karte aus Daten */
.d-floor{stroke-width:2.5}
.d-pal{fill:#ece8df;stroke:#8f8a80;stroke-width:1}
.d-hot{fill:var(--ye);stroke:var(--ink);stroke-width:2}
.d-ghost{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:6 4}
.d-diml,.d-tick{fill:none;stroke:var(--ink);stroke-width:2}
.d-arr{fill:var(--ink)}
.d-ru{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.d-r{fill:none;stroke:var(--ye);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.d-disc{fill:var(--ink);stroke:var(--wh);stroke-width:2}
.d-ring{fill:none;stroke:var(--ink);stroke-width:2;opacity:0}
.d-num{font:800 11px var(--disp);fill:var(--ye);text-anchor:middle}
/* Szene 3: Buchung und Label-Sperre */
.p-bsh,.p-bhd{fill:var(--ink)}
.p-bpl{fill:var(--wh);stroke:var(--ink);stroke-width:2.5}
.p-bht{font:500 12px var(--mono);fill:var(--ye);letter-spacing:.04em}
.p-ob{fill:var(--wh);stroke:var(--bl);stroke-width:2;stroke-dasharray:5 3}
.p-ot{font:500 14px var(--mono);fill:var(--bl-d);text-anchor:middle}
.p-db{fill:var(--ink)}
.p-dt{font:500 14px var(--mono);fill:var(--ye)}
.p-dc{fill:none;stroke:var(--ye);stroke-width:3;stroke-linecap:square;stroke-dasharray:1}
.p-wire{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:3 3}
.p-pulse{fill:var(--or);stroke:var(--ink);stroke-width:1.5}
.p-body{fill:var(--ink)}
.p-win{fill:#2c2b28;stroke:#55524c;stroke-width:1.5}
.p-lock,.p-free{font:500 13px var(--mono);text-anchor:middle}
.p-lock{fill:var(--or)}
.p-free{fill:var(--ye)}
.p-lb{fill:#fff;stroke:var(--ink);stroke-width:2}
.p-ln{fill:none;stroke:#8f8a80;stroke-width:3}
.p-bc{fill:var(--ink)}
.p-slot{fill:#000;stroke:#55524c;stroke-width:1}
.p-table{fill:none;stroke:var(--ink);stroke-width:4}
.p-post{fill:var(--ink)}
.p-armr{fill:url(#kHaz);stroke:var(--ink);stroke-width:2}
.p-hub{fill:var(--ink);stroke:var(--ye);stroke-width:3}

/* Zusammenspiel: Hallenplan mit den Nachbarwerkzeugen */
.net{max-width:1680px;margin:0 auto;padding:clamp(72px,12vh,140px) var(--gut) clamp(48px,8vh,96px)}
.net-head{max-width:820px}
.net-grid{display:grid;gap:clamp(32px,4vw,64px);align-items:start;margin-top:clamp(28px,4vh,48px)}
.net-svg{width:100%;max-width:560px;height:auto}
@media (min-width:1000px){.net-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}.net-svg{max-width:680px}}
.n-floor{fill:var(--floor);stroke:var(--ink);stroke-width:3}
.n-joint{fill:none;stroke:#bdb9b0;stroke-width:1}
.n-lu{fill:none;stroke:var(--ink);stroke-width:11;stroke-linejoin:round}
.n-l{fill:none;stroke:var(--ye);stroke-width:6;stroke-linejoin:round;transition:stroke .2s}
.n-ar{fill:var(--ink)}
.n-zs{fill:var(--ink)}
.n-zb{fill:var(--wh);stroke:var(--ink);stroke-width:2.5;transition:fill .2s}
.n-zt{font:800 20px var(--disp);fill:var(--ink);text-anchor:middle;letter-spacing:-.02em;transition:fill .2s}
.n-me .n-zb{fill:var(--ye);stroke-width:3}
.n-z{transition:opacity .2s}
.net:has(a[data-z="b04"]:is(:hover,:focus-visible)) .n-z-b04 .n-zb,.net:has(a[data-z="b01"]:is(:hover,:focus-visible)) .n-z-b01 .n-zb,
.net:has(a[data-z="b07"]:is(:hover,:focus-visible)) .n-z-b07 .n-zb,.net:has(a[data-z="c03"]:is(:hover,:focus-visible)) .n-z-c03 .n-zb{fill:var(--ink)}
.net:has(a[data-z="b04"]:is(:hover,:focus-visible)) .n-z-b04 .n-zt,.net:has(a[data-z="b01"]:is(:hover,:focus-visible)) .n-z-b01 .n-zt,
.net:has(a[data-z="b07"]:is(:hover,:focus-visible)) .n-z-b07 .n-zt,.net:has(a[data-z="c03"]:is(:hover,:focus-visible)) .n-z-c03 .n-zt{fill:var(--ye)}
.net:has(a[data-z="b04"]:is(:hover,:focus-visible)) .n-ln-b04 .n-l,.net:has(a[data-z="b01"]:is(:hover,:focus-visible)) .n-ln-b01 .n-l,
.net:has(a[data-z="b07"]:is(:hover,:focus-visible)) .n-ln-b07 .n-l,.net:has(a[data-z="c03"]:is(:hover,:focus-visible)) .n-ln-c03 .n-l{stroke:var(--or)}
.net-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.net-list a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;padding:16px 18px 18px;background:var(--wh);border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.net-list a:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--or)}
.net-code{grid-row:1/3;align-self:start;min-width:66px;text-align:center;padding:7px 8px 6px;background:var(--ink);color:var(--ye);font:800 15px/1 var(--disp);letter-spacing:-.01em}
.net-name{font:600 1.25rem/1.25 var(--sans)}
.net-name span{display:inline-block;transition:transform .15s}
.net-list a:hover .net-name span{transform:translateX(4px)}
.net-txt{text-wrap:pretty;grid-column:2;color:var(--ink-2);font-size:1.0625rem;line-height:1.5}
@media (max-width:399px){.net-list a{grid-template-columns:minmax(0,1fr)}.net-code{grid-row:auto;justify-self:start}.net-txt{grid-column:1}}

/* Technik & Rolle: Fachlastschild mit Prüfplakette */
.tech{max-width:1680px;margin:0 auto;padding:clamp(72px,12vh,140px) var(--gut) clamp(40px,6vh,80px);overflow-x:clip}
.tech-head{max-width:820px}
.plate{position:relative;max-width:1060px;margin-top:clamp(40px,6vh,64px);background:var(--wh);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:0 0 14px}
.plate-head{background:var(--ink);color:var(--ye);font:500 13px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:13px 40px}
.plate-list{margin:0;padding:6px 26px 8px}
.plate-list>div{display:grid;gap:2px 22px;padding:13px 0;border-top:2px solid var(--ink)}
.plate-list>div:first-child{border-top:0}
.plate-list dt{font:500 13px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.plate-list dd{margin:0;font-size:clamp(1.0625rem,.3vw + .98rem,1.15rem);line-height:1.5}
@media (min-width:700px){.plate-list>div{grid-template-columns:132px minmax(0,1fr);align-items:baseline}}
@media (min-width:1100px){.plate-list{display:grid;grid-template-columns:1fr 1fr;column-gap:44px}.plate-list>div:nth-child(2){border-top:0}}
.screw{position:absolute;z-index:1;width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);background:linear-gradient(var(--ink),var(--ink)) center/9px 2px no-repeat,#bdb9b0}
.sc-1{left:12px;top:12px}.sc-2{right:12px;top:12px}.sc-3{left:12px;bottom:12px}.sc-4{right:12px;bottom:12px}
.plakette{position:absolute;right:26px;top:-48px;width:84px;height:84px;transform:rotate(-12deg)}
@media (max-width:519px){.plakette{width:64px;height:64px;right:14px;top:-40px}.plate-head{padding-right:88px}}
.pk-o{fill:var(--ye);stroke:var(--ink);stroke-width:3}
.pk-t{fill:none;stroke:var(--ink);stroke-width:2.5}
.pk-i{fill:var(--wh);stroke:var(--ink);stroke-width:2}
.pk-c{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:square}

/* Abschluss: drei Bodenschilder */
.end{position:relative;max-width:1680px;margin:0 auto;padding:clamp(64px,14vh,160px) var(--gut) clamp(56px,10vh,120px);display:grid;gap:clamp(36px,5vw,56px)}
.end h2{display:flex;flex-wrap:wrap;gap:.28em .3em;font:800 clamp(1.9rem,6.6vw,6rem)/1.1 var(--disp);letter-spacing:-.035em}
.end h2 span{padding:.08em .24em .12em;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.end .w1{background:var(--ye)}.end .w2{background:var(--bl);color:#fff}.end .w3{background:var(--or)}
.end-acts{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.cta{display:inline-flex;align-items:center;gap:16px;min-height:56px;padding:14px 24px;background:var(--ink);color:var(--ye);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--or);font-weight:500;font-size:18px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.cta span{transition:transform .15s}
.cta:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--or)}
.cta:hover span{transform:translateX(4px)}
.ghost{font-weight:500;font-size:17px;text-underline-offset:5px;padding:10px 0}

/* Weitere Projekte: Gangschilder, die an Ketten von der Decke hängen */
.more{max-width:1680px;margin:0 auto;padding:clamp(24px,5vh,64px) var(--gut) clamp(64px,10vh,120px);overflow-x:clip}
.more h2{font:800 clamp(1.4rem,2.6vw,2.2rem)/1.1 var(--disp);letter-spacing:-.03em}
.signs{position:relative;display:grid;gap:30px;margin-top:28px;padding-top:50px}
.signs::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:var(--or);border-bottom:3px solid var(--or-d)}
.sign::before,.sign::after{content:"";position:absolute;top:-39px;width:4px;height:36px;background:repeating-linear-gradient(180deg,var(--ink) 0 7px,transparent 7px 10px)}
.sign::before{left:24%}.sign::after{right:24%}
.sign+.sign::before,.sign+.sign::after{top:-33px;height:30px}
.sign{position:relative;display:grid;align-content:start;gap:4px;padding:20px 22px 22px;background:var(--ink);color:var(--wh);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--or);text-decoration:none;transform-origin:50% -46px;transition:box-shadow .15s}
.sign:hover{box-shadow:9px 9px 0 var(--or)}
.sign-dir{font:500 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ye)}
.sign-code{display:flex;align-items:center;gap:.28em;font:800 clamp(2.2rem,4.4vw,3.6rem)/1.05 var(--disp);letter-spacing:-.035em;color:var(--ye);margin-top:6px}
.sign-arr{width:.8em;height:.64em;flex:none;fill:var(--ye);transition:transform .15s}
.sign-arr-r{transform:scaleX(-1)}
.sign-prev:hover .sign-arr{transform:translateX(-6px)}
.sign-next:hover .sign-arr{transform:scaleX(-1) translateX(-6px)}
.sign-name{font:600 1.35rem/1.2 var(--sans)}
.sign-hook{margin-top:4px;color:#dcd9d2;font-size:1.0625rem;line-height:1.45}
.all{display:inline-flex;align-items:center;gap:12px;margin-top:36px;padding:10px 0;font-weight:500;font-size:17px;text-underline-offset:5px}
.all span{transition:transform .15s}
.all:hover span{transform:translateX(4px)}
@media (min-width:800px){
  .signs{grid-template-columns:1fr 1fr;gap:28px;margin-top:40px;padding-top:58px}
  .sign::before,.sign::after,.sign+.sign::before,.sign+.sign::after{top:-47px;height:44px}
  .sign-next{justify-items:end;text-align:right}
  .sign-next .sign-dir{justify-content:flex-end}
}

.foot{max-width:1680px;margin:0 auto;padding:30px var(--gut) 40px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;font-size:16px;color:var(--ink-2);border-top:10px solid;border-image:var(--haz) 10}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{color:var(--ink);text-underline-offset:4px;padding:6px 0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Druck ----------
   Papier zeigt die Halle und alle Szenen im Endbild (js/projekt-kommissionierung.js setzt sie beim Drucken dorthin und
   danach zurück). Träger, Stützen, Bodenlinien und Schilder sind die Welt und werden mitgedruckt, der Hallenboden nicht.
   Große schwarze Flächen mit heller Schrift (Fachlastschild-Kopf, Gangschilder) werden hell mit dunkler Schrift.
   Halle und Schritte stehen statt angepinnt untereinander; Knöpfe, Fortschrittslinie und Sprunglinks entfallen. */
@page{margin:14mm 12mm}
@media print{
  /* Bildschirmmaße wirken auf Papier groß: alles etwas kleiner, wie bei Start und Profil */
  body{background:#fff;zoom:.8}
  main,.foot{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .skip,.pbar,.back,.to-walk,.end-acts,.all{display:none}
  h1,h2,h3,.kick,.step-dim,.walk-head,.aisle-head,.net-head,.tech-head{break-after:avoid}
  .walk-head,.aisle-head,.net-head,.tech-head,.hero-fig,.sit-fig,.stage,.step,.view-fig,.bay,.net-svg,.net-list li,.plate,.end h2,.sign{break-inside:avoid}
  .top{padding:0 0 6px}
  .hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:44px;padding:8px 0 24px}
  .hero-head{grid-column:1/-1}
  .hero-rack{grid-column:1;align-self:start;padding-top:12px}
  .hero-fig{grid-column:2;grid-row:2;justify-self:end;align-self:start;width:min(100%,320px)}
  .sit{grid-template-columns:minmax(0,7fr) minmax(0,5fr);padding:40px 0 30px}
  .sit-fig{width:min(100%,330px)}
  .sit::before,.aisle::before{left:0;right:0}
  /* Halle als festes Bild über den Schritten, die Schritte zweispaltig ohne Bodenlinie */
  .walk{padding:44px 0 10px}
  .walk-head{padding:0}
  .stage{position:static;margin-top:20px;padding:0 0 10px;background:none}
  .steps,.step:last-child{padding:0}
  .steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 36px;margin-top:22px}
  .steps::before,.steps::after{display:none}
  .step,.step:last-child{min-height:0;max-width:none}
  .steps.has-sh .step:not(.no-stick) .step-in{position:static}
  /* Nummern statt Haken: auf Papier zählt die Reihenfolge */
  .step.is-past .step-mark b{display:block}
  .step.is-past .step-mark svg{display:none}
  .view{grid-template-columns:minmax(0,6fr) minmax(0,5fr);padding:44px 0}
  .view-fig{justify-self:end;width:100%}
  .aisle,.net,.tech{padding:44px 0 30px}
  /* Stützen ragten über das Regalfeld hinaus und landeten beim Seitenanfang als Stummel auf der Vorseite */
  .bay::before,.bay::after{top:0}
  .net-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .net-list a{box-shadow:none}
  .plate{margin-top:28px;box-shadow:none}
  .plate-list>div{padding:10px 0}
  .plate-head{background:none;color:var(--ink);border-bottom:3px solid var(--ink)}
  .end{padding:44px 0 30px}
  .more{padding:20px 0 24px}
  .signs{grid-template-columns:1fr 1fr;gap:28px;margin-top:20px;padding-top:48px}
  .sign{background:var(--wh);color:var(--ink);box-shadow:none}
  .sign-dir,.sign-hook{color:var(--ink-2)}
  .sign-code{color:var(--ink)}
  .sign-arr{fill:var(--ink)}
  .sign-next{justify-items:end;text-align:right}
  .sign-next .sign-dir{justify-content:flex-end}
  .foot{padding:14px 0 0}
}