/* B-04 Lagerkarten-Editor – eigene Welt „Zeichenpapier mit Millimeterraster“:
   Creme, orangefarbenes Raster, Graphit, Korrekturrot; Instrument Serif + JetBrains Mono */

/* ---------- 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:#2c2c2c}
  ::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:'Instrument Serif';src:url('../fonts/instrument-serif-normal-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('../fonts/instrument-serif-normal-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:'Instrument Serif';src:url('../fonts/instrument-serif-italic-400-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('../fonts/instrument-serif-italic-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:JBM;src:url('../fonts/jetbrains-mono-normal-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-sans-normal-400_700-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-sans-normal-400_700-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}

:root{
  --paper:#f4f0e4;--sheet:#f8f5ec;--ink:#2c2c2c;--ink2:#5b564e;--red:#c8321e;--pencil:#8a8479;
  /* kleine Mono-Etiketten direkt auf dem Millimeterraster: dunkler, damit sie auch auf den Rasterlinien AA halten */
  --label:#3f3b35;
  --line:var(--ink);--hatch:var(--ink);
  --gut:clamp(16px,4vw,56px);--mod:clamp(16px,4vw,40px);
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;--mono:JBM,ui-monospace,Consolas,monospace;
  /* Fließtext: Instrument Sans; Mono bleibt für Etiketten, Maße, Codes und die Stückliste */
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  /* Millimeterpapier: 1 cm, 5 mm, 1 mm */
  --mm:linear-gradient(rgba(233,135,90,.36) 1px,transparent 1px),linear-gradient(90deg,rgba(233,135,90,.36) 1px,transparent 1px),linear-gradient(rgba(233,135,90,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(233,135,90,.17) 1px,transparent 1px),linear-gradient(rgba(233,135,90,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(233,135,90,.075) 1px,transparent 1px);
  --mms:40px 40px,40px 40px,20px 20px,20px 20px,4px 4px,4px 4px;
  color-scheme:light
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;overflow-x:clip;background-color:var(--paper);background-image:var(--mm);background-size:var(--mms);color:var(--ink);font:400 1rem/1.6 var(--mono);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{width:min(100% - 2*var(--gut),1520px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.kick{margin:0 0 14px;font:400 .8125rem/1.4 var(--mono);letter-spacing:.03em;color:var(--label)}
.skip{position:absolute;left:12px;top:-80px;z-index:50;padding:10px 16px;border:1.5px solid var(--ink);background:var(--sheet);color:var(--ink);font:400 .9375rem/1.2 var(--mono);text-decoration:none}
.skip:focus{top:12px}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.02;text-wrap:balance}

/* ---------- Kopf: Leitsatz auf dem Zeichenblatt, Lineal ----------
   Die Kopfzeile folgt der Grammatik aller Projektseiten (Freigabe 31.10.2026): links „← Profil“, ganz rechts der Name als
   Link zur Startseite (dieses Projekt hat keine Demo); volle Breite, jedes Ziel mindestens 44 px hoch. */
.hero{position:relative;display:flex;flex-direction:column;min-height:min(84svh,920px);overflow:clip}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(16px,3vw,40px)}
.back{display:inline-flex;flex:none;align-items:center;gap:.55em;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);background:var(--sheet);font:400 .9375rem/1 var(--mono);color:var(--ink);white-space:nowrap;text-decoration:none;transition:color .2s,border-color .2s}
.back:hover{color:var(--red);border-color:var(--red)}
.brand{display:inline-flex;flex:none;align-items:center;min-height:44px;margin:0 -.24em 0 0;font:400 .8125rem/1.3 var(--mono);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;color:var(--label);text-decoration:none} /* Name führt zur Startseite */
.brand:hover{color:var(--red)}
.ruler{position:relative;height:44px;overflow:hidden;border-block:1px solid rgba(44,44,44,.55);background:rgba(251,249,243,.8);box-shadow:0 8px 16px -12px rgba(44,44,44,.45)}
.ruler svg{position:absolute;left:0;top:0;display:block;width:1680px;height:44px}
.ruler path{fill:none;stroke:var(--ink);stroke-width:1}
.ruler text{font:400 11px var(--mono);fill:var(--ink);text-anchor:middle}
.hero-in{margin-block:auto;padding-block:clamp(36px,7vh,96px) clamp(104px,14vh,150px)}
.name{margin:0 0 clamp(12px,2.2vh,24px);font-style:italic;font-size:clamp(1.875rem,3.2vw,3rem);line-height:1.05}
.hook{margin:0;max-width:calc(100% - var(--mod));font-family:var(--serif);font-size:clamp(2.75rem,7vw,7.25rem);line-height:1.04;letter-spacing:-.015em}
.hook .l1,.hook .l2{display:block}
.hook .l1>span,.hook .l2>span{display:inline-block}
.hook .l2{padding-left:var(--mod)}
.hook em{font-style:italic;color:var(--red)}
/* Auswahlrahmen als Zeichenwerkzeug: das Lager wird gerade geändert */
.sw{--fs:1;position:relative;white-space:nowrap}
.sw::before,.sw::after{content:"";position:absolute;pointer-events:none;opacity:var(--fs);transform:scale(calc(1 + (1 - var(--fs))*.08))}
.sw::before{inset:.17em -.1em .08em;border:1.5px dashed var(--red)}
.sw::after{inset:calc(.17em - 4px) calc(-.1em - 4px) calc(.08em - 4px);background:linear-gradient(var(--red),var(--red)) 0 0/8px 8px no-repeat,linear-gradient(var(--red),var(--red)) 100% 0/8px 8px no-repeat,linear-gradient(var(--red),var(--red)) 0 100%/8px 8px no-repeat,linear-gradient(var(--red),var(--red)) 100% 100%/8px 8px no-repeat}
.cue{display:inline-flex;align-items:center;gap:.6em;min-height:44px;margin-top:clamp(26px,4.5vh,52px);font:400 1rem/1 var(--mono);color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--ink)}
.cue:hover{color:var(--red);border-color:var(--red)}
.compass{position:absolute;right:var(--gut);bottom:24px;width:clamp(150px,15vw,210px);height:auto;fill:none;stroke:var(--ink);stroke-width:1.5}
.compass text{fill:var(--ink);stroke:none;font:400 13px var(--mono)}
.compass .na{fill:var(--ink);stroke:none}

/* ---------- Plan: Zeichenblatt und Schritte ---------- */
.editor{position:relative;padding-block:clamp(48px,9vh,110px) clamp(40px,8vh,100px);border-top:1px dashed rgba(44,44,44,.55)}
.ed-head h2{font-size:clamp(2.375rem,4.2vw,4rem)}
.lead{margin:14px 0 0;max-width:30ch;font:400 clamp(1.375rem,1.8vw,1.75rem)/1.3 var(--serif)}
.stage{position:sticky;top:0;z-index:2;margin:26px calc(-1*var(--gut)) 0;padding:8px var(--gut) 12px;background-color:var(--paper);background-image:var(--mm);background-size:var(--mms);border-bottom:1px solid rgba(44,44,44,.4)}
.sheet{max-width:640px;margin-inline:auto;padding:7px;border:1px solid var(--ink);background-color:var(--sheet);background-image:var(--mm);background-size:var(--mms);box-shadow:0 1px 0 rgba(44,44,44,.2),0 20px 34px -26px rgba(44,44,44,.6)}
.sh-in{border:2px solid var(--ink)}
.sh-top,.sh-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px;background:var(--sheet);font:400 12px/1.2 var(--mono)}
.sh-top{height:34px;border-bottom:1px solid var(--ink)}
.sh-foot{height:30px;border-top:1px solid var(--ink);color:var(--ink2)}
.sh-t{color:var(--ink);white-space:nowrap}
.sh-st{display:inline-flex;align-items:center;gap:7px;color:var(--red)}
.sh-st i{width:8px;height:8px;border:1.5px solid var(--red);border-radius:50%;flex:none}
.sts{display:grid}
.st{grid-area:1/1;white-space:nowrap;opacity:0}
.st:last-child{opacity:1}
.sh-body{display:grid;grid-template-columns:minmax(0,1fr)}
.plan{position:relative;aspect-ratio:10/7}
.floor{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.hp{fill:none;stroke:var(--hatch)}
.hpf{fill:var(--hatch)}
.mk{fill:var(--line)}
.zone{opacity:.5}
.wall{fill:none;stroke:var(--line);stroke-width:10;stroke-linecap:square}
.wall.wi{stroke-width:6}
.doors path{fill:none;stroke:var(--line);stroke-width:1.3px;vector-effect:non-scaling-stroke}
.doors .gate{stroke-width:2.2px;stroke-dasharray:6 5}
.doors .tri{fill:var(--line);stroke:none}
.route{fill:none;stroke:var(--line);stroke-width:1.3px;stroke-dasharray:16 6 3 6;vector-effect:non-scaling-stroke}
.pillars rect{fill:var(--line)}
.fl-g rect{fill:var(--sheet);stroke:var(--line);stroke-width:1.2px;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.fl-g path{fill:none;stroke:var(--line);stroke-width:.8px;vector-effect:non-scaling-stroke}
.rb{fill:var(--sheet);stroke:var(--line);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.lbl,.rt text{font:400 19px var(--mono);fill:var(--ink);text-anchor:middle}
.rt text{stroke:var(--sheet);stroke-width:7px;stroke-linejoin:round;paint-order:stroke;letter-spacing:.03em}
.scale path,.north circle{fill:none;stroke:var(--line);stroke-width:1.3px;vector-effect:non-scaling-stroke}
.scale text{font:400 15px var(--mono);fill:var(--ink)}
.north path{fill:var(--line)}
.sel .fr{fill:none;stroke:var(--red);stroke-width:1.4px;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.sel .hd{fill:var(--sheet);stroke:var(--red);stroke-width:1.4px;vector-effect:non-scaling-stroke}
/* nur mit Bewegung (von JS erzeugt): Korrekturen, Maßlinien, Schnitt, Stift, Transparentpapier, Zeichenschiene */
.k-red{fill:none;stroke:var(--red);stroke-width:1.6px;vector-effect:non-scaling-stroke}
.k-dash{stroke-dasharray:6 4}
.k-cut{stroke-dasharray:18 6 3 6;stroke-width:1.8px}
.k-dim{fill:none;stroke:var(--ink);stroke-width:1px;vector-effect:non-scaling-stroke}
.k-tx{font:400 17px var(--mono);fill:var(--ink);text-anchor:middle;stroke:var(--sheet);stroke-width:6px;stroke-linejoin:round;paint-order:stroke}
.k-txr{font:400 20px var(--mono);fill:var(--red);text-anchor:middle;stroke:var(--sheet);stroke-width:6px;paint-order:stroke}
.trace{position:absolute;left:3%;top:5%;bottom:5%;width:47%;border:1px solid rgba(44,44,44,.3);background:rgba(253,251,246,.92);box-shadow:0 16px 28px -18px rgba(44,44,44,.55);opacity:0;pointer-events:none}
.trace::before{content:"";position:absolute;left:50%;top:-9px;width:64px;height:18px;margin-left:-32px;background:rgba(222,208,174,.85);transform:rotate(-3deg)}
.trace svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.tr-l{fill:none;stroke:var(--ink);stroke-width:1.6px;vector-effect:non-scaling-stroke}
.tr-t{font:400 15px var(--mono);fill:var(--ink)}
.tr-s{font:400 12.5px var(--mono);fill:var(--ink2)}
.tr-d,.tr-k{fill:none;stroke:var(--ink);stroke-width:1px;vector-effect:non-scaling-stroke}
.tr-r{font:400 13px var(--mono);fill:var(--red);text-anchor:middle}
.rule{position:absolute;left:-1.5%;right:-1.5%;top:0;height:6%;border-block:1px solid rgba(44,44,44,.55);background:repeating-linear-gradient(90deg,rgba(44,44,44,.7) 0 1px,transparent 1px 8px) 0 0/100% 40% no-repeat,rgba(251,249,243,.82);box-shadow:0 6px 12px -8px rgba(44,44,44,.5);opacity:0;pointer-events:none}

.tb{display:none}
.tb-h{padding:8px 10px;border-bottom:1px solid var(--ink);font-size:11px;letter-spacing:.06em;color:var(--ink2)}
.tb-d{margin:0}
.tb-d>div{--hl:0;display:grid;gap:2px;padding:6px 10px;border-bottom:1px solid rgba(44,44,44,.3);box-shadow:inset calc(var(--hl)*4px) 0 0 var(--red)}
.tb-d dt{font-size:10.5px;color:var(--ink2)}
.tb-d dd{position:relative;margin:0;font-size:13px;white-space:nowrap}
.old{position:absolute;right:0;top:0;color:var(--red);text-decoration:line-through}
.swh{display:inline-block;width:13px;height:13px;margin-right:7px;vertical-align:-2px;border:1px solid var(--ink)}
.swh i{display:block;width:100%;height:100%;background:repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 4px)}
.tb-rev{display:grid;gap:3px;padding:8px 10px;border-bottom:1px solid var(--ink)}
.tb-rh{margin-bottom:2px;font-size:10.5px;color:var(--ink2)}
.rv{font-size:11.5px}
.tb-ok{margin-top:auto;padding:8px 10px;font-size:12.5px;color:var(--red)}

.steps{margin:0;padding:0;list-style:none;border-left:1px solid rgba(44,44,44,.6);background:repeating-linear-gradient(180deg,rgba(44,44,44,.6) 0 1px,transparent 1px 40px) 0 0/12px 100% no-repeat,repeating-linear-gradient(180deg,rgba(44,44,44,.4) 0 1px,transparent 1px 8px) 0 0/6px 100% no-repeat}
.step{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:64svh;padding:28px 0 28px clamp(26px,2.6vw,40px)}
.step::before{content:"";position:absolute;left:-2px;top:20%;bottom:20%;width:4px;background:var(--red);transform:scaleY(0);transform-origin:50% 0;transition:transform .35s}
.step.on::before{transform:scaleY(1)}
.s-k{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:400 .875rem/1 var(--mono);color:var(--label);transition:color .3s}
.no{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border:1.5px solid currentColor;border-radius:50%;font-size:.8125rem}
.step h3{max-width:15ch;font-size:clamp(2.125rem,3.4vw,3.375rem);line-height:1.02;transition:color .3s}
.step:last-child h3{max-width:20ch}
.step.on .s-k{color:var(--red)}
.steps.has-on .step:not(.on) h3{color:#77716a}
.s-t{margin:18px 0 0;max-width:30em;font:400 1.0625rem/1.65 var(--sans);color:var(--ink);transition:color .3s}
.steps.has-on .step:not(.on) .s-t{color:var(--ink2)}

@media (max-width:1023px){.sheet{max-width:min(640px,calc((46svh - 84px)*1.43 + 20px))}}
@media (max-width:519px){.sh-t2{display:none}}
@media (max-width:379px){.sh-t{display:none}}
@media (max-width:600px){
  .lbl,.rt text{font-size:28px}
  .scale text{font-size:24px}
  .k-tx{font-size:24px}.k-txr{font-size:26px}
  .tr-t{font-size:20px}.tr-s{font-size:17px}.tr-r{font-size:17px}
}
@media (min-width:1024px){
  .ed-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);column-gap:clamp(32px,4.5vw,80px);align-items:start}
  .ed-head{grid-column:1;grid-row:1}
  .steps{grid-column:1;grid-row:2;margin-top:8svh}
  .stage{grid-column:2;grid-row:1/span 2;top:max(16px,calc(50svh - 255px));margin:0;padding:0;background:none;border:0}
  .sheet{max-width:none}
  .step{min-height:78svh}
}
@media (min-width:1200px){
  .sh-body{grid-template-columns:minmax(0,1fr) 208px}
  .tb{display:flex;flex-direction:column;border-left:1px solid var(--ink);background:var(--sheet);font:400 12px/1.35 var(--mono)}
}


/* ---------- Fuß: Schriftfeld ---------- */
.foot{padding-block:48px 56px}
.tbf{display:grid;border:2px solid var(--ink);background:var(--sheet)}
.tbf .c{display:grid;align-content:start;gap:6px;padding:14px 16px;border-bottom:1px solid var(--ink)}
.tbf .c:last-child{border-bottom:0}
.tbf .f{font:400 .75rem/1.2 var(--mono);letter-spacing:.06em;color:var(--ink2)}
.tbf .v{font:400 1.625rem/1.15 var(--serif)}
.tbf a{display:flex;align-items:center;min-height:44px;font:400 1rem/1.25 var(--mono);text-decoration:none;border-bottom:1px solid rgba(44,44,44,.3)}
.tbf a:last-child{border-bottom:0}
.tbf a:hover{color:var(--red)}
@media (min-width:900px){
  .tbf{grid-template-columns:1fr 1.3fr 1fr}
  .tbf .c{border-bottom:0;border-right:1px solid var(--ink)}
  .tbf .c:last-child,.tbf .c:nth-child(3){border-right:0}
}

/* ========== Ausbau: Ausgangslage, Einzelheiten, Zusammenspiel, Stückliste, Blattfolge ========== */
.dfs{position:absolute;width:0;height:0;overflow:hidden}
.sec{position:relative;padding-block:clamp(64px,11vh,130px);border-top:1px dashed rgba(44,44,44,.55)}
.sec h2{font-size:clamp(2.375rem,4.4vw,4.25rem)}
.tx h2{margin-bottom:22px}
.tx p:not([class]){margin:0 0 1em;max-width:31em;font:400 1.0625rem/1.65 var(--sans)}
.tx .ld{max-width:28ch;margin:0 0 22px;font:400 clamp(1.375rem,1.9vw,1.75rem)/1.3 var(--serif)}
figure{margin:0}
.ag-fig figcaption,.ein-fig figcaption{margin-top:18px;max-width:32em;font:400 1rem/1.55 var(--sans);color:var(--ink2)}

/* kleines Zeichenblatt mit Doppelrahmen (Außenlinie als Schatten, braucht keinen Platz) */
.mini{position:relative;margin:7px;border:2px solid var(--ink);background-color:var(--sheet);background-image:var(--mm);background-size:var(--mms);box-shadow:0 0 0 6px var(--sheet),0 0 0 7px var(--ink),0 22px 34px -24px rgba(44,44,44,.6)}
.mini-top,.mini-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px;background:var(--sheet);font:400 12px/1.2 var(--mono);white-space:nowrap}
.mini-top{height:34px;overflow:hidden;border-bottom:1px solid var(--ink)}
.mini-top>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:479px){.mini-top>span:last-child{display:none}}
.mini-foot{height:30px;border-top:1px solid var(--ink);color:var(--ink2)}
.mini-st{display:inline-flex;align-items:center;gap:7px;color:var(--red)}
.mini-st i{width:8px;height:8px;border:1.5px solid var(--red);border-radius:50%;flex:none}

/* Ausgangslage: Deckungsprobe Lager gegen Karte */
.ag-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.ag-svg{display:block;width:100%;height:auto}
.ag-w{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:square}
.ag-gate{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:6 5}
.ag-lg rect{stroke:var(--ink);stroke-width:1.6}
.ag-lg rect:not([fill]){fill:var(--sheet)}
.ag-lg .ag-fd,.ag-lg .ag-fo{stroke:none}
.ag-k rect{stroke:var(--pencil);stroke-width:1.6;stroke-dasharray:7 5}
.ag-k rect:not([fill]){fill:none}
.ag-c path{fill:none;stroke:var(--red);stroke-width:1.8;stroke-linejoin:round}
.ag-t path{fill:var(--sheet);stroke:var(--red);stroke-width:1.6;stroke-linejoin:round}
.ag-t text{font:400 13px var(--mono);fill:var(--red);text-anchor:middle}
@media (max-width:640px){.ag-tw{transform:scale(1.55);transform-box:fill-box;transform-origin:50% 50%}}

/* Im Detail: Einzelheiten mit Kreis */
.ein{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;margin-top:clamp(44px,8vh,96px)}
.ein h3{margin-bottom:18px;font-size:clamp(2rem,3.2vw,3rem)}
.tx .ein-k{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:400 .875rem/1.3 var(--mono);color:var(--label)}
.ein-c{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;border:1.5px solid var(--red);border-radius:50%;font:italic 400 1.25rem/1 var(--serif);color:var(--red)}
.ein-fig{position:relative}
.ein-call{position:absolute;z-index:2;left:-12px;top:-12px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--sheet);font:italic 400 1.5rem/1 var(--serif);color:var(--red)}
.ein-call svg{position:absolute;inset:0;width:100%;height:100%}
.ein-call circle{fill:none;stroke:var(--red);stroke-width:1.6}
.ein-call b{font-weight:400}
.ein-sh .mini-top{padding-left:46px}
/* Einzelheit A: Eintrag und Zeichnung */
.ea-body{display:grid;grid-template-columns:minmax(0,1fr)}
.ea-rec{display:grid;align-content:start;padding:6px 0;border-bottom:1px solid var(--ink);background:var(--sheet)}
.ea-row{--hl:0;display:flex;justify-content:space-between;gap:12px;padding:5px 12px;border-bottom:1px solid rgba(44,44,44,.22);font:400 13px/1.3 var(--mono);box-shadow:inset calc(var(--hl)*4px) 0 0 var(--red)}
.ea-row:last-child{border-bottom:0}
.ea-row span:first-child{color:var(--ink2)}
.ea-svg{display:block;width:100%;height:auto;padding:10px 8px 4px}
.ea-ax path{fill:none;stroke:var(--ink);stroke-width:1.2}
.ea-ax .ea-f{fill:var(--ink);stroke:none}
.ea-ax text{font:400 14px var(--mono);fill:var(--ink2)}
.ea-dx path,.ea-dy path,.ea-dl path,.ea-db path{fill:none;stroke:var(--ink);stroke-width:1}
.ea-dx text,.ea-dy text,.ea-dl text,.ea-db text{font:400 15px var(--mono);fill:var(--ink);text-anchor:middle}
.ea-o{fill:none;stroke:var(--ink);stroke-width:1.8}
.ea-p{fill:none;stroke:var(--red);stroke-width:1.6}
.ea-n{font:400 16px var(--mono);fill:var(--ink);text-anchor:middle;stroke:var(--sheet);stroke-width:5px;stroke-linejoin:round;paint-order:stroke}
.ea-s path{fill:none;stroke:var(--ink);stroke-width:1.6}
.ea-s text{font:400 13px var(--mono);fill:var(--ink2);text-anchor:middle}
.ea-s .ea-e{font-size:12px;text-anchor:start}
.ea-pk{stroke:var(--red);stroke-width:1.2}
@media (min-width:560px){
  .ea-body{grid-template-columns:minmax(150px,.75fr) minmax(0,1.25fr)}
  .ea-rec{border-bottom:0;border-right:1px solid var(--ink)}
}
/* Einzelheit B: Editor und Kommissionierung */
.eb-body{display:grid;grid-template-columns:minmax(0,1fr)}
.eb-pan{border-bottom:1px solid var(--ink)}
.eb-h{margin:0;padding:7px 10px;border-bottom:1px solid rgba(44,44,44,.3);background:var(--sheet);font:400 12px/1.2 var(--mono);color:var(--ink2)}
.eb-svg{display:block;width:100%;height:auto}
.eb-w{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:square}
.eb-s rect{fill:var(--sheet);stroke:var(--ink);stroke-width:1.4}
.eb-ed .eb-w,.eb-ed .eb-s rect{stroke:var(--pencil)}
.eb-gh rect{fill:none;stroke:var(--red);stroke-width:1.3;stroke-dasharray:5 3}
.eb-gh path,.eb-ar{fill:none;stroke:var(--red);stroke-width:1.3}
.eb-ah{fill:var(--red)}
.eb-sel rect{fill:none;stroke:var(--red);stroke-width:1.2;stroke-dasharray:5 3}
.eb-sel .eb-hd{fill:var(--sheet);stroke-dasharray:none}
.eb-lb text{font:400 11px var(--mono);fill:var(--ink2);text-anchor:middle}
.eb-lb .eb-ns{fill:var(--red);text-anchor:end}
.eb-rt{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:10 4 2 4}
.eb-st{fill:var(--ink)}
.eb-stop circle{fill:var(--red)}
.eb-stop .eb-ring{fill:none;stroke:var(--red);stroke-width:1.3}
.eb-mid{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;padding:9px 12px;border-bottom:1px solid var(--ink);background:var(--sheet);font:400 13px/1.35 var(--mono)}
.eb-k{color:var(--ink2)}
.eb-o{--so:1;position:relative;color:var(--red)}
.eb-o::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:var(--red);transform:scaleX(var(--so));transform-origin:0 50%}
@media (min-width:700px){
  .eb-body{grid-template-columns:1fr 1fr}
  .eb-pan:first-child{border-right:1px solid var(--ink)}
  .eb-mid{grid-column:1/-1;grid-row:2}
}
@media (min-width:1024px){
  .ag-grid,.ein{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,4.5vw,80px);align-items:center}
  .ein-2{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .ein-2 .tx{grid-column:2;grid-row:1}
  .ein-2 .ein-fig{grid-column:1;grid-row:1}
}

/* Zusammenspiel: drei Blätter, verbunden wie in einer Zusammenbauzeichnung */
.zs{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(36px,6vh,64px)}
.zs-c{position:relative;padding:14px 16px 18px;border:1.5px solid var(--ink);background:var(--sheet)}
.zs-here{outline:1.5px dashed var(--red);outline-offset:5px}
.zs-d{display:block;width:100%;height:auto;margin-bottom:14px;border:1px solid rgba(44,44,44,.4);background-color:var(--sheet);background-image:var(--mm);background-size:var(--mms)}
.zs-code{margin:0 0 6px;font:400 .8125rem/1.3 var(--mono);color:var(--ink2)}
.zs-here-l{margin-left:8px;color:var(--red)}
.zs-c h3{margin-bottom:10px;font-size:clamp(1.75rem,2.4vw,2.25rem)}
.zs-c h3 a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;transition:color .2s}
.zs-c h3 a::after{content:"";position:absolute;inset:0}
.zs-c h3 a:hover{color:var(--red)}
.zs-t{margin:0;font:400 1.0625rem/1.6 var(--sans)}
.zs-pw,.zs-w{fill:none;stroke:var(--pencil);stroke-width:3}
.zs-w{stroke:var(--ink)}
.zs-pr rect{fill:var(--sheet);stroke:var(--pencil);stroke-width:1.4}
.zs-r rect{fill:var(--sheet);stroke:var(--ink);stroke-width:1.4}
.zs-sel rect{fill:none;stroke:var(--red);stroke-width:1.2;stroke-dasharray:4 3}
.zs-sel .zs-hd{fill:var(--sheet);stroke-dasharray:none}
.zs-rt{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:9 4 2 4}
.zs-stop circle{fill:var(--red)}
.zs-stop .zs-ring{fill:none;stroke:var(--red);stroke-width:1.3}
.zs-box,.zs-lab{fill:var(--sheet);stroke:var(--ink);stroke-width:1.5}
.zs-lab{fill:#fffdf8}
.zs-bc{fill:none;stroke:var(--ink);stroke-width:1.6}
.zs-lock rect{fill:var(--sheet);stroke:var(--ink);stroke-width:1.5}
.zs-sh,.zs-kh{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.zs-x{--p:1;position:relative;min-height:76px}
.zs-l{position:absolute;left:30px;top:8px;bottom:8px;border-left:1.5px dashed var(--ink);clip-path:inset(0 -8px calc((1 - var(--p))*100%) -8px)}
.zs-l::after{content:"";position:absolute;left:-6.75px;bottom:-1px;border-inline:6px solid transparent;border-top:10px solid var(--ink)}
.zs-dot{position:absolute;left:25px;top:calc(4px + var(--p)*(100% - 19px));width:11px;height:11px;border-radius:50%;background:var(--red);opacity:0}
.zs-lt{position:absolute;left:52px;top:50%;transform:translateY(-50%);font:400 .875rem/1.3 var(--mono);color:var(--ink2)}
@media (min-width:1100px){
  .zs{--cy:calc(16px + ((min(100vw - 2*var(--gut),1520px) - 232px)/3 - 36px)/4);grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr) 116px minmax(0,1fr);align-items:stretch}
  .zs-x{min-height:0}
  .zs-l{left:10px;right:12px;top:var(--cy);bottom:auto;height:0;border-left:0;border-top:1.5px dashed var(--ink);clip-path:inset(-8px calc((1 - var(--p))*100%) -8px 0)}
  .zs-l::after{left:auto;right:-3px;bottom:auto;top:-6.75px;border-inline:0;border-block:6px solid transparent;border-left:10px solid var(--ink)}
  .zs-dot{left:calc(6px + var(--p)*(100% - 30px));top:calc(var(--cy) - 5px)}
  .zs-lt{left:6px;right:6px;top:calc(var(--cy) + 16px);transform:none;text-align:center}
}

/* Technik & Rolle: Stückliste */
.tk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.sl{width:100%;border-collapse:collapse;border:2px solid var(--ink);background:var(--sheet);font:400 1rem/1.55 var(--mono)}
.sl th,.sl td{padding:12px 14px;text-align:left;vertical-align:top}
.sl thead th{font-size:.8125rem;letter-spacing:.04em;color:var(--ink2);border-bottom:1px solid var(--ink)}
.sl tbody tr{--sl:1;background:linear-gradient(rgba(44,44,44,.4),rgba(44,44,44,.4)) 0 100%/calc(var(--sl)*100%) 1px no-repeat}
.sl tbody tr:last-child{background:none}
.sl tbody th{font-weight:400;color:var(--ink2);white-space:nowrap}
.sl td:first-child{width:3.2em;color:var(--ink2)}
@media (max-width:639px){
  .sl thead{display:none}
  .sl tbody,.sl tr{display:block}
  .sl tbody tr{padding:11px 14px}
  .sl th,.sl td{display:inline;padding:0}
  .sl td:first-child{margin-right:.6em}
  .sl td:last-child{display:block;margin-top:3px}
}
@media (min-width:1024px){
  .tk-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,4.5vw,80px);align-items:start}
}

/* Blattfolge: Weitere Projekte im Schriftfeld */
.wp{display:grid;grid-template-columns:minmax(0,1fr);grid-column:1/-1;border-top:2px solid var(--ink)}
.tbf .c:nth-child(3){border-bottom:0}
.tbf .wp-h{padding:14px 16px 4px}
.tbf .wp-a{display:grid;align-content:start;gap:6px;padding:12px 16px 16px;border-bottom:0;border-top:1px solid rgba(44,44,44,.3);text-decoration:none}
.tbf .wp-h+.wp-a{border-top:0}
.wp-k{display:flex;align-items:center;gap:10px;font:400 .8125rem/1.2 var(--mono);color:var(--ink2)}
.wp-n{font:400 clamp(1.5rem,2.2vw,2rem)/1.15 var(--serif)}
.wp-ar{width:46px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;transition:width .3s}
.wp-a:hover .wp-k,.wp-a:focus-visible .wp-k{color:var(--red)}
.wp-a:hover .wp-ar,.wp-a:focus-visible .wp-ar{width:70px}
@media (min-width:900px){
  .wp{grid-template-columns:1fr 1.3fr 1fr}
  .tbf .wp-h{grid-column:1/-1}
  .tbf .wp-a{border-top:0;border-right:1px solid var(--ink)}
  .tbf .wp-a:last-child{border-right:0;justify-items:end;text-align:right}
  .tbf .wp-all{justify-items:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){.wp-ar,.s-t,.zs-c h3 a{transition:none}}

/* ---------- Druck ----------
   Das Blatt bleibt weiß ohne Millimeterraster; Zeichenblätter, Schraffuren und Doppelrahmen der Abbildungen werden
   mitgedruckt (es sind Hintergründe und Schatten, die die Zeichnung tragen). Der Plan steht einmal über den Schritten
   statt angepinnt, mit Schriftfeld; Bildschirmhöhen, Rückweg und Sprungknöpfe entfallen. Gedruckt wird der
   ausgezogene Plan aus dem HTML, die Bewegung tauscht das Skript beim Drucken aus. */
@media print{
  html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff}
  body{zoom:.8}
  .skip,.back,.cue,.open{display:none}
  .hero{min-height:0}
  .hero-in{padding-block:40px 120px}
  .editor,.sec{padding-block:44px}
  .foot{padding-block:24px 0}
  .stage{position:static;margin-inline:0;padding:0 0 16px;background:none;border:0}
  .sheet{max-width:none;box-shadow:none}
  .sh-body{grid-template-columns:minmax(0,1fr) 208px}
  .tb{display:flex;flex-direction:column;border-left:1px solid var(--ink);background:var(--sheet);font:400 12px/1.35 var(--mono)}
  .step{min-height:0;padding-block:18px}
  /* was nach oben oder außen übersteht, stünde sonst am Fuß der Vorseite: Rahmen innen, Kreis und Klebestreifen im Kasten */
  .zs-here{outline-offset:-5px}
  .ein-call{top:0;left:0}
  .tbf .c{padding-block:10px}
  .tbf a{min-height:0;padding-block:6px}
  .tbf .wp-a{padding-block:8px 10px}
  h1,h2,h3,.kick,.s-k,.ein-k,.ed-head{break-after:avoid}
  h2,h3,.ed-head,.sheet,.step,.ag-fig,.ein-fig,.zs-c,.sl tr,.tbf{break-inside:avoid}
}