/* A-01 Produktion – eigene Projektseite. Welt: Plantafel in der Fertigungshalle.
   Stahlgrau, weiße Emailletafel mit Alurahmen, T-Steckkarten, Magnete (Rot, Blau, Gelb, Grün), schwarzer Marker.
   Schriften: Archivo 800 in Versalien für Überschriften und Markerschrift, Archivo für Lesetext, IBM Plex Mono für Etiketten. */

/* ---------- 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:Archivo;font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/archivo-normal-400_800-latin.woff2') format('woff2')}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/archivo-normal-400_800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02FF}
@font-face{font-family:Plex;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2')}
@font-face{font-family:Plex;font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2')}

:root{
  color-scheme:light;
  --steel:#c5cacd;--ink:#141414;--text:#16191c;--text-2:#34393d;
  --card:#fdfcf6;--card-2:#efece2;
  --c-r:#d7372b;--c-b:#1f4fa3;--c-y:#f1b500;--c-g:#2e8b4a;
  --pad:clamp(16px,5vw,72px);
  --wrap:max(var(--pad),calc((100% - 1320px)/2));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--steel)}
body{margin:0;font-family:Archivo,'Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:1.0625rem;line-height:1.6;color:var(--text);
  background:radial-gradient(110% 60% at 12% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 62%) no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.025) 1px 3px),var(--steel)}
h1,h2,h3{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.98;color:var(--ink);text-wrap:balance}
p{margin:0}
a{color:inherit}
svg{display:block}
:focus-visible{outline:3px solid var(--c-b);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.skip{position:absolute;left:16px;top:-80px;z-index:50;padding:10px 16px;border-radius:3px;background:var(--ink);color:#fff;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.kicker{font-family:Plex,ui-monospace,monospace;font-weight:500;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}

/* ---------- Bausteine der Hallenwelt ---------- */
.frame{position:relative;border:.55em solid transparent;border-radius:.5em;
  background:linear-gradient(165deg,#fcfcf9 0%,#f2f2ed 62%,#ebebe5 100%) padding-box,
    linear-gradient(135deg,#f4f5f6 0%,#a3aab0 20%,#e9ecee 45%,#9aa1a7 72%,#e2e5e7 100%) border-box;
  box-shadow:0 1.6em 2.4em -1.3em rgba(25,30,35,.6),0 .15em .3em rgba(25,30,35,.25)}
.frame::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:.1em;
  background:linear-gradient(112deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.5) 44%,rgba(255,255,255,0) 55%)}
.b-head,.b-cols,.hb-top,.hb-cols,.ledge{position:relative;z-index:1}
.mg{--mc:var(--c-r);display:inline-block;flex:none;width:1.15em;height:1.15em;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.75) 0,rgba(255,255,255,.18) 22%,rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% 58%,rgba(0,0,0,0) 56%,rgba(0,0,0,.22) 100%),var(--mc);
  box-shadow:0 .12em .16em rgba(0,0,0,.35),0 .3em .5em -.2em rgba(0,0,0,.3)}
.mg-r{--mc:var(--c-r)}.mg-b{--mc:var(--c-b)}.mg-y{--mc:var(--c-y)}.mg-g{--mc:var(--c-g)}
.strip{display:block;padding:.4em .45em;border-radius:.12em;background:#1a1c1e;color:#f4f4f1;font-family:Plex,monospace;font-weight:500;font-size:.66em;letter-spacing:.1em;text-transform:uppercase;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 .12em .18em rgba(0,0,0,.35)}
.mk{display:inline-block;font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);transform:rotate(-1.5deg)}
.lane{position:absolute;top:0;bottom:0;left:0;width:calc((100% - 2 * var(--cg)) / 3);
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 calc(var(--pitch) - .17em),rgba(40,45,50,.22) calc(var(--pitch) - .17em) calc(var(--pitch) - .07em),rgba(255,255,255,.95) calc(var(--pitch) - .07em) var(--pitch))}
.ledge{position:relative;display:flex;align-items:center;height:2.5em;margin:.35em -1.1em 0;padding:0 1.1em;
  background:linear-gradient(180deg,#f1f3f4 0%,#c3c9cd 30%,#9ea6ab 60%,#d5d9dc 82%,#8e969c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.pen{position:absolute;right:1.2em;top:50%;width:4.6em;height:.72em;margin-top:-.46em;border-radius:.36em;background:linear-gradient(180deg,#4b4f53,#151617 55%,#2c2f31);box-shadow:0 .12em .16em rgba(0,0,0,.35)}
.pen::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1.5em;border-radius:.36em 0 0 .36em;background:linear-gradient(180deg,#666a6e,#1d1f21 60%,#3a3d40)}
.pen::after{content:'';position:absolute;left:1.45em;top:0;bottom:0;width:.18em;background:#e9e9e4}
.pen-ic{display:inline-block;flex:none;width:1.7em;height:.55em;border-radius:.28em;background:linear-gradient(90deg,#4a4d50 0 32%,#e9e9e4 32% 39%,#141414 39%);box-shadow:0 .08em .12em rgba(0,0,0,.35)}
/* Markernotiz mit roter Unterstreichung; --k schreibt sie von links an (ohne JS fertig) */
.mnote{display:block;width:max-content;max-width:100%;padding-bottom:.14em;font-weight:800;line-height:1.1;text-transform:uppercase;color:var(--ink);transform:rotate(-1.5deg);
  background:linear-gradient(var(--c-r),var(--c-r)) no-repeat 0 100%/100% .14em;clip-path:inset(-.5em calc((1 - var(--k,1)) * 100%) -.5em -.5em)}
/* Kleine Szenen: wachsen mit ihrem Behälter */
.sc{position:relative;line-height:1.2;color:var(--ink)}
.situ-sc,.dr-sc{container-type:inline-size;min-width:0}
.sc-top{position:relative;z-index:1;display:flex;align-items:center;gap:.8em;margin-bottom:.75em}
.sc-top .mk{font-size:1.35em}

/* ---------- Kopfzeile ----------
   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; jedes Ziel mindestens 44 px hoch, auch bei 320 px alles in einer 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(8px,2vw,24px);padding:14px clamp(16px,3vw,40px)}
.back{display:inline-flex;flex:none;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:3px;background:#f7f7f3;color:var(--ink);font-family:Plex,monospace;font-weight:500;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-decoration:none;box-shadow:0 0 0 1px rgba(0,0,0,.22),0 6px 12px -8px rgba(0,0,0,.5);transition:background-color .2s}
.back:hover{background:#fff}
.back.demo{margin-left:auto;gap:0} /* Bedien-Demo mit Fantasiedaten (demo-produktion.html), steht direkt vor dem Namen */
@media (max-width:599px){.demo-zusatz{display:none}}
.owner{display:inline-flex;flex:none;align-items:center;min-height:44px;font-family:Plex,monospace;font-weight:500;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;text-decoration:none} /* Name führt zur Startseite */
.owner:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.code{flex:1 1 auto;text-align:center;font-family:Plex,monospace;font-weight:500;font-size:.8125rem;letter-spacing:.1em;white-space:nowrap;color:var(--text-2)}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"kick kick" "title title" "sub board";column-gap:clamp(24px,5vw,80px);align-items:start;padding:clamp(20px,5vh,56px) var(--wrap) clamp(64px,11vh,130px)}
.hero-kick{grid-area:kick;margin-bottom:clamp(14px,2.5vh,24px)}
.hero h1{grid-area:title;font-size:clamp(2.1rem,7.4vw,7rem);line-height:.9;letter-spacing:-.01em;margin-bottom:clamp(28px,5vh,52px)}
.ln{display:block;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}
.ln>span{display:inline-block;position:relative}
.ln-2>span::after{content:'';position:absolute;left:.02em;right:.3em;bottom:-.1em;height:.075em;border-radius:.06em .1em .08em .05em;background:var(--c-r);transform:rotate(-.45deg);transform-origin:left}
.hero-sub{grid-area:sub;max-width:33rem}
.hook{font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.38;font-weight:500;color:var(--ink)}
.cta{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(22px,3.5vh,36px);padding:15px 22px;border-radius:3px;background:#1a1c1e;color:#f4f4f1;font-family:Plex,monospace;font-weight:500;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 18px -10px rgba(0,0,0,.6);transition:background-color .2s}
.cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.cta:hover{background:#000}
.cta:hover svg{transform:translateY(3px)}

.hboard{grid-area:board;container-type:inline-size;width:100%;max-width:560px;justify-self:end}
.hb-in{--hp:4.3em;--cg:.8em;--pitch:4.3em;overflow:hidden;font-size:clamp(10px,2.9cqw,17px);line-height:1.2;color:var(--ink);padding:.85em 1em 0}
.hb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7em}
.hb-top .mk{font-size:1.35em}
.loose{display:flex;gap:.35em}
.loose .mg{width:1.25em;height:1.25em}
.loose .mg:nth-child(2){transform:translateY(.25em)}
.hb-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--cg)}
.hb-slots{position:relative;height:calc(3 * var(--hp));margin-top:.5em}
.hb-slots .lane{width:calc((100% - var(--cg)) / 2)}
.hb-slots .lane.l2{left:auto;right:0}
.hc{--col:0;--slot:0;--fx:0;--fy:0;position:absolute;left:0;top:.3em;z-index:1;width:calc((100% - var(--cg)) / 2);height:calc(var(--hp) - 1.05em);display:flex;align-items:center;gap:.55em;padding:0 .7em 0 .8em;background:var(--card);border-radius:.18em;
  box-shadow:0 0 0 1px rgba(0,0,0,.17),0 .15em .25em rgba(0,0,0,.2);transform:translate(calc(var(--col) * (100% + var(--cg))),calc(var(--slot) * var(--hp)))}
.hc::after{content:'';position:absolute;left:24%;right:24%;top:calc(100% - 1px);height:.55em;background:var(--card-2);border-radius:0 0 .14em .14em;box-shadow:0 0 0 1px rgba(0,0,0,.13)}
.hc-ok{--col:0;--slot:0;--fx:0;--fy:1}
.hc-part{--col:1;--slot:0;--fx:-1;--fy:0}
.hc-stop{--col:1;--slot:1;--fx:-1;--fy:1}
.hc-tx{min-width:0}
.hc b{display:block;font-weight:800;font-size:.9em;line-height:1.04;text-transform:uppercase}
.hc small{display:block;margin-top:.3em;font-family:Plex,monospace;font-weight:500;font-size:.62em;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;color:#3d4347}
.hc .mg{margin-left:auto;width:1.45em;height:1.45em}
.hb-in .ledge{height:1.9em;margin:.2em -1em 0}

/* ---------- Ausgangslage ---------- */
.intro{padding:clamp(72px,13vh,150px) var(--wrap) clamp(40px,8vh,90px)}
.intro-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,6vw,100px);align-items:end}
.intro h2{font-size:clamp(2rem,4.2vw,4rem);margin-top:14px}
.statement{font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.5;color:var(--text)}
.statement em{font-style:normal;font-weight:700;background:linear-gradient(var(--u),var(--u)) no-repeat 0 100%/100% .16em;padding-bottom:.06em}
.k-prio{--u:var(--c-b)}.k-menge{--u:var(--c-y)}.k-mat{--u:var(--c-g)}
.situ{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,6vw,100px);align-items:center;margin-top:clamp(48px,8vh,88px)}
.situ-tx{display:flex;flex-direction:column;gap:1em;max-width:34rem}
.situ-tx p{font-size:1.125rem}
.situ-tx p:first-child{font-weight:600;color:var(--ink)}
/* Szene: Priorität, Zielmenge und Material wandern als Magnete an den Auftrag */
.sc-join{--cg:.7em;overflow:hidden;max-width:34em;margin-left:auto;padding:.85em 1.05em 0;font-size:clamp(10px,3.1cqw,18px)}
.sj-src{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cg)}
.sj-area{position:relative;z-index:1;height:11.2em}
.sj-hole,.sj-sock{display:block;width:1.3em;height:1.3em;border-radius:50%;border:.09em dashed rgba(20,20,20,.4)}
.sj-hole{position:absolute;top:.85em;margin-left:-.65em}
.sj-hole:nth-child(1){left:calc(16.667% - .233em)}.sj-hole:nth-child(2){left:50%}.sj-hole:nth-child(3){left:calc(83.333% + .233em)}
.sj-card{--lift:0;position:absolute;left:19%;right:19%;top:4.1em;height:4.5em;transform:translateX(calc(var(--r,0) * .1em))}
.sj-card .tc-head{gap:.45em;padding:0 .6em}
.sj-card .tc-l{font-size:.62em}
.sj-card .tc-id{font-size:1.5em}
.sj-card .tc-stem{gap:.45em}
.sj-st{margin-left:auto;width:1.25em;height:1.25em;opacity:var(--k,1);transform:scale(calc(2.2 - 1.2 * var(--k,1)))}
.sj-m{--sy:1.5em;--ty:7.6em;position:absolute;z-index:3;width:1.3em;height:1.3em;
  left:calc(var(--sx) + (var(--tx) - var(--sx)) * var(--k,1));
  top:calc(var(--sy) + (var(--ty) - var(--sy)) * var(--k,1) - var(--k,1) * (1 - var(--k,1)) * 9em);
  transform:translate(calc(var(--r,0) * .1em - 50%),-50%) scale(calc(1 + var(--k,1) * (1 - var(--k,1)) * 1.1))}
.m1{--sx:calc(16.667% - .233em);--tx:calc(50% - 1.75em)}.m2{--sx:50%;--tx:50%}.m3{--sx:calc(83.333% + .233em);--tx:calc(50% + 1.75em)}
.sj-note{position:absolute;left:0;right:0;top:9.35em;margin:auto;font-size:.95em}
.sc-join .ledge{height:1.9em;margin:.1em -1.05em 0}
.f-wrap{margin-top:clamp(48px,8vh,80px)}
.f-title{font-family:Plex,monospace;font-weight:500;font-size:.8125rem;line-height:1.4;letter-spacing:.14em;color:var(--text-2);margin-bottom:16px}
.features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px}
.features li{padding-bottom:14px}
.fcard{position:relative;display:flex;flex-direction:column;gap:14px;height:100%;padding:16px 16px 20px;border-radius:4px;background:var(--card);color:var(--text);text-decoration:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.2),0 12px 20px -14px rgba(0,0,0,.55);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.fcard::after,.mc::after{content:'';position:absolute;left:28%;right:28%;top:calc(100% - 1px);height:14px;background:var(--card-2);border-radius:0 0 3px 3px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.fcard:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 0 0 1px rgba(0,0,0,.2),0 20px 26px -14px rgba(0,0,0,.55)}
.fc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.fc-l{font-family:Plex,monospace;font-weight:500;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.fc-mg{display:flex;gap:4px;font-size:18px}
.fc-mg .mg{width:1em;height:1em}
.fc-t{font-weight:600;font-size:1.0625rem;line-height:1.42}

/* ---------- Ablauf an der Plantafel ---------- */
.flow{padding-top:clamp(56px,9vh,110px)}
.flow-head{padding:0 var(--wrap);margin-bottom:clamp(8px,4vh,40px)}
.flow-head h2{font-size:clamp(2rem,4.6vw,4.4rem);margin-top:14px;max-width:14em}
.flow-note{margin-top:16px;color:var(--text-2);font-size:1.0625rem;max-width:40rem}
.flow-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4vw,72px);padding:0 var(--wrap)}
.step{min-height:100svh;display:flex;align-items:center}
.step-in{max-width:31rem;padding:24px 0;scroll-margin-top:28svh}
.s-kick{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-family:Plex,monospace;font-weight:500;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.s-kick .mg{width:16px;height:16px}
.s-kick .pen-ic{font-size:14px}
.step h3{font-size:clamp(1.7rem,2.7vw,2.7rem);line-height:1;margin-bottom:18px}
.step p:not(.s-kick){font-size:1.125rem;line-height:1.6;color:var(--text)}
.pp-live .step{transition:opacity .5s}
@media (min-width:900px){
  .flow-steps{padding-bottom:55svh}
  .pp-live .step:not(.is-active){opacity:.85}
}
.stage-wrap{position:sticky;top:0;height:100svh;display:flex;align-items:center;align-self:start}
.stage{container-type:inline-size;width:100%;max-width:720px;margin-inline:auto}

.board{--pitch:4em;--cg:.7em;overflow:hidden;font-size:clamp(9.5px,min(2.55cqw,1.95svh),18px);line-height:1.2;color:var(--ink);padding:.9em 1.1em 0}
.b-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5em .8em;margin-bottom:.75em}
.b-title{font-size:1.45em}
.b-tag{font-family:Plex,monospace;font-weight:500;font-size:.6em;letter-spacing:.12em;text-transform:uppercase;color:#43494d;border:1px solid #9aa1a6;border-radius:.3em;padding:.25em .5em}
.legend{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4em .9em;font-family:Plex,monospace;font-weight:500;font-size:.58em;letter-spacing:.06em;text-transform:uppercase;color:#373c40}
.legend span{display:flex;align-items:center;gap:.45em}
.legend .mg{width:1.35em;height:1.35em}
.b-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cg);margin-bottom:.45em}
.slots{position:relative;height:calc(5 * var(--pitch))}
.lane.l2{left:calc((100% - 2 * var(--cg)) / 3 + var(--cg))}
.lane.l3{left:auto;right:0}

/* Steckkarte (T-Karte) */
.tc{--col:0;--slot:0;--lift:0;--d:1;--pd:1;position:absolute;left:0;top:.25em;z-index:1;width:calc((100% - 2 * var(--cg)) / 3);height:calc(var(--pitch) - .45em);
  transform:translate(calc(var(--col) * (100% + var(--cg))),calc(var(--slot) * var(--pitch))) rotate(calc(var(--lift) * -2.4deg)) scale(calc(1 + var(--lift) * .07))}
.tc.up{z-index:5}
.tc[data-id=D]{--col:1;--slot:0}.tc[data-id=B]{--col:1;--slot:1}.tc[data-id=A]{--col:2;--slot:0}.tc[data-id=E]{--col:2;--slot:1}.tc[data-id=C]{--col:2;--slot:2}
.tc-head{position:absolute;left:0;right:0;top:0;height:60%;display:flex;align-items:center;gap:.3em;padding:0 .4em 0 .5em;background:var(--card);border-radius:.16em;
  box-shadow:0 0 0 1px rgba(0,0,0,.17),0 calc(.1em + var(--lift) * .7em) calc(.18em + var(--lift) * 1em) rgba(0,0,0,calc(.2 + var(--lift) * .12))}
.tc-stem{position:absolute;left:20%;right:20%;top:calc(60% - 1px);bottom:0;display:flex;align-items:center;justify-content:center;gap:.28em;background:var(--card-2);border-radius:0 0 .14em .14em;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.tc-l{font-family:Plex,monospace;font-weight:500;font-size:.5em;letter-spacing:.08em;text-transform:uppercase;color:#4d5357}
.tc-id{font-weight:800;font-size:1.25em;line-height:1;text-transform:uppercase;transform:rotate(-4deg);margin-left:.1em}
.tc-st{margin-left:auto}
.tc .tc-st,.tc .tc-prio{width:1.05em;height:1.05em}
.tc .tc-st{opacity:var(--d);transform:scale(calc(2.2 - 1.2 * var(--d)))}
.tc .tc-prio{margin-left:auto;opacity:var(--pd);transform:scale(calc(2.2 - 1.2 * var(--pd)))}
.tc.prio .tc-prio+.tc-st{margin-left:.15em}
.tc:not(.prio) .tc-prio{display:none}
[data-status=ok] .tc-st{--mc:var(--c-g)}[data-status=part] .tc-st{--mc:var(--c-y)}[data-status=stop] .tc-st{--mc:var(--c-r)}
.mm{width:.62em;height:.62em;opacity:var(--d);transform:scale(calc(2 - var(--d)))}
.tc.out .tc-head,.tc.out .tc-stem{background:transparent;box-shadow:none;outline:.09em dashed rgba(20,20,20,.4);outline-offset:-.09em}
.tc.out .tc-head>*,.tc.out .tc-stem>*{visibility:hidden}
.tc.gone{visibility:hidden}
.ledge-l{font-family:Plex,monospace;font-weight:500;font-size:.58em;letter-spacing:.1em;text-transform:uppercase;color:#1f2326}
.tc-done{--tr:0;--lift:0;position:absolute;left:9.4em;bottom:.45em;width:7.4em;height:1.55em;opacity:var(--tr);transform:translateY(calc((1 - var(--tr)) * -3.2em)) rotate(-2.5deg)}
.tc-done .tc-head{height:100%}
.tc-done .tc-st{width:1em;height:1em}

/* Gezogene Karte in Großansicht */
.big{--in:0;--fly:0;position:absolute;left:50%;top:57%;z-index:8;width:min(86%,29em);pointer-events:none;
  opacity:calc(var(--in) * (1 - var(--fly)));
  transform:translate(-50%,-50%) translateY(calc((1 - var(--in)) * 2.4em + var(--fly) * 9em)) scale(calc(.72 + .28 * var(--in) - .45 * var(--fly))) rotate(calc(-1.2deg - var(--fly) * 4deg));
  filter:drop-shadow(0 1.1em 1.2em rgba(0,0,0,.32))}
.bg-head{display:flex;align-items:center;gap:.55em;padding:.65em .85em;background:var(--card);border-radius:.22em;box-shadow:0 0 0 1px rgba(0,0,0,.17)}
.bg-head .tc-l{font-size:.58em}
.bg-id{font-weight:800;font-size:1.9em;line-height:1;transform:rotate(-4deg)}
.bg-state{font-weight:800;font-size:.8em;text-transform:uppercase;opacity:var(--st,1)}
.bg-st,.bg-prio{width:1.55em;height:1.55em}
.big-mat .bg-st{margin-left:auto;opacity:var(--st,1);transform:scale(calc(2.2 - 1.2 * var(--st,1)))}
.big-qty .bg-prio{margin-left:auto}
.bg-body{margin:0 9%;display:flex;flex-direction:column;gap:.6em;padding:.85em 1em 1em;background:var(--card-2);border-radius:0 0 .2em .2em;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.bg-lab{display:flex;flex-wrap:wrap;gap:.3em 1.2em;padding-bottom:.6em;border-bottom:1px solid rgba(0,0,0,.14);font-family:Plex,monospace;font-weight:500;font-size:.58em;letter-spacing:.08em;text-transform:uppercase;color:#43494d}
.bg-lab span{display:flex;align-items:center;gap:.5em}
.lg-stk{width:1.8em;height:.7em;border-radius:.4em;background:var(--c-b)}
.lg-need{width:.25em;height:1.3em;border-radius:.1em;background:var(--ink)}
.mrow{--f:1;--dr:1;--g:1;display:grid;grid-template-columns:5.4em minmax(0,1fr) 1.3em;align-items:center;gap:.65em}
.m1{--v:.82;--n:.55}.m2{--v:.9;--n:.62}.m3{--v:.4;--n:.72}
.mrow b{font-weight:800;font-size:.78em;text-transform:uppercase}
.trk{position:relative;height:.8em;border-bottom:.08em solid rgba(0,0,0,.35);background:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 1px,rgba(0,0,0,0) 1px 10%) 0 100%/100% .28em no-repeat}
.stk{position:absolute;left:0;top:.06em;height:.52em;width:calc(var(--v) * var(--f) * 100%);border-radius:.25em .45em .35em .2em;background:var(--c-b)}
.gap{position:absolute;top:.06em;height:.52em;left:calc(var(--v) * 100%);width:calc((var(--n) - var(--v)) * 100%);transform-origin:left;transform:scaleX(var(--g));background:repeating-linear-gradient(-45deg,var(--c-r) 0 .14em,rgba(215,55,43,0) .14em .32em)}
.need{position:absolute;top:-.32em;height:1.3em;left:calc(var(--n) * 100%);width:.22em;margin-left:-.11em;border-radius:.12em;background:var(--ink);transform:rotate(5deg)}
.mr{width:1.25em;height:1.25em;opacity:var(--dr);transform:scale(calc(2.2 - 1.2 * var(--dr)))}
.note{--w:1;align-self:flex-start;margin-top:.2em;padding-bottom:.12em;font-weight:800;font-size:.95em;text-transform:uppercase;transform:rotate(-1.5deg);
  background:linear-gradient(var(--c-r),var(--c-r)) no-repeat 0 100%/100% .14em;clip-path:inset(-.4em calc((1 - var(--w)) * 100%) -.4em -.4em)}
.qrow{display:grid;grid-template-columns:4em minmax(0,1fr) 1.4em;align-items:center;gap:.65em;min-height:1.6em}
.ql{font-family:Plex,monospace;font-weight:500;font-size:.62em;letter-spacing:.08em;text-transform:uppercase;color:#3d4347}
.qbar{position:relative;height:1em}
.qb{position:absolute;left:0;top:.18em;bottom:.18em;border-radius:.3em .5em .45em .25em;background:var(--ink);transform-origin:left}
.q-old .qb{width:55%}
.q-new .qb{width:80%;transform:scaleX(var(--nw,1))}
.strike{position:absolute;left:-3%;top:50%;width:62%;height:.24em;margin-top:-.12em;border-radius:.2em;background:var(--c-r);transform-origin:left;transform:rotate(-7deg) scaleX(var(--sk,1))}
.qok{width:1.35em;height:1.35em;fill:none;stroke:var(--c-g);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--ok,1))}
.fin{display:flex;align-items:center;gap:.7em;margin-top:.25em;padding-top:.6em;border-top:.08em dashed rgba(0,0,0,.3)}
.fin-ck{width:2.8em;height:2.1em;fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--ck,1))}
.fin-t{font-weight:800;font-size:.95em;text-transform:uppercase;opacity:var(--ft,1)}
.fin-mg{margin-left:auto;width:1.4em;height:1.4em;opacity:var(--ft,1);transform:scale(calc(2.2 - 1.2 * var(--ft,1)))}

/* ---------- Im Detail: drei Szenen auf der großen Tafel ---------- */
.deep{padding:clamp(80px,13vh,150px) var(--wrap) clamp(40px,8vh,90px)}
.deep-head,.net-head{max-width:46rem;margin-bottom:clamp(36px,6vh,64px)}
.deep-head h2,.net-head h2{font-size:clamp(2rem,4.6vw,4.4rem);margin-top:14px}
.deep-note,.net-lead{margin-top:16px;font-size:1.0625rem;color:var(--text-2);max-width:40rem}
.deep-board{border-width:clamp(8px,.9vw,13px);padding:0 clamp(18px,3.6vw,56px)}
.dr{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4.5vw,72px);align-items:center;padding:clamp(36px,6.5vh,72px) 0}
.dr+.dr{border-top:1px solid rgba(40,45,50,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
.dr-alt .dr-tx{order:2}
.dr-k{margin-bottom:18px}
.dr-k .strip{display:inline-block;padding:.5em .8em;font-size:.8125rem}
.dr h3{font-size:clamp(1.6rem,2.6vw,2.5rem);line-height:1;margin-bottom:16px}
.dr-tx p:not(.dr-k){font-size:1.125rem;max-width:32rem}
.dr-sc .sc{max-width:33em;margin-inline:auto;font-size:clamp(10px,3.3cqw,18px)}
/* Szene Automatik: Bestand sinkt unter den Mindestbestand, ein Auftrag steckt sich selbst */
.sc-min{--cg:.8em}
.sm-g{display:grid;grid-template-columns:5em minmax(0,1fr) 1.4em;align-items:center;gap:.7em;padding:.3em 0 2.3em}
.sm-l{font-family:Plex,monospace;font-weight:500;font-size:.68em;letter-spacing:.08em;text-transform:uppercase;color:#3d4347}
.sm-trk{position:relative;height:1.1em;border-bottom:.08em solid rgba(0,0,0,.35);background:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 1px,rgba(0,0,0,0) 1px 10%) 0 100%/100% .3em no-repeat}
.sm-stk,.sm-gap{position:absolute;top:.12em;height:.7em}
.sm-stk{left:0;width:calc((.9 - .62 * var(--k,1)) * 100%);border-radius:.3em .5em .4em .25em;background:var(--c-b)}
.sm-gap{left:calc((.9 - .62 * var(--k,1)) * 100%);width:max(0%,calc((.62 * var(--k,1) - .48) * 100%));background:repeating-linear-gradient(-45deg,var(--c-r) 0 .14em,rgba(215,55,43,0) .14em .32em)}
.sm-tick{position:absolute;top:-.45em;left:42%;width:.24em;height:1.9em;margin-left:-.12em;border-radius:.12em;background:var(--ink);transform:rotate(4deg)}
.sm-tl{position:absolute;left:42%;top:2.6em;transform:translateX(-50%);font-family:Plex,monospace;font-weight:500;font-size:.62em;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#3d4347}
.sm-mr{width:1.35em;height:1.35em;opacity:var(--k,1);transform:scale(calc(2.2 - 1.2 * var(--k,1)))}
.sm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cg)}
.sm-slot{--pitch:4.4em;position:relative;height:4.4em;margin-top:.45em}
.sm-slot .lane{width:100%}
.sm-card{--lift:calc((1 - var(--k,1)) * .9);position:absolute;left:4%;right:4%;top:.35em;height:3.6em;opacity:min(1,calc(var(--k,1) * 3));
  transform:translateY(calc((1 - var(--k,1)) * -3em)) rotate(calc((1 - var(--k,1)) * -7deg))}
.sm-card .tc-head{gap:.5em;padding:0 .6em}
.sm-card .tc-l{font-size:.62em}
.sm-auto{font-family:Plex,monospace;font-weight:500;font-size:.6em;letter-spacing:.1em;text-transform:uppercase;color:#3d4347}
.sm-mail{position:absolute;left:50%;top:.5em;width:4.2em;margin-left:-2.1em;opacity:min(1,calc(var(--k,1) * 3));
  transform:translateX(calc((1 - var(--k,1)) * -6.5em)) rotate(calc(-4deg - (1 - var(--k,1)) * 10deg))}
.sm-mail svg{width:100%;height:auto;fill:#fbfbf8;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 .18em .2em rgba(0,0,0,.3))}
.sm-trail{position:absolute;left:-1.4em;right:calc(50% + 2.3em);top:1.85em;height:.14em;background:repeating-linear-gradient(90deg,var(--ink) 0 .45em,rgba(0,0,0,0) .45em .8em);opacity:.6;transform-origin:left;transform:scaleX(var(--k,1))}
.sm-note{margin:1.1em auto .1em;font-size:.95em}
/* Szene Rückmeldung: Strichliste am Platz, Meldung wandert ins ERP, Rückfrage im Chat */
.sc-rm{--mid:7em}
.sr-cols,.sr-row{display:grid;grid-template-columns:minmax(0,1fr) var(--mid) minmax(0,1fr);align-items:center}
.sr-cols .strip:last-child{grid-column:3}
.sr-row{margin-top:.6em;height:4.2em}
.sr-card{--lift:0;--d:1;position:relative;height:3.9em}
.sr-card .tc-head{gap:.6em;padding:0 .6em}
.sr-card .tc-l{font-size:.62em}
.sr-tally{position:relative;display:flex;align-items:center;gap:.3em;height:1.5em;margin-left:.1em}
.sr-tally i{display:block;width:.19em;height:1.45em;border-radius:.1em;background:var(--ink);transform-origin:50% 0;transform:rotate(5deg) scaleY(var(--k,1))}
.sr-tally .x{position:absolute;left:-.35em;top:.62em;width:2.05em;height:.19em;transform-origin:0 50%;transform:rotate(-24deg) scaleX(var(--k,1))}
.sr-trk{position:relative;height:100%}
.sr-trk::after{content:'';position:absolute;right:.25em;top:50%;width:.55em;height:.55em;margin-top:-.3em;border:solid rgba(20,20,20,.6);border-width:.14em .14em 0 0;transform:rotate(45deg)}
.sr-line{position:absolute;left:.3em;right:.35em;top:50%;height:.14em;margin-top:-.07em;background:repeating-linear-gradient(90deg,rgba(20,20,20,.6) 0 .45em,rgba(0,0,0,0) .45em .8em)}
.sr-slip{position:absolute;z-index:2;top:50%;left:calc(var(--k,1) * 100%);padding:.35em .5em;border-radius:.12em;background:#fff1b8;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 .25em .35em -.1em rgba(0,0,0,.35);
  font-family:Plex,monospace;font-weight:500;font-size:.56em;letter-spacing:.06em;text-transform:uppercase;color:#2a2c2e;white-space:nowrap;
  opacity:min(1,calc(var(--k,1) * 8));transform:translate(calc(var(--k,1) * -100%),-50%) rotate(calc(-3deg + 4 * var(--k,1) * (1 - var(--k,1)) * -6deg))}
.sr-erp{display:flex;align-items:center;gap:.5em;height:2.6em;padding:0 .6em 0 .75em;background:var(--card);border-radius:.18em;box-shadow:0 0 0 1px rgba(0,0,0,.17),0 .15em .25em rgba(0,0,0,.2)}
.sr-erp .mk{font-size:.95em;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sr-mgs{position:relative;flex:none;width:1.3em;height:1.3em;margin-left:auto}
.sr-mgs .mg{position:absolute;inset:0;width:auto;height:auto}
.sr-y{opacity:calc(1 - var(--k,1))}
.sr-g{opacity:var(--k,1);transform:scale(calc(2.2 - 1.2 * var(--k,1)))}
.sr-ok{margin:.15em 0 0 auto;font-size:.9em}
.sr-chat{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.45em .8em;width:max-content;max-width:100%;margin:.9em 0 .3em;padding:.7em .9em;background:#fff;border-radius:.9em .9em .9em .2em;
  box-shadow:0 0 0 1px rgba(0,0,0,.18),0 .4em .7em -.3em rgba(0,0,0,.35);transform-origin:0 100%;opacity:min(1,calc(var(--k,1) * 2));transform:scale(calc(.55 + .45 * var(--k,1)))}
.sr-who{flex-basis:100%;font-family:Plex,monospace;font-weight:500;font-size:.6em;letter-spacing:.08em;text-transform:uppercase;color:#4d5357}
.sr-q{font-weight:700;font-size:.95em}
.sr-btn{display:inline-flex;align-items:center;gap:.35em;padding:.3em .75em;border-radius:2em;border:.12em solid var(--c-g);font-family:Plex,monospace;font-weight:500;font-size:.75em;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(46,139,74,var(--k,1));color:rgb(calc(46 + 209 * var(--k,1)) calc(139 + 116 * var(--k,1)) calc(74 + 181 * var(--k,1)));transform:scale(calc(1 - var(--k,1) * (1 - var(--k,1)) * .5))}
.sr-ck{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k,1))}
/* Szene Gravur: der Laser schreibt, die Karte wandert durch ihre eigene Spalte */
.sc-las{--cg:.7em;--pitch:3em}
.sl-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cg)}
.sl-trk{position:relative;height:3em;margin-top:.45em}
.sl-card{--col:2;--lift:0;position:absolute;left:0;top:.3em;z-index:1;width:calc((100% - 2 * var(--cg)) / 3);height:2.3em;
  transform:translateX(calc(var(--col) * (100% + var(--cg)))) rotate(calc(var(--lift) * -3deg))}
.sl-card .tc-head{height:100%;gap:.4em}
.sl-card .tc-l{font-size:.58em}
.sl-st{margin-left:auto;width:1.05em;height:1.05em;opacity:var(--k,1);transform:scale(calc(2.2 - 1.2 * var(--k,1)))}
.sl-svg{width:100%;height:auto;margin-top:.5em;overflow:visible}
.sl-rail{fill:#9ea6ab}
.sl-head rect{fill:#1a1c1e}
.sl-head .sl-lens{fill:#55595d}
.sl-plate{fill:#2a2e32;stroke:#62696f;stroke-width:1.5}
.sl-eng path{fill:none;stroke:#eceee8;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sl-beam,.sl-glow,.sl-dot{opacity:var(--on,0)}
.sl-beam{stroke:#ff4a36;stroke-width:1.3}
.sl-glow{stroke:rgba(255,90,60,.3);stroke-width:6;stroke-linecap:round}
.sl-dot{fill:#fff6ee;stroke:#ff4a36;stroke-width:2}

/* ---------- Demo-Ansichten: angepinnte Ausdrucke ---------- */
.shots{padding:clamp(80px,13vh,150px) var(--wrap) clamp(70px,11vh,130px);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.05) 18%,rgba(0,0,0,.05))}
.shots-head{max-width:44rem;margin-bottom:clamp(40px,7vh,72px)}
.shots-head h2{font-size:clamp(2rem,4.6vw,4.4rem);margin-top:14px}
.shots-note{margin-top:14px;color:var(--text-2);font-size:1.0625rem}
.shots-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,4vw,48px) clamp(18px,2.6vw,36px)}
.shot{--rot:0deg;--mc:var(--c-r);margin:0}
.s1{--rot:-1.2deg;--mc:var(--c-r)}.s2{--rot:.9deg;--mc:var(--c-b)}.s3{--rot:-.6deg;--mc:var(--c-y)}.s4{--rot:1.3deg;--mc:var(--c-g)}
.shot a{position:relative;display:block;padding:8px;border-radius:2px;background:#fbfbf8;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 18px 30px -16px rgba(0,0,0,.6);transform:rotate(var(--rot));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.shot a::before{content:'';position:absolute;top:-10px;left:50%;z-index:2;width:24px;height:24px;margin-left:-12px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.75) 0,rgba(255,255,255,.18) 22%,rgba(255,255,255,0) 46%),var(--mc);box-shadow:0 2px 3px rgba(0,0,0,.4),0 6px 10px -4px rgba(0,0,0,.35);transition:transform .4s cubic-bezier(.3,1.5,.55,1),opacity .3s}
.shot a:hover{transform:rotate(0deg) translateY(-4px)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:1122/1402;background:#9ea5aa}
.shot figcaption{margin-top:16px;display:flex;flex-direction:column;gap:4px}
.shot figcaption b{font-weight:700;font-size:1rem;line-height:1.35;color:var(--ink)}
.shot figcaption span{font-weight:500;font-size:.8125rem;line-height:1.4;color:var(--text-2)}

/* ---------- Zusammenspiel: Nebentafel mit Markerlinien ---------- */
.net{padding:clamp(80px,13vh,150px) var(--wrap) clamp(30px,6vh,70px)}
.net-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(76px,.4fr) minmax(0,.66fr) minmax(76px,.4fr) minmax(0,1fr);align-items:center;border-width:clamp(8px,.8vw,12px);padding:clamp(22px,3vw,44px) clamp(18px,2.6vw,40px)}
.net-board>*{position:relative;z-index:1}
.nl{display:flex;flex-direction:column;gap:10px;height:100%;padding:16px 18px 20px;border-radius:4px;background:var(--card);color:var(--text);text-decoration:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.2),0 12px 20px -14px rgba(0,0,0,.55);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.nl:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 0 0 1px rgba(0,0,0,.2),0 20px 26px -14px rgba(0,0,0,.55)}
.nl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nl-code{font-family:Plex,monospace;font-weight:500;font-size:.8125rem;letter-spacing:.1em;color:var(--text-2)}
.nl-top .mg{width:18px;height:18px;opacity:var(--k,1);transform:scale(calc(2.2 - 1.2 * var(--k,1)))}
.nl-t{font-weight:800;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1;text-transform:uppercase;color:var(--ink)}
.nl-d{font-size:1rem;line-height:1.5}
.nl-go{display:inline-flex;gap:8px;margin-top:auto;padding-top:4px;font-family:Plex,monospace;font-weight:500;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.nl:hover .nl-go span{transform:translateX(3px)}
.nl-go span{transition:transform .25s}
.nw{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 10px;pointer-events:none}
.nw-l{max-width:100%;font-family:Plex,monospace;font-weight:500;font-size:.75rem;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;text-align:center;color:#2f3438}
.nw-ln{position:relative;display:block;width:100%;height:4px;border-radius:2px 3px 2px 3px;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--k,1))}
.nw-ln::after{content:'';position:absolute;right:-1px;top:50%;width:11px;height:11px;margin-top:-6px;border:solid var(--ink);border-width:4px 4px 0 0;border-radius:1px;transform:rotate(45deg);opacity:clamp(0,calc(var(--k,1) * 6 - 5),1)}
.nw-2 .nw-ln{transform-origin:100% 50%}
.nw-2 .nw-ln::after{right:auto;left:-1px;transform:rotate(-135deg)}
.nl-hub{--lift:0;--d:1;position:relative;height:5.4em;font-size:clamp(14px,1.25vw,17px);pointer-events:none}
.nl-hub .tc-head{height:60%;gap:.55em;padding:0 .7em}
.nl-hub .tc-l{font-size:.62em}
.nl-hub .mk{font-size:1.05em}
.nl-hub .tc-stem{gap:.4em}
.nl-hub .mm{width:.8em;height:.8em}

/* ---------- Technik & Rolle: Steckkarten im Rahmen ---------- */
.tech{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(28px,5vw,90px);align-items:start;padding:clamp(70px,11vh,130px) var(--wrap) clamp(10px,3vh,30px)}
.tech-head h2{font-size:clamp(2rem,4vw,3.8rem);margin-top:14px}
.rack{margin:0;border-width:clamp(8px,.8vw,12px);padding:clamp(6px,1vw,12px) clamp(14px,2vw,26px)}
.rk{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);align-items:center;gap:8px 16px;padding:12px 0}
.rk+.rk{border-top:1px solid rgba(40,45,50,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
.rk dt{justify-self:start;padding:.42em .7em;border-radius:2px;background:#1a1c1e;color:#f4f4f1;font-family:Plex,monospace;font-weight:500;font-size:.8125rem;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 .12em .18em rgba(0,0,0,.35)}
.rk dd{display:flex;align-items:center;gap:12px;margin:0;padding:9px 14px;border-radius:3px;background:var(--card);font-weight:600;font-size:1.0625rem;line-height:1.4;color:var(--ink);box-shadow:0 0 0 1px rgba(0,0,0,.17),0 2px 4px rgba(0,0,0,.18)}
.rk-on{width:18px;height:18px;margin-left:auto}
/* Szene Aufbau: Ereignisse laufen von weclapp über n8n zur Oberfläche, Buchungen den Weg zurück */
.tech-sc{container-type:inline-size;max-width:390px;margin-top:clamp(30px,5vh,52px)}
.sc-arch{padding:1em 1.1em;font-size:clamp(11px,4.1cqw,16px)}
.sa-node{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:.55em .8em;background:var(--card);border-radius:.2em;box-shadow:0 0 0 1px rgba(0,0,0,.17),0 .15em .25em rgba(0,0,0,.2)}
.sa-node .mk{font-size:1.1em}
.sa-sub,.sa-l{font-family:Plex,monospace;font-weight:500;font-size:.62em;letter-spacing:.07em;text-transform:uppercase;color:#3d4347}
.sa-pair{position:relative;z-index:1;display:grid;grid-template-columns:2em minmax(0,1fr) minmax(0,1fr) 2em;align-items:center;gap:0 .4em;height:4.4em}
.sa-r{text-align:right}
.sa-lane{position:relative;height:100%}
.sa-ln{position:absolute;left:50%;top:.25em;bottom:.3em;width:.14em;margin-left:-.07em;background:repeating-linear-gradient(180deg,rgba(20,20,20,.55) 0 .45em,rgba(0,0,0,0) .45em .8em)}
.sa-lane::after{content:'';position:absolute;left:50%;bottom:.25em;width:.5em;height:.5em;margin-left:-.27em;border:solid rgba(20,20,20,.62);border-width:0 .14em .14em 0;transform:rotate(45deg)}
.sa-up::after{top:.25em;bottom:auto;transform:rotate(-135deg)}
.sa-mg{position:absolute;left:50%;width:1.1em;height:1.1em;margin-left:-.55em;top:calc(.15em + var(--k,1) * (100% - 2.25em));opacity:min(1,calc(var(--k,1) * 6))}
.sa-up .sa-mg{top:calc(.9em + (1 - var(--k,1)) * (100% - 2.15em))}

/* ---------- Abschluss ---------- */
.end{padding:clamp(80px,13vh,150px) var(--wrap) 36px}
.end-q{max-width:24ch;font-weight:800;font-size:clamp(1.7rem,3.6vw,3.4rem);line-height:1.02;letter-spacing:-.005em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.end-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,5vh,48px)}
.end-nav a{display:inline-flex;align-items:center;gap:8px;padding:13px 18px;border-radius:3px;background:#f7f7f3;color:var(--ink);font-family:Plex,monospace;font-weight:500;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 8px 14px -10px rgba(0,0,0,.5);transition:background-color .2s}
.end-nav a:hover{background:#fff}
.end-nav .end-back{background:#1a1c1e;color:#f4f4f1}
.end-nav .end-back:hover{background:#000}
.more{margin-top:clamp(56px,9vh,96px)}
.more-t{margin-bottom:16px;font-family:Plex,monospace;font-weight:500;font-size:.8125rem;line-height:1.4;letter-spacing:.14em;color:var(--text-2)}
.more-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr) minmax(0,1fr);gap:18px}
.mc{position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;margin-bottom:14px;padding:18px 20px 20px;border-radius:4px;background:var(--card);color:var(--ink);text-decoration:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.2),0 12px 20px -14px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.mc-d{font-family:Plex,monospace;font-weight:500;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.mc b{font-weight:800;font-size:clamp(1.25rem,2.1vw,1.8rem);line-height:1.02;text-transform:uppercase}
.mc-next{align-items:flex-end;text-align:right}
.mc-all{align-items:center;text-align:center;background:#1a1c1e;color:#f4f4f1}
.mc-all .mc-d{color:#c9ced1}
.mc-all::after{background:#2c2f31}
.mc:hover{transform:translateY(-6px) rotate(-.8deg);box-shadow:0 0 0 1px rgba(0,0,0,.2),0 22px 28px -14px rgba(0,0,0,.55)}
.mc-next:hover{transform:translateY(-6px) rotate(.8deg)}
.end-sig{margin-top:clamp(48px,8vh,80px);padding-top:18px;border-top:1px solid rgba(0,0,0,.2);font-family:Plex,monospace;font-weight:500;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}

/* ---------- Bewegung (nur ohne Wunsch nach reduzierter Bewegung) ---------- */
@media (prefers-reduced-motion:no-preference){
  .ln>span{animation:pp-rise 1s cubic-bezier(.2,.8,.2,1) .1s both}
  .ln-2>span{animation-delay:.2s}
  .ln-2>span::after{animation:pp-line .7s cubic-bezier(.65,0,.35,1) 1.05s both}
  .hero-kick,.hero-sub{animation:pp-fade .8s cubic-bezier(.2,.8,.2,1) both}
  .hero-sub{animation-delay:.5s}
  .hc{animation:pp-plug 2.7s cubic-bezier(.65,0,.35,1) .35s both}
  .hc .mg{animation:pp-drop .5s cubic-bezier(.3,1.5,.55,1) both}
  .hc-ok .mg{animation-delay:.95s}.hc-part .mg{animation-delay:1.12s}.hc-stop .mg{animation-delay:1.29s}
  .pp-reveal .shot a{transform:translateY(-22px) rotate(calc(var(--rot) * 3))}
  .pp-reveal .shot a::before{opacity:0;transform:scale(2.2)}
  .pp-reveal .shot.in a{transform:rotate(var(--rot))}
  .pp-reveal .shot.in a::before{opacity:1;transform:none}
  .pp-reveal .shot.in a:hover{transform:rotate(0deg) translateY(-4px)}
  .pp-reveal .s2 a,.pp-reveal .s2 a::before{transition-delay:.08s}.pp-reveal .s3 a,.pp-reveal .s3 a::before{transition-delay:.16s}.pp-reveal .s4 a,.pp-reveal .s4 a::before{transition-delay:.24s}
  .pp-reveal .statement em{background-size:0 .16em;transition:background-size .9s cubic-bezier(.65,0,.35,1)}
  .pp-reveal .statement em.k-menge{transition-delay:.25s}.pp-reveal .statement em.k-mat{transition-delay:.5s}
  .pp-reveal .statement.in em{background-size:100% .16em}
  /* Technik & Rolle: Etiketten laufen ein, Karten werden der Reihe nach gesteckt, zuletzt der grüne Magnet für „in Betrieb“ */
  .pp-reveal .rk dt{clip-path:inset(0 100% 0 0);transition:clip-path .45s cubic-bezier(.65,0,.35,1)}
  .pp-reveal .rk dd{transform:translateY(-9px) rotate(-1.4deg);box-shadow:0 0 0 1px rgba(0,0,0,.17),0 12px 16px -6px rgba(0,0,0,.32);transition:transform .6s cubic-bezier(.3,1.35,.5,1),box-shadow .6s}
  .pp-reveal .rk-on{opacity:0;transform:scale(2.3);transition:opacity .25s,transform .45s cubic-bezier(.3,1.5,.55,1)}
  .pp-reveal .rack.in dt{clip-path:inset(-4px -4px -6px -4px)}
  .pp-reveal .rack.in dd{transform:none;box-shadow:0 0 0 1px rgba(0,0,0,.17),0 2px 4px rgba(0,0,0,.18)}
  .pp-reveal .rack.in .rk-on{opacity:1;transform:none;transition-delay:1.05s}
  .pp-reveal .rk:nth-child(2)>*{transition-delay:.09s}.pp-reveal .rk:nth-child(3)>*{transition-delay:.18s}.pp-reveal .rk:nth-child(4)>*{transition-delay:.27s}
  .pp-reveal .rk:nth-child(5)>*{transition-delay:.36s}.pp-reveal .rk:nth-child(6)>*{transition-delay:.45s}.pp-reveal .rk:nth-child(7)>*{transition-delay:.54s}
  /* Weitere Projekte: zurück kommt von links, weiter von rechts, die Übersicht wird gesteckt */
  .pp-reveal .more .mc{transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
  .pp-reveal .more:not(.in) .mc-prev{transform:translateX(-26px) rotate(-1.5deg)}
  .pp-reveal .more:not(.in) .mc-all{transform:translateY(-14px) rotate(1deg)}
  .pp-reveal .more:not(.in) .mc-next{transform:translateY(14px) rotate(1.5deg)}
  .pp-reveal .more .mc-all{transition-delay:.08s}.pp-reveal .more .mc-next{transition-delay:.16s}
  .pp-reveal .more.in .mc:hover{transition-delay:0s}
}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  .pp-reveal .more:not(.in) .mc-next{transform:translateX(26px) rotate(1.5deg)}
}
@keyframes pp-rise{from{transform:translateY(105%)}}
@keyframes pp-fade{from{opacity:0;transform:translateY(16px)}}
@keyframes pp-line{from{transform:rotate(-.45deg) scaleX(0)}}
@keyframes pp-drop{from{opacity:0;transform:scale(2.3)}}
@keyframes pp-plug{
  0%{opacity:0;transform:translate(calc((var(--col) + var(--fx)) * (100% + var(--cg))),calc((var(--slot) + var(--fy)) * var(--hp) - 1.4em))}
  16%,52%{opacity:1;transform:translate(calc((var(--col) + var(--fx)) * (100% + var(--cg))),calc((var(--slot) + var(--fy)) * var(--hp)))}
  70%{transform:translate(calc((var(--col) + var(--fx) * .45) * (100% + var(--cg))),calc((var(--slot) + var(--fy) * .45) * var(--hp) - .5em)) rotate(-2.5deg) scale(1.06)}
  100%{opacity:1;transform:translate(calc(var(--col) * (100% + var(--cg))),calc(var(--slot) * var(--hp)))}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation:none!important}
}

/* ---------- Tablet und Mobil ---------- */
@media (max-width:1100px){
  .shots-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tech{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,5vh,44px)}
}
@media (max-width:899px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"kick" "title" "sub" "board"}
  .hero h1{font-size:clamp(2.1rem,9.6vw,5rem)}
  .hboard{justify-self:stretch;max-width:34rem;margin-top:40px}
  .intro-in{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .situ{grid-template-columns:minmax(0,1fr);row-gap:clamp(32px,6vh,48px)}
  .sc-join{margin-inline:auto}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-grid{display:flex;flex-direction:column}
  .stage-wrap{order:-1;display:block;align-self:stretch;height:auto;z-index:3;margin-inline:calc(-1 * var(--wrap));padding:10px var(--wrap) 18px;
    background:linear-gradient(180deg,var(--steel) 0,var(--steel) calc(100% - 18px),rgba(197,202,205,0))}
  .board{--pitch:3.7em;font-size:clamp(9.5px,min(3.1cqw,1.75svh),14px)}
  .step{min-height:78svh;align-items:flex-end}
  .step-in{padding:0 0 6svh;scroll-margin-top:calc(var(--stage-h,58svh) + 16px)}
  .step h3{font-size:clamp(1.4rem,5.8vw,2.1rem);margin-bottom:12px}
  .step p:not(.s-kick){font-size:1.0625rem}
  .s-kick{margin-bottom:10px}
  .deep-board{margin-inline:calc(8px - var(--wrap));padding:0 clamp(14px,4vw,32px)}
  .dr{grid-template-columns:minmax(0,1fr);row-gap:clamp(26px,4vh,36px);padding:clamp(30px,5vh,44px) 0}
  .dr-alt .dr-tx{order:0}
  .net-board{grid-template-columns:minmax(0,1fr)}
  .nw{flex-direction:row;height:84px;gap:14px}
  .nw-l{order:2;text-align:left}
  .nw-ln{flex:none;width:4px;height:100%;transform-origin:50% 0;transform:scaleY(var(--k,1))}
  .nw-ln::after{right:auto;left:50%;top:auto;bottom:-1px;margin:0 0 0 -6px;transform:rotate(135deg)}
  .nw-2 .nw-ln{transform-origin:50% 100%}
  .nw-2 .nw-ln::after{top:-1px;bottom:auto;left:50%;transform:rotate(-45deg)}
  .nl-hub{justify-self:center;width:min(100%,17em)}
}
@media (max-width:899px) and (max-height:720px){
  .board{--pitch:3.3em}
  .legend{display:none}
}
@media (max-width:899px) and (max-height:680px){
  .board{--pitch:3em}
  .step-in{padding-bottom:4svh}
}
@media (max-width:899px) and (max-height:500px){
  .stage-wrap{position:relative}
  .step{min-height:0;padding-top:48px}
}
@media (max-width:599px){
  .features{grid-template-columns:minmax(0,1fr)}
  .more-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .mc-next{align-items:flex-start;text-align:left}
  .rk{grid-template-columns:minmax(0,1fr)}
  .sc-rm{--mid:5.2em}
}
@media (max-width:420px){
  .flow-head h2,.deep-head h2,.net-head h2,.shots-head h2{font-size:clamp(1.6rem,8.4vw,2rem)}
  .dr h3{font-size:clamp(1.3rem,6.6vw,1.6rem)}
}
@media (max-width:520px){
  .owner{letter-spacing:.14em;font-size:.6875rem}
  .code{display:none}
  .end-nav a{width:100%;justify-content:center}
}
@media (max-width:359px){
  .top{gap:8px}
  .back{gap:6px;padding:0 10px;font-size:.875rem;letter-spacing:.03em}
  .owner{letter-spacing:.06em}
  .shots-grid{grid-template-columns:minmax(0,1fr);padding:0 16px}
  .step p:not(.s-kick){font-size:1rem}
}

/* ---------- Druck ----------
   Papier statt Stahlblech: die Seite bleibt weiß, Tafeln, Steckkarten, Magnete, Schilder und Balken werden aber
   mitgedruckt (es sind Hintergründe, die die Aussage tragen); Tiefenschatten der Tafeln entfallen. Die Plantafel steht
   einmal über den Schritten statt angepinnt daneben, Schritthöhen und Knöpfe entfallen. Bewegungen setzt das Skript
   beim Drucken auf den Endzustand aus dem HTML. */
@media print{
  html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body,.shots{background:#fff}
  body{zoom:.8}
  .back,.cta{display:none}
  .frame{box-shadow:none}
  .hero{padding-bottom:40px}
  .intro,.deep,.shots,.net{padding-block:48px 24px}
  .flow{padding-top:48px}
  .tech{padding-block:48px 16px}
  .end{padding-top:48px}
  .stage-wrap{position:static;height:auto;margin-inline:0;padding:0 0 8px;background:none}
  .flow-steps{padding-bottom:0}
  .step{min-height:0}
  .step-in{padding:14px 0}
  .situ,.f-wrap,.more,.end-sig{margin-top:32px}
  .dr{padding-block:24px}
  .shot{padding-top:12px}                                          /* die Pinnnadel ragt sonst auf die Vorseite */
  h1,h2,h3,.kicker,.s-kick,.dr-k,.f-title,.more-t,.flow-head,.deep-head,.shots-head,.net-head,.tech-head{break-after:avoid}
  h2,h3,.flow-head,.deep-head,.shots-head,.net-head,.tech-head,.hboard,.sc,.features li,.stage,.step-in,.dr-tx,.shot,.nl,.nw,.nl-hub,.rk,.tech-sc,.end-nav,.more-row{break-inside:avoid}
}