/* 3D-Druck – eigene Projektseite. Welt: Schicht für Schicht – Filament und Druckplatte.
   Einstieg auf Filament-Orange mit schwarzer Schrift; jeder Abschnitt wechselt die Filamentfarbe (Weiß, Schwarz,
   Blau, Grün), der Wechsel selbst wird als erste Bahnen der neuen Farbe gelegt. Bühnen sind Druckplatten in
   Anthrazit mit feinem Raster, Farben erscheinen als Filamentrollen, Messwerte in Mono wie auf einem Rollenetikett.
   Leitmotiv: Ein Teil entsteht Schicht für Schicht aus waagerechten Bahnen, Aufträge verteilen sich aus der
   Warteschlange auf die Drucker, die Rolle wird leichter, vor dem nächsten Start muss die Platte frei sein. */

/* ---------- 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:#16130f}
  ::view-transition-old(root){animation:sw-zurueck .6s cubic-bezier(.5,0,.2,1) both;mix-blend-mode:normal}
  ::view-transition-new(root){animation:sw-herein .8s cubic-bezier(.16,1,.3,1) .05s both;mix-blend-mode:normal}
}
@keyframes sw-zurueck{to{transform:translateY(-4%) scale(.9);opacity:.2}}
@keyframes sw-herein{from{transform:translateY(100%)}}

@font-face{font-family:Unbounded;src:url('../fonts/unbounded-normal-400_900-latin.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:Unbounded;src:url('../fonts/unbounded-normal-400_900-latin-ext.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url('../fonts/inter-normal-400_700-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/inter-normal-400_700-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url('../fonts/jetbrains-mono-normal-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --o:#ff6a13;--w:#f7f5f0;--b:#2447e0;--b-dk:#132c9e;--gn:#127a39;--s:#16130f;--r:#c81e1e;--pl:#2b2d31;--grau:#45403a;
  --disp:Unbounded,"Arial Black",system-ui,sans-serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --gut:clamp(16px,4vw,56px);--maxw:1400px;
  --raster:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/14px 14px;
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;background:var(--o);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-width:320px;overflow-x:clip;font:400 1.0625rem/1.6 var(--sans);color:var(--s);background:var(--s);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
i,em,u{font-style:normal;text-decoration:none}
:focus-visible{outline:3px solid var(--fg,var(--s));outline-offset:3px;border-radius:8px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-90px;z-index:30;padding:10px 18px;border-radius:999px;background:var(--s);color:var(--w);font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Filamentfarben: jeder Abschnitt trägt eine; Text, Nebentext, Akzent und Tönung folgen ---------- */
.g{background:var(--bg);color:var(--fg)}
.g-o{--bg:var(--o);--fg:var(--s);--fg2:#27160a;--ak:var(--s);--ton:rgba(22,19,15,.1);--linie:rgba(22,19,15,.34)}
.g-w{--bg:var(--w);--fg:var(--s);--fg2:var(--grau);--ak:var(--o);--ton:rgba(22,19,15,.06);--linie:rgba(22,19,15,.26)}
.g-b{--bg:var(--b);--fg:#fff;--fg2:#f0f3ff;--ak:var(--o);--ton:rgba(0,0,0,.2);--linie:rgba(255,255,255,.4)}
.g-g{--bg:var(--gn);--fg:#fff;--fg2:#fff;--ak:var(--w);--ton:rgba(0,0,0,.2);--linie:rgba(255,255,255,.45)}
.g-s{--bg:var(--s);--fg:var(--w);--fg2:#d8d2c7;--ak:var(--o);--ton:rgba(247,245,240,.09);--linie:rgba(247,245,240,.36)}
.c-w{--c:#f7f5f0}.c-b{--c:#2447e0}.c-r{--c:#c81e1e}.c-o{--c:#ff6a13}.c-g{--c:#127a39}.c-s{--c:#16130f}

/* Farbwechsel: fünf Bahnen der nächsten Farbe, von dünn nach dick – darunter beginnt der neue Abschnitt */
.wechsel{display:grid;grid-template-rows:22fr 3fr 16fr 6fr 11fr 10fr 6fr 12fr 3fr 11fr;height:clamp(72px,9vw,128px);margin-bottom:-1px;position:relative;overflow:clip visible;background:var(--bg);color:var(--fg)}
.wechsel::before{content:"Rollenwechsel · " attr(data-zu);position:absolute;right:var(--gut);top:-28px;font:400 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.wechsel i{margin-inline:-48px;border-radius:99px;background:var(--zu)}
.wechsel i:nth-child(1){grid-row:2}.wechsel i:nth-child(2){grid-row:4}.wechsel i:nth-child(3){grid-row:6}.wechsel i:nth-child(4){grid-row:8}.wechsel i:nth-child(5){grid-row:10}
.zu-o{--zu:var(--o)}.zu-w{--zu:var(--w)}.zu-b{--zu:var(--b)}.zu-g{--zu:var(--gn)}.zu-s{--zu:var(--s)}

/* ---------- Kopf ----------
   Eine Grammatik auf allen Projektseiten (Freigabe 31.10.2026): links „← Profil“, rechts „Demo ausprobieren“ direkt vor dem
   Namen, der ganz rechts zur Startseite führt; volle Breite, jedes Ziel mindestens 44 px hoch, bei 320 px alles in einer Zeile. */
.top{display:flex;align-items:center;gap:12px;padding:18px clamp(16px,3vw,40px);background:var(--o);color:var(--s)}
.back{display:inline-flex;flex:none;align-items:center;gap:10px;min-height:44px;padding:8px 20px 8px 16px;border:2px solid var(--s);border-radius:999px;color:var(--s);font-weight:600;white-space:nowrap;text-decoration:none;transition:background-color .25s,color .25s}
.back:hover{background:var(--s);color:var(--w)}
.back.demo{margin-left:auto;gap:0;background:var(--s);color:var(--w)} /* Bedien-Demo mit Fantasiedaten (demo-3d-druck.html), steht direkt vor dem Namen */
.back.demo:hover{background:var(--pl);border-color:var(--pl)}
@media (max-width:599px){.demo-zusatz{display:none}}
.back span[aria-hidden]{font-size:1.15em;line-height:1}
.brand{display:inline-flex;flex:none;align-items:center;min-height:44px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.brand::before{content:"";flex:none;width:12px;height:12px;margin-right:9px;border:3.5px solid var(--s);border-radius:50%}
.brand:hover{text-decoration:underline;text-underline-offset:.3em}
@media (max-width:400px){.top{gap:8px}.back{gap:6px;padding:0 12px}.brand{font-size:.75rem;letter-spacing:.01em}.brand::before{margin-right:6px}}
@media (max-width:359px){.back{padding:0 10px;font-size:1rem}.brand{letter-spacing:0}.brand::before{width:10px;height:10px;border-width:3px;margin-right:5px}}

/* ---------- Schrift ---------- */
.et,.eyebrow,.kicker,.nr{font:400 .875rem/1.35 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.et{font-size:.8125rem;letter-spacing:.06em}
.kicker{display:flex;align-items:center;gap:10px}
.kicker::before{content:"";flex:none;width:28px;height:9px;border-radius:99px;background:var(--ak)}
h2{max-width:19em;margin-top:14px;font:700 clamp(1.625rem,1.05rem + 2.5vw,3.25rem)/1.08 var(--disp);letter-spacing:-.03em;text-wrap:balance;overflow-wrap:break-word}
h3{text-wrap:balance;overflow-wrap:break-word}
.nw{white-space:nowrap}

/* ---------- Einstieg: der Name steht als Druckteil auf dem Bett, darüber Achse und Düse ---------- */
.hero{overflow:clip;padding:clamp(4px,1.4vh,18px) var(--gut) clamp(36px,6.5vh,76px)}
.hero__in{display:flex;flex-direction:column;justify-content:center;max-width:var(--maxw);min-height:min(calc(100svh - 190px),780px);margin:0 auto}
.druck{--kopf:clamp(36px,4.4vw,56px);position:relative;display:block;margin-top:clamp(22px,3.2vh,34px);padding-top:var(--kopf);font:700 clamp(3.1rem,min(15.4vw,31svh),14.5rem)/.9 var(--disp);letter-spacing:-.045em}
.h1-name{--lage:max(4px,.05em);--fuge:max(1px,.0075em);display:block;width:fit-content;white-space:nowrap;
  -webkit-mask-image:repeating-linear-gradient(to top,#000 0 calc(var(--lage) - var(--fuge)),transparent calc(var(--lage) - var(--fuge)) var(--lage));
  mask-image:repeating-linear-gradient(to top,#000 0 calc(var(--lage) - var(--fuge)),transparent calc(var(--lage) - var(--fuge)) var(--lage))}
.bett{position:relative;display:block;height:clamp(10px,1.25vw,18px);margin-top:-.085em;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 14px),var(--pl)}
.bett::before,.bett::after{content:"";position:absolute;top:100%;left:6%;width:clamp(18px,3vw,44px);height:clamp(5px,.6vw,9px);border-radius:0 0 3px 3px;background:var(--pl)}
.bett::after{left:auto;right:6%}
.achse{position:absolute;left:0;right:0;top:calc(var(--kopf) - 29px);height:3px;border-radius:2px;background:var(--s)}
.achse__info{position:absolute;right:0;bottom:9px;font:400 .8125rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.achse__info::before{content:"Schicht " attr(data-n) " / 172"} /* Zähler als Zierde: steht nicht im Text der Überschrift */
.duese{position:absolute;right:3%;top:0;width:clamp(26px,2.6vw,36px);height:29px;background:var(--s);clip-path:polygon(0 0,100% 0,100% 58%,72% 58%,50% 100%,28% 58%,0 58%)}
.h1-q{display:block;max-width:21em;margin-top:clamp(24px,4vh,40px);font:700 clamp(1.25rem,.85rem + 1.7vw,2.25rem)/1.16 var(--disp);letter-spacing:-.025em;text-wrap:balance}
.hero__fuss{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;margin-top:clamp(16px,2.6vh,26px)}
.lead{max-width:37em;font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);line-height:1.5}
.cue{display:inline-flex;align-items:center;gap:12px;min-height:46px;font-weight:700;text-decoration:none;white-space:nowrap}
.cue i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--s);color:var(--o);transition:background-color .25s,color .25s}
.cue:hover i{background:var(--w);color:var(--s)}

/* ---------- Abschnitte allgemein ---------- */
.lage,.fn,.detail,.demo-sec,.bezug,.technik,.more{padding:clamp(56px,10vh,116px) var(--gut) clamp(72px,11vh,128px)}
.lage>*,.fn>*,.detail>*,.demo-sec>*,.bezug>*,.technik>*,.more>*{max-width:var(--maxw);margin-inline:auto}
.zwei,.schritt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,88px);align-items:center}
.zwei__text p:not(.kicker),.schritt__text p:not(.nr),.kopf__lead{max-width:34em;margin-top:16px;color:var(--fg2)}
.zwei__text h2{margin-bottom:6px}
.kopf--zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,88px);align-items:end}
.kopf--zwei .kopf__lead{margin-top:0}

/* Bausteine der Bühnen */
.buehne{position:relative;min-width:0;font-size:.9375rem;line-height:1.35}
.buehne__fuss,.platte__fuss,.mess__fuss,.lager__f{font:400 .75rem/1.4 var(--mono);letter-spacing:.03em}
.platte{position:relative;padding:14px 16px 16px;border-radius:16px;background:var(--raster),var(--pl);color:var(--w);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16)}
.platte::after{content:"";position:absolute;left:50%;top:100%;width:68px;height:10px;margin-left:-34px;border-radius:0 0 9px 9px;background:var(--pl)} /* Griff der Platte */
.platte__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font:400 .8125rem/1.4 var(--mono);letter-spacing:.04em}
.platte__kopf b{font-weight:400;text-transform:uppercase}
.platte__fuss{display:block;color:#d8d2c7}
.platte__fuss b{font-weight:400;color:var(--w)}
.acht{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2.4%,16px);margin:14px 0}
.platz{position:relative;display:block;aspect-ratio:5/4;border:1.5px dashed rgba(247,245,240,.42);border-radius:7px}
.stk{position:absolute;inset:-1.5px;border-radius:7px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 5px),var(--tc,var(--o));box-shadow:inset 0 6px 0 rgba(0,0,0,.3)}
.spule{--d:28px;flex:none;display:block;width:var(--d);height:var(--d);border-radius:50%;background:radial-gradient(circle,var(--pl) 0 12%,var(--w) 14% 25%,var(--pl) 26.5% 29%,var(--c) 30.5% 68%,var(--pl) 70%)}
.platte .spule,.g-s .spule,.dr .spule{box-shadow:0 0 0 1.5px rgba(247,245,240,.65)}
.karte{border:2px solid var(--s);border-radius:18px;background:var(--w);color:var(--s)}
.karte .spule,.job .spule{box-shadow:none}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:99px;background:var(--o);color:var(--s);font-weight:700}
.knopf svg{width:18px;height:18px}
.chip{padding:6px 13px;border:1.5px solid var(--s);border-radius:99px;font-size:.875rem;font-weight:600}
.chip--an{background:var(--s);color:var(--w)}
.pille{display:inline-flex;align-items:center;gap:5px;padding:3px 11px 3px 7px;border-radius:99px;background:var(--gn);color:#fff;font-size:.8125rem;font-weight:700;line-height:1.4;white-space:nowrap}
.pille svg{width:14px;height:14px}
.pille em{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#fff;color:var(--r);font-size:.6875rem;font-weight:700;line-height:1}
.pille--rot{background:var(--r)}

/* ---------- Ausgangslage: eine Platte mit acht Teilen, darunter die sechs Farben als Rollen ---------- */
.buehne--lage{display:grid;gap:30px;justify-self:center;width:100%;max-width:560px}
.farben{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.fb{display:grid;justify-items:center;gap:7px;font:400 .75rem/1.2 var(--mono);color:var(--fg)}
.fb .spule{--d:clamp(36px,4.4vw,54px)}

/* ---------- Funktionen ---------- */
/* Inhaltsverzeichnis als Schichtstapel: sieben Bahnen übereinander */
.fn__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,88px);align-items:end}
.stapel{display:grid;gap:5px}
.stapel a{display:flex;align-items:center;gap:12px;min-height:46px;padding:5px 20px 5px 6px;border:1.5px solid var(--linie);border-radius:99px;background:linear-gradient(var(--w),var(--w)) no-repeat 0 0/0 100%;font-weight:600;text-decoration:none;transition:background-size .35s cubic-bezier(.3,0,.2,1),color .2s .08s,border-color .25s}
.stapel a span{display:grid;place-items:center;flex:none;width:44px;height:32px;border-radius:99px;background:var(--o);color:var(--s);font:400 .8125rem/1 var(--mono)}
.stapel a::after{content:"↓";margin-left:auto;font-weight:400}
.stapel a:hover{border-color:var(--w);background-size:100% 100%;color:var(--s)}
.fn__kopf+.schritt{margin-top:clamp(48px,9vh,96px)}
.schritt+.schritt{margin-top:clamp(72px,14vh,160px)}
.schritt{scroll-margin-top:28px}
.schritt--um{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.schritt--um .schritt__text{order:2}
@media (min-width:960px){.fn--pin .schritt{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
@media (min-width:1300px){.fn--pin .schritt{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr)}}
@media screen and (min-width:960px) and (min-height:620px){.dd-motion .fn--pin{display:grid;align-content:center;min-height:100vh;padding-block:clamp(16px,3vh,48px)}.dd-motion .fn--pin .schritt{width:100%}} /* angeheftet: Szene mittig im Bild */
.nr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.nr span{padding:3px 11px;border:1.5px solid currentColor;border-radius:99px}
.schritt h3{margin-top:16px;font:700 clamp(1.5rem,1.05rem + 1.7vw,2.5rem)/1.1 var(--disp);letter-spacing:-.03em}
.schritt__text .ui{margin-top:22px;padding:13px 18px 15px;border-left:7px solid var(--ak);border-radius:0 14px 14px 0;background:var(--ton);color:var(--fg);font-weight:500}
.ui span{display:block;margin-bottom:4px;font:400 .8125rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* 1 Aufträge planen */
.buehne--plan{justify-self:center;width:100%;max-width:480px}
.plan{display:grid;gap:14px;padding:clamp(16px,2.4vw,26px)}
.plan__t{font-size:1.125rem;font-weight:700}
.plan__z{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;padding-top:14px;border-top:1.5px solid rgba(22,19,15,.18)}
.plan__n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--s);color:var(--w);font:700 .75rem/1 var(--disp)}
.plan__k{font-weight:700}
.plan__farben,.plan__dr,.zaehler,.plan__w{grid-column:1/-1}
.plan__farben,.plan__dr,.zaehler{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.plan__farben{gap:11px;padding:3px}
.plan__farben .spule{--d:34px}
.plan__farben .wahl{outline:3px solid var(--o);outline-offset:3px}
.plan__w{font:400 .8125rem/1.4 var(--mono);color:var(--grau)}
.zaehler i,.zaehler b{display:grid;place-items:center;width:36px;height:36px;border:1.5px solid var(--s);border-radius:9px;font-weight:700}
.zaehler b{border-color:transparent;font-family:var(--disp)}
.plan .knopf{justify-self:start}

/* 2 Warteschlange: Aufträge wandern aus den Plätzen links auf die drei Drucker */
.buehne--vert{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2.4vw,30px);align-items:start}
.schlange,.park,.schlange__in{display:grid;gap:10px;align-content:start}
.schlange__in{padding:9.5px;border:1.5px dashed var(--linie);border-radius:15px}
.slot{display:grid;align-items:center;min-height:64px;padding:0 13px;border-radius:13px;background:var(--ton);font:400 .75rem/1.3 var(--mono);color:var(--fg2)}
.slot--voll{padding:0;background:none}
.job{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 10px;min-height:64px;padding:7px 12px;border-radius:13px;background:var(--w);color:var(--s)}
.job .spule{grid-row:1/3;--d:32px}
.job b{align-self:end;font-size:.9375rem;line-height:1.2}
.job em{align-self:start;font:400 .75rem/1.3 var(--mono);color:var(--grau)}
.dr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:11px;border-radius:15px;outline:3px solid transparent;outline-offset:2px;background:var(--raster),var(--pl);color:var(--w);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16)}
.dr__k{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-size:.875rem}
.zst{padding:2px 9px;border-radius:99px;background:var(--o);color:var(--s);font:400 .75rem/1.4 var(--mono)}
.zst--aus{background:transparent;color:var(--w);box-shadow:inset 0 0 0 1.5px rgba(247,245,240,.6)}
.dr__f{display:flex;align-items:center;gap:5px}
.dr__f .spule{--d:17px}
.dr__platz{grid-column:1/-1;display:block;min-height:64px;border-radius:13px;box-shadow:inset 0 0 0 1.5px rgba(247,245,240,.28)}

/* 3 Drucker: Druckraum mit Teil, daneben die Messwerte */
.buehne--druck{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);gap:clamp(12px,1.8vw,22px);align-items:stretch}
.kammer{position:relative;display:grid;align-items:end;padding:6px 6px 2px;border:10px solid var(--pl);border-radius:26px;background:var(--w)}
.teil{width:100%;height:auto}
.kammer__cam{position:absolute;left:10px;top:10px;padding:3px 9px;border-radius:7px;background:var(--pl);color:var(--w);font:400 .75rem/1.4 var(--mono)}
.mess{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-content:center}
.mw{display:grid;align-content:start;gap:5px;min-width:0;padding:12px 14px;border-radius:15px;background:var(--ton)}
.mw i{font:400 .75rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.mw b{font:700 clamp(.875rem,.78rem + .42vw,1.0625rem)/1.2 var(--disp);letter-spacing:-.02em;white-space:nowrap}
.mw--gross{grid-column:1/-1}
.mw--tasten{align-content:stretch;gap:6px;padding:0;background:none}
.mw--tasten u{display:grid;place-items:center;padding:3px 8px;border:1.5px solid var(--linie);border-radius:99px;font-size:.8125rem;font-weight:600}
.mw--gross b{font-size:clamp(2.5rem,1.7rem + 2.6vw,4rem);line-height:1;letter-spacing:-.04em}
.lauf{display:block;height:10px;margin-top:6px;border-radius:99px;background:var(--linie);overflow:hidden}
.lauf u{display:block;height:100%;border-radius:99px;background:var(--o);transform:scaleX(.42);transform-origin:0 50%}
.mess__fuss{grid-column:1/-1;color:var(--fg2)}

/* 4 Druckplatte frei? */
.buehne--frei{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(22px,2.4vw,30px);align-items:center}
.platte--frei .acht{padding-bottom:18px}
.platte--frei{--tc:var(--w)}
.platte--frei .stk{opacity:0;visibility:hidden}
.wisch{position:absolute;left:0;top:-7px;bottom:-7px;width:14px;border-radius:99px;background:var(--w);opacity:0;visibility:hidden}
.erste{position:absolute;left:0;right:0;bottom:0;height:7px;border-radius:99px;background:var(--o);transform-origin:0 50%}
.frage{display:grid;gap:10px;padding:clamp(16px,2.2vw,24px)}
.frage__t{font-size:1.125rem;font-weight:700;line-height:1.25}
.frage__s{font:400 .8125rem/1.45 var(--mono);color:var(--grau)}
.best{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:0 11px;padding:8px 11px;border:1.5px solid var(--s);border-radius:13px}
.hk{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gn);color:#fff}
.hk svg{width:20px;height:20px}
.best b{align-self:end;line-height:1.2}
.best em{align-self:start;font:400 .75rem/1.3 var(--mono);color:var(--grau)}
.los{padding:10px 14px;border-radius:13px;background:var(--o);font-weight:700;line-height:1.3}

/* 5 Material je Fach: die Rolle wird leichter */
.buehne--rolle{display:grid;gap:16px}
.rolle{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(12px,2vw,26px);align-items:center}
.rolle__svg{width:100%;height:auto;overflow:visible}
.rolle__wert{display:grid;justify-items:start;gap:9px;min-width:0}
.gramm{font:700 clamp(2.25rem,1.5rem + 2.6vw,3.875rem)/1 var(--disp);letter-spacing:-.045em;white-space:nowrap}
.rest{display:flex;width:100%;height:16px;border-radius:99px;background:rgba(22,19,15,.12);overflow:hidden}
.rest__frei{width:69.9%;background:var(--b)}
.rest__plan{width:6.1%;box-shadow:inset 0 0 0 1.5px var(--b)}
.rest__plan b{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--b) 0 3px,rgba(36,71,224,.3) 3px 6px);transform:scaleX(0);transform-origin:0 50%}
.rest__sk{display:flex;justify-content:space-between;width:100%;font:400 .75rem/1.3 var(--mono)}
.minus{font:400 .8125rem/1.45 var(--mono)}
.faecher{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fach{display:grid;align-content:start;justify-items:start;gap:3px;min-width:0;padding:10px 11px;border:2px solid var(--s);border-radius:13px}
.fach .spule{--d:26px;margin-bottom:4px}
.fach b{font-size:.875rem}
.fach em,.fach u{font:400 .75rem/1.35 var(--mono)}
.fach--an{background:var(--s);color:var(--w)}
.fach--an .spule{box-shadow:0 0 0 1.5px rgba(247,245,240,.65)}
.fach u{display:flex;flex-wrap:wrap;align-items:center;gap:2px 5px;color:var(--o)}
.fach u svg{width:14px;height:14px}

/* 6 Material im Lager */
.buehne--lager{justify-self:center;width:100%;max-width:580px}
.lager{display:grid;padding:clamp(14px,2vw,22px) clamp(14px,2vw,24px)}
.lager__k{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding-bottom:12px;font-weight:700;font-size:1.0625rem}
.lager__k i{font:400 .8125rem/1.4 var(--mono)}
.lz{display:grid;grid-template-columns:30px minmax(0,1fr) auto 104px;align-items:center;gap:0 12px;padding:9px 0;border-top:1.5px solid rgba(22,19,15,.16)}
.lz .spule{grid-row:1/3;--d:30px}
.lz>b{grid-column:2;align-self:end;line-height:1.25}
.lz__pl{grid-column:2;align-self:start;font:400 .75rem/1.35 var(--mono);color:var(--grau)}
.lz__kg{grid-column:3;grid-row:1/3;font:700 .9375rem/1 var(--disp);letter-spacing:-.02em;white-space:nowrap}
.lz .pille{grid-column:4;grid-row:1/3;justify-self:end}
.lz--knapp .lz__kg{color:var(--r)}
.lager__f{padding-top:12px;border-top:1.5px solid rgba(22,19,15,.16);color:var(--grau)}

/* 7 Verlauf: jeder Druck eine Bahn; die fehlgeschlagene bricht ab */
.buehne--verlauf{display:grid;gap:10px}
.vz{position:relative;display:grid;min-height:62px;border-radius:16px}
.vz__bahn{position:absolute;inset:0;border-radius:16px;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(22,19,15,.45)}
.vz--fehl{box-shadow:inset 0 0 0 1.5px var(--linie)}
.vz--fehl .vz__bahn{right:42%}
.vz__in{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:11px 12px}
.vz__in>b,.vz__in>em,.vz__b{padding:4px 11px;border-radius:99px;background:var(--w);color:var(--s);font-size:.875rem;line-height:1.4;box-shadow:0 0 0 1.5px var(--s)}
.vz__in>em,.vz__b{font:400 .75rem/1.6 var(--mono)}
.vz .pille{box-shadow:0 0 0 1.5px #fff}
.knopf--kl{padding:5px 14px 5px 10px;font-size:.875rem;box-shadow:0 0 0 1.5px var(--s)}
.buehne--verlauf .buehne__fuss{color:var(--fg2)}

/* ---------- Im Detail: Einstellkarten ---------- */
.regler{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,20px);margin-top:clamp(30px,5vh,52px)}
.rk{display:grid;align-content:start;padding:clamp(18px,1.9vw,26px);border-radius:20px;background:var(--s);color:var(--w)}
.rk__bild{display:flex;flex-wrap:wrap;align-items:center;gap:8px 9px;min-height:64px;margin-bottom:18px;padding-bottom:16px;border-bottom:1.5px solid rgba(247,245,240,.26)}
.rk__wort{font:400 .75rem/1.3 var(--mono);color:#d8d2c7}
.schalter{display:block;width:52px;height:28px;padding:3px;border-radius:99px;background:var(--o)}
.schalter b{display:block;width:22px;height:22px;margin-left:24px;border-radius:50%;background:var(--s)}
.haken2{display:grid;place-items:center;width:24px;height:24px;margin-left:8px;border-radius:7px;background:var(--w);color:var(--s)}
.haken2 svg{width:16px;height:16px}
.puffer{display:flex;gap:3px;width:100%;height:16px}
.puffer b{border-radius:99px;background:var(--w);transform-origin:0 50%}
.puffer b:nth-child(1){flex:9}
.puffer b:nth-child(2){flex:1.6;background:var(--o)}
.puffer b:nth-child(3){flex:1.2;background:repeating-linear-gradient(135deg,var(--o) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1.5px var(--o)}
.datei{display:grid;width:56px;margin-right:22px}
.datei b{height:13px;border-radius:4px;background:var(--pl);box-shadow:inset 0 0 0 1.5px var(--w)}
.datei b+b{margin-top:-5px}
.datei b:nth-child(2){transform:translateX(7px)}
.datei b:nth-child(3){transform:translateX(14px);background:var(--o);box-shadow:none}
.chip2{padding:4px 11px;border:1.5px solid var(--w);border-radius:99px;font:400 .75rem/1.4 var(--mono)}
.rk__tag{font:400 .8125rem/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--o)}
.rk h3{margin-top:8px;font-size:1.3125rem;font-weight:700;line-height:1.2;letter-spacing:-.015em}
.rk p:not(.rk__tag){margin-top:10px;color:#ebe6dc}

/* ---------- Demo: jede Ansicht liegt auf einer Platte ---------- */
.los-link{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:20px;padding:10px 24px;border-radius:99px;background:var(--s);color:var(--w);font-weight:700;text-decoration:none;transition:background-color .25s,color .25s}
.los-link:hover{background:var(--o);color:var(--s)}
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(34px,6vh,64px)}
.shot{min-width:0}
@media (min-width:1100px){.shot:nth-child(even){margin-top:44px}}
.shot a{position:relative;display:block;padding:10px;border-radius:16px;background:var(--raster),var(--pl);transition:transform .25s}
.shot a::after{content:"";position:absolute;left:50%;top:100%;width:68px;height:10px;margin-left:-34px;border-radius:0 0 9px 9px;background:var(--pl)}
.shot a:hover{transform:translateY(-6px)}
.shot img{width:100%;height:auto;border-radius:8px}
.shot figcaption{margin-top:26px}
.badge{display:inline-flex;padding:2px 10px;border:1.5px solid var(--s);border-radius:99px;font:400 .8125rem/1.5 var(--mono)}
.shot strong{display:block;margin-top:10px;font-size:1.0625rem;line-height:1.3}
.shot figcaption p{margin-top:6px;color:var(--fg2)}

/* ---------- Zusammenspiel: zwei Bahnen zwischen weclapp und 3D-Druck ---------- */
.fluss{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px clamp(12px,2vw,26px);margin-top:clamp(30px,5vh,52px)}
.fluss__k{grid-row:1/3;display:grid;gap:3px;min-width:min(170px,40vw);padding:18px 22px;border-radius:18px;color:var(--s)}
.fluss__k--erp{grid-column:1;background:var(--w)}
.fluss__k--dd{grid-column:3;background:var(--o)}
.fluss__k i,.fluss__k em{font:400 .8125rem/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.fluss__k b{font:700 clamp(1.125rem,1rem + .6vw,1.5rem)/1.15 var(--disp);letter-spacing:-.02em}
.fluss__b{grid-column:2;display:grid;gap:7px;min-width:0}
.fluss__b b{font:400 .8125rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.fluss__b i{display:block;height:11px;border-radius:99px;background:var(--w);transform-origin:0 50%}
.fluss__b--hin b::after{content:" →"}
.fluss__b--her{text-align:right}
.fluss__b--her b::before{content:"← "}
.fluss__b--her i{background:var(--o);transform-origin:100% 50%}
.verw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(26px,4vh,44px)}
.vw{display:grid;align-content:start;gap:8px;padding:clamp(18px,2vw,26px);border-radius:18px;background:var(--ton)}
.vw__code{font:400 .875rem/1.3 var(--mono);letter-spacing:.07em}
.vw h3{font-size:1.4375rem;font-weight:700;line-height:1.2}
.vw h3 a{text-decoration:underline;text-decoration-color:var(--o);text-decoration-thickness:3px;text-underline-offset:.22em}
.vw h3 a:hover{background:var(--o);color:var(--s)}
.vw h3 span{margin-left:8px;color:var(--o)}
.vw p:not(.vw__code){color:var(--fg2)}

/* ---------- Technik & Rolle: das Etikett einer Filamentrolle ---------- */
.etk{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,4vw,72px);padding:clamp(22px,4vw,60px);border-radius:26px;background:var(--w);color:var(--s)}
.etk__rolle{display:block;margin-bottom:clamp(16px,2.4vw,30px)}
.etk__rolle .spule{--d:clamp(76px,9vw,128px)}
.etk__k{font:400 .875rem/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.etk h2{margin-top:10px}
.ez{display:grid;grid-template-columns:minmax(116px,.3fr) minmax(0,1fr);gap:16px;padding:13px 0;border-top:1.5px solid rgba(22,19,15,.2)}
.ez:last-child{border-bottom:1.5px solid rgba(22,19,15,.2)}
.ez dt{font:400 .8125rem/2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.ez dd{min-width:0;font-weight:600}
.ez--rolle dd{justify-self:start;padding:1px 10px;border-radius:8px;background:var(--o)}

/* ---------- Weitere Projekte ---------- */
.more__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.2vw,30px);margin-top:clamp(20px,3vh,32px)}
.more__list li{display:grid}
.more__card{display:grid;align-content:start;gap:6px;padding:clamp(20px,3vw,36px);border:2px solid var(--s);border-radius:22px;background:linear-gradient(var(--s),var(--s)) no-repeat 0 100%/100% 0;text-decoration:none;transition:background-size .42s steps(9),color .2s .14s} /* füllt sich beim Überfahren Schicht für Schicht */
.more__card:hover{background-size:100% 100%;color:var(--w)}
.more__card--next{justify-items:end;text-align:right}
.more__dir{font-weight:600}
.more__code{margin-top:10px;font:400 .9375rem/1.3 var(--mono);letter-spacing:.07em}
.more__name{font:700 clamp(1.5rem,1.1rem + 1.6vw,2.5rem)/1.1 var(--disp);letter-spacing:-.03em}
.more__hook{max-width:28em;margin-top:6px;text-wrap:pretty}
.more__all{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:24px;font-weight:700;text-underline-offset:.22em}

/* ---------- Fuß ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:40px var(--gut) 56px}
.foot .back{border-color:var(--w);color:var(--w)}
.foot .back:hover{background:var(--w);color:var(--s)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 28px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.22em}
.foot nav a:hover{color:var(--o)}
.foot__sig{font:400 .8125rem/1.4 var(--mono);letter-spacing:.07em}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width:1099px){
  .regler{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
}
@media (max-width:959px){
  .zwei,.schritt,.kopf--zwei,.etk,.fn__kopf{grid-template-columns:minmax(0,1fr)}
  .fn__kopf{align-items:start}
  .kopf--zwei{align-items:start}
  .schritt--um .schritt__text{order:0}
  .hero__in{min-height:0}
  .buehne--lage,.buehne--plan,.buehne--lager{justify-self:start}
  .buehne--vert,.buehne--druck,.buehne--frei,.buehne--rolle,.buehne--verlauf{max-width:680px}
}
@media (max-width:759px){
  .verw,.more__list{grid-template-columns:minmax(0,1fr)}
  .more__card--next{justify-items:start;text-align:left}
  .fluss{grid-template-columns:minmax(0,1fr)}
  .fluss__k,.fluss__b{grid-column:1;grid-row:auto}
  .fluss__b--hin b::after{content:" ↓"}
  .fluss__b--her{text-align:left}
  .fluss__b--her b::before{content:"↑ "}
  .fluss__b--her i{transform-origin:0 50%}
}
@media (max-width:599px){
  .druck{font-size:25vw}
  .h1-name{--lage:max(5px,.05em);white-space:normal}
}
@media (max-width:619px){
  .regler,.shots{grid-template-columns:minmax(0,1fr)}
  .shots{max-width:440px}
  .buehne--vert,.buehne--druck,.buehne--frei,.rolle{grid-template-columns:minmax(0,1fr)}
  .buehne--frei{gap:26px}
  .rolle__svg{max-width:300px}
  .faecher{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ez{grid-template-columns:minmax(0,1fr);gap:0}
  .lz{grid-template-columns:30px minmax(0,1fr) auto}
  .lz .pille{grid-column:3;grid-row:2;margin-top:3px}
  .lz__kg{grid-row:1;justify-self:end;align-self:end}
}
@media (max-width:419px){
  .farben{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
  .platte{padding:12px}
  .cue i{width:44px;height:44px}
}

/* ---------- Ruhige Fassung ---------- */
@media (prefers-reduced-motion:reduce){
  .back,.cue i,.stapel a,.los-link,.shot a,.more__card{transition:none}
  .shot a:hover{transform:none}
}

/* ---------- Druck ----------
   Auf Papier wird jeder Abschnitt weiß mit dunkler Schrift; die Bühnen (Platten, Karten, Rollen, Bahnen) behalten ihre
   Farben und werden mitgedruckt. Das Ruhebild (Endzustände, keine Pins) setzt das Skript; Karten und Bühnen werden nicht
   zerschnitten, Farbwechsel, Sprungmarken und Knöpfe entfallen. */
@media print{
  html,body{background:#fff}
  .g{--bg:#fff;--fg:#16130f;--fg2:#33302b;--ak:#16130f;--ton:rgba(22,19,15,.07);--linie:rgba(22,19,15,.4)}
  .skip,.top,.cue,.stapel,.los-link,.wechsel,.foot .back{display:none}
  .hero{padding-block:0 20px}
  .hero__in{min-height:0}
  .lage,.fn,.detail,.demo-sec,.bezug,.technik,.more{padding-block:26px}
  .fn__kopf+.schritt,.schritt+.schritt{margin-top:30px}
  .zwei,.schritt,.kopf--zwei{display:block}
  .zwei .buehne,.schritt .buehne{max-width:560px;margin-top:22px}
  .shots{grid-template-columns:repeat(4,minmax(0,1fr))}
  .regler{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etk{padding:0}
  .foot{color:#16130f}
  .buehne,.bett,.achse,.duese,.rk,.shot a,.fluss,.spule,.kicker::before,.ez--rolle dd,.nr span,.ui{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .buehne,.rk,.shot,.vw,.ez,.more__card,.ui,.platte,.karte{break-inside:avoid}
  h2,h3,.kicker,.nr{break-after:avoid}
  h2,h3,.etk__kopf{break-inside:avoid}
  .etk__rolle,.etk__k{break-after:avoid}
  .rolle__svg{overflow:hidden}
  .fluss__k--erp{box-shadow:inset 0 0 0 1.5px #16130f}
  .fluss__b--hin i{background:#16130f}
  body{zoom:.8}
}