/* Projektseite B-02 Versand-Scanner – Welt „Lieferschein-Durchschreibesatz“:
   heller Ablagetisch, Lagen in Weiß, Kanariengelb und Rosa, Einträge in Kugelschreiber-Blau, roter Stempel.
   Ruhezustand (ohne JS / reduzierte Bewegung) = Endzustand jeder Szene. Bewegung setzt erst das Skript. */

/* ---------- 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:#1b1f2a}
  ::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:VsInter;src:url('../fonts/inter-normal-400_700-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:VsInter;src:url('../fonts/inter-normal-400_700-latin-ext.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0100-02FF,U+1E00-1EFF}
@font-face{font-family:VsMono;src:url('../fonts/jetbrains-mono-normal-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --desk:#ecebe6;--desk-2:#e2e0d9;--paper:#fff;
  --canary:#f7e98e;--rose:#f4c6cf;--pen:#2346a8;--stamp:#b3122a;--scan:#e3242b;
  --ink:#1b1f2a;--ink-2:#4c525d;--rule:rgba(27,31,42,.24);--rule-2:rgba(27,31,42,.12);
  --sans:VsInter,'Segoe UI',system-ui,sans-serif;--mono:VsMono,ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.22,.8,.24,1);--wrapw:min(1240px,100% - 32px);
  --lift:0 1px 1px rgba(27,31,42,.07),0 3px 8px -3px rgba(27,31,42,.14),0 26px 50px -30px rgba(27,31,42,.45);
  /* Leimkante oben am Blatt: grauer Streifen mit punktierter Abrisslinie */
  --glue:repeating-linear-gradient(90deg,rgba(27,31,42,.3) 0 2px,transparent 2px 5px) 0 18px/100% 2px no-repeat,linear-gradient(rgba(27,31,42,.045),rgba(27,31,42,.045)) 0 0/100% 18px no-repeat;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--ink);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--pen);outline-offset:4px;border-radius:3px}
p{margin:0}
h1,h2{margin:0;font-weight:700;letter-spacing:-.045em;line-height:.96;text-wrap:balance;
  text-shadow:calc(var(--g,0) * 6px) calc(var(--g,0) * 5px) 0 rgba(35,70,168,calc(var(--g,0) * .38))}
h1 i,h2 i,h3 i{font-style:normal;color:var(--stamp)}
h3{margin:0}
.vs-defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-80px;z-index:50;padding:10px 16px;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.vs-wrap{width:var(--wrapw);margin-inline:auto}
@media (min-width:700px){:root{--wrapw:min(1240px,100% - 96px)}}

/* ---------- Kopfleiste ----------
   Eine Grammatik auf allen 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. Das Fachkürzel steht in der
   Mitte und weicht am Handy (der Einstieg nennt es darunter). */
.vs-top{border-bottom:1px solid var(--rule)}
.vs-top-in{display:flex;align-items:center;gap:12px;min-height:70px;padding-inline:clamp(16px,3vw,40px)}
.vs-back{display:inline-flex;flex:none;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);font-weight:600;font-size:16px;white-space:nowrap;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.vs-back:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--pen)}
.vs-brand{display:inline-flex;flex:none;align-items:center;min-height:44px;margin-left:auto;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;text-decoration:underline 2px var(--pen);text-underline-offset:6px} /* Name führt zur Startseite, unterstrichen in Kuli-Blau */
.vs-brand:hover{color:var(--ink);text-decoration-color:var(--ink)}
.vs-code{flex:1 1 auto;text-align:center;font:400 13px/1 var(--mono);color:var(--ink-2);white-space:nowrap}
@media (max-width:559px){.vs-code-x{display:none}}
@media (max-width:399px){.vs-code{display:none}.vs-brand{letter-spacing:.12em}}

/* ---------- Einstieg ---------- */
.vs-hero{padding:clamp(40px,7vh,88px) 0 clamp(80px,11vh,130px)}
.vs-hero-grid{display:grid;gap:clamp(48px,6vw,100px);align-items:center}
@media (min-width:960px){.vs-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.vs-kicker{font:400 13px/1.4 var(--mono);color:var(--pen);margin-bottom:22px}
.vs-hero h1{font-size:clamp(46px,7vw,108px)}
.vs-claim{list-style:none;margin:clamp(28px,4vh,44px) 0 0;padding:0;max-width:30em;border-top:1.5px solid var(--ink)}
.vs-claim li{display:flex;align-items:baseline;gap:16px;padding:9px 0 10px;border-bottom:1px solid var(--rule);font-size:clamp(22px,2.4vw,34px);font-weight:600;letter-spacing:-.025em;line-height:1.2}
.vs-claim i{font-style:normal;color:var(--stamp)}
.vs-claim .vs-n{flex:none;width:2em;font:400 14px/1 var(--mono);color:var(--pen)}
.vs-lead{margin-top:clamp(24px,3.6vh,36px);max-width:33em;color:var(--ink-2);font-size:clamp(17px,1.35vw,19px)}
.vs-jump{display:inline-flex;align-items:center;gap:10px;margin-top:26px;min-height:44px;font-weight:600;font-size:17px;text-decoration:none;border-bottom:2px solid var(--pen)}
.vs-jump span{transition:transform .3s var(--ease)}
.vs-jump:hover span{transform:translateY(4px)}

/* Durchschreibesatz im Einstieg */
.vs-set{justify-self:center;width:min(100%,450px);padding:0 18px 74px}
.vs-set-in{position:relative;transform:rotate(-1.5deg)}
.vs-ply{border-radius:3px;box-shadow:var(--lift)}
.vs-ply--canary,.vs-ply--rose{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 18px 9px}
.vs-ply--canary{z-index:2;background:var(--canary);transform:translate(-14px,32px) rotate(-2.5deg)}
.vs-ply--rose{z-index:1;justify-content:flex-end;background:var(--rose);transform:translate(16px,64px) rotate(2.5deg)}
.vs-ply-tag{font:400 13px/1.2 var(--mono);color:var(--ink)}
.vs-ply--white{position:relative;z-index:3}
.vs-hero-bc{position:relative;display:block;width:68%;margin:8px 0 6px}
.vs-hero-bc .vs-bc{width:100%;height:42px}
.vs-hero-bc .vs-stroke{left:-8px;right:-8px;top:50%}
.vs-lines{display:block;height:44px;margin-top:4px;background:repeating-linear-gradient(transparent 0 21px,var(--rule-2) 21px 22px)}
.vs-lines--3{height:66px}

/* ---------- Formularbausteine ---------- */
.vs-sheet{--pad:clamp(16px,2.4vw,26px);position:relative;display:block;padding:0 var(--pad) var(--pad);border-radius:3px;background:var(--paper);box-shadow:var(--lift)}
.vs-sheet--canary{background:var(--canary)}
.vs-sheet--rose{background:var(--rose)}
.vs-glue{display:block;height:20px;margin:0 calc(-1 * var(--pad)) 16px;background:rgba(27,31,42,.045);border-bottom:2px dotted rgba(27,31,42,.3);border-radius:3px 3px 0 0}
.vs-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:9px;margin-bottom:14px;border-bottom:2px solid var(--ink)}
.vs-head b{font-size:19px;font-weight:700;line-height:1.2;letter-spacing:-.015em}
.vs-head em{font:400 13px/1 var(--mono);font-style:normal;color:var(--ink-2);white-space:nowrap}
.vs-fld{display:block;margin-top:-1px;padding:8px 11px 10px;border:1px solid var(--rule)}
.vs-fld small,.vs-lbl{display:block;font-size:12px;line-height:1.4;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.vs-lbl{margin:16px 0 7px}
.vs-type{display:block;font:400 17px/1.35 var(--mono);color:var(--pen)}
.vs-bc{fill:var(--ink)}
.vs-stroke{position:absolute;height:2px;border-radius:2px;background:var(--scan);box-shadow:0 0 7px rgba(227,36,43,.6);opacity:0;pointer-events:none;z-index:3}
.vs-box{position:relative;display:inline-block;flex:none;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:2px;background:var(--paper)}
.vs-box svg{position:absolute;left:-4px;top:-10px;width:34px;height:34px;max-width:none;color:var(--pen);overflow:visible;stroke-dasharray:40}
.vs-pen{width:30px;height:30px;color:var(--pen);overflow:visible;stroke-dasharray:40}
.vs-stamp{display:inline-block;padding:6px 12px;border:2.5px solid var(--stamp);border-radius:5px;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3.5px var(--stamp);color:var(--stamp);font:700 14px/1.15 var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:.9;mix-blend-mode:multiply;transform:rotate(-7deg);
  -webkit-mask-image:repeating-linear-gradient(118deg,#000 0 7px,rgba(0,0,0,.72) 7px 9px);mask-image:repeating-linear-gradient(118deg,#000 0 7px,rgba(0,0,0,.72) 7px 9px)}
/* Kugelschreiberstriche als SVG über einer Szene; im Ruhezustand durchgezogen */
.vs-wires{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
.vs-wires path,.vs-ring path,.vs-arw path{fill:none;stroke:var(--pen);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* kleine Etiketten und Blätter der Szenen */
.vs-tl{display:block;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.vs-mh{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:6px;margin-bottom:8px;border-bottom:1.5px solid var(--ink)}
.vs-mh b{font-size:14px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.vs-mh em{font:400 12px/1 var(--mono);font-style:normal;color:var(--ink-2);white-space:nowrap}
.vs-mh .vs-box,.vs-hit .vs-box,.vs-mconf .vs-box{width:18px;height:18px}
.vs-mh .vs-box svg,.vs-hit .vs-box svg{left:-3px;top:-8px;width:28px;height:28px}
.vs-dl{display:block;height:22px;margin-top:6px;background:repeating-linear-gradient(transparent 0 10px,var(--rule-2) 10px 11px)}

/* ---------- Akte ---------- */
.vs-act{position:relative;padding:clamp(88px,14vh,160px) 0}
.vs-act::before,.vs-outro::before,.vs-sec::before{content:"";position:absolute;top:0;left:50%;width:var(--wrapw);transform:translateX(-50%);height:2px;background:repeating-linear-gradient(90deg,var(--rule) 0 7px,transparent 7px 13px)}
.vs-act-grid{display:grid;gap:clamp(44px,5vw,88px);align-items:center}
@media (min-width:960px){
  .vs-act-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .vs-act--rev .vs-act-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .vs-act--rev .vs-act-text{order:2}
}
.vs-step{font:400 13px/1.3 var(--mono);color:var(--ink-2);margin-bottom:20px}
.vs-step b{font-weight:400;color:var(--pen)}
.vs-act h2{font-size:clamp(42px,5.8vw,88px);margin-bottom:clamp(28px,4vh,44px)}
.vs-feat{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;align-items:start;padding:20px 0 22px;border-top:1px solid var(--rule)}
.vs-feat:last-child{border-bottom:1px solid var(--rule)}
.vs-feat .vs-box{margin-top:5px}
.vs-feat-h{font-size:clamp(19px,1.6vw,23px);font-weight:500;line-height:1.38;letter-spacing:-.012em;max-width:24em}
.vs-feat-d{margin-top:10px;max-width:32em;font-size:17px;line-height:1.62;color:var(--ink-2)}
.vs-visual{margin:0 -12px;width:calc(100% + 24px);max-width:584px;padding:0 12px;justify-self:center;overflow-x:clip}
.vs-note{margin-top:16px;font:400 13px/1.4 var(--mono);color:var(--ink-2);text-align:center}

/* Akt 1: Scan auf dem Original */
.vs-zone{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:16px;padding:22px 12px;border:1.5px dashed var(--rule);border-radius:4px;overflow:hidden;
  background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(27,31,42,.03) 10px 20px)}
.vs-zone .vs-stroke{left:50%;top:50%;width:156px;margin-left:-78px}
.vs-label{position:relative;width:132px;padding:9px 10px 9px;border:1px solid var(--rule);border-radius:3px;background:var(--paper);box-shadow:0 10px 18px -12px rgba(27,31,42,.5)}
.vs-label-t{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.vs-label .vs-bc{width:100%;height:40px;margin-top:6px}
.vs-mx{width:54px;height:54px;margin:6px auto 0;fill:var(--ink)}
.vs-label--odd{transform:rotate(-3deg)}
.vs-log{border-top:2px solid var(--ink)}
.vs-log-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto 30px;align-items:center;gap:6px 12px;min-height:48px;padding:4px 0;border-bottom:1px solid var(--rule)}
.vs-log .vs-n,.vs-tab .vs-n{font:400 14px/1 var(--mono);color:var(--ink-2)}
.vs-log .vs-type{font-size:16px}
.vs-log-row--bad .vs-stamp{grid-column:3/5;justify-self:end;margin-right:4px}

/* Akt 2: gelber und rosa Durchschlag */
.vs-copies-in{padding:8px 10px 4px}
.vs-copy-a{z-index:2;transform:rotate(-1.2deg)}
.vs-copy-b{z-index:1;margin-top:20px;transform:rotate(.8deg)}
.vs-tab{border-top:1px solid var(--rule)}
.vs-tab-row{display:grid;grid-template-columns:34px 46px minmax(0,1fr) 72px;align-items:center;gap:10px;min-height:48px;padding:5px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.3;color:var(--ink-2)}
.vs-tab-row b{display:block;font-weight:600;color:var(--ink)}
.vs-tab-row--h{min-height:34px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.vs-tab-row>:last-child{justify-self:center}
.vs-tab .vs-type{font-size:16px}
.vs-sum{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.vs-count{font:400 16px/1.3 var(--mono);letter-spacing:0;text-transform:none;color:var(--pen)}

/* Akt 3: gefalteter Lieferschein */
.vs-doc{--ch:158px;max-width:500px;margin:0 auto;padding:6px 0 10px}
.vs-doc-in{position:relative;perspective:2400px;perspective-origin:50% 70%}
.vs-cover{--fold:0deg;position:relative;z-index:2;height:var(--ch);transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(var(--fold))}
.vs-face{--pad:clamp(16px,2.4vw,26px);position:absolute;inset:0;padding:0 var(--pad);background:var(--paper);-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:3px 3px 0 0;box-shadow:0 1px 1px rgba(27,31,42,.07),0 -10px 30px -24px rgba(27,31,42,.4)}
.vs-face--out{transform:rotateX(180deg);border-radius:0 0 3px 3px;display:flex;flex-direction:column;justify-content:center;gap:8px;background:linear-gradient(180deg,#fff,#f6f5f1)}
.vs-out-t{font-size:19px;font-weight:700;letter-spacing:-.015em}
.vs-face--out .vs-bc{width:52%;height:40px}
.vs-out-s{font:400 13px/1.2 var(--mono);color:var(--ink-2)}
.vs-base{--pad:clamp(16px,2.4vw,26px);position:relative;padding:0 var(--pad) var(--pad);background:var(--paper);border-top:1.5px dashed var(--rule);border-radius:0 0 3px 3px;box-shadow:var(--lift)}
.vs-base-fields{min-height:var(--ch);padding-top:16px}
.vs-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding-top:16px;margin-top:6px;border-top:2px solid var(--ink);font-size:16px;font-weight:600}
.vs-check{display:inline-flex;align-items:center;gap:10px}
.vs-stamp--l{margin:4px 2px 0 auto;font-size:clamp(15px,1.8vw,19px);transform:rotate(-9deg)}

/* ---------- Ausbau: gemeinsame Abschnitte ---------- */
.vs-sec{position:relative;padding:clamp(88px,13vh,150px) 0}
.vs-sec h2{font-size:clamp(38px,5.2vw,78px);margin-bottom:clamp(26px,3.8vh,42px)}
.vs-copy>p:not(.vs-step){max-width:34em;font-size:clamp(17px,1.25vw,19px);line-height:1.62}
.vs-copy>p:not(.vs-step)+p{margin-top:1em}
.vs-sec-head{max-width:46em;margin-bottom:clamp(36px,5vh,60px)}
.vs-sec-head h2{margin-bottom:0}

/* Ausgangslage: ein Code, drei Lieferungen im Stapel */
.vs-intro-grid{display:grid;gap:clamp(44px,5vw,88px);align-items:center}
@media (min-width:960px){.vs-intro-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.vs-tray-in{padding:12px 6px 0}
.vs-stage{position:relative;height:clamp(256px,24vw,334px)}
.vs-tray-arw{z-index:5}
.vs-stag{position:absolute;left:0;top:0;z-index:4;width:46%;padding:10px 12px 11px;border-radius:3px;background:var(--paper);box-shadow:var(--lift);transform:rotate(-2deg)}
.vs-stag-bc{position:relative;display:block;margin:7px 0 6px}
.vs-stag-bc .vs-bc{width:100%;height:clamp(28px,2.8vw,40px)}
.vs-stag-bc .vs-stroke{left:-6px;right:-6px;top:50%}
.vs-stag .vs-type{font-size:15px}
.vs-dset{position:absolute;top:47%;width:43%;transform-origin:50% 90%}
.vs-dset--a{left:3%;z-index:1;transform:rotate(-7deg)}
.vs-dset--b{left:28.5%;z-index:2;transform:rotate(-1.5deg)}
.vs-dset--c{left:54%;z-index:3;transform:translateY(-30%) rotate(3deg)}
.vs-dset-m{position:relative;display:block}
.vs-dp{position:absolute;inset:0;border-radius:3px;box-shadow:var(--lift)}
.vs-dp--c{background:var(--canary);transform:translate(4px,5px)}
.vs-dp--r{background:var(--rose);transform:translate(8px,10px)}
.vs-dset-f{position:relative;display:block;padding:24px 10px 10px;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(27,31,42,.3) 0 2px,transparent 2px 5px) 0 10px/100% 1.5px no-repeat,linear-gradient(rgba(27,31,42,.045),rgba(27,31,42,.045)) 0 0/100% 10px no-repeat,var(--paper)}
.vs-dset .vs-bc{width:80%;height:clamp(22px,2.2vw,30px)}
.vs-hit{display:flex;align-items:center;gap:8px;margin-top:8px}
.vs-hit .vs-type{font-size:14px;white-space:nowrap}
.vs-ring{position:absolute;left:-9px;top:-10px;width:calc(100% + 26px);height:calc(100% + 28px);max-width:none;overflow:visible;pointer-events:none}

/* Im Detail: drei Blätter eines Satzes, jedes mit eigener kleiner Szene */
.vs-rules-grid{display:grid;gap:clamp(30px,3.4vw,48px)}
@media (min-width:1100px){.vs-rules-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vs-rule{position:relative}
.vs-rule--1{z-index:3;--sheet:var(--paper);--tilt:-.8deg}
.vs-rule--2{z-index:2;--sheet:var(--canary);--tilt:.7deg}
.vs-rule--3{z-index:1;--sheet:var(--rose);--tilt:-.6deg}
.vs-rule-in{--pad:clamp(18px,2vw,26px);position:relative;isolation:isolate;height:100%;padding:34px var(--pad) var(--pad)}
.vs-rule-in::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:3px;box-shadow:var(--lift);background:var(--glue),var(--sheet);transform:rotate(var(--tilt))}
.vs-mini{margin-bottom:24px}
.vs-mstage{position:relative;height:220px}
.vs-rule-n{font:400 13px/1.3 var(--mono);color:var(--ink-2);margin-bottom:10px}
.vs-rule h3{margin-bottom:12px;font-size:clamp(22px,1.9vw,27px);font-weight:700;letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
.vs-rule-c>p:last-child{font-size:17px;line-height:1.6}
.vs-rules-note{margin-top:clamp(28px,4vh,40px)}
@media (min-width:700px) and (max-width:1099px){
  .vs-rule-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:32px;align-items:center}
  .vs-mini{margin-bottom:0}
}
/* Szene 1: Durchschläge liegen über dem Original */
.vs-mo{position:absolute}
.vs-mo-m{position:relative;display:block;min-height:100px;padding:12px 11px 11px;border-radius:3px;background:var(--paper);box-shadow:var(--lift)}
.vs-mo--orig{left:19%;top:4px;width:62%;z-index:1}
.vs-mo--orig .vs-mo-m{min-height:128px}
.vs-mo--cy{left:0;top:100px;width:52%;z-index:2;transform:rotate(-5deg)}
.vs-mo--rs{left:50%;top:116px;width:50%;z-index:3;transform:rotate(4deg)}
.vs-mo--cy .vs-mo-m{background:var(--canary)}
.vs-mo--rs .vs-mo-m{background:var(--rose)}
.vs-mf{display:block;padding:6px 8px 7px;border:1px solid var(--rule)}
.vs-mf small{display:block;font-size:12px;line-height:1.3;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.vs-mf .vs-type,.vs-mo--rs .vs-type{font-size:14px}
/* Szene 2 und 3: Etiketten, Inhalt, Lieferung */
.vs-tag2{position:absolute;padding:9px;border-radius:3px;background:var(--paper);box-shadow:0 10px 18px -12px rgba(27,31,42,.5),0 0 0 1px var(--rule-2)}
.vs-tag2 .vs-bc{width:100%;height:26px;margin-top:6px}
.vs-tag2--a{left:0;top:14px;width:42%}
.vs-tag2--b{left:0;top:130px;width:42%}
.vs-tag2--odd{left:2%;top:18px;width:40%;transform:rotate(-3deg)}
.vs-mx-w{position:relative;display:block;width:46px;margin:6px auto 0}
.vs-mx-w .vs-mx{width:46px;height:46px;margin:0}
.vs-mx-w .vs-stroke{left:-8px;right:-8px;top:50%}
.vs-msheet{position:absolute;padding:10px;border-radius:3px;background:var(--paper);box-shadow:var(--lift)}
.vs-msheet--in{left:57%;top:34px;width:43%}
.vs-msheet--lf{left:57%;top:154px;width:43%}
.vs-msheet--lf .vs-mh{margin-bottom:4px}
.vs-msheet--lf .vs-type{font-size:14px}
.vs-msheet--empty{left:47%;top:4px;width:53%}
.vs-msheet--shut{left:47%;top:132px;width:53%;background:linear-gradient(180deg,#fff,#f4f3ef)}
.vs-msheet--shut .vs-mh{margin-bottom:6px}
.vs-msheet--shut .vs-bc{width:72%;height:20px}
.vs-shut-s{display:block;margin-top:5px;font:400 12px/1.2 var(--mono);color:var(--ink-2)}
.vs-mli{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:3px 0;border-bottom:1px solid var(--rule-2);font-size:12px;line-height:1.35;font-weight:600;color:var(--ink-2)}
.vs-mli .vs-type{display:inline-block;font-size:14px;line-height:1}
.vs-mconf{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;font-weight:600;line-height:1.2}
.vs-mconf .vs-box{width:16px;height:16px}
.vs-mconf-t{position:relative;display:inline-block;color:var(--ink-2)}
.vs-strike{left:-3px;top:0;width:calc(100% + 6px)}
.vs-stamp--odd{position:absolute;left:0;top:126px;z-index:3;padding:4px 8px;font-size:12px;letter-spacing:.08em;transform:rotate(-8deg)}

/* Zusammenspiel: Verteiler */
.vs-net-grid{display:grid;gap:clamp(44px,5vw,80px);align-items:start}
@media (min-width:960px){.vs-net-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.vs-netfig{margin:clamp(30px,4vh,44px) 0 0;max-width:470px}
.vs-net-svg{width:100%;height:auto;overflow:visible}
.vs-n-paper{fill:var(--paper);stroke:rgba(27,31,42,.26);stroke-width:1}
.vs-n-canary{fill:var(--canary)}
.vs-n-rose{fill:var(--rose)}
.vs-n-glue{fill:none;stroke:rgba(27,31,42,.32);stroke-width:1.4;stroke-dasharray:2 3}
.vs-n-code{font:400 21px var(--mono);fill:var(--ink)}
.vs-n-bc{fill:var(--ink)}
.vs-n-lines path,.vs-n-tick{fill:none;stroke:var(--pen);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vs-n-lbls text{font:400 12.5px var(--mono);fill:var(--ink-2);text-anchor:end}
.vs-n-box{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
@media (max-width:519px){.vs-n-lbls{display:none}}
.vs-vt{width:100%;max-width:620px;justify-self:center}
.vs-vt .vs-head{margin-bottom:0}
.vs-vt-list{list-style:none;margin:0;padding:0}
.vs-vt-list li{border-bottom:1px solid var(--rule)}
.vs-vt-a{display:grid;grid-template-columns:24px minmax(0,1fr) 22px;gap:14px;align-items:start;padding:18px 6px 20px;border-radius:3px;color:var(--ink);text-decoration:none;transition:background-color .2s var(--ease)}
.vs-vt-a:hover{background:rgba(35,70,168,.06)}
.vs-vt-a .vs-box{margin-top:4px}
.vs-vt-code{font:400 13px/1 var(--mono);color:var(--pen)}
.vs-vt-t strong{font-size:clamp(19px,1.6vw,22px);font-weight:700;letter-spacing:-.015em;line-height:1.25}
.vs-vt-s{display:block;margin-top:6px;font-size:17px;line-height:1.55;color:var(--ink-2)}
.vs-vt-go{align-self:center;font-size:22px;line-height:1;color:var(--pen);transition:transform .25s var(--ease)}
.vs-vt-a:hover .vs-vt-go,.vs-vt-a:focus-visible .vs-vt-go{transform:translateX(4px)}

/* Technik & Rolle: Kopfdaten und Laufzettel */
.vs-tech-grid{display:grid;gap:clamp(44px,5vw,88px);align-items:start}
@media (min-width:960px){.vs-tech-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}}
.vs-kopf{margin:0;max-width:42em;border-top:1.5px solid var(--ink)}
.vs-kopf div{display:grid;gap:3px;padding:12px 2px 13px;border-bottom:1px solid var(--rule)}
@media (min-width:560px){.vs-kopf div{grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:baseline}}
.vs-kopf dt{font-size:12px;line-height:1.4;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.vs-kopf dd{margin:0;font-size:17px;line-height:1.55}
.vs-lauf{max-width:500px}
.vs-lauf-in{transform:rotate(1.2deg)}
.vs-lauf-list{position:relative}
.vs-rail{position:absolute;left:17px;top:33px;bottom:33px;width:0;border-left:2px dashed rgba(35,70,168,.55)}
.vs-lauf-row{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 24px;gap:12px;align-items:center;min-height:66px;padding:9px 0;border-bottom:1px solid var(--rule)}
.vs-lauf-row--end{grid-template-columns:36px minmax(0,1fr);border-bottom:0}
.vs-dot{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border:1.5px solid var(--ink);border-radius:50%;background:var(--canary);font:400 14px/1 var(--mono)}
.vs-lauf-t b{display:block;font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.vs-lauf-t small{display:block;margin-top:2px;font:400 13px/1.35 var(--mono);color:var(--ink-2)}
.vs-lauf-row .vs-box{width:20px;height:20px}
.vs-lauf-row .vs-box svg{left:-3px;top:-9px;width:30px;height:30px}
.vs-slip{position:relative;z-index:2;display:block;width:36px;height:26px;padding:4px;border-radius:2px;background:var(--paper);box-shadow:0 6px 12px -6px rgba(27,31,42,.55),0 0 0 1px var(--rule)}
.vs-slip .vs-bc{width:100%;height:100%}

/* ---------- Ausklang mit Anlage ---------- */
.vs-outro{position:relative;padding:clamp(96px,15vh,170px) 0 clamp(88px,13vh,140px)}
.vs-outro-grid{display:grid;gap:clamp(56px,6vw,96px);align-items:center}
.vs-outro .vs-step{margin-bottom:26px}
.vs-outro-claim{font-size:clamp(46px,7.2vw,116px);letter-spacing:-.05em;line-height:1.02}
@media (max-width:399px){.vs-outro-claim{font-size:11.5vw}} /* „Lieferung öffnen.“ bleibt auch bei 320 px in einer Zeile */
.vs-outro-claim span{position:relative;display:inline-block}
.vs-ul{position:absolute;left:-1%;bottom:-.04em;width:102%;max-width:none;height:.16em;overflow:visible;fill:none;stroke:var(--pen);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:200}
.vs-cta{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(40px,6vh,60px);min-height:54px;padding:12px 24px;border-radius:4px;background:var(--ink);color:#fff;font-weight:700;font-size:17px;text-decoration:none;box-shadow:4px 4px 0 var(--pen);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.vs-cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--pen)}
.vs-clip{position:absolute;top:-24px;left:40px;z-index:2;width:22px;height:70px;border:3px solid #8a9099;border-radius:11px;transform:rotate(-6deg)}
.vs-clip::after{content:"";position:absolute;left:3px;right:3px;top:10px;height:44px;border:3px solid #8a9099;border-top:0;border-radius:0 0 8px 8px}

/* ---------- Weitere Projekte: Ablage ---------- */
.vs-more{padding:clamp(56px,9vh,96px) 0 clamp(64px,10vh,110px);border-top:1px solid var(--rule);background:var(--desk-2)}
.vs-more-h{margin-bottom:clamp(26px,3.6vh,38px);font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;line-height:1.05}
.vs-more-grid{display:grid;gap:24px;align-items:center}
@media (min-width:900px){.vs-more-grid{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:28px}}
.vs-more-card{--py:0px;position:relative;display:block;color:var(--ink);text-decoration:none;isolation:isolate}
.vs-more-card--prev{--sheet:var(--canary);--tilt:-1deg}
.vs-more-card--next{--sheet:var(--rose);--tilt:.9deg}
.vs-more-in{position:relative;display:block;padding:34px clamp(18px,2.4vw,30px) 24px}
.vs-more-in::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:3px;box-shadow:var(--lift);background:var(--glue),var(--sheet);transform:translateY(var(--py)) rotate(var(--tilt));transition:box-shadow .3s var(--ease)}
.vs-more-card:hover .vs-more-in::before{box-shadow:5px 6px 0 var(--pen),var(--lift)}
.vs-more-card--next .vs-more-in{text-align:right}
.vs-more-dir{display:flex;align-items:center;gap:10px;font:400 13px/1.2 var(--mono);color:var(--ink-2)}
.vs-more-card--next .vs-more-dir{justify-content:flex-end}
.vs-arw{flex:none;width:44px;height:16px;overflow:visible;transition:transform .3s var(--ease)}
.vs-more-card--prev:hover .vs-arw{transform:translateX(-4px)}
.vs-more-card--next:hover .vs-arw{transform:translateX(4px)}
.vs-more-code{display:block;margin-top:16px;font:400 14px/1 var(--mono);color:var(--pen)}
.vs-more-name{display:block;margin-top:8px;font-size:clamp(24px,2.6vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.05;overflow-wrap:break-word;hyphens:auto}
.vs-more-all{display:inline-flex;align-items:center;gap:10px;justify-self:center;min-height:48px;padding:10px 18px;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);font-weight:600;font-size:16px;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.vs-more-all:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--pen)}
.vs-more-ic{display:grid;grid-template-columns:repeat(2,7px);gap:3px}
.vs-more-ic i{width:7px;height:7px;border:1.5px solid currentColor;border-radius:1px}

.vs-foot{border-top:1px solid var(--rule);background:var(--desk-2)}
.vs-foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding:26px 0 30px;font-size:16px;color:var(--ink-2)}
.vs-foot nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.vs-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration-color:var(--pen);text-underline-offset:4px}
.vs-foot a:hover{color:var(--pen)}

@media (max-width:519px){
  .vs-type{font-size:15px}
  .vs-log .vs-type,.vs-tab .vs-type{font-size:14px}
  .vs-log-row{grid-template-columns:18px minmax(0,1fr) auto 26px;gap:6px 8px}
  .vs-tab-row{grid-template-columns:28px 44px minmax(0,1fr) 56px;gap:7px;font-size:14px}
  .vs-tab-row--h{font-size:11px;letter-spacing:.02em}
  .vs-label{width:118px}
  .vs-doc{--ch:152px}
  .vs-stamp--l{font-size:14px}
  .vs-stag .vs-type,.vs-hit .vs-type{font-size:13px}
  .vs-mli .vs-type,.vs-mf .vs-type,.vs-mo--rs .vs-type,.vs-msheet--lf .vs-type{font-size:13px}
}

/* =========== Bewegung (nur mit JS, nie bei reduzierter Bewegung) =========== */
.vs-anim .vs-zone{display:block;height:184px;padding:0}
.vs-anim .vs-label{position:absolute;left:50%;top:50%}
.vs-anim .vs-label--odd{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
}

/* =========== Druck ===========
   Papier zeigt den ruhigen Endzustand jeder Szene (js/projekt-versand-scan.js nimmt beim Drucken die Bewegung ab,
   danach zurück). Die Lagen tragen die Aussage – Weiß, Gelb und Rosa werden mitgedruckt, der Ablagetisch nicht.
   Abschnitte ohne Bildschirmabstände, Bild und Text nebeneinander, Knöpfe entfallen, Blätter werden nicht zerschnitten. */
@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{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .skip,.vs-back,.vs-jump,.vs-cta,.vs-more-all{display:none}
  /* Der Druck kennt keine Rückseiten (backface-visibility): die Außenseite des aufgeklappten Lieferscheins läge gespiegelt darüber */
  .vs-face--out{display:none}
  h1,h2,h3,.vs-step,.vs-kicker,.vs-sec-head{break-after:avoid}
  .vs-outro-claim{break-after:auto} /* letzter Inhalt seiner Spalte: sonst klebte der ganze Ausklang an „Weitere Projekte“ */
  .vs-set,.vs-visual,.vs-feat,.vs-rule,.vs-netfig,.vs-vt li,.vs-kopf div,.vs-more-card{break-inside:avoid}
  .vs-top-in{min-height:0;padding-bottom:10px}
  .vs-hero{padding:24px 0 30px}
  .vs-hero-grid,.vs-intro-grid,.vs-act-grid,.vs-net-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
  .vs-tech-grid{gap:30px}
  .vs-act--rev .vs-act-text{order:2}
  .vs-act,.vs-sec{padding:32px 0}
  .vs-outro{padding:36px 0 24px}
  .vs-act h2{margin-bottom:22px}
  .vs-sec h2{margin-bottom:22px}
  .vs-sec-head{margin-bottom:28px}
  .vs-rules-grid{gap:26px}
  .vs-more{padding:30px 0 10px;background:none}
  .vs-more-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vs-foot{background:none;border-top-color:var(--ink)}
  .vs-foot-in{padding:12px 0 0}
  .vs-foot a{min-height:0}
}